/* Inter empaquetada (copiada del panel, OFL; ver fuentes/LICENCIAS.md).
   Es variable: los cuatro pesos salen del mismo fichero. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../../fuentes/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../../fuentes/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Iconos del panel (Material Icons Round, Apache 2.0, ver fuentes/LICENCIAS.md). Un icono es la ligadura de su nombre:
   se pinta desde data-icono con ::before para que el nombre no entre en el texto del botón ni en lo que se copia. */
@font-face { font-family:'Material Icons Round'; font-style:normal; font-weight:400; font-display:block;
  src:url(../../fuentes/material-icons-round.woff2) format('woff2'); }
.icono { display:inline-grid; place-items:center; flex:0 0 auto; width:1.25em; height:1.25em; line-height:1; overflow:hidden; }
.icono::before { content:attr(data-icono); font-family:'Material Icons Round'; font-weight:normal; font-style:normal;
  font-size:1.25em; line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr;
  font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; }

:root {
  /* ESCALA DE ESPACIADO (agente C, 2026-09-08). Base 4 px; mismos nombres
     en panel, POS y KAM. Un valor escrito a mano es el próximo «66 colores». */
  --esp-0: 0.125rem; --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem;
  --esp-5: 1.25rem; --esp-6: 1.5rem; --esp-7: 2rem; --esp-8: 3rem;
  --texto-xs: 0.75rem; --texto-sm: 0.875rem; --texto-md: 1rem; --texto-lg: 1.25rem;
  --texto-xl: 1.5rem; --texto-2xl: 2rem; --texto-3xl: 2.5rem;
  --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-fuerte: 700;
  --interlineado: 1.5; --interlineado-ajustado: 1.25;
  --radio-sm: 0.375rem; --radio-md: 0.5rem; --radio-lg: 0.75rem; --radio-xl: 1rem;
  --radio-2xl: 1.5rem; --radio-pastilla: 999px; --radio-redondo: 50%;
  --control-relleno: var(--esp-2) var(--esp-4);
  --control-alto: 2.5rem;

  /* COLOR. Contrato de tokens del panel (web_panel/src/styles.scss) con
     los mismos nombres; ningún color se escribe fuera de estos dos bloques.
     El tema oscuro redefine los tokens, nunca las reglas. */
  color-scheme: light;
  --marca-navy: #0f172a;
  --marca-ambar-desde: #FEC62B;
  --marca-ambar-hasta: #FA951F;
  --marca-ambar: linear-gradient(135deg, var(--marca-ambar-desde), var(--marca-ambar-hasta));
  --sobre-ambar: #101825;              /* texto sobre el ámbar: 11:1 */
  --color-accent: #a88a6d;
  --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1; --color-slate-400: #64748b; --color-slate-500: #556377;
  --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --surface: #ffffff;
  --surface-canvas: var(--color-slate-50);
  --surface-sunken: var(--color-slate-100);
  --overlay: rgba(15, 23, 42, 0.5);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --color-danger: #dc2626; --color-warning: #b45309; --color-success: #047857;
  --solid-danger: #dc2626;             /* fondo con texto blanco: 4.83:1 */
  --sobre-rojo: #ffffff;
  --badge-ok-bg: #d1fae5; --badge-ok-fg: #064e3b;
  --badge-danger-bg: #fee2e2; --badge-danger-fg: #991b1b;
  --badge-warn-bg: #fef3c7; --badge-warn-fg: #78350f;
  --badge-neutral-bg: #f1f5f9; --badge-neutral-fg: #1f2937;
  /* La cabecera es navy en los dos temas (como el sidebar del panel). */
  --barra-bg: var(--marca-navy);
  --color-stat: var(--barra-bg);
  --barra-fg: #e2e8f0;
  --barra-fg-muted: #94a3b8;
  --barra-borde: rgba(255, 255, 255, 0.08);
  --foco: #FA951F;
  /* Barra lateral: capas blancas sobre el navy, iguales en los dos temas. */
  --barra-hover: rgba(255, 255, 255, 0.07);
  --barra-activo: rgba(255, 255, 255, 0.1);
  --barra-avatar: rgba(255, 255, 255, 0.16);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  /* MOVIMIENTO: dos duraciones y una curva para todo el KAM. Se apagan con prefers-reduced-motion. */
  --duracion-rapida: 140ms;
  --duracion-media: 220ms;
  --curva-salida: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* CAPAS */
  --z-barra: 20; --z-menu: 30; --z-aviso: 40;
  --login-fondo: radial-gradient(ellipse at top, #1b2740, var(--marca-navy) 60%);

  /* Alias cortos que ya usaba el KAM: se conservan para no tocar cada línea. */
  --bg: var(--surface-canvas);
  --card: var(--surface);
  --border: var(--color-slate-200);
  --border-fuerte: var(--color-slate-300);
  --muted: var(--color-slate-500);
  --txt: var(--color-slate-900);
  --ok: var(--color-success);
  --bad: var(--color-danger);
  --warn: var(--color-warning);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-accent: #c9a888;
  /* Rampa invertida por ROL: 50 = más oscuro, 900 = más claro. */
  --color-slate-50: #151d2c; --color-slate-100: #232f43; --color-slate-200: #2f3d54;
  --color-slate-300: #43536d; --color-slate-400: #8b98ad; --color-slate-500: #9aa6ba;
  --color-slate-600: #b0bbcc; --color-slate-700: #c6cfdd; --color-slate-800: #dfe5ee;
  --color-slate-900: #f1f5f9;
  --surface: #1e293b;
  --surface-canvas: #0f1626;
  --surface-sunken: #16202f;
  --overlay: rgba(2, 6, 23, 0.75);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --color-danger: #f87171; --color-warning: #fbbf24; --color-success: #34d399;
  --solid-danger: #b91c1c;
  --badge-ok-bg: rgba(16, 185, 129, 0.16); --badge-ok-fg: #6ee7b7;
  --badge-danger-bg: rgba(239, 68, 68, 0.16); --badge-danger-fg: #fca5a5;
  --badge-warn-bg: rgba(245, 158, 11, 0.16); --badge-warn-fg: #fcd34d;
  --badge-neutral-bg: rgba(148, 163, 184, 0.16); --badge-neutral-fg: #cbd5e1;
  --barra-bg: #0b1120;
  --color-stat: #FEC62B;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:Inter, 'Segoe UI', system-ui, sans-serif;
  font-size:var(--texto-md); line-height:var(--interlineado); -webkit-font-smoothing:antialiased; }
h1, h2, h3 { line-height:var(--interlineado-ajustado); font-weight:var(--peso-fuerte); }
h2 { font-size:var(--texto-md); margin:var(--esp-6) 0 var(--esp-3); }
h3 { font-size:var(--texto-sm); margin:var(--esp-5) 0 var(--esp-2); }
.muted { color:var(--muted); }
.xs { font-size:var(--texto-xs); }
.err { color:var(--bad); font-size:var(--texto-sm); margin:var(--esp-1) 0; min-height:1rem; }
.err:empty { min-height:0; margin:0; }
:focus-visible { outline:2px solid var(--foco); outline-offset:2px; }
/* El título recibe el foco al cambiar de pantalla para el lector; no es un control, no lleva anillo. */
h1[tabindex="-1"]:focus { outline:none; }

/* Cabecera */
header { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:var(--esp-4);
  padding:0 var(--esp-6); min-height:3.5rem; background:var(--barra-bg); color:var(--barra-fg);
  border-bottom:1px solid var(--barra-borde); }
header .marca { display:flex; align-items:center; gap:var(--esp-2); font-weight:var(--peso-fuerte); white-space:nowrap; }
header .marca img { height:28px; width:auto; }
header .marca span { color:var(--barra-fg-muted); font-weight:var(--peso-medio); }
header nav { display:flex; gap:var(--esp-1); flex:1; overflow-x:auto; align-self:stretch; }
header nav button { background:none; color:var(--barra-fg-muted); border-radius:0; padding:0 var(--esp-3);
  min-height:3.5rem; border-bottom:2px solid transparent; font-weight:var(--peso-medio); white-space:nowrap; }
header nav button:hover { color:var(--barra-fg); filter:none; transform:none; box-shadow:none; }
header nav button[aria-current="page"] { color:var(--barra-fg); border-bottom-color:var(--marca-ambar-hasta); }
header .herramientas { display:flex; align-items:center; gap:var(--esp-2); }
header .herramientas .ghost { background:transparent; color:var(--barra-fg-muted); border-color:var(--barra-borde); }
header .herramientas .ghost:hover { color:var(--barra-fg); background:var(--barra-borde); }

.wrap { max-width:1120px; margin:0 auto; padding:var(--esp-7) var(--esp-6) var(--esp-8); }
.cabecera-pagina { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:var(--esp-3); margin-bottom:var(--esp-5); }
.cabecera-pagina h1 { font-size:var(--texto-xl); margin:0; }
.cabecera-pagina .sub { display:flex; align-items:center; flex-wrap:wrap; gap:var(--esp-2);
  margin-top:var(--esp-1); color:var(--muted); font-size:var(--texto-sm); }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radio-xl);
  padding:var(--esp-6); box-shadow:var(--shadow-sm); min-width:0; overflow-wrap:break-word;
  transition:box-shadow var(--duracion-media) ease, border-color var(--duracion-media) ease; }
