/* ==========================================================================
   brand.css — KAO by Sach'a · design system del panel admin
   --------------------------------------------------------------------------
   Una sola hoja para el shell (index.html) y las paginas embebidas (?embed=1).
   Mobile-first: base = celular (el dueno opera desde el telefono); breakpoints
   760px (tablet / sheet centrado / tabla real) y 980px (desktop con sidebar),
   los mismos que usa el shell.

   - Tokens por marca entre los marcadores TOKENS / /TOKENS: el brand.css de Sach'a
     es este mismo archivo con ese bloque cambiado (tools/portar_admin_a_kao.sh
     NO copia brand.css: cada marca tiene el suyo).
   - Fuentes self-hosted en fonts.css (nada de CDN).
   - Sin emojis: iconos SVG inline con currentColor (.icon).
   - Contraste: tools/qa/contraste.py verifica los pares (texto >= 4.5, UI >= 3).
   - Referencia de marca y que NO hacer: docs/marca.md.
   ========================================================================== */

@import url("fonts.css");

/* ===== TOKENS (por marca) ================================================ */
:root {
  color-scheme: dark;

  /* superficies · negro de la carta 2026 (paginas 2-20: fondo negro pleno) */
  --bg: #0B0B0B;
  --surface: #161616;
  --surface-2: #1F1F1F;

  /* texto */
  --text: #F5F5F5;
  --text-2: #A3A3A3;
  --text-3: #6B6B6B;            /* solo placeholders con label, iconos apagados, disabled */

  /* lineas */
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .22);

  /* acento · rojo del wordmark (contraportada p21): es TINTA, nunca relleno de areas grandes */
  --accent: #FF0000;
  --accent-hover: #FF3B3B;
  --accent-ink: #0B0B0B;
  --accent-soft: rgba(255, 0, 0, .12);

  /* boton primario: BLANCO con tinta negra (blanco sobre rojo da 4.0:1 y falla AA) */
  --primary-btn-bg: #F5F5F5;
  --primary-btn-ink: #0B0B0B;
  --primary-btn-hover: #FFFFFF;

  /* semaforo · el peligro solido es el vino de la portada (p1: 96% de la pagina es #4F1717) */
  --ok: #5CC9A0;
  --warn: #F2B750;
  --danger: #FF6B6B;
  --danger-solid: #4F1717;
  --danger-ink: #F5F5F5;
  --ok-soft: rgba(92, 201, 160, .14);
  --warn-soft: rgba(242, 183, 80, .14);
  --danger-soft: rgba(255, 107, 107, .14);

  /* bloque editorial claro (contraportada: blanco lavado con tinta negra) */
  --editorial-bg: #F1F1F1;
  --editorial-ink: #0B0B0B;

  /* tipografia · gemelas web de la carta (docs/marca.md). KAO no tiene serif: es Poppins */
  --font-display: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* radios · mas rectos que Sach'a (contenido geometrico) */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* sombras, foco, PWA */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 10px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .5);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --theme-color: #0B0B0B;

  /* internos */
  --backdrop: rgba(0, 0, 0, .7);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --safe-b: env(safe-area-inset-bottom, 0px);
}
/* ===== /TOKENS =========================================================== */


/* ===== BASE ============================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0 0 .6em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* Titulos: display condensado en mayusculas (como los "SODAS", "CERVEZA" de la carta) */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3, h4 { font-family: var(--font-sans); font-weight: 600; margin: 0; line-height: 1.25; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
.serif { font-family: var(--font-serif); }
.price { font-family: var(--font-serif); font-weight: 500; font-variant-numeric: tabular-nums; }
.smallcaps { font-variant-caps: all-small-caps; letter-spacing: .06em; }
.tagline { font-family: var(--font-sans); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; color: var(--text-2); }

/* Titulo de seccion como en la carta: centrado, regla turquesa debajo */
.section-t {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
  margin: 0 0 12px;
}

/* Contenedor de pagina embebida */
.page { padding: 12px 12px calc(24px + var(--safe-b)); max-width: 1120px; margin: 0 auto; }
.page-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.page-t { font-family: var(--font-display); font-size: 28px; letter-spacing: .03em; text-transform: uppercase; line-height: 1; }

/* Scrollbar discreto (desktop) */
@media (min-width: 760px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 2px solid var(--bg); }
  ::-webkit-scrollbar-track { background: transparent; }
}


