/* styles.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    /* Color Palette - Modern & Professional */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;

    --secondary-color: #64748b;
    --secondary-hover: #475569;

    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;

    --background-color: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;

    --border-color: #e2e8f0;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --header-height: 72px;
    --glass-bg: rgba(255, 255, 255, 0.85);
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-color);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--header-height);
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
.info-bar .info {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
}

/* Tooltip Styles */
.tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1e293b;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    box-shadow: var(--shadow-md);
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.header-right button:hover .tooltip,
.header-right .dropbtn:hover .tooltip,
.header-right .header-button:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

.header-right .header-button {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

.header-right .header-button:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Main Container - Elevated Design */
.main-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95%;
    max-width: 1280px;
    margin: 24px auto;
    padding: 40px;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.main-container h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 32px;
    letter-spacing: -0.025em;
}

.logo-upload {
    background-color: #f8f9fa;
    /* Color de fondo más suave */
    padding: 15px;
    /* Padding ajustado */
    border-radius: 8px;
    /* Bordes más redondeados */
    width: 100%;
    max-width: 200px;
    /* Limitar ancho del contenedor del logo */
    margin: 0 auto 15px auto;
    /* Centrar y dar espacio inferior */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0e0e0;
    /* Borde sutil */
}

.logo-upload img {
    width: 80px;
    /* Tamaño ajustado */
    height: 80px;
    /* Tamaño ajustado */
    object-fit: contain;
    /* Para que el logo se vea completo */
}

.info-bar {
    display: none;
}

.info {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #555;
    text-align: center;
}

.action-button {
    background-color: #28a745;
    color: white;
    padding: 10px 15px;
    /* Padding ajustado */
    font-size: 1em;
    /* Tamaño de fuente base */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* width: 100%; */
    /* REVERTIDO: Esta línea se quita para que no afecte a todos los botones */
    transition: background-color 0.3s, transform 0.1s;
    text-align: center;
}

/* Si algunos action-button específicos necesitan ser width: 100%, se aplica a ellos directamente */
.area-actions .action-button,
.button-group .action-button,
.btn-group .action-button

/* Para botones de login/recuperar */
    {
    width: 100%;
}


.action-button:hover {
    background-color: #218838;
    transform: translateY(-1px);
    /* Efecto sutil al pasar el mouse */
}

/* Responsividad */
@media (max-width: 768px) {
    .main-container {
        width: 95%;
        padding: 20px;
    }

    .forms-row {
        flex-direction: column;
        /* Apilar columnas en pantallas pequeñas */
    }

    .form-container {
        width: 100%;
        /* Ocupar todo el ancho */
        margin-bottom: 20px;
        /* Espacio entre contenedores apilados */
    }

    .form-container:last-child {
        margin-bottom: 0;
    }

    .logo-upload img {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 600px) {
    .header h1 {
        font-size: 22px;
        /* Reducido */
    }

    .header p {
        font-size: 12px;
        /* Reducido */
    }

    .main-container h2 {
        font-size: 1.5em;
        /* Reducido */
    }

    .info {
        font-size: 1em;
        /* Reducido */
    }

    .action-button {
        font-size: 0.95em;
        /* Reducido */
    }
}

/* -------------------
   Imported Styles from matematica.html (revisados y unificados)
-------------------- */



.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--glass-bg);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 40px;
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.header-logo-link:hover {
    transform: scale(1.1);
}

.header-left h1 {
    font-size: 1.5rem;
    color: #005a9c;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 0;
}

.header-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.header-logo-est {
    height: 40px;
    max-width: 120px;
    object-fit: contain;
}

.header-center-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
}

.header-info-main {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
    line-height: 1.2;
}

.header-info-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.header-left p {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: -2px;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.header-right .nameadmin,
.header-right .namealumno {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    background: var(--primary-light);
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

/* Dropdown Menu - Modernized */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropbtn:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    background-color: var(--card-bg);
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    animation: slideDown 0.2s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-content.show {
    display: block !important;
}

.dropdown-content div {
    padding: 12px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dropdown-content a {
    color: var(--text-main);
    padding: 12px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-content a:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    padding-left: 24px;
}

/* Utility Cards - Dashboard Style */
.utility-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 24px;
}

/* Action Buttons - Modern Variants */
.action-button,
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.action-button:hover,
.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.action-button:active,
.btn-primary:active {
    transform: translateY(0);
}

.action-button:disabled,
.btn-primary:disabled {
    background-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

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

/* Form Styling - Premium Inputs */
.form-group {
    margin-bottom: 24px;
    width: 100%;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-main);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: all 0.2s ease;
}

.form-group select,
.form-select {
    height: 48px;
    padding: 0 16px;
    line-height: normal;
    /* Para asegurar que el texto no se corte */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Modals - Refined Transitions */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--card-bg);
    margin: auto;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 40px);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: modalAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.close-modal,
.close-stats-modal {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--background-color);
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-modal:hover,
.close-stats-modal:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    transform: rotate(90deg);
}

/* Feedback & Messages */
.flash-toast-container {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flash-toast {
    background: var(--card-bg);
    color: var(--text-main);
    padding: 16px 24px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary-color);
    font-weight: 500;
    animation: toastSlide 0.3s ease-out;
}

@keyframes toastSlide {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    border-left-color: var(--success-color);
}

.toast-error {
    border-left-color: var(--error-color);
}

.toast-warning {
    border-left-color: var(--warning-color);
}

.utility-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: left;
}

.utility-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.utility-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.utility-card:hover .utility-card-icon {
    transform: scale(1.1) rotate(-5deg);
}

.utility-card-text h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-main);
}

.utility-card-text p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.utility-card-arrow {
    margin-left: auto;
    color: var(--border-color);
    transition: transform 0.3s ease, color 0.3s ease;
}

.utility-card:hover .utility-card-arrow {
    transform: translateX(4px);
    color: var(--primary-color);
}



.timer,
.counter {
    font-size: 1.1em;
    /* Ligeramente más pequeño */
    margin-top: 5px;
    color: #444;
    /* Color más oscuro */
}

.timer i,
.counter i {
    margin-right: 5px;
}


.pizarra {
    background-color: #f8f9fa;
    /* Fondo más claro */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    /* Sombra más sutil */
    width: 100%;
    margin-top: 15px;
    max-height: 500px;
    /* Esto es para el contexto de ejercicio, no para opciones.html */
    overflow-y: auto;
    /* Esto es para el contexto de ejercicio, no para opciones.html */
    position: relative;
}

.pizarra h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.pizarra p {
    font-size: 1.1em;
    text-align: left;
}

.respuesta {
    padding: 15px;
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.respuesta textarea {
    width: 100%;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    resize: none;
    padding: 10px;
    overflow: hidden;
    line-height: 1.4em;
    /* Mejorado para legibilidad */
}

.buttons-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    gap: 10px;
    /* Espacio entre botones */
}


.modal-content h3,
.modal-content h4 {
    /* Estilos para títulos dentro de modales */
    margin-top: 0;
    margin-bottom: 15px;
    /* Espacio debajo del título */
    color: #333;
    text-align: center;
}

.close-profesora-modal-btn {
    /* Botón de cerrar unificado */
    background-color: transparent;
    /* Hacerlo más sutil, como una 'X' */
    color: #888;
    /* Color gris para la 'X' */
    border: none;
    padding: 0;
    /* Quitar padding si es solo un ícono o texto */
    width: 30px;
    /* Área de click */
    height: 30px;
    /* Área de click */
    line-height: 30px;
    /* Centrar la 'X' si es texto */
    text-align: center;
    font-size: 1.5rem;
    /* Tamaño de la 'X' */
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    /* Distancia desde el borde derecho del .modal-content */
    top: 15px;
    /* Distancia desde el borde superior del .modal-content */
    transition: color 0.2s;
}

.close-profesora-modal-btn:hover {
    color: #333;
    /* Oscurecer al pasar el mouse */
}

.hidden-message {
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Login & Recovery Pages - Modern Minimalist */
body.login-page {
    padding-top: 0;
    overflow: hidden;
    height: 100vh;
}

.login-main,
.login-recover {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    background: radial-gradient(circle at top right, #eff6ff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}

.login-main::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
    top: -300px;
    right: -300px;
}

.login-branding {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 8px;
}

.login-branding .subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.form-container.login-form {
    background-color: var(--card-bg);
    padding: 24px 32px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-color);
    height: auto !important;
}

.form-container h2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.025em;
}

.form-group {
    /* Aplicable a los form-group dentro del .form-container del login */
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    text-align: left;
    font-weight: 500;
    color: #4A5568;
    font-size: 0.95em;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    box-sizing: border-box;
    border: 1px solid #CBD5E0;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    border-color: #3182CE;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

.captcha-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding: 16px;
    background: var(--background-color);
    border-radius: var(--border-radius-md);
}

.captcha-container span {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.captcha-container input {
    width: 90px;
    text-align: center;
    font-weight: 700;
}

.captcha-container input:focus {
    border-color: #3182CE;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-iniciar,
.btn-recuperar {
    padding: 14px;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

.btn-iniciar {
    background-color: var(--primary-color);
    color: white;
}

.btn-iniciar:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-recuperar {
    background-color: var(--background-color);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-recuperar:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* textarea deshabilitado */
.respuesta textarea:disabled {
    background-color: #e9ecef;
    /* Color más suave */
    cursor: not-allowed;
    color: #6c757d;
}

/* Botón sin bordes de TTS */
.tts-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #555;
    /* Color más oscuro */
    transition: color 0.2s ease-in-out;
}

.tts-button:hover i {
    color: #007bff;
    /* Azul al pasar el mouse */
}

.tts-button:focus {
    outline: none;
}

/* Botón de voz */
.voice-button {
    position: absolute;
    top: 15px;
    /* Ajustar según diseño del textarea */
    right: 15px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #555;
    transition: color 0.2s ease-in-out;
}

.voice-button:hover i {
    color: #007bff;
}

.voice-button:focus {
    outline: none;
}

.voice-button.recording i {
    color: red;
    animation: pulseVoice 1s infinite;
}

@keyframes pulseVoice {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


/* -------------------
   Estilos para Modo Profesora (Modal de Chat)
-------------------- */
.modo-profesora-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modo-profesora-modal-content {
    background-color: #fefefe;
    margin: 10vh auto;
    /* Margen vertical reducido */
    padding: 25px;
    border: 1px solid #bbb;
    /* Borde más sutil */
    width: 90%;
    /* Más ancho en pantallas pequeñas */
    max-width: 650px;
    /* Límite */
    border-radius: 10px;
    animation: modalFadeIn 0.4s;
    position: relative;
    /* Para el botón de cerrar */
    display: flex;
    /* Para organizar contenido verticalmente */
    flex-direction: column;
    max-height: 80vh;
    /* Altura máxima */
}


.modo-profesora-header {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Más espacio */
    margin-bottom: 20px;
}

.tipo-ejercicio-select {
    flex: 1;
    padding: 10px;
    /* Más padding */
    font-size: 1em;
    /* Tamaño base */
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.toggle-tts-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #555;
    transition: color 0.2s ease-in-out;
}

.toggle-tts-btn:hover {
    color: #007bff;
}


/* Para la respuesta animada en el modal */
.respuesta-animada {
    /* Aplicado a #ultima-respuesta */
    font-size: 1em;
    /* Tamaño base */
    margin-bottom: 15px;
    /* Más espacio */
    min-height: 100px;
    /* Altura mínima para que no colapse */
    border: 1px solid #ddd;
    padding: 12px;
    /* Más padding */
    border-radius: 5px;
    background-color: #f8f9fa;
    /* Fondo muy claro */
    position: relative;
    flex-grow: 1;
    /* Ocupar espacio disponible */
    overflow-y: auto;
    /* Scroll si el texto es largo */
    line-height: 1.5;
    /* Mejor espaciado */
    white-space: pre-wrap;
    /* Respetar saltos de línea y espacios */
}


.modal-footer {
    text-align: right;
    margin-top: 15px;
    /* Espacio ajustado */
    padding-top: 15px;
    /* Espacio arriba de los botones */
    border-top: 1px solid #eee;
    /* Separador sutil */
}

.modal-footer button {
    padding: 8px 16px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95em;
    /* Ligeramente más pequeño */
    transition: background-color 0.2s;
}

#no-entendi-btn {
    background-color: #ffc107;
    /* Amarillo advertencia */
    color: #212529;
    /* Texto oscuro para contraste */
}

#no-entendi-btn:hover {
    background-color: #e0a800;
}


.floating-activar-profesora {
    position: fixed;
    bottom: 25px;
    /* Más arriba */
    right: 25px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    /* Icono más grande */
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    /* Sombra más pronunciada */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.2s;
}

.floating-activar-profesora:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++ NUEVOS ESTILOS AGREGADOS / AJUSTADOS +++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Botón de enviar (avión de papel) en el main container */
.send-button {
    /* Para el textarea de respuesta principal */
    position: absolute;
    right: 20px;
    bottom: 20px;
    /* Ajustar para que no choque con el textarea expandido */
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: color 0.2s ease-in-out;
    z-index: 5;
    /* Asegurar que esté sobre el textarea */
}

.send-button:hover i {
    color: #007bff;
}

.send-button:focus {
    outline: none;
}


/* Ajustes .respuesta para ubicar micrófono abajo a la izquierda y 
   el botón enviar a la derecha, estilo "chat" */
.respuesta {
    /* Contenedor del textarea principal y sus botones */
    display: flex;
    align-items: flex-end;
    /* Alinear botones con la parte inferior del textarea */
    justify-content: center;
    position: relative;
}

/* Micrófono en la esquina inferior izquierda (main) */
.respuesta .voice-button {
    left: 15px;
    /* Ajustado */
    bottom: 15px;
    top: auto;
    right: auto;
    z-index: 5;
}

/* Aumentar padding para acomodar íconos en el textarea (main) */
.respuesta textarea {
    padding: 12px 50px 12px 50px;
    /* padding: top right bottom left */
    line-height: 1.5;
    /* Mejorar legibilidad */
}

/* Botón "Cerrar" en la misma línea que el h2 (Modal Profesora) */
.modal-header-profesora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    /* Espacio antes del borde */
    border-bottom: 1px solid #eee;
    /* Separador */
}

.modal-header-profesora h2 {
    margin: 0;
    font-size: 1.5em;
    /* Tamaño ajustado */
}

/* Contenedor para botones en el header del modal de chat */
.header-buttons-profesora {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Chat Container en la modal para ubicar micrófono (abajo izq) y avión (abajo der) */
.chat-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Alinear con la parte inferior del textarea */
    margin-top: 10px;
    /* Espacio sobre el input de chat */
}

.chat-icon-button {
    position: absolute;
    bottom: 8px;
    /* Ajustar para alinear con el textarea */
    background: none;
    border: none;
    padding: 8px;
    /* Padding para área de click */
    cursor: pointer;
    font-size: 1.3rem;
    color: #555;
    transition: color 0.2s ease-in-out;
    z-index: 5;
    height: 40px;
    /* Altura fija */
    width: 40px;
    /* Ancho fijo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-icon-button:hover:not(:disabled) {
    color: #007bff;
}

.chat-icon-button:disabled {
    color: #aaa;
    cursor: not-allowed;
}

/* Posición específica del botón de voz (izquierda) en chat */
.chat-container .voice-button {
    left: 5px;
}

/* Posición específica del botón enviar/detener (derecha) en chat */
.chat-container .send-button {
    right: 5px;
}

/* Textarea del chat */
.chat-container textarea {
    padding: 10px 50px 10px 50px !important;
    /* Espacio para iconos (importante para sobreescribir) */
    width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    /* Bordes redondeados estilo chat */
    border: 1px solid #ccc;
    resize: none;
    font-size: 1em;
    line-height: 1.4;
    min-height: 40px;
    /* Altura mínima */
    max-height: 120px;
    /* Altura máxima antes de scroll */
    overflow-y: auto;
    /* Scroll si es necesario */
}

.chat-container textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

.modal-header-explicacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.modal-header-explicacion h2 {
    margin: 0;
    font-size: 1.5em;
}

.header-buttons-explicacion {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Espacio entre los botones */
}

.header-buttons-explicacion .btn-explicacion {
    padding: 10px 15px;
    /* Coincide con action-button */
    font-size: 0.95em;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.header-buttons-explicacion .btn-explicacion:hover {
    transform: translateY(-1px);
    /* Efecto sutil al pasar el mouse */
}

/* Botón "Cerrar" (Rojo, similar al "No, Cancelar" del confirm-modal) */
.header-buttons-explicacion .btn-cerrar {
    background-color: #dc3545;
    color: #fff;
}

.header-buttons-explicacion .btn-cerrar:hover {
    background-color: #c82333;
}

/* Botón "No entendí" (Amarillo, como un aviso o solicitud de ayuda) */
.header-buttons-explicacion .btn-no-entendi {
    background-color: #ffc107;
    color: #212529;
    /* Texto oscuro para mejor contraste en amarillo */
}

.header-buttons-explicacion .btn-no-entendi:hover {
    background-color: #e0a800;
}

/* Estilo para el botón TTS (se mantiene, pero lo incluimos para contexto) */
.header-buttons-explicacion .dictation-button {
    background-color: #6c757d;
    /* Gris neutro */
    color: white;
    padding: 10px 15px;
}

.header-buttons-explicacion .dictation-button:hover:not(:disabled) {
    background-color: #5a6268;
}

/* Botón TTS (estilo dictation-button) */
.header-buttons-explicacion .dictation-button {
    background-color: #17a2b8;
    /* Azul info */
    color: white;
}

.header-buttons-explicacion .dictation-button:hover:not(:disabled) {
    background-color: #138496;
}


.modo-profesora-modal-content .modal-footer {
    /* Footer del modal de chat */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Botones a la derecha */
}

/* Contenedor de las tres columnas en opciones.html */
.forms-row {
    display: flex;
    justify-content: space-between;
    /* Espacio entre columnas */
    gap: 25px;
    /* Espacio entre columnas */
    width: 100%;
    margin-top: 20px;
    /* Espacio sobre las columnas */
}

.form-container {
    background-color: #ffffff;
    padding: 25px;
    /* Más padding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Sombra más sutil */
    border-radius: 8px;
    width: calc(33.333% - 17px);
    /* Aproximadamente 1/3 con el gap, ajustar si es necesario */
    text-align: left;
    /* Alinear contenido a la izquierda */
    display: flex;
    /* Para mejor control vertical */
    flex-direction: column;
}

.form-container h3 {
    margin-bottom: 20px;
    /* Más espacio */
    font-size: 1.3em;
    /* Ligeramente más grande */
    color: #005A9C;
    /* Color primario */
    text-align: center;
    /* Título centrado */
    border-bottom: 1px solid #eee;
    /* Separador sutil */
    padding-bottom: 10px;
}

.form-container label {
    /* Labels en cambio de contraseña */
    display: block;
    margin-bottom: 8px;
    font-size: 0.95em;
    font-weight: 500;
    color: #454545;
}

.form-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 15px;
}

.form-container input[type="password"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}


.form-container button.action-button {
    /* Botón "Cambiar Contraseña" */
    background-color: #006dbb;
    /* Azul primario */
    margin-top: 5px;
    /* Espacio sobre el botón */
}

.form-container button.action-button:hover {
    background-color: #005796;
}


.button-group {
    /* Para botones de Estadísticas y Evaluaciones */
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Espacio entre botones */
    margin-top: auto;
    /* Empujar botones al final si el contenedor es más alto */
}

.button-group button {
    background-color: #17a2b8;
    /* Azul-verde info */
    color: white;
    padding: 12px;
    /* Más padding */
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    /* Asegurar centrado */
    transition: background-color 0.2s, transform 0.1s;
}

.button-group button:hover {
    background-color: #117a8b;
    transform: translateY(-1px);
}

/* Modal para estadísticas */
.stats-modal .modal-content {
    /* Estilo específico para modal de estadísticas */
    max-width: 800px;
    /* Más ancho para tablas */
    position: relative;
    /* Para el botón de cerrar */
}

.stats-modal-content h4 {
    /* ya cubierto por .modal-content h4 */
    margin-top: 0;
}


.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.95em;
    /* Ligeramente más pequeño para más datos */
}

.stats-table th,
.stats-table td {
    border: 1px solid #e0e0e0;
    /* Borde más sutil */
    padding: 10px;
    /* Más padding */
    text-align: left;
    /* Alinear texto a la izquierda */
}

.stats-table th {
    background-color: #f0f2f5;
    /* Fondo muy claro para header */
    color: #333;
    /* Texto oscuro */
    font-weight: 600;
    /* Texto en negrita */
}

.stats-table tr:nth-child(even) td {
    background-color: #f8f9fa;
    /* Rayado sutil para filas pares */
}

.stats-table td:nth-child(3),
/* Preguntas */
.stats-table td:nth-child(4),
/* Errores */
.stats-table td:nth-child(5) {
    /* Correctas */
    text-align: center;
    /* Centrar números */
}

.stats-table .action-button {
    /* Botón "Ver Detalles" en tabla */
    padding: 6px 10px !important;
    /* Más pequeño */
    font-size: 0.85em !important;
    width: auto !important;
    /* Ancho automático */
    display: inline-block;
    /* Para que el width:auto funcione */
    background-color: #007bff;
}

.stats-table .action-button:hover {
    background-color: #0056b3;
}


.flash-message {
    /* Estilo base para mensajes flash */
    padding: 12px 15px;
    /* Padding ajustado */
    margin-bottom: 20px;
    border-radius: 5px;
    /* Más redondeado */
    font-weight: 500;
    border: 1px solid transparent;
    /* Borde base */
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Clases de toast para mensajes flash (usadas en opciones.html) */
.toast-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.toast-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.toast-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.toast-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

/* Contenedor del modal (el overlay oscuro) */
/* Unified Confirm Modal Styles */
#confirm-modal,
#confirm-exit-refuerzo-modal {
    display: none;
    /* Oculto por defecto, se muestra con JS */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);

    /* Mantenemos flexbox para el centrado, pero solo se aplicará cuando JS cambie el display a 'flex' */
    justify-content: center;
    align-items: center;
}