.card > h2:first-child { margin-top:0; }
.card + .card { margin-top:var(--esp-4); }
/* Ficha del negocio (Santiago, 20/10): cada tarjeta se pliega desde su título, que es un <button> dentro del h2. El
   botón no se ve como botón: hereda el título tal cual, y la flecha va a la derecha. Plegada, solo queda el título. */
.card > h2 > .plegar { display:flex; flex-direction:row-reverse; justify-content:space-between; width:100%;
  min-height:var(--control-alto); padding:0; border:0; background:transparent; color:inherit; font:inherit;
  text-align:left; box-shadow:none; filter:none; cursor:pointer; }
.card > h2 > .plegar:hover:not(:disabled) { filter:none; box-shadow:none; }
.card > h2 > .plegar:hover .plegar-flecha { color:var(--txt); }
.plegar-flecha { color:var(--muted); transition:transform var(--duracion-rapida) var(--curva-salida); }
.card.plegada .plegar-flecha { transform:rotate(-90deg); }
.card.plegada > h2 { margin-bottom:0; }
.card.plegada > :not(h2) { display:none !important; }
.plegar-alerta { color:var(--bad); margin-left:var(--esp-2); vertical-align:middle; }
.angosta { max-width:640px; }

/* Formularios */
input, select, button { font:inherit; }
label { display:block; font-size:var(--texto-sm); font-weight:var(--peso-medio); color:var(--color-slate-700); margin-bottom:var(--esp-1); }
input, select { display:block; background:var(--surface); border:1px solid var(--border-fuerte); color:var(--txt);
  border-radius:var(--radio-md); padding:var(--esp-2) var(--esp-3); min-height:var(--control-alto); width:100%;
  margin:var(--esp-1) 0 var(--esp-3); font-size:var(--texto-sm); }
