/* NoLabel admin · tokens del ecosistema (dark). Canon: 2026-07-01-ecosistema-backstage-dark-design.md §1 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  /* canon */
  --bg:#0B0B0C; --surface:#161618; --surface-2:#202023;
  --text:#F5F5F6; --muted:#8A8A90; --text-dim:var(--muted);
  --accent:#DF6043; --on-accent:#FFFFFF; --accent-30:rgba(223,96,67,.3);
  --hairline:rgba(255,255,255,.07); --line:var(--hairline);
  --chip-bg:#202023; --chip-text:#C9C9CF;
  --danger:#E5484D; --success:#3ECF8E; --warning:#E8A33D;
  /* acento legacy: el admin usaba --amber por todos lados -> apúntalo a coral para heredar */
  --amber:var(--accent); --amber-ink:var(--on-accent);
  /* alias legacy semánticos (paper=fondo, ink=texto): heredan al canon */
  --paper:var(--bg); --paper-soft:var(--surface); --ink:var(--text);
  /* estados de puerta (escáner): verde/rojo/aviso canon + fondos tenues al 14% */
  --ok:var(--success); --ok-bg:rgba(62,207,142,.14);
  --no:var(--danger); --no-bg:rgba(229,72,77,.14); --no-dim:rgba(229,72,77,.55);
  --warn:var(--warning); --warn-bg:rgba(232,163,61,.14);
  /* tipografía */
  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* firma tipográfica del sistema: large-title unificado + tracking negativo (display -0.025, title -0.018) */
  --fs-h1:32px; --tr-display:-0.025em; --tr-title:-0.018em;
  /* radios + motion canon */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.23,1,.32,1);
  /* grano del botón: mismo feTurbulence que la capa de grano global */
  --grano-btn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Motion canon del sistema: press 120ms, :active scale(.97). El hover del primario va a #FFFFFF,
   así que la transición es de `background` (el `filter`/brightness ya no existe en la receta v1.8). */
.btn,.cta,button,.step button,.tools button,.picker-card{transition:background .15s var(--ease),transform .12s var(--ease)}
.btn:active,.cta:active,button:active,.step button:active,.tools button:active,.picker-card:active{transform:scale(.97)}

/* ── Botones del sistema (v1.8) ────────────────────────────────────────────────
   Primario: papel blanco con grano (::before) + tinta en relieve (text-shadow),
   sombras solo inset. Secundario: glass neutro. El coral deja de ser relleno de
   botón y se queda en estados/acentos (chips, badges, progreso, foco).
   Se define UNA vez aquí; cada página solo pone tamaño/tipografía/layout. */
.btn,.cta,.asig .save,.ok-row .print,.cam-error-btn.primary,#folio-send{
  position:relative;overflow:hidden;
  background:var(--text);color:var(--bg);border:0;
  text-shadow:0 -1px 0 rgba(255,255,255,.9), 0 1px 1.5px rgba(11,11,12,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -10px 16px rgba(11,11,12,.05);
}
.btn::before,.cta::before,.asig .save::before,.ok-row .print::before,.cam-error-btn.primary::before,#folio-send::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grano-btn);background-size:160px 160px;
  opacity:.10;mix-blend-mode:multiply;
}
.btn:hover,.cta:hover,.asig .save:hover,.ok-row .print:hover,.cam-error-btn.primary:hover,#folio-send:hover{
  background:#FFFFFF;border-color:transparent}
/* Lift del hover: mismo micro-gesto que el sitio y la tienda. El `:not(:active)` deja ganar al
   scale(.97) del press (que se declara ANTES y perdería por orden).
   OJO: el override de prefers-reduced-motion (final del archivo) repite ESTE MISMO selector
   para ganarle por orden, no por especificidad; si tocas uno, toca el otro. */
.btn:hover:not(:disabled):not(:active),
.cta:hover:not(:disabled):not(:active),
.asig .save:hover:not(:disabled):not(:active),
.ok-row .print:hover:not(:active),
.cam-error-btn.primary:hover:not(:active),
#folio-send:hover:not(:disabled):not(:active){transform:translateY(-1px)}

/* Secundario: glass neutro (sin borde coral), con fallback digno. */
.btn.ghost,.ok-row .nueva{
  position:relative;overflow:hidden;color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow:none;
}
.btn.ghost::before,.ok-row .nueva::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grano-btn);background-size:160px 160px;
  opacity:.07;mix-blend-mode:soft-light;
}
.btn.ghost:hover,.ok-row .nueva:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.26)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn.ghost,.ok-row .nueva{background:var(--surface)}
}

/* Eyebrow del sistema: mono, uppercase, tracking amplio. Números/folios usan var(--font-mono) directo. */
.eyebrow{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.145em;text-transform:uppercase;color:var(--muted)}

