/* ==========================================================
   SISTEMA DE TEMAS (VARIABLES CSS)
   ========================================================== */
:root { 
    --primary: #5e35b1; --primary-light: #f3e5f5; --primary-hover: #ede7f6;
    --danger: #e57373; --success: #81c784; --info: #64b5f6; --warning: #ffd54f; --gray: #9e9e9e;
    --bg-main: #faf9fc; --bg-panel: #ffffff; --text-main: #333333; --text-muted: #757575;
    --border-strong: #d1c4e9; --border-light: #f4f0fa;
}

body.theme-generic {
    --primary: #0066cc; --primary-light: #f4f6f8; --primary-hover: #f8f9fa;
    --danger: #dc3545; --success: #28a745; --info: #17a2b8; --warning: #ffc107; --gray: #6c757d;
    --bg-main: #f0f2f5; --bg-panel: #ffffff; --text-main: #333333; --text-muted: #6c757d;
    --border-strong: #ced4da; --border-light: #e9ecef;
}

body.theme-dark {
    --primary: #b39ddb; --primary-light: #2c2c36; --primary-hover: #353540;
    --danger: #ef5350; --success: #66bb6a; --info: #29b6f6; --warning: #ffa726; --gray: #757575;
    --bg-main: #121212; --bg-panel: #1e1e1e; --text-main: #e0e0e0; --text-muted: #aaaaaa;
    --border-strong: #444444; --border-light: #2d2d2d;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-main); color: var(--text-main); margin: 0; padding: 15px; transition: background 0.3s; overflow-x: hidden;}
.contenedor { max-width: 100%; background: var(--bg-panel); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid var(--border-light); overflow-x: hidden;}

.auth-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border-strong); flex-wrap: wrap; gap: 10px;}
.user-profile { display: flex; align-items: center; gap: 10px; background: var(--primary-light); padding: 5px 15px; border-radius: 20px; border: 1px solid var(--border-strong); }
.user-profile img { width: 30px; height: 30px; border-radius: 50%; }
.user-profile span { font-size: 14px; font-weight: bold; color: var(--primary); }
.tenant-badge { background: #ffebee; color: var(--danger); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; border: 1px solid var(--danger); margin-left: 10px;}

/* ESTILOS DEL TOOLBAR */
.toolbar-wrapper { background: var(--bg-main); padding: 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid var(--border-strong); transition: 0.3s; }
.toolbar-main { display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }

/* Contenedor de Opciones Avanzadas */
.toolbar-advanced { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-strong); gap: 15px; flex-wrap: wrap; align-items: flex-end; animation: fadeIn 0.3s ease-in-out; }

.group-box { display: flex; flex-direction: column; gap: 5px; }
label { font-size: 11px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px;}

.btn-cluster { display: flex; flex-direction: column; gap: 5px; justify-content: flex-end; }
.btn-cluster label { font-size: 11px; font-weight: bold; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0; }
.btn-cluster .botones { display: flex; gap: 5px; flex-wrap: wrap; }
.acciones-globales { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

select, input, textarea { padding: 8px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 14px; outline:none; background: var(--bg-panel); color: var(--text-main); }
select:focus, input:focus { border-color: var(--primary); }
.select-profe { border-color: var(--primary); font-weight: bold; color: var(--primary); background: var(--primary-light); }
.select-profe:disabled { opacity: 0.7; cursor: not-allowed; background: var(--border-light); border-color: var(--border-strong); color: var(--text-muted); }
.select-periodo { border-color: var(--info); font-weight: bold; color: var(--info); background: var(--bg-panel); width: 80px;}

.btn { padding: 9px 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; transition: 0.2s; font-size: 13px; }
.btn-primary { background: var(--primary); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-info { background: var(--info); color: white; }
.btn-warning { background: var(--warning); color: #333; }
.btn-gray { background: var(--gray); color: white; }
.btn-cloud-save { background: var(--success); color: white; }
.btn-cloud-load { background: var(--info); color: white; }
.btn-outline-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: white; }

/* UTILIDADES VISUALES */
@media (min-width: 769px) { .hide-pc { display: none !important; } }
.btn-opciones-movil { display: none; } /* Oculto por defecto en PC */

/* NUEVA BOTONERA INFERIOR MÓVIL */
.bottom-nav-mobile { display: none; }

/* ==========================================================
   TABLA Y COLUMNAS STICKY (FIJAS PARA SCROLL)
   ========================================================== */
.tabla-scroll { width: 100%; overflow-x: auto; max-height: 65vh; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-panel); position: relative; -webkit-overflow-scrolling: touch;}

/* Ajuste matemático para Safari (iOS) */
table, th, td { box-sizing: border-box; }

table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1000px; background: var(--bg-panel); }

