@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@500;600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* =========================================================================
   DESPACHO · Estructuralismo suave
   -------------------------------------------------------------------------
   · Neutros de sesgo FRÍO (plata / blanco roto). Nunca crema.
   · Un solo acento: GUINDA #9F2241, el color institucional del SAT y de la
     papelería federal mexicana. En un despacho el guinda ya significa
     "esto viene del fisco", así que no decora: marca lo que el fisco cobra.
   · Doble bisel: nada se apoya plano sobre el fondo. Carcasa + núcleo,
     con radios concéntricos.
   · Sombras ambientales multicapa, teñidas al azul-gris del fondo.
     Cero bordes grises de 1px como recurso de separación.
   · Tipografía: Wix Madefor Display titula y da la cifra;
     Instrument Sans narra. El TAMAÑO del dato es su gravedad.
   ========================================================================= */

:root{
  /* --- neutros --- */
  --papel:#edeff2;      /* fondo de la app */
  --bg:var(--papel);
  --banda:#e3e7eb;      /* cavidades, carcasas, rayado de tabla */
  --surface:#fcfdfe;    /* núcleo de las tarjetas */
  --surface-2:#f5f7f8;
  --raise:#f5f7f8;
  --user:#e3e7eb;
  --field:#fcfdfe;

  /* --- tinta (negro azulado) --- */
  --ink:#12171c;
  --ink-2:#46525c;
  --muted:#7a868f;
  --tenue:#a6b0b8;

  /* --- separadores: casi invisibles, la sombra hace el trabajo --- */
  --line:rgba(18,32,46,.085);
  --line-2:rgba(18,32,46,.05);
  --hair:rgba(18,32,46,.12);

  /* --- ACENTO: guinda (la marca blanca lo sobreescribe vía marca.js) --- */
  --acc:#9f2241;
  /* Segundo color de marca. Por omisión ES el acento, así que un despacho con
     un solo color no ve ningún cambio; quien define dos (Kreston: marino +
     cian) obtiene la energía que un color solo no da. */
  --cian:var(--acc);
  --cian-2:var(--acc-2);
  --cian-soft:var(--acc-soft);
  --cian-tint:var(--acc-tint);
  --cian-ink:#fff;
  --acc-2:#611232;
  --acc-3:#c14a66;
  --acc-ink:#611232;
  --acc-soft:rgba(159,34,65,.10);
  --acc-tint:rgba(159,34,65,.045);

  /* --- semánticos: separados del acento a propósito --- */
  --red:#a3243f;    --red-soft:rgba(163,36,63,.10);
  --rojo:var(--red);
  --danger:var(--red); --danger-soft:var(--red-soft);
  --amber:#96610f;  --amber-soft:rgba(150,97,15,.11);
  --ok:#2c6b51;     --ok-soft:rgba(44,107,81,.11);

  /* --- forma --- */
  --r-carcasa:22px; --r-nucleo:16px;
  --r-lg:16px; --r:12px; --r-sm:9px; --r-pill:999px;

  /* --- sombras ambientales --- */
  --sh-sm:0 1px 1.5px rgba(18,32,46,.02), 0 3px 8px -3px rgba(18,32,46,.035);
  --sh:0 1px 1.5px rgba(18,32,46,.02),
       0 4px 10px -4px rgba(18,32,46,.035),
       0 16px 34px -18px rgba(18,32,46,.075);
  --sh-md:0 1px 2px rgba(18,32,46,.022),
          0 8px 20px -8px rgba(18,32,46,.045),
          0 30px 58px -28px rgba(18,32,46,.10);
  --sh-lg:0 2px 4px rgba(18,32,46,.03),
          0 16px 34px -12px rgba(18,32,46,.07),
          0 54px 100px -40px rgba(18,32,46,.16);
  --luz:inset 0 1px 0 rgba(255,255,255,.9);
  --bisel:linear-gradient(180deg, rgba(255,255,255,.62), rgba(214,222,229,.5));

  /* --- movimiento --- */
  --e:cubic-bezier(.32,.72,0,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --dur:.45s;

  --rail-w:244px;

  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Wix Madefor Display","Instrument Sans",sans-serif;
  --mono:var(--sans);
}
html.mini{--rail-w:66px}

/* compatibilidad con anchos tipográficos de la versión anterior */
.exp{font-family:var(--display);font-weight:700;letter-spacing:-.03em}
.cond{letter-spacing:.04em}

*{box-sizing:border-box;margin:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  font-size:14.5px;line-height:1.55;letter-spacing:-.006em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  padding-left:var(--rail-w);
  overflow-x:hidden;
  transition:padding-left var(--dur) var(--e);
}
/* halo ambiental frío: profundidad sin gradiente de color */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 70% at 78% -10%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(90% 60% at 4% 104%, rgba(196,206,215,.4), transparent 62%);
}
body > *{position:relative;z-index:1}
a{color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
::selection{background:var(--acc-soft)}

/* =========================================================================
   RIEL LATERAL · plegable
   ========================================================================= */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:40;
  padding:14px 12px 14px 14px;
  display:flex;flex-direction:column;
  transition:width var(--dur) var(--e), transform var(--dur) var(--e), padding var(--dur) var(--e);
}
/* carcasa del riel (doble bisel) */
.rail::after{
  content:"";position:absolute;inset:14px 12px 14px 14px;z-index:-1;
  background:var(--surface);
  border-radius:var(--r-carcasa);
  box-shadow:var(--sh-md), var(--luz);
}
html.mini .rail{padding:14px 9px}
html.mini .rail::after{inset:14px 9px}

