/* Modo oscuro de /certificados
 *
 * La página trae sus colores incrustados en un <style> del <head>. Es un
 * diseño en ESCALA DE GRISES: el acento es #000000 (34 usos) sobre
 * superficies #ffffff, con #dc3545 reservado al icono de PDF. Aquí solo
 * se invierten esas superficies; no se introduce ningún color nuevo.
 *
 * Correspondencia con el tema claro:
 *   #ffffff  superficie   →  #171717
 *   #f8f9fa  hundido      →  #1e1e1e
 *   #e5e5e5  borde        →  #2e2e2e
 *   #000000  acento       →  #e6e6e6   (y el texto encima, #0e0e0e)
 *   #4a5568  texto suave  →  #9a9a9a
 *   #dc3545  PDF          →  se mantiene, solo sube el brillo del fondo
 */

body.active_dark {
    --cert-superficie: #171717;
    --cert-elevada: #1e1e1e;
    --cert-hundido: #141414;
    --cert-borde: #2e2e2e;
    --cert-borde-fuerte: #454545;
    --cert-texto: #e6e6e6;
    --cert-texto-apagado: #9a9a9a;
    --cert-texto-tenue: #6f6f6f;
    /* El acento del tema claro es negro; su equivalente oscuro es claro. */
    --cert-acento: #e6e6e6;
    --cert-acento-hover: #ffffff;
    --cert-sobre-acento: #0e0e0e;
}

/* --- Barra superior ---------------------------------------------------- */

body.active_dark .titles {
    color: var(--cert-texto);
}

/* El botón "volver" es un neo-brutalista con relleno blanco y sombra
   sólida negra: en oscuro se invierten los dos. */
body.active_dark .volver {
    background: var(--cert-superficie);
    color: var(--cert-texto);
    border-color: var(--cert-borde-fuerte);
    box-shadow: 6px 6px 0px var(--cert-borde-fuerte);
}

body.active_dark .volver:hover {
    background: var(--cert-elevada);
    box-shadow: 2px 2px 0px var(--cert-borde-fuerte);
}

body.active_dark .volver:active {
    box-shadow: 0px 0px 0px var(--cert-borde-fuerte);
}

body.active_dark .volver::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
}

body.active_dark .intro-section p {
    color: var(--cert-texto-apagado) !important;
}

/* --- Tarjeta de certificado -------------------------------------------- */

