/* ---------------------------------------------------------------------------
   core.css — componentes de la maqueta. Agnóstico del dominio: si un caso
   necesita tocar este archivo, el corte entre core y caso está mal hecho.

   Cero colores literales: todo sale de tokens.css. Cero URL externas: la CSP
   es default-src 'none' y la demo tiene que abrir también por file://.
   Prefijo mc- en todo para no chocar con lo que traiga la plantilla de página.
--------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: var(--fs-md);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* tabular-nums en todo número que cambia: sin esto el count-up hace bailar el
   ancho de la columna y se nota proyectado. */
.mc-num, .mc-kpi-valor, .mc-tabla td.num, .mc-reloj b, .mc-dial-valor, .mc-monto {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

::selection { background: var(--acento-medio); color: var(--acento-ink); }

/* Un [hidden] tiene que ganarle a display:inline-flex de los botones: así es
   como RBAC OCULTA (no deshabilita) las acciones que el rol no puede usar. */
[hidden] { display: none !important; }

.mc-oculto { display: none !important; }
.mc-solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* === banda de datos simulados ============================================
   Fija arriba, no descartable. Es un requisito de cumplimiento, no un adorno:
   la sesión se graba y el link circula por WhatsApp. */
.mc-banner {
  position: sticky;
  top: 0;
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  flex-wrap: wrap;
  padding: 9px var(--e4);
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-bd);
  color: var(--warn-ink);
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: .01em;
  text-align: center;
}
.mc-banner b { font-weight: var(--peso-extra); }
.mc-banner::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--warn);
  flex: none;
}

/* === contenedor =========================================================== */
.mc-app {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e5) var(--e5) var(--e7);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

/* === cabecera ============================================================= */
.mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  padding: var(--e4) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-1);
}

.mc-marca { display: flex; align-items: center; gap: var(--e3); min-width: 0; }

/* Monograma NEUTRO. Nunca el logotipo de Agrosuper ni de sus marcas. */
.mc-monograma {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--acento), var(--acento-ink));
  color: var(--tinta-inversa);
  font-size: var(--fs-xl);
  font-weight: var(--peso-extra);
  letter-spacing: -.02em;
  box-shadow: var(--sombra-acento);
  user-select: none;
}

.mc-marca-txt { min-width: 0; }
.mc-titulo {
  font-size: var(--fs-xl);
  font-weight: var(--peso-extra);
  letter-spacing: var(--ls-titulo);
  line-height: 1.15;
  color: var(--tinta);
}
.mc-subtitulo {
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
  font-weight: var(--peso-medio);
  margin-top: 2px;
}

.mc-top-der {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}

/* chip del motor de clasificación: hoy sim-rules@v1, mañana claude-opus-5 */
.mc-chip-modelo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px var(--e3);
  border-radius: var(--r-pill);
  background: var(--acento-suave);
  border: 1px solid var(--acento-borde);
  color: var(--acento-ink);
  font-size: var(--fs-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.mc-chip-modelo b { font-family: var(--fuente-num); font-weight: var(--peso-fuerte); }
.mc-chip-modelo::before {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-radius: var(--r-pill);
  background: var(--acento);
}

.mc-rol {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
  font-weight: var(--peso-medio);
}
.mc-rol select {
  appearance: none;
  min-height: var(--alto-tap);
  max-width: 17rem;
  padding: 0 var(--e6) 0 var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  /* Flecha dibujada con gradientes: sin SVG externo, sin data: URI. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.mc-rol select:hover { border-color: var(--acento-borde); }

.mc-hora {
  font-family: var(--fuente-num);
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* === KPIs ================================================================= */
.mc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3);
}

.mc-kpi {
  position: relative;
  overflow: hidden;
  padding: var(--e4) var(--e5);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--t-media) var(--curva);
}
.mc-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tono);
  opacity: .85;
}
.mc-kpi-label {
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--tinta-suave);
}
.mc-kpi-valor {
  margin-top: 2px;
  font-size: var(--fs-kpi);
  font-weight: var(--peso-extra);
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--tinta);
}
.mc-kpi-hint {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
}
.mc-kpi.mc-flash { animation: mc-flash var(--t-lenta) var(--curva); }
@keyframes mc-flash {
  0%   { background: var(--tono-bg); }
  100% { background: var(--superficie); }
}

/* === barra de controles =================================================== */
.mc-controles {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}
.mc-espaciador { flex: 1 1 auto; }

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--alto-tap);
  padding: 0 var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapida) var(--curva),
              border-color var(--t-rapida) var(--curva),
              transform var(--t-rapida) var(--curva);
}
.mc-btn:hover { background: var(--superficie-3); border-color: var(--acento-borde); color: var(--tinta); }
.mc-btn:active { transform: translateY(1px); }
.mc-btn[disabled] { opacity: .5; cursor: default; transform: none; }

.mc-btn-play {
  background: linear-gradient(145deg, var(--acento), var(--acento-ink));
  border-color: transparent;
  color: var(--tinta-inversa);
  box-shadow: var(--sombra-acento);
  padding: 0 var(--e5);
}
.mc-btn-play:hover { background: linear-gradient(145deg, var(--acento-ink), var(--acento-ink)); color: var(--tinta-inversa); }
.mc-btn-play.mc-corriendo {
  background: var(--superficie);
  color: var(--acento-ink);
  border-color: var(--acento-borde);
  box-shadow: none;
}

