/* =============================================================================
   PANTALLA DE ACCESO — Bastanteo Lab
   =============================================================================

   Propuesta B ("Dos mitades"), elegida por Juan el 22/08/2026 sobre tres
   direcciones maquetadas: la izquierda cuenta qué hace el producto, la derecha
   deja entrar.

   POR QUÉ ESTA HOJA ES INDEPENDIENTE
   ----------------------------------
   La pantalla vieja heredaba de `styles.css`, que es la plantilla comprada
   —con sus clases `croowly-*`, su barra y su pie—. Juan pidió que no quedara
   nada que recordara a la anterior, así que esta pantalla no toma NADA de
   aquella hoja: se sirve con `_LayoutAcceso`, que no carga `styles.css` ni
   `croowly.bundle.js`.

   Solo se apoya en Bootstrap para la rejilla del modal de aviso.

   LOS COLORES SON LOS DE LA FICHA DE MARCA, sin inventar:
     #1E5AA8  azul JRV      símbolo y "Bastanteo"
     #555555  gris grafito  "Lab"
   El resto son neutros derivados, con sesgo hacia el azul para que la pantalla
   se lea como una pieza y no como dos.
============================================================================= */

:root {
    --azul: #1E5AA8;
    --azul-oscuro: #17477F;
    --azul-claro: #DCE8F7;
    --grafito: #555555;

    --tinta: #1B2733;
    --tinta-suave: #67717D;
    --linea: #D5DCE4;
    --papel: #FFFFFF;

    --radio: 4px;
    --transicion: 140ms ease;
}

/* --------------------------------------------------------------- estructura */
.acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--tinta);
    background: var(--papel);
}

/* ------------------------------------------------------------------ panel */
.acceso__panel {
    background: var(--azul);

    /*
        OJO CON ESTO, que yo mismo lo escribí mal primero.

        El logotipo blanco lleva sus tres huecos como `var(--hueco, #1E5AA8)`,
        y se carga con `<img src="…svg">`. Un SVG cargado así es un documento
        APARTE: **no ve las variables CSS de esta página**. Lo que se pinta de
        verdad es el valor de respaldo del propio fichero, `#1E5AA8`, que da la
        casualidad de ser exactamente el azul de este panel.

        O sea: funciona, pero no por esta línea. Se deja declarada porque
        documenta de qué color tiene que ser el hueco aquí, y porque el día que
        el logotipo se inserte en línea —en vez de como imagen— entonces sí
        mandará.

        Si alguien pone este logotipo sobre OTRO fondo oscuro, los huecos
        saldrán azules. Habría que insertarlo en línea o generar otra variante.
    */
    --hueco: #1E5AA8;
    color: #fff;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    overflow: hidden;
}

/* Un solo gesto decorativo, y fuera del flujo: el sello, insinuado. */
.acceso__panel::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -140px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .055);
    pointer-events: none;
}

.acceso__panel > * {
    position: relative;
    z-index: 1;
}

.acceso__logo {
    width: 200px;
    max-width: 60%;
    height: auto;
    display: block;
}

.acceso__lema {
    font-size: clamp(24px, 2.4vw, 31px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.018em;
    margin: 0;
    max-width: 17ch;
    text-wrap: balance;
}

.acceso__puntos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.acceso__puntos li {
    display: flex;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--azul-claro);
}

.acceso__puntos b {
    color: #fff;
    font-weight: 600;
}

.acceso__marca {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
}

.acceso__marca svg {
    width: 10px;
    height: 10px;
    display: block;
}

.acceso__titular {
    margin-top: auto;
    font-size: 13px;
    color: #B6CDEA;
}

.acceso__titular a {
    color: #DCE8F7;
    text-decoration: none;
    border-bottom: 1px solid rgba(220, 232, 247, .35);
    transition: border-color var(--transicion);
}

.acceso__titular a:hover,
.acceso__titular a:focus-visible {
    border-bottom-color: #DCE8F7;
}

