/* ===========================================================================
 * Cronos · sistema de diseño
 *
 * Heredado del ADN visual de APOLO, para que las dos aplicaciones internas de
 * Dreamland se sientan como una sola casa. Los valores no son una aproximación:
 * salen de los tokens reales de producción de Apolo
 * (frontend/web/src/index.css y tailwind.config.js).
 *
 * Convención heredada de Apolo: cada token de color es un triplete "R G B" SIN
 * envolver en rgb(). Eso permite componer con alfa —rgb(var(--c-sage) / .1)—
 * que es justo como se construyen los chips de estado (fondo al 10 %, borde al
 * 40 %, texto al 100 %).
 *
 * Los temas van POR CLASE en el <html> de cada página, no por
 * prefers-color-scheme: cada pantalla sigue a su referencia (4.6). El widget
 * y la sala llevan `tema-piloto`, la web de reservas; el panel, `tema-tablero`.
 * Hubo un tema oscuro, `dark`, para la sala, y se quitó el 6 de octubre de
 * 2026, cuando la sala pasó al diseño de la web de reservas.
 * ========================================================================= */

/* --------------------------------------------------------------------------
 * Tipografías — las mismas caras que Apolo, servidas en local
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Variable-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Variable-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond: los titulares del piloto de reserva, que es la referencia
   del widget (4.6). Variable de 300 a 700, en redonda y en cursiva, servida
   desde aquí como las demás: pedirla a Google es mandarle la IP de cada
   comensal, y la CSP de la página solo deja cargar del propio origen. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Italic-Variable-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Italic-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces y DM Sans: las de la presentación del caso, que es la referencia del
   panel (4.6). Fraunces es variable en peso y en tamaño óptico —el navegador
   elige el ojo según el cuerpo—, en redonda y en cursiva; DM Sans, solo en
   redonda: el panel no escribe en cursiva más que una píldora, y para eso basta
   la que compone el navegador. */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Variable-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Italic-Variable-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces-Italic-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-Variable-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Juana';
  src: url('/fonts/Juana Light.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Juana Alt';
  src: url('/fonts/Juana Alt ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
 * Tokens — tema claro
 * ------------------------------------------------------------------------ */

:root {
  /* Superficie: de la más clara (50, tarjeta elevada) a la más oscura (600, borde marcado) */
  --c-cream-50:  253 248 241;
  --c-cream-100: 242 237 234;
  --c-cream-200: 234 228 225;   /* fondo de página */
  --c-cream-300: 226 219 216;
  --c-cream-400: 213 206 203;
  --c-cream-500: 208 205 198;
  --c-cream-600: 184 174 174;
  --c-surface-raised: 255 255 255;

  /* Tinta */
  --c-charcoal:       46 45 44;
  --c-charcoal-light: 52 52 52;
  --c-charcoal-muted: 96 96 96;
  /* Oscurecido desde el 138 133 128 original: sobre el crema de página daba
     2.90:1 y WCAG 2.1 AA exige 4.5:1 para texto. Se usa en encabezados de
     tabla y contadores, que son texto informativo, no decoración. */
  --c-charcoal-faint: 106 102 99;

  /* Acentos de marca */
  --c-sage:       102 127 97;
  --c-sage-light: 122 143 107;
  --c-sage-dark:  74 122 94;
  /* El salvia de marca sirve para rellenos, bordes e insignias, pero como
     TEXTO sobre crema se queda en 3.5:1 y WCAG pide 4.5:1. Esta es su tinta:
     el mismo verde, oscurecido lo justo para poder leerlo. Mismo patrón que
     --c-voltereta-ink y sus hermanos. */
  --c-sage-ink:   78 97 74;
  --c-magia:      184 148 90;   /* dorado */
  /* El dorado cuando tiene que verse sobre una superficie clara: hoy, la raya
     de la pestaña activa del panel, y cualquier letra que vaya en oro. El
     relleno no llega —sobre el crema se queda en 2,4:1—, y este pasa 4,5:1
     sobre todas las superficies claras de los tres temas. */
  --c-magia-ink:  128 94 32;
  --c-verde:      95 107 63;
  /* La línea del periodo en las gráficas del tablero. Es decorado —la cifra y
     la tabla dicen lo mismo—, pero se distingue de la de comparación. */
  --c-tendencia:  196 80 64;

  /* Estado */
  --c-status-ok:          102 127 97;
  --c-status-ok-ink:      var(--c-sage-ink);
  /* El ámbar original (184 146 47) daba 2.3:1 como texto sobre crema y 2.9:1
     con blanco encima. Este pasa 4.5:1 en las dos direcciones: como texto del
     chip sobre su propio tinte, y como fondo con texto blanco. */
  --c-status-warning:     115 91 29;
  --c-status-error:       196 80 64;
  /* Como el salvia: el rojo pleno sirve de relleno y de borde, pero como texto
     sobre su propio tinte se queda en 3.2:1. */
  --c-status-error-ink:   152 50 38;
  --c-status-info:        107 143 163;
  --c-status-info-strong: 72 110 132;
  /* «strong» es para rellenos con más peso; esta es la tinta de texto, y hace
     falta más oscura todavía: sobre el tinte al 10 %, «strong» se queda en 4:1. */
  --c-status-info-ink:    60 95 115;

  /* Barra lateral: casi negra, como en Apolo; cada tema le da su noche */
  --c-side-bg:   26 26 26;
  --c-side-text: 208 205 198;
  --c-side-hi:   242 237 234;
  /* Tenue PARA LA BARRA. No vale reutilizar --c-charcoal-faint aquí: ese está
     calculado contra el crema del tema claro, y sobre el carbón de la barra se
     queda en 3:1. La barra es oscura en todos los temas, y cada uno le da a
     este token el valor que se lee sobre la suya. */
  --c-side-faint: 146 141 135;
  /* El dorado que se lee SOBRE la barra: el acento de la portada del widget
     cuando un local no trae el suyo. Aquí es el mismo dorado de arriba; en el
     tema del piloto, su segundo oro, más claro. */
  --c-side-accent: 184 148 90;

  /* Acentos por marca del grupo (gama tierra, como los dominios de Apolo).
     One Burger tuvo el suyo, un rojo tierra, hasta que dejó de gestionarse el
     7 de octubre de 2026. */
  --c-voltereta:      165 100 58;   /* terracota */
  --c-voltereta-soft: 247 234 222;
  --c-voltereta-ink:  140 85 49;
  --c-begin:          143 112 41;   /* ocre dorado */
  --c-begin-soft:     244 237 216;
  --c-begin-ink:      122 95 35;

  /* Tipografía */
  --font-display: 'Juana', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Formas */
  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-col: 28px;
  --radius-sm: 10px;

  /* Sombras */
  --shadow-card: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --shadow-cta: 0 2px 12px rgb(0 0 0 / .08);
}

/* --------------------------------------------------------------------------
 * Tema del piloto — el widget del comensal y la sala
 *
 * Cada pantalla sigue a su referencia, y eso lo decidió dirección el 3 de
 * octubre de 2026: el widget, al piloto de reserva de Voltereta; el panel y la
 * sala, a la presentación del caso. El 6 de octubre la sala pasó también a
 * este, el de la web de reservas (4.6). Este es el del piloto, con sus valores:
 * papel #F6F2EA, tinta #15171A, gris #6F685E, líneas #E4DCCD y #EFE9DE, marino
 * #101A2B y oro #B08A4A, Cormorant Garamond para los titulares y Manrope para
 * el resto.
 *
 * Mismos nombres de token que el resto, y por eso ni el widget ni la sala
 * cambian de hoja: cambia lo que vale cada nombre. Y lo que no sale del piloto se queda:
 * los estados, tal como se ajustaron sobre el crema, que tiene la claridad del
 * papel, y las tintas de cada marca. El oro del piloto da 2,86:1 sobre el
 * papel, así que va en rellenos, bordes y subrayados, nunca en una letra.
 * ------------------------------------------------------------------------ */

.tema-piloto {
  --c-cream-50:  252 250 246;
  --c-cream-100: 249 246 240;
  --c-cream-200: 246 242 234;   /* el papel: fondo de página */
  --c-cream-300: 239 233 222;   /* la línea clara */
  --c-cream-400: 228 220 205;   /* la línea */
  --c-cream-500: 214 204 186;
  --c-cream-600: 190 178 158;
  --c-surface-raised: 255 255 255;

  --c-charcoal:       21 23 26;
  --c-charcoal-light: 21 23 26;
  --c-charcoal-muted: 111 104 94;
  /* Un punto más oscuro que el gris del piloto: este también va sobre la
     línea clara, y ahí el del piloto se queda en 4,55:1. */
  --c-charcoal-faint: 106 99 89;

  /* El verde del piloto —el del «sin coste» del resumen— hace de salvia: lo
     que va bien, lo elegido y el foco. Como relleno y como letra pasa 4,5:1. */
  --c-sage:       79 107 85;
  --c-sage-light: 96 126 101;
  --c-sage-dark:  63 90 69;
  --c-sage-ink:   72 98 78;
  --c-magia:      176 138 74;   /* el oro */

  /* El marino del piloto hace de noche cuando un local no trae la suya: la
     cabecera de la portada, el resumen y la tarjeta del final. */
  --c-side-bg:    16 26 43;
  --c-side-text:  214 207 194;
  --c-side-hi:    246 242 234;
  --c-side-faint: 150 156 166;
  /* Sobre el marino, el piloto escribe con su segundo oro, #D8BE8A: el
     primero, con el patrón de la portada encima, se queda en 4,2:1. */
  --c-side-accent: 216 190 138;

  /* Las etiquetas de los vuelos y de cada viaje: «últimas plazas» en siena
     sobre su crema, «disponible» en el verde sobre el suyo, «completo» en gris.
     Los tres pasan 4,5:1 con su letra (prueba 44). */
  --c-pocas:       160 82 45;
  --c-pocas-fondo: 251 237 228;
  --c-bien-fondo:  238 243 236;
  --c-gris-fondo:  238 233 225;
  /* El rojo del sello de Kioto, que es un hanko: decorado, sin letra que leer. */
  --c-hanko:       181 69 47;
  /* El pasaporte: su tapa, sus hojas y el guilloché del papel. */
  --c-libro:       27 35 53;
  --c-hoja:        251 247 238;
  --c-guilloche:   226 214 190;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --peso-texto: 400;
  /* Cormorant trae cifras antiguas, de las que suben y bajan: la mesa «S02»
     se leía «So2», que es un código que se dicta por teléfono. Con las de caja
     alta se lee como se dice. Manrope ya las trae así. Quien fije
     `font-variant-numeric` en algo escrito con Cormorant tiene que repetirlo,
     porque esa propiedad no se suma: se sustituye. */
  font-variant-numeric: lining-nums;

  --radius-sm: 12px;
  --shadow-card: 0 30px 70px -40px rgb(16 26 43 / .45);
  --shadow-cta: 0 14px 30px -24px rgb(16 26 43 / .5);
}

/* --------------------------------------------------------------------------
 * Tema del tablero — el panel de gestión
 *
 * El del «Tablero de reservas» de la presentación del caso, que es la
 * referencia del panel (4.6): marfil #FBF7EF, arena #F4ECDD, línea #E8DDCA,
 * tinta #1E1A16, gris #6B6258 y oro #B8872E, con Fraunces para titulares y
 * cifras y DM Sans para el resto. La barra lateral va en su noche, la misma
 * tinta, con el oro claro #E4C27A encima, como su «Así se ve la casa ordenada».
 *
 * Como el del piloto: mismos nombres, otros valores, y lo que no sale de la
 * presentación se queda —los estados y las tintas de cada marca—. El salvia ya
 * era su verde (#667F61). Y su oro tampoco es una letra sobre el marfil: da
 * 3:1, así que cuando el oro escribe, escribe con `--c-magia-ink`.
 * ------------------------------------------------------------------------ */

.tema-tablero {
  --c-cream-50:  255 253 249;
  --c-cream-100: 253 250 244;
  --c-cream-200: 251 247 239;   /* el marfil: fondo de página */
  --c-cream-300: 244 236 221;   /* la arena: filas alternas, chips, filtros */
  --c-cream-400: 232 221 202;   /* la línea */
  --c-cream-500: 222 209 186;
  --c-cream-600: 196 182 158;
  --c-surface-raised: 255 255 255;

  --c-charcoal:       30 26 22;   /* la tinta */
  --c-charcoal-light: 46 41 36;
  --c-charcoal-muted: 107 98 88;  /* el gris de la presentación */
  --c-charcoal-faint: 101 92 82;

  --c-magia:      184 135 46;   /* el oro */
  --c-tendencia:  180 83 47;    /* la teja de las líneas del tablero */

  --c-side-bg:     30 26 22;    /* la noche */
  --c-side-text:   222 213 199;
  --c-side-hi:     251 247 239;
  --c-side-faint:  167 157 144;
  --c-side-accent: 228 194 122; /* el oro claro */

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --peso-texto: 400;

  /* Los botones de la presentación: rectángulos redondeados, en negrita. Y la
     marca, con la letra de los titulares y sin versales. */
  --radio-boton: 10px;
  --peso-boton: 600;
  --radio-insignia: 14px;
  --marca-familia: var(--font-display);
  --marca-peso: 700;
  --marca-espaciado: -.01em;
  --marca-caja: none;

  --radius-sm: 10px;
  --radius-card: 18px;
  --shadow-card: 0 30px 60px -42px rgb(30 26 22 / .45), 0 1px 2px rgb(30 26 22 / .04);
  --shadow-cta: 0 12px 24px -18px rgb(30 26 22 / .6);
}

/* --------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: rgb(var(--c-cream-200));
  color: rgb(var(--c-charcoal-light));
  font-family: var(--font-sans);
  font-size: 16px;
  /* Apolo usa pesos ligeros en toda la interfaz; el piloto, el de siempre. Lo
     dice cada tema. */
  font-weight: var(--peso-texto, 300);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: rgb(var(--c-charcoal));
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -.6px; }
h2 { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -.5px; }
h3 { font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -.4px; }

p { margin: 0 0 12px; }

.text-p     { font-size: 14px; font-weight: var(--peso-texto, 300); line-height: 21px; }
.text-small { font-size: 12px; font-weight: var(--peso-texto, 300); line-height: 16px; }
.text-muted { color: rgb(var(--c-charcoal-muted)); }
.text-faint { color: rgb(var(--c-charcoal-faint)); }
.num        { font-variant-numeric: tabular-nums; }

/* Los enlaces son texto: van con la tinta, no con el relleno de marca. */
a { color: rgb(var(--c-sage-ink)); }

:focus-visible {
  outline: 2px solid rgb(var(--c-sage));
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
 * Marca — como la componga el tema: en versales espaciadas, como Apolo, o con
 * la letra de los titulares, como la presentación del caso
 * ------------------------------------------------------------------------ */

.wordmark {
  font-family: var(--marca-familia, var(--font-sans));
  font-weight: var(--marca-peso, 200);
  font-size: 20px;
  letter-spacing: var(--marca-espaciado, 4.8px);
  text-transform: var(--marca-caja, uppercase);
  color: rgb(var(--c-side-hi));
}

/* --------------------------------------------------------------------------
 * Barra lateral oscura sobre lienzo crema
 * ------------------------------------------------------------------------ */

.side {
  background: rgb(var(--c-side-bg));
  color: rgb(var(--c-side-text));
  display: flex;
  flex-direction: column;
}
.side-head { padding: 22px 24px; }
.side-nav { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
/* Vale igual sobre <a> y sobre <button>. El reinicio de apariencia no es
   cosmética: un <button> sin él trae fondo gris del sistema, borde outset y la
   tipografía por defecto, y el texto crema encima queda en 1.4:1 de contraste,
   que incumple WCAG 1.4.3. */
.side-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: 14px; font-weight: var(--peso-texto, 300);
  text-align: left;
  color: rgb(var(--c-side-text));
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.side-item:hover { background: rgb(255 255 255 / .06); color: rgb(var(--c-side-hi)); }
/* La elegida, además del fondo, lleva su raya: el fondo al 10 % se distingue
   poco, y en la barra hay nueve botones iguales. */
.side-item.is-active {
  background: rgb(255 255 255 / .10);
  color: rgb(var(--c-side-hi));
  box-shadow: inset 3px 0 0 rgb(var(--c-side-accent));
}
.side-item .count {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 600;
  background: rgb(var(--c-status-error)); color: #fff;
}
.side-foot {
  padding: 16px 24px;
  border-top: 1px solid rgb(255 255 255 / .08);
  font-size: 12px; color: rgb(var(--c-side-faint));
}

/* --------------------------------------------------------------------------
 * Cabecera de sección — insignia de color + título serif. Redonda en Apolo, y
 * en la presentación, la teja de esquinas suaves de sus tarjetas
 * ------------------------------------------------------------------------ */

.page-head { display: flex; align-items: flex-start; gap: 16px; }
.badge-round {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--radio-insignia, var(--radius-pill));
  display: grid; place-items: center;
  font-size: 20px; color: #fff;
  background: rgb(var(--c-voltereta));
}
.badge-round.is-begin { background: rgb(var(--c-begin)); }
.page-sub { font-size: 14px; font-weight: var(--peso-texto, 300); color: rgb(var(--c-charcoal-muted)); margin-top: 2px; }

/* --------------------------------------------------------------------------
 * Botones — píldoras en Apolo; en la presentación, rectángulos redondeados y
 * en negrita. Lo decide el tema con --radio-boton y --peso-boton
 * ------------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radio-boton, var(--radius-pill));
  border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--peso-boton, 300);
  line-height: 1.2;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
  text-decoration: none;
}
.btn-primary {
  background: rgb(var(--c-charcoal));
  color: rgb(var(--c-cream-200));
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { opacity: .88; }
.btn-secondary {
  background: rgb(var(--c-surface-raised));
  color: rgb(var(--c-charcoal));
  border-color: rgb(var(--c-cream-400));
}
.btn-secondary:hover { background: rgb(var(--c-cream-100)); }
.btn-accent { background: rgb(var(--c-sage-dark)); color: #fff; }
.btn-accent:hover { opacity: .9; }
.btn-danger { background: rgb(var(--c-status-error)); color: #fff; }
.btn-ghost { background: transparent; color: rgb(var(--c-charcoal-muted)); }
.btn-ghost:hover { background: rgb(var(--c-cream-300)); color: rgb(var(--c-charcoal)); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
 * Chips de estado — fondo al 10 %, borde al 40 %, texto pleno
 * ------------------------------------------------------------------------ */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip-ok      { background: rgb(var(--c-status-ok) / .1);      border-color: rgb(var(--c-status-ok) / .4);      color: rgb(var(--c-status-ok-ink)); }
.chip-warning { background: rgb(var(--c-status-warning) / .1); border-color: rgb(var(--c-status-warning) / .4); color: rgb(var(--c-status-warning)); }
.chip-error   { background: rgb(var(--c-status-error) / .1);   border-color: rgb(var(--c-status-error) / .4);   color: rgb(var(--c-status-error-ink)); }
.chip-info    { background: rgb(var(--c-status-info) / .1);    border-color: rgb(var(--c-status-info) / .4);    color: rgb(var(--c-status-info-ink)); }
.chip-neutral { background: rgb(var(--c-charcoal) / .07);      border-color: rgb(var(--c-charcoal) / .18);      color: rgb(var(--c-charcoal-muted)); }
.chip-solid   { background: rgb(var(--c-charcoal)); color: rgb(var(--c-cream-200)); border-color: transparent; }

/* --------------------------------------------------------------------------
 * Pestañas — icono + texto, subrayado en la activa
 * ------------------------------------------------------------------------ */

.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid rgb(var(--c-cream-400));
}
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--peso-texto, 300);
  color: rgb(var(--c-charcoal-muted));
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: rgb(var(--c-charcoal)); }
/* La activa, en tinta y con la raya del oro —con su tinta, que como raya de un
   estado también tiene que verse: el relleno se queda en 3:1 sobre el marfil—.
   Antes era la terracota de Voltereta, que en el panel de otra marca decía de
   quién era el panel. */