.mc-btn-mini {
  min-height: 34px;
  padding: 0 var(--e3);
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}
.mc-btn-primario {
  background: var(--acento-suave);
  border-color: var(--acento-borde);
  color: var(--acento-ink);
}
.mc-btn-primario:hover { background: var(--acento-medio); color: var(--acento-ink); }
.mc-btn-ok   { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok-ink); }
.mc-btn-risk { background: var(--risk-bg); border-color: var(--risk-bd); color: var(--risk-ink); }
.mc-btn-warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-ink); }

/* punto rojo pulsante mientras el stream corre */
.mc-vivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 0 var(--e3);
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  opacity: .45;
  transition: opacity var(--t-media) var(--curva);
}
.mc-vivo i {
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--neutro);
}
.mc-vivo.mc-on { opacity: 1; color: var(--risk-ink); }
.mc-vivo.mc-on i { background: var(--risk); animation: mc-pulso 1.6s infinite; }
@keyframes mc-pulso {
  0%   { box-shadow: 0 0 0 0 var(--risk-bd); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* segmentado: filtros declarados por el caso (p. ej. B2C / B2B / todos) */
.mc-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--superficie-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
}
.mc-seg button {
  min-height: 38px;
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}
.mc-seg button[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--acento-ink);
  box-shadow: var(--sombra-1);
}

/* === pestañas ============================================================= */
.mc-tabs {
  display: flex;
  gap: var(--e1);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 2px;
}
.mc-tab {
  position: relative;
  min-height: var(--alto-tap);
  padding: 0 var(--e4);
  white-space: nowrap;   /* en el celular la barra se desplaza; el texto no se parte */
  border: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: transparent;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  transition: color var(--t-rapida) var(--curva), background var(--t-rapida) var(--curva);
}
.mc-tab:hover { color: var(--tinta); background: var(--superficie-3); }
.mc-tab[aria-selected="true"] { color: var(--acento-ink); background: var(--superficie); box-shadow: var(--sombra-1); }
.mc-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--e3); right: var(--e3); bottom: -2px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--acento);
}
/* La tecla de atajo tiene que leerse como una tecla, no como un contador: sin
   relleno y translúcida, para no confundirla con la píldora de cantidad que va
   justo al lado. */
.mc-tab kbd {
  font-family: var(--fuente-num);
  font-size: var(--fs-xs);
  line-height: 1;
  padding: 2px 5px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta-suave);
  opacity: .55;
}
.mc-tab[aria-selected="true"] kbd { opacity: .8; }
.mc-tab-pill {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--tono-bg);
  color: var(--tono-ink);
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
}

.mc-vista { display: none; }
.mc-vista.mc-activa { display: block; animation: mc-aparece var(--t-media) var(--curva); }
@keyframes mc-aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* === paneles y layout ===================================================== */
/* La columna lateral se acota con clamp en vez de una fracción: con 1fr, a
   1600px se comía 500px y la tabla apretaba los nombres de proveedor en cuatro
   líneas. El gráfico no necesita más de 400px; la tabla sí. */
.mc-layout {
  display: grid;
  /* El aside baja de 26% a 22%: los gráficos siguen legibles proyectados y
     la tabla recupera el ancho que necesitan las columnas de la derecha
     (Monto, SLA, Estado), que antes quedaban fuera del área visible. */
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22%, 360px);
  gap: var(--e4);
  align-items: start;
}
.mc-lateral { display: flex; flex-direction: column; gap: var(--e4); }

/* Bitácora en vivo: una frase bajo los controles con la última decisión. */
.mc-bitacora {
  display: flex; align-items: baseline; gap: var(--e3);
  margin: calc(-1 * var(--e2)) 0 0;
  padding: var(--e2) var(--e4);
  font-size: var(--fs-sm); color: var(--tinta-media); line-height: 1.45;
  border-left: 3px solid var(--acento);
}
.mc-bitacora-lbl {
  flex: none; font-size: var(--fs-xs); font-weight: var(--peso-extra);
  text-transform: uppercase; letter-spacing: var(--ls-micro); color: var(--tinta-suave);
}
.mc-bitacora-txt { min-width: 0; }
@media (max-width: 760px) { .mc-bitacora { flex-direction: column; gap: 2px; } }

/* Rejilla bajo la tabla: gráficos secundarios, alertas y copiloto, repartidos
   en columnas de ancho útil en vez de apilados en el aside. */
.mc-bajo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e4);
  margin-top: var(--e4);
  align-items: start;
}

/* Botón de cierre de la franja de "datos simulados". */
.mc-banner { position: relative; }
.mc-franja-x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}
.mc-franja-x:hover { opacity: 1; background: rgba(0,0,0,.06); }
.mc-franja-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mc-banner[hidden] { display: none; }

.mc-panel {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.mc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
}
.mc-panel-head h2 {
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--tinta-media);
}
.mc-panel-body { padding: var(--e4); }
.mc-panel-body > * + * { margin-top: var(--e3); }

.mc-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e4); }
.mc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e3); }

