/* ============================================================================
   DiaMed UI · sistema de diseño de la plataforma
   Un solo archivo, sin frameworks ni build steps. Secciones:
     1. Tokens (modo claro y oscuro)
     2. Base y tipografía
     3. App shell (lateral, cabecera, contenido, navegación móvil)
     4. Componentes (tarjeta, tabla, chip/aviso, botón, formulario, vacío,
        toast, esqueleto, bitácora, kpi)
     5. Motion y utilidades
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Tokens
   Neutros fríos con leve sesgo del acento; rojo DiaMed ~#C8102E (tono de
   referencia, ajustado para contraste AA en ambos modos, verificado por cálculo). */
:root {
  color-scheme: light;

  --fondo: #F7F5F6;
  --superficie: #FFFFFF;
  --superficie-2: #F0EDEF;
  --tinta: #211C1F;
  --tinta-suave: #675E63;
  --borde: #E7E2E5;
  --borde-fuerte: #CDC5C9;

  --acento: #C8102E;          /* relleno: texto blanco encima pasa AA */
  --acento-oscuro: #A50D26;   /* hover del relleno */
  --acento-texto: #C8102E;    /* enlaces y texto acentuado */
  --acento-suave: #FAE9EC;

  --ok-texto: #1B7A43;        --ok-suave: #E6F4EB;
  --advertencia-texto: #8A5800; --advertencia-suave: #FBF2DD;
  --critico-texto: #B42318;   --critico-suave: #FBEAE9;

  --sombra: 0 1px 2px rgb(25 18 22 / .05), 0 6px 20px rgb(25 18 22 / .07);
  --sombra-alta: 0 2px 4px rgb(25 18 22 / .07), 0 12px 32px rgb(25 18 22 / .12);

  --radio: 12px;
  --radio-chico: 10px;

  --rapido: 150ms;
  --normal: 200ms;
  --lento: 250ms;

  --texto: clamp(0.875rem, 0.845rem + 0.16vw, 1rem);   /* 14 → 16px */
  --texto-chico: 0.85em;
  --titulo: clamp(1.25rem, 1.12rem + 0.7vw, 1.6rem);
  --subtitulo: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #141216;
    --superficie: #1D1A20;
    --superficie-2: #272229;
    --tinta: #ECE8EB;
    --tinta-suave: #A79FA6;
    --borde: #2E2933;
    --borde-fuerte: #453E4A;
    --acento-oscuro: #E0344F;
    --acento-texto: #F26379;
    --acento-suave: #3B1622;
    --ok-texto: #63CE8C;        --ok-suave: #14301F;
    --advertencia-texto: #E5B84E; --advertencia-suave: #33270E;
    --critico-texto: #F28B82;   --critico-suave: #3A1917;
    --sombra: none;
    --sombra-alta: 0 12px 32px rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #141216;
  --superficie: #1D1A20;
  --superficie-2: #272229;
  --tinta: #ECE8EB;
  --tinta-suave: #A79FA6;
  --borde: #2E2933;
  --borde-fuerte: #453E4A;
  --acento-oscuro: #E0344F;
  --acento-texto: #F26379;
  --acento-suave: #3B1622;
  --ok-texto: #63CE8C;        --ok-suave: #14301F;
  --advertencia-texto: #E5B84E; --advertencia-suave: #33270E;
  --critico-texto: #F28B82;   --critico-suave: #3A1917;
  --sombra: none;
  --sombra-alta: 0 12px 32px rgb(0 0 0 / .45);
}

/* --------------------------------------------------- 2. Base y tipografía */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -0.01em; }

a { color: var(--acento-texto); text-decoration: none; transition: color var(--rapido); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em;
  background: var(--superficie-2); padding: 1px 6px; border-radius: 6px; }

:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; border-radius: 4px; }

/* Cifras siempre tabulares */
table, .num, .kpi b { font-variant-numeric: tabular-nums; }

::selection { background: var(--acento-suave); }

/* ------------------------------------------------------------- 3. App shell */
.salto { position: absolute; left: -9999px; }
.salto:focus { left: 12px; top: 12px; z-index: 100; background: var(--superficie);
  padding: 10px 16px; border-radius: var(--radio-chico); box-shadow: var(--sombra-alta); }

.app { display: flex; min-height: 100dvh; }

/* Barra lateral (desktop) */
.lateral {
  position: sticky; top: 0; height: 100dvh; z-index: 30;
  width: 236px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  transition: width var(--normal) ease;
}
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; }
.logo {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--acento); color: #fff;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.marca-texto b { font-size: 1rem; letter-spacing: -0.01em; }
.marca-texto small { color: var(--tinta-suave); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; }

.lateral-nav { flex: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: var(--radio-chico);
  color: var(--tinta-suave); font-weight: 500; white-space: nowrap;
  transition: background var(--rapido), color var(--rapido);
}
.nav-item:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.nav-item.activo { background: var(--acento-suave); color: var(--acento-texto); font-weight: 600; }
.nav-item .icono { flex-shrink: 0; }

.lateral-pie { padding: 10px; border-top: 1px solid var(--borde); display: flex;
  flex-direction: column; gap: 2px; }
button.nav-item { background: transparent; border: 0; width: 100%; cursor: pointer;
  justify-content: flex-start; color: var(--tinta-suave); font-weight: 500; }
button.nav-item:hover { background: var(--superficie-2); color: var(--tinta); }
body.lateral-mini button.nav-item { justify-content: center; }

/* Colapsada a solo iconos (persistida por ui.js) */
body.lateral-mini .lateral { width: 68px; }
body.lateral-mini .marca-texto,
body.lateral-mini .nav-item span { display: none; }
body.lateral-mini .nav-item { justify-content: center; padding: 0; }
body.lateral-mini .lateral-marca { justify-content: center; padding-inline: 0; }

/* Columna principal */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px clamp(16px, 3vw, 28px);
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.cabecera-marca { display: none; align-items: center; gap: 8px; }
.cabecera-titulos { min-width: 0; }
.cabecera h1 { font-size: var(--titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-sub { margin: 0; color: var(--tinta-suave); font-size: var(--texto-chico);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cabecera-sub:empty { display: none; }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.usuario { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); }
.usuario .avatar { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 999px; background: var(--superficie-2); color: var(--tinta-suave); }
.usuario-datos { display: flex; flex-direction: column; line-height: 1.1; }
.usuario-datos b { font-size: 0.8rem; font-weight: 600; }
.usuario-datos small { font-size: 0.68rem; color: var(--tinta-suave); }

.boton-icono {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--tinta-suave); cursor: pointer;
  transition: background var(--rapido), color var(--rapido), transform var(--rapido);
}
.boton-icono:hover { background: var(--superficie-2); color: var(--tinta); }
.boton-icono:active { transform: scale(0.94); }

/* El toggle muestra un icono por modo */
.icono-sol, .icono-luna { display: none; }
:root:not([data-theme="dark"]) .icono-sol { display: block; }
:root[data-theme="dark"] .icono-luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icono-sol { display: none; }
  :root:not([data-theme="light"]) .icono-luna { display: block; }
}

.contenido { padding: clamp(16px, 3vw, 28px); width: 100%; max-width: 1280px; }

/* Navegación inferior (móvil) */
.nav-movil {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  grid-template-columns: repeat(7, 1fr);
  background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-movil a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 54px; padding: 6px 2px; color: var(--tinta-suave);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.01em;
  min-width: 0; overflow: hidden; /* 7 secciones a 390px sin desbordar la página */
}
.nav-movil a:hover { text-decoration: none; }
.nav-movil a.activo { color: var(--acento-texto); }

@media (max-width: 767px) {
  .lateral { display: none; }
  .nav-movil { display: grid; }
  .cabecera-marca { display: flex; }
  .usuario-datos small { display: none; }
  .contenido { padding-bottom: 84px; }
}

/* ----------------------------------------------------------- 4. Componentes */

/* Tarjeta: superficie elevada — sombra suave en claro, borde sutil en oscuro */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
}
.tarjeta--enlace { transition: transform var(--normal), box-shadow var(--normal),
  border-color var(--normal); }
.tarjeta--enlace:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta);
  border-color: var(--borde-fuerte); }

