/* =====================================================================
   Tema «Bruma» — Central de Hosting
   Panel de agentes de Chatwoot v4.18.0 (inspeccionado en el tag v4.18.0)

   Sobrio y claro: grises de neblina que no encandilan y un único azul petróleo reservado para lo que requiere acción.

   INSTALACIÓN
   1. Sube este archivo y la carpeta /fuentes al mismo directorio público,
      por ejemplo https://centraldehosting.com/tema/
   2. Super Admin → Settings → «Dashboard Scripts», pega:
        <link rel="stylesheet" href="https://centraldehosting.com/tema/tema-bruma.css">
   3. Recarga el panel. Funciona en modo claro y oscuro (clase .dark de Chatwoot).

   Solo cambia lo visual: no mueve, oculta ni reordena piezas.
   Índice
     1. Fuentes          5. Color de marca (n-brand)    9.  Caja de respuesta
     2. Tokens           6. Foco de teclado             10. Barra lateral
     3. Puente Chatwoot  7. Lista de conversaciones     11. Detalles finos
     4. Tipografía       8. Mensajes y notas internas   12. Movimiento reducido
   ===================================================================== */


/* =====================================================================
   1. FUENTES — IBM Plex Sans (variable), SIL OFL 1.1, autoalojada.
   Subconjunto «latin» (cubre á é í ó ú ñ ü ¿ ¡ €). Variable: un archivo
   por estilo cubre todos los pesos, incluidos los 420/460/520 de Chatwoot.
   ===================================================================== */