.rail-marca{
  display:flex;align-items:flex-start;gap:10px;min-width:0;
  padding:11px 12px 14px;margin-bottom:5px;
  position:relative;
}
.rail-marca::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--hair),transparent);
}
.rail-marca .mk{
  width:32px;height:32px;flex:none;border-radius:9px;overflow:hidden;
  transition:width var(--dur) var(--e);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:-.03em;
  color:#fff;background:var(--acc);
}
.rail-marca .mk img{width:100%;height:100%;padding:3px;background:#fff;object-fit:contain}
/* Con logotipo el cuadro es blanco: encima de un fondo de marca, un logo con
   transparencia quedaría flotando sobre su propio color. */
.rail-marca .mk:has(img){
  width:auto;min-width:34px;max-width:82px;height:34px;padding:0 5px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--hair);
}
html.mini .rail-marca .mk:has(img){max-width:44px;padding:0 3px}
.rail-marca .t{min-width:0;transition:opacity .25s var(--e)}
.rail-marca .t b{display:block;font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink);
  letter-spacing:-.028em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-marca .t span{display:block;font-size:11px;color:var(--ink-2);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Sin nombre encima (hay logotipo), la bajada es la única línea y se centra
   con el bloque de marca. */
.rail-marca .t b + span{font-size:10.5px;color:var(--muted);margin-top:1px}
.rail-marca:has(.mk img) .t{align-self:center}

.rail nav{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0;padding:0 7px;
  overflow-y:auto;scrollbar-width:none}
.rail nav::-webkit-scrollbar{display:none}
/* Rótulo de grupo: once entradas seguidas al mismo peso no se escanean. */
.rail .grp{
  padding:18px 12px 6px;font-size:8.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tenue);white-space:nowrap;
}
.rail .grp:first-child{padding-top:6px}
html.mini .rail .grp{
  padding:12px 0 6px;text-align:center;font-size:0;
}
html.mini .rail .grp::after{
  content:"";display:block;height:1px;margin:0 14px;background:var(--hair);
}
.rail a.it{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:10px;
  font-size:13px;font-weight:500;letter-spacing:-.012em;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:color .3s var(--e), background-color .3s var(--e), transform .3s var(--e);
}
.rail a.it svg{width:17px;height:17px;flex:none;opacity:.62;transition:opacity .3s var(--e)}
@media(hover:hover){
  .rail a.it:hover{background:rgba(120,140,158,.09);color:var(--ink);transform:translateX(2px)}
  .rail a.it:hover svg{opacity:.9}
}
.rail a.it.on{background:var(--cian-soft);color:var(--acc);font-weight:600}
.rail a.it.on svg{opacity:1;color:var(--cian-2)}
/* La barra del segundo color: es lo que le da identidad al menú. */
.rail a.it.on::before{
  content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cian);
}
html.mini .rail a.it.on::before{left:-4px;top:9px;bottom:9px}
.rail a.it .lb{min-width:0;overflow:hidden;text-overflow:ellipsis}

