/* Google Font Import - Poppins. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE THEMING MODERNO
   ═══════════════════════════════════════════════════════════════════
   Importamos el nuevo sistema de variables de tema que proporciona:
   - Variables semánticas que cambian automáticamente con dark/light
   - Variables de diseño (spacing, typography, shadows, etc.)
   - Variables específicas por componente (button, input, card, etc.)

   IMPORTANTE: Este import debe estar ANTES de cualquier otro CSS
   para que las variables estén disponibles en todo el framework.
   ═══════════════════════════════════════════════════════════════════ */
@import url('./theme-variables.css');

/* ===== Base HTML rem setup ===== */
html {
    font-size: 16px; /* 1rem = 16px base */
}

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

hr {
    background-color: var(--border-light);
}

/* ===== UNIVERSAL THEME INITIALIZATION ===== */
/* Default to dark mode naturally - this is the framework's nature */
html {
    color-scheme: dark;
}

html, html.dark {
    /* Dark mode as default state */
    --bg-body: #181A1B;
    --bg-sidebar: #1E2021;
    --bg-surface: #3a3b3c;
    --bg-surface-secondary: #2d2e2f;
    --bg-surface-hover: #404040;
    --bg-toggle: #ffffff;
    --bg-input: #2d2e2f;
    --bg-disabled: #4a4b4c;

    --text-primary: #ffffff;
    --text-secondary: #dddddd;
    --text-tertiary: #b0b0b0;
    --text-on-focus: #ffffff;
    --text-disabled: #808080;

    --border-light: #363B3D;
    --border-medium: #363B3D;
    --border-dark: #363B3D;
    --border-primary: #363B3D;
    --border-focus: #3ba1ff;

    --accent-primary: #3ba1ff;
    --accent-primary-alpha: rgba(59, 161, 255, 0.2);
    --accent-hover: #2b91ef;
    --accent-light: rgba(59, 161, 255, 0.1);
}

/* Light mode is the override, not the default */
html.light {
    color-scheme: light;

    --bg-body: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-surface: #F5F5F5;
    --bg-surface-secondary: #f0f0f0;
    --bg-surface-hover: #e5e5e5;
    --bg-toggle: #dddddd;
    --bg-input: #ffffff;
    --bg-disabled: #f5f5f5;

    --text-primary: #000000;
    --text-secondary: #707070;
    --text-tertiary: #909090;
    --text-on-focus: #ffffff;
    --text-disabled: #a0a0a0;

    --border-light: #dddddd;
    --border-medium: #a0a0a0;
    --border-dark: #5a5a5a;
    --border-primary: #b0b0b0;
    --border-focus: #3ba1ff;

    --accent-primary: #3ba1ff;
    --accent-primary-alpha: rgba(59, 161, 255, 0.15);
    --accent-hover: #2b91ef;
    --accent-light: rgba(59, 161, 255, 0.1);
}

/* Light mode for body when no class is present - compatibility */
body:not(.dark), body.light {
    /* Apply light theme variables to ensure consistency */
    background-color: #ffffff;
    color: #000000;
}