/* El cuadro de diálogo blanco dentro del modal */
#confirm-modal .modal-content,
#confirm-exit-refuerzo-modal .modal-content {
    background-color: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 420px;
    /* Ancho máximo del cuadro de diálogo */
    text-align: center;

    /* Centrado Absoluto Vertical y Horizontal */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    animation: fadeInModalAbsolute 0.3s ease-out forwards;
    /* Animación suave de aparición */
}

/* Estilos para el texto y los botones dentro del modal */
#confirm-modal .modal-content h2,
#confirm-modal .modal-content h4,
#confirm-exit-refuerzo-modal .modal-content h2,
#confirm-exit-refuerzo-modal .modal-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

#confirm-modal .modal-content p,
#confirm-exit-refuerzo-modal .modal-content p {
    margin-bottom: 20px;
    font-size: 1em;
    color: #555;
    line-height: 1.5;
}

#confirm-modal button,
#confirm-exit-refuerzo-modal button {
    margin: 0 8px;
    /* Espacio entre los botones Sí/No */
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
}

#confirm-modal button:hover,
#confirm-exit-refuerzo-modal button:hover {
    transform: translateY(-1px);
}

#confirm-no {
    background-color: #6c757d;
    /* Gris */
    color: #fff;
}

#confirm-no:hover {
    background-color: #5a6268;
}

#confirm-yes {
    background-color: #28a745;
    /* Verde */
    color: #fff;
}

#confirm-yes:hover {
    background-color: #218838;
}

/* Nueva regla para que el contenedor de opciones de selección múltiple esté alineado a la izquierda */
#multiple-choice-container {
    text-align: left;
}

/*Admin (estilos existentes, sin cambios solicitados aquí) */
.admin-container {
    background-color: white;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 100%;
    text-align: center;
}

.admin-container h3 {
    font-size: 1.2em;
}

.admin-container input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 15px;
}

.admin-container button {
    background-color: #28a745;
    color: white;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.admin-container button:hover {
    background-color: #218838;
}

.create-btn-container {
    text-align: right;
}

.delete-btn {
    background-color: #dc3545 !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    margin: 0 3px;
    font-size: 14px;
}

.delete-btn i {
    color: #fff !important;
}

.delete-btn:hover {
    background-color: #c82333 !important;
}

.edit-btn {
    background-color: #e9af00 !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    margin: 0 3px;
    font-size: 14px;
}

.edit-btn i {
    color: #fff !important;
}

.edit-btn:hover {
    background-color: #e0a800 !important;
}

#tabla-admin .create-btn-container #create-btn {
    display: inline-block !important;
}

/* --- ESTILOS DE MODALES REVERTIDOS Y AJUSTADOS PARA BOTÓN CERRAR --- */
.modal-create,
.modal-edit {
    display: none;
    position: fixed;
    z-index: 9999;
    /* Alto z-index para estar encima */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Permite scroll si el contenido del modal es muy largo */
    background-color: rgba(0, 0, 0, 0.5);
    /* Fondo semitransparente */
}

.modal-create-content,
.modal-edit-content,
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-main);
    width: 70%;
    /* Ancho del modal */
    max-width: 900px;
    /* Ancho máximo */
    margin: 5vh auto;
    /* Margen superior/inferior (5% del viewport height) y centrado horizontal */
    border-radius: 5px;
    padding: 20px;
    position: relative;
    /* CLAVE: Para que .close-modal-admin se posicione relativo a este div */
    animation: fadeInModal 0.4s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Sombra para destacar */
    max-height: 90vh;
    /* Altura máxima para evitar que sea más alto que la pantalla */
    overflow-y: auto;
    /* Scroll interno si el contenido es más alto que max-height */
}

/* Borde específico para modal de creación */
.modal-create-content {
    border: 3px solid #28a745;
    /* Verde */
}

/* Borde específico para modal de edición */
.modal-edit-content {
    border: 3px solid #ffc107;
    /* Amarillo */
}



.close-modal-admin,
.close-stats-modal {

    background-color: transparent;
    /* Hacerlo más sutil, como una 'X' */
    color: #888;
    /* Color gris para la 'X' */
    border: none;
    padding: 0;
    /* Quitar padding si es solo un ícono o texto */
    width: 30px;
    /* Área de click */
    height: 30px;
    /* Área de click */
    line-height: 30px;
    /* Centrar la 'X' si es texto */
    text-align: center;
    font-size: 1.5rem;
    /* Tamaño de la 'X' */
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    /* Distancia desde el borde derecho del .modal-*-content */
    top: 15px;
    /* Distancia desde el borde superior del .modal-*-content */
    transition: color 0.2s;
    z-index: 10;
    /* Para estar sobre otros elementos del modal si es necesario */
}

.close-modal-admin:hover {
    color: #333;
    /* Oscurecer al pasar el mouse */
}


.modal-create-content button[type="submit"],
.modal-edit-content button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 14px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.modal-create-content button[type="submit"]:hover,
.modal-edit-content button[type="submit"]:hover {
    background-color: #0056b3;
}

.modal-create-content input,
.modal-edit-content input,
.modal-create-content select,
.modal-edit-content select {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#tabla-select {
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 1em;
    border-radius: 5px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.form-row .form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* .form-group input ya estilizado en modal-create-content input */

.modal-delete {
    display: none;
    position: fixed;
    z-index: 10000;
    /* Asegurar que esté por encima de otros modales si es necesario */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    /* Fondo más oscuro para destacar */
}

.modal-delete-content {
    background-color: var(--card-bg);
    color: var(--text-main);
    margin: 15vh auto;
    /* Margen superior/inferior (15% del viewport height) y centrado horizontal */
    padding: 25px;
    border: 1px solid #ddd;
    width: 90%;
    max-width: 400px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    /* CLAVE: Para que .close-modal-admin se posicione relativo a este div */
    animation: fadeInModal 0.3s ease-out;
}

.modal-delete .modal-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    /* Botones a la derecha */
    gap: 10px;
}

.modal-delete .modal-footer button {
    padding: 10px 20px;
    font-size: 0.95em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    border: none;
}

.modal-delete .modal-footer .btn-cancel {
    background-color: #6c757d;
    color: white;
}

.modal-delete .modal-footer .btn-cancel:hover {
    background-color: #5a6268;
}

.modal-delete .modal-footer .btn-danger {
    background-color: #dc3545;
    color: white;
}

.modal-delete .modal-footer .btn-danger:hover {
    background-color: #c82333;
}

/* ========================================================== */
/* === ESTILOS ELEGANTES PARA MENU DE ASIGNATURAS (NUEVO) === */
/* ========================================================== */

/* Contenedor principal de los banners */
.subject-banners-container {
    display: flex;
    /* Cambiado a flex para diseño de tarjetas */
    flex-wrap: wrap;
    /* Permitir que las tarjetas se envuelvan en pantallas pequeñas */
    gap: 25px;
    /* Espacio entre las tarjetas */
    justify-content: center;
    /* Centrar las tarjetas si no ocupan todo el ancho */
    width: 100%;
    margin-top: 25px;
    /* Aumentar espacio superior */
}

/* El estilo de la "tarjeta" de asignatura */
.subject-card {
    flex: 1 1 300px;
    /* Flex-grow, flex-shrink, flex-basis. Permite que crezcan y se encojan con un tamaño base. */
    min-height: 220px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* Apila el contenido principal y el enlace de refuerzo */
    justify-content: space-between;
    /* Clave para empujar el refuerzo al fondo */
    overflow: hidden;
    /* Oculta cualquier cosa que se desborde del border-radius */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    /* Quitar subrayado si la tarjeta entera es un 'a' */
}

.subject-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Gradientes específicos para cada asignatura */
.subject-lenguaje {
    background: linear-gradient(135deg, #e53935, #ff7043);
}

.subject-ingles {
    background: linear-gradient(135deg, #af9109, #eedb6c);
}

.subject-matematica {
    background: linear-gradient(135deg, #3d6dd6, #8fbefb);
}


/* Contenido principal dentro de la tarjeta (icono y texto) */
.card-main-content {
    padding: 25px;
    display: flex;
    align-items: flex-start;
    /* Alinear con la parte superior del texto */
    gap: 20px;
}

.card-icon {
    font-size: 2.5em;
    /* Icono grande */
    opacity: 0.8;
    line-height: 1;
    /* Para alinear perfectamente */
}

.card-text h2 {
    margin: 0 0 8px 0;
    font-size: 1.6em;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    text-align: left;
    /* Asegurar alineación */
    color: #fff;
    /* Asegurar color blanco */
}

.card-text p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
    opacity: 0.9;
    text-align: left;
    /* Asegurar alineación */
    color: #fff;
    /* Asegurar color blanco */
}

/* Enlace de refuerzo integrado en la tarjeta */
.card-reinforcement-link {
    background-color: rgba(0, 0, 0, 0.2);
    /* Fondo semitransparente oscuro */
    padding: 12px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.card-reinforcement-link:hover {
    background-color: rgba(0, 0, 0, 0.35);
    /* Más oscuro al pasar el mouse */
}

/* Info del establecimiento y curso */
.info-bar {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 5px 0 15px 0;
    flex-wrap: wrap;
    /* Para pantallas pequeñas */
}

.info-bar .info {
    font-size: 1em;
    color: #555;
    background-color: #f8f9fa;
    padding: 5px 12px;
    border-radius: 15px;
    border: 1px solid #e9ecef;
}


/* Adaptación a móviles */
@media (max-width: 768px) {
    .subject-banners-container {
        flex-direction: column;
        /* Apila las tarjetas verticalmente */
        gap: 20px;
    }

    .subject-card {
        min-height: 200px;
    }

    .card-text h2 {
        font-size: 1.4em;
    }
}

/* Eliminamos los estilos antiguos para evitar conflictos */
/* Eliminamos los estilos antiguos para evitar conflictos */
/* .subject-banner-group, .reinforcement-button, .subject-banner removed */

.subject-banner {
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.subject-banner:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.subject-banner h2 {
    color: #ffffff;
    margin-bottom: 10px;
    text-align: left;
}

.subject-banner p {
    color: #ffffff;
    text-align: left;
    margin: 0;
    font-size: 1.2em;
}

.modal-confirm {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-confirm .modal-confirm-content {
    background-color: var(--card-bg);
    color: var(--text-main);
    margin: 15vh auto;
    /* Centrado vertical con margen */
    padding: 20px;
    width: 80%;
    max-width: 400px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    /* Para el botón de cerrar */
}

.import-section {
    margin-top: 20px;
    padding: 15px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color);
}

.import-section h4 {
    margin-bottom: 10px;
    color: #333;
}

.import-section input[type="file"] {
    margin-bottom: 10px;
    display: block;
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.import-section button {
    background-color: #007BFF;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.import-section button:hover {
    background-color: #0056b3;
}

.profe-flex-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
}

.profe-flex-title {
    flex: 1;
    text-align: center;
    margin: 0;
}

.profe-flex-btn-container {
    margin-left: auto;
}

.profe-title-centered {
    margin: 0;
    text-align: center;
}

.btn-change-course {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.btn-change-course:hover {
    background-color: #0056b3;
}

.profe-select-curso {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 16px;
    background-color: #fff;
    transition: border-color 0.2s;
}

.profe-select-curso:focus {
    border-color: #007BFF;
}

/* Ajuste para el modal de cambio de curso en lista_alumnos.html (nombre de variable corregido en JS) */
.course-modal-content {
    /* Estilos existentes para este modal se mantienen */
    position: relative;
    /* Para el botón de cerrar del modal */
    /* max-width y otros estilos se mantienen */
}

.btn-detalles {
    padding: 5px 10px;
    font-size: 0.9em;
    border: none;
    border-radius: 4px;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-detalles:hover {
    background-color: #0056b3;
}

#details-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.detalle-ejercicios-container {
    max-height: 45vh;
    /* Altura máxima relativa a la ventana */
    overflow-y: auto;
    padding-right: 10px;
    /* Espacio para scrollbar si aparece */
    margin-top: 10px;
}

.detalle-ejercicio {
    padding: 12px;
    /* Más padding */
    margin: 10px 0;
    border: none;
    border-radius: 6px;
    /* Más redondeado */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Sombra muy sutil */
}

.detalle-titulo {
    margin: 0 0 8px 0;
    /* Espacio debajo */
    font-size: 1.1em;
    text-align: center;
    font-weight: 600;
    /* Más grueso */
}

.detalle-separador {
    border: none;
    border-top: 1px solid #e0e0e0;
    /* Separador más sutil */
    margin: 8px 0;
    /* Espacio ajustado */
}

.detalle-ejercicio p {
    font-size: 0.95em;
    line-height: 1.5;
}

.detalle-ejercicio.correcto {
    background-color: #d1e7dd;
    border-left: 4px solid #0f5132;
    color: #0f5132;
}

/* Verde Bootstrap más oscuro */
.detalle-ejercicio.incorrecto {
    background-color: #f8d7da;
    border-left: 4px solid #842029;
    color: #842029;
}

/* Rojo Bootstrap más oscuro */
#details-modal .modal-content {
    background-color: #fff;
    margin: 10vh auto;
    padding: 25px;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    text-align: left;
    position: relative;
    /* Para el botón de cerrar */
}

.profesor-cursos-section {
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    padding: 15px;
    text-align: center;
}

.profesor-cursos-section h4 {
    margin-bottom: 10px;
    color: #333;
}

.profesor-cursos-section table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

.profesor-cursos-section th,
.profesor-cursos-section td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.profesor-cursos-section th {
    background-color: #007BFF;
    color: #fff;
}

.profesor-cursos-section button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background-color: #28a745;
    color: #fff;
    cursor: pointer;
}

.profesor-cursos-section button:hover {
    background-color: #218838;
}

.fragment-box {
    display: inline-block;
    padding: 8px 12px;
    margin: 6px;
    background-color: #fafafa;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: move;
    user-select: none;
}

.fragment-box.dragging {
    opacity: 0.5;
    border-color: #999;
}

#enumerated-dictation-container {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 15px;
    background-color: #f9f9f9;
    text-align: center;
}

#dictation-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

#dictation-input {
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 5px 10px;
    min-width: 200px;
    text-align: center;
}

.dictation-button {
    padding: 8px 12px;
    font-size: 0.9em;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    white-space: nowrap;
    margin: 5px;
}

.dictation-button:hover {
    background-color: #0056b3;
}

.dictation-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}

#dictation-word-info,
#dictation-repeat-count {
    font-weight: bold;
    margin: 5px 10px;
    white-space: nowrap;
}

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loading-overlay i {
    font-size: 48px;
    color: #333;
}

#loading-overlay p {
    margin-top: 15px;
    font-size: 18px;
    color: #333;
}

.fragment-drop-zone {
    border: 2px dashed #ccc;
    padding: 15px;
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: #fdfdfd;
}

.fragment-box:hover {
    background-color: #dee2e6;
}

.fragment-over {
    border: 2px solid #007bff;
    background-color: #cfe2ff;
}

.fill-blank-input {
    width: 120px;
    margin: 0 5px;
    padding: 4px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
}

.fill-blank-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.modal-header-explicacion {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#explicacion-iframe {
    border: 1px solid #ccc;
    margin-top: 10px;
    min-height: 500px;
}

#modo-profesora-modal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

#ultima-respuesta {
    flex-grow: 1;
    min-height: 100px;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #fafafa;
    margin-bottom: 10px;
}

.floating-activar-profesora:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

.floating-activar-profesora {
    transition: background-color 0.3s, transform 0.3s;
}

#feedback-flash-message {
    display: none;
    padding: 15px;
    margin: 15px auto;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    width: 90%;
    max-width: 800px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#dictation-results-inline {
    display: none;
    margin-top: 15px;
    text-align: left;
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    max-height: 45vh;
    overflow-y: auto;
}

#dictation-results-inline h4 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

#dictation-results-inline ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dictation-results-inline li {
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-size: 0.95em;
}

#dictation-results-inline li:last-child {
    border-bottom: none;
}

#dictation-results-inline .word-number {
    font-weight: bold;
    color: #555;
    min-width: 20px;
    text-align: right;
}

#dictation-results-inline .user-word {
    flex-grow: 1;
    font-family: monospace;
}

#dictation-results-inline .correct {
    color: #28a745;
}

#dictation-results-inline .incorrect {
    color: #dc3545;
    text-decoration: line-through wavy #ff7f7f;
}

#dictation-results-inline .original-word {
    font-style: italic;
    color: #007bff;
    font-size: 0.9em;
    white-space: nowrap;
    margin-left: 5px;
}

.fragment-over {
    outline: 2px dashed #007bff;
    outline-offset: 2px;
}

#explicacion-texto-animado {
    font-size: 1.1em;
    margin-bottom: 10px;
    min-height: 100px;
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    background-color: #fafafa;
    position: relative;
    text-align: left;
    line-height: 1.6;
    white-space: pre-wrap;
    font-weight: normal;
    /* QUITAR BOLD, IA YA LO MANEJA */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.modal-header-explicacion .dictation-button {
    background-color: #6c757d;
}

.modal-header-explicacion .dictation-button:hover:not(:disabled) {
    background-color: #5a6268;
}

.modal-header-explicacion .dictation-button:disabled {
    background-color: #cccccc;
    opacity: 0.7;
    cursor: not-allowed;
}

#respuestaInput {
    overflow-y: hidden;
    box-sizing: border-box;
    min-height: 50px;
}

.form-select {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    height: 38px;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px 10px;
    cursor: pointer;
    padding-right: 30px;
}

.form-select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

#flash-toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 90%;
}