/* === tabla ================================================================ */
.mc-tabla-scroll {
  max-height: var(--tabla-alto);
  overflow: auto;
  overscroll-behavior: contain;
}
.mc-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.mc-tabla caption {
  caption-side: top;
  text-align: left;
  padding: 0 var(--e4) var(--e2);
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
}
.mc-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--e3) var(--e3);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--linea);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--tinta-suave);
  white-space: nowrap;
}
.mc-tabla thead th.num { text-align: right; }
.mc-tabla tbody td {
  padding: var(--e3);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
  color: var(--tinta-media);
}
.mc-tabla tbody td.num { text-align: right; font-weight: var(--peso-fuerte); color: var(--tinta); }
/* La columna de acciones queda anclada a la derecha: si la tabla tiene que
   desplazarse dentro de su panel, el botón que Danilo va a pulsar no puede
   quedar fuera de la pantalla proyectada. */
.mc-tabla tbody td.col-act,
.mc-tabla thead th.col-act {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  white-space: nowrap;
  text-align: right;
  background: var(--superficie);
  box-shadow: -8px 0 12px -10px rgba(31, 36, 48, .35);
}
.mc-tabla thead th.col-act { top: 0; z-index: 3; background: var(--superficie-2); }
.mc-tabla tbody tr:hover td.col-act,
.mc-tabla tbody tr.mc-sel td.col-act { background: var(--acento-suave); }

/* Utilidades de ancho para las columnas de un caso: se ponen en `cls`.
   Sin ellas, table-layout:auto reparte por contenido y una razón social larga
   se parte en cuatro líneas justo en la columna que más se mira. */
.mc-tabla .col-angosto, .mc-tabla .col-id { width: 1%; white-space: nowrap; }
/* El nowrap es para el dato principal (un folio o un ID no se parten). La
   línea secundaria SÍ puede envolverse: en incidentes dice "16:34 · Alerta
   inteligente de la Torre de Crianza", y sin esto estiraba la columna ID a
   ~330 px de una sola línea, empujando la columna de SLA bajo el botón sticky
   de acciones. Con dos líneas cortas la columna baja a ~190 px. */
.mc-tabla .col-id .mc-sub,
.mc-tabla .col-angosto .mc-sub {
  white-space: normal;
  max-width: 26ch;
  line-height: 1.35;
  /* Dos líneas y corta: con envoltura libre, "Alerta inteligente de la Torre
     de Crianza" ocupaba cinco líneas y dejaba solo tres filas a la vista. La
     demo se trata de ver entrar registros, así que la altura de fila importa. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Dentro de la tabla el badge del veredicto envuelve a dos líneas en vez de
   estirar la columna. "Quiebre de cadena de frío en despacho · ALTO" en una sola
   línea mide ~290 px y empujaba Estado·Responsable bajo el botón sticky de
   acciones a 1440 px, que es la resolución real del notebook que proyecta. */
.mc-tabla tbody td .mc-badge {
  white-space: normal;
  max-width: 24ch;
  text-align: left;
  line-height: 1.3;
}
/* Anchos mínimos recortados: la suma de los antiguos (10+15+20 rem más las
   columnas fijas) superaba el ancho del panel y empujaba las últimas columnas
   fuera de la vista sin previo aviso. Con estos valores las ocho columnas de
   facturas y las nueve de reclamos entran completas a 1600 px. */
.mc-tabla .col-media  { min-width: 8.5rem; }
.mc-tabla .col-ancho  { min-width: 11rem; }
.mc-tabla .col-max    { min-width: 14rem; }
.mc-tabla tbody tr { transition: background var(--t-rapida) var(--curva); cursor: pointer; }
.mc-tabla tbody tr:hover { background: var(--acento-suave); }
.mc-tabla tbody tr:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.mc-tabla tbody tr.mc-sel { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.mc-tabla tbody tr.mc-entra { animation: mc-entra var(--t-lenta) var(--curva); }
@keyframes mc-entra {
  from { opacity: 0; transform: translateY(-14px); background: var(--acento-suave); }
  to   { opacity: 1; transform: none; }
}
.mc-tabla tbody tr:last-child td { border-bottom: 0; }
.mc-tabla .mc-vacio {
  padding: var(--e7) var(--e4);
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--fs-sm);
  cursor: default;
}
.mc-celda-err { color: var(--tinta-suave); }

/* === piezas de celda ====================================================== */
.mc-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
  font-weight: var(--peso-normal);
}
.mc-fuerte { font-weight: var(--peso-fuerte); color: var(--tinta); }
.mc-mono { font-family: var(--fuente-num); }

.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--tono-bg);
  border: 1px solid var(--tono-bd);
  color: var(--tono-ink);
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  /* nowrap + max-width + ellipsis: una etiqueta larga ("Documentación errónea
     (DTE sin referencia 801)") se cortaba a media palabra contra el borde de la
     celda. Con esto termina en «…», que se lee como recorte deliberado y no
     como un defecto de render. El texto completo va en el title y en el drawer. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.mc-badge-dte {
  font-family: var(--fuente-num);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  letter-spacing: .02em;
}

/* spinner del estado "IA analizando…" */
.mc-spin {
  width: 12px; height: 12px;
  flex: none;
  border: 2px solid var(--tono-bd);
  border-top-color: transparent;
  border-radius: var(--r-pill);
  animation: mc-gira .7s linear infinite;
}
@keyframes mc-gira { to { transform: rotate(360deg); } }