.rail-pie{
  margin-top:auto;padding:12px 10px 12px;display:flex;align-items:center;gap:8px;
  min-width:0;position:relative;
}
.rail-pie::before{
  content:"";position:absolute;left:12px;right:12px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair),transparent);
}
.rail .quien{
  display:flex;align-items:center;gap:9px;min-width:0;flex:1;
  padding:10px 0 0 2px;
}
.rail .quien .av{
  width:28px;height:28px;flex:none;border-radius:8px;
  display:grid;place-items:center;
  background:var(--banda);color:var(--ink-2);
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:-.02em;
}
.rail .quien .n{
  min-width:0;font-size:11.5px;font-weight:500;color:var(--ink-2);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Salir deja de ser un renglón más del menú: es un botón de icono. */
.rail-pie a.it#rail-salir{
  flex:none;margin-top:10px;padding:7px;border-radius:9px;gap:0;
}
.rail-pie a.it#rail-salir .lb{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
@media(hover:hover){
  .rail-pie a.it#rail-salir:hover{background:var(--acc-soft);color:var(--acc);transform:none}
}
/* La etiqueta se lee junto a quién ha iniciado sesión, no suelta contra el
   borde inferior, donde se cortaba. */
.rail .demo-tag{
  flex:none;align-self:flex-start;margin-top:1px;
  padding:3px 7px 2px;border-radius:5px;
  background:var(--cian-soft);color:var(--cian-2);
  font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}

/* --- botón de plegar --- */
.rail-fold{
  position:absolute;top:20px;right:-11px;z-index:2;
  width:24px;height:24px;border-radius:50%;
  border:0;cursor:pointer;padding:0;
  display:grid;place-items:center;
  background:var(--surface);color:var(--tenue);
  box-shadow:var(--sh-sm), 0 0 0 1px rgba(18,32,46,.07);
  opacity:.55;
  transition:opacity .3s var(--e), color .3s var(--e), transform .4s var(--e), background-color .3s var(--e);
}
.rail-fold svg{width:13px;height:13px;transition:transform var(--dur) var(--e)}
.rail:hover .rail-fold,.rail-fold:focus-visible{opacity:1;color:var(--ink-2)}
@media(hover:hover){.rail-fold:hover{color:#fff;background:var(--acc);transform:scale(1.1)}}
html.mini .rail-fold svg{transform:rotate(180deg)}

/* --- estado plegado: solo iconos --- */
html.mini .rail-marca{justify-content:center;align-items:center;padding:10px 0 12px}
html.mini .rail-marca .t{display:none}
/* plegado: cada seccion es un cuadro con el icono al centro,
   con medida explicita para que el estado activo no quede como una raya */
html.mini .rail a.it{
  width:44px;min-width:44px;height:40px;
  margin-left:auto;margin-right:auto;align-self:center;
  justify-content:center;padding:0;border-radius:13px;
}
html.mini .rail a.it .lb{display:none}
html.mini .rail .quien{display:none}
html.mini .rail-pie::before{margin:0 2px 12px}
html.mini .rail .demo-tag{display:none}
/* Plegado el pie sólo conserva el botón de salir, centrado. */
html.mini .rail-pie{justify-content:center;padding:12px 0}
html.mini .rail-pie a.it#rail-salir{margin-top:0}
html.mini .rail nav{padding:0 2px}
/* al plegar, el nombre de la sección aparece al pasar el cursor */
html.mini .rail a.it::after{
  content:attr(data-lb);
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px);
  padding:6px 11px;border-radius:9px;
  background:var(--ink);color:#fff;
  font-size:12px;font-weight:500;letter-spacing:-.006em;white-space:nowrap;
  box-shadow:var(--sh-md);
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--e), transform .28s var(--e);
}
@media(hover:hover){
  html.mini .rail a.it:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
  html.mini .rail a.it:hover{transform:none}
}

/* --- botón de menú (solo en pantalla chica) --- */
.rail-abrir{
  display:none;
  position:fixed;left:14px;top:13px;z-index:45;
  width:40px;height:40px;border-radius:13px;border:0;cursor:pointer;padding:0;
  background:var(--surface);color:var(--ink-2);
  box-shadow:var(--sh), var(--luz);
  place-items:center;
  transition:transform .35s var(--e), color .3s var(--e);
}
.rail-abrir svg{width:19px;height:19px;display:block}
.rail-abrir:active{transform:scale(.94)}
.rail-abrir .i-cerrar{display:none}
/* con el cajon abierto el boton se corre al costado y se vuelve cierre,
   para no quedar encima del logo */
