/* ═══════════════════════════════════════════════════════════════════
   suite-tokens.css — Fuente de verdad visual / Suite Conversacional
   Paleta: Partner Consultores — Rebranding 2026 (reemplaza la paleta azul institucional anterior)
   NO tocar variables sin actualizar también los módulos que las usan.
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ── Variables globales ──────────────────────────────────────────── */
:root {
  /* Paleta de marca Partner Consultores */
  --brand-blue: #FF931E;   /* Naranja principal de marca (alias histórico "blue", ver nota abajo) */
  --brand-dark: #333333;   /* Oscuro institucional / texto principal */
  --brand-bg:   #F2F2F2;   /* Gris claro institucional / fondo base */

  /* --bd: oscuro institucional → fondo de header, botones primarios, textos de énfasis
     --bm y --bl: naranja de marca → acentos, links, indicadores
     (nombres de variable heredados de la paleta anterior; los valores ya son
     los de Partner Consultores — no renombrar sin actualizar todos los usos) */
  --bd: #333333;            /* oscuro institucional Partner Consultores — header y primario */
  --bm: #FF931E;            /* naranja de marca (alias de --brand-blue) — acentos, fondos, texto sobre fondo oscuro */
  --bl: #FFAE56;            /* naranja claro */
  --bp: #FFC98F;            /* naranja pálido */
  --bb: #FFE4C7;            /* naranja muy claro / fondo tinted */
  --bm-dark: #8A4B0F;       /* naranja oscuro — SOLO para texto sobre --bb/--bp (contraste ~1.8:1 con --bm, ~5.5:1 con --bm-dark) */

  /* Escala funcional verde — sin cambio respecto Sistema 2 */
  --gd: #27500A; --gm: #3B6D11; --gp: #C0DD97; --gb: #EAF3DE;

  /* Escala funcional ámbar — sin cambio respecto Sistema 2 */
  --ad: #633806; --am: #BA7517; --ap: #FAC775; --ab: #FAEEDA;

  /* Escala funcional rojo — sin cambio respecto Sistema 2 */
  --rd: #791F1F; --rm: #A32D2D; --rp: #F7C1C1; --rb: #FCEBEB;

  /* Escala funcional azul — categoría "Referente" (nivel 4/4) de categorias.js.
     Antes usaba --bm (azul de marca de la paleta KHP); ahora que --bm es el naranja de marca
     Partner Consultores, "Referente" necesita su propio azul para seguir distinguiéndose de
     "En Desarrollo" (ámbar) — con la paleta naranja ambos quedaban casi idénticos. */
  --zd: #1F3864; --zm: #3D5A99; --zp: #C9D9F2; --zb: #EAF1FB;

  /* Grises neutros */
  --g1: #F7F8FA; --g2: #EDEEF1; --g3: #D3D5DC; --g4: #9CA3AF; --g5: #6B7280;

  /* Texto / fondo / borde */
  --tx:   var(--brand-dark);   /* texto principal */
  --ts:   #6B7280;             /* texto secundario / muted */
  --bg:   var(--brand-bg);     /* fondo base */
  --wh:   #FFFFFF;
  --br:   #E5E7EB;             /* borde general */

  /* Aliases de compatibilidad (Sistema 3 — bots) */
  --text:  var(--brand-dark);
  --text2: #6B7280;

  /* Aliases de compatibilidad (suite.css — landing) */
  --ink:    var(--brand-dark);
  --muted:  #6B7280;
  --line:   #E5E7EB;
  --surface: #FFFFFF;
  --soft:   var(--brand-bg);

  /* Radios y sombra */
  --rs:     6px;
  --rm2:    8px;
  --rl:     12px;
  --radius: 8px;
  --sh:     0 1px 3px rgba(0,0,0,.08);
}

/* ── Reset base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--tx);
  line-height: 1.5;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ══════════════════════════════════════════════════════════════════
   COMPONENTES BASE — una sola definición para toda la suite
══════════════════════════════════════════════════════════════════ */

/* ── .andamio-topbar — Header único de toda la suite (topNav.js) ──
   Un solo componente inyectado por public/shared/topNav.js: mismo logo, mismo set de
   links, mismo orden, en las 23 páginas. No reimplementar localmente — si una página
   necesita algo que este header no cubre, se extiende acá, no en el HTML del módulo. */
