/* Zetaene — sistema de diseño compartido (web, panel del cliente y Zetaene Admin).
   Colores y tipografía: los de ZN Devs. Todo lo demás (escalones de fondo, bordes finos, bandejas,
   pestañas tipo carpeta, botones claros, hovers) sigue la referencia pedida: mastra.ai.
   Sin build: este archivo se copia tal cual a admin/ui/zn/ con web/tools/sync_design.py. */

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/inter-var.woff2") format("woff2-variations"), url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Escalones de fondo en el azul noche de ZN (del más oscuro al más claro) */
  --ground: #060c15;         /* página */
  --night: #08101b;          /* bandas y barra lateral (navy-deep de la marca) */
  --tray: #0a131f;           /* bandejas grandes */
  --bg: #0c1522;             /* fondo de las apps y paneles internos */
  --surface: #0f1a29;        /* tarjetas */
  --surface-2: #142134;      /* tarjetas al pasar el mouse, controles */
  --surface-3: #1a2a40;      /* seleccionado, pistas de barras */
  --line: #15212f;           /* borde fino */
  --line-strong: #1f2e42;    /* borde marcado */
  --line-hover: #2b3d55;

  /* Tinta */
  --ink: #eef2f7;
  --ink-2: #d3dbe6;          /* texto de cuerpo */
  --ink-soft: #93a3b8;
  --ink-faint: #7d8ea5;      /* AA sobre --bg y --surface */

  /* Marca ZN */
  --navy: #184371;
  --link: #8fb3e0;
  --vermilion: #b72e2b;
  --vermilion-hover: #c93a36;
  --vermilion-text: #e0504c; /* el "ene" del logo: acento de texto */
  --vermilion-ink: #ff8a85;  /* texto de alerta sobre fondo oscuro (AA) */
  --vermilion-wash: rgb(183 46 43 / 0.14);
  --on-vermilion: #ffffff;
  --light: #d6dee8;          /* botón principal (claro) */
  --on-light: #08101b;

  /* Estados */
  --ok: #4fae84;
  --ok-text: #7fd0aa;
  --ok-wash: rgb(79 174 132 / 0.12);
  --warn: #e0a54a;
  --warn-text: #f0c27f;
  --warn-wash: rgb(224 165 74 / 0.12);
  --info: #8fb3e0;
  --info-wash: rgb(143 179 224 / 0.12);
  --muted-wash: rgb(255 255 255 / 0.04);

  /* Gráficos: azules ZN; el bermellón destaca UNA cosa que pide atención */
  --chart-1: #8fb3e0;
  --chart-2: #4f7fb8;
  --chart-3: #b9c7d8;
  --chart-4: #2c5a8c;
  --chart-hi: #e0504c;

  /* Tipografía de ZN: SF Pro en Apple, Inter en el resto. Mono sólo para etiquetas de pestaña y datos */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Variable", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Variable", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.25rem;
  --t-2xl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --t-3xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --t-4xl: clamp(2.5rem, 1.7rem + 3vw, 3.75rem);

  /* Espacio (base 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Forma: 6 / 10 / 20 / 40, y píldora para botones */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-tray: 40px;
  --r-frame: 20px;
  --r-pill: 999px;

  --wrap: 1272px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 150ms;
  --shadow-pop: 0 4px 60px rgb(0 0 0 / 0.7);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.5;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--ink); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; font-weight: 560; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--fast) var(--ease); }