.mc-motivo {
  /* La razón del veredicto se acota a dos líneas DENTRO de la tabla. Sin este
     recorte, un motivo largo estira la fila hasta ~250 px, empuja las columnas
     de la derecha (Monto, SLA, Estado) fuera del ancho visible y obliga a
     desplazar la tabla en horizontal con el proyector encendido.
     El texto íntegro sigue estando en el drawer (.mc-veredicto-r), que es donde
     se lee, y en el atributo title de la celda. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--tinta-suave);
  max-width: 34ch;
}
.mc-conf {
  display: inline-block;
  margin-left: 6px;
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* reloj de SLA */
.mc-reloj { display: inline-flex; flex-direction: column; line-height: 1.25; }
.mc-reloj b {
  font-family: var(--fuente-num);
  font-size: var(--fs-sm);
  font-weight: var(--peso-extra);
  color: var(--tono-ink);
}
.mc-reloj i {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
}
.mc-reloj.mc-t-risk b { animation: mc-late 1.8s ease-in-out infinite; }
@keyframes mc-late { 50% { opacity: .45; } }

/* chips de validación del drawer */
.mc-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--tono-bg);
  border: 1px solid var(--tono-bd);
  color: var(--tono-ink);
  font-size: var(--fs-xs);
  font-weight: var(--peso-medio);
}
.mc-chip::before { content: "✓"; font-weight: var(--peso-extra); }
.mc-chip.mc-t-risk::before, .mc-chip.mc-t-warn::before { content: "!"; }

.mc-acciones { display: inline-flex; gap: var(--e2); flex-wrap: wrap; justify-content: flex-end; }

/* === medidor de criticidad (SVG, 1-10) ==================================== */
.mc-dial { display: inline-flex; align-items: center; gap: var(--e2); }
.mc-dial svg { display: block; flex: none; }
.mc-dial-pista { stroke: var(--linea); }
.mc-dial-arco  { stroke: var(--tono); transition: stroke-dashoffset var(--t-lenta) var(--curva); }
.mc-dial-txt { display: flex; flex-direction: column; line-height: 1.15; }
.mc-dial-valor {
  font-size: var(--fs-lg);
  font-weight: var(--peso-extra);
  color: var(--tono-ink);
}
.mc-dial-nivel {
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--tono-ink);
}

/* === rail de etapas ======================================================= */
.mc-rail { display: flex; gap: var(--e2); padding: var(--e4) var(--e3); overflow-x: auto; }
.mc-rail-nodo {
  position: relative;
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  text-align: center;
}
.mc-rail-nodo::before {
  content: "";
  position: absolute;
  top: 8px;
  left: calc(-50% + 9px);
  right: calc(50% + 9px);
  height: 2px;
  background: var(--linea);
}
.mc-rail-nodo:first-child::before { display: none; }
.mc-rail-bola {
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--superficie);
  border: 2px solid var(--linea-fuerte);
  z-index: 1;
  transition: background var(--t-media) var(--curva), border-color var(--t-media) var(--curva);
}
.mc-rail-lbl {
  font-size: var(--fs-xs);
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
}
.mc-rail-nodo.mc-hecho .mc-rail-bola { background: var(--ok); border-color: var(--ok); }
.mc-rail-nodo.mc-hecho::before { background: var(--ok-bd); }
.mc-rail-nodo.mc-hecho .mc-rail-lbl { color: var(--ok-ink); }
.mc-rail-nodo.mc-actual .mc-rail-bola {
  background: var(--acento);
  border-color: var(--acento);
  box-shadow: 0 0 0 5px var(--acento-suave);
  animation: mc-pulso-acento 1.8s infinite;
}
.mc-rail-nodo.mc-actual .mc-rail-lbl { color: var(--acento-ink); }
@keyframes mc-pulso-acento {
  0%   { box-shadow: 0 0 0 0 var(--acento-medio); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* === timeline ============================================================= */
.mc-timeline { display: flex; flex-direction: column; }
.mc-hito { position: relative; display: flex; gap: var(--e3); padding-bottom: var(--e4); }
.mc-hito:last-child { padding-bottom: 0; }
.mc-hito::before {
  content: "";
  position: absolute;
  left: 8px; top: 20px; bottom: 0;
  width: 2px;
  background: var(--linea);
}
.mc-hito:last-child::before { display: none; }
.mc-hito-punto {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: var(--r-pill);
  background: var(--tono-bg);
  border: 2px solid var(--tono);
  z-index: 1;
}
.mc-hito-txt { min-width: 0; }
.mc-hito-t { font-size: var(--fs-sm); font-weight: var(--peso-fuerte); color: var(--tinta); }
.mc-hito-s { font-size: var(--fs-xs); color: var(--tinta-suave); }

/* === trazabilidad (árbol lote → planta → plantel / despachos → clientes) == */
.mc-traza { display: grid; gap: var(--e4); }
.mc-traza-rama { border-left: 2px solid var(--acento-borde); padding-left: var(--e4); }
.mc-traza-titulo {
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--acento-ink);
  margin-bottom: var(--e2);
}
.mc-traza-nodo { position: relative; padding: 6px 0 6px var(--e4); }
.mc-traza-nodo::before {
  content: "";
  position: absolute;
  left: 0; top: 16px;
  width: 10px; height: 2px;
  background: var(--linea-fuerte);
}
.mc-traza-nodo > .mc-traza-nodo { border-left: 1px dashed var(--linea-fuerte); }
.mc-traza-et { font-size: var(--fs-sm); font-weight: var(--peso-fuerte); color: var(--tinta); }
.mc-traza-sub { font-size: var(--fs-xs); color: var(--tinta-suave); }

/* === drawer =============================================================== */
.mc-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(31, 36, 48, .28);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-media) var(--curva), visibility var(--t-media);
}
.mc-overlay.mc-abierto { opacity: 1; visibility: visible; }

