/* app.css — Contratos Jalisco. Direccion de arte integrada (2026-08-04).
   Los TOKENS NO viven aqui: main.py inlinea mcci_web.css + mcci_pc.css
   (fuente de verdad, regla de la skill diseno-mcci). Este archivo es
   layout y componentes. Origen: pasada de diseno con Fable, auditada. */

/* ==========================================================================
   Contratos Jalisco — CSS de la maqueta (dirección de arte, 04-AGO-2026)
   TOKENS: inlineados desde 02_graficas/estilos/mcci_web.css (Estilo A) y
   02_graficas/estilos/mcci_pc.css (Estilo E). Ni un hex fuera de esos dos
   archivos; las transparencias y tintes se derivan con color-mix / rgba.
   ========================================================================== */



/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--mcci-bg); color: var(--mcci-ink);
  font-family: var(--mccipc-font-cuerpo); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
p { color: var(--mcci-ink); }
a { color: var(--mcci-ink); font-weight: 700; }
a:hover { color: var(--mccipc-dato-azul); }
.envoltura { max-width: var(--mccipc-max-width); margin: 0 auto; padding: 0 22px; }

:focus-visible {
  outline: 3px solid var(--mccipc-dato-azul); outline-offset: 2px;
  border-radius: 4px;
}
.sobre-navy :focus-visible, .masthead :focus-visible, .pie :focus-visible,
.lamina :focus-visible { outline-color: var(--mcci-gold); }

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--mcci-gold); color: var(--mcci-navy); padding: 10px 18px;
  font-weight: 800; border-radius: 0 0 8px 0;
}
.salto:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   COMPONENTES DEL ESTILO E (tal como los define mcci_pc.css)
   ========================================================================== */
.mccipc-pildora {
  display: inline-block; background: var(--mccipc-rosa); color: #fff;
  font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.15;
  letter-spacing: .01em; padding: 11px 28px;
  border-radius: var(--mccipc-radius-pildora);
}
.mccipc-pildora--suave { background: var(--mccipc-rosa-claro); color: var(--mcci-navy); }
.mccipc-pildora--navy  { background: var(--mcci-navy); color: #fff; }

.mccipc-cifra {
  font-family: var(--mccipc-font-titulo);
  font-size: clamp(1.7rem, 4.2vw, 2.8rem); line-height: 1.05;
  letter-spacing: -.01em;
}

.mccipc-recibo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  font-family: var(--mccipc-font-cuerpo);
  color: var(--mcci-ink-soft); background: var(--mcci-bg);
  border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius-pildora); padding: 3px 12px;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mccipc-recibo::before { content: "✓"; font-weight: 900; color: var(--mcci-dato-bien); }
.mccipc-recibo:hover, .mccipc-recibo:focus-visible {
  border-color: var(--mcci-dato-bien); color: var(--mcci-ink);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--mcci-dato-bien) 22%, transparent);
}
/* variante sobre navy: placa clara para que el recibo siga siendo legible */
.mccipc-recibo--navy {
  background: color-mix(in srgb, #fff 96%, var(--mcci-navy));
  color: var(--mcci-ink);
}

.mccipc-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mccipc-tabla th {
  background: var(--mcci-navy); color: #fff; text-align: left;
  font-weight: 700; padding: 10px 12px; white-space: nowrap;
}
.mccipc-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--mcci-border); vertical-align: top; }
.mccipc-tabla tbody tr { transition: background .12s ease; }
.mccipc-tabla tbody tr:hover { background: var(--mcci-bg-soft); }
.mccipc-tabla tr.total td {
  background: var(--mccipc-dato-ad); color: #fff; font-weight: 800;
  border-bottom: 0;
}
.mccipc-tabla td.num, .mccipc-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll > table { min-width: 720px; }

.mccipc-lockup {
  display: inline-flex; align-items: center; gap: 22px;
  background: #fff; border-radius: var(--mccipc-radius);
  padding: 12px 24px;
}
.mccipc-lockup img { height: 40px; width: auto; display: block; }
.mccipc-lockup .separador { width: 1px; height: 34px; background: var(--mcci-border); }

.mccipc-descarga {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mcci-navy); color: #fff; border: 0;
  font-family: var(--mccipc-font-cuerpo); font-weight: 700; font-size: .92rem;
  padding: 13px 24px; border-radius: var(--mccipc-radius-pildora);
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mccipc-descarga:hover, .mccipc-descarga:focus-visible {
  background: var(--mccipc-dato-azul); color: #fff; transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--mcci-navy) 28%, transparent);
}
.mccipc-descarga--suave {
  background: transparent; color: var(--mcci-navy);
  border: 1.5px solid var(--mcci-navy);
}
.mccipc-descarga--suave:hover, .mccipc-descarga--suave:focus-visible {
  background: var(--mcci-navy); color: #fff;
}
.mccipc-descarga small {
  display: block; font-weight: 600; font-size: .68rem; opacity: .82; letter-spacing: .03em;
}
.mccipc-descarga .icono { flex: none; }

.mccipc-leyenda { display: flex; gap: 0; flex-wrap: wrap; font-size: .8rem; font-weight: 700; }
.mccipc-leyenda span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; color: #fff; }
.mccipc-leyenda .ad  { background: var(--mccipc-dato-ad); }
.mccipc-leyenda .ccs { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
.mccipc-leyenda .lp  { background: var(--mccipc-dato-lp); }

/* ==========================================================================
   CABECERA — barra blanca de marcas + masthead navy + pestañas
   ========================================================================== */
.topbar { background: var(--mcci-bg); border-bottom: 1px solid var(--mcci-border); }
.topbar-int { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 10px; padding-bottom: 10px; }
.lockup { display: inline-flex; align-items: center; gap: 18px; }
.lockup img { height: 34px; width: auto; display: block; }
.lockup-sep { width: 1px; height: 30px; background: var(--mcci-border); }
.topbar-sello {
  margin: 0; font-family: var(--mcci-font-alt); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mcci-ink-soft);
  text-align: right;
}
/* El sello es la liga al home del laboratorio. Se comporta como liga (cursor,
   subrayado al pasar) pero NO se pinta de azul: es un pie de firma, no una
   llamada a la acción, y compitiendo con el lockup se vería como un error. */
.topbar-sello a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.topbar-sello a:hover,
.topbar-sello a:focus-visible { color: var(--mcci-ink); border-bottom-color: currentColor; }

.masthead {
  background: linear-gradient(160deg, var(--mcci-navy) 0%, var(--mcci-navy-deep) 100%);
  color: #fff;
}
.masthead-int { padding-top: 26px; }
.masthead .kicker {
  margin: 0 0 6px; font-family: var(--mcci-font-alt); font-size: .74rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mccipc-rosa-claro);
}
/* El nombre es PROVISIONAL: caja fluida, sin ancho fijo, con clamp — aguanta
   un rebautizo del doble de largo sin romper la cabecera. */
