:root {
    --azul-entregando: #003366;
    --dorado: #b8860b;
    --rojo: #dc3545;
    --amarillo: #ffc107;
    --fondo: #f4f7f6;
}

/* Reset Universal - Evita desbordamientos en móvil */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body { 
    font-family: 'Roboto', sans-serif; 
    background: var(--fondo); 
    line-height: 1.6;
    overscroll-behavior-y: none; /* Esto bloquea el gesto de arrastrar hacia abajo para recargar */
}

/* Header Global */
.   al { 
    display: flex; 
    justify-content: space-between; 
    padding: 10px 20px; 
    background: white; 
    border-bottom: 1px solid #ddd; 
    align-items: center;
}
.marca-azul { color: var(--azul-entregando); font-size: 0.9rem; font-weight: bold; }

/* Vista Pública */
.hero-web { text-align: center; padding: 40px 20px; }
.marca-elegante { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #1a1a1a; margin-bottom: 10px; }
.logo-hero { width: 100px; margin: 15px 0; }
.eslogan { font-style: italic; color: #555; max-width: 600px; margin: 0 auto; } /* Agregado para el texto debajo del logo */

/* Centrar el texto promocional y ajustar el botón */
.presentacion-box {
    text-align: center;
    padding: 20px;
    max-width: 90%;
    margin: 0 auto;
}

/* Botón Inicio (superior) más pequeño */
.btn-iniciar-mini {
    padding: 5px 12px !important; /* Reducido */
    font-size: 13px !important;    /* Reducido */
}

/* Botones de la portada (Me interesa / Trabaja) más pequeños */
.tab-headers button {
    padding: 8px 15px !important;  /* Reducido */
    font-size: 14px !important;    /* Reducido */
    flex: none !important;         /* Para que no ocupen todo el ancho */
    width: auto !important;
}

/* SECCIÓN LOGIN - Centrada y Compacta */
#vista-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 85vh;
    padding: 20px;
}

/* 1. Achicamos la tarjeta principal a la mitad */
#vista-login .login-card, 
#vista-login .form-container {
    width: 90%;
    max-width: 250px; /* Reducido al máximo para que sea pequeño y elegante */
    margin: 20px auto;
    padding: 20px; /* Menos espacio de "aire" adentro */
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    text-align: center;
}

/* 2. Achicamos el título "Iniciar" */
#vista-login h3 {
    font-size: 1.1rem; /* Letra reducida casi a la mitad */
    margin-bottom: 15px;
    color: var(--azul-entregando);
}

/* 3. Achicamos las cajas de Usuario y Contraseña */
#vista-login .input-form {
    padding: 8px 10px; /* Cajas mucho más finitas */
    font-size: 0.8rem; /* Letra más pequeña al escribir */
    margin-bottom: 12px;
    border-radius: 6px;
    height: auto;
}

/* 4. Achicamos el botón de "Ingresar" */
#vista-login .btn-login {
    padding: 8px 10px;
    font-size: 0.85rem;
    border-radius: 6px;
    margin-top: 5px;
}

.logo-login {
    width: 90px;
    height: auto;
    margin-bottom: 20px;
}

#vista-login input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 18px;
}

#vista-login button {
    width: 100%;
    padding: 16px;
    background-color: var(--azul-entregando);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