.tab.is-active {
  color: rgb(var(--c-charcoal));
  font-weight: 600;
  border-bottom-color: rgb(var(--c-magia-ink));
}

/* --------------------------------------------------------------------------
 * Superficies
 * ------------------------------------------------------------------------ */

.card {
  background: rgb(var(--c-surface-raised));
  border: 1px solid rgb(var(--c-cream-400));
  border-radius: var(--radius-card);
  padding: 20px;
}
.card-elevated { box-shadow: var(--shadow-card); }

.column {
  background: rgb(var(--c-cream-50));
  border: 1px solid rgb(var(--c-cream-300));
  border-radius: var(--radius-col);
  padding: 16px;
}

.panel {
  background: rgb(var(--c-cream-50));
  border: 1px solid rgb(var(--c-cream-400));
  border-radius: var(--radius-card);
}

.divider { height: 1px; background: rgb(var(--c-cream-400)); border: 0; margin: 16px 0; }

/* --------------------------------------------------------------------------
 * Formularios
 * ------------------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 6px; }
.label {
  font-size: 12px; font-weight: 600;
  color: rgb(var(--c-charcoal-muted));
  letter-spacing: .02em;
}
.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgb(var(--c-cream-400));
  background: rgb(var(--c-surface-raised));
  color: rgb(var(--c-charcoal));
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--peso-texto, 300);
}
.input::placeholder, .textarea::placeholder { color: rgb(var(--c-cream-600)); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: rgb(var(--c-sage));
  box-shadow: 0 0 0 3px rgb(var(--c-sage) / .15);
}
.textarea { min-height: 84px; resize: vertical; }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: var(--peso-texto, 300); }
/* 20px en vez de 16: el objetivo táctil de una casilla de 16 se queda corto,
   y aunque la etiqueta entera también sea pulsable, la casilla es donde la
   gente apunta. WCAG 2.2 pide 24×24 de objetivo; con el relleno de la fila se
   alcanza, y la casilla en sí ya no es un punto. */
