/* =====================================================================
   BIORED · Sistema de diseño
   Tokens y primitivas compartidas por todo el sistema.
   Los colores salen del logo: azul institucional, naranja del núcleo
   y ámbar del arco exterior.
   ===================================================================== */

:root {
    /* --- Azules · color dominante ------------------------------- */
    --azul-950: #08192a;
    --azul-900: #0c2338;
    --azul-800: #12324e;
    --azul-700: #1b4b72;
    --azul-600: #2b6ca3;   /* Azul del logo */
    --azul-500: #3d87c4;
    --azul-300: #8fc0e4;
    --azul-100: #dcebf7;

    /* --- Acentos · núcleo y arco del logo ------------------------ */
    --naranja:       #f2921d;
    --naranja-claro: #f9b44c;
    --ambar:         #f9cb4c;

    /* --- Neutros ------------------------------------------------- */
    --tinta:    #16202b;
    --gris-700: #3d4c5c;
    --gris-500: #6b7d8f;
    --gris-400: #93a3b3;
    --gris-300: #d3dde6;
    --gris-200: #e6ecf2;
    --gris-100: #f2f6f9;
    --blanco:   #ffffff;

    /* --- Estados ------------------------------------------------- */
    --exito:   #12855b;
    --alerta:  #c07a06;
    --error:   #c8382c;
    --error-suave: #fdeceb;

    /* --- Tipografía ---------------------------------------------- */
    --fuente-display: 'Sora', system-ui, sans-serif;
    --fuente-texto:   'IBM Plex Sans', system-ui, sans-serif;
    --fuente-dato:    'IBM Plex Mono', ui-monospace, monospace;

    /* --- Radios y sombras ---------------------------------------- */
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 20px;

    --sombra-sm: 0 1px 2px rgba(12, 35, 56, .06);
    --sombra-md: 0 4px 16px rgba(12, 35, 56, .09);
    --sombra-lg: 0 24px 60px -18px rgba(8, 25, 42, .35);

    /* --- Transición ---------------------------------------------- */
    --paso: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* =====================================================================
   BASE
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--gris-100);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-display);
    font-weight: 600;
    letter-spacing: -.022em;
    margin: 0;
}

a { color: var(--azul-600); text-decoration: none; }
a:hover { color: var(--azul-700); text-decoration: underline; }

/* Dato tabular: seriales, OT, números de INVIMA */
.dato {
    font-family: var(--fuente-dato);
    font-size: .86em;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   CAMPOS DE FORMULARIO
   ===================================================================== */

.campo { margin-bottom: 18px; }

.campo__etiqueta {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris-500);
    margin-bottom: 7px;
}

.campo__control {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 15px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-sm);
    transition: border-color var(--paso), box-shadow var(--paso);
    appearance: none;
}

.campo__control::placeholder { color: var(--gris-400); }

.campo__control:focus {
    outline: none;
    border-color: var(--azul-600);
    box-shadow: 0 0 0 4px rgba(43, 108, 163, .13);
}

.campo__control:disabled {
    background: var(--gris-100);
    color: var(--gris-400);
    cursor: not-allowed;
}

/* --- Campo con error --------------------------------------------- */

.campo--error .campo__control {
    border-color: var(--error);
    background: #fffbfb;
}

.campo--error .campo__control:focus {
    box-shadow: 0 0 0 4px rgba(200, 56, 44, .12);
}

.campo--error .campo__etiqueta { color: var(--error); }

.campo__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--error);
}

.campo__error::before {
    content: '!';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--error);
    color: var(--blanco);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

/* --- Campo válido, marca discreta --------------------------------- */

.campo--valido .campo__control {
    border-color: #9dd3b8;
}

/* Campo con botón interno, como mostrar contraseña */
.campo__envoltura { position: relative; }
.campo__envoltura .campo__control { padding-right: 52px; }

.campo__accion {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--gris-500);
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: color var(--paso), background var(--paso);
}

.campo__accion:hover { color: var(--azul-600); background: var(--gris-100); }
.campo__accion:focus-visible { outline: 2px solid var(--azul-600); outline-offset: 1px; }

/* =====================================================================
   BOTONES
   ===================================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 22px;
    font-family: var(--fuente-texto);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    border: 0;
    border-radius: var(--radio-sm);
    cursor: pointer;
    transition: transform var(--paso), box-shadow var(--paso), background var(--paso);
}

.boton--principal {
    color: var(--blanco);
    background: linear-gradient(135deg, var(--azul-600), var(--azul-700));
    box-shadow: 0 6px 18px -6px rgba(27, 75, 114, .55);
}

.boton--principal:hover {
    background: linear-gradient(135deg, var(--azul-500), var(--azul-600));
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(27, 75, 114, .6);
}

.boton--principal:active { transform: translateY(0); }

.boton:focus-visible { outline: 3px solid var(--azul-300); outline-offset: 2px; }

.boton:disabled { opacity: .6; cursor: wait; transform: none; }

/* Girador de carga */
.girador {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: var(--blanco);
    border-radius: 50%;
    animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* =====================================================================
   AVISOS
   ===================================================================== */

.aviso {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: var(--radio-sm);
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 20px;
}

.aviso--error {
    color: #8f231a;
    background: var(--error-suave);
    border-left: 3px solid var(--error);
}

.aviso svg { flex-shrink: 0; margin-top: 1px; }

/* =====================================================================
   CRÉDITOS DE DESARROLLO
   Presentes en el pie de cada pantalla y de cada PDF.
   ===================================================================== */

.creditos {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--fuente-dato);
    font-size: 10.5px;
    letter-spacing: .045em;
    color: var(--gris-400);
    text-decoration: none;
    transition: color var(--paso);
}

.creditos:hover { color: var(--azul-600); text-decoration: none; }

.creditos__tel {
    padding-left: 8px;
    border-left: 1px solid var(--gris-300);
    font-variant-numeric: tabular-nums;
}

/* Sobre fondo oscuro */
.creditos--claro { color: rgba(143, 192, 228, .45); }
.creditos--claro:hover { color: var(--ambar); }
.creditos--claro .creditos__tel { border-left-color: rgba(143, 192, 228, .25); }

/* =====================================================================
   ACCESIBILIDAD
   ===================================================================== */

.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}