/*
 * SaaSBase Demo -- hoja de estilos de la base de demostracion (marca blanca).
 *
 * Hoja de estilos propia de este sistema. No se comparte con ningun otro: cada cliente tiene la suya. Para vestir la demo con otra marca se cambian los valores de los tokens de :root (los nombres se conservan), web/static/manifest.webmanifest y las imagenes de web/static/img (scripts/generar-logos.mjs).
 *
 * Paleta de la demo:
 *
 *   Neutros   escala gris fria (slate), de #ffffff (0) a #0f172a (900).
 *   Primario  indigo: 50 #eef2ff, 100 #e0e7ff, 200 #c7d2fe, 300 #a5b4fc, 500 #6366f1, 600 #4f46e5, 700 #4338ca, 800 #3730a3, 850 #312e81, 900 #1e1b4b, 950 #17154d; texto sobre el primario #ffffff.
 *   Acento    ambar #f59e0b, con texto #1c1403 encima; texto ambar sobre claro #92400e.
 *
 * Uso de la escala primaria: el 500 va sin texto encima (bandas, franjas, anillo de foco); el 600 lleva texto (barra superior, botones, enlaces y fichas ocupadas); el 700 es hover y texto fuerte sobre claro; el 50 y el 300 son tintes para fondos suaves y bordes; el 800, el 850 y el 900 son el lateral oscuro del panel (destino activo, hover y fondo). El ambar es solo acento: indicador del destino activo, anillo de foco sobre fondo oscuro, inicial del avatar y la accion principal de la reservacion rapida; nunca texto ni borde sobre claro.
 *
 * Contraste: web/templates/contraste_test.go mide los pares del panel contra el :root de este archivo y trae los numeros vigentes. Los comentarios de las secciones de portada, calendario y formulario que citan razones de contraste vienen de la paleta anterior y no se han vuelto a medir con esta; la prueba es la fuente de verdad.
 *
 * El primario no significa "disponible". El plano de ocupacion usa el hueco para decir "libre" y el relleno para decir "ocupada": ocupada va llena en el 600, lo libre va hueco con borde punteado, y ningun estado se apoya en un tinte claro del primario.
 *
 * Tipografia: el panel (Layout, login y PIN) usa Plus Jakarta Sans, servida desde web/static/fonts (ver el @font-face de abajo); el sitio publico conserva su letra. Sin fuentes externas ni CDN: la CSP solo permite 'self'.
 *
 * Sombras: son tres porque aparecen tres capas que flotan sobre el contenido: --shadow-sm para la tarjeta, --shadow-flotante para dialogo, cajon y toast, y --shadow-hover para el mosaico de habitacion, solo con puntero fino.
 */

/* === 1. Tokens de diseno === */
:root {
  /* Neutros: escala gris fria. */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;

  /* Escala del primario (indigo). Que escalon va en cada sitio esta en el encabezado; los pares con texto los mide contraste_test.go. */
  --color-primary-50: #eef2ff;  /* fondo suave */
  --color-primary-100: #e0e7ff; /* texto claro sobre la banda de la portada */
  --color-primary-200: #c7d2fe; /* fondo de las fotos de relleno de la portada */
  --color-primary-300: #a5b4fc; /* borde sobre la barra y texto secundario del lateral */
  --color-primary-500: #6366f1; /* sin texto encima */
  --color-primary-600: #4f46e5; /* con texto */
  --color-primary-700: #4338ca; /* hover y texto fuerte */
  --color-primary-800: #3730a3; /* destino activo del lateral */
  --color-primary-850: #312e81; /* hover del lateral */
  --color-primary-900: #1e1b4b; /* fondo del lateral */
  --color-primary-950: #17154d; /* tinta de la portada: contornos, sombras y texto oscuro */
  /* Texto sobre el primario. */
  --color-primary-contrast: #ffffff;

  /* Ambar de acento: indicador activo, foco sobre oscuro, avatar y boton de confirmar. Ver el encabezado. */
  --color-acento: #f59e0b;
  --color-acento-contraste: #1c1403; /* texto sobre el ambar */
  --color-acento-texto: #92400e;     /* texto ambar sobre claro */

  /* Semanticos -- fijos, no dependen de marca */
  --color-success-50: #eaf7ee;
  --color-success-500: #1e7d3c;
  --color-success-700: #145a2a;
  --color-success-contrast: #ffffff;
  --color-warning-50: #fff6e5;
  --color-warning-500: #8a5a00;
  --color-warning-700: #6b4600;
  --color-warning-contrast: #ffffff;
  --color-danger-50: #fdecec;
  --color-danger-500: #b3261e;
  --color-danger-700: #8a1c16;
  --color-danger-contrast: #ffffff;
  --color-info-50: #fdf1e6;   /* naranja de aviso, no azul de sistema */
  --color-info-500: #a5470a;  /* el mismo naranja, oscurecido para que se lea */
  --color-info-contrast: #ffffff;

  /* Superficie y texto (modo claro, unico tema del MVP) */
  --color-bg: var(--color-neutral-0);
  --color-bg-subtle: var(--color-neutral-50);
  --color-surface: var(--color-neutral-0);
  --color-border: var(--color-neutral-200);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-on-primary: var(--color-primary-contrast);
  --color-focus-ring: var(--color-primary-500);
  --color-focus-ring-on-dark: var(--color-acento); /* 8.17:1 sobre el 900 */
  /* Contorno de campos y controles: el --color-border de las tarjetas (1.40:1) no pasa el 3:1 de WCAG 1.4.11. Este da 4.90:1 sobre #ffffff y 4.57:1 sobre #f8fafc. */
  --color-border-control: var(--color-neutral-500);
  --color-overlay: rgba(15, 23, 42, 0.45);
  --color-blanco: #ffffff;

  /* Estados de limpieza: pares fondo y texto medidos (limpia 6.77:1, limpiando 7.76:1, sucia 7.95:1, mantenimiento 8.27:1, no molestar 6.74:1). Los usan la hoja de la recamarista, el plano y la Recepcion. */
  --color-limpieza-limpiando-fondo: #fbe6a6; --color-limpieza-limpiando-texto: #5e3f00;
  --color-limpieza-limpia-fondo: #e3f3e7; --color-limpieza-limpia-texto: #1b5e33;
  --color-limpieza-mantenimiento-fondo: #ddd5ef; --color-limpieza-mantenimiento-texto: #3b2c73;
  --color-limpieza-no_molestar-fondo: #f8d3c3; --color-limpieza-no_molestar-texto: #7f2a10;
  --color-limpieza-sucia-fondo: #e2e8f0; --color-limpieza-sucia-texto: #334155;
  --color-limpieza-ok-fondo: #f2f8f3; --color-limpieza-ok-borde: #b9ddc2; --color-limpieza-ok-marca: #1c5435;
  --color-limpieza-falta: #b3261e; --color-limpieza-falta-fondo: #fdecec; --color-limpieza-falta-borde: #f3cdbd;
  --color-limpieza-contorno: #15201a;
  --color-limpieza-casilla-borde: #94a3b8;
  --color-limpieza-foto-borde: #cbd5e1;
  --color-limpieza-dano-fondo: #fdf0ea;

  /* Tipografia: system font stack, sin fuentes externas */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Plus Jakarta Sans del panel, con su cara de respaldo metrica para que el cambio de letra no mueva el contenido. Solo la toman body.marco (el Layout del panel) y body.login-body. */
  --font-panel: "Plus Jakarta Sans", "Plus Jakarta Sans Respaldo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Serif para titulos: da el aire de hospitalidad que un sans neutro no tiene.
     Solo fuentes del sistema, sin descargas. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  /* Densidad de panel de trabajo, no de pagina de lectura.
   *
   * La base baja de 16 a 14 y la escala de titulos se comprime. Es el cambio que mas
   * se nota de los que pidio el negocio al ensenar capturas de otro dashboard: lo que
   * hace que esas pantallas se vean "de sistema" no es su paleta ni sus bordes, es que
   * caben mas renglones en la misma altura. Recepcion lee listas de ocupacion todo el
   * dia y cada renglon que cabe es uno que no hay que ir a buscar.
   *
   * El xs NO baja: es el de las etiquetas de estado y las unidades del plano, y por
   * debajo de 12px deja de leerse de pie frente al mostrador. El sm baja un punto, de 14
   * a 13, porque viste las tablas y las ayudas, que es donde la densidad se nota y donde
   * el texto va en renglones cortos. */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-base: 1.4285;

  /* Espaciado: escala base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radios y sombras: discretos */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;
  /* Radios del panel nuevo: campos y botones, y tarjetas de cifras y mosaicos. Las pantallas viejas conservan los de arriba hasta que se migran. */
  --radius-xl: 14px;
  --radius-2xl: 20px;
  /* El tinte de la sombra es el neutro 900 de esta paleta, no un gris azulado. */
  /* Una sola sombra, y minima. La media se quito porque no la usaba nadie: el comentario
   * que la justificaba hablaba de un menu desplegable que no existe en esta hoja. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.07);
  --shadow-flotante: 0 12px 32px rgba(15, 23, 42, 0.18);
  --shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.08);

  /* Foco (accesibilidad, nunca eliminar) */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Transiciones: cortas, solo retroalimentacion funcional */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  --content-max-width: 1180px;

  /* Estructura del panel */
  --lateral-ancho: 232px;
  --lateral-colapsado: 72px;
  --barra-alto: 56px;
  --barra-inferior-alto: 64px;
  --columna-actividad: 340px;
  --cajon-ancho: 440px;
  --dialogo-ancho: 560px;
  --dialogo-ancho-grande: 720px;
  --z-barra: 20;
  --z-lateral: 30;
  --z-toasts: 50;

  /* Toque (del TPV y de las maquetas): 44 de minimo, 48 con puntero grueso, 56 la accion principal; 40 solo con puntero fino desde 1024 px. */
  --toque-min: 44px;
  --toque: 48px;
  --toque-grande: 56px;
  --toque-fino: 40px;
  --tecla: 72px;
  /* Separacion entre objetivos tocables: 8 px con puntero fino, 12 con grueso (el bloque de puntero grueso del final la aplica). */
  --separacion: 8px;
  --borde-control: 1px solid var(--color-border-control);
}
@media (pointer: coarse) { :root { --separacion: 12px; } }

/* Plus Jakarta Sans (SIL OFL 1.1, licencia en fonts/OFL-plusjakartasans.txt). Version variable de peso (eje wght 200 a 800) del repositorio oficial tokotype/PlusJakartaSans, recortada en dos subconjuntos con fonttools:
 *   pyftsubset "PlusJakartaSans[wght].ttf" --flavor=woff2 --layout-features='*' --unicodes=<rango de abajo> --output-file=plus-jakarta-sans-<latin|latin-ext>.woff2
 * Nada se pide a terceros: font-src 'self' ya cubre estos archivos. El latin lleva el espanol completo; el latin-ext solo se descarga si aparece un caracter de ese rango. Pesos en uso: 400, 600, 700 y 800 del mismo archivo. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cara de respaldo: Arial (Liberation Sans en Linux) escalada a las metricas de Plus Jakarta Sans (ancho medio de minusculas 0.5266 contra 0.4817, ascenso 1.038 y descenso 0.222 entre 1.093), para que el cambio de letra al terminar la descarga no mueva el contenido. */
@font-face {
  font-family: "Plus Jakarta Sans Respaldo";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 109.3%;
  ascent-override: 95%;
  descent-override: 20.3%;
  line-gap-override: 0%;
}

/* === 2. Reset y base === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}
h1, h2, h3, h4 {
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-4);
  /* Reparte el texto entre renglones para que un titulo de dos lineas no deje una sola
   * palabra colgando abajo. Donde no se soporta no pasa nada: cae al salto normal. */
  text-wrap: balance;
}
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
/* El panel (Layout, login y PIN) usa Plus Jakarta Sans y retira la serifa de los titulos: las maquetas usan Jakarta 800 sin serifa. Basta redefinir las dos familias en el body, porque cada regla que las usa las lee con var(). Escala: h1 de 28 px en 800 con -0.02em, h2 de 18 px en 700; la base sigue en 14 px por la densidad que necesita el negocio. */
body.marco, body.login-body { --font-sans: var(--font-panel); --font-serif: var(--font-panel); }
body.marco { word-spacing: 0.06em; }
body.marco h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
body.marco h2 { font-size: 1.125rem; font-weight: 700; }
/* Aire del contenido del panel: sin esto el titulo de cada pantalla tocaba el borde de la barra (el aire de .pagina solo lo traen dos pantallas). */
body.marco main.container { padding-block: var(--space-4) var(--space-6); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-primary-600); }
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
button { font-family: inherit; }

/* Sin esto, el navegador espera ~300ms por si el toque es un doble toque para hacer zoom.
 * Donde mas se siente es en el selector de habitaciones: son decenas de casillas que
 * recepcion marca una tras otra desde el telefono, y el retardo se acumula en cada una.
 *
 * `.hab` NO va en esta lista, aunque el plano sea la rejilla mas grande de la pantalla:
 * sus casillas son <span> sin enlace ni manejador, asi que no hay ningun click que el
 * retardo este frenando. Incluirlo no rompia nada, pero la linea no hacia lo que su
 * propio comentario decia. El dia que la casilla abra el detalle de la habitacion, se
 * agrega aqui y entonces si significa algo. */
button, a, label, summary, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* Cifras: tabulares y sin partir. .cifra ya existe en la tarjeta de KPI de la Recepcion, por eso el nombre es .num. */
.num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
td.num, th.num { text-align: right; }
.num-md { font-size: 1.125rem; }
.num-lg { font-size: 1.5rem; }
.num-xl { font-size: 1.875rem; font-weight: 800; line-height: 1.1; }

/* === 3. Accesibilidad: foco, sr-only, skip-link, honeypot === */
:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.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;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary-700);
  color: var(--color-primary-contrast);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); }

/* Honeypot: fuera de pantalla pero presente en el DOM (no display:none), para
   que bots simples que llenan cualquier campo lo capturen. El HTML ya lo
   excluye de lectores de pantalla con aria-hidden. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* === 4. Layout: contenedor y barra superior === */
.container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--space-4); }
/* El aire vertical de la pagina.
 *
 * El contenedor no lo lleva porque tambien lo usa la barra superior, y un selector
 * `main.container` le ganaria por especificidad a `.error-page`, que ya trae el suyo.
 * Por eso una clase propia.
 *
 * Sin esto, el titulo de cada pantalla tocaba la franja inferior de la barra y el
 * ultimo boton de cada formulario quedaba pegado al fin del documento. Las pantallas
 * de acceso y la publica si tenian su aire; en las de trabajo faltaba. Es lo que el
 * cliente veia cuando pidio "mejorar el espaciado", y es una sola regla. */
.pagina { padding-block: var(--space-5); }
/* El ultimo bloque de la pagina ya trae su propio margen inferior -- panel, tabla,
   filtros, todos separan 24. Sumarlo al relleno de la pagina dejaba 24 arriba contra
   72 abajo y la pagina se leia descolgada. */
.pagina > :last-child { margin-bottom: 0; }
/* === Navegacion del panel: lateral oscuro, barra superior y barra inferior ===
 *
 * El cromo es una sola pieza de DOM, el <header class="topbar"> (ver Lateral en navegacion.templ), y este bloque lo acomoda segun el modo (body.marco-lateral, panel-barra o panel-unico, por cuantos destinos de trabajo tiene el rol) y el ancho:
 *
 *   menos de 640 px   barra superior oscura de 56 px. Modo lateral: "Menu" abre el panel de pantalla completa. Modo barra: barra inferior fija de 64 px con los destinos y sus burbujas a la vista. Modo unico: el unico destino en la barra superior.
 *   640 a 1023 px     lateral colapsado de 72 px (iconos con su etiqueta accesible y la burbuja); "Menu" lo expande a 232 px como panel sobre el contenido.
 *   1024 px o mas     lateral fijo de 232 px.
 *
 * Todo va sobre el 900 (#1e1b4b), con el blanco encima (15.36:1). El destino actual va en el 800 con el indicador ambar; el foco es ambar (8.17:1 sobre el 900) porque el anillo indigo de siempre dejaba de verse sobre oscuro. Las medidas salen de los tokens de estructura y de toque de :root. El panel cerrado va con display: none y nunca desplazado fuera de pantalla: si no, sus enlaces seguirian en el arbol de accesibilidad y habria dos "Menu" en la pagina. */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--barra-alto);
  padding: 0 var(--space-2);
  background: var(--color-primary-900);
  color: var(--color-primary-contrast);
}
.topbar a:focus-visible, .topbar button:focus-visible, .topbar summary:focus-visible { outline-color: var(--color-focus-ring-on-dark); }
.topbar-cabeza { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); min-width: 0; }

.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: var(--toque-min); min-height: var(--toque-min); margin-right: auto; color: var(--color-primary-contrast); text-decoration: none; }
.brand-inicial { display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-acento); color: var(--color-acento-contraste); font-size: 1.125rem; font-weight: 800; line-height: 1; }
.brand-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-nombre { overflow: hidden; font-size: var(--font-size-base); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.brand-sub { display: none; font-size: var(--font-size-xs); color: var(--color-primary-300); }

.nav-toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--toque-min);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--color-primary-700);
  border-radius: var(--radius-xl);
  color: var(--color-primary-contrast);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { background: var(--color-primary-850); }
.nav-toggle .icono { font-size: 1.25rem; }

.herramientas-movil { display: flex; flex: none; gap: var(--space-1); }
.icono-barra { display: inline-grid; place-items: center; width: var(--toque-min); height: var(--toque-min); border-radius: var(--radius-xl); color: var(--color-primary-contrast); text-decoration: none; }
.icono-barra:hover { background: var(--color-primary-850); }
.icono-barra .icono { font-size: 1.25rem; }

/* El panel desplegable del celular. Cerrado: display none. Abierto: pantalla completa debajo de la barra, con la tarjeta del usuario fija abajo. */
.topbar-panel { display: none; }
.topbar.nav-open .topbar-panel { position: fixed; inset: var(--barra-alto) 0 0 0; z-index: var(--z-lateral); display: block; overflow-y: auto; padding: var(--space-3) var(--space-2) 11rem; background: var(--color-primary-900); }
.nav-fondo { display: none; }

/* Destinos */
.nav-lista { display: block; }
.nav-grupo { margin-bottom: var(--space-2); }
.nav-grupo-titulo { display: flex; align-items: center; justify-content: space-between; min-height: var(--toque-min); padding: 0 var(--space-3); color: var(--color-primary-300); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.nav-grupo-titulo::-webkit-details-marker { display: none; }
.nav-grupo-titulo::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast); }
.nav-grupo[open] > .nav-grupo-titulo::after { transform: rotate(-135deg); }
.navlink, .destino {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--toque-min);
  padding: 0 var(--space-3);
  border-radius: 10px;
  color: var(--color-primary-contrast);
  font-weight: 600;
  text-decoration: none;
}
.destino .icono { flex: none; font-size: 1.25rem; }
.navlink:hover { background: var(--color-primary-850); }
.navlink[aria-current="page"] { background: var(--color-primary-800); box-shadow: inset 3px 0 0 var(--color-acento); }
.destino .burbuja-contenedor { margin-left: auto; }
.topbar .burbuja { box-shadow: 0 0 0 2px var(--color-primary-contrast); }

/* Tarjeta del usuario */
.topbar-user { display: flex; flex: none; align-items: center; gap: var(--space-1); margin-left: auto; }
.usuario { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.avatar { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-acento); color: var(--color-acento-contraste); font-size: var(--font-size-sm); font-weight: 800; }
.usuario-datos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-name { overflow: hidden; font-size: var(--font-size-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* Las etiquetas de rol (Label) ya vienen escritas con su mayuscula: capitalize volvia "Equipo de cocina" en "Equipo De Cocina". */
.user-role { font-size: var(--font-size-xs); color: var(--color-primary-300); }
.cuenta-enlaces { display: flex; align-items: center; gap: var(--space-1); }
.topbar .btn-link { min-height: var(--toque-min); padding: 0 var(--space-3); border-radius: 10px; color: var(--color-primary-contrast); font-weight: 600; text-decoration: none; }
.topbar .btn-link:hover { background: var(--color-primary-850); color: var(--color-primary-contrast); }
.topbar .btn-link[aria-current="page"] { background: var(--color-primary-800); }
.topbar .btn-link .icono { font-size: 1.25rem; }

/* Menos de 640 px. En la barra solo caben iconos: las etiquetas de Salir y de Tu cuenta, y el nombre, quedan para el lector de pantalla. */
@media (max-width: 639.98px) {
  /* En 360 px solo cabe la inicial de la marca: Menu, buscar, notificaciones y Salir ya llenan la barra. */
  .topbar .brand-texto { display: none; }
  .topbar .btn-texto, .topbar .usuario-datos { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .topbar .btn-link { padding: 0; width: var(--toque-min); justify-content: center; }
  .topbar .avatar { display: none; }
  /* Modo lateral cerrado: de la tarjeta solo queda Salir; Avisos, Mi PIN y Mi contrasena viven en el panel abierto. */
  .topbar-lateral:not(.nav-open) .cuenta-enlace { display: none; }
  /* Panel abierto: la tarjeta completa se fija abajo, sobre el panel. */
  .topbar-lateral.nav-open .topbar-user { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-lateral) + 1); flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-primary-850); border-top: 1px solid var(--color-primary-800); }
  .topbar-lateral.nav-open .avatar { display: inline-grid; }
  .topbar-lateral.nav-open .usuario-datos { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .topbar-lateral.nav-open .cuenta-enlaces { flex-wrap: wrap; }
  .topbar-lateral.nav-open .btn-link { width: auto; padding: 0 var(--space-3); }
  .topbar-lateral.nav-open .btn-texto { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

  /* Modo barra: los destinos van en una barra fija abajo. */
  .topbar-barra .mainnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-lateral); height: calc(var(--barra-inferior-alto) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-primary-900); border-top: 1px solid var(--color-primary-800); }
  .topbar-barra .nav-lista { display: flex; height: var(--barra-inferior-alto); }
  .topbar-barra .nav-lista > li { flex: 1 1 0; min-width: 0; }
  .topbar-barra .destino { flex-direction: column; justify-content: center; gap: 2px; height: var(--barra-inferior-alto); min-width: var(--barra-inferior-alto); padding: 0 var(--space-1); border-radius: 0; font-size: var(--font-size-xs); }
  .topbar-barra .destino .icono { font-size: 1.5rem; }
  .topbar-barra .destino-texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-barra .navlink[aria-current="page"] { box-shadow: inset 0 3px 0 var(--color-acento); }
  .topbar-barra .destino .burbuja-contenedor { position: absolute; top: 6px; left: calc(50% + 6px); margin-left: 0; }
  body.marco-barra { padding-bottom: calc(var(--barra-inferior-alto) + env(safe-area-inset-bottom, 0px)); }
  /* Modo unico: el destino al lado de la marca. */
  .topbar-unico .mainnav { flex: none; }
  .topbar-unico .topbar-cabeza { flex: 0 0 auto; }
}

/* Punto sobre "Menu": avisa que dentro del panel cerrado hay algo pendiente. Se pinta con CSS cuando el nav trae cualquier burbuja; el punto de Solicitudes que llega por swap fuera de banda (PuntoDelMenu) cae en el mismo sitio y no lo duplica. */
.punto-menu:empty { display: none; }
.punto-menu-circulo { position: absolute; top: -0.3rem; right: -0.3rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-danger-500); box-shadow: 0 0 0 2px var(--color-primary-contrast); animation: burbuja-aparece 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@media (prefers-reduced-motion: reduce) { .punto-menu-circulo { animation: none; } }
@supports selector(:has(*)) {
  .topbar:not(.nav-open):has(.mainnav .burbuja) .nav-toggle::after { content: ""; position: absolute; top: -0.3rem; right: -0.3rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--color-danger-500); box-shadow: 0 0 0 2px var(--color-primary-contrast); }
}
.topbar.nav-open .punto-menu-circulo { display: none; }