html.rail-open .rail-abrir{left:auto;right:16px;color:var(--ink)}
html.rail-open .rail-abrir .i-menu{display:none}
html.rail-open .rail-abrir .i-cerrar{display:block}
.rail-fondo{
  display:none;position:fixed;inset:0;z-index:39;
  background:rgba(18,23,28,.34);
  opacity:0;transition:opacity var(--dur) var(--e);
}

@media(max-width:900px){
  body{padding-left:0}
  .rail-abrir{display:grid}
  .rail{
    width:272px;
    transform:translateX(calc(-100% - 20px));
    box-shadow:none;
  }
  html.rail-open .rail{transform:none}
  html.rail-open .rail-fondo{display:block;opacity:1}
  html.rail-open{overflow:hidden}
  .rail-fold{display:none}
  /* en pantalla chica el riel nunca se pliega a iconos */
  html.mini .rail{width:272px;padding:14px 12px 14px 14px}
  html.mini .rail::after{inset:14px 12px 14px 14px}
  html.mini .rail-marca{justify-content:flex-start;padding:10px 8px 16px}
  html.mini .rail-marca .t{display:block}
  html.mini .rail a.it{justify-content:flex-start;padding:9px 11px}
  html.mini .rail a.it .lb{display:inline}
  html.mini .rail a.it::after{display:none}
  html.mini .rail .quien{display:block}
  /* En el cajón de pantalla chica el riel se despliega entero. */
  html.mini .rail .demo-tag{display:inline-block;align-self:flex-start;margin-top:1px;
    padding:3px 7px 2px;font-size:8px;letter-spacing:.16em}
  html.mini .rail-pie{justify-content:flex-start;padding:12px 10px}
  html.mini .rail-pie a.it#rail-salir{margin-top:10px}
  html.mini .rail nav{padding:0 7px}
}

/* =========================================================================
   ENCABEZADO
   ========================================================================= */