body.active_dark .card {
    background: var(--cert-superficie);
    border-color: var(--cert-borde);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* En claro la franja superior va de #000000 a #333333; aquí, de claro a gris. */
body.active_dark .card::before {
    background: linear-gradient(90deg, var(--cert-acento) 0%, #8a8a8a 100%);
}

body.active_dark .card:hover {
    border-color: var(--cert-acento);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.45);
}

body.active_dark .card h3,
body.active_dark .card-title {
    color: var(--cert-texto);
}

body.active_dark .institution-name,
body.active_dark .card-content,
body.active_dark .info-row {
    color: var(--cert-texto-apagado);
}

body.active_dark .certificate-preview {
    background: var(--cert-elevada);
    border-bottom-color: var(--cert-borde);
}

body.active_dark .certificate-preview:hover {
    background: #242424;
}

body.active_dark .pdf-preview {
    background: linear-gradient(135deg, var(--cert-elevada) 0%, var(--cert-hundido) 100%);
}

body.active_dark .file-format {
    background: rgba(220, 53, 69, 0.2);
}

body.active_dark .certificate-badge {
    background: linear-gradient(135deg, var(--cert-acento), #a8a8a8);
    color: var(--cert-sobre-acento);
}

/* Los logos de las instituciones suelen ser PNG con transparencia y tinta
   oscura: se pierden sobre negro, así que mantienen su base clara. */
body.active_dark .institution-icon img {
    background: #f1f1f1;
    border-radius: 6px;
}

/* --- Botones de la tarjeta --------------------------------------------- */

body.active_dark .btn-primary {
    background: var(--cert-acento);
    color: var(--cert-sobre-acento);
}

body.active_dark .btn-primary:hover {
    background: var(--cert-acento-hover);
}

body.active_dark .btn-secondary {
    color: var(--cert-texto);
    border-color: var(--cert-borde-fuerte);
}

body.active_dark .btn-secondary:hover {
    background: var(--cert-acento);
    color: var(--cert-sobre-acento);
    border-color: var(--cert-acento);
}

/* --- Buscador y filtros ------------------------------------------------ */

body.active_dark .search-container,
body.active_dark .filter-section {
    background: transparent;
}

body.active_dark .search-input,
body.active_dark .filter-select,
body.active_dark .ss-trigger,
body.active_dark .ss-search {
    background: var(--cert-superficie);
    color: var(--cert-texto);
    border-color: var(--cert-borde);
}

body.active_dark .search-input::placeholder,
body.active_dark .ss-search::placeholder,
body.active_dark .ss-label.ss-placeholder {
    color: var(--cert-texto-tenue);
}

body.active_dark .search-input:focus,
body.active_dark .ss-search:focus,
body.active_dark .filter-select:focus,
body.active_dark .searchable-select.open .ss-trigger {
    border-color: var(--cert-acento);
    background: var(--cert-elevada);
}

body.active_dark .search-icon,
body.active_dark .ss-search-icon,
body.active_dark .ss-caret {
    color: var(--cert-texto-apagado);
}

body.active_dark .filter-select:hover,
body.active_dark .ss-trigger:hover {
    border-color: var(--cert-borde-fuerte);
    background: var(--cert-elevada);
}

body.active_dark .filter-select option {
    background: var(--cert-superficie);
    color: var(--cert-texto);
}

/* --- Desplegable de búsqueda ------------------------------------------- */

body.active_dark .ss-panel {
    background: var(--cert-superficie);
    border-color: var(--cert-borde);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

body.active_dark .ss-option {
    color: var(--cert-texto);
}

body.active_dark .ss-option:hover {
    background: var(--cert-elevada);
}

body.active_dark .ss-option.selected {
    background: var(--cert-acento);
    color: var(--cert-sobre-acento);
}

body.active_dark .ss-empty {
    color: var(--cert-texto-apagado);
}

/* --- Resultados, orden y limpiar --------------------------------------- */

body.active_dark .results-info,
body.active_dark .results-count,
body.active_dark .sort-label {
    color: var(--cert-texto-apagado);
}

body.active_dark .sort-btn,
body.active_dark .clear-filters-btn {
    background: transparent;
    color: var(--cert-texto);
    border-color: var(--cert-borde);
}

body.active_dark .sort-btn:hover,
body.active_dark .clear-filters-btn:hover {
    background: var(--cert-elevada);
    border-color: var(--cert-borde-fuerte);
    color: var(--cert-texto);
}

body.active_dark .sort-btn.active {
    background: var(--cert-acento);
    border-color: var(--cert-acento);
    color: var(--cert-sobre-acento);
}

/* --- Estados vacíos y carga -------------------------------------------- */

body.active_dark .no-results {
    color: var(--cert-texto-apagado);
}

body.active_dark .no-results h3 {
    color: var(--cert-texto);
}

body.active_dark .no-results-icon {
    color: #4a4a4a;
}

body.active_dark .spinner {
    border-top-color: var(--cert-acento);
}

/* --- Botones flotantes -------------------------------------------------- */

body.active_dark .fab {
    background: var(--cert-acento);
    color: var(--cert-sobre-acento);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

body.active_dark .fab:hover {
    background: var(--cert-acento-hover);
}

body.active_dark .fab-tooltip {
    background: var(--cert-elevada);
    color: var(--cert-texto);
    border: 1px solid var(--cert-borde);
}

/* --- Visor a pantalla completa ------------------------------------------ */

body.active_dark #pdf-viewer,
body.active_dark #fullscreen-container img {
    background: var(--cert-superficie);
}
