/* =========================================
   VYTARI - ESTILO NEO-BRUTALISMO (FINAL)
   ========================================= */

/* --- FUENTES --- */
@font-face {
    font-family: 'Exo 2';
    src: url('../fonts/Exo2-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
.font-brand { font-family: 'Exo 2', sans-serif; }

/* Scrollbars */
.scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes bounce-slow { 
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.animate-bounce { animation: bounce-slow 1.5s infinite; }

/* --- SIDEBAR & TRANSICIONES (Punto 11: Alineación) --- */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4,0,0.2,1);
    will-change: width, left;
    overflow-x: hidden;
}

/* Sidebar layout: asegurar que el footer (logout) quede al fondo y que el nav sea scrollable
   para evitar que el botón se corte al expandir o en móviles. */
#sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
    overflow-y: hidden; /* dejar overflow al nav */
}

#sidebar nav { flex: 1 1 auto; overflow-y: auto; padding-bottom: 0.5rem; }
#sidebar .mt-auto { margin-top: auto !important; }
#sidebar, #sidebar * { -webkit-overflow-scrolling: touch; }

/* Ajustar margen del main según la clase de ancho de la sidebar.
   - `w-64` -> margen amplio (16rem)
   - `w-20` -> margen compacto (5rem)
   - `.sidebar-collapsed` -> off-canvas (0)
*/
#sidebar.w-64 ~ main { margin-left: 16rem; }
#sidebar.w-20 ~ main { margin-left: 5rem; }
#sidebar.sidebar-collapsed ~ main { margin-left: 0; }

#sidebar.sidebar-collapsed { left: -100%; }

@media (max-width: 768px) {
    /* En móvil la sidebar se desplaza fuera de la pantalla; no aplicar margen */
    #sidebar { left: -100%; }
    #sidebar.active, #sidebar:not(.sidebar-collapsed).active { left: 0; }
    /* Forzar margen 0 en main en móvil, independientemente del ancho */
    #sidebar.w-64 ~ main, #sidebar.w-20 ~ main, #sidebar.sidebar-collapsed ~ main { margin-left: 0; }
}

.sidebar-text {
    transition: opacity 0.1s;
    white-space: nowrap;
    opacity: 1;
}

#sidebar.w-20 .sidebar-text {
    display: none;
    opacity: 0;
}

/* Alineación de Iconos y Logo en estado colapsado (w-20) */
#sidebar.w-20 .nav-btn, 
#sidebar.w-20 .btn-logout,
#sidebar.w-20 .brand-container {
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

/* Reducir espacio vertical entre items en la sidebar para evitar scroll innecesario */
#sidebar .space-y-3 > * + * { margin-top: 0.35rem !important; }

/* Cuando la sidebar está en modo mini, compactar padding de botones e iconos */
#sidebar.w-20 .nav-btn {
    padding: 0.35rem 0 !important;
    margin: 0.125rem 0 !important;
}

#sidebar.w-20 nav { align-items: center; }

/* También reducir padding del bloque de perfil mini para ganar espacio */
#sidebar.w-20 .sidebar-profile { padding: 0.25rem 0 !important; }

/* Si aún queda scroll, permitir que la barra sea más compacta en pantallas grandes */
@media (min-height: 800px) {
    #sidebar .space-y-3 > * + * { margin-top: 0.3rem !important; }
}

/* Perfil mini: Alineación centralizada del icono de perfil (Punto 11) */
#sidebar.w-20 .sidebar-profile {
    justify-content: center !important;
    padding: 0.5rem 0 !important;
}
#sidebar.w-20 .sidebar-profile .profile-info {
    display: none;
}
#sidebar.w-20 .sidebar-profile .w-10 {
    margin: 0 auto;
}

/* --- BOTONES DE NAVEGACIÓN (Sidebar) --- */
.nav-btn {
    color: #4b5563;
    font-weight: 500;
    border: 2px solid transparent; 
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background-color: transparent;
    border-color: transparent;
    color: #000;
    box-shadow: none;
    transform: none;
}

.nav-icon {
    color: #000;
    transition: color 0.2s ease;
}

.nav-btn:hover .nav-icon {
    color: #39FF14;
}

/* BOTÓN ACTIVO: Solo el icono indica el estado (verde neón). */
.nav-btn.active-nav {
    background-color: transparent !important;
    color: #000 !important;
    font-weight: 700;
    border: 2px solid transparent;
    box-shadow: none;
    transform: none;
}

