/* Reseteo básico y estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables CSS para temas modernizados */
:root {
    /* Light Theme (default) - Modernizado */
    --primary-color: #2563eb;
    --background-color: #f8fafc;
    --text-color: #1e293b;
    --container-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --button-bg: #2563eb;
    --button-text: #ffffff;
    --selection-text-color: #1e293b; /* Color oscuro para temas claros */
    --verse-text-color: #1e293b;
    --verse-number-color: #64748b;
    --verse-font-size: 18px;
    --sidebar-bg: #f1f5f9;
    --sidebar-border: #e2e8f0;
    --chat-header-bg: #f8fafc;
    --chat-header-border: #e2e8f0;
    --chat-footer-bg: #f8fafc;
    --chat-footer-border: #e2e8f0;
    --chat-input-bg: #ffffff;
    --chat-input-border: #e2e8f0;
    --chat-user-bubble-bg: #3b82f6;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #f1f5f9;
    --chat-ai-bubble-text: #1e293b;
    --chat-starter-bg: #f1f5f9;
    --chat-starter-border: #e2e8f0;
    --chat-starter-text: #1e293b;
    --chat-welcome-text: #64748b;
    --chat-title-color: #1e293b;
    --chat-header-text: #1e293b;
    --chat-header-hover-bg: rgba(37, 99, 235, 0.1);
    /* Variables para manejo de teclado móvil */
    --chat-bg: #ffffff;
    --chat-input-focus-border: #3b82f6;
    --chat-input-focus-shadow: rgba(59, 130, 246, 0.25);
    /* Variables para Neumorphism Toolbar - Fondo Oscuro */
    --toolbar-bg: #1e293b;
    --toolbar-shadow-dark: #0f172a;
    --toolbar-shadow-light: #334155;
    --toolbar-button-bg: #1e293b;
    --toolbar-button-text: #f8fafc;
    --toolbar-button-shadow-dark: #0f172a;
    --toolbar-button-shadow-light: #334155;
    --toolbar-controls-bg: #1e293b;
    --toolbar-controls-shadow-dark: #0f172a;
    --toolbar-controls-shadow-light: #334155;
    --toolbar-controls-button-bg: #1e293b;
    --toolbar-controls-button-text: #f8fafc;
    --toolbar-controls-button-shadow-dark: #0f172a;
    --toolbar-controls-button-shadow-light: #334155;
}

[data-theme="dark"] {
    /* Dark Theme - Colores sagrados para estudio nocturno */
    --primary-color: #8b5cf6; /* Púrpura sagrado */
    --background-color: #0f0f23; /* Azul noche profundo */
    --text-color: #f8fafc; /* Blanco puro */
    --container-bg: #1a1a2e; /* Azul noche medio */
    --shadow-color: rgba(139, 92, 246, 0.2);
    --button-bg: #8b5cf6;
    --button-text: #ffffff;
    --selection-text-color: #ffffff;
    --verse-text-color: #f8fafc;
    --verse-number-color: #a78bfa;
    --sidebar-bg: #1a1a2e;
    --sidebar-border: #2d2d44;
    --chat-header-bg: #0f0f23;
    --chat-header-border: #2d2d44;
    --chat-footer-bg: #0f0f23;
    --chat-footer-border: #2d2d44;
    --chat-input-bg: #1a1a2e;
    --chat-input-border: #2d2d44;
    --chat-user-bubble-bg: #8b5cf6;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #2d2d44;
    --chat-ai-bubble-text: #f8fafc;
    --chat-starter-bg: #1a1a2e;
    --chat-starter-border: #2d2d44;
    --chat-starter-text: #f8fafc;
    --chat-welcome-text: #a78bfa;
    --chat-title-color: #f8fafc;
    --chat-header-text: #f8fafc;
    --chat-header-hover-bg: rgba(139, 92, 246, 0.2);
    --chat-bg: #0f0f23;
    --chat-input-focus-border: #8b5cf6;
    --chat-input-focus-shadow: rgba(139, 92, 246, 0.3);
    --toolbar-bg: #0a0a1a;
    --toolbar-shadow-dark: #000000;
    --toolbar-shadow-light: #1a1a2e;
    --toolbar-button-bg: #0a0a1a;
    --toolbar-button-text: #f8fafc;
    --toolbar-button-shadow-dark: #000000;
    --toolbar-button-shadow-light: #1a1a2e;
    --toolbar-controls-bg: #0a0a1a;
    --toolbar-controls-shadow-dark: #000000;
    --toolbar-controls-shadow-light: #1a1a2e;
    --toolbar-controls-button-bg: #0a0a1a;
    --toolbar-controls-button-text: #f8fafc;
    --toolbar-controls-button-shadow-dark: #000000;
    --toolbar-controls-button-shadow-light: #1a1a2e;
}

