/* =============================================================================
   css/components.css - Componentes de UI Reutilizables y Estilos Premium
   BAR ANTIGRAVITY ERP — Versión 2.0

   PRINCIPIOS DE ESTE ARCHIVO:
   - Cero valores hexadecimales fijos. Todos los colores consumen tokens de theme.css.
   - Glassmorphism unificado: var(--color-surface) + backdrop-filter: blur(10px)
   - Bordes finos con var(--color-primary) a baja opacidad
   - Sombras exclusivamente mediante var(--shadow-panel)
   - Botones sólidos con hover de opacidad suave (sin degradados estridentes)
   - Todo contenedor con fondo fuerza color: var(--color-text)
   ============================================================================= */


/* =============================================================================
   SISTEMA DE CONTENEDORES ATÓMICOS — .erp-panel
   Clase base única para todos los paneles de datos del ERP.
   Define la identidad visual del contenedor: superficie, borde, sombra y tipografía.
   ============================================================================= */

/* Contenedor atómico principal — propiedades exactas del sistema */
.erp-panel {
    background:              var(--color-surface);
    border:                  1px solid rgba(128, 128, 128, 0.2);
    border-radius:           12px;
    padding:                 16px;
    box-shadow:              var(--shadow-panel);
    /* Sin backdrop-filter — causaba texto borroso en Chromium/Safari ("efecto sin lentes") */
    /* Legibilidad garantizada — todo texto dentro hereda este token */
    color:                   var(--color-text);
    transition:
        background-color 0.3s ease,
        border-color     0.3s ease,
        box-shadow       0.3s ease;
}

/* Encabezados dentro de .erp-panel — sin fondos ni bordes que los oscurezcan */
.erp-panel h1,
.erp-panel h2,
.erp-panel h3,
.erp-panel h4,
.erp-panel h5,
.erp-panel h6 {
    color:           var(--color-text);
    background:      none;
    border:          none;
    text-shadow:     none;
    /* Anular posibles gradientes webkit de componentes heredados */
    -webkit-text-fill-color: var(--color-text);
    background-clip: unset;
    -webkit-background-clip: unset;
}

/* Textos secundarios dentro de .erp-panel */
.erp-panel p,
.erp-panel span,
.erp-panel label {
    color: var(--color-text);
}

/* Hover: borde más visible sin transformación brusca */
.erp-panel:hover {
    border-color: rgba(128, 128, 128, 0.38);
    box-shadow:   var(--shadow-panel), 0 0 0 1px rgba(128, 128, 128, 0.08);
}


/* --- Modificadores de .erp-panel ---
   Para fondos diferenciados sin romper el sistema de tokens.        */

/* Variante con acento secundario — para destacar métricas o KPIs */
.erp-panel--accent {
    background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface) 92%);
    border-color: color-mix(in srgb, var(--color-secondary) 30%, rgba(128,128,128,0.2));
}

/* Variante de alerta — para paneles que requieren atención */
.erp-panel--alert {
    background:  color-mix(in srgb, var(--color-primary) 6%, var(--color-surface) 94%);
    border-color: color-mix(in srgb, var(--color-primary) 35%, rgba(128,128,128,0.2));
}

/* Variante compacta — para tarjetas en listas densas (comandas, ítems) */
.erp-panel--compact {
    padding:       10px 12px;
    border-radius: 8px;
}

/* Variante sin sombra — para paneles anidados dentro de otro .erp-panel */
.erp-panel--flat {
    box-shadow: none;
    border-color: rgba(128, 128, 128, 0.12);
}


/* =============================================================================
   ALIAS DE RETROCOMPATIBILIDAD
   Las clases existentes en el HTML generado por JS (.glass-card, .stat-widget,
   .modal-content, .welcome-panel) adoptan automáticamente el sistema atómico
   sin necesidad de modificar ningún archivo JS.
   ============================================================================= */

.glass-card,
.stat-widget,
.modal-content,
.welcome-panel {
    background:              var(--color-surface);
    border:                  1px solid rgba(128, 128, 128, 0.2);
    border-radius:           12px;
    box-shadow:              var(--shadow-panel);
    /* Sin backdrop-filter — la profundidad la dan la opacidad y el box-shadow */
    color:                   var(--color-text);
    transition:
        background-color 0.3s ease,
        border-color     0.3s ease,
        box-shadow       0.3s ease;
}

