/* core/public/css/entrada.css
   =========================================================
   LO QUE SE VE ANTES DE ENTRAR, Y EL AVISO DE COOKIES

   Se llama como el dominio de idiomas que ya usa la casa para estas pantallas
   (`entrada`). Lleva el alta de la demo, la página del aviso legal y el propio
   aviso de cookies — que **también sale dentro del lanzador**, así que la cargan
   los dos layouts.

   El login, el registro y la verificación nacieron con cien líneas de `<style>`
   cada uno. Se han quedado así por ahora —tocarlos es E2 y hay que hacerlo
   entero—, pero **lo nuevo no repite el vicio**: las dos pantallas del acceso a
   la demo pintan desde aquí.

   Las clases van con su propio prefijo (`kabe-demo-`) a propósito. Reutilizar
   los nombres de las otras pantallas obligaría a que esta hoja ganara o perdiera
   contra sus `<style>` según el orden de carga, y eso es una manera muy fea de
   descubrir que has cambiado el login sin querer.

   Todo nombra papeles, no colores: estas pantallas se ven en el tema del
   ordenador de quien todavía no ha entrado, así que la mitad de las visitas las
   ven en oscuro. */

.kabe-demo-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 700px at 20% 20%, var(--kabe-lavado-calido), transparent 60%),
        radial-gradient(900px 600px at 80% 35%, var(--kabe-lavado-frio), transparent 55%),
        radial-gradient(1000px 600px at 50% 90%, var(--kabe-lavado-verde), transparent 60%),
        var(--kabe-fondo);
}

.kabe-demo-card {
    width: 100%;
    max-width: 30rem;
    border-radius: 18px;
    border: 1px solid var(--kabe-borde);
    background: var(--kabe-superficie);
    box-shadow: var(--kabe-sombra-alta);
    padding: 2.25rem;
    color: var(--kabe-texto);
}

.kabe-demo-card h1 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 .4rem;
    color: var(--kabe-texto);
}

.kabe-demo-lead {
    color: var(--kabe-texto-suave);
    margin-bottom: 1.4rem;
}

.kabe-demo-field {
    margin-bottom: 1rem;
}

.kabe-demo-field label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .35rem;
    color: var(--kabe-texto);
}

/* «(opcional)» se dice, no se deduce de que no lleve asterisco. */
.kabe-demo-field label span {
    font-weight: 400;
    color: var(--kabe-texto-ausente);
}

.kabe-demo-input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--kabe-borde);
    background: var(--kabe-superficie);
    color: var(--kabe-texto);
    padding: .75rem .95rem;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.kabe-demo-input::placeholder {
    color: var(--kabe-texto-ausente);
}

.kabe-demo-input:focus {
    outline: 0;
    border-color: var(--kabe-acento);
    box-shadow: 0 0 0 .2rem var(--kabe-anillo-foco);
}

/* El código son seis cifras y se leen de una en una. */
.kabe-demo-input--code {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: .5rem;
    font-weight: 700;
}

.kabe-demo-btn {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
    transition: background .2s ease;
}

.kabe-demo-btn:hover {
    background: var(--kabe-acento-hover);
}

.kabe-demo-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--kabe-acento);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.kabe-demo-foot {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--kabe-borde);
    font-size: .9rem;
    color: var(--kabe-texto-suave);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
    align-items: center;
}

.kabe-demo-foot a {
    color: var(--kabe-acento);
    font-weight: 600;
}

.kabe-demo-alert {
    border-radius: 12px;
    padding: .75rem .95rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.kabe-demo-alert--error {
    background: var(--kabe-peligro-suave);
    color: var(--kabe-peligro);
}

.kabe-demo-alert--info {
    background: var(--kabe-info-suave);
    color: var(--kabe-info);
}

.kabe-demo-chip {
    display: inline-block;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: var(--kabe-info-suave);
    color: var(--kabe-info);
    font-weight: 700;
    margin-bottom: 1.2rem;
}

.kabe-demo-nota {
    margin-top: 1rem;
    font-size: .85rem;
    color: var(--kabe-texto-ausente);
}

/* La casilla del aviso, en el alta de la demo. Va con su texto al lado y no
   debajo: una casilla suelta encima de un enlace se marca sin leerlo. */
.kabe-demo-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1.2rem 0 1.4rem;
    font-size: .9rem;
    color: var(--kabe-texto-suave);
    cursor: pointer;
}