.flash-toast {
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    min-width: 250px;
    text-align: center;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.toast-success {
    background-color: #28a745;
    border-left: 5px solid #1c7430;
}

.toast-error {
    background-color: #dc3545;
    border-left: 5px solid #a71d2a;
}

.toast-warning {
    background-color: #ffc107;
    color: #333;
    border-left: 5px solid #d39e00;
}

.toast-info {
    background-color: #17a2b8;
    border-left: 5px solid #117a8b;
}

.flash-toast.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.crud-container {
    padding: 20px;
}

.crud-controls {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.crud-controls label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.crud-controls select {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 250px;
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.crud-controls select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

.area-block {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #fdfdfd;
    padding: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.area-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.area-header input[type="text"].area-name-input {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-right: 10px;
    flex-grow: 1;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #f8f9fa;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.area-header input[type="text"].area-name-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    background-color: #fff;
    outline: none;
}

.area-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.area-actions button,
.exercise-actions button,
.global-actions button {
    padding: 8px 12px;
    font-size: 0.9em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s, transform 0.1s;
}

.area-actions button:hover,
.exercise-actions button:hover,
.global-actions button:hover {
    transform: translateY(-1px);
}

.area-actions button i,
.exercise-actions button i,
.global-actions button i {
    font-size: 1em;
}

.exercises-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 15px;
    table-layout: fixed;
}

.exercises-table th,
.exercises-table td {
    border: 1px solid #e0e0e0;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
}

.exercises-table th {
    background-color: #f1f3f5;
    font-weight: 600;
}

.exercises-table td {
    background-color: #fff;
}

/* 1. REBALANCEO DE ANCHOS DE COLUMNA */
/* Reemplaza las reglas de ancho de columna existentes con estas: */
.exercises-table th:nth-child(1),
.exercises-table td:nth-child(1) {
    width: 12%;
}

/* Tipo */
.exercises-table th:nth-child(2),
.exercises-table td:nth-child(2) {
    width: 33%;
}

/* Descripción */
.exercises-table th:nth-child(3),
.exercises-table td:nth-child(3) {
    width: 30%;
}

/* Opciones Específicas */
.exercises-table th:nth-child(4),
.exercises-table td:nth-child(4) {
    width: 12%;
}

/* Respuesta */
.exercises-table th:nth-child(5),
.exercises-table td:nth-child(5) {
    width: 13%;
    text-align: center;
}

/* Acciones */

/* Estilo para la celda de la explicación */
.exercises-table td.explanation-cell {
    vertical-align: top;
}

.explanation-cell-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Espacio entre el textarea y el botón */
}

/* Textarea para la explicación */
.explanation-cell-content .explanation-input {
    min-height: 100px;
    /* Altura mínima para que sea usable */
    resize: vertical;
    /* Permitir redimensionar verticalmente */
    width: 100%;
    /* Ocupar todo el ancho de la celda */
}

.explanation-cell-content .btn-delete-explanation:hover {
    background-color: #e9ecef;
}

/* Ajustes responsivos para la nueva columna */
@media (max-width: 768px) {
    .exercises-table td[data-label="Explicación"]::before {
        content: "Explicación: ";
        font-weight: bold;
    }

    /* Resetear anchos para el modo responsivo de tabla */
    .exercises-table th,
    .exercises-table td {
        width: 100% !important;
    }
}

/* Botón para eliminar la explicación personalizada */
.explanation-cell-content .btn-delete-explanation {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #f8f9fa;
    color: #dc3545;
    border: 1px solid #dc3545;
    align-self: flex-end;
    /* Alinear el botón a la derecha */
    width: auto;
    /* Ancho automático basado en contenido */
}


.exercises-table input[type="text"],
.exercises-table textarea,
.exercises-table select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fdfdfd;
}

.exercises-table input[type="text"]:focus,
.exercises-table textarea:focus,
.exercises-table select:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    background-color: #fff;
    outline: none;
}

.exercises-table textarea {
    min-height: 80px;
    resize: vertical;
}

.exercises-table .exercise-actions {
    display: flex;
    justify-content: center;
    /* Centra los botones horizontalmente dentro de su div */
    align-items: center;
    /* Centra los botones verticalmente (respecto a otros botones) */
    gap: 8px;
    /* Espacio entre los botones */
    /* Se elimina el padding para que el div se alinee con el contenido de otras celdas, que ya tienen padding por el TD. */
}

.btn-edit-explanation {
    background-color: #17a2b8 !important;
    /* Color turquesa (info) */
    color: white !important;
}

.btn-edit-explanation:hover {
    background-color: #138496 !important;
}

.explanation-editor-content {
    width: 80%;
    max-width: 750px;
    /* Un buen ancho para texto */
    padding: 25px;
}

.explanation-editor-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

.modal-exercise-display {
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.modal-exercise-display strong {
    display: block;
    margin-bottom: 5px;
    color: #495057;
}

.modal-exercise-display p {
    margin: 0;
    font-style: italic;
    color: #212529;
    line-height: 1.5;
}

/* Área del textarea para la explicación */
.modal-explanation-input-area {
    margin-bottom: 20px;
}

.modal-explanation-input-area label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.modal-explanation-input-area textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.6;
    resize: vertical;
    min-height: 150px;
}

.modal-explanation-input-area textarea:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

/* Footer del modal con botones */
.explanation-editor-content .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

.explanation-editor-modal {
    width: 90% !important;
    max-width: 750px !important;
    padding: 25px;
}

.explanation-editor-modal h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: #005A9C;
}

.explanation-warning-flash {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #e7f3fe;
    color: #004085;
    border: 1px solid #b8daff;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.explanation-warning-flash i {
    font-size: 1.5em;
}

.explanation-warning-flash p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
    text-align: left;
}

.explanation-exercise-context {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}

.explanation-exercise-context h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #495057;
    font-size: 1em;
    font-weight: 600;
}

.explanation-exercise-context p {
    margin: 0 0 10px 0;
    padding-left: 10px;
    border-left: 3px solid #ced4da;
    color: #212529;
    font-style: italic;
    white-space: pre-wrap;
    /* Respeta saltos de línea y espacios */
}

.explanation-editor-container {
    margin-bottom: 20px;
}

.explanation-editor-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    text-align: left;
}

#explanation-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 1em;
    line-height: 1.6;
    resize: vertical;
    min-height: 150px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#explanation-textarea:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

.explanation-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* Modificamos el botón de eliminar para que sea rojo */
.explanation-modal-actions .btn-delete {
    background-color: #dc3545;
}

.explanation-modal-actions .btn-delete:hover {
    background-color: #c82333;
}

/* Modificamos el botón de guardar para que sea azul */
.explanation-modal-actions .btn-save-all {
    background-color: #007bff;
}

.explanation-modal-actions .btn-save-all:hover {
    background-color: #0056b3;
}


.btn-add {
    background-color: #28a745;
    color: white;
}

.btn-add:hover {
    background-color: #218838;
}

.btn-delete {
    background-color: #dc3545;
    color: white;
}

/* Ya estaba .delete-btn, este es más específico para CRUD */
.btn-delete:hover {
    background-color: #c82333;
}

.btn-save-all {
    background-color: #007bff;
    color: white;
    padding: 10px 20px !important;
}

.btn-save-all:hover {
    background-color: #0056b3;
}

.btn-cancel {
    background-color: #6c757d;
    color: white;
    padding: 10px 20px !important;
}

.btn-cancel:hover {
    background-color: #5a6268;
}

#loading-indicator {
    display: none;
    margin-left: 15px;
    color: #007bff;
}

#status-message {
    margin-top: 15px;
    font-weight: bold;
    min-height: 1.2em;
}

.status-success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px 15px;
    border-radius: 5px;
}

.status-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px 15px;
    border-radius: 5px;
}

.global-actions {
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    text-align: right;
}

/* Alineado a la derecha */
.options-cell,
.answer-cell {
    vertical-align: top;
}

.mc-options-toggle {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mc-options-toggle input[type="checkbox"] {
    margin-right: 5px;
    transform: scale(1.1);
    cursor: pointer;
}

.mc-options-toggle label {
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
}

.mc-options-inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-options-inputs div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-options-inputs div label {
    font-weight: bold;
    min-width: 20px;
}

.mc-options-inputs input[type="text"].mc-option-input {
    flex-grow: 1;
    font-size: 0.9em;
    padding: 6px 8px;
}

.mc-answer-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-answer-selector label {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 2px;
}

.mc-answer-selector select.mc-answer-select-input {
    padding: 8px 10px;
    font-size: 0.95em;
}

.sentence-fragments-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sentence-fragments-container>label {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: #333;
}

.sentence-fragments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sentence-fragment-input-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sentence-fragment-input-group label {
    min-width: 20px;
    font-weight: normal;
}

.sentence-fragment-input-group .exercise-input.sentence-fragment-input {
    flex-grow: 1;
}

.sentence-fragment-input-group .btn-remove-fragment {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #f8f9fa;
    color: #dc3545;
    border: 1px solid #dc3545;
}

.sentence-fragment-input-group .btn-remove-fragment:hover {
    background-color: #e9ecef;
}

.btn-add-fragment {
    font-size: 0.85em !important;
    padding: 6px 10px !important;
}

.sentence-order-answer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sentence-order-answer label {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 2px;
}

.sentence-order-answer .ordered-preview {
    padding: 6px;
    background-color: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 4px;
    min-height: 2em;
    font-style: italic;
}

.dictation-words-inputs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dictation-words-inputs label {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 0.9em;
    color: #333;
}

.dictation-words-inputs textarea.special-input.dictation-palabras-input {
    min-height: 120px;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
}

.dictation-answer-info {
    padding: 8px;
    background-color: #e9ecef;
    color: #495057;
    border-radius: 4px;
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
}

@media (max-width: 768px) {
    .exercises-table td[data-label="Tipo"]::before {
        content: "Tipo: ";
        font-weight: bold;
    }

    .exercises-table td[data-label="Descripción"]::before {
        content: "Descripción: ";
        font-weight: bold;
    }

    .exercises-table td[data-label="Opciones Específicas"]::before {
        content: "Opciones/Frag.: ";
        font-weight: bold;
    }

    .exercises-table td[data-label="Respuesta"]::before {
        content: "Respuesta: ";
        font-weight: bold;
    }

    .exercises-table td[data-label="Acciones"]::before {
        content: "Acciones: ";
        font-weight: bold;
    }

    .exercises-table thead {
        display: none;
    }

    /* Ocultar encabezados de tabla en móvil */
    .exercises-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
        background-color: #fff;
    }

    .exercises-table td {
        display: block;
        text-align: right !important;
        /* Forzar alineación para data-label */
        padding-left: 40% !important;
        /* Espacio para el data-label */
        position: relative;
        border-bottom: 1px dotted #eee;
    }

    .exercises-table td::before {
        position: absolute;
        left: 10px;
        width: calc(40% - 20px);
        /* Ancho del label */
        white-space: nowrap;
        text-align: left !important;
        font-weight: bold;
    }

    .exercises-table td:last-child {
        border-bottom: 0;
    }

    .exercise-actions {
        text-align: right !important;
    }

    /* Alinear acciones a la derecha en móvil */
    .area-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .area-actions {
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
    }

    .area-actions button {
        flex-grow: 1;
        justify-content: center;
    }

    .crud-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .crud-controls select,
    .crud-controls button {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .mc-answer-selector select.mc-answer-select-input,
    .sentence-fragments-inputs textarea.special-input,
    .dictation-words-inputs textarea.special-input,
    .sentence-order-answer input.sentence-order-input {
        width: 100%;
    }

    .sentence-fragment-input-group {
        flex-wrap: wrap;
    }

    .sentence-fragment-input-group .exercise-input.sentence-fragment-input {
        width: calc(100% - 70px);
    }
}

/* Estilos para el spinner de carga en el modal de chat */
#loading-chat-prof {
    display: none;
    /* Oculto por defecto */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(248, 249, 250, 0.85);
    /* Coincide con .respuesta-animada pero con opacidad */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    /* Encima del contenido del textarea de respuesta del chat */
    border-radius: 5px;
    /* Mismo radio que .respuesta-animada */
}

#loading-chat-prof i {
    font-size: 2rem;
    /* Tamaño del spinner */
    color: #007bff;
    /* Color primario */
}

#loading-chat-prof p {
    margin-top: 10px;
    font-size: 0.95em;
    color: #333;
}

/* Estilos para el resumen de debilidades en el modal de estadísticas */
.resumen-debilidades-mensaje {
    font-weight: bold;
    color: #005A9C;
    /* Un color destacado, puede ser el primario de la app */
    padding: 10px;
    background-color: #e7f3fe;
    /* Un fondo suave */
    border: 1px solid #b3d7ff;
    /* Un borde suave */
    border-radius: 4px;
    margin-bottom: 15px;
    /* Espacio antes de la tabla de estadísticas */
    text-align: center;
}

/* Estilos para los botones de refuerzo en menu.html */
.subject-banner-group {
    display: flex;
    /* Para alinear el banner y el botón de refuerzo */
    align-items: stretch;
    /* Para que ambos tengan la misma altura si es necesario */
    gap: 10px;
    /* Espacio entre el banner y el botón */
    margin-bottom: 20px;
    /* Espacio entre grupos de asignaturas */
}

.subject-banner-group .subject-banner {
    flex-grow: 1;
    /* El banner ocupa el espacio disponible */
    /* Estilos existentes del subject-banner se mantienen */
}

.reinforcement-button {
    padding: 10px 15px;
    font-size: 0.95em;
    font-weight: 500;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Espacio entre icono y texto */
    min-width: 220px;
    /* Ancho mínimo para que el texto no se corte tanto */
    text-align: center;
    flex-shrink: 0;
    /* No se encoge si el banner es muy ancho */
}

.reinforcement-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.reinforcement-button i {
    font-size: 1.1em;
}

/* Colores específicos para botones de refuerzo */
.reinforcement-lenguaje {
    background-color: #e64a50;
}

/* Un tono más oscuro que el banner */
.reinforcement-lenguaje:hover {
    background-color: #d0383e;
}

.reinforcement-ingles {
    background-color: #b3972d;
}

.reinforcement-ingles:hover {
    background-color: #9e821f;
}

.reinforcement-matematica {
    background-color: #3a7bd5;
}

.reinforcement-matematica:hover {
    background-color: #2c66b0;
}


/* Estilos para la página de refuerzo (ej. matematica_refuerzo.html) */
/* El H3 principal en las páginas de refuerzo */
.main-container h3#refuerzo-title {
    /* Asumiendo que el H3 tiene un ID específico o se apunta por contexto */
    color: #007bff;
    /* Un color distintivo para el modo refuerzo */
    margin-bottom: 5px;
}

/* Div para mostrar el origen del ejercicio de refuerzo */
#ejercicio-origen-info {
    font-size: 0.95em;
    color: #6c757d;
    /* Gris secundario */
    margin-bottom: 15px;
    font-style: italic;
    text-align: center;
}

/* Adaptar el botón Siguiente Ejercicio para el modo refuerzo */
.buttons-container #siguiente.refuerzo-siguiente {
    background-color: #17a2b8;
    /* Un color diferente para el "siguiente" de refuerzo */
}

.buttons-container #siguiente.refuerzo-siguiente:hover {
    background-color: #138496;
}

/* Modal de confirmación de salida para refuerzo */


@media (max-width: 768px) {
    .subject-banner-group {
        flex-direction: column;
        /* Apilar banner y botón de refuerzo en móviles */
    }

    .reinforcement-button {
        width: 100%;
        /* Botón de refuerzo ocupa todo el ancho en móviles */
        margin-top: 10px;
        /* Espacio si se apila */
    }
}

/* Estilos para el canvas de Processing.js en refuerzo (si se usa) */
#exercise-canvas-processing {
    border: 1px dashed #ccc;
    /* Un borde para distinguirlo */
    margin-bottom: 15px;
    /* Espacio debajo del canvas */
    background-color: #fff;
    /* Fondo blanco por si el sketch no lo pone */
}

.processing-sketch-canvas {
    /* Clase para el elemento canvas mismo */
    display: block;
    /* Para centrar con margin: auto si el contenedor es flex */
    margin: 0 auto;
    max-width: 100%;
    /* Asegurar que no se desborde del contenedor */
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++ ESTILOS PARA GESTIONAR_EJERCICIOS.HTML (MODIFICADOS) ++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Bar for course selection */
.course-selection-bar {
    margin-bottom: 15px;
    /* Reduced space below it */
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
    align-items: center;
    gap: 10px;
    /* Consistent gap */
}

.course-selection-bar label {
    font-weight: bold;
    margin-bottom: 0;
    /* Align with select if on the same line */
    display: inline;
    /* Override display:block from generic .crud-controls label */
    flex-shrink: 0;
    /* Prevent label from shrinking */
}

.course-selection-bar select {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 250px;
    flex-grow: 1;
    /* Allow select to use available space */
    max-width: 450px;
    /* Control max width */
    background-color: #fff;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.course-selection-bar select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

.course-selection-bar button#btn-cargar-ejercicios {
    width: auto;
    /* Override general action-button width */
    padding: 10px 20px;
    /* Specific padding */
    flex-shrink: 0;
    /* Prevent button from shrinking */
}

.course-selection-bar #loading-indicator {
    display: none;
    margin-left: 10px;
    /* Original was 15px */
    color: #007bff;
}


/* New styles for the header within crud-area */
.crud-area-header {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping */
    justify-content: space-between;
    /* Main axis distribution */
    align-items: center;
    /* Cross axis alignment */
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    gap: 15px;
    /* Gap between title and filter/actions group, and if they wrap */
}

.crud-area-header h3#current-selection-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    /* Try to keep title on one line */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 150px;
    /* Minimum width before ellipsis */
    flex-shrink: 1;
    /* Allow shrinking but less eagerly */
}

.filter-and-actions-group {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Gap between filter group and global actions */
    flex-grow: 1;
    /* Allow this group to take available space */
    justify-content: flex-end;
    /* Push to the right if space allows */
    flex-wrap: nowrap;
    /* Prefer to keep this group on one line */
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-weight: bold;
    margin-bottom: 0;
    display: inline;
    white-space: nowrap;
    /* Prevent label from wrapping */
}

.filter-group select#select-area-filter {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    min-width: 180px;
    /* Adjusted min-width */
    width: auto;
    max-width: 280px;
    /* Adjusted max-width */
    background-color: #fff;
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-group select#select-area-filter:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}


.global-actions-top {
    display: flex;
    gap: 10px;
    /* Gap between save and cancel buttons */
}

.global-actions-top .action-button {
    padding: 8px 12px;
    /* Suitable for icons */
    min-width: 40px;
    width: auto;
    /* Override general action-button width:100% */
    font-size: 1em;
    /* Icon size, adjust if needed */
    line-height: 1.2;
    /* Ensure icon is centered vertically */
}

.global-actions-top .action-button i {
    margin-right: 0;
    /* Remove margin if text was previously there */
    font-size: 1rem;
    /* Icon size */
}

.global-actions-top .btn-save-all {
    background-color: #007bff;
    color: white;
}

.global-actions-top .btn-save-all:hover {
    background-color: #0056b3;
}

.global-actions-top .btn-cancel {
    background-color: #dc3545;
    color: white;
}

.global-actions-top .btn-cancel:hover {
    background-color: #c82333;
}

/* Responsive adjustments for the CRUD header area */
@media (max-width: 992px) {

    /* Breakpoint for when title and filter/actions group might stack */
    /* .crud-area-header removed empty rule */

    .crud-area-header h3#current-selection-title {
        min-width: 0;
        /* Allow title to be smaller */
        flex-basis: 100%;
        /* Make title take full width if it wraps */
        margin-bottom: 10px;
        /* Space when it's on its own line */
        white-space: normal;
        /* Allow title to wrap text */
    }

    .filter-and-actions-group {
        flex-grow: 1;
        /* Ensure it takes full width if title is above */
        justify-content: space-between;
        /* Space out filter and actions */
    }
}