/* ===== ICONOS ============================================================ */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; stroke-width: 2; }
.icon-lg { width: 28px; height: 28px; stroke-width: 1.6; }
.icon-xl { width: 40px; height: 40px; stroke-width: 1.4; }
.icon-fill { fill: currentColor; stroke: none; }


/* ===== BOTONES =========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  font-weight: 600; font-size: 15px; line-height: 1.1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s, filter .15s, transform .06s;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ring); border-radius: var(--r); }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--primary-btn-bg); color: var(--primary-btn-ink); border-color: transparent; }
.btn-primary:hover { background: var(--primary-btn-hover); color: var(--primary-btn-ink); filter: none; box-shadow: var(--shadow-1); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); filter: none; }
.btn-danger { background: var(--danger-solid); color: var(--danger-ink); border-color: transparent; }
.btn-danger:hover { filter: brightness(1.12); color: var(--danger-ink); }
.btn-danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-ghost:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); filter: none; }
.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); filter: none; color: var(--accent-hover); }
.btn-mini { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--r-sm); gap: 6px; position: relative; }
.btn-mini .icon { width: 15px; height: 15px; }
/* Area tactil de 44px efectivos sin cambiar el visual (32px de alto como accion de primer nivel
   en cards mobile): el ::after invisible extiende el hit-box 6px a cada lado. */
.btn-mini::after { content: ""; position: absolute; inset: -6px; }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.btn-mini { width: 32px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-loading {
  opacity: .45; cursor: not-allowed; pointer-events: none; filter: none; box-shadow: none; transform: none;
}
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--text); animation: spin .8s linear infinite;
}
.btn-primary.is-loading::after { color: var(--primary-btn-ink); }
/* El spinner reusa el ::after: en un btn-mini cargando vuelve a su posicion estatica (centrado). */
.btn-mini.is-loading::after { inset: auto; }

/* Grupo de acciones: en mobile llenan el ancho, en desktop van a su tamano */
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 auto; }
@media (min-width: 760px) {
  .actions .btn { flex: 0 0 auto; }
  .actions-end { justify-content: flex-end; }
}


