/*
  ============================================================
  ARCHIVO: variables.css
  PRODUCTO: _framework_compartido_ (compartido por toda la suite)
  SISTEMA: Estándar visual general (sección 6 de las instrucciones)
  QUÉ HACE: Define los tokens visuales base (colores, tipografías,
            espaciados, sombras, bordes, breakpoints) que usan
            TODOS los productos de la suite. Aquí se tematizan
            también las variables que sobreescriben a Bootstrap.
  DEPENDE DE: nada. Este archivo es la base de todo lo demás.
  USADO POR: esqueleto-maestro.html y cualquier CSS de cualquier
             producto (_system_contruc_, _ventas_facturacion_,
             _contabilidad_, _inmobiliaria_).
  CREADO: 2026-09-04   |   ÚLTIMA MODIFICACIÓN: 2026-09-04
  ============================================================
*/

:root {
  /* ---- Paleta base: estética tipo Power BI, futurista y profesional ---- */
  --sis-color-fondo: #F4F6FA;
  --sis-color-superficie: #FFFFFF;
  --sis-color-superficie-alterna: #EEF1F7;

  /* Riel de menú (zona derecha, oscura, elegante) */
  --sis-color-menu-fondo: #151B2B;
  --sis-color-menu-fondo-hover: #1F2A44;
  --sis-color-menu-texto: #AEB8CC;
  --sis-color-menu-texto-activo: #FFFFFF;

  /* Acentos */
  --sis-color-primario: #2E6BE6;
  --sis-color-primario-hover: #1F55C4;
  --sis-color-secundario: #14B8A6;
  --sis-color-exito: #1DB874;
  --sis-color-advertencia: #E6A417;
  --sis-color-error: #E64545;

  /* Texto */
  --sis-color-texto: #1C2333;
  --sis-color-texto-suave: #626B82;
  --sis-color-texto-sobre-oscuro: #F4F6FA;

  /* Bordes y sombras */
  --sis-color-borde: #E1E5EE;
  --sis-sombra-suave: 0 1px 3px rgba(16, 24, 40, 0.08);
  --sis-sombra-media: 0 6px 20px rgba(16, 24, 40, 0.14);
  --sis-sombra-menu: -8px 0 24px rgba(0, 0, 0, 0.25);

  /* Tipografía */
  --sis-fuente-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --sis-fuente-tam-base: 14px;
  --sis-fuente-tam-sm: 12.5px;
  --sis-fuente-tam-md: 16px;
  --sis-fuente-tam-lg: 20px;
  --sis-fuente-tam-xl: 26px;

  /* Espaciados (escala de 4px) */
  --sis-espacio-1: 4px;
  --sis-espacio-2: 8px;
  --sis-espacio-3: 12px;
  --sis-espacio-4: 16px;
  --sis-espacio-5: 24px;
  --sis-espacio-6: 32px;

  /* Bordes redondeados */
  --sis-radio-sm: 6px;
  --sis-radio-md: 10px;
  --sis-radio-lg: 16px;

  /* Layout maestro (sección 6) */
  --sis-ancho-contenido: 98%;
  --sis-margen-contenido: 1%;
  --sis-alto-zona-superior: 60px;
  --sis-ancho-menu-riel: 64px;      /* menú colapsado: solo íconos */
  --sis-ancho-menu-expandido: 22vw; /* al hacer clic: porcentaje pequeño pero navegable */
  --sis-ancho-menu-expandido-min: 260px;
  --sis-ancho-menu-expandido-max: 340px;

  /* Transiciones — curvas con física real (Kowalski Motion) */
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);     /* entrada natural */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);    /* desplazamiento */
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1); /* feedback botones */
  --ease-in-hard:  cubic-bezier(0.4, 0, 1, 1);        /* salida/cierre */
  --ease-snap:     cubic-bezier(0.87, 0, 0.13, 1);    /* cambios de estado */
  --sis-transicion-rapida: 150ms var(--ease-out-soft);
  --sis-transicion-media: 220ms var(--ease-spring);

  /* Breakpoints (sección 4.8) — referencia informativa, se usan en media queries */
  --sis-bp-tablet: 768px;
  --sis-bp-escritorio: 1024px;

  /* ---- Paleta de datos (gráficos, sección 6 — estética tipo Power BI) ----
     Orden fijo, nunca se reordena por serie (evita que un filtro repinte).
     Basada en la paleta validada del skill de dataviz (contraste + daltonismo). */
  --sis-serie-1: #2a78d6; /* azul   — coincide con el primario de la suite */
  --sis-serie-2: #eb6834; /* naranja */
  --sis-serie-3: #1baf7a; /* aqua */
  --sis-serie-4: #eda100; /* amarillo */
  --sis-serie-5: #e87ba4; /* magenta */
  --sis-serie-6: #008300; /* verde */
  --sis-serie-7: #4a3aa7; /* violeta */
  --sis-serie-8: #e34948; /* rojo */

  /* Estados (fijos, nunca se reusan para una serie) */
  --sis-estado-bien: #0ca30c;
  --sis-estado-alerta: #fab219;
  --sis-estado-grave: #ec835a;
  --sis-estado-critico: #d03b3b;

  /* Estados de fases / proyecto (CRM — C04 y posteriores) */
  --sis-fase-pendiente-bg:   #f5f5f5;
  --sis-fase-pendiente-txt:  #555;
  --sis-fase-pendiente-ac:   #9e9e9e;
  --sis-fase-progreso-bg:    #e3f2fd;
  --sis-fase-progreso-txt:   #1565c0;
  --sis-fase-progreso-ac:    #1565c0;
  --sis-fase-entregado-bg:   #fff3e0;
  --sis-fase-entregado-txt:  #e65100;
  --sis-fase-entregado-ac:   #e65100;
  --sis-fase-revision-bg:    #fff8e1;
  --sis-fase-revision-txt:   #f57c00;
  --sis-fase-revision-ac:    #f57c00;
  --sis-fase-aprobado-bg:    #e8f5e9;
  --sis-fase-aprobado-txt:   #2e7d32;
  --sis-fase-aprobado-ac:    #2e7d32;
  --sis-fase-enviado-bg:     #fff3cd;
  --sis-fase-enviado-txt:    #856404;
  --sis-fase-enviado-ac:     #856404;
  --sis-fase-rechazado-bg:   #fde8e8;
  --sis-fase-rechazado-txt:  #9b1c1c;
  --sis-fase-rechazado-ac:   #9b1c1c;
  --sis-fase-vencido-bg:     #e8e0fd;
  --sis-fase-vencido-txt:    #4c1d95;
  --sis-fase-vencido-ac:     #4c1d95;
  --sis-fase-activo-bg:      #e3f2fd;
  --sis-fase-activo-txt:     #1565c0;
  --sis-fase-activo-ac:      #1565c0;
  --sis-fase-borrador-bg:    #f5f5f5;
  --sis-fase-borrador-txt:   #555555;
  --sis-fase-borrador-ac:    #9e9e9e;

  /* Tinta de gráficos */
  --sis-grafico-superficie: #fcfcfb;
  --sis-grafico-rejilla: #e1e0d9;
  --sis-grafico-eje: #c3c2b7;
  --sis-grafico-etiqueta: #898781;

  /* Superficies de estado (para banners y fondos contextuales) */
  --sis-sup-exito:       #f0fdf4;
  --sis-sup-exito-borde: #6fcf97;
  --sis-sup-exito-txt:   #1a5c36;
  --sis-sup-error:       #fde8e8;
  --sis-sup-error-borde: #f5a0a0;
  --sis-sup-error-txt:   #7a1515;
  --sis-sup-info:        #eff6ff;
  --sis-sup-info-borde:  #93c5fd;
  --sis-sup-info-txt:    #1d4ed8;
  --sis-sup-alerta:      #fffbeb;
  --sis-sup-alerta-borde: #fcd34d;
  --sis-sup-alerta-txt:  #92400e;

  /* Alias de compatibilidad — variables usadas en módulos que referencian nombres
     no canónicos; se mapean al token correcto para no tocar cada HTML individual. */
  --sis-color-texto-secundario: var(--sis-color-texto-suave);
  --sis-color-borde-sutil:      var(--sis-color-borde);
  --sis-color-encabezado-tabla: var(--sis-color-superficie-alterna);
  --sis-color-hover:            var(--sis-color-superficie-alterna);
  --sis-color-accion:           var(--sis-color-primario);
  --sis-color-exito-fondo:      var(--sis-sup-exito);
  --sis-color-advertencia-fondo: var(--sis-sup-alerta);
  --sis-color-error-fondo:      var(--sis-sup-error);
  --sis-color-info-fondo:       var(--sis-sup-info);
}

/* Tematización base de Bootstrap con nuestras variables (sección 2.1) */
:root {
  --bs-primary: var(--sis-color-primario);
  --bs-body-bg: var(--sis-color-fondo);
  --bs-body-color: var(--sis-color-texto);
  --bs-body-font-family: var(--sis-fuente-base);
  --bs-border-color: var(--sis-color-borde);
}

html, body {
  background: var(--sis-color-fondo);
  color: var(--sis-color-texto);
  font-family: var(--sis-fuente-base);
  font-size: var(--sis-fuente-tam-base);
}