/* Focus visible del sistema: anillo coral consistente en todo lo tabulable (A11). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* Estados de lista canónicos (M10/M11): un solo .empty (sin opacity arbitraria) + skeleton de carga + error.
   .empty = vacío neutro. .empty.loading = pulso sutil. .empty.err = coral con acción de reintento. */
.empty{padding:32px 0;text-align:center;font-size:13px;color:var(--muted)}
.empty.loading{animation:emptyPulse 1.4s var(--ease) infinite}
.empty.err{color:var(--danger)}
.empty .reintentar{display:inline-block;margin-top:12px;font-family:var(--font-body);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;transition:border-color .12s var(--ease)}
.empty .reintentar:hover{border-color:var(--accent)}
@keyframes emptyPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ── App shell de escritorio ───────────────────────────────────────────────────
   Sidebar fijo con logo grande + nav vertical, y contenido que USA el ancho.
   En móvil colapsa a una barra superior con la nav en scroll horizontal. */
.shell{min-height:100dvh}
.side{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);overflow-x:auto}
.side .brand{flex:0 0 auto;display:block}
.side .brand img{width:104px;display:block;filter:brightness(0) invert(1)}
.side-toggle{display:none;background:transparent;border:0;cursor:pointer;color:var(--text);opacity:.55;padding:7px;border-radius:var(--r-sm)}
.side-toggle:hover{opacity:1;background:var(--hairline)}
.side-toggle svg{width:20px;height:20px;display:block}
.side nav{display:flex;gap:4px}
.side nav a,.side .salir{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--text-dim);text-decoration:none;
  font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.2px;padding:10px 12px;border-radius:var(--r-sm);opacity:1;
  background:transparent;border:0;cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
.side nav a svg,.side .salir svg{width:18px;height:18px;flex:0 0 auto}
.side nav a:hover,.side .salir:hover{color:var(--text);background:var(--hairline)}
.side nav a[aria-current]{color:var(--amber);background:rgba(223,96,67,.12);font-weight:600}
.side nav a[aria-current] svg{color:var(--amber)}
.side .salir{margin-left:auto;color:var(--text);border:1px solid var(--line)}
.main{padding:22px 20px 60px}
@media(min-width:900px){
  .shell{display:grid;grid-template-columns:238px 1fr;transition:grid-template-columns .22s var(--ease)}
  .shell.collapsed{grid-template-columns:76px 1fr}
  .side{position:sticky;top:0;height:100dvh;flex-direction:column;align-items:stretch;gap:3px;
    border-bottom:0;border-right:1px solid var(--line);padding:18px 16px;overflow:visible}
  .side-toggle{display:inline-flex;align-self:flex-end;margin-bottom:8px}
  .side .brand{margin:0 auto 18px;padding-bottom:18px;border-bottom:1px solid var(--line);width:100%;text-align:center}
  .side .brand img{width:128px;display:inline-block;filter:brightness(0) invert(1)}
  .side nav{flex-direction:column;gap:3px}
  .side nav a{padding:11px 12px}
  .side .salir{margin:auto 0 0;justify-content:flex-start}
  .main{padding:34px clamp(26px,3.5vw,48px) 70px;max-width:1180px}
  /* Colapsado: riel de íconos. */
  .shell.collapsed .side{padding:18px 10px;align-items:center}
  .shell.collapsed .side-toggle{align-self:center}
  .shell.collapsed .side .brand{display:none}
  .shell.collapsed .side nav{align-self:stretch}
  .shell.collapsed .side nav a,.shell.collapsed .side .salir{justify-content:center;padding:12px 0;gap:0}
  .shell.collapsed .side nav a span,.shell.collapsed .side .salir span{display:none}
}

/* Checkbox custom (appearance:none + checkmark CSS): consistente y con afordancia en todo el admin. */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:0 0 auto;margin:0;cursor:pointer;
  border:1.5px solid var(--line);border-radius:4px;background:var(--surface-2);position:relative;vertical-align:middle;
  transition:background .12s var(--ease),border-color .12s var(--ease)}
input[type=checkbox]:hover{border-color:var(--text-dim)}
input[type=checkbox]:checked{background:var(--amber);border-color:var(--amber)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid var(--amber-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=checkbox]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Accesibilidad: respeta reduced-motion en todo el admin. Una sola fuente. */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* MISMO selector que la regla del lift (arriba): igual especificidad + más abajo en el archivo = gana. */
  .btn:hover:not(:disabled):not(:active),
  .cta:hover:not(:disabled):not(:active),
  .asig .save:hover:not(:disabled):not(:active),
  .ok-row .print:hover:not(:active),
  .cam-error-btn.primary:hover:not(:active),
  #folio-send:hover:not(:disabled):not(:active){transform:none}}