.nav-btn.active-nav .nav-icon {
    color: #39FF14 !important; /* Icono permanece verde cuando está activo (silueta) */
}

.nav-btn.active-nav span {
    color: #000 !important;
}

/* Ajustes para evitar que la pestaña/box-shadow del nav solape el logo. */
#sidebar .brand-container { z-index: 50; }

/* Cuando la sidebar está en mini (w-20), centrar y reducir el logo para evitar solapamientos */
#sidebar.w-20 .brand-container { justify-content: center; padding: 0.25rem 0; }
#sidebar.w-20 .brand-container .w-10 { width: 2.5rem; height: 2.5rem; }

/* Reducir ligeramente el tamaño de los iconos en estado mini para prevenir solapamientos */
#sidebar.w-20 .nav-icon, #sidebar.w-20 .nav-icon svg { width: 1.35rem; height: 1.35rem; }

/* Forzar color neón solo en la silueta (stroke) de iconos activos; evitar fill sólido */
.nav-btn.active-nav .nav-icon svg,
#sidebar.w-20 .nav-btn.active-nav .nav-icon svg,
.nav-btn.active-nav .nav-icon,
#sidebar.w-20 .nav-btn.active-nav .nav-icon {
    color: #39FF14 !important;
    stroke: #39FF14 !important;
    /* No forzar `fill` para evitar iconos sólidos */
}

/* --- TARJETAS NEO-BRUTALISMO (Punto 3: Tarjeta con Pestaña Fija) --- */
.theme-card {
    border: 2px solid #000; /* MARGEN NEGRO PRINCIPAL */
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 6px 6px 0px #000000; /* PESTAÑA NEGRA FIJA (simula carpeta) */
    transition: transform 0.2s;
}

.theme-card:hover { 
    transform: translate(2px, 2px); 
    box-shadow: 2px 2px 0px #000000; /* Sombra más chica al presionar */
}

/* --- ICONOS DASHBOARD (Punto 1: Negro > Verde Neón) --- */
.dash-icon {
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    background-color: transparent; border: none; 
    color: #000000; /* NEGRO POR DEFECTO */
    transition: color 0.2s ease, transform 0.2s;
    line-height: 1; /* Asegura el centrado vertical del emoji */
}

.theme-card:hover .dash-icon svg,
.dash-icon:hover svg {
    color: #39FF14; /* CAMBIA A VERDE NEÓN EN HOVER */
    transform: scale(1.1);
}

/* --- BOTONES PRINCIPALES (Punto 2 y 10: Pestaña SOLO en Hover) --- */
.btn-primary {
    background-color: #39FF14; color: #000; border: 2px solid #000;
    font-weight: 700; text-transform: uppercase; transition: all 0.2s;
    box-shadow: none; /* NO PESTAÑA FIJA */
    transform: translate(0, 0);
}

.btn-primary:hover {
    box-shadow: 4px 4px 0px #000; /* PESTAÑA NEGRA ACTIVA */
    transform: translate(-2px, -2px);
}

/* --- BOTÓN CERRAR SESIÓN (Punto 9: Sigue estilo primario en hover) --- */
.btn-logout {
    border: 2px solid #000;
    color: #000;
    background: #f3f4f6;
    transition: all 0.2s;
    box-shadow: none;
    transform: translate(0, 0);
}

.btn-logout:hover {
    background-color: #39FF14; 
    color: #000;
    box-shadow: 4px 4px 0px #000;
    transform: translate(-2px, -2px);
}

/* --- RELOJ/FECHA (Punto 4: Solo letras Neón) --- */
.header-time-card {
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    border-radius: 0.75rem;
}
#current-time {
    color: #39FF14; 
    background: none; 
    padding: 0;
}

/* --- BOTONES MODAL RÁPIDO (Punto 6: Solo borde verde en hover) --- */
.modal-btn-option { 
    background-color: #fff; border: 2px solid #f3f4f6; padding: 1rem; border-radius: 1rem;
    color: #374151; transition: all 0.2s;
    box-shadow: none;
    transform: translate(0, 0);
}
.modal-btn-option:hover {
    border-color: #39FF14;
    color: #000;
    transform: translate(0, 0);
    box-shadow: none;
}