.seccion { margin: 0 0 20px; }
.seccion-titulo { font-size: var(--subtitulo); font-weight: 650; margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 8px; }
.seccion-titulo .n { color: var(--tinta-suave); font-weight: 500; font-size: 0.85em; }

/* Ficha (dl de pares dato/valor) */
dl.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
dl.ficha dt { color: var(--tinta-suave); }
dl.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  dl.ficha { grid-template-columns: 1fr; gap: 2px; }
  dl.ficha dd { margin-bottom: 10px; }
}

/* Tabla responsive: el scroll-x vive en la envoltura, nunca en la página */
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio);
  border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra);
  scrollbar-width: thin; }
.tabla { border-collapse: collapse; width: 100%; font-size: 0.92em; }
.tabla th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; background: var(--superficie-2); color: var(--tinta-suave);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px 14px; white-space: nowrap;
}
.tabla td { padding: 10px 14px; border-top: 1px solid var(--borde); vertical-align: top; }
.tabla tbody tr { transition: background var(--rapido); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla .num, .tabla th.num { text-align: right; }
.num { text-align: right; }

/* Tabla en tarjetas: bajo 600 px cada fila es una tarjeta — la primera columna es el
   título y las demás van como pares etiqueta · valor (la etiqueta sale de data-etiqueta);
   el semáforo de la fila es el borde izquierdo. A cualquier otro ancho, tabla. Un nombre
   recortado (.nombre-recortado) muestra el completo al tocarlo. */
.nombre-recortado { cursor: help; text-decoration: underline dotted var(--borde-fuerte); text-underline-offset: 3px; }
.nombre-recortado .nombre-completo { display: none; }
.nombre-recortado[aria-expanded="true"] .nombre-corto { display: none; }
.nombre-recortado[aria-expanded="true"] .nombre-completo { display: inline; }
@media (max-width: 599.98px) {
  .tabla-marco--tarjetas { border: 0 !important; overflow: visible !important; background: none; box-shadow: none; }
  .tabla.tabla--tarjetas, .tabla.tabla--tarjetas tbody, .tabla.tabla--tarjetas tr { display: block; width: 100%; }
  .tabla.tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla.tabla--tarjetas tr { border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px;
    margin: 0 0 10px; background: var(--superficie); }
  .tabla.tabla--tarjetas tbody tr:hover { background: var(--superficie); }
  .tabla.tabla--tarjetas td { display: grid; grid-template-columns: minmax(7.5em, 38%) 1fr; gap: 10px;
    border: 0; padding: 3px 0; text-align: left; overflow-wrap: break-word; }
  .tabla.tabla--tarjetas td.num { text-align: left; font-variant-numeric: tabular-nums; }
  .tabla.tabla--tarjetas td::before { content: attr(data-etiqueta); color: var(--tinta-suave); font-size: var(--texto-chico);
    line-height: 1.6; }
  .tabla.tabla--tarjetas td:first-child { display: block; font-weight: 600; font-size: 1.02em; padding: 0 0 6px; }
  .tabla.tabla--tarjetas td:first-child::before { content: none; }
  .tabla.tabla--tarjetas td.celda-vacia { display: none; }
  .tabla.tabla--tarjetas tr.fila-critico { box-shadow: inset 4px 0 0 var(--critico-texto); }
  .tabla.tabla--tarjetas tr.fila-advertencia { box-shadow: inset 4px 0 0 var(--advertencia-texto); }
  .tabla.tabla--tarjetas tr.fila-critico td:first-child, .tabla.tabla--tarjetas tr.fila-advertencia td:first-child { box-shadow: none; }
}

/* Chip / badge de estado con punto de color; .aviso son las banderas que las
   vistas ya emiten (roja/ambar/nota/ok) — mismos nombres, nuevo vestido */
.chip, .aviso {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 550; line-height: 1.4;
  background: var(--superficie-2); color: var(--tinta-suave);
  white-space: normal;
}
.chip::before, .aviso::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: currentColor; flex-shrink: 0;
}
.aviso.roja, .chip--critico { background: var(--critico-suave); color: var(--critico-texto); }
.aviso.ambar, .chip--advertencia { background: var(--advertencia-suave); color: var(--advertencia-texto); }
.aviso.ok, .chip--ok { background: var(--ok-suave); color: var(--ok-texto); }
.aviso.nota, .chip--neutro { background: var(--superficie-2); color: var(--tinta-suave); }
div.aviso { margin: 4px 0; }

/* Botones: primario (acento) y fantasma; targets ≥44px */
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  background: var(--acento); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
button:hover, .boton:hover { background: var(--acento-oscuro); text-decoration: none; }
button:active, .boton:active { transform: scale(0.97); }
.boton--fantasma, button.boton--fantasma {
  background: transparent; color: var(--tinta); border-color: var(--borde-fuerte);
}
.boton--fantasma:hover { background: var(--superficie-2); color: var(--tinta); }

/* Formularios: grid etiqueta/campo, inputs ≥44px con focus visible */
input[type=text], input[type=url], input[type=email], input[type=date], input[type=search], input[type=number], select, textarea {
  font: inherit; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--tinta);
  transition: border-color var(--rapido), box-shadow var(--rapido);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento-texto);
  box-shadow: 0 0 0 3px var(--acento-suave);
}
input::placeholder { color: var(--tinta-suave); opacity: 0.75; }

.formulario { display: grid; grid-template-columns: max-content 1fr; gap: 12px 16px;
  max-width: 640px; align-items: center; margin: 4px 0; }
.formulario label { color: var(--tinta-suave); font-weight: 500; }
.formulario .enviar { grid-column: 2; }
/* Formulario apilado: etiqueta sobre el campo, para tarjetas angostas */
.formulario--apilado { grid-template-columns: 1fr; gap: 6px; }
.formulario--apilado label { margin-top: 6px; }
.formulario--apilado .enviar { grid-column: 1; margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.formulario--apilado input:not([type=checkbox]), .formulario--apilado select { width: 100%; min-width: 0; }
.formulario--apilado .casilla { display: flex; gap: 8px; align-items: center; }
.formulario--apilado .casilla input { width: auto; }
.formulario-linea { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.formulario-linea label { color: var(--tinta-suave); font-weight: 500; }
@media (max-width: 640px) {
  .formulario { grid-template-columns: 1fr; gap: 6px; }
  .formulario label { margin-top: 6px; }
  .formulario .enviar { grid-column: 1; }
  .formulario input, .formulario select { width: 100%; }
}

/* Empty state con ilustración ligera */
.vacio {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 20px; text-align: center;
  color: var(--tinta-suave);
  border: 1.5px dashed var(--borde-fuerte); border-radius: var(--radio);
}
.vacio .icono { width: 38px; height: 38px; opacity: 0.6; }
.vacio p { margin: 0; max-width: 46ch; }

/* Toast (confirmaciones): lo puebla UI.toast() o los mensajes de Django */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) { #toasts { bottom: 76px; left: 16px; } }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-left: 3px solid var(--ok-texto);
  border-radius: var(--radio-chico); box-shadow: var(--sombra-alta);
  padding: 12px 16px; max-width: 380px;
  animation: toast-entra var(--lento) ease both;
}
.toast--error { border-left-color: var(--critico-texto); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } }

/* Skeleton loader (para cargas asíncronas; hoy ninguna pantalla las usa) */
.esqueleto { border-radius: 8px; background: linear-gradient(90deg,
    var(--superficie-2) 25%, var(--borde) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: brillo 1.4s ease infinite; min-height: 1em; }
@keyframes brillo { to { background-position: -200% 0; } }

/* Bitácora (línea de tiempo) */
ul.bitacora { list-style: none; padding: 0; margin: 8px 0 0; }
ul.bitacora li { position: relative; padding: 2px 0 14px 22px; font-size: 0.92em; }
ul.bitacora li::before { content: ""; position: absolute; left: 4px; top: 8px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave); }
ul.bitacora li:not(:last-child)::after { content: ""; position: absolute; left: 7px;
  top: 20px; bottom: 0; width: 2px; background: var(--borde); }
