/* Estilos generales */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');
:root {
    --surface: rgba(248, 252, 255, 0.94);
    --surface-strong: #ffffff;
    --ink: #0f0e17;
    --muted-ink: #6b7280;
    --login-purple: #4f46e5;
    --login-purple-dark: #3730a3;
    --login-purple-soft: #6366f1;
    --login-night: #1e1b4b;
    --line: rgba(79, 70, 229, 0.20);
    --glow: rgba(99, 102, 241, 0.24);
}
html {
    /* Overscroll y PWA standalone dejan ver el lienzo detrás de la página:
       se pinta del color del degradado para que no aparezca el plomo del
       navegador, y se anula el rebote/pull-to-refresh (recargaba el chat). */
    background: #1e1b4b;
    overscroll-behavior: none;
}
body {
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(160deg, #1e1b4b 0%, #3730a3 45%, #4f46e5 100%);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    color: var(--ink);
}

/* Botón de Cerrar sesión */
.logout-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(15, 25, 35, 0.92);
    color: white;
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 1100;
    font-size: 14px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), 0 0 16px rgba(99, 102, 241, 0.14);
    transition: all 0.3s ease;
}
.logout-button:hover {
    background: rgba(79, 70, 229, 0.30);
    transform: translateY(-2px);
}
.logout-button i {
    margin-right: 5px;
}
/* Botón de Actualizar página */
.refresh-button {
    position: absolute;
    top: 60px;
    right: 10px;
    background: rgba(15, 25, 35, 0.92);
    color: white;
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), 0 0 16px rgba(99, 102, 241, 0.14);
    transition: all 0.3s ease;
    z-index: 1100;
}
.refresh-button:hover {
    background: rgba(79, 70, 229, 0.30);
    transform: translateY(-2px);
}
.support-button {
    position: absolute;
    top: 110px;
    right: 10px;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
    color: white;
    border: none;
    border-radius: 999px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22);
    transition: all 0.3s ease;
    z-index: 1100;
}
.support-button:hover {
    background: #3730a3;
    transform: translateY(-2px);
}
.chat-container {
    width: 90%;
    max-width: 800px;
    height: 100vh;
    height: 100dvh;
    background: var(--surface);
    border: 1px solid rgba(199, 210, 254, 0.42);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.30), 0 0 36px rgba(99, 102, 241, 0.16);
    backdrop-filter: blur(18px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto;
    position: relative;
    transform: translateY(-0.1cm);
}
.chat-header {
    background: linear-gradient(90deg, #3730a3 0%, #4f46e5 100%);
    color: white;
    height: 90px;
    padding: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(199, 210, 254, 0.28);
}
.chat-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0;
}
.support-admin-pill {
    margin: 8px auto 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.support-admin-pill[data-status="disponible"] {
    background: rgba(16, 185, 129, 0.18);
}
.support-admin-pill[data-status="ausente"] {
    background: rgba(245, 158, 11, 0.2);
}
.support-admin-pill[data-status="fuera_de_linea"] {
    background: rgba(148, 163, 184, 0.22);
}
.chat-header .header-subtitle { display: none; }
.bot-avatar {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 30px;
    box-shadow: 0 0 0 1px rgba(199, 210, 254, 0.65), 0 10px 22px rgba(79, 70, 229, 0.18);
}
.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    /* En escritorio el .input-area es hermano (no solapa), así que el colchón
       inferior debe ser pequeño: solo un margen para que la solución no quede
       pegada al borde. En móvil el input es fixed y las reglas responsive
       (con !important) reponen el padding grande necesario. */
    padding: 20px 20px 14px;
    scroll-behavior: smooth;
    /* Sin efecto elástico al llegar al tope (Android lo estira y marca
       líneas contra el header y la barra de envío) */
    overscroll-behavior: none;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.70) 0%, rgba(238, 242, 255, 0.55) 100%);
}
.chat-messages::-webkit-scrollbar {
    width: 10px;
}
.chat-messages::-webkit-scrollbar-track {
    background: rgba(8, 28, 48, 0.06);
}
.chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.72), rgba(99, 102, 241, 0.64));
    border-radius: 999px;
    border: 2px solid rgba(248, 252, 255, 0.9);
}
.chat-messages::after {
    content: '';
    display: block;
    height: 4px;
}
.message {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-out;
    position: relative;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.message.user {
    align-items: flex-end;
}
.message-content {
    padding: 15px 20px;
    border-radius: 18px;
    max-width: 80%;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-wrap;
    position: relative;
    text-align: left;
    word-break: break-word;
}
.user .message-content {
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 62%, #6366f1 100%);
    color: white;
    font-weight: 500;
    align-self: flex-end;
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.28), 0 0 18px rgba(99, 102, 241, 0.16);
}
.bot .message-content {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    position: relative;
    padding-right: 1.5cm;
    padding-bottom: 34px;
    color: var(--ink);
}
.bot .message-content.has-voice-explanation {
    padding-bottom: 40px;
}
.bot .message-content:has(img) {
    max-width: 96%;
    padding-left: 18px;
    padding-right: 18px;
}
/* Enlaces dentro de la respuesta del bot (p.ej. el curso recomendado):
   deben leerse como acción, no como texto corrido. */
.bot .message-content a {
    color: #0284c7;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.bot .message-content a:hover {
    color: #0369a1;
}
.orientador-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    white-space: normal;
}
.orientador-option-button {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 12px;
    background: #eef2ff;
    color: #312e81;
    font: inherit;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.orientador-option-button:hover:not(:disabled),
.orientador-option-button:focus-visible:not(:disabled) {
    border-color: var(--login-purple);
    background: #e0e7ff;
    transform: translateY(-1px);
    outline: none;
}
.orientador-option-button:disabled {
    cursor: default;
    opacity: 0.55;
}
.orientador-option-button.is-selected {
    border-color: var(--login-purple);
    background: #c7d2fe;
    opacity: 1;
}
.orientador-option-number {
    flex: 0 0 auto;
    font-weight: 700;
}
.orientador-option-label {
    min-width: 0;
}
.message-content img {
    max-width: 88% !important;
    border-radius: 10px;
    margin-top: 2px;
    margin-bottom: 4px;
}
.message-content .section-label + img {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}
.message-content img + .section-label {
    margin-top: 0;
}
.message-content img + .step-title {
    margin-top: 2px;
}
.input-area {
    display: flex;
    padding: 20px;
    background: rgba(248, 252, 255, 0.96);
    border-top: 1px solid rgba(79, 70, 229, 0.16);
    box-shadow: 0 -14px 34px rgba(30, 27, 75, 0.08);
    flex-direction: column;
}

.input-area-controls {
    display: flex;
    width: 100%;
    align-items: center;
}

/* Estilos para textarea expandible */
textarea#userInput {
    flex-grow: 1;
    padding: 15px;
    border-radius: 14px;
    font-size: 16px;
    border: 1px solid rgba(99, 102, 241, 0.26);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    margin-right: 10px;
    font-family: 'Quicksand', sans-serif;
    resize: none;
    overflow-y: hidden;
    min-height: 22px;
    max-height: 400px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

textarea#userInput:focus {
    outline: none;
    border-color: var(--login-purple);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}
button {
    padding: 15px;
    background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
    color: white;
    border-radius: 25px;
    cursor: pointer;
    border: none;
}
button:hover {
    transform: translateY(-2px);
}
.typing-cursor::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1em;
    background: var(--login-purple);
    margin-left: 2px;
    animation: blink 1s steps(2, start) infinite;
    vertical-align: bottom;
}
@keyframes blink {
    to { visibility: hidden; }
}
.mic-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--login-purple);
    margin-right: 10px;
}
/* Botón Detener (siempre con su icono de stop) */
.cancel-button {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.24);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1000;
}
.cancel-button:hover {
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.30);
}
.cancel-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}
.cancel-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s ease-out;
}
.cancel-button:hover::before {
    transform: scale(1);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.4;
    }
    100% {
        transform: scale(0.95);
        opacity: 0.7;
    }
}
.cancel-button i {
    font-size: 20px;
}
.mic-button.active {
    color: red;
}
/* Botón de casita */
.home-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(30, 27, 75, 0.16);
    transition: transform 0.2s ease;
    z-index: 1000;
}
.home-button:hover {
    transform: scale(1.1);
}
/* Separadores de sección */
.section-divider {
    margin: 15px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.3), transparent);
}
/* ============ SOLUCIÓN DEL CHAT AL ESTILO DE /cursos =====================
   La respuesta con pasos deja de ser una burbuja de chat y se lee como la hoja
   del curso: fondo claro con el mismo degradado lavanda de .pz-hoja, y más
   ancha, porque con dos columnas el 80% de una burbuja aprieta las fórmulas.
   Lo que NO se trae del curso es su narración: aquí no hay «Escuchar al
   profesor» ni «Propiedades usadas»; los pasos siguen siendo los del chat.
   El reparto en columnas lo hace _repartirPasosEnColumnas en chat.js. */