/* 640 px o mas: lateral a la izquierda (modos lateral y barra). El modo unico sigue siendo una barra superior. */
@media (min-width: 640px) {
  body.marco-lateral { padding-left: var(--lateral-colapsado); }
  body.marco-barra { padding-left: var(--lateral-ancho); }
  .topbar-lateral, .topbar-barra { position: fixed; inset: 0 auto 0 0; z-index: var(--z-lateral); width: var(--lateral-ancho); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--space-2); overflow-x: hidden; overflow-y: auto; }
  .topbar-lateral .topbar-cabeza, .topbar-barra .topbar-cabeza { flex: none; flex-direction: column; align-items: stretch; gap: var(--space-3); padding-bottom: var(--space-3); }
  .topbar-lateral .brand, .topbar-barra .brand { margin: 0; padding: var(--space-1) var(--space-2); }
  .brand-sub { display: block; }
  .herramientas-movil { display: none; }
  .topbar-lateral .topbar-panel { display: block; flex: 1 1 auto; padding: 0; overflow: visible; }
  .topbar-lateral.nav-open .topbar-panel { position: static; padding: 0; background: none; }
  .topbar-barra .mainnav { flex: 1 1 auto; }
  .topbar-user { flex-direction: column; align-items: stretch; gap: var(--space-2); margin: auto 0 0; padding: var(--space-3) var(--space-2) 0; border-top: 1px solid var(--color-primary-800); }
  .cuenta-enlaces { flex-direction: column; align-items: stretch; }
  .cuenta-enlaces .btn-link, .cuenta-salir, .cuenta-salir .btn-link { width: 100%; justify-content: flex-start; }
  .nav-toggle { justify-content: flex-start; width: 100%; }

  /* Modo unico: barra superior de borde a borde. */
  .topbar-unico { padding: 0 var(--space-4); gap: var(--space-4); }
  .topbar-unico .topbar-cabeza { flex: 0 0 auto; }
  .topbar-unico .mainnav { flex: 1 1 auto; }
  .topbar-unico .nav-lista { display: flex; gap: var(--space-2); }
  .topbar-unico .brand-sub { display: none; }
  .topbar-unico .topbar-user { flex-direction: row; align-items: center; margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .topbar-unico .cuenta-enlaces { flex-direction: row; }
  .topbar-unico .cuenta-enlaces .btn-link, .topbar-unico .cuenta-salir, .topbar-unico .cuenta-salir .btn-link { width: auto; }
}

/* 640 a 1023 px: el lateral del modo lateral (6 o mas destinos) se colapsa a 72 px, solo iconos, y "Menu" lo expande como panel sobre el contenido. El modo barra (2 a 5 destinos) NO se colapsa: no tiene boton Menu y con tres o cuatro destinos cabe a 232 px, asi que sus nombres se ven siempre. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .topbar-lateral:not(.nav-open) { width: var(--lateral-colapsado); padding-inline: var(--space-2); }
  .topbar-lateral:not(.nav-open) .destino-texto,
  .topbar-lateral:not(.nav-open) .brand-texto,
  .topbar-lateral:not(.nav-open) .usuario-datos,
  .topbar-lateral:not(.nav-open) .btn-texto,
  .topbar-lateral:not(.nav-open) .nav-toggle-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .topbar-lateral:not(.nav-open) .nav-grupo-titulo { display: none; }
  .topbar-lateral:not(.nav-open) .destino, .topbar-lateral:not(.nav-open) .cuenta-enlace, .topbar-lateral:not(.nav-open) .cuenta-salir .btn-link, .topbar-lateral:not(.nav-open) .nav-toggle { justify-content: center; padding: 0; }
  .topbar-lateral:not(.nav-open) .brand { justify-content: center; padding: 0; }
  .topbar-lateral:not(.nav-open) .usuario { justify-content: center; }
  .topbar-lateral:not(.nav-open) .destino .burbuja-contenedor { position: absolute; top: 2px; right: 4px; margin-left: 0; }
  .topbar-lateral.nav-open { box-shadow: var(--shadow-flotante); }
  .topbar.nav-open .nav-fondo { position: fixed; inset: 0 0 0 var(--lateral-ancho); z-index: -1; display: block; background: var(--color-overlay); }
}

/* 1024 px o mas: lateral fijo de 232 px; el boton "Menu" ya no hace falta. */
@media (min-width: 1024px) {
  body.marco-lateral, body.marco-barra { padding-left: var(--lateral-ancho); }
  .nav-toggle { display: none; }
}

/* Puntero grueso (tableta, celular): destinos y enlaces de la tarjeta a 48 px. */
@media (pointer: coarse) {
  .navlink, .destino, .topbar .btn-link, .nav-grupo-titulo { min-height: var(--toque); }
}

/* === Herramientas: buscador, campana y Nueva reservacion, arriba del contenido (desde 640 px) === */
.herramientas { display: none; }
@media (min-width: 640px) {
  .herramientas { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
  .herramientas .btn:last-child:not(.campana) { margin-left: auto; }
}
/* Modo barra (mesero y cajero): solo la campana, a la derecha, en todos los anchos. El panel cae bajo ella, no bajo una barra superior que en este modo no existe. */
.herramientas.herramientas-barra { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--space-4); }
@media (max-width: 639.98px) {
  .herramientas-barra .campana-contenido { position: absolute; top: calc(100% + var(--space-2)); left: auto; right: 0; width: min(20rem, calc(100vw - var(--space-6))); }
}
@media (pointer: coarse) {
  .herramientas { position: sticky; top: 0; z-index: var(--z-barra); padding-bottom: var(--space-2); background: var(--color-bg); }
}

/* Impresion: ni lateral ni herramientas ni avisos flotantes. */
@media print {
  body.marco { padding: 0 !important; }
  .herramientas, .toasts { display: none !important; }
}

/* === 5. Botones === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
/* 40 px es densidad de raton: solo con puntero fino y desde 1024 px. Una tableta horizontal (puntero grueso, 1280 px) conserva los 48 del bloque tactil del final. */
@media (min-width: 1024px) and (pointer: fine) { .btn { min-height: 40px; } }
/* El atributo hidden se esconde con la regla del navegador, que pierde contra el display de .btn: el panel de avisos mostraba "Activar" y "Desactivar" a la vez. */
.btn[hidden] { display: none; }

/* Pasos numerados (la nota para iPhone en el panel de avisos). El reset quita los numeros a toda lista, y aqui el orden es lo que importa. */
.lista-pasos { list-style: decimal; padding-left: var(--space-5); }
.lista-pasos li + li { margin-top: var(--space-1); }
.btn-primary { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.btn-primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.btn-secondary { background: transparent; border-color: var(--color-border-control); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-bg-subtle); }
.btn-danger { background: var(--color-danger-500); border-color: var(--color-danger-500); color: var(--color-danger-contrast); }
.btn-danger:hover { background: var(--color-danger-700); border-color: var(--color-danger-700); }
.btn-link { min-height: auto; padding: var(--space-1) var(--space-2); background: transparent; border: none; color: var(--color-primary-600); font-weight: var(--font-weight-medium); text-decoration: underline; }
.btn-link:hover { color: var(--color-primary-700); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.inline { display: inline-block; margin: 0; }

/* === 6. Formularios === */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field > label, form > label { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
label { color: var(--color-text); }
input, select, textarea {
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--borde-control);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
}
@media (min-width: 1024px) and (pointer: fine) { input, select, textarea { min-height: 40px; } }
@media (pointer: coarse) { input, select, textarea { min-height: var(--toque); } }
textarea { min-height: auto; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--color-neutral-700); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-danger-500); }
input[type="checkbox"], input[type="radio"] { min-height: auto; width: 18px; height: 18px; margin: 0 var(--space-2) 0 0; vertical-align: middle; }
.field-check { flex-direction: row; align-items: flex-start; }
.field-check label { display: flex; align-items: center; font-weight: var(--font-weight-normal); font-size: var(--font-size-base); }
.radio-option { display: inline-flex; align-items: center; margin: 0 var(--space-4) var(--space-2) 0; font-weight: var(--font-weight-normal); }
.field-error { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--color-danger-700); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
/* El margen negativo que tenia esta regla se escribio para pegar la ayuda al parrafo
 * que la precede. Ese caso no existe en ninguno de los trece usos: se reviso uno por
 * uno y la ayuda sigue a un titulo, a una barra de herramientas, a una rejilla de
 * campos o a un valor de solo lectura, nunca a un parrafo corrido. El
 * resultado era que el texto se montaba cuatro pixeles SOBRE su propio titulo en cinco
 * sitios, y quedaba pegado al borde del input en otros dos.
 *
 * El tope de medida es aparte y vale igual: con 1180px de ancho util, estas lineas
 * corrian a mas de 140 caracteres y se leian amontonadas aunque el espaciado vertical
 * estuviera bien. */
.hint { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0 0 var(--space-4); max-width: 70ch; }
/* Dentro de un campo, en cambio, la ayuda va DEBAJO del control, y ese mismo margen
   negativo la monta sobre el borde del input. Aqui lleva su propio aire. */
.field .hint { margin: var(--space-1) 0 0; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-5); }
legend { padding: 0 var(--space-2); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.inline-form .field { margin-bottom: 0; min-width: 160px; }
.grid-2, .grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-4); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
/* Un campo no debe ensanchar su columna. El minimo automatico de un elemento de rejilla es el ancho intrinseco de su contenido, y el de un input de correo pasa de la mitad de la tarjeta publica: 1fr no bajaba de ahi y Correo se salia 28px por la derecha. Se limita a los campos para no cambiar como se reparten los paneles. */
.grid-2 > .field, .grid-3 > .field { min-width: 0; }
/* Lo mismo para los paneles del tablero: un nombre de huesped largo y sin espacios ensanchaba la columna unica del movil mas alla de la pantalla (la pagina medida 552 en 390). */
.grid-2 > .panel { min-width: 0; }

/* === 7. Alertas y avisos === */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border-left: 4px solid transparent; margin-bottom: var(--space-4); font-size: var(--font-size-sm); }
.alert-success { background: var(--color-success-50); border-left-color: var(--color-success-500); color: var(--color-success-700); }
.alert-danger { background: var(--color-danger-50); border-left-color: var(--color-danger-500); color: var(--color-danger-700); }
.alert-warning { background: var(--color-warning-50); border-left-color: var(--color-warning-500); color: var(--color-warning-700); }
/* Aviso del selector de habitaciones cuando hoy hay libres que no estan limpias: icono y texto en una fila. */
.aviso-no-limpias { display: flex; align-items: flex-start; gap: var(--space-2); }
.aviso-no-limpias a { color: inherit; font-weight: var(--font-weight-medium); }
.notice { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); background: var(--color-info-50); border-left: 4px solid var(--color-info-500); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
/* Variante para lo que no es informativo sino un hueco abierto: el aviso de
 * privacidad sin capturar mientras el formulario publico ya recibe datos. El naranja
 * informativo de la marca no alcanza a decir eso. */
.notice-alerta { background: var(--color-warning-50); border-left-color: var(--color-warning-500); }

/* === 8. Tablas === */
/* `contain: paint` no es decoracion: sin el, en un telefono la pagina ENTERA se
   desplaza a lo ancho al abrir el calendario, aunque la tabla ya viva en un
   contenedor con overflow. Medido a 390px: el documento daba 711px de ancho y la
   pagina se movia de verdad. La contencion de pintado corta eso y la tabla sigue
   desplazandose por dentro, que es lo que se queria. */
.table-wrap { overflow-x: auto; contain: paint; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-5); -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th, .data-table td { padding: var(--space-3); vertical-align: middle; text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.data-table th { background: var(--color-bg-subtle); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg-subtle); }
/* Las cifras van a la derecha tambien dentro de .data-table: sin esta regla, .data-table th y .data-table td (text-align: left) pesan lo mismo que td.num y, por venir despues, le ganaban. */
.data-table th.num, .data-table td.num { text-align: right; }
.row-link { cursor: pointer; }