/* --- BOTONES VOLVER/CERRAR MODAL (Punto 7) --- */
.modal-close-btn {
    width: 2rem; 
    height: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
    color: #000;
}
.modal-close-btn:hover {
    color: #39FF14;
}

/* --- PERFIL CABECERA (Punto 10) --- */
.profile-header-container { background-color: #000; height: 100px; position: absolute; left: 0; right: 0; top: 0; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; z-index: 10; }
.profile-avatar-large { border: 4px solid #39FF14; }
.btn-camera-overlay { background: #000; color: #39FF14; border: 2px solid #fff; }

/* --- ESTILOS PARA EL MENÚ MÓVIL --- */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        left: -100%;
        transition: left 0.3s ease-in-out;
    }

    #mobile-menu-button {
        display: block;
    }

    #sidebar.active {
        left: 0;
        overflow-y: auto;
    }


/* Mejoras móviles: asegurar que el sidebar ocupa toda la ventana disponible
   y respetar safe-area para que el footer no quede oculto por barras del SO. */
@media (max-width: 768px) {
    #sidebar.active {
        height: 100dvh; /* preferir dynamic vh para mobile browsers */
        max-height: 100dvh;
        top: 0;
        box-sizing: border-box;
        padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
    }

    /* Asegurar que el nav pueda scrollear y deje espacio para el footer */
    #sidebar.active nav { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }

    /* Footer visible: mayor padding y usar safe-area */
    #sidebar.active .mt-auto {
        position: sticky;
        bottom: 0;
        z-index: 50;
        padding: calc(0.6rem + env(safe-area-inset-bottom)) 0.75rem;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
}
    #menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 30;
    }

    #menu-overlay.active {
        display: block;
    }
}

/* Global overlay default (transparent). Dark background only on mobile. */
#menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: transparent;
    z-index: 30;
}
#menu-overlay.active { display: block; }

/* UI tweaks: compact cards, modal icons, float button */
/* Compact cards and responsive sizing */
/* Slightly smaller 'tab' effect and more compact cards */
.theme-card { overflow: visible; box-shadow: 4px 4px 0px #000000; }
.card-sq { padding: 0.6rem !important; }
.card-rect { padding: 0.6rem 0.85rem !important; }
.dash-icon svg { width: 1.75rem; height: 1.75rem; }

/* Iconos en botones rápidos (Registro Rápido) - consistentes con dash-icon */
.modal-btn-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.25rem; padding:0.75rem; }
.modal-btn-option .dash-icon { width: 1.75rem; height: 1.75rem; }
.modal-btn-option .dash-icon svg { width:100%; height:100%; }
.modal-btn-option span { display:block; font-size:0.9rem; line-height:1; color:#000; }
/* Only the hovered modal option should turn neon; prevent theme-card:hover from affecting modal icons */
#add-data-modal .theme-card:hover .dash-icon svg { color: #000; transform: none; }
#add-data-modal .dash-icon svg { color: #000; }
#add-data-modal .modal-btn-option:hover .dash-icon svg { color: #39FF14; transform: scale(1.05); }

/* Force uniform size for quick-add options and ensure canvases fill their containers */
/* Quick-add: force grid rows and make buttons fill the cell to ensure equal sizes */
#add-data-modal .grid.auto-rows-fr { grid-auto-rows: 8rem; }
#add-data-modal .modal-btn-option { min-height: 0; height: 100%; display:flex; align-items:center; justify-content:center; }
#add-data-modal .modal-btn-option.col-span-2 { grid-column: span 2; }

/* Smaller screens: slightly shorter rows */
@media (max-width: 480px) {
    #add-data-modal .grid.auto-rows-fr { grid-auto-rows: 6rem; }
}

#spark-glucose, #spark-pressure, #spark-spo2, #weekly-chart, #weekly-main-chart { width: 100% !important; height: 100% !important; display: block; }

/* Botón flotante - armonizar con btn-primary */
.btn-float-add {
    background: #39FF14;
    color: #000;
    border: 2px solid #000;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: none;
    transition: transform .12s, box-shadow .12s;
}

/* --- CALENDAR ARROWS --- */
.cal-arrow-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:8px; border:2px solid #000;
    background:#fff; color:#000; transition: color .12s ease, border-color .12s ease, transform .12s ease;
}
.cal-arrow-btn svg { stroke: currentColor; }
.cal-arrow-btn:hover { color: #39FF14; border-color: #39FF14; transform: translateY(-2px); }

/* --- AGENDA DOT (punto verde que parpadea) --- */
.agenda-dot {
    position: absolute; bottom: 6px; right: 6px;
    width: 8px; height: 8px; border-radius: 9999px;
    background: #39FF14; box-shadow: 0 0 8px rgba(57,255,20,0.9);
    animation: pulse-neon 1.2s infinite ease-in-out;
}
@keyframes pulse-neon {
    0% { transform: scale(0.9); opacity: 0.9; box-shadow: 0 0 2px rgba(57,255,20,0.6); }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px rgba(57,255,20,0.95); }
    100% { transform: scale(0.95); opacity: 0.9; box-shadow: 0 0 2px rgba(57,255,20,0.6); }
}