.bot .message-content:has(.step-title) {
    max-width: 96%;
    background: linear-gradient(180deg, #fdfdff 0%, #f6f7ff 100%);
    border-color: rgba(79, 70, 229, 0.14);
    box-shadow: inset 0 1px 0 #fff, 0 2px 12px rgba(49, 46, 129, 0.06);
}

/* Cada respuesta con solución se separa de la anterior: en un chat que va
   creciendo, dos hojas seguidas sin línea de por medio se leen como una sola. */
.message.bot:has(.step-title) {
    border-top: 1px dashed rgba(79, 70, 229, 0.22);
    padding-top: 16px;
    margin-top: 6px;
}

.chat-2col {
    display: flex;
    gap: 0;
}

.chat-2col .chat-col {
    /* `min-width: 0` evita que una fórmula ancha estire su columna y le robe el
       espacio a la otra. */
    flex: 1 1 0;
    min-width: 0;
}

.chat-2col .chat-col + .chat-col {
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px dashed rgba(79, 70, 229, 0.18);
}

/* El paso es la unidad: su título y sus fórmulas viajan juntos de columna. */
.chat-paso {
    break-inside: avoid;
}

.chat-paso .step-title:first-child {
    margin-top: 0;
}

/* Media columna no da para una fórmula: en pantalla estrecha, una sola. */
@media (max-width: 991px) {
    .chat-2col {
        flex-direction: column;
    }
    .chat-2col .chat-col + .chat-col {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* Título de paso */
.step-title {
    display: block;
    font-size: 1.05em;
    color: #111;
    margin-top: 32px;
    margin-bottom: 24px;
    line-height: 1.6;
}
.step-label {
    color: #4f46e5;
    font-weight: 700;
}
.section-label {
    display: block;
    color: #c62828;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.1;
}
.step-desc {
    color: #111;
    font-weight: 500;
    margin-left: 4px;
}
/* Tablas (tabulación, frecuencias, etc.) */
.mtbl {
    border-collapse: separate;
    border-spacing: 0;
    width: auto;
    max-width: 100%;
    margin: 18px 0;
    font-size: 0.97em;
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.08);
}
.mtbl thead th {
    background: linear-gradient(90deg, #3730a3 0%, #4f46e5 100%);
    color: #fff;
    font-weight: 600;
    padding: 10px 16px;
    text-align: center;
    white-space: nowrap;
}
.mtbl tbody td {
    padding: 9px 16px;
    border-top: 1px solid #e0e7ff;
    color: #1e1b4b;
    text-align: center;
}
.mtbl tbody tr:nth-child(even) td {
    background: #f5f6ff;
}
.mtbl tbody tr:hover td {
    background: #eef2ff;
}
.mtbl .ta-l { text-align: left; }
.mtbl .ta-r { text-align: right; }
.mtbl .ta-c { text-align: center; }
/* El <span> envoltorio existe solo para el parser; no debe ocupar espacio */
.mtbl-wrap { display: contents; }
@media (max-width: 600px) {
    .mtbl { font-size: 0.88em; display: block; overflow-x: auto; }
    .mtbl thead th, .mtbl tbody td { padding: 8px 10px; }
}

/* Etiquetas LaTeX \color{\textbf{}} convertidas a HTML */
.latex-label { font-weight: 700; }
.latex-label-red   { color: #c62828; }
.latex-label-blue  { color: #1565c0; }
.latex-label-green { color: #2e7d32; }
/* Texto destacado */
.highlighted-text {
    font-weight: bold;
    color: #6366f1;
}
/* Advertencia de límite */
.limit-warning {
    margin-top: 12px;
    padding: 10px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
    border-radius: 4px;
}
/* Modal de límite alcanzado */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-overlay .modal-content {
    background-color: white;
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.modal-overlay .modal-content h2 {
    color: #e74c3c;
    margin-bottom: 15px;
}
.modal-overlay .modal-content p {
    margin-bottom: 15px;
    line-height: 1.5;
}
.modal-overlay .modal-content button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    display: block;
    margin: 20px auto 0;
}
.modal-overlay .modal-content button:hover {
    background-color: #2980b9;
}

/* Estilos para mostrar código sin compilar */
.code-toggle-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    color: #4f46e5;
    transition: all 0.2s ease;
    display: block;
}
.code-toggle-button:hover {
    background: rgba(79, 70, 229, 0.2);
}
.code-toggle-button i {
    margin-right: 4px;
}
/* Botón "Ver otro enfoque" en soluciones de circunferencia */
.btn-otro-enfoque {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 7px 16px;
    background: transparent;
    border: 1.5px solid #6366f1;
    border-radius: 20px;
    color: #6366f1;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.btn-otro-enfoque:hover:not(:disabled) {
    background: #6366f1;
    color: #fff;
}
.btn-otro-enfoque:disabled {
    opacity: 0.55;
    cursor: default;
}
.otro-enfoque-respuesta {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
.otro-enfoque-estado {
    margin: 10px 0 6px 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 0.95em;
}
.otro-enfoque-respuesta .otro-enfoque-label {
    font-size: 12px;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.otro-enfoque-respuesta img {
    width: 100%;
    max-width: 900px;
    display: block;
    margin: 0.5em auto 1.2em auto;
    border-radius: 8px;
}

.raw-code {
    display: none;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 14px;
    color: #333;
    position: relative;
}
.copy-code-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    color: #6366f1;
    transition: all 0.2s ease;
}
.copy-code-button:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* NUEVOS ESTILOS PARA EDITAR MENSAJES */
.message-actions {
    position: absolute;
    top: 5px;
    left: 0;
    display: none;
}

.message:hover .message-actions {
    display: flex;
}

.edit-button {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    margin-right: 5px;
    transition: all 0.2s ease;
}

.edit-button:hover {
    background: rgba(99, 102, 241, 0.2);
}

.edit-mode .message-content {
    border: 2px dashed var(--login-purple-soft);
}

.message.message.edit-mode > .message-actions {
    display: none !important;
    pointer-events: none;
}

.message.user .edit-area {
    width: min(80%, 620px);
    align-self: flex-end;
}

.edit-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 100px;
    padding: 10px;
    border: 2px solid var(--login-purple-soft);
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
    margin-bottom: 10px;
}

.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
}

.save-edit-button, .cancel-edit-button {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
}

.save-edit-button {
    background: var(--login-purple-soft);
}

.cancel-edit-button {
    background: #6c757d;
}

/* LaTeX preview container - ACTUALIZADO PARA MOVIL */
.latex-preview-container {
    margin-top: 10px;
    padding: 12px;
    background-color: #f1f5fe;
    border-radius: 12px;
    border: 1px solid #d0d9f0;
    position: relative;
    width: 90%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.latex-preview-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #6366f1;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.latex-preview-title:before {
    content: '\f0ec';
    font-family: 'Font Awesome 5 Free';
    margin-right: 8px;
}

.latex-preview {
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: auto;
}

.latex-help-tip {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 8px;
    padding: 5px;
}

.latex-help-tip i {
    margin-right: 5px;
}

/* Orden en el input-area-controls */
#uploadImageBtn {
    order: 1;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.20);
    margin-right: 8px;
    transition: all 0.3s ease;
}

#cameraImageBtn {
    order: 2;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.20);
    margin-right: 8px;
    transition: all 0.3s ease;
}

#micButton {
    order: 3;
    margin-right: 10px;
}

#userInput {
    order: 4;
    margin-right: 10px;
    flex-grow: 1;
}

#sendButton {
    order: 6;
    margin-right: 0;
    background: #6366f1;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.24), 0 0 18px rgba(99, 102, 241, 0.14);
    transition: all 0.3s ease;
}

#uploadImageBtn:hover, #cameraImageBtn:hover {
    background: #3730a3;
    transform: translateY(-2px);
}

#sendButton:hover {
    background: #3730a3;
    transform: translateY(-2px);
}

/* Media queries para dispositivos móviles */

/* Para teléfonos muy pequeños */

/* Estilos para el indicador "Pensando..." */
.thinking-indicator {
    background-color: rgba(79, 70, 229, 0.05) !important;
    border: 1px dashed #4f46e5 !important;
    animation: thinking-pulse 1.5s infinite !important;
}

@keyframes thinking-pulse {
    0% {
        opacity: 0.7;
        border-color: rgba(79, 70, 229, 0.3);
    }
    50% {
        opacity: 1;
        border-color: rgba(79, 70, 229, 0.8);
    }
    100% {
        opacity: 0.7;
        border-color: rgba(79, 70, 229, 0.3);
    }
}

/* Botón cancelar - oculto por default, visible cuando activo */
#cancelButton {
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.5);
    font-size: 20px;
    margin-right: 8px;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
    order: 5;
}

#cancelButton.active {
    display: flex !important;
}

#cancelButton:hover {
    transform: scale(1.1);
}

/* Mejoras para dispositivos móviles */


/* Estilos para el modal de la cámara con selección de área */
.cam-modal {
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,.8);
  display: flex; 
  flex-direction: column; 
  gap: 8px;
  align-items: center; 
  justify-content: center; 
  z-index: 9999;
}

.cam-modal video {
  max-width: 95vw; 
  max-height: 60vh; 
  border-radius: 4px;
  position: relative;
}

.cam-modal canvas {
  border-radius: 4px;
  cursor: crosshair;
}

.cam-modal button {
  padding: 10px 16px; 
  border: none; 
  border-radius: 8px; 
  font-size: 1em;
  font-weight: bold;
  margin: 0 5px;
  transition: all 0.2s ease;
}

.cam-modal button:first-of-type {
  background: #4285f4; 
  color: #fff;
}

.cam-modal button:nth-of-type(2) {
  background: #4285f4;
  color: #fff;
}

.cam-modal button:last-of-type {
  background: #e74c3c; 
  color: #fff;
}

.cam-modal button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Instrucciones de selección */
.selection-instructions {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 14px;
  max-width: 80%;
  text-align: center;
  z-index: 10000;
}