header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:18px 30px 14px;
  background:linear-gradient(180deg, var(--papel) 62%, rgba(237,239,242,0));
}
.htxt h1{color:var(--acc)}
.mono-badge{display:none}
.htxt h1{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.htxt .sub{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:1px}
.live{width:6px;height:6px;border-radius:50%;background:var(--cian);flex:none;
  box-shadow:0 0 0 3px var(--cian-soft)}
.hnav{margin-left:auto;display:flex;align-items:center;gap:8px}
.hnav .hlink,.hnav .back,.hnav .demo{display:none}

/* Filtro de empresa: para el dueño con varios negocios. */
.emp-filtro{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 6px 5px 14px;border-radius:999px;
  background:var(--surface);box-shadow:var(--sh-sm),var(--luz);
  transition:box-shadow .4s var(--e);
}
.emp-filtro:focus-within{box-shadow:0 0 0 1.5px var(--acc),0 0 0 5px var(--acc-soft)}
.emp-filtro .emp-lb{
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.emp-filtro select{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.012em;
  color:var(--ink);background:var(--banda);
  border:0;border-radius:999px;padding:6px 11px;outline:none;cursor:pointer;
  max-width:250px;text-overflow:ellipsis;
}
.emp-filtro select:disabled{opacity:.5;cursor:progress}
@media(max-width:640px){
  .emp-filtro{padding:4px 5px 4px 4px}
  .emp-filtro .emp-lb{display:none}
  .emp-filtro select{max-width:150px;font-size:12.5px}
}
@media(max-width:900px){header{padding:16px 18px 12px 66px}}

/* =========================================================================
   LAYOUT
   ========================================================================= */
main{flex:1;overflow-y:auto}
.wrap{max-width:1320px;margin:0;padding:8px 30px 80px}
.pagehead{margin-bottom:22px}
.pagehead .eyebrow,.sec-t,.block-t{
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 13px 4px;border-radius:999px;margin-bottom:14px;
  background:var(--surface);color:var(--ink-2);
  font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:var(--sh-sm), var(--luz);
}
/* la rayita del segundo color antes de la etiqueta */
.pagehead .eyebrow::before,.sec-t::before,.block-t::before{
  content:"";width:14px;height:2px;border-radius:2px;background:var(--cian);flex:none;
}
.pagehead h2,.lead h2{
  font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.15rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.02;text-wrap:balance;
}
.pagehead p{font-size:14px;color:var(--ink-2);margin-top:11px;max-width:64ch;line-height:1.6}

/* =========================================================================
   TARJETA · carcasa + núcleo
   ========================================================================= */
/* El doble bisel se logra con un anillo de sombra, no con un div extra:
   la tarjeta blanca queda dentro de una bandeja clara, sin tocar el marcado. */
.card{
  position:relative;
  border-radius:var(--r-nucleo);
  padding:19px 22px 17px;
  margin-bottom:19px;
  background:var(--surface);
  box-shadow:0 0 0 5px rgba(255,255,255,.5), var(--sh), var(--luz);
  animation:rise .7s var(--e) both;
  transition:transform .6s var(--e), box-shadow .6s var(--e);
}
/* La regla de color arriba de la tarjeta: es el recurso que usa el brochure
   para que una cuadrícula de datos no se lea como una hoja de cálculo. */
.card::before{
  content:"";position:absolute;left:19px;right:19px;top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--cian);opacity:.9;
}
.card.flat::before{display:none}
.card > *:first-child{margin-top:0}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.card:nth-of-type(2){animation-delay:.05s}
.card:nth-of-type(3){animation-delay:.1s}
.card:nth-of-type(n+4){animation-delay:.14s}
.card.flat{background:transparent;box-shadow:none;padding:0;margin-bottom:14px}

/* =========================================================================
   BOTONES · píldora
   ========================================================================= */
.btn{
  font-family:inherit;cursor:pointer;
  font-size:12.5px;font-weight:600;letter-spacing:-.012em;
  padding:8px 15px;border-radius:999px;
  border:0;
  background:var(--surface);color:var(--ink-2);
  box-shadow:var(--sh-sm), 0 0 0 1px rgba(18,32,46,.07), var(--luz);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  transition:transform .35s var(--e), box-shadow .35s var(--e),
             background-color .35s var(--e), color .35s var(--e);
}
.btn svg{width:14px;height:14px}
@media(hover:hover){.btn:hover{color:var(--ink);box-shadow:var(--sh), 0 0 0 1px rgba(18,32,46,.12), var(--luz);transform:translateY(-1px)}}
.btn:active{transform:scale(.98)}
.btn.acc{
  background:var(--ink);color:#fff;
  box-shadow:0 8px 20px -10px rgba(18,23,28,.7), 0 0 0 1px rgba(18,32,46,.2);
}
@media(hover:hover){.btn.acc:hover{background:var(--cian);color:var(--cian-ink)}}
.btn.no,.btn.danger{color:var(--red)}
@media(hover:hover){.btn.no:hover,.btn.danger:hover{background:var(--red-soft);color:var(--red)}}
.btn.ghost{background:transparent;box-shadow:0 0 0 1px var(--hair)}
.btn.sm{padding:6px 12px;font-size:11.5px}
.btn:disabled{opacity:.45;cursor:default;transform:none}

/* =========================================================================
   ESTADOS
   ========================================================================= */
.badge{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 10px 3px;border-radius:999px;white-space:nowrap;
  color:var(--muted);background:var(--banda);
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px currentColor}
.badge.p,.badge.amber{color:var(--amber);background:var(--amber-soft)}
.badge.a,.badge.g,.badge.ok{color:var(--ok);background:var(--ok-soft)}
.badge.a::before,.badge.g::before,.badge.ok::before{background:currentColor}
.badge.r,.badge.b,.badge.bad{color:var(--red);background:var(--red-soft)}
.badge.r::before,.badge.b::before,.badge.bad::before{background:currentColor;box-shadow:0 0 0 3px var(--red-soft)}
.chip{
  font-size:11.5px;font-weight:500;color:var(--ink-2);
  background:var(--surface);
  padding:4px 11px;border-radius:999px;
  box-shadow:var(--sh-sm), var(--luz);
  display:inline-flex;gap:6px;align-items:center;
}
.chip svg{width:12px;height:12px;color:var(--cian-2)}
.chip .num{font-weight:600;color:var(--ink)}

/* =========================================================================
   FORMULARIOS
   ========================================================================= */
.fld{margin-bottom:15px}
.fld label{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;
}
input,select,textarea{font-family:inherit}
.fld input,.fld select,.fld textarea{
  width:100%;font-size:13.5px;color:var(--ink);
  background:var(--field);
  border:0;border-radius:12px;padding:10px 13px;outline:none;
  box-shadow:0 0 0 1px var(--hair), var(--luz);
  transition:box-shadow .35s var(--e);
}
.fld textarea{resize:vertical;min-height:78px;line-height:1.55}
.fld input::placeholder,.fld textarea::placeholder{color:var(--tenue)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  box-shadow:0 0 0 1.5px var(--acc), 0 0 0 5px var(--acc-soft);
}

/* =========================================================================
   TABLAS · la hoja de datos flota, no se enmarca
   ========================================================================= */
.tw{
  position:relative;overflow-x:auto;
  border-radius:var(--r-nucleo);
  background:var(--surface);
  box-shadow:0 0 0 5px rgba(255,255,255,.5), var(--sh), var(--luz);
  margin-bottom:5px;
}
table{border-collapse:collapse;width:100%;font-size:12.8px}
thead th{
  background:var(--banda);color:var(--ink-2);
  font-weight:600;text-align:left;
  padding:10px 14px;white-space:nowrap;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:inset 0 -2px 0 var(--cian);
}
thead th.num{text-align:right}
tbody td{padding:11px 14px;box-shadow:inset 0 -1px 0 var(--line-2)}
tbody tr:last-child td{box-shadow:none}
tbody tr{transition:background .25s var(--e)}
@media(hover:hover){tbody tr:hover{background:var(--acc-tint)}}
tbody td:first-child{font-weight:600}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tfoot td{
  padding:12px 14px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--surface-2);box-shadow:inset 0 1px 0 var(--hair);
}

