/* Las fuentes (Hanken Grotesk, JetBrains Mono y Material Symbols) se piden
   desde <link> en base.html: encadenarlas aqui con @import retrasa su
   descarga hasta que el navegador termina de parsear esta hoja. */

/* Identidad visual del panel de revisores.
 *
 * Sistema de color tipo Material 3 en familia cálida, tomado del mockup de
 * diseño. El único cambio frente a ese mockup es el color primario: se conserva
 * el naranja de marca del proyecto (#AE622C) en vez del #704627 del mockup.
 *
 * Se aplica encima de Bootstrap 5.3 redefiniendo sus variables por componente,
 * para no tener que tocar las clases de cada plantilla.
 *
 * Accesibilidad: el naranja original del user flow (#E8833A) daba 2.71:1 con
 * texto blanco, por debajo del 4.5:1 de WCAG AA. #AE622C da 4.58:1.
 */

:root {
    /* ── Marca ─────────────────────────────────────────────────────────── */
    --marca:            #AE622C;  /* primario: botones, acentos, activo     */
    --marca-oscuro:     #884C22;  /* hover y estado pulsado                 */
    --marca-claro:      #ffdcc5;  /* fondo de badges y realces              */
    --marca-tinta:      #653d1e;  /* texto sobre fondo claro de marca       */
    --marca-rgb:        174, 98, 44;

    /* ── Superficies ───────────────────────────────────────────────────── */
    --fondo:            #fff8f5;  /* lienzo de la aplicación                */
    --superficie:       #ffffff;  /* tarjetas y contenedores                */
    --superficie-baja:  #fbf2ed;  /* bloques embebidos dentro de tarjetas   */
    --superficie-var:   #e9e1dc;  /* hover de controles neutros             */

    /* ── Menú lateral ──────────────────────────────────────────────────── */
    --panel:            #ebe1d8;
    --panel-hover:      #cec5bc;
    --panel-borde:      #d5c3b8;
    --panel-texto:      #1f1b16;
    --panel-texto-var:  #4c463f;

    /* ── Texto y bordes ────────────────────────────────────────────────── */
    --texto:            #1e1b18;
    --texto-var:        #51443c;
    --texto-suave:      #51443c;
    --borde:            #d5c3b8;
    --borde-fuerte:     #83746b;

    /* ── Semánticos ────────────────────────────────────────────────────── */
    --exito:            #536f5c;
    --exito-texto:      #d2f1d9;
    --error:            #ba1a1a;
    --error-suave:      #ffdad6;

    /* ── Forma y profundidad ───────────────────────────────────────────── */
    --radio:            .5rem;
    --radio-xl:         .75rem;
    --sombra:           0 4px 20px rgba(140, 94, 60, .08);
    --sombra-alta:      0 8px 30px rgba(140, 94, 60, .12);
}

/* ── Iconos ──────────────────────────────────────────────────────────────── */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.2em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: -.22em;
    user-select: none;
}

/* Iconos rellenos: los del menú activo y los de estado. */
.icono-lleno,
.sidebar .nav-link.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

body {
    background-color: var(--fondo);
    color: var(--texto);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    color: var(--texto);
    letter-spacing: -.01em;
}

h1, h2 { font-weight: 700; }

.text-muted,
.text-secondary {
    color: var(--texto-var) !important;
}

/* Etiquetas cortas en monoespaciada, como en el diseño. */
.badge,
.btn-sm,
.form-label,
.page-link {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.btn {
    --bs-btn-border-radius: var(--radio);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--marca);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca-oscuro);
    --bs-btn-hover-border-color: var(--marca-oscuro);
    --bs-btn-active-bg: var(--marca-oscuro);
    --bs-btn-active-border-color: var(--marca-oscuro);
    --bs-btn-disabled-bg: var(--marca);
    --bs-btn-disabled-border-color: var(--marca);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--marca-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--marca-oscuro);
    --bs-btn-border-color: var(--marca);
    --bs-btn-hover-bg: var(--marca);
    --bs-btn-hover-border-color: var(--marca);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--marca-oscuro);
    --bs-btn-active-border-color: var(--marca-oscuro);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--marca);
    --bs-btn-disabled-border-color: var(--marca);
    --bs-btn-focus-shadow-rgb: var(--marca-rgb);
}

