/* === theme-light.css === */
/**
 * CSS Tema Claro - Estilos mínimos para aplicación
 * Fondo, tipografía y colores básicos para tema claro
 */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-color: #333333;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
}

body {
    background-color: var(--bg-secondary);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Header (tema light) */
#app-header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

#app-header .header-title {
    color: var(--text-color);
    font-weight: 600;
}

#app-header .exit-icon {
    color: var(--text-color);
}

/* Pantallas (tema light) */
.screen-frame {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.screen-frame .screen-title {
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.screen-frame .form-group label {
    color: var(--text-color);
}

.screen-frame .form-group input[type="text"],
.screen-frame .form-group input[type="password"] {
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-color);
}

.screen-frame .form-group input::placeholder {
    color: var(--text-secondary);
}

.screen-frame .login-button {
    background-color: var(--primary-color, #0066cc);
    color: #ffffff;
}

.screen-frame .login-button:hover {
    background-color: var(--primary-hover, #0052a3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}

/* Menú principal: sin fondo primario (evitar “ataque visual”) */
.screen-frame.screen-frame-menu .menu-button {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--text-color);
}

.screen-frame.screen-frame-menu .menu-button:hover {
    background-color: var(--bg-secondary, #f8f9fa);
    border-color: rgba(0, 102, 204, 0.30);
    transform: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.screen-frame.screen-frame-menu .menu-button:active {
    background-color: #e9f1fb;
    border-color: rgba(0, 102, 204, 0.55);
    color: var(--primary-color, #0066cc);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.10);
}

.screen-frame.screen-frame-menu .menu-button:focus {
    color: var(--primary-color, #0066cc);
}

.screen-frame.screen-frame-menu .menu-button:focus-visible {
    outline: none;
    border-color: rgba(0, 102, 204, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.10);
}

.screen-frame.screen-frame-menu .menu-button .menu-icon {
    background-color: transparent;
    border: 0;
    color: inherit;
}

/* Enlace (tema claro: azul y subrayado) */
.enlace {
    color: var(--primary-color, #0066cc);
    text-decoration: underline;
    cursor: pointer;
}

.enlace:hover {
    color: var(--enlace-hover) !important;
}

/* Cabecera: alumno suplantado debe verse normal, pero en hover como enlace */
.header-alumno-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.header-alumno-link:hover {
    color: var(--enlace-hover) !important;
    text-decoration: underline;
}

.record-table--mobile .table-record-card-cell .table-data-cell.enlace:hover {
    color: var(--enlace-hover);
}

/* Listview: mismo aspecto de enlace que en celdas td (color heredado de fila con !important) */
.record-table--mobile .table-record-card-cell .table-data-cell.enlace {
    color: var(--primary-color, #0066cc) !important;
    text-decoration: underline;
    cursor: pointer;
}

/* ========== UI theme (from ui-light) ========== */
:root {
    --notification-bg: #ffffff;
    --notification-border: #e0e0e0;
    --notification-shadow: rgba(0, 0, 0, 0.15);
    --modal-bg: #ffffff;
    --modal-shadow: rgba(0, 0, 0, 0.2);
    --modal-border: #e0e0e0;
    --text-muted: #999999;
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --enlace-hover: #0066cc;
    --success-color: #28a745;
    --error-color: #dc3545;
    --warning-color: #ffc107;
    --hover-color: #f5f5f5;
    --header-logout-icon-size: 20px;
    --header-user-label-right-offset: 8px;
    --header-user-label-font-size: 11px;
    --header-user-label-top-offset: 4px;
    --header-logout-btn-color: var(--text-color, #333333);
    --header-logout-btn-hover-bg: var(--hover-color, #f5f5f5);
    --header-user-label-color: var(--text-secondary, #666666);
    --calendar-day-free-bg: #00c853;
    --calendar-day-partial-bg: #7b2fbe;
    --calendar-day-full-bg: #d50000;
    --calendar-day-incidencia-bg: #1565c0;
    --calendar-day-incidencia-hover-text: #90caf9;
    --calendar-day-disabled-bg: #eeeeee;
    --calendar-day-state-text: #ffffff;
    --calendar-my-reserva-accent: #0d47a1;
    --calendar-my-reserva-bg: orange;
    --calendar-my-reserva-border: cornsilk;
}

/* Navegación en tablas de registros (flechas de scroll) */
:root {
    --table-nav-bg: rgba(33, 150, 243, 0.8);
    --table-nav-border: rgba(255, 255, 255, 0.4);
    --table-nav-hover: rgba(33, 150, 243, 0.9);
    --table-nav-active: rgba(33, 150, 243, 1.0);
    --table-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --table-nav-drag-bg: rgba(33, 150, 243, 0.05);
    --table-nav-drag-border: rgba(255, 255, 255, 0.4);
    --table-nav-drag-shadow: 0 0 12px rgba(33, 150, 243, 0.3);
}

.notification {
    background: var(--notification-bg);
    border-color: var(--notification-border);
    box-shadow: 0 4px 12px var(--notification-shadow);
}

.modal-dialog {
    background-color: var(--modal-bg);
    box-shadow: 0 8px 32px var(--modal-shadow);
}

.modal-header {
    border: 1.5px solid #297ce6;
    background: #0000ff9e;
    color: white;
}

.modal-dialog-danger .modal-header {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.modal-dialog-danger .modal-title {
    font-weight: 700;
}

.modal-dialog-danger .modal-close {
    color: #ffffff !important;
    font-weight: 700;
}

.modal-footer {
    border-top-color: var(--modal-border);
}

.modal-message {
    color: var(--text-secondary);
}

.notification-title {
    color: var(--text-color);
}

.notification-message {
    color: var(--text-secondary);
}

.notification-close {
    color: var(--text-muted);
}

.notification-close:hover {
    background: var(--hover-color);
    color: var(--text-color);
}

.modal-close {
    color: white !important;
    font-weight: bold;
    font-size: 150%;
}

.modal-close:hover {
    background: var(--hover-color);
    color: black !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--notification-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--hover-color);
    border-color: var(--border-color);
}

.btn-danger {
    background-color: var(--error-color);
    border-color: var(--error-color);
    color: white;
    font-weight: bold;
}

.notification-success .notification-icon {
    color: var(--success-color);
}

.notification-error .notification-icon {
    color: var(--error-color);
}

.notification-warning .notification-icon {
    color: var(--warning-color);
}

.notification-info .notification-icon {
    color: var(--primary-color);
}

.ordenable.sortable-insert-before {
    border-top-color: var(--primary-color);
}

.ordenable.sortable-insert-after {
    border-bottom-color: var(--primary-color);
}

.sortable-drag-clone {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#app-header .header-back-btn,
#app-header .header-logout-btn {
    color: var(--header-logout-btn-color);
}

#app-header .header-back-btn svg,
#app-header .header-logout-btn svg {
    fill: var(--header-logout-btn-color);
}

/* Sin cambio de aspecto en hover/active en botones de cabecera */
#app-header .header-back-btn:hover,
#app-header .header-back-btn:hover svg {
    color: var(--primary-color);
    fill: var(--primary-color);
}

#app-header .header-user-label {
    color: var(--header-user-label-color);
}

/* TableRenderer theme (tema claro) */

.virtual-scroll-container {
    border: 1px solid #c9ced6 !important;
    box-sizing: border-box !important;
    overflow-x: auto;
    box-shadow: 3px 4px 8px rgba(151, 132, 132, 0.2) !important;
    background: var(--bg-primary, #ffffff);
    position: relative;
}

.virtual-scroll-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #c9ced6;
    pointer-events: none;
}

.table-column-header:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.sort-icon {
    opacity: 0.3;
}

.table-column-header:hover .sort-icon {
    opacity: 0.6;
}

thead {
    background-color: #f3f4f6;
    border-bottom: 2px solid #e5e7eb;
}

.table-action-button {
    color: #6b7280;
}

.table-action-button:hover {
    background-color: #e5e7eb;
}

.drag-handle:hover {
    background-color: #f3f4f6;
}

.table-row.drag-over {
    border-top: 2px solid #3b82f6;
}

.virtual-scroll-thead-sticky {
    background: white;
    box-shadow: 2px 2px 5px lightgray;
}

.header-title-counter {
    color: #666;
}

.table-header-select-button {
    color: var(--text-color, #333);
}

.table-header-select-button:hover {
    color: var(--primary-color, #0066cc);
}

.table-header-select-button:active {
    opacity: 0.8;
}

.table-data-_recordNumber,
.table-record-number-cell {
    color: #9ca3af;
    font-size: 80% !important;
    text-align: center;
    vertical-align: middle;
}

/* Celdas de tabla clicables; columna de arrastre excluida */
.table-row .table-data-cell {
    cursor: pointer;
}

.table-row .table-data-_recordNumber {
    cursor: default;
}

/* ----- Filtro de búsqueda (tema) ----- */
.results-filter-container {
    background-color: var(--neumorph-bg);
    box-shadow: inset 2px 2px 5px var(--neumorph-dark-shadow),
        inset -2px -2px 5px var(--neumorph-light-shadow);
}

.filter-input {
    background-color: var(--bg-primary);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}

.filter-input:focus {
    outline: none;
    border-color: #374151;
    box-shadow: 0 0 0 3px rgba(55, 65, 81, 0.1);
}

.filter-clear-button {
    color: var(--text-muted);
}

.filter-clear-button:hover {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

.filter-input-icon-search {
    color: var(--text-muted);
}

.filter-help-icon {
    color: var(--primary-color);
    background-color: var(--neumorph-bg);
    box-shadow: 2px 2px 5px var(--neumorph-dark-shadow),
        -2px -2px 5px var(--neumorph-light-shadow);
}

.filter-help-icon:hover {
    color: var(--primary-light);
}

.filter-help-tooltip {
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-light);
}

.filter-help-tooltip p {
    color: var(--text-primary);
}

/* ----- Pantalla (screen header / título / contador) ----- */
.screen-header {
    border-bottom-color: var(--neumorph-dark-shadow);
}

.screen-title {
    color: var(--primary-color);
}

.screen-counter {
    color: var(--gray-color);
}

.filter-action-btn {
    background-color: var(--neumorph-bg);
    color: var(--neumorph-text);
    box-shadow: 1px 1px 2px var(--neumorph-dark-shadow),
        -1px -1px 2px var(--neumorph-light-shadow);
}

.filter-action-btn:hover {
    background-color: var(--neumorph-hover-bg);
}

.filter-action-btn:active {
    background-color: var(--neumorph-active-bg);
    box-shadow: inset 1px 1px 2px var(--neumorph-dark-shadow),
        inset -1px -1px 2px var(--neumorph-light-shadow);
}

.filter-content {
    background-color: white;
}

/* Widget plugin: CALENDARIO (tema light / color) */
.calendar-selection-label {
    color: var(--text-color, #333333);
}

.calendar-resource-select {
    border-color: var(--border-color, #e0e0e0);
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-color, #333333);
}

.calendar-month-card {
    border-color: #cacaca;
    background-color: var(--bg-primary, #ffffff);
    box-shadow: 1px 1px 3px lightgray;
}

.calendar-month-title {
    color: var(--text-color, #333333);
}

.calendar-month-table th {
    color: var(--text-secondary, #666666);
}

.calendar-day-btn {
    border-color: var(--border-color, #e0e0e0);
    color: var(--text-color, #333333);
    background-color: var(--bg-primary, #ffffff);
}

.calendar-day-btn.is-free-day {
    background-color: var(--calendar-day-free-bg);
    color: var(--calendar-day-state-text);
    font-weight: bold;
}

.calendar-day-btn.is-partial-day {
    background-color: var(--calendar-day-partial-bg);
    color: var(--calendar-day-state-text);
    font-weight: bold;
}

.calendar-day-btn.is-full-day {
    background-color: var(--calendar-day-full-bg);
    color: var(--calendar-day-state-text);
    font-weight: bold;
}

.calendar-day-btn.is-holiday-day {
    background-color: var(--calendar-day-full-bg);
    color: var(--calendar-day-state-text);
    font-weight: bold;
    cursor: default;
}

.calendar-day-btn.is-incidencia-day {
    background-color: var(--calendar-day-incidencia-bg);
    color: var(--calendar-day-state-text);
    font-weight: bold;
}

.calendar-day-btn.is-incidencia-day:hover:not(:disabled) {
    background-color: var(--calendar-day-incidencia-bg);
    border-color: var(--primary-color, #0066cc);
    color: var(--calendar-day-incidencia-hover-text);
}

.calendar-day-btn.has-my-reserva {
    font-weight: 700;
    background-color: var(--calendar-my-reserva-bg);
    border: 1.5px dashed var(--calendar-my-reserva-border);
    color: var(--calendar-my-reserva-text, #ffffff);
}

.calendar-day-btn.has-my-reserva:hover:not(:disabled) {
    background-color: var(--calendar-my-reserva-bg);
    border-color: var(--calendar-my-reserva-border);
    color: var(--calendar-my-reserva-text, #ffffff);
}

.calendar-day-btn.is-disabled {
    background-color: var(--calendar-day-disabled-bg);
    color: var(--text-secondary, #666666);
}

.calendar-day-btn:hover:not(:disabled) {
    border-color: var(--primary-color, #0066cc);
    color: var(--primary-color, #0066cc);
}

.calendar-day-btn.selected {
    background-color: var(--primary-color, #0066cc);
    border-color: var(--primary-color, #0066cc);
    color: #ffffff;
}

.calendar-slots-hint {
    color: var(--text-secondary, #666666);
}

.calendar-slots-nav-date {
    color: var(--text-main, #111111);
}

.calendar-slots-nav-btn {
    background-color: #ffffff;
    border-color: var(--border-color, #e0e0e0);
    color: var(--text-main, #111111);
}

.calendar-slots-nav-btn:hover {
    background-color: #f7f7f7;
}

.calendar-slots-table th,
.calendar-slots-table td {
    border-color: #aeaeae;
}

.calendar-slots-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
    box-shadow: 2px 2px 8px gray;
}

tr.calendar-slot-row:hover {
    border: 1.5px dashed floralwhite;
}

tr.calendar-slot-row.is-other:hover td,
tr.calendar-slot-row.is-no-disponible:hover td {
    background: red;
    border: 1.5px solid darkred;
    color: white;
}

.calendar-slots-table thead tr {
    background: #555;
    color: white;
}

.calendar-slot-row.is-free:hover td {
    background: green !important;
}

.calendar-slot-row.is-free td {
    font-weight: 700;
    background: #067b0680 !important;
    color: white;
    border: 1.5px solid darkgreen;
}

.calendar-slot-row.is-mine td {
    background: #ff8c00d4;
    font-weight: 700;
    border: 1px solid #ca6f01;
    color: white;
}

.calendar-slot-row.is-mine:hover td {
    background: chocolate;
    border: 1.5px solid black;
}

.calendar-slot-row.is-other td,
.calendar-slot-row.is-no-disponible td {
    color: white;
    font-weight: 700;
    background: #ff00008c;
    border: 1.5px solid red;
    border-bottom-width: 1.5px;
    border-bottom-style: solid;
    border-bottom-color: red;
    border-bottom: 1.5px solid red;
}

.calendar-slot-row.is-no-disponible td {
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.calendar-slots-dialog-wrap.is-readonly .calendar-slot-row.is-free:hover td {
    background-color: transparent;
}

.calendar-slot-row td {
    cursor: pointer;
}

/* Lista alumnos: colores de fila (onTableRender) */
tr.row-alumno-con-reserva td {
    color: var(--text-color, #333333) !important;
    font-weight: 400 !important;
}

tr.row-alumno-sin-reserva td {
    color: var(--text-muted, #999999) !important;
}

tr.row-alumno-sin-reserva.row-tipo-no0 td {
    font-weight: 700 !important;
}

tr.row-multado.row-tipo-no0 td {
    font-weight: 700 !important;
}

/* === drag-drop-rows-thme-light.css === */
/* Estilos para el plugin de drag & drop de filas */

/* Handle de arrastre en la columna _recordNumber */
.drag-handle {
    cursor: grab;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}

/* Fila siendo arrastrada - se queda en su sitio con marca visual */
.table-row.dragging {
    background-color: #fff3e0;
    border: 2px dashed #ff9800;
    position: relative;
}

.table-row.dragging::after {
    content: '↕';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ff9800;
    font-weight: bold;
    font-size: 16px;
}

/* Línea verde en el bottom de la fila objetivo (movimiento hacia abajo) */
.table-row.drag-target {
    border-bottom: 3px solid #4caf50 !important;
}

/* Línea verde en el top de la fila objetivo (movimiento hacia arriba) */
.table-row.drag-target-top {
    border-top: 3px solid #4caf50 !important;
}

/* Estilos específicos para la columna _recordNumber */
.table-data-_recordNumber {
    text-align: right;
    font-size: 0.9em;
    color: #666;
    vertical-align: middle;
    padding: 8px 12px;
}

.table-data-_recordNumber:hover {
    background-color: #f5f5f5;
}

/* Header de la columna _recordNumber */
.table-column-_recordNumber {
    text-align: right;
    cursor: default !important;
}

.table-column-_recordNumber:hover {
    background-color: transparent !important;
}

.table-column-_recordNumber .sort-icon {
    display: none;
}

/* Indicadores visuales durante el arrastre */
.table-row.dragging .drag-handle {
    cursor: grabbing;
}

/* Animaciones suaves para transiciones */
.table-row {
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Estilos para el cursor durante el arrastre */
body.dragging {
    cursor: grabbing;
}

/* Mejoras visuales para el feedback de arrastre */
.table-row.drag-over::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background-color: #2196f3;
    z-index: 1;
}