/* ============================================================
   acceso.css — Común a las páginas sin sesión (no usan includes/header.php):
   login.php, verify_2fa.php, forgot_password.php, set_password.php y
   portal_aprobacion.php. Las cuatro primeras comparten el armazón .acceso;
   cada una carga después su propio assets/css/paginas/<pagina>.css si
   necesita algo particular.
   ============================================================ */

/* Variables (set_password.php redefine algunas en su propio archivo) */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #eff6ff;
    --bg: #f8fafc;
    --text-dark: #111827;
    --text-medium: #4b5563;
    --text-light: #6b7280;
    --border-color: #e5e7eb;
    --red: #dc2626;
    --red-light: #fef2f2;
    --green: #16a34a;
    --green-light: #f0fdf4;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Página centrada sobre un gris muy claro. set_password y portal_aprobacion cargan además su archivo propio. */
body {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg);
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
}

/* ---------- Armazón de las pantallas sin sesión ----------
   Sin franja ni degradés: una tarjeta blanca de borde fino, el logo arriba a la izquierda, el título,
   el formulario y un solo botón azul. El pie va afuera de la tarjeta, chico y en gris. */
.acceso { width: 100%; max-width: 420px; }

.acceso-tarjeta {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 40px;
}

.acceso-logo { display: block; height: 32px; width: auto; max-width: 200px; object-fit: contain; object-position: left center; margin-bottom: 28px; }
/* Logo pensado para fondo oscuro: va dentro de una insignia azul, no sobre una franja */
.acceso-insignia { display: inline-block; background: #1e3a5f; border-radius: 10px; padding: 9px 14px; margin-bottom: 28px; }
.acceso-logo-oscuro { display: block; height: 26px; width: auto; max-width: 180px; object-fit: contain; }

.acceso h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
.acceso-bajada { font-size: 0.95rem; line-height: 1.55; color: var(--text-medium); margin-bottom: 24px; }
.acceso-bajada strong { color: var(--text-dark); font-weight: 600; }

.acceso-campo { margin-bottom: 18px; }
.acceso-campo label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; }
.acceso-campo input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.acceso-campo input::placeholder { color: #9ca3af; }
.acceso-campo input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.14); }

/* Contraseña con «Mostrar» a la derecha, en texto */
.acceso-clave { position: relative; }
.acceso-clave input { padding-right: 86px; }
.acceso-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 0; background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--text-medium); cursor: pointer; border-radius: 6px; }
.acceso-ver:hover { color: var(--primary); }

.acceso-boton {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 13px 20px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.acceso-boton:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.acceso-boton-secundario { background: #fff; color: var(--text-dark); border-color: #d1d5db; }
.acceso-boton-secundario:hover { background: var(--bg); border-color: #d1d5db; }
.acceso-boton:focus-visible, .acceso-ver:focus-visible, .acceso-enlace:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.acceso-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 20px; }
.acceso-enlace { padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: none; cursor: pointer; }
.acceso-enlace:hover { text-decoration: underline; }
.acceso-enlace:disabled { color: var(--text-light); cursor: default; text-decoration: none; }
.acceso-enlace-gris { color: var(--text-medium); }

.acceso-aviso { margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg); font-size: 0.875rem; line-height: 1.5; color: var(--text-medium); }
.acceso-aviso-error { background: var(--red-light); border-color: #fecaca; color: #b91c1c; }
.acceso-aviso-ok { background: var(--green-light); border-color: #bbf7d0; color: #166534; }

.acceso-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 16px; padding: 0 4px; font-size: 0.75rem; color: var(--text-light); }
.acceso-pie a { color: var(--primary); font-weight: 600; text-decoration: none; }
.acceso-pie a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .acceso-tarjeta { padding: 28px 22px; }
}