/* Mantener el padding mayor de .glass-card para compatibilidad con layouts existentes */
.glass-card {
    border-radius: 16px;
    padding:       30px;
}

/* Hover unificado para todos los alias */
.glass-card:hover,
.stat-widget:hover,
.modal-content:hover,
.welcome-panel:hover {
    border-color: rgba(128, 128, 128, 0.38);
}



/* =============================================================================
   TIPOGRAFÍA DE COMPONENTES
   ============================================================================= */

/* Título principal — color sólido legible en ambos modos */
.title-primary {
    font-family:     var(--font-title);
    font-weight:     800;
    font-size:       2rem;
    /* Color sólido del texto del sistema — sin gradientes que rompan legibilidad */
    color:           var(--color-text);
    letter-spacing:  -0.02em;
    margin-bottom:   8px;
    line-height:     1.2;
}

/* Subtítulo — texto atenuado del sistema */
.subtitle-primary {
    font-size:     0.95rem;
    color:         hsl(var(--text-muted));
    margin-bottom: 25px;
}


/* =============================================================================
   FORMULARIOS
   ============================================================================= */

.form-group {
    margin-bottom: 20px;
    display:       flex;
    flex-direction: column;
    gap:           8px;
}

.form-label {
    font-family:     var(--font-title);
    font-size:       0.75rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    color:           hsl(var(--text-muted));
}

