/* ============================================================
   Pantalla de acceso al panel.
   Reutiliza los tokens de site.css; solo agrega lo propio del acceso.
   ============================================================ */

.acceso {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-content: center;
    gap: var(--e6);
    padding: var(--e8) var(--e4);
    background: var(--fondo);

    /* Trama sutil que recuerda el aparejo de un muro de bloque. */
    background-image:
        linear-gradient(rgb(1 157 76 / 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(1 157 76 / 0.045) 1px, transparent 1px);
    background-size: 78px 39px;
    background-position: center;
}

.acceso__tarjeta {
    width: 100%;
    max-width: 420px;
    align-self: center;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-grande);
    box-shadow: 0 24px 60px -32px rgb(54 52 53 / 0.35);
    padding: var(--e12) var(--e8) var(--e8);
    text-align: left;
}

/* Filo de color en el borde superior, como el logotipo. */
.acceso__tarjeta {
    border-top: 3px solid var(--verde);
}

.acceso__marca {
    display: block;
    width: max-content;
    margin: 0 auto var(--e8);
}

.acceso__marca img {
    height: 49px;
    width: auto;
    display: block;
}

.acceso__titulo {
    font-family: var(--display);
    font-size: var(--paso-1);
    line-height: 1.2;
    margin: 0 0 var(--e1);
    color: var(--texto);
}

.acceso__entrada {
    color: var(--texto-suave);
    font-size: var(--paso--1);
    margin: 0 0 var(--e8);
}

.acceso__error {
    display: none;
    background: #FDECEC;
    border: 1px solid #F3C2C2;
    border-left: 3px solid #C0392B;
    border-radius: var(--radio);
    color: #8E2A20;
    font-size: var(--paso--1);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e6);
}

.acceso__error:has(li),
.acceso__error.validation-summary-errors {
    display: block;
}

.acceso__error ul { margin: 0; padding-left: var(--e4); }

/* Campo de contraseña con el botón de ver/ocultar dentro. */
.campo__clave { position: relative; }

.campo__clave input { padding-right: 2.9rem; }

.campo__ojo {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radio);
    background: transparent;
    color: var(--gris);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.campo__ojo:hover { color: var(--verde); background: var(--verde-tenue); }

.campo__ojo[aria-pressed="true"] { color: var(--verde); }

.acceso__nota {
    margin: var(--e8) 0 0;
    padding-top: var(--e6);
    border-top: 1px solid var(--borde);
    color: var(--texto-suave);
    font-size: var(--paso--2);
    line-height: 1.5;
}

.acceso__pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--e4);
    margin: 0;
    color: var(--texto-suave);
    font-size: var(--paso--2);
}

.acceso__pie a { color: var(--verde-oscuro); text-decoration: none; }
.acceso__pie a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .acceso__tarjeta { padding: var(--e8) var(--e6) var(--e6); }
}