.mc-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: var(--drawer-ancho);
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  box-shadow: var(--sombra-3);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-lenta) var(--curva), visibility var(--t-lenta);
}
.mc-drawer.mc-abierto { transform: none; visibility: visible; }

.mc-dr-head {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e5);
  border-bottom: 1px solid var(--linea);
  background: var(--superficie-2);
}
.mc-dr-head .mc-dr-tit { flex: 1 1 auto; min-width: 0; }
.mc-dr-t {
  font-size: var(--fs-lg);
  font-weight: var(--peso-extra);
  letter-spacing: var(--ls-titulo);
  color: var(--tinta);
}
.mc-dr-s { font-size: var(--fs-xs); color: var(--tinta-suave); margin-top: 2px; }
.mc-dr-x {
  flex: none;
  width: var(--alto-tap); height: var(--alto-tap);
  display: grid; place-items: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--tinta-media);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}
.mc-dr-x:hover { background: var(--superficie-3); }

.mc-dr-body { flex: 1 1 auto; overflow-y: auto; padding: var(--e5); display: flex; flex-direction: column; gap: var(--e5); }
.mc-dr-monto {
  font-size: var(--fs-2xl);
  font-weight: var(--peso-extra);
  letter-spacing: -.02em;
  color: var(--tinta);
}
.mc-sect > h4 {
  font-size: var(--fs-xs);
  font-weight: var(--peso-extra);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--linea);
}
.mc-kv { display: grid; grid-template-columns: minmax(9rem, 40%) 1fr; gap: 6px var(--e3); font-size: var(--fs-sm); }
.mc-kv dt { color: var(--tinta-suave); }
.mc-kv dd { margin: 0; color: var(--tinta); font-weight: var(--peso-medio); overflow-wrap: anywhere; }

.mc-lineas { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.mc-lineas th, .mc-lineas td { padding: 7px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
.mc-lineas th { color: var(--tinta-suave); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: var(--ls-micro); }
.mc-lineas td.num, .mc-lineas th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mc-lineas tr.mc-total td { font-weight: var(--peso-extra); color: var(--tinta); border-bottom: 0; }

.mc-veredicto {
  padding: var(--e4);
  border-radius: var(--r-md);
  background: var(--tono-bg);
  border: 1px solid var(--tono-bd);
}
.mc-veredicto-t { font-size: var(--fs-md); font-weight: var(--peso-extra); color: var(--tono-ink); }
.mc-veredicto-r { font-size: var(--fs-sm); color: var(--tinta-media); margin-top: var(--e2); }
.mc-veredicto-m {
  margin-top: var(--e3);
  font-size: var(--fs-xs);
  color: var(--tinta-suave);
  font-family: var(--fuente-num);
}

.mc-dr-acciones {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--linea);
  background: var(--superficie-2);
}
.mc-dr-acciones .mc-btn { flex: 1 1 auto; }

/* === toasts =============================================================== */
.mc-toasts {
  /* Esquina inferior derecha, no el centro. Centrado abajo, el aviso de "entra
     incidente" aterrizaba encima de la tabla y del pie de página: parecía un
     error de maquetación en vez de una notificación. La esquina es además donde
     la gente ya espera encontrarlas. */
  position: fixed;
  right: var(--e5);
  bottom: var(--e5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  align-items: flex-end;
  pointer-events: none;
  width: min(88vw, 22rem);
}
.mc-toast {
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: 100%;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--tono-bd);
  border-left: 4px solid var(--tono);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  color: var(--tinta);
  font-size: var(--fs-xs);
  font-weight: var(--peso-medio);
  animation: mc-toast-in var(--t-media) var(--curva);
}
.mc-toast.mc-sale { opacity: 0; transition: opacity var(--t-media) var(--curva); }
.mc-toast i { width: 9px; height: 9px; flex: none; border-radius: var(--r-pill); background: var(--tono); }
@keyframes mc-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* === asistente y copiloto ================================================= */
.mc-asist { display: flex; flex-direction: column; gap: var(--e3); }
.mc-asist li {
  /* NO flex. El contenido de cada alerta es texto corrido con <b> intercalados
     ("Concentración en <b>Plantel X</b>: 5 incidentes…"). Con display:flex cada
     nodo de texto y cada <b> se convertía en un ítem flex independiente, y el
     navegador los repartía en columnas angostas: la frase quedaba troceada en
     tres bloques verticales ilegibles. El punto de color va posicionado en vez
     de ser un ítem flex. */
  position: relative;
  display: block;
  padding: var(--e3) var(--e3) var(--e3) calc(var(--e3) + 16px);
  border-radius: var(--r-md);
  background: var(--tono-bg);
  border: 1px solid var(--tono-bd);
  font-size: var(--fs-xs);
  color: var(--tinta-media);
  line-height: 1.5;
}
.mc-asist li::before {
  content: "";
  position: absolute;
  left: var(--e3);
  top: calc(var(--e3) + 6px);
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--tono);
}
.mc-asist li b { color: var(--tinta); font-weight: var(--peso-extra); }
.mc-asist-vacio { font-size: var(--fs-xs); color: var(--tinta-suave); }

