/* ALUX · estilos base compartidos. Los estilos de cada pantalla vienen en línea desde el diseño. */
/* Las fuentes van aquí mismo (copia de fonts.css) y no con @import: así el navegador no espera un archivo más
   antes de pintar la pantalla. Si cambia fonts.css, cambiar también esto (lo revisa pruebas/unit/fuentes.test.mjs). */
@font-face { font-family: 'Albert Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/AlbertSans-Variable.woff2') format('woff2'); }
/* Instrument Sans en dos subconjuntos, como el diseño: latin (el que usan los textos en español e inglés) y latin-ext. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/InstrumentSans-Variable-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/InstrumentSans-Variable.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond-Italic-Variable.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexMono-600.woff2') format('woff2'); }

:root {
  /* Tema cliente / nuevo cliente (oscuro) */
  --c-bg: #0a1b22; --c-card: #102a34; --c-card2: #123140; --c-line: #1c4150; --c-line2: #265365;
  --c-text: #ecf5f3; --c-muted: #9fbcc0; --c-gold: #d9b36c; --c-cream: #f3ead8;
  --c-green: #43cf94; --c-yellow: #f0b429; --c-red: #ef6a5f;
  /* Tema operador / back office (claro) */
  --o-bg: #F3EFE8; --o-card: #FFFDF9; --o-line: #E3DBCF; --o-text: #1D1B17; --o-muted: #56514A;
  --o-teal: #1F5F58; --o-teal-dark: #174A44; --o-ink: #1B1A17;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Accesibilidad (paso 3.13): quien pide menos movimiento en su sistema no ve animaciones ni transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; }

