/* =============================================================== */
/* 1. VARIABLES GLOBALES Y CONFIGURACIÓN BASE                        */
/* =============================================================== */
:root {
    --color-primary: #0e76a8;      /* Azul principal para navegación */
    --color-secondary: #4345a1;     /* Azul/púrpura para botones y acentos */
    --color-background: #f4f7f6;   /* Un gris muy suave para el fondo */
    --color-surface: #ffffff;      /* Blanco para superficies como el chat */
    --color-text: #333;            /* Color de texto principal */
    --color-border: #e1e1e1;       /* Color para bordes sutiles */
    --code-background: #2d2d2d;    /* Fondo para bloques de código */
    --font-primary: 'Lato', 'Arial', sans-serif;
    --font-code: 'Courier New', Courier, monospace;
    --spacing-unit: 8px;
    --navbar-height: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-surface);
    color: var(--color-text);
    line-height: 1.6;
}

main {
    padding-top: var(--navbar-height);
}

/* =============================================================== */
/* 2. COMPONENTES PRINCIPALES (BEM)                                    */
/* =============================================================== */

/* --- Componente: Menú de Navegación --- */
.menu { display: flex; justify-content: space-between; align-items: center; background-color: var(--color-surface); width: 100%; height: var(--navbar-height); position: fixed; top: 0; left: 0; z-index: 1000; }
.div_menu { position: absolute ;display: none; flex-direction: column; justify-content: space-between; width: 95%; height: 30%; top: 0; right: 0; border-bottom-left-radius: 15px;}
.menu__nav { display:none;}
.menu__session { display: none;}
.menu__item { padding: 0 0; } /* Padding base para elementos de menú */
.menu__link {
    color: var(--color-surface);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    padding: calc(var(--spacing-unit) * 0.5) 0;
    position: relative;
}

.menu__link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-surface);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

.menu__link:hover::after {
    transform: scaleX(1);
}

.menu__toggle { position: relative ;display: block; background: transparent; border: none; cursor: pointer; top: 0; left: 0; margin-bottom: auto; width: 15%; height: 100%;}

.menu__nav.active, .menu__session.active {
    display: block; /* OCULTOS por defecto */
    flex-direction: column;
    
    /* MODIFICACIÓN ANTERIOR: Alinear a la derecha los elementos del menú */
    align-self: flex-end;
    align-items: flex-end;
    justify-content: flex-end; 
    
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    background-color: var(--color-primary);

    list-style-type: none;
    /* Eliminamos el padding del contenedor, lo movemos al ítem */
    padding: 0; 
}

/* NUEVA MODIFICACIÓN: Aplicar padding a los ítems para separarlos del borde del menú desplegable */
.menu__nav.active .menu__item,
.menu__session.active .menu__item {
    /* Padding horizontal para separar del borde derecho */
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2); 
    /* Margen vertical para separar los ítems entre sí */
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    width: 100%; /* Asegura que ocupe todo el ancho para que el padding derecho sea efectivo */
}


/* MODIFICACIÓN ANTERIOR: Alinear el texto de los enlaces a la derecha */
.menu__nav.active .menu__link, 
.menu__session.active .menu__link {
    text-align: right;
    width: 100%;
}

.div_menu.active {
    background-color: var(--color-primary);
    display: flex;
    /* Ajusta el ancho y alinea el contenido a la derecha para móvil */
    width: 70%; 
    height: auto;
    right: 0; 
    align-items: flex-end; 
    text-align: right; 
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2); 
    /* Eliminamos el padding de aquí, ahora lo aplicamos al ítem */
    padding: calc(var(--spacing-unit) * 2) 0; /* Padding vertical, sin padding horizontal */
}


/* --- Componente: Página de Bienvenida --- */
.welcome-section { padding: calc(var(--spacing-unit) * 3); display: flex; flex-direction: column; align-items: center; text-align: center; background-color: var(--color-surface);}
.welcome-section__image { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: calc(var(--spacing-unit) * 3); }