/* Busqueda de la lista de reservaciones (R47). En telefono la caja ocupa el ancho y el orden y las fechas bajan en dos columnas; en escritorio van en una sola fila. minmax(0, ...) y min-width: 0 son los que evitan que un input de fecha, que tiene ancho propio, empuje la pagina a lo ancho. */
.filtros-reservaciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); margin-bottom: var(--space-2); }
.filtros-reservaciones .filtro-texto, .filtros-reservaciones .filtro-orden { grid-column: 1 / -1; }
.filtros-reservaciones input, .filtros-reservaciones select { width: 100%; min-width: 0; }
/* Los campos que el servidor puede corregir van en un contenedor propio (para reemplazarlos por HTMX) que no debe sacarlos de la rejilla. */
.campos-filtro { display: contents; }
.busqueda-caja { display: flex; gap: var(--space-2); }
.busqueda-caja input { flex: 1; }
.busqueda-caja .btn { flex: none; }
@media (min-width: 900px) {
  .filtros-reservaciones { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; }
  .filtros-reservaciones .filtro-texto, .filtros-reservaciones .filtro-orden { grid-column: auto; }
}
.atajos-llegada { align-items: center; margin-bottom: var(--space-3); }
.atajos-titulo { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.resultados-resumen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.resultados-resumen p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.folio-fila { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.paginas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.paginas-texto { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.paginas [aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* En telefono toda tabla apilable (componente Tabla) se lee como tarjetas: una por fila, con el titulo de la fila arriba y cada dato con su etiqueta (data-label). Antes se desplazaba a lo ancho y el estado quedaba fuera de la pantalla. El pie de totales se apila igual. Solo en pantalla: la hoja impresa de los reportes conserva su tabla. */
@media screen and (max-width: 639.98px) {
  .tabla-apilable { min-width: 0; }
  .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tfoot, .tabla-apilable tr, .tabla-apilable td, .tabla-apilable th.celda-titulo { display: block; width: 100%; }
  .tabla-apilable tr { padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
  .tabla-apilable tbody tr:last-child { border-bottom: none; }
  .tabla-apilable td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; border-bottom: none; white-space: normal; text-align: right; }
  .tabla-apilable td[data-label]::before { content: attr(data-label); flex: none; max-width: 55%; color: var(--color-text-muted); font-weight: var(--font-weight-medium); text-align: left; }
  .tabla-apilable td:not([data-label]) { justify-content: flex-end; }
  /* Una celda de texto largo (Detalle, Cuenta / consumo) no se reparte en dos mitades como una cifra: la etiqueta va arriba y el texto ocupa todo el ancho, alineado a la izquierda, para que un details o un parrafo largo parta en renglones. */
  .tabla-apilable td.celda-texto { display: block; min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .tabla-apilable td.celda-texto[data-label]::before { display: block; max-width: none; }
  .tabla-apilable th.celda-titulo { padding: 0 0 var(--space-2); border-bottom: none; background: none; font-size: var(--font-size-base); overflow-wrap: anywhere; white-space: normal; }
  .tabla-apilable tfoot tr { background: var(--color-bg-subtle); }
  .tabla-apilable tfoot td[colspan] { display: block; text-align: left; }
  .tabla-apilable .celda-acciones { width: 100%; text-align: left; }
  .data-table.tabla-apilable td.audit-changes { max-width: none; }
  .tabla-apilable .celda-huesped { display: block; padding-bottom: var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
}
/* El encabezado de fila de una tabla con contrato es el dato principal de la fila, no un titulo de columna. */
.data-table tbody th.celda-titulo, .data-table tfoot th.celda-titulo { background: none; color: var(--color-text); font-weight: 600; }
.data-table tfoot th, .data-table tfoot td { font-weight: 600; background: var(--color-bg-subtle); border-bottom: none; }

/* === 9. Cards, paneles y encabezados de seccion === */
/* Rejilla de paneles. .grid-2 esta hecha para campos, donde el hueco vertical lo pone
   el margen de cada .field; con paneles, que traen su propio margen inferior, los
   canalones quedaban asimetricos: 16 a lo ancho contra 24 a lo alto entre las mismas
   tarjetas. */
/* La fila de cifras que abre el panel.
 *
 * Los numeros grandes con su antetitulo, que es lo que recepcion lee desde el otro lado
 * del mostrador antes de acercarse al plano. auto-fit reacomoda las columnas segun lo
 * que quepa, sin un punto de corte escrito a mano: en escritorio salen los cuatro, en un
 * telefono comun dos, y en uno de 320px uno solo, porque dos columnas de 150 con su
 * canalon no caben en los 288px utiles que deja el contenedor. */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.cifra {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.cifra-valor {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* El signo de por ciento no compite con el numero: es la unidad, no el dato. */
.cifra-unidad {
  margin-left: 2px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.cifra-pie {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.panel-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.panel-grid > .panel { margin-bottom: 0; }
@media (min-width: 768px) { .panel-grid { grid-template-columns: 1fr 1fr; } }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-head h1 { margin: 0; }
.section-title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
/* Los iconos toman el tamano del texto que acompanan y su color, asi que no hay que
   declarar ninguno de los dos en cada sitio donde se usen. 1em los deja del alto de una
   mayuscula.
   *
   * `vertical-align` no hace nada en los sitios donde hoy se usan los iconos, porque los
   * tres son contenedores flex (.badge, .antetitulo, .field-error) y ahi manda
   * `align-items`. Se queda como red para el dia que un icono caiga en texto corrido,
   * que es donde si lo centra contra la linea base; el comentario decia que centraba
   * siempre, y eso ya no era cierto.
   *
   * Los atributos de trazo van aqui y no en el sprite porque son heredables: cruzan al
   * contenido referenciado con <use>, que de otro modo no recibe ningun estilo del
   * documento. Sin ellos los iconos se pintan rellenos, como cuadros negros -- eran de
   * trazo y el trazo vivia en el <svg> raiz de cada archivo original. */
.icono {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Antetitulo en versalitas. Es el recurso que mas distingue un panel de trabajo de una
   pagina de lectura: dice de que es el numero que va abajo sin competir con el. */
.antetitulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5); background: var(--color-surface); }
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); }
.avail-card { display: flex; flex-direction: column; gap: var(--space-1); }
.avail-name { font-weight: var(--font-weight-medium); }
.avail-count { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.avail-pending { color: var(--color-warning-700); font-size: var(--font-size-sm); }
.avail-tag { display: inline-block; width: fit-content; padding: 0 var(--space-2); background: var(--color-bg-subtle); color: var(--color-text-muted); border-radius: var(--radius-sm); font-size: var(--font-size-xs); }

/* === 10. Badges de estado === */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; }
.badge-success { background: var(--color-success-50); color: var(--color-success-700); }
.badge-warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge-danger { background: var(--color-danger-50); color: var(--color-danger-700); }
.badge-info { background: var(--color-info-50); color: var(--color-info-500); }
.badge-muted { background: var(--color-neutral-100); color: var(--color-neutral-600); }

/* === 11. Listas: reservaciones, chips, filtros, detalle, bloqueos === */
.res-list { display: flex; flex-direction: column; gap: var(--space-2); }
.res-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.res-line:last-child { border-bottom: none; }
.res-guest { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.res-guest:hover { text-decoration: underline; }
.res-dates { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: var(--space-1) var(--space-3); background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-sm); }
.detail-list { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; column-gap: var(--space-4); row-gap: var(--space-2); margin: 0; }
.detail-list dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.detail-list dd { margin: 0; }
@media (max-width: 479px) {
  .detail-list { grid-template-columns: 1fr; row-gap: var(--space-1); }
  .detail-list dd { margin-bottom: var(--space-2); }
}
/* El margen existe porque en Comisiones un parrafo sigue al estado vacio y arrancaba
   pegado al borde punteado. Cuando el estado vacio cierra su panel no hace falta: ahi
   se sumaba al padding del panel y dejaba el hueco de abajo al doble que el de arriba. */
.empty { margin-bottom: var(--space-5); padding: var(--space-4); color: var(--color-text-muted); background: var(--color-bg-subtle); border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; }
.empty:last-child { margin-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
/* Los filtros, la casilla de unidad y el enlace de una fila son controles como
   cualquier otro: se tocan con el dedo, y quedaban en 31, 34 y 24 pixeles.
   *
   * 44px no es un incumplimiento que se corrige: el minimo de WCAG 2.2 AA son 24px y
   los tres ya lo pasaban. 44 es el criterio AAA y la medida de la casa, la misma que
   .btn y los inputs. Por eso bajan a 40 en escritorio, igual que ellos: ahi manda el
   raton y la densidad vale mas. */
.filter-chip { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-1) var(--space-4); border: var(--borde-control); border-radius: var(--radius-full); color: var(--color-text); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.filter-chip:hover { background: var(--color-bg-subtle); }
.filter-chip[aria-current="true"] { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.block-list { display: flex; flex-direction: column; gap: var(--space-2); }
.block-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.block-item:last-child { border-bottom: none; }
.block-item .btn-link { margin-left: auto; }
.block-note { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* === 12. Login y formulario publico === */
.login-body, .public-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-subtle);
  padding: var(--space-5) var(--space-4);
}
.login-card, .public-card {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.login-card { max-width: 380px; }
.public-card { max-width: 520px; }

/* Selector de idioma de las paginas del huesped (R49). Va arriba a la derecha, sobre la banda indigo del logotipo, para no empujar el contenido de la tarjeta. Dos casillas de 40px: a 360px caben junto al logotipo centrado sin tocarlo. Sobre la banda van en el 700 con blanco (7.4:1); la actual se invierte a blanco con el 700 y lleva borde, asi que no depende solo del color. El anillo de foco es blanco, porque el del sistema es el mismo indigo de la banda. */
.public-card { position: relative; }
.selector-idioma { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; }
.selector-idioma ul { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.selector-idioma a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 var(--space-2);
  border: 2px solid var(--color-primary-700);
  border-radius: var(--radius-md);
  background: var(--color-primary-700);
  color: var(--color-primary-contrast);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.selector-idioma a:hover { text-decoration: underline; }
.selector-idioma a[aria-current="true"] { background: var(--color-primary-contrast); color: var(--color-primary-700); }
.selector-idioma a:focus-visible { outline: var(--focus-ring-width) solid var(--color-primary-contrast); outline-offset: 2px; }
/* Aviso de que un texto del dueno solo esta en espanol (la politica o el aviso de privacidad sin version en ingles). */
.aviso-idioma { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-info-500); }
.aviso-idioma .icono { flex: 0 0 auto; }

/* El logotipo tiene las letras en blanco y el contorno oscuro: fue dibujado para
   verse sobre algo oscuro. Puesto sobre la tarjeta clara se sostiene solo de su
   contorno y se ve apagado. Por eso encabeza la tarjeta en una banda del indigo
   de la casa, que ademas es el "fondo indigo" que el negocio pidio, en el unico
   sitio de estas dos pantallas donde no estorba a la lectura. */
/* Es la superficie grande del #6366f1 puro: aqui solo va el logotipo, que no lleva texto que medir (WCAG exime a los logotipos), asi que el indigo pedido se ve tal cual. La franja de abajo, en el 700, la asienta sobre la tarjeta. */
.marca {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  padding: var(--space-5) var(--space-4);
  background: var(--color-primary-500);
  border-bottom: 3px solid var(--color-primary-700);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  text-align: center;
}
.marca-logo { display: inline-block; width: auto; max-width: 100%; height: 3.25rem; }
@media (min-width: 640px) { .marca-logo { height: 4rem; } }

.login-sub, .public-lead { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.public-thanks { text-align: center; }
/* Estado del captcha: una linea discreta sobre el boton, vacia cuando termino. */
.captcha-estado { margin: 0 0 var(--space-3); min-height: 1.25em; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.privacy-details { margin-bottom: var(--space-4); font-size: var(--font-size-sm); }
.privacy-details summary { cursor: pointer; color: var(--color-primary-600); font-weight: var(--font-weight-medium); }
.privacy-details p { margin-top: var(--space-2); color: var(--color-text-muted); }
/* Politica de cancelacion: texto largo con titulos. A la izquierda aunque viva en la pagina de gracias, que centra todo; un texto de seis secciones centrado no se lee. */
.politica-texto { text-align: left; }
.politica-texto .politica-titulo { color: var(--color-text); }
.politica-texto ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-text-muted); }
.public-thanks .politica { margin-top: var(--space-5); }
/* Telefono con clave de pais: el selector con ancho fijo (a 360px, con el ancho de su texto, se comia media fila) y el numero el resto. min-width: 0 deja que el numero se encoja en vez de empujar la columna fuera de la tarjeta. */
.telefono { display: flex; gap: var(--space-2); }
.telefono select { flex: 0 0 auto; width: 7.5rem; }
.telefono input { flex: 1 1 auto; min-width: 0; }
/* La clave escrita de la opcion "Otra": un campo de tres digitos con el "+" delante. Se esconde mientras el selector no diga "Otra", con :has() y sin JavaScript. La regla va al reves a proposito (esconder cuando NO esta elegida, en vez de mostrar cuando si): un navegador sin :has() ignora la regla y deja el campo a la vista, que es incomodo pero no impide capturar la clave. */
.telefono .clave-otra { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; }
.telefono .clave-otra input { flex: 0 0 auto; width: 3.5rem; }
.field:has(#guest_phone_cc option[value="otra"]:not(:checked)) :is(.clave-otra, .clave-otra-ayuda) { display: none; }

/* === 13. Calendario de ocupacion === */
/* Los tres bloques que anteceden a la rejilla separaban 24, 12 y 16: era la pantalla
   con el ritmo mas quebrado. Van los tres a la medida de bloque de pagina. */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.cal-nav { display: flex; gap: var(--space-2); }
.cal-range { font-weight: var(--font-weight-medium); margin-right: auto; }
.cal-views { display: flex; gap: var(--space-2); }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.calendar { width: 100%; min-width: 640px; font-size: var(--font-size-sm); }
.calendar th, .calendar td { border: 1px solid var(--color-border); }
.cal-corner, .cal-unit { background: var(--color-bg-subtle); padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap; position: sticky; left: 0; z-index: 1; }
.cal-day { padding: var(--space-2); text-align: center; font-weight: var(--font-weight-medium); background: var(--color-bg-subtle); white-space: nowrap; }
.cal-shared-row .cal-unit { font-style: italic; }
.cal-cell { height: 44px; min-width: 64px; padding: var(--space-1); text-align: center; vertical-align: middle; }
.cell-free { background: var(--color-neutral-0); }
/* El realce al pasar el raton se queda en gris. Si fuera indigo claro, una
   celda libre bajo el cursor se veria como una celda vendida a medias. */
.cell-free:hover { background: var(--color-neutral-100); cursor: pointer; }
/* Ocupado se pinta como en el plano: relleno oscuro y letra blanco.
 *
 * Antes era un indigo palido con borde. Con la marca en indigo eso deja la rejilla
 * con dos indigos que significan lo contrario, y el palido es el que el ojo lee
 * como disponible. El calendario y el plano tienen que hablar el mismo idioma,
 * porque recepcion salta de uno al otro todo el dia. */
.cell-reservation {
  background: var(--color-primary-600);
  border: 1px solid var(--color-primary-700) !important;
  color: var(--color-primary-contrast);
  cursor: pointer;
}
.cell-block {
  background-color: var(--color-neutral-200);
  background-image: repeating-linear-gradient(45deg, var(--color-neutral-300) 0, var(--color-neutral-300) 2px, transparent 2px, transparent 8px);
  border: 1px solid var(--color-neutral-400) !important;
}
.cell-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
/* Hoy se enmarca en el 700, oscuro. Con el tinte claro (300) la columna de hoy quedaba como una fila de celdas libres con borde indigo menta, que es justo como se veria un "disponible" pintado de indigo. */
.cal-today { box-shadow: inset 0 0 0 2px var(--color-primary-700); }
.availability { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.avail-none { margin: 0; color: var(--color-danger-700); }
.avail-hint { margin: 0; color: var(--color-text-muted); }
.units-picker { border: none; padding: 0; margin: 0; }
.units-picker legend { padding: 0; margin-bottom: var(--space-2); }
/* Cuantas unidades de la categoria se pueden tomar de verdad. Va en tono apagado
 * porque es un dato de apoyo, no un estado: el indigo del primario esta reservado
 * para lo ocupado, y teñir de indigo un "3 libres" diria lo contrario. */
.units-libres { margin-left: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
/* Etiquetas dentro de la casilla de una unidad.
 *
 * "actual" NO puede llevar el fondo del primario claro: es el mismo que .unit-check usa
 * para la casilla marcada, y como toda unidad actual arranca marcada, la etiqueta se
 * fundia con su propia ficha. Se leia como etiqueta solo cuando el usuario ya la habia
 * desmarcado, que es cuando ya no importaba. Va con fondo propio y borde. */
.unit-actual,
.unit-ocupada {
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.unit-actual {
  background: var(--color-surface);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

/* Por que una unidad aparece aunque no se pueda tomar. Son tres motivos distintos y la
   casilla los dice con palabras: "ya no esta libre" (alguien se la gano en esas fechas),
   "dada de baja" (inventario la retiro) y "su categoria ya no se ofrece". Comparten
   estilo porque comparten consecuencia: hay que decidir sobre ella antes de guardar.

   Se muestran en vez de ocultarse porque sin casilla el formulario las omitiria al
   enviar y el guardado las soltaria en silencio. */
.unit-ocupada {
  background: var(--color-warning-50);
  border-color: var(--color-warning-500);
  color: var(--color-warning-700);
}
.unit-check { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-1) var(--space-3); margin: 0 var(--space-2) var(--space-2) 0; border: var(--borde-control); border-radius: var(--radius-full); font-weight: var(--font-weight-normal); cursor: pointer; }
/* Los tres bajan a 40 en escritorio, como .btn y los inputs. Va despues de sus
   reglas base a proposito: misma especificidad, gana la ultima. */
@media (min-width: 1024px) and (pointer: fine) { .filter-chip, .unit-check, .res-guest { min-height: 40px; } }
.unit-check:has(input:checked) { border-color: var(--color-primary-500); background: var(--color-primary-50); }

/* Bloquear varias unidades (inventario). Los fieldset llevan min-width: 0 porque por omision miden lo que su contenido mas ancho, y a 390 px la fila de casillas empujaba la pagina entera a lo ancho. */
.bloqueo-unidades { min-width: 0; margin-bottom: var(--space-4); }
.bloqueo-grupo { min-width: 0; margin-bottom: var(--space-3); }
.bloqueo-todas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.bloqueo-todas .unit-check { margin: 0; }
.bloqueo-conteo { font-size: var(--font-size-sm); color: var(--color-text-muted); }
/* La casilla de "todas" se distingue de las de unidad por el borde punteado y el peso, no solo por la posicion. */
.unit-check-todas { border-style: dashed; font-weight: var(--font-weight-medium); }
.unit-check:has(input:focus-visible) { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }
.bloqueo-saltadas-titulo { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.bloqueo-saltadas { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.bloqueo-saltadas li { overflow-wrap: anywhere; }

/* === 14. Utilidades varias === */
.error-page { text-align: center; padding: var(--space-8) var(--space-4); }
.error-code { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.link-strong { font-weight: var(--font-weight-medium); color: var(--color-primary-600); }
.reset-details summary { cursor: pointer; color: var(--color-primary-600); font-size: var(--font-size-sm); }
.reset-details .inline-form { margin-top: var(--space-2); }
/* La bitacora guarda ids ademas de texto, y un uuid no tiene donde partirse. Las
 * celdas de .data-table van nowrap porque casi todas llevan un dato corto; esta no,
 * asi que renuncia al nowrap y parte donde sea. Sin esto la celda se pasaba de sus
 * 360px a todos los anchos de pantalla, hasta en 1920.
 *
 * El selector lleva `.data-table td` delante a proposito: con `.audit-changes` solo,
 * la regla de la tabla le gana por especificidad y el nowrap se queda. */
.data-table td.audit-changes {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.action-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.actions-panel .action-row .btn, .actions-panel .action-row .inline { margin: 0; }

/* === Identidad de SaaSBase Demo ===
 *
 * Lo que sigue es propio de este negocio y no existe en ningun otro sistema.
 * Va al final para que pise los valores de arriba sin tener que editarlos.
 */

/* Titulos con serif: es el rasgo que mas distingue la marca de una plantilla. */
h1, h2, h3,
.public-card h1,
.login-card h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* El fondo no es blanco ni gris: es la gris sobre la que se para el indigo. */
body {
  background-color: var(--color-neutral-50);
}

/* Las tarjetas se apoyan en el papel, no flotan sobre una sombra azulada. */
.card,
.public-card,
.login-card {
  background-color: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Los campos de las pantallas que ve el huesped se quedan en 16px, no en la base densa
 * del panel. Safari en iOS hace zoom al enfocar un campo de menos de 16px, y la pantalla
 * salta sola en mitad de la captura: es el precio de tratar como panel de trabajo algo
 * que alguien llena una sola vez desde su telefono. */
.public-card input,
.public-card select,
.public-card textarea,
.login-card input,
.login-card select,
.login-card textarea { font-size: 1rem; }

/* El formulario publico es lo primero que ve el huesped: se le da aire. */
.public-body {
  background-color: var(--color-neutral-100);
}

/* Sin regla de borde superior: esa linea la dibuja ahora la banda del logotipo
   (.marca), que encabeza tanto el formulario como el acuse y el login. */

/* Lo libre NO va en indigo.
 *
 * Antes lo estaba, y funcionaba mientras la marca era terracota. Con la marca
 * en indigo, un indigo claro para "libre" y un indigo oscuro para "ocupada" son el
 * mismo color a dos intensidades: el ojo los agrupa en vez de oponerlos.
 *
 * Lo disponible se marca como en el plano, por ausencia: hueco, con el borde
 * punteado del casillero vacio. Es el mismo idioma en las dos pantallas. */
.avail-card .avail-free {
  color: var(--color-neutral-600);
  font-weight: var(--font-weight-medium);
}

.badge-libre,
.badge-disponible {
  background-color: var(--color-neutral-0);
  border: 1px dashed var(--color-neutral-300);
  color: var(--color-neutral-600);
}

/* El aviso informativo tambien es de la casa: un azul de sistema en medio de
   una paleta sacada del logotipo delata que la hoja no se escribio para aqui. */
.notice,
.info-banner,
.public-card .notice {
  background-color: var(--color-primary-50);
  border-left-color: var(--color-primary-500);
  color: var(--color-neutral-800);
}

/* === El plano del hotel ===
 *
 * Es la pieza donde se concentra el caracter de este panel. Recepcion no lee
 * "3 de 29 dobles libres": busca la 14. Por eso las habitaciones se muestran con
 * su numero real, en una rejilla que se recorre de un vistazo.
 *
 * Deliberadamente NO son tarjetas: son fichas pequenas y densas, como el tablero
 * de llaves que cuelga detras del mostrador. Una habitacion ocupada se ve llena;
 * una libre, hueca. El hueco es lo que se puede vender, asi que es lo que salta.
 */

.plano {
  margin-bottom: var(--space-6);
}

.plano-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-neutral-200);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

.plano-resumen {
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
}

.plano-resumen strong {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--color-primary-700);
}

.plano-grupo + .plano-grupo {
  margin-top: var(--space-5);
}

.plano-tipo {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-neutral-600);
}

.plano-tipo-cuenta {
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-400);
  font-weight: 400;
}

/* El codigo de la categoria, solo cuando dos se llaman igual y hay que distinguirlas.
 * Va en monoespaciada y apagado: es un identificador interno, no parte del nombre. */
.plano-tipo-codigo {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.plano-rejilla {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La ficha: cuadrada, pequena y del mismo tamano siempre, para que la vista
   recorra la fila sin saltos. */
.hab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 3.25rem;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

.hab-num {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* Sin opacidad: el dato ya se distingue del numero por tamano. Al 75% el blanco sobre el 600 bajaba a 3.8:1 y el gris de la ficha libre a 2.9:1; a color pleno dan 5.4:1 y 4.9:1. */
.hab-dato {
  font-size: 0.6875rem;
  line-height: 1.4;
}

/* Libre: hueca, con el borde punteado del casillero vacio. */
.hab-libre {
  background-color: var(--color-neutral-0);
  border: 1px dashed var(--color-neutral-300);
  color: var(--color-neutral-500);
}

/* Ocupada: llena, en el 600 con borde 700. Es el escalon del indigo que aguanta el numero en blanco (6.29:1); el #6366f1 puro no lo aguanta (4.47:1) y por eso no pinta la ficha. */
.hab-ocupada {
  background-color: var(--color-primary-600);
  border: 1px solid var(--color-primary-700);
  color: var(--color-primary-contrast);
}

.plano-pendiente {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-neutral-300);
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
}

@media (max-width: 480px) {
  .hab { width: 3.25rem; height: 2.75rem; }
  .hab-num { font-size: var(--font-size-base); }
}

/* En pantallas que lo pidan, sin transiciones de cortesia. */
@media (prefers-reduced-motion: reduce) {
  /* Cubria solo las casillas del plano, y hay transiciones en el salto al contenido, en
   * los campos de formulario y en el indicador de carga. Quien pide menos movimiento lo
   * pide para toda la pantalla, no para la parte que el autor recordo. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* El precio del dia, junto al tipo de habitacion. Se lee al vuelo cuando alguien
   pregunta en el mostrador; por eso vive en el plano y no en otra pantalla. */
.plano-precio {
  margin-left: auto;
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  color: var(--color-neutral-700);
  font-variant-numeric: tabular-nums;
}

.plano-precio-unidad {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-neutral-500);
}

.plano-precio-falta {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-warning-700);
}

/* === El costo de la estancia, al capturar ===
 *
 * Quien captura no deberia teclear un total que el sistema ya sabe. El desglose
 * explica de donde sale el numero: si el huesped pregunta por que son 3,900, la
 * respuesta esta en pantalla y no en la cabeza de quien atiende.
 */

.cotizacion {
  margin-bottom: var(--space-4);
}

.cotizacion-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.cotizacion-tabla th,
.cotizacion-tabla td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-200);
}

.cotizacion-tabla th[scope="row"] {
  font-weight: 500;
  color: var(--color-neutral-700);
}

.cotizacion-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cotizacion-tabla tfoot th,
.cotizacion-tabla tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--color-neutral-300);
  padding-top: var(--space-3);
}

.cotizacion-total {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  color: var(--color-primary-700);
}

.cotizacion-aviso {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-warning-500);
  background-color: var(--color-warning-50);
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
}

/* === Tarifas ===
 *
 * Una rejilla de categorias por temporadas. El precio se escribe donde se lee,
 * sin abrir una pantalla por celda.
 */

.tabla-scroll {
  overflow-x: auto;
  /* Mismo tratamiento que .table-wrap: hasta ahora Tarifas era la unica pantalla donde
     la tabla no se leia como tarjeta y separaba ocho pixeles menos que las demas. */
  contain: paint;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  -webkit-overflow-scrolling: touch;
}

.tarifas-tabla {
  width: 100%;
  border-collapse: collapse;
}

.tarifas-tabla th,
.tarifas-tabla td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-200);
  vertical-align: middle;
}

.tarifas-tabla thead th {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-neutral-600);
  border-bottom: 2px solid var(--color-neutral-300);
  white-space: nowrap;
}

.tarifas-tabla tbody th[scope="row"] {
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: 500;
  white-space: nowrap;
}

.tarifas-tabla input {
  width: 7rem;
  font-variant-numeric: tabular-nums;
}

.temporadas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.temporada + .temporada {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-neutral-200);
}

/* El nombre de la temporada se edita donde se lee.
 *
 * El campo renuncia al borde y al fondo que la regla global le da a todo input: con
 * ellos, un panel de tres temporadas pasaba de tres titulos a tres cajas de 44px
 * encima de otros dos campos de fecha, y dejaba de leerse como lista. El borde
 * aparece al apuntarlo o al enfocarlo, que es cuando el usuario ya quiere editarlo.
 * El foco visible no se toca: es lo unico que ve quien navega con teclado. */
.temporada-nombre-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.temporada-nombre {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--color-primary-700);
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 22rem;
  border-color: transparent;
  background: transparent;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.temporada-nombre:hover,
.temporada-nombre:focus {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.temporada-nombre[aria-invalid="true"] {
  background: var(--color-surface);
}

.temporada-periodos {
  list-style: none;
  margin: var(--space-1) 0 var(--space-3);
  padding: 0;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
}

.temporada-periodos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.temporada-periodos .btn-link {
  min-height: var(--toque-min);
  padding: 0 var(--space-3);
}

.temporada-sin-fechas {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--color-warning-700);
  font-size: var(--font-size-sm);
}

/* El formulario de fechas va en una linea: es un gesto rapido, no una pantalla. */
.temporada-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.temporada-form label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
}

/* Alta de una unidad: una linea, no una pantalla. Dar de alta una mesa es una
   operacion de todos los dias, no un cambio de sistema. */
.alta-unidad {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background-color: var(--color-neutral-50);
  border: 1px dashed var(--color-neutral-300);
  border-radius: 2px;
}

.alta-unidad .field {
  margin-bottom: 0;
}

.alta-unidad input,
.alta-unidad select {
  min-width: 8rem;
}

/* === Restaurante ===
 *
 * El servicio de la noche se lee por hora, no por mesa: lo que el personal
 * pregunta es "que sigue", no "que pasa con la mesa 3".
 */

.dia-selector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.reservas-mesa {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reserva-mesa {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-neutral-200);
}

/* La hora manda: es lo primero que se busca al recorrer la lista. */
.reserva-hora {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-700);
  min-width: 8.5rem;
}

.reserva-mesa-nombre {
  min-width: 6rem;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
}

.reserva-huesped {
  flex: 1;
}

.reserva-personas {
  margin-left: var(--space-2);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
}

/* Una reserva liberada se queda a la vista, apagada: el personal necesita saber
   que la mesa se solto, no que la reserva nunca existio. */
.reserva-mesa-cancelada {
  opacity: 0.55;
}

.reserva-mesa-cancelada .reserva-huesped,
.reserva-mesa-cancelada .reserva-hora {
  text-decoration: line-through;
}

.reserva-estado {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-500);
}

@media (max-width: 640px) {
  .reserva-mesa { flex-wrap: wrap; gap: var(--space-2); }
}

.cotizacion-unidades {
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-neutral-500);
}

/* === Comisiones de plataformas ===
 *
 * La tabla no usa color para marcar nada. Una estancia sin monto capturado se
 * dice con texto debajo del conteo, no tiñendo la fila: el indigo de esta marca
 * ya significa "ocupado" en el plano, y un segundo significado lo vuelve ruido.
 */
.comision-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.comision-nota {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.comisiones-tabla tfoot th,
.comisiones-tabla tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--color-neutral-300);
}

.comision-total {
  font-weight: var(--font-weight-bold);
}

/* Un dato que se muestra dentro de un formulario pero no se edita. Se dibuja con el
   peso de un valor, no con el de un control: un input deshabilitado invita a pelearse
   con el. */
/* El nombre de un dato que se muestra sin control que lo edite. No es <label>: una
   etiqueta sin control al que apuntar se lee como texto suelto en un lector de
   pantalla. */
.etiqueta-fija {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Imita un input de solo lectura, asi que se le parece tambien en la caja: sin esto
   media 37px junto a un input de 44 y su texto arrancaba doce pixeles a la izquierda
   del texto del campo de al lado, en la misma fila. */
.valor-fijo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: var(--space-2) 0;
  font-weight: var(--font-weight-medium);
}
/* El sangrado solo tiene sentido cuando de verdad hay un input al lado con el que
   alinearse: es el ancho al que .grid-2 se vuelve de dos columnas. Debajo de eso la
   rejilla colapsa y el sangrado dejaba tres bordes izquierdos distintos dentro del
   mismo campo -- etiqueta, valor y ayuda. */
@media (min-width: 768px) { .valor-fijo { padding-inline: var(--space-3); } }
/* Y el mismo par que los inputs, que bajan a 40 para raton. Sin esto media 44 junto a
   uno de 40 y quedaba desalineado por el otro lado. */
@media (min-width: 1024px) { .valor-fijo { min-height: 40px; } }

/* Indicadores de peticion de HTMX.
 *
 * HTMX inyecta estas reglas como una etiqueta <style> en linea, y la CSP de este
 * sistema solo permite hojas propias: el navegador las rechazaba y el indicador no
 * aparecia nunca. Se apaga esa inyeccion con la meta htmx-config y las reglas viven
 * aqui, que es donde la politica si las admite. */
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--transition-base);
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* === Formulario publico de solicitud ===
 *
 * Lo llena un huesped una sola vez, casi siempre desde el telefono y muchas veces desde un enlace de WhatsApp. No es el panel: aqui manda la lectura comoda, no la densidad. Por eso todo lo de esta seccion va acotado a .public-solicitud y .solicitud y no toca las pantallas del personal.
 *
 * La pieza con caracter es "Que quieres reservar": las tarjetas grandes con su icono que se llenan de indigo al elegir. Lo demas se queda callado: campos amplios con su icono, cuatro pasos numerados (son una secuencia real, del tipo a la confirmacion) y un solo indigo.
 *
 * Movimiento solo como respuesta: la tarjeta elegida, los campos de estancia o evento que aparecen, el boton que dice que esta enviando. La unica entrada sin accion es la de la tarjeta al cargar. Todo se apaga con prefers-reduced-motion.
 */
.public-card.public-solicitud {
  --tarjeta-pad: clamp(1rem, 5vw, 2.75rem);
  /* Borde de los controles: el mismo tono de la gris, oscurecido hasta 3.4:1 sobre la tarjeta (WCAG 1.4.11). El neutral-200 del panel da 1.4:1 y aqui el borde es lo unico que dibuja el campo. */
  --borde-control: #94a3b8;
  max-width: 600px;
  padding: var(--space-6) var(--tarjeta-pad) var(--space-7);
  border-radius: 18px;
  animation: solicitud-entra 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.public-solicitud .marca {
  margin: calc(var(--space-6) * -1) calc(var(--tarjeta-pad) * -1) var(--space-6);
  border-radius: 18px 18px 0 0;
}
@media (max-width: 479px) {
  .public-body { padding: var(--space-3); }
}

/* Cabeza: el titulo es lo que el huesped viene a hacer, en la serif de la casa. */
.solicitud-cabeza h1 {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem);
  line-height: 1.15;
  color: var(--color-neutral-900);
  text-wrap: balance;
}
.solicitud-lead {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 var(--space-6);
  color: var(--color-neutral-700);
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* El naranja de aviso, la unica nota que no es indigo: avisa sin alarmar. */
.solicitud-lead .icono { flex: none; margin-top: 0.1rem; font-size: 1.25rem; color: var(--color-info-500); }

/* Texto a la medida de quien lee, no de la base densa del panel. */
/* Un solo hueco entre columnas para todo el formulario (tipos, llegada y salida, horas, perros y gatos, clave y telefono, servicios del RV): con 12, 16 y 8 segun el bloque, las columnas de un bloque no caian bajo las del siguiente. */
.solicitud { font-size: 1rem; --hueco: 0.75rem; }
.solicitud .field { gap: 0.375rem; margin-bottom: var(--space-5); }
.solicitud .field > label,
.solicitud .subgrupo > legend {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-neutral-800);
}
.solicitud .hint { font-size: 0.875rem; line-height: 1.45; color: var(--color-neutral-600); }
.solicitud .field .hint { margin-top: 0.125rem; }