.check input {
  margin-top: 2px;
  accent-color: rgb(var(--c-sage));
  width: 20px; height: 20px;
  flex: 0 0 20px;
}

/* Selector en píldoras (nº de personas, zona…) */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(var(--c-cream-400));
  background: rgb(var(--c-surface-raised));
  color: rgb(var(--c-charcoal));
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--peso-texto, 300);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.pill:hover { border-color: rgb(var(--c-charcoal-faint)); }
.pill.is-active {
  background: rgb(var(--c-charcoal));
  color: rgb(var(--c-cream-200));
  border-color: rgb(var(--c-charcoal));
}
.pill:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* --------------------------------------------------------------------------
 * Plano de una zona (4.28)
 *
 * Lo dibuja `/shared/plano.js` y lo comparten el editor del panel, el plano
 * del día y la tablet, así que sus colores viven aquí y salen de los tokens:
 * cada pantalla los pinta con los valores de su tema.
 *
 * Los trazos llevan `non-scaling-stroke`: el plano va en centímetros con una
 * escala por fuera, y sin eso una línea de 1,5 saldría de 1,5 CENTÍMETROS
 * —invisible en la tablet, un borrón en un plano pequeño—.
 * ------------------------------------------------------------------------ */

.plano__suelo { fill: rgb(var(--c-cream-50)); }
.plano__rejilla,
.plano__metro {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.plano__rejilla { stroke: rgb(var(--c-cream-300)); }
.plano__metro { stroke: rgb(var(--c-cream-500)); }
.plano__limite {
  fill: none;
  stroke: rgb(var(--c-cream-600));
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.plano-el__cuerpo { fill: rgb(var(--c-charcoal-muted)); }
.plano-el--wall .plano-el__cuerpo { fill: rgb(var(--c-charcoal)); }
.plano-el--bar .plano-el__cuerpo {
  fill: rgb(var(--c-magia) / .28);
  stroke: rgb(var(--c-magia));
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.plano-el__vano { fill: rgb(var(--c-cream-50)); }
.plano-el__hoja,
.plano-el__marco {
  fill: none;
  stroke: rgb(var(--c-charcoal-muted));
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.plano-el__cristal {
  stroke: rgb(var(--c-status-info));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.plano-el__caja { fill: none; }
.plano-el__texto {
  fill: rgb(var(--c-charcoal-muted));
  font-family: var(--font-sans);
  font-weight: 600;
}

.plano-mesa__cuerpo {
  fill: rgb(var(--c-surface-raised));
  stroke: rgb(var(--c-charcoal-muted));
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* El código, en la letra de las cifras: en DM Sans, la del panel, el cero y la
   O son el mismo círculo y «S02» se lee «SO2». */
.plano-mesa__codigo {
  fill: rgb(var(--c-charcoal));
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-weight: 700;
}
.plano-mesa__detalle {
  fill: rgb(var(--c-charcoal));
  font-family: var(--font-sans);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
 * Utilidades mínimas
 * ------------------------------------------------------------------------ */

.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}