a:hover { color: var(--ink); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--navy); color: var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
input, textarea { caret-color: var(--link); }
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0; }
.soft { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.accent { color: var(--vermilion-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Etiqueta mono en mayúsculas (pestañas, rótulos de datos) */
.tag-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

/* Íconos (sprite en assets/icons.svg) */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 15px; height: 15px; }
.i-lg { width: 22px; height: 22px; }
p > .i, .hint > .i, span > .i:only-child { display: inline-block; vertical-align: -0.2em; }

/* ---------- Botones (píldora; principal claro, secundario oscuro) ---------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 500; font-size: var(--t-md); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  /* Anillo de 1 px que se apaga hacia abajo, como los botones de la referencia */
  --btn-ring: rgb(255 255 255 / 0.1);
  background-image: linear-gradient(var(--btn-bg), var(--btn-bg)), linear-gradient(180deg, var(--btn-ring) 0%, rgb(255 255 255 / 0) 100%);
  background-origin: padding-box, border-box; background-clip: padding-box, border-box;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { --btn-bg: var(--surface-3); --btn-fg: var(--ink); color: var(--btn-fg); }
.btn-ghost, .btn-line { --btn-ring: transparent; }
.btn:active { transform: scale(0.98); }
.btn .i { transition: transform var(--fast) var(--ease); }
.btn:hover .i-go { transform: translate(2px, -2px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primary, .btn-light { --btn-bg: var(--light); --btn-fg: var(--on-light); --btn-ring: #fff; }
.btn-primary:hover, .btn-light:hover { --btn-bg: #ffffff; --btn-fg: var(--on-light); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink-soft); }
.btn-ghost:hover { --btn-bg: var(--muted-wash); --btn-fg: var(--ink); }
.btn-line { --btn-bg: transparent; border-color: var(--line-strong); }
.btn-line:hover { --btn-bg: var(--surface-2); border-color: var(--line-hover); }
.btn-danger { --btn-bg: var(--vermilion-wash); --btn-fg: var(--vermilion-ink); }
.btn-danger:hover { --btn-bg: rgb(183 46 43 / 0.24); --btn-fg: #ffb3ae; }
.btn-accent { --btn-bg: var(--vermilion); --btn-fg: var(--on-vermilion); }
.btn-accent:hover { --btn-bg: var(--vermilion-hover); --btn-fg: #fff; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: var(--t-sm); }
.btn-xs { min-height: 30px; padding: 0 12px; font-size: var(--t-xs); gap: 6px; }
.btn-icon { min-height: 36px; width: 36px; padding: 0; }
.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--btn-fg); border-right-color: transparent; animation: zn-spin 700ms linear infinite;
}
@keyframes zn-spin { to { transform: rotate(360deg); } }

/* Píldora chica con borde (filtros, acciones dentro de una ventana: "Chat · Editor · Review") */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  font-size: var(--t-sm); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip:hover { background: var(--surface-2); color: var(--ink); }
.chip.is-on, .chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--surface-3); color: var(--ink); border-color: var(--line-hover); }

/* ---------- Insignias de estado (texto con color, sin píldora pesada) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: var(--t-xs); font-weight: 500; white-space: nowrap;
  background: var(--muted-wash); color: var(--ink-soft);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.badge.plain::before { display: none; }
.badge.ok { background: var(--ok-wash); color: var(--ok-text); }
.badge.warn { background: var(--warn-wash); color: var(--warn-text); }
.badge.alert { background: var(--vermilion-wash); color: var(--vermilion-ink); }
.badge.info { background: var(--info-wash); color: var(--link); }

/* ---------- Formularios ---------- */
.field { display: grid; gap: 8px; }
.field > label, .label { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.hint { font-size: var(--t-sm); color: var(--ink-soft); }
.error-text { font-size: var(--t-sm); color: var(--vermilion-ink); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 0 var(--s-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
.textarea { padding: var(--s-3) var(--s-4); min-height: 110px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-hover); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--link); background: var(--surface-2); }
.input[aria-invalid="true"] { border-color: var(--vermilion-ink); }
.select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2393a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-soft); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #4f7fb8; flex: none; }

/* Interruptor */
.switch { position: relative; display: inline-flex; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line-hover); transition: background-color var(--fast) var(--ease); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-soft); transition: transform 200ms var(--ease-out), background-color var(--fast); }
.switch input:checked + span { background: var(--navy); border-color: var(--navy); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--ink); }
.switch input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }

