/* ============================================================================
   PANTALLA DE ACCESO
   Se carga después de panel.css y reutiliza sus variables, botones y campos;
   aquí sólo va lo propio de esta pantalla.
   ========================================================================== */

body.acceso-pag {
    margin: 0; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 34px 20px;
    font-family: var(--font-body); font-size: 16px; line-height: 1.6;
    color: var(--ink);
    background:
        radial-gradient(900px 480px at 78% -10%, #1a5a92 0%, transparent 62%),
        linear-gradient(160deg, #0d2b4b 0%, #08203a 100%);
    -webkit-font-smoothing: antialiased;
}

/* Trama sutil de líneas, como el hero del sitio */
body.acceso-pag::before {
    content: ''; position: fixed; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}

.acceso-caja { position: relative; width: 100%; max-width: 470px; }
/* El selector de puerta lleva dos tarjetas lado a lado: necesita más ancho */
.acceso-pag--elegir .acceso-caja { max-width: 720px; }

/* El logotipo va centrado: .logo es inline-flex, así que se centra el enlace */
.acceso-logo { display: flex; justify-content: center; margin-bottom: 22px; }

.acceso-panel {
    background: #fff; border-radius: 12px;
    box-shadow: 0 26px 60px rgba(4, 18, 34, .38);
    padding: 34px 34px 28px;
}
.acceso-panel h1 {
    font-family: var(--font-head); font-weight: 600;
    font-size: 1.85rem; line-height: 1.15; color: var(--ink-strong);
    margin: 0 0 6px;
}
.acceso-panel p { margin: 0 0 18px; }
.acceso-panel .mudo { color: var(--muted); font-size: .95rem; }

.acceso-tipo {
    margin: 0 0 6px !important;
    font-size: .74rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--blue-dark);
}

.acceso-panel form { margin-top: 22px; }
.acceso-panel .bt { margin-top: 6px; padding: 13px 20px; font-size: 1rem; }

.acceso-pie { margin: 16px 0 0 !important; font-size: .89rem; text-align: center; }
.acceso-pie a { color: var(--blue-dark); text-decoration: none; }
.acceso-pie a:hover { text-decoration: underline; }
.acceso-pie.chico { font-size: .82rem; color: var(--muted); }

.acceso-volver { margin: 20px 0 0; text-align: center; font-size: .9rem; }
.acceso-volver a { color: #9db8d1; text-decoration: none; }
.acceso-volver a:hover { color: #fff; }

/* --- Selector de puerta --------------------------------------------------- */
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }

.puerta {
    display: flex; flex-direction: column; gap: 6px;
    padding: 24px 22px;
    border: 1.5px solid var(--line); border-radius: 10px;
    text-decoration: none; color: var(--ink);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.puerta:hover {
    border-color: var(--blue);
    box-shadow: 0 10px 26px rgba(13, 43, 75, .12);
    transform: translateY(-2px);
    text-decoration: none;
}
.puerta-icono {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-bottom: 6px;
    border-radius: 10px; background: #eaf4fb; color: var(--blue-dark);
}
.puerta-icono svg { width: 26px; height: 26px; }
.puerta strong {
    font-family: var(--font-head); font-weight: 600; font-size: 1.16rem;
    color: var(--ink-strong);
}
.puerta-txt { font-size: .89rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 620px) {
    .acceso-panel { padding: 26px 22px 22px; }
    .puertas { grid-template-columns: 1fr; }
}