/* ===  FEEDBACK WIDGET  =======================================*/
.feedback-widget{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feedback-btn{border:none;background:#eceef7;color:#555;border-radius:4px;padding:4px 6px;font-size:13px;cursor:pointer;transition:all .2s ease}
.feedback-btn i{margin-right:4px}
.feedback-btn:hover{background:#d7dbff}
.feedback-btn.selected{background:#6366f1!important;color:#fff}
.feedback-comment-btn{background:none;border:none;color:#6366f1;cursor:pointer;font-size:13px;text-decoration:underline}
.pizarra-video-feedback{
    position:relative;
    display:flex !important;
    visibility:visible !important;
    margin-top:-4px;
    padding:8px 0 0;
    border-top:1px dashed rgba(99,102,241,.18);
}
.pizarra-video-feedback-label{
    color:#64748b;
    font-size:13px;
    font-weight:700;
}
.pizarra-video-feedback .feedback-btn{
    min-width:32px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.pizarra-video-feedback .feedback-btn i{margin-right:0}
/* ===  Modal feedback === */
#fbModal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;justify-content:center;align-items:center;z-index:100800}
#fbModal.is-open{display:flex!important}
#fbModal .fb-card{background:#fff;border-radius:8px;width:90%;max-width:400px;padding:20px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#fbModal h3{margin-top:0;color:#6366f1;font-weight:700}
#fbModal textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:6px;padding:8px;font-family:inherit;font-size:14px;resize:vertical}
#fbModal .cats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
#fbModal .cats label{background:#eceef7;color:#555;padding:4px 8px;border-radius:16px;font-size:12px;cursor:pointer}
#fbModal .cats input{display:none}
#fbModal .cats input:checked+span{background:#6366f1;color:#fff}
#fbModal .fb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
#fbModal button{border:none;border-radius:4px;padding:6px 12px;font-weight:600;cursor:pointer}
#fbModal .fb-cancel{background:#6c757d;color:#fff}
#fbModal .fb-send{background:#6366f1;color:#fff}
/* Estilos para las notificaciones del plan */
.modal {
    display: none;
    position: fixed;
    z-index: 1200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10% auto;
    max-width: 500px;
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation: modalFadeIn 0.3s;
}

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

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
}

.modal-header.bg-warning {
    background-color: #ffc107 !important;
    color: #212529;
}

.modal-header.bg-danger {
    background-color: #dc3545 !important;
    color: white;
}

.modal-title {
    margin: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}

.modal-body {
    position: relative;
    padding: 20px;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

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

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

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

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

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

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

/* Responsivo para móviles */
    
/* Botón "Ver solución" */
.view-solution-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    color: #212529;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.view-solution-btn:hover {
    background: linear-gradient(135deg, #ffb300 0%, #ffa000 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

/* Botón Ver en pantalla completa */
.message-actions {
    position: absolute;
    right: 8px;
    bottom: 4px;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    z-index: 1;
}
.message-actions .edit-button,
.message-actions .btn-voice-explanation {
    order: 1;
}
.message-actions .fullscreen-hint {
    order: 98;
}
.message-actions .fullscreen-btn {
    order: 99;
}

.message.user > .message-actions {
    position: static;
    display: flex;
    align-self: flex-end;
    margin: 0 6px 6px 0;
    z-index: auto;
}

.message.user > .message-actions .edit-button {
    margin-right: 0;
    background: rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.25);
    color: var(--login-purple);
}

/* Texto + flechita que recomienda abrir la solución en pantalla completa */
.fullscreen-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    line-height: 1.2;
    color: #6366f1;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}
.fullscreen-hint-arrow {
    font-size: 14px;
    animation: fullscreen-hint-arrow-move 1.2s ease-in-out infinite;
}
@keyframes fullscreen-hint-arrow-move {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .fullscreen-hint-arrow { animation: none; }
}
.fullscreen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    color: #a5b4fc;
    border: 1.5px solid #a5b4fc;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    z-index: 1;
}
.fullscreen-btn:hover {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
    box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}
.fullscreen-btn i { font-size: 12px; }

/* Pulso para que el estudiante note el icono de pantalla completa */
@keyframes fullscreen-btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(165,180,252,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(165,180,252,0); }
    100% { box-shadow: 0 0 0 0 rgba(165,180,252,0); }
}
.fullscreen-btn {
    animation: fullscreen-btn-pulse 1.8s ease-out infinite;
}
.fullscreen-btn:hover {
    animation: none;
}

/* Escritorio: acercar el aviso "¿Dudas con la solución?" al final del texto
   (Nota). La barra va absoluta abajo, así que el hueco = padding-bottom de la
   burbuja, con suelo en la altura del icono. Reducimos banda + icono + posición,
   solo en soluciones (en móvil manda la regla !important de más abajo). */
.bot .message-content.has-fullscreen-action {
    padding-bottom: 26px;
}
.bot .message-content.has-fullscreen-action > .message-actions {
    bottom: 3px;
}
.bot .message-content.has-fullscreen-action .fullscreen-btn {
    width: 22px;
    height: 22px;
}
.bot .message-content.has-fullscreen-action .fullscreen-btn i {
    font-size: 11px;
}
.fullscreen-mobile-cta {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: min(88%, 520px);
    margin: 8px 0 0 50px;
    padding: 10px 12px;
    border: 1.5px solid #818cf8;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.graph-fullscreen-hint {
    color: #0284c7;
}
.graph-fullscreen-btn {
    color: #38bdf8;
    border-color: #38bdf8;
}
.graph-fullscreen-btn:hover {
    background: #0284c7;
    border-color: #0284c7;
}
/* Botón de pantalla completa de gráfica anclado dentro del mensaje en móvil.
   En escritorio se usa el de la barra de acciones, así que aquí va oculto. */
.graph-fullscreen-mobile-btn {
    display: none;
    position: absolute;
    right: 8px;
    bottom: 8px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #0284c7;
    background: #e0f2fe;
    border: 1.5px solid #38bdf8;
    border-radius: 8px;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(2,132,199,0.25);
}
.graph-fullscreen-mobile-btn i { font-size: 15px; }
.graph-fullscreen-mobile-btn:active {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
}
@media (prefers-reduced-motion: reduce) {
    .fullscreen-btn { animation: none; }
}

@media (max-width: 768px) {
    .fullscreen-btn {
        display: inline-flex !important;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        color: #4f46e5;
        border-color: #818cf8;
        background: #eef2ff;
    }
    .fullscreen-hint {
        display: inline-flex !important;
        min-width: 0;
        flex: 1 1 108px;
        white-space: normal;
        font-size: 10px;
        line-height: 1.25;
    }
    .fullscreen-hint-text {
        min-width: 0;
    }
    .message-actions {
        left: 8px;
        right: 8px;
        bottom: 4px;
        gap: 6px;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    .bot .message-content.has-fullscreen-action {
        padding-bottom: 48px !important;
    }
    .bot .message-content.has-fullscreen-action.has-voice-explanation {
        padding-bottom: 52px !important;
    }
    .message-actions .btn-voice-explanation {
        max-width: 96px;
        flex: 0 1 96px;
    }
}

@media (max-width: 768px) {
    .support-button {
        top: 108px;
        right: 12px;
    }

    .support-field-row {
        grid-template-columns: 1fr;
    }

    .support-modal-card {
        padding: 22px 18px;
        border-radius: 20px;
    }

    .support-form-actions {
        flex-direction: column-reverse;
    }

    .support-form-actions button {
        width: 100%;
    }
}



/* ═══════════════════════════════════════════════════════════
   ESTILOS PARA PROBLEMAS CON ACORDEÓN - VERSIÓN MEJORADA
   ═══════════════════════════════════════════════════════════ */

.problems-container {
    margin: 20px 0;
    width: 100%;
}

.problem-item {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Número del problema */
.problem-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: #4f46e5;
    color: #fff;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 12px;
}

/* Contenido del problema */
.problem-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.problem-content > .problem-number {
    align-self: flex-start;
    margin-bottom: 10px;
}

.problem-statement {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.problem-preview-inline {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

.problem-media-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.problem-content.has-preview.is-circunferencia .problem-statement {
    margin-bottom: 0;
}

.problem-content.has-preview.is-circunferencia .problem-preview-inline {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.problem-preview-inline img {
    max-width: min(100%, 560px);
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: none;
}

.problem-content.has-preview.is-circunferencia .problem-preview-inline img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Botón de solución */
.solution-accordion {
    margin-top: 20px;
}

.solution-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #fff0f5;
    border: 1px solid #ffcce0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.solution-header:hover {
    background: #ffe6f0;
    transform: translateX(3px);
}

.solution-icon {
    font-size: 20px;
    color: #ff4d94;
}

.solution-title {
    font-size: 16px;
    font-weight: 600;
    color: #ff1a75;
    flex: 1;
}

.solution-toggle-icon {
    font-size: 18px;
    color: #ff4d94;
    transition: transform 0.3s ease;
}

.solution-accordion.active .solution-toggle-icon {
    transform: rotate(90deg);
}

/* Contenido de la solución */
.solution-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: #fffbfc;
}

.solution-accordion.active .solution-content {
    max-height: 5000px;
    padding: 25px 20px;
    border-top: 1px solid #ffcce0;
}

/* Estilos para el contenido matemático */
.solution-content .MathJax,
.problem-statement .MathJax {
    font-size: 1.1em !important;
}

/* Responsive para móviles */



/* Estilos para el modal de solución */
#solutionModal {
    animation: fadeIn 0.3s ease-out;
}

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

#solutionModal > div {
    animation: slideDown 0.3s ease-out;
}

.properties-tour-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.52);
    z-index: 100200;
    padding: 20px;
}

.properties-tour-modal.is-open {
    display: flex;
}

.properties-tour-inline-host {
    z-index: 100500 !important;
}

.properties-tour-inline-card {
    width: min(820px, calc(100vw - 32px));
}

.support-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 100250;
}

.support-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.support-modal-card {
    position: relative;
    width: min(100%, 640px);
    max-height: min(90vh, 860px);
    overflow-y: auto;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.28);
}

.support-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    color: #334155;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.support-modal-kicker {
    color: #0f766e;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.support-modal-card h3 {
    margin: 8px 0 10px;
    color: #1e1b4b;
    font-size: 28px;
}

.support-modal-copy {
    margin: 0 0 16px;
    color: #475569;
    line-height: 1.6;
}

.support-modal-status {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: white;
    border: 1px solid #dbeafe;
    color: #1e293b;
    font-weight: 600;
}

.support-modal-status[data-status="disponible"] {
    border-color: #86efac;
    background: #f0fdf4;
}

.support-modal-status[data-status="ausente"] {
    border-color: #fcd34d;
    background: #fffbeb;
}

.support-modal-status[data-status="fuera_de_linea"] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.support-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #1f2937;
    font-weight: 700;
    font-size: 14px;
}

.support-field input,
.support-field select,
.support-field textarea {
    border: 2px solid #dbe4f5;
    border-radius: 16px;
    padding: 14px 15px;
    font: inherit;
    color: #0f172a;
    background: white;
}

.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
    outline: none;
    border-color: #4f46e5;
}

.support-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.support-upload-btn {
    background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
    border-radius: 16px;
    padding: 12px 16px;
}

.support-image-meta {
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.support-form-message {
    min-height: 22px;
    font-size: 14px;
    font-weight: 700;
}

.support-form-message.is-error {
    color: #b91c1c;
}

.support-form-message.is-success {
    color: #047857;
}

.support-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.support-secondary-btn {
    background: white;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.support-primary-btn {
    background: linear-gradient(90deg, #3730a3 0%, #4f46e5 100%);
}

.support-primary-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.properties-tour-card {
    position: relative;
    width: min(700px, 100%);
    max-height: min(88vh, 820px);
    overflow: hidden;
    background: linear-gradient(180deg, #fffef8 0%, #ffffff 100%);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
    padding: 18px 18px 14px 18px;
}

.properties-tour-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    cursor: pointer;
}

.properties-tour-title {
    margin: 0 36px 8px 0;
    color: #1f2937;
    font-size: 22px;
}

.properties-tour-text {
    color: #475569;
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 12px;
}

.properties-tour-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfeff;
    color: #155e75;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
}

.properties-tour-figure {
    margin: 0;
}

.properties-tour-figure img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 50vh;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    background: transparent;
    border: none;
}

/* Propiedades cuya figura es una fórmula: las pinta MathJax desde formula_latex
   en vez de un SVG de disco (cálculo integral). */
.properties-tour-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 18px 12px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    color: #1f2937;
    text-align: center;
}

.properties-tour-formula mjx-container {
    margin: 0 !important;
    font-size: 150% !important;
}

.properties-tour-formula mjx-container[display="true"] {
    display: block;
}

@media (max-width: 640px) {
    .properties-tour-formula {
        min-height: 90px;
        padding: 12px 4px;
    }

    .properties-tour-formula mjx-container {
        font-size: 118% !important;
    }
}

.properties-tour-caption {
    margin-top: 10px;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}

.properties-tour-progress {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.properties-tour-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 4px;
}

.properties-tour-btn {
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.properties-tour-btn.secondary {
    background: #e2e8f0;
    color: #1e293b;
}

.properties-tour-btn.primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #fff;
}

#modalContent .problem-statement-modal {
    background: #f8f9ff;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4f46e5;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#modalContent .problem-diagram-modal {
    margin-top: 16px;
    text-align: center;
}

#modalContent .circ-transparent-panel {
    background: transparent !important;
    border-left: none !important;
    box-shadow: none !important;
}

#modalContent .circ-transparent-diagram,
#modalContent .circ-transparent-diagram .img-zoom-container {
    background: transparent !important;
    box-shadow: none !important;
}

#modalContent .problem-diagram-modal img {
    max-width: min(100%, 760px);
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: none;
}

#modalContent .problem-diagram-modal img[src*="/static/uploads/originales/circ_"] {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
}

#modalContent .solution-diagram-modal img[src*="/static/uploads/originales/circ_"] {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
}

#modalContent .solution-content-modal {
    background: #fffef7;
    padding: 10px 18px 18px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    font-size: 16px;
    line-height: 1.8;
}

#modalContent .solution-content-modal img {
    display: block;
    max-width: min(100%, 760px);
    width: 100%;
    height: auto;
    margin: 0 auto 12px auto;
    border-radius: 10px;
    box-shadow: none;
}

#modalContent .solution-content-modal img[src*="/static/uploads/originales/circ_"],
#modalContent .solution-content-modal img[src*="/static/temp/circ_"] {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
}

/* En pantalla completa, las gráficas generadas (fondo blanco) se funden con el
   panel para que se vean con fondo transparente, sin el recuadro blanco. */