.kabe-demo-check input {
    margin-top: .2rem;
    flex-shrink: 0;
}

.kabe-demo-check a {
    color: var(--kabe-acento);
    font-weight: 600;
}

.kabe-demo-check small {
    color: var(--kabe-texto-ausente);
}

/* =========================================================
   EL AVISO DE COOKIES
   =========================================================
   Abajo y a lo ancho, no en medio de la pantalla: no hay nada que decidir —la
   única cookie es la de la sesión—, así que tapar la página para informar sería
   cobrar un peaje por leer. */
/* **Un aviso, no una pantalla.**

   Era una banda de lado a lado, con título en negrita y dos líneas de texto:
   en la portada pesaba tanto como el propio hero y competía con el botón de la
   demo, que es lo único que queremos que se pulse ahí. Ahora es una tarjeta
   abajo a la izquierda, del ancho que necesita y no más.

   Sigue siendo imposible de ignorar —informar es la obligación— pero deja de
   discutirle el sitio a la página. */
.kabe-cookies {
    position: fixed;
    left: clamp(.75rem, 3vw, 1.5rem);
    right: auto;
    bottom: clamp(.75rem, 3vw, 1.5rem);
    z-index: 1000;
    width: min(100% - 1.5rem, 30rem);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1.1rem;
    border-radius: 1rem;
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    box-shadow: var(--kabe-sombra-alta);
    color: var(--kabe-texto);
}

.kabe-cookies__text {
    flex: 1 1 100%;
}

.kabe-cookies__text strong {
    display: block;
    margin-bottom: .15rem;
}

.kabe-cookies__text p {
    margin: 0;
    font-size: .85rem;
    color: var(--kabe-texto-suave);
}

.kabe-cookies__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* Los botones a la derecha de la tarjeta: el texto ocupa toda la fila de
       arriba y las acciones cierran abajo, que es como se lee. */
    margin-left: auto;
}

.kabe-cookies__link {
    color: var(--kabe-acento);
    font-weight: 600;
    font-size: .9rem;
}

.kabe-cookies__btn {
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
}

.kabe-cookies__btn:hover {
    background: var(--kabe-acento-hover);
}

/* La página del texto legal necesita más ancho que un formulario: un párrafo a
   30rem se lee de pena. */
.kabe-demo-card--ancha {
    max-width: 46rem;
}

.kabe-legal-body p {
    margin: 0 0 1rem;
    color: var(--kabe-texto-suave);
    line-height: 1.6;
}

.kabe-legal-body strong {
    color: var(--kabe-texto);
}

.kabe-legal-body code {
    background: var(--kabe-superficie-alt);
    color: var(--kabe-texto);
    padding: .1rem .35rem;
    border-radius: var(--kabe-radio-chico);
    font-size: .9em;
}