input:focus, select:focus { outline:none; border-color:var(--foco); box-shadow:0 0 0 3px color-mix(in srgb, var(--foco) 25%, transparent); }
input[type=checkbox] { display:inline-block; width:1rem; min-height:0; height:1rem; margin:0; accent-color:var(--marca-ambar-hasta); }
input:disabled, select:disabled { opacity:.6; cursor:not-allowed; }
.ayuda { color:var(--muted); font-size:var(--texto-xs); font-weight:var(--peso-normal); margin:calc(-1 * var(--esp-2)) 0 var(--esp-3); }
fieldset { border:0; padding:0; margin:0 0 var(--esp-5); }
legend { font-size:var(--texto-xs); font-weight:var(--peso-semi); text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:0; margin-bottom:var(--esp-3); }
details { border-top:1px solid var(--border); padding-top:var(--esp-3); margin-top:var(--esp-3); }
summary { cursor:pointer; font-weight:var(--peso-semi); font-size:var(--texto-sm); }
.check { display:flex; gap:var(--esp-2); align-items:center; cursor:pointer; margin:0; font-weight:var(--peso-normal); color:var(--txt); }
.row > .check { flex-shrink:0; white-space:nowrap; }

/* Botones: primario ámbar de marca; .ghost secundario; .peligro rojo. */
button { display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-2);
  background:var(--marca-ambar); color:var(--sobre-ambar); border:1px solid transparent; border-radius:var(--radio-md);
  padding:var(--control-relleno); min-height:var(--control-alto); font-weight:var(--peso-semi); font-size:var(--texto-sm); cursor:pointer;
  transition:background-color var(--duracion-rapida) ease,color var(--duracion-rapida) ease,border-color var(--duracion-rapida) ease,box-shadow var(--duracion-rapida) ease,filter var(--duracion-rapida) ease; }