#chatMessages img[src*="/static/tmp/"][alt="Grafica generada"],
#chatMessages img[src*="/static/tmp/"][alt="Gráfica generada"],
#modalContent img[src*="/static/tmp/"][alt="Grafica generada"],
#modalContent img[src*="/static/tmp/"][alt="Gráfica generada"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#modalContent .solution-content-modal img[src*="/static/tmp/"] {
    /* En el modal no combinar width:100% con max-height:70vh: cuando el panel
       es ancho, el navegador limita solo la altura y deforma la imagen. */
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 170px) !important;
    object-fit: contain;
    mix-blend-mode: multiply;
    background: transparent;
    border-radius: 0;
}

#modalContent h4 {
    color: #4f46e5;
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 18px;
}

/* Responsive */



/* ═══════════════════════════════════════════════════════════ */
/* BOTÓN SIGUIENTE PROBLEMA */
/* ═══════════════════════════════════════════════════════════ */

.siguiente-problema-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid rgba(102, 126, 234, 0.2);
}

.btn-siguiente-problema {
    padding: 14px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-siguiente-problema:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-siguiente-problema:active {
    transform: translateY(0);
}

.btn-siguiente-problema i {
    animation: bounce-horizontal 1.5s infinite;
}

/* ── Botón practicar ejercicio similar ─────────────────────── */
.practica-similar-container {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 2px solid rgba(99, 102, 241, 0.2);
}

.btn-practica-similar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 13px 18px;
    background: linear-gradient(135deg, #eeeffd 0%, #e0e1fb 100%);
    color: #3730a3;
    border: 2px solid rgba(99, 102, 241, 0.25);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.12);
}

.btn-practica-similar:hover {
    background: linear-gradient(135deg, #e0e1fb 0%, #c7c8f7 100%);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(99, 102, 241, 0.22);
}

.btn-practica-similar:active {
    transform: translateY(0);
}

.practica-similar-texto {
    flex: 1;
    line-height: 1.4;
}

.practica-similar-icono {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3730a3, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    transition: transform 0.2s ease;
}

.btn-practica-similar:hover .practica-similar-icono {
    transform: scale(1.12) rotate(-8deg);
}

.btn-voice-explanation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 170px;
    padding: 5px 9px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #3730a3;
    border: 1.5px solid rgba(79, 70, 229, 0.24);
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.16);
}

.btn-voice-explanation:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-color: rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.22);
}

.btn-voice-explanation:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.voice-explanation-texto {
    flex: 1;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voice-explanation-icono {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #3730a3, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28);
}

.voice-explanation-panel {
    margin-top: 8px;
}

.voice-explanation-status {
    margin-top: 10px;
    font-size: 13px;
    color: #3730a3;
    line-height: 1.45;
}

.voice-explanation-player {
    margin-top: 8px;
}

.voice-explanation-browser-controls {
    display: none;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(79, 70, 229, 0.16);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.14);
    min-width: 168px;
    margin-bottom: 8px;
}

.voice-explanation-floating-overlay {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1200;
    pointer-events: none;
}

.voice-explanation-floating-overlay .voice-explanation-browser-controls {
    pointer-events: auto;
}

#solutionModal .voice-explanation-modal-inline {
    position: static;
    width: 100%;
    margin: 0 0 12px;
    pointer-events: none;
}

#solutionModal .voice-explanation-modal-inline .voice-explanation-browser-controls {
    width: 100%;
    margin: 0;
}

#solutionModal .voice-explanation-modal-inline .voice-explanation-live-text {
    width: 100%;
    max-height: 135px;
    box-sizing: border-box;
}

.voice-explanation-floating-title {
    font-size: 12px;
    font-weight: 700;
    color: #3730a3;
    margin-bottom: 8px;
}

.voice-explanation-live-text {
    width: min(340px, calc(100vw - 40px));
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(79, 70, 229, 0.14);
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.voice-explanation-live-text mark {
    padding: 1px 2px;
    border-radius: 3px;
    background: #fde047;
    color: #111827;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.25);
}

.voice-explanation-floating-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.voice-explanation-mini-btn {
    padding: 6px 10px;
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.voice-explanation-mini-btn:hover:not(:disabled) {
    background: #c7d2fe;
}

.voice-explanation-mini-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.voice-explanation-audio {
    width: 100%;
}

.voice-explanation-script {
    margin-top: 8px;
    font-size: 12px;
    color: #334155;
}

.voice-explanation-script summary {
    cursor: pointer;
    font-weight: 600;
    color: #3730a3;
    margin-bottom: 6px;
}

.voice-explanation-script div {
    padding: 10px 12px;
    background: rgba(79, 70, 229, 0.06);
    border-radius: 8px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .btn-voice-explanation {
        max-width: 170px;
        min-height: 0;
        padding: 5px 9px;
        font-size: 11px;
    }

    .voice-explanation-texto {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .voice-explanation-panel,
    .voice-explanation-player,
    .voice-explanation-browser-controls,
    .voice-explanation-script {
        width: 100%;
    }

    .voice-explanation-browser-controls {
        min-width: 0;
        padding: 12px;
        border-radius: 16px;
    }

    .voice-explanation-floating-overlay {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 92px;
        z-index: 1300;
    }

    .voice-explanation-floating-buttons {
        justify-content: stretch;
    }

    .voice-explanation-mini-btn {
        flex: 1;
        min-height: 38px;
    }
}

@keyframes bounce-horizontal {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.loading-siguiente {
    opacity: 0.7;
    font-style: italic;
}

/* Botón "Ver solución" junto al problema similar */
.ver-solucion-container {
    position: absolute;
    right: 44px;
    bottom: 8px;
    margin: 0;
    display: flex;
    align-items: center;
}

.btn-ver-solucion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37,99,235,0.35);
    white-space: nowrap;
}

.btn-ver-solucion:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,99,235,0.45);
}

.btn-ver-solucion:active {
    transform: translateY(0);
}

.btn-ver-solucion:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

/* Responsive para móviles */

/* Estilos para preview de imagen */
#imagePreviewContainer {
    animation: fadeIn 0.3s ease-out;
}

#imagePreviewContainer img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#imagePreviewContainer button:hover {
    background: #c0392b !important;
    transform: scale(1.1);
}