/* Encabezado general */
thead th { position: -webkit-sticky; position: sticky; top: 0; background: var(--primary-light); color: var(--primary); border-bottom: 2px solid var(--border-strong); border-right: 1px solid var(--border-strong); padding: 8px; font-size:13px; z-index: 20; background-clip: padding-box; }

/* Celdas del cuerpo */
td { border-bottom: 1px solid var(--border-strong); border-right: 1px dashed var(--border-light); text-align: center; vertical-align: middle; background: var(--bg-panel); color: var(--text-main); transition: background 0.2s; padding: 4px; }
tbody tr:hover td { background-color: var(--primary-hover); }

/* 1ra columna fija (#) */
th:nth-child(1), td:nth-child(1) { position: -webkit-sticky !important; position: sticky !important; left: 0 !important; border-right: 1px solid var(--border-strong); width: 40px; min-width: 40px; max-width: 40px; background-clip: padding-box; }
td:nth-child(1) { background-color: var(--bg-panel) !important; z-index: 10; }
th:nth-child(1) { background-color: var(--primary-light) !important; z-index: 30; } 

/* 2da columna fija (Estudiante) */
th:nth-child(2), td:nth-child(2) { position: -webkit-sticky !important; position: sticky !important; left: 40px !important; border-right: 2px solid var(--border-strong); width: 160px; min-width: 160px; max-width: 160px; text-align: left; padding: 0; background-clip: padding-box; }
td:nth-child(2) { background-color: var(--bg-panel) !important; z-index: 10; box-shadow: 2px 0 5px rgba(0,0,0,0.05); transition: background-color 0.3s;}
th:nth-child(2) { background-color: var(--primary-light) !important; z-index: 30; padding: 8px; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }

