/* Schibsted Grotesk (SIL OFL) — autohospedada: cero dependencias externas.
   Variable 400-900; latin + latin-ext (español completo). */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2212, U+FEFF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0;
}

/* DRAIOS brand system — tokens neutros de producto.
   DRAIOS es multi-clínica: ninguna marca de cliente vive en el código. Estos
   valores son solo el DEFAULT; el client pack los sobreescribe en caliente vía
   /api/public-config (branding.colors) sobre --o / --od / --o-soft.
   Light theme · texto casi-negro (wordmark) · acento azul-verdoso clínico.
   Shared verbatim across landing, instance and admin (copy in each public/).

   TINTES CON TRANSPARENCIA — regla de la casa: nunca se re-codifica un color de
   marca dentro de un rgba(). Un tinte del acento se escribe siempre derivándolo
   del token:

       background: color-mix(in srgb, var(--o) 12%, transparent);

   así el tinte sigue a --o venga de donde venga: del tema activo (theme.css) o
   del client pack (que lo escribe como estilo inline). Un rgba(14,116,144,.12)
   literal se quedaría con el acento viejo y partiría la marca en dos colores.

   TEMAS — public/themes/<nombre>/theme.css (env DRAIOS_THEME) se carga DESPUÉS
   de esta hoja y redefine estos mismos tokens. Todo lo que esté aquí como var()
   es tematizable; todo lo que quede como hex literal, no. */

