/* ============================================================================
 * Portada de app.sastredigital.cl — los cuatro accesos
 * Destino: /var/www/sastre/portada.css  (lo sirve nginx desde `root`)
 * ============================================================================
 *
 * ★★ ESTE ARCHIVO EXISTE POR LA CSP, NO POR GUSTO (15-09-2026).
 *
 * Todo esto vivía en un `<style>` dentro de `portada.html`. El 14-09-2026 se
 * agregó `Content-Security-Policy` al bloque de nginx que sirve estas rutas, con
 * `style-src 'self'` y SIN `'unsafe-inline'` —que es justamente lo que hace que
 * la política valga algo—, y el navegador empezó a rechazar el bloque entero:
 *
 *   Applying inline style violates the following Content Security Policy
 *   directive 'style-src 'self' https://fonts.googleapis.com'. The action has
 *   been blocked.
 *
 * La página quedó con los estilos por defecto del navegador —fondo transparente,
 * enlaces azules subrayados— durante unas 24 horas, hasta que alguien la miró.
 *
 * La tentación era agregar `'unsafe-inline'` a la política. Habría arreglado
 * esta página y desarmado la protección de las CINCO apps, que es al revés de
 * lo que conviene. Un archivo aparte lo resuelve sin tocar la política: el
 * mismo origen ya está permitido.
 *
 * NO volver a meter estilos en línea acá. `tests/csp-cabeceras.test.js` lo
 * vigila, y la señal de que se rompió es silenciosa: la página carga igual,
 * sólo que fea.
 * ========================================================================= */

/* ---------------------------------------------------------------------------
 * ★ Ronda P12 — LOS COLORES SIGUEN EL TEMA ELEGIDO EN «AJUSTES DE LECTURA».
 * -------------------------------------------------------------------------
 * Las variables llevan prefijo `--p-` a propósito: accesibilidad.js escribe
 * las del tema (`--azul`, `--fondo`…) en el `style` de <html>, y una variable
 * de la portada con el mismo nombre quedaría pisada.
 *
 * En «SastreDigital» (y sin JavaScript) nada cambia: ese tema no escribe
 * variables y valen los valores de siempre. En los otros cuatro, la portada
 * toma los colores de la BARRA DE NAVEGACIÓN del tema (`--nav-fondo`,
 * `--nav-tinta`, `--nav-tinta-suave`, `--acento-nav`): es la superficie
 * oscura de las apps, ya validada en AA en los cinco temas, y la portada es
 * una página oscura de marca. El texto atenuado deja la opacidad y usa la
 * tinta suave del tema, que ya está medida sobre ese fondo.
 * ------------------------------------------------------------------------ */
:root { --p-fondo: #0D2B52; --p-tarjeta: #162E54; --p-tinta: #fff; --p-acento: #EE7202; --p-acento-tinta: #0D2B52;
        --p-agente: #05B0FF; --p-foco: #05B0FF; --p-linea: rgba(255, 255, 255, .12); --p-borde: rgba(255, 255, 255, .08);
        --p-suave: rgba(255, 255, 255, .75); }
html[data-tema]:not([data-tema='marca']) {
  --p-fondo: var(--nav-fondo); --p-tinta: var(--nav-tinta);
  --p-tarjeta: color-mix(in srgb, var(--nav-tinta) 7%, var(--nav-fondo));
  --p-acento: var(--acento-nav); --p-acento-tinta: var(--acento-nav-tinta);
  --p-agente: var(--nav-tinta-suave); --p-foco: var(--nav-tinta); --p-suave: var(--nav-tinta-suave);
  --p-linea: color-mix(in srgb, var(--nav-tinta) 18%, transparent); --p-borde: color-mix(in srgb, var(--nav-tinta) 14%, transparent);
}
/* El tamaño lo fija accesibilidad.js en <html>; todo lo de abajo va en rem para escalar con él. */
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--p-fondo);
       color: var(--p-tinta); font: 1rem/1.5 var(--fuente, Poppins, system-ui, sans-serif); }
main { width: min(92vw, 35rem); padding: 32px 0; }

/* ---------------------------------------------------------------------------
 * La marca — los mismos nombres de clase que `Cascaron.jsx` usa en las 5 apps
 * -------------------------------------------------------------------------
 * ★ El ícono va NARANJA con la letra en NAVY, y no al revés: blanco sobre
 * naranja da 2,98:1 y no llega al 4,5:1 que exige AA. Navy sobre naranja da
 * 4,74:1. Medido, no elegido de ojo — el dueño es daltónico y esta casa valida
 * el contraste de cada color que entra.
 * ------------------------------------------------------------------------ */
.marca { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; margin-bottom: 1.5rem;
         border-bottom: 1px solid var(--p-linea); flex-wrap: wrap; }