/* EFECTOS DE ASISTENCIA DIARIA */
.est-falta td:nth-child(2) { background-color: #ffebee !important; border-left: 4px solid var(--danger); }
.est-tarde td:nth-child(2) { background-color: #fff8e1 !important; border-left: 4px solid var(--warning); }
.est-excusa td:nth-child(2) { background-color: #e1f5fe !important; border-left: 4px solid var(--info); }

/* Efecto hover uniforme para celdas sticky */
tbody tr:hover td:nth-child(1), tbody tr:hover td:nth-child(2) { background-color: var(--primary-hover) !important; }

/* Prioridad de Hover sobre Asistencia */
tbody tr.est-falta:hover td:nth-child(2) { background-color: #ffcdd2 !important; }
tbody tr.est-tarde:hover td:nth-child(2) { background-color: #ffecb3 !important; }
tbody tr.est-excusa:hover td:nth-child(2) { background-color: #b3e5fc !important; }

.fila-oculta td { background-color: var(--bg-main) !important; opacity: 0.6; }
.fila-oculta td:nth-child(1), .fila-oculta td:nth-child(2) { background-color: var(--bg-main) !important; }
.fila-oculta .nombre-est { text-decoration: line-through; color: var(--text-muted); }

/* Botones de Alumno Limpios (Sin duplicados) */
.btn-accion-est, .btn-mover-est, .btn-editar-est, .btn-editar-ficha, .btn-perfil-est { 
    background: var(--bg-main); border: 1px solid var(--border-strong); border-radius: 4px; 
    cursor: pointer; opacity: 0.8; transition: 0.2s; font-size: 13px; padding: 4px; color: var(--primary);
}
.btn-accion-est:hover, .btn-mover-est:hover, .btn-editar-est:hover, .btn-editar-ficha:hover, .btn-perfil-est:hover { 
    opacity: 1; background: var(--primary-light); transform: scale(1.1); border-color: var(--primary); 
}

/* Menú Móvil Colapsable (Oculto en PC por defecto) */
.acciones-alumno-container { display: none !important; }
.btn-toggle-acciones-movil { display: none !important; }

.aprueba { color: var(--success) !important; font-weight: bold;}
.reprueba { color: var(--danger) !important; font-weight: bold;}

/* ESTILOS ENCABEZADO COLAPSABLE */
.header-evidencia { display: flex; flex-direction: column; gap: 4px; min-width: 100px; transition: 0.3s;}
.header-evidencia.colapsado .elemento-colapsable { display: none !important; }

.btn-colapsar-header {
    background: var(--bg-panel); border: 1px solid var(--primary); color: var(--primary);
    border-radius: 4px; font-size: 10px; cursor: pointer; padding: 2px 6px; font-weight: bold;
    margin-left: 10px; transition: 0.2s; float: right;
}
.btn-colapsar-header:hover { background: var(--primary); color: white; }

.input-titulo { border: none; background: transparent; font-weight: bold; text-align: center; color: var(--primary); font-size: 12px; width: 100%; padding: 2px; box-sizing: border-box; }
.input-fecha { border: none; background: var(--bg-main); font-size: 9px; color: var(--text-muted); text-align: center; border-radius: 4px; padding: 2px; box-sizing: border-box; }
.input-actividad { border: 1px solid var(--border-strong); background: var(--bg-panel); color: var(--text-main); font-size: 10px; text-align: center; border-radius: 4px; padding: 3px; transition: 0.3s; box-sizing: border-box; }

.wrapper-porcentaje { display: flex; align-items: center; justify-content: center; gap: 2px; background: var(--bg-main); border-radius: 4px; border: 1px solid var(--border-light); padding: 2px; margin-top: 2px;}
.input-porcentaje { border: none; background: transparent; font-size: 9px; color: var(--info); font-weight: bold; text-align: right; width: 30px; padding: 0;}
.lbl-porcentaje { font-size: 9px; color: var(--text-muted); }

.cell-nota { display: flex; flex-direction: column; padding: 2px 0; }
.nota-input { width: 100%; border: none; text-align: center; font-size: 15px; font-weight: bold; background: transparent; outline: none; color: var(--text-main); padding: 2px; box-sizing: border-box;}
.obs-input { width: 90%; border: none; background: transparent; font-size: 9px; color: var(--text-muted); font-style: italic; text-align: center; outline: none; margin: 0 auto; padding: 2px; box-sizing: border-box;}

.asis-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; background: var(--bg-main);}
.asis-btn { padding: 4px 8px; cursor: pointer; font-size: 11px; font-weight: bold; color: var(--text-muted); border-right: 1px solid var(--border-strong); transition: 0.2s; }
.asis-btn:last-child { border-right: none; }
.asis-btn input { display: none; }
.active-P { background: var(--success); color: white; border-color: var(--success); }
.active-F { background: var(--danger); color: white; border-color: var(--danger); }
.active-T { background: var(--warning); color: #333; border-color: var(--warning); }
.active-E { background: var(--info); color: white; border-color: var(--info); }
.col-asistencia-resumen { background: var(--primary-light); font-size: 10px; line-height: 1.2; color: var(--text-muted); padding: 4px; transition: 0.2s; cursor: pointer;}
.col-asistencia-resumen:hover { background: var(--border-strong); }

/* MODALES Y CAMPANA */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100; backdrop-filter: blur(2px); }
.modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-panel); padding: 25px; border-radius: 12px; border: 1px solid var(--border-strong); z-index: 101; width: 450px; max-width:90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.2);}
.loader-overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg-panel); z-index: 9999; justify-content: center; align-items: center; flex-direction: column; color: var(--primary); opacity: 0.9;}

.ficha-contacto { background: var(--bg-main); border: 1px solid var(--border-strong); border-radius: 8px; padding: 15px; margin-top: 15px; }
.ficha-contacto p { margin: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--border-light); padding-bottom: 5px;}
.ficha-contacto span.lbl { font-weight: bold; color: var(--primary); width: 130px; display: inline-block;}

.contenedor-campana { position: relative; margin-right: 15px; display: none; } 
.btn-campana { background: transparent; border: none; font-size: 22px; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center;}
.badge-notif { position: absolute; top: 0px; right: -2px; background: var(--danger); color: white; border-radius: 50%; font-size: 10px; font-weight: bold; width: 18px; height: 18px; display: none; justify-content: center; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}