/* Pasos. Sin cajas: los separa el aire y una linea fina. */
.solicitud .paso { min-width: 0; margin: 0; padding: 0; border: 0; }
.solicitud .paso + .paso { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-neutral-200); }
/* El legend flota a todo lo ancho para comportarse como un bloque normal: sin esto se monta sobre el borde del fieldset, con una linea a su derecha y un hueco debajo. */
.solicitud .paso-titulo {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-5);
  padding: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-neutral-900);
}
/* Todo lo del paso limpia el titulo flotante, no solo el siguiente: el siguiente puede ser un bloque oculto (las fechas de estancia al elegir Evento, un campo hidden), y entonces lo de abajo subia junto al titulo. */
.solicitud .paso > :not(legend) { clear: both; }
.solicitud .paso > .field:last-child { margin-bottom: 0; }
.paso-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: var(--color-primary-contrast);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Tipo de solicitud: tarjetas. En el telefono, una por renglon con el icono a la izquierda; desde 480px, dos por renglon con el icono arriba. El radio queda fuera de la vista pero enfocable, y no tapa la tarjeta: un toque en el texto la elige igual. */
.tipos { display: grid; grid-template-columns: 1fr; gap: var(--hueco); }
/* Dos columnas y no tres: con las cuatro opciones (habitacion, mesa, RV Park y evento) tres columnas dejaban una sola tarjeta en el segundo renglon. Todas las filas miden lo mismo aunque "Mesa de restaurante" ocupe dos lineas. */
@media (min-width: 480px) { .tipos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; } }
.tipo { position: relative; display: grid; margin: 0; cursor: pointer; font-weight: 400; }
.tipo input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tipo-cara {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4.25rem;
  padding: 0.75rem 3rem 0.75rem 0.875rem;
  border: 1.5px solid var(--borde-control);
  border-radius: 14px;
  background: var(--color-neutral-0);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
@media (min-width: 480px) {
  .tipo-cara { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 8rem; padding: 1rem; }
}
.tipo-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--color-neutral-100);
  color: var(--color-primary-700);
  font-size: 1.5rem;
  transition: background-color 160ms ease, color 160ms ease;
}
.tipo-nombre { font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--color-neutral-900); }
.tipo-marca {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.75rem;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: var(--color-primary-contrast);
  font-size: 0.875rem;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tipo-marca .icono { stroke-width: 3; }
@media (min-width: 480px) { .tipo-marca { top: 0.75rem; right: 0.75rem; margin-top: 0; } }
.tipo:hover .tipo-cara { border-color: var(--color-neutral-600); }
.tipo:active .tipo-cara { transform: scale(0.985); }
.tipo input:checked + .tipo-cara { border-color: var(--color-primary-600); background: var(--color-primary-50); box-shadow: inset 0 0 0 1px var(--color-primary-600); }
.tipo input:checked + .tipo-cara .tipo-icono { background: var(--color-primary-600); color: var(--color-primary-contrast); }
.tipo input:checked + .tipo-cara .tipo-marca { opacity: 1; transform: scale(1); }
.tipo input:focus-visible + .tipo-cara { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 3px; }
.tipos:has(input[aria-describedby]) .tipo-cara { border-color: var(--color-danger-500); }

/* Campos con su icono dentro. El icono no recibe toques: el campo sigue siendo el blanco entero. */
.control { position: relative; display: flex; }
.control > .icono {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  font-size: 1.125rem;
  color: var(--color-neutral-500);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color 160ms ease;
}
.control-texto > .icono { top: 0.9rem; transform: none; }
.control:focus-within > .icono { color: var(--color-primary-600); }
/* Los campos cortos (personas, espacios para RV) miden una columna de las parejas de abajo: su borde derecho cae donde el de Perros y el de Fecha de llegada. */
.control-corto { max-width: calc((100% - var(--hueco)) / 2); }
/* Fechas y horas no llevan icono propio: el navegador ya pone el suyo a la derecha, y dos calendarios por campo sobraban. */
.solicitud .control.control-nativo > input:not([type="checkbox"]):not([type="radio"]) { padding-left: 0.875rem; }

.solicitud input:not([type="checkbox"]):not([type="radio"]),
.solicitud select,
.solicitud textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--borde-control);
  border-radius: 10px;
  background: var(--color-neutral-0);
  color: var(--color-neutral-900);
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* Con el mismo peso que la regla de arriba mas el .control: sin el, el relleno general la pisaba y el icono tapaba el valor. */
.solicitud .control > input:not([type="checkbox"]):not([type="radio"]),
.solicitud .control > textarea { padding-left: 2.625rem; }
.solicitud textarea { min-height: 6.5rem; }
.solicitud input::placeholder,
.solicitud textarea::placeholder { color: var(--color-neutral-500); opacity: 1; }
.solicitud input:not([type="checkbox"]):not([type="radio"]):hover,
.solicitud select:hover,
.solicitud textarea:hover { border-color: var(--color-neutral-600); }
.solicitud input:not([type="checkbox"]):not([type="radio"]):focus,
.solicitud select:focus,
.solicitud textarea:focus {
  border-color: var(--color-primary-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600) 22%, transparent);
  outline: none;
}
/* Con el mismo peso que las reglas generales y despues de ellas: con menos, el borde rojo nunca se veia. */
.solicitud input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.solicitud select[aria-invalid="true"],
.solicitud textarea[aria-invalid="true"] { border-color: var(--color-danger-500); }
.solicitud input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):focus,
.solicitud select[aria-invalid="true"]:focus,
.solicitud textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.2); }

/* Telefono: la clave de pais y el numero en una fila; si no caben (la clave "Otra" agrega su campo), el numero baja entero en vez de apretarse. */
.solicitud .telefono { flex-wrap: wrap; gap: var(--hueco); }
/* A 360px la tarjeta deja unos 300px: 8.25rem de clave mas 9rem de numero caben en una fila. Con "Otra" el campo de la clave se suma y el numero baja entero. */
.solicitud .telefono select { flex: 0 0 auto; width: 8.25rem; }
.solicitud .telefono .control { flex: 1 1 9rem; min-width: 0; }
.solicitud .telefono .clave-otra input:not([type="checkbox"]):not([type="radio"]) { flex: none; width: 4.5rem; }
/* Con JavaScript, app.js mete el selector en .clave-caja junto a un rotulo con la clave corta ("+52"). En tableta y escritorio el rotulo no se ve y el selector queda como antes. */
.solicitud .telefono .clave-caja { position: relative; display: flex; flex: 0 0 auto; }
.solicitud .clave-corta { display: none; }
/* En el telefono la clave y el numero van en la misma fila. Con "+52 México" a la vista, el numero quedaba de 181px a 390 y el placeholder "Tu número, sin la clave" se cortaba. El selector cerrado se reduce a su clave: el rotulo tapa el texto largo y deja libre la flecha, que se dibuja aparte porque appearance: none quita la del sistema. Al abrirse, la lista sigue diciendo el pais. El numero no lleva icono: la clave de junto ya dice que es un telefono, y los 28px del icono son los que le faltaban al placeholder a 360. */
@media (max-width: 479px) {
  .solicitud .telefono.con-clave-corta .clave-caja select {
    width: 5rem;
    padding-right: 1.5rem;
    appearance: none;
    background: var(--color-neutral-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585449' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") right 0.5rem center / 1rem no-repeat;
  }
  .solicitud .con-clave-corta .clave-corta {
    position: absolute;
    inset: 2px 1.5rem 2px 2px;
    display: flex;
    align-items: center;
    padding-left: calc(0.875rem - 2px);
    border-radius: 8px 0 0 8px;
    background: var(--color-neutral-0);
    color: var(--color-neutral-900);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
  }
  .solicitud .telefono.con-clave-corta .control > .icono { display: none; }
  .solicitud .telefono.con-clave-corta .control > input:not([type="checkbox"]):not([type="radio"]) { padding-left: 0.875rem; }
  /* Sin JavaScript no hay rotulo: la clave y el numero van cada uno a fila completa, para que no se corte ni "+52 México" ni el placeholder. */
  .solicitud .telefono:not(.con-clave-corta) select { flex: 1 1 100%; width: auto; }
  .solicitud .telefono:not(.con-clave-corta) .control { flex-basis: 100%; }
}

/* Mascotas: subgrupo sin caja, perros y gatos siempre lado a lado. */
.solicitud .subgrupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.solicitud .subgrupo > legend { margin: 0 0 0.25rem; padding: 0; text-transform: none; letter-spacing: 0; }
.solicitud .subgrupo > .hint { margin: 0 0 0.75rem; }
.mascotas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hueco); }
/* Las parejas del formulario (llegada y salida, inicio y fin) con el mismo hueco que perros y gatos y que los tipos. */
.solicitud .grid-2 { column-gap: var(--hueco); }
.mascotas .field { min-width: 0; margin-bottom: 0; }

/* Casillas de la politica y del aviso: un renglon entero se puede tocar, y se llena de indigo al marcarse. */
/* El mismo aire que entre dos campos: cada casilla cierra un par con su texto (politica y aviso), y el par siguiente va a 24 como cualquier otro campo. */
.solicitud .field-check { flex-direction: column; align-items: stretch; margin-bottom: var(--space-5); }
/* Todo con el mismo prefijo: el de las etiquetas (.solicitud .field > label) pisaba el peso, y un selector mas corto dejaba sin efecto el hover, el marcado y el error. */
.solicitud .field > label.casilla,
.solicitud .servicios-rv > label.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  /* Con un renglon de texto la casilla mide lo mismo que un campo (3rem): el relleno vertical es lo que sobra de quitar la caja de 1.375rem y los dos bordes. Con dos renglones crece hacia abajo y la caja sigue junto al primero. */
  min-height: 3rem;
  padding: calc((3rem - 1.375rem - 3px) / 2) 1rem;
  border: 1.5px solid var(--borde-control);
  border-radius: 10px;
  background: var(--color-neutral-0);
  color: var(--color-neutral-900);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.solicitud .field > label.casilla:hover,
.solicitud .servicios-rv > label.casilla:hover { border-color: var(--color-neutral-600); }
.solicitud .field > label.casilla:has(input:checked),
.solicitud .servicios-rv > label.casilla:has(input:checked) { border-color: var(--color-primary-600); background: var(--color-primary-50); }
.solicitud .field > label.casilla:has(input[aria-invalid="true"]) { border-color: var(--color-danger-500); }
/* Servicios del RV Park: las tres casillas con la misma tarjeta que la politica, una debajo de otra, con el hueco del formulario. Debajo, el aire de un campo antes de las mascotas. */
.solicitud .servicios-rv { display: grid; gap: var(--hueco); margin-bottom: var(--space-5); }
/* La leyenda del estacionamiento abre el bloque del RV como la de un subgrupo: a 12 de lo que presenta, no a los 16 de una ayuda suelta. */
.solicitud .campos-rv > .hint { margin: 0 0 0.75rem; }
.solicitud .casilla input {
  appearance: none;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  border: 1.5px solid var(--color-neutral-500);
  border-radius: 6px;
  background: var(--color-neutral-0) center / 0.95rem no-repeat;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.solicitud .casilla input:checked {
  border-color: var(--color-primary-600);
  background-color: var(--color-primary-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafee8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
}
.solicitud .casilla input:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 2px; }

/* Politica y aviso: se abren en su lugar, con un blanco de toque de alto completo. */
.solicitud .privacy-details {
  margin: 0 0 0.75rem;
  border-radius: 10px;
  background: var(--color-neutral-50);
  font-size: 0.9375rem;
}
.solicitud .privacy-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  color: var(--color-primary-700);
  font-weight: 600;
  list-style: none;
}
.solicitud .privacy-details summary::-webkit-details-marker { display: none; }
.solicitud .privacy-details summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}
.solicitud .privacy-details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.solicitud .privacy-details[open] > :not(summary) { padding: 0 0.875rem 0.875rem; animation: solicitud-aparece 200ms ease-out both; }
.solicitud .privacy-details summary:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 2px; border-radius: 10px; }

/* Errores: el resumen de arriba y el mensaje de cada campo. */
.resumen-errores {
  margin: 0 0 var(--space-6);
  padding: 1rem 1.125rem;
  border: 1.5px solid var(--color-danger-500);
  border-radius: 12px;
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}
.resumen-errores:focus { outline: none; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25); }
.resumen-errores-titulo { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 700; }
.resumen-errores ul { margin: 0.5rem 0 0; padding-left: 1.5rem; list-style: none; font-size: 0.9375rem; }
.resumen-errores li + li { margin-top: 0.25rem; }
.resumen-errores a { color: var(--color-danger-700); text-decoration: underline; text-underline-offset: 2px; }
.solicitud .field-error { margin: 0.25rem 0 0; font-size: 0.875rem; animation: solicitud-aparece 200ms ease-out both; }
.solicitud .field-error .icono { flex: none; margin-top: 0.15rem; }

/* Estado del captcha y envio. */
.solicitud .captcha-estado { margin: var(--space-5) 0 var(--space-3); text-align: center; }
/* Ya verificado: el nodo sigue ahi (role="status") pero no deja un hueco sobre el boton. */
.solicitud .captcha-estado:empty { min-height: 0; margin: var(--space-5) 0 0; }
.btn-enviar {
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  border-radius: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  transition: background-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.btn-enviar:hover { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--color-primary-700) 55%, transparent); }
.btn-enviar:active { transform: translateY(1px); }
.btn-enviar-icono, .btn-enviar-cargando { display: inline-flex; font-size: 1.125rem; }
.btn-enviar-icono { transition: transform 180ms ease; }
.btn-enviar:hover .btn-enviar-icono { transform: translate(2px, -2px); }
.btn-enviar-cargando { display: none; }
.btn-enviar.enviando .btn-enviar-icono { display: none; }
.btn-enviar.enviando .btn-enviar-cargando { display: inline-flex; animation: solicitud-gira 800ms linear infinite; }
.btn-enviar[aria-disabled="true"] { cursor: progress; }

/* Los campos de estancia o de evento entran con un fundido corto al cambiar el tipo. */
.solicitud [data-fields]:not([hidden]) { animation: solicitud-aparece 220ms ease-out both; }

@keyframes solicitud-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes solicitud-aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes solicitud-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .public-solicitud,
  .public-solicitud *,
  .public-solicitud *::after { animation: none !important; transition: none !important; }
}

/* === Burbuja de Solicitudes ===
 * El contador rojo de la pestana, como el de mensajes nuevos del celular: sirve para ver de un vistazo que hay solicitudes por atender. Rojo y no indigo: sobre la barra oscura un circulo indigo no se ve, y es un aviso, no un estado. Crema sobre danger-500 da 6.35:1. En el lateral lleva un anillo blanco de 2 px (el rojo contra el 900 da solo 2.42:1); fuera del lateral, un anillo del color de la superficie. Aparece con un pequeno rebote cuando cambia el numero; sin movimiento si el sistema lo pide.
 */
.navlink-con-burbuja { display: inline-flex; align-items: center; gap: 0.375rem; }
.burbuja-contenedor { display: inline-flex; }
.burbuja-contenedor:empty { display: none; }
.burbuja {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-full);
  background: var(--color-danger-500);
  box-shadow: 0 0 0 2px var(--color-surface);
  color: var(--color-primary-contrast);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: burbuja-aparece 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes burbuja-aparece { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .burbuja { animation: none; } }

/* === Autoservicio del huesped (/mi-solicitud y el enlace de la pagina de gracias) ===
 * Mismo lenguaje que el formulario publico: la tarjeta con la banda del logo, la serif en los titulos, los campos con icono y las casillas que se tocan enteras. Lo propio de estas paginas es el estado (una etiqueta grande con su icono, del mismo color que el badge del panel: el mismo estado se ve igual en las dos pantallas) y el bloque del enlace, que es lo que el huesped tiene que guardar. Todo va acotado a .mi-solicitud, .acceso y .public-thanks para no tocar el formulario.
 */
.mi-solicitud-folio { margin: 0 0 var(--space-5); color: var(--color-neutral-700); font-size: 0.9375rem; }
.mi-solicitud-folio strong,
.acceso-folio strong { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.06em; color: var(--color-neutral-900); }

/* Estado: la etiqueta del panel, en grande, y una frase de que sigue. */
.estado-huesped { margin: 0 0 var(--space-5); }
.estado-huesped-etiqueta { margin: 0 0 var(--space-2); }
.estado-huesped .badge { gap: 0.5rem; padding: 0.4rem 0.9rem; font-size: 0.9375rem; font-weight: 600; }
.estado-huesped .badge .icono { font-size: 1.125rem; }
.estado-huesped-texto { margin: 0; color: var(--color-neutral-700); font-size: 0.9375rem; line-height: 1.5; }

/* Aviso de exito despues de guardar o cancelar: con icono, no solo indigo. */
.aviso-huesped { display: flex; align-items: flex-start; gap: 0.5rem; }
.aviso-huesped .icono { flex: none; margin-top: 0.15rem; }

/* Datos de la solicitud: pares etiqueta y valor, en dos columnas desde 480px. */
.resumen-huesped { margin: 0 0 var(--space-6); padding: var(--space-4); border-radius: 12px; background: var(--color-neutral-50); }
.resumen-huesped-lista { display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-5); margin: 0; }
@media (min-width: 480px) { .resumen-huesped-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.resumen-huesped-lista > div { min-width: 0; }
.resumen-huesped-ancho { grid-column: 1 / -1; }
.resumen-huesped-lista dt { margin: 0 0 0.125rem; color: var(--color-neutral-600); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.resumen-huesped-lista dd { margin: 0; color: var(--color-neutral-900); font-size: 1rem; overflow-wrap: anywhere; }
.resumen-huesped-comentarios { white-space: pre-line; }

/* Bloques de cambiar, cancelar y contacto: separados como los pasos del formulario. */
.bloque-huesped { margin: 0; padding-top: var(--space-6); border-top: 1px solid var(--color-neutral-200); }
.bloque-huesped + .bloque-huesped,
.bloque-huesped + .acceso { margin-top: var(--space-6); }
.bloque-huesped-titulo,
.acceso-titulo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--space-3);
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-neutral-900);
}
.bloque-huesped-titulo .icono,
.acceso-titulo .icono { flex: none; color: var(--color-primary-600); }
.bloque-huesped > .hint { margin-bottom: var(--space-5); }
.bloque-huesped .solicitud .grid-2 { margin-bottom: 0; }
/* Las mascotas son un subgrupo sin caja: sin este aire, "Comentarios" quedaba pegado a los campos de perros y gatos. */
.bloque-huesped .solicitud .subgrupo { margin-bottom: var(--space-5); }

/* Cancelar: borde y texto en rojo, sin relleno. Es la accion que no se deshace, y no debe competir con "Guardar cambios", que es la que casi siempre se busca. */
.bloque-cancelar .bloque-huesped-titulo .icono { color: var(--color-danger-500); }
.btn-cancelar-solicitud {
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  border: 1.5px solid var(--color-danger-500);
  border-radius: 12px;
  background: var(--color-neutral-0);
  color: var(--color-danger-700);
  font-size: 1rem;
  font-weight: 600;
}
.btn-cancelar-solicitud:hover { background: var(--color-danger-50); }
.bloque-cancelar .field > label.casilla:has(input:checked) { border-color: var(--color-danger-500); background: var(--color-danger-50); }
.bloque-cancelar .casilla input:checked { border-color: var(--color-danger-500); background-color: var(--color-danger-500); }

.telefono-hotel { font-weight: 600; white-space: nowrap; }

/* El enlace para volver: folio, el enlace con su boton de copiar y la explicacion. A la izquierda aunque viva en la pagina de gracias, que centra todo. */
.acceso {
  margin: var(--space-6) 0 0;
  padding: var(--space-5) var(--space-4);
  border: 1.5px solid var(--color-primary-300);
  border-radius: 14px;
  background: var(--color-primary-50);
  text-align: left;
}
.public-thanks .acceso { margin-bottom: var(--space-5); }
.acceso-folio { margin: 0 0 var(--space-3); color: var(--color-neutral-700); }
.acceso-folio strong { font-size: 1.25rem; }
.acceso-copiar { display: flex; gap: 0.5rem; margin: 0 0 var(--space-3); }
.acceso-copiar input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 1.5px solid var(--borde-control, #94a3b8);
  border-radius: 10px;
  background: var(--color-neutral-0);
  color: var(--color-neutral-900);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875rem;
}
.btn-copiar { flex: none; align-items: center; gap: 0.375rem; min-height: 3rem; border-radius: 10px; background: var(--color-neutral-0); }
.acceso .hint { margin-bottom: 0; color: var(--color-neutral-700); }
.acceso .btn-enviar { margin-top: var(--space-4); text-decoration: none; }
/* En el telefono el boton de copiar baja debajo del enlace: a 360px, junto a el, el enlace quedaba de unos 150px y no se leia nada. */
@media (max-width: 419px) {
  .acceso-copiar { flex-direction: column; }
  .btn-copiar { justify-content: center; }
}

.mi-solicitud .btn-enviar { text-decoration: none; }
.mi-solicitud-pie { margin: var(--space-5) 0 0; text-align: center; font-size: 0.9375rem; }
/* El folio va a todo el ancho, como el telefono de abajo, y no a media columna como los campos cortos de /reservar: en mayusculas y espaciado, "SB-" y seis letras anchas pasan de 176px, y a 360 la media columna lo cortaba ("B-7K3M9Q"). */
.solicitud .control-corto.control-folio { max-width: none; }
.control-folio input { text-transform: uppercase; letter-spacing: 0.06em; }
.control-folio input::placeholder { text-transform: none; letter-spacing: 0; }

/* Panel: la marca de cambio del cliente en la lista y el aviso en el detalle. */
.cambio-cliente-marca { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); color: var(--color-info-500); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; }
.notice.cambio-cliente { display: flex; align-items: flex-start; gap: var(--space-2); }
.notice.cambio-cliente .icono { flex: none; margin-top: 0.15rem; }

/* === Calendario de disponibilidad de /reservar ===
 *
 * Lo que ve el huesped es solo "esta noche no hay habitaciones": tachada, con trama de gris y sin indigo. Mientras elige la salida, la primera noche llena que sirve como salida deja de verse tachada y lleva borde punteado: esa noche ya no se duerme (decision de Joel del 2026-09-27). Sus fechas van llenas en el 600 (el indigo con texto), y las noches de en medio en gris, no en un tinte claro del indigo: la regla del encabezado vale tambien aqui, ningun estado se apoya en un indigo claro. Hoy lleva un subrayado, no un color.
 */
/* Con habitacion, cada campo de fecha es un boton con el aspecto de los demas campos que abre el calendario (app.js). Mismo borde, alto y radio que un input del formulario; el icono va a la derecha, como el del selector del navegador al que reemplaza. */
.solicitud .campo-fecha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--borde-control); border-radius: 10px;
  background: var(--color-neutral-0); color: var(--color-neutral-900);
  font: inherit; line-height: 1.4; text-align: left; cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.solicitud .campo-fecha[hidden] { display: none; }
.solicitud .campo-fecha:hover { border-color: var(--color-neutral-600); }
.solicitud .campo-fecha:focus-visible { outline: none; border-color: var(--color-primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-600) 22%, transparent); }
.solicitud .campo-fecha.sin-fecha .campo-fecha-texto { color: var(--color-neutral-500); }
.solicitud .campo-fecha[aria-invalid="true"] { border-color: var(--color-danger-500); }
.solicitud .campo-fecha .icono { flex: none; font-size: 1.25rem; color: var(--color-neutral-600); }
/* La ayuda del calendario va a 8 de los botones de fecha, como la ayuda de cualquier campo (hueco de 6 mas margen de 2): se recorre el aire que deja el campo de arriba. */
.calendario-abrir { margin: calc(var(--space-5) * -1 + 0.5rem) 0 var(--space-5); }
.calendario-abrir[hidden] { display: none; }
.calendario-abrir .hint { margin: 0; flex: 1 1 16rem; }
.calendario-abrir .icono { font-size: 1.125rem; }

.calendario-estado { margin: 0; min-height: 1.5em; font-size: 1rem; color: var(--color-neutral-700); }
.calendario-icono-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.calendario-icono-btn:hover:not(:disabled) { background: var(--color-bg-subtle); }
.calendario-icono-btn:disabled { opacity: 0.35; cursor: default; }
.calendario-icono-btn .icono { font-size: 1.25rem; }

.calendario-cuerpo { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-2); }
.calendario-anterior, .calendario-siguiente { margin-top: 0.1rem; }
.calendario-meses { display: grid; grid-template-columns: 1fr; gap: var(--space-5); min-height: 18rem; }
@media (min-width: 44rem) { .calendario-meses { grid-template-columns: 1fr 1fr; } }
.calendario-mes-titulo { margin: 0.6rem 0 var(--space-2); text-align: center; font-size: 1rem; font-weight: var(--font-weight-bold); }
.calendario-mes table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendario-mes th { padding-bottom: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-neutral-600); }
.calendario-mes td { padding: 1px; text-align: center; }