[data-theme="sepia"] {
    /* Sepia Theme - Pergamino sagrado */
    --primary-color: #92400e; /* Marrón pergamino */
    --background-color: #fef7e0; /* Beige claro */
    --text-color: #2d1810; /* Marrón oscuro */
    --container-bg: #faf3e0; /* Beige medio */
    --shadow-color: rgba(146, 64, 14, 0.15);
    --button-bg: #92400e;
    --button-text: #ffffff;
    --selection-text-color: #2d1810;
    --verse-text-color: #2d1810;
    --verse-number-color: #a16207;
    --sidebar-bg: #f4e4bc;
    --sidebar-border: #d4a574;
    --chat-header-bg: #fef7e0;
    --chat-header-border: #d4a574;
    --chat-footer-bg: #fef7e0;
    --chat-footer-border: #d4a574;
    --chat-input-bg: #f4e4bc;
    --chat-input-border: #d4a574;
    --chat-user-bubble-bg: #92400e;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #faf3e0;
    --chat-ai-bubble-text: #2d1810;
    --chat-starter-bg: #f4e4bc;
    --chat-starter-border: #d4a574;
    --chat-starter-text: #2d1810;
    --chat-welcome-text: #a16207;
    --chat-title-color: #2d1810;
    --chat-header-text: #2d1810;
    --chat-header-hover-bg: rgba(146, 64, 14, 0.15);
    --chat-bg: #fef7e0;
    --chat-input-focus-border: #92400e;
    --chat-input-focus-shadow: rgba(146, 64, 14, 0.25);
    --toolbar-bg: #2d1810;
    --toolbar-shadow-dark: #1a0f0a;
    --toolbar-shadow-light: #5d2e1a;
    --toolbar-button-bg: #2d1810;
    --toolbar-button-text: #fef7e0;
    --toolbar-button-shadow-dark: #1a0f0a;
    --toolbar-button-shadow-light: #5d2e1a;
    --toolbar-controls-bg: #2d1810;
    --toolbar-controls-shadow-dark: #1a0f0a;
    --toolbar-controls-shadow-light: #5d2e1a;
    --toolbar-controls-button-bg: #2d1810;
    --toolbar-controls-button-text: #fef7e0;
    --toolbar-controls-button-shadow-dark: #1a0f0a;
    --toolbar-controls-button-shadow-light: #5d2e1a;
}