/* ── Lo mínimo que hacía Bootstrap sin que nadie se fijara ──────────────────

   **`box-sizing: border-box`.** Lo ponía Bootstrap, y al quitarlo un campo con
   `width: 100%` más su relleno y su borde se sale de la caja que lo contiene.
   Es de esas cosas que no se ven al escribir la hoja y se ven al abrir la
   pantalla, así que va explícito.

   Y las cuatro reglas de tipografía que también daba por hechas: sin ellas los
   márgenes de los títulos son los del navegador, que no son los de nadie. */
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; line-height: 1.25; }
p { margin: 0 0 1rem; }
label { display: inline-block; margin-bottom: .4rem; font-weight: 600; }
a { color: var(--kabe-acento); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS COMPONENTES QUE TRAÍA ADMINLTE
   ═══════════════════════════════════════════════════════════════════════════

   **Fuera AdminLTE, Bootstrap y jQuery de las pantallas de entrada.**

   Estas pantallas cargaban tres bibliotecas —unos 400 KB— para usar quince
   clases: `form-control`, `input-group`, `btn`, `alert`, `card`, `form-group` y
   poco más. Y no era solo peso: AdminLTE trae sus propios colores y su propia
   letra, así que había que ganarle con `!important` para que el login no se
   viera de otra época que la portada. Pelear contra una hoja ajena en cada
   detalle es más trabajo que escribir las quince clases.

   **Se conservan los nombres de clase a propósito.** Reescribir cinco vistas
   para cambiar `form-control` por `kabe-input` no arregla nada y rompe todo lo
   que no se pruebe. Lo que cambia es de dónde salen los estilos: de aquí, con
   los tokens de la Suite, así que el tema oscuro y el acento del panel de marca
   funcionan solos.

   Solo se define lo que estas pantallas usan de verdad. No es un framework. */

.form-group { margin-bottom: 1rem; }

.form-control {
    display: block;
    width: 100%;
    padding: .6rem .85rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    color: var(--kabe-texto);
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    border-radius: var(--kabe-radio);
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--kabe-texto-ausente); }
.form-control:focus {
    outline: none;
    border-color: var(--kabe-acento);
    box-shadow: 0 0 0 3px var(--kabe-anillo-foco);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--kabe-sombreado);
    color: var(--kabe-texto-suave);
}

/* El grupo con el icono pegado al campo. */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* **`align-self: stretch` explícito en los dos.**

   El grupo es flex y `align-items: stretch` es su valor por omisión, así que en
   teoría el icono ya crecía hasta la altura del campo. En la práctica no: el
   campo la fija con su propio relleno, y el icono se quedaba unos píxeles más
   bajo por arriba y por abajo — poco, pero lo justo para que las dos piezas
   parezcan de dos sitios distintos.
   Lo que se hereda por omisión es lo primero que rompe alguien sin querer. */
.input-group-append { display: flex; align-items: stretch; margin-left: -1px; }
.input-group > * { align-self: stretch; }
.input-group-append > .input-group-text { height: auto; }
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 .85rem;
    color: var(--kabe-texto-suave);
    background: var(--kabe-superficie-alt);
    border: 1px solid var(--kabe-borde);
    border-top-right-radius: var(--kabe-radio);
    border-bottom-right-radius: var(--kabe-radio);
}
.input-group-text button,
.input-group-text a { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.15rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--kabe-radio);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.btn:focus-visible { outline: 2px solid var(--kabe-anillo-foco); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* `btn-kabe` es el de estas pantallas y ya se usaba; ahora sale del acento, así
   que cambia con lo que se elija en «Imagen de Kabe Suite». */
.btn-kabe, .btn-primary {
    background: var(--kabe-acento);
    border-color: var(--kabe-acento);
    color: var(--kabe-acento-contraste);
}
.btn-kabe:hover, .btn-primary:hover {
    background: var(--kabe-acento-hover);
    border-color: var(--kabe-acento-hover);
    color: var(--kabe-acento-contraste);
}
.btn-outline, .btn-outline-secondary {
    background: transparent;
    border-color: var(--kabe-borde-fuerte);
    color: var(--kabe-texto);
}
.btn-outline:hover, .btn-outline-secondary:hover { background: var(--kabe-superficie-hover); }
.btn-block { width: 100%; }

.card {
    background: var(--kabe-superficie);
    border: 1px solid var(--kabe-borde);
    border-radius: calc(var(--kabe-radio) * 2);
    box-shadow: 0 1px 3px var(--kabe-sombra);
}
.card-body { padding: 1.25rem; }

/* Los avisos. Cada estado con su token: el verde y el rojo son los mismos que
   en el resto de la Suite, que es lo que hace que se entiendan sin leerlos. */
.alert {
    padding: .75rem 1rem;
    border-radius: var(--kabe-radio);
    border: 1px solid transparent;
    margin-bottom: 1rem;
}
.alert-success { background: var(--kabe-exito-suave);   border-color: var(--kabe-exito);   color: var(--kabe-texto); }
.alert-info    { background: var(--kabe-info-suave);    border-color: var(--kabe-info);    color: var(--kabe-texto); }
.alert-warning { background: var(--kabe-aviso-suave);   border-color: var(--kabe-aviso);   color: var(--kabe-texto); }
.alert-danger  { background: var(--kabe-peligro-suave); border-color: var(--kabe-peligro); color: var(--kabe-texto); }

/* La rejilla mínima que usan el registro y el login. No es Bootstrap: son las
   dos columnas que hacen falta y nada más. */
.row { display: flex; flex-wrap: wrap; margin-inline: -.5rem; }
.row > [class^="col-"] { padding-inline: .5rem; }
.col-sm-6 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 50%; max-width: 50%; } }