.calendario-dia {
  width: 100%; aspect-ratio: 1; max-width: 2.75rem; min-height: 40px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text);
  font: inherit; font-size: 0.9375rem; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.calendario-dia:hover:not([aria-disabled="true"]) { border-color: var(--color-primary-500); }
.calendario-dia:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 1px; }
.calendario-dia.es-hoy { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.calendario-dia[aria-disabled="true"] { color: var(--color-neutral-400); cursor: default; }
.calendario-dia.es-llena {
  color: var(--color-neutral-500);
  text-decoration: line-through;
  background: repeating-linear-gradient(135deg, var(--color-neutral-100) 0 4px, var(--color-neutral-0) 4px 8px);
}
.calendario-dia.es-solo-salida { border: 1px dashed var(--color-primary-500); background: var(--color-neutral-0); color: var(--color-text); }
.calendario-dia.en-rango { background: var(--color-neutral-100); color: var(--color-text); border-radius: 0; }
.calendario-dia.es-llegada, .calendario-dia.es-salida { background: var(--color-primary-600); color: var(--color-text-on-primary); font-weight: var(--font-weight-bold); }
.calendario-dia.es-llegada.es-llena, .calendario-dia.es-salida.es-llena { text-decoration: none; }

.calendario-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); color: var(--color-neutral-700); }
.calendario-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.calendario-muestra { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-300); }
.calendario-muestra-elegida { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.calendario-muestra-salida { border-style: dashed; border-color: var(--color-primary-500); background: var(--color-neutral-0); }
.calendario-muestra-llena { background: repeating-linear-gradient(135deg, var(--color-neutral-100) 0 3px, var(--color-neutral-0) 3px 6px); }
[data-calendario] .dialogo-pie .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* En el celular los botones del pie del calendario y de armar reparten el ancho; el dialogo ya sale como hoja inferior (.dialogo). */
@media (max-width: 43.99rem) {
  [data-calendario] .dialogo-pie .btn, [data-armar] .dialogo-pie .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-calendario][open], [data-armar][open] { animation: calendario-entra 160ms ease-out; }
}
@keyframes calendario-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Idioma del huesped en la lista de solicitudes del panel (R49): una etiqueta corta en caja, legible sin color. */
.idioma-huesped { display: inline-block; min-width: 2rem; padding: 0 var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 600; text-align: center; color: var(--color-text); }
.idioma-huesped[data-idioma-huesped="en"] { border-color: var(--color-info-500); color: var(--color-info-500); }

/* Administracion del menu del restaurante. */
.menu-busqueda { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.menu-busqueda .field { margin-bottom: 0; }
.menu-lista, .menu-opciones { list-style: none; margin: 0; padding: 0; }
.menu-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--color-neutral-200); }
.menu-fila:first-child { border-top: 0; }
.menu-fila-apagada .menu-nombre { color: var(--color-neutral-500); text-decoration: line-through; }
.menu-nombre { flex: 1 1 14rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.menu-precio { font-variant-numeric: tabular-nums; font-weight: 600; }
.menu-opcion { padding: var(--space-3) 0; border-top: 1px solid var(--color-neutral-200); }
.menu-opcion:first-child { border-top: 0; }
.menu-opcion-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.menu-opcion-form .field { margin-bottom: 0; }

/* Plano del restaurante (/comandas). Libre va HUECO con borde punteado y ocupada LLENA en el indigo 600, como el calendario (ver el encabezado: el indigo no significa "disponible"). "Pidio la cuenta" va en el ambar de aviso con borde continuo y grueso. Ninguno depende solo del color: cada mesa grande lleva la palabra del estado y todas tienen nombre accesible con el estado. */
.plano-caja { max-width: 100%; overflow-x: auto; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-neutral-0); }
/* En el telefono el plano no se encoge hasta ser ilegible: mide al menos 560 px y se desplaza dentro de su caja, sin ensanchar la pagina. */
svg.plano { display: block; width: 100%; min-width: 560px; height: auto; }
.plano .zona { fill: var(--color-neutral-0); stroke: var(--color-neutral-300); stroke-width: 1.5; }
.plano .zona.balcon { fill: var(--color-neutral-50); stroke-dasharray: 6 5; }
.plano .zona-nombre { font-size: 15px; font-weight: 700; fill: var(--color-neutral-600); }
.plano .zona-nota { font-size: 11px; fill: var(--color-neutral-600); }
.plano .puerta { fill: var(--color-neutral-200); stroke: var(--color-neutral-400); }
.plano .silla { fill: var(--color-neutral-0); stroke: var(--color-neutral-500); stroke-width: 1.2; }
.plano .mesa { cursor: pointer; outline: none; }
.plano .tabla, .plano-muestra .tabla { fill: none; stroke: var(--color-neutral-600); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: all; }
.plano .mesa-ocupada .tabla, .plano-muestra .tabla.mesa-ocupada { fill: var(--color-primary-600); stroke: var(--color-primary-700); stroke-dasharray: none; }
.plano .mesa-cuenta .tabla, .plano-muestra .tabla.mesa-cuenta { fill: var(--color-warning-50); stroke: var(--color-warning-500); stroke-width: 3; stroke-dasharray: none; }
.plano .mesa:hover .tabla { stroke-width: 3; }
.plano .mesa:focus-visible .tabla, .plano .mesa[aria-current="true"] .tabla { stroke: var(--color-neutral-900); stroke-width: 4; stroke-dasharray: none; }
.plano .num { font-size: 18px; font-weight: 800; fill: var(--color-neutral-900); pointer-events: none; }
.plano .sub { font-size: 11px; font-weight: 600; fill: var(--color-neutral-700); pointer-events: none; }
.plano .mesa-ocupada .num, .plano .mesa-ocupada .sub { fill: var(--color-primary-contrast); }
.plano .mesa-cuenta .num, .plano .mesa-cuenta .sub { fill: var(--color-warning-700); }
.plano-aviso { display: none; margin-bottom: var(--space-2); }
@media (max-width: 639.98px) { .plano-aviso { display: block; } }
.plano-leyenda { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: var(--space-3) 0 0; padding: 0; font-size: var(--font-size-sm); }
.plano-leyenda li { display: inline-flex; align-items: center; gap: var(--space-2); }
.plano-muestra { width: 28px; height: 20px; }
.plano-detalle { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.plano-detalle dt { color: var(--color-text-muted); }
.plano-detalle dd { margin: 0; font-weight: var(--font-weight-medium); }
.plano-detalle-nombre { margin: 0 0 var(--space-2); font-size: var(--font-size-lg, 1.125rem); }
.plano-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 var(--space-4); }
.plano-form .field { min-width: 0; }
.plano-form-acciones { grid-column: 1 / -1; }