button:hover:not(:disabled) { filter:brightness(.96); box-shadow:var(--shadow-sm); }
button:active:not(:disabled) { filter:brightness(.9); box-shadow:none; }
button.ghost { background:var(--surface); color:var(--txt); border-color:var(--border-fuerte); }
button.ghost:hover:not(:disabled) { background:var(--surface-sunken); border-color:var(--color-slate-400); filter:none; }
button.peligro { background:var(--solid-danger); color:var(--sobre-rojo); }
button.peligro:hover:not(:disabled), button.ghost.peligro:hover:not(:disabled) { background:var(--solid-danger); color:var(--sobre-rojo); filter:brightness(.92); }
button.sm { min-height:2rem; padding:var(--esp-1) var(--esp-3); font-size:var(--texto-xs); }
button.ancho { width:100%; }
button:focus-visible { outline:3px solid color-mix(in srgb,var(--foco) 45%,transparent); outline-offset:2px; }
button:disabled { opacity:.55; cursor:not-allowed; filter:none; transform:none; box-shadow:none; }
button.peligro:disabled, button.ghost.peligro:disabled { background:var(--surface-sunken); color:var(--muted); border-color:var(--border-fuerte); opacity:1; }
.acciones { display:flex; gap:var(--esp-2); flex-wrap:wrap; align-items:center; margin-top:var(--esp-4); }
a.link { color:var(--txt); cursor:pointer; text-decoration:none; font-weight:var(--peso-semi); }
a.link:hover { text-decoration:underline; }
a.volver { display:inline-block; color:var(--muted); cursor:pointer; font-size:var(--texto-sm); margin-bottom:var(--esp-3); }
a.volver:hover { color:var(--txt); }

/* Tablas y filas */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:var(--esp-3); border-bottom:1px solid var(--border); font-size:var(--texto-sm); vertical-align:middle; }
th { color:var(--muted); font-weight:var(--peso-semi); font-size:var(--texto-xs); text-transform:uppercase; letter-spacing:.05em; background:var(--surface-sunken); }
tbody tr:last-child td { border-bottom:0; }
tr.clicable { cursor:pointer; }
tr.clicable td { transition:background-color var(--duracion-rapida) ease; }
tr.clicable:hover td { background:var(--surface-sunken); }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tabla-marco { border:1px solid var(--border); border-radius:var(--radio-lg); overflow-x:auto; background:var(--card); }
.tabla-marco table { margin:0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:var(--esp-4); padding:var(--esp-3) 0;
  border-bottom:1px solid var(--border); font-size:var(--texto-sm); margin:0; }
.row:last-child { border-bottom:0; }
.row select { width:220px; margin:0; flex-shrink:0; }