[data-theme="rosa-empolvado"] {
    /* Rosa Empolvado - Suave y espiritual */
    --primary-color: #be185d; /* Rosa profundo */
    --background-color: #fdf2f8; /* Rosa muy claro */
    --text-color: #4c1d3f; /* Púrpura oscuro */
    --container-bg: #fce7f3; /* Rosa claro */
    --shadow-color: rgba(190, 24, 93, 0.15);
    --button-bg: #be185d;
    --button-text: #ffffff;
    --selection-text-color: #4c1d3f;
    --verse-text-color: #4c1d3f;
    --verse-number-color: #be185d;
    --sidebar-bg: #fbcfe8;
    --sidebar-border: #f9a8d4;
    --chat-header-bg: #fdf2f8;
    --chat-header-border: #f9a8d4;
    --chat-footer-bg: #fdf2f8;
    --chat-footer-border: #f9a8d4;
    --chat-input-bg: #fbcfe8;
    --chat-input-border: #f9a8d4;
    --chat-user-bubble-bg: #be185d;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #fce7f3;
    --chat-ai-bubble-text: #4c1d3f;
    --chat-starter-bg: #fbcfe8;
    --chat-starter-border: #f9a8d4;
    --chat-starter-text: #4c1d3f;
    --chat-welcome-text: #be185d;
    --chat-title-color: #4c1d3f;
    --chat-header-text: #4c1d3f;
    --chat-header-hover-bg: rgba(190, 24, 93, 0.15);
    --chat-bg: #fdf2f8;
    --chat-input-focus-border: #be185d;
    --chat-input-focus-shadow: rgba(190, 24, 93, 0.25);
    --toolbar-bg: #4c1d3f;
    --toolbar-shadow-dark: #2d1124;
    --toolbar-shadow-light: #7c2d6b;
    --toolbar-button-bg: #4c1d3f;
    --toolbar-button-text: #fdf2f8;
    --toolbar-button-shadow-dark: #2d1124;
    --toolbar-button-shadow-light: #7c2d6b;
    --toolbar-controls-bg: #4c1d3f;
    --toolbar-controls-shadow-dark: #2d1124;
    --toolbar-controls-shadow-light: #7c2d6b;
    --toolbar-controls-button-bg: #4c1d3f;
    --toolbar-controls-button-text: #fdf2f8;
    --toolbar-controls-button-shadow-dark: #2d1124;
    --toolbar-controls-button-shadow-light: #7c2d6b;
}

[data-theme="forest"] {
    /* Forest Theme - Naturaleza sagrada */
    --primary-color: #059669; /* Verde bosque */
    --background-color: #f0fdf4; /* Verde muy claro */
    --text-color: #14532d; /* Verde oscuro */
    --container-bg: #ffffff;
    --shadow-color: rgba(5, 150, 105, 0.15);
    --button-bg: #059669;
    --button-text: #ffffff;
    --selection-text-color: #14532d;
    --verse-text-color: #14532d;
    --verse-number-color: #047857;
    --sidebar-bg: #dcfce7;
    --sidebar-border: #86efac;
    --chat-header-bg: #f0fdf4;
    --chat-header-border: #86efac;
    --chat-footer-bg: #f0fdf4;
    --chat-footer-border: #86efac;
    --chat-input-bg: #dcfce7;
    --chat-input-border: #86efac;
    --chat-user-bubble-bg: #059669;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #ffffff;
    --chat-ai-bubble-text: #14532d;
    --chat-starter-bg: #dcfce7;
    --chat-starter-border: #86efac;
    --chat-starter-text: #14532d;
    --chat-welcome-text: #047857;
    --chat-title-color: #14532d;
    --chat-header-text: #14532d;
    --chat-header-hover-bg: rgba(5, 150, 105, 0.15);
    --chat-bg: #f0fdf4;
    --chat-input-focus-border: #059669;
    --chat-input-focus-shadow: rgba(5, 150, 105, 0.25);
    --toolbar-bg: #14532d;
    --toolbar-shadow-dark: #0a2e1a;
    --toolbar-shadow-light: #047857;
    --toolbar-button-bg: #14532d;
    --toolbar-button-text: #f0fdf4;
    --toolbar-button-shadow-dark: #0a2e1a;
    --toolbar-button-shadow-light: #047857;
    --toolbar-controls-bg: #14532d;
    --toolbar-controls-shadow-dark: #0a2e1a;
    --toolbar-controls-shadow-light: #047857;
    --toolbar-controls-button-bg: #14532d;
    --toolbar-controls-button-text: #f0fdf4;
    --toolbar-controls-button-shadow-dark: #0a2e1a;
    --toolbar-controls-button-shadow-light: #047857;
}