:root {
    /* ===== Paleta Base de Colores ===== */
    --color-white: #ffffff;
    --color-neutral-50: #f9f9f9;
    --color-neutral-100: #f6f5ff;
    --color-neutral-150: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #dddddd;
    --color-neutral-400: #a0a0a0;
    --color-neutral-500: #707070;
    --color-neutral-600: #5a5a5a;
    --color-neutral-700: #404040;
    --color-neutral-800: #3a3b3c;
    --color-neutral-850: #242526;
    --color-neutral-900: #18191a;
    --color-black: #000000;
    
    /* ===== Color de Focus/Accent ===== */
    --color-focus: #3ba1ff;
    --color-focus-hover: #2b91ef;
    --color-focus-light: rgba(59, 161, 255, 0.1);
    
    /* ===== Colores adicionales ===== */
    --color-blue-600: #007DFB;
    --color-blue-700: #0069d9;
    --color-blue-800: #0057B4;
    --color-gray-100: #f0f4f8;
    --color-gray-500: #60A5FA;
    --color-gray-600: #4caf50;
    --color-gray-700: #ff9800;
    --color-red-500: #ff6b6b;
    --color-red-600: #ff4444;
    --color-red-700: #ff0000;
    --color-orange-50: #fff4ed;
    --color-orange-200: #ffd4bb;
    --color-orange-400: #ffa570;
    --color-orange-600: #FF7E41;
    --color-orange-700: #e66f3a;
    --color-orange-800: #cc5f32;
    --color-green-500: #76cb84;
    --color-green-600: #4caf50;
    --color-green-700: #45a049;
    --color-gray-200: #f4f4f4;
    --color-gray-300: #ccc;
    --color-gray-400: #e0e0e0;
    --color-gray-800: #121212;
    
    /* ===== Colores con transparencia ===== */
    --color-black-10: rgba(0, 0, 0, 0.1);
    --color-black-20: rgba(0, 0, 0, 0.2);
    --color-black-30: rgba(0, 0, 0, 0.3);
    --color-black-60: rgba(0, 0, 0, 0.6);
    --color-white-20: rgba(255, 255, 255, 0.2);
    --color-white-30: rgba(255, 255, 255, 0.3);
    --color-white-50: rgba(255, 255, 255, 0.5);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-17: rgba(255, 255, 255, 0.17);
    --color-focus-30: rgba(59, 161, 255, 0.3);
    --color-focus-60: rgba(59, 161, 255, 0.6);
    --color-gray-hover: rgba(120, 120, 120, 0.4);
    --color-gray-active: rgba(120, 120, 120, 0.6);
    
    /* ===== Sombras ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px var(--color-focus-light);
    
    /* Sombras específicas del sistema */
    --shadow-light: 3px 0px 7px var(--color-black-10);
    --shadow-sidebar: 7px 0px 7px rgba(0, 0, 0, 0.03);
    --shadow-card: var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);
    
    /* ===== Transiciones ===== */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* ===== Tamaños Base en REM (20% más pequeño que original) ===== */
    --sidebar-width: 15rem;          /* 240px (300px - 20%) */
    --sidebar-width-collapsed: 4.4rem; /* 70px (88px - 20%) */
    --sidebar-padding: 0.5rem 0.75rem;  /* 8px 12px (más compacto) */
    --menu-item-height: 2.5rem;        /* 40px (50px - 20%) */
    --toggle-size: 1.25rem;             /* 20px (25px - 20%) */
    --toggle-offset: -1.25rem;          /* -20px (-25px - 20%) */
    --search-height: 2.5rem; 
              /* 56px (70px - 20%) */
    --search-box-collapsed-size: 3rem; /* 48px - cabe dentro del sidebar colapsado */
    
    /* ===== Border Radius ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
    
    /* Border radius específicos */
    --radius-card: var(--radius-xl);
    --radius-button: var(--radius-lg);
    --radius-input: var(--radius-md);
    
    /* ===== Bordes ===== */
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    
    /* ===== Espaciados (más compactos) ===== */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 0.75rem;   /* 12px */
    --space-lg: 1rem;      /* 16px */
    --space-xl: 1.5rem;    /* 24px */
    --space-2xl: 2rem;     /* 32px */
    --space-3xl: 3rem;     /* 48px */
    
    /* Espaciados específicos para componentes */
    --spacing-card: var(--space-xl);
    --spacing-section: var(--space-2xl);
    
    /* ===== Espaciado uniforme para menú ===== */
    --menu-item-spacing: 0.375rem; /* 6px - término medio entre actual grande y pequeño */
    
    /* ===== Tipografía (más pequeña) ===== */
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.8125rem; /* 13px */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-lg: 1rem;      /* 16px */
    --font-size-xl: 1.125rem;  /* 18px */
    
    /* ===== Iconos ===== */
    --icon-size-sm: 1rem;      /* 16px */
    --icon-size-base: 1.125rem; /* 18px */
    --icon-size-lg: 1.25rem;   /* 20px */
}

body {
    min-height: 100vh;
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: var(--transition-slow);
}




body.dark ion-icon, body.dark .name {
     
    color: white;

    
}



/* Principal content viewer - base styles */
#principal-content-viwer{
    overflow-x: auto;
    overflow-y: auto;
    transition: var(--transition-normal);
    background: var(--bg-body);
}

/* Mobile-first responsive design - siguiendo contrato */
/* Mobile: Base styles (0-767px) - sidebar como spacer */
#parent-content {
    flex-direction: row; /* Mantener row para que shade funcione */
}

#content-sidebar-shade {
    flex-shrink: 0;
    width: var(--sidebar-width); /* Usar ancho del sidebar para reservar espacio */
    min-width: var(--sidebar-width);
    height: 100%;
}

#principal-content-viwer {
    flex: 1; /* Ocupar espacio restante */
    width: 0; /* Para flexbox correcto */
    min-width: 0;
    height: 100vh;
}

/* Tablet and up: 768px+ - estilos ya están definidos en base */
@media (min-width: 48rem) {
    /* Los estilos base ya son correctos para tablet+ */
    /* Solo agregamos optimizaciones específicas si es necesario */
}






/* Parent content - base styles */
#parent-content{
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    transition: var(--transition-normal);
    overflow: hidden;
}



















a {
    color: var(--accent-primary);
    transition: var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}



body.dark .module-container{
    background-color: transparent;
}


#home-page{
    padding: var(--space-sm);
}

.spinner {
    animation: spin 1s linear infinite;
}





/* Works on Firefox */
/* * {
    scrollbar-width: thin;
    scrollbar-color: blue orange;
  } */
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 0.5rem; /* 8px - un poquito más grueso */
  }
  
  /* *::-webkit-scrollbar-track {
    background: orange;
  }
   */
  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 0.1875rem; /* 3px - más proporcionado */
    border: 0.125rem solid var(--border-light); /* 2px - más delgado */
    transition: var(--transition-normal);
  }