/* Recepción · Hospedio — piel de la bandeja (Chatwoot v4.19.1). Agente Domos, 09/11/2026, tokens de Agatha (bandeja-kit).
 * Se carga desde DASHBOARD_SCRIPTS (final del <body>). No toca el código de Chatwoot: solo redefine sus variables de color
 * (_next-colors.scss, formato «R G B») y las clases con color fijo (n-brand = #2781F6 compilado por Tailwind).
 * Modo oscuro: se deja el de Chatwoot, solo con el color de marca. Al subir de versión, revisar que existan --blue-*,
 * --background-color, --solid-amber y las clases bg-n-brand / text-n-brand. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/vcc/marca/schibsted.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* Letra */
body, button, input, textarea, select, .font-inter, .font-interDisplay {
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Paleta clara: la escala «blue» de Chatwoot pasa a pino; fondos a niebla; textos a tinta */
:root:not(.dark) {
  --blue-1: 247 250 247;
  --blue-2: 243 246 242;   /* niebla-50 */
  --blue-3: 227 233 226;   /* niebla-100 */
  --blue-4: 214 224 215;
  --blue-5: 198 209 200;   /* borde */
  --blue-6: 169 189 176;   /* pino-300 */
  --blue-7: 138 165 149;
  --blue-8: 94 130 112;
  --blue-9: 23 53 42;      /* pino-900 = primario */
  --blue-10: 43 84 66;     /* pino-700 = hover */
  --blue-11: 31 70 54;     /* enlaces y texto de marca sobre claro */
  --blue-12: 23 53 42;

  --slate-12: 23 53 42;    /* texto */
  --slate-11: 78 91 83;    /* texto secundario tinta-600 */
  --slate-10: 96 110 101;
  --slate-3: 227 233 226;
  --slate-2: 243 246 242;

  --background-color: 243 246 242;
  --surface-1: 255 255 255;
  --surface-2: 255 255 255;
  --border-strong: 198 209 200;
  --border-weak: 227 233 226;
  --border-container: 227 233 226;
  --border-blue-strong: 23 53 42;
  --border-blue: 23, 53, 42, 0.5;
  --solid-blue: 227 233 226;
  --solid-blue-2: 243 246 242;
  --text-blue: 23 53 42;
  --text-amber: 138 82 9;  /* ámbar-800 sobre claro */
  --solid-amber: 251 241 226; /* nota privada «pasa a recepción» */
}

/* Color de marca (fijo en Tailwind) en claro y oscuro */
.bg-n-brand:not([class*="!bg-"]) { background-color: #17352A !important; }
.hover\:bg-n-brand:hover { background-color: #2B5442 !important; }
.text-n-brand { color: #1F4636 !important; }
.dark .text-n-brand { color: #A9BDB0 !important; }
.border-n-brand { border-color: #17352A !important; }
.outline-n-brand { outline-color: #17352A !important; }
.dark .bg-n-brand:not([class*="!bg-"]) { background-color: #2B5442 !important; }
/* Variantes con estado y transparencia (todas las que usa v4.19.1: grep de bg|text|border|ring|outline-n-brand) */
.hover\:text-n-brand:hover, .group:hover .group-hover\:text-n-brand, .dark .dark\:text-n-brand { color: #1F4636 !important; }
.hover\:border-n-brand:hover, .focus\:border-n-brand:focus, .focus-visible\:border-n-brand:focus-visible, .dark .dark\:border-n-brand { border-color: #17352A !important; }
.border-n-brand\/50 { border-color: rgba(23, 53, 42, .5) !important; }
.focus\:outline-n-brand:focus, .focus-visible\:outline-n-brand:focus-visible { outline-color: #17352A !important; }
.ring-n-brand, .focus\:ring-n-brand:focus, .focus-visible\:ring-n-brand:focus-visible, .dark .dark\:ring-n-brand { --tw-ring-color: #17352A !important; }
.ring-n-brand\/25 { --tw-ring-color: rgba(23, 53, 42, .25) !important; }
.group:hover .group-hover\:bg-n-brand { background-color: #17352A !important; }
.bg-n-brand\/5 { background-color: rgba(23, 53, 42, .05) !important; }
.bg-n-brand\/10, .hover\:bg-n-brand\/10:hover, .dark .dark\:bg-n-brand\/10 { background-color: rgba(23, 53, 42, .10) !important; }
.bg-n-brand\/20, .focus-visible\:bg-n-brand\/20:focus-visible { background-color: rgba(23, 53, 42, .20) !important; }
.hover\:bg-n-brand\/80:hover, .hover\:bg-n-brand\/90:hover { background-color: #2B5442 !important; }
.from-n-brand\/15 { --tw-gradient-from: rgba(23, 53, 42, .15) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
/* Enlaces de la pantalla de entrada (v3/App.vue .text-link) */
.text-link { color: #1F4636 !important; }
.dark .text-link { color: #A9BDB0 !important; }

/* Radios */
:root { --hosp-radio: 10px; --hosp-radio-tarjeta: 14px; }

/* Celular: campos de 16 px (iPhone no hace zoom) y controles tocables */
@media (max-width: 768px) {
  input, textarea, select, [contenteditable="true"], .ProseMirror { font-size: 16px !important; }
}

/* v2 (09/11/2026 23:2x, OK de Martin): Llamadas no tiene interruptor por cuenta en 4.19.1 (sale en la edición enterprise) */
li:has(> a[href*="/calls"]), a[href$="/calls"] { display: none !important; }
/* Modo oscuro: burbujas del equipo y acentos en pino (Agatha: pino-400 si se pierde sobre el fondo oscuro) */
.dark { --solid-blue: 31 70 54; --text-blue: 214 224 215; --blue-9: 94 130 112; --blue-10: 138 165 149; --blue-11: 169 189 176; }
/* v3: raya de la pestaña activa (TabsItem.vue: after:bg-n-brand) y burbuja del bot (bg-n-solid-iris) en la marca */
.after\:bg-n-brand::after { background-color: #17352A !important; }
.dark .after\:bg-n-brand::after { background-color: #A9BDB0 !important; }
body:not(.dark) .bg-n-solid-iris { background-color: rgb(236 242 236) !important; }
.dark .bg-n-solid-iris { background-color: rgb(31 70 54) !important; }
/* v5: texto de ayuda del editor (ProseMirror lo pinta con ::before desde data-placeholder; JS no alcanza a cambiarlo) */
.ProseMirror p.empty-node[data-placeholder^="Shift + enter for new line"]::before { content: "Escribe tu respuesta. Mayús + Enter para otra línea; / para respuestas rápidas." !important; }
.ProseMirror p.empty-node[data-placeholder^="Mayús + entrar"]::before { content: "Nota privada: solo la ve el equipo. Mayús + Enter para otra línea." !important; }