/* Notif badge: small neon pulsing dot for header notifications */
.notif-dot {
    position: absolute; top: -4px; right: -4px;
    width: 10px; height: 10px; border-radius: 9999px;
    background: #39FF14; border: 2px solid #fff; box-shadow: 0 0 8px rgba(57,255,20,0.95);
    animation: pulse-neon 1.1s infinite ease-in-out;
}


/* --- FILTROS EN HISTORIALES (Glucosa / Presión / Peso) --- */
.filter-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fbfbfb;
    border: 2px solid #e5e7eb;
    padding: 0.35rem 0.6rem;
    border-radius: 9999px;
}
.filter-pill:hover { border-color: #39FF14; box-shadow: none; }
.filter-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.filter-pill .input-field,
.filter-pill input[type="month"],
.filter-pill input[type="date"] {
    background: transparent;
    border: none;
    outline: none;
    padding: 0.25rem 0.35rem;
    font-size: 14px;
    color: #111827;
    min-width: 150px;
}

@media (max-width: 640px) {
    .filter-pill { padding: 0.4rem; }
    .filter-pill .input-field { min-width: 120px; }
}

.btn-float-add:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #000; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dash-icon svg { width:1.6rem; height:1.6rem; }
    .card-sq { padding:0.6rem !important; }
    .card-rect { padding:0.6rem 0.8rem !important; }
    .modal-btn-option span { font-size:0.85rem; }
    .btn-float-add { width:40px; height:40px; font-size:1.1rem; }
}
@media (max-width: 480px) {
    .dash-icon svg { width:1.4rem; height:1.4rem; }
    .card-sq { padding:0.5rem !important; }
    .card-rect { padding:0.5rem 0.6rem !important; }
    .modal-btn-option { padding:0.5rem; }
    .modal-btn-option span { font-size:0.8rem; }
    .btn-float-add { width:36px; height:36px; font-size:1rem; }
}

/* Dashboard: compact mode to fit beside sidebar */
#dashboard > .grid,
#dashboard .grid {
    gap: 0.6rem !important;
}
#dashboard .card-sq { padding: 0.45rem !important; }
#dashboard .card-rect { padding: 0.45rem 0.6rem !important; }

/* Reduce prominent numbers and labels inside cards */
.theme-card .text-4xl { font-size: 1.25rem !important; }
.theme-card .text-3xl { font-size: 1.05rem !important; }
.theme-card .text-xs { font-size: 0.67rem !important; }

/* Reduce vertical spacing inside cards */
.theme-card .mt-2 { margin-top: 0.35rem !important; }

/* Slightly smaller icons inside dashboard cards to save space */
#dashboard .dash-icon svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 1024px) {
    #dashboard > .grid, #dashboard .grid { gap: 0.5rem !important; }
    #dashboard .card-sq { padding: 0.45rem !important; }
    .theme-card .text-4xl { font-size: 1.15rem !important; }
}

/* Fluid scaling for typography, padding and icons */
.theme-card .text-4xl { font-size: clamp(1.05rem, 2.5vw, 1.6rem) !important; }
.theme-card .text-3xl { font-size: clamp(0.9rem, 2vw, 1.25rem) !important; }
#dashboard .card-sq { padding: clamp(0.45rem, 0.8vw, 0.9rem) !important; }
#dashboard > .grid { gap: clamp(0.4rem, 0.8vw, 1rem) !important; }
.dash-icon svg { width: clamp(1.25rem, 2.5vw, 2rem); height: clamp(1.25rem, 2.5vw, 2rem); }
.btn-float-add { min-width: 44px; min-height: 44px; }