/* --- Componente: Chat --- */
.seccion-asistente { width: 100%; }
.chat { display: flex; flex-direction: column; height: calc(100vh - var(--navbar-height)); background-color: var(--color-surface); width: 100%; }
.chat__messages {flex: 1; overflow-y: auto; padding: calc(var(--spacing-unit) * 2); display: flex; flex-direction: column; gap: var(--spacing-unit); }
.chat__interaction-bar { display: flex; align-items: center; padding: var(--spacing-unit); border: 1px solid var(--color-secondary); border-radius: 30px; margin: calc(var(--spacing-unit) * 2); }
.chat__input { flex: 1; border: none; background: transparent; padding: var(--spacing-unit); font-size: 1rem; resize: none; }
.chat__input:focus { outline: none; }
.chat__send-button { border: none; background-color: var(--color-secondary); color: var(--color-surface); border-radius: 25px; padding: 10px 15px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; }
@supports (height: 100dvh) {
    .chat { height: calc(100dvh - var(--navbar-height)); }
}

/* Estilos para los mensajes del chat */
.contenedor_asistente { padding: calc(var(--spacing-unit) * 1.5); border-radius: 15px; max-width: 100%; word-wrap: break-word; position: relative; }
.contenedor_usuario { padding: calc(var(--spacing-unit) * 1.5); border-radius: 15px; max-width: 80%; word-wrap: break-word; position: relative; align-self: flex-end; background-color: var(--color-secondary); color: var(--color-surface); border-bottom-right-radius: 0; }
.contenedor_asistente { align-self: flex-start; background-color: transparent; border: 1px solid var(--color-border); border-bottom-left-radius: 0; }