/* ===== CARDS ============================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: 10px; }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.card-t { font-weight: 600; font-size: 16px; line-height: 1.25; }
.card-code { font-family: var(--font-display); font-size: 18px; letter-spacing: .06em; color: var(--text-2); line-height: 1; }
.card-sub { color: var(--text-2); font-size: 13px; }
.card-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.card.hl { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); animation: hl-pulse 2.4s ease-out 1; }
.card.is-muted { opacity: .72; }
.card-clickable { cursor: pointer; transition: border-color .15s, transform .06s; }
.card-clickable:hover { border-color: var(--line-strong); }
.card-clickable:active { transform: translateY(1px); }
.cards { display: grid; gap: 10px; grid-template-columns: 1fr; }
.cards .card + .card { margin-top: 0; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En la grilla las cards de una fila miden lo mismo: las acciones se pegan al pie para que alineen */
.cards .card { display: flex; flex-direction: column; }
@supports selector(:has(+ a)) {
  .cards .card > .card-f { margin-top: auto; }
  .cards .card > :has(+ .card-f) { margin-bottom: 12px; }
}
@media (min-width: 980px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ===== TABS ============================================================== */
.tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; min-height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s;
}
.tab:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.tab.on { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.tab:focus-visible { box-shadow: var(--ring); }
.tab.on:focus-visible { box-shadow: var(--ring), inset 0 -2px 0 var(--accent); }
.tab .n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.tab.on .n, .tab .n.hot { background: var(--accent); color: var(--accent-ink); }
.tab .n:empty { display: none; }
@media (min-width: 760px) { .tab { flex: 0 0 auto; } }


/* ===== BADGES ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; background: var(--surface-2); color: var(--text-2);
}
.badge .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.badge-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-soft); }
.badge-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.badge-danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }
.badge-muted { color: var(--text-2); background: transparent; border-color: var(--line-strong); }
.badge-accent { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }


/* ===== CHIPS (filtros) =================================================== */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { color: var(--text); border-color: var(--text-2); text-decoration: none; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip:focus-visible { box-shadow: var(--ring); border-radius: var(--r-pill); }
.chip .n { font-variant-numeric: tabular-nums; opacity: .8; }
.chip:disabled { opacity: .45; cursor: not-allowed; }


/* ===== CAMPOS ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder, .input::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none;
}
.field textarea { min-height: 88px; resize: vertical; }
.field select { background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 38px; }
.field select option { background: var(--surface); color: var(--text); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .5; cursor: not-allowed; }
.field input[type="date"], .field input[type="time"] { min-width: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator, .field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); opacity: .8; cursor: pointer; }
.field .hint { font-size: 12px; color: var(--text-2); }
.field.err input, .field.err select, .field.err textarea { border-color: var(--danger); }
.field .err-msg { font-size: 12px; color: var(--danger); font-weight: 600; }
.field-row { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .field-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
/* Rango Desde / Hasta: dos fechas cortas caben lado a lado tambien en mobile (Historial, Entregados) */
.field-row.rango { grid-template-columns: 1fr 1fr; }
.input-mini { min-height: 34px; padding: 6px 10px; font-size: 14px; border-radius: var(--r-sm); }

/* Buscador con icono */
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.search input { padding-left: 40px; }

/* Checkbox / radio */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; cursor: pointer; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; }

/* Switch (toggle) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--surface-2);
  border: 1px solid var(--line-strong); position: relative; transition: background-color .15s, border-color .15s; flex: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-2); transition: transform .15s, background-color .15s;
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); background: var(--accent-ink); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
.switch input:disabled + .track { opacity: .45; }


/* ===== SHEET (modal inferior en mobile, centrado en desktop) ============= */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: var(--backdrop);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .15s ease-out;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sheet {
  width: 100%; max-height: calc(100dvh - 24px); overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 10px 16px calc(16px + var(--safe-b));
  box-shadow: var(--shadow-2);
  animation: up .22s cubic-bezier(.22, 1, .36, 1);
}
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 12px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet-t { font-family: var(--font-display); font-size: 24px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sheet-actions .btn { width: 100%; }
.sheet-danger { border-top: 3px solid var(--danger-solid); }
@media (min-width: 760px) {
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { width: min(520px, 100%); max-height: calc(100dvh - 48px); border-radius: var(--r-lg); border-bottom: 1px solid var(--line-strong); padding: 20px 22px 22px; }
  .sheet-wide { width: min(780px, 100%); }
  .sheet::before { display: none; }
  .sheet-actions { flex-direction: row; justify-content: flex-end; }
  .sheet-actions .btn { width: auto; }
}


/* ===== ESTADOS: skeleton / vacio / error ================================= */
.skeleton {
  position: relative; overflow: hidden; display: block;
  background: var(--surface-2); border-radius: var(--r-sm);
  color: transparent !important; min-height: 1em; pointer-events: none; user-select: none;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  animation: shimmer 1.4s infinite;
}
.skeleton-line { height: 14px; margin: 6px 0; }
.skeleton-line.w50 { width: 50%; }
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w30 { width: 30%; }
.skeleton-block { height: 72px; border-radius: var(--r); }
.skeleton-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 40px 20px; color: var(--text-2);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
}
.empty .icon { width: 40px; height: 40px; stroke-width: 1.4; color: var(--text-3); margin-bottom: 4px; }
.empty-t, .empty h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); line-height: 1; }
.empty p { margin: 0; max-width: 36ch; font-size: 14px; }
.empty .btn { margin-top: 8px; }