:root {
  /* ---- BASE ---------------------------------------------------------------
     El lienzo es el único degradado que cubre la pantalla completa. --bg queda
     como fallback sólido para todo lo que pinte un fondo plano. */
  --bg: #EAF3FA;       /* page bg */
  --bg-grad:
    radial-gradient(120% 105% at 12% 0%,  color-mix(in srgb, #C4E4F5 30%, transparent), transparent 70%),
    radial-gradient(95% 95%  at 97% 100%, color-mix(in srgb, #E1DBF8 18%, transparent), transparent 70%),
    linear-gradient(135deg, #FCFEFE 0%, #EAF3FA 100%);
  --surface: #FFFFFF;  /* tarjetas, paneles */
  --paper: #F4F6F8;    /* insets: buscador, segmentado, celdas */
  --line: #E9EAEE;     /* bordes de 1px donde todavía hacen falta */
  --rail: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  --rail-line: #E4E6EA;
  --navy: #212328;     /* títulos y cifras */
  --slate: #6B6E76;    /* cuerpo secundario */
  --sl: #9BA0A8;       /* terciario, etiquetas */

  /* ---- ACCIÓN -------------------------------------------------------------
     Grafito para TODO lo accionable: botón primario, fila activa. Nunca color.
     La chispa cyan es el único color que entra al botón, y solo en el icono. */
  --action: #1D2226;
  --action-grad: linear-gradient(135deg, #242A2E 0%, #171B1F 100%);
  --action-text: #FFFFFF;
  --action-spark: #35A9C6;
  --switch-off: #D6DBE0;

  /* ---- CLARA · EL AGENTE --------------------------------------------------
     --o / --od / --o-soft cambian de SIGNIFICADO, no de nombre: ya no pintan el
     botón primario, pintan la identidad del agente y de la clínica. Siguen
     siendo los tres tokens que el client pack sobreescribe en caliente vía
     /api/public-config (branding.colors) — contrato white-label intacto.
     --od existe porque el magenta como TEXTO necesita su propio umbral; a
     #CE1580 da 4.8:1 sobre blanco, así que hoy los dos comparten valor. */
  --o: #CE1580;        /* voz de Clara: texto, chips, etiquetas */
  --od: #CE1580;       /* variante de texto — 4.8:1 sobre blanco */
  --ac: var(--od);     /* alias: focos y barras del dashboard ya lo escribían */
  /* Dos alias más del mismo caso que --ac: cinco reglas de la bandeja y del
     vault escribían var(--sf) y una var(--tx), y los tokens no existían en
     NINGUNA hoja. Caían a transparente, así que esos paneles se quedaban sin
     superficie propia — invisible mientras el lienzo era casi blanco. */
  --sf: var(--surface);
  --tx: var(--navy);
  /* El diseño fija el tinte en #FDE6F2. Se deriva en vez de codificarlo para
     que un client pack que mande solo primary/primaryDark (soft es opcional en
     applyBranding) no parta la marca en dos colores. 12% sobre blanco = #F9E3EF. */
  --o-soft: color-mix(in srgb, var(--o) 12%, var(--surface));
  --agent-grad: linear-gradient(135deg, #D9EEFB 0%, #E3D9F9 100%); /* piel de Clara */
  --agent-ink: #5B3E86;  /* iconos e iniciales SOBRE --agent-grad (6.3:1) */

  /* ---- ESTADOS ------------------------------------------------------------
     Verde confirma, ámbar espera decisión, rojo es urgencia clínica. Los tres
     se usan como COLOR DE TEXTO sobre su propio -soft, así que el umbral que
     importa es 4.5:1 contra ese fondo, no contra blanco. */
  --ok: #2E6B4C;    --ok-soft: #E5F3EA;
  --ok-bar: linear-gradient(90deg, #A3DFC1 0%, #66C098 100%);
  --ok-dot: #2FA36B;   /* «Clara está atendiendo» */
  --warn: #8A5A16;  --warn-soft: #FDEEDA;
  --err: #B02A2E;   --err-soft: #FCE7E7;
  --err-spark: #FF8E86; /* icono de urgencia dentro del botón grafito */

  /* ---- TILES DEL DÍA ------------------------------------------------------
     Orden fijo: de lo urgente a lo tranquilo, de izquierda a derecha. */
  --tile-1: linear-gradient(135deg, #FFF8FC 0%, #F6C4DF 100%); --tile-1-deco: #F98BC4;
  --tile-2: linear-gradient(135deg, #F4FDFB 0%, #ADDFD6 100%); --tile-2-deco: #63B7AC;
  --tile-3: linear-gradient(135deg, #F8F6FF 0%, #CFC5F3 100%); --tile-3-deco: #A99BE8;
  --tile-4: linear-gradient(135deg, #FFFBF3 0%, #F7D8AC 100%); --tile-4-deco: #E5B778;

  /* Único superviviente de la paleta secundaria: --accent-teal todavía pinta
     borde y sombra del canvas del grafo (style.css 804/1036). Repuntado a
     neutro; green/lime/gold/magenta se borran (sin consumidores en base — los
     temas que los usan los definen ellos mismos). */
  --accent-teal: var(--navy);
  /* Las 4 Cs (Contexto/Conexiones/Capacidades/Cadencia) dejan de distinguirse
     por color: el diseño las unifica en gris. Se conservan los nombres porque
     app.js y dashboard-core.js los leen; los donuts siguen separando sus
     segmentos por luminosidad (color-mix 42%/22% con blanco), no por tono. */
  --c-contexto: var(--slate);    --c-contexto-tint: var(--paper);
  --c-conexiones: var(--slate);  --c-conexiones-tint: var(--paper);
  --c-capacidades: var(--slate); --c-capacidades-tint: var(--paper);
  --c-cadencia: var(--slate);    --c-cadencia-tint: var(--paper);
  /* Wallpaper — la nota de migración los daba por huérfanos, pero el grafo del
     conocimiento los lee con cssVar() para colorear los buckets de nodos
     (app.js 719-722, 770) además del fondo del login. Se repuntan a los deco de
     los tiles, la única paleta multicolor que queda aprobada. */
  --wall-1: var(--tile-1-deco);  /* Clientes y personas */
  --wall-2: var(--tile-3-deco);  /* Decisiones */
  --wall-3: var(--tile-2-deco);  /* Proyectos */
  /* Radii — cero bordes en tarjetas: la separación la hace la sombra. */
  --radius: 20px;      /* tarjetas y paneles */
  --radius-sm: 14px;   /* insets, iconos, chips cuadrados */
  --radius-xs: 8px;
  --radius-lg: 24px;   /* dock y paneles flotantes */
  --radius-pill: 999px;/* botones, filas activas, estados */
  /* Spacing scale (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  /* Type ramp — jerarquía del diseño: 32/700 título de página, 16/650 sección,
     13.5/400 cuerpo, 10.5/700 etiqueta. */
  --fs-2xs: .656rem; --fs-xs: .72rem; --fs-sm: .78rem; --fs-base: .84rem;
  --fs-md: .94rem; --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.56rem; --fs-3xl: 2rem;
  --ls-label: .124em;  /* 1.3px sobre 10.5px */
  /* Icon ramp */
  --ic-xs: 13px; --ic-sm: 15px; --ic-md: 17px; --ic-lg: 22px; --ic-xl: 30px;
  /* Motion */
  --dur-fast: .12s; --dur: .16s; --dur-slow: .22s;
  --ease-spring: cubic-bezier(.2, .8, .3, 1);
  /* Elevation */
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--navy) 11%, transparent);
  --shadow: 0 2px 6px color-mix(in srgb, var(--navy) 8%, transparent),
            0 14px 32px color-mix(in srgb, var(--navy) 13%, transparent);
  --shadow-lg: 0 2px 6px color-mix(in srgb, var(--navy) 8%, transparent),
               0 22px 52px color-mix(in srgb, var(--navy) 18%, transparent);
  /* Focus ring — 2px de hueco del color de la superficie + 2px de chispa. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--action-spark);
  /* Coordinated breakpoints (reference; media queries use the literal px) */
  --bp-mobile: 760px;
  --bp-sm: 480px;
  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--navy);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  line-height: 1.5;
  font-size: 13.5px;
}
a { color: var(--od); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- typographic primitives ----
   La jerarquía del rediseño: 32/700 título de página, 16/650 sección,
   13.5/400 cuerpo, 10.5/700 con +1.3 de tracking para la etiqueta. */
.kicker {
  color: var(--o);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
}
h1, .h1 { color: var(--navy); font-weight: 700; font-size: var(--fs-3xl); letter-spacing: -0.022em; line-height: 1.15; }
h2, .h2 { color: var(--navy); font-weight: 650; font-size: var(--fs-2xl); letter-spacing: -0.015em; }
h3 { color: var(--navy); font-weight: 650; font-size: var(--fs-lg); }
.u { width: 64px; height: 4px; background: var(--o); border-radius: 3px; margin: 12px 0 0; }
.muted { color: var(--slate); }
.faint { color: var(--sl); }
.small { font-size: 0.85rem; }

/* ---- layout ---- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  h2, .h2 { font-size: 1.55rem; }
}

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(8px); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.brand .mark { width: 26px; height: 26px; object-fit: contain; }
.brand .name { font-size: 1.05rem; }
.brand .name b { color: var(--o); }
.spacer { flex: 1; }

/* ---- buttons ---- */
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--o); color: #fff; border: 0; border-radius: 10px;
  padding: 0.7rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer;
  transition: background 0.15s, transform 0.05s; line-height: 1;
}
.btn:hover { background: var(--od); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: var(--surface); color: var(--navy); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--paper); border-color: var(--sl); }
.btn.danger { background: var(--surface); color: var(--err); border: 1px solid #f3c2c2; }
.btn.danger:hover { background: #fdf2f2; }
.btn.sm { padding: 0.45rem 0.8rem; font-size: 0.85rem; border-radius: 8px; }
.btn .ic { width: 17px; height: 17px; }

/* ---- cards / tiles ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.card.accent { border-top: 4px solid var(--o); }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.tile .label { color: var(--sl); font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 700; }
.tile .value { color: var(--navy); font-size: 1.5rem; font-weight: 600; margin-top: 8px; }
.tile .sub { color: var(--slate); font-size: 0.85rem; margin-top: 4px; }

/* ---- chips & pills ---- */
.chip {
  display: inline-block; background: var(--surface); border: 1px solid var(--o); color: var(--od);
  border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--slate);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Canal con ícono: la marca reemplaza al punto y le presta su color. */
.pill.ch-whatsapp::before, .pill.ch-instagram::before { display: none; }
.pill.ch-whatsapp .ic, .pill.ch-instagram .ic { width: 14px; height: 14px; }
.pill.ch-whatsapp { color: #128c7e; border-color: color-mix(in srgb, #128c7e 28%, var(--bg)); background: color-mix(in srgb, #128c7e 7%, var(--bg)); }
.pill.ch-instagram { color: #c13584; border-color: color-mix(in srgb, #c13584 28%, var(--bg)); background: color-mix(in srgb, #c13584 7%, var(--bg)); }
.pill.ok, .pill.active { color: var(--ok); border-color: #bbf0cd; background: #f0fdf4; }
.pill.warn, .pill.awaiting_login { color: var(--warn); border-color: #fde7c0; background: #fffbeb; }
.pill.provisioning { color: var(--o); border-color: color-mix(in srgb, var(--o) 30%, var(--bg)); background: var(--o-soft); }
.pill.err, .pill.error, .pill.suspended { color: var(--err); border-color: #f3c2c2; background: #fef2f2; }

/* ---- forms ---- */
label { font-weight: 600; color: var(--navy); font-size: 0.9rem; }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  font: inherit; color: var(--navy); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.65rem 0.8rem; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--o); box-shadow: 0 0 0 3px var(--o-soft); }
.field { display: flex; flex-direction: column; gap: 6px; }

/* ---- table (admin) ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
th { color: var(--sl); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; }
tbody tr:hover { background: var(--paper); }

/* ---- code ---- */
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.codeblock {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 0.9rem;
  color: var(--navy); word-break: break-all; user-select: all;
}

/* ---- flow (deck) ---- */
.flow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flow .node {
  flex: 1; min-width: 120px; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 18px 16px; text-align: center; background: var(--surface);
}
.flow .node.core { border: 2px solid var(--o); background: var(--o-soft); }
.flow .node .nlabel { font-weight: 700; color: var(--navy); }
.flow .node .ndesc { color: var(--slate); font-size: 0.85rem; margin-top: 4px; }
.flow .arrow { color: var(--o); font-size: 1.6rem; font-weight: 300; }

/* ---- misc ---- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.center { text-align: center; }
.footer { color: var(--slate); font-size: 0.85rem; letter-spacing: 0.04em; padding: 32px 0; border-top: 1px solid var(--line); }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--navy) 45%, transparent); display: flex;
  align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal {
  background: var(--surface); border-radius: var(--radius); padding: 28px; max-width: 440px; width: 100%;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--navy) 25%, transparent);
}

/* First frame (boot screen): #app before boot.js hydrates the real UI —
   centered on paper with the server-resolved mark, instead of raw unstyled
   "Cargando…" text top-left. */
.app-boot {
  min-height: 100dvh; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; background: var(--paper); color: var(--slate);
}
.app-boot img { width: 48px; height: 48px; object-fit: contain; animation: bootPulse 1.6s ease-in-out infinite; }
@keyframes bootPulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .app-boot img { animation: none; } }