/* Pastillas */
.pill { display:inline-block; padding:var(--esp-0) var(--esp-2); border-radius:var(--radio-pastilla); font-size:var(--texto-xs);
  font-weight:var(--peso-semi); background:var(--badge-neutral-bg); color:var(--badge-neutral-fg); white-space:nowrap; }
.pill.ok { background:var(--badge-ok-bg); color:var(--badge-ok-fg); }
.pill.bad { background:var(--badge-danger-bg); color:var(--badge-danger-fg); }
.pill.warn, .pill.alerta { background:var(--badge-warn-bg); color:var(--badge-warn-fg); }

/* Avisos en bloque */
.aviso { border:1px solid var(--border); border-left:3px solid var(--muted); background:var(--surface-sunken);
  border-radius:var(--radio-md); padding:var(--esp-3) var(--esp-4); font-size:var(--texto-sm); }
.aviso.alerta { border-left-color:var(--warn); }
.aviso.ok { border-left-color:var(--ok); }
.aviso.error { border-left-color:var(--bad); }
.ok-texto { color:var(--ok); }

/* Rejillas */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--esp-4); }
.detalle { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--esp-4); align-items:start; }
/* Las tarjetas que llegan a su hueco (crédito, ficha fiscal, prueba) no son hermanas de las demás: el espacio lo da la
   columna, y el hueco vacío no lo cuenta (Santiago, 26/10). */