.error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--danger-solid); background: var(--danger-soft); color: var(--text);
  font-size: 14px;
}
.error .icon { color: var(--danger); margin-top: 1px; }
.error-t { font-weight: 600; color: var(--danger); }
.error .btn { margin-left: auto; flex: none; }
.error-page { flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; gap: 10px; }
.error-page .btn { margin-left: 0; }


/* ===== TOAST ============================================================= */
.toasts {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); z-index: 80;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-strong); border-left-width: 4px;
  box-shadow: var(--shadow-2); font-size: 14px;
  animation: up .2s cubic-bezier(.22, 1, .36, 1);
}
.toast .icon { flex: none; color: var(--text-2); }
.toast-ok { border-left-color: var(--ok); }
.toast-ok .icon { color: var(--ok); }
.toast-warn { border-left-color: var(--warn); }
.toast-warn .icon { color: var(--warn); }
.toast-danger { border-left-color: var(--danger); }
.toast-danger .icon { color: var(--danger); }
.toast-accent { border-left-color: var(--accent); }
.toast-accent .icon { color: var(--accent); }
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-t { font-weight: 600; }
.toast a, .toast .btn-mini { flex: none; }
.toast .close { color: var(--text-2); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); flex: none; }
.toast .close:hover { color: var(--text); background: var(--surface); }
@media (min-width: 760px) { .toasts { left: auto; right: 20px; bottom: 20px; width: 380px; } }