@media (max-width: 768px) {
    .course-selection-bar {
        gap: 8px;
        /* Reduce gap for smaller screens */
    }

    .course-selection-bar label {
        flex-basis: 100%;
        /* Label takes full width */
        margin-bottom: 5px;
        /* Space below label */
    }

    .course-selection-bar select,
    .course-selection-bar button#btn-cargar-ejercicios {
        width: 100%;
        /* Select and button take full width */
        max-width: none;
        min-width: 0;
    }

    .crud-area-header {
        flex-direction: column;
        align-items: stretch;
        /* Stretch items to full width */
        gap: 10px;
    }

    .crud-area-header h3#current-selection-title {
        text-align: center;
        /* Center title on small screens */
        margin-bottom: 5px;
    }

    .filter-and-actions-group {
        flex-direction: column;
        /* Stack filter and global actions */
        align-items: stretch;
        gap: 10px;
    }

    .filter-group {
        flex-direction: column;
        /* Stack label and select */
        align-items: stretch;
    }

    .filter-group label {
        margin-bottom: 5px;
        text-align: left;
        /* Align label left */
    }

    .filter-group select#select-area-filter {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .global-actions-top {
        justify-content: flex-end;
        /* Align buttons to the right */
    }

    .global-actions-top .action-button {
        flex-grow: 1;
        /* Allow buttons to share space if needed, or make them fixed width */
        max-width: 150px;
        /* Example max-width if they grow too much */
        text-align: center;
    }
}


/* Estilos para los banners en el nuevo profe_menu.html */
.subject-banner-group.profe-banner-group {
    flex-direction: column;
    /* Para que el botón (si lo hubiera) esté debajo */
    align-items: center;
    /* Centrar el banner */
}

.subject-banner-group.profe-banner-group .subject-banner {
    width: 80%;
    /* O un ancho que prefieras */
    max-width: 600px;
    /* Límite para que no sea demasiado ancho */
    margin-bottom: 0;
    /* Quitar margen si no hay botón debajo */
}

.subject-banner.subject-gestion-ejercicios {
    background: linear-gradient(135deg, #6f42c1, #9a6dd7);
    /* Tonos púrpuras */
}

.subject-banner.subject-gestion-ejercicios:hover {
    box-shadow: 0 6px 12px rgba(111, 66, 193, 0.4);
}

.subject-banner.subject-lista-alumnos {
    background: linear-gradient(135deg, #17a2b8, #54c7d9);
    /* Tonos teal/info */
}

.subject-banner.subject-lista-alumnos:hover {
    box-shadow: 0 6px 12px rgba(23, 162, 184, 0.4);
}

/* Iconos dentro de los h2 de los banners de profesor */
.subject-banner h2 i {
    margin-right: 10px;
    font-size: 0.9em;
    /* Un poco más pequeño que el texto del h2 */
}

/* Ajustes para la tabla en lista_alumnos.html para que se parezca más a opciones.html */
.scrollable-table {
    width: 100%;
    /* Asegurar que ocupe el ancho disponible */
    margin-top: 20px;
    /* Espacio sobre la tabla */
}

.stats-table th,
.stats-table td {
    padding: 10px 12px;
    /* Ajuste de padding para consistencia */
    font-size: 0.9em;
    /* Puede ayudar si hay muchas columnas */
}

/* El botón para ver detalles en la tabla de lista_alumnos.html */
.stats-table .btn-detalles {
    background-color: #007bff;
    color: white;
    padding: 6px 10px !important;
    font-size: 0.85em !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: auto !important;
    display: inline-block;
}

.stats-table .btn-detalles:hover {
    background-color: #0056b3;
}

#details-individual-modal .detalle-ejercicios-container {
    max-height: 50vh;
    /* O la altura que prefieras */
    overflow-y: auto;
    padding-right: 10px;
    margin-top: 10px;
}

/* Para el nombre del profesor en el header de profe_menu.html y lista_alumnos.html */
.header-right .namealumno {
    /* Reutilizamos clase, pero el contenido es de profesor */
    font-size: 0.95rem;
    color: #555;
    padding-right: 15px;
    /* Espacio antes de los botones */
}

/* Responsive para los banners de profesor */
@media (max-width: 768px) {
    .subject-banner-group.profe-banner-group .subject-banner {
        width: 95%;
        /* Más ancho en móviles */
    }

    .subject-banner h2 {
        font-size: 1.3em;
        /* Ajustar tamaño de título en banners */
    }

    .subject-banner p {
        font-size: 1em;
        /* Ajustar tamaño de párrafo en banners */
    }
}


/* Estilo para el modal de estadísticas (aplicable a opciones.html y lista_alumnos.html) */
.stats-modal .modal-content {
    position: relative;
    /* Necesario para posicionar el botón de cerrar absolutamente dentro */
    padding-top: 50px;
    /* Más espacio arriba para el botón cerrar */
}

/* Botón de cerrar para todos los modales de estadísticas y detalles */
.close-stats-modal {
    position: absolute;
    top: 15px;
    /* Distancia desde el borde superior del modal-content */
    right: 15px;
    /* Distancia desde el borde derecho del modal-content */
    background-color: transparent;
    /* Hacerlo más sutil, como una 'X' */
    color: #888;
    /* Color gris para la 'X' */
    border: none;
    padding: 0;
    /* Quitar padding si es solo un ícono o texto */
    width: 30px;
    /* Área de click */
    height: 30px;
    /* Área de click */
    line-height: 30px;
    /* Centrar la 'X' si es texto */
    text-align: center;
    font-size: 1.5rem;
    /* Tamaño de la 'X' */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
    /* Asegura que esté sobre otros elementos */
}

.close-stats-modal:hover {
    color: #333;
    /* Oscurecer al pasar el mouse */
}

/* SOLUCIÓN AL "DOBLE FLASH": Hacemos el contenedor transparente y sin estilos propios */
#resumen-debilidades-texto {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px;
    text-align: center;
}

/* El .resumen-debilidades-mensaje (el <p> dentro) es el que lleva todo el estilo visual */
.resumen-debilidades-mensaje {
    font-weight: bold;
    color: #005A9C;
    padding: 10px 15px;
    background-color: #e7f3fe;
    border: 1px solid #b3d7ff;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    /* Para que el borde se ajuste al contenido */
    width: auto;
    max-width: 95%;
    /* Evita que sea demasiado ancho en el modal */
}

/* Estilos para el modal de detalles individuales (el que se abre desde el de estadísticas) */
#details-individual-modal .modal-content,
#details-modal .modal-content {
    position: relative;
    padding-top: 50px;
    /* Espacio para el botón de cerrar */
}

/* Reutilizamos la clase del botón cerrar para los otros modales de detalles */
#details-individual-modal .close-stats-modal,
#details-modal .close-stats-modal {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* styles.css */

/* --- ESTILOS PARA LA NUEVA ESTRUCTURA DE admin_menu.html --- */

.admin-container h2 {
    text-align: left;
    margin-bottom: 15px;
    font-size: 1.5em;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.establishment-management-area {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #e0e0e0;
}

.establishment-selector-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.establishment-selector-bar label {
    font-weight: 600;
    color: #495057;
    flex-shrink: 0;
}

.establishment-selector-bar select {
    flex-grow: 1;
    max-width: 500px;
}

#establishment-data-container {
    border: 1px solid #dee2e6;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    background-color: #ffffff;
}

.user-type-selector-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.user-type-selector-bar label {
    font-weight: 500;
}

.form-select-sm {
    padding: 5px 8px;
    font-size: 0.9em;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.btn-danger-small {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.btn-danger-small:hover {
    background-color: #c82333;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-status {
    padding: 5px 10px;
    border: none;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.85em;
    min-width: 90px;
    transition: background-color 0.2s;
}

.btn-success {
    background-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
}

.logo-upload-preview {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #ccc;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.stats-table th i.fas {
    margin-left: 5px;
    color: #aaa;
    transition: color 0.2s;
}

.stats-table th:hover i.fas {
    color: #333;
}

.stats-table th {
    cursor: pointer;
}

/* --- ESTILOS PARA MODAL DE SESIONES --- */
.sessions-modal {
    display: none;
    position: fixed;
    z-index: 10001;
    /* Higher than other modals */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sessions-modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 800px;
    /* Wider for tables */
    margin: auto;
    border-radius: 8px;
    padding: 25px;
    position: relative;
    animation: fadeInModal 0.4s;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.sessions-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.sessions-modal-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: #333;
}

.sessions-modal-body {
    overflow-y: auto;
    /* Scroll for the table if it's long */
    flex-grow: 1;
}

.sessions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.sessions-table th,
.sessions-table td {
    border: 1px solid #e9ecef;
    padding: 8px 10px;
    text-align: left;
}

.sessions-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.sessions-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.sessions-table .actions-cell {
    text-align: center;
    white-space: nowrap;
}

/* Styles for inline editing in the sessions table */
.sessions-table input[type="datetime-local"] {
    padding: 4px 6px;
    border: 1px solid #007bff;
    border-radius: 4px;
    font-size: 1em;
    width: 180px;
    /* Fixed width for datetime inputs */
}

.sessions-table .btn-edit-session,
.sessions-table .btn-save-session,
.sessions-table .btn-cancel-session {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 1.1em;
    margin: 0 3px;
    transition: color 0.2s;
}

.sessions-table .btn-edit-session {
    color: #007bff;
}

.sessions-table .btn-edit-session:hover {
    color: #0056b3;
}

.sessions-table .btn-save-session {
    color: #28a745;
}

.sessions-table .btn-save-session:hover {
    color: #1e7e34;
}

.sessions-table .btn-cancel-session {
    color: #dc3545;
}

.sessions-table .btn-cancel-session:hover {
    color: #b02a37;
}

.sessions-modal-footer {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #e0e0e0;
    text-align: right;
}

.sessions-modal-footer .btn-close-modal {
    background-color: #6c757d;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.sessions-modal-footer .btn-close-modal:hover {
    background-color: #5a6268;
}

/* Spinner for loading sessions */
.sessions-loading-spinner {
    text-align: center;
    padding: 40px 0;
    font-size: 2em;
    color: #007bff;
}

/* --- ESTILOS PARA BOTONES DE ACCIÓN EN TABLAS --- */

.view-sessions-btn,
.view-stats-btn,
.edit-btn,
.delete-btn {
    background-color: #6c757d;
    /* Color base gris */
    color: #fff !important;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    margin: 0 3px;
    font-size: 14px;
    line-height: 1;
    /* Para alinear el icono verticalmente */
    transition: background-color 0.2s;
}

.view-sessions-btn i,
.view-stats-btn i,
.edit-btn i,
.delete-btn i {
    color: #fff !important;
}

.view-sessions-btn {
    background-color: #17a2b8 !important;
    /* Info (celeste) */
}

.view-sessions-btn:hover {
    background-color: #138496 !important;
}

.view-stats-btn {
    background-color: #007bff !important;
    /* Primary (azul) */
}

.view-stats-btn:hover {
    background-color: #0056b3 !important;
}

.edit-btn {
    background-color: #ffc107 !important;
    /* Warning (amarillo) */
    color: #212529 !important;
    /* Texto oscuro para contraste */
}

.edit-btn:hover {
    background-color: #e0a800 !important;
}

.edit-btn i {
    color: #e9e9e9 !important;
}

.delete-btn {
    background-color: #dc3545 !important;
    /* Danger (rojo) */
}

.delete-btn:hover {
    background-color: #c82333 !important;
}


/* --- ESTILOS PARA MODAL DE ESTADÍSTICAS --- */

.stats-modal .modal-content {
    position: relative;
    padding-top: 20px;
}

.stats-modal-header .close-stats-modal {
    position: static;
    /* Clave: anula el 'position: absolute' */
    top: auto;
    right: auto;
    flex-shrink: 0;
    /* Evita que el botón se encoja si el título es largo */
    align-self: center;
    /* Asegura que esté centrado verticalmente con los otros items */
    margin-left: 15px;
    /* Añade un espacio a su izquierda para separarlo */
    order: 3;
    /* Asegura que sea el último elemento en el contenedor flex */
}

/* 2. Ajustar el header para que distribuya el espacio correctamente.
      El título crecerá para ocupar el espacio sobrante. */
.stats-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    /* Espacio entre los elementos (título, grupo selector, botón) */
}

/* 3. Asegurar que el título no empuje todo lo demás y se alinee a la izquierda. */
.stats-modal-header h4 {
    flex-grow: 1;
    /* El título toma el espacio disponible */
    margin: 0;
    /* Quitar márgenes por defecto del h4 */
    text-align: left;
    /* Alinear el título a la izquierda */
    order: 1;
    /* Asegura que el título sea el primer elemento */
}

.stats-modal-header .subject-selector-group {
    order: 2;
    /* Asegura que el selector esté en el medio */
}

.subject-selector-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.subject-selector-group label {
    font-weight: 500;
    color: #495057;
}

.close-stats-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-stats-modal:hover {
    color: #343a40;
}

#resumen-debilidades-texto {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 15px;
    text-align: center;
}

.resumen-debilidades-mensaje {
    font-weight: 500;
    color: #004085;
    padding: 12px 15px;
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    border-radius: 5px;
    text-align: left;
    line-height: 1.5;
    display: inline-block;
    width: auto;
    max-width: 98%;
}

#details-modal .modal-content {
    position: relative;
    padding-top: 20px;
}

.user-filters-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f1f3f5;
    border-radius: 6px;
    justify-content: flex-start;
}

.user-filters-bar label {
    font-weight: 500;
    margin-right: -5px;
    /* Acerca la etiqueta al select */
}

#fill-in-blanks-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* Espacio entre las cajas */
    margin-top: 25px;
    /* Espacio entre la oración y las sugerencias */
    padding: 15px;
    border-top: 2px dashed #e0e0e0;
    /* Separador visual */
}

.suggestion-box {
    display: inline-block;
    padding: 8px 14px;
    background-color: #f8f9fa;
    /* Fondo claro */
    border: 1px solid #ced4da;
    border-radius: 6px;
    user-select: none;
    /* Evita que el texto sea seleccionable */
    font-weight: 500;
    color: #495057;
    font-size: 1em;
    transition: background-color 0.2s, transform 0.2s;
    cursor: pointer;
    /* <-- AÑADIR ESTA LÍNEA */
}

/* Efecto visual al pasar el mouse sobre una sugerencia */
.suggestion-box:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
    border-color: #adb5bd;
}

.logo-establecimiento-ejercicio {
    text-align: center;
    margin-bottom: 10px;
    /* Espacio entre el logo y la pizarra */
    margin-top: -15px;
    /* Compensa un poco el espacio superior */
}

.logo-establecimiento-ejercicio img {
    max-height: 55px;
    /* Controla el tamaño máximo del logo */
    width: auto;
    border-radius: 8px;
    /* Bordes redondeados suaves */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* Sombra sutil */
}

/* ================================================== */
/* === NUEVOS ESTILOS PARA PÁGINAS DE OPCIONES      === */
/* ================================================== */

/* Ajuste para que las columnas en opciones.html y opciones_prof_admin.html se vean bien */
.forms-row {
    align-items: flex-start;
    /* Alinea los contenedores en la parte superior */
}

.form-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Para que el botón de editar se alinee al fondo */
}

/* Contenedor para mostrar los datos del perfil (no editable) */
.profile-data-view {
    text-align: left;
    margin-bottom: 20px;
    flex-grow: 1;
    /* Ocupa el espacio disponible, empujando el botón hacia abajo */
}

.profile-data-view p {
    margin-bottom: 12px;
    font-size: 1em;
    line-height: 1.5;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

.profile-data-view p:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.profile-data-view strong {
    color: #333;
    margin-right: 8px;
    display: inline-block;
    min-width: 100px;
    /* Alinea los valores */
}

/* Botón para abrir el modal de edición */
.btn-edit-profile {
    background-color: #ffc107 !important;
    /* Amarillo */
    color: #212529 !important;
    /* Texto oscuro */
    width: 100%;
    margin-top: auto;
    /* Se pega al fondo del contenedor */
}

.btn-edit-profile:hover {
    background-color: #e0a800 !important;
}

/* Ajustes para el modal de edición de perfil */
#edit-profile-modal .modal-edit-content {
    /* Reutiliza el estilo de los modales de edición del admin_menu */
    width: 80%;
    max-width: 700px;
}

#edit-profile-modal .modal-edit-content h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

#edit-profile-modal .modal-edit-content button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    margin-top: 15px;
}

/* ====================================================== */
/* === ESTILOS PARA PANEL DE OPCIONES UNIFICADO (v2)    === */
/* ====================================================== */

.options-panel {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

.options-panel-header {
    background-color: #f8f9fa;
    padding: 15px 30px;
    border-bottom: 1px solid #e9ecef;
}

.options-panel-header h3 {
    margin: 0;
    font-size: 1.4em;
    color: #343a40;
    font-weight: 600;
}

.options-panel-body {
    display: flex;
    flex-direction: row;
}

.profile-section,
.password-section {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-section h4,
.password-section h4 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #005A9C;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
}

.password-section {
    border-left: 1px solid #e9ecef;
}

/* Estilos para el formulario de contraseña en el panel de opciones */
.password-section form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Ocupa el espacio vertical disponible */
}

.password-section label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95em;
    font-weight: 500;
    color: #454545;
}

.password-section input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 15px;
}

.password-section input[type="password"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

/* Botón principal azul para el cambio de contraseña */
.password-section .action-button {
    background-color: #007bff;
    /* Azul primario */
    color: white;
    margin-top: auto;
    /* Empuja el botón al final */
    width: 100%;
}

.password-section .action-button:hover {
    background-color: #0056b3;
}

.btn-info-outline {
    background-color: transparent;
    color: #17a2b8;
    border: 2px solid #17a2b8;
    padding: 10px 15px;
    font-weight: 600;
    width: 100%;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease-in-out;
}

.btn-info-outline:hover {
    background-color: #17a2b8;
    color: white;
    transform: translateY(-2px);
}

.main-container-opcionespa .forms-row {
    display: block;
}

.options-panel .form-container {
    box-shadow: none;
    padding: 0;
    width: 100%;
}

@media (max-width: 992px) {
    .options-panel-body {
        flex-direction: column;
    }

    .password-section {
        border-left: none;
        border-top: 1px solid #e9ecef;
        margin-top: 0;
        /* Quitar margen para que la línea se vea bien */
        padding-top: 30px;
    }
}

/* ====================================================== */
/* === ESTILOS PARA SECCIÓN DE ACCIONES RÁPIDAS (ALUMNO) === */
/* ====================================================== */

.quick-actions-section {
    width: 100%;
    max-width: 1000px;
    /* Coincide con el ancho del panel */
    margin: 10px auto;
    /* <-- CAMBIO CLAVE: Centra el panel horizontalmente */
    padding: 25px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    text-align: center;
}

.quick-actions-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4em;
    color: #343a40;
    font-weight: 600;
}

.quick-actions-section .button-group {
    display: flex;
    flex-direction: row;
    /* Botones en fila */
    justify-content: center;
    gap: 15px;
}

.quick-actions-section .button-group button {
    flex: 1;
    /* Los botones comparten el espacio */
    max-width: 280px;
    /* Ancho máximo por botón */
}

/* Responsive para las acciones rápidas */
@media (max-width: 768px) {
    .quick-actions-section .button-group {
        flex-direction: column;
        /* Apilar botones en móvil */
    }

    .quick-actions-section .button-group button {
        max-width: none;
        /* Ancho completo en móvil */
    }
}

/* ====================================================== */
/* === ESTILOS PARA LOGO DENTRO DEL PANEL DE OPCIONES   === */
/* ====================================================== */

