/*
 * C-008. Sistema de diseño de Vigex CRA.
 *
 * Parte de la paleta del panel Vigex (índigo, grises y colores de estado), pero
 * reescrita en una sola hoja: el modo oscuro solo cambia el valor de las
 * variables, sin una segunda hoja de correcciones.
 *
 * Nada se carga desde fuera (regla de arquitectura 8): tipografía del sistema e
 * iconos SVG propios.
 */

/* --- Tema claro (por defecto) ------------------------------------------------ */
:root {
    color-scheme: light;
    --fondo: #f3f4f6;
    --panel: #ffffff;
    --texto: #111827;
    --apagado: #6b7280;
    --borde: #e5e7eb;
    --primario: #4f46e5;
    --primario-hover: #4338ca;
    --primario-texto: #ffffff;
    --barra: #1e1b4b;
    --barra-texto: #c4b5fd;
    --barra-activo: #312e81;
    --sombra: 0 10px 25px rgba(17, 24, 39, 0.08);
    --exito-fondo: #ecfdf5;
    --exito-texto: #166534;
    --exito-borde: #bbf7d0;
    --aviso-fondo: #fffbeb;
    --aviso-texto: #92400e;
    --aviso-borde: #fde68a;
    --peligro-fondo: #fff1f2;
    --peligro-texto: #be123c;
    --peligro-borde: #fecdd3;
    --foco: #6366f1;

    --radio: 0.75rem;
    --ancho-barra: 15rem;
    --alto-cabecera: 3.75rem;
    --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --letra-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

/* --- Tema oscuro ------------------------------------------------------------- */
/* Se aplica si el sistema lo prefiere y el usuario no ha elegido el claro, o si
   el usuario lo ha elegido expresamente. Los valores se repiten en los dos
   bloques porque CSS no permite compartirlos entre una consulta y un selector. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
        --fondo: #0f172a;
        --panel: #1e293b;
        --texto: #e2e8f0;
        --apagado: #94a3b8;
        --borde: #334155;
        --primario: #818cf8;
        --primario-hover: #a5b4fc;
        --primario-texto: #0f172a;
        --barra: #0b0a24;
        --barra-texto: #c4b5fd;
        --barra-activo: #1e1b4b;
        --sombra: 0 10px 25px rgba(0, 0, 0, 0.35);
        --exito-fondo: #052e16;
        --exito-texto: #86efac;
        --exito-borde: #166534;
        --aviso-fondo: #1c1407;
        --aviso-texto: #fde68a;
        --aviso-borde: #92400e;
        --peligro-fondo: #1f0d13;
        --peligro-texto: #fda4af;
        --peligro-borde: #be123c;
        --foco: #a5b4fc;
    }
}

:root[data-tema="oscuro"] {
    color-scheme: dark;
    --fondo: #0f172a;
    --panel: #1e293b;
    --texto: #e2e8f0;
    --apagado: #94a3b8;
    --borde: #334155;
    --primario: #818cf8;
    --primario-hover: #a5b4fc;
    --primario-texto: #0f172a;
    --barra: #0b0a24;
    --barra-texto: #c4b5fd;
    --barra-activo: #1e1b4b;
    --sombra: 0 10px 25px rgba(0, 0, 0, 0.35);
    --exito-fondo: #052e16;
    --exito-texto: #86efac;
    --exito-borde: #166534;
    --aviso-fondo: #1c1407;
    --aviso-texto: #fde68a;
    --aviso-borde: #92400e;
    --peligro-fondo: #1f0d13;
    --peligro-texto: #fda4af;
    --peligro-borde: #be123c;
    --foco: #a5b4fc;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--letra);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    line-height: 1.25;
    margin: 0 0 0.75rem;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--primario);
}

a:hover {
    color: var(--primario-hover);
}

code,
pre,
textarea {
    font-family: var(--letra-mono);
}

img,
svg {
    max-width: 100%;
}

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

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

.saltar-al-contenido {
    position: absolute;
    left: 0.5rem;
    top: -3rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    background: var(--panel);
    border-radius: var(--radio);
}

.saltar-al-contenido:focus {
    top: 0.5rem;
}

.icono {
    display: inline-flex;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.icono svg {
    width: 100%;
    height: 100%;
}

/* El botón de tema muestra lo que hará al pulsarlo. tema.js fija data-tema en
   cuanto carga la página, así que basta con mirar ese atributo. */
.icono-sol,
:root[data-tema="oscuro"] .icono-luna {
    display: none;
}

:root[data-tema="oscuro"] .icono-sol {
    display: inline-flex;
}

/* --- Estructura ---------------------------------------------------------------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--alto-cabecera);
    padding: 0 1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--texto);
    font-weight: 700;
    text-decoration: none;
}

.marca img {
    width: 2rem;
    height: 2rem;
}

.cabecera__acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
}

.cabecera__usuario {
    color: var(--apagado);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.disposicion {
    display: flex;
    min-height: calc(100vh - var(--alto-cabecera));
}

.barra {
    flex: none;
    width: var(--ancho-barra);
    padding: 1rem 0.75rem;
    background: var(--barra);
    color: var(--barra-texto);
}

.barra ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.barra a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--barra-texto);
    text-decoration: none;
}

.barra a:hover,
.barra a[aria-current="page"] {
    background: var(--barra-activo);
    color: #ffffff;
}

.contenido {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

.pie {
    padding: 1rem 1.5rem;
    color: var(--apagado);
    font-size: 0.8rem;
    text-align: center;
}

/* Pantallas de entrada (acceder, doble factor, recuperar contraseña) */
.entrada {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.entrada .tarjeta {
    width: 100%;
    max-width: 28rem;
}

/* --- Componentes ------------------------------------------------------------- */
.tarjeta {
    padding: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

.tarjeta + .tarjeta {
    margin-top: 1rem;
}

/* C-020. Listas de tarjetas que llevan a otra página (organizaciones, productos) */
.lista-tarjetas {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarjeta-enlace {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    color: var(--texto);
    text-decoration: none;
}

.tarjeta-enlace:hover {
    border-color: var(--primario);
}

/* C-020. Pares «dato: valor» de una ficha */
.datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.datos dt {
    font-weight: 600;
}

.datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
    .datos {
        grid-template-columns: 1fr;
    }

    .datos dd {
        margin-bottom: 0.5rem;
    }
}

.lista-simple {
    margin: 0;
    padding-left: 1.25rem;
}

.lista-simple li + li {
    margin-top: 0.35rem;
}

/* C-022. Franja visible mientras un operador está dentro de una organización */
.franja-operador {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    color: var(--peligro-texto);
    background: var(--peligro-fondo);
    border: 1px solid var(--peligro-borde);
    border-radius: 0.5rem;
}

/* C-047. Aviso a operadores sobre el motor de vulnerabilidades */
.franja-motor {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    color: var(--aviso-texto);
    background: var(--aviso-fondo);
    border: 1px solid var(--aviso-borde);
    border-radius: 0.5rem;
    overflow-wrap: anywhere;
}

/* C-028. Filtros, paginación e identificadores largos */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.filtros p {
    margin: 0;
}

.paginacion {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.identificador {
    overflow-wrap: anywhere;
}

/* C-108. Botón pequeño dentro de una línea de texto */
.en-linea {
    display: inline;
    margin-left: 0.5rem;
}

.franja-operador form {
    margin: 0;
}

.estado-vacio {
    max-width: 36rem;
    text-align: center;
    margin: 2rem auto;
}

.estado-vacio .icono {
    width: 3rem;
    height: 3rem;
    color: var(--primario);
}

.mensajes {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.mensajes li {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--borde);
    border-radius: 0.5rem;
    background: var(--panel);
}

.mensajes .success {
    background: var(--exito-fondo);
    border-color: var(--exito-borde);
    color: var(--exito-texto);
}

.mensajes .warning {
    background: var(--aviso-fondo);
    border-color: var(--aviso-borde);
    color: var(--aviso-texto);
}

.mensajes .error {
    background: var(--peligro-fondo);
    border-color: var(--peligro-borde);
    color: var(--peligro-texto);
}

/* --- Formularios ---------------------------------------------------------------- */
/* allauth pinta sus formularios con etiquetas sencillas (p, label, input, button):
   se les da estilo directamente, sin tocar sus plantillas. */
form p {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

label {
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input:not([type]),
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font: inherit;
    color: var(--texto);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 0.5rem;
}

input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--primario);
}

form p:has(> input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
}

.helptext,
form small {
    color: var(--apagado);
    font-size: 0.85rem;
}

.errorlist {
    margin: 0;
    padding: 0.5rem 0.75rem;
    list-style: none;
    color: var(--peligro-texto);
    background: var(--peligro-fondo);
    border: 1px solid var(--peligro-borde);
    border-radius: 0.5rem;
}

button,
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--primario-texto);
    background: var(--primario);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    text-decoration: none;
}

button:hover,
.boton:hover {
    background: var(--primario-hover);
    color: var(--primario-texto);
}

.boton-discreto {
    color: var(--texto);
    background: transparent;
    border-color: var(--borde);
}

.boton-discreto:hover {
    color: var(--texto);
    background: var(--fondo);
}

/* C-107. Acciones que borran o desactivan algo (allauth las marca «danger») */
.boton-peligro {
    color: var(--peligro-texto);
    background: var(--peligro-fondo);
    border-color: var(--peligro-borde);
}

.boton-peligro:hover {
    color: var(--peligro-texto);
    background: var(--peligro-fondo);
    border-color: var(--peligro-texto);
}

.boton-icono {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0.5rem;
}

/* --- Menú ---------------------------------------------------------------------- */
/* Un único menú: en pantalla ancha es la barra lateral; en móvil se pliega bajo
   un «Menú» que se despliega al tocarlo. Es un <details>, así que funciona sin
   JavaScript; interfaz.js solo lo cierra al cargar en pantallas estrechas. */
.menu {
    flex: none;
    background: var(--barra);
}

.menu > summary {
    display: none;
}

@media (max-width: 48rem) {
    .disposicion {
        flex-direction: column;
    }

    .menu > summary {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        color: var(--barra-texto);
        cursor: pointer;
        list-style: none;
    }

    .menu > summary::-webkit-details-marker {
        display: none;
    }

    .barra {
        width: 100%;
        padding-top: 0;
    }

    .contenido {
        padding: 1rem;
    }

    .cabecera__usuario {
        display: none;
    }

    .boton-salir__texto {
        display: none;
    }
}

/* C-124. El código QR siempre en negro sobre blanco: en modo oscuro, muchas
   cámaras no lo leen sobre fondo oscuro */
.qr {
    background: #fff;
    padding: 0.75rem;
    border-radius: 0.5rem;
}