/* For very large screens keep comfortable spacing */
@media (min-width: 1440px) {
    #dashboard .card-sq { padding: 1rem !important; }
    .theme-card .text-4xl { font-size: 1.9rem !important; }
    #dashboard > .grid { gap: 1rem !important; }
}

/* Cuando la sidebar está colapsada en escritorio (ya sea con clase .sidebar-collapsed o con `w-20`),
   mostrar un botón fijo para reabrirla */
@media (min-width: 768px) {
    #sidebar.sidebar-collapsed ~ main #mobile-menu-button,
    #sidebar.w-20 ~ main #mobile-menu-button {
        display: block !important;
        position: fixed;
        /* colocar justo a la derecha de la sidebar colapsada (5rem) */
        left: 5.5rem;
        right: auto;
        top: 0.75rem;
        z-index: 99999;
        background: transparent;
        border: none;
        padding: 0.35rem;
        border-radius: 0.375rem;
        box-shadow: none;
    }
    /* Asegurar visibilidad y contraste cuando esté fijo */
    #sidebar.sidebar-collapsed ~ main #mobile-menu-button svg,
    #sidebar.w-20 ~ main #mobile-menu-button svg { width: 1.5rem; height: 1.5rem; color: #39FF14 !important; stroke: #39FF14 !important; fill: none !important; }
}

/* Evitar icono duplicado: ocultar el botón interno del `aside` cuando la barra está en mini o colapsada */
#sidebar.w-20 .brand-container + button,
#sidebar.sidebar-collapsed .brand-container + button {
    display: none !important;
}

/* Cuando la sidebar está expandida (`w-64`) el botón toggle interno debe mostrarse en neon (silueta).
   Ocultar el botón fijo externo en ese caso para evitar duplicados visuales. */
#sidebar.w-64 .brand-container + button {
    display: block !important;
    color: #39FF14 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#sidebar.w-64 .brand-container + button svg {
    stroke: #39FF14 !important;
    fill: none !important;
    color: #39FF14 !important;
}

/* Ocultar botón fijo (external) cuando la sidebar está expandida */
#sidebar.w-64 ~ main #mobile-menu-button { display: none !important; }

/* ===== Ajustes para evitar scroll al expandir la sidebar ===== */
/* Compactar tamaños y gaps en modo expandido para que todo quepa en viewport */
#sidebar.w-64 {
    padding-top: 0.4rem;
}

#sidebar.w-64 .brand-container .w-10 { width: 2.2rem; height: 2.2rem; }
#sidebar.w-64 .sidebar-text { font-size: 0.95rem; }

#sidebar.w-64 nav { gap: 0.35rem; }
#sidebar.w-64 .nav-btn { padding: 0.45rem 0.5rem; }
#sidebar.w-64 .nav-btn .sidebar-text { display: inline-block; font-size: 0.92rem; }
#sidebar.w-64 .nav-icon svg, #sidebar.w-64 .nav-icon { width: 1.45rem; height: 1.45rem; }

/* Menor separación vertical global en lista cuando está expandida */
#sidebar.w-64 .space-y-3 > * + * { margin-top: 0.35rem !important; }

/* Asegurar que el aside no scrollée en escritorio al estar expandido */
#sidebar.w-64 { overflow-y: hidden; }

/* ===== Footer sticky en móvil y en general: botón cerrar sesión siempre visible ===== */
/* Convertir el footer en sticky dentro del panel para que se muestre sin depender del scroll del documento */
#sidebar .mt-auto {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding: 0.6rem 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    z-index: 40;
}

/* Cuando el sidebar está activo en móvil, permitir scroll dentro del panel pero mantener footer pegado */
@media (max-width: 768px) {
    #sidebar.active { overflow-y: auto; }
    #sidebar.active .mt-auto { position: sticky; bottom: 0; background: #fff; }
    #sidebar.active nav { padding-bottom: 3.5rem; }
}

/* Forcing neon color and no background on the menu button, and prevent color change */
#mobile-menu-button {
    color: #39FF14 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#mobile-menu-button svg { fill: currentColor; stroke: currentColor; color: #39FF14 !important; }
#mobile-menu-button:hover, #mobile-menu-button:active, #mobile-menu-button:focus { color: #39FF14 !important; background: transparent !important; box-shadow: none !important; border: none !important; }

/* Overlay should not intercept clicks when inactive */
#menu-overlay { pointer-events: none; }
#menu-overlay.active { pointer-events: auto; display: block; }