[data-theme="ocean"] {
    /* Ocean Theme - Profundidad espiritual */
    --primary-color: #0284c7; /* Azul océano */
    --background-color: #f0f9ff; /* Azul muy claro */
    --text-color: #0c4a6e; /* Azul oscuro */
    --container-bg: #ffffff;
    --shadow-color: rgba(2, 132, 199, 0.15);
    --button-bg: #0284c7;
    --button-text: #ffffff;
    --selection-text-color: #0c4a6e;
    --verse-text-color: #0c4a6e;
    --verse-number-color: #0369a1;
    --sidebar-bg: #e0f2fe;
    --sidebar-border: #7dd3fc;
    --chat-header-bg: #f0f9ff;
    --chat-header-border: #7dd3fc;
    --chat-footer-bg: #f0f9ff;
    --chat-footer-border: #7dd3fc;
    --chat-input-bg: #e0f2fe;
    --chat-input-border: #7dd3fc;
    --chat-user-bubble-bg: #0284c7;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #ffffff;
    --chat-ai-bubble-text: #0c4a6e;
    --chat-starter-bg: #e0f2fe;
    --chat-starter-border: #7dd3fc;
    --chat-starter-text: #0c4a6e;
    --chat-welcome-text: #0369a1;
    --chat-title-color: #0c4a6e;
    --chat-header-text: #0c4a6e;
    --chat-header-hover-bg: rgba(2, 132, 199, 0.15);
    --chat-bg: #f0f9ff;
    --chat-input-focus-border: #0284c7;
    --chat-input-focus-shadow: rgba(2, 132, 199, 0.25);
    --toolbar-bg: #0c4a6e;
    --toolbar-shadow-dark: #082f49;
    --toolbar-shadow-light: #0369a1;
    --toolbar-button-bg: #0c4a6e;
    --toolbar-button-text: #f0f9ff;
    --toolbar-button-shadow-dark: #082f49;
    --toolbar-button-shadow-light: #0369a1;
    --toolbar-controls-bg: #0c4a6e;
    --toolbar-controls-shadow-dark: #082f49;
    --toolbar-controls-shadow-light: #0369a1;
    --toolbar-controls-button-bg: #0c4a6e;
    --toolbar-controls-button-text: #f0f9ff;
    --toolbar-controls-button-shadow-dark: #082f49;
    --toolbar-controls-button-shadow-light: #0369a1;
}

[data-theme="google-gray"] {
    /* Google Gray - Neutral y profesional */
    --primary-color: #5f6368; /* Gris Google */
    --background-color: #f8f9fa; /* Gris muy claro */
    --text-color: #202124; /* Gris oscuro */
    --container-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --button-bg: #5f6368;
    --button-text: #ffffff;
    --selection-text-color: #202124;
    --verse-text-color: #202124;
    --verse-number-color: #5f6368;
    --sidebar-bg: #f1f3f4;
    --sidebar-border: #dadce0;
    --chat-header-bg: #f8f9fa;
    --chat-header-border: #dadce0;
    --chat-footer-bg: #f8f9fa;
    --chat-footer-border: #dadce0;
    --chat-input-bg: #f1f3f4;
    --chat-input-border: #dadce0;
    --chat-user-bubble-bg: #5f6368;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #ffffff;
    --chat-ai-bubble-text: #202124;
    --chat-starter-bg: #f1f3f4;
    --chat-starter-border: #dadce0;
    --chat-starter-text: #202124;
    --chat-welcome-text: #5f6368;
    --chat-title-color: #202124;
    --chat-header-text: #202124;
    --chat-header-hover-bg: rgba(95, 99, 104, 0.1);
    --chat-bg: #f8f9fa;
    --chat-input-focus-border: #5f6368;
    --chat-input-focus-shadow: rgba(95, 99, 104, 0.25);
    --toolbar-bg: #202124;
    --toolbar-shadow-dark: #000000;
    --toolbar-shadow-light: #5f6368;
    --toolbar-button-bg: #202124;
    --toolbar-button-text: #f8f9fa;
    --toolbar-button-shadow-dark: #000000;
    --toolbar-button-shadow-light: #5f6368;
    --toolbar-controls-bg: #202124;
    --toolbar-controls-shadow-dark: #000000;
    --toolbar-controls-shadow-light: #5f6368;
    --toolbar-controls-button-bg: #202124;
    --toolbar-controls-button-text: #f8f9fa;
    --toolbar-controls-button-shadow-dark: #000000;
    --toolbar-controls-button-shadow-light: #5f6368;
}