.form-control {
    width:            100%;
    background-color: hsl(var(--bg-input));
    border:           1px solid hsl(var(--border));
    border-radius:    8px;
    padding:          12px 16px;
    /* Texto explícito — evita herencia de colores fijos */
    color:            var(--color-text);
    font-family:      var(--font-body);
    font-size:        0.95rem;
    transition:       border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Focus: anillo con color primario del tema, fondo del token de sistema */
.form-control:focus {
    border-color:     hsl(var(--primary));
    box-shadow:       0 0 0 3px hsla(var(--primary), 0.15);
    background-color: hsl(var(--bg-input));
    outline:          none;
}


/* =============================================================================
   BOTONES — SÓLIDOS, REDONDEADOS Y CON HOVER DE OPACIDAD SUAVE
   Sin degradados estridentes. Fondo sólido + transición de opacidad en hover.
   ============================================================================= */

/* Base común — tipografía, geometría y transición de todos los botones */
.btn {
    font-family:    var(--font-title);
    font-weight:    600;
    font-size:      0.95rem;
    padding:        12px 24px;
    border-radius:  8px;
    border:         none;
    cursor:         pointer;
    /* Transición de opacidad suave en lugar de transformaciones bruscas */
    transition:     opacity 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            8px;
}

/* Botón primario — fondo sólido del color primario del tema */
.btn-primary {
    background-color: var(--color-primary);
    /* Texto garantizado por el token de contraste — siempre legible */
    color:            var(--color-btn-text);
    /* Sombra tenue del glow del sistema en lugar de box-shadow duro */
    box-shadow:       var(--glow-shadow);
    border:           1px solid transparent;
}

/* Hover primario: baja opacidad levemente — elegante, no brusco */
.btn-primary:hover {
    opacity:    0.88;
    box-shadow: var(--glow-shadow), 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* Active: opacidad plena recuperada + ligera compresión visual */
.btn-primary:active {
    opacity:   1;
    transform: scale(0.98);
}

/* Botón secundario — contorno con borde primario sutil, texto del sistema */
.btn-secondary {
    background-color: transparent;
    border:           1px solid color-mix(in srgb, var(--color-primary) 25%, hsl(var(--border)) 75%);
    color:            var(--color-text);
}

/* Hover secundario: relleno muy tenue del primario */
.btn-secondary:hover {
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-color:     color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* Active: feedback táctil de compresión */
.btn-secondary:active {
    transform: scale(0.98);
}

/* Botón enlace — sin fondo, solo color de acento */
.btn-link {
    background:     none;
    border:         none;
    color:          hsl(var(--accent));
    font-family:    var(--font-title);
    font-weight:    500;
    font-size:      0.85rem;
    cursor:         pointer;
    text-decoration: none;
    transition:     color 0.2s ease, opacity 0.2s ease;
    align-self:     flex-start;
}

.btn-link:hover {
    color:   hsl(var(--accent-hover));
    opacity: 0.85;
}


/* =============================================================================
   NOTIFICACIONES TOAST
   ============================================================================= */

.alert-toast {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    /* Superficie del sistema — legible en ambos modos */
    background:    var(--color-surface);
    color:         var(--color-text);
    border-left:   4px solid var(--color-primary);
    border-radius: 8px;
    padding:       16px 24px;
    box-shadow:    var(--shadow-panel);
    display:       flex;
    align-items:   center;
    gap:           12px;
    z-index:       1000;
    /* Borde superior sutil del sistema */
    border-top:    1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    animation:     slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.alert-toast.success { border-left-color: hsl(var(--success)); }
.alert-toast.danger  { border-left-color: hsl(var(--danger));  }
.alert-toast.warning { border-left-color: hsl(var(--warning)); }

.alert-toast-message {
    font-size:   0.9rem;
    font-weight: 500;
    /* Texto forzado al token de legibilidad — crítico para el toast */
    color:       var(--color-text);
}


/* =============================================================================
   MODALES E INTERFACES SUPERPUESTAS
   ============================================================================= */

.modal-overlay {
    position:        fixed;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    background:      var(--overlay-bg);
    /* FIX 2: El blur SOLO va en el overlay (la cortina). NUNCA en el drawer/panel interno. */
    /* Sin backdrop-filter en el overlay — causa efecto "sin lentes" en todo el fondo */
    display:         flex;
    justify-content: center;
    align-items:     center;
    z-index:         999;
    animation:       fadeIn 0.25s ease forwards;
}

/* El contenido del modal tiene fondo sólido para texto nítido (sin blur heredado) */
.modal-content {
    width:     90%;
    max-width: 450px;
    background: var(--color-surface);
    color:      var(--color-text);
    border:     1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: 16px;
    box-shadow: var(--shadow-panel);
    animation:  scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* FIX 2: Sin backdrop-filter aquí — hereda el blur del overlay pero el panel es opaco */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =============================================================================
   ANIMACIONES ESPECÍFICAS DE COMPONENTES
   ============================================================================= */

@keyframes slideInUp {
    from { transform: translateY(100px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}


/* =============================================================================
   RESET DE ALTA PRIORIDAD — CONSISTENCIA DE SISTEMA DE DISEÑO
   Garantiza que ningún estilo heredado de versiones anteriores pueda
   sobrescribir nuestro sistema de tokens de color.

   ⚠️  NOTA TÉCNICA: .container NO está incluido en este selector porque
   en este proyecto actúa como wrapper de layout (centra/gestiona anchos).
   Forzar background en .container rompe el diseño de auth, dashboard y
   Kanban. Se usa .erp-panel como selector semántico correcto para paneles.
   ============================================================================= */

.erp-panel,
.card,
.panel {
    background-color: var(--color-surface) !important;
    color:            var(--color-text)    !important;
    border:           1px solid rgba(128, 128, 128, 0.2) !important;
    box-shadow:       var(--shadow-panel)  !important;
}

/* Fuerza legibilidad de encabezados dentro de paneles con alta especificidad */
.erp-panel h1, .erp-panel h2, .erp-panel h3,
.erp-panel h4, .erp-panel h5, .erp-panel h6,
.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3 {
    color:                   var(--color-text) !important;
    background:              none             !important;
    -webkit-text-fill-color: var(--color-text) !important;
}

/* Fuerza legibilidad de textos dentro de paneles */
.erp-panel p, .erp-panel span, .erp-panel label,
.card p, .card span, .card label,
.panel p, .panel span, .panel label {
    color: var(--color-text) !important;
}


/* =============================================================================
   NORMALIZACIÓN DE SUBCOMPONENTES HIJOS
   Uniforma inputs, selects, tablas y jerarquía tipográfica dentro de
   cualquier panel del sistema. Garantiza contraste perfecto en Día y Noche.
   ============================================================================= */

/* -------------------------------------------------------------------
   1. CAMPOS DE FORMULARIO DE ALTA FIDELIDAD
   Todo input, select y textarea dentro de un panel adopta el tema activo.
   ------------------------------------------------------------------- */
.erp-panel input,  .erp-panel select,  .erp-panel textarea,
.glass-card input, .glass-card select, .glass-card textarea,
.card input,       .card select,       .card textarea,
.panel input,      .panel select,      .panel textarea {
    background-color: var(--color-bg)              !important;
    color:            var(--color-text)             !important;
    border:           1px solid rgba(128, 128, 128, 0.3) !important;
    border-radius:    6px;
    /* Tipografía coherente con el sistema */
    font-family:      var(--font-body);
    font-size:        0.9rem;
    /* Transición suave al cambiar de tema */
    transition:       background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Estado focus: refuerza el borde con el primario del tema activo */
.erp-panel input:focus,  .erp-panel select:focus,  .erp-panel textarea:focus,
.glass-card input:focus, .glass-card select:focus, .glass-card textarea:focus,
.card input:focus,       .card select:focus,       .card textarea:focus,
.panel input:focus,      .panel select:focus,      .panel textarea:focus {
    border-color: var(--color-primary)                       !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
    outline:      none;
}

/* Placeholder: texto atenuado legible en ambos modos */
.erp-panel input::placeholder,
.glass-card input::placeholder,
.card input::placeholder,
.panel input::placeholder,
.erp-panel textarea::placeholder,
.glass-card textarea::placeholder {
    color:   var(--color-text) !important;
    opacity: 0.45;
}

/* Select: elimina la flecha nativa en sistemas donde el fondo no se hereda bien */
.erp-panel select,
.glass-card select,
.card select,
.panel select {
    -webkit-appearance: none;
    appearance:         none;
    /* Flecha vectorial generada con gradiente conic — sin imagen externa */
    background-image:  linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
                       linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 10px) 55%;
    background-size:   6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right:     36px;
}


/* -------------------------------------------------------------------
   2. JERARQUÍA DE TEXTO CON OPACIDAD CONTROLADA
   Labels, spans y smalls actúan como texto secundario sin competir
   visualmente con los títulos principales.
   ------------------------------------------------------------------- */

/* Labels — etiquetas de campo: visibles pero subordinadas */
.erp-panel label,
.glass-card label,
.card label,
.panel label {
    color:       var(--color-text) !important;
    opacity:     0.80;
    font-size:   0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Spans genéricos — texto inline secundario */
.erp-panel span,
.glass-card span,
.card span,
.panel span {
    color:   var(--color-text) !important;
    opacity: 0.85;
}

/* Small — notas, fechas, metadatos: máxima subordinación visual */
.erp-panel small,
.glass-card small,
.card small,
.panel small {
    color:     var(--color-text) !important;
    opacity:   0.60;
    font-size: 0.78rem;
}

/* Excepción: elementos con color explícito de estado no heredan opacidad reducida */
.erp-panel .text-success, .erp-panel .text-danger, .erp-panel .text-warning,
.glass-card .text-success, .glass-card .text-danger, .glass-card .text-warning {
    opacity: 1 !important;
}


/* -------------------------------------------------------------------
   3. TABLAS E HISTORIALES
   Encabezados (th) y celdas (td) reactivos al tema. Sin fondos grises
   fijos ni degradados heredados de versiones anteriores.
   ------------------------------------------------------------------- */

/* Tabla base dentro de paneles */
.erp-panel table,
.glass-card table,
.card table,
.panel table {
    width:           100%;
    border-collapse: collapse;
    /* Color de texto base heredado del sistema */
    color:           var(--color-text) !important;
    background:      transparent       !important;
    font-size:       0.875rem;
}

/* Encabezados de tabla — fondo diferenciado sutil, sin gris plano */
.erp-panel th,
.glass-card th,
.card th,
.panel th {
    color:            var(--color-text)                                         !important;
    background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg) 94%) !important;
    border-bottom:    2px solid color-mix(in srgb, var(--color-primary) 25%, rgba(128,128,128,0.2)) !important;
    padding:          10px 12px;
    font-family:      var(--font-title);
    font-weight:      700;
    font-size:        0.75rem;
    text-transform:   uppercase;
    letter-spacing:   0.06em;
    text-align:       left;
    white-space:      nowrap;
}

/* Celdas de datos — borde divisorio sutil, sin fondos opacos */
.erp-panel td,
.glass-card td,
.card td,
.panel td {
    color:         var(--color-text)           !important;
    background:    transparent                 !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.12) !important;
    padding:       9px 12px;
    vertical-align: middle;
}

/* Fila hover: tinte muy sutil del primario para facilitar lectura horizontal */
.erp-panel tr:hover td,
.glass-card tr:hover td,
.card tr:hover td,
.panel tr:hover td {
    background-color: color-mix(in srgb, var(--color-primary) 4%, transparent) !important;
}

/* Última fila: sin borde inferior para no duplicar con el borde del panel */
.erp-panel tr:last-child td,
.glass-card tr:last-child td,
.card tr:last-child td,
.panel tr:last-child td {
    border-bottom: none !important;
}


/* =============================================================================
   SAFE AREAS Y CONTENCION DE VIEWPORT - ARQUITECTURA_MAESTRA v2
   Previene el sangrado de UI debajo de la taskbar de Windows / barra de
   navegacion de iOS.

   Regla:  env(safe-area-inset-bottom) = 0 en escritorio Windows/macOS
           sin impacto visual en desktop.
           En iOS/Android tablet suma el alto de la home bar del SO.
   ============================================================================= */

/* Todos los Off-Canvas Drawers usan dvh para altura real del viewport */
[id$="-drawer"] {
    height: 100vh;
    height: 100dvh;
}

/* El cuerpo del drawer tiene espacio de seguridad inferior */
[id$="-drawer-body"] {
    padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* Pie de botones de accion */
.prov-action-footer,
.cli-action-footer {
    margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Toast: respetar safe area en moviles */
.alert-toast {
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
}

/* Auth page: evita hundimiento en moviles */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
}


/* =============================================================================
   FIX 3: STICKY TOOLBAR — Barra de pestañas y acciones pegajosa
   Garantiza que las pestañas y el botón de acción principal no desaparezcan
   al hacer scroll en la lista de datos.
   ============================================================================= */

.sticky-toolbar {
    position:   sticky;
    top:        0;
    /* FIX 4: z-index 100 — por encima de contenido de lista, por debajo de drawers (9999) y overlays (999) */
    z-index:    100;
    /* Fondo sólido para tapar el contenido que desplaza por debajo */
    background: hsl(var(--bg-card));
    border-bottom: 1px solid hsl(var(--border));
    /* Micro-sombra para indicar elevación sobre el scroll */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}


/* =============================================================================
   FIX 2: OFF-CANVAS DRAWER (PANEL LATERAL) — Fondo sólido, texto nítido
   El texto se desenfoca cuando el panel tiene backdrop-filter.
   La regla: el backdrop-filter SOLO está en el OVERLAY (cortina de fondo),
   NUNCA en el panel donde están los inputs y formularios.
   ============================================================================= */

.erp-drawer {
    position:   fixed;
    top:        0;
    right:      0;
    bottom:     0;
    z-index:    9999;
    display:    flex;
    flex-direction: column;
    /* Fondo OPACO y OSCURO — usa el token de fondo del tema activo (Regla #1: cero hex fijos) */
    background: var(--color-bg, hsl(220 30% 8%));
    border-left: 1.5px solid rgba(128, 128, 128, 0.18);
    box-shadow: -12px 0 60px rgba(0, 0, 0, 0.65);
    /* NUNCA backdrop-filter en el drawer — provoca texto borroso en Chromium */
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.34, 1.10, 0.64, 1);
}

/* Overlay de fondo del drawer: este sí lleva el blur */
.erp-drawer-overlay {
    position:        fixed;
    inset:           0;
    z-index:         9998;
    background:      rgba(5, 8, 16, 0.60);
    /* Sin backdrop-filter — profundidad por opacidad */
    opacity:    0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.erp-drawer-overlay.is-open {
    opacity:        1;
    pointer-events: auto;
}
.erp-drawer.is-open {
    transform: translateX(0);
}

/* Anular backdrop-filter en cualquier drawer inline JS que use inline styles */
[id$="-drawer"] {
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
}