/* Base visual (documento 6, sección 2). Cada empresa redefine --primario y --secundario. */
:root {
    --primario: #F59E0B;       /* ámbar eléctrico */
    --secundario: #0F172A;     /* azul noche */
    --fondo: #F1F5F9;
    --superficie: #FFFFFF;
    --texto: #0F172A;
    --texto-suave: #475569;
    --exito: #16A34A;
    --aviso: #EA580C;
    --peligro: #DC2626;
    --info: #2563EB;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    color: var(--texto);
    background: var(--fondo);
}

.centro {
    flex: 1;
    display: grid;
    place-content: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
}

.inicio { background: var(--secundario); color: #fff; }
.inicio h1 { margin: 0; font-size: 2rem; color: var(--primario); }
.estado { color: #CBD5E1; }

/* Pie de página: presente en todas las páginas */
.pie {
    padding: .75rem 1rem;
    text-align: center;
    font-size: .8rem;
    color: var(--texto-suave);
}
.inicio .pie { color: #CBD5E1; }
.pie a { color: inherit; text-decoration: underline; }
.pie a:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ─── Pantallas de acceso, panel y avisos ───────────────────────────────── */
.acceso {
    background: var(--secundario);
    color: var(--texto);
    align-items: center;
    justify-content: center;
}
.acceso .pie { color: #CBD5E1; }

.tarjeta {
    width: min(26rem, calc(100% - 2rem));
    margin: auto;
    padding: 2rem;
    background: var(--superficie);
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.tarjeta h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.tarjeta .empresa { margin: 0 0 1rem; color: var(--texto-suave); font-weight: 600; }
.tarjeta .estado { color: var(--texto-suave); }

.tarjeta form { display: grid; gap: .5rem; margin-top: 1rem; }
.tarjeta label { font-weight: 600; margin-top: .5rem; }
.tarjeta small { color: var(--texto-suave); }
.tarjeta input {
    padding: .7rem .8rem;
    font: inherit;
    border: 1px solid #94A3B8;
    border-radius: .5rem;
}
.tarjeta input:focus-visible,
.boton-principal:focus-visible,
.boton-secundario:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }

.boton-principal,
.boton-secundario {
    display: inline-block;
    margin-top: 1rem;
    padding: .8rem 1rem;
    min-height: 2.75rem;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: .5rem;
    border: 2px solid var(--primario);
    cursor: pointer;
}
.boton-principal { background: var(--primario); color: var(--texto-primario, var(--secundario)); }
.boton-secundario { background: transparent; color: var(--texto); }

.aviso { padding: .7rem .9rem; border-radius: .5rem; margin: .75rem 0; }
.aviso ul { margin: 0; padding-left: 1.2rem; }
.aviso-info  { background: #DBEAFE; color: #1E3A8A; }
.aviso-error { background: #FEE2E2; color: #7F1D1D; }

/* Textos legales (términos y privacidad) */
.documento-pagina { background: var(--fondo); color: var(--texto); font-family: system-ui, sans-serif; margin: 0; }
.documento { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem; line-height: 1.55; }
.documento h1 { font-size: 1.7rem; margin-bottom: .25rem; }
.documento h2 { font-size: 1.1rem; margin: 1.5rem 0 .25rem; }
.documento .nota { color: var(--texto-suave); margin-top: 0; }
.documento a { color: #1D4ED8; text-decoration: underline; }
.documento .aviso { padding: .6rem .8rem; border: 1px solid #CA8A04; background: #FEF9C3; border-radius: .4rem; }