/* ═══ TECLADO MATEMÁTICO ═══ */
.kb-tab { padding:5px 14px; border-radius:20px; border:none; font-size:13px; font-weight:500; cursor:pointer; background:transparent; color:#555; font-family:'Quicksand',sans-serif; }
.kb-tab.active { background:white; color:#4f46e5; box-shadow:0 1px 4px rgba(0,0,0,0.15); }
.kb-key { background:white; border:none; border-radius:8px; height:44px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 0 rgba(0,0,0,0.25); transition:background 0.1s; color:#222; font-family:'Quicksand',sans-serif; padding:0; }
.kb-key.dark { background:#aab0b8; }
.kb-key.accent { background:linear-gradient(135deg,#4f46e5,#6366f1); color:white; }
.kb-key:active { background:#bbb !important; transform:scale(0.96); }
.kb-key sup { font-size:9px; vertical-align:super; }
.kb-sep-v { width:1px; background:rgba(0,0,0,0.18); margin:4px 0; }
.kb-page { display:none; }
.kb-page.active { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; }

/* Teclado matemático clonado dentro del modal del tutor. El fondo/padding venían
   del selector por id #mathKeyboardPanel, que ya no aplica al clon. */
.modal-math-keyboard {
    position: relative;
    z-index: 1;
    background: #d1d5db;
    border-radius: 12px;
    padding: 8px 6px 10px;
    margin: 6px 0 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    user-select: none;
}
.modal-math-keyboard .kb-page.active { grid-template-columns: repeat(9, minmax(28px, 1fr)); }

/* Empuja el input-area encima del teclado cuando está abierto */
#mathKeyboardPanel.kb-open ~ * { display: none; }

/* LAPTOP: position relative, dentro del flujo */
#mathKeyboardPanel {
    position: relative;
    z-index: 100;
    background: #d1d5db;
    border-radius: 12px;
    padding: 8px 6px 10px 6px;
    margin: 6px 0 0 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    overflow-y: visible;
    user-select: none;
}
#mathKeyboardPanel .kb-page.active {
    display: grid;
    grid-template-columns: repeat(9, minmax(30px, 1fr));
    gap: 5px;
}
/* MÓVIL: fixed desde abajo, sube el input-area */
@media (max-width: 768px) {
    #mathKeyboardPanel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        z-index: 99998 !important;
        border-radius: 16px 16px 0 0;
        padding: 6px 4px 10px 4px;
        margin: 0;
        max-height: 45vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        width: 100% !important;
        /* Que las teclas no queden bajo la barra de gestos en standalone */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #mathKeyboardPanel .kb-page.active {
        grid-template-columns: repeat(9, minmax(26px, 1fr));
        gap: 3px;
    }
    .kb-key {
        height: 36px !important;
        font-size: 11px !important;
        min-width: 26px;
        border-radius: 5px;
    }
    .kb-tab {
        padding: 3px 7px;
        font-size: 11px;
    }

    /* ── Teclado matemático en móvil ── */
    /* Ocultar el botón de micrófono en dispositivos móviles */
    #micButton {
        display: none;
    }
    
    .chat-container {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        height: 100dvh;
        border-radius: 0;
        /* Sin el borde de "tarjeta" del escritorio: a pantalla completa se ve
           como una línea en los bordes superior e inferior */
        border: none;
        margin: 0;
        transform: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        /* PWA standalone con viewport-fit=cover: el contenido se dibuja de
           borde a borde. El colchón de las barras del sistema se aplica AQUÍ,
           en el contenedor: así el header queda bajo la barra de estado y la
           fila de envío sobre la barra de gestos, sin que ningún hijo tenga
           que calcularlo. border-box es obligatorio para que ese padding no
           se sume a los 100dvh y desborde la pantalla. */
        box-sizing: border-box;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .chat-header {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        height: 70px;
        padding: 10px 5px;
    }
    
    .bot-avatar {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-bottom: 5px;
    }
    
    .chat-header h2 {
        font-size: 18px;
    }
    
    .message-content {
        max-width: 90%;
        padding: 10px 15px;
        font-size: 14px;
    }

    .message.user .edit-area {
        width: 90%;
    }
    
    /* Área de entrada: parte del flujo flex del contenedor, NO fixed.
       Con fixed dependía de cálculos de viewport y safe-area que en la PWA
       instalada dejaban la fila debajo de la barra de gestos. Como último
       hijo de un flex column de altura 100dvh, el navegador la coloca
       siempre al fondo del área visible, sin cálculos. */
    .input-area {
        padding: 8px;
        position: static;
        flex: 0 0 auto;
        background: white;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 100;
    }

    /* Ya no hay que reservar espacio para una barra flotante */
    .chat-messages {
        padding: 10px;
        padding-bottom: 14px !important;
        margin-bottom: 0;
        flex: 1 1 auto;
        min-height: 0; /* imprescindible para que el scroll viva aquí dentro */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    input {
        padding: 12px;
        font-size: 14px;
    }
    
    #userInput {
        flex: 1;
        min-width: 0; /* Permite que el input se encoja apropiadamente */
        margin-right: 5px;
    }
    
    #sendButton, .cancel-button {
        width: 40px;
        height: 40px;
        min-width: 40px; /* Evita que se encoja demasiado */
    }
    
    #sendButton, #cancelButton {
        margin: 0 3px;
    }

    /* La fila de controles nunca debe desbordar: botones compactos de ancho
       fijo y el textarea absorbe el resto */
    .input-area-controls {
        flex-wrap: nowrap;
        min-width: 0;
    }

    #uploadImageBtn, #cameraImageBtn, #mathKeyboardBtn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex-shrink: 0;
        margin-right: 6px;
        font-size: 14px;
    }

    #userInput {
        margin-right: 6px;
    }

    .home-button, .refresh-button {
        width: 35px;
        height: 35px;
    }

    /* Reposiciona botones en móvil. Van en position: absolute, que se ancla
       al borde del contenedor ignorando su padding, así que el colchón de la
       barra de estado hay que sumarlo aquí también. */
    .home-button {
        top: calc(10px + env(safe-area-inset-top, 0px));
    }

    .logout-button {
        padding: 6px 10px;
        font-size: 12px;
        top: calc(5px + env(safe-area-inset-top, 0px));
        right: 5px;
    }

    .refresh-button {
        top: calc(45px + env(safe-area-inset-top, 0px));
        right: 5px;
    }
    
    
    /* Mejora la visualización de fórmulas matemáticas */
    .MathJax {
        max-width: 100%;
        overflow-x: hidden;
        font-size: 90% !important;
    }
    
    /* Ajusta el modal de límite para móviles */
    .modal-overlay .modal-content {
        width: 95%;
        padding: 15px;
    }
    
    /* Mejora la visibilidad de los botones de código */
    .code-toggle-button, .copy-code-button {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    /* Ajustar botones de edición en móvil */
    .message-actions {
        top: -12px;
        left: 5px;
    }
    
    .edit-button {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    /* Mejoras para visualización de LaTeX en móvil */
    /* Solo centrar display math, no el inline */
    .MathJax_Display, .MathJax_SVG_Display {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        text-align: center !important;
    }
    .MathJax, .MathJax_SVG {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* Display math ($$...$$): bloque centrado */
    mjx-container[display="true"],
    .mjx-container[display="true"] {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 4px 0 !important;
        display: block !important;
        text-align: center;
    }

    /* Inline math ($...$): fluir con el texto */
    mjx-container:not([display="true"]),
    .mjx-container:not([display="true"]) {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: inline !important;
        vertical-align: middle !important;
    }
    
    /* Prevenir zoom extraño en iOS */
    .mjx-container * {
        touch-action: pan-x !important;
    }
    
    /* Mantener la vista previa de LaTeX bien centrada */
    .latex-preview {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        text-align: center !important;
        padding: 10px;
        max-width: 100%;
        margin-bottom: 10px;
    }
    
    /* Mejorar visualización del contenedor de LaTeX */
    .latex-preview-container {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 95%;
        max-width: 95%;
        margin: 8px auto 0;
        border-radius: 12px;
        padding: 10px;
        z-index: 900;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
    }
    
    .latex-preview-title {
        font-size: 14px;
    }
    
    /* Controles deslizantes para fórmulas grandes */
    .latex-preview:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(79, 70, 229, 0.2) 25%, 
            rgba(79, 70, 229, 0.2) 75%, 
            transparent 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .latex-preview.scrollable:after {
        opacity: 1;
    }
    .bot .message-content {
        padding-right: 15px !important; /* Sobrescribir el padding derecho */
        overflow: hidden !important;
    }

    .MathJax-SVG-Display {
        overflow-x: scroll; /* Permitir scroll solo en la fórmula si es necesario */
        max-width: 100%;
        margin: 0.5em 0;
    }

    .mjx-chtml {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 5px 0;
    }
    
    /* Ocultar scrollbar en inline math; display math mantiene overflow-x:auto */
    mjx-container:not([display="true"]),
    .mjx-container:not([display="true"]) {
        overflow: hidden !important;
    }
    
    /* Ocultar cualquier rastro de barra de desplazamiento */
    .MathJax::-webkit-scrollbar,
    .mjx-container::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }
    
    /* Forzar a que las fórmulas se adapten al contenedor */
    .mjx-container svg {
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    /* Asegurar que el botón cancelar sea visible en móvil */
    #cancelButton.active {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-left: 5px;
        margin-right: 5px;
        z-index: 200;
        position: relative;
        background: #6366f1;
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }
    
    /* El área de mensajes ocupa el hueco restante y hace scroll ella misma */
    .chat-messages {
        padding-bottom: 14px !important;
    }

    /* OJO: esta es la última regla de .input-area del bloque móvil, así que
       es la que gana — cualquier ajuste debe hacerse aquí. */
    .input-area {
        position: static;
        flex: 0 0 auto;
        background: white;
        padding: 10px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
        z-index: 100;
    }
    
    /* Mejorar visibilidad de mensajes en móvil */
    .message-content {
        max-width: 85%;
        padding: 10px 15px;
        margin-bottom: 10px;
    }
    
    /* Mayor visibilidad para el indicador "Pensando..." */
    .thinking-indicator {
        background-color: rgba(79, 70, 229, 0.1) !important;
        border: 2px dashed #4f46e5 !important;
        font-weight: bold;
    }
    
    /* Asegurar que los mensajes se muestran completos */
    .message {
        margin-bottom: 20px; /* Aumentar espacio entre mensajes */
    }
    
    /* Asegurar que el último mensaje sea visible por completo */
    .chat-messages:after {
        content: '';
        display: block;
        height: 30px; /* Espacio adicional después del último mensaje */
    }
  .cam-modal button {
    padding: 12px 16px;
    margin: 0 3px;
    font-size: 0.9em;
  }
  
  .selection-instructions {
    font-size: 12px;
    padding: 6px 10px;
  }
    .modal-dialog {
        margin: 5% auto;
        max-width: 95%;
    }
    
    .modal-content {
        margin: 10px;
    }
    .problem-number {
        font-size: 16px;
        top: 12px;
        left: 12px;
    }
    
    .problem-content {
        padding: 45px 15px 15px 15px;
    }

    .problem-media-row {
        gap: 12px;
    }
    
    .problem-statement {
        font-size: 15px;
    }
    
    .solution-header {
        padding: 12px 15px;
    }
    
    .solution-content {
        padding: 20px 15px;
    }
    #solutionModal > div {
        margin: 5% 10px;
        max-width: calc(100% - 20px);
    }

    #modalContent {
        padding: 20px;
        max-height: 80vh;
    }
    .btn-siguiente-problema {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
    
    .siguiente-problema-container {
        margin-top: 15px;
        padding-top: 12px;
    }
    #imagePreviewContainer {
        max-width: 100%;
    }
    
    #imagePreviewContainer img {
        max-width: 150px;
        max-height: 100px;
    }
}


/* ═══ ZOOM EN IMÁGENES DE GRÁFICAS ═══ */
.img-zoom-container {
    position: relative;
    overflow: hidden;
    cursor: default;
    border-radius: 10px;
    margin: 10px auto 0;
    max-width: 100%;
    text-align: center;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.img-zoom-container.drag-enabled { cursor: grab; touch-action: none; }
.img-zoom-container.drag-enabled:active { cursor: grabbing; }
.img-zoom-container img {
    display: block;
    max-width: 100%;
    border-radius: 10px;
    transform-origin: 0 0;
    transition: transform 0.05s linear;
    pointer-events: none;
    margin: 0 auto !important;
}
.zoom-controls {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.img-zoom-container:hover .zoom-controls { opacity: 1; }
.modal-image-download-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 11;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: background 0.2s ease, transform 0.2s ease;
}
.modal-image-download-btn:hover {
    background: rgba(17, 24, 39, 0.94);
    transform: translateY(-1px);
}
.zoom-btn {
    background: rgba(99,102,241,0.85);
    color: white;
    border: none;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    padding: 0;
    line-height: 1;
}
.zoom-btn:hover { background: rgba(79,70,229,0.9); transform: none; }

/* Teclado matemático - botón toggle (movido de inline HTML) */
#mathKeyboardBtn {
    order: 5;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.20);
    margin-right: 8px;
    flex-shrink: 0;
}

/* Modal de solución (movido de inline HTML) */
#solutionModal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
    overflow: auto;
}
.solution-modal-inner {
    position: relative;
    background: white;
    margin: 2% auto;
    max-width: 900px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.solution-modal-header {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: white;
    padding: 4px 8px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 32px;
}
.solution-modal-header h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1;
}
.solution-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
}
.solution-modal-close:hover {
    background: rgba(255,255,255,0.2);
}
.solution-modal-body {
    position: relative;
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
}

/* ─── Acciones del header del modal ─────────────────────────── */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.annotation-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
}

.annotation-toolbar.drawing-active {
    background: rgba(255,255,255,0.16);
    padding: 2px 4px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

.annotation-btn,
.annotation-color {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.16);
    color: white;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.annotation-btn:hover,
.annotation-color:hover {
    background: rgba(255,255,255,0.28);
}

.annotation-btn.active,
.annotation-color.active {
    background: rgba(255,255,255,0.34);
    border-color: #ffffff;
    transform: scale(1.05);
}

.annotation-btn i {
    font-size: 11px;
}

.annotation-color {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18);
}

.annotation-color.color-red { background: #d32f2f; }
.annotation-color.color-blue { background: #1976d2; }
.annotation-color.color-green { background: #2e7d32; }
.annotation-color.color-black { background: #111111; }

.annotation-sep {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.35);
    margin: 0 2px;
    vertical-align: middle;
}

.annotation-size .size-dot {
    display: block;
    border-radius: 50%;
    background: white;
    pointer-events: none;
}
.annotation-size[data-size="1"] .size-dot { width: 2px;  height: 2px;  }
.annotation-size[data-size="2"] .size-dot { width: 5px;  height: 5px;  }
.annotation-size[data-size="4"] .size-dot { width: 9px;  height: 9px;  }

#annotationCanvas {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 300;
    cursor: crosshair;
    touch-action: none;
    pointer-events: none;
}

#annotationCanvas.active {
    display: block;
    pointer-events: none;
}

.toggle-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-view-btn:hover { background: rgba(255,255,255,0.32); }
.toggle-view-btn:active { background: rgba(255,255,255,0.5); transform: scale(0.97); }
#solutionModal.pizarra-mode .toggle-view-btn { background: rgba(255,255,255,0.35); border-color: white; }
.toggle-view-btn i { font-size: 14px; }

/* ── Paneles siempre presentes — modo CLÁSICO (apilados) ───── */
.pizarra-left,
.pizarra-right {
    padding: 0;
    position: relative;
}

.pizarra-left h4,
.pizarra-right h4 {
    color: #4f46e5;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
}
.pizarra-right h4 { color: #b07800; }

.pizarra-left .problem-statement-modal {
    background: #f8f9ff;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #4f46e5;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pizarra-right .solution-content-modal {
    background: #fffef7;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    font-size: 16px;
    line-height: 1.8;
}

.guided-audio-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
    justify-content: flex-end;
    flex-shrink: 0;
}

.guided-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(79, 70, 229, 0.18);
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #312e81;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.10);
}

.guided-audio-btn:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    transform: translateY(-1px);
}

