/* ========================================
   CONFIGURACIÓN CSS ANTI-CACHE
   Evita problemas de cache en navegadores
   Actualizado: 21 de julio de 2025
   ======================================== */

/* META INFORMACIÓN */
/*
    VERSIÓN: 2.1.2025
    TIMESTAMP: <?php echo time(); ?>
    ÚLTIMA MODIFICACIÓN: 21/07/2025 14:30
*/

/* ========================================
   TÉCNICAS ANTI-CACHE
   ======================================== */

/* 1. Headers HTTP para evitar cache */
/*
    Cache-Control: no-cache, no-store, must-revalidate
    Pragma: no-cache
    Expires: 0
*/

/* 2. Selectores con alta especificidad */
html body {
    font-family: 'Montserrat', 'Open Sans', Arial, sans-serif !important;
}

/* 3. Fuerza recarga de estilos críticos */
:root {
    --css-version: "v2.1.2025";
    --last-update: "21072025";
    --imss-purple: #660033 !important;
    --imss-gold: #a47e2c !important;
    --imss-green: #2d5a3d !important;
    --text-color: #333 !important;
    --bg-color: #f8f9fa !important;
    --border-radius: 8px !important;
    --shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* ========================================
   OVERRIDES CRÍTICOS
   ======================================== */

/* Override para estilos inline problemáticos */
*[style*="background-color: #fff"] {
    background-color: var(--bg-color) !important;
}

/* Forzar aplicación de colores institucionales */
.imss-purple, .header-principal {
    background-color: var(--imss-purple) !important;
    color: white !important;
}

.imss-gold, .sub-navbar {
    background-color: var(--imss-gold) !important;
    color: white !important;
}

.imss-green {
    background-color: var(--imss-green) !important;
    color: white !important;
}

/* ========================================
   DEBUG Y VALIDACIÓN
   ======================================== */

/* Indicador visual de que CSS se ha cargado */
body::before {
    content: "CSS v2.1.2025 cargado correctamente ✓";
    position: fixed;
    top: 0;
    right: 0;
    background: #28a745;
    color: white;
    padding: 2px 8px;
    font-size: 10px;
    z-index: 9999;
    opacity: 0.7;
    pointer-events: none;
    font-family: monospace;
}

/* Remover indicador después de 3 segundos */
@keyframes fadeOutIndicator {
    0% { opacity: 0.7; }
    70% { opacity: 0.7; }
    100% { opacity: 0; }
}

body::before {
    animation: fadeOutIndicator 3s ease-in-out forwards;
}

/* ========================================
   DEBUGGING RESPONSIVE
   ======================================== */

/* Mostrar breakpoint actual (solo en desarrollo) */
body::after {
    content: "Móvil";
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 2px 8px;
    font-size: 10px;
    z-index: 9999;
    font-family: monospace;
    opacity: 0.5;
}

@media (min-width: 576px) {
    body::after { content: "Móvil Grande"; }
}

@media (min-width: 768px) {
    body::after { content: "Tablet"; }
}

@media (min-width: 992px) {
    body::after { content: "Desktop"; }
}

@media (min-width: 1200px) {
    body::after { content: "Desktop XL"; }
}

/* ========================================
   HERRAMIENTAS PARA DESARROLLO
   ======================================== */

/* Outline para debugging layout */
.debug * {
    outline: 1px solid red !important;
    outline-offset: -1px !important;
}

/* Grid overlay para alineación */
.debug-grid {
    background-image: 
        linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    /* Ocultar indicadores de debug */
    body::before,
    body::after {
        display: none !important;
    }
    
    /* Optimizar para impresión */
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    /* Mostrar URLs después de enlaces */
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    /* Saltos de página */
    .page-break {
        page-break-before: always;
    }
    
    .no-print {
        display: none !important;
    }
}