ul.bitacora .cuando { color: var(--tinta-suave); font-size: 0.85em; }

/* KPI / contadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; }
.kpi b { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.kpi span { color: var(--tinta-suave); font-size: 0.8rem; }

/* Tablero del pipeline (kanban de tarjetas) */
.tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px; align-items: start; }
.columna h2 { font-size: 0.82rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tinta-suave); margin: 0 0 10px; padding: 0 2px;
  display: flex; align-items: center; gap: 8px; }
.columna h2 .n { font-weight: 500; background: var(--superficie-2); border-radius: 999px;
  padding: 1px 9px; font-size: 0.78rem; }
.columna .tarjeta { margin-bottom: 10px; }
.columna .nog { font-weight: 600; }
.columna .desc { font-size: 0.92em; margin: 4px 0 2px; }
.columna .meta { font-size: 0.82em; }
.vacia { color: var(--tinta-suave); font-size: 0.9em; padding: 8px 2px; }

/* Miga / regreso */
.miga { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 14px 0;
  color: var(--tinta-suave); font-weight: 500; }
.miga:hover { color: var(--acento-texto); }
.miga .icono { width: 16px; height: 16px; }

/* Correo preparado */
pre.correo { border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie-2); padding: 14px 18px; font-size: 0.9em;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; }

/* Datos públicos (GC-01): la atribución al pie, la fila propia y las diferencias */
.atribucion { margin: 28px 0 4px; padding-top: 12px; border-top: 1px solid var(--borde);
  color: var(--tinta-suave); font-size: 0.8rem; }
.atribucion a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tabla tr.propia td { background: var(--acento-suave); }
.tabla tr.propia td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.dif-mas { color: var(--ok-texto); }
.dif-menos { color: var(--critico-texto); }
.columna .mas { font-size: 0.85em; color: var(--tinta-suave); padding: 2px; }
.acciones-cabeza { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* Qué tan al día está Guatecompras: la línea discreta y, si algo falló, la franja */
.frescura { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px;
  font-size: 0.82rem; color: var(--tinta-suave); }
.franja { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 0.88rem;
  background: var(--advertencia-suave); color: var(--advertencia-texto);
  box-shadow: inset 3px 0 0 var(--advertencia-texto); animation: resalte 0.6s ease-out; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filtros a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borde);
  color: var(--tinta-suave); font-size: 0.88em; transition: background var(--rapido) ease; }
.filtros a:hover { background: var(--superficie-2); }
.filtros a.activo { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.equivalencia-accion { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.equivalencia-accion select { max-width: 260px; }
.tabla tr:target td { animation: resalte 1.6s ease; }
@keyframes resalte { from { background: var(--advertencia-suave); } }

/* -------------------------------------------------- 5. Motion y utilidades */
.icono { width: 20px; height: 20px; }

.pluma { color: var(--tinta-suave); }
.pista { font-size: 0.85em; }
.vc { font-variant: small-caps; letter-spacing: 0.05em; }

/* Entrada sutil escalonada de tarjetas y filas (≤300 ms total) */
@keyframes entrada { from { opacity: 0; transform: translateY(8px); } }
.anima > * { animation: entrada var(--lento) ease both; }
.anima > :nth-child(1) { animation-delay: 0ms; }
.anima > :nth-child(2) { animation-delay: 30ms; }
.anima > :nth-child(3) { animation-delay: 60ms; }
.anima > :nth-child(4) { animation-delay: 90ms; }
.anima > :nth-child(5) { animation-delay: 120ms; }
.anima > :nth-child(6) { animation-delay: 150ms; }
.anima > :nth-child(7) { animation-delay: 180ms; }
.anima > :nth-child(8) { animation-delay: 210ms; }
.anima > :nth-child(n+9) { animation-delay: 240ms; }

/* View Transitions API: progresiva, sin dependencia */
@view-transition { navigation: auto; }

/* Reduced motion: todo el motion se apaga, siempre */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Mercado público: pestañas, filtros, barras de participación y paginación */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin: 4px 0 18px;
  overflow-x: auto; scrollbar-width: none; }
.pestanas a { padding: 9px 14px; color: var(--tinta-suave); font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--rapido) ease, border-color var(--rapido) ease; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a.activo { color: var(--acento-texto); border-bottom-color: var(--acento); }
.filtro-mercado { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 12px; align-items: end; }
.filtro-mercado label { display: block; font-size: 0.8rem; color: var(--tinta-suave); margin-bottom: 4px; }
.filtro-mercado input, .filtro-mercado select { width: 100%; }
.filtro-mercado .acciones { display: flex; gap: 8px; align-items: center; }
.barra { display: block; height: 6px; border-radius: 999px; background: var(--superficie-2);
  overflow: hidden; margin-top: 5px; min-width: 60px; }
.barra > span { display: block; height: 100%; width: var(--p, 0%); background: var(--acento);
  border-radius: inherit; transition: width var(--lento) ease; }
.paginacion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  margin-top: 12px; color: var(--tinta-suave); font-size: 0.88em; }
.paginacion nav { display: flex; gap: 6px; }
.paginacion a, .paginacion span.actual { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--borde); }
.paginacion span.actual { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.tabla tr.abierto td { background: var(--advertencia-suave); }
.tabla tr.abierto td:first-child { box-shadow: inset 3px 0 0 var(--advertencia-texto); }
.lista-corta { margin: 0; padding: 0; list-style: none; font-size: 0.88em; }
.lista-corta li + li { margin-top: 2px; }
.precios-anio { white-space: nowrap; }
/* Montos de diez cifras en un KPI: escalan y, si no caben, parten en vez de desbordar */
.kpi { container-type: inline-size; }
.kpi b { font-size: clamp(0.95rem, 10cqi, 1.45rem); overflow-wrap: anywhere; }
/* Capacidad para ofertar: el detalle que se despliega bajo cada renglón */
details.despliegue { margin-top: 6px; font-size: 0.86em; }
details.despliegue summary { cursor: pointer; color: var(--acento-texto); width: fit-content; }
details.despliegue[open] summary { margin-bottom: 6px; }
.tabla .capacidad-cifra { white-space: nowrap; }
.tabla td.sin-dato { color: var(--tinta-suave); font-style: italic; }
.tabla td.renglon { min-width: 220px; max-width: 380px; }
.nota-ambar { color: var(--advertencia-texto); margin: 4px 0; }
.nota-ambar::before { content: "▲ "; font-size: 0.8em; }

/* ---------------------------------------------------------------------------
   Indicadores: color por nivel, serie mínima y tendencia. Un dato sin señal
   se pinta gris, nunca verde. */
.fila-titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 16px; }
.kpis-esencial .kpi b { font-size: 1.7rem; }
.kpi-roja { box-shadow: inset 4px 0 0 var(--critico-texto); }
.kpi-ambar { box-shadow: inset 4px 0 0 var(--advertencia-texto); }
.kpi-ok { box-shadow: inset 4px 0 0 var(--ok-texto); }
.kpi-sin_senal, .kpi-sin_dato { box-shadow: inset 4px 0 0 var(--borde-fuerte); }
.kpi-sin_senal b, .kpi-sin_dato b { color: var(--tinta-suave); }
/* Una cifra informativa: se lee, no alarma (sin color de nivel). */
.kpi-informativo b, .kpi-informativo span { color: var(--tinta-suave); }
.valor-indicador { font-weight: 700; font-size: 1.05em; }
.nivel-roja.valor-indicador { color: var(--critico-texto); }
.nivel-ambar.valor-indicador { color: var(--advertencia-texto); }
.nivel-ok.valor-indicador { color: var(--tinta); }
.nivel-sin_senal.valor-indicador, .nivel-sin_dato.valor-indicador { color: var(--tinta-suave); }
.chispa { display: block; width: 120px; height: 28px; overflow: visible; }
.chispa polyline { fill: none; stroke: var(--tinta-suave); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chispa-roja polyline { stroke: var(--critico-texto); }
.chispa-ambar polyline { stroke: var(--advertencia-texto); }
.chispa-grande { width: 100%; height: 90px; }
.tendencia { display: inline-block; margin-right: 6px; font-size: 0.85em; white-space: nowrap;
  color: var(--tinta-suave); }
.tendencia-mejor { color: var(--ok-texto); }
.tendencia-peor { color: var(--critico-texto); }
.definicion { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.definicion dt { color: var(--tinta-suave); }
.definicion dd { margin: 0; }
.objetivo-frase { margin: -4px 0 12px; }
.senales summary { cursor: pointer; margin-top: 10px; }
.tabla-indicadores td { vertical-align: top; }
/* Medir cada área: lo que aún no tiene de dónde leer se dice, no se pinta en cero. */
.vacio-honesto { margin: 10px 0 0; padding: 8px 12px; border: 1px dashed var(--borde-fuerte);
  border-radius: 8px; }
.area-tarjeta { margin-bottom: 18px; }
.area-tarjeta, .objetivo, #cumplido, #reclamo, #cierre, #recorrido, #orden-de-compra { scroll-margin-top: 88px; }
.area-tarjeta > .seccion-titulo { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.area-eficiencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; margin: 0 0 12px; }
.area-eficiencia .kpi b { font-size: 1.35rem; }
.area-sub { margin: 14px 0 6px; font-size: 0.95rem; color: var(--tinta-suave); font-weight: 600; }
.reclamo-casilla p { margin-bottom: 8px; }
@media (max-width: 640px) {
  .definicion { grid-template-columns: 1fr; }
  .definicion dt { margin-top: 6px; }
}

/* ---------------------------------------------------------------------------
   El monitor de la pared: pantalla completa, sin navegación, oscuro por
   defecto, legible a 4–5 metros. En el teléfono las zonas se apilan. */
.pared-cuerpo { margin: 0; background: var(--fondo); }
.pared { min-height: 100dvh; padding: clamp(12px, 1.6vw, 28px); display: flex; flex-direction: column;
  gap: clamp(10px, 1.2vw, 20px); font-size: clamp(15px, 1.05vw + 4px, 28px); }
.pared-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pared-cabeza > div { display: flex; flex-direction: column; line-height: 1.2; }
.pared-cabeza small { color: var(--tinta-suave); font-size: 0.7em; }
.pared-vistas { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.pared-vistas a { color: var(--tinta-suave); text-decoration: none; font-size: 0.72em; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--borde); transition: background var(--rapido); }
.pared-vistas a.activa { background: var(--superficie-2); color: var(--tinta); border-color: var(--borde-fuerte); }
.pared-desconexion { padding: 10px 14px; border-radius: var(--radio-chico); background: var(--advertencia-suave);
  color: var(--advertencia-texto); font-weight: 600; }
.pared.desconectada .pared-cifra b { color: var(--tinta-suave) !important; }
.pared-vista { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 20px);
  animation: pared-entra var(--lento) ease-out; }
@keyframes pared-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pared-vista { animation: none; } }
.pared-franja { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr));
  gap: 8px; }
