/* assets/css/app.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
    --primary-blue: #0052cc;
    --primary-hover: #0043a8;
    --bg-surface: #f4f7f6;
    --card-surface: #ffffff;
    --text-primary: #212b36;
    --text-secondary: #637381;
    --border-soft: #ebedf2;
    --accent-purple: #6554c0;
    
    /* Variables para el Sidebar Dark Mode */
    --sidebar-bg: #111827; /* Azul marino oscuro / casi negro */
    --sidebar-border: #1f2937; /* Borde oscuro casi invisible */
    --sidebar-text-primary: #f9fafb; /* Blanco suave */
    --sidebar-text-secondary: #9ca3af; /* Gris claro */
    --sidebar-hover-bg: #1f2937; /* Fondo al pasar el ratón */
    
    --sidebar-width: 65px; /* Más angosto para esconder letras */
    --sidebar-width-expanded: 260px; /* Ancho al expandir */
    --topbar-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh;
}

/* Sidebar Estándar Minimizada e Inteligente */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden; /* Oculta el texto extra horizontalmente */
    white-space: nowrap; /* Impide que el texto baje a la siguiente línea */
    padding: 20px 12px; /* Menos padding para evitar scroll */
    z-index: 1000; /* Alto z-index para flotar sobre el contenido */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

/* Al pasar el mouse, se expande y flota con sombra */
.sidebar:hover {
    width: var(--sidebar-width-expanded);
    box-shadow: 5px 0 25px rgba(0,0,0,0.5);
}

/* TRUCO: Ocultar texto (color transparente) cuando está minimizado para evitar letras a medias */
.sidebar:not(:hover) .nav-item,
.sidebar:not(:hover) .nav-group-header,
.sidebar:not(:hover) .nav-child {
    color: transparent !important;
}
.sidebar:not(:hover) .brand {
    -webkit-text-fill-color: transparent !important;
    background: transparent !important;
}
.sidebar:not(:hover) .brand i {
    -webkit-text-fill-color: #00f0ff !important;
}

/* Ocultar la flecha de los submenús al minimizar */
.sidebar:not(:hover) .nav-chevron {
    opacity: 0;
}

.sidebar .brand {
    font-size: 17px;
    font-weight: 800; /* Más grueso para que destaque el gradiente */
    background: linear-gradient(90deg, #00f0ff, #b026ff); /* Gradiente Cyan a Púrpura Estilo GP CONNECT */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px; /* Menos margen inferior */
    padding-left: 8px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}
.sidebar .brand i {
    -webkit-text-fill-color: #00f0ff; /* Mantener el icono solido si el texto tiene clip */
    font-size: 22px; /* Un poco más grande para el logo */
}

.sidebar .nav-item {
    display: flex;
    align-items: center;
    padding: 10px 12px; /* Menos padding vertical para que quepa todo sin scroll */
    color: var(--sidebar-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.2s;
    width: 100%; /* Asegura que mantenga la forma al expandirse */
}

.sidebar .nav-item:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-text-primary);
}

/* --- ESTILOS DE ÍCONOS (FASE 2) --- */
.sidebar .nav-item i, .nav-group-header i:first-child {
    font-size: 18px; /* Iconos más pequeños según lo solicitado */
    color: #64748b; /* Color gris profesional y unificado (menos arcoíris) */
    transition: color 0.3s, transform 0.3s, filter 0.3s;
}

/* Efecto Hover - Iluminación sutil */
.sidebar .nav-item:hover i, .nav-group-header:hover i:first-child {
    color: #e2e8f0; /* Se vuelve casi blanco al pasar el ratón */
    transform: scale(1.10); /* Crecimiento más sutil */
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
}

/* Estado Activo Rediseñado */
.sidebar .nav-item.active {
    background-color: rgba(0, 82, 204, 0.15); /* Fondo sutil translúcido */
    color: #ffffff;
    border-left: 4px solid #00f0ff; /* Borde izquierdo neón cyan */
    border-radius: 0 6px 6px 0; /* Quitar radio izquierdo por el borde */
    box-shadow: inset 20px 0 20px -20px rgba(0, 240, 255, 0.3); /* Sombra interna */
}
.sidebar .nav-item.active i {
    color: #00f0ff !important; /* Todo ícono activo se vuelve del color principal */
    filter: drop-shadow(0 0 8px #00f0ff);
}

/* App Wrapper y Topbar */
.app-wrapper {
    flex-grow: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-width: 0;          /* evita que el grid hijo infle el wrapper */
    overflow-x: hidden;    /* corta cualquier desbordamiento horizontal */
}

.topbar {
    height: var(--topbar-height);
    background-color: var(--card-surface);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    padding: 0 30px;
    justify-content: space-between;
}

.main-content {
    padding: 30px;
    flex-grow: 1;
    max-width: 100%;     /* no se sale del wrapper */
    overflow-x: hidden;
}

/* Tipografía Básica */
.page-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Tarjeta Base */
.card {
    background-color: var(--card-surface);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.03);
    border: 1px solid var(--border-soft);
}

/* ---- SUBMENÚ GRUPO COLAPSABLE ---- */
.nav-group { margin-bottom: 4px; }

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px; /* Menos padding */
    color: var(--sidebar-text-secondary);
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    user-select: none;
    margin-bottom: 4px;
}
.nav-group-header:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-primary); }
.nav-group.open .nav-group-header { color: #ffffff; }

.nav-chevron {
    font-size: 13px;
    transition: transform 0.25s;
}
.nav-group.open .nav-chevron { transform: rotate(90deg); }

.nav-group-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 0px; /* Cero padding para que los iconos se alineen perfecto cuando está minimizado */
    background-color: #0b0f19; /* Fondo más oscuro para dar profundidad */
    border-radius: 4px;
    margin-top: 4px;
}
.nav-group.open .nav-group-children { max-height: 400px; padding-top: 5px; padding-bottom: 5px; }

.nav-child {
    font-size: 13px !important;
    padding: 8px 12px !important; /* Mismo padding que el item padre para alineación perfecta */
    margin-bottom: 2px !important;
    color: #64748b !important; /* Más gris cuando está inactivo */
    transition: padding-left 0.3s ease !important; /* Animación suave al expandirse */
}
.nav-child:hover {
    color: #e2e8f0 !important; /* Ilumina al pasar ratón */
    background: transparent !important;
}

/* Efecto Mágico: Desplazar a la derecha (indentar) los hijos SOLO cuando la barra lateral está expandida */
.sidebar:hover .nav-child {
    padding-left: 28px !important;
}
.nav-child.active {
    color: #00f0ff !important;
    background-color: transparent !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* --- CUSTOM SCROLLBAR PARA SIDEBAR (FASE 4) --- */
/* Ocultar barra de desplazamiento visualmente pero permitir scroll si aún fuera necesario en pantallas muy pequeñas */
.sidebar::-webkit-scrollbar {
    width: 0px; /* Invisible para que quede totalmente limpio */
}
.sidebar {
    scrollbar-width: none; /* Firefox */
}

/* ── Impresión global: eliminar margen del sidebar ── */
@media print {
    body { display:block !important; }
    .sidebar { display:none !important; }
    .app-wrapper {
        margin-left:0 !important;
        display:block !important;
        width:100% !important;
    }
    .topbar  { display:none !important; }
    .main-content {
        padding:16px !important;
        max-width:100% !important;
    }
}