/* Control segmentado (filtros y pestañas chicas) */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--night); border: 1px solid var(--line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a {
  border: 1px solid transparent; background: transparent; color: var(--ink-soft); cursor: pointer; text-decoration: none;
  min-height: 30px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg button:hover, .seg a:hover { color: var(--ink); background: var(--surface); }
.seg [aria-selected="true"], .seg [aria-current="page"], .seg .is-on { background: var(--surface-3); color: var(--ink); border-color: var(--line-hover); }

/* ---------- Bandeja y pestañas tipo carpeta (la firma de la referencia) ---------- */
.tray { position: relative; background: var(--tray); border: 1px solid var(--line); border-radius: 48px; padding: 20px; }

/* Pestañas como en la referencia: píldoras sueltas sobre la bandeja; la activa baja,
   se ensancha con dos curvas cóncavas y se vuelve una sola pieza con el panel. */
.folder { --fold-gap: 24px; --fold-r: 24px; --fold-bg: var(--bg); --fold-line: var(--line-strong); display: grid; }
.folder-tabs { display: flex; gap: 12px; position: relative; z-index: 2; overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding: 0 var(--fold-r); margin: 0 calc(-1 * var(--fold-r)); }
.folder-tabs::-webkit-scrollbar { display: none; }
.folder-tab {
  position: relative; flex: 1 1 0; min-width: max-content;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 64px; padding: 0 24px; margin-bottom: var(--fold-gap);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: #0d1725; color: var(--ink-faint); cursor: pointer;
  /* Tiempos y curva medidos en la referencia: 0,22 s, cubic-bezier(.22,1,.36,1) */
  transition: background-color 0.22s cubic-bezier(.22, 1, .36, 1), border-color 0.22s cubic-bezier(.22, 1, .36, 1), color 0.22s cubic-bezier(.22, 1, .36, 1);
}
.folder-tab .i { width: 20px; height: 20px; }
.folder-tab:not([aria-selected="true"]):is(:hover, :focus-visible) { background: var(--surface); border-color: var(--line); color: var(--ink); }
.folder-tab[aria-selected="true"] {
  height: calc(64px + var(--fold-gap) + 1px); margin-bottom: -1px; padding-bottom: var(--fold-gap);
  background: var(--fold-bg); color: var(--ink);
  border-color: var(--fold-line); border-bottom: 0; border-radius: 32px 32px 0 0;
}
.folder-tab[aria-selected="true"] .i { color: var(--ink); }
/* Las dos curvas que unen la pestaña con el panel */
.folder-tab[aria-selected="true"]::before, .folder-tab[aria-selected="true"]::after {
  content: ""; position: absolute; bottom: 0; width: var(--fold-r); height: var(--fold-r); pointer-events: none;
}
.folder-tab[aria-selected="true"]::before {
  left: calc(-1 * var(--fold-r) - 1px);
  background: radial-gradient(circle at 0 0, transparent calc(var(--fold-r) - 1px), var(--fold-line) calc(var(--fold-r) - 1px), var(--fold-line) var(--fold-r), var(--fold-bg) calc(var(--fold-r) + 0.5px));
}
.folder-tab[aria-selected="true"]::after {
  right: calc(-1 * var(--fold-r) - 1px);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--fold-r) - 1px), var(--fold-line) calc(var(--fold-r) - 1px), var(--fold-line) var(--fold-r), var(--fold-bg) calc(var(--fold-r) + 0.5px));
}
.folder-tabs[data-first-on] .folder-tab[aria-selected="true"]::before,
.folder-tabs[data-last-on] .folder-tab[aria-selected="true"]::after { display: none; }
.folder-body { position: relative; z-index: 1; background: var(--fold-bg); border: 1px solid var(--fold-line); border-radius: 40px; overflow: hidden; }
.folder-tabs[data-first-on] + .folder-body { border-top-left-radius: 0; }
.folder-tabs[data-last-on] + .folder-body { border-top-right-radius: 0; }

/* Etiqueta-pestaña sobre una bandeja ("Disponibles ahora", "Novedades") */
.tab-label {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 18px; border-radius: 14px 14px 0 0;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  color: var(--ink-soft); font-size: var(--t-sm);
}