.detalle > div { display:flex; flex-direction:column; gap:var(--esp-4); }
.detalle > div > :empty { display:none; }
.detalle > div > .card + .card { margin-top:0; }
.rejilla-modulos { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); align-items:start; gap:var(--esp-2) var(--esp-4); margin:var(--esp-3) 0 var(--esp-4); }
.rejilla-modulos .check { align-items:flex-start; min-width:0; padding:var(--esp-1) 0; font-size:var(--texto-sm); line-height:1.4; }
.rejilla-modulos .check > input[type=checkbox] { flex:0 0 1rem; margin-top:0.18rem; }
.rejilla-modulos .check > span { min-width:0; }
@media (max-width: 1200px) { .rejilla-modulos { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rejilla-modulos { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rejilla-modulos { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .rejilla-modulos { grid-template-columns:1fr; } }
.grupo { font-size:var(--texto-xs); font-weight:var(--peso-semi); text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:var(--esp-4) 0 0; }

/* Buscador */
.buscador { max-width:320px; margin:0; }

/* Login */
.login { min-height:100vh; display:grid; place-items:center; padding:var(--esp-5);
  background:var(--login-fondo); }
.login-box { width:100%; max-width:380px; }
.login-box img { display:block; height:64px; width:auto; margin:0 auto var(--esp-3); }
.login-box h1 { text-align:center; font-size:var(--texto-lg); margin:0 0 var(--esp-5); }

/* Diálogo y aviso breve */
.dialogo { background:var(--card); color:var(--txt); border:1px solid var(--border); border-radius:var(--radio-lg);
  padding:var(--esp-6); max-width:480px; box-shadow:var(--shadow-lg); }
.dialogo[open] { animation:dialogo-entra var(--duracion-media) var(--curva-salida); }
.dialogo::backdrop { background:var(--overlay); backdrop-filter:blur(6px); animation:fundido var(--duracion-media) ease; }
.dialogo h3 { margin:0 0 var(--esp-3); font-size:var(--texto-lg); }
.dialogo p { margin:0 0 var(--esp-5); font-size:var(--texto-sm); }
.dialogo .acciones { justify-content:flex-end; margin:0; }
.toast { display:flex; align-items:center; animation:aviso-entra var(--duracion-media) var(--curva-salida); background:var(--barra-bg); color:var(--barra-fg);
  padding:var(--esp-3) var(--esp-5); border-radius:var(--radio-md); box-shadow:var(--shadow-lg); font-size:var(--texto-sm);
  max-width:min(420px, calc(100vw - 2 * var(--esp-5))); }

/* Utilidades de presentación usadas por las vistas generadas en JavaScript. */
#app .mt-0 { margin-top: 0; }
#app .mt-1 { margin-top: var(--esp-1); }
#app .mt-2 { margin-top: var(--esp-2); }
#app .mt-3 { margin-top: var(--esp-3); }
#app .mt-4 { margin-top: var(--esp-4); }
#app .mb-2 { margin-bottom: var(--esp-2); }
#app .mb-4 { margin-bottom: var(--esp-4); }
#app .m-0 { margin: 0; }
#app .my-2 { margin: var(--esp-2) 0; }
#app .text-sm { font-size: var(--texto-sm); }
#app .text-ok { color: var(--ok); }
#app .nowrap { white-space: nowrap; }
#app .plans-intro { max-width: 720px; margin-bottom: var(--esp-5); font-size: var(--texto-sm); }
#app .copy-row { display: flex; gap: var(--esp-2); margin-top: var(--esp-1); }
#app .danger-action { color: var(--bad); }

@media (max-width: 800px) {
  .grid, .detalle { grid-template-columns:1fr; }
  header { padding:0 var(--esp-4); gap:var(--esp-2); flex-wrap:wrap; }
  header .marca span { display:none; }
  header nav { order:3; flex-basis:100%; }
  header nav button { min-height:2.75rem; }
  .wrap { padding:var(--esp-5) var(--esp-4) var(--esp-7); }
  .card { padding:var(--esp-5); }
  .row { flex-wrap:wrap; }
  .row select { width:100%; }
  .buscador { max-width:none; }
}

/* El ojito de los campos de clave (Santiago, 17/10): el botón va dentro del campo, a la derecha. */
.ojo-caja { display:block; position:relative; width:100%; }
.ojo-caja input { padding-right:calc(var(--control-alto) + var(--esp-1)); }
button.ojo { position:absolute; right:calc(-1 * var(--control-alto)); top:var(--esp-1); bottom:var(--esp-3); width:var(--control-alto); min-height:0; height:auto;
  padding:0; background:none; border:none; color:var(--muted); display:grid; place-items:center; }
button.ojo:hover { color:var(--txt); filter:none; }

/* Esqueleto de carga, avisos y texto solo para el lector (3.37.0). */
.solo-lector { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.esqueleto { display:grid; gap:var(--esp-3); padding:var(--esp-2) 0; }
.esqueleto-linea, .esqueleto-bloque { border-radius:var(--radio-md); background:linear-gradient(90deg, var(--surface-sunken) 0%, var(--border) 50%, var(--surface-sunken) 100%);
  background-size:200% 100%; animation:brillo 1.2s ease-in-out infinite; }
.esqueleto-linea { height:1rem; width:40%; }
.esqueleto-linea.ancha { height:1.75rem; width:28%; }
.esqueleto-bloque { height:16rem; border-radius:var(--radio-lg); }
@keyframes brillo { from { background-position:100% 0; } to { background-position:-100% 0; } }
.avisos { position:fixed; right:var(--esp-5); bottom:var(--esp-5); z-index:var(--z-aviso); display:grid; gap:var(--esp-2); }
.toast-cerrar { min-height:0; padding:var(--esp-1); margin-left:var(--esp-3); background:transparent; color:var(--barra-fg-muted); border:0; vertical-align:middle; }
.toast-cerrar:hover:not(:disabled) { color:var(--barra-fg); filter:none; box-shadow:none; }
.aviso.error p { margin:0 0 var(--esp-3); }
.repintando .wrap { animation:none !important; }

/* MOVIMIENTO (3.37.0): el contenido entra al cambiar de pantalla, los diálogos y avisos aparecen desde su sitio.
   Solo opacidad y transform; nada que mueva la maqueta. */
@keyframes entrar { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes fundido { from { opacity:0; } to { opacity:1; } }
@keyframes dialogo-entra { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@keyframes aviso-entra { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important; }
}