.app-titulo {
  margin: 0; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.55rem, 4.2vw, 2.5rem); line-height: 1.06;
  letter-spacing: -.005em; color: #fff; text-wrap: balance; max-width: 22ch;
}
.app-titulo a { color: #fff; text-decoration: none; font-weight: 400; }
.app-titulo a:hover { color: var(--mccipc-rosa-claro); }
.app-sub {
  margin: 8px 0 0; max-width: 62ch; font-size: .95rem; line-height: 1.5;
  color: var(--mccipc-suave-sobre-navy);
}
.pestanas {
  display: flex; gap: 6px; margin-top: 22px; overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px 12px; border-radius: 10px 10px 0 0;
  color: rgba(255,255,255,.78); font-weight: 700; font-size: .92rem;
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.pestanas a:hover { background: rgba(255,255,255,.1); color: #fff; }
body[data-pestana="panorama"]      .pestanas a[data-tab="panorama"],
body[data-pestana="base"]          .pestanas a[data-tab="base"],
body[data-pestana="brecha"]        .pestanas a[data-tab="brecha"],
body[data-pestana="reportes"]      .pestanas a[data-tab="reportes"],
body[data-pestana="investigacion"] .pestanas a[data-tab="investigacion"] {
  background: var(--mcci-bg); color: var(--mcci-navy);
}
.tag-lente {
  font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--mccipc-rosa); color: #fff; border-radius: 999px; padding: 2px 8px;
}
body[data-pestana="investigacion"] .pestanas a[data-tab="investigacion"] .tag-lente {
  background: var(--mccipc-rosa);
}

/* ==========================================================================
   FILTRO GLOBAL — pegajoso, acompaña a las cuatro pestañas
   ========================================================================== */
.filtros {
  position: sticky; top: 0; z-index: 40;
  background: var(--mcci-bg); border-bottom: 1px solid var(--mcci-border);
  transition: box-shadow .2s ease;
}
.filtros.pegado { box-shadow: 0 4px 16px color-mix(in srgb, var(--mcci-navy) 14%, transparent); }
.filtros-int {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; padding-bottom: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.filtros-int::-webkit-scrollbar { display: none; }
.filtros-etiqueta {
  flex: none; font-family: var(--mcci-font-alt); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mcci-ink-soft);
}
.filtro { flex: none; display: inline-flex; align-items: center; gap: 7px; }
.filtro > span { font-size: .72rem; font-weight: 700; color: var(--mcci-ink-soft); }
.filtro select {
  appearance: none; font-family: var(--mccipc-font-cuerpo); font-weight: 600;
  font-size: .82rem; color: var(--mcci-navy); background: var(--mcci-bg);
  border: 1.5px solid var(--mcci-border); border-radius: 999px;
  padding: 7px 30px 7px 14px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230D2651' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s ease;
}
.filtro select:hover { border-color: var(--mcci-navy); }
.filtro-busqueda {
  flex: 1 1 220px; min-width: 180px; display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--mcci-border); border-radius: 999px; padding: 7px 14px;
  color: var(--mcci-ink-soft); transition: border-color .15s ease;
}
.filtro-busqueda:focus-within { border-color: var(--mccipc-dato-azul); }
.filtro-busqueda input {
  border: 0; outline: 0; width: 100%; font-family: var(--mccipc-font-cuerpo);
  font-size: .85rem; color: var(--mcci-ink); background: transparent;
}
.filtro-busqueda input::placeholder { color: var(--mcci-ink-soft); opacity: .75; }
.filtros-limpiar {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--mccipc-font-cuerpo); font-size: .78rem; font-weight: 700;
  color: var(--mcci-ink-soft); text-decoration: underline; text-underline-offset: 3px;
}
.filtros-limpiar:hover { color: var(--mccipc-dato-ad); }
.filtros-conteo {
  flex: none; margin-left: auto; font-size: .8rem; color: var(--mcci-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.filtros-conteo b { color: var(--mcci-navy); font-weight: 800; }

/* ==========================================================================
   SECCIONES Y RITMO DE SCROLL
   ========================================================================== */
.seccion { padding: 52px 0 56px; }
.seccion--suave { background: var(--mcci-bg-soft); }
.seccion--rosa { background: var(--mccipc-rosa-panel); }
.lamina {
  background: linear-gradient(160deg, var(--mcci-navy) 0%, var(--mcci-navy-deep) 100%);
  color: var(--mccipc-tinta-sobre-navy); padding: 56px 0 60px;
}
.lamina p { color: var(--mccipc-suave-sobre-navy); }
.seccion-cabeza { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.seccion-nota { font-size: .85rem; color: var(--mcci-ink-soft); max-width: 70ch; }
.lamina .seccion-nota { color: var(--mccipc-suave-sobre-navy); }
.fuente-nota {
  margin-top: 14px; font-size: .74rem; color: var(--mcci-ink-soft); max-width: 90ch;
}
.lamina .fuente-nota { color: rgba(255,255,255,.6); }

/* ==========================================================================
   CHIPS DE DATO (portal, procedimiento, etapa, tri-estado)
   Regla CVD: el color acompaña, el texto es el canal. Siempre hay texto.
   ========================================================================== */
.chip {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.chip-portal-cj   { background: var(--mccipc-dato-azul); color: #fff; }
.chip-portal-siop { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
.chip-portal-pnt  { background: var(--mcci-navy); color: #fff; }
.chip-proc-ad  { background: var(--mccipc-dato-ad); color: #fff; }
.chip-proc-ccs { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
.chip-proc-lp  { background: var(--mccipc-dato-lp); color: #fff; }
.chip-etapa-cancelada { background: transparent; color: var(--mccipc-dato-ad); border: 1.5px solid var(--mccipc-dato-ad); }
.chip-etapa-desierta  { background: transparent; color: color-mix(in srgb, var(--mcci-dato-alerta) 88%, var(--mcci-ink)); border: 1.5px solid var(--mcci-dato-alerta); }
.chip-etapa-adjudicada{ background: transparent; color: var(--mcci-dato-bien); border: 1.5px solid var(--mcci-dato-bien); }
/* Tri-estado de Investigación — tres estados que NUNCA se confunden */
.chip-sin-cruzar   { background: transparent; color: var(--mcci-gray); border: 1.5px dashed var(--mcci-dato-sd); }
.chip-no-publica   { background: transparent; color: color-mix(in srgb, var(--mcci-dato-alerta) 85%, var(--mcci-ink)); border: 1.5px solid var(--mcci-dato-alerta); }
.chip-no-aparece   { background: transparent; color: var(--mcci-dato-bien); border: 1.5px solid var(--mcci-dato-bien); }
.chip-aparece      { background: var(--mcci-dato-mal); color: #fff; border: 1.5px solid var(--mcci-dato-mal); }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie {
  background: var(--mcci-navy); color: #fff; margin-top: 64px;
  padding: 40px 0 34px; font-size: .88rem; line-height: 1.6;
}
.pie p { color: var(--mccipc-suave-sobre-navy); }
.pie a { color: var(--mcci-gold); font-weight: 700; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-proyecto { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.pie-frase {
  margin: 0; font-family: var(--mccipc-font-titulo); font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1.3; color: #fff !important; max-width: 30ch;
}
.pie-frase b { color: var(--mccipc-rosa-claro); font-weight: 400; }
.pie-columnas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.pie-col h2 {
  margin: 0 0 10px; font-family: var(--mcci-font-alt); font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mccipc-rosa-claro);
}
.pie-col p { margin: .3em 0; font-size: .84rem; }
.pie-col b { color: #fff; }
.pie-fecha { color: var(--mcci-gold) !important; font-weight: 700; margin-top: 10px !important; }
.pie-cita blockquote {
  margin: 0 0 12px; padding: 14px 16px; font-size: .82rem; line-height: 1.6;
  background: rgba(255,255,255,.06); border-left: 3px solid var(--mccipc-rosa);
  border-radius: 0 8px 8px 0; color: var(--mccipc-suave-sobre-navy);
}
.copiar-cita {
  border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  font-family: var(--mccipc-font-cuerpo); font-weight: 700; font-size: .78rem;
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.copiar-cita:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.pie-leyenda { margin: 28px 0 0; font-size: .76rem; color: rgba(255,255,255,.62) !important; max-width: 90ch; }

/* ==========================================================================
   RESPONSIVO — móvil primero de verdad: esto se abre desde un tuit
   ========================================================================== */
@media (max-width: 760px) {
  .topbar-sello { display: none; }
  .lockup img { height: 26px; }
  .masthead-int { padding-top: 20px; }
  .app-sub { font-size: .86rem; }
  .pestanas a { padding: 10px 15px 11px; font-size: .86rem; }
  .seccion { padding: 36px 0 40px; }
  .lamina { padding: 40px 0 44px; }
  .pie-columnas { grid-template-columns: 1fr; gap: 24px; }
  .filtros-conteo { display: none; }
  .mccipc-lockup { gap: 14px; padding: 10px 16px; }
  .mccipc-lockup img { height: 30px; }
}


/* ========== panorama.css ========== */
/* ---------- PANORAMA ---------- */
.hero { padding: 58px 0 62px; }
.hero h1 {
  margin: 0 0 14px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.7rem, 4.6vw, 3rem); line-height: 1.12; color: #fff;
  letter-spacing: -.005em; max-width: 21ch; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--mccipc-rosa-claro); }
.hero .bajada { max-width: 66ch; font-size: 1.02rem; margin: 0 0 34px; }
.hero-cifra {
  margin: 0; font-family: var(--mccipc-font-titulo); color: #fff;
  font-size: clamp(2rem, 6.8vw, 4.6rem); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; word-break: break-word;
}
.hero-cifra .moneda { color: var(--mccipc-rosa-claro); }
.hero-cifra .centavos { font-size: .45em; color: var(--mccipc-rosa-claro); }
.hero-cifra-pie { margin: 14px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.centavo {
  margin: 10px 0 0; font-size: .8rem; color: rgba(255,255,255,.68) !important;
  max-width: 62ch; font-style: italic;
}
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-cifra, .hero-cifra-pie, .centavo { animation: sube .6s ease-out both; }
.hero-cifra-pie { animation-delay: .15s; } .centavo { animation-delay: .3s; }

.reparto { display: flex; gap: 4px; margin-top: 42px; }
.reparto-col { min-width: 0; }
.reparto-titulo {
  margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mccipc-suave-sobre-navy) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reparto-cifra {
  margin: 2px 0 8px; font-family: var(--mccipc-font-titulo); color: #fff !important;
  font-size: clamp(.95rem, 2.4vw, 1.45rem); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reparto-cifra small { font-size: .72em; color: var(--mccipc-rosa-claro); font-family: var(--mccipc-font-cuerpo); font-weight: 800; }
.reparto-barra { height: 18px; border-radius: 4px; }
.reparto-barra.adq { background: var(--mccipc-dato-azul); }
.reparto-barra.obra { background: var(--mccipc-rosa); }
@media (max-width: 640px) {
  .reparto { flex-direction: column; gap: 16px; }
  .reparto-col { flex-basis: auto !important; }
  .reparto-barra.adq { width: 29.94%; }
}

/* Los 10 datos */
.datos-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px; margin-top: 26px;
}
.dato {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 20px 20px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dato:hover {
  transform: translateY(-3px); border-color: var(--mccipc-rosa);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--mcci-navy) 12%, transparent);
}
.dato-num {
  font-family: var(--mccipc-font-titulo); font-size: 1.9rem; line-height: 1;
  color: var(--mccipc-rosa);
}
.dato p { margin: 0; font-size: .88rem; line-height: 1.55; flex: 1; }
.dato p b { color: var(--mcci-navy); }
.dato .mccipc-recibo { align-self: flex-start; }
.dato--navy { background: var(--mcci-navy); border-color: var(--mcci-navy); }
.dato--navy p { color: var(--mccipc-suave-sobre-navy); }
.dato--navy p b { color: #fff; }
.dato--navy .dato-num { color: var(--mccipc-rosa-claro); }
.dato--navy:hover { border-color: var(--mccipc-rosa); }

/* Gráficas SVG */
.grafica { margin-top: 26px; background: var(--mcci-bg); border: 1px solid var(--mcci-border); border-radius: var(--mccipc-radius); padding: 22px 18px 14px; }
.grafica svg { width: 100%; height: auto; display: block; }
.grafica text { font-family: var(--mccipc-font-cuerpo); fill: var(--mcci-ink); }
.grafica .eje { fill: var(--mcci-ink-soft); font-size: 13px; }
.grafica .rejilla { stroke: var(--mcci-border); stroke-width: 1; }
.grafica .etiqueta-directa { font-size: 13.5px; font-weight: 700; }
.grafica .etiqueta-cifra { font-size: 14px; font-weight: 800; fill: var(--mcci-navy); }
.grafica-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 10px; }

/* Sankey */
.sankey .ribbon { opacity: .5; transition: opacity .15s ease; }
.sankey .ribbon:hover { opacity: .85; }
.sankey .nodo-etiqueta { font-size: 13.5px; font-weight: 700; }
.sankey .nodo-cifra { font-size: 12.5px; fill: var(--mcci-ink-soft); font-variant-numeric: tabular-nums; }
.sankey .columna-titulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; fill: var(--mcci-ink-soft); }

/* Banda CTA hacia La brecha */
.cta-brecha { text-align: left; }
.cta-brecha .gigante {
  margin: 0; font-family: var(--mccipc-font-titulo); color: var(--mccipc-rosa-claro);
  font-size: clamp(3rem, 10vw, 6rem); line-height: 1;
}
.cta-brecha p.texto { max-width: 56ch; font-size: 1.05rem; margin: 10px 0 24px; }
.cta-brecha .mccipc-descarga { background: var(--mccipc-rosa); }
.cta-brecha .mccipc-descarga:hover { background: var(--mccipc-rosa-claro); color: var(--mcci-navy); }


/* ========== base.css ========== */
/* ---------- LA BASE ---------- */
.regalo { padding: 44px 0 46px; }
.regalo-int { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center; }
.regalo h1 {
  margin: 0 0 12px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.3rem); line-height: 1.12; color: var(--mcci-navy);
  text-wrap: balance;
}
.regalo h1 em { font-style: normal; color: var(--mccipc-rosa); }
.regalo p.lede { margin: 0 0 16px; font-size: .98rem; line-height: 1.6; max-width: 58ch; }
.regalo-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.descargas { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.descargas .mccipc-descarga { justify-content: flex-start; padding: 15px 26px; font-size: 1rem; }
.descargas .mccipc-descarga small { font-size: .7rem; }
.descargas-nota { font-size: .74rem; color: var(--mcci-ink-soft); margin: 2px 0 0; }
@media (max-width: 820px) { .regalo-int { grid-template-columns: 1fr; gap: 22px; } }

/* barra de herramientas de la tabla */
.tabla-seccion { padding-top: 40px; }
.tabla-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 12px;
}
.tabla-resumen { font-size: .85rem; color: var(--mcci-ink-soft); }
.tabla-resumen b { color: var(--mcci-navy); font-variant-numeric: tabular-nums; }
.filtro-activo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mccipc-rosa-panel); color: var(--mcci-navy);
  border: 1px solid var(--mccipc-rosa-claro); border-radius: 999px;
  font-size: .74rem; font-weight: 700; padding: 4px 6px 4px 12px;
}
.filtro-activo button {
  border: 0; background: var(--mccipc-rosa); color: #fff; border-radius: 999px;
  width: 18px; height: 18px; line-height: 1; font-size: .7rem; font-weight: 800;
  cursor: pointer; display: grid; place-items: center;
}
.filtro-activo button:hover { background: var(--mccipc-dato-ad); }
.tabla-orden { margin-left: auto; font-size: .78rem; color: var(--mcci-ink-soft); }
.tabla-orden b { color: var(--mcci-navy); }

/* tabla principal */
.tabla-base th[aria-sort] { cursor: pointer; user-select: none; }
.tabla-base th[aria-sort]:hover { background: var(--mcci-navy-deep); }
.tabla-base th .flecha { opacity: .55; font-size: .72em; margin-left: 4px; }
.tabla-base th[aria-sort="descending"] .flecha { opacity: 1; }
.tabla-base td.monto { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.tabla-base .exp { font-size: .78rem; font-weight: 700; color: var(--mcci-ink-soft); white-space: nowrap; }
.tabla-base .desc { min-width: 260px; }
.tabla-base td:nth-child(4) { min-width: 170px; }
.tabla-base .desc b { color: var(--mcci-navy); }
.tabla-base .dependencia { display: block; font-size: .76rem; color: var(--mcci-ink-soft); margin-top: 2px; }
.tabla-base .doc-enlace {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: .78rem; font-weight: 700; color: var(--mccipc-dato-azul);
  text-decoration: none; border-bottom: 1.5px solid transparent;
}
.tabla-base .doc-enlace:hover { border-bottom-color: var(--mccipc-dato-azul); }
.tabla-base .portales { display: flex; gap: 4px; flex-wrap: wrap; }

/* paginación */
.paginacion {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 22px; flex-wrap: wrap;
}
.paginacion a, .paginacion span.actual, .paginacion span.puntos {
  min-width: 36px; height: 36px; display: inline-grid; place-items: center;
  border-radius: 8px; font-size: .85rem; font-weight: 700; text-decoration: none;
  padding: 0 10px;
}
.paginacion a { color: var(--mcci-navy); border: 1.5px solid var(--mcci-border); transition: border-color .15s, background .15s; }
.paginacion a:hover { border-color: var(--mcci-navy); background: var(--mcci-bg-soft); }
.paginacion .actual { background: var(--mcci-navy); color: #fff; }
.paginacion .puntos { color: var(--mcci-ink-soft); }

/* nota metodológica */
.metodo { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 26px; }
.metodo-card {
  background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-left: 4px solid var(--mccipc-rosa); border-radius: var(--mccipc-radius);
  padding: 16px 18px;
}
.metodo-card h3 {
  margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mcci-navy);
}
.metodo-card p { margin: 0; font-size: .85rem; line-height: 1.55; }
.metodo-card p b { color: var(--mcci-navy); }


/* ========== brecha.css ========== */
/* ---------- LA BRECHA ---------- */
.brecha-hero { padding: 54px 0 58px; }
.brecha-hero h1 {
  margin: 0 0 8px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.7rem); line-height: 1.1; color: #fff;
  max-width: 24ch; text-wrap: balance;
}
.brecha-hero h1 em { font-style: normal; color: var(--mccipc-rosa-claro); }
.brecha-hero .bajada { max-width: 62ch; font-size: 1rem; margin: 0; }
.brecha-kpis { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 30px; }
.brecha-kpi .valor {
  margin: 0; font-family: var(--mccipc-font-titulo); color: #fff;
  font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1;
}
.brecha-kpi .valor.rosa { color: var(--mccipc-rosa-claro); }
.brecha-kpi .clave { margin: 6px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mccipc-suave-sobre-navy) !important; }

/* Mosaico de coincidencia */
.mosaico-bloque { margin-top: 30px; }
.mosaico-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.mosaico-titulo h3 { margin: 0; font-size: 1.02rem; font-weight: 800; color: var(--mcci-navy); }
.mosaico-titulo .universo { font-size: .8rem; color: var(--mcci-ink-soft); font-variant-numeric: tabular-nums; }
.mosaico { display: flex; gap: 3px; height: 92px; }
.mosaico button {
  position: relative; border: 0; cursor: pointer; min-width: 0;
  border-radius: 6px; padding: 10px 12px; text-align: left; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  font-family: var(--mccipc-font-cuerpo);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mosaico button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--mcci-navy) 20%, transparent); }
.mosaico button[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; border: 3px solid var(--mcci-gold);
  border-radius: 6px; pointer-events: none;
}
.mosaico .seg-nombre { font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; }
.mosaico .seg-cifra { font-family: var(--mccipc-font-titulo); font-size: 1.05rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mosaico .ambas   { background: var(--mcci-navy); color: #fff; }
.mosaico .estatal { background: var(--mccipc-dato-ad); color: #fff; }
.mosaico .pnt     { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
/* segmentos angostos: la etiqueta sale con línea guía debajo */
.mosaico-guias { display: flex; gap: 3px; margin-top: 6px; }
.mosaico-guias .guia { font-size: .7rem; font-weight: 700; color: var(--mcci-ink-soft); white-space: nowrap; }

/* panel de detalle del segmento */
.drill {
  margin-top: 18px; border: 1px solid var(--mcci-border); border-radius: var(--mccipc-radius);
  background: var(--mcci-bg); padding: 20px 22px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px 28px; align-items: center;
}
.drill .drill-cifra {
  font-family: var(--mccipc-font-titulo); font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1; color: var(--mcci-navy); font-variant-numeric: tabular-nums;
}
.drill .drill-cifra small { display: block; font-family: var(--mccipc-font-cuerpo); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mcci-ink-soft); margin-top: 6px; }
.drill .drill-texto { margin: 0; font-size: .9rem; line-height: 1.6; max-width: 60ch; }
.drill .drill-texto b { color: var(--mcci-navy); }
.drill .drill-acciones { display: flex; flex-direction: column; gap: 8px; }
.drill[data-tono="estatal"] { border-left: 5px solid var(--mccipc-dato-ad); }
.drill[data-tono="ambas"]   { border-left: 5px solid var(--mcci-navy); }
.drill[data-tono="pnt"]     { border-left: 5px solid var(--mccipc-dato-ccs); }
@media (max-width: 760px) {
  .drill { grid-template-columns: 1fr; }
  .mosaico { height: 108px; }
}

/* diferencias de monto */
.dif-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: start; margin-top: 24px; }
@media (max-width: 860px) { .dif-grid { grid-template-columns: 1fr; } }
.dif-barra { display: flex; height: 46px; border-radius: 8px; overflow: hidden; }
.dif-barra div { min-width: 2px; }
.dif-barra .ok    { background: var(--mcci-navy); }
.dif-barra .act   { background: var(--mccipc-dato-ad); }
.dif-barra .val   { background: var(--mccipc-dato-azul); }
.dif-barra .nover { background: var(--mccipc-dato-sd); }
.dif-leyenda { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.dif-leyenda li { display: flex; align-items: baseline; gap: 10px; font-size: .86rem; }
.dif-leyenda .cuadro { flex: none; width: 13px; height: 13px; border-radius: 3px; transform: translateY(2px); }
.dif-leyenda b { font-variant-numeric: tabular-nums; color: var(--mcci-navy); }

/* casos versus */
.versus-lista { display: grid; gap: 14px; margin-top: 24px; }
.versus {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 16px 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.versus:hover { border-color: var(--mccipc-rosa); box-shadow: 0 6px 18px color-mix(in srgb, var(--mcci-navy) 10%, transparent); }
.versus-lado { min-width: 0; }
.versus-lado .portal-dice { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mcci-ink-soft); margin: 0 0 6px; }
.versus-lado p { margin: 2px 0 0; font-size: .84rem; }
.versus-lado .monto { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--mcci-navy); }
.versus-centro {
  font-family: var(--mccipc-font-titulo); color: var(--mccipc-rosa);
  font-size: 1rem; text-align: center;
}
.versus-cabeza { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px dashed var(--mcci-border); padding-bottom: 8px; }
.versus-cabeza .exp { font-size: .76rem; font-weight: 800; color: var(--mcci-ink-soft); }
.versus-cabeza h3 { margin: 0; font-size: .95rem; color: var(--mcci-navy); }
@media (max-width: 700px) {
  .versus { grid-template-columns: 1fr; }
  .versus-centro { text-align: left; }
}


/* ========== investigacion.css ========== */
/* ---------- INVESTIGACIÓN (lente interna: densa, sobria, sin lámina) ---------- */
.lente-cabeza {
  background: var(--mcci-bg-soft); border-bottom: 1px solid var(--mcci-border);
  padding: 26px 0 24px;
}
.lente-cabeza h1 {
  margin: 0 0 6px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.2rem, 2.8vw, 1.7rem); color: var(--mcci-navy);
}
.lente-cabeza .bajada { margin: 0; font-size: .88rem; color: var(--mcci-ink-soft); max-width: 78ch; }
.lente-cabeza .aviso {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mccipc-rosa); border: 1.5px solid var(--mccipc-rosa-claro);
  border-radius: 999px; padding: 4px 14px; background: var(--mcci-bg);
}

/* leyenda del tri-estado: el contrato de honestidad de esta pestaña */
.triestado {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin-top: 18px;
}
.triestado-item {
  background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: 8px; padding: 12px 14px; font-size: .8rem; line-height: 1.5;
}
.triestado-item .chip { margin-bottom: 6px; }
.triestado-item p { margin: 6px 0 0; color: var(--mcci-ink-soft); }

/* módulos */
.modulo { padding: 34px 0 30px; border-bottom: 1px solid var(--mcci-border); }
.modulo:last-of-type { border-bottom: 0; }
.modulo-cabeza { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.modulo-cabeza h2 {
  margin: 0; font-family: var(--mcci-font-sans); font-weight: 900;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.05rem; color: var(--mcci-red);
}
.modulo-corrida { font-size: .74rem; color: var(--mcci-ink-soft); font-variant-numeric: tabular-nums; }
.modulo-nota { font-size: .84rem; color: var(--mcci-ink-soft); max-width: 84ch; margin: 0 0 16px; }

/* fila de indicadores compactos */
.kpis { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--mcci-border); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.kpi { flex: 1 1 160px; padding: 12px 16px; border-right: 1px solid var(--mcci-border); min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi .v {
  margin: 0; font-family: var(--mccipc-font-titulo); font-size: 1.35rem; line-height: 1.1;
  color: var(--mcci-navy); font-variant-numeric: tabular-nums;
}
.kpi .v.alerta { color: var(--mcci-dato-mal); }
.kpi .k { margin: 3px 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mcci-ink-soft); }
.kpi .estado { margin-top: 7px; }
@media (max-width: 700px) { .kpi { flex-basis: 45%; border-bottom: 1px solid var(--mcci-border); } }

/* tablas densas de trabajo */
.tabla-trabajo { font-size: .82rem; }
.tabla-trabajo th { font-size: .74rem; padding: 8px 10px; }
.tabla-trabajo td { padding: 7px 10px; }
.mini-barra { display: inline-block; height: 9px; border-radius: 3px; background: var(--mcci-dato-mal); vertical-align: middle; margin-right: 8px; }
.mini-barra.baja { background: var(--mcci-dato-alerta); }
.rfc-mono { font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: .78rem; letter-spacing: .04em; }

/* concentración: barras con etiqueta directa */
.conc { display: grid; gap: 10px; margin-top: 6px; }
.conc-fila { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: center; }
.conc-nombre { font-size: .8rem; font-weight: 700; color: var(--mcci-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conc-nombre small { display: block; font-weight: 600; color: var(--mcci-ink-soft); }
/* La cifra va DESPUÉS de la barra, así que la pista no puede llegar al borde:
   la barra del primer lugar mide 100% y su cifra —la más grande, la que más
   importa— se cortaba contra el margen. Se le reserva el ancho del rótulo. */
.conc-pista { position: relative; height: 22px; margin-right: 16ch;
  background: var(--mcci-bg-soft); border-radius: 4px; }
/* El ancho vive en `--w`, declarado en la PISTA, y de ahí lo toman la barra y
   la cifra. Antes el ancho iba en el `style` de la barra y `--w` no se
   declaraba en ningún lado: `calc(var(--w) + 10px)` quedaba inválido, la
   cifra caía en `left:auto` y la barra se la comía. En «los 10 por monto» eso
   dejaba la primera cifra —la más grande— invisible. Lo vio Leo el
   12-SEP-2026. Una sola fuente para el ancho, que además no se desincroniza. */
.conc-valor { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  border-radius: 4px; background: var(--mcci-navy); }
.conc-valor.rosa { background: var(--mccipc-rosa); }
.conc-cifra { position: absolute; left: calc(var(--w, 0%) + 10px); top: 50%; transform: translateY(-50%); font-size: .76rem; font-weight: 800; color: var(--mcci-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .conc-fila { grid-template-columns: 1fr; gap: 4px; } }

/* panel verde de "no aparece" */
.panel-limpio {
  border: 1px solid color-mix(in srgb, var(--mcci-dato-bien) 45%, var(--mcci-border));
  background: color-mix(in srgb, var(--mcci-dato-bien) 6%, var(--mcci-bg));
  border-radius: 8px; padding: 14px 18px; font-size: .86rem;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.panel-limpio b { color: var(--mcci-dato-bien); }

/* cola de cruces pendientes */
.cola { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cola li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px dashed var(--mcci-border); border-radius: 8px; padding: 10px 14px;
  font-size: .84rem; flex-wrap: wrap;
}
.cola li b { color: var(--mcci-navy); }

/* ========== ajustes de integración (2026-08-04, instrucciones de Leo) ====== */
/* Cada marca en su color sobre el navy del pie: MCCI en el rojo del logo
   (aclarado un paso para leerse sobre navy), PC en su rosa. */
.pie-frase .marca-mcci { color: color-mix(in srgb, var(--mcci-red) 72%, #fff); font-weight: 400; }
.pie-frase .marca-pc   { color: var(--mccipc-rosa-claro); font-weight: 400; }
/* El kicker largo ("Tras la huella de Nuestro Dinero…") respira en móvil. */
.masthead .kicker { max-width: 60ch; line-height: 1.5; }
/* Sello del laboratorio junto al título (pedido de Leo): chip discreto en oro
   sobre navy — el canal de foco/selección, no compite con las categorías. */
.tag-lab {
  display: inline-block; vertical-align: middle; margin-left: 14px;
  font-family: var(--mccipc-font-cuerpo); font-size: .62rem; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--mcci-gold); border: 1.5px solid color-mix(in srgb, var(--mcci-gold) 55%, transparent);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.app-titulo { max-width: none; }

/* ========== balance rosa ↔ rojo MCCI (instrucción de Leo, 2026-08-04) ======
   Regla de juego: el ROSA es la voz editorial de la colaboración; el ROJO
   MCCI marca la ANOMALÍA — lo que amerita ceja levantada. Sobre navy, el rojo
   va aclarado un paso (mismo mix que las marcas del pie) para leerse. */
.brecha-hero h1 em { color: color-mix(in srgb, var(--mcci-red) 72%, #fff); }
.brecha-kpi .valor.rosa { color: color-mix(in srgb, var(--mcci-red) 72%, #fff); }
.cta-brecha .gigante { color: color-mix(in srgb, var(--mcci-red) 72%, #fff); }
.regalo h1 em { color: var(--mccipc-dato-ad); }
/* El hero del Panorama conserva el rosa (es la voz, no la anomalía). El botón
   de la banda 28.4% pasa a rojo para cerrar el par señal-acción. */
.cta-brecha .mccipc-descarga { background: var(--mccipc-dato-ad); }
.cta-brecha .mccipc-descarga:hover { background: color-mix(in srgb, var(--mccipc-dato-ad) 80%, #fff); color: #fff; }


/* ========== Reportes: la ficha del documento (2026-08-04) ================== */
/* El lockup y la barra de marcas son ENLACES ahora: sin subrayado, con foco. */
.lockup a, .mccipc-lockup a { display: inline-flex; border-radius: 6px; }
.pie-frase a { text-decoration: none; }
.pie-frase a:hover { text-decoration: underline; text-underline-offset: 4px; }

.reportes-grid { display: grid; gap: 18px; margin-top: 26px; max-width: 880px; }
.reporte {
  display: flex; gap: 26px; align-items: flex-start;
  background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 26px 28px;
}
.reporte--espera { border-style: dashed; border-width: 1.5px; }
.reporte-portada {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--mcci-bg-soft); border-radius: 10px; padding: 22px 26px 14px;
}
.reporte-tipo {
  font-size: .64rem; font-weight: 800; letter-spacing: .12em;
  color: var(--mcci-ink-soft);
}
.reporte-kicker {
  margin: 0 0 4px; font-family: var(--mcci-font-alt); font-size: .7rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mccipc-rosa);
}
.reporte-cuerpo h3 {
  margin: 0 0 8px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); line-height: 1.25;
  color: var(--mcci-navy);
}
.reporte-baja { margin: 0 0 14px; font-size: .9rem; max-width: 56ch; }
.reporte-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.reporte-fecha { font-size: .78rem; font-weight: 700; color: var(--mcci-ink-soft); }
.reporte-boton-espera { opacity: .45; cursor: not-allowed; pointer-events: none; }
.reporte-nota { margin: 10px 0 0; font-size: .8rem; color: var(--mcci-ink-soft); max-width: 58ch; }
@media (max-width: 640px) { .reporte { flex-direction: column; } }
/* La cita del informe. Tipografía monoespaciada como en las descargas de «La
   base»: se lee como algo para copiar, no como prosa. */
.reporte-cita { margin-top: 26px; max-width: 880px; padding: 18px 20px;
  border-left: 3px solid var(--mccipc-rosa); background: var(--mcci-bg-soft, #f6f7f9); }
.reporte-cita h3 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mcci-ink-soft); }
.mcci .reporte-cita p { margin: 0; font-size: .84rem; line-height: 1.6; }

/* ══════════ EMPRESAS + BANDERAS (2026-08-04, ronda beta) ═════════════════ */
/* — buscador hero — */
.emp-hero h1 { margin: 0 0 12px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.6rem, 4.2vw, 2.7rem); color: #fff; }
.emp-hero h1 em { font-style: normal; color: var(--mccipc-rosa-claro); }
.emp-hero .bajada { max-width: 64ch; margin-bottom: 26px; }
.emp-buscador { display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: 999px; padding: 15px 24px; max-width: 720px; color: var(--mcci-ink-soft);
  box-shadow: 0 10px 34px color-mix(in srgb, var(--mcci-navy-deep) 45%, transparent); }
.emp-buscador input { flex: 1; border: 0; outline: 0; font-family: var(--mccipc-font-cuerpo);
  font-size: 1.05rem; color: var(--mcci-ink); background: transparent; }
.emp-resultados { max-width: 720px; background: #fff; border-radius: 14px; margin-top: 8px;
  padding: 10px 0; box-shadow: 0 14px 40px color-mix(in srgb, var(--mcci-navy-deep) 45%, transparent); }
.emp-resultados .emp-r-titulo { margin: 8px 22px 4px; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mccipc-rosa); }
.emp-resultados a { display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 22px; text-decoration: none; font-size: .9rem; }
.emp-resultados a:hover { background: var(--mcci-bg-soft); }
.emp-resultados a span { color: var(--mcci-ink-soft); font-weight: 600; white-space: nowrap; }
.emp-aviso { margin-top: 14px; color: var(--mccipc-rosa-claro); font-weight: 600; }
.emp-universo { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 22px; }
.emp-sub { margin: 0 0 12px; font-family: var(--mcci-font-alt); font-size: .74rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mcci-ink-soft); }
@media (max-width: 860px) { .emp-universo { grid-template-columns: 1fr; } }

/* — el EXPEDIENTE (fólder) — */
.exp-cabecera { background: var(--mcci-bg-soft); padding: 34px 0 0;
  border-bottom: 1px solid var(--mcci-border); }
.exp-folder { max-width: 1180px; }
.exp-pestana { display: inline-block; background: var(--mccipc-rosa); color: #fff;
  font-family: var(--mccipc-font-cuerpo); font-weight: 800; font-size: .7rem;
  letter-spacing: .13em; padding: 9px 20px; border-radius: 10px 10px 0 0; }
.exp-cuerpo { background: #fff; border: 1px solid var(--mcci-border); border-bottom: 0;
  border-radius: 0 12px 0 0; padding: 26px 30px 22px; display: flex; gap: 26px;
  justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.exp-titulos h1 { margin: 0 0 8px; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.12; color: var(--mcci-navy);
  max-width: 30ch; text-wrap: balance; }
.exp-titulos h1.h-contrato { font-size: clamp(1.05rem, 2.4vw, 1.5rem); max-width: 48ch; }
.exp-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 12px;
  font-size: .88rem; color: var(--mcci-ink-soft); font-weight: 600; }
.exp-rfc { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--mcci-navy);
  letter-spacing: .04em; }
/* Cuando la fuente no publica RFC se dice el motivo, y se dice en voz baja: es
   un estado declarado, no una alerta ni un hueco. Sin negrita ni versalitas para
   que no compita con un RFC de verdad al recorrer la pagina. */
.exp-rfc-sin { font-weight: 600; letter-spacing: 0; font-style: italic;
  color: var(--mcci-ink-soft); }
/* La nota de unión por RFC. Va en voz baja y con regla al lado: es una
   aclaración de procedencia, no una alerta -- que dos grafías sean la misma
   empresa no dice nada malo de ella. */
.exp-variantes { margin: 2px 0 12px; padding-left: 10px; max-width: 70ch;
  border-left: 3px solid color-mix(in srgb, var(--mcci-navy) 22%, transparent);
  font-size: .84rem; line-height: 1.45; color: var(--mcci-ink-soft); }
.exp-variantes b { font-weight: 700; color: var(--mcci-navy); }
.exp-acciones { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.exp-banderitas { display: flex; gap: 8px; flex-wrap: wrap; }
.banderita { display: inline-block; font-size: .72rem; font-weight: 800;
  background: color-mix(in srgb, var(--mccipc-dato-ad) 10%, #fff);
  color: var(--mccipc-dato-ad); border: 1.5px solid var(--mccipc-dato-ad);
  border-radius: 999px; padding: 4px 12px; text-decoration: none; white-space: nowrap; }
.banderita:hover { background: var(--mccipc-dato-ad); color: #fff; }
.banderita.alerta { background: var(--mccipc-dato-ad); color: #fff; }
.banderita.mini { padding: 2px 9px; }

/* — historia en tarjetas — */
.exp-historia { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px; }
.hito { background: #fff; border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 16px 18px; }
.hito-k { margin: 0 0 6px; font-size: .68rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mccipc-rosa); }
.hito-v { margin: 0; font-family: var(--mccipc-font-titulo); font-size: 1.25rem;
  line-height: 1.15; color: var(--mcci-navy); font-variant-numeric: tabular-nums; }
.hito-v.hito-chico { font-size: .95rem; }
.hito-d { margin: 7px 0 0; font-size: .78rem; color: var(--mcci-ink-soft); line-height: 1.45; }

/* — autodiagnóstico — */
.exp-diag { display: grid; gap: 10px; }
.diag-item { display: flex; gap: 16px; align-items: flex-start; background: #fff;
  border: 1px solid var(--mcci-border); border-radius: 10px; padding: 14px 18px; }
.diag-item .chip { flex: none; margin-top: 2px; }
.diag-item b { color: var(--mcci-navy); }
.diag-item p { margin: 3px 0 0; font-size: .86rem; color: var(--mcci-ink-soft); }

/* — panel de bandera (pestaña Banderas Rojas) — */
.cita-ocp { margin-top: 22px; font-size: .8rem; color: rgba(255,255,255,.75) !important;
  max-width: 86ch; }
.cita-ocp a { color: var(--mcci-gold); }
.panel-bandera { background: #fff; border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 24px 26px; margin-bottom: 22px;
  scroll-margin-top: 90px; }
.panel-bandera.resaltado { border-color: var(--mcci-gold); border-width: 2px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--mcci-gold) 30%, transparent); }
.pb-cabeza { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.pb-cabeza h2 { margin: 0; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: 1.25rem; color: var(--mcci-navy); }
.pb-en { margin: 2px 0 0; font-size: .78rem; font-style: italic; color: var(--mcci-ink-soft); }
.pb-codigo { font-weight: 800; font-size: .85rem; background: var(--mccipc-dato-ad);
  color: #fff; border-radius: 8px; padding: 5px 12px; }
.pb-codigo.adaptacion { background: var(--mccipc-dato-azul); }
.pb-codigo.gris { background: var(--mcci-bg-soft); color: var(--mcci-ink-soft); }
.pb-total { margin-left: auto; font-weight: 800; color: var(--mccipc-dato-ad);
  font-variant-numeric: tabular-nums; }
.pb-metodo { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 20px;
  margin: 16px 0 18px; font-size: .84rem; }
.pb-metodo b { display: block; font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mccipc-rosa); margin-bottom: 4px; }
.pb-metodo p { margin: 0; color: var(--mcci-ink); }
.fila-res td { background: color-mix(in srgb, var(--mcci-gold) 14%, #fff) !important; }
@media (max-width: 860px) { .pb-metodo { grid-template-columns: 1fr; gap: 10px; } }

/* — ficha de contrato: tabla campo-por-campo + impresión con arte — */
.tabla-ficha td.regla { white-space: nowrap; width: 220px; }
.tabla-ficha td.quien { font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mcci-ink-soft); width: 90px; }
.tabla-ficha .monto-grande { font-family: var(--mccipc-font-titulo); font-size: 1.15rem;
  color: var(--mcci-navy); }
.docs-lista { margin: 8px 0 0; padding-left: 20px; font-size: .86rem; }
.docs-lista li { margin: 4px 0; }
.solo-impresion { display: none; }

@media print {
  .topbar, .masthead, .filtros, .pie, .exp-acciones, .pestanas { display: none !important; }
  .solo-impresion { display: block; }
  .exp-cabecera { background: #fff; padding-top: 0; }
  .print-cabecera { margin-bottom: 14px; }
  .greca-print { height: 8px; margin-bottom: 14px;
    background: repeating-linear-gradient(90deg, var(--mccipc-rosa) 0 36px,
      var(--mcci-red) 36px 54px, var(--mccipc-dato-ccs) 54px 72px, var(--mcci-navy) 72px 90px); }
  .print-marcas { display: flex; gap: 18px; align-items: center;
    border-bottom: 1.5px solid var(--mcci-border); padding-bottom: 12px; }
  .print-marcas small { color: var(--mcci-ink-soft); }
  .banderita { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .panel-bandera, .diag-item, .hito { break-inside: avoid; }
}

/* Tarjeta para redes embebida en el expediente: lienzo 1200×675 escalado. */
.tarjeta-marco { width: 100%; max-width: 860px; aspect-ratio: 1240 / 715;
  overflow: hidden; border-radius: 12px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--mcci-navy) 22%, transparent); }
.tarjeta-marco iframe { width: 1240px; height: 715px; border: 0;
  transform: scale(calc(min(860px, 100%) / 1240px)); transform-origin: 0 0;
  transform: scale(0.6935); }
@media (max-width: 900px) { .tarjeta-marco iframe { transform: scale(0.55); } }
/* Desplegables de los paneles de banderas */
.pb-mas { margin-top: 12px; }
.pb-mas summary { cursor: pointer; font-weight: 800; color: var(--mccipc-dato-azul);
  font-size: .86rem; padding: 6px 0; }
.pb-mas summary:hover { color: var(--mcci-navy); }

/* Casos destacados de Banderas Rojas — el hallazgo, arriba y con su relato. */
.caso-destacado { background: #fff; border: 2px solid var(--mccipc-dato-ad);
  border-radius: var(--mccipc-radius); padding: 26px 28px; margin-bottom: 24px; }
.cd-cabeza { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; }
.cd-cabeza h3 { margin: 0; font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--mcci-navy); }
.cd-relato { max-width: 92ch; font-size: .93rem; }
.cd-relato b { color: var(--mccipc-dato-ad); }

/* ══════════ DIMENSIÓN INSTITUCIONAL (2026-08-05) ══════════════════════════
   Tres piezas: el MEMBRETE (ficha de institución — filete doble navy, hermano
   del fólder rosa de proveedor), el ARCHIVERO (explorador Quién contrata:
   cajones = sujetos, gavetas = áreas) y la TABLA VIVA (orden, filtro y fila
   expandible sobre .tabla-base). Regla de color: navy = institución, rosa =
   voz editorial, rojo = AD/anomalía, oro SOLO foco/selección. Ni un hex. */

/* — migas: el ancla del drill — */
.migas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; font-size: .76rem; font-weight: 700;
  color: var(--mcci-ink-soft); }
.migas a { color: var(--mccipc-dato-azul); text-decoration: none; font-weight: 700; }
.migas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.migas [aria-current="page"] { color: var(--mcci-navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44ch; }
.migas-sep::before { content: "›"; color: var(--mcci-gray); font-weight: 400; }

/* — el membrete — */
.memb-cabecera { background: var(--mcci-bg-soft);
  border-bottom: 1px solid var(--mcci-border); padding: 30px 0 0; }
.membrete { background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-bottom: 0; border-radius: 12px 12px 0 0; overflow: hidden;
  padding: 0 30px 24px; }
/* filete doble de papelería oficial: regla gruesa + aire + regla fina */
.memb-filete { margin: 0 -30px 22px; height: 9px;
  border-top: 4px solid var(--mcci-navy);
  border-bottom: 1.5px solid var(--mcci-navy); }
.memb-tipo { margin: 0 0 10px; font-family: var(--mcci-font-alt);
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mcci-navy); }
.memb-cuerpo { display: flex; gap: 26px; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; }
.memb-nombre { margin: 0 0 8px; font-family: var(--mccipc-font-titulo);
  font-weight: 400; font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.12;
  color: var(--mcci-navy); max-width: 34ch; text-wrap: balance; }
.memb-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 0;
  font-size: .88rem; color: var(--mcci-ink-soft); font-weight: 600; }
.memb-padre a { color: var(--mccipc-dato-azul); text-decoration: none; }
.memb-padre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.memb-acciones { display: flex; flex-direction: column; gap: 10px;
  align-items: stretch; }

/* — barra de mecanismos (regla CVD: cifra impresa, orden fijo AD→CCS→LP) — */
.mec-barra { display: flex; gap: 3px; height: 58px; margin-top: 18px; }
.mec-seg { min-width: 0; border-radius: 6px; padding: 8px 12px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  overflow: hidden; }
.mec-seg.ad  { background: var(--mccipc-dato-ad); color: #fff; }
.mec-seg.ccs { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
.mec-seg.lp  { background: var(--mccipc-dato-lp); color: #fff; }
.mec-nombre { font-size: .66rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.mec-cifra { font-family: var(--mccipc-font-titulo); font-size: 1.05rem;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
/* segmento angosto (<12% del ancho): se vacía y la etiqueta baja a la guía */
.mec-seg.angosto .mec-nombre, .mec-seg.angosto .mec-cifra { display: none; }
.mec-guias { display: flex; gap: 3px; margin-top: 6px; }
.mec-guias .guia { font-size: .7rem; font-weight: 700;
  color: var(--mcci-ink-soft); white-space: nowrap; }

/* — el archivero: cajones y gavetas — */
.archivero { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 26px; }
.cajon { background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); overflow: hidden;
  display: flex; flex-direction: column; }
.cajon-frente { display: block; text-decoration: none;
  background: linear-gradient(160deg, var(--mcci-navy) 0%,
    var(--mcci-navy-deep) 100%);
  color: #fff; padding: 14px 22px 18px; position: relative;
  transition: filter .15s ease; }
.cajon-frente:hover { filter: brightness(1.12); color: #fff; }
.cajon-frente:hover .cajon-nombre { color: var(--mccipc-rosa-claro); }
.cajon-asa { display: block; width: 44px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.35); margin: 0 auto 12px; }
.cajon-nombre { margin: 0 0 6px; font-family: var(--mccipc-font-titulo);
  font-weight: 400; font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.18;
  color: #fff; transition: color .15s ease; }
.cajon-cifra { margin: 0 0 12px; font-family: var(--mccipc-font-titulo);
  font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums; }
.cajon-cifra small { display: block; margin-top: 3px;
  font-family: var(--mccipc-font-cuerpo); font-size: .72rem; font-weight: 700;
  color: var(--mccipc-suave-sobre-navy); letter-spacing: .03em; }
.cajon-mec { display: flex; gap: 2px; height: 20px; border-radius: 4px;
  overflow: hidden; }
.cajon-mec span { min-width: 0; display: grid; place-items: center;
  font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums;
  overflow: hidden; white-space: nowrap; }
.cajon-mec .ad  { background: var(--mccipc-dato-ad); color: #fff; }
.cajon-mec .ccs { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
.cajon-mec .lp  { background: var(--mccipc-dato-lp); color: #fff; }

.gavetas { display: flex; flex-direction: column;
  border: 1px solid var(--mcci-border); border-radius: var(--mccipc-radius);
  overflow: hidden; background: var(--mcci-bg); }
.gavetas--cajon { border: 0; border-radius: 0; flex: 1; }
.gaveta { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px; align-items: baseline; padding: 12px 20px 13px;
  text-decoration: none; border-bottom: 1px solid var(--mcci-border);
  position: relative;
  transition: background .12s ease, padding-left .12s ease; }
.gaveta:last-of-type { border-bottom: 0; }
.gaveta:hover { background: var(--mcci-bg-soft); padding-left: 26px; }
.gaveta::before { /* tirador de la gaveta: aparece al acercarse */
  content: "›"; position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--mccipc-dato-azul);
  font-weight: 800; opacity: 0; transition: opacity .12s ease; }
.gaveta:hover::before { opacity: 1; }
.gaveta-nombre { font-size: .88rem; font-weight: 700; color: var(--mcci-navy);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta:hover .gaveta-nombre { color: var(--mccipc-dato-azul); }
.gaveta-datos { font-size: .78rem; color: var(--mcci-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.gaveta-datos b { color: var(--mcci-navy); font-weight: 800; }
.gaveta-pista { grid-column: 1 / -1; height: 6px; border-radius: 3px;
  background: var(--mcci-bg-soft); overflow: hidden; }
.gaveta:hover .gaveta-pista { background:
  color-mix(in srgb, var(--mcci-navy) 10%, var(--mcci-bg)); }
.gaveta-valor { display: block; height: 100%; min-width: 2px;
  border-radius: 3px; background: var(--mcci-navy); }
.gaveta-mas { border: 0; background: var(--mcci-bg-soft); cursor: pointer;
  font-family: var(--mccipc-font-cuerpo); font-weight: 800; font-size: .78rem;
  color: var(--mccipc-dato-azul); padding: 11px 20px; text-align: left;
  transition: background .12s ease; }
.gaveta-mas:hover { background:
  color-mix(in srgb, var(--mccipc-dato-azul) 8%, var(--mcci-bg)); }
.gaveta[hidden] { display: none; }

/* lista sobria de áreas solicitantes dentro del desplegable */
.solicitantes { margin: 10px 0 0; padding: 0 0 0 20px; font-size: .84rem;
  columns: 2; column-gap: 34px; }
.solicitantes li { margin: 3px 0; break-inside: avoid;
  color: var(--mcci-ink); }
@media (max-width: 700px) { .solicitantes { columns: 1; } }

/* — la tabla viva — */
.tv-filtrar { border: 1.5px solid var(--mcci-border); background: var(--mcci-bg);
  cursor: pointer; font-family: var(--mccipc-font-cuerpo); font-weight: 700;
  font-size: .78rem; color: var(--mcci-navy); border-radius: 999px;
  padding: 6px 16px; transition: border-color .15s ease, background .15s ease; }
.tv-filtrar:hover { border-color: var(--mcci-navy); }
.tv-filtrar[aria-expanded="true"] { background: var(--mcci-navy); color: #fff;
  border-color: var(--mcci-navy); }

.tabla-viva th { padding: 0; }
.tabla-viva th.num .tv-orden { justify-content: flex-end; width: 100%; }
.tv-orden { display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer; color: inherit;
  font: inherit; font-weight: 700; padding: 10px 12px; white-space: nowrap; }
.tabla-viva th:not(:has(.tv-orden)) { padding: 10px 12px; }
.tabla-viva th[aria-sort]:hover { background: var(--mcci-navy-deep); }
.tabla-viva th[aria-sort="ascending"] .flecha,
.tabla-viva th[aria-sort="descending"] .flecha { opacity: 1;
  color: var(--mcci-gold); }

.tv-filtros td { padding: 6px 8px; background: var(--mcci-bg-soft);
  border-bottom: 2px solid var(--mcci-navy); }
.tv-filtro { width: 100%; min-width: 70px; border: 1.5px solid var(--mcci-border);
  border-radius: 8px; padding: 6px 10px; font-family: var(--mccipc-font-cuerpo);
  font-size: .78rem; color: var(--mcci-ink); background: var(--mcci-bg); }
.tv-filtro:focus { outline: 0; border-color: var(--mccipc-dato-azul); }
.tv-filtro.num { text-align: right; font-variant-numeric: tabular-nums; }

/* fila expandible */
.tabla-viva tr.fila { cursor: pointer; }
.tabla-viva tr.fila:hover { background: var(--mcci-bg-soft); }
.tabla-viva tr.fila[data-abierta="1"] { background:
  color-mix(in srgb, var(--mcci-navy) 6%, var(--mcci-bg)); }
.tabla-viva tr.fila[data-abierta="1"] td { border-bottom-color: transparent; }
.tv-abrir-celda { width: 38px; padding-right: 0 !important; }
.tv-abrir { display: grid; place-items: center; width: 26px; height: 26px;
  border: 1.5px solid var(--mcci-border); border-radius: 999px;
  background: var(--mcci-bg); color: var(--mcci-navy); cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.tv-abrir:hover { border-color: var(--mcci-navy); }
.tv-chevron { transition: transform .2s ease; }
.tv-abrir[aria-expanded="true"] { background: var(--mcci-navy);
  border-color: var(--mcci-navy); color: #fff; }
.tv-abrir[aria-expanded="true"] .tv-chevron { transform: rotate(90deg); }

.fila-detalle > td { padding: 0 !important; border-bottom: 0; }
.det-reja { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .24s ease; }
tr.fila[data-abierta="1"] + .fila-detalle .det-reja { grid-template-rows: 1fr; }
tr.fila[data-abierta="1"] + .fila-detalle > td { border-bottom:
  1px solid var(--mcci-border); }
.det-int { overflow: hidden; min-height: 0; }
.det-panel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px;
  padding: 20px 24px 22px; background: var(--mcci-bg-soft);
  border-left: 4px solid var(--mcci-navy);
  /* el panel no se pierde en el scroll horizontal de la tabla: */
  position: sticky; left: 0; max-width: min(100%, calc(100vw - 44px));
  box-sizing: border-box; }
.det-titulo { margin: 0 0 12px; font-size: .92rem; font-weight: 800;
  color: var(--mcci-navy); }
.det-titulo a { color: var(--mccipc-dato-azul); font-weight: 800;
  text-decoration: none; }
.det-titulo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.det-campos { margin: 0; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 22px; }
.det-campos > div { min-width: 0; }
.det-campos dt { font-size: .64rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mcci-ink-soft); margin: 0 0 2px; }
.det-campos dd { margin: 0; font-size: .85rem; color: var(--mcci-ink);
  line-height: 1.45; }
.det-campos > div:first-child { grid-column: 1 / -1; } /* descripción a lo ancho */
.det-monto { font-family: var(--mccipc-font-titulo); font-size: 1.05rem;
  color: var(--mcci-navy); font-variant-numeric: tabular-nums; }

.mini-emp { background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 7px; align-self: start; }
.mini-emp-k { margin: 0; font-size: .64rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mccipc-rosa); }
.mini-emp-nombre { margin: 0; font-family: var(--mccipc-font-titulo);
  font-weight: 400; font-size: 1rem; line-height: 1.2; }
.mini-emp-nombre a { color: var(--mcci-navy); text-decoration: none;
  font-weight: 400; }
.mini-emp-nombre a:hover { color: var(--mccipc-dato-azul); }
.mini-emp-rfc { margin: 0; font-size: .76rem; color: var(--mcci-ink-soft); }
.mini-emp-datos { margin: 0; font-size: .8rem; color: var(--mcci-ink-soft);
  font-variant-numeric: tabular-nums; }
.mini-emp-datos b { color: var(--mcci-navy); }
.mini-emp-nota { margin: 2px 0 0; font-size: .72rem; font-style: italic;
  color: var(--mcci-ink-soft); }
.mini-emp-cta { margin-top: 6px; justify-content: center; font-size: .82rem;
  padding: 9px 18px; }

.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* — responsivo de la dimensión institucional — */
@media (max-width: 860px) {
  .archivero { grid-template-columns: 1fr; }
  .det-panel { grid-template-columns: 1fr; gap: 16px; }
  .det-campos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .memb-cabecera { padding-top: 20px; }
  .membrete { padding: 0 18px 18px; }
  .memb-filete { margin: 0 -18px 16px; }
  .memb-cuerpo { flex-direction: column; gap: 14px; }
  .memb-acciones { flex-direction: row; flex-wrap: wrap; }
  .memb-acciones > * { flex: 1 1 auto; text-align: center;
    justify-content: center; }
  .mec-barra { height: 66px; }
  .gaveta { padding: 11px 16px 12px; }
  .gaveta:hover { padding-left: 16px; } /* sin corrimiento en táctil */
  .gaveta::before { display: none; }
  .det-campos { grid-template-columns: 1fr; }
  .det-panel { padding: 16px 16px 18px; }
  .migas { font-size: .72rem; }
  .migas [aria-current="page"] { max-width: 100%; }
}

/* — impresión de la ficha institucional — */
@media print {
  .memb-cabecera { background: #fff; padding-top: 0; }
  .memb-acciones, .migas, .tv-filtrar, .tv-abrir-celda, .tv-filtros,
  .gaveta-mas { display: none !important; }
  .membrete, .cajon, .mini-emp { break-inside: avoid; }
  .mec-seg, .cajon-mec span, .gaveta-valor {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════ PIEZAS DE LA MISMA RONDA (05-AGO) ══════════════════════════════
   comparador «¿Cuánto es este dinero?», ventana a La Cuenta Larga, cruce con
   el monitor, notas de pseudo-proveedores y tarjetas-dato clickeables. */

/* — comparador: tarjetas horizontales con gráfica de proporción — */
.comp-lanzador { margin-top: 16px; }
.comp-chip { border: 1.5px solid rgba(255,255,255,.4); background: transparent;
  color: #fff; cursor: pointer; font-family: var(--mccipc-font-cuerpo);
  font-weight: 800; font-size: .85rem; border-radius: 999px; padding: 9px 20px;
  transition: background .15s ease, border-color .15s ease; }
.comp-chip:hover, .comp-chip[aria-expanded="true"] {
  background: rgba(255,255,255,.12); border-color: #fff; }
.comp-panel[hidden] { display: none; }
.comp-panel--tiras { margin-top: 14px; background: #fff;
  border-radius: var(--mccipc-radius); padding: 16px 0 12px;
  max-width: 880px; box-shadow: 0 14px 40px
  color-mix(in srgb, var(--mcci-navy) 25%, transparent); }
.comp-cabeza { display: flex; align-items: flex-start; gap: 12px;
  padding: 0 20px 10px; }
.comp-panel--tiras .comp-titulo { margin: 0; flex: 1; font-size: .92rem; font-weight: 800;
  color: var(--mcci-navy); line-height: 1.35; }
.comp-cerrar { border: 0; background: transparent; cursor: pointer;
  font-size: 1.3rem; line-height: 1; color: var(--mcci-ink-soft); }
/* la tira: scroll horizontal con snap — se navega deslizando */
.comp-tiras { display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
.comp-tarjeta { flex: 0 0 300px; scroll-snap-align: start;
  border: 1px solid var(--mcci-border); border-radius: 12px;
  padding: 14px 16px; background: var(--mcci-bg);
  display: flex; flex-direction: column; }
.comp-panel--tiras .comp-veces { margin: 0; font-family: var(--mccipc-font-titulo);
  font-weight: 400; font-size: 1.7rem; color: var(--mccipc-rosa);
  line-height: 1; }
.comp-panel--tiras .comp-veces small { font-size: .8rem; font-family: var(--mccipc-font-cuerpo);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mcci-ink-soft); }
.comp-panel--tiras .comp-nombre { margin: 6px 0 12px; font-size: .85rem; font-weight: 700;
  color: var(--mcci-ink); line-height: 1.4; min-height: 2.4em; }
.comp-panel--tiras .comp-nombre small { display: block; font-weight: 600;
  color: var(--mcci-ink-soft); font-size: .72rem; }
/* la grafiquita: Jalisco arriba, el concepto abajo, misma escala */
.comp-grafica { display: grid; gap: 7px; margin-bottom: 10px; }
.comp-fila { display: grid; gap: 3px; }
.comp-panel--tiras .comp-etq { font-size: .66rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mcci-ink-soft); }
.comp-pista { position: relative; height: 20px; border-radius: 5px;
  background: color-mix(in srgb, var(--mcci-navy) 7%, transparent);
  overflow: hidden; }
.comp-valor { height: 100%; border-radius: 5px;
  background: var(--mccipc-dato-ccs); min-width: 3px; }
.comp-valor--jal { background: var(--mcci-navy); }
.comp-panel--tiras .comp-cifra { position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); font-size: .68rem; font-weight: 800;
  color: var(--mcci-ink); text-shadow: 0 0 4px #fff, 0 0 4px #fff; }
.comp-panel--tiras .comp-fuente { margin: auto 0 0; padding-top: 8px; font-size: .66rem;
  line-height: 1.4; color: var(--mcci-ink-soft);
  border-top: 1px solid var(--mcci-border); }
.comp-panel--tiras .comp-pie { margin: 10px 20px 4px; font-size: .72rem;
  color: var(--mcci-ink-soft); }
@media (max-width: 640px) { .comp-tarjeta { flex-basis: 260px; } }

/* — el caso del monitor en el expediente — */
.cruce-casos { display: grid; gap: 14px; }
.cruce-caso { background: var(--mcci-bg); border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 16px 20px; }
.cruce-caso--mcci { border-left: 5px solid var(--mcci-red); }
.cruce-marca { margin: 0 0 4px; font-size: .66rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mcci-red); }
.cruce-titulo { margin: 0 0 6px; font-family: var(--mccipc-font-titulo);
  font-weight: 400; font-size: 1.02rem; line-height: 1.25;
  color: var(--mcci-navy); }
.cruce-meta { margin: 0 0 12px; font-size: .78rem; font-weight: 600;
  color: var(--mcci-ink-soft); }
.cruce-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-investigacion td { background:
  color-mix(in srgb, var(--mcci-red) 6%, var(--mcci-bg)) !important;
  font-size: .82rem; line-height: 1.5; color: var(--mcci-ink);
  border-left: 4px solid var(--mcci-red); }

/* — notas y detalles menores — */
.emp-pseudo-nota { margin: 18px 0 0; font-size: .78rem;
  color: var(--mcci-ink-soft); }
.mini-emp-mcci { margin: 2px 0 0; font-size: .74rem; font-weight: 800;
  color: var(--mcci-red); }
.paginacion { display: flex; gap: 16px; align-items: center;
  justify-content: center; margin-top: 22px; font-weight: 700;
  font-size: .85rem; }


/* ══════════ LA EVIDENCIA DE LOS 10 DATOS (05-AGO, 2a ronda) ══════════════
   Ventana flotante por tarjeta: el hallazgo demostrado en vivo, con salida a
   los contratos/empresas filtrados. Server-rendered; el JS solo elige panel. */

/* — el botón único de la tarjeta — */
.dato-evidencia { display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; border: 1.5px solid var(--mccipc-rosa);
  background: transparent; color: var(--mccipc-rosa); cursor: pointer;
  font-family: var(--mccipc-font-cuerpo); font-weight: 800; font-size: .8rem;
  border-radius: 999px; padding: 8px 16px;
  transition: background .15s ease, color .15s ease, transform .15s ease; }
.dato-evidencia:hover { background: var(--mccipc-rosa); color: #fff;
  transform: translateY(-1px); }
.dato--navy .dato-evidencia { border-color: rgba(255,255,255,.55);
  color: #fff; }
.dato--navy .dato-evidencia:hover { background: #fff;
  color: var(--mcci-navy); border-color: #fff; }

/* — la ventana — */
#ev-overlay[hidden] { display: none; }
#ev-overlay { position: fixed; inset: 0; z-index: 320;
  background: color-mix(in srgb, var(--mcci-navy) 62%, transparent);
  display: grid; place-items: center; padding: 26px; }
.ev-caja { width: min(760px, 100%); max-height: 88vh; background: #fff;
  border-radius: 14px; overflow: hidden; display: flex;
  flex-direction: column;
  box-shadow: 0 26px 70px color-mix(in srgb, var(--mcci-navy) 50%, transparent); }
.ev-cabeza { display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; background: var(--mcci-navy); color: #fff;
  border-bottom: 4px solid var(--mccipc-rosa); }
.ev-num { font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: 1.5rem; color: var(--mccipc-rosa-claro); line-height: 1; }
.ev-titulo { margin: 0; flex: 1; font-size: .95rem; font-weight: 800;
  letter-spacing: .02em; line-height: 1.3; }
.ev-cerrar { border: 0; background: transparent; color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 2px 6px;
  opacity: .85; }
.ev-cerrar:hover { opacity: 1; }
.ev-cuerpo { overflow-y: auto; padding: 22px 24px 20px; }
.ev-panel[hidden] { display: none; }
.ev-lede { margin: 0 0 16px; font-size: .98rem; line-height: 1.55;
  color: var(--mcci-ink); }
.ev-lede b { color: var(--mcci-navy); }
.ev-nota { margin: 12px 0 0; font-size: .78rem;
  color: var(--mcci-ink-soft); }
.ev-concilia { margin: 16px 0 0; padding-top: 12px;
  border-top: 1px solid var(--mcci-border); font-size: .74rem;
  color: var(--mcci-ink-soft); }
.ev-concilia a { color: var(--mccipc-verde-ok, #1b7a4e); font-weight: 700;
  text-decoration: none; }
.ev-concilia a:hover { text-decoration: underline; }
.ev-cta { margin-top: 14px; }

/* — tablas y barras dentro de la ventana — */
.ev-tabla { font-size: .82rem; }
.ev-tabla .ev-eje { font-weight: 800; color: var(--mcci-navy);
  background: color-mix(in srgb, var(--mccipc-rosa) 9%, transparent); }
.ev-mec { margin-bottom: 14px; }

/* — la infografía de plataformas (dato 02) — */
.ev-plats { display: grid; gap: 12px; }
.ev-plat { border: 1px solid var(--mcci-border);
  border-radius: var(--mccipc-radius); padding: 14px 16px;
  background: var(--mcci-bg); }
.ev-plat-quien { margin: 8px 0 2px; font-size: .74rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mcci-ink-soft); }
.ev-plat-que { margin: 0 0 10px; font-size: .85rem; line-height: 1.5;
  color: var(--mcci-ink); }
.ev-plat-n { margin: 8px 0 0; font-size: .78rem;
  color: var(--mcci-ink-soft); }
.ev-plat-n b { color: var(--mcci-navy); }

/* — el mosaico de coincidencia (datos 05 y 06) — */
.ev-plataformas-vs { display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap; }
.ev-vs { font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mcci-ink-soft); }
.ev-mos { display: flex; height: 92px; border-radius: 10px;
  overflow: hidden; gap: 2px; }
.ev-mos-seg { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: #fff; text-decoration: none;
  min-width: 44px; transition: filter .15s ease; }
.ev-mos-seg:hover { filter: brightness(1.15); color: #fff; }
.ev-mos-seg b { font-family: var(--mccipc-font-titulo); font-weight: 400;
  font-size: 1.15rem; }
.ev-mos-seg small { font-size: .62rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; opacity: .9;
  text-align: center; }
/* franjas angostas (<6%): la cifra se compacta para no desbordar — el dato
   completo vive en la leyenda de abajo, que es la lectura CVD de todos modos */
.ev-mos-seg.angosta b { font-size: .78rem; }
.ev-mos-seg.angosta small { display: none; }
.ev-mos--ambas { background: var(--mcci-navy); }
.ev-mos--estatal { background: var(--mccipc-dato-ad); }
.ev-mos--pnt { background: var(--mccipc-dato-ccs); }
.ev-mos--pnt b, .ev-mos--pnt small { color: var(--mcci-navy); }
.ev-mos-leyenda { list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px; font-size: .8rem; color: var(--mcci-ink); }
.ev-mos-leyenda i { display: inline-block; width: 11px; height: 11px;
  border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.ev-mos-leyenda .ev-mos--ambas i { background: var(--mcci-navy); }
.ev-mos-leyenda .ev-mos--estatal i { background: var(--mccipc-dato-ad); }
.ev-mos-leyenda .ev-mos--pnt i { background: var(--mccipc-dato-ccs); }
.ev-mos-leyenda li { background: none; }

/* — rankings y concentración (datos 09 y 10) — */
.ev-dos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ev-rank .conc-nombre small { display: block; }
/* en las columnas angostas del modal la cifra dentro de la barra se recorta
   — y es redundante: el renglón bajo el nombre ya trae contratos y monto */
.ev-dos-cols .conc-cifra { display: none; }
.ev-conc-barra { margin-top: 16px; }
.ev-conc-barra .ev-conc-lleno { background: var(--mccipc-dato-ad);
  color: #fff; border-radius: 6px; padding: 6px 10px; min-width: 56px;
  font-weight: 800; font-size: .85rem; }
.ev-conc-barra small { display: block; margin-top: 6px; font-size: .74rem;
  color: var(--mcci-ink-soft); }

@media (max-width: 640px) {
  #ev-overlay { padding: 0; }
  .ev-caja { max-height: 100vh; height: 100vh; border-radius: 0; }
  .ev-dos-cols { grid-template-columns: 1fr; }
}


/* ══════════ CÓMO SE CONTRATA — interactiva + salidas del Sankey (05-AGO) ══ */
.ga-controles { display: flex; flex-wrap: wrap; gap: 14px 22px;
  align-items: center; margin-bottom: 16px; }
.ga-eje { display: inline-flex; border: 1.5px solid var(--mcci-navy);
  border-radius: 999px; overflow: hidden; }
.ga-eje-btn { border: 0; background: transparent; color: var(--mcci-navy);
  font-family: var(--mccipc-font-cuerpo); font-weight: 800; font-size: .78rem;
  padding: 7px 16px; cursor: pointer; }
.ga-eje-btn.activo { background: var(--mcci-navy); color: #fff; }
.ga-series { display: flex; flex-wrap: wrap; gap: 8px; }
.ga-chip { display: inline-flex; align-items: center; gap: 6px; border: 0;
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font-family: var(--mccipc-font-cuerpo); font-weight: 800; font-size: .74rem;
  color: #fff; text-decoration: none;
  transition: opacity .15s ease, transform .15s ease; }
.ga-chip:hover { transform: translateY(-1px); color: #fff; }
.ga-chip.ad { background: var(--mccipc-dato-ad); }
.ga-chip.ccs { background: var(--mccipc-dato-ccs); color: var(--mcci-navy); }
.ga-chip.ccs:hover { color: var(--mcci-navy); }
.ga-chip.lp { background: var(--mcci-navy); }
.ga-chip.otro { background: var(--mcci-ink-soft); }
.ga-chip.apagado { opacity: .3; }
.ga-rango { display: flex; align-items: center; gap: 10px; }
.ga-rango-etq { font-weight: 800; font-size: .82rem; color: var(--mcci-navy);
  min-width: 86px; }
.ga-rango input[type="range"] { width: 120px; accent-color: var(--mccipc-rosa); }
.ga-lienzos { display: grid; grid-template-columns: 1fr 300px; gap: 22px;
  align-items: start; }
.ga-area svg, .ga-pastel svg { width: 100%; height: auto; display: block; }
.ga-pie-pct { font: 800 13px var(--mccipc-font-cuerpo); fill: #fff; }
.ga-pie-centro { font-family: var(--mccipc-font-titulo); font-size: 22px;
  fill: var(--mcci-navy); }
.ga-pie-centro-sub { font: 700 12px var(--mccipc-font-cuerpo);
  fill: var(--mcci-ink-soft); }
.ga-pie-leyenda { display: grid; gap: 6px; margin-top: 10px; }
.ga-ley { font-size: .76rem; color: var(--mcci-ink); }
.ga-ley b { color: var(--mcci-navy); }
.ga-ley i { display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 6px; }
.ga-ley.ad i { background: var(--mccipc-dato-ad); }
.ga-ley.ccs i { background: var(--mccipc-dato-ccs); }
.ga-ley.lp i { background: var(--mcci-navy); }
.ga-ley.otro i { background: var(--mcci-ink-soft); }
.sankey-salidas { margin-top: 16px; }
.sankey-salidas-titulo { margin: 0 0 8px; font-size: .82rem; font-weight: 800;
  color: var(--mcci-navy); }
.sankey-salidas-botones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .ga-lienzos { grid-template-columns: 1fr; } }


/* ══════════ INTERACTIVIDAD SEÑALADA (05-AGO, 4a ronda) ════════════════════
   Regla de la ronda: lo clickeable SE NOTA — hover que levanta, flecha, y un
   subtítulo de acción que dice a dónde lleva. */

/* — KPIs del hero de Banderas: cada número lleva a su desglose — */
.brecha-kpi--liga { text-decoration: none; display: block; cursor: pointer;
  border-radius: 12px; padding: 12px 14px; margin: -12px -14px;
  transition: background .15s ease, transform .15s ease; }
.brecha-kpi--liga:hover { background: rgba(255,255,255,.08);
  transform: translateY(-2px); }
.brecha-kpi--liga .kpi-accion { margin: 6px 0 0; font-size: .72rem;
  font-weight: 800; color: var(--mccipc-rosa-claro, #f4b8d0);
  opacity: .75; transition: opacity .15s ease; }
.brecha-kpi--liga:hover .kpi-accion { opacity: 1; }

/* — el reparto del home: las dos barras navegan a su vertiente — */
.reparto-col--liga { text-decoration: none; display: block; cursor: pointer;
  border-radius: 10px; padding: 10px 12px; margin: -10px -12px;
  transition: background .15s ease, transform .15s ease; }
.reparto-col--liga:hover { background: rgba(255,255,255,.08);
  transform: translateY(-2px); }
.reparto-col--liga .reparto-titulo,
.reparto-col--liga .reparto-cifra { color: inherit; }
.reparto-accion { margin: 7px 0 0; font-size: .72rem; font-weight: 800;
  color: var(--mccipc-rosa-claro, #f4b8d0); opacity: 0;
  transition: opacity .15s ease; }
.reparto-col--liga:hover .reparto-accion,
.reparto-col--liga:focus-visible .reparto-accion { opacity: 1; }
/* en pantallas táctiles no hay hover: el hint se queda siempre visible */
@media (hover: none) { .reparto-accion, .brecha-kpi--liga .kpi-accion {
  opacity: 1; } }

/* — enlaces con nota pequeña dentro de un botón-descarga — */
.mccipc-descarga small { display: block; font-weight: 600; }

/* --- Aviso de que la herramienta todavia no se publica -------------------
   Solo en modo publico (ver base.html). Va arriba del todo y en cada pagina,
   no solo en la portada: la direccion se comparte a mano y los enlaces que
   alguien reenvie pueden apuntar a la ficha de una empresa o de un contrato,
   donde el lector no vio ningun aviso previo.
   En ambar y no en rojo: dice "todavia no", no "cuidado, hay un problema" --
   y el rojo de esta casa ya significa otra cosa dentro de la app. */
.cinta-borrador{ background:#FDF3D7; border-bottom:1px solid #E8CE7A; }
.cinta-borrador-int{ display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap; padding:9px 0; }
.cinta-borrador b{ font-size:.78rem; font-weight:900; letter-spacing:.07em;
  text-transform:uppercase; color:#7A5B00; flex:none; }
.cinta-borrador span{ font-size:.84rem; color:#5C4A14; line-height:1.4; }
/* La peticion de no difundir es la unica frase que alguien tiene que ACATAR:
   va destacada dentro del parrafo, no como otra linea que se salta la vista. */
.cinta-borrador .cinta-fuerte{ font-size:inherit; letter-spacing:0;
  text-transform:none; color:#7A5B00; font-weight:900; }

/* ══ LA BASE VIVA (2026-09-12) ═══════════════════════════════════════════
   La caja y los mandos van ARRIBA de la tabla y SIEMPRE visibles. Antes los
   filtros por columna nacían escondidos tras un botón: había que saber que
   existían. */
.base-caja { display: flex; gap: 8px; margin: 0 0 12px; }
.base-caja input { flex: 1; min-width: 0; font-family: inherit; font-size: 1rem;
  padding: 13px 16px; border: 2px solid var(--mcci-border); border-radius: 10px;
  background: #fff; color: var(--mcci-ink); }
.base-caja input:focus { outline: 2px solid var(--mcci-navy);
  outline-offset: -1px; border-color: var(--mcci-navy); }
.base-caja button { font-family: inherit; font-weight: 800; font-size: .85rem;
  padding: 0 18px; border: 2px solid var(--mcci-border); border-radius: 10px;
  background: #fff; color: var(--mcci-ink-soft); cursor: pointer; }
.base-caja button:hover { border-color: var(--mcci-navy); color: var(--mcci-navy); }
.base-caja button[hidden] { display: none; }

.base-mandos { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 14px; }
.base-mando { display: flex; flex-direction: column; gap: 3px;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--mcci-ink-soft); }
.base-mando select { font-family: inherit; font-size: .86rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--mcci-ink);
  padding: 7px 10px; border: 1.5px solid var(--mcci-border);
  border-radius: 8px; background: #fff; }
.base-mando select:focus { outline: 2px solid var(--mcci-navy); outline-offset: -1px; }

/* El encabezado ordena. La flecha dice en qué sentido; sin ella, dos clics
   seguidos parecen no hacer nada. */
.mccipc-tabla th.orden { cursor: pointer; user-select: none; }
.mccipc-tabla th.orden:hover { color: var(--mcci-navy); }
.mccipc-tabla th.orden::after { content: ''; display: inline-block; width: 0;
  height: 0; margin-left: 6px; vertical-align: middle; opacity: .3;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor; }
.mccipc-tabla th.orden.desc::after { border-bottom: 0;
  border-top: 5px solid currentColor; }
.mccipc-tabla th.orden.asc::after, .mccipc-tabla th.orden.desc::after { opacity: 1; }

.base-vacio { padding: 28px 16px; text-align: center; color: var(--mcci-ink-soft);
  font-size: .92rem; }
.base-bajar { margin-left: auto; }

/* Los botones de página sustituyen a los enlaces del servidor: sin URL que
   cambiar, un <a href="?p=2"> recargaría la página y tiraría el filtro. */
.paginacion .pag-bt { font-family: inherit; font-size: .85rem; font-weight: 700;
  padding: 7px 14px; border: 1.5px solid var(--mcci-border); border-radius: 8px;
  background: #fff; color: var(--mcci-navy); cursor: pointer; }
.paginacion .pag-bt:hover:not(:disabled) { border-color: var(--mcci-navy); }
.paginacion .pag-bt:disabled { opacity: .35; cursor: default; }

@media (max-width: 640px) {
  .base-mandos { gap: 8px 12px; }
  .base-mando select { font-size: 16px; }  /* menos y iOS hace zoom al enfocar */
  .base-bajar { margin-left: 0; }
}


/* Título de una gráfica. Va ARRIBA del lienzo (un `figcaption` puede ser el
   primer hijo de un `figure`) porque una etiqueta que se lee después de la
   figura llega tarde: para entonces ya se interpretó mal. */
.grafica-titulo { margin: 0 0 10px; font-size: .82rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mcci-navy);
  line-height: 1.35; }
.grafica-titulo span { display: block; font-weight: 500; font-size: .78rem;
  letter-spacing: 0; text-transform: none; color: var(--mcci-ink-soft); }

/* ══ LA CONFLUENCIA (La brecha) ══════════════════════════════════════════ */
.sk-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 8px; }
.sk-etq { font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mcci-ink-soft); }
.sk-eje { font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--mcci-navy);
  background: transparent; color: var(--mcci-navy); }
.sk-eje[aria-pressed="true"] { background: var(--mcci-navy); color: #fff; }
.sk-figura { margin: 26px 0 0; }
.sk-figura .grafica-titulo { margin-bottom: 4px; }
.sk { width: 100%; height: auto; display: block; overflow: visible; }
/* Un diagrama de dos columnas con rótulos no se puede encoger: por debajo de
   ~760 px el lienzo se desborda y las etiquetas se encabalgan. Se deja rodar
   en su propia caja en vez de volverlo ilegible. */
@media (max-width: 780px) {
  .sk-figura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sk { min-width: 940px; }
}
/* La franja que une una barra con su bloque. Tenue a propósito: no
   transporta nada, sólo dice «esta plataforma cubre este tramo». */
.sk-puente { opacity: .18; cursor: pointer; transition: opacity .18s; }
.sk-puente:hover, .sk-puente:focus { opacity: .4; outline: none; }
.sk-puente.apagado { opacity: .05; }
.sk-plat { fill: var(--mcci-navy); cursor: pointer; opacity: .9; }
.sk-plat:hover, .sk-plat:focus { opacity: 1; outline: none; }
.sk-reg { cursor: pointer; }
.sk-reg.elegido { stroke: var(--mccipc-rosa); stroke-width: 3; }
.sk-plat.apagado, .sk-reg.apagado { opacity: .22; }
.sk-rot { font-size: 13px; font-weight: 800; fill: var(--mcci-navy); }
.sk-rot--chico { font-weight: 700; font-size: 12px; }
.sk-rot-cifra { font-size: 11.5px; fill: var(--mcci-ink-soft); }
.sk-col { font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  fill: var(--mcci-ink-soft); }
.sk-vert { font-size: 10px; font-weight: 800; letter-spacing: .1em;
  fill: var(--mccipc-rosa); }
.sk-corte { stroke: var(--mcci-linea, #d7dce3); stroke-width: 1;
  stroke-dasharray: 3 4; }
.sk-pie { margin-top: 14px; font-size: .82rem; line-height: 1.6;
  color: var(--mcci-ink-soft); max-width: 78ch; }
.mosaico-pie { margin-top: 12px; font-size: .82rem; color: var(--mcci-ink-soft); }

/* ══ EL PANEL DE LA SELECCIÓN ════════════════════════════════════════════ */
.seccion--panel { scroll-margin-top: 12px; }
.pn-cabeza { display: flex; gap: 18px; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; }
.pn-kicker { margin: 0 0 4px; font-size: .76rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mccipc-rosa); }
.mcci #pn-titulo { margin: 0 0 8px; font-size: 1.32rem; line-height: 1.25; }
.mcci .pn-texto { margin: 0; max-width: 70ch; font-size: .92rem; }
.pn-cerrar { font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--mcci-ink-soft);
  background: transparent; color: var(--mcci-ink-soft); }
.pn-aviso { margin: 14px 0 0; padding: 10px 14px; font-size: .84rem;
  font-weight: 700; border-left: 3px solid var(--mccipc-dato-ad);
  background: #fff6ed; color: var(--mcci-ink); }
.pn-kpis { display: grid; gap: 14px; margin: 24px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pn-kpi { padding: 14px 16px; border: 1px solid var(--mcci-linea, #e3e7ec);
  border-radius: 10px; background: #fff; }
.mcci .pn-kpi-clave { margin: 0; font-size: .74rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--mcci-ink-soft); }
.mcci .pn-kpi-valor { margin: 4px 0 2px; font-size: 1.5rem; font-weight: 800;
  line-height: 1.1; color: var(--mcci-navy); }
.mcci .pn-kpi-pie { margin: 0; font-size: .76rem; color: var(--mcci-ink-soft); }
.pn-graficas { display: grid; gap: 26px; margin: 26px 0 8px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 860px) { .pn-graficas { grid-template-columns: 1fr; } }
.pn-graficas svg { width: 100%; height: auto; }
.pn-top-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.pn-top-tab { font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--mcci-linea, #d7dce3);
  background: transparent; color: var(--mcci-ink-soft); }
.pn-top-tab[aria-pressed="true"] { border-color: var(--mcci-navy);
  background: var(--mcci-navy); color: #fff; }
.pn-barra { display: grid; grid-template-columns: minmax(0, 12em) 1fr auto;
  gap: 10px; align-items: center; margin-bottom: 7px; font-size: .8rem; }
.pn-barra-etq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--mcci-ink); }
.pn-barra-pista { height: 12px; border-radius: 3px; background: #eef1f5; }
.pn-barra-relleno { display: block; height: 100%; border-radius: 3px; }
.pn-barra-cifra { font-weight: 800; color: var(--mcci-navy); font-size: .78rem; }
.pn-vacio { font-size: .84rem; color: var(--mcci-ink-soft); }
.pn-tabla-cabeza { display: flex; gap: 14px; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap; margin: 30px 0 10px; }
.mcci .pn-tabla-cabeza h3 { margin: 0; font-size: 1.05rem; }
.pn-herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#pn-q { font: inherit; font-size: .86rem; padding: 8px 12px; min-width: 17em;
  border: 1.5px solid var(--mcci-linea, #d7dce3); border-radius: 8px; }
#pn-q:focus { outline: 2px solid var(--mcci-navy); outline-offset: 1px; }
.pn-porpag { font-size: .8rem; color: var(--mcci-ink-soft); }
.pn-porpag select { font: inherit; font-size: .82rem; padding: 6px 8px;
  border: 1.5px solid var(--mcci-linea, #d7dce3); border-radius: 8px; }
.pn-resumen { margin: 0 0 10px; font-size: .82rem; font-weight: 700;
  color: var(--mcci-ink-soft); }
.mccipc-tabla--viva th.ordenable { cursor: pointer; user-select: none; }
.mccipc-tabla--viva th.ordenable::after { content: " ⇅"; opacity: .45;
  font-size: .8em; }
.pn-paginacion { display: flex; gap: 12px; align-items: center; margin-top: 14px;
  font-size: .82rem; color: var(--mcci-ink-soft); }
.pn-paginacion button { font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer; padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid var(--mcci-navy); background: transparent;
  color: var(--mcci-navy); }
.pn-paginacion button[disabled] { opacity: .35; cursor: default; }
.pn-falta { margin: 4px 0 0; padding: 12px 16px; font-size: .88rem; line-height: 1.6;
  border-left: 3px solid var(--mccipc-rosa); background: #fff; color: var(--mcci-ink); }

/* El traslape de las dos barras: donde las dos plataformas registran el mismo
   contrato. Es el argumento del diagrama, así que se ve. */
.sk-traslape { fill: none; stroke: var(--mccipc-rosa); stroke-width: 1.6;
  stroke-dasharray: 4 3; opacity: .85; }
.sk-traslape-guia { stroke: var(--mccipc-rosa); stroke-width: 1.6;
  stroke-dasharray: 4 3; opacity: .85; }
.sk-traslape-rot { font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; fill: var(--mccipc-rosa); }

/* Los rótulos se atenúan con su forma: si no, al tocar una plataforma los dos
   nombres se quedaban encendidos y parecía que la selección era de las dos. */
.sk-rot, .sk-rot-cifra { transition: opacity .18s; pointer-events: none; }
.sk-rot.apagado, .sk-rot-cifra.apagado { opacity: .2; }

/* ══ LAS OTRAS DIMENSIONES (Empresas y Contratos) ════════════════════════ */
.dim-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 16px; }
.dim-tab { font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  padding: 8px 15px; border-radius: 999px; background: transparent;
  border: 1.5px solid var(--mcci-linea, #d7dce3); color: var(--mcci-ink-soft); }
.dim-tab[aria-selected="true"] { border-color: var(--mcci-navy);
  background: var(--mcci-navy); color: #fff; }
.mcci .dim-nota { margin: 0 0 8px; font-size: .9rem; max-width: 72ch; }
.mcci .dim-cobertura { margin: 0 0 18px; padding: 11px 15px; font-size: .84rem;
  line-height: 1.6; max-width: 78ch; border-left: 3px solid var(--mccipc-rosa);
  background: var(--mcci-bg-soft, #f6f7f9); color: var(--mcci-ink); }
/* Los mandos de dependencia y lugar tienen nombres largos (309 y 284
   valores): con el ancho de «Año» el desplegable recorta a media palabra. */
.base-mando--ancho select { max-width: 22em; }
/* La fila-enlace: se toca la barra, que es donde está mirando la vista. */
.mcci a.conc-fila--liga { text-decoration: none; border-radius: 6px;
  padding: 4px 6px; margin: 0 -6px; transition: background .15s; }
.mcci a.conc-fila--liga:hover, .mcci a.conc-fila--liga:focus-visible {
  background: var(--mcci-bg-soft, #f6f7f9); }
.mcci a.conc-fila--liga:hover .conc-nombre { color: var(--mccipc-rosa); }


/* ══ LA PESTAÑA INFORME ══════════════════════════════════════════════════
   El documento se lee aquí dentro: la tira de arriba es delgada a propósito
   para que el visor empiece lo más alto posible. */
.seccion--informe { padding-top: 26px; }
.inf-cabeza { display: flex; gap: 24px; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.inf-kicker { margin: 0 0 4px; font-size: .76rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mccipc-rosa); }
.mcci .inf-titulo { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.2;
  max-width: 24ch; }
.mcci .inf-meta { margin: 0; font-size: .82rem; color: var(--mcci-ink-soft); }
.inf-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inf-acciones small { font-weight: 600; opacity: .75; }
/* Alto por viewport para que el documento se lea sin pelear con el scroll de
   la página, con un mínimo para que en una ventana chica siga sirviendo. */
/* El visor es un rollo de páginas, no un marco con scroll propio: en el
   teléfono un contenedor con su propio scroll dentro del scroll de la página
   se vuelve una trampa para el dedo. */
.inf-visor { border: 1px solid var(--mcci-linea, #d7dce3); border-radius: 10px;
  overflow: hidden; background: #f2f4f7; display: grid; gap: 10px;
  padding: 10px; }
.inf-visor--vacio { display: block; padding: 0; }
.inf-pagina { width: 100%; height: auto; display: block; border-radius: 4px;
  background: #fff; box-shadow: 0 1px 4px rgba(13, 38, 81, .10); }
.inf-contador { position: sticky; bottom: 14px; margin: -34px auto 0;
  width: max-content; padding: 6px 14px; border-radius: 999px;
  background: var(--mcci-navy); color: #fff; font-size: .76rem;
  font-weight: 800; letter-spacing: .03em; pointer-events: none;
  box-shadow: 0 2px 10px rgba(13, 38, 81, .28); }
.inf-respaldo { padding: 40px 24px; text-align: center; font-size: .92rem; }
.inf-respaldo p { margin: 0 0 14px; }
.inf-pie { display: grid; gap: 26px; margin-top: 26px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 820px) {
  .inf-pie { grid-template-columns: 1fr; }
  .inf-visor { padding: 6px; gap: 6px; }
}
.mcci .inf-pie h2 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--mcci-ink-soft); }
.mcci .inf-cita { margin: 0; font-size: .84rem; line-height: 1.6;
  padding-left: 14px; border-left: 3px solid var(--mccipc-rosa); }
.mcci .inf-verificar { margin: 0; font-size: .84rem; line-height: 1.6;
  color: var(--mcci-ink-soft); }

/* El cintillo con el nombre completo del laboratorio: en una sola línea. */
.topbar-sello { font-size: .68rem; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 900px) { .topbar-sello { font-size: .6rem; } }
@media (max-width: 700px) { .topbar-sello { white-space: normal; } }

/* Las dos vistas de la comparación de montos, una debajo de otra: en dos
   columnas la tabla quedaba tan angosta que había que navegarla de lado, y
   una tabla que se lee a empujones no se lee. */
.dif-grid--apilado { display: block; }
.dif-grid--apilado > * + * { margin-top: 26px; }

/* ══ LA BASE EN EL TELÉFONO: cada contrato, una tarjeta ═══════════════════
   Nueve columnas no caben en 375 px. La tabla se veía, pero había que
   arrastrarla de lado para leer un solo contrato — y entonces se pierde de
   vista el expediente mientras se mira el monto. Aquí las columnas se vuelven
   renglones etiqueta/valor y el contrato se lee completo de un vistazo.

   Se hace con CSS sobre la MISMA tabla: no hay un segundo marcado que
   mantener, así que una columna nueva aparece sola en la tarjeta. La etiqueta
   sale de `data-etq`, que cada celda declara al pintarse.

   Sólo bajo `.tabla-tarjetas`, que hoy únicamente pone la versión pública. */
@media (max-width: 760px) {
  .tabla-tarjetas { overflow-x: visible; }
  /* `.tabla-scroll > table { min-width: 720px }` es lo que obliga a la tabla
     ancha a no encogerse dentro de su carril con scroll. En modo tarjeta no
     hay carril, así que ese mínimo estiraba la «tarjeta» a 720 px en una
     pantalla de 375 — y con ella, la página entera se arrastraba de lado. */
  .tabla-tarjetas > table,
  .tabla-tarjetas .tabla-base { display: block; border: 0;
    min-width: 0; width: 100%; max-width: 100%; }
  .tabla-tarjetas .tabla-base thead { display: none; }
  .tabla-tarjetas .tabla-base tbody { display: block; }

  .tabla-tarjetas .tabla-base tr.fila {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    padding: 14px 14px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--mcci-linea, #e3e7ec);
    border-radius: 10px;
    background: #fff;
  }
  .tabla-tarjetas .tabla-base tr.fila > td {
    display: block; border: 0; padding: 0;
    grid-column: 1 / -1;
    font-size: .84rem; line-height: 1.45;
    /* ANULAR LO QUE LA TABLA ANCHA NECESITA Y LA TARJETA NO. `display:block`
       en la tabla no quita los `min-width` de sus celdas: `.desc` pedía 260 px
       y la cuarta columna 170, así que la «tarjeta» seguía midiendo 720 px en
       una pantalla de 375 y la página entera se podía arrastrar de lado. Y los
       `white-space: nowrap` del monto, el expediente y el enlace impedían que
       esos valores se partieran. */
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal;
    /* Un expediente o una URL sin espacios no se parten solos: sin esto, una
       sola palabra larga vuelve a estirar la tarjeta. */
    overflow-wrap: anywhere;
  }
  .tabla-tarjetas .tabla-base tr.fila > td * { white-space: normal;
    max-width: 100%; overflow-wrap: anywhere; }
  /* La etiqueta va ANTES del valor y en pequeño: sin ella, «2024» y
     «LPL8242025» son dos números sueltos. */
  .tabla-tarjetas .tabla-base tr.fila > td[data-etq]::before {
    content: attr(data-etq);
    display: block;
    font-size: .64rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--mcci-ink-soft);
    margin-top: 8px;
  }
  /* La descripción encabeza la tarjeta: es lo que dice QUÉ se contrató. */
  .tabla-tarjetas .tabla-base tr.fila > td.desc {
    order: -3; font-size: .92rem; }
  .tabla-tarjetas .tabla-base tr.fila > td.desc b { display: block;
    line-height: 1.3; margin-bottom: 2px; }
  /* Año y expediente, juntos arriba y en una sola línea cada uno. */
  .tabla-tarjetas .tabla-base tr.fila > td.exp { order: -2; }
  .tabla-tarjetas .tabla-base tr.fila > td.exp::before { margin-top: 10px; }
  /* El botón de detalle, arriba a la derecha y sin etiqueta. */
  .tabla-tarjetas .tabla-base tr.fila > td.tv-abrir-celda {
    order: -4; grid-column: 2; grid-row: 1; justify-self: end; }
  .tabla-tarjetas .tabla-base tr.fila > td.monto {
    text-align: left; font-weight: 800; font-size: 1rem;
    color: var(--mcci-navy); }
  /* La fila de detalle que se despliega ocupa el ancho completo. */
  .tabla-tarjetas .tabla-base tr.detalle > td { display: block; padding: 0; }
  .tabla-tarjetas .tabla-base tr.detalle { display: block;
    margin: -10px 0 10px; }
}

/* Un nombre largo de empresa desbordaba su fila en el teléfono. `.conc-nombre`
   ya recorta con elipsis, pero dentro de un grid un hijo NO se encoge por
   debajo de su contenido sin `min-width: 0` — así que la celda crecía hasta
   caber el nombre completo y se salía de la pantalla. */
.conc-fila, .conc-nombre { min-width: 0; }
.conc-nombre > a { display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; }

/* ══ SUGERENCIAS DE «LA BASE» ════════════════════════════════════════════
   Debajo de la caja y por encima de la tabla: la lista tiene que leerse sin
   perder de vista lo que se está escribiendo. */
.base-sug { position: relative; z-index: 5; margin: -6px 0 16px;
  border: 1px solid var(--mcci-linea, #d7dce3); border-radius: 12px;
  background: #fff; box-shadow: 0 6px 22px rgba(13, 38, 81, .10);
  overflow: hidden; max-height: 58vh; overflow-y: auto; }
.base-sug-titulo { margin: 0; padding: 9px 16px 5px; font-size: .68rem;
  font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mcci-ink-soft); background: var(--mcci-bg-soft, #f6f7f9); }
.base-sug button { display: block; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; cursor: pointer;
  padding: 10px 16px; border-top: 1px solid var(--mcci-linea, #eef1f5); }
.base-sug button:hover, .base-sug button:focus-visible {
  background: var(--mcci-bg-soft, #f6f7f9); outline: none; }
.base-sug button b { display: block; font-size: .86rem; color: var(--mcci-navy);
  line-height: 1.3; overflow-wrap: anywhere; }
.base-sug button span { display: block; font-size: .76rem;
  color: var(--mcci-ink-soft); margin-top: 1px; }
/* Aire sobre la caja cuando se la lleva al tope para enseñar sus sugerencias:
   pegada al borde superior se lee como si se hubiera cortado la página. */
#bq, #emp-q { scroll-margin-top: 14px; }