/* Temas por vista (fondo y color por defecto) */
body.tema-cliente { background: var(--c-bg); color: var(--c-text); font-family: 'Albert Sans', 'Helvetica Neue', Helvetica, sans-serif; }
body.tema-cliente a { color: var(--c-gold); }
body.tema-cliente a:hover { color: var(--c-cream); }
body.tema-cliente :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
body.tema-cliente input::placeholder { color: #7fa0a7; }

body.tema-operador, body.tema-backoffice { background: var(--o-bg); color: var(--o-text); font-family: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif; }
body.tema-operador a, body.tema-backoffice a { color: var(--o-teal); }
body.tema-operador a:hover, body.tema-backoffice a:hover { color: var(--o-teal-dark); }
body.tema-operador :focus-visible, body.tema-backoffice :focus-visible { outline: 2px solid var(--o-teal); outline-offset: 2px; }
body.tema-backoffice input::placeholder, body.tema-backoffice textarea::placeholder { color: #6B645A; }

/* Marco de teléfono: en escritorio la pantalla móvil se centra a 390px; en móvil ocupa todo el ancho. */
.marco-movil { width: 100%; max-width: 390px; margin: 0 auto; min-height: 100dvh; position: relative; }
@media (min-width: 480px) {
  body.tema-cliente .marco-movil { box-shadow: 0 0 0 1px #1c4150, 0 30px 80px -30px rgba(0,0,0,.8); }
  body.tema-operador .marco-movil { box-shadow: 0 0 0 1px #E3DBCF, 0 30px 80px -30px rgba(0,0,0,.25); }
  body.tema-cliente { background: #061218; }
  body.tema-operador { background: #E9E3D8; }
}
.pantalla { min-height: 100dvh; display: flex; flex-direction: column; }
.pantalla > .contenido { flex-grow: 1; }
.barra-inferior { position: sticky; bottom: 0; z-index: 5; }

/* Back office: escritorio fluido con barra lateral fija */
.pantalla-escritorio { min-height: 100dvh; display: flex; width: 100%; }
.pantalla-escritorio > aside.lateral { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
@media (max-width: 1100px) {
  .pantalla-escritorio { flex-direction: column; }
  .pantalla-escritorio > aside.lateral { position: static; height: auto; width: 100% !important; }
}
/* Back office en celular (paso 3.21): una columna, menú como barra que se desliza de lado y tablas con
   desplazamiento propio. Las plantillas traen las rejillas en línea (export del diseño), por eso se ajustan
   con selectores de atributo e !important; a partir de 761 px todo se ve igual que en computadora. */
@media (max-width: 760px) {
  .pantalla-escritorio > aside.lateral { padding: 12px 12px 8px !important; gap: 8px !important; }
  .pantalla-escritorio > aside.lateral > div:first-child { flex-direction: row !important; align-items: baseline; gap: 10px !important; padding: 0 4px !important; }
  .pantalla-escritorio > aside.lateral nav { flex-direction: row !important; overflow-x: auto; gap: 6px !important; padding-bottom: 6px; scrollbar-width: thin; }
  .pantalla-escritorio > aside.lateral nav > a, .pantalla-escritorio > aside.lateral nav > button { flex: 0 0 auto; white-space: nowrap; min-height: 40px !important; }
  .pantalla-escritorio > aside.lateral nav > span { display: none; }
  .pantalla-escritorio > main { display: flex !important; flex-direction: column !important; padding: 20px 16px 32px !important; gap: 16px !important; min-width: 0; }
  .pantalla-escritorio > main > *, .pantalla-escritorio > main > aside { width: auto !important; max-width: 100%; }
  .pantalla-escritorio main h1 { font-size: 24px !important; }
  .pantalla-escritorio main [style*="repeat(4, minmax(0, 1fr))"],
  .pantalla-escritorio main [style*="repeat(3, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pantalla-escritorio main [style*="repeat(2, minmax(0, 1fr))"] { grid-template-columns: minmax(0, 1fr) !important; }
  .pantalla-escritorio main [style*="grid-template-columns"]:not([style*="repeat("]) { grid-template-columns: minmax(0, 1fr) !important; }
  .pantalla-escritorio main [style*="grid-template-columns"][style*="2.2fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pantalla-escritorio main [style*="justify-content: space-between"] { flex-wrap: wrap; }
  .pantalla-escritorio main [role=alert][style*="display: flex"] { flex-wrap: wrap; }
  .pantalla-escritorio main [role=alert][style*="display: flex"] > p { flex: 1 1 220px; }
  .pantalla-escritorio main [style*="font-size: 30px"] { font-size: 24px !important; }
  .pantalla-escritorio main div:has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .pantalla-escritorio main table { min-width: 680px; }
  .pantalla-escritorio main select, .pantalla-escritorio main input:not([type=checkbox]):not([type=radio]) { min-width: 0 !important; max-width: 100%; }
}

/* Selector de vistas flotante (solo prototipo) */
.cambiar-vista { position: fixed; top: 2px; left: 50%; transform: translateX(-50%); z-index: 50; opacity: .9; transition: opacity .2s; }
.cambiar-vista:hover, .cambiar-vista:focus-within { opacity: 1; }
body .cambiar-vista a { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 9px; border-radius: 999px; background: #F0B429; color: #1D1B17; font: 700 10px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* Menú de la etiqueta «Ejemplo» (paso 3.2): portada y datos de prueba */
.cambiar-vista details { position: relative; }
body .cambiar-vista summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 9px; border-radius: 999px; background: #F0B429; color: #1D1B17; font: 700 10px/1 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.cambiar-vista summary::-webkit-details-marker { display: none; }
body .cambiar-vista .menu-ejemplo { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: calc(100vw - 32px); padding: 6px; border-radius: 12px; border: 1px solid #265365; background: #102a34; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
body .cambiar-vista .menu-ejemplo a { justify-content: flex-start; height: auto; min-height: 40px; padding: 0 12px; border-radius: 8px; background: transparent; color: #ecf5f3; font: 600 13.5px/1.2 'Albert Sans', 'Helvetica Neue', sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none; }
body .cambiar-vista .menu-ejemplo a:hover, body .cambiar-vista .menu-ejemplo a:focus-visible { background: #123140; }
.cambiar-vista:has(details[open]) { opacity: 1; }

/* Franja «Prototipo con datos de prueba» (pasos 3.3 y 3.18): renglón propio arriba de la pantalla, solo en modo demo.
   Reemplaza la etiqueta flotante, que en celular tapaba «‹ Inicio», «‹ Pedir», «‹ Mi día» y el logo. */
body .cambiar-vista.franja-prototipo { position: relative; top: auto; left: auto; transform: none; z-index: 60; opacity: 1; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 30px; padding: 3px 12px; box-sizing: border-box; background: #F0B429; color: #1D1B17; font: 700 11.5px/1.2 'Albert Sans', 'Helvetica Neue', sans-serif; letter-spacing: .02em; }
body .franja-prototipo summary { height: 24px; padding: 0 10px; background: #1D1B17; color: #F0B429; font: 700 11.5px/1 'Albert Sans', 'Helvetica Neue', sans-serif; letter-spacing: .02em; text-transform: none; box-shadow: none; }
body .franja-prototipo summary::after { content: ' ▾'; white-space: pre; }
body .franja-prototipo details[open] summary::after { content: ' ▴'; }
body .franja-prototipo summary:focus-visible { outline: 2px solid #1D1B17; outline-offset: 2px; }
body .franja-prototipo .menu-ejemplo { top: 28px; left: auto; right: 0; transform: none; }
@media print { .franja-prototipo { display: none !important; } }

/* Aviso «Sin conexión con el sistema» (paso 4.16): una franja arriba, en su propio renglón, que no tapa botones. */
.cerrar-sesion { position: fixed; top: 6px; right: 8px; z-index: 55; min-height: 32px; padding: 0 12px; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; background: rgba(255,255,255,.92); color: #1D1B17; font: 600 12px/1 'Instrument Sans', system-ui, sans-serif; cursor: pointer; }
.aviso-sin-conexion { position: sticky; top: 0; z-index: 60; padding: 8px 16px; background: #7a2e1e; color: #fff; font: 600 13px/1.4 'Instrument Sans', system-ui, sans-serif; text-align: center; }
.aviso-pendientes { background: #87480B; }

/* Mensajes dentro de la app (paso 8.4): globito con los no leídos en el menú y texto solo para lectores de pantalla. */
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.insignia-mensajes { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #B3261E; color: #fff; font: 700 11.5px/1 'Albert Sans', 'Instrument Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.barra-inferior a { position: relative; }
.barra-inferior .insignia-mensajes { position: absolute; top: 2px; left: calc(50% + 6px); box-shadow: 0 0 0 2px #0d222b; }
.lateral nav .insignia-mensajes { margin-left: auto; }
/* Calificación del servicio (E5-T13): cinco estrellas que son radios de verdad (teclado y lector de pantalla). */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.estrellas-calif { display: flex; flex-wrap: wrap; gap: 4px; }
.estrella-calif { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; cursor: pointer; }
.estrella-calif input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.estrella-calif:focus-within { outline: 2px solid #d9b36c; outline-offset: 1px; }


/* E5-T8: el Reporte de visita al imprimir o «Guardar como PDF» (en el prototipo «Descargar PDF» abre la ventana de
   impresión): fondo blanco, letra oscura, sin botones, ligas ni barra inferior, y cada bloque sin partirse entre hojas. */
@media print {
  [data-reporte], [data-reporte] * { background: #fff !important; color: #111 !important; box-shadow: none !important; border-color: #ccc !important; }
  [data-reporte] { padding: 0 !important; }
  [data-reporte] [data-no-imprimir], [data-reporte] button, [data-reporte] a, nav.barra-inferior, #aviso-error, #aviso-sin-conexion { display: none !important; }
  [data-reporte] section, [data-reporte] figure { break-inside: avoid; }
  .marco-movil { max-width: none !important; box-shadow: none !important; }
}