.guided-props-btn {
    border-color: rgba(14, 116, 144, 0.18);
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    color: #155e75;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.10);
}

.guided-props-btn:hover {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
}

.guided-audio-panel {
    width: 220px;
    margin: 6px 0 12px auto;
}

.mob-solucion .guided-audio-wrap {
    position: static;
    transform: none;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 2px;
    margin-bottom: 12px;
}

.mob-solucion .guided-audio-panel {
    width: 100%;
}

@media (max-width: 768px) {
    .guided-audio-anchor {
        display: block;
    }
}

/* ===================== PIZARRA SINCRONIZADA =============================
   La solución escrita por el profesor al ritmo de su voz. Cada renglón está
   maquetado desde el principio (ocupa su sitio aunque no se vea): lo que
   avanza es una máscara de tinta, así la pizarra nunca da saltos mientras se
   escribe. --pz-corte es el ancho revelado, en píxeles, y lo mueve chat.js. */
.pizarra-sync {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pz-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #4338ca;
}

.pz-hoja {
    display: flex;
    flex-direction: column;
    /* Sin `gap`: el hueco entre renglones lo pone cada uno con su margen, que es
       lo único que puede colapsar a la vez que su alto. */
    padding: 20px 18px;
    border-radius: 14px;
    background: linear-gradient(180deg, #fdfdff 0%, #f6f7ff 100%);
    border: 1px solid rgba(79, 70, 229, 0.14);
    box-shadow: inset 0 1px 0 #fff, 0 2px 12px rgba(49, 46, 129, 0.06);
}

/* Dos columnas desde los 10 renglones de solución (el reparto lo hace
   _pzHtmlHoja en chat.js). Las dos nacen maquetadas aunque la derecha esté
   vacía: así la hoja no cambia de ancho a mitad de la explicación. `stretch`
   —el valor por defecto— es lo que hace que la línea divisoria llegue de arriba
   abajo aun cuando la columna derecha todavía no tiene nada escrito. */
.pz-hoja-2col {
    flex-direction: row;
    gap: 0;
}

.pz-hoja-2col .pz-columna {
    display: flex;
    flex-direction: column;
    /* `min-width: 0` evita que una fórmula ancha estire su columna y le robe el
       espacio a la otra. */
    flex: 1 1 0;
    min-width: 0;
}

.pz-hoja-2col .pz-columna + .pz-columna {
    margin-left: 22px;
    padding-left: 22px;
    border-left: 1px dashed rgba(79, 70, 229, 0.18);
}

/* La mitad de ancho aprieta las fórmulas largas, que en el modal se recortan en
   vez de sacar barra: se compensa bajando un punto el tamaño de la tinta. */
.pz-hoja-2col .pz-tinta {
    font-size: 0.92em;
}

/* En pantallas estrechas (celular y tablet en vertical) la hoja vuelve a una
   sola columna: media columna no da para una fórmula. */
@media (max-width: 991px) {
    .pz-hoja-2col {
        flex-direction: column;
    }
    .pz-hoja-2col .pz-columna + .pz-columna {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
    .pz-hoja-2col .pz-tinta {
        font-size: 1em;
    }
    /* Apiladas, el último renglón de la primera columna deja de ser el final de
       la hoja: recupera su hueco para que no se pegue al primero de la segunda. */
    .pz-hoja-2col .pz-columna:first-child .pz-renglon:last-child:not(.pz-vacio) {
        margin-bottom: 9px;
    }
}

/* El renglón sin escribir no ocupa alto: la hoja empieza pequeña y va creciendo
   al ritmo de la voz. Es una rejilla de una fila porque `0fr → 1fr` es la única
   forma de animar de "alto cero" a "alto natural" sin fijar píxeles a mano. */
.pz-renglon {
    position: relative;
    display: grid;
    grid-template-rows: 1fr;
    margin-bottom: 9px;
    transition: grid-template-rows .34s cubic-bezier(.22, .68, .36, 1),
                margin-bottom .34s cubic-bezier(.22, .68, .36, 1);
}

.pz-renglon:last-child {
    margin-bottom: 0;
}

.pz-renglon.pz-vacio {
    grid-template-rows: 0fr;
    margin-bottom: 0;
}

/* Recorta el renglón mientras la fila está cerrada. El padding deja aire al
   resplandor del resaltado, que si no se comería el borde. */
.pz-linea {
    min-height: 0;
    overflow: hidden;
    padding-block: 3px;
}

/* "Mostrar todo" y las aperturas en seco abren la hoja de golpe. */
.pizarra-sync.pz-instantaneo .pz-renglon {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .pz-renglon {
        transition: none;
    }
}

.pz-tinta {
    display: inline-block;
    max-width: 100%;
    color: #1e1b4b;
    /* El borde de la máscara va difuminado: un corte duro se ve como una
       persiana, no como tinta recién puesta. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--pz-corte, 0px),
        rgba(0, 0, 0, .28) calc(var(--pz-corte, 0px) + 8px),
        transparent calc(var(--pz-corte, 0px) + 18px));
    mask-image: linear-gradient(90deg, #000 0, #000 var(--pz-corte, 0px),
        rgba(0, 0, 0, .28) calc(var(--pz-corte, 0px) + 8px),
        transparent calc(var(--pz-corte, 0px) + 18px));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Terminado: sin máscara, para que el último signo no se coma medio píxel. */
.pz-renglon.pz-escrito .pz-tinta {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Aún sin escribir: oculto del todo, sin el fantasma del difuminado. */
.pz-renglon.pz-vacio .pz-tinta {
    -webkit-mask-image: linear-gradient(#0000, #0000);
    mask-image: linear-gradient(#0000, #0000);
}

/* La matemática va alineada a la izquierda, como en una pizarra real, no
   centrada como el display math por defecto de MathJax. */
.pizarra-sync mjx-container[display="true"] {
    display: inline-block !important;
    margin: 0 !important;
    text-align: left !important;
}

.pz-pluma {
    position: absolute;
    top: 50%;
    left: var(--pz-corte, 0px);
    transform: translate(-3px, calc(-50% + var(--pz-bob, 0px))) rotate(10deg);
    color: #4f46e5;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.pz-renglon.pz-escribiendo .pz-pluma {
    opacity: 1;
}

.pz-renglon.pz-vacio .pz-pluma {
    opacity: 0;
}

.pz-tipo-rotulo .pz-tinta {
    font-weight: 700;
    font-size: 15px;
    color: #4338ca;
    border-bottom: 2px solid rgba(67, 56, 202, 0.28);
    padding-bottom: 2px;
}

.pz-tipo-regla .pz-tinta {
    background: rgba(124, 58, 237, 0.07);
    border-radius: 8px;
    padding: 5px 10px;
    color: #5b21b6;
    font-size: .95em;
}

.pz-tipo-resultado .pz-tinta {
    color: #065f46;
    font-weight: 600;
}

.pz-tipo-resultado.pz-escrito .pz-tinta {
    background: rgba(5, 150, 105, 0.08);
    box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.30);
    border-radius: 10px;
    padding: 4px 10px;
}

/* Lo que la voz está señalando sin escribir nada nuevo. */
.pz-resaltado {
    background: rgba(250, 204, 21, 0.42);
    border-radius: 5px;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22);
}

.pz-resaltado-renglon .pz-tinta {
    background: rgba(250, 204, 21, 0.16);
    border-radius: 8px;
}

.pz-subtitulo {
    min-height: 3.1em;
    padding: 10px 13px;
    border-left: 3px solid #6366f1;
    border-radius: 0 8px 8px 0;
    background: #f8fafc;
    color: #3f3f46;
    font-size: 14.5px;
    line-height: 1.5;
}

.pz-controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 10px;
    border: 1px solid rgba(79, 70, 229, 0.18);
    background: #fff;
    color: #312e81;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pz-btn:hover {
    background: #eef2ff;
}

.pz-btn-principal {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.28);
}

.pz-btn-principal:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.pz-btn-suave {
    margin-left: auto;
    border-style: dashed;
    color: #4b5563;
    font-weight: 500;
}

.pz-contador {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pz-hoja {
        padding: 16px 12px;
    }
    .pz-renglon {
        margin-bottom: 7px;
    }
    .pz-renglon.pz-vacio {
        margin-bottom: 0;
    }
    .pz-btn-texto {
        display: none;
    }
    .pz-btn-principal .pz-btn-texto {
        display: inline;
    }
    .pz-btn-suave {
        margin-left: 0;
    }
}

.pizarra-left .problem-diagram-modal img[src*="/static/uploads/originales/circ_"] {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    height: auto !important;
}

.pizarra-right .solution-diagram-modal img[src*="/static/uploads/originales/circ_"] {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    height: auto !important;
}

/* ═══════════════════════════════════════════════════════════ */
/* MODO PIZARRA — Solo desktop ≥ 1024px                        */
/* ═══════════════════════════════════════════════════════════ */
/* Label dinámico — aplica en todas las pantallas */
#solutionModal.pizarra-mode #toggleViewLabel { font-size: 0; }
#solutionModal.pizarra-mode #toggleViewLabel::before { content: 'Vista clásica'; font-size: 13px; }
#solutionModal:not(.pizarra-mode) #toggleViewLabel { font-size: 0; }
#solutionModal:not(.pizarra-mode) #toggleViewLabel::before { content: 'Pizarra'; font-size: 13px; }

/* ── Modal expandido en modo pizarra — todas las pantallas ─── */
#solutionModal.pizarra-mode {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
#solutionModal.pizarra-mode .solution-modal-inner {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}
/* A pantalla completa el contenedor se cuadra (border-radius: 0), pero la
   cabecera conservaba su redondeo de tarjeta (12px 12px 0 0): en las dos
   esquinas de arriba asomaba el fondo blanco del contenedor, como si la banda
   no llegara al borde. overflow:hidden no lo tapa porque recorta al rectángulo
   del padre, no al redondeo del hijo. */
#solutionModal.pizarra-mode .solution-modal-header,
#solutionModal.mobile-mode .solution-modal-header {
    border-radius: 0;
}
#solutionModal.pizarra-mode .solution-modal-body {
    display: grid;
    grid-template-columns: calc(320px + 2cm) minmax(0, 1fr);
    gap: 0;
    max-height: none;
    flex: 1;
    overflow: hidden;
    padding: 0;
}
/* Paneles */
#solutionModal.pizarra-mode .pizarra-left {
    padding: 24px 14px 24px 28px;
    overflow-y: auto;
    border-right: 2px solid #e0e0f0;
    background: linear-gradient(135deg, #f4f6ff 0%, #eef0fb 100%);
}
#solutionModal.pizarra-mode .pizarra-right {
    padding: 2px 20px 20px;
    overflow-y: auto;
    background: linear-gradient(135deg, #fffef5 0%, #fffbe8 100%);
}
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal {
    background: rgba(79,70,229,0.05);
    border-left: 4px solid #4f46e5;
    padding: 14px 14px 14px 10px;
    margin-left: -0.5cm;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 0;
}
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal .tabular-data {
    max-width: 100%;
    overflow-x: auto;
}
#solutionModal.pizarra-mode .pizarra-right .solution-content-modal {
    background: rgba(240,180,41,0.06);
    border-left: 4px solid #f0b429;
    padding: 2px 16px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    line-height: 1.9;
}