/* Aprobar: verde apagado del sistema, no el verde puro de Bootstrap. */
.btn-success {
    --bs-btn-bg: var(--exito);
    --bs-btn-border-color: var(--exito);
    --bs-btn-color: var(--exito-texto);
    --bs-btn-hover-bg: #45604e;
    --bs-btn-hover-border-color: #45604e;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #45604e;
    --bs-btn-active-border-color: #45604e;
    --bs-btn-active-color: #fff;
}

/* Rechazar y deshabilitar. */
.btn-outline-danger,
.btn-danger {
    --bs-btn-focus-shadow-rgb: 186, 26, 26;
}

.btn-outline-danger {
    --bs-btn-color: var(--error);
    --bs-btn-border-color: var(--error);
    --bs-btn-hover-bg: var(--error-suave);
    --bs-btn-hover-border-color: var(--error);
    --bs-btn-hover-color: #93000a;
    --bs-btn-active-bg: var(--error-suave);
    --bs-btn-active-border-color: var(--error);
    --bs-btn-active-color: #93000a;
}

.btn-danger {
    --bs-btn-bg: var(--error);
    --bs-btn-border-color: var(--error);
    --bs-btn-hover-bg: #93000a;
    --bs-btn-hover-border-color: #93000a;
}

/* Editar, Ver, Cancelar, Limpiar. */
.btn-outline-secondary {
    --bs-btn-color: var(--texto);
    --bs-btn-border-color: var(--borde-fuerte);
    --bs-btn-hover-bg: var(--superficie-var);
    --bs-btn-hover-border-color: var(--borde-fuerte);
    --bs-btn-hover-color: var(--texto);
    --bs-btn-active-bg: var(--superficie-var);
    --bs-btn-active-border-color: var(--borde-fuerte);
    --bs-btn-active-color: var(--texto);
}

/* ── Utilidades de color ─────────────────────────────────────────────────── */

.text-primary { color: var(--marca) !important; }
.bg-primary   { background-color: var(--marca) !important; }
.bg-light     { background-color: var(--superficie-baja) !important; }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.card {
    --bs-card-bg: var(--superficie);
    --bs-card-border-color: rgba(213, 195, 184, .5);
    --bs-card-border-radius: var(--radio-xl);
    --bs-card-inner-border-radius: var(--radio-xl);
    box-shadow: var(--sombra);
}

