/* ==========================================================================
   canon-tokens.css · Sistema visual canon de la Plataforma Base (v1)
   Base: SpeedGas (visual-system.css). Única fuente de valores del panel.
   Regla: ningún otro archivo escribe px de letra, alto de control, radio,
   grosor ni color sueltos. Todo sale de aquí (ver ESPEC §8, lint-tokens.mjs).
   Día = :root (por defecto). Noche = [data-theme="dark"] en <html> o en
   cualquier contenedor (la lámina lo usa por sección).
   ========================================================================== */

/* Poppins servida desde el propio panel (CSP font-src self). Licencia OFL en /fonts/Poppins-OFL.txt */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;

  /* ---- 0. Perillas globales: un cambio aquí reescala todo el panel ---- */
  --scale-type: 1;      /* Letra del panel (Segoe UI/Aptos, no Poppins): 1.077 deja el cuerpo en 14 px y se ve como la lámina aprobada. 1 = escala SpeedGas pura. */
  --scale-control: 1;   /* alturas de botones, campos y filas */

  /* ---- 1. Tipografía: 6 tamaños, 3 grosores ---- */
  --font-sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; /* PRUEBA del dueño: Poppins (antes Segoe UI/Aptos con --scale-type 1.077) */
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-micro:   calc(10px * var(--scale-type)); /* contadores, insignias */
  --fs-meta:    calc(12px * var(--scale-type)); /* etiquetas, horas, cápsulas, botones md/sm */
  --fs-body:    calc(13px * var(--scale-type)); /* cuerpo, valores, mensajes, botones lg */
  --fs-title:   calc(15px * var(--scale-type)); /* título de sección o tarjeta, nombre en cabecera */
  --fs-screen:  calc(17px * var(--scale-type)); /* título de pantalla (uno por vista) */
  --fs-display: calc(26px * var(--scale-type)); /* número grande (métricas) */

  --fw-regular: 400;
  --fw-soft: 500; /* intermedio: cápsulas de estado */
  --fw-medium: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;  /* números grandes, títulos */
  --lh-snug: 1.3;    /* meta, etiquetas, controles */
  --lh-body: 1.5;    /* cuerpo y mensajes */
  --tracking-caps: .06em;

  /* ---- 2. Controles: 3 alturas (SpeedGas micro/compacta/normal) ---- */
  --ctl-sm: calc(26px * var(--scale-control)); /* dentro de celdas, acciones de fila densa */
  --ctl-md: calc(30px * var(--scale-control)); /* por defecto: tarjetas, filas, ficha, compositor */
  --ctl-lg: calc(34px * var(--scale-control)); /* cabecera de pantalla y barra de herramientas */
  --ctl-touch: 44px; /* área mínima del dedo (teléfono): se logra con un área invisible alrededor del control; el dibujo mide --ctl-* */
  --row-h: calc(56px * var(--scale-control));       /* fila de lista con avatar */
  --row-h-compact: calc(40px * var(--scale-control));
  --head-h: calc(56px * var(--scale-control));      /* cabecera de pantalla o de panel */
  --composer-min: calc(var(--ctl-md) + 12px);       /* 42 px, caja del compositor (SpeedGas) */

  --dot: 6px;      /* punto de estado o de ventana */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;

  --avatar-sm: 28px;
  --avatar-md: 40px;
  --avatar-lg: 44px;

  /* ---- 3. Forma: 4 radios ---- */
  --r-sm: 6px;     /* piezas internas: opción de segmentado, ítem de menú, tecla */
  --r-md: 8px;     /* botones, campos, chips de filtro, burbujas */
  --r-lg: 12px;    /* tarjetas, paneles, menús emergentes, caja del compositor */
  --r-full: 999px; /* cápsulas de estado, etiquetas, avatares, botón solo-icono redondo */

  /* ---- 4. Espacios: múltiplos de 4 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --pad-x-sm: 8px;   /* relleno lateral de controles sm */
  --pad-x-md: 10px;  /* md (SpeedGas compacta) */
  --pad-x-lg: 14px;  /* lg */
  --border-w: 1px;

  /* ---- 5. Movimiento ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* ---- 6. Estructura ---- */
  --sidebar-w: 248px;
  --rail-w: 64px;
  --layout-readable: 880px;  /* formularios y textos largos */
  --layout-fluid: 100%;      /* vistas operativas: usar todo el ancho */

  /* ---- 7. Color · DÍA (SpeedGas light) ---- */
  --brand: #087b40;
  --brand-strong: var(--brand);   /* día: UN solo verde de acento; hover y énfasis no cambian de tono */
  --brand-soft: #e2f4e9;
  --on-brand: #ffffff;

  --canvas: #eef1f1;
  --surface-sidebar: #dfe4e5;
  --surface-1: #ffffff;        /* tarjetas, paneles, campos */
  --surface-2: #f1f3f3;        /* cabeceras de panel, zonas secundarias */
  --surface-3: #e8ebec;        /* pistas de segmentado, fondos neutros */
  --surface-hover: #eef1f1;
  --surface-selected: #e2f4e9;
  --surface-disabled: #ecefef;

  /* 5 tonos de texto (todos AA sobre surface-1 y surface-2) */
  --text-heading: var(--brand-strong);     /* título de pantalla y número grande */
  --text-strong: #111b21;      /* nombres, valores destacados, títulos de sección */
  --text-primary: #28312d;     /* cuerpo y valores */
  --text-value: #4f5a55;       /* texto secundario (vista previa, descripciones) */
  --text-muted: #59635e;       /* etiquetas de dato, horas, meta */
  --text-subtle: #646e69;      /* notas tenues (mín. 4.5:1) */
  --text-placeholder: #646e69;
  --text-disabled: #818985;    /* solo con surface-disabled */

  --border-soft: rgba(43, 52, 48, .09);
  --border-default: rgba(43, 52, 48, .16);
  --border-strong: rgba(43, 52, 48, .30);
  --focus: var(--brand-strong);

  /* Estados: -ink (texto, AA sobre -soft y surface-1), -soft (fondo), -solid (punto, icono) */
  --success-ink: var(--brand); --success-soft: #e2f4e9; --success-solid: #12a150;
  --info-ink: #075f91;    --info-soft: #e1f0f8;    --info-solid: #0874aa;
  --warning-ink: #8a4a0c; --warning-soft: #fdeedb; --warning-solid: #dc741d;
  --danger-ink: #a51c33;  --danger-soft: #fbe3e7;  --danger-solid: #c9233e;  --cherry: #d96a83;  --cherry-ink: #c25570;  --coin: #ffd36b; /* monedas sobre el botón verde (plantilla que se cobra) */ /* cerrar caja de plantilla (✕ en esquina) */
  --neutral-ink: #38434a; --neutral-soft: #e8ebec; --neutral-solid: #7a837f;
  --violet-ink: #5b41b0;  --violet-soft: #ece7fb;  --violet-solid: #7155c9;
  --coral-ink: #a8432c;   --coral-soft: #fbe4dc;   --coral-solid: #e5604a;   /* coral: separado del ámbar (Pendiente ≠ Asignada) y fondo de la insignia de no leídos */

  /* Conversación (aprobado: cliente blanco, asistente verde WhatsApp, equipo crema/ámbar) */
  --chat-wall: #efeae2;
  --chat-dots: rgba(17, 27, 33, .045);
  --bubble-client: #ffffff;
  --bubble-bot: #d9fdd3;
  --bubble-staff: #fff5df;
  --bubble-ink: #111b21;
  --bubble-meta: #556570;
  --author-bot: var(--brand);
  --author-staff: #8a4a0c;
  --tick-read: #0f7fb8;

  /* Canales */
  --ch-whatsapp: #128c4a; /* oficial #25D366 no llega a contraste AA sobre fondo claro */
  --ch-whatsapp-logo: #25d366; /* verde oficial, solo para el logo junto a «Respondiendo por» (pedido del dueño 2026-10-07) */
  --ch-messenger: #0866ff;
  --ch-instagram: #ff0069;
  --ch-telegram: #26a5e4; --ch-web: #56636f;

  /* Avatares (aprobado): 5 degradados de tono medio con iniciales blancas. El nombre siempre va junto al avatar. */
  --on-avatar: #ffffff;  /* iniciales blancas también de día (pedido del dueño 2026-10-07; antes #08110c casi negro) */
  --av-0-from: #e8b07a; --av-0-to: #cd8c52;
  --av-1-from: #7fa7d9; --av-1-to: #5a83bd;
  --av-2-from: #e39bb6; --av-2-to: #c47595;
  --av-3-from: #79c49b; --av-3-to: #4f9f76;
  --av-4-from: #a99be0; --av-4-to: #8676c4;

  /* Autor de cada mensaje (círculo de 30 px al costado de la burbuja) */
  --mav-client-bg: #dfe5e7; --mav-client-ink: #3b4a54;
  --mav-bot-bg: #d9fdd3;    --mav-bot-ink: var(--brand);   --mav-bot-line: #b7e5b0;
  --mav-staff-bg: #ffe8c2;  --mav-staff-ink: #8a4a0c; --mav-staff-line: #f2c98a;
  --bubble-bot-line: #b7e5b0;
  --bubble-staff-line: #efc981;
  --bubble-staff-ink: #3d2a11;
  --bubble-client-ink: #111b21;
  --bubble-bot-ink: #111b21;

  /* Menú lateral (aprobado: colores de SpeedGas, día y noche) */
  --nav-ink: var(--text-muted);
  --nav-title: #06734f;              /* nombre del negocio sobre el menú: el verde del título, un punto más oscuro para AA sobre el gris del menú */
  --nav-sub: var(--neutral-ink);     /* «Panel de Control»: gris de día, verde de marca de noche */
  /* Menú REPLEGADO (solo iconos): fondo verde completo. El resto de tonos se deriva de --rail-on sobre --rail-bg. */
  --rail-bg: color-mix(in srgb, var(--brand) 72%, #fff);   /* menú replegado: verde de marca algo más oscuro (pedido del dueño) */
  --rail-on: var(--on-brand);
  --btn-primary-bg: var(--brand);   /* día: botón principal con el verde de marca original */
  --btn-primary-hover: var(--brand-strong);
  --rail-ink: color-mix(in srgb, var(--rail-on) 92%, var(--rail-bg));        /* iconos en reposo (blanco al 92 %) */
  --rail-hover-bg: color-mix(in srgb, var(--rail-on) 12%, var(--rail-bg));
  --rail-active-bg: color-mix(in srgb, var(--rail-on) 18%, var(--rail-bg));  /* icono activo: blanco pleno sobre blanco translúcido */
  --rail-line: color-mix(in srgb, var(--rail-on) 32%, var(--rail-bg));       /* separadores y bordes de botones */
  --rail-avatar-ink: var(--brand-strong);                                    /* iniciales del avatar del menú replegado (AA sobre --rail-on) */
  --rail-badge-bg: var(--rail-on);                                           /* contador normal (conversaciones): blanco con número verde */
  --rail-badge-ink: var(--brand-strong);
  --rail-badge-alert-bg: var(--danger-solid);                                /* contador de alerta (avisos): rojo con número blanco */
  --rail-badge-alert-ink: var(--on-brand);
  --notice-calm-bg: color-mix(in srgb, var(--warning-solid) 45%, var(--warning-ink)); /* contador de avisos sin urgentes: naranja; blanco encima = 4.8:1 (AA) */
  --notice-calm-ink: var(--on-brand);
  --unread-bg: #3fb676;               /* contador de no leídos: verde tenue (pedido del dueño 2026-10-07; 2,6:1 con blanco, antes --brand 5,4:1) */
  --unread-on: var(--on-brand);
  --unread-time: #1b9c5a;             /* hora con no leídos: el mismo verde tenue del contador, sin negrita */
  --overlay: rgba(13, 26, 24, .48);  /* fondo detrás de diálogos y cajones */
  --on-media: #ffffff;               /* texto sobre fotos o iconos de color */
  --media-bg: #26332f;               /* reproductor de vídeo */
  --media-ink: #ffffff;
  --map-road: #f6f1e4; --map-a: #cfe1cf; --map-b: #dfe9d6; --map-pin: #e8737f; --map-pin-ink: #8f2f3d;
  --rec: #c43a4b;                    /* punto de grabación */
  --hero-bg: #111b21;                /* panel de bienvenida del acceso: oscuro de día y de noche */
  --hero-ink: #eef1f1;

  /* Sombras */
  --shadow-1: 0 1px 2px rgba(35, 43, 39, .08);    /* burbujas, tarjetas elevadas */
  --shadow-2: 0 8px 22px rgba(35, 43, 39, .12);   /* menús, popovers */
  --shadow-3: 0 18px 44px rgba(35, 43, 39, .18);  /* diálogos, hojas */
}