/* =========================================================================
   SWITCH
   ========================================================================= */
.sw{flex:none;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.sw .track{
  width:38px;height:22px;border-radius:999px;background:var(--banda);
  position:relative;box-shadow:inset 0 1px 3px rgba(18,32,46,.12);
  transition:background .4s var(--e);
}
.sw .knob{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 2px 5px -1px rgba(18,32,46,.35);
  transition:left .4s var(--e), background .4s var(--e);
}
.sw.on .track{background:var(--cian)}
.sw.on .knob{left:19px}
.sw .lb{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sw.on .lb{color:var(--cian-2)}

/* =========================================================================
   RETROALIMENTACIÓN
   ========================================================================= */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:60;
  background:var(--ink);color:#fff;font-size:13px;font-weight:500;
  padding:12px 20px;border-radius:999px;box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .3s var(--e), transform .45s var(--e);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.spin{
  width:13px;height:13px;border:1.8px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:sp .65s linear infinite;display:inline-block;opacity:.6;
}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{
  height:62px;border-radius:var(--r-nucleo);
  background:var(--surface);box-shadow:var(--sh-sm);
  opacity:.7;animation:pulso 1.6s ease-in-out infinite;margin-bottom:12px;
}
@keyframes pulso{0%,100%{opacity:.5}50%{opacity:.85}}
.empty{text-align:center;color:var(--muted);padding:52px 20px;font-size:13.5px}
.empty .big{font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.04em;margin-bottom:10px;color:var(--tenue)}

:focus-visible{outline:2px solid var(--cian);outline-offset:3px;border-radius:6px}
@media(max-width:560px){.wrap{padding:6px 16px 56px}}

/* =========================================================================
   BARRA DE GRABACIÓN
   ========================================================================= */
#recbar{
  position:fixed;left:calc(50% + var(--rail-w)/2);bottom:22px;z-index:70;
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;padding:11px 11px 11px 18px;border-radius:999px;
  box-shadow:var(--sh-lg);
  width:max-content;max-width:min(88vw,700px);
  animation:recIn .5s var(--e) both;
}
@keyframes recIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
#recbar .dot{width:8px;height:8px;border-radius:50%;background:var(--cian);flex:none;animation:lat 1.6s ease-in-out infinite}
@keyframes lat{0%,100%{opacity:1}50%{opacity:.35}}
#recbar .rb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#recbar .rb-txt b{font-size:12.5px;font-weight:600}
#recbar .rb-txt span{font-size:11.5px;color:#ffffff9e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#recbar .rb-b{
  font-family:inherit;cursor:pointer;font-size:12px;font-weight:600;
  padding:7px 14px;border-radius:999px;border:0;
  background:#ffffff1c;color:#fff;white-space:nowrap;
  transition:background .3s var(--e), transform .3s var(--e);
}
#recbar .rb-b:hover{background:#ffffff2e}
#recbar .rb-b:active{transform:scale(.97)}
#recbar .rb-ok{background:#fff;color:var(--ink)}
#recbar .rb-ok:hover{background:#fff}
@media(max-width:900px){#recbar{left:50%}}

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