.panel-notificaciones { display: none; position: absolute; top: 40px; right: -50px; background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.15); width: 340px; z-index: 1000; max-height: 400px; overflow-y: auto; text-align: left; }
.notif-item { padding: 15px; border-bottom: 1px solid var(--border-light); font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px;}
.notif-item:last-child { border-bottom: none; }
.notif-item.no-leida { background: var(--primary-light); }
.notif-btn { background: var(--primary); color: white; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; text-decoration: none; text-align: center; display: inline-block; font-weight: bold;}
.notif-btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: bold;}

/* MODO VISTA TARJETAS (FOCO) */
.vista-tarjetas { display: none; flex-direction: column; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; }
.tarjeta-estudiante { background: var(--bg-panel); border: 2px solid var(--primary); border-radius: 12px; padding: 20px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin-bottom: 20px;}
.tarjeta-estudiante h3 { margin-top: 0; color: var(--primary); text-align: center; border-bottom: 1px solid var(--border-strong); padding-bottom: 10px; font-size: 18px;}

.nota-row-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border-light); }
.nota-row-card .titulo-ev { font-weight: bold; font-size: 13px; color: var(--text-main); flex: 1;}
.nota-row-card .inputs-ev { display: flex; gap: 10px; flex: 2; align-items: center;}

.controles-nav-tarjeta { display: flex; justify-content: space-between; width: 100%; margin-bottom: 10px; }
.controles-nav-tarjeta button { padding: 10px 20px; font-size: 16px; border-radius: 8px; border: none; background: var(--primary-light); color: var(--primary); font-weight: bold; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: 0.2s;}
.controles-nav-tarjeta button:hover { background: var(--primary); color: white; transform: scale(1.05);}
.controles-nav-tarjeta button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; background: var(--border-strong); color: var(--text-muted);}

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