[data-theme="terracotta"] {
    /* Terracotta Theme - Tierra sagrada */
    --primary-color: #dc2626; /* Rojo terracota */
    --background-color: #fef2f2; /* Rojo muy claro */
    --text-color: #450a0a; /* Rojo muy oscuro */
    --container-bg: #ffffff;
    --shadow-color: rgba(220, 38, 38, 0.15);
    --button-bg: #dc2626;
    --button-text: #ffffff;
    --selection-text-color: #450a0a;
    --verse-text-color: #450a0a;
    --verse-number-color: #b91c1c;
    --sidebar-bg: #fecaca;
    --sidebar-border: #fca5a5;
    --chat-header-bg: #fef2f2;
    --chat-header-border: #fca5a5;
    --chat-footer-bg: #fef2f2;
    --chat-footer-border: #fca5a5;
    --chat-input-bg: #fecaca;
    --chat-input-border: #fca5a5;
    --chat-user-bubble-bg: #dc2626;
    --chat-user-bubble-text: #ffffff;
    --chat-ai-bubble-bg: #ffffff;
    --chat-ai-bubble-text: #450a0a;
    --chat-starter-bg: #fecaca;
    --chat-starter-border: #fca5a5;
    --chat-starter-text: #450a0a;
    --chat-welcome-text: #b91c1c;
    --chat-title-color: #450a0a;
    --chat-header-text: #450a0a;
    --chat-header-hover-bg: rgba(220, 38, 38, 0.15);
    --chat-bg: #fef2f2;
    --chat-input-focus-border: #dc2626;
    --chat-input-focus-shadow: rgba(220, 38, 38, 0.25);
    --toolbar-bg: #450a0a;
    --toolbar-shadow-dark: #2d0505;
    --toolbar-shadow-light: #b91c1c;
    --toolbar-button-bg: #450a0a;
    --toolbar-button-text: #fef2f2;
    --toolbar-button-shadow-dark: #2d0505;
    --toolbar-button-shadow-light: #b91c1c;
    --toolbar-controls-bg: #450a0a;
    --toolbar-controls-shadow-dark: #2d0505;
    --toolbar-controls-shadow-light: #b91c1c;
    --toolbar-controls-button-bg: #450a0a;
    --toolbar-controls-button-text: #fef2f2;
    --toolbar-controls-button-shadow-dark: #2d0505;
    --toolbar-controls-button-shadow-light: #b91c1c;
}

