/* Vidar.Identidad — las pantallas de acceso de la Cuenta Vidar (S76 §2.2).
   Estilo v3 en densidad cómoda (03-sistema-visual §13): controles de 48 px, cuerpo de 18 px, superficie
   blanca y contraste de texto >= 4.5:1. Es otro proyecto: NO copia redvidar.css. Los tokens viven aquí,
   en un solo archivo, con los valores de estilo-v3/sistema/variables-css.md; es el único archivo del
   proyecto con colores literales. Las fuentes (IBM Plex, SIL OFL 1.1) se sirven de /fonts/, sin CDN. */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

:root {
    --vd-superficie: #ffffff;
    --vd-superficie-2: #f4f7fa;
    --vd-borde: #d5dde6;
    --vd-borde-campo: #738499;
    --vd-texto-1: #17212c;
    --vd-texto-2: #46566a;
    --vd-texto-3: #5f6f82;
    --vd-primario: #2b5a88;
    --vd-primario-hover: #1f4568;
    --vd-sobre-primario: #ffffff;
    --vd-foco: #1a63c7;
    --vd-error: #b3261e;
    --vd-error-fondo: #fdecea;
    --vd-error-borde: #d9665e;
    --vd-info: #1f5a96;
    --vd-info-fondo: #e9f1fb;
    --vd-info-borde: #6d9bd0;
    /* S179 (AR-7): el botón de Apple sigue su guía visual (fondo negro, texto blanco). */
    --vd-apple-fondo: #000000;
    --vd-apple-texto: #ffffff;

    --vd-fuente: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --vd-fuente-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
    --vd-titulo: 600 24px/30px var(--vd-fuente);
    --vd-cuerpo: 400 18px/26px var(--vd-fuente);
    --vd-etiqueta: 500 16px/22px var(--vd-fuente);
    --vd-accion: 600 18px/24px var(--vd-fuente);

    --vd-control: 48px;
    --vd-radio: 6px;
    --vd-espacio-2: 8px;
    --vd-espacio-3: 12px;
    --vd-espacio-4: 16px;
    --vd-espacio-6: 24px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--vd-superficie);
    color: var(--vd-texto-1);
    font: var(--vd-cuerpo);
}

.vd-barra {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 var(--vd-espacio-4);
    border-bottom: 1px solid var(--vd-borde);
    background: var(--vd-superficie);
}

.vd-marca {
    font: var(--vd-titulo);
    color: var(--vd-primario);
    letter-spacing: 0.02em;
}

.vd-contenido {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--vd-espacio-6) var(--vd-espacio-4);
}

h1 {
    font: var(--vd-titulo);
    margin: 0 0 var(--vd-espacio-2);
}

.vd-ayuda {
    color: var(--vd-texto-2);
    margin: 0 0 var(--vd-espacio-6);
}

.vd-campo {
    display: flex;
    flex-direction: column;
    gap: var(--vd-espacio-2);
    margin-bottom: var(--vd-espacio-4);
}

.vd-campo label {
    font: var(--vd-etiqueta);
    color: var(--vd-texto-1);
}

.vd-campo input[type=text],
.vd-campo input[type=tel] {
    height: var(--vd-control);
    padding: 0 var(--vd-espacio-3);
    font: var(--vd-cuerpo);
    color: var(--vd-texto-1);
    background: var(--vd-superficie);
    border: 1px solid var(--vd-borde-campo);
    border-radius: var(--vd-radio);
    width: 100%;
}

.vd-campo input.vd-mono {
    font-family: var(--vd-fuente-mono);
    font-weight: 500;
    letter-spacing: 0.2em;
}

.vd-campo input:focus-visible,
.vd-campo input:focus {
    outline: 2px solid var(--vd-foco);
    outline-offset: 0;
    border-color: var(--vd-foco);
}

.vd-casilla {
    display: flex;
    align-items: center;
    gap: var(--vd-espacio-3);
    min-height: var(--vd-control);
    margin-bottom: var(--vd-espacio-4);
    font: var(--vd-cuerpo);
}

.vd-casilla input {
    width: 24px;
    height: 24px;
    accent-color: var(--vd-primario);
}

.vd-casilla input:focus-visible {
    outline: 2px solid var(--vd-foco);
    outline-offset: 2px;
}