/* Cuentas y comandas del restaurante (/comandas). Botones de al menos 44 px; usable a 390 px. */
.acciones-cabecera { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.subtitulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.plano .pendiente-marca, .plano-muestra .pendiente-marca { fill: var(--color-info-500); stroke: var(--color-neutral-0); stroke-width: 2; pointer-events: none; }
.plano .pendiente-signo, .plano-muestra .pendiente-signo { fill: var(--color-info-contrast); font-size: 12px; font-weight: 800; pointer-events: none; }
.btn-icono { min-width: 44px; padding-left: var(--space-2); padding-right: var(--space-2); }
.cuentas-lista { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.cuenta-tarjeta { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; min-height: 44px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.cuenta-tarjeta:hover { border-color: var(--color-primary-600); background: var(--color-bg-subtle); }
.cuenta-tarjeta-titulo { font-weight: var(--font-weight-bold); }
.cuenta-tarjeta-detalle { grid-column: 1; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cuenta-tarjeta-total { grid-column: 2; grid-row: 2; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-bold); }
.abrir-cuenta { max-width: 28rem; }

/* Pestanas Menu / Cuenta del celular: enlaces (con JavaScript solo cambian la vista). En escritorio no se muestran. */
.cuenta-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.cuenta-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 44px; border: var(--borde-control); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium); background: var(--color-surface); }
.cuenta-tab[aria-current="page"] { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.cuenta-aviso { margin: 0 0 var(--space-3); }
.cuenta-aviso:empty { display: none; }
.cuenta-pantalla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 899.98px) {
  .cuenta-pantalla[data-vista="menu"] .cuenta-lado { display: none; }
  .cuenta-pantalla[data-vista="cuenta"] .cuenta-menu { display: none; }
}
@media (min-width: 900px) {
  .cuenta-tabs { display: none; }
  .cuenta-pantalla { grid-template-columns: minmax(0, 1fr) 26rem; }
  .cuenta-lado { position: sticky; top: var(--space-3); }
}
.cuenta-menu, .cuenta-panel { margin-bottom: 0; }

/* Menu para tomar la orden. */
.menu-busqueda-form { display: flex; gap: var(--space-2); align-items: flex-start; }
.menu-busqueda-form .field { flex: 1; margin-bottom: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-3); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border: var(--borde-control); border-radius: var(--radius-full); color: var(--color-text); text-decoration: none; font-weight: var(--font-weight-medium); background: var(--color-surface); }
.chip:hover { border-color: var(--color-primary-600); }
.chip[aria-current="page"] { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.chips-categorias .chip { min-height: 44px; font-weight: var(--font-weight-normal); }
.chips-categorias .chip[aria-current="page"] { font-weight: var(--font-weight-medium); }
.productos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-2); }
.producto { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-1); height: 100%; min-height: 4.5rem; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; background: var(--color-surface); }
.producto:hover { border-color: var(--color-primary-600); background: var(--color-bg-subtle); }
.producto-nombre { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.producto-precio { font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.producto-opciones { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* La cuenta: lo pendiente (editable), las comandas enviadas (solo lectura) y el total. */
.renglones { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.renglon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.renglon:first-child { border-top: 0; }
.renglon-info { min-width: 0; }
.renglon-nombre { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.renglon-etiqueta { margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.renglon-lineas { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--color-info-500); }
.renglon-nota { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.renglon-ctl { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.renglon-stepper, .renglon-quitar { display: inline-flex; margin: 0; }
.renglon-cantidad { min-width: 2ch; text-align: center; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.renglon-subtotal { min-width: 5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.renglon-cancelado .renglon-nombre, .renglon-cancelado .renglon-subtotal { text-decoration: line-through; color: var(--color-text-muted); }
.renglon-motivo { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-danger-700); }
.renglon > .confirmar { grid-column: 1 / -1; }
.comanda { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 2px solid var(--color-border); }
.cuenta-total { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-4) 0; padding: var(--space-3) 0; border-top: 2px solid var(--color-text); font-size: var(--font-size-xl); }
.cuenta-total strong { font-variant-numeric: tabular-nums; }
.cuenta-acciones { display: grid; gap: var(--space-2); }
.cuenta-accion { margin: 0; }
.confirmar > summary { list-style: none; cursor: pointer; }
.confirmar > summary::-webkit-details-marker { display: none; }
.confirmar[open] > summary { margin-bottom: var(--space-3); }
.confirmar-forma { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); }
.confirmar-forma p { margin-top: 0; }
.cuenta-mas .confirmar-forma .field { margin-bottom: var(--space-3); }

/* Dialogo de armar un platillo. En el telefono sale desde abajo y ocupa el ancho, como una hoja. */
.armar-error:empty { display: none; }
.armar-error { margin-bottom: var(--space-3); padding: var(--space-3); border-left: 4px solid var(--color-danger-500); background: var(--color-danger-50); color: var(--color-danger-700); font-weight: var(--font-weight-medium); }
.armar-grupo { min-width: 0; margin: 0 0 var(--space-4); padding: 0; border: 0; }
.armar-grupo legend { padding: 0; margin-bottom: var(--space-1); font-weight: var(--font-weight-bold); }
.armar-grupo .hint { margin-bottom: var(--space-2); }
.armar-opcion { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-1) var(--space-3); border: var(--borde-control); border-radius: var(--radius-md); margin-bottom: var(--space-2); cursor: pointer; }
.armar-opcion input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; }
.armar-opcion:has(input:checked) { border-color: var(--color-primary-600); background: var(--color-primary-50); }

/* Bandeja de facturas (/facturas): una tarjeta por solicitud, como las cuentas vecinas, con sus datos en una lista de terminos y sus acciones debajo. */
.facturas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.factura { margin-bottom: 0; }
.factura .section-title { display: flex; align-items: center; gap: var(--space-2); margin-top: 0; }
.factura .action-row { margin-top: var(--space-3); }
.factura-hecha, .factura > form, .factura > .confirmar { margin-top: var(--space-3); }
.factura-hecha { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); }
.factura-hecha .field { margin-bottom: var(--space-3); }
.factura-cobro-campos { display: none; margin-top: var(--space-3); }
.factura-cobro:has(input[name="requiere_factura"]:checked) .factura-cobro-campos, .factura-cobro[data-abierto] .factura-cobro-campos { display: block; }
.datos-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.datos-lista dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.datos-lista dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.factura-form { max-width: 36rem; }
@media (max-width: 43.99rem) {
  .datos-lista { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .datos-lista dd { margin-bottom: var(--space-2); }
}
.armar-otro { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 7rem; gap: var(--space-2); }
.armar-otro .field { margin-bottom: var(--space-2); }
.armar-pie { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--space-3); }
.armar-total { min-height: 2.5rem; margin-bottom: var(--space-3); font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; }
.armar-total-error { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-danger-700); }
.armar-acciones { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 43.99rem) {
  .armar-acciones .btn { flex: 1 1 auto; }
  .armar-otro { grid-template-columns: 5rem minmax(0, 1fr); }
  .armar-otro .field:last-child { grid-column: 1 / -1; }
}

/* Dinero del restaurante: cobro de cuentas, caja y su corte, propinas y tickets de 80 mm. Botones y campos de al menos 44 px; usable a 390 px. */
.cuenta-saldo { display: flex; justify-content: space-between; align-items: baseline; margin: var(--space-2) 0 var(--space-3); font-weight: var(--font-weight-medium); }
.cuenta-saldo strong { font-variant-numeric: tabular-nums; font-size: var(--font-size-lg); }
.cobrado { margin-top: var(--space-3); }
.pagos-lista .renglon-nombre { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.cargo-habitacion { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.cobro-monto { margin: 0 0 var(--space-4); font-size: var(--font-size-lg); }
.cobro-monto strong { font-variant-numeric: tabular-nums; }
.cobro-form input[type="text"], .cobro-form input[type="number"], .cobro-form select, .corte-form input, .cargo-form input, .caja-form input, .reparto-form input[type="text"], .terminal-form input[type="text"] { min-height: 44px; }
.partes-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-3); }
.partes-form .field { margin-bottom: 0; }
.partes-lista { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.partes-lista li { padding: var(--space-1) 0; font-variant-numeric: tabular-nums; }
.parte-siguiente { font-weight: var(--font-weight-bold); }
.producto-pago { display: grid; grid-template-columns: minmax(0, 1fr) 5rem; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.producto-pago label { display: flex; flex-direction: column; gap: var(--space-1); }
.cobro-propina .field { margin-top: var(--space-2); }
.propina-alta { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
/* Los campos propios de cada forma de pago solo se muestran con su forma elegida. Un navegador sin :has() los muestra todos, que es lo seguro. */
@supports selector(:has(*)) {
  .cobro-form .campos-forma { display: none; }
  .cobro-form:has(input[name="forma"][value="efectivo"]:checked) .campos-efectivo,
  .cobro-form:has(input[name="forma"][value="tarjeta"]:checked) .campos-tarjeta,
  .cobro-form:has(input[name="forma"][value="transferencia"]:checked) .campos-transferencia { display: block; }
}
.cuadre-caja dd { text-align: right; font-variant-numeric: tabular-nums; }
.denominaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.denominacion { margin-bottom: 0; }
.movimientos .renglon-etiqueta { margin: 0 var(--space-2) 0 0; }
.terminal-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; width: 100%; }
.terminal-form .field { margin-bottom: 0; flex: 1 1 14rem; }
.reparto-form .asignacion { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: var(--space-3); align-items: center; }
.reparto-form .asignacion .field { margin-bottom: var(--space-2); }
.reparto-form .asignacion-texto { grid-template-columns: minmax(0, 1fr) 8rem; align-items: end; }
.propinas-lista { list-style: none; margin: 0; padding: 0; }
.reparto-cuadre { margin: var(--space-3) 0; font-weight: var(--font-weight-medium); }
.entrega-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.reparto { margin-bottom: var(--space-4); }
@media (max-width: 43.99rem) {
  .reparto-form .asignacion, .reparto-form .asignacion-texto { grid-template-columns: minmax(0, 1fr) 6.5rem; }
}

/* Tickets de 80 mm (pre-cuenta, comprobante y corte de caja). En pantalla se ven como el papel; al imprimir, la hoja mide 80 mm de ancho y solo sale el ticket. */
.ticket-body { background: var(--color-bg-subtle); }
.ticket-barra { display: flex; justify-content: center; gap: var(--space-3); padding: var(--space-4); }
.ticket { width: 80mm; max-width: 100%; margin: 0 auto var(--space-6); padding: 4mm; background: #fff; color: #000; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; box-shadow: var(--shadow-sm); }
.ticket p { margin: 0 0 2px; }
.ticket-cabeza { text-align: center; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #000; }
.ticket-negocio { font-size: 15px; font-weight: 700; }
.ticket-titulo { font-weight: 700; text-transform: uppercase; }
.ticket-lineas { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.ticket-lineas td { padding: 1px 0; vertical-align: top; }
.ticket-cant { width: 3ch; }
.ticket-monto { text-align: right; white-space: nowrap; padding-left: 4px; }
.ticket-sub { display: block; font-size: 11px; font-weight: 700; }
.ticket-total, .ticket-par { display: flex; justify-content: space-between; gap: 6px; }
.ticket-total { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #000; font-size: 14px; font-weight: 700; }
.ticket-fuerte { font-weight: 700; }
.ticket-sub-titulo { margin-top: 6px; padding-top: 4px; border-top: 1px dashed #000; font-weight: 700; text-transform: uppercase; }
.ticket-pagos { margin-top: 6px; }
.ticket-nota { margin-top: 4px; font-size: 11px; text-align: center; }
.ticket-gracias { margin-top: 8px; text-align: center; font-weight: 700; }
@media print {
  @page { size: 80mm auto; margin: 0; }
  .ticket-body { background: #fff; }
  .no-imprimir { display: none !important; }
  .ticket { width: 80mm; margin: 0; padding: 3mm; box-shadow: none; }
}

/* === Cocina: la pantalla de comandas, la comanda de 80 mm y los equipos vinculados === */
/* Pestanas Cocina y Barra: las mismas del celular de la cuenta (.cuenta-tab), mas altas porque se tocan con las manos ocupadas. */
.cocina-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.cocina-tab { min-height: 56px; font-size: var(--font-size-lg); }
.cocina-tab-n { font-variant-numeric: tabular-nums; }
.cocina-aviso:empty { display: none; }
.cocina-aviso { margin-bottom: var(--space-3); }
.cocina-aviso .alert { margin: 0; }
.cocina-vacia { padding: var(--space-5) 0; font-size: var(--font-size-lg); }
.cocina-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-4); align-items: start; }
.cocina-tarjeta { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left-width: 8px; border-radius: var(--radius-md); background: var(--color-surface); }
.cocina-estado-nueva { border-left-color: var(--color-warning-500); }
.cocina-estado-preparando { border-left-color: var(--color-info-500); }
.cocina-estado-lista { border-left-color: var(--color-success-500); }
.cocina-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.cocina-titulo { display: flex; flex-direction: column; margin: 0; font-size: var(--font-size-xl); overflow-wrap: anywhere; }
.cocina-numero { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.cocina-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-1); font-size: var(--font-size-base); color: var(--color-text-muted); }
.cocina-meta strong { color: var(--color-text); }
.cocina-tiempo { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-variant-numeric: tabular-nums; }
.cocina-renglones { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.cocina-renglon { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.cocina-renglon:first-child { border-top: 0; }
.cocina-cantidad { flex: none; min-width: 2.25rem; font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.cocina-renglon-info { min-width: 0; font-size: var(--font-size-lg); }
.cocina-renglon-nombre { font-weight: var(--font-weight-bold); overflow-wrap: anywhere; }
.cocina-lineas { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--font-size-base); }
.cocina-lineas li { display: block; width: fit-content; max-width: 100%; }
.cocina-lineas li + li { margin-top: var(--space-1); }
.cocina-nota { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
/* Lo que se quita (SIN) o lo unico que lleva (SOLO): no se puede pasar por alto. Con borde y negrita, no solo con color. */
.cm-res { display: inline-block; padding: 0 var(--space-1); border: 1.5px solid var(--color-danger-500); border-radius: var(--radius-sm); background: var(--color-danger-50); color: var(--color-danger-700); font-weight: var(--font-weight-bold); }
.cocina-renglon-cancelado .cocina-renglon-nombre, .cocina-renglon-cancelado .cocina-cantidad, .cocina-renglon-cancelado .cocina-lineas { text-decoration: line-through; color: var(--color-text-muted); }
.cocina-cancelado { margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-danger-500); color: var(--color-danger-contrast); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.cocina-acciones { display: grid; gap: var(--space-2); }
.cocina-forma { margin: 0; }
/* Botones de la cocina: grandes, para tocarlos con guantes o con las manos mojadas. Mas altos que el minimo de 44 px, y sin la altura reducida de .btn en escritorio. */
.cocina-boton { width: 100%; min-height: 56px; min-width: 44px; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.comanda-imprimir { margin: 0 0 var(--space-2); }
.comanda-imprimir .btn { min-height: 44px; }

/* Equipos vinculados. */
.equipo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.equipo-form .field { flex: 1 1 16rem; margin-bottom: 0; }
.codigo-nuevo { border-left: 4px solid var(--color-primary-600); }
.codigo-valor { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: 2.25rem; font-weight: var(--font-weight-bold); letter-spacing: 0.2em; }
.codigo-campo { font-family: var(--font-mono); font-size: var(--font-size-2xl); letter-spacing: 0.15em; text-align: center; text-transform: uppercase; }

/* Entrada con PIN en un equipo vinculado. Las teclas miden 72 px de alto (el minimo pedido es 56): se tocan con prisa y con las manos mojadas. */
.pin-card { max-width: 420px; }
.pin-lista { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.pin-persona-boton { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); width: 100%; min-height: 72px; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.pin-persona-boton:hover { background: var(--color-bg-subtle); }
.pin-persona-nombre { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.pin-persona-rol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pin-persona { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--font-size-xl); }
.pin-campo { width: 100%; margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: 2rem; letter-spacing: 0.6em; text-align: center; }
.pin-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pin-tecla { min-width: 56px; min-height: 72px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: 1.75rem; font-weight: var(--font-weight-bold); cursor: pointer; }
.pin-tecla:hover { background: var(--color-bg-subtle); }
.pin-tecla:active { background: var(--color-neutral-100); }
.pin-tecla .icono { width: 1.75rem; height: 1.75rem; }
.pin-tecla-entrar { border-color: var(--color-primary-600); background: var(--color-primary-600); color: var(--color-text-on-primary); font-size: var(--font-size-lg); }
.pin-tecla-entrar:hover { background: var(--color-primary-700); }
.pin-pie { margin-top: var(--space-4); text-align: center; }
.pin-panel { max-width: 28rem; }
.pin-entrada { font-family: var(--font-mono); font-size: var(--font-size-xl); letter-spacing: 0.4em; }

/* La comanda de 80 mm. En pantalla es una vista previa del papel; al imprimir sale solo el ticket, sin la barra de botones. Las tres lineas de texto de arriba van centradas y grandes: se leen de lejos. */
.impresion { background: var(--color-bg-subtle); }
.impresion-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); }
.impresion-barra .btn { width: auto; min-width: 10rem; }
.impresion-estado { flex: 1 0 100%; margin: 0; text-align: center; font-weight: var(--font-weight-medium); }
.impresion-estado:empty { display: none; }
.ticket { width: 80mm; max-width: 100%; margin: 0 auto var(--space-5); padding: 4mm 3mm; background: #fff; color: #000; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; box-shadow: 0 1px 6px rgba(15, 23, 42, 0.2); }
.ticket p { margin: 0; }
.ticket-negocio, .ticket-num, .ticket-destino, .ticket-mesa, .ticket-cliente { text-align: center; font-weight: var(--font-weight-bold); }
.ticket-num { font-size: 16px; }
.ticket-destino { font-size: 14px; letter-spacing: 0.1em; }
.ticket-mesa { font-size: 20px; }
.ticket-cliente { font-size: 14px; }
.ticket-meta { text-align: center; font-size: 11px; }
.ticket-reimpresion { margin-bottom: 2mm; padding: 1px 0; border: 2px solid #000; text-align: center; font-size: 14px; font-weight: var(--font-weight-bold); letter-spacing: 0.15em; }
.ticket-linea { margin: 2mm 0; border: 0; border-top: 1px dashed #000; }
.ticket-item { margin-top: 1.5mm; font-size: 14px; overflow-wrap: anywhere; }
.ticket-sub { padding-left: 4mm; margin-top: 0.5mm; overflow-wrap: anywhere; }
.ticket-nota { margin-top: 1px; padding: 0 2px; border: 1px solid #000; font-weight: var(--font-weight-bold); }
.ticket-total-pz { margin-top: 1mm; padding-left: 4mm; font-size: 13px; font-weight: var(--font-weight-bold); }
.ticket-cancelados { margin-top: 2mm; padding-top: 1mm; border-top: 1px dashed #000; }
.ticket-cancelados-titulo { font-weight: var(--font-weight-bold); }
.ticket-cancelado { text-decoration: line-through; }
/* En el papel no hay color: SIN y SOLO van en negrita y con borde, que sale igual en una termica. */
.ticket .cm-res { padding: 0 2px; border: 1.5px solid #000; border-radius: 0; background: #fff; color: #000; }
/* El ancho del papel es el de la termica: 80 mm. Chromium no admite "size: 80mm auto" (ignora la declaracion y imprime en carta), asi que el alto de aqui es de respaldo, el de una hoja A4, y app.js lo reemplaza por el alto real del ticket (ajustarPapel) para que la impresora no avance una hoja entera de papel en blanco. */
/* Pagina con nombre: el ticket de cobro (arriba) declara su propio @page y el de la comanda no debe pisarlo. */
@page comanda { size: 80mm 297mm; margin: 3mm; }
.impresion { page: comanda; }
@media print {
  .impresion { background: #fff; }
  .impresion-barra { display: none; }
  .ticket { width: auto; margin: 0; padding: 0; box-shadow: none; }
}

/* === Busqueda publica de habitaciones (/buscar, R56) ===
 *
 * Es la pagina donde el huesped compara precios, asi que va ancha y en silencio: el indigo de la casa solo encabeza (la banda del logotipo) y rotula las acciones; lo que se lee y se compara va sobre el papel de las tarjetas. El prototipo aprobado usaba los tokens del apex (banda, gris, tinta); aqui se llevan a los de esta hoja para no tener dos paletas.
 *
 * El indigo no significa "disponible": una tarjeta sin lugar se atenua y se dice con texto, y ninguna con lugar se tine. Los avisos de temporada van en el naranja de aviso (info); el aviso sereno de "tarifa base" usa el indigo suave porque no habla de disponibilidad.
 */
.public-body.bus-body {
  display: block;
  padding: 0;
}
.bus-saltar { position: absolute; left: var(--space-3); top: -4rem; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--color-primary-contrast); color: var(--color-primary-700); font-weight: var(--font-weight-bold); border-radius: var(--radius-md); }
.bus-saltar:focus { top: var(--space-3); }
.bus-tope { position: relative; background: var(--color-primary-500); border-bottom: 3px solid var(--color-primary-700); }
.bus-marca { margin: 0; padding: var(--space-4); text-align: center; }
.bus-main { width: 100%; max-width: 64rem; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
@media (min-width: 640px) { .bus-main { padding-left: var(--space-5); padding-right: var(--space-5); } }

.bus-form { padding: var(--space-4); background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.bus-form input { font-size: 1rem; }
.bus-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.bus-campos .field { min-width: 0; margin-bottom: var(--space-3); }
.bus-buscar { width: 100%; }
@media (min-width: 900px) {
  .bus-form { display: flex; align-items: flex-start; gap: var(--space-4); }
  .bus-campos { flex: 1; grid-template-columns: repeat(4, 1fr); }
  .bus-buscar { width: auto; margin-top: 1.55rem; }
}

.bus-resultados { margin-top: var(--space-5); }
.bus-encabezado h1 { margin: var(--space-2) 0 var(--space-2); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.bus-encabezado > p { max-width: 46rem; color: var(--color-text-muted); }
.bus-resumen { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text); }
.bus-resumen-detalle { color: var(--color-text-muted); }
.bus-revisa { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.bus-resultados .alert ul { margin: 0; padding-left: var(--space-5); }

.bus-aviso { display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-info-50); border-left: 5px solid var(--color-info-500); border-radius: var(--radius-sm); }
.bus-aviso .icono { margin-top: 0.2em; color: var(--color-info-500); }
.bus-aviso p { margin: 0; max-width: 60ch; }
.bus-aviso strong { color: var(--color-info-500); }
.bus-aviso-sereno { background: var(--color-primary-50); border-left-color: var(--color-primary-500); }
.bus-aviso-sereno .icono, .bus-aviso-sereno strong { color: var(--color-primary-700); }

.bus-cuartos { display: grid; gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.bus-cuarto { display: grid; background: var(--color-neutral-0); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.bus-cuarto.bus-sin-lugar { background: var(--color-neutral-50); }
.bus-cuarto.bus-sin-lugar h2 { color: var(--color-text-muted); }

/* Marcador de foto: dice que falta la foto sin fingir que ya esta. Rayado diagonal suave; la foto publicada del tipo lo reemplaza (.bus-foto-img). */
.bus-foto { display: grid; place-items: center; aspect-ratio: 2 / 1; background-color: var(--color-neutral-100); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-primary-600) 7%, transparent) 0 12px, transparent 12px 24px); color: var(--color-neutral-800); }
.bus-foto-img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; background-color: var(--color-neutral-100); }
.bus-foto > span { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }

.bus-cuarto-cuerpo { display: grid; gap: var(--space-3); padding: var(--space-4); }
.bus-cuarto h2 { margin: 0; font-size: 1.4rem; line-height: 1.15; }
.bus-cuarto-info { display: grid; gap: var(--space-2); align-content: start; }
.bus-descripcion { margin: 0; color: var(--color-text-muted); max-width: 60ch; }
.bus-datos { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.bus-datos li { display: inline-flex; align-items: center; gap: var(--space-1); }
.bus-datos .icono { color: var(--color-primary-700); }
.bus-quedan, .bus-no-cabe { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--color-info-500); }
.bus-quedan .icono, .bus-no-cabe .icono { margin-top: 0.15em; }
.bus-quedan-cero { color: var(--color-text-muted); }
.bus-no-cabe { font-weight: var(--font-weight-medium); max-width: 52ch; }

.bus-precio { display: grid; gap: 2px; padding-top: var(--space-3); border-top: 1px dashed var(--color-neutral-400); }
.bus-precio p { margin: 0; }
.bus-precio-total { font-size: 2rem; font-weight: var(--font-weight-bold); line-height: 1.05; font-variant-numeric: tabular-nums; }
.bus-precio-total small { font-size: 1rem; font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
.bus-precio-noche { color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; max-width: 52ch; }
.bus-precio-noche strong { color: var(--color-text); }
.bus-desglose summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.bus-desglose table { width: 100%; max-width: 22rem; border-collapse: collapse; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.bus-desglose td { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-neutral-100); }
.bus-desglose td:last-child { text-align: right; font-weight: var(--font-weight-bold); }
.bus-etiqueta-temporada { display: inline-block; white-space: nowrap; margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-info-50); border: 1px solid var(--color-info-500); color: var(--color-info-500); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.bus-accion { display: flex; }
.bus-accion .btn { width: 100%; }
.bus-nota { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 62ch; }

@media (min-width: 900px) {
  .bus-cuarto { grid-template-columns: 15rem 1fr; }
  .bus-foto, .bus-foto-img { aspect-ratio: auto; min-height: 14rem; height: 100%; }
  .bus-cuarto-cuerpo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info info" "precio accion"; column-gap: var(--space-5); padding: var(--space-5); }
  .bus-cuarto-info { grid-area: info; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-neutral-400); }
  .bus-precio { grid-area: precio; border-top: 0; padding-top: var(--space-3); }
  .bus-accion { grid-area: accion; align-self: end; }
  .bus-accion .btn { width: auto; }
  .bus-precio-total small { white-space: nowrap; }
}
/* En la busqueda los botones miden 44 px tambien en escritorio: el huesped la usa mucho desde el telefono y con pantalla tactil de escritorio, y la base de 40 px es del panel. */
.bus-body .btn { min-height: 44px; }

/* Precio de la estancia en /reservar (cuando el huesped llega desde la busqueda) y en la pagina de gracias. El mismo bloque en los dos sitios: tipo, fechas, tramos de noches, total y anticipo. Va en una tarjeta con borde punteado como el precio de la busqueda; el indigo de la marca solo en el icono. */
.cotizacion-bloque { margin-bottom: var(--space-5); text-align: left; }
.cotizacion { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px dashed var(--color-neutral-400); border-radius: var(--radius-md); background: var(--color-surface); }
.cotizacion p { margin: 0; }
.cotizacion-titulo { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-lg); }
.cotizacion-titulo .icono { color: var(--color-primary-600); }
.cotizacion-tipo { font-size: var(--font-size-lg); }
.cotizacion-fechas { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cotizacion-detalle { white-space: nowrap; }
.cotizacion-tabla { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.cotizacion-tabla th { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-neutral-100); font-weight: var(--font-weight-normal); text-align: left; }
.cotizacion-tabla td { padding: var(--space-1) 0; border-bottom: 1px solid var(--color-neutral-100); text-align: right; font-weight: var(--font-weight-bold); }
.cotizacion-total th, .cotizacion-total td { padding-top: var(--space-2); border-bottom: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }
.cotizacion-anticipo { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.cotizacion-nota { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 60ch; }
.cotizacion-cambiar { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-1); color: var(--color-primary-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 0.18em; }
.cotizacion-sin-tarifa { display: flex; align-items: flex-start; gap: var(--space-2); }

/* Fotos de la pagina publica (/inventario/fotos). La miniatura es la variante de 480 de ancho recortada a una caja fija, para que la lista no brinque con fotos verticales y horizontales; la foto grande de la edicion se muestra completa. */
.foto-mini { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-neutral-100); }
.foto-grande { display: block; max-width: 100%; height: auto; margin-bottom: var(--space-3); border-radius: var(--radius-sm); background: var(--color-neutral-100); }
.foto-alt { margin: 0; overflow-wrap: anywhere; }
.foto-alt-en { color: var(--color-text-muted); }
.foto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.foto-acciones form { margin: 0; }

/* === Reportes imprimibles (R58): reservaciones y estado de cuenta ===
 *
 * En pantalla son una pagina mas con su filtro. Al imprimir (o guardar como PDF) se queda solo el reporte: sin barra superior, filtros ni botones, con el membrete arriba y la tabla en carta. El @page global de los tickets es de 80 mm, asi que el reporte declara su propia pagina con nombre (como la comanda) para no heredarlo.
 */
.membrete { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); align-items: center; margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-border); }
.membrete-logo { width: auto; max-width: 150px; height: auto; max-height: 64px; object-fit: contain; }
.membrete-nombre { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
.membrete-contacto { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.membrete-reporte { grid-column: 1 / -1; }
.membrete-titulo { margin: 0; }
.membrete-periodo { margin: var(--space-1) 0 0; font-weight: var(--font-weight-medium); }
.membrete-generado { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.reporte-filtro { margin-bottom: var(--space-5); }
.reporte-acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; }
.reporte-tabla th.num, .reporte-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reporte-tabla tfoot th, .reporte-tabla tfoot td { font-weight: var(--font-weight-medium); background: var(--color-bg-subtle); }
.reporte-seccion { margin-bottom: var(--space-5); }
.reporte-gran-total { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-lg); }

.reporte-nota { display: block; font-weight: var(--font-weight-normal); color: var(--color-text-muted); }

/* Calendario de disponibilidad: un mes por tabla, tres meses por fila al imprimir. Los colores son fijos y no siguen el tema: la hoja se imprime o se manda como PDF y debe verse igual en todas partes. Respetan el encabezado de esta hoja: ninguno es indigo (el indigo no significa "disponible"), lo libre va en blanco y lo ocupado sube de amarillo a naranja y a rojo. */
.disp-intro { margin: 0 0 var(--space-3); }
.disp-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding: 0; font-size: var(--font-size-sm); }
.disp-leyenda li { display: inline-flex; align-items: center; gap: var(--space-1); }
.disp-leyenda i { display: inline-block; width: 14px; height: 12px; border: 1px solid #94a3b8; }
.disp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 700px) { .disp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .disp-grid { grid-template-columns: repeat(3, 1fr); } }
.disp-mes { break-inside: avoid; }
.disp-mes h3 { margin: 0 0 var(--space-1); font-size: var(--font-size-base); }
.disp-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; color: #0f172a; }
.disp-tabla th { font-size: 0.75rem; font-weight: var(--font-weight-medium); padding: 1px 0; color: #475569; }
.disp-tabla td { border: 1px solid #cbd5e1; height: 3.1rem; vertical-align: top; padding: 2px 3px; font-size: 0.8rem; }
.disp-tabla td b { display: block; font-weight: var(--font-weight-medium); }
.disp-tabla td span { display: block; font-size: 0.65rem; line-height: 1.1; }
.disp-tabla td.disp-vacio { border: 0; background: transparent; }
/* Los colores van en la celda y en la muestra de la leyenda con la misma clase. La celda no lleva un fondo base: una regla de tabla (.disp-tabla td) pesa mas que una clase suelta y se comia los colores (el calendario salia todo blanco). Lo vigila TestCssDeDisponibilidadNoTapaLosColores. */
.disp-tabla td.disp-libre, .disp-leyenda i.disp-libre { background: #fff; }
.disp-tabla td.disp-poco, .disp-leyenda i.disp-poco { background: #fff3c4; }
.disp-tabla td.disp-parcial, .disp-leyenda i.disp-parcial { background: #ffd08a; }
.disp-tabla td.disp-lleno, .disp-leyenda i.disp-lleno { background: #c0392b; color: #fff; }
/* Sin dato (ya paso o queda fuera del rango): gris rayado, distinto del blanco de "todo libre". */
.disp-tabla td.disp-sin-dato, .disp-leyenda i.disp-sin-dato { background: repeating-linear-gradient(135deg, #e2e8f0 0, #e2e8f0 3px, #f1f5f9 3px, #f1f5f9 6px); color: #64748b; }
.disp-destacadas { margin-top: var(--space-5); }
.disp-destacadas ul { columns: 2; line-height: 1.6; }
.disp-pie { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-muted); }

@page reporte { size: letter; margin: 12mm; }
.reporte { page: reporte; }
@media print {
  .topbar, .skip-link, .alert, .no-imprimir { display: none !important; }
  body { background: #fff; color: #000; }
  .container { max-width: none; padding: 0; }
  .reporte { font-size: 10pt; }
  .membrete-logo { max-width: 110px; }
  .reporte .table-wrap { overflow: visible; border: 0; contain: none; margin-bottom: 4mm; }
  .reporte .data-table { min-width: 0; width: 100%; font-size: 9pt; }
  .reporte .data-table th, .reporte .data-table td { white-space: normal; padding: 1.5mm 2mm; border-bottom: 1px solid #999; }
  .reporte .data-table tr { break-inside: avoid; }
  .reporte .data-table thead { display: table-header-group; }
  .reporte .data-table tfoot { display: table-footer-group; }
  .reporte .data-table tbody tr:hover { background: none; }
  .reporte .badge { border: 0; background: none; padding: 0; color: #000; }
  .reporte-seccion { break-inside: avoid; }
  .reporte .hint { color: #000; }
  .reporte-disponibilidad, .reporte-disponibilidad * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .reporte-disponibilidad .disp-grid { grid-template-columns: repeat(3, 1fr); gap: 3mm 4mm; }
  .reporte-disponibilidad .disp-tabla td { height: 7.5mm; font-size: 8pt; padding: 0.3mm 0.6mm; }
  .reporte-disponibilidad .disp-tabla td span { font-size: 6pt; }
  .reporte-disponibilidad .disp-mes h3 { font-size: 10pt; }
  .reporte-disponibilidad .disp-destacadas { break-inside: avoid; }
  .reporte-disponibilidad .disp-pie { color: #000; }
}

/* Cuenta completa: datos de la cuenta, aviso de traspaso y bandeja de traspasos. */
.alert-aviso { display: flex; align-items: center; gap: var(--space-2); background: var(--color-info-50); border-left-color: var(--color-info-500); color: var(--color-neutral-700); }
.cuenta-datos { margin-bottom: var(--space-3); }
.traspasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.traspaso { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.traspaso-info { display: grid; gap: var(--space-1); min-width: 0; }
.traspaso-titulo { font-weight: 600; }
.traspaso-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.traspaso-forma { margin: 0; }

/* === Portada publica del apex (/ y /en/) ===
 * Diseno de la portada: "El rotulo", la banda indigo de la marca para el encabezado, la portada, el restaurante y el contacto, y gris clara y en silencio para lo que se lee y se compara (habitaciones, precios, preguntas). Rotulo a brocha en Chela One con contorno y sombra dura; Alegreya Sans para todo lo demas. Las dos fuentes son locales (/static/fonts, licencia OFL junto a ellas): la CSP solo admite 'self'.
 * Todo vive bajo .por-body y con prefijo .por-, para que ningun estilo de la pagina toque al panel ni al formulario. Respeta el encabezado de esta hoja: el indigo #6366f1 se usa sin texto encima (la sierra del mural, las franjas del ano) y el #4f46e5 con texto; el indigo no significa "disponible" y aqui no hay disponibilidad que mostrar.
 * Contrastes: los pares del panel y los de texto de esta seccion que dependen de la marca estan en domain.ParesDeContraste y los mide web/templates/contraste_test.go. */

.por-body {
  --por-banda: var(--color-primary-600);
  --por-primario: var(--color-primary-500);
  --por-primario-fuerte: var(--color-primary-700);
  --por-primario-suave: var(--color-primary-50);
  --por-suelo: var(--color-primary-900);
  --por-tinta: var(--color-primary-950);
  --por-claro: #ffffff;
  --por-claro-texto: var(--color-primary-100);
  --por-acento: var(--color-acento);
  --por-neutro: #f8fafc;
  --por-neutro-2: #f1f5f9;
  --por-papel: #ffffff;
  --por-borde: #e2e8f0;
  --por-borde-fuerte: #94a3b8;
  --por-texto: #0f172a;
  --por-texto-2: #475569;
  --por-rotulo: var(--font-panel);
  --por-cuerpo: var(--font-panel);
  --por-ancho: 76rem;
  --por-orilla: clamp(1rem, 4.5vw, 3rem);
  margin: 0;
  background: var(--por-neutro);
  color: var(--por-texto);
  font-family: var(--por-cuerpo);
  font-size: 1.125rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
html:has(.por-body) { scroll-behavior: smooth; }
.por-body h1, .por-body h2, .por-body h3 { margin: 0; font-family: var(--por-cuerpo); letter-spacing: 0; text-wrap: auto; }
.por-body p { margin: 0; }
.por-body a { color: var(--por-primario-fuerte); text-underline-offset: 0.18em; }
.por-body img { height: auto; }
.por-body .icono { width: 1.25em; height: 1.25em; vertical-align: -0.25em; stroke-width: 1.8; }
.por-body :focus-visible { outline: 3px solid var(--por-primario); outline-offset: 3px; border-radius: 2px; }
.por-body .por-sobre-banda :focus-visible { outline-color: var(--por-claro); }
.por-envoltura { width: 100%; max-width: var(--por-ancho); margin: 0 auto; padding: 0 var(--por-orilla); }
.por-saltar { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.6rem 1rem; background: var(--por-claro); color: var(--por-tinta) !important; font-weight: 700; }
.por-saltar:focus { top: 1rem; }

/* Encabezado sobre la banda */
.por-tope { background: var(--por-banda); color: var(--por-claro-texto); }
.por-tope-fila { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.por-tope-logo { flex-shrink: 0; display: inline-block; padding: 0.3rem 0.6rem; border-radius: 0.5rem; background: var(--por-claro); }
.por-tope-logo img { display: block; width: auto; height: 3.25rem; }
.por-secciones { display: none; margin-left: auto; }
.por-secciones ul { display: flex; gap: 0.25rem; }
.por-body .por-secciones a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--por-claro-texto); font-weight: 700; text-decoration: none; }
.por-body .por-secciones a:hover { text-decoration: underline; }
.por-idioma { margin: 0 0 0 auto; }
.por-idioma ul { display: flex; gap: 0.35rem; }
.por-body .por-idioma a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.6rem; border: 2px solid var(--por-claro-texto); border-radius: 0.25rem; color: var(--por-claro-texto); font-weight: 700; font-size: 1rem; text-decoration: none; }
.por-body .por-idioma a[aria-current] { background: var(--por-claro); border-color: var(--por-claro); color: var(--por-tinta); }
.por-body .por-boton.por-tope-wa { display: none; }

/* Botones: la placa pintada del apex */
.por-body .por-boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem; padding: 0.7rem 1.35rem; border: 3px solid var(--por-tinta); border-radius: 0.3rem; background: var(--por-banda); color: var(--por-claro); box-shadow: 4px 4px 0 var(--por-tinta); font-weight: 700; font-size: 1.125rem; line-height: 1.2; text-decoration: none; cursor: pointer; }
.por-body .por-boton:hover { background: var(--por-primario-fuerte); }
.por-body .por-boton:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--por-tinta); }
.por-body .por-boton-acento { background: var(--por-acento); color: var(--por-tinta); }
.por-body .por-boton-acento:hover { background: #f5b97a; }
.por-body .por-boton-claro { background: var(--por-papel); color: var(--por-tinta); }
.por-body .por-boton-claro:hover { background: var(--por-neutro-2); }

/* Portada */
.por-portada { background: var(--por-banda); color: var(--por-claro-texto); position: relative; }
.por-portada-grid { display: grid; gap: 2rem; padding-top: 1.25rem; padding-bottom: 1rem; position: relative; z-index: 1; }
.por-body .por-portada h1 { font-size: 1.125rem; font-weight: 700; color: var(--por-claro-texto); }
/* El rotulo va girado 3 grados sobre su esquina izquierda: su orilla derecha sube cerca de 5 % de su ancho, y el margen crece con la pantalla para que no tape la linea de arriba. Va con .por-body delante porque .por-body p le quita el margen a todo parrafo. */
.por-body .por-rotulo { margin-top: clamp(0.6rem, 3vw, 2.5rem); }
.por-rotulo { font-family: var(--por-rotulo); font-weight: 400; font-size: clamp(3.1rem, 13vw, 7rem); line-height: 0.92; color: var(--por-claro); -webkit-text-stroke: 0.07em var(--por-tinta); paint-order: stroke fill; text-shadow: 0.05em 0.065em 0 var(--por-tinta); transform: rotate(-3deg); transform-origin: left bottom; }
.por-portada-intro { max-width: 32rem; margin-top: 1.4rem; font-size: 1.1875rem; color: var(--por-claro-texto); }
.por-portada-foto { position: relative; order: 2; }
.por-portada-foto .por-foto { aspect-ratio: 4 / 3; border: 0.6rem solid var(--por-claro); box-shadow: 7px 7px 0 var(--por-tinta); transform: rotate(1.5deg); }
.por-mural { display: block; width: 100%; height: 9rem; margin-top: -2.5rem; pointer-events: none; }

/* Foto, o el marcador que dice que falta sin fingir que ya esta */
.por-foto { position: relative; display: grid; place-items: center; overflow: hidden; background-color: var(--color-primary-200); background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-primary-600) 7%, transparent) 0 12px, transparent 12px 24px); color: var(--por-tinta); }
.por-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.por-foto span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; background: rgba(255, 255, 255, 0.92); border: 1.5px solid color-mix(in srgb, var(--color-primary-950) 35%, transparent); border-radius: 0.25rem; font-size: 0.95rem; font-weight: 700; }

/* Buscador: un formulario GET a /buscar */
.por-buscador { background: var(--por-papel); color: var(--por-texto); border: 3px solid var(--por-tinta); border-radius: 0.4rem; box-shadow: 6px 6px 0 var(--por-tinta); padding: 0.9rem; order: 1; }
.por-buscador-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.por-campo { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; min-height: 3.75rem; padding: 0.5rem 0.75rem; background: var(--por-neutro); border: 2px solid var(--por-borde); border-radius: 0.3rem; }
.por-campo:hover { border-color: var(--por-borde-fuerte); }
.por-campo:focus-within { outline: 3px solid var(--por-primario); outline-offset: 2px; }
.por-body .por-campo label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 400; color: var(--por-texto-2); }
.por-body .por-campo input { width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-weight: 700; font-size: 1.125rem; color: var(--por-texto); }
.por-body .por-campo input:focus-visible { outline: 0; }
.por-buscador .por-boton { grid-column: 1 / -1; }
.por-buscador-nota { margin-top: 0.6rem; font-size: 0.95rem; color: var(--por-texto-2); }

/* Datos clave bajo la portada */
.por-claves { background: var(--por-suelo); color: var(--por-claro-texto); }
.por-claves ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.4rem 0 1.25rem; font-weight: 700; }
.por-claves li { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Secciones */
.por-seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.por-seccion + .por-seccion { border-top: 1px solid var(--por-borde); }
/* La firma de la marca va debajo del rotulo, mas chica y derecha, como en el logo de SaaSBase Demo. */
.por-rotulo-firma { display: block; margin-top: 0.35em; font-size: 0.34em; line-height: 1; letter-spacing: 0.04em; -webkit-text-stroke-width: 0.12em; }
.por-body .por-titulo { font-family: var(--por-rotulo); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: var(--por-banda); letter-spacing: 0.005em; }
.por-entrada { max-width: 38rem; margin-top: 0.75rem; color: var(--por-texto-2); font-size: 1.1875rem; }
.por-pie-galeria { margin-top: 0.75rem; color: var(--por-texto-2); font-size: 1rem; }

.por-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 2rem; }
.por-galeria .por-foto { aspect-ratio: 1; border-radius: 0.3rem; }
.por-galeria .por-foto:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* Una tarjeta por tipo publicado */
.por-tipos { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.por-tipo { display: flex; flex-direction: column; background: var(--por-papel); border: 2px solid var(--por-borde); border-radius: 0.4rem; overflow: hidden; }
.por-tipo > .por-foto { aspect-ratio: 4 / 3; }
.por-tipo-cuerpo { display: flex; flex-direction: column; flex: 1; gap: 0.75rem; padding: 1rem 1rem 1.1rem; }
.por-body .por-tipo h3 { font-size: 1.5rem; line-height: 1.15; font-weight: 700; }
.por-tipo-texto { color: var(--por-texto-2); }
.por-datos { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--por-texto-2); font-size: 1rem; }
.por-datos li { display: inline-flex; align-items: center; gap: 0.35rem; }
.por-datos .icono { color: var(--por-primario-fuerte); }
.por-tipo-precio { padding-top: 0.85rem; border-top: 1px dashed var(--por-borde-fuerte); font-variant-numeric: tabular-nums; }
.por-tipo-precio strong { font-size: 1.5rem; line-height: 1.1; }
.por-tipo-precio p + p { margin-top: 0.15rem; color: var(--por-texto-2); font-size: 1rem; }
.por-tipo .por-boton { margin-top: auto; align-self: flex-start; }

/* Servicios */
.por-servicios { display: grid; gap: 1.5rem 2.5rem; margin-top: 2.25rem; }
.por-servicios li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.1rem 0.9rem; align-items: start; }
.por-body .por-servicios .icono { width: 2.75rem; height: 2.75rem; padding: 0.55rem; border-radius: 50%; background: var(--por-primario-suave); color: var(--por-primario-fuerte); stroke-width: 1.7; grid-row: span 2; }
.por-servicios strong { font-size: 1.1875rem; }
.por-servicios p { color: var(--por-texto-2); }

/* Restaurante: el pizarron es la otra banda de la pagina */
.por-restaurante { background: var(--por-banda); color: var(--por-claro-texto); border-top: 0 !important; }
.por-body .por-restaurante .por-titulo, .por-body .por-contacto .por-titulo { color: var(--por-claro); -webkit-text-stroke: 0.06em var(--por-tinta); paint-order: stroke fill; text-shadow: 0.04em 0.05em 0 var(--por-tinta); }
.por-restaurante .por-entrada, .por-contacto .por-entrada { color: var(--por-claro-texto); }
.por-restaurante-fotos { display: grid; gap: 0.6rem; margin-top: 2rem; }
.por-restaurante-fotos .por-foto { aspect-ratio: 4 / 3; border: 0.4rem solid var(--por-claro); box-shadow: 5px 5px 0 var(--por-tinta); }
.por-restaurante-logo { display: block; width: auto; max-width: min(100%, 10rem); height: auto; max-height: 6rem; object-fit: contain; object-position: left center; margin-bottom: 1rem; }
.por-restaurante-pie { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 2.25rem; }

/* Temporadas: la tabla de precios honesta, con la linea de los proximos doce meses */
.por-temporadas { margin-top: 2.25rem; }
.por-linea-anio { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); border: 2px solid var(--por-tinta); border-radius: 0.3rem; background: var(--por-papel); overflow: hidden; }
.por-mes { padding: 0.4rem 0 2.4rem; text-align: center; font-size: 0.85rem; color: var(--por-texto-2); border-left: 1px solid var(--por-borde); }
.por-mes:nth-of-type(1) { border-left: 0; }
.por-franjas { position: absolute; left: 0; bottom: 0.5rem; width: 100%; height: 1.5rem; max-width: none; }
.por-franja-0 { fill: var(--por-acento); background: var(--por-acento); }
.por-franja-1 { fill: var(--por-suelo); background: var(--por-suelo); }
.por-franja-2 { fill: var(--por-primario); background: var(--por-primario); }
.por-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.75rem; font-size: 1rem; color: var(--por-texto-2); }
.por-leyenda li { display: inline-flex; align-items: center; gap: 0.5rem; }
.por-muestra { display: inline-block; flex: none; width: 1.5rem; height: 0.9rem; border-radius: 0.15rem; }
.por-muestra-base { background: var(--por-papel); border: 2px solid var(--por-tinta); }
.por-envoltura-tabla { margin-top: 1.5rem; overflow-x: auto; }
.por-tabla-tarifas { width: 100%; font-variant-numeric: tabular-nums; }
.por-tabla-tarifas caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
.por-tabla-tarifas th, .por-tabla-tarifas td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--por-borde); text-align: right; vertical-align: top; }
.por-tabla-tarifas th:first-child, .por-tabla-tarifas td:first-child { text-align: left; }
.por-tabla-tarifas thead th { font-size: 0.95rem; color: var(--por-texto-2); font-weight: 700; vertical-align: bottom; }
.por-tabla-tarifas tbody th { font-weight: 700; }
.por-periodos { display: block; font-size: 0.85rem; font-weight: 400; color: var(--por-texto-2); }

/* Ubicacion */
.por-ubicacion-grid { display: grid; gap: 2rem; margin-top: 2.25rem; }
.por-mapa { margin: 0; border: 3px solid var(--por-tinta); border-radius: 0.4rem; overflow: hidden; background: #e2e8f0; box-shadow: 5px 5px 0 var(--por-tinta); }
/* En un celular el mapa entero mide unos 350 px y sus rotulos quedarian de 7 px: el lienzo no baja de 34rem y se recorre de lado dentro del marco, sin mover la pagina. */
.por-mapa-lienzo { overflow-x: auto; }
.por-mapa svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.por-mapa-desliza { display: none; }
/* 37.6rem es donde el lienzo deja de caber: 34rem mas las dos orillas de la pagina (4.5vw a ese ancho) y los bordes del marco. */
@media (max-width: 37.6rem) { .por-mapa-desliza { display: inline; } }
.por-mapa figcaption { padding: 0.55rem 0.8rem; background: var(--por-papel); border-top: 2px solid var(--por-tinta); font-size: 0.95rem; color: var(--por-texto-2); }
.por-mapa-rotulo { font: 700 14px var(--por-cuerpo); fill: var(--por-tinta); }
.por-mapa-suave { font: 400 13px var(--por-cuerpo); fill: var(--por-texto-2); }
.por-mapa-cursiva { font-style: italic; }
.por-mapa-chico { font: 700 12px var(--por-cuerpo); fill: var(--por-tinta); }
.por-mapa-naranja { fill: #8a4a12; }
.por-mapa-hotel { font: 700 16px var(--por-cuerpo); fill: var(--por-tinta); }
.por-llegar { display: grid; gap: 1.25rem; }
.por-llegar li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.1rem 0.75rem; }
.por-body .por-llegar .icono { width: 1.6rem; height: 1.6rem; color: var(--por-primario-fuerte); grid-row: span 2; margin-top: 0.1rem; }
.por-llegar p { color: var(--por-texto-2); }

/* Preguntas */
.por-preguntas { margin-top: 2rem; max-width: 50rem; border-top: 2px solid var(--por-tinta); }
.por-preguntas details { border-bottom: 1px solid var(--por-borde); }
.por-preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0.75rem 0; font-weight: 700; font-size: 1.1875rem; cursor: pointer; list-style: none; }
.por-preguntas summary::-webkit-details-marker { display: none; }
.por-preguntas summary .icono { transition: transform 0.15s; color: var(--por-primario-fuerte); }
.por-preguntas details[open] summary .icono { transform: rotate(180deg); }
.por-preguntas details p { padding: 0 0 1.1rem; max-width: 42rem; color: var(--por-texto-2); }

/* Contacto y pie */
.por-contacto { background: var(--por-suelo); color: var(--por-claro-texto); padding: clamp(3rem, 7vw, 5rem) 0 0; }
.por-contacto-acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.por-pie { margin-top: 3rem; padding: 1.25rem 0 2rem; border-top: 1px solid color-mix(in srgb, var(--color-primary-100) 25%, transparent); font-size: 1rem; }
.por-pie .por-envoltura { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.por-pie p { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.por-body .por-pie a { color: var(--por-claro-texto); }

@media (min-width: 40rem) {
  .por-buscador-campos { grid-template-columns: repeat(4, 1fr); }
  .por-galeria { grid-template-columns: repeat(3, 1fr); }
  .por-tipos { grid-template-columns: 1fr 1fr; }
  .por-servicios { grid-template-columns: 1fr 1fr; }
  .por-restaurante-fotos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
  .por-secciones { display: block; }
  .por-secciones + .por-idioma { margin-left: 0.5rem; }
  .por-body .por-boton.por-tope-wa { display: inline-flex; min-height: 2.75rem; padding: 0.3rem 0.9rem; font-size: 1rem; box-shadow: 3px 3px 0 var(--por-tinta); background: var(--por-claro); color: var(--por-tinta); }
  .por-body .por-tope-wa:hover { background: var(--por-acento); }
  .por-tope-logo img { height: 4.5rem; }
  .por-portada-grid { grid-template-columns: 1.1fr 1fr; align-items: center; column-gap: 3.5rem; row-gap: 2.25rem; padding-top: 2.25rem; }
  .por-portada-grid.por-sin-hero { grid-template-columns: 1fr; }
  .por-portada-grid .por-buscador { grid-column: 1 / -1; }
  .por-portada-foto { order: 0; }
  .por-buscador { padding: 1rem; }
  .por-buscador-campos { grid-template-columns: 1fr 1fr 9rem 9rem auto; align-items: stretch; }
  .por-buscador .por-boton { grid-column: auto; min-height: 3.75rem; }
  .por-mural { height: 15rem; margin-top: -11.5rem; }
  .por-galeria { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 13rem; }
  .por-galeria .por-foto, .por-galeria .por-foto:first-child { aspect-ratio: auto; height: 100%; }
  .por-galeria .por-foto:first-child { grid-column: span 2; grid-row: span 2; }
  .por-tipos { grid-template-columns: repeat(3, 1fr); }
  .por-servicios { grid-template-columns: repeat(3, 1fr); }
  .por-ubicacion-grid { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.por-body) { scroll-behavior: auto; }
  .por-body .por-boton:active { transform: none; }
  .por-preguntas summary .icono { transition: none; }
}

/* Fotos de habitaciones: desplazamiento nativo para swipe y teclado, sin autoplay. */
.hab-carrusel { position: relative; width: 100%; min-width: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.hab-pista { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hab-pista::-webkit-scrollbar { display: none; }
.hab-pista img, .por-foto .hab-pista img { position: static; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.hab-carrusel button { position: absolute; top: calc(50% - 22px); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: #fefbeeee; color: var(--color-primary-850); border: 1px solid currentColor; border-radius: 50%; }
.hab-anterior { left: 8px; }
.hab-siguiente { right: 8px; }
.hab-posicion { position: absolute; bottom: 8px; right: 8px; background: #fefbeeee; color: var(--color-primary-850); border-radius: 4px; padding: 2px 8px; }
.hab-pista:focus-visible, .hab-carrusel button:focus-visible { outline: 3px solid #e09b24; outline-offset: -3px; }
.bus-cuarto > .hab-carrusel { aspect-ratio: 2 / 1; }
@media (min-width: 900px) { .bus-cuarto > .hab-carrusel { aspect-ratio: auto; height: 100%; min-height: 14rem; } }
@media (prefers-reduced-motion: reduce) { .hab-pista { scroll-behavior: auto; } }

/* === Componentes del panel (ui.templ) ===
 *
 * Botones, tarjetas de cifra, tablas, dialogos, toasts, segmentado, ficha de habitacion, contador, fichas, encabezado y mosaico. Emiten las clases de siempre donde ya habia una (.btn, .data-table, .table-wrap), y solo agregan las que faltaban. Usan unicamente tokens semanticos, nunca escalones de paleta sueltos, para no cerrar la puerta a un modo oscuro. Los tamanos de toque son los de --toque-*: 44 de minimo, 48 con puntero grueso y 56 la accion principal. */
.btn-icono { width: var(--toque-min); padding: 0; }
.btn-icono .icono { font-size: 1.25rem; }
.btn-acento { background: var(--color-acento); border-color: var(--color-acento); color: var(--color-acento-contraste); }
.btn-acento:hover { background: color-mix(in srgb, var(--color-acento) 88%, var(--color-neutral-900)); border-color: color-mix(in srgb, var(--color-acento) 88%, var(--color-neutral-900)); }
.btn-grande { min-height: var(--toque-grande); padding: 0 var(--space-5); font-size: var(--font-size-lg); }

/* Tarjeta de cifra: el valor grande va primero para el ojo; la etiqueta y el pie lo explican. */
.cifra-tarjeta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); }
.cifra-etiqueta { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.cifra-valor { display: flex; align-items: baseline; gap: var(--space-1); margin: 0; }
.cifra-unidad { color: var(--color-text-muted); font-size: var(--font-size-lg); font-weight: 600; }
.cifra-pie { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.medidor { margin-top: var(--space-1); }
.medidor-barra { display: block; width: 100%; height: 6px; }
.medidor-fondo { fill: var(--color-neutral-100); }
.medidor-relleno { fill: var(--color-primary-600); }

/* Tabla con contrato: cifras a la derecha y, si se pide, apilada en el celular (la regla de apilado es la de .tabla-apilable). */
.col-ancho { display: none; }
@media (min-width: 640px) { .col-ancho { display: table-cell; } }

/* Dialogo nativo: centrado desde 640 px, hoja inferior en el celular; el cajon lateral va pegado a la derecha. */
.dialogo { width: calc(100vw - 2rem); max-width: var(--dialogo-ancho); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius-2xl); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-flotante); }
.dialogo::backdrop { background: var(--color-overlay); }
.dialogo[open] { display: flex; flex-direction: column; }
.dialogo-ancho { max-width: var(--dialogo-ancho-grande); }
.dialogo-confirmacion { max-width: 30rem; }
.dialogo-confirmacion .dialogo-cuerpo p { margin: 0; overflow-wrap: anywhere; }
.dialogo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.dialogo-titulo { margin: 0; font-size: var(--font-size-xl); }
.dialogo-subtitulo { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dialogo-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); }
.dialogo-cuerpo:has(.dialogo-pie) { padding-bottom: 0; }
.dialogo-cuerpo .dialogo-pie { position: sticky; bottom: 0; margin: var(--space-3) calc(var(--space-4) * -1) 0; background: var(--color-surface); }
.dialogo-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }
@media (max-width: 639.98px) {
  .dialogo { width: 100%; max-width: none; max-height: 94dvh; margin: auto 0 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
}
@media (min-width: 640px) {
  .dialogo-lateral { width: min(var(--cajon-ancho), 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: 0; }
}

/* Avisos flotantes: arriba a la derecha desde 640 px, banda superior en el celular. El de error no se oculta solo. */
.toasts { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toasts); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); pointer-events: none; }
@media (min-width: 640px) { .toasts { left: auto; top: var(--space-4); right: var(--space-4); width: 24rem; padding: 0; } }
.toasts-region { display: flex; flex-direction: column; gap: var(--space-2); }
.toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-xl); box-shadow: var(--shadow-flotante); pointer-events: auto; }
.toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-entra 160ms ease-out; } }
@keyframes toast-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast-icono { display: inline-flex; padding-top: 2px; font-size: 1.25rem; }
.toast-texto { flex: 1 1 auto; margin: 0; font-size: var(--font-size-base); font-weight: 600; }
.toast-cerrar { display: inline-grid; flex: none; place-items: center; width: var(--toque-min); height: var(--toque-min); margin: calc(var(--space-2) * -1) calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0; background: transparent; border: 0; border-radius: var(--radius-xl); color: inherit; cursor: pointer; }
.toast-exito { background: var(--color-success-50); border-color: var(--color-success-500); color: var(--color-success-700); }
.toast-error { background: var(--color-danger-50); border-color: var(--color-danger-500); color: var(--color-danger-700); }
.toast-aviso { background: var(--color-warning-50); border-color: var(--color-warning-500); color: var(--color-warning-700); }

/* Segmentado: filtros en una fila que se desplaza por dentro, no la pagina. */
.segmentado { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-1); overflow-x: auto; }
.segmento { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); min-height: var(--toque-min); padding: 0 var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-full); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; }
.segmento:hover { background: var(--color-bg-subtle); }
.segmento-activo, .segmento-activo:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.segmento-conteo { opacity: 0.85; }
.segmento-activo .segmento-conteo { opacity: 1; }

/* Ficha de habitacion: la ocupacion se dice con el relleno (llena en el 600 con numero blanco, hueca con borde punteado si esta libre) y la limpieza con la pastilla, que lleva su propio fondo. Nunca se mezclan en un solo color. */
.ficha-hab { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 88px; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-neutral-400); border-radius: var(--radius-2xl); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.ficha-hab-ocupada { background: var(--color-primary-600); border: 1px solid var(--color-primary-700); color: var(--color-primary-contrast); }
.ficha-hab-bloqueada { background: var(--color-neutral-200); border: 1px solid var(--color-neutral-400); color: var(--color-neutral-700); }
.ficha-hab-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ficha-hab-num { font-size: var(--font-size-xl); font-weight: 800; line-height: 1.1; }
.ficha-hab-tipo, .ficha-hab-estado { font-size: var(--font-size-xs); font-weight: 600; }
.ficha-hab-dato { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--font-size-xs); }
@media (pointer: fine) and (min-width: 1024px) {
  .ficha-hab { transition: box-shadow var(--transition-fast), transform var(--transition-fast); }
  .ficha-hab:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
}
@media (pointer: coarse) { .ficha-hab { min-height: 112px; } }
@media (prefers-reduced-motion: reduce) { .ficha-hab:hover { transform: none; } }

/* Contador: mas y menos de 48 px sobre el mismo <input type="number">. */
.contador { display: flex; flex-direction: column; gap: var(--space-1); }
.contador-etiqueta { font-size: var(--font-size-sm); font-weight: 600; }
.contador-control { display: inline-flex; align-items: center; gap: var(--space-2); }
.contador-boton { display: inline-grid; place-items: center; width: var(--toque); height: var(--toque); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-xl); color: var(--color-text); cursor: pointer; }
.contador-boton:hover { background: var(--color-bg-subtle); }
.contador-valor { width: 4rem; min-height: var(--toque); border-color: var(--color-border-control); border-radius: var(--radius-xl); text-align: center; font-size: var(--font-size-lg); font-weight: 700; }

/* Fichas: radios con aspecto de ficha. El radio nativo queda a la vista del teclado y del lector de pantalla. */
.fichas-lista { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ficha { position: relative; display: inline-flex; align-items: center; min-height: var(--toque-min); padding: 0 var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-full); font-weight: 600; cursor: pointer; }
.ficha input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ficha:has(input:checked) { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.ficha:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }

/* Encabezado de pantalla */
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.encabezado-titulos h1 { margin: 0; }
.encabezado-regresar { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--toque-min); color: var(--color-primary-600); font-weight: 600; text-decoration: none; }
.encabezado-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Mosaico de inicio */
.mosaico-grupo { margin-bottom: var(--space-5); }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.tarjeta-destino { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: 6rem; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); color: var(--color-text); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-sm); }
.tarjeta-destino .icono { font-size: 1.5rem; color: var(--color-primary-600); }
.tarjeta-destino[aria-current="page"] { border-color: var(--color-primary-600); box-shadow: inset 4px 0 0 var(--color-primary-600); font-weight: 800; }
.tarjeta-destino .burbuja { position: absolute; top: var(--space-2); right: var(--space-2); }

/* === Reservacion rapida (ReservationFormCon) ===
 *
 * Dos columnas desde 1024 px: a la izquierda los pasos (estancia, huesped, personas) y a la derecha el resumen oscuro con el costo y los botones de confirmar. En una columna debajo de eso, con el resumen y los botones al final. Los campos son los de siempre: lo que cambia es el acomodo y la tira de noches, las tarjetas de categoria, las fichas de habitacion y de origen, y los contadores. Solo tokens semanticos. */
.rr-subtitulo { margin: calc(-1 * var(--space-2)) 0 var(--space-4); color: var(--color-text-muted); font-weight: 600; }
.rr-columnas { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) {
  .rr-columnas { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
  .rr-lateral { position: sticky; top: var(--space-4); }
}
.rr-principal { display: grid; gap: var(--space-4); min-width: 0; }
.rr-tarjeta { min-width: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); }
.rr-titulo { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); font-weight: 800; letter-spacing: -0.01em; }
.rr-tarjeta .field { margin-bottom: var(--space-3); }

/* Tira de siete noches: tocar llegada y salida. El numero de abajo son las habitaciones libres esa noche. */
.rr-tira-contenedor { min-height: 7rem; }
.rr-tira-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.rr-tira-semana { font-weight: 700; }
.rr-tira { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rr-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: var(--space-1) 0; background: var(--color-surface); border: 1.5px solid var(--color-border-control); border-radius: var(--radius-xl); color: var(--color-text); font-family: inherit; cursor: pointer; }
.rr-dia:hover:not(:disabled) { background: var(--color-bg-subtle); }
.rr-dia:disabled { opacity: 0.45; cursor: not-allowed; }
.rr-dia-semana { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.rr-dia-numero { font-size: 1.125rem; font-weight: 800; line-height: 1.1; }
.rr-dia-pie { min-height: 1em; font-size: 11px; font-weight: 700; color: var(--color-primary-700); }
.rr-dia[data-libres="0"] .rr-dia-pie { color: var(--color-danger-700); }
.rr-dia.es-dentro { background: var(--color-primary-50); border-color: var(--color-primary-600); }
.rr-dia.es-borde { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }
.rr-dia.es-borde .rr-dia-semana, .rr-dia.es-borde .rr-dia-pie { color: var(--color-text-on-primary); }
.rr-dia:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
@media (pointer: coarse) { .rr-dia { min-height: 64px; } }
.rr-tira-ayuda { margin: var(--space-2) 0 var(--space-3); }
.rr-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
@media (min-width: 640px) { .rr-fechas { grid-template-columns: 1fr 1fr 8rem; } }
.rr-fechas .field { min-width: 0; }
.rr-noches { justify-content: flex-end; }
.rr-noches-etiqueta { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.rr-noches output { display: flex; align-items: center; min-height: var(--toque-min); font-weight: 800; }
@media (max-width: 639px) { .rr-noches { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-2); } }

/* Tarjetas de categoria: atajo al grupo de esa categoria en el selector de habitaciones. */
.rr-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.rr-categoria { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-3); background: var(--color-surface); border: 1.5px solid var(--color-border-control); border-radius: var(--radius-xl); color: var(--color-text); text-decoration: none; }
.rr-categoria:hover { background: var(--color-bg-subtle); }
.rr-categoria[data-marcadas] { border-color: var(--color-primary-600); box-shadow: inset 0 0 0 1px var(--color-primary-600); }
.rr-categoria-nombre { font-weight: 800; }
.rr-categoria-pie { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.rr-categoria-marcadas { color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 700; }
.rr-categoria:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
.units-picker.es-resaltado, .units-picker:target { outline: 2px solid var(--color-primary-600); outline-offset: 4px; border-radius: var(--radius-md); }

/* Habitaciones como fichas (en la reservacion rapida y tambien en editar y aprobar, que comparten el selector). 48 px con puntero fino bajo 1024, 44 desde 1024 y 52 con puntero grueso. */
.units-picker .unit-check { min-height: 48px; padding: 0 var(--space-4); border: 1.5px solid var(--color-border-control); border-radius: var(--radius-xl); background: var(--color-surface); font-weight: 800; }
@media (min-width: 1024px) { .units-picker .unit-check { min-height: 44px; } }
@media (pointer: coarse) { .units-picker .unit-check { min-height: 52px; } }
.units-picker .unit-check:has(input:checked) { background: var(--color-primary-900); border-color: var(--color-primary-900); color: var(--color-primary-contrast); }
.units-picker .unit-check:has(input:checked) .unit-actual { color: var(--color-primary-700); }
.units-picker .unit-check:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.units-picker .unit-check input[type="checkbox"] { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: inherit; }
.units-picker .unit-check { position: relative; }
.units-picker .unit-check:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }

/* Personas: contadores en rejilla; origen y "Mas datos" debajo. */
.rr-contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.reserva-rapida fieldset.fichas { margin: 0 0 var(--space-3); padding: 0; border: 0; }
.reserva-rapida fieldset.fichas legend { padding: 0; margin-bottom: var(--space-2); }
.rr-mas-datos { margin-top: var(--space-3); }
.rr-mas-datos > summary { display: flex; align-items: center; min-height: var(--toque-min); font-weight: 700; cursor: pointer; }
.rr-mas-datos[open] > summary { margin-bottom: var(--space-2); }

/* Resumen oscuro: blanco sobre el 900 da 15.36:1; lo apagado va en el 300 (10.32:1). */
.rr-resumen { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--color-primary-900); border-radius: var(--radius-2xl); color: var(--color-primary-contrast); }
.rr-resumen-etiqueta { margin: 0; color: var(--color-primary-300); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rr-resumen-titulo { margin: 0; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.rr-resumen-sub { margin: var(--space-1) 0 0; color: var(--color-primary-300); font-weight: 600; }
.rr-resumen .cotizacion { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
.rr-resumen .cotizacion-tabla { margin: 0; color: inherit; }
.rr-resumen .cotizacion-tabla th, .rr-resumen .cotizacion-tabla td { border-color: rgba(255, 255, 255, 0.18); color: inherit; padding-left: 0; padding-right: 0; }
.rr-resumen .cotizacion-tabla th[scope="row"] { color: var(--color-primary-contrast); }
.rr-resumen .cotizacion-tabla tfoot th, .rr-resumen .cotizacion-tabla tfoot td { border-top-color: rgba(255, 255, 255, 0.35); }
.rr-resumen .cotizacion-total { color: var(--color-primary-contrast); font-family: inherit; font-weight: 800; }
.rr-resumen .cotizacion-unidades { color: var(--color-primary-300); }
.rr-resumen .cotizacion-aviso { border-left-color: var(--color-acento); background: var(--color-primary-850); color: var(--color-primary-contrast); }
.rr-resumen .hint, .rr-resumen .field label { color: var(--color-primary-300); }
.rr-resumen .field label { font-weight: 700; }
.rr-resumen input, .rr-resumen select { background: var(--color-primary-850); border-color: var(--color-primary-300); border-radius: var(--radius-xl); color: var(--color-primary-contrast); font-weight: 800; text-align: right; }
.rr-resumen select { text-align: left; }
.rr-resumen input:focus-visible, .rr-resumen select:focus-visible, .rr-resumen button:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring-on-dark); outline-offset: var(--focus-ring-offset); }
.rr-resumen .grid-2 { grid-template-columns: 1fr; }
.rr-resumen .btn-secondary { background: transparent; border-color: var(--color-primary-300); color: var(--color-primary-contrast); }
.rr-resumen .btn-secondary:hover { background: var(--color-primary-850); }
.rr-resumen .field-error { color: var(--color-warning-50); }
.cotizacion-saldo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; }
.cotizacion-saldo output { font-weight: 800; }
.rr-acciones { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.rr-acciones .btn { justify-content: center; }
.rr-acciones .btn-link { min-height: var(--toque-min); }
@media (max-width: 639px) {
  .rr-tarjeta { padding: var(--space-3); }
  .rr-tira { gap: 4px; }
}
.rr-acciones .hint { margin: var(--space-1) 0 0; }

/* === Recepcion (dashboard.templ) ===
 *
 * Cabecera con fecha y saludo, la fila de cifras (TarjetaCifra), el plano de fichas con su Segmentado, el movimiento del dia en pestanas y las proximas llegadas. Desde 1440 px las proximas llegadas van en una columna de 340 px a la derecha del plano; debajo de eso quedan debajo, y debajo de 640 px las pestanas (Plano, Actividad y Llegadas) escogen que se ve. Sin JavaScript no hay pestanas y todo se ve apilado. */
.recepcion-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.recepcion-titulos h1 { margin: var(--space-1) 0 0; }
.recepcion-fecha { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-base); font-weight: 600; }
.recepcion-saludo { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-lg); font-weight: 600; }
.cifra-enlace { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--color-primary-600); font-size: var(--font-size-sm); font-weight: 600; }
.recepcion .panel { border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); }