.mc-chat { display: flex; flex-direction: column; gap: var(--e3); }
.mc-chat-log {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-height: 250px;
  overflow-y: auto;
  padding-right: var(--e1);
}
.mc-msg {
  max-width: 88%;
  padding: var(--e3);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.mc-msg-yo { align-self: flex-end; background: var(--acento-suave); border: 1px solid var(--acento-borde); color: var(--acento-ink); }
.mc-msg-ia { align-self: flex-start; background: var(--superficie-3); border: 1px solid var(--linea); color: var(--tinta-media); }
.mc-msg-ia b { color: var(--tinta); }
.mc-tecleando { display: inline-flex; gap: 4px; }
.mc-tecleando span {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--tinta-suave);
  animation: mc-parpadeo 1.2s infinite;
}
.mc-tecleando span:nth-child(2) { animation-delay: .2s; }
.mc-tecleando span:nth-child(3) { animation-delay: .4s; }
@keyframes mc-parpadeo { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.mc-chips-sug { display: flex; flex-wrap: wrap; gap: var(--e2); }
.mc-chip-sug {
  /* Padding vertical y envoltura normal: con padding 0 y una sola línea, una
     pregunta larga ("¿Qué vence en menos de 6 horas?") se partía en dos líneas
     y se salía de la píldora por arriba y por abajo. */
  min-height: 36px;
  padding: 7px var(--e3);
  white-space: normal;
  text-align: left;
  line-height: 1.3;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--peso-medio);
  cursor: pointer;
}
.mc-chip-sug:hover { border-color: var(--acento-borde); color: var(--acento-ink); background: var(--acento-suave); }

.mc-entrada { display: flex; gap: var(--e2); }
.mc-entrada input, .mc-entrada textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--alto-tap);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--fs-xs);
  resize: vertical;
}
.mc-entrada input:focus, .mc-entrada textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--anillo-foco);
}

/* === gráficos ============================================================= */
.mc-chart { position: relative; height: 240px; }
.mc-chart canvas { max-width: 100%; }
/* Degradación elegante: si Chart.js no cargó se pinta esta tabla en su lugar.
   Nunca una caja en blanco delante del cliente. */
.mc-chart-fallback { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.mc-chart-fallback caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--e2);
  color: var(--tinta-suave);
}
.mc-chart-fallback th, .mc-chart-fallback td { padding: 5px 6px; border-bottom: 1px solid var(--linea); text-align: left; }
.mc-chart-fallback td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); }
.mc-barra { height: 8px; border-radius: var(--r-pill); background: var(--superficie-3); overflow: hidden; }
.mc-barra i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--acento); }
/* Variante SVG: el ancho va como ATRIBUTO del <rect>, no como style=, porque
   la CSP (style-src 'self') bloquea los atributos de estilo. */
.mc-barra-svg { display: block; width: 100%; line-height: 0; }
.mc-barra-svg svg { display: block; width: 100%; }
.mc-barra-pista { fill: var(--superficie-3); }
.mc-barra-fill  { fill: var(--tono); }

/* === estadísticas sueltas ================================================= */
.mc-stat {
  padding: var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
}
.mc-stat-n {
  font-size: var(--fs-kpi-sm);
  font-weight: var(--peso-extra);
  letter-spacing: -.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.mc-stat-l { font-size: var(--fs-xs); color: var(--tinta-suave); font-weight: var(--peso-medio); }

/* === vistas secundarias: desglose por barras y foco ======================= */
.mc-desglose { display: flex; flex-direction: column; gap: 6px; margin: var(--e2) 0 var(--e4); }
.mc-desglose-h {
  margin: var(--e4) 0 var(--e2);
  font-size: var(--fs-xs); font-weight: var(--peso-extra);
  text-transform: uppercase; letter-spacing: var(--ls-micro); color: var(--tinta-suave);
}
.mc-desglose-fila {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) 2fr minmax(72px, auto);
  align-items: center; gap: var(--e3);
  padding: 8px var(--e3);
  border-radius: var(--r-md);
  background: var(--superficie-2);
}
.mc-desglose-fila:hover { background: var(--acento-suave); }
.mc-desglose-lbl { font-size: var(--fs-sm); color: var(--tinta); font-weight: var(--peso-medio); min-width: 0; }
.mc-desglose-lbl .mc-sub { margin-top: 1px; }
.mc-desglose-val {
  font-family: var(--fuente-num); font-weight: var(--peso-extra); font-size: var(--fs-sm);
  color: var(--tinta); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mc-foco {
  margin: var(--e2) 0 var(--e3);
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--acento);
  background: var(--acento-suave);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm); color: var(--tinta); line-height: 1.45;
}
@media (max-width: 760px) {
  /* Celular: etiqueta y número en la primera fila, la barra debajo a lo
     ancho. Sin la colocación explícita, el autoflujo dejaba el número solo
     en una tercera línea. */
  .mc-desglose-fila { grid-template-columns: 1fr auto; grid-auto-flow: row dense; }
  .mc-desglose-fila .mc-desglose-lbl { grid-column: 1; grid-row: 1; }
  .mc-desglose-fila .mc-desglose-val { grid-column: 2; grid-row: 1; }
  .mc-desglose-fila .mc-barra-svg { grid-column: 1 / -1; grid-row: 2; }
}