/* =============================================================== */
/* 2.1 ESTILOS PARA ELEMENTOS DINÁMICOS DEL CHAT (Contenedores)        */
/* =============================================================== */
.usuario, .asistente { font-size: 0.85rem; font-weight: bold; margin-bottom: calc(var(--spacing-unit) * 0.5); opacity: 0.8; }
.usuario { color: #e2e2e2; }
.asistente { color: var(--color-secondary); }
.mensaje_usuario, .mensaje_asistente { font-size: 1rem; line-height: 1.6; }
.mensaje_usuario {
    background-color: transparent; /* El fondo ya está en el contenedor */
    border: none;
    color: inherit; /* Hereda el color de texto del contenedor */
    width: 100%; /* Ocupa el ancho disponible dentro del contenedor */
    resize: none; /* Evita que el usuario pueda cambiarle el tamaño */
    font-family: inherit; /* Usa la misma fuente que el resto del chat */
    font-size: 1rem;
    line-height: 1.6;
    padding: 0;
    white-space: pre-wrap; /* Respeta los saltos de línea y espacios del texto */
    word-break: break-word; /* Rompe palabras largas para que no se desborden */
    -webkit-text-fill-color: inherit; /* Asegura el color del texto en algunos navegadores */
    opacity: 1; /* Asegura que no se vea transparente */
}


/* =============================================================== */
/* 2.2 ESTILOS PARA CONTENIDO DINÁMICO (MARKDOWN)                      */
/* =============================================================== */
.mensaje_asistente > *:first-child { margin-top: 0; }
.mensaje_asistente > *:last-child { margin-bottom: 0; }
.mensaje_asistente p, .mensaje_asistente ul, .mensaje_asistente ol, .mensaje_asistente blockquote { margin-bottom: calc(var(--spacing-unit) * 1.5); }
.mensaje_asistente ul, .mensaje_asistente ol { padding-left: 20px; }
.mensaje_asistente li { margin-bottom: calc(var(--spacing-unit) * 0.5); }
.mensaje_asistente code { font-family: var(--font-code); background-color: rgba(0, 0, 0, 0.05); padding: 2px 5px; border-radius: 4px; font-size: 0.9em; }
.mensaje_asistente pre { background-color: var(--code-background); color: #f8f8f2; padding: var(--spacing-unit) * 2; border-radius: 8px; overflow-x: auto; margin-bottom: calc(var(--spacing-unit) * 1.5); }
.mensaje_asistente pre code { background-color: transparent; padding: 0; }
.mensaje_asistente blockquote { border-left: 4px solid var(--color-secondary); padding-left: calc(var(--spacing-unit) * 2); margin-left: 0; font-style: italic; color: #555; }
.table-responsive-wrapper { overflow-x: auto; margin-bottom: calc(var(--spacing-unit) * 1.5); }
.mensaje_asistente table { width: 100%; border-collapse: collapse; background-color: var(--color-surface); }
.mensaje_asistente th, .mensaje_asistente td { padding: 10px 12px; border: 1px solid var(--color-border); text-align: left; }
.mensaje_asistente thead { background-color: #e9ecef; }
.mensaje_asistente th { font-weight: bold; }

/* =============================================================== */
/* 3. PÁGINAS DE AUTENTICACIÓN                                         */
/* =============================================================== */
.contenedor-autenticacion { display: flex; flex-direction: column; width: 100%; min-height: calc(100vh - var(--navbar-height)); }
.contenedor-izquierdo, .contenedor-derecho { width: 100%; padding: calc(var(--spacing-unit) * 4); display: flex; flex-direction: column; justify-content: center; }
.contenedor-derecho { background-color: var(--color-surface); text-align: center; }
#login-form { width: 100%; display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 2); }
#login-form input[type="text"], #login-form input[type="email"], #login-form input[type="password"] { display: block; width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: 5px; font-family: var(--font-primary); font-size: 1rem; }
#login-form input[type="text"]:focus, #login-form input[type="email"]:focus, #login-form input[type="password"]:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 5px rgba(67, 69, 161, 0.5); }
#enviar { padding: 12px; border: none; border-radius: 5px; background-color: var(--color-secondary); color: var(--color-surface); font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
#enviar:hover { background-color: #313e63; }

/* =============================================================== */
/* 4. DISEÑO RESPONSIVO (PARA PANTALLAS GRANDES)                       */
/* =============================================================== */
@media (min-width: 768px) {

    body { background-color: var(--color-background);}
    
    main { padding-top: var(--navbar-height); background-color: var(--color-background);}

    /* .menu: YA tenía align-items: center; */
    .menu {display: flex; flex-direction: row; background-color: var(--color-primary); align-items: center;}

    /* CORRECCIÓN APLICADA AQUÍ: Se añade position: static para asegurar que Flexbox funcione correctamente en desktop. */
    .div_menu { 
        position: static; 
        display: flex; 
        flex-direction: row; 
        justify-content: space-between; 
        width: 95%; 
        margin: auto;
        align-items: center;
    }

    /* .menu__nav: Contenedor de los enlaces de navegación - Mantiene align-items: center; */
    .menu__nav{ display: flex; flex-direction: row; list-style: none; gap: 20px; align-items: center;}

    /* Centrado vertical con align-items */
    .menu__session { display: flex;  flex-direction: row; list-style: none; gap: 20px; align-items: center;} 
    
    .menu__toggle { display: none; }
    .welcome-section { background-color: var(--color-background);flex-direction: row; text-align: left; gap: calc(var(--spacing-unit) * 4); padding: calc(var(--spacing-unit) * 5); max-width: 1200px; height: 90dvh; margin: auto; }
    .welcome-section__image { width: 50%; height: 60dvh; ;}
    .welcome-section__content { flex: 1; }
    .chat { width: 70%; margin: 0 auto; border: 1px solid var(--color-border); }
    .contenedor-autenticacion { flex-direction: row; }
    .contenedor-izquierdo { flex: 1; }
    .contenedor-derecho { flex: 1; }
}