/* BEFORE LOUNGE · Portal del cliente — Variables de diseño
   Cargar Google Fonts:
   https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap
   + la fuente de títulos de cada cuenta (ej. DM+Serif+Display, Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800, Cormorant+Garamond:wght@500;600)
*/

:root {
  /* ---------- Marca (PHP las imprime por cuenta) ---------- */
  --marca: #17357A;            /* color principal */
  --marca-2: #DCE3F2;          /* color secundario (avatar, fondos suaves) */
  --marca-texto: #FFFFFF;      /* texto/íconos SOBRE --marca (validar contraste ≥ 4.5:1) */
  --fuente-titulos: 'DM Serif Display', serif;
  --peso-titulos: 400;

  /* ---------- Fuentes fijas ---------- */
  --fuente-ui: 'Instrument Sans', system-ui, sans-serif;
  --fuente-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---------- Neutros · modo claro ---------- */
  --fondo: #ECEBE8;
  --superficie: #FFFFFF;
  --superficie-2: #F3F2EF;
  --tinta: #16171B;
  --tinta-2: #62646B;
  --linea: #E2E0DA;
  --estrella: #D99A0B;

  /* ---------- Estados (NO dependen de la marca) ---------- */
  --nueva-fondo: #FCE6E2;    --nueva-texto: #A3221A;    --nueva-punto: #D93A2B;
  --contacto-fondo: #FBEFD5; --contacto-texto: #7A4F00; --contacto-punto: #D89614;
  --resuelta-fondo: #E1F2E6; --resuelta-texto: #1D6638; --resuelta-punto: #2F9A57;
  --positiva-fondo: #ECEDF0; --positiva-texto: #3D4350; --positiva-punto: #8A8F9A;

  /* ---------- Derivados de marca (no editar por cuenta) ---------- */
  --marca-suave: color-mix(in srgb, var(--marca-texto) 15%, transparent);  /* chips/botones dentro de tarjeta urgente */
  --marca-tenue: color-mix(in srgb, var(--marca-texto) 78%, transparent);  /* texto secundario sobre --marca */
  --marca-apagada: color-mix(in srgb, var(--marca-texto) 30%, transparent);/* estrellas vacías sobre --marca */
  --velo: color-mix(in srgb, var(--tinta) 55%, var(--fondo));              /* fondo de ventana emergente */

  /* ---------- Radios ---------- */
  --radio-sm: 10px;    /* miniaturas, logo cuadrado */
  --radio-md: 18px;    /* avisos, campos multilínea, fotos */
  --radio-lg: 26px;    /* tarjetas, paneles */
  --radio-xl: 30px;    /* ventana emergente, panel de login */
  --radio-pill: 999px; /* botones, campos, filtros, etiquetas */

  /* ---------- Espaciado (base 4) ---------- */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px;

  /* ---------- Alturas de control ---------- */
  --alto-sm: 36px;  /* chips de tono, filtros compactos */
  --alto-md: 44px;  /* filtros, botones de tarjeta, íconos redondos (mínimo táctil) */
  --alto-lg: 48px;  /* botones principales escritorio, campos */
  --alto-xl: 52px;  /* botones principales celular, campos de login */

  /* ---------- Tipografía (tamaño / alto de línea) ---------- */
  --t-display: 52px;   /* h1 escritorio, fuente-titulos, lh .95 */
  --t-h1-movil: 34px;  /* h1 celular */
  --t-h2: 32px;        /* nombre en panel de queja */
  --t-h3: 28px;        /* título ventana emergente */
  --t-kpi: 40px;       /* números indicadores, fuente-ui 500-600, tracking -.03em */
  --t-cuerpo-lg: 16px; /* comentario en detalle, lh 1.5 */
  --t-cuerpo: 15px;    /* comentario en tarjeta, lh 1.45 */
  --t-ui: 14px;        /* botones, filtros, filas */
  --t-sm: 13px;        /* etiquetas de campo, metadatos */
  --t-xs: 12px;        /* chips, sucursal · hora */
  --t-xxs: 11.5px;     /* etiqueta de estado, texto del riel */

  /* ---------- Sombras ---------- */
  --sombra-segmento: 0 1px 3px rgba(0,0,0,.12);   /* opción activa de control segmentado */
  --sombra-flotante: 0 12px 30px rgba(0,0,0,.25); /* aviso flotante (toast), barra inferior móvil */
  --sombra-modal: 0 30px 80px rgba(0,0,0,.30);
}

/* ---------- Modo oscuro (misma estructura, otros valores) ---------- */
[data-modo="oscuro"] {
  --fondo: #0F0E0C;
  --superficie: #1A1916;
  --superficie-2: #25231F;
  --tinta: #F3EEE4;
  --tinta-2: #A7A196;
  --linea: #2E2B26;
  --estrella: #C6A15B;
  --nueva-fondo: #3A1A16;    --nueva-texto: #FF9F90;    --nueva-punto: #FF6B57;
  --contacto-fondo: #382A12; --contacto-texto: #F0C366; --contacto-punto: #E2A93A;
  --resuelta-fondo: #14301F; --resuelta-texto: #84D6A4; --resuelta-punto: #45B66F;
  --positiva-fondo: #2A2A2D; --positiva-texto: #C6C8CF; --positiva-punto: #8A8F9A;
}

/* ---------- Ejemplos de cuenta (PHP genera un bloque así por cuenta) ---------- */
[data-cuenta="el-moro"]   { --marca:#17357A; --marca-2:#DCE3F2; --marca-texto:#FFFFFF; --fuente-titulos:'DM Serif Display', serif; --peso-titulos:400; }
[data-cuenta="la-lumbre"] { --marca:#C2361A; --marca-2:#FBE1D6; --marca-texto:#FFFFFF; --fuente-titulos:'Bricolage Grotesque', sans-serif; --peso-titulos:800; --fondo:#F1ECE6; }
[data-cuenta="raiz"]      { --marca:#C6A15B; --marca-2:#2A241A; --marca-texto:#15130F; --fuente-titulos:'Cormorant Garamond', serif; --peso-titulos:600; } /* usar con data-modo="oscuro" */

/* ---------- Back office BEFORE LOUNGE (identidad propia) ---------- */
[data-cuenta="backoffice"] { --marca:#16171B; --marca-2:#CDF564; --marca-texto:#FFFFFF; --fuente-titulos:'Bricolage Grotesque', sans-serif; --peso-titulos:700; }