/* ---------- Ventana de producto (marco de una app dentro de la web o de un panel) ---------- */
.frame { position: relative; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-frame); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: var(--s-2); padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-soft); }
.frame-bar .dots { display: flex; gap: 6px; }
.frame-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-soft); }
.crumb b { color: var(--ink); font-weight: 500; }

/* ---------- Superficies de panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color var(--fast) var(--ease); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) 0; }
.panel-head h2, .panel-head h3 { font-size: var(--t-md); font-weight: 560; letter-spacing: -0.005em; }
.panel-body { padding: var(--s-4) var(--s-5) var(--s-5); }

/* Tablas (encabezado con divisores, filas que se iluminan) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-weight: 500; color: var(--ink-soft); padding: 12px var(--s-4); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--night); }
.table th + th { border-left: 1px solid var(--line); }
.table th:first-child { border-top-left-radius: var(--r-sm); }
.table th:last-child { border-top-right-radius: var(--r-sm); }
.table td { padding: 12px var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.table tr:last-child td { border-bottom: 0; }
.table td > b, .table td > .mono, .table td.mono, .table td > a, .table td > .badge, .table td:last-child, .table td .btn { white-space: nowrap; }
.table tbody tr { transition: background-color var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }
.table tr.is-alert td { background: rgb(183 46 43 / 0.16); }
.table tr.is-alert:hover td { background: rgb(183 46 43 / 0.24); }
.table .r { text-align: right; }

/* Aviso de datos de ejemplo — siempre visible donde haya números de demo */
.demo-flag {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; justify-self: start;
  height: 26px; padding: 0 10px; border-radius: var(--r-xs);
  background: var(--warn-wash); color: var(--warn-text);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
.demo-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Barra de progreso fina */
.meter { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--link); transition: width 600ms var(--ease-out); }
.meter.is-warn > i { background: var(--warn); }
.meter.is-alert > i { background: var(--vermilion-text); }

/* Avisos emergentes */
.toast-zone { position: fixed; z-index: 90; bottom: 20px; left: 50%; translate: -50% 0; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { padding: 12px 16px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--shadow-pop); font-size: var(--t-sm); animation: zn-toast 320ms var(--ease-out); }
@keyframes zn-toast { from { opacity: 0; transform: translateY(8px); } }

/* Diálogo */
dialog.dlg { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink-2); padding: 0; width: min(520px, calc(100% - 32px)); box-shadow: var(--shadow-pop); }
dialog.dlg::backdrop { background: rgb(3 6 10 / 0.75); }
.dlg-head { padding: var(--s-5) var(--s-6) 0; }
.dlg-body { padding: var(--s-4) var(--s-6); display: grid; gap: var(--s-4); }
.dlg-foot { padding: 0 var(--s-6) var(--s-5); display: flex; justify-content: flex-end; gap: var(--s-2); }

/* Estado vacío */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-10) var(--s-6); color: var(--ink-soft); }
.empty h3 { color: var(--ink); font-size: var(--t-lg); }

/* En la web (body.site) no se aplica: la web anima siempre (ver site.js). */
@media (prefers-reduced-motion: reduce) {
  body:not(.site) *, body:not(.site) *::before, body:not(.site) *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Beta: marca al lado del logo y franja de aviso ---------- */
.beta-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 2px;
  border-radius: 5px; border: 1px solid rgb(224 165 74 / 0.45); background: var(--warn-wash); color: var(--warn-text);
  font: 600 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal;
}
.beta-band {
  display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 16px; background: var(--warn-wash); color: var(--warn-text); border-bottom: 1px solid rgb(224 165 74 / 0.25);
  font-size: var(--t-xs, 12px); text-align: center;
}
.beta-band b { color: var(--ink); font-weight: 600; }
.beta-band a { color: var(--warn-text); }
.promo-gratis {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--ok-wash); color: var(--ok-text); font-size: var(--t-xs, 12px); font-weight: 600;
}