.senal { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radio-chico);
  background: var(--superficie); border-left: 6px solid var(--borde-fuerte); line-height: 1.25; }
.senal-roja { border-left-color: var(--critico-texto); background: var(--critico-suave); }
.senal-ambar { border-left-color: var(--advertencia-texto); background: var(--advertencia-suave); }
.senal-ok { border-left-color: var(--ok-texto); }
.senal-cruce .senal-area::before { content: "◆ "; }
.senal-area { font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.senal-titulo { font-weight: 600; font-size: 0.86em; }
.senal-edad { font-size: 0.66em; color: var(--tinta-suave); }
.senal-aparte { border-left-style: dashed; }
.senal-informativa { border-left-color: var(--borde-fuerte); color: var(--tinta-suave); }
.senal-informativa .senal-titulo { font-weight: 500; }
.senal-mas { justify-content: center; align-items: center; font-weight: 700; color: var(--tinta-suave); }
.pared-esencial { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: 12px; }
.pared-titulo { margin: 4px 0 0; font-size: 0.9em; font-weight: 650; color: var(--tinta-suave); }
.pared-titulo small { font-weight: 400; }
.pared-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr)); gap: 12px; }
.pared-cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-top: 5px solid var(--ok-texto);
  min-width: 0; }
/* Un monto largo parte en sus comas antes que ensanchar la columna y sacar la pared de la pantalla. */
.pared-cifra b { font-size: 2.1em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pared-cifra.grande b { font-size: 2.9em; }
.pared-cifra span { font-size: 0.78em; color: var(--tinta-suave); line-height: 1.25; }
.pared-cifra small { font-size: 0.66em; color: var(--tinta-suave); }
.pared-cifra i { font-style: normal; }
.pared-cifra.nivel-roja { border-top-color: var(--critico-texto); }
.pared-cifra.nivel-roja b { color: var(--critico-texto); }
.pared-cifra.nivel-ambar { border-top-color: var(--advertencia-texto); }
.pared-cifra.nivel-ambar b { color: var(--advertencia-texto); }
.pared-cifra.nivel-sin_senal, .pared-cifra.nivel-sin_dato { border-top-color: var(--borde-fuerte); }
.pared-cifra.nivel-sin_senal b, .pared-cifra.nivel-sin_dato b { color: var(--tinta-suave); }
.pared-pie { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--borde); font-size: 0.7em; color: var(--tinta-suave); }
.pared-pie .viejo { color: var(--advertencia-texto); font-weight: 600; }
.pared-pie a { color: inherit; }
.pared-hora { margin-left: auto; }

/* ------------------------------------------------ Compromisos con el cliente
   La lista de lo prometido (ficha, Mi semana, Clientes), los toques de fecha
   y el botón de dictar: móvil primero, un pulgar alcanza todo. */
.compromisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.compromiso { border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie); padding: 10px 12px; display: grid; gap: 6px;
  transition: border-color var(--rapido), box-shadow var(--rapido); }
.compromiso:hover { border-color: var(--borde-fuerte); }
.compromiso--vencido { border-left: 4px solid var(--critico-texto); }
.compromiso--por_vencer { border-left: 4px solid var(--advertencia-texto); }
.compromiso--cumplido { opacity: .8; }
.compromiso-linea { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.compromiso-que { font-weight: 600; flex: 1 1 220px; }
.compromiso-fecha { font-variant-numeric: tabular-nums; white-space: nowrap; }
.compromiso details > summary { cursor: pointer; color: var(--tinta-suave);
  font-size: var(--texto-chico); list-style: none; min-height: 32px; display: inline-flex;
  align-items: center; }
.compromiso details > summary::-webkit-details-marker { display: none; }
.compromiso details[open] > summary { color: var(--acento-texto); }
.compromiso-acciones { display: grid; gap: 8px; padding-top: 6px; }
.toques { display: flex; flex-wrap: wrap; gap: 6px; }
.toques label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--borde-fuerte); border-radius: 999px; cursor: pointer;
  font-weight: 500; background: var(--superficie); transition: background var(--rapido); }
.toques input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toques input:checked + span, .toques label:has(input:checked) { color: var(--acento-texto); }
.toques label:has(input:checked) { background: var(--acento-suave); border-color: var(--acento-texto); }
.toques input:focus-visible + span { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.boton-dictar { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--acento);
  color: #fff; font-weight: 600; box-shadow: var(--sombra); border: 0;
  transition: background var(--rapido), transform var(--rapido); }
.boton-dictar:hover { background: var(--acento-oscuro); color: #fff; text-decoration: none;
  transform: translateY(-1px); }
.boton-dictar .icono { width: 22px; height: 22px; }
.rapido-fila { border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico);
  padding: 12px; display: grid; gap: 8px; }