.logo-display-box {
    display: inline-block;
    padding: 10px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background-color: #f8f9fa;
    max-width: 150px;
}

.logo-display-box img {
    max-width: 50%;
    height: auto;
    display: block;
}

/* Simplificación de la sección de info superior */
.main-container .info-section {
    padding: 0;
    margin-bottom: 20px;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.main-container .info-section .logo-upload {
    display: none;
    /* Oculta el logo de la sección superior */
}

.main-container .info-section .info {
    font-size: 1.3em;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0;
}

/* --- ESTILOS PARA FOOTER (NUEVO) --- */
footer {
    color: #6c757d;
    /* Color de texto gris secundario */
    text-align: center;
    padding: 25px 0;
    /* Padding vertical de 25px */
    margin-top: auto;
    /* Empuja el footer al final de la página si el contenido es corto */
    width: 100%;
    font-size: 0.9em;
    /* Tamaño de fuente ligeramente más pequeño */
}

footer p {
    margin: 0;
    /* Quitar margen por defecto del párrafo */
}

/* ====================================================== */
/* === ESTILOS PARA HISTORIAL DE EVALUACIONES (NUEVO) === */
/* ====================================================== */

/* Contenedor principal para la sección de historial */
.evaluation-history-section {
    width: 100%;
    max-width: 1000px;
    /* Coincide con el ancho del panel de opciones */
    margin: 20px auto;
    /* Espacio consistente */
    padding: 25px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    text-align: center;
}

.evaluation-history-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4em;
    color: #343a40;
    font-weight: 600;
}

/* Contenedor de la tabla para permitir scroll en el futuro si es necesario */
.history-table-container {
    width: 100%;
    overflow-x: auto;
    /* Scroll horizontal en pantallas muy pequeñas */
}

/* Tabla del historial, inspirada en .stats-table para consistencia */
.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95em;
}

.history-table th,
.history-table td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
    /* Centrar contenido verticalmente */
}

.history-table th {
    background-color: #f0f2f5;
    color: #333;
    font-weight: 600;
}

.history-table tr:nth-child(even) td {
    background-color: #f8f9fa;
}

/* Celda de acciones para centrar los botones */
.history-table .actions-cell {
    text-align: center;
    white-space: nowrap;
    /* Evita que los botones se partan en dos líneas */
}

/* Indicadores de estado de la pauta (badges) */
.pauta-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.pauta-status.status-locked {
    background-color: #f8d7da;
    color: #721c24;
}

.pauta-status.status-unlocked {
    background-color: #d4edda;
    color: #155724;
}

/* Botones de acción dentro de la tabla */
.history-table .action-button {
    padding: 6px 12px !important;
    font-size: 0.85em !important;
    width: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 3px;
}

.btn-view-pauta {
    background-color: #007bff;
}

.btn-view-pauta:hover {
    background-color: #0056b3;
}

.btn-unlock-pauta {
    background-color: #ffc107;
    color: #212529;
}

.btn-unlock-pauta:hover {
    background-color: #e0a800;
}

.btn-download-eval {
    background-color: #6c757d;
}

.btn-download-eval:hover {
    background-color: #5a6268;
}


/* --- ESTILOS PARA MODAL DE DESBLOQUEO DE PAUTA --- */
#unlock-pauta-modal .modal-content {
    max-width: 450px;
    text-align: center;
}

.unlock-warning {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}

.unlock-warning i {
    font-size: 1.8em;
}

.unlock-warning p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

#unlock-pauta-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    text-align: left;
}

#unlock-pauta-form input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    margin-bottom: 10px;
}

#unlock-error-message {
    color: #dc3545;
    font-weight: 500;
    min-height: 1.2em;
    margin-bottom: 15px;
}

#unlock-pauta-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- ESTILOS PARA MODAL DE VISUALIZACIÓN DE PAUTA --- */
#view-pauta-modal .modal-content {
    max-width: 800px;
    text-align: left;
}

#pauta-content-area {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 15px;
    /* Espacio para la barra de scroll */
}

.pauta-ejercicio {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

.pauta-ejercicio:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.pauta-ejercicio h4 {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 8px;
}

.pauta-ejercicio .pregunta-texto {
    font-style: italic;
    color: #495057;
    margin-bottom: 10px;
    padding-left: 15px;
    border-left: 3px solid #ced4da;
}

.pauta-ejercicio .respuesta-bloque {
    background-color: #d4edda;
    border-left: 4px solid #155724;
    padding: 10px 15px;
    border-radius: 4px;
    color: #0f5132;
    font-weight: 500;
}

.pauta-ejercicio .respuesta-bloque strong {
    margin-right: 8px;
}

/* ========================================================== */
/* === NUEVOS ESTILOS PARA BANNER DE EVALUACIONES Y NOTIFICACIONES === */
/* ========================================================== */

/* Contenedor del enlace de la campana de notificación para posicionamiento */
.notification-bell-link {
    position: relative;
    display: inline-flex;
    /* Asegura que el contenedor se ajuste al botón */
}

/* Estilo para el punto rojo de notificación */
.notification-dot {
    position: absolute;
    top: 5px;
    /* Ajustar posición vertical */
    right: 5px;
    /* Ajustar posición horizontal */
    width: 10px;
    height: 10px;
    background-color: #dc3545;
    /* Rojo de peligro/notificación */
    border-radius: 50%;
    border: 2px solid white;
    /* Borde blanco para separarlo del ícono */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.8);
}

/* Estilo para el botón de la campana cuando hay una notificación */
.header-right button.notification-active i {
    color: #ffc107;
    /* Color dorado para destacar */
    animation: ring-animation 1.5s ease-in-out infinite;
}

/* Animación sutil de vibración/timbre para la campana */
@keyframes ring-animation {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(14deg);
    }

    20% {
        transform: rotate(-8deg);
    }

    30% {
        transform: rotate(14deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}


/* ========================================================== */
/* === NUEVOS ESTILOS PARA CHECKBOX DE ADAPTACIÓN IA        === */
/* ========================================================== */

/* Contenedor para el checkbox y su etiqueta */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Ocultar el checkbox por defecto */
.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

/* Crear el estilo del checkbox personalizado */
.checkbox-wrapper label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #adb5bd;
    border-radius: 4px;
    background-color: #f8f9fa;
    margin-right: 10px;
    vertical-align: middle;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Estilo cuando el checkbox está marcado */
.checkbox-wrapper input[type="checkbox"]:checked+label::before {
    background-color: #007bff;
    border-color: #007bff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

/* Estilo cuando el checkbox está deshabilitado */
.checkbox-wrapper input[type="checkbox"]:disabled+label {
    color: #6c757d;
    cursor: not-allowed;
}

.checkbox-wrapper input[type="checkbox"]:disabled+label::before {
    background-color: #e9ecef;
    border-color: #ced4da;
}

/* ========================================================== */
/* === NUEVOS ESTILOS PARA DROPDOWN DE NOTIFICACIONES       === */
/* ========================================================== */

/* Contenedor del dropdown de notificaciones para posicionamiento */
.notification-dropdown {
    position: relative;
}

/* Punto de notificación (ahora con número) */
.notification-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 20px;
    /* Ancho mínimo para que se vea bien con 1 o 2 dígitos */
    height: 20px;
    background-color: #dc3545;
    border-radius: 10px;
    /* Píldora */
    color: white;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 0 5px;
    border: 2px solid white;
}

/* Estilo para el botón de la campana cuando hay notificaciones */
.header-right .notification-active i {
    color: #007bff;
    /* Azul para indicar actividad */
    animation: ring-animation 1.5s ease-in-out 2;
    /* Animar solo 2 veces */
}

/* Animación de la campana (se mantiene) */
@keyframes ring-animation {
    0% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(14deg);
    }

    20% {
        transform: rotate(-8deg);
    }

    30% {
        transform: rotate(14deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(10deg);
    }

    60% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(0);
    }
}

/* Ajustes para el contenido del dropdown de notificaciones */
.notification-dropdown .dropdown-content {
    min-width: 320px;
    /* Más ancho para notificaciones */
    max-height: 400px;
    /* Altura máxima antes de scroll */
    overflow-y: auto;
    padding: 0;
    /* Quitar padding para que los items ocupen todo el espacio */
}

/* Cabecera del dropdown */
.notification-header {
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    position: sticky;
    /* Para que se quede fija al hacer scroll */
    top: 0;
    z-index: 1;
}

/* Estilo de cada item de notificación */
.notification-item {
    display: flex !important;
    /* Sobrescribir display: block de los 'a' */
    align-items: flex-start;
    gap: 15px;
    padding: 12px 15px !important;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none !important;
    color: #333 !important;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: #f8f9fa !important;
}

/* Icono dentro de la notificación */
.notification-icon {
    font-size: 1.2em;
    color: #007bff;
    margin-top: 4px;
    /* Alinear visualmente con el texto */
}

/* Contenedor del texto de la notificación */
.notification-text p {
    margin: 0 0 4px 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: #212529;
}

.notification-text small {
    font-size: 0.8em;
    color: #6c757d;
}

/* Mensaje cuando no hay notificaciones */
.notification-item-empty {
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

.notification-item-empty p {
    margin: 0;
    font-size: 0.9em;
}

/* ========================================================== */
/* === NUEVO ESTILO ELEGANTE PARA TARJETA DE UTILIDADES     === */
/* ========================================================== */

/* Contenedor de la nueva tarjeta de utilidad */
.utility-card {
    flex: 1 1 300px;
    /* Misma base flexible que las otras tarjetas */
    min-height: 120px;
    /* Más bajo y compacto */
    max-height: 120px;
    padding: 20px;
    border-radius: 12px;
    background-color: #f8f9fa;
    /* Fondo gris muy claro */
    border: 1px solid #e9ecef;
    /* Borde sutil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Sombra más suave */

    display: flex;
    align-items: center;
    /* Alinear todo verticalmente */
    gap: 20px;

    cursor: pointer;
    text-decoration: none;
    color: #343a40;
    /* Color de texto oscuro por defecto */

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.utility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #d8dbe0;
}

/* Icono dentro de la tarjeta de utilidad */
.utility-card-icon {
    font-size: 2em;
    /* Tamaño del icono */
    color: #007bff;
    /* Color primario para el icono */
    background-color: #e7f3ff;
    /* Fondo azul muy claro para el icono */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* Evita que el círculo del icono se encoja */
}

/* Texto dentro de la tarjeta */
.utility-card-text {
    flex-grow: 1;
    /* Ocupa el espacio sobrante */
    text-align: left;
}

.utility-card-text h3 {
    margin: 0 0 4px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #212529;
}

.utility-card-text p {
    margin: 0;
    font-size: 0.9em;
    color: #6c757d;
    /* Color secundario, más suave */
}

/* Flecha a la derecha */
.utility-card-arrow {
    font-size: 1.2em;
    color: #ced4da;
    /* Color de la flecha, muy sutil */
    transition: color 0.3s ease, transform 0.3s ease;
}

.utility-card:hover .utility-card-arrow {
    color: #007bff;
    /* La flecha se vuelve azul al pasar el mouse */
    transform: translateX(5px);
    /* Se mueve ligeramente a la derecha */
}

/* ========================================================== */
/* === ESTILOS FINALES PARA SECCIÓN DE HERRAMIENTAS         === */
/* ========================================================== */

/* Título para las secciones (Asignaturas, Herramientas) */
.section-title {
    width: 100%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #495057;
    /* Un gris oscuro, menos fuerte que el negro */
    font-weight: 300;
    /* Un peso de fuente más ligero para un look moderno */
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

/* Contenedor para las tarjetas de Evaluaciones y Opciones */
.utility-cards-container {
    display: grid;
    /* Usamos grid para un diseño flexible y robusto */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Columnas responsivas */
    gap: 25px;
    /* Espacio entre las tarjetas */
    width: 100%;
}

/* ========================================================== */
/* === ESTILO PARA NOTIFICACIONES LEÍDAS                    === */
/* ========================================================== */

/* Estilo para un item de notificación que ya ha sido leído */
.notification-item.read {
    background-color: #f8f9fa;
    /* Fondo gris muy claro para diferenciar */
    opacity: 0.75;
    /* Ligeramente más transparente */
}

.notification-item.read:hover {
    opacity: 1;
    /* Opacidad completa al pasar el mouse para que sea legible */
    background-color: #e9ecef !important;
    /* Un gris un poco más oscuro en hover */
}

.notification-item.read .notification-icon {
    color: #6c757d;
    /* Icono de color gris secundario */
}

/* ========================================================== */
/* === LÓGICA DE DROPDOWN BASADA EN CLIC (JAVASCRIPT)       === */
/* ========================================================== */

/* El contenido del dropdown se muestra solo cuando tiene la clase .show, 
   que es añadida por JavaScript al hacer clic. */
.dropdown-content.show {
    display: block;
    /* Puedes añadir una animación de aparición si lo deseas */
    animation: fadeInDropdown 0.2s ease-out forwards;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================== */
/* === CORRECCIÓN PARA TOOLTIPS EN BOTONES DEL HEADER       === */
/* ========================================================== */

/* Contenedor para botones individuales en el header que necesiten
   un tooltip que se posicione correctamente a la izquierda. */
.header-button-wrapper {
    position: relative;
    display: inline-flex;
}

/* Anula el centrado del tooltip y lo ancla a la derecha del botón */
.header-button-wrapper .tooltip {
    left: auto;
    right: 0;
    transform: translateX(0);
}

/* Ajusta la flecha para que apunte al centro del botón */
.header-button-wrapper .tooltip::after {
    left: auto;
    right: 15px;
    /* Ajusta este valor para centrar la flecha sobre el ícono */
    transform: translateX(0);
}

/* PROFE MENU ESTILOS*/

/* Título para las secciones (Asignaturas, Herramientas) */
.section-title {
    width: 100%;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #495057;
    /* Un gris oscuro, menos fuerte que el negro */
    font-weight: 300;
    /* Un peso de fuente más ligero para un look moderno */
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

/* Contenedor para las tarjetas de Evaluaciones y Opciones */
.utility-cards-container {
    display: grid;
    /* Usamos grid para un diseño flexible y robusto */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Columnas responsivas */
    gap: 25px;
    /* Espacio entre las tarjetas */
    width: 100%;
}

/* Contenedor de la nueva tarjeta de utilidad */
.utility-card {
    flex: 1 1 300px;
    /* Misma base flexible que las otras tarjetas */
    min-height: 120px;
    /* Más bajo y compacto */
    max-height: 120px;
    padding: 20px;
    border-radius: 12px;
    background-color: #f8f9fa;
    /* Fondo gris muy claro */
    border: 1px solid #e9ecef;
    /* Borde sutil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Sombra más suave */

    display: flex;
    align-items: center;
    /* Alinear todo verticalmente */
    gap: 20px;

    cursor: pointer;
    text-decoration: none;
    color: #343a40;
    /* Color de texto oscuro por defecto */

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.utility-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #d8dbe0;
}

/* Icono dentro de la tarjeta de utilidad */
.utility-card-icon {
    font-size: 2em;
    /* Tamaño del icono */
    color: #007bff;
    /* Color primario para el icono */
    background-color: #e7f3ff;
    /* Fondo azul muy claro para el icono */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* Evita que el círculo del icono se encoja */
}

/* Texto dentro de la tarjeta */
.utility-card-text {
    flex-grow: 1;
    /* Ocupa el espacio sobrante */
    text-align: left;
}

.utility-card-text h3 {
    margin: 0 0 4px 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #212529;
}

.utility-card-text p {
    margin: 0;
    font-size: 0.9em;
    color: #6c757d;
    /* Color secundario, más suave */
}

/* Flecha a la derecha */
.utility-card-arrow {
    font-size: 1.2em;
    color: #ced4da;
    /* Color de la flecha, muy sutil */
    transition: color 0.3s ease, transform 0.3s ease;
}

.utility-card:hover .utility-card-arrow {
    color: #007bff;
    /* La flecha se vuelve azul al pasar el mouse */
    transform: translateX(5px);
    /* Se mueve ligeramente a la derecha */
}

/* ====================================================== */
/* === ESTILOS CORREGIDOS Y MEJORADOS PARA "ESTUDIANDO!" === */
/* ====================================================== */

/* AJUSTE CLAVE: Anula los estilos generales del body solo para la página del chat */
body.chat-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* Fija la altura del body al 100% de la ventana */
    overflow: hidden;
    /* Evita que la página entera haga scroll */
    padding-top: 70px;
    /* Mantiene el espacio para el header fijo */
}

/* AJUSTE CLAVE: Anula los estilos del .main-container para que se comporte como un contenedor flexible que crece */
.chat-body .main-container.chat-page-container {
    flex-grow: 1;
    /* Hace que el contenedor del chat ocupe todo el espacio vertical disponible */
    margin-top: 0;
    /* Quita el margen superior para pegarse al header */
    margin-bottom: 0;
    /* Quita el margen inferior para pegarse al footer */
    padding: 20px 0 !important;
    /* Añade un poco de espacio vertical pero anula el padding lateral */
    display: flex;
    min-height: 0;
    /* Soluciona problemas de overflow en contenedores flex */
    width: 95%;
    /* Mantiene un margen lateral agradable */
    max-width: 1600px;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

/* AJUSTE CLAVE: Quita el padding del footer en la página del chat */
.chat-body footer {
    padding: 10px 0;
    flex-shrink: 0;
    /* Evita que el footer se encoja */
}

/* Layout principal que contiene historial y ventana de chat */
.chat-layout {
    display: flex;
    width: 100%;
    flex-grow: 1;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* --- Panel de Historial (Izquierda) --- */
.history-panel {
    width: 280px;
    background-color: #f8f9fa;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.history-header {
    padding: 15px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.history-header h3 {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: #343a40;
}

#new-chat-btn {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#new-chat-btn:hover {
    background-color: #0056b3;
}

.history-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    gap: 5px;
}

.history-item:hover {
    background-color: #e9ecef;
}

.history-item.active {
    background-color: #dbeafe;
    font-weight: 600;
}

.history-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    font-size: 0.9em;
}

.history-item-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.edit-chat-btn,
.delete-chat-btn {
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 5px;
    font-size: 0.9em;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.history-item:hover .edit-chat-btn,
.history-item:hover .delete-chat-btn {
    opacity: 1;
}

.edit-chat-btn:hover {
    color: #007bff;
}

.delete-chat-btn:hover {
    color: #dc3545;
}

.no-history,
.history-loading {
    text-align: center;
    color: #6c757d;
    padding: 20px;
    font-size: 0.9em;
}

/* --- Ventana de Chat (Derecha) --- */
.chat-window {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    min-width: 0;
}

.chat-header {
    padding: 15px 25px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    background-color: #ffffff;
    z-index: 2;
}

#chat-title {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
    color: #343a40;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-bubble {
    max-width: 75%;
    padding: 12px 18px;
    border-radius: 18px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    padding-bottom: 30px;
}

.message-bubble p {
    margin: 0;
}

.user-message {
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
    padding-bottom: 12px;
}

.ai-message {
    background-color: #e9ecef;
    color: #212529;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.ai-message.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.tts-play-btn {
    position: absolute;
    bottom: 6px;
    right: 10px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.9em;
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
}

.ai-message:hover .tts-play-btn {
    opacity: 1;
}

.tts-play-btn:hover {
    color: #007bff;
}

.tts-play-btn.playing i {
    color: #007bff;
}

/* --- Área de Input del Chat (Fija abajo) --- */
.chat-input-area {
    display: flex;
    align-items: flex-end;
    padding: 15px 25px;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
    flex-shrink: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.chat-input-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
}

#chat-input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid #ced4da;
    border-radius: 22px;
    resize: none;
    font-size: 1em;
    line-height: 1.4;
    max-height: 150px;
    overflow-y: auto;
}

#chat-input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

#send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 10px;
    transition: background-color 0.2s;
}

#send-btn:hover {
    background-color: #0056b3;
}

