/* Hoja base
   Mismo sistema visual del Portal de Solicitudes: sobrio y editorial, fondo
   hueso, tinta casi negra y un dorado apagado como acento. Las piezas
   (tarjeta, botón, chip, tabla, modal, aviso) se llaman igual en los dos
   sistemas, así el personal que usa uno reconoce el otro.
   Lo propio del punto de venta vive en pos.css. */

:root {
  --bg: #efece4;
  --surface: #ffffff;
  --surface-2: #f8f6f0;
  --line: #e0dbcf;
  /* El borde del campo es la línea que dice dónde se escribe, así que llega a
     3:1 sobre la tarjeta —lo que pide WCAG para un control—. Antes era #cbc5b6
     y daba 1.7:1: se veía en el monitor del escritorio y desaparecía en una
     tablet con el sol encima. --line, el separador, sigue siendo suave: ese
     no es un control, es una pausa. */
  --line-2: #999078;
  --ink: #1a1814;
  --ink-2: #4c483f;
  --ink-3: #7a7568;
  --accent: #7d620c;
  --accent-soft: #f1e5bf;
  --focus: #b8942a;

  --ok: #1a6a40;      --ok-bg: #dcefe3;
  --warn: #7f5200;    --warn-bg: #f9eccd;
  --obs: #9c3d14;     --obs-bg: #fbe3d7;
  --info: #1b54a0;    --info-bg: #dde8f8;
  --bad: #9c2626;     --bad-bg: #f8dddd;
  --mute: #5f5b52;    --mute-bg: #e8e4da;

  --r: 10px;
  --r-sm: 7px;
  --shadow: 0 1px 3px rgba(26, 24, 20, .07), 0 1px 1px rgba(26, 24, 20, .04);
  --shadow-lg: 0 18px 50px -12px rgba(26, 24, 20, .28);
  --hover: #f4ecd4;
  --ring: rgba(176, 138, 30, .32);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Piezas que se invierten entre día y noche */
  --inv-bg: var(--ink);   --inv-ink: #fff;
  --pri-bg: var(--ink);   --pri-ink: #fff;   --pri-hover: #000;
  --ok-solid: #1a6a40;    --obs-solid: #9c3d14;   --bad-solid: #9c2626;
  --papel: #fff;

  /* Punto de venta: el dedo necesita más que el mouse */
  --toque: 44px;

  color-scheme: light;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --bg: #13110d;
  --surface: #1c1a14;
  --surface-2: #232019;
  --line: #332f26;
  --line-2: #746d5b;
  --ink: #ece7d8;
  --ink-2: #c2bba7;
  --ink-3: #8f8877;
  --accent: #c9a63a;
  --accent-soft: #3b3218;
  --focus: #dcb94e;
  --hover: #2a2517;
  --ring: rgba(201, 166, 58, .32);

  --ok: #74c79b;    --ok-bg: #15301f;
  --warn: #e3ba57;  --warn-bg: #322711;
  --obs: #e59262;   --obs-bg: #362110;
  --info: #86b4f2;  --info-bg: #16253c;
  --bad: #f09292;   --bad-bg: #351a1a;
  --mute: #b0a998;  --mute-bg: #272419;

  --inv-bg: #2b2820;    --inv-ink: #ece7d8;
  --pri-bg: #c9a63a;    --pri-ink: #1a1814;    --pri-hover: #dcb94e;
  --ok-solid: #2f8b5d;  --obs-solid: #b4551f;  --bad-solid: #a83434;

  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px -12px rgba(0, 0, 0, .7);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-3); }