/* === pie ================================================================== */
.mc-foot {
  margin-top: var(--e4);
  padding: var(--e5);
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: var(--fs-xs);
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  justify-content: space-between;
}
.mc-foot a { color: var(--acento-ink); }
.mc-foot .mc-ver { font-family: var(--fuente-num); }

/* === responsive ===========================================================
   Tres cortes: 1100 (el lateral baja), 900 (KPIs a dos columnas) y 760 (la
   tabla se convierte en tarjetas y el drawer ocupa la pantalla). */
/* Corte de columnas. El umbral es 1720 px y no 1280: la tabla no ocupa la
   ventana entera sino el 78 % de ella (el resto es el lateral de gráficos), así
   que con una ventana de 1600 px el panel mide ~1155 px y las ocho columnas de
   facturas ya no caben. Con el corte en 1280 nunca se activaba cuando hacía
   falta, y el resultado era que la columna de acciones —que es sticky— se
   dibujaba ENCIMA del veredicto de la IA: se leía "Confo…", "Obser…".
   El caso marca con hideMd las dos columnas que puede perder primero, y ambas
   siguen estando completas en el drawer. */
@media (max-width: 1720px) {
  .mc-tabla .mc-hide-md { display: none; }
}
/* Segundo escalón: notebooks de 13-14" y navegadores con zoom. Se suelta la
   línea secundaria del ID y la columna marcada hideLg (en incidentes,
   Estado·Responsable, que sigue en el drawer y en el texto del veredicto). */
@media (max-width: 1400px) {
  .mc-tabla .col-id .mc-sub { display: none; }
}
@media (max-width: 1280px) {
  .mc-tabla .mc-hide-lg { display: none; }
}

@media (max-width: 1100px) {
  .mc-layout { grid-template-columns: minmax(0, 1fr); }
  .mc-lateral { flex-direction: row; flex-wrap: wrap; }
  .mc-lateral > .mc-panel { flex: 1 1 320px; }
}

@media (max-width: 900px) {
  .mc-app { padding: var(--e4) var(--e3) var(--e6); gap: var(--e3); }
  .mc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-kpi-valor { font-size: var(--fs-kpi-sm); }
  .mc-top { padding: var(--e3) var(--e4); }
  .mc-tabla-scroll { max-height: none; }
}

@media (max-width: 760px) {
  .mc-top { flex-direction: column; align-items: stretch; gap: var(--e3); }
  .mc-top h1 { font-size: var(--fs-xl); line-height: 1.15; }
  .mc-top-der { justify-content: space-between; flex-wrap: wrap; gap: var(--e2); }
  .mc-hora { display: none; }   /* el reloj del celular ya da la hora */
  .mc-chip-modelo { font-size: 12px; }
  .mc-rol { flex: 1 1 auto; }
  .mc-rol select { flex: 1 1 auto; max-width: none; }

  .mc-controles { position: sticky; bottom: 0; z-index: var(--z-top); }
  .mc-controles .mc-btn { flex: 1 1 auto; }
  .mc-espaciador { display: none; }

  .mc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mc-tabs::-webkit-scrollbar { display: none; }
  .mc-tab kbd { display: none; }

  /* Tabla → tarjetas. Cada fila es una tarjeta y cada celda muestra el nombre
     de su columna con data-label; sin esto, en el celular no se sabe qué es
     cada número. */
  .mc-tabla, .mc-tabla tbody, .mc-tabla tr, .mc-tabla td { display: block; width: 100%; }
  .mc-tabla thead { display: none; }
  .mc-tabla tbody tr {
    margin: 0 0 var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-1);
  }
  .mc-tabla tbody tr.mc-sel { box-shadow: var(--sombra-1), inset 3px 0 0 var(--acento); }
  .mc-tabla tbody td {
    display: flex;
    flex-wrap: wrap;            /* lo que no cabe junto a la etiqueta baja a su propia fila */
    align-items: baseline;
    justify-content: space-between;
    gap: 4px var(--e3);
    padding: 7px 0;
    border-bottom: 1px dashed var(--linea);
    text-align: right;
  }
  /* En la tarjeta el veredicto no compite con la etiqueta por 160 px: el badge
     envuelve y ocupa el ancho, y el motivo va debajo alineado a la izquierda.
     Sin esto quedaba "Alt", "De", "Qu": un badge con elipsis a dos letras. */
  .mc-tabla tbody td .mc-badge {
    white-space: normal;
    max-width: none;
    text-align: left;
    line-height: 1.3;
  }
  .mc-tabla tbody td .mc-motivo,
  .mc-tabla tbody td .mc-sub {
    flex: 1 1 100%;
    max-width: none;
    text-align: left;
  }
  .mc-tabla tbody td .mc-conf { margin-left: 0; }
  .mc-tabla tbody td:last-child { border-bottom: 0; }
  .mc-tabla tbody td::before {
    content: attr(data-label);
    flex: none;
    text-align: left;
    font-size: var(--fs-xs);
    font-weight: var(--peso-extra);
    text-transform: uppercase;
    letter-spacing: var(--ls-micro);
    color: var(--tinta-suave);
  }
  .mc-tabla tbody td.mc-hide-sm { display: none; }
  .mc-tabla .col-angosto, .mc-tabla .col-id,
  .mc-tabla .col-media, .mc-tabla .col-ancho, .mc-tabla .col-max {
    width: auto; min-width: 0; white-space: normal;
  }
  .mc-tabla tbody td.col-act {
    position: static;
    width: auto;
    text-align: center;
    padding-top: var(--e3);
    box-shadow: none;
    background: transparent;
  }
  .mc-tabla tbody td.col-act::before { display: none; }
  .mc-tabla tbody td.col-act .mc-acciones { width: 100%; }
  .mc-tabla tbody td.col-act .mc-btn { flex: 1 1 auto; min-height: var(--alto-tap); }
  .mc-tabla .mc-vacio { display: block; text-align: center; }
  .mc-tabla .mc-vacio::before { display: none; }

  /* Drawer a pantalla completa: en 390px de ancho un panel lateral no sirve. */
  .mc-drawer { width: 100%; max-width: 100%; border-left: 0; }
  .mc-dr-body, .mc-dr-head, .mc-dr-acciones { padding: var(--e4); }
  .mc-kv { grid-template-columns: 1fr; gap: 2px; }
  .mc-kv dd { margin-bottom: var(--e2); }

  .mc-chart { height: 210px; }
  .mc-toasts { bottom: 104px; }   /* despeja la barra de controles pegada abajo */
}