/* RESPONSIVO MÓVIL */
@media (max-width: 768px) {
    body { padding: 5px; margin-bottom: 70px; } 
    .contenedor { padding: 10px; border-radius: 8px; box-shadow: none; border:none; }
    .auth-bar { margin-bottom: 10px; padding-bottom: 10px; flex-direction: column; align-items: stretch; gap: 8px;}
    .auth-bar > div:first-child { display: flex; justify-content: space-between; align-items: center; }
    .auth-bar h2 { font-size: 16px; margin:0;}
    .controles-tema-user { display: flex; justify-content: space-between; width: 100%; gap: 5px; flex-wrap: wrap;}
    .user-profile { flex-grow: 1; justify-content: space-between; width: 100%; } 
    
    .toolbar-wrapper { padding: 10px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 10px; }
    .toolbar-main { flex-direction: row; align-items: flex-end; gap: 8px; justify-content: space-between; }
    .toolbar-main > div.group-box { flex-direction: column; align-items: stretch; width: 100%; max-width: none !important; flex-grow: 1;}
    .toolbar-main select, .toolbar-main input { width: 100%; font-size: 15px; padding: 10px; }
    
    .hide-mobile { display: none !important; }

    .toolbar-advanced { flex-direction: column; align-items: stretch !important; margin-top: 5px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
    .toolbar-advanced.abierto { display: flex !important; }
    
    .group-box label { font-size: 11px; margin-bottom: 4px; }
    
    .btn-cluster { width: 100%; border: 1px solid var(--border-light); padding: 10px; border-radius: 8px; background: #fafafa; }
    .btn-cluster label { display: block !important; margin-bottom: 8px; color: var(--primary); }
    .btn-cluster .botones { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .btn-cluster .botones .btn { padding: 10px 4px !important; font-size: 11px !important; width: 100%; box-sizing: border-box;}
    
    /* REFUERZO DE COLUMNAS FIJAS PARA MÓVIL */
    .tabla-scroll { width: 100%; overflow-x: auto; max-height: 65vh; border-radius: 6px; margin-bottom: 20px;}
    thead th { font-size: 11px; padding: 4px; position: -webkit-sticky; position: sticky; top: 0; z-index: 20;}
    
    th:nth-child(1), td:nth-child(1) { position: -webkit-sticky !important; position: sticky !important; left: 0 !important; z-index: 15; background-color: var(--bg-panel) !important; }
    th:nth-child(1) { background-color: var(--primary-light) !important; z-index: 35; }
    
    th:nth-child(2), td:nth-child(2) { position: -webkit-sticky !important; position: sticky !important; left: 40px !important; z-index: 15; background-color: var(--bg-panel) !important; width: 140px; min-width: 140px; max-width: 140px; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }
    th:nth-child(2) { background-color: var(--primary-light) !important; z-index: 35; box-shadow: 2px 0 5px rgba(0,0,0,0.05); }

    /* ESTILOS DEL NUEVO BOTÓN CUADRADO DE OPCIONES */
    .btn-toggle-acciones-movil { 
        display: inline-flex !important; font-size: 12px; background: var(--primary-light); 
        color: var(--primary); border: 1px solid var(--primary); border-radius: 4px; 
        padding: 4px; margin-top: 2px; font-weight: bold; cursor: pointer;
        width: 26px; height: 26px; justify-content: center; align-items: center;
    }

    .acciones-alumno-container { 
        display: none !important; 
        gap: 4px; 
        margin-top: 4px; 
        width: 100%; 
        flex-wrap: wrap; 
    }
    .acciones-alumno-container.mostrar { display: flex !important; }

    .bottom-nav-mobile { 
        display: flex; justify-content: space-around; align-items: center; position: fixed; 
        bottom: 0; left: 0; width: 100%; background: var(--bg-panel); 
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; padding: 8px 5px; 
        box-sizing: border-box; border-top: 1px solid var(--border-strong);
    }
    .bottom-nav-btn {
        display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent;
        border: none; color: var(--text-muted); font-size: 10px; font-weight: bold; padding: 5px;
        cursor: pointer; transition: 0.2s; flex: 1; /* Permite que los botones se distribuyan equitativamente */
    }
    .bottom-nav-btn span.icon { font-size: 20px; margin-bottom: 2px;}
    .bottom-nav-btn.primary { color: var(--primary); }
    .bottom-nav-btn.warning { color: #f57f17; }
    .bottom-nav-btn.success { color: var(--success); }
    .bottom-nav-btn.info { color: var(--info); }
    .bottom-nav-btn:active { transform: scale(0.95); }

    .panel-notificaciones { position: fixed; top: 60px; left: 5%; right: auto; width: 90%; max-width: none; z-index: 9999; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
}

/* ==========================================
   REGLAS DE IMPRESIÓN DEL ACTA (FPP-01)
   ========================================== */
#areaImpresion { display: none; background: white; color: black; font-family: Arial, sans-serif; font-size: 11px; line-height: 1.3; }

@media print {
    body { background: white; margin: 0; padding: 0; }
    .contenedor, #visorImagen, #loader, .modal, .modal-overlay { display: none !important; }
    
    #areaImpresion { display: block !important; padding: 10px 15px; width: 100%; box-sizing: border-box; }
    
    .print-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
    .print-table th, .print-table td { border: 1px solid black; padding: 4px; text-align: left; vertical-align: top; }
    
    .print-title { text-align: center; font-weight: bold; font-size: 11px; margin: 8px 0 3px 0; text-decoration: underline; text-decoration-thickness: 1px;}
    
    .print-box { border: 1px solid black; padding: 6px; margin-bottom: 6px; min-height: 30px; white-space: pre-wrap; font-size: 11px;}
    
    .avoid-break { page-break-inside: avoid; }
    
    .check-box { display: inline-block; width: 10px; height: 10px; border: 1px solid black; vertical-align: middle; margin-left: 4px; text-align: center; line-height: 10px; font-weight: bold; font-size: 9px;}
    .linea-blanca { border-bottom: 1px dotted #999; height: 16px; width: 100%; }
    
    .table-firmas { width: 100%; border-collapse: collapse; margin-top: 4px; page-break-inside: avoid; }
    .table-firmas td { border: 1px solid black; height: 45px; vertical-align: bottom; font-size: 9px; padding: 4px; width: 25%; text-align: center;}
    .header-firmas { border: 1px solid black; border-bottom: none; text-align: center; font-weight: bold; padding: 2px; font-size: 10px; background: #e0e0e0 !important; -webkit-print-color-adjust: exact;}

    #printLogo { max-height: 60px; max-width: 80px; object-fit: contain; display: block; margin: 0 auto; }
}