.card-pregunta {
    /* El diseño no lleva barra de color arriba: la profundidad la da la sombra. */
    border-top: 1px solid rgba(213, 195, 184, .5) !important;
    border-radius: var(--radio-xl);
    transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

.card-pregunta:hover {
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
}

.card-pregunta .card-footer {
    background-color: var(--fondo) !important;
    border-top: 1px solid rgba(213, 195, 184, .5);
}

.card-pregunta h3,
.card-pregunta p {
    color: var(--texto);
}

/* ── Insignias ───────────────────────────────────────────────────────────── */

.badge-marca {
    background: rgba(var(--marca-rgb), .10);
    /* El mockup usa aquí el primario, pero sobre su propio fondo al 10% da
     * 4.03:1 y el texto del badge es pequeño. La tinta de marca mantiene el
     * aspecto y sube a 9.10:1. */
    color: var(--marca-tinta);
    letter-spacing: .05em;
    font-weight: 500;
}

/* Las estrellas son el mismo glifo: cambia el relleno, no el icono. */
.estrella-llena {
    color: var(--marca);
    font-variation-settings: 'FILL' 1;
}

.estrella-vacia {
    color: var(--panel-borde);
    font-variation-settings: 'FILL' 0;
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.alert {
    --bs-alert-border-radius: var(--radio);
}

.alert-primary {
    --bs-alert-bg: var(--marca-claro);
    --bs-alert-border-color: #f5ba92;
    --bs-alert-color: var(--marca-tinta);
}

.alert-warning {
    --bs-alert-bg: #fbf2ed;
    --bs-alert-border-color: var(--panel-borde);
    --bs-alert-color: var(--texto-var);
}

/* ── Menú lateral ────────────────────────────────────────────────────────── */

.sidebar {
    background-color: var(--panel);
    color: var(--panel-texto);
    border-right: 1px solid var(--panel-borde);
    z-index: 1030;
}

.sidebar h4,
.sidebar strong {
    color: var(--panel-texto);
    font-weight: 700;
}

.sidebar hr {
    border-color: var(--panel-borde);
    opacity: 1;
}

.sidebar .nav-link {
    color: var(--panel-texto-var);
    border-radius: var(--radio);
    padding: .6rem .8rem;
    margin-bottom: .25rem;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar .nav-link:hover {
    background-color: var(--panel-hover);
    color: var(--panel-texto);
}

.sidebar .nav-link.active {
    background-color: var(--marca);
    color: #fff;
    font-weight: 600;
}

.sidebar .sidebar-pie {
    border-top: 1px solid var(--panel-borde);
}

.sidebar .sidebar-pie small {
    color: var(--panel-texto-var) !important;
}

/* ── Barra superior ──────────────────────────────────────────────────────── */

.toolbar {
    background-color: rgba(255, 248, 245, .9);
    border-bottom-color: var(--panel-borde) !important;
    backdrop-filter: blur(8px);
}

.titulo-seccion {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--texto);
}

/* Botón cuadrado de icono, como en el diseño. */
.btn-icono {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--panel-borde);
    border-radius: var(--radio);
    color: var(--texto);
    background-color: transparent;
    transition: background-color .15s ease;
}

.btn-icono:hover {
    background-color: var(--superficie-var);
    color: var(--texto);
}

.btn-icono .material-symbols-outlined {
    vertical-align: middle;
}

/* ── Formularios ─────────────────────────────────────────────────────────── */

.form-control,
.form-select {
    border-color: var(--borde);
    border-radius: var(--radio);
    background-color: var(--superficie);
    color: var(--texto);
}

.form-control:focus,
.form-select:focus {
    border-color: transparent;
    box-shadow: 0 0 0 .2rem rgba(var(--marca-rgb), .45);
}

.form-check-input:checked {
    background-color: var(--marca);
    border-color: var(--marca);
}

.form-check-input:focus {
    border-color: var(--marca);
    box-shadow: 0 0 0 .25rem rgba(var(--marca-rgb), .25);
}

.form-label {
    color: var(--texto);
    font-weight: 600;
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--texto);
    --bs-table-border-color: rgba(213, 195, 184, .5);
    --bs-table-hover-bg: var(--superficie-baja);
}

.table > thead {
    color: var(--texto-var);
}

/* ── Paginación ──────────────────────────────────────────────────────────── */

.page-link {
    color: var(--marca-oscuro);
    border-color: var(--borde);
    background-color: var(--superficie);
}

.page-link:hover {
    color: var(--marca-oscuro);
    background-color: var(--marca-claro);
    border-color: var(--borde);
}

.page-item.active .page-link {
    background-color: var(--marca);
    border-color: var(--marca);
    color: #fff;
}

.page-item.disabled .page-link {
    color: var(--texto-var);
    background-color: var(--superficie-baja);
    border-color: var(--borde);
}

/* ── Ventanas modales ────────────────────────────────────────────────────── */

.modal-content {
    background-color: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-alta);
}

.modal-header,
.modal-footer {
    border-color: rgba(213, 195, 184, .5);
}