.marca-icono { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
               background: var(--p-acento); color: var(--p-acento-tinta); font-weight: 700; font-size: 1.15rem;
               display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.marca-texto { line-height: 1.1; min-width: 0; }
.marca-texto .empresa { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.marca-texto .lema { display: block; font-size: .875rem; opacity: .75; }

h1 { font-size: 1.5rem; margin: 0 0 12px; line-height: 1.25; }
p { margin: 0 0 24px; opacity: .8; font-size: .95rem; }

/* El eyebrow NO se atenúa: con `opacity: .8` el naranja cae por debajo de AA. */
.eyebrow { margin: 0 0 6px; opacity: 1; color: var(--p-acento); font-size: .875rem; font-weight: 600;
           letter-spacing: .08em; text-transform: uppercase; }
.bajada { margin: 0 0 24px; }
.elegir { margin: 0 0 12px; font-size: .9rem; }

ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px;
    border-radius: 12px; background: var(--p-tarjeta); color: var(--p-tinta); text-decoration: none;
    border: 1px solid var(--p-borde); }
a:hover { border-color: var(--p-foco); }
/* ★ P12: el foco con teclado se ve también en el contorno, no sólo en un borde de 1 px. */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--p-foco); outline-offset: 2px; border-color: var(--p-foco); }
.e { font-size: 1.4rem; width: 32px; text-align: center; flex-shrink: 0; }
strong { display: block; }
/* .9rem = 14,4px. El mínimo de la casa es 14px: no bajar de acá. */
small { display: block; opacity: .75; font-size: .9rem; }
.agente { margin-top: 2px; color: var(--p-agente); opacity: 1; font-size: .875rem; }
footer { margin-top: 28px; font-size: .9rem; opacity: .6; }

/* Con un tema elegido, el texto atenuado usa la tinta suave del tema en vez de opacidad. */
html[data-tema]:not([data-tema='marca']) :is(.marca-texto .lema, p, small, footer) { opacity: 1; color: var(--p-suave); }
html[data-tema]:not([data-tema='marca']) .eyebrow { color: var(--p-acento); }
html[data-tema]:not([data-tema='marca']) .agente { color: var(--p-agente); }

/* ---------------------------------------------------------------------------
 * «Ajustes de lectura» (Ronda P12). Los controles los arma /portada.js con los
 * mismos datos que la pantalla de acceso. Objetivos de 44 px, letra de 14 px o
 * más, foco visible.
 * ------------------------------------------------------------------------ */
button { font: inherit; color: inherit; cursor: pointer; }
.ajustes-boton { margin-left: auto; min-height: 44px; padding: 0 .9rem; border-radius: 10px; font-weight: 600; font-size: .9375rem;
                 background: transparent; color: var(--p-tinta); border: 1px solid color-mix(in srgb, var(--p-tinta) 45%, transparent); }
.ajustes-boton:hover, .ajustes-boton[aria-expanded='true'] { background: var(--p-tarjeta); }
.ajustes { background: var(--p-tarjeta); border: 1px solid var(--p-borde); border-radius: 12px; padding: 1rem; margin: 0 0 1.5rem; }
.ajustes[hidden] { display: none; }
.ajustes-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ajustes h2 { font-size: 1.15rem; margin: 0; }
.ajustes .ajustes-nota { margin: .25rem 0 1rem; }
.ajustes .cerrar, .ajustes .tamano-paso { min-height: 44px; min-width: 44px; padding: 0 .9rem; border-radius: 10px; font-weight: 600;
                                          background: transparent; border: 1px solid color-mix(in srgb, var(--p-tinta) 45%, transparent); }
.ajustes .tamano-paso:disabled { opacity: .5; cursor: default; }
.ajuste { border: 1px solid var(--p-linea); border-radius: 10px; padding: .75rem .9rem .9rem; margin: 0 0 .9rem; min-width: 0; }
.ajuste legend { font-weight: 600; padding: 0 .3rem; }
.ajuste-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.ajuste-opcion { position: relative; }
.ajuste-opcion input[type='radio'] { position: absolute; left: .85rem; top: .95rem; margin: 0; width: 1.1rem; height: 1.1rem; }
.ajuste-opcion label { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; min-height: 44px;
                       padding: .6rem .8rem .6rem 2.5rem; border: 1px solid var(--p-borde); border-radius: 10px; cursor: pointer; }
.ajuste-opcion label strong { grid-column: 2; }
.ajuste-opcion label small { grid-column: 2; opacity: 1; color: var(--p-suave); font-size: .875rem; }
.ajuste-opcion label .muestra, .ajuste-opcion label .muestra-letra { grid-row: 1 / span 2; }
.ajuste-opcion input:checked + label { border-color: var(--p-acento); background: color-mix(in srgb, var(--p-acento) 10%, var(--p-tarjeta)); }
.ajuste-opcion input:focus-visible + label { outline: 3px solid var(--p-foco); outline-offset: 2px; }
.muestra { width: 2.4rem; height: 2.4rem; border-radius: 8px; display: grid; place-items: center; }
.muestra span { padding: .1rem .3rem; border-radius: 4px; font-weight: 700; font-size: .875rem; }
.muestra-letra { font-size: 1.3rem; width: 2.4rem; text-align: center; }
.tamano-control { display: flex; align-items: center; gap: .6rem; }
.tamano-control input[type='range'] { flex: 1; min-height: 44px; min-width: 0; accent-color: var(--p-acento); }
.tamano-valor { min-width: 3.5rem; text-align: right; font-weight: 600; }
.ajustes-pie { display: flex; justify-content: flex-end; }
.ajustes .enlace { min-height: 44px; background: none; border: 0; padding: 0 .3rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }