/* --- PROPERTY OF ZABALA SOLUTIONS INC. - https://zabala.solutions
Provided "as is" without warranties. Unauthorized use, copying, or distribution is prohibited without written permission. Authors are not liable for any damages or claims arising from this software.
---
PROPIEDAD DE ZABALA SOLUTIONS INC. - https://zabala.solutions
Proporcionado "tal cual" sin garantías. Prohibido su uso, copia o distribución sin permiso por escrito. Los autores no son responsables por daños o reclamos derivados de este software.
--- */

/* ========================================
   VARIABLES UNIFICADAS - LAYOUT Y NAVEGACIÓN
   ========================================
   Este archivo define variables CSS unificadas para mantener
   consistencia entre navbar, breadcrumb y sidebar
   ======================================== */

:root {
  /* ===== DIMENSIONES PRINCIPALES ===== */
  --layout-nav-height: 3rem;                    /* Altura del navbar - más espacio */
  --layout-breadcrumb-height: 1.5rem;           /* Altura del breadcrumb */
  --layout-sidebar-width: 16rem;                /* Ancho del sidebar */
  --layout-sidebar-width-collapsed: 4rem;       /* Ancho colapsado */
  
  /* ===== ESPACIADO UNIFICADO ===== */
  --layout-padding-compact: 0.05rem;            /* Padding compacto - muy reducido */
  --layout-padding-normal: 0.5rem;              /* Padding normal */
  --layout-padding-large: 1rem;                 /* Padding grande */
  
  /* ===== MARGIN TOP CALCULADO ===== */
  --layout-content-margin-top: calc(var(--layout-nav-height) + var(--layout-breadcrumb-height));
  
  /* ===== Z-INDEX HIERARCHY ===== */
  --z-index-navbar: 9999;                       /* Navbar - más alto */
  --z-index-dropdown: 100000;                   /* Dropdowns - muy alto */
  --z-index-sidebar: 1000;                      /* Sidebar */
  --z-index-breadcrumb: 100;                    /* Breadcrumb - más bajo */
  --z-index-content: 10;                        /* Contenido */
  
  /* ===== COLORES UNIFICADOS ===== */
  --layout-bg-primary: var(--cui-body-bg, #ffffff);
  --layout-bg-secondary: var(--cui-light, #f8f9fa);
  --layout-border-color: var(--cui-border-color, #dee2e6);
  --layout-text-primary: var(--cui-body-color, #212529);
  --layout-text-secondary: var(--cui-secondary-color, #6c757d);
  
  /* ===== SOMBRAS UNIFICADAS ===== */
  --layout-shadow-subtle: 0 0.5px 0 0 var(--layout-border-color), 0 -0.5px 0 0 var(--layout-border-color);
  --layout-shadow-normal: 0 1px 2px rgba(0,0,0,0.1);
  --layout-shadow-elevated: 0 2px 4px rgba(0,0,0,0.1);
  
  /* ===== TRANSICIONES UNIFICADAS ===== */
  --layout-transition-fast: all 0.15s ease;
  --layout-transition-normal: all 0.3s ease;
  --layout-transition-slow: all 0.5s ease;
  
  /* ===== TIPOGRAFÍA UNIFICADA ===== */
  --layout-font-size-small: 0.85rem;
  --layout-font-size-normal: 0.875rem;
  --layout-font-size-large: 1rem;
  --layout-line-height-compact: 1.1;
  --layout-line-height-normal: 1.2;
}

/* ===== MEDIA QUERIES UNIFICADAS ===== */
@media (max-width: 991.98px) {
  :root {
    --layout-nav-height: 3rem;
    --layout-breadcrumb-height: 1.5rem;
    --layout-content-margin-top: calc(var(--layout-nav-height) + var(--layout-breadcrumb-height));
  }
}

@media (max-width: 767.98px) {
  :root {
    --layout-padding-compact: 0.15rem;
    --layout-padding-normal: 0.3rem;
    --layout-font-size-small: 0.8rem;
  }
}