/* Asegura que el contenido central no se meta debajo del footer */
main {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f7fe;
}

/* Efecto de scroll suave */
html {
    scroll-behavior: smooth;
}

/* Evitar que el footer tape el último elemento del scroll */
#main-content {
    padding-bottom: 2rem;
}


/* Estilo general para mensajes de sistema (Tools, errores, etc.) */
.message.system, 
div.system { 
    background-color: #f3f4f6 !important; /* Un gris muy suave */
    color: #6b7280 !important;           /* Texto grisáceo (estilo Tailwind gray-500) */
    font-style: italic;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    margin-left: auto;
    margin-right: auto;                  /* Centrado */
    max-width: fit-content;              /* Que no ocupe todo el ancho */
    box-shadow: none;
}

/* -------------------- ZONA PESTAÑA INFERIOR --------------------
    /* Estado expandido: ocupa el 80% de la pantalla */
    #chat-sheet.expanded {
        height: 80vh;
    }
    
    /* Mostrar el historial solo cuando está expandido */
    #chat-sheet.expanded #chat-history {
        opacity: 1;
    }

    /* Evitar que el dashboard se mueva si hay scroll en el chat */
    body.modal-open {
        overflow: hidden;
    }


    /* ---------------------- LISTADO DE ENTRIES ---------------------- */

    .entry-item {
    padding: 8px;
    margin: 4px 0;
    border-left: 2px solid #ddd;
    background: #f9f9f9;
    font-family: sans-serif;
    border-radius: 0 4px 4px 0;
}

.type-task { border-left-color: #ffcc00; } /* Amarillo para tareas */
.type-note { border-left-color: #007bff; } /* Azul para notas */
.type-list { border-left-color: #28a745; border-bottom: 1px solid #eee; }

.badge {
    font-size: 10px;
    padding: 2px 5px;
    background: #eee;
    margin-right: 10px;
    border-radius: 3px;
    color: #666;
}

.id-tag { color: #ccc; margin-left: 10px; }


/* ---------------------- VISUALIZACION DE ENTRIES ---------------------------*/

/* Titulo de arbol */
.root-entry .entry-content {
    border-left: 4px solid #3b82f6; /* Una línea azul gruesa para las principales */
    background-color: #f8fafc;
    margin-bottom: 0.5rem;
    padding: 1rem;
}

.root-entry:hover .entry-content {
    background-color: #eff6ff;
}

/* Oculto por defecto */
.raw-data-container {
    /* Solo estilos visuales, NO de visibilidad */
    transition: all 0.3s ease;
}

/* MUESTRA AL USUARIO QUE ES CLICKABLE SIN DEJAR SELECCIONAR TEXTO */
.entry-content {
    cursor: pointer;
    user-select: none; /* Evita que se seleccione el texto al hacer muchos clics */
}

/* Si quieres forzar que la clase .hidden funcione siempre, añade esto: */
.hidden {
    display: none !important;
}

/* Cuando el padre tiene la clase is-expanded, lo mostramos */
.entry-content.is-expanded .raw-data-container {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

/* Opcional: un toque visual al texto principal cuando está abierto */
.entry-content.is-expanded .entry-text {
    color: #2563eb; /* Azul para resaltar cuál está abierta */
}

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

/* ------------------------MENU IZQ ------------------------------*/

@layer components {
    .nav-btn {
        @apply flex items-center gap-3 w-full p-3 rounded-xl text-left font-medium 
               text-gray-600 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200;
    }
}

/* -----------------------------------------------------------------------------*/