/* === accesibilidad de movimiento ==========================================
   Fredy proyecta; alguien en la sala puede tener sensibilidad vestibular.
   También hace la demo menos mareante en una grabación. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mc-drawer { transition: none; }
}

/* === impresión ============================================================ */
@media print {
  body { background: none; }
  .mc-app { max-width: none; padding: 0; gap: 12px; }
  .mc-controles, .mc-tabs, .mc-overlay, .mc-drawer, .mc-toasts,
  .mc-chips-sug, .mc-entrada, .mc-vivo, .mc-tab kbd { display: none !important; }
  .mc-banner { position: static; border: 1px solid var(--linea-fuerte); }
  .mc-top, .mc-panel, .mc-kpi { box-shadow: none; break-inside: avoid; }
  .mc-vista { display: block !important; }        /* el PDF lleva todas las pestañas */
  .mc-layout { grid-template-columns: 1fr; }
  .mc-tabla-scroll { max-height: none; overflow: visible; }
  .mc-tabla thead th { position: static; }
  .mc-tabla tbody tr { break-inside: avoid; }
  .mc-chart { height: auto; }
  .mc-chart canvas { display: none; }             /* el canvas sale pixelado */
  .mc-foot { break-inside: avoid; }
  /* En papel sí baja de 14px: se lee a 25 cm, no proyectado a seis metros. */
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: var(--tinta-suave); }
}

/* === diagrama de /arquitectura ============================================
   SVG en línea, sin librería: son ocho cajas y cinco flechas. Los colores
   salen de los tokens para que el diagrama siga al acento de la página. */
.mc-diagrama {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  height: auto;
  overflow: visible;
}
.dg-caja      { fill: var(--superficie); stroke: var(--linea); stroke-width: 1.5; }
.dg-caja-ac   { fill: var(--acento-suave); stroke: var(--acento); }
.dg-caja-lin  { fill: var(--superficie-2); stroke: var(--acento); stroke-dasharray: 5 4; }
.dg-caja-ok   { fill: var(--ok-bg, var(--superficie-2)); stroke: var(--ok-bd, var(--linea)); }
.dg-caja-fut  { fill: var(--superficie-2); stroke: var(--linea); stroke-dasharray: 5 4; }
.dg-t {
  fill: var(--tinta);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}
.dg-s {
  fill: var(--tinta-media);
  font-size: 12.5px;
  text-anchor: middle;
}
.dg-em { fill: var(--tinta-suave); font-style: italic; }
.dg-lbl {
  fill: var(--tinta-suave);
  font-size: 11px;
  text-anchor: middle;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dg-flecha {
  fill: none;
  stroke: var(--acento);
  stroke-width: 1.8;
  marker-end: url(#dg-punta);
}
.dg-flecha-fut { stroke: var(--tinta-suave); stroke-dasharray: 5 4; }

@media (max-width: 760px) {
  /* Proyectado se lee entero; en un celular el diagrama se desplaza en su
     propio contenedor en vez de encoger la tipografía hasta lo ilegible. */
  .mc-diagrama { min-width: 700px; }
  .mc-panel-body:has(> .mc-diagrama) { overflow-x: auto; }
}