/* ---- 7b. Color · NOCHE (SpeedGas dark) ---- */
:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;

  --brand: #43e983;
  --brand-strong: #25c76a;
  --brand-soft: #123a26;
  --on-brand: #06200f;

  --canvas: #070b0e;
  --surface-sidebar: #090e12;
  --surface-1: #10171c;
  --surface-2: #141e23;
  --surface-3: #1a272d;
  --surface-hover: #17252a;
  --surface-selected: #153126;
  --surface-disabled: #11171a;

  --text-heading: var(--brand);   /* decisión del dueño: de noche el título de pantalla va en el verde de marca, no en blanco */
  --text-strong: #f5faf7;
  --text-primary: #e8f0eb;
  --text-value: #c3d0c8;
  --text-muted: #a8b0ab;
  --text-subtle: #8a9a91;
  --text-placeholder: #8d9690;
  --text-disabled: #64736b;

  --border-soft: rgba(190, 232, 207, .10);
  --border-default: rgba(190, 232, 207, .16);
  --border-strong: rgba(190, 232, 207, .28);
  --focus: var(--brand);

  --success-ink: #5ff09a; --success-soft: #123a26; --success-solid: #43e983;
  --info-ink: #7fd0f7;    --info-soft: #11303f;    --info-solid: #55bff2;
  --warning-ink: #ffb95e; --warning-soft: #3b2a12; --warning-solid: #ffad42;
  --danger-ink: #ff8f9c;  --danger-soft: #3d1c23;  --danger-solid: #ff6b7d;  --cherry: #b85a70;  --cherry-ink: #a34a60;  --coin: #ffd36b;
  --neutral-ink: #c3d0c8; --neutral-soft: #1d2a30; --neutral-solid: #8a97a8;
  --violet-ink: #c2b0ff;  --violet-soft: #271f45;  --violet-solid: #a88cff;
  --coral-ink: #ffb4a3;   --coral-soft: #432019;   --coral-solid: #ff8a73;

  --chat-wall: #070b0e;
  --chat-dots: rgba(113, 167, 139, .045);
  --bubble-client: #202a30;
  --bubble-bot: #0f6038;
  --bubble-staff: #382916;
  --bubble-ink: #e9edef;
  --bubble-meta: #c3ced4;
  --author-bot: #7fe0b0;
  --author-staff: #ffc977;
  --tick-read: #53bdeb;

  --ch-whatsapp: #25d366;
  --ch-messenger: #0866ff;
  --ch-instagram: #ff0069;
  --ch-telegram: #26a5e4; --ch-web: #8a97a8;

  --on-avatar: #ffffff;
  --av-0-from: #8f6a44; --av-0-to: #735234;
  --av-1-from: #3f638f; --av-1-to: #2e4c70;
  --av-2-from: #8f5069; --av-2-to: #713d52;
  --av-3-from: #3c7a5a; --av-3-to: #2c5e45;
  --av-4-from: #64578f; --av-4-to: #4d4373;

  --mav-client-bg: #2a3942; --mav-client-ink: #d1d7db;
  --mav-bot-bg: #0a4a3d;    --mav-bot-ink: #8ff0c0;   --mav-bot-line: transparent;
  --mav-staff-bg: #4a3214;  --mav-staff-ink: #ffd279; --mav-staff-line: transparent;
  --bubble-bot-line: rgba(55, 202, 116, .34);
  --bubble-staff-line: rgba(255, 173, 66, .38);
  --bubble-staff-ink: #fff7eb;
  --bubble-client-ink: #f2f5f3;
  --bubble-bot-ink: #f0fff6;
  --nav-title: var(--brand);
  --nav-sub: var(--brand);
  /* Menú replegado de noche: verde de marca MUY oscuro (el verde claro de noche deslumbraría); iconos casi blancos. */
  --rail-bg: #0c3a23;
  --rail-on: #f0fff6;
  --btn-primary-bg: var(--brand);    /* noche: sin cambio por ahora */
  --btn-primary-hover: var(--brand-strong);
  --rail-avatar-ink: var(--rail-bg);
  --rail-badge-bg: var(--brand);
  --rail-badge-ink: var(--on-brand);
  --rail-badge-alert-bg: var(--danger-solid);
  --rail-badge-alert-ink: var(--surface-1);
  --notice-calm-bg: var(--warning-solid);
  --notice-calm-ink: var(--surface-1);
  --unread-bg: var(--brand);    /* de noche el verde claro de marca con texto oscuro (on-brand): AA; antes blanco sobre verde claro daba 1.54:1 */
  --unread-on: var(--on-brand);
  --unread-time: var(--brand);   /* de noche el verde oscuro del menú no se lee como texto: la hora usa el verde claro de marca (AA) */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 10px 24px rgba(0, 0, 0, .34);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, .45);
}

/* ---- 8. Teléfono: controles más altos para el dedo (un solo lugar) ---- */
@media (max-width: 760px) {
  :root {
    --ctl-sm: calc(32px * var(--scale-control));
    --ctl-md: calc(36px * var(--scale-control));
    --ctl-lg: calc(40px * var(--scale-control));
    --row-h: calc(64px * var(--scale-control));
    --head-h: calc(52px * var(--scale-control));
    --composer-min: calc(var(--ctl-md) + 8px);
  }
}

/* ---- 9. Marca por negocio (único punto de personalización permitido) ----
   Un negocio solo puede redefinir --brand, --brand-strong, --brand-soft y
   --on-brand (día y noche), validando AA con contrast.mjs. Nada más. */