/* ------------------------------------------------------------- formulario */
.acceso__formulario {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.acceso__caja {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.acceso__titulo {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.012em;
    margin: 0 0 3px;
}

.acceso__subtitulo {
    font-size: 14.5px;
    color: var(--tinta-suave);
    margin: 0;
}

.acceso__campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
   ETIQUETAS DE VERDAD, no solo texto de ayuda.

   La pantalla anterior únicamente tenía `placeholder`, que desaparece en
   cuanto escribes: quien vuelve a un formulario a medias no sabe qué campo
   está mirando, y un lector de pantalla no lo anuncia.
*/
.acceso__campo label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--tinta);
}

.acceso__campo input {
    width: 100%;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 11px 13px;
    font: inherit;
    font-size: 14.5px;
    color: var(--tinta);
    background: var(--papel);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.acceso__campo input::placeholder {
    color: #9AA4AF;
}

.acceso__campo input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(30, 90, 168, .15);
}

/* La contraseña, con su botón de ver dentro del propio campo. */
.acceso__clave {
    position: relative;
    display: flex;
}

.acceso__clave input {
    padding-right: 44px;
}

.acceso__ver {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--tinta-suave);
    border-radius: var(--radio);
    display: grid;
    place-items: center;
    transition: color var(--transicion);
}

.acceso__ver:hover {
    color: var(--azul);
}

.acceso__ver:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

.acceso__ver svg {
    width: 17px;
    height: 17px;
    display: block;
}

.acceso__opciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.acceso__recordar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tinta);
    cursor: pointer;
}

.acceso__recordar input {
    width: 15px;
    height: 15px;
    accent-color: var(--azul);
    cursor: pointer;
    margin: 0;
}

.acceso a.acceso__enlace {
    color: var(--azul);
    text-decoration: none;
    transition: color var(--transicion);
}

.acceso a.acceso__enlace:hover {
    color: var(--azul-oscuro);
    text-decoration: underline;
}

.acceso a.acceso__enlace:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
    border-radius: 2px;
}

.acceso__boton {
    width: 100%;
    border: 0;
    border-radius: var(--radio);
    background: var(--azul);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 12px 18px;
    cursor: pointer;
    transition: background var(--transicion);
}

.acceso__boton:hover {
    background: var(--azul-oscuro);
}

.acceso__boton:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}

.acceso__registro {
    text-align: center;
    font-size: 13.5px;
    color: var(--tinta-suave);
    margin: 2px 0 0;
}

/*
   LOS ERRORES SE VEN.

   `asp-validation-summary` pinta un `<ul>` cuando el acceso falla. En la
   pantalla anterior salía como texto rojo suelto, sin fondo ni forma, y se
   perdía entre los campos.
*/
.acceso__errores {
    border-left: 3px solid #C0392B;
    background: #FDF2F1;
    border-radius: 0 var(--radio) var(--radio) 0;
    padding: 11px 14px;
    font-size: 13.5px;
    color: #8E2A20;
}

.acceso__errores ul {
    margin: 0;
    padding-left: 17px;
}

.acceso__errores ul:empty {
    display: none;
}

.acceso__errores:has(ul:empty) {
    display: none;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 860px) {
    .acceso {
        grid-template-columns: 1fr;
        min-height: 100dvh;
    }

    .acceso__panel {
        padding: 38px 28px 34px;
        gap: 22px;
    }

    .acceso__panel::after {
        right: -150px;
        bottom: -190px;
    }

    /* En una pantalla estrecha, la lista de argumentos estorba antes de
       entrar: el logotipo y el lema ya dicen dónde estás. */
    .acceso__puntos {
        display: none;
    }

    .acceso__lema {
        font-size: 21px;
        max-width: none;
    }

    .acceso__formulario {
        padding: 34px 28px 48px;
    }

    .acceso__titular {
        margin-top: 4px;
    }
}

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