#send-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.voice-input-chat {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.4em;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 3;
}

.voice-input-chat:hover {
    color: #007bff;
}

.voice-input-chat.recording {
    color: #dc3545;
    animation: pulseVoice 1.2s infinite;
}

@keyframes pulseVoice {
    0% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.15);
    }

    100% {
        transform: translateY(-50%) scale(1);
    }
}

/* --- Estilos para el Modal de Confirmación (CORREGIDO) --- */
.confirm-delete-modal.modal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-delete-modal .modal-content {
    max-width: 420px;
    padding: 25px 30px;
    margin: 0;
    /* Anula el margen automático */
    height: auto;
    /* Clave: ajusta la altura al contenido */
    max-height: none;
    /* Anula cualquier max-height heredado */
}

.confirm-delete-modal .modal-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.confirm-delete-modal .modal-content p {
    margin-bottom: 25px;
    line-height: 1.5;
}

.confirm-delete-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: none;
    padding-top: 0;
}

/* --- Estilos para el Botón de Conversación por Voz --- */
.voice-conversation-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: #17a2b8;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1001;
}

.voice-conversation-btn:hover {
    transform: scale(1.1);
    background-color: #138496;
}

.voice-conversation-btn.listening {
    background-color: #28a745;
    animation: pulse-green 1.5s infinite;
}

.voice-conversation-btn.speaking {
    background-color: #007bff;
    animation: glow-blue 1.5s infinite alternate;
}

.voice-status-indicator {
    text-align: center;
    padding: 8px;
    font-size: 0.9em;
    font-weight: 500;
    color: #495057;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(40, 167, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

@keyframes glow-blue {
    from {
        box-shadow: 0 0 5px #007bff, 0 0 10px #007bff;
    }

    to {
        box-shadow: 0 0 20px #007bff, 0 0 30px #007bff;
    }
}

/* --- Responsividad para el Chat --- */
@media (max-width: 768px) {
    .chat-body .main-container.chat-page-container {
        margin: 0;
        width: 100%;
        border-radius: 0;
        padding: 0 !important;
    }

    .chat-layout {
        border-radius: 0;
    }

    .history-panel {
        display: none;
    }

    .chat-header,
    .chat-messages,
    .chat-input-area {
        padding: 15px;
    }

    .message-bubble {
        max-width: 90%;
    }
}

/* ====================================================== */
/* === ESTILOS PARA MODAL DE CONFIGURACIÓN DE EVALUACIÓN === */
/* ====================================================== */

/* Contenido del modal de configuración */
#evaluation-config-modal .modal-content {
    max-width: 800px;
    text-align: left;
}

#evaluation-config-modal h3 {
    text-align: center;
    margin-bottom: 25px;
}

/* Contenedor para los ítems de la evaluación */
#evaluation-items-container {
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px;
    margin: 0 -10px 15px -10px;
    /* Compensa el padding para que el scroll se vea bien */
}

/* Estilo para cada bloque de Ítem individual */
.evaluation-item {
    background-color: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: fadeInModal 0.4s ease-out;
}

.evaluation-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.evaluation-item-header h4 {
    margin: 0;
    font-size: 1.1em;
    color: #333;
}

/* Botón para eliminar un ítem */
.btn-remove-item {
    background: none;
    border: none;
    color: #dc3545;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}

.btn-remove-item:hover {
    background-color: #f8d7da;
    color: #721c24;
}

/* Cuerpo del ítem con los inputs y selects */
.evaluation-item-body {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    /* Área, Tipo, Cantidad, Puntos */
    gap: 15px;
    align-items: flex-end;
}

.evaluation-item-body .form-group {
    margin-bottom: 0;
}

.evaluation-item-body label {
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

/* Inputs y selects dentro del ítem */
.evaluation-item-body input,
.evaluation-item-body select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.95em;
}

.evaluation-item-body input:focus,
.evaluation-item-body select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    outline: none;
}

/* Botón para añadir un nuevo ítem */
#btn-add-item {
    width: auto;
    /* Ancho automático basado en contenido */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 500;
}

/* Mensaje de error dentro del formulario del modal */
#config-form-error {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

#evaluation-config-modal .btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

#evaluation-config-modal .btn-secondary:hover {
    background-color: #5a6268;
}

/* --- Responsividad para el Modal de Configuración --- */
@media (max-width: 768px) {
    .evaluation-item-body {
        /* Cambia a un grid de 2x2 en pantallas más pequeñas */
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .evaluation-item-body {
        /* Apila todo en una sola columna en pantallas muy pequeñas */
        grid-template-columns: 1fr;
    }
}

.unit-changer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    /* Espacio antes de la pizarra */
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    border: 1px solid #e9ecef;
}

.unit-changer-container label {
    font-weight: 500;
    color: #495057;
    font-size: 0.95em;
    margin-bottom: 0;
}

.unit-changer-container .form-select {
    flex-grow: 1;
    /* El select ocupa el espacio disponible */
    max-width: 400px;
    font-size: 0.95em;
    height: auto;
    /* Altura automática basada en padding */
    padding: 8px 12px;
}

/* Estilo para el display del nombre de la unidad actual en la pizarra */
.ejercicio-area-display {
    font-size: 0.95em;
    color: #666;
    margin-top: -5px;
    margin-bottom: 8px;
    font-style: italic;
    min-height: 1.1em;
    font-weight: 500;
}

/* Ajustes para el modal de selección inicial */
#unit-selection-modal .modal-content {
    animation: fadeInModal 0.3s ease-out;
}

#unit-selection-modal h3 {
    color: #005A9C;
    font-size: 1.5em;
}

#unit-selection-modal p {
    color: #495057;
    font-size: 1.05em;
    line-height: 1.5;
}

/* Ajustes para el modal de confirmación de cambio de unidad */
#confirm-change-unit-modal .modal-content h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.3em;
}

#confirm-change-unit-modal .modal-content p {
    font-size: 1em;
    color: #333;
    line-height: 1.6;
}

#confirm-change-unit-modal .modal-content strong {
    color: #005A9C;
}

/* ====================================================== */
/* === ESTILOS CORREGIDOS PARA LA BARRA SUPERIOR        === */
/* ====================================================== */

/* 1. Nuevo contenedor principal para la barra superior */
.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    /* Espacio antes de la pizarra */
    gap: 15px;
    /* Espacio entre los elementos */
    min-height: 40px;
    /* Altura mínima para asegurar alineación */
}

/* 2. Contenedor para el elemento izquierdo (Establecimiento) */
.top-bar-left {
    flex: 1;
    /* Ocupa el espacio disponible a la izquierda */
    text-align: left;
}

.top-bar-left .info {
    margin-bottom: 0;
    /* Quitar margen inferior del párrafo */
    font-size: 1em;
    white-space: nowrap;
    /* Evita que el texto se parta */
}

/* 3. CORRECCIÓN: Quitar posicionamiento absoluto de los elementos */
.unit-changer-container {
    /* Se elimina 'position: absolute', 'top', 'left', 'transform' */
    position: static;
    /* Restablecer a su estado normal */
    transform: none;
    flex: 1;
    /* Permitir que ocupe espacio en el centro */
    justify-content: center;
    /* Centrar su contenido interno */

    /* Se mantienen los estilos visuales */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    width: auto;
    max-width: 500px;
    border: 1px solid #e9ecef;
}

.status-container {
    /* Se elimina 'position: absolute', 'top', 'right' */
    position: static;
    flex: 1;
    /* Ocupa el espacio disponible a la derecha */
    text-align: right;
    display: flex;
    flex-direction: column;
    /* Apilar timer y counter */
    align-items: flex-end;
    /* Alinear a la derecha */
}

/* 4. Ajuste en la pizarra para que no quede pegada */
.pizarra {
    margin-top: 0;
    /* El margen ya está en .top-bar-container */
}