.rapido-fila .casilla { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.rapido-fila .casilla input { width: auto; flex: none; margin: 0; }
.propuesta { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 12px;
  display: grid; gap: 6px; background: var(--superficie); }
.propuesta label.marca { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.propuesta input[type=checkbox] { width: 22px; height: 22px; min-height: auto; margin-top: 2px;
  accent-color: var(--acento); }
.cliente-cabeza { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  margin: 14px 0 6px; }
.cliente-cabeza h3 { margin: 0; font-size: var(--subtitulo); }
@media (max-width: 640px) {
  .boton-dictar { width: 100%; }
  .compromiso-que { flex-basis: 100%; }
}

/* --------------------------------------------------- Gráficas (DiaMed UI)
   SVG del servidor. La empresa siempre en su rojo (--serie-nos); la competencia
   o el mercado en neutro (--serie-ellos). Los colores de estado nunca pintan una
   serie. Sin JavaScript se ven completas; con «reducir movimiento» no animan. */
:root { --serie-nos: var(--acento); --serie-ellos: #A39AA0; --serie-parcial: #E68A99;
        --rejilla: var(--borde-fuerte); --cuadrante: rgb(33 28 31 / .035); }
:root[data-theme="dark"] { --serie-ellos: #6E6570; --serie-parcial: #8E3A4A;
        --cuadrante: rgb(255 255 255 / .04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --serie-ellos: #6E6570; --serie-parcial: #8E3A4A;
        --cuadrante: rgb(255 255 255 / .04); }
}
.grafica { margin: 0; position: relative; }
.grafica-marco { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.grafica-svg { display: block; width: 100%; min-width: min(var(--ancho-min, 320px), 100%); height: auto;
  font-family: inherit; }
@media (max-width: 640px) { .grafica-svg { min-width: var(--ancho-min, 320px); } }
.grafica .serie-nos { fill: var(--serie-nos); }
.grafica .serie-ellos { fill: var(--serie-ellos); }
.grafica .serie-parcial { fill: var(--serie-parcial); }
.grafica .hueco { fill: var(--superficie); stroke: var(--serie-nos); stroke-width: 2; stroke-dasharray: 3 2; }
.grafica .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.grafica .rejilla--fuerte { stroke-dasharray: 4 3; }
.grafica .cuadrante { fill: var(--cuadrante); }
.grafica--serie .linea { fill: none; stroke: var(--serie-nos); stroke-width: 2; stroke-linejoin: round; }
.grafica .banda { fill: var(--cuadrante); }
.grafica .cuadrante--b { fill: transparent; }
.grafica .eje { fill: var(--tinta-suave); font-size: 11px; }
.grafica .rotulo { fill: var(--tinta); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grafica .rotulo--dentro { fill: #fff; }
.grafica .rotulo--punto { font-weight: 500; }
/* Los textos que caen sobre puntos llevan un halo del fondo: se leen encima de cualquier marca. */
.grafica .rotulo--punto, .grafica .rotulo-cuadrante, .grafica--barras-area-linea .rotulo { paint-order: stroke; stroke: var(--superficie); stroke-width: 3px;
  stroke-linejoin: round; }
.grafica .rotulo-cuadrante { fill: var(--tinta-suave); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.grafica .marca { cursor: default; outline: none; transition: opacity var(--rapido); }
.grafica .marca:focus-visible, .grafica .marca:hover { opacity: .78; stroke: var(--tinta); stroke-width: 1.5; }
.grafica .marca-enlace .marca { cursor: pointer; }
.grafica .punto--disperso { fill-opacity: .72; stroke: var(--superficie); stroke-width: 1; }
.grafica .barra-g { transform-box: fill-box; transform-origin: bottom; animation: g-crecer-v .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
.grafica .barra-h { transform-box: fill-box; transform-origin: left; animation: g-crecer-h .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
.grafica .barra-izq { transform-origin: right; }
.grafica .punto { transform-box: fill-box; transform-origin: center; animation: g-aparecer .35s ease-out both;
  animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes g-crecer-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes g-crecer-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g-aparecer { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .grafica .barra-g, .grafica .barra-h, .grafica .punto { animation: none; }
}
@media print { .grafica .barra-g, .grafica .barra-h, .grafica .punto { animation: none; } .grafica-tabla { display: none; } }
.grafica-tabla { margin-top: 6px; font-size: var(--texto-chico); max-width: 100%; overflow-x: auto; }
.grafica-tabla .tabla th { position: static; }
.grafica-tabla summary { cursor: pointer; color: var(--acento-texto); }
.grafica-leyenda { display: flex; gap: 14px; align-items: center; margin: 6px 0 0; font-size: var(--texto-chico);
  color: var(--tinta-suave); }
.grafica-leyenda .muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -8px; }
.muestra.serie-nos { background: var(--serie-nos); } .muestra.serie-ellos { background: var(--serie-ellos); }
/* Pasteles, gofre por categorías y líneas: tonos de la misma tinta neutra, trazo por serie. */
.grafica .tajada { stroke: var(--superficie); stroke-width: 1.5; }
.grafica .tono-1 { fill-opacity: .86; } .grafica .tono-2 { fill-opacity: .72; } .grafica .tono-3 { fill-opacity: .6; }
.grafica .tono-4 { fill-opacity: .48; } .grafica .tono-5 { fill-opacity: .38; } .grafica .tono-6 { fill-opacity: .3; }
.muestra.tono-1 { opacity: .86; } .muestra.tono-2 { opacity: .72; } .muestra.tono-3 { opacity: .6; }
.muestra.tono-4 { opacity: .48; } .muestra.tono-5 { opacity: .38; } .muestra.tono-6 { opacity: .3; }
.grafica .serie-vacio { fill: transparent; stroke: var(--serie-ellos); stroke-width: 1.2; }
.muestra.serie-parcial { background: var(--serie-parcial); }
.muestra.serie-vacio { background: transparent; border: 1px solid var(--serie-ellos); }
/* Un cuadro por unidad (conteos hasta 30) y el gofre de una proporción: lo propio lleno en el
   acento, lo demás en contorno (--serie-contorno, 3:1 contra su fondo): se distinguen en cualquier fondo. */
.grafica .cuadro--no { fill: transparent !important; stroke: var(--serie-contorno, var(--tinta-suave)); stroke-width: 2; }
.grafica--cuadros .grafica-svg { width: auto; min-width: 0; max-width: 100%; }
.grafica-base { margin: 4px 0 0; font-size: var(--texto-chico); color: var(--tinta-suave); }
.grafica .trazo { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.grafica .trazo-nos { stroke: var(--serie-nos); } .grafica .trazo-ellos { stroke: var(--serie-ellos); }
.grafica .trazo--punteado { stroke-dasharray: 5 4; }
.muestra--punteada { background: transparent !important; border-top: 2px dashed var(--serie-ellos); height: 0 !important; }
.grafica .rotulo--centro { font-size: 20px; font-weight: 800; }
.grafica-leyenda-lista { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); font-size: var(--texto-chico); }
.grafica-leyenda-lista li { display: flex; gap: 6px; align-items: baseline; min-height: 24px; min-width: 0; }
.grafica-leyenda-lista a { overflow-wrap: break-word; min-width: 0; }
/* Líneas pareadas: pequeñas múltiples, una gráfica por grupo con la misma magnitud. */
.pareadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px 20px;
  margin: 8px 0 4px; }
.pareada { margin: 0; min-width: 0; }
.pareada figcaption { font-size: var(--texto-chico); font-weight: 600; margin-bottom: 2px; overflow-wrap: break-word; }
.grafica-leyenda-lista .muestra { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 2px; }
.grafica-leyenda-lista b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafica--pastel .grafica-svg, .grafica--dona .grafica-svg { max-width: 260px; margin: 0 auto; }
/* Reparto entre varios actores: un color por identidad (las fichas --identidad-* vienen de la
   paleta de tecnologia/graficas.py); el rojo solo para la empresa, «Otros» en el neutro. La
   letra encima de cada color es su ficha -texto; los rótulos de afuera, con su línea guía. */
.grafica--reparto.grafica--pastel .grafica-svg, .grafica--reparto.grafica--dona .grafica-svg { max-width: 460px; }
.grafica .identidad-propia { fill: var(--identidad-propia); } .grafica .identidad-1 { fill: var(--identidad-1); }
.grafica .identidad-2 { fill: var(--identidad-2); } .grafica .identidad-3 { fill: var(--identidad-3); }
.grafica .identidad-4 { fill: var(--identidad-4); } .grafica .identidad-otros { fill: var(--serie-ellos); }
.muestra.identidad-propia { background: var(--identidad-propia); } .muestra.identidad-1 { background: var(--identidad-1); }
.muestra.identidad-2 { background: var(--identidad-2); } .muestra.identidad-3 { background: var(--identidad-3); }
.muestra.identidad-4 { background: var(--identidad-4); } .muestra.identidad-otros { background: var(--serie-ellos); }
.grafica .rotulo.identidad-texto-propia { fill: var(--identidad-propia-texto); }
.grafica .rotulo.identidad-texto-1 { fill: var(--identidad-1-texto); } .grafica .rotulo.identidad-texto-2 { fill: var(--identidad-2-texto); }
.grafica .rotulo.identidad-texto-3 { fill: var(--identidad-3-texto); } .grafica .rotulo.identidad-texto-4 { fill: var(--identidad-4-texto); }
.grafica .rotulo.identidad-texto-otros { fill: var(--tinta); }
/* Identidades fijas del cara a cara: el competidor en el neutro de siempre y lo compartido
   (los dos adjudicados) en gris claro; la empresa, en su ficha roja. */
:root { --serie-compartido: #DAD4D7; }
:root[data-theme="dark"] { --serie-compartido: #45404A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-compartido: #45404A; } }
.grafica .identidad-ellos { fill: var(--serie-ellos); } .grafica .identidad-compartido { fill: var(--serie-compartido); }
.muestra.identidad-ellos { background: var(--serie-ellos); } .muestra.identidad-compartido { background: var(--serie-compartido); }
.grafica .rotulo.identidad-texto-ellos, .grafica .rotulo.identidad-texto-compartido { fill: var(--tinta); }
.grafica .rotulo--afuera { font-weight: 500; }
.grafica .guia { fill: none; stroke: var(--tinta-suave); stroke-width: 1; }
.globo-grafica { position: fixed; z-index: 60; pointer-events: none; background: var(--tinta); color: var(--superficie);
  padding: 5px 9px; border-radius: 8px; font-size: 12px; max-width: 280px; box-shadow: var(--sombra-alta);
  opacity: 0; transition: opacity var(--rapido); }
.globo-grafica.visible { opacity: 1; }
.tabla--compacta td, .tabla--compacta th { padding: 4px 8px; }

/* --------------------------------------------------- Inteligencia comercial */
.intel-nav { position: sticky; top: 0; z-index: 5; background: var(--fondo); padding: 6px 0; overflow-x: auto;
  white-space: nowrap; display: flex; gap: 6px; }
.intel-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); font-size: var(--texto-chico); }
.intel-nav a:hover { border-color: var(--acento-texto); text-decoration: none; }
.cifras-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cifra-grande { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.cifra-grande.nos { color: var(--acento-texto); }
.cifra-sub { color: var(--tinta-suave); font-size: var(--texto-chico); }
.hallazgos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.hallazgo { display: flex; flex-direction: column; gap: 6px; }
.hallazgo .para { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.hallazgo .cifra { font-size: 1.5rem; font-weight: 700; color: var(--acento-texto); font-variant-numeric: tabular-nums; }
.hallazgo .frase { font-weight: 600; }
.hallazgo .acciones-h { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.recompras { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cuenta { font-size: 1.35rem; font-weight: 700; color: var(--acento-texto); }
.chips-motivo { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-motivo button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--tinta); font-size: var(--texto-chico); cursor: pointer; }
.chips-motivo button:hover, .chips-motivo button.propuesto { border-color: var(--acento-texto); color: var(--acento-texto);
  background: var(--acento-suave); }
.chip--rival { background: var(--superficie-2); color: var(--tinta); border: 1px dashed var(--borde-fuerte); }
/* Cómo llegó una cifra de El mundo: automática, corresponsal, manual o calculada. */
.chip--lector { background: var(--ok-suave); color: var(--ok-texto); }
.chip--corresponsal { background: var(--acento-suave); color: var(--acento-texto); }
.chip--manual { background: var(--superficie-2); color: var(--tinta); border: 1px dashed var(--borde-fuerte); }
.chip--calculada { background: var(--superficie-2); color: var(--tinta-suave); }
.mundo-origen { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px;
  font-size: var(--texto-chico); line-height: 1.3; overflow-wrap: anywhere; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.lecturas { display: grid; gap: 10px; }
.lectura-producto { border-left: 3px solid var(--serie-nos); padding: 6px 10px; }
/* Un control de formulario nunca empuja la página de lado (opciones largas en el teléfono). */
.formulario-linea select, .formulario-linea input, .formulario select, .formulario input { max-width: 100%; min-width: 0; }
.formulario-linea > form { max-width: 100%; }
.dos-col > *, .cifras-4 > *, .hallazgos > *, .recompras > * { min-width: 0; }
.cifras-4 .tarjeta { overflow-wrap: anywhere; } .cifras-4 .chip { white-space: normal; }
.grafica--pistas .grafica-svg, .grafica--divergente .grafica-svg, .grafica--segmentada .grafica-svg { max-width: 760px; }
.grafica--ritmo .grafica-svg { max-width: 420px; }
/* Por conquistar: filas que se despliegan (móvil primero). */
.conquistar-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.conquistar-fila > details { border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.conquistar-fila > details > summary { cursor: pointer; padding: 10px 12px; display: flex; flex-wrap: wrap;
  gap: 4px 12px; align-items: baseline; list-style: none; }
.conquistar-fila > details > summary::-webkit-details-marker { display: none; }
.conquistar-fila > details[open] > summary { border-bottom: 1px solid var(--borde); }
.conquistar-nombre { font-weight: 600; flex: 1 1 260px; min-width: 0; overflow-wrap: break-word; }
.conquistar-meta { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--texto-chico); }
.conquistar-detalle { padding: 10px 12px 14px; min-width: 0; }
.conquistar-detalle h4 { margin: 6px 0 4px; font-size: var(--texto-chico); text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave); }
.decidir { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); display: grid; gap: 6px; }
.decidir .formulario-linea { flex-wrap: wrap; }
.tabla tr.fila-grupo th { background: var(--superficie-2); text-align: left; }
.tabla tr.fila-grupo th.num { text-align: right; }

/* El titular de «El Mercado» en la tarjeta de dirección (el diario vive en su página). */
.titular-diario { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; border-left: 4px solid var(--acento); }
.titular-diario b { font-size: 1.15rem; line-height: 1.25; }

/* El mundo: las casillas de «a qué toca» se acomodan en renglones. */
fieldset.toca { border: 1px solid var(--rejilla); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 8px 12px; margin: 6px 0; min-width: 0; }
fieldset.toca legend { color: var(--tinta-suave); font-weight: 500; padding: 0 4px; }
fieldset.toca .casilla { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

/* La fecha de cierre: la real con su fuente en letra chica; la estimada es un rango con
   trazo punteado (nunca parece una fecha) y su «¿de dónde sale?». */
.cierre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cierre-fuente { font-size: 0.78em; color: var(--tinta-suave); }
.cierre-estimado { border-bottom: 1.5px dotted currentColor; padding-bottom: 1px; }
.cierre-ayuda summary { cursor: pointer; font-size: 0.8em; color: var(--tinta-suave); list-style: none; }
.cierre-ayuda summary::-webkit-details-marker { display: none; }
.cierre-ayuda p { margin: 4px 0 0; font-size: 0.82em; color: var(--tinta-suave); max-width: 60ch; }
.confirmar-fecha textarea { width: 100%; min-height: 90px; }
.confirmar-fecha .formulario-linea { flex-wrap: wrap; }

/* El recorrido de la orden: cinco etapas en una franja; la actual resaltada, la que
   pasó su fecha en ámbar, cada una enlaza su pantalla dueña. */
.recorrido { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.recorrido li { position: relative; padding: 10px 12px; border-radius: 10px; min-width: 0;
  background: var(--superficie-2); color: var(--tinta-suave); font-size: 0.85rem;
  border-top: 3px solid var(--borde-fuerte); overflow-wrap: anywhere;
  transition: transform 0.2s ease, box-shadow 0.2s ease; }
.recorrido li:hover { transform: translateY(-1px); }
.recorrido li b { display: block; color: var(--tinta); font-size: 0.92rem; }
.recorrido li b::before { counter-increment: etapa; content: counter(etapa) ". "; color: var(--tinta-suave); }
.recorrido li p { margin: 4px 0 0; }
.recorrido .cumplida { border-top-color: var(--ok-texto); }
.recorrido .actual { background: var(--acento-suave); color: var(--tinta);
  border-top-color: var(--acento-texto); box-shadow: 0 0 0 1px var(--acento-texto) inset; }
.recorrido .ambar { background: var(--advertencia-suave); border-top-color: var(--advertencia-texto); }
.recorrido .estado { font-size: 0.75rem; text-transform: lowercase; }
@media (max-width: 760px) { .recorrido { grid-template-columns: 1fr; } }
.confirmar-fecha > summary { list-style: none; display: inline-block; cursor: pointer; }
.confirmar-fecha > summary::-webkit-details-marker { display: none; }

/* El año contra el año pasado, a la misma fecha: las cifras enlazan su lista; en el
   teléfono se apilan y las barras se desplazan dentro de su tarjeta. */
.aca-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13em, 17em); gap: 14px; align-items: start; }
.aca-cifras { min-width: 0; }
.aca-linea { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin: 0 0 6px; }
.aca-anio { color: var(--tinta); display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.aca-anio:hover { text-decoration: none; }
.aca-anio:hover .cifra-grande { text-decoration: underline; text-decoration-thickness: 2px; }
.aca-variacion { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.aca-facturacion { background: var(--superficie-2); }
.aca-sin-cifra { font-weight: 600; margin: 4px 0; }
@media (max-width: 760px) {
  .aca-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .aca-linea { flex-direction: column; gap: 4px; }
}

/* Matriz de participación: verde (podemos ofertar), amarillo (nuestro producto, por
   confirmar dónde) y gris (no es nuestro). El color nunca va solo: siempre con su texto. */
.aviso.informativo { background: var(--superficie-2); color: var(--tinta); }
.chip--verde { background: var(--ok-suave); color: var(--ok-texto); }
.chip--amarillo { background: var(--advertencia-suave); color: var(--advertencia-texto); }
.chip--gris { background: var(--superficie-2); color: var(--tinta-suave); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px;
  vertical-align: baseline; background: var(--borde-fuerte); flex-shrink: 0; }
.punto--verde { background: var(--ok-texto); }
.punto--amarillo { background: var(--advertencia-texto); }
.punto--gris { background: var(--borde-fuerte); }
.tarjeta--enlace.seleccionada { outline: 2px solid var(--acento); outline-offset: -2px; }
.tarjeta-concurso { margin: 0 0 14px; border-left: 4px solid var(--borde-fuerte);
  transition: box-shadow var(--rapido), transform var(--rapido); }
.tarjeta-concurso:hover { box-shadow: var(--sombra-alta); }
.tarjeta-concurso.color-verde { border-left-color: var(--ok-texto); }
.tarjeta-concurso.color-amarillo { border-left-color: var(--advertencia-texto); }
.tarjeta-concurso__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tarjeta-concurso__cabeza .nog { font-weight: 700; }
.tarjeta-concurso__cabeza .cierre { margin-left: auto; color: var(--tinta-suave); font-size: var(--texto-chico); }
.tarjeta-concurso .hospital { margin: 6px 0 4px; font-weight: 600; }
.renglones-nuestros { list-style: none; margin: 6px 0; padding: 0; }
.renglones-nuestros li { padding: 3px 0; overflow-wrap: anywhere; }
.por-que { border-top: 1px dashed var(--borde); padding-top: 8px; margin-top: 8px; }
.por-que p { margin: 0 0 6px; }
.por-que .origen { display: block; color: var(--tinta-suave); font-size: var(--texto-chico); }
.tarjeta-concurso__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 10px; }
.botones-respuesta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.botones-respuesta .tomada-por { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.botones-respuesta select { max-width: 16em; }
.respuesta-donde { margin: 4px 0 0; }
.confirmar-renglon .alcance { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.confirmar-renglon .alcance label { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.confirmar-renglon input[name=motivo] { width: 100%; max-width: 32em; }
.cola-confirmar, .mazo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.tarjeta-confirmar header, .tarjeta-par header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tarjeta-confirmar .descripcion { font-weight: 600; margin: 8px 0 4px; overflow-wrap: anywhere; }
.tarjeta-par .supone { font-size: 1.05rem; margin: 10px 0 6px; }
.no-es-asi summary { list-style: none; margin-top: 8px; }
.no-es-asi summary::-webkit-details-marker { display: none; }
.antes-despues { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 14px; align-items: center; }
.antes-despues > div { display: flex; flex-direction: column; gap: 2px; }
.antes-despues b { font-size: 1.4rem; }
.antes-despues .flecha { font-size: 1.6rem; color: var(--tinta-suave); }
.chip-matriz { cursor: pointer; }
.matriz-renglon details > summary { list-style: none; display: inline; }
.matriz-renglon details > summary::-webkit-details-marker { display: none; }
.variantes li .n, .seccion li .n { color: var(--tinta-suave); font-size: var(--texto-chico); margin-left: 6px; }
@media (max-width: 599.98px) {
  .antes-despues { grid-template-columns: 1fr; }
  .antes-despues .flecha { display: none; }
  .tarjeta-concurso__cabeza .cierre { margin-left: 0; width: 100%; }
  .botones-respuesta > button, .botones-respuesta .tomada-por, .botones-respuesta .tomada-por select { width: 100%; max-width: none; }
  .decision-rapida > * { width: 100%; }
}

/* «Para nosotros» con las palabras de Herbert: el semáforo, las cinco cifras, la tarjeta
   con cuánto es nuestro (barra), los renglones agrupados, el rival y la pregunta del
   amarillo por hospital y marca. El color nunca va solo: siempre con su texto. */
.semaforo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.semaforo__luz { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; display: grid; gap: 4px; }
.semaforo__t { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.semaforo__luz p { margin: 0; font-size: var(--texto-chico); color: var(--tinta-suave); }
.cifras-para-nosotros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.cifra-pn { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; display: grid; gap: 2px; align-content: start; color: var(--tinta);
  transition: box-shadow var(--rapido), transform var(--rapido); }
.cifra-pn:hover { box-shadow: var(--sombra-alta); text-decoration: none; transform: translateY(-1px); }
.cifra-pn.seleccionada { outline: 2px solid var(--acento); outline-offset: -2px; }
.cifra-pn b { font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra-pn span { font-size: var(--texto-chico); color: var(--tinta-suave); }
.cifra-pn small { font-size: .78rem; color: var(--tinta-suave); }
.cifra-pn--verde b { color: var(--ok-texto); }
.cifra-pn--amarillo b { color: var(--advertencia-texto); }
.marcas-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.marca-boton { border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-suave);
  border-radius: 999px; padding: 4px 12px; font-size: var(--texto-chico); font-weight: 500; min-height: 32px;
  display: inline-flex; align-items: center; }
.marca-boton:hover { text-decoration: none; color: var(--tinta); border-color: var(--tinta-suave); }
.marca-boton[aria-current="true"] { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.tarjeta-concurso__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
.tarjeta-concurso__cab .nog { display: block; margin-top: 8px; font-weight: 600; font-size: var(--texto-chico);
  font-variant-numeric: tabular-nums; }
.tarjeta-concurso__cab .hospital { margin: 2px 0 0; font-size: 1.1rem; }
.estado-pn { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: var(--texto-chico);
  padding: 4px 11px; border-radius: 999px; background: var(--superficie-2); color: var(--tinta-suave); }
.estado-pn--verde { background: var(--ok-suave); color: var(--ok-texto); }
.estado-pn--amarillo { background: var(--advertencia-suave); color: var(--advertencia-texto); }
.cierre-pn { text-align: right; font-size: var(--texto-chico); color: var(--tinta-suave); max-width: 18em; }
.cierre-pn .cierre-vencido { display: block; font-weight: 700; color: var(--tinta); font-size: 1rem; }
.cierre-nota { display: block; color: var(--tinta-suave); }
.barra-renglones { display: flex; gap: 2px; height: 10px; margin: 12px 0 0; border-radius: 6px; overflow: hidden; }
.barra-renglones i { display: block; height: 100%; min-width: 4px; transform-origin: left;
  animation: barra-crece var(--lento) ease both; }
.barra-renglones .v { background: var(--ok-texto); }
.barra-renglones .a { background: var(--advertencia-texto); }
.barra-renglones .g { background: var(--borde-fuerte); }
@keyframes barra-crece { from { transform: scaleX(0); } }
.barra-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: var(--texto-chico);
  color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.barra-leyenda span { display: inline-flex; align-items: center; }
.barra-leyenda .reparto { color: var(--tinta); }
.grupo-renglones { margin-top: 12px; display: grid; gap: 6px; }
.grupo-renglones h4 { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); display: flex; align-items: center; }
.renglon-pn { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.renglon-pn .nuestro { font-weight: 600; }
.renglon-pn .por-corregir { border-bottom: 1.5px dashed var(--advertencia-texto); }
.renglon-pn .por { display: block; font-size: var(--texto-chico); color: var(--tinta-suave); }
.renglones-mas, .mas { margin: 0; font-size: var(--texto-chico); color: var(--tinta-suave); padding-left: 20px; }
.producto-correcto { display: inline; }
.producto-correcto > summary { list-style: none; display: inline; cursor: pointer; }
.producto-correcto > summary::-webkit-details-marker { display: none; }
.etiqueta-correcto { font-size: .78rem; color: var(--advertencia-texto); background: var(--advertencia-suave);
  border-radius: 6px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }
.producto-correcto[open] > form, .producto-correcto[open] > p { margin: 6px 0; }
.rival-pn { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radio-chico); background: var(--superficie-2); }
.rival-pn p { margin: 0; }
.rival-pn__sigla { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  font-weight: 700; font-size: .72rem; background: var(--tinta); color: var(--superficie); flex: none; }
.rival-pn__racha { margin-left: auto; display: flex; gap: 3px; flex: none; }
.rival-pn__racha i { width: 7px; height: 16px; border-radius: 2px; background: var(--tinta-suave); }
.pregunta-amarillo { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radio); display: grid; gap: 8px;
  border: 1.5px solid var(--advertencia-texto); background: var(--advertencia-suave); }
.pregunta-amarillo p { margin: 0; }
.pregunta-amarillo__q { font-weight: 700; font-size: 1.05rem; }
.pregunta-amarillo__ctx, .pregunta-amarillo__vale { font-size: var(--texto-chico); color: var(--tinta-suave); }
.opciones-respuesta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opcion-tomada { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
button.opcion { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde-fuerte); }
button.opcion:hover { border-color: var(--tinta-suave); background: var(--superficie); }
.opcion .sugerido { font-weight: 500; color: var(--tinta-suave); font-size: var(--texto-chico); }
.afinar summary { cursor: pointer; font-size: var(--texto-chico); color: var(--acento-texto); }
.afinar label { display: inline-flex; gap: 6px; align-items: center; margin: 6px 8px 0 0; }
.tarjeta-concurso__pie .ficha-nog { margin-left: auto; font-weight: 600; }
.decision-rapida { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.no-participar > summary { list-style: none; }
.no-participar > summary::-webkit-details-marker { display: none; }
.no-participar[open] .formulario-linea { margin-top: 8px; }
@media (max-width: 899.98px) {
  .cifras-para-nosotros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .semaforo, .cifras-para-nosotros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .semaforo__luz:last-child { grid-column: 1 / -1; }
  .tarjeta-concurso__cab { grid-template-columns: minmax(0, 1fr); }
  .cierre-pn { text-align: left; max-width: none; }
  .opciones-respuesta > button, .opcion-tomada, .opcion-tomada > * { width: 100%; }
  .tarjeta-concurso__pie .ficha-nog { margin-left: 0; }
  .tabla.tabla--tarjetas td > details:has(.pregunta-amarillo) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .barra-renglones i { animation: none; } }

/* Estructura del equipo: organigrama, quién cubre qué y la ruta de un aviso */
.lista-simple { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-simple li { overflow-wrap: anywhere; }
.organigrama { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.organigrama-lista { list-style: none; margin: 0; padding: 0; }
.organigrama-lista li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  padding: 7px 0 7px calc(var(--nivel, 0) * 26px); border-left: 0; position: relative; }
.organigrama-lista li + li { border-top: 1px solid var(--borde); }
.organigrama-lista li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: var(--acento); flex-shrink: 0; }
.organigrama-lista .coordina { flex-basis: 100%; padding-left: 18px; border-left: 2px dashed var(--borde-fuerte); }
.organigrama-tecnico { border-left: 1px solid var(--borde); padding-left: 20px; }
.organigrama-tecnico h3 { margin: 0 0 4px; font-size: 1rem; }
.organigrama-tecnico ul { margin: 8px 0 0; padding-left: 18px; }
.tabla-cobertura td { vertical-align: top; }
.tabla-cobertura .cubre { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 0 0 6px; }
.tabla-cobertura .cubre-ausente > a { text-decoration: line-through; }
.tabla-cobertura .cubre-nota { flex-basis: 100%; font-size: var(--texto-chico); }
.celda-falta { background: var(--advertencia-suave); }
.ruta-aviso { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--texto-chico);
  color: var(--tinta-suave); }
.ruta-aviso b { color: var(--tinta); font-weight: 550; }
@media (max-width: 799.98px) {
  .organigrama { grid-template-columns: 1fr; }
  .organigrama-tecnico { border-left: 0; border-top: 1px solid var(--borde); padding: 14px 0 0; }
}
.ficha-datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 8px; }
.ficha-datos dt { color: var(--tinta-suave); }
.ficha-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 599.98px) { .ficha-datos { grid-template-columns: 1fr; } .ficha-datos dd { margin-bottom: 6px; } }

/* Aviso «qué falta»: una pantalla que depende de un dato sin cargar dice qué, quién y dónde. */
.falta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: var(--advertencia-suave);
  color: var(--advertencia-texto); box-shadow: inset 3px 0 0 var(--advertencia-texto);
  animation: resalte 0.6s ease-out; }
.falta-texto { margin: 0; flex: 1 1 280px; }
.falta .boton { flex: 0 0 auto; }
/* Ficha del producto registrado: las fortalezas por puntos y el material en lista. */
.fortalezas { margin: 6px 0 0; padding-left: 1.2em; }
.fortalezas li { margin: 2px 0; }
.material-lista { list-style: none; margin: 0; padding: 0; }
.material-lista li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--borde); }
.material-lista li.retirado { opacity: 0.6; }
.analito-toque { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.analito-toque input[type="text"] { min-width: 12ch; }

/* Mercado potencial: la barra de bolsas de cada producto (explorado en el color de la empresa,
   potencial en el parcial, tomado en neutro, lo demás en contorno), con 2 px de separación y la
   cifra siempre escrita al lado: el color nunca es lo único que dice qué es cada tramo. */
.bolsas-barra { display: flex; gap: 2px; height: 10px; min-width: 120px; margin-top: 6px; }
.bolsas-barra > span { display: block; height: 100%; border-radius: 4px; flex: 0 0 var(--p, 0%);
  min-width: 3px; transition: flex-basis var(--lento) ease; }
.bolsas-barra .b-explorado, .muestra.b-explorado { background: var(--serie-nos); }
.bolsas-barra .b-potencial, .muestra.b-potencial { background: var(--serie-parcial); }
.bolsas-barra .b-tomado, .muestra.b-tomado { background: var(--serie-ellos); }
.bolsas-barra .b-al_registrar, .bolsas-barra .b-no_clasificado,
.muestra.b-al_registrar, .muestra.b-no_clasificado { background: transparent; box-shadow: inset 0 0 0 1px var(--serie-ellos); }
.bolsas-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.86em; color: var(--tinta-suave); }
.bolsas-leyenda .muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  vertical-align: -2px; margin-right: 6px; }
.oportunidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.oportunidad h3 { margin: 0 0 4px; font-size: 1rem; }
.oportunidad .cifra-sub { margin-top: 2px; }
.oportunidad .botones-respuesta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oportunidad .botones-respuesta select, .oportunidad .botones-respuesta input { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .bolsas-barra > span { transition: none; } }
.bolsas-leyenda.lista-limpia { list-style: none; padding: 0; margin: 10px 0 0; }