.recepcion-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.recepcion-cuerpo .panel, .recepcion-cuerpo .plano { margin-bottom: 0; }
.recepcion-lateral { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
@media (min-width: 1440px) {
  .recepcion-cuerpo { grid-template-columns: minmax(0, 1fr) var(--columna-actividad); }
  .recepcion-plano { grid-column: 1; grid-row: 1; }
  .recepcion-lateral { grid-column: 2; grid-row: 1 / span 2; }
  .recepcion-listas { grid-column: 1; grid-row: 2; }
}

/* Las dos vistas del celular. La fila de pestanas solo existe debajo de 640 px y solo con JavaScript (recepcion.js le quita hidden). */
.recepcion-vistas { display: none; }
@media (max-width: 639.98px) {
  .recepcion-vistas:not([hidden]) { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
  .recepcion[data-vista="plano"] [data-vista-de]:not([data-vista-de="plano"]),
  .recepcion[data-vista="actividad"] [data-vista-de]:not([data-vista-de="actividad"]),
  .recepcion[data-vista="llegadas"] [data-vista-de]:not([data-vista-de="llegadas"]) { display: none; }
}
.recepcion-vista { flex: 1 1 0; min-height: var(--toque-min); padding: 0 var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-full); color: var(--color-text); font-size: var(--font-size-base); font-weight: 600; cursor: pointer; }
.recepcion-vista[aria-selected="true"] { background: var(--color-primary-600); border-color: var(--color-primary-600); color: var(--color-text-on-primary); }

/* Plano: cabecera con el resumen, filtros y la rejilla de fichas. */
.plano-head { margin-bottom: var(--space-3); }
.plano .segmentado { margin-bottom: var(--space-3); }
.plano .plano-rejilla-limpieza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 640px) { .plano .plano-rejilla-limpieza { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }
@media (min-width: 640px) and (pointer: coarse) { .plano .plano-rejilla-limpieza { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.plano .ficha-hab { height: 100%; }
.ficha-hab-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
.ficha-hab-reserva { font-size: var(--font-size-xs); font-weight: 600; }
@media (max-width: 639.98px) {
  .plano .ficha-hab { padding: var(--space-2); }
  .plano .ficha-hab-cabeza { flex-wrap: wrap; }
}

/* Movimiento del dia: pestanas con conteo. Sin JavaScript la fila esta oculta y las tres listas se ven apiladas, cada una con su titulo. */
.pestanas { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.pestana { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); min-height: var(--toque-min); padding: 0 var(--space-4); background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--color-text-muted); font-size: var(--font-size-base); font-weight: 600; cursor: pointer; }
.pestana[aria-selected="true"] { border-bottom-color: var(--color-primary-600); color: var(--color-text); }
.pestana-conteo { padding: 0 var(--space-2); background: var(--color-bg-subtle); border-radius: var(--radius-full); font-size: var(--font-size-sm); }
.con-pestanas .pestana-titulo { display: none; }
.pestana-panel + .pestana-panel { margin-top: var(--space-4); }
.con-pestanas .pestana-panel + .pestana-panel { margin-top: 0; }

/* Proximas llegadas */
.llegadas { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.llegada { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.llegada:last-child { border-bottom: 0; }
.avatar-huesped { background: var(--color-primary-50); color: var(--color-primary-700); }
.llegada-nombre { display: inline-flex; align-items: center; min-height: var(--toque-min); color: var(--color-text); font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.llegada-nombre:hover { text-decoration: underline; }
.llegada-cuando, .llegada-fechas { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.llegada-cuando { color: var(--color-text); font-weight: 600; }
.llegada-estado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }

/* La Recepcion usa todo el ancho que deja el lateral: a 1600 px caben 7 fichas por fila junto a la columna de 340 px. */
body.marco main.container:has(> .recepcion) { max-width: 1480px; }
@media (min-width: 640px) { .segmentado { flex-wrap: wrap; overflow-x: visible; } }

/* Actividad en vivo (columna derecha de la Recepcion) */
.actividad-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.actividad-cabeza .section-title { margin-bottom: 0; }
.actividad-estado { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.actividad-punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-primary-600); }
.actividad-estado-caido .actividad-punto { background: var(--color-warning-500); }
.actividad { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.evento { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.evento:last-child { border-bottom: 0; }
.evento .punto-limpieza { margin-top: 0.3rem; }
.evento-titulo, .evento-detalle { margin: 0; overflow-wrap: anywhere; }
.evento-titulo { font-size: var(--font-size-base); font-weight: 600; }
.evento-hab { font-weight: 800; }
.evento-detalle { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.evento-hora { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Cajon de habitacion (cajon.templ): secciones cortas dentro del Dialogo lateral. El pie con las acciones se queda pegado abajo al desplazar. */
.cajon { display: flex; flex-direction: column; gap: var(--space-4); }
.cajon-titulo { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.cajon-estado, .cajon-huesped, .cajon-inventario, .cajon-texto, .cajon-reporte-estado { margin: 0; }
.cajon-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-weight: 600; }
.cajon-desde, .cajon-sale { color: var(--color-text-muted); font-weight: 400; }
.cajon-sale { margin-left: var(--space-2); }
.cajon-enlace { color: var(--color-primary-600); font-weight: 700; }
.cajon-faltantes { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.cajon-reporte-estado { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cajon-dano { padding: var(--space-3); background: var(--color-limpieza-dano-fondo); border: 1px solid var(--color-limpieza-falta-borde); border-radius: var(--radius-xl); }
.cajon-fotos { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.cajon-foto img { display: block; width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--color-limpieza-foto-borde); border-radius: var(--radius-lg); }
.cajon-sin-novedades { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-limpieza-limpia-fondo); border-radius: var(--radius-full); color: var(--color-limpieza-limpia-texto); font-weight: 600; align-self: flex-start; }
.cajon-pie { position: sticky; bottom: calc(var(--space-4) * -1); margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); background: var(--color-surface); justify-content: flex-start; }
.cajon-accion { margin: 0; }
.cajon-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cajon-pie .btn, .cajon-acciones .btn { min-height: var(--toque-min); }

/* === Buscador global y campana de pendientes ===
 *
 * El buscador es un formulario con su campo; los resultados caen debajo como un panel. La campana es un <details> nativo. En el celular el buscador vive en un panel fijo bajo la barra oscura, abierto por el icono de buscar. */
.buscador { position: relative; display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); max-width: 30rem; min-height: var(--toque-min); padding: 0 var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-xl); color: var(--color-text-muted); }
/* El contenedor es el campo: 44 px, 40 con raton desde 1024 px y 48 con el dedo (el input de adentro lo llena). */
@media (min-width: 1024px) and (pointer: fine) { .buscador { min-height: var(--toque-fino); } }
@media (pointer: coarse) { .buscador { min-height: var(--toque); } }
.buscador:focus-within { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--focus-ring-offset); }
.buscador .icono { flex: none; font-size: 1.125rem; }
.buscador input[type="search"] { flex: 1 1 auto; align-self: stretch; min-width: 0; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; outline: none; color: var(--color-text); font: inherit; font-size: var(--font-size-base); }
.buscador input[type="search"]::placeholder { color: var(--color-text-muted); opacity: 1; }
.buscador-resultados { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: var(--z-lateral); max-height: min(70vh, 32rem); overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-flotante); color: var(--color-text); }
.buscador-resultados:empty { display: none; }
.resultados-grupo { padding: var(--space-2) var(--space-2) 0; }
.resultados-titulo { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
.resultados-lista { margin: 0; padding: 0; list-style: none; }
.resultado { display: flex; flex-direction: column; gap: 2px; min-height: var(--toque-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); color: var(--color-text); text-decoration: none; }
.resultado:hover { background: var(--color-bg-subtle); }
.resultado-principal { font-weight: 700; overflow-wrap: anywhere; }
.resultado-detalle { color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.resultados-vacio { margin: 0; padding: var(--space-4); color: var(--color-text-muted); }
.resultados-todas { display: flex; align-items: center; min-height: var(--toque-min); margin: var(--space-1) var(--space-2) var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-xl); color: var(--color-primary-600); font-weight: 600; }
.resultados-todas:hover { background: var(--color-bg-subtle); }

/* Pagina de resultados (sin JavaScript): lista a todo lo ancho; el campo propio solo en el celular, porque desde 640 px el de arriba la acompana. */
.buscador-pagina { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.buscador-pagina .field { flex: 1 1 auto; margin-bottom: 0; }
@media (min-width: 640px) { .buscador-pagina { display: none; } }
.resultados-pagina { max-width: 40rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); }
.resultados-pagina:empty { display: none; }

/* Buscador del celular: panel fijo bajo la barra oscura. Los resultados caen bajo el campo igual que en escritorio. */
.buscador-movil { position: fixed; top: var(--barra-alto); left: 0; right: 0; z-index: var(--z-lateral); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-flotante); }
.buscador-movil[hidden] { display: none; }
.buscador-movil .buscador { max-width: none; }
@media (min-width: 640px) { .buscador-movil { display: none; } }
@media (pointer: coarse) { .buscador input[type="search"] { font-size: 1rem; } }

/* Campana de pendientes */
.campana-panel { position: relative; flex: none; }
.campana-panel > summary { position: relative; list-style: none; cursor: pointer; }
.campana-panel > summary::-webkit-details-marker { display: none; }
.campana-numero { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 4px; background: var(--color-danger-500); border-radius: var(--radius-full); box-shadow: 0 0 0 2px var(--color-surface); color: var(--color-danger-contrast); font-size: 0.6875rem; font-weight: 700; line-height: 1; }
.campana-movil .campana-numero { box-shadow: 0 0 0 2px var(--color-primary-contrast); }
.campana-contenido { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-lateral); width: min(20rem, calc(100vw - var(--space-6))); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-flotante); color: var(--color-text); }
@media (max-width: 639.98px) { .campana-contenido { position: fixed; top: calc(var(--barra-alto) + var(--space-2)); left: var(--space-3); right: var(--space-3); width: auto; } }
.campana-titulo { margin: 0 0 var(--space-2); font-size: var(--font-size-base); }
.campana-vacio { margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.campana-lista { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.campana-renglon { display: flex; align-items: center; gap: var(--space-3); min-height: var(--toque-min); padding: 0 var(--space-2); border-radius: var(--radius-xl); color: var(--color-text); font-weight: 600; text-decoration: none; }
.campana-renglon:hover { background: var(--color-bg-subtle); }
.campana-renglon .icono { flex: none; font-size: 1.25rem; color: var(--color-primary-600); }
.campana-avisos { display: flex; align-items: center; min-height: var(--toque-min); padding: 0 var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-primary-600); font-size: var(--font-size-sm); font-weight: 600; }
.buscador input[type="search"]::-webkit-search-cancel-button { appearance: none; display: none; }

/* === Puntero grueso (PR 9 del rediseno): tabla de tamanos de la especificacion 2.3 ===
 * Va al final a proposito: varias pantallas fijan su propio min-height con una clase por delante (.cajon-pie .btn, .cobro-form input), y aqui deben quedar a 48 px con el dedo. Los 56 de .btn-grande, de la cocina y de las teclas no se tocan. Con puntero fino mandan las reglas de arriba: 44 px bajo 1024 px y 40 desde 1024.
 * Los campos van a 16 px con puntero grueso o bajo 640 px: con menos, iOS hace zoom al enfocarlos. */
@media (pointer: coarse) {
  .btn:not(.btn-grande), .cajon-pie .btn, .cajon-acciones .btn, .comanda-imprimir .btn, .bus-body .btn { min-height: var(--toque); }
  .btn-icono:not(.btn-grande) { width: var(--toque); }
  .rr-acciones .btn-link, .cuenta-enlaces .btn-link { min-height: var(--toque); }
  .filter-chip, .unit-check, .res-guest, .chip, .chips-categorias .chip, .segmento, .recepcion-vista, .cuenta-tab:not(.cocina-tab), .pestana, .armar-opcion { min-height: var(--toque); }
  .cobro-form input[type="text"], .cobro-form input[type="number"], .cobro-form select, .corte-form input, .cargo-form input, .caja-form input, .reparto-form input[type="text"], .terminal-form input[type="text"] { min-height: var(--toque); }
  .form-actions, .acciones-cabecera, .chips, .segmentado, .cuenta-acciones, .cocina-acciones, .rr-acciones, .cajon-acciones, .encabezado-acciones, .entrega-acciones, .traspaso-acciones, .cuenta-enlaces, .block-list { gap: var(--separacion); }
}
/* Los campos de PIN y de codigo (.pin-campo, .codigo-campo, .pin-entrada) llevan su propia letra grande, que ya es de mas de 16 px: esta regla, de mayor especificidad, los encogeria a 1rem. Las pestanas de cocina (.cocina-tab) conservan sus 56 px, de la misma forma. */
@media (pointer: coarse), (max-width: 639.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.pin-campo):not(.codigo-campo):not(.pin-entrada), select, textarea, .buscador input[type="search"] { font-size: 1rem; }
}

/* Restaurante tactil (PR 15): saldo, cambio y totales con las cifras grandes de la escala (.num-lg, .num-xl). Las reglas de .cifra-valor, .cuenta-saldo y .cuenta-total fijan su propio tamano y vienen despues de .num-lg y .num-xl, asi que aqui se les da mas peso para que la escala mande. "Regresar" lleva su icono a la izquierda con la separacion de un boton. */
.cifra-valor.num-lg, .cuenta-saldo strong.num-lg, .cuenta-total strong.num-lg { font-size: 1.5rem; }
.cifra-valor.num-xl, .cuenta-total strong.num-xl { font-size: 1.875rem; font-weight: 800; line-height: 1.1; }
.btn-regresar { gap: var(--space-2); }

/* Celda de texto largo dentro de una Tabla: se parte en renglones en lugar de ensanchar la tabla. */
.data-table td.celda-texto { white-space: normal; min-width: 12rem; }
.data-table td.celda-texto p { margin: var(--space-1) 0 0; }

/* === Ventas del dia (/comandas/ventas-del-dia) ===
 * Lista de trabajo de solo lectura. Un pago anulado se tacha Y lleva la palabra "Anulado": el tachado solo no basta para quien no distingue el rojo del gris. */
.ventas-totales-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.ventas-totales-lista > div { min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-neutral-50); }
.ventas-totales-lista dt { font-size: 0.875rem; color: var(--color-text-muted); }
.ventas-totales-lista dd { margin: 0; font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 479px) { .ventas-totales-lista { grid-template-columns: 1fr; } }
.ventas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.venta { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; }
.venta-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.venta-info { display: grid; gap: var(--space-1); min-width: 0; }
.venta-titulo { font-weight: 600; overflow-wrap: anywhere; }
.venta-estado { display: flex; align-items: center; gap: var(--space-2); }
.venta-total { font-weight: 700; }
.venta-cargo { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.venta-renglones, .venta-pagos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.venta-renglones li { display: flex; justify-content: space-between; gap: var(--space-3); }
.venta-renglones li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.venta-pagos { padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }
.venta-pago { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.venta-pago-forma { font-weight: 600; }
.venta-pago-anulado .venta-pago-forma, .venta-pago-anulado .venta-pago-monto, .venta-pago-anulado .venta-pago-propina { text-decoration: line-through; color: var(--color-text-muted); }
.venta-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* === Configuracion: seccion Marca === */
/* La vista previa vive en .marca-vista, cuya hoja (/configuracion/marca/vista.css) pone los tokens de marca solo ahi dentro. */
.marca-subtitulo { margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-base); }
.marca-color-fila { display: flex; align-items: center; gap: var(--space-2); }
.marca-color-fila input[type="color"] { flex: none; width: 3rem; height: 2.75rem; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.marca-color-fila input[type="text"] { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, monospace); }
.marca-vista { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.marca-vista-titulo { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.marca-vista-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-primary-900); color: var(--color-primary-contrast); }
.marca-vista-activo { padding: var(--space-1) var(--space-2); border-radius: 8px; background: var(--color-primary-800); box-shadow: inset 3px 0 0 var(--color-acento); }
.marca-vista-cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.marca-vista-acento { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--color-acento); color: var(--color-acento-contraste); font-weight: 700; }
.marca-vista-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.marca-vista-tokens li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.marca-vista-tokens code { overflow-wrap: anywhere; }
.marca-muestra { flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--color-border); border-radius: 4px; }
.marca-muestra[data-token="--color-primary-50"] { background: var(--color-primary-50); }
.marca-muestra[data-token="--color-primary-300"] { background: var(--color-primary-300); }
.marca-muestra[data-token="--color-primary-500"] { background: var(--color-primary-500); }
.marca-muestra[data-token="--color-primary-600"] { background: var(--color-primary-600); }
.marca-muestra[data-token="--color-primary-700"] { background: var(--color-primary-700); }
.marca-muestra[data-token="--color-primary-800"] { background: var(--color-primary-800); }
.marca-muestra[data-token="--color-primary-850"] { background: var(--color-primary-850); }
.marca-muestra[data-token="--color-primary-900"] { background: var(--color-primary-900); }
.marca-muestra[data-token="--color-primary-contrast"] { background: var(--color-primary-contrast); }
.marca-muestra[data-token="--color-acento"] { background: var(--color-acento); }
.marca-muestra[data-token="--color-acento-contraste"] { background: var(--color-acento-contraste); }
.marca-muestra[data-token="--color-acento-texto"] { background: var(--color-acento-texto); }
.marca-iconos ul { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.marca-iconos li { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-neutral-100); font-size: var(--font-size-sm); }
.marca-iconos img { width: auto; max-width: 12rem; height: 6rem; object-fit: contain; }