/* ==========================================================================
   MUFAH Solutions · Brand Kit v2.0 — tokens

   Los bloques marcados como KIT son copia literal de
   MUFAH-BRAND-KIT/10-WEB/MUFAH-TOKENS-WEB.css. No se editan: si el kit sube de
   versión, se reemplazan tal cual.

   Debajo van los tokens propios de esta suite, los que el kit no define
   (escala tipográfica, superficies, layout y capas). Todos se derivan de los
   valores del kit; ninguno introduce un color nuevo.
   ========================================================================== */

:root {
  /* ═══ KIT · Color de marca ═══════════════════════════════════════════ */
  --mufah-navy:    #0C2340;
  --mufah-azul:    #2E6FD8;
  --mufah-celeste: #BFD9FF;
  --mufah-gris:    #6B7686;
  --mufah-niebla:  #F2F3F5;

  /* ═══ KIT · Escalas de UI ════════════════════════════════════════════ */
  --navy-50:  #F0F2F4;
  --navy-100: #DDE0E4;
  --navy-200: #BBC1CA;
  --navy-300: #929CA9;
  --navy-400: #556579;
  --navy-500: #0C2340;
  --navy-600: #0A1D36;
  --navy-700: #08182D;
  --navy-800: #061323;
  --navy-900: #050D18;
  --navy-950: #03080F;

  --azul-50:  #F2F6FD;
  --azul-100: #E2EBFA;
  --azul-200: #C4D7F4;
  --azul-300: #A1BEED;
  --azul-400: #6D9AE4;
  --azul-500: #2E6FD8;
  --azul-600: #275DB5;
  --azul-700: #204E97;
  --azul-800: #193C75;
  --azul-900: #112A52;
  --azul-950: #0B1B34;

  --gris-50:  #F6F7F8;
  --gris-100: #EAECEE;
  --gris-200: #D6D9DD;
  --gris-300: #BCC1C9;
  --gris-400: #979FAA;
  --gris-500: #6B7686;
  --gris-600: #5A6371;
  --gris-700: #4B535E;
  --gris-800: #3A4048;
  --gris-900: #292D33;
  --gris-950: #1A1C20;

  /* ═══ KIT · Funcionales ══════════════════════════════════════════════ */
  --fn-exito:        #2E7D5B;
  --fn-error:        #B4443C;
  --fn-advertencia:  #C08A2E;
  --fn-informacion:  #2E6FD8;

  /* ═══ KIT · Tipografía ═══════════════════════════════════════════════ */
  --tipo-titulos: 'Archivo', Helvetica, Arial, sans-serif;
  --tipo-datos:   'DM Mono', ui-monospace, monospace;

  /* ═══ KIT · Espaciado (base 4) ═══════════════════════════════════════ */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 16px;
  --esp-4: 24px;
  --esp-5: 40px;
  --esp-6: 64px;

  /* ═══ KIT · Radios ═══════════════════════════════════════════════════ */
  --radio-s: 6px;
  --radio-m: 10px;
  --radio-l: 14px;
  --radio-completo: 9999px;

  /* ═══ KIT · Sombras ══════════════════════════════════════════════════ */
  --sombra-card:     0 10px 28px rgba(12, 35, 64, 0.10);
  --sombra-flotante: 0 16px 36px rgba(12, 35, 64, 0.16);

  /* ═══ KIT · Movimiento ═══════════════════════════════════════════════ */
  --curva-ui:      cubic-bezier(0.2, 0, 0, 1);
  --curva-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:   150ms;
  --dur-ui:      250ms;
  --dur-entrada: 400ms;


  /* ═══ SUITE · Componentes RGB ════════════════════════════════════════
     Para construir transparencias sobre los colores del kit sin escribir
     ningún valor nuevo.                                                  */
  --navy-rgb:    12, 35, 64;
  --azul-rgb:    46, 111, 216;
  --niebla-rgb: 242, 243, 245;

  /* ═══ SUITE · Superficies ════════════════════════════════════════════ */
  --superficie:       var(--mufah-niebla);   /* fondo de la aplicación */
  --superficie-alta:  #FFFFFF;               /* tarjetas, como en el kit */
  --superficie-navy:  var(--mufah-navy);     /* barra lateral */
  --superficie-sutil: var(--gris-50);        /* zebra y estados hover */
  --superficie-media: var(--gris-100);

  /* ═══ SUITE · Texto ══════════════════════════════════════════════════ */
  --texto-fuerte:          var(--mufah-navy);
  --texto-medio:           var(--gris-600);
  --texto-tenue:           var(--gris-500);
  --texto-invertido:       #FFFFFF;
  --texto-invertido-medio: var(--mufah-celeste);
  --texto-invertido-tenue: rgba(var(--niebla-rgb), 0.55);

  /* ═══ SUITE · Trazos ═════════════════════════════════════════════════ */
  --linea:           var(--gris-100);
  --linea-fuerte:    var(--gris-200);
  --linea-tenue:     var(--gris-50);
  --linea-invertida: rgba(var(--niebla-rgb), 0.16);
  --borde:           1px solid var(--linea);

  /* ═══ SUITE · Acento ═════════════════════════════════════════════════ */
  --acento:       var(--mufah-azul);
  --acento-suave: var(--azul-50);
  --acento-medio: var(--azul-100);
  --acento-borde: var(--azul-200);
  --acento-fuerte: var(--azul-700);

  /* ═══ SUITE · Semánticos suaves ══════════════════════════════════════
     Los dos primeros los define el kit en MUFAH-COMPONENTES.css. El de
     error no existe ahí, así que se deriva por transparencia del propio
     --fn-error en lugar de inventar un hex nuevo: misma técnica que las
     demás superficies de esta hoja.                                      */
  --exito-suave:       #E4F1EA;   /* del kit, badge .mf-badge--ok */
  --advertencia-suave: #FBF1DF;   /* del kit, badge .mf-badge--alerta */
  --error-rgb:         180, 68, 60;              /* --fn-error en componentes */
  --error-suave:       rgba(var(--error-rgb), 0.10);

  /* ═══ SUITE · Escala de texto ════════════════════════════════════════
     El kit fija los pesos (Archivo 400/600/800, DM Mono 400/500) pero no
     una escala de tamaños para producto. Esta es la de la suite.         */
  --txt-meta:     0.688rem;  /* 11px — etiquetas mono en mayúsculas */
  --txt-xs:       0.75rem;   /* 12px */
  --txt-sm:       0.813rem;  /* 13px */
  --txt-base:     0.938rem;  /* 15px — texto corrido */
  --txt-md:       1.063rem;  /* 17px — base del kit */
  --txt-lg:       1.25rem;   /* 20px */
  --txt-xl:       1.5rem;    /* 24px */
  --txt-cifra:    2rem;      /* 32px — cifras de KPI */
  --txt-cifra-lg: 2.5rem;    /* 40px — titular del kit */

  --lh-apretado: 1.2;
  --lh-normal:   1.5;
  --lh-suelto:   1.6;        /* el del kit */

  --track-meta:   0.08em;    /* mayúsculas mono, como en el kit */
  --track-titulo: -0.01em;   /* titulares del kit */
  --track-cifra:  -0.02em;

  /* Pesos autorizados. Nunca Light ni Thin. */
  --peso-normal: 400;
  --peso-medio:  600;
  --peso-fuerte: 800;

  /* ═══ SUITE · Layout ═════════════════════════════════════════════════ */
  --ancho-lateral:   248px;
  --alto-encabezado: 68px;
  --ancho-max:       1440px;
  --gap-rejilla:     var(--esp-3);
  --pad-tarjeta:     var(--esp-4);
  --pad-vista:       var(--esp-4);

  /* ═══ SUITE · Movimiento propio ══════════════════════════════════════ */
  --dur-barra: 620ms;        /* entrada de la gráfica */
  --escalon:   45ms;         /* retardo entre barras */

  /* ═══ EXCEPCIÓN · Colores de WhatsApp ════════════════════════════════
     Única salida del kit en todo el proyecto, y es deliberada: la simulación
     del módulo 03 solo convence si se ve como WhatsApp de verdad. Son los
     colores de la aplicación, no de MUFAH.

     Los consume EXCLUSIVAMENTE el componente .telefono. Todo lo que lo rodea
     —tarjeta, encabezado, panel de proceso, nota al pie— sigue en navy y
     niebla del kit. Si aparecen fuera de .telefono, es un error.            */
  --wa-cabecera:        #008069;   /* barra superior del chat */
  --wa-cabecera-texto:  #FFFFFF;   /* rótulos sobre esa barra */
  --wa-fondo:           #EFEAE2;   /* fondo de la conversación */
  --wa-burbuja-propia:  #D9FDD3;   /* lo que escribe el cliente */
  --wa-burbuja-ajena:   #FFFFFF;   /* lo que responde el local */
  --wa-texto:           #111B21;
  --wa-meta:            #667781;   /* horas y estados */
  --wa-visto:           #53BDEB;   /* palomitas azules */
  --wa-sistema:         #FFF3C4;   /* avisos del sistema, sobre el fondo */
  --wa-sistema-texto:   #5B4A1F;

  /* ═══ SUITE · Capas ══════════════════════════════════════════════════ */
  --z-base:     1;
  --z-pegajoso: 20;
  --z-lateral:  30;
  --z-aviso:    60;
}

/* Quien pidió menos movimiento, recibe menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro:   0ms;
    --dur-ui:      0ms;
    --dur-entrada: 0ms;
    --dur-barra:   0ms;
    --escalon:     0ms;
  }
}