/* --- CONTADORES RECTANGULARES OPTIMIZADOS PARA MÓVIL --- */
.grid-contadores {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.contador-item {
    background: #f9f9f9;
    border: 2px solid var(--azul-entregando);
    border-radius: 6px;
    padding: 8px 4px; /* Altura muy reducida */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: auto;
    min-height: 60px; /* Asegura que sean rectangulares */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contador-item h3 {
    font-size: 1.4rem; /* Número nítido pero no gigante */
    margin: 0;
    line-height: 1;
}

.contador-item p {
    font-size: 0.75rem;
    margin-top: 3px;
    font-weight: bold;
    color: #555;
    line-height: 1.1;
}

/* Alerta Roja */
.contador-alerta {
    background-color: var(--rojo) !important;
    border-color: var(--rojo) !important;
}
.contador-alerta h3, .contador-alerta p { color: white !important; }

/* Ajuste fino para celulares pequeños */
@media (max-width: 400px) {
    .contador-item h3 { font-size: 1.1rem; }
    .contador-item p { font-size: 0.6rem; letter-spacing: -0.3px; }
}
/* Diseño para los botones Me interesa, Trabaja con nosotros y Enviar */
.btn-accion {
    padding: 15px 20px;         /* Los hace altos y cómodos para el dedo */
    font-size: 1.1rem;          /* Letra más grande y legible */
    font-weight: bold;
    border-radius: 25px;        /* Bordes bien redondeados */
    background-color: var(--azul-entregando); /* El azul de tu marca */
    color: white;
    border: none;
    cursor: pointer;
    margin: 10px;               /* Los separa para que no estén pegados */
    width: 90%;                 /* En el celular ocupan casi toda la pantalla */
    max-width: 300px;           /* En la PC no se estiran demasiado */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra elegante */
}
/* Ajustes de lectura y comodidad visual */

/* Agrandar la letra de la bitácora */
#lista-logs {
    font-size: 0.8rem;          /* Letra más grande */
    line-height: 1.8;           /* Más espacio entre renglones */
    color: #1a1a1a;
}

/* Agrandar y ensanchar todos los cuadros de texto del sistema */
.input-form {
    padding: 18px;              /* Hace el cuadro más "gordo" y cómodo para tocar */
    font-size: 1.2rem;          /* Letra bastante más grande al escribir */
    border-radius: 12px;
    border: 2px solid #ccc;     /* Borde más visible */
    width: 100%;
    margin-bottom: 15px;
}

/* --- Ajuste del tamaño del cuadro de Login --- */
.login-card {
    width: 90%;                 /* En celular ocupa el 90% de la pantalla */
    max-width: 350px;           /* EN PC NO PASARÁ DE ESTE ANCHO */
    margin: 60px auto;          /* Lo centra perfectamente en la pantalla */
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* Sombra elegante */
    text-align: center;
}

/* --- Resaltar el botón del módulo activo --- */
.btn-activo {
    background-color: #cc8800 !important; /* Color dorado para destacar */
    color: white !important;
    transform: scale(1.07); /* Lo hace un 7% más grande */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    border: 2px solid #fff; /* Un bordecito blanco para que resalte más */
}
/* --- Ajustes del Formulario de Contacto Web --- */

/* 1. Limitar el ancho del formulario en PC y centrarlo */
#form-contacto {
    width: 90%;
    max-width: 400px;  /* No pasará de este ancho en la computadora */
    margin: 20px auto; /* Lo centra perfectamente en la pantalla */
    background: #f9f9f9;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra elegante */
}

