:root {
            /* COLORES INSTITUCIONALES BASE (Se sobreescriben desde Firebase) */
            --primary: #2a1b68; 
            --secondary: #d12027; 
            --light: #f9f2fa; 
            --accent: #402c91; 

            /* VARIABLES DE TEXTO QUE SE ADAPTAN AL MODO OSCURO */
            --primary-text: var(--primary);
            --secondary-text: var(--secondary);
            
            /* COLORES DE INTERFAZ GENERAL */
            --bg-main: #f4f4f9;
            --bg-panel: #ffffff;
            --text-main: #333333;
            --text-muted: #555555;
            --border-light: #eeeeee;
            --border-strong: #cccccc;
            
            /* COLORES DEL COMUNICADO */
            --bg-comunicado: #ffffff;
            --bg-cuerpo: #fafafa;
            --border-cuerpo: #e0e0e0;
            --text-color: #333333;
            --highlight-bg: #ffffe0;
        }

        body.theme-claro {
            --primary: #333333;
            --secondary: #555555;
            --light: #f5f5f5;
            --accent: #444444;
            
            --primary-text: #333333;
            --secondary-text: #555555;
            
            --bg-main: #e0e0e0;
            --bg-panel: #ffffff;
            --text-main: #111111;
            --text-muted: #444444;
            --border-light: #cccccc;
            --border-strong: #aaaaaa;
            
            --bg-comunicado: #ffffff;
            --bg-cuerpo: #f9f9f9;
            --border-cuerpo: #dddddd;
            --text-color: #111111;
            --highlight-bg: #fff9c4;
        }

        body.theme-oscuro {
            --primary-text: #9fa8da; 
            --secondary-text: #ef9a9a; 
            --light: #2d2d2d; 
            --accent: #b39ddb; 
            
            --bg-main: #121212;
            --bg-panel: #1e1e1e;
            --text-main: #e0e0e0;
            --text-muted: #aaaaaa;
            --border-light: #333333;
            --border-strong: #444444;
            
            --bg-comunicado: #1e1e1e;
            --bg-cuerpo: #2a2a2a;
            --border-cuerpo: #444444;
            --text-color: #e0e0e0;
            --highlight-bg: #4a4a2a;
        }

        body { 
            font-family: 'Calibri', sans-serif; 
            background-color: var(--bg-main); 
            color: var(--text-main); 
            padding: 20px; 
            margin: 0; 
            transition: background-color 0.3s, color 0.3s;
        }
        .contenedorPrincipal { 
            max-width: 1200px; 
            margin: 0 auto; 
            background: var(--bg-panel); 
            padding: 25px; 
            border-radius: 8px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
            transition: background-color 0.3s;
        }
        h2 { 
            color: var(--primary-text); 
            border-bottom: 2px solid var(--primary); 
            padding-bottom: 10px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        }
        
        .btn-link-reportes { 
            background-color: var(--bg-main); 
            color: var(--primary-text); 
            border: 1px solid var(--primary); 
            padding: 8px 15px; 
            font-size: 14px; 
            font-weight: bold; 
            border-radius: 4px; 
            text-decoration: none; 
            transition: 0.3s; 
        }
        .btn-link-reportes:hover { 
            background-color: var(--primary); 
            color: #fff; 
        }

        .tenant-badge { background: #ffebee; color: #d12027; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: bold; border: 1px solid #d12027; display: inline-flex; align-items: center; gap: 5px; margin-left: 15px;}

        .paneles { 
            display: flex; 
            gap: 20px; 
            margin-bottom: 20px; 
            align-items: flex-start;
        }
        .panel { 
            flex: 1; 
            display: flex; 
            flex-direction: column; 
        }
        .titulo-panel { 
            display: flex; 
            justify-content: space-between; 
            font-weight: bold; 
            margin-bottom: 8px; 
            color: var(--primary-text); 
            font-size: 16px; 
            align-items: center;
        }
        
        .contenedor-edicion-horario { 
            height: 350px; 
            overflow-y: auto; 
            border: 1px solid var(--border-strong); 
            border-radius: 4px; 
            margin-bottom: 10px; 
        }
        .tabla-edicion { 
            width: 100%; 
            border-collapse: collapse; 
            font-size: 12px; 
            text-align: center; 
        }
        .tabla-edicion th, .tabla-edicion td { 
            border: 1px solid var(--border-strong); 
            padding: 4px; 
            color: var(--text-main);
        }
        .tabla-edicion th { 
            background-color: var(--light); 
            color: var(--primary-text); 
            position: sticky; 
            top: 0; 
            z-index: 1; 
        }
        .tabla-edicion td[contenteditable="true"]:focus { 
            background-color: var(--highlight-bg); 
            outline: 2px solid #ffc107; 
        }
        
        .btn-guardar-bd { 
            background-color: #0078D7; 
            color: white; 
            border: none; 
            padding: 8px 12px; 
            font-size: 12px; 
            font-weight: bold; 
            border-radius: 4px; 
            cursor: pointer; 
            transition: 0.3s; 
        }
        .btn-guardar-bd:hover { 
            filter: brightness(0.9);
        }
        
        .text-pequeno { 
            height: 70px; 
            width: 100%; 
            padding: 10px; 
            border-radius: 4px; 
            border: 1px solid var(--border-strong); 
            font-family: 'Calibri', sans-serif;
            box-sizing: border-box;
            background-color: var(--bg-panel);
            color: var(--text-main);
        }
        
        .formulario-novedad { 
            background-color: var(--bg-panel); 
            border: 1px solid var(--border-strong); 
            border-radius: 6px; 
            padding: 15px; 
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); 
            flex: 1; 
            display: flex; 
            flex-direction: column; 
        }
        .form-row { 
            display: flex; 
            gap: 10px; 
            margin-bottom: 10px; 
        }
        .form-group { 
            flex: 1; 
            display: flex; 
            flex-direction: column; 
        }
        .form-group label { 
            font-size: 13px; 
            color: var(--text-muted); 
            margin-bottom: 3px; 
            font-weight: bold;
        }
        .form-group select { 
            padding: 8px; 
            border-radius: 4px; 
            border: 1px solid var(--border-strong); 
            font-size: 14px; 
            outline: none;
            background-color: var(--bg-panel);
            color: var(--text-main);
        }
        .form-group input {
            background-color: var(--bg-panel);
            color: var(--text-main);
        }
        .check-label { 
            font-size: 14px; 
            color: var(--text-main); 
            cursor: pointer; 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            font-weight: bold; 
            margin-top: 5px;
        }
        .btn-agregar { 
            margin-top: auto; 
            background-color: #28a745; 
            color: white; 
            border: none; 
            padding: 10px; 
            font-size: 14px; 
            font-weight: bold; 
            border-radius: 4px; 
            cursor: pointer; 
            width: 100%; 
            transition: 0.3s; 
        }
        .btn-agregar:hover { 
            background-color: #218838; 
        }
        
        .contenedor-chips { 
            min-height: 55px; 
            border: 1px dashed var(--border-strong); 
            border-radius: 4px; 
            padding: 10px; 
            background-color: var(--bg-main); 
            display: flex; 
            flex-wrap: wrap; 
            gap: 8px; 
            margin-top: 10px; 
        }
        .chip { 
            background-color: var(--border-strong); 
            padding: 6px 12px; 
            border-radius: 20px; 
            font-size: 13px; 
            color: var(--text-main);
            display: inline-flex; 
            align-items: center; 
            border: 1px solid var(--border-light); 
            box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
        }
        .chip-btn { 
            background-color: #dc3545; 
            color: white; 
            border: none; 
            border-radius: 50%; 
            width: 20px; 
            height: 20px; 
            display: inline-flex; 
            justify-content: center; 
            align-items: center; 
            margin-left: 8px; 
            cursor: pointer; 
            font-size: 11px; 
            font-weight: bold; 
        }
        .chip-btn:hover { 
            background-color: #c82333; 
        }

        .btn-principal { 
            background-color: var(--primary); 
            color: white; 
            border: none; 
            padding: 15px; 
            font-size: 16px; 
            font-weight: bold; 
            border-radius: 4px; 
            cursor: pointer; 
            width: 100%; 
            transition: background-color 0.3s; 
            border-bottom: 4px solid var(--secondary);
        }
        .btn-principal:hover { 
            background-color: var(--secondary); 
            border-bottom: 4px solid var(--primary); 
        }

        .acciones-rapidas { 
            text-align: right; 
            margin-bottom: 8px; 
        }
        .btn-copiar, .btn-guardar { 
            color: white; 
            border: none; 
            padding: 8px 15px; 
            margin-left: 10px; 
            font-size: 14px; 
            font-weight: bold; 
            border-radius: 4px; 
            cursor: pointer; 
            transition: 0.3s; 
            width: auto; 
        }
        .btn-copiar { background-color: #0078D7; }
        .btn-copiar:hover { background-color: #005A9E; }
        .btn-guardar { background-color: #17a2b8; }
        .btn-guardar:hover { background-color: #138496; }
        .btn-copiar:disabled, .btn-guardar:disabled { background-color: #cccccc; cursor: not-allowed; }
        
        /* ESTILOS DE PESTAÑAS (TABS) */
        #zonaComunicados { margin-top: 40px; display: flex; flex-direction: column; align-items: center;}
        .tabs-header {
            display: flex;
            border-bottom: 2px solid var(--primary);
            margin-bottom: 20px;
            gap: 5px;
            overflow-x: auto;
            width: 100%;
        }
        .tab-btn {
            background-color: var(--light);
            color: var(--primary-text);
            border: 1px solid var(--border-strong);
            border-bottom: none;
            padding: 10px 20px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 8px 8px 0 0;
            transition: 0.3s;
        }
        .tab-btn:hover {
            background-color: var(--border-strong);
        }
        .tab-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        .tab-content {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
            width: 100%;
            max-width: 650px; 
        }
        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .comunicado-wrapper { margin-bottom: 60px; width: 100%;}
        
        .comunicado { 
            background-color: var(--bg-comunicado);
            border: 1px solid var(--border-comunicado); 
            border-top: 8px solid var(--primary); 
            padding: 0; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
            border-radius: 4px; 
            overflow: hidden; 
        }
        .comunicadoTituloWrapper { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            background-color: var(--light); 
            padding: 15px 20px; 
            border-bottom: 3px solid var(--secondary); 
        }
        .escudo { max-width: 70px; max-height: 70px; object-fit: contain; margin-right: 15px; flex-shrink: 0; }
        .escudo-fallback { font-size: 35px; margin-right: 15px;}
        .comunicadoTituloTextos { flex: 1; text-align: center; }
        .institucionNombre { color: var(--primary-text); font-size: 16px; font-weight: bold; line-height: 1.2; margin-bottom: 5px; text-transform: uppercase;}
        .comunicadoSubtitulo { color: var(--text-color); font-size: 14px; font-weight: bold; }
        
        .comunicadoFecha { padding: 12px 20px 5px 20px; font-weight: bold; font-size: 14px; color: var(--text-color); text-align: center; display: block; border-bottom: 1px dashed var(--border-cuerpo); margin-bottom: 10px;}
        
        .separador-novedades { display: flex; align-items: center; text-align: center; color: var(--secondary-text); font-weight: bold; font-size: 18px; margin: 10px 20px 15px 20px; text-transform: uppercase; }
        .separador-novedades::before, .separador-novedades::after { content: ''; flex: 1; border-bottom: 1px solid var(--secondary); }
        .separador-novedades:not(:empty)::before { margin-right: 10px; }
        .separador-novedades:not(:empty)::after { margin-left: 10px; }

        .comunicadoGrid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 0 20px;
        }

        .comunicadoCuerpo { 
            font-size: 14px; line-height: 1.5; color: var(--text-color); 
            background: var(--bg-cuerpo); padding: 15px; border-radius: 6px; 
            border: 1px solid var(--border-cuerpo); height: fit-content;
        }
        .seccion { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted var(--border-cuerpo); }
        .seccion:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
        
        .seccion h4 { margin-top: 0; color: var(--secondary-text); margin-bottom: 8px; font-size: 15px; } 
        .seccion ul { margin-top: 5px; padding-left: 20px; margin-bottom: 0;}
        .seccion li { margin-bottom: 6px; }
        
        .notaFinal { 
            margin: 15px 20px 20px 20px; padding: 12px; 
            background-color: var(--light); border-left: 4px solid var(--secondary); 
            font-size: 13px; color: var(--text-color); border-radius: 0 4px 4px 0; text-align: justify;
        }
        .firma { margin-top: 10px; font-size: 13px; color: var(--text-color); font-weight: normal; text-align: right; font-style: italic;}

        .tabla-timbres-wrapper { display: flex; justify-content: center; align-items: flex-start; height: 100%;}
        .tabla-timbres { 
            width: 100%; border-collapse: collapse; font-family: 'Calibri', sans-serif; font-size: 11px; text-align: center; 
            background-color: var(--bg-comunicado); border: 1px solid var(--border-cuerpo); box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
            border-radius: 4px; overflow: hidden; margin: 0;
        }
        .tabla-timbres th, .tabla-timbres td { border: 1px solid var(--border-cuerpo); padding: 4px 3px; color: var(--text-color); }
        .tabla-timbres .th-titulo { background-color: var(--primary); color: white; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; border-bottom: 2px solid var(--secondary); padding: 5px; text-transform: uppercase; }
        .tabla-timbres .th-sub { background-color: var(--light); color: var(--primary-text); font-weight: bold; font-size: 10px; border-bottom: 2px solid var(--primary); }
        
        .contenedor-tabla { overflow-x: auto; margin-top: 20px; background-color: var(--bg-panel); padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .tabla-titulo { color: var(--primary-text); font-size: 16px; font-weight: bold; margin-bottom: 10px; border-bottom: 2px dashed var(--border-strong); padding-bottom: 5px; }
        .tabla-horario { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; white-space: nowrap; }
        .tabla-horario th, .tabla-horario td { border: 1px solid var(--border-cuerpo); padding: 6px; }
        .tabla-horario th { background-color: var(--light); color: var(--primary-text); font-weight: bold; border: 1px solid var(--border-cuerpo); }
        
        .celda-libre { background-color: #ffe699; font-weight: bold; color: #000; }
        .celda-libre-profe { display: block; font-size: 9.5px; color: #a98018; font-weight: normal; margin-top: 2px; }
        .celda-adelanto { background-color: #c6e0b4; font-weight: bold; color: #000; }
        .celda-normal { background-color: var(--bg-comunicado); color: var(--text-color); }

        .matriz-horario-fullwidth {
            width: 100vw;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            padding: 20px;
            background: var(--bg-main);
            box-sizing: border-box;
            overflow-x: auto;
        }

        .matriz-horario-fullwidth .contenedor-tabla {
            max-width: none;
            width: fit-content;
            margin: 0 auto;
        }

        [contenteditable="true"] { outline: none; transition: background 0.3s; }
        [contenteditable="true"]:focus { background-color: var(--highlight-bg); box-shadow: inset 0 0 0 2px #ffc107; border-radius: 4px; }
        
        .caja-inferior { display: flex; gap: 20px; margin-bottom: 20px; }
        .caja-inferior > div { flex: 1; display: flex; flex-direction: column; }
        
        .hint-horario {
            background-color: var(--light);
            border-left: 4px solid var(--primary);
            padding: 12px 15px;
            border-radius: 4px;
            font-size: 13px;
            color: var(--text-color);
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .acciones-tabla-container { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }

        @media (min-width: 500px) {
            .comunicadoGrid.con-timbres { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
            .comunicadoGrid.sin-timbres { grid-template-columns: 1fr; align-items: stretch; }
        }

        @media (max-width: 768px) {
            .paneles { flex-direction: column; }
            .caja-inferior { flex-direction: column; }
            .form-row { flex-direction: column; gap: 5px; }
            .contenedorPrincipal { padding: 15px; }
            .acciones-rapidas { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }
            .btn-copiar, .btn-guardar { width: 100%; margin: 0 !important; }
            h2 { flex-direction: column; align-items: flex-start; gap: 10px;}
            .tabs-header { flex-wrap: wrap; }
            .tab-btn { flex-grow: 1; text-align: center; }
            .tab-content { max-width: 100%; }

            .comunicadoTituloWrapper { padding: 10px; }
            .escudo { max-width: 50px; max-height: 50px; margin-right: 10px; }
            .institucionNombre { font-size: 14px; }
            .comunicadoSubtitulo { font-size: 12px; }
            .comunicadoFecha { font-size: 12px; padding: 8px 10px 4px 10px; }
            .comunicadoCuerpo { padding: 10px; font-size: 13px; }
            .seccion h4 { font-size: 14px; }
            .notaFinal { padding: 10px; font-size: 12px; margin: 10px; }
            .tabla-timbres th, .tabla-timbres td { padding: 3px 2px; font-size: 10px; }

            .acciones-tabla-container { flex-direction: column; align-items: stretch; width: 100%; margin-top: 10px; }
            .acciones-tabla-container button { width: 100%; }
        }

        /* ============================================================== */
        /* ⭐ ESTILOS DEL MODAL DE ESTADÍSTICAS AVANZADAS E INYECCIÓN UI ⭐ */
        /* ============================================================== */
        .fab-stats { 
            position: fixed; bottom: 20px; right: 20px; background: var(--primary); color: white; border: none; 
            border-radius: 50px; padding: 12px 20px; font-size: 14px; font-weight: bold; cursor: pointer; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 9000; transition: transform 0.2s; display: flex; align-items: center; gap: 8px; 
        }
        .fab-stats:hover { transform: scale(1.05); }
        .modal-stats-overlay { 
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); 
            z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 15px; box-sizing: border-box; 
        }
        .modal-stats-content { 
            background: var(--bg-main); width: 100%; max-width: 900px; max-height: 90vh; border-radius: 12px; 
            display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.3); font-family: 'Calibri', sans-serif; 
        }
        .modal-stats-header { 
            background: var(--primary); color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; 
        }
        .modal-stats-header h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
        .modal-stats-close { background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        .modal-stats-filters { 
            padding: 15px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--border-strong); 
            display: flex; gap: 10px; flex-wrap: wrap; align-items: center; 
        }
        .modal-stats-filters label { font-size: 12px; font-weight: bold; color: var(--text-muted); margin-bottom: 3px; display: block; }
        .modal-stats-filters select { width: 100%; min-width: 150px; padding: 8px; border-radius: 6px; border: 1px solid var(--border-strong); font-size: 14px; outline: none; background: var(--bg-main); color: var(--text-main);}
        .filter-group { flex: 1; min-width: 200px; }
        .modal-stats-body { padding: 20px; overflow-y: auto; flex: 1; background: var(--bg-main); }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; }
        .stat-card { 
            background: var(--bg-panel); padding: 15px; border-radius: 10px; border: 1px solid var(--border-strong); 
            box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; position: relative; overflow: hidden; 
        }
        .stat-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .stat-name { font-weight: 800; font-size: 14px; color: var(--primary-text); margin-bottom: 10px; border-bottom: 1px dashed var(--border-light); padding-bottom: 5px; text-transform: uppercase; }
        .stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 6px; color: var(--text-main); }
        .stat-badge { font-weight: bold; padding: 3px 8px; border-radius: 12px; font-size: 11px; }
        .b-red { background: #ffebee; color: #c62828; }
        .b-green { background: #e8f5e9; color: #2e7d32; }
        .b-blue { background: #e3f2fd; color: #1565c0; }
        .b-gray { background: #f5f5f5; color: #616161; }
        
        .stat-balance { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; font-weight: bold; font-size: 13px; }
        .balance-positivo { color: #2e7d32; }
        .balance-negativo { color: #c62828; }
        .balance-neutro { color: #616161; }
        
        .stat-ranking { position: absolute; top: 0; right: 0; background: var(--primary); color: white; font-size: 10px; font-weight: bold; padding: 3px 8px; border-bottom-left-radius: 8px; }