/* ==== Estilos para fórmulas matemáticas con KaTeX ==== */
.katex-display {
    margin: 1.2em 0;
    padding: 1em;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid #74C2E1;
    border-radius: 8px;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.katex {
    font-size: 1.15em;
    color: #1a2536;
}

.ai-message .katex-display {
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    border-left: 4px solid #FFD700;
}

/* Fórmulas inline */
.katex-html {
    display: inline-block;
    vertical-align: middle;
}

/* ==== Truco Argentino Pro List & Cmd ==== */
.truco-list {
    margin: 12px 0 0 0;
    padding-left: 22px;
    font-size: 1.08rem;
    font-weight: 500;
    color: #1a2536;
    line-height: 1.7;
    list-style: disc inside;
}
.truco-list li {
    margin-bottom: 7px;
    padding-left: 0;
}
.truco-cmd {
    background: #ffe4b5;
    color: #bfa100;
    font-weight: 700;
    border-radius: 7px;
    padding: 2px 8px;
    margin: 0 2px;
    font-size: 1em;
    box-shadow: 0 1px 4px #ffe4b5cc;
    display: inline-block;
}
/* ==== Truco Argentino Pro Typography ==== */
.truco-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
}
.truco-icon {
    flex-shrink: 0;
    margin-top: 2px;
    margin-right: 2px;
    filter: drop-shadow(0 2px 6px #ffe4b5cc);
    display: flex;
    align-items: center;
    justify-content: center;
}
.truco-text {
    background: rgba(255,255,255,0.82);
    border-radius: 12px;
    padding: 10px 18px 10px 18px;
    box-shadow: 0 1.5px 8px 0 rgba(116, 194, 225, 0.08);
    display: flex;
    align-items: center;
}
.truco-text p {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-size: 1.22rem;
    font-weight: 700;
    color: #1a2536;
    margin: 0;
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 #fff8dc;
}
/* ==== Truco Argentino Pro Message Styles ==== */
.truco-block {
    background: linear-gradient(120deg, #f8fbff 60%, #ffe4b5 100%);
    border: 2px solid #FFD700;
    border-radius: 18px;
    box-shadow: 0 4px 24px 0 rgba(255, 215, 0, 0.10), 0 1.5px 8px 0 rgba(116, 194, 225, 0.10);
    margin: 18px 0;
    padding: 0;
    max-width: 520px;
    width: 100%;
    animation: trucoFadeIn 0.7s cubic-bezier(.4,1.4,.6,1) 1;
}
.truco-inner {
    padding: 28px 28px 18px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.truco-inner p {
    font-size: 1.15rem;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 18px;
    line-height: 1.6;
    letter-spacing: 0.1px;
}
.truco-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.truco-nav-btn {
    background: linear-gradient(90deg, #FFD700 0%, #ffe4b5 100%);
    color: #2c3e50;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 18px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.10);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.truco-nav-btn:hover {
    background: linear-gradient(90deg, #ffe4b5 0%, #FFD700 100%);
    color: #bfa100;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.18);
}
@keyframes trucoFadeIn {
    from { opacity: 0; transform: translateY(30px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* ==========================================================
   1️⃣ VARIABLES DE COLOR / TIPOGRAFÍA
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
    --primary:#FFE4B5;        /* Sol argentino */
    --primary-dark:#FFD700;   /* Oro */
    --primary-light:#FFF8DC;
    --secondary:#6B9BD1;
    --bg-main:#ffffff;
    --bg-sidebar:#ffffff;
    --bg-input:#74C2E1;
    --border-color:#d4e8f7;
    --text-primary:#2c3e50;
    --text-secondary:#5d6d7e;
    --message-user:#74C2E1;
    --message-ai:#f0f8ff;
    --transition:.2s ease;
}

/* ==========================================================
   2️⃣ RESET GLOBAL
   ========================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ==========================================================
   3️⃣ BODY & CONTAINER
   ========================================================== */
body{
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,
                'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
    background:var(--bg-main);
    height:100vh;
    overflow:hidden;
    color:var(--text-primary);
}
.container{
    display:flex;
    height:100vh;
    background:var(--bg-main);
}

/* ==========================================================
   4️⃣ SIDEBAR – ANCHO FIJO + BOTONES SIN ENCOGER
   ========================================================== */
.sidebar{
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: 280px;
    flex: 0 0 280px;
    min-width: 280px;
    max-width: 280px;
    background: white;
    border-right: none;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: none;
    transition: left 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
}

.sidebar.open {
    left: 0;
    box-shadow: 2px 0 12px rgba(116, 194, 225, 0.15);
    border-right: 1px solid rgba(212,232,247,.5);
}

.sidebar.open {
    left: 0;
    box-shadow: 2px 0 12px rgba(116, 194, 225, 0.15);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
}

/* Botones (normales y enlaces) */
/* ==========================================================
   BOTONES DE LA SIDEBAR – ANCHO UNIFORME (TODOS IGUALES)
   ========================================================== */
.sidebar .nav-btn,
.sidebar .nav-link{
    flex-shrink:0;                     /* IMPIDE QUE SE ENCOJAN */
    width:100%;                        /* <-- ANCHO TOTAL DE LA SIDEBAR */
    min-width:auto;                    /* (no limitamos con min‑width) */
    max-width:100%;                    /* asegúranos de no exceder 100% */
    white-space:nowrap;                /* evita que el texto haga wrap */
    height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-start;       /* alineación izquierda (como antes) */
    gap:10px;
    padding:13px 16px;                 /* mismo padding que los botones normales */
    font-family:'Poppins',sans-serif;
    font-size:14px;
    border-radius:12px;
    cursor:pointer;
    transition:all .3s ease;
    letter-spacing:.3px;
    backdrop-filter:blur(10px);
}

/* Ajuste específico para el botón que es enlace (Educación) */
.sidebar .nav-link{
    /* mantiene su diseño original, solo heredamos el ancho 100% */
    padding:0 24px;               /* el mismo padding que ya tenías */
}


/* Alinear iconos de botones normales (excepto circulares) */
.sidebar .nav-btn:not(.circle-btn) svg,
.sidebar .nav-link svg {
    flex-shrink: 0;
    width: 20px;
}

/* Botón normal (no es enlace) */
.nav-btn:not(.nav-link){
    padding:13px 16px;
    border:1.5px solid rgba(212,232,247,.4);
    background:rgba(255,255,255,.6);
    color:var(--text-primary);
    text-align:left;
    font-weight:600;
}

/* Botón que actúa como enlace */
.nav-link{
    padding:0 24px;
    border:1.5px solid rgba(116,194,225,.6);
    background:linear-gradient(135deg,
                rgba(116,194,225,.4) 0%,
                rgba(255,228,181,.3) 100%);
    color:#FFD700;
    font-size:16px;
    text-align:left;
    font-weight:700;
    justify-content:flex-start;
}

/* Hover / active ------------------------------------------------- */
.nav-btn:hover{
    background:rgba(255,228,181,.3);
    border-color:var(--primary);
    color:#FFD700;
    transform:translateX(4px);
    box-shadow:0 4px 12px rgba(255,228,181,.2);
}
.nav-btn:active{
    background:linear-gradient(135deg,#FFE4B5 0%,#FFD700 100%);
    border-color:#FFD700;
    color:#1a1a1a;
}
.nav-link:hover{
    background:linear-gradient(135deg,
                rgba(116,194,225,.6) 0%,
                rgba(255,228,181,.5) 100%);
    border-color:#FFD700;
    color:#FFE4B5;
    box-shadow:0 6px 16px rgba(255,228,181,.3);
    transform:translateX(6px);
}

/* Sección inferior de la sidebar (si la usás) */
.sidebar-bottom{
    margin-top:32px;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    width:100%;
}

/* -------------------------------------------------
   HEADER – DEGRADADO CELSTE + CENTRADO
   ------------------------------------------------- */
.header{
    /* Mantén el degradado y el centrado que ya tenías */
    background:linear-gradient(135deg,#74C2E1 0%,#5BA3C7 100%);
    display:flex;
    flex-direction:column;
    align-items:center;            /* centra horizontalmente */
    justify-content:center;        /* centra verticalmente */
    text-align:center;
    padding:20px 24px;
    min-height:80px;              /* un poco más de altura para que el texto respire */
    border-bottom:none;
    position:relative;
    z-index:2;
}

/* ----------  TÍTULO PRINCIPAL (StefAI) ---------- */
.header h1{
    margin:0;
    font-size:33px;               /* <-- AUMENTA este valor a tu gusto */
    font-weight:800;              /* un poco más grueso */
    color:#fff;
    line-height:1.2;
    letter-spacing:-0.5px;         /* ajuste fino, opcional */
}

/* ----------  SUBTÍTULO (opcional) ---------- */
.header p{
    margin:6px 0 0 0;            /* separa un poco más del título */
    font-size:16px;              /* puedes dejarlo o subirlo ligeramente */
    color:#e0f0ff;
}


/* ==========================================================
   6️⃣ CHAT WRAPPER (todo el área de conversación)
   ========================================================== */
.chat-wrapper{
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
    display:flex;
    flex-direction:column;
    background:var(--bg-main);
    min-height:0;
    height:100vh;
}

/* ==========================================================
   7️⃣ CHAT CONTAINER (donde aparecen los mensajes)
   ========================================================== */
.chat-container{
    flex:1 1 auto;
    overflow-y:auto;
    padding:28px 32px 120px 32px;   /* espacio inferior para el input */
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    min-height:0;
    overflow-x:hidden;            /* evita scroll horizontal */
    word-break:break-word;        /* rompe palabras muy largas */
}
.chat-box{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ==========================================================
   8️⃣ MENSAJES
   ========================================================== */
.message{
    display:flex;
    animation:slideIn .4s cubic-bezier(.34,1.56,.64,1);
}
.message p{
    padding:13px 16px;
    border-radius:16px;
    font-size:15px;
    line-height:1.5;
    max-width:75%;
    font-weight:400;
    letter-spacing:.2px;
}

/* Usuario (align‑right) */
.user-message{
    justify-content:flex-end;
}
.user-message p{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
    color:#1a1a1a;
    border-radius:18px 4px 18px 18px;
    box-shadow:0 4px 12px rgba(255,228,181,.25);
    font-weight:500;
}

/* IA (align‑left) */
.ai-message{
    justify-content:flex-start;
}
.ai-message p{
    background:#f0f8ff;
    color:var(--text-primary);
    border:1.5px solid rgba(212,232,247,.4);
    border-radius:4px 18px 18px 18px;
    box-shadow:0 2px 8px rgba(116,194,225,.15);
}

/* Sistema (centrado) */
.system-message{
    justify-content:center;
    margin:12px 0;
}
.system-message p{
    color:#8fa3b3;
    font-size:13px;
    font-style:italic;
    background:transparent;
}

/* Loader dentro del mensaje */
.msg-loader{
    display:inline-flex;
    gap:4px;
    align-items:center;
}
.msg-loader span{
    width:6px;
    height:6px;
    background:var(--text-primary);
    border-radius:50%;
}
.msg-loader span:nth-child(3){animation-delay:.4s;}

/* 3 puntitos animados para typing - efecto respiración */
.typing-dots {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 20px 30px;
    min-height: 50px;
}
.typing-dots span {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    animation: breathe 1.8s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.3s; }
.typing-dots span:nth-child(3) { animation-delay: 0.6s; }

/* Botón de copiar en mensajes de IA */
.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-message {
    position: relative;
}

.ai-message:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    background: #f0f0f0;
}


/* Modal de Historial */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

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

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.modal-close:hover {
    color: #333;
}

.history-list {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.history-item {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.history-info {
    flex: 1;
}

.history-date {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.history-preview {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

.history-count {
    font-size: 12px;
    color: #999;
}

.history-actions {
    display: flex;
    gap: 8px;
}

.history-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.history-btn:hover {
    background: #f0f0f0;
}

.history-btn.delete {
    color: #e74c3c;
    border-color: #e74c3c;
}

.history-btn.delete:hover {
    background: #e74c3c;
    color: white;
}
.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn svg {
    color: #666;
}

/* Asegurar que el párrafo con typing-dots sea visible */
.ai-message p:has(.typing-dots) {
    min-width: 120px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes breathe {
    0%, 100% { 
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% { 
        transform: scale(1.3);
        opacity: 1;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
    }
}

/* Animaciones globales */
@keyframes pulse{
    0%,60%,100%{opacity:.6;transform:scale(1);}
    30%{opacity:1;transform:scale(1.2);}
}
@keyframes slideIn{
    from{opacity:0;transform:translateY(15px) scale(0.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes slideIn{
    from{opacity:0;transform:translateY(15px) scale(0.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes slideIn{
    from{opacity:0;transform:translateY(15px) scale(0.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes slideIn{
    from{opacity:0;transform:translateY(15px) scale(0.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes typing{
    0%{opacity:0;}
    100%{opacity:1;}
}
.message p.typing{animation:typing .6s ease-out;}

/* ==========================================================
   9️⃣ INPUT FOOTER (caja de texto + botones)
   ========================================================== */
.input-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0; /* quitar padding lateral para centrar */
    background:linear-gradient(135deg,#74C2E1 0%,#5BA3C7 100%);
    position:relative;
    z-index:2;
    border-top:1.5px solid rgba(212,232,247,.3);
    box-shadow:0 -4px 12px rgba(0,0,0,.05);
}
.input-wrapper{
    display:flex;
    gap:14px;
    align-items:center;
    width:100%;
    max-width:750px; /* ancho máximo aumentado */
    background:rgba(255,255,255,.25);
    border-radius:22px;
    box-shadow:0 8px 32px 0 rgba(31,38,135,.18);
    backdrop-filter:blur(12px) saturate(180%);
    -webkit-backdrop-filter:blur(12px) saturate(180%);
    border:1.5px solid rgba(116,194,225,.25);
    padding:10px 24px;
    margin:0 auto; /* centrar horizontalmente */
    transition:box-shadow .25s,background .25s;
}
.message-input{
    flex:1;
    padding:8px 14px;
    border-radius:10px;
    font-size:16px;
    outline:none;
    background:rgba(255,255,255,.35);
    color:#1a1a1a;
    border:none;
    box-shadow:0 2px 8px rgba(116,194,225,.10);
    font-family:'Poppins',sans-serif;
    transition:box-shadow .2s,background .2s;
}
.message-input:focus{
    background:rgba(255,255,255,.55);
    box-shadow:0 0 0 4px rgba(116,194,225,.18);
}
.message-input::placeholder{
    color:#74C2E1;
    opacity:.85;
    font-weight:500;
}

/* ==========================================================
  🔟 BOTONES (iconos, enviar, noticias)
  ========================================================== */
.btn-icon,
.btn-send,
.btn-news{
    background:rgba(255,255,255,.35);
    border:1.5px solid #74C2E1;
    cursor:pointer;
    padding:10px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 12px rgba(116,194,225,.18);
    font-size:0;
    min-width:48px;
    height:48px;
    color:#74C2E1;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:background .18s,box-shadow .18s,
                border-color .18s,transform .12s;
}

/* Iconos genéricos */
.btn-icon:hover{
    background:rgba(116,194,225,.18);
    border-color:#5BA3C7;
    box-shadow:0 4px 16px rgba(116,194,225,.28);
    transform:translateY(-2px) scale(1.08);
}
.btn-icon.active{
    background:linear-gradient(135deg,#74C2E1 0%,#5BA3C7 100%);
    border-color:#5BA3C7;
    color:#fff;
    box-shadow:0 0 16px rgba(116,194,225,.25);
}

/* Botón enviar */
.btn-send{
    background:linear-gradient(135deg,#74C2E1 0%,#5BA3C7 100%);
    border-color:#5BA3C7;
    color:#fff;
    font-weight:700;
}
.btn-send:hover{
    background:linear-gradient(135deg,#9AD4E8 0%,#74C2E1 100%);
    box-shadow:0 8px 24px rgba(116,194,225,.38);
    border-color:#74C2E1;
    transform:translateY(-2px) scale(1.08);
}
.btn-send:active{transform:scale(.93);}

/* Botón “Noticias” (opcional) */
.btn-news{
    background:#f5f5f5;
    color:#388e3c;
    border:1.5px solid #b2dfdb;
    border-radius:8px;
    font-size:18px;
    padding:4px 10px;
    margin-right:8px;
    cursor:pointer;
    transition:background .2s,color .2s;
}
.btn-news.active{
    background:#43a047;
    color:#fff;
    border-color:#388e3c;
    font-weight:bold;
}

/* ==========================================================
  1️⃣1️⃣ LOADING INDICATOR
  ========================================================== */
.loading{
    position:fixed;
    bottom:100px;
    right:30px;
    background:var(--bg-input);
    padding:12px 16px;
    border-radius:50%;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    border:1px solid var(--border-color);
}
.loading.hidden{display:none;}
.spinner{
    width:36px;
    height:36px;
    border:3px solid var(--border-color);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ==========================================================
  1️⃣2️⃣ VOICE INDICATOR
  ========================================================== */
/* Eliminado el bloque de .voice-indicator para quitar el indicador flotante de voz */


/* ==========================================================
  1️⃣3️⃣ SCROLLBAR PERSONALIZADA
  ========================================================== */
.chat-container::-webkit-scrollbar,
.sidebar::-webkit-scrollbar{
    width:22px;
    height:22px;
}
.chat-container::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track{
    background:transparent;
}
.chat-container::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb{
    background:var(--border-color);
    border-radius:3px;
}
.chat-container::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover{
    background:#555;
}

/* ==========================================================
  1️⃣4️⃣ RESPONSIVE (mobile)
  ========================================================== */
@media (max-width:768px){
    .sidebar{
        position:fixed;
        left:-260px;
        height:100%;
        z-index:999;
        transition:left .3s ease;
    }
    .sidebar.open{
        left:0;
        width:260px;
        flex:none;
        padding:13px 18px;
        border-radius:26px;
        background:var(--bg-input);
        color:#fff;
        font-size:15px;
        font-family:'Poppins',sans-serif;
    }
}

/* ==== AI LISTAS EN RESPUESTAS ==== */
.ai-list, .ai-list-bullet {
    margin: 10px 0 10px 0;
    padding-left: 28px;
    background: none;
    border: none;
    font-size: 1.08rem;
    color: var(--text-primary);
    line-height: 1.7;
    list-style: disc inside;
    max-width: 90%;
}
.ai-list li, .ai-list-bullet li {
    margin-bottom: 8px;
    padding-left: 0;
    background: none;
    border: none;
    font-size: 1.08rem;
    color: var(--text-primary);
    border-radius: 0;
    box-shadow: none;
    word-break: break-word;
}
.ai-intro {
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.32rem;
    color: var(--text-primary);
    line-height: 1.5;
}
/* Asegura que la lista quede dentro del globo del mensaje */
.ai-message ul.ai-list, .ai-message ul.ai-list-bullet, .ai-message ol.ai-list {
    background: none;
    border: none;
    box-shadow: none;
    padding-bottom: 2px;
    margin-bottom: 2px;
}
.ai-message {
    align-items: flex-start;
}
.ai-message p, .ai-message ul, .ai-message ol {
    background: #f0f8ff;
    border: 1.5px solid rgba(212,232,247,.4);
    border-radius: 4px 18px 18px 18px;
    box-shadow: 0 2px 8px rgba(116,194,225,.15);
    padding: 13px 16px;
    margin: 0 0 4px 0;
    max-width: 75%;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: .2px;
    display: block;
}

/* Bloque especial para intro + lista en AI */
.ai-message-block {
    background: #f0f8ff;
    border: 1.5px solid rgba(212,232,247,.4);
    border-radius: 4px 18px 18px 18px;
    box-shadow: 0 2px 8px rgba(116,194,225,.15);
    padding: 13px 16px;
    margin: 0 0 4px 0;
    max-width: 75%;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: .2px;
    display: block;
}

/* Indicador moderno de escuchando dentro de la barra de input */
#escuchandoDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255, 215, 0, 0.85);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    color: #fff;
    font-weight: 700;
    font-size: 1.13rem;
    border-radius: 22px;
    box-shadow: 0 4px 18px rgba(255,215,0,0.13), 0 1.5px 8px 0 rgba(116, 194, 225, 0.08);
    padding: 12px 36px 12px 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
    max-width: 90vw;
    pointer-events: none;
    margin-top: 0;
    border: 1.5px solid #ffe066;
    transition: box-shadow .18s, background .18s;
}
#escuchandoDiv .escuchando-mic {
    display: flex;
    align-items: center;
    margin-right: 8px;
    filter: drop-shadow(0 2px 6px #fff8dc);
    animation: micGlow 1.2s infinite alternate;
}
@keyframes micGlow {
    0% { filter: drop-shadow(0 0 0 #fff8dc); }
    100% { filter: drop-shadow(0 0 12px #fff8dc); }
}
#escuchandoDiv .escuchando-barras {
    display: flex;
    gap: 3px;
    margin-right: 8px;
}
#escuchandoDiv .escuchando-barras span {
    width: 5px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
    animation: escuchandoBar 1s infinite;
    opacity: 0.7;
}
#escuchandoDiv .escuchando-barras span:nth-child(2) { animation-delay: .2s; height: 22px; }
#escuchandoDiv .escuchando-barras span:nth-child(3) { animation-delay: .4s; height: 18px; }
@keyframes escuchandoBar {
    0%,100% { opacity: .7; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.5); }
}
#escuchandoDiv .escuchando-text {
    font-size: 1.13rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 0 #ffe066;
}
.input-footer { position: relative; }
.input-wrapper { position: relative; z-index: 2; }

/* Botón hamburguesa */
.menu-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: white;
    border: none;
    border-radius: 8px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    transition: all 0.3s ease;
}

.menu-toggle .menu-icon {
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
    opacity: 1;
}

.menu-toggle .close-icon-img {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: 0;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.menu-toggle.active .menu-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}

.menu-toggle.active .close-icon-img {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}



.sidebar.open ~ .chat-wrapper {
    margin-left: 280px;
}

.header {
    transition: all 0.3s ease;
}

.sidebar.open ~ .chat-wrapper .header {
    transform: scale(1.05);
}


.sidebar.open ~ .chat-wrapper {
    margin-left: 280px;
    width: calc(100% - 280px);
}

.header {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.open ~ .chat-wrapper .header {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(116, 194, 225, 0.3);
}

.sidebar.open ~ .chat-wrapper .header h1 {
    animation: titlePulse 0.5s ease;
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Animación del header cuando sidebar está abierto */
.chat-wrapper {
    transition: margin-left 0.3s ease, width 0.3s ease;
    width: 100%;
    margin-left: 0;
}

.sidebar.open ~ .chat-wrapper {
    margin-left: 280px;
    width: calc(100% - 280px);
}

.header {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.open ~ .chat-wrapper .header {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(116, 194, 225, 0.3);
}

.sidebar.open ~ .chat-wrapper .header h1 {
    animation: titlePulse 0.5s ease;
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Animación suave de mensajes */
.message {
    animation: messageSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

@keyframes messageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mejorar animación de typing */
.message p.typing {
    animation: typingSmooth 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes typingSmooth {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hardware acceleration para mejor rendimiento */
.message, .message p, .chat-box {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Quitar subrayado del botón volver */
.nav-link {
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: none;
}
.info-btn {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 45px !important;
}

.info-btn {
    margin: 0 auto !important;
}

.circle-btn {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 45px !important;
}

/* Contenedor para los 3 botones circulares */
nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Fila de botones circulares */
.circle-buttons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* Optimización móvil adicional */
@media (max-width: 480px) {
    aside {
        width: 60px;
    }
    
    .nav-btn {
        padding: 10px;
        font-size: 0;
    }
    
    .nav-btn svg {
        margin: 0;
    }
    
    .circle-btn, .info-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .chat-wrapper {
        margin-left: 60px;
    }
    
    .message {
        padding: 12px;
        font-size: 14px;
    }
    
    .input-container {
        padding: 12px;
    }
    
    #userInput {
        font-size: 14px;
    }
    
    button[type="submit"] {
        padding: 10px 15px;
        font-size: 14px;
    }
}
/* Optimización móvil mejorada */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    aside {
        width: 65px !important;
        padding: 10px 5px !important;
    }
    
    .nav-btn {
        padding: 8px !important;
        font-size: 0 !important;
        margin-bottom: 8px !important;
    }
    
    .nav-btn svg {
        margin: 0 !important;
    }
    
    .circle-buttons-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .circle-btn, .info-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 18px !important;
    }
    
    .chat-wrapper {
        margin-left: 65px !important;
    }
    
    .chat-header {
        padding: 15px !important;
        font-size: 1.2em !important;
    }
    
    .chat-box {
        padding: 15px !important;
    }
    
    .message {
        padding: 12px !important;
        font-size: 14px !important;
        max-width: 85% !important;
    }
    
    .input-container {
        padding: 12px !important;
        gap: 8px !important;
    }
    
    #userInput {
        font-size: 14px !important;
        padding: 12px !important;
    }
    
    button[type="submit"] {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    aside {
        width: 55px !important;
    }
    
    .nav-btn {
        padding: 6px !important;
    }
    
    .circle-btn, .info-btn {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        font-size: 16px !important;
    }
    
    .chat-wrapper {
        margin-left: 55px !important;
    }
    
    .chat-header {
        padding: 12px !important;
        font-size: 1em !important;
    }
    
    .message {
        padding: 10px !important;
        font-size: 13px !important;
    }
    
    #userInput {
        font-size: 13px !important;
        padding: 10px !important;
    }
    
    button[type="submit"] {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* Mensaje de desarrollo para móviles */
@media (max-width: 768px) {
    body > *:not(style) {
        display: none !important;
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #75AADB 0%, #9BC4E2 100%);
        z-index: 9998;
    }
    
    body::after {
        content: '📱\A\A STEFAI\A\A Versión móvil en desarrollo\A\A Por favor, accede desde un ordenador para disfrutar de la experiencia completa';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85%;
        max-width: 400px;
        padding: 40px 30px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        text-align: center;
        font-size: 1rem;
        line-height: 1.8;
        color: #333;
        white-space: pre-wrap;
        z-index: 9999;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
}

/* Estilos para Markdown en mensajes de IA */
.ai-message h1, .ai-message h2, .ai-message h3 {
    margin: 15px 0 10px;
    color: #333;
}

.ai-message h1 { font-size: 1.5em; }
.ai-message h2 { font-size: 1.3em; }
.ai-message h3 { font-size: 1.1em; }

.ai-message p {
    margin: 10px 0;
    line-height: 1.6;
}

.ai-message ul, .ai-message ol {
    margin: 10px 0;
    padding-left: 25px;
}

.ai-message li {
    margin: 5px 0;
    line-height: 1.5;
}

.ai-message code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.ai-message pre {
    background: #f4f4f4;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 10px 0;
}

.ai-message pre code {
    background: none;
    padding: 0;
}

.ai-message blockquote {
    border-left: 3px solid #667eea;
    padding-left: 15px;
    margin: 10px 0;
    color: #666;
    font-style: italic;
}

.ai-message strong {
    font-weight: 600;
    color: #333;
}

.ai-message em {
    font-style: italic;
}

.ai-message a {
    color: #667eea;
    text-decoration: underline;
}

.ai-message a:hover {
    color: #764ba2;
}

/* Estilos para fórmulas matemáticas */
.ai-message .katex {
    font-size: 1.1em;
}

.ai-message .katex-display {
    margin: 15px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Estilos para fórmulas matemáticas con KaTeX */
.ai-message .katex {
    font-size: 1.1em;
}

.ai-message .katex-display {
    margin: 15px 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.ai-message .katex-display > .katex {
    text-align: center;
}

/* Bloques de código */
.message pre {
    background: #0d1117;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 10px 0;
    max-width: 85%;
    white-space: pre;
}
.message code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre;
}
.message pre code {
    background: transparent;
    padding: 0;
    display: block;
}