.andamio-topbar {
  background: var(--bd);
  color: #fff;
  padding: 0 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: 'Poppins', sans-serif;
  position: sticky;
  top: 0;
  z-index: 20;
}
.andamio-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.andamio-brand-icon { width: 28px; height: 28px; object-fit: contain; display: block; }
.andamio-brand-word { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: .1px; }
.andamio-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.andamio-nav-link {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.andamio-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.andamio-nav-link.active { color: #fff; background: rgba(255,255,255,.14); }
.andamio-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,.8);
  flex-shrink: 0;
}
.andamio-user a { color: #fff; font-weight: 700; text-decoration: none; }
.andamio-user a:hover { text-decoration: underline; }

/* ── Modal de cambio de código de acceso (H14) — lo monta topNav.js, sirve en las 24 páginas ── */
#andamio-codigo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.andamio-codigo-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  padding: 24px;
  width: min(100%, 400px);
  max-height: 90vh;
  overflow-y: auto;
}
.andamio-codigo-card h2 { margin: 0 0 8px; font-size: 18px; }
.andamio-codigo-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: #6B7280; }
.andamio-codigo-card label {
  display: block;
  margin: 12px 0 5px;
  font-size: 12px;
  font-weight: 700;
}
.andamio-codigo-card input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #D8DCE3;
  border-radius: 7px;
  font: inherit;
  font-size: 14px;
}
.andamio-codigo-error {
  background: #fff0f0;
  color: #9b1c1c;
  border: 1px solid #f6caca;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 12px;
  margin-bottom: 10px;
}
.andamio-codigo-acciones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.andamio-codigo-acciones button {
  padding: 9px 16px;
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #D8DCE3;
  background: #fff;
}
.andamio-codigo-acciones .andamio-codigo-guardar { background: #262626; border-color: #262626; color: #fff; }
.andamio-codigo-acciones button:disabled { opacity: .6; cursor: default; }

/* ── .andamio-crumb — miga de pan, solo cuando la página la define ── */
.andamio-crumb {
  background: #262626;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: sticky;
  top: 56px;
  z-index: 19;
}
.andamio-crumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.andamio-crumb a:hover { color: #fff; text-decoration: underline; }
.andamio-crumb-sep { opacity: .5; }
.andamio-crumb-current { color: #fff; font-weight: 600; }

@media (max-width: 640px) {
  .andamio-topbar { flex-wrap: wrap; padding: 10px 16px; position: static; }
  .andamio-user { margin-left: 0; width: 100%; justify-content: space-between; }
  .andamio-crumb { position: static; }
}

/* ── Botones ─────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .2px;
  transition: background .15s;
}
.btn-primary:hover    { background: var(--bm); }
.btn-primary:disabled { background: var(--g3); cursor: not-allowed; }

.btn-ghost {
  background: none;
  border: 1px solid var(--g3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ts);
  font-family: 'Poppins', sans-serif;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

.btn-secondary {
  background: none;
  border: 1px solid var(--brand-blue);
  color: var(--brand-blue);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  transition: background .15s, color .15s;
}
.btn-secondary:hover { background: var(--brand-blue); color: #fff; }

/* ── .sc-card — Tarjeta de selección de escenario ────────────────── */
.sc-card {
  background: var(--wh);
  border: 2px solid var(--g2);
  border-radius: var(--rl);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sc-card:hover    { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(121,146,216,.12); }
.sc-card.selected { border-color: var(--brand-blue); background: var(--bb); }

/* ── .fb-card — Tarjeta de feedback / informe ────────────────────── */
.fb-card {
  background: var(--wh);
  border: 1px solid var(--g2);
  border-radius: var(--rl);
  padding: 16px 18px;
  box-shadow: var(--sh);
}
.fb-card h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--brand-dark);
  font-weight: 700;
  margin-bottom: 10px;
}

/* ── .apertura-meter / .apertura-dots / .adot ────────────────────── */
/*    Medidor de apertura — base. reuniones-bot extiende con clases   */
/*    adicionales (--felipe / --isadora) sin renombrar este patrón.   */
.apertura-meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.apertura-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text2, var(--ts));
  font-weight: 600;
}
.apertura-dots { display: flex; gap: 4px; }
.apertura-dots .adot {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  background: var(--g2);
  transition: background .35s;
}
.apertura-dots .adot.on      { background: var(--g4); }
.apertura-dots.lvl1 .adot.on { background: var(--rm); }
.apertura-dots.lvl2 .adot.on { background: var(--am); }
.apertura-dots.lvl3 .adot.on { background: var(--g4); }
.apertura-dots.lvl4 .adot.on { background: var(--gm); }
.apertura-dots.lvl5 .adot.on { background: var(--gd); }

/* ── .error-msg ──────────────────────────────────────────────────── */
.error-msg {
  background: var(--rb);
  color: var(--rd);
  border: 1px solid var(--rp);
  padding: 10px 14px;
  border-radius: var(--rs);
  font-size: 13px;
  margin-top: 10px;
  display: none;
}

/* ── .khp-cmp-* — comparativo Laboratorio (linea base vs. seguimiento) ──── */
.khp-cmp-box {
  background: var(--wh);
  border: 1px solid var(--br);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  padding: 14px 16px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--tx);
}
.khp-cmp-titulo { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--g5); margin-bottom: 6px; }
.khp-cmp-resumen { margin-bottom: 6px; }
.khp-cmp-destacado { margin-top: 6px; padding: 6px 10px; border-radius: var(--rm2); font-size: 12.5px; }
.khp-cmp-destacado.khp-cmp-ok  { background: var(--gb); }
.khp-cmp-destacado.khp-cmp-bad { background: var(--rb); }
.khp-cmp-box.khp-cmp-info { color: var(--ts); font-style: italic; }
.khp-cmp-ok      { color: var(--gm); font-weight: 600; }
.khp-cmp-bad     { color: var(--rm); font-weight: 600; }
.khp-cmp-neutral { color: var(--g5); font-weight: 600; }
.khp-cmp-lista { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--tx); font-weight: 400; }
.khp-cmp-box details { margin-top: 6px; }
.khp-cmp-box summary { cursor: pointer; font-size: 12px; color: var(--brand-blue); }