/* ================== ESTILOS GENERALES Y LAYOUT ================== */
body {
    font-family: 'Lora', 'Merriweather', 'Crimson Text', serif; /* Prioriza Lora para el cuerpo principal */
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    text-align: left;
    transition: background 0.3s, color 0.3s;
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.container {
    width: 100%;
    max-width: 100%; /* Cambiar de 1200px a 100% para expandir completamente */
    margin: 0 auto; /* Centrar el contenido */
    padding: 5px;
    background: var(--container-bg);
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho/alto */
    overflow-y: auto; /* Para que el contenido de la Biblia pueda hacer scroll */
    flex-grow: 1; /* Permite que la Biblia ocupe el espacio restante */
}

/* Contenedor principal de toda la aplicación (Biblia + Chat) */
.chat-container {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Asegura que al menos ocupe la altura del viewport */
    overflow: hidden; /* Evita barras de desplazamiento no deseadas en el contenedor raíz */
    display: flex; /* Permite que el sidebar y el contenido principal estén lado a lado */
}

#main-content-wrapper {
    flex-grow: 1; /* Ocupa el espacio restante */
    width: 100%; /* Cambiado de 100vw a 100% para ser consistente */
    max-width: 100%; /* Cambiar de 1200px a 100% para expandir completamente */
    margin: 0 auto; /* Centrar el contenido */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex; /* Para el contenedor principal del chat */
    flex-direction: column;
    min-height: 100vh; /* Asegura que ocupe al menos la altura de la vista */
}

/* COMPORTAMIENTO DE OVERLAY: #main-content-wrapper NO se mueve */
#main-content-wrapper.sidebar-open {
    /* transform: translateX(300px); /* Esto se REMUEVE para el efecto overlay */
    /* border-left: 1px solid var(--sidebar-border); /* Esto también se REMUEVE o se maneja en el overlay */
    box-shadow: none; /* La sombra la manejaremos en el overlay */
}

/* Overlay para oscurecer el contenido principal cuando el sidebar está abierto */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Negro semi-transparente */
    z-index: 10000; /* Por debajo del sidebar, pero por encima del main content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* Contenedor principal del chat (fondo, color de texto) */
.contenedor-principal {
    width: 100%;
    max-width: 100%; /* Cambiar de 1200px a 100% para expandir completamente */
    margin: 0 auto; /* Centrar el contenido */
    height: 100%; /* Asegura que ocupe toda la altura disponible en su contenedor flex */
    display: flex;
    flex-direction: column;
    background: var(--background-color); /* Usar variable de tema */
    color: var(--text-color); /* Usar variable de tema */
    flex-grow: 1; /* Permite que ocupe todo el espacio vertical disponible */
}

/* Tema claro para el contenedor principal (ahora redundante si todo usa variables) */
.contenedor-principal.tema-claro {
    background: var(--background-color);
    color: var(--text-color);
}
.contenedor-principal.tema-claro .titulo-chat {
    color: var(--chat-title-color);
}
.contenedor-principal.tema-claro .iniciadores-header h4 {
    color: var(--chat-welcome-text);
}

/* Estilos de botones de encabezado (para el chat y sidebar) */
.boton-encabezado {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--verse-number-color); /* Un gris adecuado para iconos */
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.boton-encabezado:hover {
    background: var(--button-bg); /* Un fondo sutil al pasar el ratón */
    color: var(--button-text);
}

/* Tema claro para botones de encabezado (redundante si todo usa variables) */
.contenedor-principal.tema-claro .boton-encabezado {
    color: var(--verse-number-color);
}
.contenedor-principal.tema-claro .boton-encabezado:hover {
    background: var(--button-bg);
    color: var(--button-text);
}

/* Medias queries generales */
@media (max-width: 768px) {
    .encabezado-chat,
    .contenedor-historial,
    .contenedor-entrada {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Mantener 100% de ancho en móviles */
    .container,
    .contenedor-principal,
    #main-content-wrapper {
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 1200px) {
    /* Mantener 100% de ancho en pantallas medianas */
    .container,
    .contenedor-principal,
    #main-content-wrapper {
        max-width: 100%;
    }
}

/* Estilos para el efecto de resaltado de búsqueda */
@keyframes highlight {
    0% { background-color: var(--primary-color); }
    100% { background-color: transparent; }
}

/* Estilos de utilidades CSS (minicolors si lo usas) */
.minicolors-theme-default .minicolors-input {
    height: 38px;
    padding-left: 35px;
    background: var(--container-bg);
    color: var(--text-color);
}
.minicolors-swatch {
    top: 5px;
    left: 5px;
    width: 28px;
    height: 28px;
}