/* ============================================================
   XESTIO — tokens.css
   Variables CSS globales: paleta, sombras, radios, transiciones
   Generado: 2026-03-21 (refactor arquitectura CSS)
   ============================================================ */

/* ─────────────────────────────────────────────
   NOTA: Las variables --sb-* del sidebar se mantienen
   en sidebar.css y NO se trasladan aquí.
   ───────────────────────────────────────────── */

:root {
   --brand-cta: #E0A800;
   --brand-cta-700: #C58F00;
   --brand-primary-500: #0f7a66;
   --brand-primary-300: #4fb6a6;
   --bg-page: #f5f7f8;
   --surface: #ffffff;
   --text-primary: #0f1724;
   --text-muted: #6b7280;
   --radius: 10px;
   --shadow-lg: 0 20px 40px rgba(12,18,26,0.12);
   --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-display: "Montserrat", system-ui, "Segoe UI", Roboto, sans-serif;
   --space-lg: 24px;
   --space-xl: 40px;

    /* ════════════════════════════════════════
       BOOTSTRAP OVERRIDE
    ════════════════════════════════════════ */
    --bs-body-bg: #f4f7f9;

    /* ════════════════════════════════════════
       PALETA XESTIO 2026 — IDENTIDAD
    ════════════════════════════════════════ */

    /* Colores primarios */
    --color-primary:       #0E4D57;   /* Teal — principal, confianza, autoridad */
    --color-primary-hover: #0b3c44;
   --color-accent:        var(--brand-cta);   /* CTA principal */
   --color-accent-hover:  var(--brand-cta-700);
    --color-highlight:     #DADA52;   /* Amarillo — warnings/alertas */
    --color-highlight-hover: #c9c948;
    --color-lime:          #b8d24a;   /* Lima — valores monetarios/éxito */
    --color-lime-hover:    #a6be42;

    /* Colores de superficie */
    --color-bg:          #f4f7f9;   /* Fondo principal — gris frío */
    --color-surface:     #ffffff;   /* Superficies/cards — blanco puro */
    --color-surface-alt: #EDF2F7;  /* Gris frío — fondos, divisores */
    --color-text:        #1e2d35;  /* Teal oscuro — textos principales */
    --color-text-muted:  #5a6e7a;  /* Teal gris — textos secundarios (WCAG AA) */
   --color-text-primary: var(--color-text);
   --color-border:      #cbd9df;
   --color-border-light:#e2eaed;

    /* Colores funcionales (estados) */
    --color-success:       #b8d24a;
    --color-success-hover: #a6be42;
    --color-danger:        #e74c3c;
    --color-danger-hover:  #c0392b;
    --color-info:          #3498db;
    --color-info-hover:    #2980b9;
    --color-warning:       #f39c12;
    --color-warning-hover: #d68910;

    /* Estados en tablas/badges */
    --color-estado-proxima:    #DADA52;  /* Amarillo */
    --color-estado-encurso:    #32B8C6;  /* Teal claro */
    --color-estado-finalizada: #94A3B8;  /* Gris */
    --color-estado-cancelada:  #e74c3c;  /* Rojo */

    /* Alias de compatibilidad */
    --color-teal:             #0E4D57;
    --color-teal-light:       #32B8C6;  /* = --icon-primary de icons-buttons */
    --color-terracotta:       #e74c3c;
    --color-terracotta-hover: #c0392b;
    --color-secondary:        #6B7280;
    --color-secondary-hover:  #4B5563;

    /* Colores logo/sidebar */
    --color-logo-text:    #32B8C6;  /* "Xestio" — teal claro */
    --color-logo-platform: #0E4D57; /* "platform" — teal oscuro */
    --color-sidebar-bg:   #0E4D57;

    /* ════════════════════════════════════════
       RADIOS
    ════════════════════════════════════════ */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ════════════════════════════════════════
       SOMBRAS
    ════════════════════════════════════════ */
    --shadow-sm: 0 2px 4px  rgba(14, 77, 87, 0.06);
    --shadow-md: 0 4px 12px rgba(14, 77, 87, 0.1);
    --shadow-lg: 0 10px 30px rgba(14, 77, 87, 0.12);
    --shadow-xl: 0 20px 40px rgba(12, 96, 105, 0.15);

    /* ════════════════════════════════════════
       TRANSICIONES
    ════════════════════════════════════════ */
    --transition-fast:   0.15s ease;   /* de icons-buttons.css */
    --transition-normal: 0.25s ease;   /* añadido para compatibilidad */

    /* ════════════════════════════════════════
       VARIABLES DE ICONOS (de icons-buttons.css)
       — mantenidas aquí para que icons-buttons.css
         pueda referirse a ellas sin :root propio
    ════════════════════════════════════════ */
    --icon-primary:   #32B8C6;               /* alias de --color-teal-light */
    --icon-secondary: #0E4D57;               /* alias de --color-primary */
    --icon-accent:    #E89A40;               /* Naranja/Dorado */
    --icon-fuchsia:   #D946EF;
    --icon-success:   #b8d24a;
    --icon-warning:   #F59E0B;
    --icon-danger:    #EF4444;
    --icon-muted:     #6B7280;
    --icon-light:     rgba(255, 255, 255, 0.9);

    /* Tamaños de iconos */
    --icon-xs: 12px;
    --icon-sm: 14px;
    --icon-md: 16px;
    --icon-lg: 20px;
    --icon-xl: 24px;
    --icon-2x: 32px;

    /* ════════════════════════════════════════
       BREAKPOINTS RESPONSIVE
    ════════════════════════════════════════ */
    --breakpoint-xs: 480px;   /* Móvil muy pequeño */
    --breakpoint-sm: 576px;   /* Móvil pequeño / Bootstrap sm */
    --breakpoint-md: 768px;   /* Tablet / Móvil grande */
    --breakpoint-lg: 992px;   /* Desktop pequeño / Bootstrap lg */
    --breakpoint-xl: 1200px;  /* Desktop grande / Bootstrap xl */
    --breakpoint-xxl: 1400px; /* Desktop muy grande */
}