.soft { color: var(--ink-2); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.stack > * + * { margin-top: 16px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Estructura ---------- */

#app { height: 100%; }
/**
 * El caparazón: menú fijo a la izquierda, contenido que se desplaza solo.
 *
 * Los `minmax(0, …)` y los `min-height: 0` no son adorno. Una fila de rejilla y
 * un elemento flexible miden por defecto AL MENOS lo que mide su contenido, así
 * que una pantalla larga —un reporte, la ficha de un evento, el tablero de
 * barra— estiraba la fila entera y arrastraba el menú fuera de la vista al
 * desplazarse. Con esto la fila nunca pasa del alto de la ventana y cada
 * módulo se desplaza por dentro, que es lo que ya esperaba su propio CSS.
 */
.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}
.shell > div { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.side {
  height: 100%; min-height: 0;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 12px;
  overflow-y: auto;
}
:root[data-tema="oscuro"] .side { background: #191710; }

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; background: var(--ink);
  display: grid; place-items: center; flex: none;
}
.brand b { display: block; font-size: 14px; line-height: 1.2; }
.brand small { color: var(--ink-3); font-size: 11.5px; letter-spacing: .02em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button, .nav a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none;
  text-align: left; text-decoration: none; color: var(--ink-2); font-weight: 500;
}
.nav button:hover, .nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav .on { background: var(--accent-soft); color: var(--ink); }
.nav .on svg { color: var(--accent); }
.nav button:disabled { color: var(--ink-3); opacity: .5; cursor: default; }
.nav button:disabled:hover { background: none; }
.nav .count {
  margin-left: auto; background: var(--inv-bg); color: var(--inv-ink);
  font-size: 11px; font-weight: 600; border-radius: 20px; padding: 0 7px; line-height: 18px;
}
.nav-sep { height: 1px; background: var(--line); margin: 12px 10px; }
.nav-t { padding: 14px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.me { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 8px 0; }
.me b { display: block; font-size: 13px; }
.me small { color: var(--ink-3); display: block; font-size: 12px; }
.me .row { margin-top: 10px; gap: 6px; }

.topbar { display: none; }

.main { min-width: 0; min-height: 0; flex: 1; overflow-y: auto; padding: 24px 28px 40px; }
.main.plano { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Página con desplazamiento propio dentro de una vista plana (arqueo, reportes). */
.pagina { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) { .pagina { padding: 16px 14px 32px; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h1 { font-size: 22px; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- Tarjetas ---------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.card-h h2, .card-h h3 { font-size: 14.5px; }
.card-h .sub { color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.card-b { padding: 18px; }
.card-b.tight { padding: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.cols { display: grid; gap: 16px; }
.cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.primary { background: var(--pri-bg); border-color: var(--pri-bg); color: var(--pri-ink); }
.btn.primary:hover { background: var(--pri-hover); border-color: var(--pri-hover); color: var(--pri-ink); box-shadow: 0 0 0 3px var(--ring); }
.btn.ok { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; }
.btn.ok:hover { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; filter: brightness(1.12); box-shadow: 0 0 0 3px var(--ring); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); border-color: #e4b4b4; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--mute-bg); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.lg { height: var(--toque); padding: 0 18px; font-size: 15px; }
.btn.xl { height: 54px; padding: 0 20px; font-size: 16px; font-weight: 600; }
.btn.block { width: 100%; }
.btn.ic { width: 36px; padding: 0; flex: none; }
.btn.ic.sm { width: 30px; }
.btn.ic.lg { width: var(--toque); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { background: var(--surface); border-color: var(--line-2); box-shadow: none; }
.btn svg { flex: none; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------- Formularios ---------- */

.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > label, .lbl { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.hint { font-size: 12px; color: var(--ink-3); }
.in, select.in, textarea.in {
  width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
textarea.in { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
.in:hover { border-color: var(--ink-3); }
.in:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
/* Un campo bloqueado tiene que verse bloqueado: si no, alguien escribe encima
   de un dato ya cerrado y no entiende por que no pasa nada. */
.in:disabled { background: var(--surface-2); color: var(--ink-3); cursor: default; }
.in:disabled:hover { border-color: var(--line-2); }
.in.money, .in.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
/* Un dato que ocupa el lugar de un campo pero no se decide acá: se ve como
   campo para que la ficha no se descuadre, y apagado para que nadie lo intente. */
.in.quieto { display: flex; align-items: center; background: var(--surface-2); color: var(--ink-2); font-weight: 600; }

.in.grande { height: 56px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.section-t {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.section-t::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- Chips y etiquetas ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 20px;
  font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--mute-bg); color: var(--mute);
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.obs { background: var(--obs-bg); color: var(--obs); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.plano::before { display: none; }
.tag {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent);
}

/* ---------- Tablas ---------- */

.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.go { cursor: pointer; }
.tbl tbody tr.go:hover td { background: var(--surface-2); }
.tbl .t-main { font-weight: 500; }
.tbl .t-sub { color: var(--ink-3); font-size: 12.5px; }
.tbl tfoot td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--line); }
.tbl th.right, .tbl td.right { text-align: right; }
:root[data-tema="oscuro"] .tbl th { background: var(--surface-2); color: var(--ink-2); }

.empty { padding: 38px 20px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.empty svg { color: var(--line-2); margin-bottom: 10px; }
.empty p { max-width: 44ch; margin: 0 auto; font-size: 13px; }
.empty .btn { margin-top: 14px; }

/* ---------- Filtros, pestañas, segmentos ---------- */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: 0; padding: 10px 14px; color: var(--ink-3); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs .on { color: var(--ink); border-bottom-color: var(--ink); }
.tabs button:hover { color: var(--ink); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters .in { width: auto; height: 34px; }
.search { position: relative; flex: 1; min-width: 200px; }
.search .in { width: 100%; padding-left: 34px; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }

.seg { display: inline-flex; background: var(--mute-bg); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 7px 13px; border-radius: 6px; font-weight: 500; color: var(--ink-2); font-size: 13px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
:root[data-tema="oscuro"] .seg { background: #26231b; }
:root[data-tema="oscuro"] .seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* ---------- Indicadores ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { padding: 15px 16px; }
.kpi small { display: block; color: var(--ink-3); font-size: 12.5px; }
.kpi b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12.5px; color: var(--ink-2); }
.kpi.acento b { color: var(--accent); }
.kpi.malo b { color: var(--bad); }
.kpi.bueno b { color: var(--ok); }

.sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-bottom: 1px solid var(--line); }
.sum > div { padding: 12px 18px; border-right: 1px solid var(--line); }
.sum > div:last-child { border-right: 0; }
.sum small { display: block; color: var(--ink-3); font-size: 12px; }
.sum b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sum b.acento { color: var(--accent); }

.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.money-box { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 12px 14px; font-size: 13.5px; }
.money-box .l { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.money-box .l span:last-child { font-variant-numeric: tabular-nums; }
.money-box .l.t { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 8px; font-weight: 600; font-size: 15px; }
.money-box .l.neg span:last-child { color: var(--obs); }

.note { display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--r); border: 1px solid; font-size: 13.5px; line-height: 1.45; }
.note svg { flex: none; margin-top: 1px; }
.note.obs { background: var(--obs-bg); border-color: #f1cdb9; color: #6d2d10; }
.note.info { background: var(--info-bg); border-color: #c9daf3; color: #173f73; }
.note.warn { background: var(--warn-bg); border-color: #efd9a8; color: #5e3e00; }
.note.ok { background: var(--ok-bg); border-color: #c3e0cd; color: #164e31; }
.note.bad { background: var(--bad-bg); border-color: #efc5c5; color: #6e1d1d; }
.note b { font-weight: 600; }
:root[data-tema="oscuro"] .note { border-color: currentColor; }
:root[data-tema="oscuro"] .note.obs, :root[data-tema="oscuro"] .note.info,
:root[data-tema="oscuro"] .note.warn, :root[data-tema="oscuro"] .note.ok,
:root[data-tema="oscuro"] .note.bad { color: var(--ink); }

/* ---------- Modal y avisos ---------- */

.modal-bg {
  position: fixed; inset: 0; z-index: 70; background: rgba(26, 24, 20, .38);
  display: grid; place-items: center; padding: 20px; animation: fade .15s ease;
}
:root[data-tema="oscuro"] .modal-bg { background: rgba(0, 0, 0, .62); }
.modal {
  width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); animation: rise .18s ease;
}
.modal.lg { width: min(760px, 100%); }
.modal-h { padding: 18px 20px 4px; }
.modal-h h3 { font-size: 16.5px; }
.modal-h p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }
.modal-b { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; gap: 10px; align-items: flex-start; max-width: 380px; padding: 11px 14px; border-radius: 9px;
  background: var(--inv-bg); color: var(--inv-ink); box-shadow: var(--shadow-lg); font-size: 13.5px; animation: rise .2s ease;
}
.toast.err { background: #7a1f1f; color: #fff; }
.toast.oro { background: var(--accent); color: #fff; }
:root[data-tema="oscuro"] .toast.oro { color: #1a1814; }
.toast b { display: block; font-weight: 600; }
.toast svg { flex: none; margin-top: 1px; }

/* ---------- Teclado numérico ---------- */

.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numpad button {
  height: 52px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--mono); font-size: 19px; font-weight: 500;
  transition: background .1s, border-color .1s;
}
.numpad button:hover { background: var(--surface-2); border-color: var(--ink-3); }
.numpad button:active { background: var(--hover); }
.numpad button.tenue { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-2); }

/* ---------- Ingreso ---------- */

.login { height: 100%; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-art {
  background: #1a1814; color: #efe9d8; padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.login-art::after {
  content: ''; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(201, 166, 58, .25); box-shadow: 0 0 0 60px rgba(201, 166, 58, .04), 0 0 0 120px rgba(201, 166, 58, .03);
}
.login-art .brand b, .login-art .brand small { color: #efe9d8; }
.login-art .brand-mark { background: #efe9d8; }
.login-art h2 { font-size: 34px; line-height: 1.15; font-weight: 600; max-width: 460px; color: #fff; letter-spacing: -.02em; }
.login-art p { color: #b9b19b; max-width: 440px; font-size: 15px; margin-top: 14px; }
.login-art ul { margin: 26px 0 0; display: grid; gap: 12px; color: #d9d2bd; }
.login-art li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.login-art li i {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(201, 166, 58, .5);
  display: grid; place-items: center; color: #c9a63a; font-style: normal; flex: none;
}
.login-form { display: grid; place-items: center; padding: 40px 24px; overflow-y: auto; }
.login-form > div { width: min(400px, 100%); }
.login-form h1 { font-size: 24px; margin-bottom: 4px; }
.login-form .sub { color: var(--ink-2); margin-bottom: 22px; }

.gente { display: grid; gap: 8px; }
.gente-g + .gente-g { margin-top: 14px; }
.gente-t { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.persona {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .12s, background .12s;
}
.persona:hover { border-color: var(--ink-3); background: var(--surface-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; color: #fff; background: var(--ink);
}
.persona b { display: block; font-size: 13.5px; font-weight: 600; }
.persona small { color: var(--ink-3); font-size: 12px; }

.pin-puntos { display: flex; gap: 10px; justify-content: center; margin: 18px 0 14px; }
.pin-punto { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background .12s, border-color .12s; }
.pin-punto.lleno { background: var(--accent); border-color: var(--accent); }
.pin-error { color: var(--bad); font-size: 13px; text-align: center; min-height: 20px; }

/* ---------- Carga ---------- */

.cargando { display: grid; place-items: center; height: 100%; gap: 12px; color: var(--ink-3); }
.girador { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Desplegable propio ---------- */
/* El <select> del sistema abre una lista que dibuja el sistema operativo: no
   acepta los colores de la aplicación y en modo noche queda un panel blanco
   sobre fondo oscuro. Esta lista es nuestra, y va en el <body> con posición
   fija porque su botón puede vivir dentro de algo que tiene scroll. */

.desp {
  display: inline-flex; align-items: center; gap: 6px; justify-content: space-between;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 10px; cursor: pointer; min-width: 0; text-align: left;
}
.desp:hover { border-color: var(--ink-3); }
.desp:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--ring); }
.desp[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.desp svg:last-child { flex: none; color: var(--ink-3); transition: transform .14s ease; }
.desp-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.desp-menu {
  position: fixed; z-index: 80; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
}
.desp-op {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; font: inherit; font-size: 13.5px; text-align: left;
  background: none; border: 0; border-radius: var(--r-sm); padding: 8px 10px;
  color: var(--ink-2); cursor: pointer;
}
.desp-op .desp-op-t { display: block; }
.desp-op small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.desp-op svg { flex: none; color: var(--accent); }
.desp-op.on { color: var(--ink); font-weight: 600; }
/* Resaltado por teclado y por mouse en la misma clase: la lista siempre tiene
   una sola fila marcada, se llegue como se llegue. */
.desp-op.en { background: var(--hover); color: var(--ink); }

/* ---------- Responsivo ---------- */

@media (max-width: 980px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .cols.c2, .cols.c3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* La barra lateral pasa a ser un cajón flotante, así que la rejilla se queda
     con una sola columna. El alto lo sigue gobernando la regla de arriba. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; z-index: 60; left: 0; top: 0; width: 264px; height: 100%;
    transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg);
  }
  .shell.menu .side { transform: none; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 9px 14px;
    padding-top: calc(9px + env(safe-area-inset-top, 0px));
  }
  .main { padding: 16px 14px 32px; }
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
}