:root{--azul:#071F3A;--azul2:#0d3560;--acento:#f5a300;--fondo:#f4f6fa;--tarjeta:#fff;--texto:#14213d;--suave:#5b6b82;--borde:#dde3ee;--ok:#0a7d4b;--error:#b3261e;--radio:12px}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto);line-height:1.45}
a{color:var(--azul2)}
h1{font-size:1.4rem;margin:.2rem 0 1rem}h2{font-size:1.1rem;margin:1.4rem 0 .6rem}
.suave{color:var(--suave);font-size:.9rem}
code{background:#eef2f8;padding:.1rem .35rem;border-radius:6px;font-size:.82rem;word-break:break-all}
.barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.75rem;background:var(--azul);color:#fff;padding:.6rem 1rem}
.marca{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.04em}.marca small{font-weight:400;opacity:.7;margin-left:.4rem}
.hamburguesa{font-size:1.5rem;cursor:pointer;line-height:1;padding:.25rem .5rem;border-radius:8px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.salir{margin-left:auto;display:flex;align-items:center;gap:.6rem}.quien{display:none;font-size:.9rem;opacity:.85}
.menu{display:none;flex-direction:column;background:var(--azul2);padding:.5rem}
.menu a{color:#fff;text-decoration:none;padding:.85rem 1rem;border-radius:8px}
.menu a.activo{background:rgba(255,255,255,.14);font-weight:700}
.menu-toggle:checked ~ .menu{display:flex}
.contenido{max-width:960px;margin:0 auto;padding:1rem 1rem 3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.1rem;border-radius:10px;border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn-primario{background:var(--azul);color:#fff}.btn-primario:hover{background:var(--azul2)}
.btn-claro{background:#fff;color:var(--azul);border-color:var(--borde)}
.btn-sm{min-height:38px;padding:.3rem .8rem;font-size:.9rem}
.formulario{display:flex;flex-direction:column;gap:.9rem;max-width:520px;background:var(--tarjeta);padding:1.1rem;border-radius:var(--radio);border:1px solid var(--borde)}
.formulario label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.92rem}
.formulario .check{flex-direction:row;align-items:center;gap:.5rem}
input,select{font:inherit;padding:.65rem .75rem;border:1px solid var(--borde);border-radius:10px;background:#fff;min-height:44px;width:100%}
input[type=checkbox]{width:auto;min-height:0}
input:focus-visible,select:focus-visible,.btn:focus-visible,a:focus-visible,.chip:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.aviso{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;border:1px solid}
.aviso-ok{background:#e7f6ee;border-color:#b6e2cb;color:#064d2e;word-break:break-word}
.aviso-error{background:#fdecea;border-color:#f3c0bb;color:var(--error)}
.aviso-info{background:#e8f1fb;border-color:#bcd4f1;color:#0d3560}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:1rem;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.tarjeta b{font-size:1.8rem;color:var(--azul)}.tarjeta span{color:var(--suave)}
.lista-tarjetas{display:flex;flex-direction:column;gap:.6rem}
.fila{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:.8rem 1rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center}
.fila-col{flex-direction:column;align-items:stretch}.fila-sup{display:flex;justify-content:space-between;gap:.6rem;align-items:center;flex-wrap:wrap}
.fila.apagado{opacity:.6}.acciones{display:flex;gap:.4rem;flex-wrap:wrap}
.etiqueta{display:inline-block;background:#eef2f8;color:var(--azul2);border-radius:999px;padding:.05rem .6rem;font-size:.75rem;font-weight:700;vertical-align:middle}
.cabecera{display:flex;justify-content:space-between;align-items:center;gap:1rem}.cabecera h1{margin:0}
.buscar{margin:1rem 0}.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.chip{border:1px solid var(--borde);background:#fff;color:var(--suave);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:38px}
.chip.on{background:var(--azul);border-color:var(--azul);color:#fff}
.detalle{display:block;margin-top:.3rem}.paginacion{display:flex;gap:1rem;align-items:center;justify-content:center;margin-top:1rem}
.simple{background:linear-gradient(160deg,var(--azul),var(--azul2));min-height:100vh}
.caja-centro{max-width:440px;margin:0 auto;padding:2rem 1rem;background:transparent}
.simple .formulario{max-width:none}.simple h1,.simple p{color:#fff}.simple .formulario h2{color:var(--texto)}
.logo{font-size:2rem;font-weight:800;letter-spacing:.08em;color:#fff;text-align:center;margin-top:2rem}.simple .suave{color:#cfd9ea;text-align:center}
@media(min-width:900px){
  .hamburguesa{display:none}.quien{display:inline}
  body:not(.simple){display:grid;grid-template-columns:230px 1fr;grid-template-rows:auto 1fr}
  .barra{grid-column:1/3}.menu{display:flex;grid-row:2;min-height:calc(100vh - 56px);position:sticky;top:56px;align-self:start}
  .contenido{grid-row:2;grid-column:2;width:100%;margin:0;max-width:none;padding:1.5rem 2rem}
}