#solutionModal .circ-sequence[data-circ-sequence="548"] {
    margin-top: -104px !important;
}

#solutionModal .circ-sequence .circ-sequence-stage img {
    width: 100% !important;
    height: auto !important;
    max-height: var(--circ-seq-max-height, min(61vh, 560px)) !important;
    object-fit: contain;
}

#solutionModal .circ-sequence .circ-sequence-controls {
    margin-top: 4px !important;
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding-top: 8px;
    padding-bottom: 6px;
    background: linear-gradient(180deg, rgba(255, 251, 232, 0) 0%, rgba(255, 251, 232, 0.92) 28%, rgba(255, 251, 232, 1) 100%);
}
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal mjx-container[display="true"],
#solutionModal.pizarra-mode .pizarra-right .solution-content-modal mjx-container[display="true"] {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal mjx-container[display="true"] > *,
#solutionModal.pizarra-mode .pizarra-right .solution-content-modal mjx-container[display="true"] > * {
    display: block !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal mjx-container:not([display="true"]),
#solutionModal.pizarra-mode .pizarra-right .solution-content-modal mjx-container:not([display="true"]) {
    display: inline !important;
    vertical-align: middle !important;
}
/* Enunciado: la matemática va en \displaystyle (lo inyecta _enunciadoEnDisplayStyle)
   y algo mayor que la consigna, para que la integral se lea de un vistazo. Solo el
   enunciado — la solución conserva su tamaño. */
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal mjx-container {
    font-size: 118%;
}
#solutionModal.pizarra-mode .pizarra-left .problem-statement-modal mjx-container svg,
#solutionModal.pizarra-mode .pizarra-right .solution-content-modal mjx-container svg {
    max-width: 100% !important;
    height: auto !important;
}
#solutionModal.pizarra-mode .pizarra-left::-webkit-scrollbar,
#solutionModal.pizarra-mode .pizarra-right::-webkit-scrollbar { width: 6px; }
#solutionModal.pizarra-mode .pizarra-left::-webkit-scrollbar-thumb { background: #c5b8e8; border-radius: 3px; }
#solutionModal.pizarra-mode .pizarra-right::-webkit-scrollbar-thumb { background: #e5d48a; border-radius: 3px; }