/* 2. El estilo "encendido" para la pestaña seleccionada */
.btn-tab-activo {
    background-color: #cc8800 !important; /* Tu color dorado */
    color: white !important;
    transform: scale(1.05); /* Lo hace un 5% más grande */
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* --- DISEÑO DEL PANEL DE CLIENTES --- */
.tabs-cliente {
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    flex-wrap: wrap;
}

.btn-tab-cli {
    padding: 12px 20px; 
    background: #e0e0e0; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold;
    color: #333;
}

.btn-tab-cli.activo {
    background: var(--azul-entregando); 
    color: white; 
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.layout-solicitar {
    display: flex; 
    gap: 20px; 
    max-width: 900px; 
    margin: 0 auto; 
    text-align: left;
    flex-direction: column-reverse; /* En celulares, el conductor va arriba o abajo */
}

@media (min-width: 768px) {
    .layout-solicitar { flex-direction: row; } /* En PC, el conductor va a la derecha */
}

.form-pedido {
    flex: 2; 
    background: white; 
    padding: 25px; 
    border-radius: 12px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.panel-lateral {
    flex: 1; 
    background: #f9f9f9; 
    padding: 20px; 
    border-radius: 12px; 
    border: 2px solid var(--azul-entregando); 
    text-align: center; 
    height: fit-content;
}

.fila-inputs {
    display: flex; 
    gap: 10px;
}

.foto-conductor {
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: #ccc; 
    margin: 10px auto; 
    object-fit: cover;
    border: 3px solid var(--dorado);
}

.crono-box {
    font-size: 2.5rem; 
    font-weight: bold; 
    color: var(--rojo); 
    margin-top: 10px;
}
/* --- CABEZALES FIJOS Y CAJAS SCROLLABLES --- */
.area-scrollable {
    max-height: 400px; /* Altura máxima de la caja */
    overflow-y: auto;  /* Agrega barra de desplazamiento solo aquí adentro */
    padding-right: 10px;
    border-top: 2px solid #ddd;
    margin-top: 10px;
    padding-top: 10px;
}

/* Modificamos sutilmente la barra espaciadora para que sea elegante */
.area-scrollable::-webkit-scrollbar { width: 8px; }
.area-scrollable::-webkit-scrollbar-thumb { background: var(--azul-entregando); border-radius: 4px; }


/* --- MODO NOCHE Y FUENTE GRANDE --- */
body.tema-oscuro {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.tema-oscuro .form-container,
body.tema-oscuro .modulo-container,
body.tema-oscuro .contador-item,
body.tema-oscuro .login-card,
body.tema-oscuro .form-pedido,
body.tema-oscuro .panel-lateral {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
    box-shadow: 0 4px 8px rgba(255,255,255,0.05);
}

body.tema-oscuro h1, body.tema-oscuro h2, body.tema-oscuro h3, 
body.tema-oscuro h4, body.tema-oscuro label, body.tema-oscuro strong {
    color: #ffffff !important;
}

body.tema-oscuro .input-form {
    background-color: #2c2c2c !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

/* Aumentar la letra en todo el sistema */
body.fuente-grande {
    font-size: 110%; 
}
body.fuente-grande .input-form {
    font-size: 1.3rem;
}
/* --- CONTADORES RECTANGULARES (DISEÑO INTELIGENTE PC/MÓVIL) --- */
.grid-contadores {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important; /* PC: 2 filas de 5 contadores */
    gap: 15px;
    margin-bottom: 20px;
}

/* Alerta Roja (> 0) */
.contador-alerta {
    background-color: var(--rojo) !important;
    border-color: var(--rojo) !important;
}
.contador-alerta h3, .contador-alerta p { color: white !important; }

/* Alerta Naranja (Igual a 0) */
.contador-naranja {
    background-color: #ff9800 !important; /* Color Naranja */
    border-color: #e68a00 !important;
}
.contador-naranja h3, .contador-naranja p { color: white !important; }

.contador-item {
    background: #f9f9f9;
    border: 2px solid var(--azul-entregando);
    border-radius: 8px;
    padding: 10px 5px; /* Proporción para PC */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
}

.contador-item h3 {
    font-size: 1.8rem;
    margin: 0;
    color: #333;
    line-height: 1;
}

.contador-item p {
    margin: 5px 0 0 0;
    font-size: 0.8rem;
    font-weight: bold;
    color: #666;
    line-height: 1.1;
}

/* Alerta Roja */
.contador-alerta {
    background-color: var(--rojo) !important;
    border-color: var(--rojo) !important;
}
.contador-alerta h3, .contador-alerta p { color: white !important; }


/* --- AJUSTE EXCLUSIVO PARA CELULARES Y TABLETS PEQUEÑAS --- */
@media (max-width: 768px) {
    .grid-contadores {
        /* Creamos la grilla mágica de 12 espacios */
        grid-template-columns: repeat(12, 1fr) !important; 
        gap: 4px !important;
        padding: 0 2px !important;
    }
    
    /* Los primeros 6 ocupan 4 espacios (quedan 3 por renglón) */
    .grid-contadores .contador-item:nth-child(-n+6) {
        grid-column: span 4;
    }
    
    /* Los últimos 4 ocupan 3 espacios (quedan 4 por renglón) */
    .grid-contadores .contador-item:nth-child(n+7) {
        grid-column: span 3;
    }
    
    .contador-item {
        padding: 4px 1px !important; 
        min-height: 40px !important;
        border-width: 1px !important; /* Borde más fino para ahorrar pixeles */
    }
    
    .contador-item h3 {
        font-size: 1rem !important; /* Número más compacto */
        margin-bottom: 2px !important;
    }
    
    .contador-item p {
        font-size: 0.55rem !important; /* Texto micro para que entre */
        white-space: nowrap !important; /* Evita que el texto baje a un segundo renglón */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}
/* ========================================= */
/* --- ESTILOS DEL MENÚ LATERAL RETRÁCTIL --- */
/* ========================================= */

/* El botón de las 3 rayitas (Oculto por defecto) */
.btn-hamburguesa {
    display: none; 
    font-size: 28px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--azul-entregando, #003366);
    padding: 10px 15px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2000;
    transition: 0.3s;
}

.btn-hamburguesa:hover {
    color: #17a2b8;
}

/* El panel lateral activo (Enlazado a tu ID menu-principal) */
#menu-principal.menu-modo-vertical {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background-color: var(--azul-entregando, #003366);
    display: flex;
    flex-direction: column !important;
    padding-top: 70px; /* Espacio para el botón ☰ */
    z-index: 1500;
    transition: transform 0.3s ease-in-out;
    box-shadow: 4px 0 10px rgba(0,0,0,0.3);
    overflow-y: auto;
}

/* Clase para esconder el panel hacia la izquierda */
.panel-oculto {
    transform: translateX(-100%) !important;
}

/* Ajuste de los botones dentro del panel vertical */
#menu-principal.menu-modo-vertical button {
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    border-radius: 0;
    margin: 0;
    background: transparent !important;
    color: white !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 1.1rem;
}

#menu-principal.menu-modo-vertical button:hover {
    background-color: rgba(255,255,255,0.2) !important;
}
/* Estados de los Contadores */
.contador-blanco {
    background-color: #ffffff;
    color: #333333;
    /* Hacemos el borde un poco más grueso y oscuro para que se note */
    border: 2px solid #888888; 
    /* Le agregamos una pequeña sombra para separarlo del fondo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
    /* Aseguramos que mantenga la forma (ajústalo si tus otras cajas son más redondeadas) */
    border-radius: 8px; 
}

.contador-naranja {
    background-color: #ffcc80; /* Naranja suave */
    color: #d24e26; /* Texto naranja oscuro */
}

.contador-alerta {
    background-color: #ff4c4c; /* Rojo alerta máximo */
    color: white;
} /* ¡ESTA ES LA LLAVE QUE FALTABA! */

/* --- MENÚ LATERAL CONDUCTOR --- */
.menu-lateral-cond {
    position: fixed;
    top: 0;
    left: -300px;
    width: 250px;
    height: 100vh;
    background-color: #2c3e50;
    z-index: 10000;
    transition: left 0.3s ease;
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    overflow-y: auto;
}
.menu-lateral-cond.abierto {
    left: 0;
}
.btn-cerrar-menu {
    background: transparent; color: #e74c3c; border: none; font-size: 16px; cursor: pointer; float: right; font-weight: bold;
}
.btn-menu-cond {
    display: block; width: 100%; background: #34495e; color: white; border: none; padding: 12px; text-align: left; margin-bottom: 8px; border-radius: 4px; cursor: pointer;
}
.btn-menu-tema {
    display: inline-block; 
    width: calc(50% - 6px); /* Calcula exactamente la mitad para que no quede más chico */
    background: #7f8c8d; 
    color: white; 
    border: none; 
    padding: 10px 0; /* Un poquito más de altura para que el dedo toque cómodo */
    margin-bottom: 8px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
}

/* --- TEMAS VISUALES CONDUCTOR --- */
.tema-claro { background-color: #ffffff; color: #333333; }
.tema-oscuro { background-color: #1a1a1a; color: #f1f1f1; }
.tema-verde { background-color: #f1f8e9; color: #33691e; }
.tema-ladrillo { background-color: #fbe9e7; color: #bf360c; }

/* --- EFECTO SPLASH SCREEN --- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0b301d; /* Verde oscuro correspondiente al fondo del icono */
    z-index: 99999; /* Se asegura de estar por encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

#splash-logo {
    width: 150px;
    height: auto;
    animation: crecerLogo 1.1s forwards ease-out;
}

/* Animación de crecimiento del logo */
@keyframes crecerLogo {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Transición de desplazamiento hacia la izquierda */
#splash-screen.desplazar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* --- MEJORAS VISUALES DE TIPOGRAFÍA PARA PC --- */
@media (min-width: 992px) {
    /* Engrandece el eslogan principal en la PC */
    .hero-web h2, .marca-elegante {
        font-size: 1.5rem !important;
        line-height: 1 !important;
        max-width: 900px;
        margin: 0 auto 25px auto !important;
    }

    /* Engrandece el texto explicativo o de presentación en la PC */
    .hero-web p, .texto-presentacion {
        font-size: 1.3rem !important;
        max-width: 750px;
        margin: 0 auto 30px auto !important;
        line-height: 1.8 !important;
        color: #444;
    }
    
    /* Hace que los botones de acción pública acompañen el tamaño general */
    .hero-web .btn-principal {
        font-size: 1.2rem !important;
        padding: 15px 35px !important;
    }
}

/* ==========================================
   1. PANEL ADMINISTRATIVO (Menú Principal)
   ========================================== */
.nav-modulos {
    display: flex;
    flex-wrap: nowrap;          /* Prohíbe que pasen al renglón de abajo */
    justify-content: space-between;
    gap: 6px;                   /* Separación mínima entre botones */
    padding: 15px;
    max-width: 1000px;
    margin: 0 auto 20px auto;
    overflow-x: auto;           /* Si en un celular no entran, permite deslizar */
}

.nav-modulos button {
    flex: 1;
    padding: 14px 10px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: var(--azul-entregando);
    border: none;
    border-radius: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-activo {
    background-color: #cc8800 !important; /* Dorado para destacar */
    color: white !important;
    transform: scale(1.07);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    border: 2px solid #fff;
}

/* ==========================================
   2. CONTENEDORES DE MÓDULOS Y UTILIDADES
   ========================================== */
#contenido-modulo {
    background: white;
    margin: 15px auto; 
    max-width: 1000px; 
    padding: 20px;
    border-radius: 15px;
    min-height: 200px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.btn-cond {
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    background: var(--azul-entregando);
    color: white;
    font-weight: bold;
}

/* ==========================================
   3. OPTIMIZACIÓN DE 10 CONTADORES EN 1 LÍNEA (SOLO PC)
   ========================================== */
/* OJO: Aquí mantuve tus cajas con forma rectangular y el texto grande (padding 3px 10px) */
@media (min-width: 992px) {
    div:has(> #c-t1) {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 11px !important; 
        overflow-x: hidden !important;
        justify-content: center !important; 
    }

    #c-t1, #c-t2, #c-t3, #c-t4, #c-t5, #c-t6, #c-t7, #c-t8, #c-t9, #c-t10 {
        flex: 1 1 0 !important; 
        min-width: 0 !important; 
        margin: 0 !important; 
        padding: 3px 10px !important; 
        min-height: auto !important;
        box-sizing: border-box !important;
    }

    #c-t1 h3, #c-t2 h3, #c-t3 h3, #c-t4 h3, #c-t5 h3, #c-t6 h3, #c-t7 h3, #c-t8 h3, #c-t9 h3, #c-t10 h3 {
        font-size: 1.2rem !important; 
        margin-bottom: 4px !important;
        white-space: nowrap !important; 
        overflow: hidden !important; 
        text-overflow: ellipsis !important; 
    }

    #val-t1, #val-t2, #val-t3, #val-t4, #val-t5, #val-t6, #val-t7, #val-t8, #val-t9, #val-t10 {
        font-size: 1.8rem !important; 
        font-weight: bold !important;
        line-height: 1 !important;
    }

    #c-t1 p, #c-t2 p, #c-t3 p, #c-t4 p, #c-t5 p, #c-t6 p, #c-t7 p, #c-t8 p, #c-t9 p, #c-t10 p,
    #c-t1 span, #c-t2 span, #c-t3 span, #c-t4 span, #c-t5 span, #c-t6 span, #c-t7 span, #c-t8 span, #c-t9 span, #c-t10 span {
        font-size: 0.65rem !important; 
        margin-top: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ==========================================
   TEMAS VISUALES DE DESCANSO (MODO NOCHE Y COLORES SUAVES)
   ========================================== */

/* Tema Verde Claro */
body.tema-verde-claro {
    background-color: #e8f5e9 !important; 
}
body.tema-verde-claro #contenido-modulo, 
body.tema-verde-claro .bloque-modo-noche {
    background-color: #c8e6c9 !important; 
    color: #1a1a1a !important;
}

/* Tema Marrón Claro (Más oscuro y sólido) */
body.tema-marron-claro {
    background-color: #e8dcc7 !important; /* Marrón arena oscuro */
}
body.tema-marron-claro #contenido-modulo, 
body.tema-marron-claro .bloque-modo-noche {
    background-color: #d6c6ad !important; /* Marrón contrastante para las cajas */
    color: #1a1a1a !important;
}

/* Tema Gris Plomo (Modo Oscuro Real) */
body.tema-gris-plomo {
    background-color: #2b3035 !important; 
    color: #f8f9fa !important; 
}
body.tema-gris-plomo #contenido-modulo, 
body.tema-gris-plomo .bloque-modo-noche {
    background-color: #343a40 !important; 
    color: #f8f9fa !important;
    border-color: #495057 !important;
}

/* Aclaramos los textos en modo oscuro, pero EXCLUIMOS a los contadores */
body.tema-gris-plomo #contenido-modulo h2, 
body.tema-gris-plomo #contenido-modulo h3, 
body.tema-gris-plomo #contenido-modulo h4, 
body.tema-gris-plomo #contenido-modulo p, 
body.tema-gris-plomo #contenido-modulo label,
body.tema-gris-plomo .bloque-modo-noche h2,
body.tema-gris-plomo .bloque-modo-noche h3,
body.tema-gris-plomo .bloque-modo-noche h4,
body.tema-gris-plomo .bloque-modo-noche p,
body.tema-gris-plomo .bloque-modo-noche label {
    color: #e9ecef !important;
}

/* PROTECCIÓN BLINDADA PARA LOS CONTADORES SUPERIORES (T1 al T10) */
/* Fuerza a que el texto de los contadores siempre sea oscuro para que se lea sobre el verde, naranja o rojo */
#c-t1 *, #c-t2 *, #c-t3 *, #c-t4 *, #c-t5 *, #c-t6 *, #c-t7 *, #c-t8 *, #c-t9 *, #c-t10 * {
    color: #1a1a1a !important; 
}