/* ==========================================================================
   MODO OSCURO - MUXTDT.COM
   ========================================================================== */

body.dark-mode {
    /* 1. Paleta de colores principales (Variables) */
    --bg-principal: #0f172a;       /* Slate 900 */
    --bg-card: #1e293b;            /* Slate 800 */
    --bg-hover: #334155;           /* Slate 700 */
    --texto-principal: #f8fafc;    /* Slate 50 */
    --texto-secundario: #94a3b8;   /* Slate 400 */
    --borde-color: #334155;        /* Slate 700 */
    --accent-color: #38bdf8;       /* Sky 400 */

    /* General */
    background-color: var(--bg-principal) !important;
    color: var(--texto-principal) !important;
}

/* --- Elementos Generales y Contenedores --- */
body.dark-mode a {
    color: var(--accent-color);
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4 {
    color: var(--texto-principal) !important;
}

/* Bloques informativos y Cajas de Datos Técnicos */
body.dark-mode .info-div,
body.dark-mode .frequency.summary {
    background-color: var(--bg-card) !important;
    border-color: var(--borde-color) !important;
    color: var(--texto-principal) !important;
}

/* --- Portada y Hub de Múltiplex (/multiplex/) --- */
body.dark-mode .card-mux {
    background-color: var(--bg-card) !important;
    border-color: var(--borde-color) !important;
}

body.dark-mode .card-mux:hover {
    background-color: var(--bg-hover) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .card-mux h3 a {
    color: var(--texto-principal) !important;
}

body.dark-mode .card-mux p {
    color: var(--texto-secundario) !important;
}

body.dark-mode .badge-ambito {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border: 1px solid var(--borde-color);
}

/* --- Tabla Personalizada de Canales (.mux-custom-table) --- */
body.dark-mode .mux-custom-table {
    background-color: var(--bg-card) !important;
    border-color: var(--borde-color) !important;
}

body.dark-mode .mux-custom-table td,
body.dark-mode .mux-custom-table th {
    border-bottom-color: var(--borde-color) !important;
    color: var(--texto-principal) !important;
}

/* Filas alternas y hover en la tabla */
body.dark-mode .mux-custom-table tr:hover {
    background-color: var(--bg-hover) !important;
}

/* Indicador lateral del Nombre del MUX */
body.dark-mode .mux-custom-table .col-mux .mux-name {
    background-color: #0f172a !important;
    color: var(--accent-color) !important;
}

/* Nombre de los canales y enlaces dentro de la tabla */
body.dark-mode .mux-custom-table .col-name a, 
body.dark-mode .mux-custom-table .col-name span {
    color: #f1f5f9 !important;
}

/* Marcos para Logos y Capturas de Pantalla */
body.dark-mode .mux-custom-table .logo-wrapper img,
body.dark-mode .mux-custom-table .col-capture img {
    border-color: var(--borde-color) !important;
    background-color: #0f172a !important; /* Fondo por si hay PNGs transparentes */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* --- Estilos para Badges (Tipos de Servicio / SID / Provider) --- */
body.dark-mode .badge-service {
    background-color: #0f172a !important;
    color: var(--texto-principal) !important;
    border: 1px solid var(--borde-color) !important;
}

body.dark-mode .badge-hd {
    background-color: #1e3a8a !important; /* Azul oscuro */
    color: #93c5fd !important;
    border-color: #1d4ed8 !important;
}

body.dark-mode .badge-4k {
    background-color: #581c87 !important; /* Púrpura oscuro */
    color: #e9d5ff !important;
    border-color: #7e22ce !important;
}

body.dark-mode .badge-sd {
    background-color: #374151 !important; /* Gris oscuro */
    color: #d1d5db !important;
}

body.dark-mode .badge-radio {
    background-color: #7c2d12 !important; /* Naranja/Marrón oscuro */
    color: #ffedd5 !important;
}

body.dark-mode .badge-datos {
    background-color: #14532d !important; /* Verde oscuro */
    color: #bbf7d0 !important;
}