/* ── Chat contextual dentro del modal ──────────────────────── */
.modal-tutor-invitation {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.95), rgba(255, 255, 255, 0.92));
}
.modal-tutor-invitation-prominent {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 0 0 14px;
    box-shadow: 0 8px 24px rgba(49, 46, 129, 0.16);
}
.modal-tutor-invitation-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #312e81;
    font-size: 13px;
    font-weight: 800;
}
.modal-tutor-mode-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.modal-tutor-mode-btn {
    flex: 1 1 130px;
    border: 1px solid #c7d2fe;
    border-radius: 9px;
    padding: 9px 10px;
    background: #fff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.modal-tutor-mode-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.modal-tutor-mode-help { margin-top: 7px; color: #64748b; font-size: 11px; }
.modal-math-toolbar {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.modal-math-toolbar[hidden] { display: none; }
.modal-math-toolbar button {
    min-width: 34px;
    border: 1px solid #c7d2fe;
    border-radius: 7px;
    padding: 5px 8px;
    background: #fff;
    color: #312e81;
    font-family: Georgia, serif;
    cursor: pointer;
}
/* Pizarra del tutor como overlay (ventana emergente) por encima del modal. */
.tutor-wb-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
}
.tutor-wb-overlay[hidden] { display: none; }
.tutor-wb-window {
    display: flex;
    flex-direction: column;
    width: min(960px, 96vw);
    height: min(620px, 90vh);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.tutor-wb-window.maximized {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}
.tutor-wb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    /* Fondo oscuro: la barra reusa los .annotation-btn de la ventana completa,
       que son blancos/translúcidos y solo se ven sobre un header oscuro. */
    background: linear-gradient(135deg, #4338ca, #312e81);
    border-bottom: 1px solid #312e81;
}
.tutor-wb-title { color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.tutor-wb-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Tamaños del punto de grosor (la barra usa data-wb-size, no data-size). */
.annotation-size[data-wb-size="2"] .size-dot { width: 3px; height: 3px; }
.annotation-size[data-wb-size="4"] .size-dot { width: 6px; height: 6px; }
.annotation-size[data-wb-size="7"] .size-dot { width: 9px; height: 9px; }
.tutor-wb-canvas-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #f1f5f9;
}
.tutor-wb-canvas {
    /* Sin width/height fijos: conserva su proporción 1600:600 (intrínseca por los
       atributos width/height) escalada con max-*, así el rect coincide con el
       buffer y el trazo cae justo donde se dibuja. */
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    border: 2px solid #818cf8;
    border-radius: 9px;
    cursor: crosshair;
    touch-action: none;
}
.tutor-wb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #e2e8f0;
}
.tutor-wb-status { min-height: 18px; color: #475569; font-size: 12px; }
.tutor-wb-send {
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    background: #4f46e5;
    color: #fff;
    cursor: pointer;
}
.tutor-wb-send:disabled { opacity: 0.6; cursor: default; }
body.tutor-wb-open { overflow: hidden; }
@media (max-width: 768px) {
    .tutor-wb-overlay { padding: 0; }
    .tutor-wb-window { width: 100vw; height: 100vh; border-radius: 0; }
    .tutor-wb-send { flex: 1; padding: 12px 10px; }
    .tutor-wb-footer { gap: 8px; }
}
.modal-tutor-card {
    border-left: 4px solid #4f46e5;
    border-radius: 10px;
    padding: 13px 15px;
    background: #f8faff;
}
.modal-tutor-progress {
    margin-bottom: 6px;
    color: #6366f1;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.modal-tutor-question { color: #1e1b4b; font-size: 15px; font-weight: 700; line-height: 1.55; }
.modal-tutor-feedback { display: flex; gap: 8px; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.modal-tutor-feedback.correct { color: #166534; }
.modal-tutor-feedback.partial { color: #a16207; }
.modal-tutor-feedback.incorrect { color: #dc2626; }
.modal-tutor-hint, .modal-tutor-expected { margin-top: 10px; color: #475569; font-size: 12px; }
.modal-tutor-hint summary, .modal-tutor-expected summary { cursor: pointer; font-weight: 700; }
.modal-tutor-hint div, .modal-tutor-expected div { margin-top: 6px; line-height: 1.5; }
.modal-tutor-complete { color: #166534; font-weight: 700; line-height: 1.6; }
.modal-tutor-audio-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(79, 70, 229, 0.14);
}
.modal-tutor-audio-status {
    flex: 1 1 160px;
    margin: 0;
    font-size: 11px;
}
.modal-tutor-audio-player { min-width: 0; }
.modal-tutor-listen-btn { padding: 8px 13px; font-size: 12px; }
.modal-chat-area {
    margin-top: 18px;
    border-top: 1.5px solid rgba(79,70,229,0.18);
    padding-top: 12px;
}
.modal-chat-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.01em;
}
.modal-chat-input-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}
.modal-chat-mic-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #eef2ff;
    color: #4f46e5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    transition: background 0.18s, color 0.18s, transform 0.1s;
}
.modal-chat-mic-btn:hover:not(:disabled) {
    background: #e0e7ff;
    transform: scale(1.05);
}
.modal-chat-mic-btn.active {
    background: #ef4444;
    color: white;
    animation: pulse 1.3s infinite;
}
.modal-chat-mic-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.modal-chat-textarea {
    flex: 1;
    border: 1.5px solid rgba(79,70,229,0.28);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    resize: none;
    outline: none;
    font-family: inherit;
    background: rgba(255,255,255,0.85);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 36px;
    max-height: 110px;
    overflow-y: auto;
    line-height: 1.5;
}
.modal-chat-textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
    background: #fff;
}
.modal-chat-textarea:disabled { opacity: 0.6; }
.modal-chat-send-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #4f46e5;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    transition: background 0.18s, transform 0.1s;
}
.modal-chat-send-btn:hover:not(:disabled) { background: #4338ca; transform: scale(1.05); }
.modal-chat-send-btn:disabled { background: #a5b4fc; cursor: not-allowed; }

.modal-chat-responses-divider {
    border: none;
    border-top: 2px dashed rgba(240,180,41,0.45);
    margin: 22px 0 16px;
}
/* Conversación ubicada bajo el chat (pantalla completa de gráficas) */
.modal-chat-responses-left {
    margin-top: 10px;
}
.modal-chat-exchange {
    margin-bottom: 18px;
}
.modal-chat-q {
    background: rgba(79,70,229,0.07);
    border-left: 3px solid #4f46e5;
    border-radius: 0 7px 7px 0;
    padding: 7px 12px;
    font-size: 13px;
    color: #3730a3;
    margin-bottom: 9px;
    font-style: italic;
}
.modal-chat-a {
    background: rgba(240,180,41,0.07);
    border-left: 3px solid #f0b429;
    border-radius: 0 7px 7px 0;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.75;
}
.modal-chat-a.modal-chat-audio-mode {
    background: rgba(79,70,229,0.05);
    border-left-color: #6366f1;
}
.modal-chat-voice-response {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modal-chat-voice-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4338ca;
}
.modal-chat-voice-status {
    margin-top: 0;
    font-size: 13px;
}
.modal-chat-voice-player .voice-explanation-audio {
    width: 100%;
}
.modal-chat-voice-listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.modal-chat-loading {
    color: #9ca3af;
    font-size: 13px;
}

.modal-voice-fullscreen-overlay {
    position: absolute;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-voice-fullscreen-card {
    width: min(920px, 100%);
    max-height: min(88vh, 100%);
    overflow: auto;
    position: relative;
    border-radius: 28px;
    padding: 28px 28px 24px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 28%),
        linear-gradient(160deg, #fffdf7 0%, #f8fbff 100%);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.modal-voice-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    cursor: pointer;
    font-size: 16px;
}

.modal-voice-fullscreen-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4338ca;
}

.modal-voice-fullscreen-question {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(79, 70, 229, 0.08);
    color: #312e81;
    font-size: 15px;
    line-height: 1.6;
}

.modal-voice-fullscreen-body .modal-chat-voice-response {
    gap: 14px;
}

.modal-voice-fullscreen-body .modal-chat-a-text {
    font-size: 16px;
    line-height: 1.8;
}

.modal-voice-fullscreen-body .modal-chat-voice-player .voice-explanation-audio {
    min-height: 54px;
}

/* En móviles pequeños: paneles apilados en pizarra */
@media (max-width: 600px) {
    #solutionModal.pizarra-mode .solution-modal-body {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    #solutionModal.pizarra-mode .pizarra-left {
        border-right: none;
        border-bottom: 2px solid #e0e0f0;
    }
    .modal-voice-fullscreen-overlay {
        padding: 10px;
    }
    .modal-voice-fullscreen-card {
        max-height: 94vh;
        border-radius: 20px;
        padding: 20px 16px 16px;
    }
    .modal-voice-fullscreen-question {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* MODAL MÓVIL — Vista pizarra completa (sin toggle button)    */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Ocultar botón toggle Pizarra/Clásica y toolbar de dibujo en móvil */
    .toggle-view-btn,
    .annotation-toolbar { display: none !important; }

    .annotation-btn,
    .annotation-color {
        width: 20px;
        height: 20px;
    }

    /* Modal pantalla completa */
    #solutionModal.mobile-mode {
        overflow: hidden;
    }
    #solutionModal.mobile-mode .solution-modal-inner {
        display: flex;
        flex-direction: column;
        max-width: 100vw;
        width: 100vw;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
    }

    /* Header: mismo gradiente que pizarra desktop */
    #solutionModal.mobile-mode .solution-modal-header {
        flex-shrink: 0;
        padding: 14px 18px;
        background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    }
    #solutionModal.mobile-mode .solution-modal-header h3 {
        font-size: 16px;
    }

    /* Body: scroll único vertical, sin padding propio */
    #solutionModal.mobile-mode .solution-modal-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        max-height: none;
        -webkit-overflow-scrolling: touch;
        background: #e8e8f5;
    }
    #solutionModal.mobile-mode .solution-modal-body::-webkit-scrollbar { width: 4px; }
    #solutionModal.mobile-mode .solution-modal-body::-webkit-scrollbar-thumb {
        background: #c5b8e8; border-radius: 2px;
    }

    /* ── Sección Enunciado — más compacta en móvil para dar aire a la solución ── */
    .mob-enunciado {
        background: linear-gradient(135deg, #f4f6ff 0%, #eef0fb 100%);
        padding: 12px 14px 10px;
        border-bottom: 2px solid #e0e0f0;
    }

    /* ── Divisor entre secciones ───────────────────────────── */
    .mob-divider {
        height: 4px;
        background: linear-gradient(90deg, #e0e0f0, #f0edd5);
    }

    /* ── Sección Solución — mismo fondo que pizarra desktop ─── */
    .mob-solucion {
        background: linear-gradient(135deg, #fffef5 0%, #fffbe8 100%);
        padding: 12px 16px 24px;
        min-height: 40dvh;
    }

    #solutionModal .circ-sequence .circ-sequence-stage img {
        max-height: min(48dvh, 370px) !important;
    }

    /* En móvil el tirón -104px (ajuste de desktop) ocultaba la parte superior
       del diagrama del problema 6; aquí lo neutralizamos. */
    #solutionModal .circ-sequence[data-circ-sequence="548"] {
        margin-top: 0 !important;
    }

    /* ── Labels de sección (idénticos a desktop pizarra) ──── */
    .mob-section-label {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .mob-label-enunciado       { color: #4f46e5; }
    .mob-label-enunciado i     { color: #4f46e5; }
    .mob-label-solucion        { color: #b07800; }
    .mob-label-solucion i      { color: #f0b429; }

    /* ── Cajas de texto — idénticas a pizarra desktop ──────── */
    .mob-enunciado-text {
        background: rgba(79,70,229,0.05);
        border-left: 4px solid #4f46e5;
        border-radius: 0 8px 8px 0;
        padding: 10px 14px;
        font-size: 13px;
        line-height: 1.55;
        color: #1a1a2e;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mob-solucion-text {
        background: rgba(240,180,41,0.06);
        border-left: 4px solid #f0b429;
        border-radius: 0 8px 8px 0;
        padding: 14px 18px;
        font-size: 15px;
        line-height: 1.9;
        color: #1a1a1a;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Spinner de carga */
    .mob-loading {
        color: #4f46e5;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* La matemática del enunciado, en \displaystyle y por encima del texto de
       la consigna (13px), para que se lea en pantalla pequeña. */
    .mob-enunciado-text mjx-container {
        font-size: 118%;
    }

    /* Display math en enunciado/solución móvil: bloque con scroll */
    .mob-enunciado-text mjx-container[display="true"],
    .mob-solucion-text mjx-container[display="true"] {
        max-width: 100%;
        overflow-x: auto;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .mob-enunciado-text mjx-container[display="true"] > *,
    .mob-solucion-text mjx-container[display="true"] > * {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        flex: 0 0 auto !important;
    }
    /* Inline math en enunciado/solución móvil: fluir con texto */
    .mob-enunciado-text mjx-container:not([display="true"]),
    .mob-solucion-text mjx-container:not([display="true"]) {
        display: inline !important;
        vertical-align: middle !important;
    }
}

/* ═══════════════════════════════════════════════════════════ */
/* RESPONSIVE - TABLETAS / MÓVILES (max-width: 768px)          */
/* ═══════════════════════════════════════════════════════════ */


/* Para teléfonos muy pequeños */
@media (max-width: 400px) {
    #mathKeyboardPanel .kb-page.active {
        grid-template-columns: repeat(9, minmax(24px, 1fr));
        gap: 2px;
    }
    .kb-key {
        height: 32px !important;
        font-size: 10px !important;
        min-width: 24px;
    }

}

/* Para teléfonos ultra pequeños */
@media (max-width: 360px) {
    .input-area {
        /* El colchón de la barra de gestos lo pone .chat-container */
        padding: 6px;
        flex-wrap: nowrap; /* Evitar que los botones salten a la línea siguiente */
    }

    .chat-header h2 {
        font-size: 16px;
    }

    .message-content {
        font-size: 14px;
        padding: 8px 12px;
        max-width: 90%;
    }

    input {
        padding: 8px;
    }

    #sendButton, #cancelButton {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 12px;
    }

    #cancelButton.active, #sendButton {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    #uploadImageBtn, #cameraImageBtn, #mathKeyboardBtn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        margin-right: 4px;
        font-size: 12px;
    }

    .chat-messages {
        padding-bottom: 90px !important;
    }

    .latex-preview-container {
        padding: 8px;
    }

    .latex-preview {
        min-height: 30px;
        padding: 6px;
    }

    .latex-preview-title {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .latex-help-tip {
        font-size: 10px;
        margin-top: 5px;
    }

}

/* ══════════════════════════════════════════════
   CROP MODAL
   ══════════════════════════════════════════════ */
.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 5, 30, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 12px;
    animation: fadeInOverlay 0.18s ease;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.crop-header {
    color: #e0d8ff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crop-canvas {
    border-radius: 10px;
    cursor: crosshair;
    touch-action: none;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.6), 0 8px 32px rgba(0,0,0,0.6);
    max-width: 94vw;
    max-height: 68vh;
    display: block;
}

.crop-hint {
    color: #a89fd8;
    font-size: 12px;
    margin: 0;
    text-align: center;
}

.crop-btn-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.crop-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
}

.crop-btn:active { transform: scale(0.96); }

.crop-btn-confirm {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
}

.crop-btn-confirm:hover { opacity: 0.9; }

.crop-btn-full {
    background: rgba(255,255,255,0.12);
    color: #e0d8ff;
    border: 1px solid rgba(255,255,255,0.2);
}

.crop-btn-full:hover { background: rgba(255,255,255,0.2); }

.crop-btn-cancel {
    background: rgba(229, 57, 53, 0.18);
    color: #ff8a80;
    border: 1px solid rgba(229, 57, 53, 0.35);
}

.crop-btn-cancel:hover { background: rgba(229, 57, 53, 0.3); }

@media (max-width: 768px) {
    .crop-btn {
        padding: 9px 16px;
        font-size: 13px;
    }
    .crop-header {
        font-size: 13px;
    }
}


.texto-rojo { color: #e53935; font-weight: bold; }

/* Mensaje de texto extraído por Vision */
.vision-extract-msg .message-content {
    background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    border: 1.5px solid rgba(121, 134, 203, 0.5);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
}

.vision-extract-header {
    background: rgba(0,0,0,.25);
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #c5cae9;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .3px;
}

.vision-extract-icon { font-size: 1rem; }

.vision-extract-tipo {
    margin-left: 4px;
    font-weight: 400;
    opacity: .75;
}

.vision-extract-body {
    padding: 12px 14px;
    font-size: 0.9rem;
    color: #e8eaf6;
    white-space: pre-wrap;       /* respeta saltos de línea del texto extraído */
    word-break: break-word;
    line-height: 1.55;
    border-bottom: 1px solid rgba(121,134,203,.25);
}

.vision-extract-footer {
    padding: 7px 14px;
    font-size: 0.78rem;
    color: #9fa8da;
    font-style: italic;
}

/* Overlay de drag & drop */
#dropImageOverlay .drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.15);
    border: 2.5px dashed rgba(255,255,255,.8);
    border-radius: 18px;
    padding: 40px 60px;
    text-align: center;
}

@media (max-width: 768px) {
    .properties-tour-card {
        padding: 20px 18px 16px 18px;
    }

    .properties-tour-title {
        font-size: 21px;
    }

    .properties-tour-actions {
        justify-content: stretch;
    }

    .properties-tour-btn {
        flex: 1;
    }
}

/* Acceso a pantalla completa desde soluciones del chat en móvil. Debe quedar al
   final para prevalecer sobre las reglas responsive históricas del archivo. */
@media (max-width: 768px) {
    .bot .message-content.has-fullscreen-action {
        padding-bottom: 6px !important;
    }

    .bot .message-content.has-fullscreen-action.has-voice-explanation {
        padding-bottom: 6px !important;
    }

    .bot .message-content > .message-actions {
        display: flex !important;
    }

    .bot .message-content > .message-actions .fullscreen-hint,
    .bot .message-content > .message-actions .fullscreen-btn {
        display: none !important;
    }

    /* Las respuestas con gráfica conservan el botón dentro del mensaje
       (abajo a la derecha), igual que en laptop, en vez del CTA separado. */
    .bot .message-content.has-graph-fullscreen-action {
        padding-bottom: 48px !important;
    }
    .bot .message-content.has-graph-fullscreen-action > .graph-fullscreen-mobile-btn {
        display: inline-flex !important;
    }

    .bot > .fullscreen-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: calc(100% - 50px);
        max-width: none;
        margin: 3px 0 0 50px;
        padding: 11px 12px;
        border: 1.5px solid #818cf8;
        border-radius: 10px;
        background: #eef2ff;
        color: #3730a3;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    .bot > .fullscreen-mobile-cta i {
        flex: 0 0 auto;
        font-size: 15px;
    }
}

/* ═══ PWA INSTALADA (standalone) ═══
   Android dibuja la app edge-to-edge: el fondo del viewport queda debajo de
   la barra de gestos. env(safe-area-inset-bottom) debería compensarlo, pero
   varios Android con navegación por gestos lo reportan como 0 y la fila de
   envío queda tapada. max() garantiza un piso de holgura sin afectar al
   navegador normal (esta consulta solo aplica a la app instalada). */
@media all and (display-mode: standalone) and (max-width: 768px) {
    .chat-container {
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    }

    #mathKeyboardPanel {
        padding-bottom: max(24px, calc(10px + env(safe-area-inset-bottom, 0px))) !important;
    }
}

/* pwa.js marca esta clase cuando la app instalada NO informa
   env(safe-area-inset-bottom) (lo devuelve 0) pese a dibujarse de borde a
   borde: sin colchón propio, la barra de gestos de Android tapa media fila
   de envío. 48px es el alto estándar de esa barra. */
@media (max-width: 768px) {
    html.sin-safe-area .chat-container {
        padding-bottom: 48px;
    }

    html.sin-safe-area #mathKeyboardPanel {
        padding-bottom: 58px !important;
    }
}