/* La casilla de AdminLTE («Recuérdame»). Sin su hoja, el `input` volvía a ser
   el del navegador y se descolocaba del texto. */
.icheck-primary { display: flex; align-items: center; gap: .5rem; }
.icheck-primary input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--kabe-acento); margin: 0; }
.icheck-primary label { margin: 0; cursor: pointer; }

/* El botón de cerrar un aviso. Era de Bootstrap; el comportamiento lo lleva
   ahora el layout en cuatro líneas de JavaScript propio. */
.alert { position: relative; }
.alert .close {
    position: absolute;
    top: .35rem;
    right: .5rem;
    background: none;
    border: 0;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--kabe-texto-suave);
    cursor: pointer;
    padding: .25rem .4rem;
}
.alert .close:hover { color: var(--kabe-texto); }
.alert .close:focus-visible { outline: 2px solid var(--kabe-anillo-foco); outline-offset: 2px; }

/* ── Las utilidades que también daba Bootstrap ──────────────────────────────

   **Esto es lo que se me pasó al quitarlo.** Escribí los quince componentes
   —`form-control`, `btn`, `alert`…— y me olvidé de las utilidades, que no se
   ven en el marcado como componentes pero sostienen la maquetación: `mb-3`
   entre los dos campos, `col-7` y `col-lg-5` repartiendo la fila de
   «Recuérdame» y «Entrar», `align-items-center` alineándolos.

   Sin ellas los campos se pegaban entre sí y la casilla se comía el botón —que
   es exactamente lo que se veía—. **Una clase que no existe no falla: no hace
   nada**, y por eso este tipo de regresión no la caza ninguna prueba de las
   que tenemos; solo se ve abriendo la pantalla.

   Solo las que estas pantallas usan. Contadas: son diecisiete. */

/* Espaciado. Los mismos pasos que Bootstrap para no tener que tocar el marcado. */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mr-1 { margin-right: .25rem !important; }
.ml-auto { margin-left: auto !important; }
.pl-3 { padding-left: 1rem !important; }

/* La rejilla de doce, que es la que reparte la fila del botón. */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,
.col-sm-6,.col-lg-5 { position: relative; width: 100%; padding-inline: .5rem; }
.col-1 { flex: 0 0 8.333333%;  max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%;        max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%;        max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%;        max-width: 75%; }
.col-10{ flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11{ flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12{ flex: 0 0 100%;       max-width: 100%; }
@media (min-width: 992px) { .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } }

.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.text-center { text-align: center !important; }
.text-muted { color: var(--kabe-texto-suave) !important; }
.small { font-size: .875em; }

/* ── El autocompletar del navegador ─────────────────────────────────────────

   **Chrome y Safari pintan un amarillo propio** sobre los campos que rellenan,
   y no lo hacen con `background` —que se podría pisar— sino con un color
   interno de usuario. El truco conocido: una sombra interior gruesa del color
   que queremos, que tapa el amarillo, y `-webkit-text-fill-color` para el
   texto, porque `color` tampoco le gana.

   Con AdminLTE se veía igual de mal; lo que pasa es que sobre el tema oscuro un
   campo amarillo canta mucho más. La transición larguísima es el otro truco
   habitual: retrasa el repintado del navegador lo suficiente como para que no
   llegue a verse. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--kabe-texto);
    -webkit-box-shadow: 0 0 0 1000px var(--kabe-superficie) inset;
    box-shadow: 0 0 0 1000px var(--kabe-superficie) inset;
    caret-color: var(--kabe-texto);
    transition: background-color 600000s 0s, color 600000s 0s;
}