/* 5. Ajuste responsive */
@media (max-width: 992px) {
    .top-bar-container {
        flex-wrap: wrap;
        /* Permitir que los elementos se envuelvan */
        justify-content: center;
        /* Centrar todo cuando se envuelve */
    }

    .top-bar-left {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .status-container {
        order: 3;
        /* Mover contadores al final */
        flex-basis: 100%;
        align-items: center;
        margin-top: 10px;
    }

    .unit-changer-container {
        order: 2;
        flex-basis: 100%;
    }
}

/* ====================================================== */
/* === ESTILOS PARA NIVELACION / REFUERZO            === */
/* ====================================================== */

.refuerzo-page-title {
    color: #005A9C !important;
    font-weight: 700;
    margin-bottom: 5px;
}

.refuerzo-area-info {
    background: #e9f5ff;
    color: #004085;
    padding: 8px 15px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 0.95em;
    border: 1px solid #cce5ff;
}

.refuerzo-siguiente {
    background-color: #0a7ea4 !important;
    /* Teal mí
s oscuro para mejor contraste */
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 6px rgba(10, 126, 164, 0.2);
}

.refuerzo-siguiente:hover {
    background-color: #086685 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(10, 126, 164, 0.3);
}


/* Animación específica para modal centrado */
/* Animación para modales con posicionamiento absoluto (center absolute) */
@keyframes fadeInModalAbsolute {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Animación estándar para modales Flex/Margin (No rompe el centrado) */
@keyframes fadeInModal {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Mode Theme Variables */
[data-theme='dark'] {
    --background-color: #121212;
    --card-bg: #1e1e1e;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: #2d2d2d;
    --primary-color: #3b82f6;
    --glass-bg: rgba(30, 41, 59, 0.9);
}

/* Dark Mode Toggle Switch Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
}

.theme-switch-wrapper:last-child {
    border-bottom: none;
}

.theme-switch {
    display: inline-block;
    height: 20px;
    position: relative;
    width: 40px;
    margin-left: 10px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    background-color: #fff;
    bottom: 2px;
    content: '';
    height: 16px;
    left: 2px;
    position: absolute;
    transition: .4s;
    width: 16px;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* Adjust dropdown for dark mode */
[data-theme='dark'] .dropdown-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme='dark'] .dropdown-content a,
[data-theme='dark'] .dropdown-content div {
    color: var(--text-main);
}

[data-theme='dark'] .dropdown-content a:hover,
[data-theme='dark'] .theme-switch-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- DARK MODE SWITCH & STYLES --- */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2d2d2d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #444;
    --accent-color: #64b5f6;
    --card-hover: #333;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .header h1,
[data-theme="dark"] .header p,
[data-theme="dark"] .header-center-info {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header-info-main,
[data-theme="dark"] .header-info-sub {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .subject-card,
[data-theme="dark"] .utility-card,
[data-theme="dark"] .card {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-content a {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-content a:hover {
    background-color: var(--card-hover);
}

[data-theme="dark"] .dropbtn {
    color: var(--text-primary);
}

[data-theme="dark"] .namealumno {
    color: var(--text-primary);
}

/* Switch UI */
.theme-switch-container {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[data-theme="dark"] .theme-switch-container {
    border-bottom: 1px solid var(--border-color);
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

[data-theme="dark"] input:checked+.slider {
    background-color: #64b5f6;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* --- FIXED NEUTRAL DARK MODE (v2) --- */
/* ==========================================================================
   SOLID DARK MODE OVERRIDES (Fixing Bugs & Neutral Grays)
   ========================================================================== */

[data-theme="dark"] {
    /* Neutral Dark Grays - No Blues */
    --bg-primary: #121212;
    /* Main background - Very dark gray */
    --bg-secondary: #1e1e1e;
    /* Cards, Headers, Pizarra - Dark Gray */
    --bg-tertiary: #2c2c2c;
    /* Inputs, Hovers - Lighter Gray */
    --bg-modal: #242424;
    /* Modals */

    --text-primary: #e0e0e0;
    /* Main text - Off-white */
    --text-secondary: #a0a0a0;
    /* Subtitles - Light Gray */
    --text-muted: #707070;

    --border-color: #404040;
    /* Dark gray borders */
    --accent-color: #64b5f6;
    /* Keep accent but maybe desaturate if requested? User said "pasteles" */
    --accent-pastel: #90caf9;

    --shadow-color: rgba(0, 0, 0, 0.6);
}

/* --- Global Backgrounds & Text --- */
[data-theme="dark"] body,
[data-theme="dark"] html {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.badge),
[data-theme="dark"] label {
    color: var(--text-primary);
}

/* --- Header & Navigation --- */
[data-theme="dark"] .header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header-logo-link,
[data-theme="dark"] .header-button {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header-button i {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropbtn {
    color: var(--text-primary) !important;
    background-color: transparent;
}

/* --- Main Containers & Pizarra (Critical Fix) --- */
[data-theme="dark"] .main-container {
    background-color: transparent !important;
    /* Let body bg show through */
}

/* The white box problem: Pizarra */
[data-theme="dark"] .pizarra {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
}

/* Top Bar Container */
[data-theme="dark"] .top-bar-container {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

/* Unit Changer Select in Top Bar */
[data-theme="dark"] .top-bar-container select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

/* Status: Timer & Counters */
[data-theme="dark"] .status-container {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* --- Cards (Menu, Subjects) --- */
[data-theme="dark"] .subject-card,
[data-theme="dark"] .utility-card,
[data-theme="dark"] .card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .subject-card:hover,
[data-theme="dark"] .utility-card:hover {
    background-color: var(--bg-tertiary) !important;
    transform: translateY(-2px);
}

[data-theme="dark"] .card-text h2,
[data-theme="dark"] .card-text p,
[data-theme="dark"] .utility-card-text h3,
[data-theme="dark"] .utility-card-text p {
    color: var(--text-primary) !important;
}

/* --- Inputs & Forms (Critical Fix) --- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

/* --- Buttons --- */
[data-theme="dark"] .action-button,
[data-theme="dark"] .send-button,
[data-theme="dark"] .voice-button,
[data-theme="dark"] .tts-button,
[data-theme="dark"] .dictation-button {
    filter: brightness(0.9);
    /* Slightly muted/pastel */
    border: 1px solid var(--border-color);
}

/* Ensure icons inside buttons are visible */
[data-theme="dark"] .action-button i,
[data-theme="dark"] .send-button i {
    color: inherit;
}

/* --- Modals & Dropdowns --- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-content {
    background-color: var(--bg-modal) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 10px 25px var(--shadow-color);
}

[data-theme="dark"] .dropdown-content a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-content a:hover {
    background-color: var(--bg-tertiary) !important;
}

/* --- Specific Fixes for "English Teacher" Text --- */
[data-theme="dark"] #ejercicio-texto,
[data-theme="dark"] #pizarra h3 {
    color: var(--text-primary) !important;
}

/* --- Tables (if any) --- */
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] thead th {
    background-color: var(--bg-tertiary) !important;
}

/* --- Scrollbar --- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* --- Chat & AI Elements --- */
[data-theme="dark"] .respuesta-animada {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Floating Chat Button */
[data-theme="dark"] .floating-activar-profesora {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

/* --- FINAL DARK MODE FIXES (Unit/TopBar/Modal) --- */
/* =========================================
   Quick Fixes for Dark Mode (User Feedback v2)
   ========================================= */

/* 1. Unit Changer Container - Force Transparent or Dark */
[data-theme="dark"] .unit-changer-container {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .unit-changer-container label {
    color: var(--text-primary) !important;
}

/* 2. Top Bar Container - Remove Border & Merge with Main Background */
[data-theme="dark"] .top-bar-container {
    background-color: transparent !important;
    /* Matches implicit body/main-container bg */
    border: none !important;
    box-shadow: none !important;
}

/* 3. Professor Mode Modal Content - Fix White Background */
[data-theme="dark"] .modo-profesora-modal-content {
    background-color: var(--bg-modal) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-header-profesora h2,
[data-theme="dark"] .modo-profesora-modal-content h2,
[data-theme="dark"] .modo-profesora-modal-content label {
    color: var(--text-primary) !important;
}

/* Fix Selects inside this modal specifically if needed */
[data-theme="dark"] .modo-profesora-header select.tipo-ejercicio-select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Fix Chat response area background */
[data-theme="dark"] #ultima-respuesta {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Fix Chat input area */
[data-theme="dark"] #chat-pregunta {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Fix floating buttons if any white artifact remains */
[data-theme="dark"] .close-profesora-modal-btn {
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* --- DARK MODE PATCH: SECTIONS (v3) --- */
/* ==========================================================================
   DARK MODE PATCH: Fix White Sections & Missing Backgrounds (Requested v3)
   ========================================================================== */

/* Target specific white sections reported by user */
[data-theme="dark"] .quick-actions-section,
[data-theme="dark"] .evaluation-history-section,
[data-theme="dark"] .options-panel-header,
[data-theme="dark"] .options-panel-body,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .password-section,
[data-theme="dark"] .info-section,
/* Generic info section */
[data-theme="dark"] .form-section

/* Generic form section */
    {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure headings and text inside these sections are light */
[data-theme="dark"] .quick-actions-section h3,
[data-theme="dark"] .quick-actions-section p,
[data-theme="dark"] .evaluation-history-section h3,
[data-theme="dark"] .options-panel-header h3,
[data-theme="dark"] .profile-section h4,
[data-theme="dark"] .profile-section p,
[data-theme="dark"] .password-section h4,
[data-theme="dark"] .password-section label,
[data-theme="dark"] .info-section h3,
[data-theme="dark"] .info-section p {
    color: var(--text-primary) !important;
}

/* Fix "Mis Estadísticas de Práctica" items */
[data-theme="dark"] .resumen-debilidades-mensaje {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Fix Tables in History/Stats */
[data-theme="dark"] table.history-table,
[data-theme="dark"] table.stats-table {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] table.history-table th,
[data-theme="dark"] table.stats-table th {
    background-color: #333 !important;
    /* Slightly darker header */
    color: #fff !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] table.history-table td,
[data-theme="dark"] table.stats-table td {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Fix "Bloqueada/Disponible" badges */
[data-theme="dark"] .status-locked {
    background-color: #5a2a2a;
    /* Darker red */
    color: #ffcccc;
}

[data-theme="dark"] .status-unlocked {
    background-color: #1b4d24;
    /* Darker green */
    color: #ccffcc;
}

/* Fix Buttons inside these sections */
[data-theme="dark"] .button-group button {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .button-group button:hover {
    background-color: #444;
}

/* Config Modal specific fixes */
[data-theme="dark"] #evaluation-config-modal .modal-content,
[data-theme="dark"] #unlock-pauta-modal .modal-content,
[data-theme="dark"] #view-pauta-modal .modal-content,
[data-theme="dark"] #confirm-modal .modal-content,
[data-theme="dark"] #stats-modal .modal-content,
[data-theme="dark"] #details-modal .modal-content {
    background-color: var(--bg-modal) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

/* --- DARK MODE PATCH: V4 (Options/Chat/Dropdown) --- */
/* =========================================
   Dark Mode Aesthetic Fixes (v4)
   ========================================= */

/* 1. Options Panel Borders & Strong Text */
[data-theme="dark"] .options-panel {
    border-color: var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .options-panel-header,
[data-theme="dark"] .options-panel-body,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .password-section,
[data-theme="dark"] .quick-actions-section {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] strong {
    color: var(--text-primary) !important;
    /* White/Light Grey */
    font-weight: 600;
}

[data-theme="dark"] .profile-data-view p {
    color: #ccc;
}

/* 2. Estudiando.html - Chat Containers */
[data-theme="dark"] .chat-page-container {
    background-color: transparent !important;
}

[data-theme="dark"] .history-panel {
    background-color: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .chat-window {
    background-color: var(--bg-primary) !important;
}

/* Chat Messages */
[data-theme="dark"] .message-bubble.ai-message {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .message-bubble.user-message {
    background-color: #1a3a5a;
    /* Slightly blueish dark for user msg? Or keep neutral? */
    /* User asked for neutral, but user messages usually distinct. Let's use a dark grey-blue or just dark grey */
    background-color: #333;
    color: #fff;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .chat-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .chat-input-area {
    background-color: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .chat-input-wrapper {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #chat-input {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .history-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .history-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .history-item.active {
    background-color: #333;
    color: var(--text-primary);
    border-left: 3px solid var(--accent-color);
}

/* 3. Dropdown Button Fix (Ensure it's visible and clickable) */
/* The issue was JS logic, but let's ensure CSS doesn't hide it */
[data-theme="dark"] .dropbtn {
    cursor: pointer;
    z-index: 1001;
    /* Ensure on top */
}

/* --- MASTER DARK MODE FIX (FINAL) --- */
/* ==========================================================================
   MASTER DARK MODE FIX (Aggressive & Comprehensive)
   ========================================================================== */

/* 1. UNIVERSAL TEXT COLOR ENFORCEMENT */
[data-theme="dark"] body,
[data-theme="dark"] div,
[data-theme="dark"] p,
[data-theme="dark"] span:not(.badge):not(.status-badge),
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] i,
[data-theme="dark"] em,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] blockquote,
[data-theme="dark"] form,
[data-theme="dark"] a:not(.btn):not(.action-button) {
    color: var(--text-primary) !important;
}

/* Fix nice blue links if needed, but default to light text for readability */
[data-theme="dark"] a:not(.btn):not(.action-button):hover {
    color: var(--accent-pastel) !important;
}

/* 2. UNIVERSAL BACKGROUND FIX (No More White Divs) */
/* Force all specific known containers to use strict dark backgrounds */
[data-theme="dark"] .card,
[data-theme="dark"] .utility-card,
[data-theme="dark"] .subject-card,
[data-theme="dark"] .info-section,
[data-theme="dark"] .form-section,
[data-theme="dark"] .options-panel,
[data-theme="dark"] .options-panel-header,
[data-theme="dark"] .options-panel-body,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .password-section,
[data-theme="dark"] .quick-actions-section,
[data-theme="dark"] .evaluation-history-section,
[data-theme="dark"] .history-table-container,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-content,
[data-theme="dark"] .pizarra,
[data-theme="dark"] .chat-window,
[data-theme="dark"] .history-panel,
[data-theme="dark"] .message-bubble.ai-message,
[data-theme="dark"] .top-bar-container,
[data-theme="dark"] .table-container,
/* Generic likely class */
[data-theme="dark"] .container,
/* Generic */
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .login-container,
[data-theme="dark"] .register-container,
[data-theme="dark"] .intro-section {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
}

/* 3. TRANSPARENT BACKGROUNDS (Blends with Body) */
[data-theme="dark"] .main-container,
[data-theme="dark"] .chat-page-container,
[data-theme="dark"] .header-center,
[data-theme="dark"] .header-left,
[data-theme="dark"] .header-right {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. INPUTS & FORMS (Readability) */
[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* 5. SPECIFIC TEXT OVERRIDES */
/* Ensure icons are visible */
[data-theme="dark"] i.fas,
[data-theme="dark"] i.far,
[data-theme="dark"] i.fa-solid {
    color: inherit !important;
    /* Inherit from the enforced parent color */
}

/* Exception: Success/Error icons needing color */
[data-theme="dark"] .fa-check,
[data-theme="dark"] .fa-check-circle {
    color: #81c784 !important;
}

[data-theme="dark"] .fa-times,
[data-theme="dark"] .fa-exclamation-circle {
    color: #e57373 !important;
}

[data-theme="dark"] .fa-exclamation-triangle {
    color: #ffd54f !important;
}

/* 6. BUTTONS */
[data-theme="dark"] button.action-button,
[data-theme="dark"] button.btn,
[data-theme="dark"] .btn-primary {
    /* Keep their original colors but ensure text is readable */
    filter: brightness(0.9);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 7. TABLES */
[data-theme="dark"] table {
    color: var(--text-primary) !important;
}

[data-theme="dark"] th {
    background-color: var(--bg-tertiary) !important;
    color: #fff !important;
}

[data-theme="dark"] td {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* 8. ALERTS & TOASTS */
[data-theme="dark"] .flash-toast {
    background-color: var(--bg-modal) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

/* --- DARK MODE MASTER FIXED (v5) --- */
/* =========================================================================
   MASTER DARK MODE FIX (v5 - Final Polish)
   ========================================================================= */

/* 1. GLOBAL TEXT READABILITY
   Force all text content to be light, BUT exclude specific icon containers 
   to preserve their color coding (as requested). */

[data-theme="dark"] body,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] div {
    color: var(--text-primary);
}

/* Re-apply !important to critical text elements that might be overridden by specific styles,
   BUT EXCLUDE icon classes to avoid overriding their specific colors. */
[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] span:not(.badge):not(.fa):not(.fas):not(.far),
[data-theme="dark"] strong,
[data-theme="dark"] b,
[data-theme="dark"] label,
[data-theme="dark"] a:not(.btn):not(.action-button):not(.utility-card) {
    color: var(--text-primary) !important;
}

/* PRESERVE MENU ICONS COLORS (Explicit Exception) */
/* Dark Mode fix for suggestion-box */
[data-theme="dark"] .suggestion-box {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Ensure the parent div .utility-card-icon (which has inline styles) passes that color to the icon */
[data-theme="dark"] .utility-card-icon i {
    color: inherit !important;
}

/* And ensure .utility-card-icon itself does NOT get the white color forced by the 'div' rule above. 
   Inline styles usually beat the simple 'div' rule, but let's be safe. */
[data-theme="dark"] div.utility-card-icon {
    border-color: transparent !important;
    /* Remove borders if any */
}

/* 2. ELIMINATE WHITE BACKGROUNDS (Catch-all for containers) */
/* Targeted List of potential white containers */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .content-box,
[data-theme="dark"] .box,
[data-theme="dark"] .container-custom,
[data-theme="dark"] .form-container,
[data-theme="dark"] .table-container,
[data-theme="dark"] .details-box,
[data-theme="dark"] .summary-box {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .accordion-button {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-secondary) !important;
    color: var(--accent-color) !important;
}

/* 3. INPUTS & FORMS (Reinforce) */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary) !important;
}

/* 4. LINKS (Make them visible) */
[data-theme="dark"] a {
    color: var(--accent-color);
}

[data-theme="dark"] a:hover {
    color: var(--accent-pastel);
}

/* 5. SPECIFIC PAGE FIXES */

/* Login Page specific */
[data-theme="dark"] .login-container,
[data-theme="dark"] .login-card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}

/* Tables (General) */
[data-theme="dark"] table {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] tr:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Flash Messages / Toasts */
[data-theme="dark"] .flash-toast {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary) !important;
}

/* --- DARK MODE ADMIN FIXES (v6) --- */
/* =========================================
   Dark Mode Admin Fixes (v6)
   ========================================= */

/* Fix Admin Generador Container */
[data-theme="dark"] .main-container-gen {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Fix Admin Panel Container */
[data-theme="dark"] .admin-container {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure text inside these specific containers is readable */
[data-theme="dark"] .main-container-gen h2,
[data-theme="dark"] .main-container-gen h3,
[data-theme="dark"] .main-container-gen p,
[data-theme="dark"] .main-container-gen label,
[data-theme="dark"] .admin-container h2,
[data-theme="dark"] .admin-container h3,
[data-theme="dark"] .admin-container p,
[data-theme="dark"] .admin-container label {
    color: var(--text-primary) !important;
}

/* Fix white background in admin forms if any */
[data-theme="dark"] .main-container-gen form,
[data-theme="dark"] .admin-container form {
    background-color: transparent !important;
}

/* --- DARK MODE PATCH V7 (Final Icons & Establishment) --- */
/* =========================================
   Dark Mode Fixes V7 (Establishment & Icons)
   ========================================= */

/* 1. Establishment Containers Fix */
[data-theme="dark"] .establishment-data-container,
[data-theme="dark"] .establishment-selector-bar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure text inside them is light */
[data-theme="dark"] .establishment-data-container h2,
[data-theme="dark"] .establishment-data-container p,
[data-theme="dark"] .establishment-data-container label,
[data-theme="dark"] .establishment-selector-bar h2,
[data-theme="dark"] .establishment-selector-bar p,
[data-theme="dark"] .establishment-selector-bar label {
    color: var(--text-primary) !important;
}

/* 2. Utility Card Icons - Preserve Colors */
/* prevent dark mode overrides on these specific colorful icon containers */
[data-theme="dark"] .utility-card-icon {
    /* We cannot restore 'inline' styles via CSS if they were overridden by !important. 
       But we CAN ensure we don't override them. 
       Note: Inline styles beat normal CSS. They lose to CSS !important.
       So we must ensure no property on this element has !important. 
       Check previous CSS... we tried to avoid it.
       
       However, we can try to reset properties to 'revert-layer' or similar, but support varies.
       
       Best bet: Force the ICONS inside to inherit the color from the div, 
       and trust the div's inline style handles the color.
    */
    background-color: transparent;
    /* Fallback if inline is lost? No, don't touch it. */
    border: none !important;
}

/* Strict enforcement for the icon element to take the parent's (inline) color */
[data-theme="dark"] .utility-card-icon i,
[data-theme="dark"] .utility-card-icon .fas,
[data-theme="dark"] .utility-card-icon .fa,
[data-theme="dark"] .utility-card-icon .fab,
[data-theme="dark"] .utility-card-icon .far {
    color: inherit !important;
    /* This ensures that if the parent div has 'color: #009688', the icon uses it regardless of other global overrides */
}

/* --- DARK MODE FINAL TWEAKS (Establishment) --- */
/* =========================================
   Dark Mode Final Tweaks (Establishment)
   ========================================= */

[data-theme="dark"] .establishment-data-container,
[data-theme="dark"] .establishment-selector-bar {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Ensure text inside is readable */
[data-theme="dark"] .establishment-data-container h2,
[data-theme="dark"] .establishment-data-container h3,
[data-theme="dark"] .establishment-data-container p,
[data-theme="dark"] .establishment-data-container label,
[data-theme="dark"] .establishment-selector-bar label,
[data-theme="dark"] .establishment-selector-bar span {
    color: var(--text-primary) !important;
}

/* Fix inputs/selects inside these bars if any */
[data-theme="dark"] .establishment-selector-bar select,
[data-theme="dark"] .establishment-selector-bar input {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* --- DARK MODE FILTERS FIX (v7) --- */
/* =========================================
   Dark Mode Filters & Establishment Fix (v7)
   ========================================= */

[data-theme="dark"] .curso-letra-filters,
[data-theme="dark"] .establishment-data-container,
[data-theme="dark"] .establishment-selector-bar,
[data-theme="dark"] .filters-container,
[data-theme="dark"] .filter-bar {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

/* Fix Labels and inputs inside */
[data-theme="dark"] .curso-letra-filters label,
[data-theme="dark"] .curso-letra-filters span,
[data-theme="dark"] .establishment-data-container label,
[data-theme="dark"] .establishment-data-container span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .curso-letra-filters select,
[data-theme="dark"] .curso-letra-filters input,
[data-theme="dark"] .establishment-data-container select,
[data-theme="dark"] .establishment-data-container input {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* --- DARK MODE ADMIN SPECIFIC FIXES --- */
/* =========================================
   Admin Panel Specific Fixes (Filters & Data)
   ========================================= */

/* Explicitly target the filters bar and data container in Admin Panel */
[data-theme="dark"] #curso-letra-filters,
[data-theme="dark"] #establishment-data-container,
[data-theme="dark"] .user-filters-bar {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    /* Optional: remove shadow if it looks weird inside another container */
}

/* Header User Badge Dark Mode */
[data-theme="dark"] .header-right .nameadmin,
[data-theme="dark"] .header-right .namealumno {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Ensure labels inside are visible */
[data-theme="dark"] .close-modal-admin,
[data-theme="dark"] .close-stats-modal,
[data-theme="dark"] .close {
    color: var(--text-muted);
}

[data-theme="dark"] .close-modal-admin:hover,
[data-theme="dark"] .close-stats-modal:hover,
[data-theme="dark"] .close:hover {
    color: var(--text-primary);
}

[data-theme="dark"] #curso-letra-filters label,
[data-theme="dark"] #establishment-data-container label,
[data-theme="dark"] .user-filters-bar label {
    color: var(--text-primary) !important;
}

/* Ensure selects inside have dark background */
[data-theme="dark"] #curso-letra-filters select,
[data-theme="dark"] #establishment-data-container select,
[data-theme="dark"] .user-filters-bar select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* --- DARK MODE FIXES (Feedback & Explanation) --- */
[data-theme="dark"] #feedback-flash-message {
    background-color: #380d0d !important;
    color: #ffb3b3 !important;
    border-color: #5c1e23 !important;
}

[data-theme="dark"] #feedback-flash-message.flash-success {
    background-color: rgba(6, 95, 70, 0.5) !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
}

/* Fix for buttons having strange borders in dark mode */
[data-theme="dark"] .action-button,
[data-theme="dark"] .btn-primary {
    border: none !important;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .action-button:hover,
[data-theme="dark"] .btn-primary:hover {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] #explicacion-texto-animado {
    background-color: #1f2937 !important;
    color: #e2e8f0 !important;
    border-color: #374151 !important;
}

/* Dark Mode for Exercise Details */
[data-theme="dark"] .detalle-ejercicio.incorrecto {
    background-color: #380d0d !important;
    color: #ffb3b3 !important;
    border-left-color: #d32f2f !important;
}

[data-theme="dark"] .detalle-ejercicio.correcto {
    background-color: #0f291e !important;
    color: #98eec1 !important;
    border-left-color: #2e7d32 !important;
}

/* ====================================================== */
/* === EXERCISE MANAGEMENT V2 (Card Layout)           === */
/* ====================================================== */

.exercises-list-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.exercise-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    overflow: visible;
    /* For tooltips or dropdowns if needed */
}

.exercise-card:hover {
    box-shadow: var(--shadow-md);
}

.exercise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
}

.exercise-type-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.exercise-type-badge label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.exercise-type-input-styled {
    font-weight: 700;
    color: var(--primary-color);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 4px 0;
    font-size: 1.1rem;
    transition: border-color 0.2s;
    width: auto;
    min-width: 200px;
}

.exercise-type-input-styled:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

.exercise-card-actions {
    display: flex;
    gap: 8px;
}

.exercise-card-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exercise-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exercise-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.exercise-description-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--background-color);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--text-main);
    resize: vertical;
    transition: border-color 0.2s;
}

.exercise-description-textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.exercise-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .exercise-details-grid {
        grid-template-columns: 1fr;
    }
}

.options-container {
    background-color: rgba(241, 245, 249, 0.5);
    /* #f1f5f9 with opacity */
    padding: 16px;
    border-radius: var(--border-radius-sm);
    border: 1px dashed var(--border-color);
}

.answer-container {
    background-color: rgba(236, 253, 245, 0.5);
    /* Green-ish tint */
    padding: 16px;
    border-radius: var(--border-radius-sm);
    border: 1px dashed #6ee7b7;
}

/* Specific Input Styles */
.mc-option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.mc-option-label {
    font-weight: 600;
    width: 24px;
    color: var(--text-secondary);
}

.mc-option-input-styled {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Dark Mode Overrides for New Components */
[data-theme='dark'] .exercise-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme='dark'] .exercise-type-input-styled {
    color: #60a5fa;
    /* lighter blue */
}

[data-theme='dark'] .exercise-description-textarea,
[data-theme='dark'] .mc-option-input-styled,
[data-theme='dark'] .exercise-input {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme='dark'] .options-container {
    background-color: rgba(30, 41, 59, 0.5);
    border-color: #475569;
}

[data-theme='dark'] .answer-container {
    background-color: rgba(6, 78, 59, 0.3);
    border-color: #059669;
}

[data-theme='dark'] .exercise-section-label {
    color: #94a3b8;
}

/* Remove Table Styles from previous layout if conflicting, or just hide them via JS toggle */
/* Making the header more compact */
.area-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, var(--primary-color), #4f46e5);
    color: white;
    padding: 16px 24px;
    border-radius: var(--border-radius-md);
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.area-title-input {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    width: 300px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.area-title-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.area-title-input:focus {
    outline: none;
    border-bottom-color: white;
}


/* ====================================================== */
/* === DARK MODE FIXES FOR GESTIONAR EJERCICIOS       === */
/* ====================================================== */

[data-theme='dark'] .crud-controls select,
[data-theme='dark'] .filter-group select,
[data-theme='dark'] #select-curso-gestion,
[data-theme='dark'] #select-area-filter {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme='dark'] .modal-content,
[data-theme='dark'] .sessions-modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
}

[data-theme='dark'] #explanation-textarea,
[data-theme='dark'] .explanation-editor-container textarea {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme='dark'] .close-modal-admin {
    color: var(--text-muted);
}

[data-theme='dark'] .close-modal-admin:hover {
    color: var(--error-color);
}

[data-theme='dark'] .sessions-table {
    color: var(--text-main);
}

[data-theme='dark'] .sessions-table th {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme='dark'] .sessions-table td {
    border-bottom: 1px solid var(--border-color);
}

/* Ensure headings in modal are visible */
[data-theme='dark'] .modal-content h3,
[data-theme='dark'] .sessions-modal-header h3 {
    color: var(--text-main);
}


/* ====================================================== */
/* === DARK MODE FIXES V2 (User Feedback)             === */
/* ====================================================== */

/* 1. Status Message - Ensure readability */
[data-theme='dark'] .status-success {
    background-color: rgba(6, 95, 70, 0.4) !important;
    /* Darker green background */
    color: #6ee7b7 !important;
    /* Bright/Pastel green text */
    border: 1px solid #059669 !important;
    padding: 10px;
    border-radius: var(--border-radius-sm);
}

[data-theme='dark'] .status-error {
    background-color: rgba(127, 29, 29, 0.4) !important;
    /* Darker red background */
    color: #fca5a5 !important;
    /* Bright/Pastel red text */
    border: 1px solid #b91c1c !important;
    padding: 10px;
    border-radius: var(--border-radius-sm);
}

/* 2. Area Block - Fix white background */
[data-theme='dark'] .area-block {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 3. Explanation Warning Flash - Fix readability */
[data-theme='dark'] .explanation-warning-flash {
    background-color: rgba(30, 58, 138, 0.4) !important;
    /* Dark blue background */
    color: #bfdbfe !important;
    /* Light blue text */
    border: 1px solid #1e40af !important;
}

/* 4. Explanation Exercise Context - Fix white background */
[data-theme='dark'] .explanation-exercise-context {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] .explanation-exercise-context h4 {
    color: var(--text-main) !important;
    /* Use main text color (usually white/light-gray) */
}

[data-theme='dark'] .explanation-exercise-context p {
    color: var(--text-muted) !important;
    border-left-color: var(--border-color) !important;
}


/* ====================================================== */
/* === DARK MODE FIXES V3 (Final Polish)              === */
/* ====================================================== */

/* 1. Dictation Answer Info - Fix white background */
[data-theme='dark'] .dictation-answer-info {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border: 1px dashed var(--border-color);
    padding: 10px;
    border-radius: var(--border-radius-sm);
}

/* 2. Sessions Modal - Neutral Gray */
[data-theme='dark'] .sessions-modal-content {
    background-color: #242424 !important;
    border: 1px solid #333 !important;
    color: #f1f5f9 !important;
}

/* 3. Main Container - Ensure Border Visibility */
[data-theme='dark'] .main-container {
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* Ensure sessions table inside modal looks good on gray */
[data-theme='dark'] .sessions-modal-content .sessions-table th {
    background-color: #0d0e10 !important;
    color: #e2e8f0 !important;
}

/* Change Comparison Styles */
.changes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
}

.change-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.change-title {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--primary-color, #2563eb);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color, #eee);
    padding-bottom: 8px;
    font-size: 1.1rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 15px;
    align-items: stretch;
}

.comparison-box {
    border-radius: 6px;
    padding: 12px;
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.comparison-box.old {
    background-color: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
}

.comparison-box.new {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.comparison-header {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.8;
}

.comparison-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    flex-grow: 1;
    line-height: 1.4;
}

.comparison-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 1.2rem;
}

.json-view {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85em;
    overflow-x: auto;
    margin: 0;
}

[data-theme='dark'] .change-card {
    background-color: #252a33;
    border-color: #3d444d;
}

[data-theme='dark'] .comparison-box.old {
    background-color: #450a0a;
    border-color: #7f1d1d;
    color: #fecaca;
}

[data-theme='dark'] .comparison-box.new {
    background-color: #064e3b;
    border-color: #065f46;
    color: #a7f3d0;
}

[data-theme='dark'] .json-view {
    background: rgba(0, 0, 0, 0.3);
    color: #cbd5e1;
}

[data-theme='dark'] .comparison-content {
    color: #f1f5f9;
}

@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-arrow {
        transform: rotate(90deg);
        padding: 5px 0;
    }
}


/* ====================================================== */
/* === DARK MODE FIXES V4 (Ordered Preview)           === */
/* ====================================================== */

[data-theme='dark'] .ordered-preview {
    color: var(--text-muted) !important;
    /* The inline style sets color: #555, which is hard to read on dark */
    /* We override it here globally for dark mode */
}


/* ====================================================== */
/* === GENERADOR DE EJERCICIOS (Admin)                === */
/* ====================================================== */

.gen-main-container {
    max-width: 1000px;
    margin: 20px auto;
    padding: 25px;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    /* Added for dark mode visibility */
}

.gen-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.gen-card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    color: white;
    padding: 1.5rem;
}

.gen-card-header h4 {
    margin-bottom: 0.25rem;
    color: white !important;
}

.gen-card-header p {
    margin-bottom: 0;
    opacity: 0.85;
    font-size: 0.9em;
    color: #e0e7ff !important;
}

.gen-card-body {
    padding: 1.5rem;
}

.gen-info-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gen-info-box i {
    color: #17a2b8;
}

/* Dark Mode Overrides for Generator */
[data-theme='dark'] .gen-info-box {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

[data-theme='dark'] .gen-info-box strong {
    color: var(--text-primary);
}

[data-theme='dark'] .gen-info-box span {
    color: var(--text-muted) !important;
}

/* Form Elements in Generator */
.gen-select {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--text-main);
}

[data-theme='dark'] .gen-select {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Management Controls Bar (Unified Wrapper) */
.management-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.user-filters-bar {
    margin-bottom: 0 !important;
}

.user-type-selector-bar {
    margin-left: auto;
    /* Ensures it stays on the right even if filters is hidden/missing */
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dark Mode Overrides for Borders */
[data-theme='dark'] .user-type-selector-bar,
[data-theme='dark'] .user-filters-bar,
[data-theme='dark'] #curso-letra-filters,
[data-theme='dark'] .curso-letra-filters {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Ensure inner select/inputs keep their style but container doesn't show border */
[data-theme='dark'] .user-type-selector-bar label,
[data-theme='dark'] .user-filters-bar label {
    margin-right: 5px;
}

/* ====================================================== */
/* === GENERADOR ERROR/SUCCESS MESSAGES               === */
/* ====================================================== */

.gen-alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.gen-alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.gen-alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

/* Dark Mode Support for Generator Alerts */
[data-theme='dark'] .gen-alert-warning {
    color: #fff3cd;
    background-color: rgba(180, 83, 9, 0.4);
    /* Dark amber/yellow */
    border-color: #92400e;
}

[data-theme='dark'] .gen-alert-error {
    color: #fca5a5;
    /* pastel red */
    background-color: rgba(127, 29, 29, 0.4);
    /* Dark red */
    border-color: #b91c1c;
}

/* --- Teacher Chat Modal Styles (Adapted from estudiando.html) --- */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: var(--background-color);
    border-radius: var(--border-radius-md);
    margin-bottom: 15px;
    height: 300px;
    /* Fixed height for modal scroll */
    border: 1px solid var(--border-color);
}

.message-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 12px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-message {
    align-self: flex-start;
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 2px;
}

.user-message {
    align-self: flex-end;
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 2px;
}

.error-message {
    background-color: var(--error-color);
    color: white;
    align-self: center;
}

.message-content p {
    margin: 0;
}

/* Edit Mode in Bubbles */
.message-actions-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: inherit;
    opacity: 0;
    transition: opacity 0.2s;
}

.message-bubble:hover .message-actions-btn {
    opacity: 1;
}

.edit-area textarea {
    width: 100%;
    margin-top: 5px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-family: inherit;
    color: #333;
}

.edit-area button {
    margin-top: 5px;
    margin-right: 5px;
    padding: 4px 8px;
    font-size: 0.8em;
    cursor: pointer;
    border: none;
    border-radius: 4px;
}

.btn-edit-save {
    background-color: var(--success-color);
    color: white;
}

.btn-edit-cancel {
    background-color: var(--secondary-color);
    color: white;
}

/* TTS Button */
.tts-play-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 5px;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}

.tts-play-btn:hover {
    color: var(--primary-color);
}

.tts-play-btn.playing {
    color: var(--error-color);
}

/* Thinking Indicator */
.thinking-container {
    display: none;
    /* hidden by default */
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--text-muted);
    font-size: 0.9em;
    gap: 8px;
}

.thinking-text span {
    display: inline-block;
    animation: pulse 1.4s infinite ease-in-out both;
}

.thinking-text span:nth-child(1) {
    animation-delay: -0.32s;
}

.thinking-text span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes pulse {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Chat Input Area in Modal */
.chat-input-area {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.chat-input-area textarea {
    flex: 1;
    resize: none;
    max-height: 100px;
    min-height: 40px;
}

.chat-icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* Conflictive rules removed */

/* =========================================
   Unified Teacher Chat Styles
   ========================================= */

/* Thinking Animation (from estudiando.html) */
.thinking-container {
    padding: 10px 20px;
    display: none;
    align-items: center;
    gap: 10px;
    color: #adb5bd;
    font-family: sans-serif;
    font-size: 0.95rem;
    margin-bottom: 10px;
    justify-content: center;
    /* Center it */
}

.thinking-text span {
    display: inline-block;
    animation: pulse-shine 1.5s infinite ease-in-out;
    color: #6c757d;
    --think-color-start: #6c757d;
    --think-color-mid: #e9ecef;
    --think-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.thinking-text span:nth-child(1) {
    animation-delay: 0s;
}

.thinking-text span:nth-child(2) {
    animation-delay: 0.1s;
}

.thinking-text span:nth-child(3) {
    animation-delay: 0.2s;
}

.thinking-text span:nth-child(4) {
    animation-delay: 0.3s;
}

.thinking-text span:nth-child(5) {
    animation-delay: 0.4s;
}

.thinking-text span:nth-child(6) {
    animation-delay: 0.5s;
}

.thinking-text span:nth-child(7) {
    animation-delay: 0.6s;
}

.thinking-text span:nth-child(8) {
    animation-delay: 0.7s;
}

.thinking-text span:nth-child(9) {
    animation-delay: 0.8s;
}

.thinking-text span:nth-child(10) {
    animation-delay: 0.9s;
}

.thinking-text span:nth-child(11) {
    animation-delay: 1.0s;
}

.thinking-text span:nth-child(12) {
    animation-delay: 1.1s;
}

@keyframes pulse-shine {

    0%,
    100% {
        color: var(--think-color-start);
        text-shadow: none;
    }

    50% {
        color: var(--think-color-mid);
        text-shadow: var(--think-shadow);
    }
}

[data-theme='dark'] .thinking-text span {
    --think-color-start: #495057;
    --think-color-mid: #f8f9fa;
    --think-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    color: #495057;
}

/* Chat Layout Restructuring */
.modo-profesora-modal-content {
    display: flex;
    flex-direction: column;
    height: 80vh;
    /* Fixed height for better chat experience */
    max-height: 600px;
}

.modal-header-profesora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
}

.modal-header-profesora h2 {
    margin: 0;
    font-size: 1.25rem;
}

.close-profesora-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

.respuesta-animada {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #f8f9fa;
    /* Light grey background for chat area */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-theme='dark'] .respuesta-animada {
    background-color: #1e293b;
}

/* Chat Input Area */
.chat-container {
    display: flex;
    align-items: flex-end;
    /* Align to bottom for multiline textarea */
    gap: 10px;
    padding: 5px;
}

.chat-container textarea {
    flex-grow: 1;
    resize: none;
    border-radius: 20px;
    padding: 10px 15px;
    min-height: 44px;
    max-height: 100px;
    border: 1px solid var(--border-color);
}

/* Specific Button Styles as requested by User */
.chat-icon-button.voice-button {
    background-color: #6c757d;
    /* Grey */
    color: white;
    border: none;
    border-radius: 50%;
    /* Rounded */
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.chat-icon-button.voice-button:hover {
    background-color: #5a6268;
}

.chat-icon-button.send-button {
    background-color: #007bff;
    /* Blue */
    color: white;
    border: none;
    border-radius: 50%;
    /* Rounded */
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.chat-icon-button.send-button:hover {
    background-color: #0056b3;
}

.chat-tts-control {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 10px;
    height: 44px;
    display: flex;
    align-items: center;
}

.chat-tts-control:hover {
    color: var(--primary-color);
}

/* Messages Bubbles (Simple Chat) */
.chat-message {
    padding: 10px 15px;
    border-radius: 12px;
    max-width: 80%;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message.user {
    align-self: flex-end;
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-message.bot {
    align-self: flex-start;
    background-color: var(--card-bg);
    /* White/DarkCard */
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-bottom-left-radius: 2px;
}

/* =========================================
   Unified Teacher Chat Styles
   ========================================= */

.teacher-chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    min-height: 200px;
}

.teacher-chat-message {
    padding: 10px 15px;
    border-radius: 12px;
    max-width: 85%;
    line-height: 1.5;
    position: relative;
    font-size: 0.95rem;
    word-wrap: break-word;
}

.teacher-chat-message.user {
    align-self: flex-end;
    background-color: #2563eb;
    /* Primary Blue */
    color: white;
    border-bottom-right-radius: 2px;
}

.teacher-chat-message.bot {
    align-self: flex-start;
    background-color: #e9ecef;
    color: #333;
    border-bottom-left-radius: 2px;
}

[data-theme='dark'] .teacher-chat-history {
    background-color: #2b2d31;
    border-color: #383a40;
}

[data-theme='dark'] .teacher-chat-message.bot {
    background-color: #383a40;
    color: #e2e2e2;
}

/* Thinking Animation */
.thinking-container {
    padding: 10px 20px;
    display: none;
    align-items: center;
    gap: 10px;
    color: #adb5bd;
    font-family: sans-serif;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.thinking-text span {
    display: inline-block;
    animation: pulse-shine 1.5s infinite ease-in-out;
    color: #6c757d;
    --think-color-start: #6c757d;
    --think-color-mid: #e9ecef;
    --think-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.thinking-text span:nth-child(1) {
    animation-delay: 0s;
}

.thinking-text span:nth-child(2) {
    animation-delay: 0.1s;
}

.thinking-text span:nth-child(3) {
    animation-delay: 0.2s;
}

.thinking-text span:nth-child(4) {
    animation-delay: 0.3s;
}

.thinking-text span:nth-child(5) {
    animation-delay: 0.4s;
}

.thinking-text span:nth-child(6) {
    animation-delay: 0.5s;
}

.thinking-text span:nth-child(7) {
    animation-delay: 0.6s;
}

.thinking-text span:nth-child(8) {
    animation-delay: 0.7s;
}

.thinking-text span:nth-child(9) {
    animation-delay: 0.8s;
}

.thinking-text span:nth-child(10) {
    animation-delay: 0.9s;
}

.thinking-text span:nth-child(11) {
    animation-delay: 1.0s;
}

.thinking-text span:nth-child(12) {
    animation-delay: 1.1s;
}

.thinking-text span:nth-child(13) {
    animation-delay: 1.2s;
}

.thinking-text span:nth-child(14) {
    animation-delay: 1.3s;
}

@keyframes pulse-shine {

    0%,
    100% {
        color: var(--think-color-start);
        text-shadow: none;
    }

    50% {
        color: var(--think-color-mid);
        text-shadow: var(--think-shadow);
    }
}

[data-theme='dark'] .thinking-text span {
    --think-color-start: #495057;
    --think-color-mid: #f8f9fa;
    --think-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    color: #495057;
}

/* Chat Input & Controls */
.teacher-chat-input-area {
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--card-bg);
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.teacher-chat-input-area textarea {
    flex-grow: 1;
    border-radius: 20px;
    padding: 10px 15px;
    resize: none;
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--text-main);
}

.teacher-chat-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    font-size: 1.1rem;
}

.teacher-chat-icon-btn:hover {
    transform: scale(1.1);
}

/* Specific Colors per User Request */
.btn-blue-send {
    background-color: #2563eb !important;
    color: white !important;
}

.btn-blue-send:hover {
    background-color: #1d4ed8 !important;
}

.btn-gray-voice {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

.btn-gray-voice:hover {
    background-color: #dee2e6 !important;
}

[data-theme='dark'] .btn-gray-voice {
    background-color: #383a40 !important;
    color: #adb5bd !important;
}

[data-theme='dark'] .btn-gray-voice:hover {
    background-color: #495057 !important;
    color: #fff !important;
}

.msg-tts-btn {
    margin-left: 8px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.9em;
}

.msg-tts-btn:hover {
    opacity: 1;
}

/* Status Buttons */
.btn-status {
    padding: 6px 14px;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    color: white;
    font-size: 0.9em;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-success {
    background-color: var(--success-color) !important;
}

.btn-success:hover {
    background-color: #059669 !important;
    /* Darker shade of emerald/success */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background-color: var(--error-color) !important;
}

.btn-danger:hover {
    background-color: #dc2626 !important;
    /* Darker shade of red */
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}



/* Dark Mode for Evaluation Item */
[data-theme='dark'] .evaluation-item {
    background-color: #2b2d31;
    border-color: #495057;
    color: #e9ecef;
}

[data-theme='dark'] .evaluation-item-header {
    border-bottom-color: #495057;
}

[data-theme='dark'] .evaluation-item-header h4 {
    color: #e9ecef;
}

/* ========================================================================== */
/* ESTILO MINIMALISTA - TODOS LOS BOTONES CUADRADOS, SIN SOMBRA NI RELIEVE    */
/* ========================================================================== */

button:not(#send-btn,
    .btn-blue-send,
    #teacher-chat-send-btn,
    #voice-conversation-btn,
    .voice-conversation-btn,
    #activar-profesora,
    .floating-activar-profesora,
    .modo-profesora-modal-content *),
.btn:not(#send-btn,
    .btn-blue-send,
    #teacher-chat-send-btn,
    #voice-conversation-btn,
    .voice-conversation-btn,
    #activar-profesora,
    .floating-activar-profesora,
    .modo-profesora-modal-content *),
.action-button:not(.modo-profesora-modal-content *),
.btn-primary:not(.modo-profesora-modal-content *),
.btn-secondary:not(.modo-profesora-modal-content *),
.btn-success:not(.modo-profesora-modal-content *),
.btn-danger:not(.modo-profesora-modal-content *),
.submit-btn:not(.modo-profesora-modal-content *),
.btn-icon:not(.modo-profesora-modal-content *),
[type="submit"]:not(.modo-profesora-modal-content *),
[type="button"]:not(.modo-profesora-modal-content *) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* FUERZA QUE ESTOS BOTONES SEAN REDONDOS DE ACUERDO A LA PETICION */
#send-btn,
.btn-blue-send,
#teacher-chat-send-btn,
#voice-conversation-btn,
.voice-conversation-btn,
#activar-profesora,
.floating-activar-profesora {
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* Responsive Overrides (Fixed and placed at the bottom for correct specificity) */
@media (max-width: 768px) {
    body, html {
        max-width: 100vw;
        overflow-x: hidden;
    }

    body:not(.login-page) {
        padding-top: 130px;
    }

    body.login-page {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .login-main,
    .login-recover {
        height: auto;
        min-height: 100vh;
        padding: 40px 20px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .form-container.login-form {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 24px 20px;
        height: auto !important;
        box-sizing: border-box;
    }

    .header {
        height: auto;
        min-height: 64px;
        padding: 10px 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .header-left {
        order: 1;
    }

    .header-right {
        order: 2;
    }

    .header-center {
        order: 3;
        width: 100%;
        margin-top: 10px;
        justify-content: center;
    }

    .header-left p {
        display: none;
    }

    .main-container {
        padding: 15px;
        width: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
    }

    .utility-cards-container {
        grid-template-columns: 1fr;
    }
}

/* --- ESTILOS ALERTAS BIENESTAR (Modo Oscuro) --- */
.alerta-bienestar-box {
    background-color: #fff3f3;
    border-left: 4px solid #c0392b;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #7f8c8d;
    border-radius: 4px;
}

.alerta-item {
    background-color: #fff3f3;
    border-left: 4px solid #e74c3c;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
}

.alerta-item-date {
    font-size: 12px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.alerta-item-msg-title {
    margin-bottom: 10px;
    color: #2c3e50;
    font-weight: bold;
}

.alerta-item-quote {
    background: white;
    padding: 3px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-top: 5px;
    border: 1px solid #ffcccc;
    color: #555;
    font-style: italic;
    font-weight: normal;
}

[data-theme="dark"] .alerta-bienestar-box {
    background-color: #2a1616;
    border-left-color: #e74c3c;
    color: #bdc3c7;
}

[data-theme="dark"] .alerta-item {
    background-color: #2a1616;
}

[data-theme="dark"] .alerta-item-date {
    color: #95a5a6;
}

[data-theme="dark"] .alerta-item-msg-title {
    color: #ecf0f1;
}

[data-theme="dark"] .alerta-item-quote {
    background: #1a0f0f;
    border: 1px solid #7b241c;
    color: #e6b0aa;
}

/* --- ESTILOS ADAPTATIVOS PARA DIAGNÓSTICOS PIE --- */
.condicion-tdah {
    /* TDAH: Menos distracciones visuales, mayor enfoque */
    --background-color: #f8fafc;
}
.condicion-tdah .header {
    background-color: var(--card-bg) !important;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 2px solid var(--border-color);
}
.condicion-tdah * {
    transition: none !important;
    animation-duration: 0.001s !important;
}
.condicion-tdah .main-container {
    border: 2px solid #ced4da; /* Mayor definición del área de trabajo */
}

.condicion-dislexia {
    /* Dislexia: Fuente más legible, mayor espaciado */
    font-family: 'Comic Sans MS', 'OpenDyslexic', sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
    line-height: 1.6 !important;
}
.condicion-dislexia h1, .condicion-dislexia h2, .condicion-dislexia h3, 
.condicion-dislexia p, .condicion-dislexia span, .condicion-dislexia div,
.condicion-dislexia button, .condicion-dislexia a, .condicion-dislexia input {
    font-family: 'Comic Sans MS', 'OpenDyslexic', sans-serif !important;
}

/* ========================================================================== */
/* LOGS IA STYLES                                                             */
/* ========================================================================== */
.log-table th { background: var(--primary-color); color: white; padding: 10px; text-align: left; }
html[data-theme='light'] .log-table th { background: #005a9c; }
.log-table td { background: var(--card-bg); padding: 10px; border-bottom: 1px solid var(--border-color); color: var(--text-main); }
.traceback-text { color: var(--error-color); font-family: monospace; font-size: 0.85em; background: rgba(220,53,69,0.1); padding: 5px; border-radius: 4px; display: inline-block; word-break: break-all;}

.btn-ver-mas {
    padding: 4px 8px;
    font-size: 0.8rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
html[data-theme='light'] .btn-ver-mas {
    background-color: #005a9c !important;
}