/* Variables del Login
   ------------------------------------------------------------------
   El export original (login.css de la app de Boleta Digital / OnService)
   depende de un theme global (/dist/css/style.css) que no está disponible
   en este proyecto. Este bloque define esos mismos tokens con los valores
   de marca "VIVAMOS VICENTE LÓPEZ" ya aprobados en la otra variante de
   diseño (branch nuevo-diseno-inicio), para poder reutilizar el CSS real
   de login.css/palette.css tal cual está estructurado. */
:root {
    --color-primary: #833682;
    --color-secondary: #5b2c79;
    --color-secondary-contrast: #ffffff;
    --color-surface: #ffffff;
    --color-border: #e7e0ec;
    --color-text-soft: #6b6b6b;
    --color-danger: #c0392b;

    --color-palette-1: #c6007e;
    --color-palette-2: #6e3097;
    --color-palette-3: #a4ce4e;
    --color-palette-4: #4fa662;
    --color-palette-5: #1e7145;
    --color-palette-6: #1c9ad6;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-6: 2.5rem;
    --space-9: 4rem;
    --space-height-pallete: 14px;

    --text-xs: 0.75rem;
    --text-sm: 0.9rem;
    --text-2xl: 1.5rem;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --shadow-md: 0 10px 30px rgba(20, 10, 30, 0.12);

    /* Tamanio de los iconos del login */
    --login-icon-size: 2rem;
    --login-icon-color: var(--color-primary);
    --login-icon-width: 120px;
    --login-icon-height: 120px;
}

/* El reset global (box-sizing: border-box) vive normalmente en el
   theme /dist/css/style.css que no está disponible en este export;
   sin él, el padding de .login-card/.card-option se suma por fuera
   del ancho declarado y desborda el contenedor. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Brandon Grotesque (fuente con licencia de la municipalidad) */
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Brandon Grotesque';
    src: url('fonts/Brandon-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #fff;
    font-family: 'Brandon Grotesque', 'Segoe UI', sans-serif;
}

footer {
    position: static;
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.login-page {
    min-height: calc(100svh - var(--space-height-pallete));
    display: grid;
    place-items: center;
    flex: 1;
    padding: var(--space-2) var(--space-4) var(--space-6);
}

.login-card {
    width: min(420px, 100%);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

/* Isologo real "VIVAMOS VICENTE LÓPEZ" (logo-vivamos-vl.png, provisto
   por el usuario), arriba a la derecha de toda la pantalla — igual
   que en el mockup original, no adentro de la tarjeta blanca. */
/* Fijo (no ocupa espacio en el flujo): así .login-page puede llenar
   exactamente 100svh menos la franja de pie sin que sobre ese alto
   y fuerce scroll — logo, tarjeta y franja entran en una pantalla. */
.brand-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.5rem 2rem 0 2rem;
}

.login-logo {
    display: block;
    height: 2.8rem;
    width: auto;
}

.login-card h1 {
    margin: 0;
    font-size: 2.4rem;
    text-align: center;
    color: var(--color-primary);
    font-family: 'Brandon Grotesque', 'Segoe UI', sans-serif;
    font-weight: 700;
}

.login-subtitle {
    margin: 0;
    color: var(--color-text-soft);
    text-align: center;
    font-size: 0.95rem;
}

.login-options {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

/* Envuelve cada tarjeta (la de Persona lleva además el link de
   registro debajo); reemplaza el ancho que el export ponía
   directamente en .card-option, para que ambas columnas midan lo
   mismo tenga o no tenga el texto extra. */
.option-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.option-col .card-option {
    width: 100%;
}

.card-option {
    cursor: pointer;
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-lg);
    margin-top: var(--space-2);
    position: relative;
    transition:
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
    .card-option:hover {
        transform: scale(1.05) translateY(-2px);
        box-shadow: 0 16px 34px rgba(10, 15, 30, 0.35);
        z-index: 1;
    }
}

.card-option:focus-within {
    transform: scale(1.03) translateY(-1px);
    box-shadow: 0 14px 30px rgba(10, 15, 30, 0.3);
    z-index: 1;
}

@media (hover: none) and (pointer: coarse) {
    .card-option:active {
        transform: scale(1.03) translateY(-1px);
        box-shadow: 0 14px 30px rgba(10, 15, 30, 0.3);
        z-index: 1;
    }
}

.card-option h2 {
    margin: 0;
    font-size: var(--text-2xl);
    font-family: 'Brandon Grotesque', 'Segoe UI', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card-option p {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    text-align: center;
    font-style: italic;
    color: #e6d9ee;
}

.card-option .icon-option {
    font-size: var(--login-icon-size);
    margin-bottom: 0;
    filter: brightness(0) invert(1);
    padding: var(--space-2);
    width: var(--login-icon-width);
    height: var(--login-icon-height);
}

/* Botón "Ingresar": el export no trae .btn/.btn-tertiary, son parte
   del theme global. Toda la tarjeta .card-option ya es clickeable
   (ver login.js más abajo en index.html), por eso .no-hover deja el
   botón sin interacción propia (pointer-events: none). */
.btn {
    display: inline-block;
    font-family: 'Brandon Grotesque', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-align: center;
    border-radius: 999px;
    padding: 0.5rem 1.75rem;
}

.btn-tertiary {
    background-color: var(--color-palette-1);
    color: #fff;
}

.no-hover {
    pointer-events: none;
}

/* Línea "Registrate ahora con tu DNI" (feature real del sistema,
   asociada a la tarjeta de Persona porque el registro con DNI en
   identidad digital solo aplica al flujo de Persona física). */
.register-line {
    margin: var(--space-2) 0 0 0;
    color: var(--color-text-soft);
    font-size: var(--text-sm);
    text-align: center;
}

.register-line a {
    color: var(--color-palette-1);
    font-family: 'Brandon Grotesque', 'Segoe UI', sans-serif;
    font-weight: 700;
    text-decoration: none;
}

.register-line a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    footer {
        position: static;
        margin-top: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .login-page {
        flex: 0 0 auto;
        min-height: calc(100dvh - var(--space-height-pallete));
        min-height: calc(100dvh - var(--space-height-pallete) - env(safe-area-inset-bottom));
        place-items: start center;
        align-content: start;
        padding-top: calc(var(--space-9) + env(safe-area-inset-top));
        padding-right: calc(var(--space-4) + env(safe-area-inset-right));
        padding-bottom: var(--space-6);
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
        padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    }

    .login-card {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .login-options {
        flex-direction: column;
        gap: var(--space-3);
    }

    .brand-header {
        padding: 1rem 1.25rem 0 1.25rem;
    }

    .login-logo {
        height: 2.2rem;
    }

    .login-card h1 {
        font-size: 1.7rem;
    }
}

/* Tablet / mobile horizontal */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    footer {
        position: static;
        margin-top: 0;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .login-page {
        flex: 0 0 auto;
        min-height: calc(100dvh - var(--space-height-pallete));
        min-height: calc(100dvh - var(--space-height-pallete) - env(safe-area-inset-bottom));
        place-items: start center;
        align-content: start;
        padding-top: calc(var(--space-9) + env(safe-area-inset-top));
        padding-right: calc(var(--space-4) + env(safe-area-inset-right));
        padding-bottom: var(--space-6);
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
        padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    }

    .login-card {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .login-options {
        flex-direction: column;
        gap: var(--space-3);
    }
}

@media screen and (min-width: 1024px) {
    .login-card {
        min-width: 60%;
    }

    .login-options {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
    }

    .option-col {
        width: 45%;
    }
}