/* S176 (AR-2): las casillas de Legal, con su título y su texto largo; la casilla queda arriba, junto al título. */
.vd-casilla-arriba {
    align-items: flex-start;
}

.vd-casilla-arriba input {
    flex: none;
    margin-top: 2px;
}

.vd-casilla-titulo {
    display: block;
    margin-bottom: var(--vd-espacio-2);
}

.vd-casilla-texto {
    display: block;
    color: var(--vd-texto-2);
}

.vd-enlaces-legales {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vd-espacio-2);
    margin: 0 0 var(--vd-espacio-6);
}

.vd-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--vd-control);
    padding: 0 var(--vd-espacio-4);
    font: var(--vd-accion);
    color: var(--vd-sobre-primario);
    background: var(--vd-primario);
    border: 1px solid var(--vd-primario);
    border-radius: var(--vd-radio);
    cursor: pointer;
    text-decoration: none;
}

.vd-boton:hover { background: var(--vd-primario-hover); }

.vd-boton:focus-visible {
    outline: 2px solid var(--vd-foco);
    outline-offset: 2px;
}

.vd-boton-secundario {
    color: var(--vd-primario);
    background: var(--vd-superficie);
    margin-top: var(--vd-espacio-3);
}

.vd-boton-secundario:hover { background: var(--vd-superficie-2); }

.vd-enlace {
    display: inline-flex;
    align-items: center;
    min-height: var(--vd-control);
    color: var(--vd-primario);
    font: var(--vd-cuerpo);
}

.vd-enlace:focus-visible {
    outline: 2px solid var(--vd-foco);
    outline-offset: 2px;
}

/* S179 (AR-3, AR-7): Google, Microsoft y Apple, debajo del teléfono. Del mismo alto que los demás controles. */
.vd-proveedores {
    display: flex;
    flex-direction: column;
    gap: var(--vd-espacio-3);
    margin-top: var(--vd-espacio-4);
}

.vd-separador {
    text-align: center;
    color: var(--vd-texto-3);
    margin: 0;
}

.vd-boton-proveedor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--vd-control);
    padding: 0 var(--vd-espacio-4);
    font: var(--vd-accion);
    color: var(--vd-texto-1);
    background: var(--vd-superficie);
    border: 1px solid var(--vd-borde-campo);
    border-radius: var(--vd-radio);
    text-decoration: none;
    cursor: pointer;
}

.vd-boton-proveedor:hover { background: var(--vd-superficie-2); }

.vd-boton-proveedor:focus-visible {
    outline: 2px solid var(--vd-foco);
    outline-offset: 2px;
}

.vd-proveedor-apple {
    color: var(--vd-apple-texto);
    background: var(--vd-apple-fondo);
    border-color: var(--vd-apple-fondo);
}

.vd-proveedor-apple:hover { background: var(--vd-apple-fondo); opacity: 0.9; }

.vd-error {
    color: var(--vd-error);
    background: var(--vd-error-fondo);
    border: 1px solid var(--vd-error-borde);
    border-radius: var(--vd-radio);
    padding: var(--vd-espacio-3) var(--vd-espacio-4);
    margin-bottom: var(--vd-espacio-4);
}

.vd-info {
    color: var(--vd-info);
    background: var(--vd-info-fondo);
    border: 1px solid var(--vd-info-borde);
    border-radius: var(--vd-radio);
    padding: var(--vd-espacio-3) var(--vd-espacio-4);
    margin-bottom: var(--vd-espacio-4);
}

.vd-aviso-texto {
    border: 1px solid var(--vd-borde);
    border-radius: var(--vd-radio);
    padding: var(--vd-espacio-4);
    margin-bottom: var(--vd-espacio-4);
    max-height: 50vh;
    overflow-y: auto;
}

.vd-tabla {
    width: 100%;
    border-collapse: collapse;
    font: 400 16px/22px var(--vd-fuente);
}

.vd-tabla th,
.vd-tabla td {
    text-align: left;
    padding: var(--vd-espacio-2);
    border-bottom: 1px solid var(--vd-borde);
    vertical-align: top;
}

.vd-tabla th {
    background: var(--vd-superficie-2);
    font-weight: 600;
}

.vd-tabla .vd-mono { font-family: var(--vd-fuente-mono); }

.vd-contenido-ancho { max-width: 960px; }