@font-face {
  font-family: "CDH Plex";
  src: url("fuentes/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("fuentes/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  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: "CDH Plex";
  src: url("fuentes/ibm-plex-sans-latin-wght-italic.woff2") format("woff2-variations"),
       url("fuentes/ibm-plex-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
  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;
}


/* =====================================================================
   2. TOKENS DEL TEMA
   Todos los colores van en canales «R G B» (el formato de Chatwoot) con
   el hex en comentario. Ningún color o fuente se repite fuera de aquí.
   ===================================================================== */
:root {
  /* tipografía */
  --chd-fuente: "CDH Plex", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --chd-fuente-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --chd-texto-base: 14px;
  --chd-texto-mensaje: 14.5px;
  --chd-interlineado-mensaje: 1.6;
  --chd-texto-mini: 11px;
  --chd-peso-normal: 420;
  --chd-peso-medio: 500;
  --chd-peso-fuerte: 620;
  --chd-tracking: -0.005em;

  /* forma */
  --chd-radio-burbuja: 12px;
  --chd-radio-cola: 4px;
  --chd-radio-caja: 12px;
  --chd-sombra-1: 0 1px 2px rgb(var(--chd-sombra-color) / 0.06);
  --chd-sombra-2: 0 6px 20px -6px rgb(var(--chd-sombra-color) / 0.18), 0 2px 6px -2px rgb(var(--chd-sombra-color) / 0.08);

  /* espaciado y estados */
  --chd-burbuja-x: 14px;
  --chd-burbuja-y: 10px;
  --chd-barra-estado: 3px;
  --chd-foco-ancho: 2px;
  --chd-foco-separacion: 2px;
  --chd-nota-meta-alfa: 0.72;
  --chd-nota-contorno: none;
  --chd-enlace-subrayado: none;

  /* ---------- color, modo claro ---------- */
  /* grises: fondos, bordes y texto (reemplaza --slate-*) */
  --chd-neutro-1: 250 253 255; /* #FAFDFF */
  --chd-neutro-2: 244 249 252; /* #F4F9FC */
  --chd-neutro-3: 235 242 246; /* #EBF2F6 */
  --chd-neutro-4: 228 237 241; /* #E4EDF1 */
  --chd-neutro-5: 222 231 236; /* #DEE7EC */
  --chd-neutro-6: 215 224 229; /* #D7E0E5 */
  --chd-neutro-7: 205 215 219; /* #CDD7DB */
  --chd-neutro-8: 185 194 199; /* #B9C2C7 */
  --chd-neutro-9: 133 142 146; /* #858E92 */
  --chd-neutro-10: 121 130 134; /* #798286 */
  --chd-neutro-11: 76 90 100; /* #4C5A64 */
  --chd-neutro-12: 24 35 44; /* #18232C */
  /* color de acción: enlaces, selección, foco (reemplaza --blue-*) */
  --chd-acento-1: 247 253 255; /* #F7FDFF */
  --chd-acento-2: 239 249 253; /* #EFF9FD */
  --chd-acento-3: 225 242 248; /* #E1F2F8 */
  --chd-acento-4: 211 235 244; /* #D3EBF4 */
  --chd-acento-5: 196 226 238; /* #C4E2EE */
  --chd-acento-6: 179 216 230; /* #B3D8E6 */
  --chd-acento-7: 157 201 218; /* #9DC9DA */
  --chd-acento-8: 126 180 200; /* #7EB4C8 */
  --chd-acento-9: 14 95 118; /* #0E5F76 */
  --chd-acento-10: 2 80 101; /* #025065 */
  --chd-acento-11: 14 95 118; /* #0E5F76 */
  --chd-acento-12: 8 48 60; /* #08303C */
  /* notas internas (reemplaza --amber-*) */
  --chd-nota-1: 255 251 245; /* #FFFBF5 */
  --chd-nota-2: 253 246 232; /* #FDF6E8 */
  --chd-nota-3: 249 237 214; /* #F9EDD6 */
  --chd-nota-4: 245 228 196; /* #F5E4C4 */
  --chd-nota-5: 239 218 177; /* #EFDAB1 */
  --chd-nota-6: 232 206 155; /* #E8CE9B */
  --chd-nota-7: 219 189 128; /* #DBBD80 */
  --chd-nota-8: 202 165 89; /* #CAA559 */
  --chd-nota-9: 201 154 46; /* #C99A2E */
  --chd-nota-10: 185 138 21; /* #B98A15 */
  --chd-nota-11: 122 83 0; /* #7A5300 */
  --chd-nota-12: 74 51 0; /* #4A3300 */
  /* no leídos y éxito (reemplaza --teal-*) */
  --chd-exito-1: 247 254 251; /* #F7FEFB */
  --chd-exito-2: 238 250 245; /* #EEFAF5 */
  --chd-exito-3: 223 244 235; /* #DFF4EB */
  --chd-exito-4: 209 238 225; /* #D1EEE1 */
  --chd-exito-5: 193 231 214; /* #C1E7D6 */
  --chd-exito-6: 175 221 202; /* #AFDDCA */
  --chd-exito-7: 152 207 184; /* #98CFB8 */
  --chd-exito-8: 118 188 161; /* #76BCA1 */
  --chd-exito-9: 15 122 92; /* #0F7A5C */
  --chd-exito-10: 3 106 79; /* #036A4F */
  --chd-exito-11: 11 106 80; /* #0B6A50 */
  --chd-exito-12: 1 49 35; /* #013123 */
  /* errores, SLA vencido, borrar (reemplaza --ruby-*) */
  --chd-error-1: 255 250 251; /* #FFFAFB */
  --chd-error-2: 255 244 244; /* #FFF4F4 */
  --chd-error-3: 255 232 233; /* #FFE8E9 */
  --chd-error-4: 255 221 222; /* #FFDDDE */
  --chd-error-5: 253 207 209; /* #FDCFD1 */
  --chd-error-6: 254 190 193; /* #FEBEC1 */
  --chd-error-7: 255 164 170; /* #FFA4AA */
  --chd-error-8: 247 130 141; /* #F7828D */
  --chd-error-9: 194 51 77; /* #C2334D */
  --chd-error-10: 176 31 63; /* #B01F3F */
  --chd-error-11: 168 38 64; /* #A82640 */
  --chd-error-12: 81 3 23; /* #510317 */
  /* mensajes de bot y plantillas (reemplaza --iris-*) */
  --chd-bot-1: 251 251 255; /* #FBFBFF */
  --chd-bot-2: 245 246 255; /* #F5F6FF */
  --chd-bot-3: 234 237 255; /* #EAEDFF */
  --chd-bot-4: 224 228 254; /* #E0E4FE */
  --chd-bot-5: 212 218 253; /* #D4DAFD */
  --chd-bot-6: 198 205 255; /* #C6CDFF */
  --chd-bot-7: 180 188 246; /* #B4BCF6 */
  --chd-bot-8: 156 164 234; /* #9CA4EA */
  --chd-bot-9: 90 95 176; /* #5A5FB0 */
  --chd-bot-10: 77 80 160; /* #4D50A0 */
  --chd-bot-11: 74 79 158; /* #4A4F9E */
  --chd-bot-12: 33 35 77; /* #21234D */
  /* colores semánticos */
  --chd-lienzo: 235 239 242; /* #EBEFF2 — fondo general y barra lateral */
  --chd-panel: 247 249 250; /* #F7F9FA — lista de conversaciones y área de mensajes */
  --chd-panel-2: 251 252 252; /* #FBFCFC — paneles secundarios */
  --chd-panel-activo: 255 255 255; /* #FFFFFF — superficie activa */
  --chd-elevado: 252 253 253; /* #FCFDFD — menús, popovers, tarjetas, caja de respuesta */
  --chd-elevado-3: 255 255 255; /* #FFFFFF — popovers anidados */
  --chd-burbuja-agente: 220 237 242; /* #DCEDF2 — burbuja de mensaje del ejecutivo */
  --chd-burbuja-bot: 231 232 246; /* #E7E8F6 — burbuja de bot / plantilla */
  --chd-nota-fondo: 251 239 207; /* #FBEFCF — fondo de nota interna */
  --chd-error-fondo: 248 211 216; /* #F8D3D8 — fondo de error */
  --chd-marca: 14 95 118; /* #0E5F76 — botón principal y elementos de marca */
  --chd-foco: 14 95 118; /* #0E5F76 — anillo de foco de teclado */
  --chd-seleccion: 223 237 241; /* #DFEDF1 — conversación abierta en la lista */
  --chd-no-leido: 240 246 248; /* #F0F6F8 — fila con mensajes sin leer */
  --chd-menu-activo: 220 234 239; /* #DCEAEF — ítem activo del menú lateral */
  --chd-borde-fuerte: 211 218 223; /* #D3DADF — bordes de controles y separadores marcados */
  --chd-borde-suave: 225 230 234; /* #E1E6EA — separadores sutiles */
  --chd-etiqueta: 238 242 244; /* #EEF2F4 — fondo de etiquetas */
  --chd-boton: 255 255 255; /* #FFFFFF — fondo de botón secundario */
  --chd-barra-color: 14 95 118; /* #0E5F76 — barra de estado (conversación abierta, menú) */
  --chd-sombra-color: 16 35 45;
  --chd-alfa-1: 215, 224, 229, 0.30;
  --chd-alfa-2: 205, 215, 219, 0.30;
  --chd-alfa-3: 255, 255, 255, 0.96;
  --chd-negro-alfa-1: 16, 35, 45, 0.12;
  --chd-negro-alfa-2: 16, 35, 45, 0.04;
  --chd-blanco-alfa: 255, 255, 255, 0.8;
  --chd-velo: 16, 35, 45, 0.24;
  --chd-borde-contenedor: 225, 230, 234, 1;
}

/* ---------- color, modo oscuro (Chatwoot pone .dark en <body>) ---------- */
body.dark {
  /* grises: fondos, bordes y texto (reemplaza --slate-*) */
  --chd-neutro-1: 13 17 19; /* #0D1113 */
  --chd-neutro-2: 18 23 25; /* #121719 */
  --chd-neutro-3: 24 30 34; /* #181E22 */
  --chd-neutro-4: 29 37 41; /* #1D2529 */
  --chd-neutro-5: 35 43 47; /* #232B2F */
  --chd-neutro-6: 42 50 55; /* #2A3237 */
  --chd-neutro-7: 54 63 67; /* #363F43 */
  --chd-neutro-8: 75 84 89; /* #4B5459 */
  --chd-neutro-9: 97 107 112; /* #616B70 */
  --chd-neutro-10: 111 121 126; /* #6F797E */
  --chd-neutro-11: 163 177 186; /* #A3B1BA */
  --chd-neutro-12: 227 233 237; /* #E3E9ED */
  /* color de acción: enlaces, selección, foco (reemplaza --blue-*) */
  --chd-acento-1: 11 19 22; /* #0B1316 */
  --chd-acento-2: 15 26 30; /* #0F1A1E */
  --chd-acento-3: 17 39 47; /* #11272F */
  --chd-acento-4: 20 50 61; /* #14323D */
  --chd-acento-5: 26 61 73; /* #1A3D49 */
  --chd-acento-6: 33 72 86; /* #214856 */
  --chd-acento-7: 43 86 102; /* #2B5666 */
  --chd-acento-8: 55 107 126; /* #376B7E */
  --chd-acento-9: 26 117 144; /* #1A7590 */
  --chd-acento-10: 46 132 159; /* #2E849F */
  --chd-acento-11: 124 203 224; /* #7CCBE0 */
  --chd-acento-12: 205 239 247; /* #CDEFF7 */
  /* notas internas (reemplaza --amber-*) */
  --chd-nota-1: 22 17 7; /* #161107 */
  --chd-nota-2: 30 23 9; /* #1E1709 */
  --chd-nota-3: 47 34 5; /* #2F2205 */
  --chd-nota-4: 60 43 1; /* #3C2B01 */
  --chd-nota-5: 72 52 3; /* #483403 */
  --chd-nota-6: 85 62 6; /* #553E06 */
  --chd-nota-7: 101 75 14; /* #654B0E */
  --chd-nota-8: 124 94 20; /* #7C5E14 */
  --chd-nota-9: 217 169 58; /* #D9A93A */
  --chd-nota-10: 234 185 77; /* #EAB94D */
  --chd-nota-11: 240 196 106; /* #F0C46A */
  --chd-nota-12: 248 226 174; /* #F8E2AE */
  /* no leídos y éxito (reemplaza --teal-*) */
  --chd-exito-1: 11 20 16; /* #0B1410 */
  --chd-exito-2: 15 27 23; /* #0F1B17 */
  --chd-exito-3: 17 41 33; /* #112921 */
  --chd-exito-4: 19 53 41; /* #133529 */
  --chd-exito-5: 26 64 51; /* #1A4033 */
  --chd-exito-6: 33 76 61; /* #214C3D */
  --chd-exito-7: 43 90 73; /* #2B5A49 */
  --chd-exito-8: 54 112 92; /* #36705C */
  --chd-exito-9: 18 122 93; /* #127A5D */
  --chd-exito-10: 41 137 107; /* #29896B */
  --chd-exito-11: 95 212 174; /* #5FD4AE */
  --chd-exito-12: 211 240 227; /* #D3F0E3 */
  /* errores, SLA vencido, borrar (reemplaza --ruby-*) */
  --chd-error-1: 28 13 14; /* #1C0D0E */
  --chd-error-2: 38 17 19; /* #261113 */
  --chd-error-3: 60 22 26; /* #3C161A */
  --chd-error-4: 78 26 33; /* #4E1A21 */
  --chd-error-5: 93 33 41; /* #5D2129 */
  --chd-error-6: 108 41 50; /* #6C2932 */
  --chd-error-7: 127 52 61; /* #7F343D */
  --chd-error-8: 156 65 77; /* #9C414D */
  --chd-error-9: 196 58 82; /* #C43A52 */
  --chd-error-10: 214 75 96; /* #D64B60 */
  --chd-error-11: 255 149 164; /* #FF95A4 */
  --chd-error-12: 254 223 225; /* #FEDFE1 */
  /* mensajes de bot y plantillas (reemplaza --iris-*) */
  --chd-bot-1: 16 17 26; /* #10111A */
  --chd-bot-2: 21 23 36; /* #151724 */
  --chd-bot-3: 31 33 58; /* #1F213A */
  --chd-bot-4: 39 42 75; /* #272A4B */
  --chd-bot-5: 48 52 89; /* #303459 */
  --chd-bot-6: 58 62 104; /* #3A3E68 */
  --chd-bot-7: 70 75 122; /* #464B7A */
  --chd-bot-8: 88 93 151; /* #585D97 */
  --chd-bot-9: 94 99 184; /* #5E63B8 */
  --chd-bot-10: 108 114 200; /* #6C72C8 */
  --chd-bot-11: 174 178 240; /* #AEB2F0 */
  --chd-bot-12: 227 230 254; /* #E3E6FE */
  /* colores semánticos */
  --chd-lienzo: 15 21 25; /* #0F1519 — fondo general y barra lateral */
  --chd-panel: 19 26 31; /* #131A1F — lista de conversaciones y área de mensajes */
  --chd-panel-2: 21 29 34; /* #151D22 — paneles secundarios */
  --chd-panel-activo: 34 48 58; /* #22303A — superficie activa */
  --chd-elevado: 26 35 41; /* #1A2329 — menús, popovers, tarjetas, caja de respuesta */
  --chd-elevado-3: 34 45 52; /* #222D34 — popovers anidados */
  --chd-burbuja-agente: 19 53 64; /* #133540 — burbuja de mensaje del ejecutivo */
  --chd-burbuja-bot: 35 39 72; /* #232748 — burbuja de bot / plantilla */
  --chd-nota-fondo: 58 45 18; /* #3A2D12 — fondo de nota interna */
  --chd-error-fondo: 74 28 36; /* #4A1C24 — fondo de error */
  --chd-marca: 26 117 144; /* #1A7590 — botón principal y elementos de marca */
  --chd-foco: 124 203 224; /* #7CCBE0 — anillo de foco de teclado */
  --chd-seleccion: 23 50 60; /* #17323C — conversación abierta en la lista */
  --chd-no-leido: 21 34 41; /* #152229 — fila con mensajes sin leer */
  --chd-menu-activo: 24 51 61; /* #18333D — ítem activo del menú lateral */
  --chd-borde-fuerte: 42 53 61; /* #2A353D — bordes de controles y separadores marcados */
  --chd-borde-suave: 30 39 46; /* #1E272E — separadores sutiles */
  --chd-etiqueta: 31 41 48; /* #1F2930 — fondo de etiquetas */
  --chd-boton: 30 40 47; /* #1E282F — fondo de botón secundario */
  --chd-barra-color: 124 203 224; /* #7CCBE0 — barra de estado (conversación abierta, menú) */
  --chd-sombra-color: 0 0 0;
  --chd-alfa-1: 26, 35, 41, 0.8;
  --chd-alfa-2: 97, 107, 112, 0.14;
  --chd-alfa-3: 26, 35, 41, 0.95;
  --chd-negro-alfa-1: 0, 0, 0, 0.3;
  --chd-negro-alfa-2: 0, 0, 0, 0.2;
  --chd-blanco-alfa: 255, 255, 255, 0.1;
  --chd-velo: 0, 0, 0, 0.5;
  --chd-borde-contenedor: 255, 255, 255, 0;
}

/* =====================================================================
   3. PUENTE A LAS VARIABLES DE CHATWOOT
   Chatwoot v4.18 define sus colores en :root (claro) y .dark (en <body>).
   Las reasignamos a nuestros tokens. `body.dark` tiene más especificidad
   que `.dark`, así que gana sin !important. Como var() se resuelve en
   cada elemento, el mismo bloque sirve para claro y oscuro.
   ===================================================================== */
:root,
body.dark {
  --slate-1: var(--chd-neutro-1); --slate-2: var(--chd-neutro-2); --slate-3: var(--chd-neutro-3); --slate-4: var(--chd-neutro-4); --slate-5: var(--chd-neutro-5); --slate-6: var(--chd-neutro-6);
  --slate-7: var(--chd-neutro-7); --slate-8: var(--chd-neutro-8); --slate-9: var(--chd-neutro-9); --slate-10: var(--chd-neutro-10); --slate-11: var(--chd-neutro-11); --slate-12: var(--chd-neutro-12);
  --blue-1: var(--chd-acento-1); --blue-2: var(--chd-acento-2); --blue-3: var(--chd-acento-3); --blue-4: var(--chd-acento-4); --blue-5: var(--chd-acento-5); --blue-6: var(--chd-acento-6);
  --blue-7: var(--chd-acento-7); --blue-8: var(--chd-acento-8); --blue-9: var(--chd-acento-9); --blue-10: var(--chd-acento-10); --blue-11: var(--chd-acento-11); --blue-12: var(--chd-acento-12);
  --amber-1: var(--chd-nota-1); --amber-2: var(--chd-nota-2); --amber-3: var(--chd-nota-3); --amber-4: var(--chd-nota-4); --amber-5: var(--chd-nota-5); --amber-6: var(--chd-nota-6);
  --amber-7: var(--chd-nota-7); --amber-8: var(--chd-nota-8); --amber-9: var(--chd-nota-9); --amber-10: var(--chd-nota-10); --amber-11: var(--chd-nota-11); --amber-12: var(--chd-nota-12);
  --teal-1: var(--chd-exito-1); --teal-2: var(--chd-exito-2); --teal-3: var(--chd-exito-3); --teal-4: var(--chd-exito-4); --teal-5: var(--chd-exito-5); --teal-6: var(--chd-exito-6);
  --teal-7: var(--chd-exito-7); --teal-8: var(--chd-exito-8); --teal-9: var(--chd-exito-9); --teal-10: var(--chd-exito-10); --teal-11: var(--chd-exito-11); --teal-12: var(--chd-exito-12);
  --ruby-1: var(--chd-error-1); --ruby-2: var(--chd-error-2); --ruby-3: var(--chd-error-3); --ruby-4: var(--chd-error-4); --ruby-5: var(--chd-error-5); --ruby-6: var(--chd-error-6);
  --ruby-7: var(--chd-error-7); --ruby-8: var(--chd-error-8); --ruby-9: var(--chd-error-9); --ruby-10: var(--chd-error-10); --ruby-11: var(--chd-error-11); --ruby-12: var(--chd-error-12);
  --iris-1: var(--chd-bot-1); --iris-2: var(--chd-bot-2); --iris-3: var(--chd-bot-3); --iris-4: var(--chd-bot-4); --iris-5: var(--chd-bot-5); --iris-6: var(--chd-bot-6);
  --iris-7: var(--chd-bot-7); --iris-8: var(--chd-bot-8); --iris-9: var(--chd-bot-9); --iris-10: var(--chd-bot-10); --iris-11: var(--chd-bot-11); --iris-12: var(--chd-bot-12);
  --background-color: var(--chd-lienzo);
  --surface-1: var(--chd-panel);
  --surface-2: var(--chd-panel-2);
  --surface-active: var(--chd-panel-activo);
  --solid-1: var(--chd-elevado);
  --solid-2: var(--chd-elevado);
  --solid-3: var(--chd-elevado-3);
  --solid-active: var(--chd-panel-activo);
  --solid-blue: var(--chd-burbuja-agente);
  --solid-blue-2: var(--chd-panel-2);
  --solid-iris: var(--chd-burbuja-bot);
  --solid-purple: var(--chd-burbuja-bot);
  --solid-amber: var(--chd-nota-fondo);
  --solid-red: var(--chd-error-fondo);
  --card-color: var(--chd-elevado);
  --button-color: var(--chd-boton);
  --label-background: var(--chd-etiqueta);
  --border-strong: var(--chd-borde-fuerte);
  --border-weak: var(--chd-borde-suave);
  --border-container: var(--chd-borde-contenedor);
  --border-blue-strong: var(--chd-acento-11);
  --text-blue: var(--chd-acento-12);
  --text-purple: var(--chd-bot-12);
  --text-amber: var(--chd-nota-12);
  --alpha-1: var(--chd-alfa-1);
  --alpha-2: var(--chd-alfa-2);
  --alpha-3: var(--chd-alfa-3);
  --black-alpha-1: var(--chd-negro-alfa-1);
  --black-alpha-2: var(--chd-negro-alfa-2);
  --white-alpha: var(--chd-blanco-alfa);
  --overlay: var(--chd-velo);
}


/* =====================================================================
   4. TIPOGRAFÍA
   Chatwoot fija Inter con !important en html/body y en .font-inter
   (el último elemento de su pila es «sans-serif !important»), por eso
   aquí también se usa !important.
   ===================================================================== */
html,
body,
.font-inter,
.font-interDisplay,
.font-sans {
  font-family: var(--chd-fuente) !important;
  letter-spacing: var(--chd-tracking);
}
body {
  font-size: var(--chd-texto-base);
  font-weight: var(--chd-peso-normal);
  accent-color: rgb(var(--chd-marca)); /* checkbox, radio y range nativos */
}
code, pre, kbd, samp {
  font-family: var(--chd-fuente-mono) !important;
}
/* Texto de mensajes (burbujas) */
.prose-bubble {
  font-size: var(--chd-texto-mensaje);
  line-height: var(--chd-interlineado-mensaje);
}
.prose-bubble a {
  color: rgb(var(--chd-acento-11));
  text-decoration-line: var(--chd-enlace-subrayado);
  text-underline-offset: 2px;
}
/* El tamaño 10px de Chatwoot (badges, horas) es muy pequeño para un día entero */
.text-xxs {
  font-size: var(--chd-texto-mini);
}

/* =====================================================================
   5. COLOR DE MARCA
   Chatwoot compila «n-brand» como hex fijo (#2781F6), no como variable,
   así que hay que sobrescribir cada clase. Además, blanco sobre #2781F6
   no llega a AA (3,8:1); con estos tokens sí.
   Reglas generadas automáticamente desde el CSS compilado de v4.18.0
   (todas las variantes reales: hover, focus, dark:, group-, has-[…]).
   Texto -> acento legible; contorno/anillo -> foco; resto -> marca.
   ===================================================================== */
/* 48 reglas n-brand + 17 reglas woot-* heredadas */
.border-n-brand {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.border-n-brand\/50 {
  border-color: rgb(var(--chd-marca) / 0.5);
}
.border-woot-500 {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.border-t-n-brand {
  border-top-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.bg-n-brand {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.bg-n-brand\/10 {
  background-color: rgb(var(--chd-marca) / 0.1);
}
.bg-n-brand\/20 {
  background-color: rgb(var(--chd-marca) / 0.2);
}
.bg-n-brand\/5 {
  background-color: rgb(var(--chd-marca) / 0.05);
}
.bg-woot-100 {
  background-color: rgb(var(--chd-acento-5) / var(--tw-bg-opacity, 1));
}
.bg-woot-25 {
  background-color: rgb(var(--chd-acento-2) / var(--tw-bg-opacity, 1));
}
.bg-woot-400 {
  background-color: rgb(var(--chd-acento-9) / var(--tw-bg-opacity, 1));
}
.bg-woot-500 {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.from-n-brand\/15 {
  --tw-gradient-from: rgb(var(--chd-marca) / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--chd-marca) / 0) var(--tw-gradient-to-position);
}
.text-n-brand {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.text-woot-500 {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.text-woot-600 {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.\!outline-n-brand {
  outline-color: rgb(var(--chd-foco)) !important;
}
.outline-n-brand {
  outline-color: rgb(var(--chd-foco));
}
.ring-n-brand {
  --tw-ring-color: rgb(var(--chd-foco) / var(--tw-ring-opacity, 1));
}
.before\:\!border-t-n-brand::before {
  border-top-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1)) !important;
}
.before\:bg-n-brand::before {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.after\:bg-n-brand::after {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.checked\:border-n-brand:checked {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.checked\:bg-n-brand:checked {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.indeterminate\:border-n-brand:indeterminate {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.indeterminate\:bg-n-brand:indeterminate {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.focus-within\:outline-n-brand:focus-within {
  outline-color: rgb(var(--chd-foco));
}
.hover\:border-n-brand:hover {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.hover\:bg-n-brand\/10:hover {
  background-color: rgb(var(--chd-marca) / 0.1);
}
.hover\:bg-n-brand\/80:hover {
  background-color: rgb(var(--chd-marca) / 0.8);
}
.hover\:bg-woot-600:hover {
  background-color: rgb(var(--chd-acento-10) / var(--tw-bg-opacity, 1));
}
.hover\:text-n-brand:hover {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.hover\:text-woot-500:hover {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.hover\:text-woot-700:hover {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.focus\:border-n-brand:focus {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.focus\:border-woot-500:focus {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.focus\:outline-n-brand:focus {
  outline-color: rgb(var(--chd-foco));
}
.focus\:ring-n-brand:focus {
  --tw-ring-color: rgb(var(--chd-foco) / var(--tw-ring-opacity, 1));
}
.focus\:ring-woot-500:focus {
  --tw-ring-color: rgb(var(--chd-foco) / var(--tw-ring-opacity, 1));
}
.focus-visible\:border-n-brand:focus-visible {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.focus-visible\:bg-n-brand\/20:focus-visible {
  background-color: rgb(var(--chd-marca) / 0.2);
}
.focus-visible\:outline-n-brand:focus-visible {
  outline-color: rgb(var(--chd-foco));
}
.focus-visible\:outline-woot-500:focus-visible {
  outline-color: rgb(var(--chd-foco));
}
.focus-visible\:ring-n-brand:focus-visible {
  --tw-ring-color: rgb(var(--chd-foco) / var(--tw-ring-opacity, 1));
}
.hover\:enabled\:bg-n-brand\/20:enabled:hover {
  background-color: rgb(var(--chd-marca) / 0.2);
}
.group:focus-within .group-focus-within\:text-n-brand {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:bg-n-brand {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-n-brand {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.has-\[\:focus\]\:outline-n-brand:has(:focus) {
  outline-color: rgb(var(--chd-foco));
}
.prose-a\:text-n-brand :is(:where(a):not(:where([class~="not-prose"],
[class~="not-prose"] *))) {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.prose-strong\:text-n-brand :is(:where(strong):not(:where([class~="not-prose"],
[class~="not-prose"] *))) {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.dark\:border-n-brand:is(.dark *) {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.dark\:bg-n-brand\/10:is(.dark *) {
  background-color: rgb(var(--chd-marca) / 0.1);
}
.dark\:text-woot-50:is(.dark *) {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.dark\:text-woot-500:is(.dark *) {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.dark\:\!outline-n-brand:is(.dark *) {
  outline-color: rgb(var(--chd-foco)) !important;
}
.dark\:ring-n-brand:is(.dark *) {
  --tw-ring-color: rgb(var(--chd-foco) / var(--tw-ring-opacity, 1));
}
.dark\:checked\:border-n-brand:checked:is(.dark *) {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.dark\:checked\:bg-n-brand:checked:is(.dark *) {
  background-color: rgb(var(--chd-marca) / var(--tw-bg-opacity, 1));
}
.dark\:focus-within\:outline-n-brand:focus-within:is(.dark *) {
  outline-color: rgb(var(--chd-foco));
}
.dark\:hover\:text-n-brand:hover:is(.dark *) {
  color: rgb(var(--chd-acento-11) / var(--tw-text-opacity, 1));
}
.dark\:focus\:border-woot-500:focus:is(.dark *) {
  border-color: rgb(var(--chd-marca) / var(--tw-border-opacity, 1));
}
.dark\:focus\:outline-n-brand:focus:is(.dark *) {
  outline-color: rgb(var(--chd-foco));
}
.dark\:focus\:ring-woot-500:focus:is(.dark *) {
  --tw-ring-color: rgb(var(--chd-foco) / var(--tw-ring-opacity, 1));
}
.dark\:has-\[\:focus\]\:outline-n-brand:has(:focus):is(.dark *) {
  outline-color: rgb(var(--chd-foco));
}
::selection {
  background-color: rgb(var(--chd-acento-5));
  color: rgb(var(--chd-neutro-12));
}

/* =====================================================================
   6. FOCO DE TECLADO
   Visible solo al navegar con teclado (:focus-visible). Chatwoot usa
   «outline» como borde en muchos botones (outline-transparent, etc.),
   por eso se fuerza con !important: es una regla de accesibilidad.
   Los campos de texto y el editor conservan su propio foco (recoloreado).
   ===================================================================== */
body :is(a, button, summary, [role="button"], [role="tab"], [role="menuitem"],
         [role="option"], [role="switch"], [role="checkbox"],
         [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: var(--chd-foco-ancho) solid rgb(var(--chd-foco)) !important;
  outline-offset: var(--chd-foco-separacion) !important;
}
body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
  outline-color: rgb(var(--chd-foco));
}

/* =====================================================================
   7. LISTA DE CONVERSACIONES
   Estados: abierta (.active), marcada para acción masiva (.selected),
   con mensajes sin leer (nombre en negrita) y leída.
   ===================================================================== */
/* Conversación abierta: fondo de selección + barra de color a la izquierda.
   La barra es una sombra interior: no cambia medidas ni posiciones. */
.conversation.active {
  background-color: rgb(var(--chd-seleccion));
  box-shadow: inset var(--chd-barra-estado) 0 0 0 rgb(var(--chd-barra-color));
}
.conversation.selected {
  background-color: rgb(var(--chd-acento-3));
}
/* Fila con mensajes sin leer: leve tinte para encontrarla de un vistazo */
.conversation:has(.conversation--user.font-semibold):not(.active):not(.selected) {
  background-color: rgb(var(--chd-no-leido));
}
/* Leída vs. no leída: más diferencia de peso y de tono en el nombre */
.conversation--user.font-semibold {
  font-weight: var(--chd-peso-fuerte);
  color: rgb(var(--chd-neutro-12));
}
.conversation--user.font-medium {
  font-weight: var(--chd-peso-medio);
  color: rgb(var(--chd-neutro-11));
}
.conversation.active .conversation--user {
  color: rgb(var(--chd-neutro-12));
}

/* =====================================================================
   8. MENSAJES Y NOTAS INTERNAS
   Los colores de burbuja ya vienen de las variables (sección 3):
   cliente = --slate-4, ejecutivo = --solid-blue, nota = --solid-amber,
   bot = --solid-iris. Aquí solo forma, aire y la marca de nota interna.
   ===================================================================== */
.left-bubble,
.right-bubble {
  border-radius: var(--chd-radio-burbuja);
}
.left-bubble { border-bottom-left-radius: var(--chd-radio-cola); }
.right-bubble { border-bottom-right-radius: var(--chd-radio-cola); }
[data-bubble-name="text"] {
  padding: var(--chd-burbuja-y) var(--chd-burbuja-x);
}
/* Nota interna: franja lateral (y contorno punteado en temas de alto
   contraste) para que se distinga también sin percibir el color. */
.right-bubble.bg-n-solid-amber,
.left-bubble.bg-n-solid-amber {
  box-shadow: inset 3px 0 0 rgb(var(--chd-nota-9));
  outline: var(--chd-nota-contorno);
  outline-offset: -2px;
}
/* Hora y estado dentro de la nota: Chatwoot usa 50 % de opacidad,
   que no alcanza AA; se sube aquí. */
.text-n-amber-12\/50 {
  color: rgb(var(--amber-12) / var(--chd-nota-meta-alfa));
}

/* =====================================================================
   9. CAJA DE RESPUESTA
   Sus estilos vienen «scoped» de Vue (.reply-box[data-v-…]). El sufijo
   :not(#chd) suma especificidad de id sin depender del hash de Vue.
   ===================================================================== */
.reply-box:not(#chd) {
  border-radius: var(--chd-radio-caja);
  box-shadow: var(--chd-sombra-1);
}
.reply-box.is-private:not(#chd) {
  border-color: rgb(var(--chd-nota-7));
  box-shadow: inset 0 3px 0 rgb(var(--chd-nota-9)), var(--chd-sombra-1);
}


/* =====================================================================
   10. BARRA LATERAL
   Es el único <aside> que es hermano de <main> en el layout del panel.
   ===================================================================== */
/* Ítem activo del menú: fondo de acento y barra, como en la lista */
aside:has(~ main) a.active,
aside:has(~ main) .active > a {
  background-color: rgb(var(--chd-menu-activo));
  box-shadow: inset calc(var(--chd-barra-estado) - 1px) 0 0 0 rgb(var(--chd-barra-color));
  font-weight: var(--chd-peso-medio);
}

aside:has(~ main) a.active {
  color: rgb(var(--chd-acento-11));
}


/* =====================================================================
   11. DETALLES FINOS
   ===================================================================== */
/* Sombras de menús y popovers (utilidades de Tailwind: frágiles) */
.shadow-sm { --tw-shadow: var(--chd-sombra-1); }
.shadow-md,
.shadow-lg,
.shadow-xl { --tw-shadow: var(--chd-sombra-2); }
/* Barras de desplazamiento discretas pero visibles */
:where(*) {
  scrollbar-color: rgb(var(--chd-neutro-7)) transparent;
}
/* Tooltips de Chatwoot (.tooltip) con más contraste */
.tooltip {
  background-color: rgb(var(--chd-neutro-12));
  color: rgb(var(--chd-panel));
}

/* =====================================================================
   12. MOVIMIENTO REDUCIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .conversation.active,
  .animate-card-select {
    animation: none !important;
  }
}