/* ===== KV (pares etiqueta / valor) ======================================= */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--text-2); margin: 0; }
.kv dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.kv-inline { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.kv-inline > span { display: inline-flex; align-items: center; gap: 5px; }
.kv-inline .icon { width: 15px; height: 15px; color: var(--text-2); }


/* ===== KPI (tile de un numero grande) ==================================== */
/* Un dato por tile: rotulo chico arriba, numero grande, contexto abajo. Va sobre .card,
   o sobre <button class="card kpi card-clickable"> si lleva a otra pantalla.
   🔴 Valor desconocido = "—", NUNCA un 0. Un cero es un dato ("hoy no vino nadie") y un
   guion es "no lo se": con 4 reservas en la base, esa diferencia es todo. */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.kpis .card + .card{margin-top:0}
.kpi{display:flex;flex-direction:column;gap:3px;padding:12px 14px;min-width:0;text-align:left}
.kpi-l{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.kpi-l .icon{width:14px;height:14px;color:var(--text-3);flex:none}
.kpi-v{display:flex;align-items:baseline;gap:5px;font-family:var(--font-display);font-size:34px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.kpi-u{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
.kpi-s{color:var(--text-2);font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.kpi-cero .kpi-v{color:var(--text-3)}
.kpi-alerta .kpi-v{color:var(--warn)}
.kpi-mal .kpi-v{color:var(--danger)}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi-v{font-size:40px}}

/* ===== METER (una tasa, con su barra y su denominador) =================== */
/* Regla dura del componente: el denominador se muestra SIEMPRE. Por debajo del umbral de
   muestra la pantalla NO pone porcentaje: usa .meter-flojo, que muestra la fraccion cruda
   y apaga la barra dejando el riel punteado, que se lee como "todavia no hay medida". */
.meter{display:flex;flex-direction:column;gap:6px;min-width:0}
.meter-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.meter-t{color:var(--text-2);font-size:13px;font-weight:600}
.meter-n{font-family:var(--font-display);font-size:26px;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.meter-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.meter-bar > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.meter-ok > i{background:var(--ok)}
.meter-warn > i{background:var(--warn)}
.meter-mal > i{background:var(--danger)}
.meter-f{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
.meter-flojo .meter-n{font-family:var(--font-sans);font-size:17px;font-weight:700;color:var(--text-2)}
.meter-flojo .meter-bar{background:transparent;border:1px dashed var(--line-strong)}
.meter-flojo .meter-bar > i{display:none}

/* ===== BARS (distribucion: rotulo · barra · valor) ======================= */
/* 🔴 El relleno por defecto es TINTA neutra, no el acento: en KAO el acento es rojo puro y
   su token dice "es TINTA, nunca relleno de areas grandes" — una fila de barras rojas se
   lee como alarma. Solo la barra mas alta se pinta con el acento. La primera declaracion
   de background es el fallback para navegadores sin color-mix. */
.bars{display:flex;flex-direction:column;gap:8px;min-width:0}
.bar{display:grid;grid-template-columns:minmax(64px,auto) 1fr auto;align-items:center;gap:10px;min-width:0}
.bar-l{color:var(--text-2);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-t{height:10px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.bar-t > i{display:block;height:100%;border-radius:var(--r-pill);background:var(--text-3);background:color-mix(in srgb, var(--text) 26%, var(--surface))}
.bar-max .bar-t > i{background:var(--accent)}
.bar-v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-v .u{color:var(--text-2);font-weight:400}

/* ===== TABLA (cards en mobile, tabla en desktop) ========================= */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead { display: none; }
.table tbody, .table tr, .table td { display: block; }
.table tr {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 12px; margin-bottom: 8px;
}
.table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; min-width: 0; }
.table td[data-l]::before { content: attr(data-l); color: var(--text-2); font-size: 13px; flex: none; }
.table td.actions-cell { justify-content: flex-end; padding-top: 10px; }
.table .num { font-variant-numeric: tabular-nums; }
@media (min-width: 760px) {
  .table thead { display: table-header-group; }
  .table tbody { display: table-row-group; }
  .table tr { display: table-row; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .table td, .table th { display: table-cell; }
  .table th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
  .table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .table td[data-l]::before { content: none; }
  .table tbody tr:hover td { background: var(--surface); }
  .table td.actions-cell, .table th.actions-cell { text-align: right; }
  .table .num, .table th.num { text-align: right; }
}


/* ===== ESPERA (chip de tiempo esperando) ================================= */
.wait {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
}
.wait .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.wait-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); }
.wait-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); animation: blink 2.2s ease-in-out infinite; }


/* ===== EDITORIAL (bloque claro estilo carta) ============================= */
.editorial { background: var(--editorial-bg); color: var(--editorial-ink); border-radius: var(--r-lg); padding: 16px; }
.editorial h1, .editorial h2, .editorial .section-t { color: var(--editorial-ink); border-color: var(--editorial-ink); }
.editorial .muted { color: var(--editorial-ink); opacity: .72; }
.editorial ::selection { background: var(--editorial-ink); color: var(--editorial-bg); }


/* ===== UTILIDADES ======================================================== */
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.row-top { align-items: flex-start; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stack-lg { gap: 16px; }
.stack-sm { gap: 4px; }
.grow { flex: 1 1 auto; min-width: 0; }
.right { margin-left: auto; }
.center { text-align: center; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.break { overflow-wrap: anywhere; }
.divider { height: 1px; background: var(--line); margin: 12px 0; border: 0; }
.rule-accent { height: 2px; background: var(--accent); border: 0; margin: 8px 0; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hide-m { display: none !important; }
@media (min-width: 760px) {
  .hide-m { display: revert !important; }
  .hide-d { display: none !important; }
}
.tap { min-height: 44px; min-width: 44px; }
.link-btn { color: var(--accent); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.link-btn:hover { color: var(--accent-hover); text-decoration: underline; }


/* ===== ANIMACIONES ======================================================= */
@keyframes up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes hl-pulse { 0% { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 0 2px var(--accent), var(--shadow-1); } 100% { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .skeleton::after, .wait-danger { animation: none; }
}