/* Design system de JM, con la estructura visual de VESPE (GandhiBot) adaptada
   a los colores institucionales. Lo que se tomo de alla: tenir la paleta con el
   color de marca en vez de gris neutro, los tres planos (fondo -> panel ->
   tarjeta), el enfasis por peso y no por tamano, y el comportamiento del menu
   en movil. Referencia y mapeo completo en contexto/PLAN-VESPE.md. */

:root {
  /* El azul claro de JM da 4.22:1 sobre blanco, debajo del minimo AA. Se queda
     en superficies y acentos; el texto y los fondos de boton usan el tono
     oscuro, que ya existia en la paleta como estado hover. */
  --jm-blue: #1E80C8;
  --jm-blue-dark: #1668A3;
  --jm-blue-texto: #1668A3;
  --jm-blue-texto-hover: #12537F;
  --jm-navy: #0F2A4E;
  --jm-navy-2: #1A3866;

  /* Texto: nunca negro puro, siempre un navy desaturado. */
  --jm-gray: #16283D;
  --jm-sub: #42576F;
  /* Verificado: 4.83:1 sobre el fondo de pagina, que es la superficie mas
     clara donde puede caer. Un tono mas claro fallaba ahi. */
  --jm-gray-soft: #5A6C81;

  /* Superficies tenidas de azul, no grises: es lo que hace que se lea como un
     sistema de una marca y no como una plantilla. */
  --jm-bg: #EEF3F9;
  --jm-bg2: #E3ECF6;
  --panel: #FAFCFE;
  --jm-border: #DCE6F0;
  /* Divisoria DENTRO de una tarjeta, mas tenue que el borde de la tarjeta. */
  --linea: #E9F0F7;
  /* Fondo suave de acento: iconos, barras, chips informativos. */
  --azul-suave: #E4EFF8;
  /* Borde de lo que se toca: campos y botones blancos. Un paso más firme que
     el de la tarjeta, para que un control no se confunda con un recuadro. */
  --borde-control: #CAD7E5;
  --borde-control-hover: #9FB8D2;
  /* Superficie hundida dentro de una tarjeta: el segmento del ícono de un
     campo, un renglón plegado, el pie de una ventana. */
  --hundido: #F4F8FC;

  --alerta: #B91C1C;
  --aviso: #B45309;
  --correcto: #166534;

  --sidebar-w: 240px;
  --topbar-h: 74px;
  --container-pad: 24px;

  /* Escala tipografica. Ocho pasos y ningun medio paso: antes habia 19 tamanos
     distintos, con 9.5, 10.5, 11.5, 12.5 y 13.5 conviviendo. Una diferencia de
     medio pixel no se lee como jerarquia, se lee como descuido, y de paso hace
     que lo que si importa deje de destacar. La jerarquia la cargan el peso y
     el color; el tamano solo marca los saltos grandes. */
  --t-micro: 10px;    /* etiquetas en mayusculas: columnas, modulo, indicador */
  --t-mini: 11px;     /* metadatos: fechas, notas al pie de un dato */
  --t-chico: 12px;    /* datos secundarios, etiquetas de campo, pildoras */
  --t-base: 13px;     /* el texto de la interfaz */
  --t-medio: 15px;    /* titulos de tarjeta y valores destacados */
  --t-grande: 17px;   /* titulos de ventana */
  --t-titulo: 24px;   /* titulo de pagina */
  --t-cifra: 28px;    /* la cifra de un indicador */

  /* Una sola familia, con el enfasis en el peso 800 y no en tamanos enormes. */
  --f: 'Plus Jakarta Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  /* Estrecha, y solo para rotular: encabezado de columna, etiqueta de dato y
     estado. En versalitas apretadas un rotulo ocupa menos y se distingue del
     dato sin necesitar otro color. Viene de la propuesta del pizarron. */
  --f-rotulo: 'Archivo Narrow', 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  /* Espaciado en una sola escala. Antes cada pantalla elegia su propio margen
     y el ritmo cambiaba de una a otra. */
  --hueco-1: 8px;
  --hueco-2: 14px;
  --hueco-3: 20px;
  --hueco-4: 28px;

  --rad: 12px;

  /* Sombras con tinte de marca, no grises. La suave es difusion, no contraste:
     separa la tarjeta del panel sin dibujar un borde oscuro. */
  --sombra: 0 1px 2px rgba(22,104,163,.04), 0 8px 24px rgba(22,104,163,.07);
  --sombra-flotante: 0 8px 24px rgba(22,104,163,.16);
  --sombra-grande: 0 20px 60px rgba(22,104,163,.18);

  /* Movimiento. Tres curvas y ninguna de las que trae CSS: las de fábrica son
     tan suaves que la interfaz tarda en contestar. Salida fuerte para lo que
     entra o sale, la de iOS para las hojas que suben desde abajo. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Ancho de lectura comodo para los parrafos que explican una pantalla. */
  --medida: 76ch;
}

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

/* Los controles no heredan ni la fuente ni el tamano del documento: sin esto
   se quedan en los 16px por omision del navegador, tres pasos arriba del texto
   que tienen al lado. */
button, input, select, textarea { font-family: var(--f); font-size: var(--t-base); }

/* .campo y .tarjeta declaran display, así que ganan sobre el display:none que
   el navegador aplica a [hidden]. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--f);
  background: var(--jm-bg);
  -webkit-font-smoothing: antialiased;
  color: var(--jm-gray);
  line-height: 1.45;
}

/* Las barras nativas blancas rompen los planos tenidos de azul, sobre todo
   cuando un panel tiene su propio scroll. El sidebar conserva un pulgar claro
   porque es el único plano oscuro. */
* { scrollbar-width: thin; scrollbar-color: #A9C6DE transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #A9C6DE; border: 2px solid transparent; border-radius: 99px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--jm-blue-texto); }
.sidebar { scrollbar-color: rgba(255,255,255,.28) transparent; }
.sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.28); }
.sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.45); }

a { color: var(--jm-blue-texto); text-underline-offset: 3px; }
a:hover { color: var(--jm-blue-texto-hover); }

/* Lo que dibuja el navegador por su cuenta tambien es parte del diseno. Sin
   esto, seleccionar un texto pinta el azul de Chrome y el cursor de captura
   parpadea en negro, que no son colores de JM. */
::selection { background: var(--azul-suave); color: var(--jm-navy); }
input, textarea, select { caret-color: var(--jm-blue-texto); }

:focus-visible {
  outline: 2px solid var(--jm-blue);
  outline-offset: 2px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #fff;
  color: var(--jm-navy);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-size: var(--t-base); font-weight: 700;
}
.salta-al-contenido:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--jm-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,0.07);
  z-index: 100;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.sidebar-logo .marca {
  width: 36px; height: 36px;
  padding: 3px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  flex-shrink: 0;
}
.sidebar-logo-text {
  font-size: var(--t-chico); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,0.9);
  line-height: 1.2;
}
.sidebar-logo-sub {
  font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: #6FB4E0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.sidebar-avatar {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(30,128,200,0.32);
  border: 1.5px solid rgba(30,128,200,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-base); font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-name {
  font-size: var(--t-chico); font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: var(--t-micro); color: rgba(255,255,255,0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-section-label {
  padding: 14px 18px 5px;
  font-size: var(--t-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  /* 0.5 daba 4.47:1 sobre el degradado del sidebar, justo debajo de AA. */
  color: rgba(255,255,255,0.62);
}

.sidebar-nav { display: flex; flex-direction: column; flex: 1; padding-bottom: 4px; }
.sidebar-spacer { flex: 1; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  font-size: var(--t-base); font-weight: 500;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
.sidebar-link .icono {
  width: 17px; height: 17px;
  text-align: center;
  color: rgba(255,255,255,0.5);
  transition: color .14s;
  flex-shrink: 0;
}
.sidebar-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sidebar-link:hover .icono { color: rgba(255,255,255,0.8); }
/* Activo en blanco solido, no en un navy un poco mas claro: sobre un menu
   oscuro el contraste de tono se pierde y no se sabe donde esta uno. */
.sidebar-link.activo {
  background: #fff;
  border-left-color: transparent;
  color: var(--jm-navy);
  font-weight: 800;
}
.sidebar-link.activo .icono { color: var(--jm-blue-texto); }

.sidebar-pie {
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.sidebar-salir {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: rgba(255,255,255,0.72);
  font: inherit; font-size: var(--t-chico); font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-salir:hover {
  background: rgba(220,38,38,0.18);
  color: #FCA5A5;
  border-color: rgba(220,38,38,0.3);
}

/* ── Marco ───────────────────────────────────────────────────────────────── */

body.con-sidebar { padding-left: var(--sidebar-w); }

/* Sus reglas viven en el corte de 760px; arriba de ese ancho no existe. */
.nav-toggle, .nav-backdrop { display: none; }

.topbar {
  position: sticky;
  top: 0;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--container-pad);
  background: #fff;
  border-bottom: 2px solid var(--jm-border);
  z-index: 90;
}
.topbar-titulo { padding: 14px 0; min-width: 0; }
.topbar-modulo {
  font-size: var(--t-micro); font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--jm-blue-texto);
  margin-bottom: 4px;
}
.topbar-volver {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;
  border-radius: 4px;
  transition: color .15s ease;
}
.topbar-volver .icono { width: 13px; height: 13px; transition: transform .16s ease-out; }
.topbar-volver:hover { color: var(--jm-navy); }
@media (hover: hover) and (pointer: fine) {
  .topbar-volver:hover .icono { transform: translateX(-2px); }
}
.topbar-volver:focus-visible { outline: 2px solid var(--jm-blue-texto); outline-offset: 3px; }
.topbar h1 {
  margin: 0;
  font-size: var(--t-titulo); font-weight: 800;
  color: var(--jm-blue-texto);
  line-height: 1.2; letter-spacing: -.2px;
}
.topbar-titulo p {
  margin: 3px 0 0;
  max-width: var(--medida);
  font-size: var(--t-base);
  color: var(--jm-gray-soft);
}
.topbar-acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.aviso-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 9px;
  background: #FEF5E1;
  color: #7A3F06;
  box-shadow: inset 0 0 0 1px #F2D9A2;
  font-size: var(--t-chico); font-weight: 600;
  white-space: nowrap;
}
.aviso-demo .icono { width: 15px; height: 15px; }
/* En pantallas de laptop las pestañas necesitan ese lugar: la leyenda se
   acorta a «Demo» (el aviso completo sigue en su globo). */
@media (max-width: 1520px) and (min-width: 1000px) {
  .subtabs-barra .aviso-demo { padding-inline: 10px; }
  .subtabs-barra .aviso-demo-texto { display: none; }
  .subtabs-barra .aviso-demo::after { content: "Demo"; }
}

/* Tres planos, no dos: fondo -> panel -> tarjeta. El panel envuelve las
   pestanas, los filtros y las tarjetas en una sola superficie de trabajo; sin
   el, cada tarjeta flota suelta sobre el fondo. */
.contenido {
  /* Una ayuda o el nombre de un botón que se asoma por la orilla no debe
     empujar la página de lado. clip y no hidden: no crea un marco con scroll
     propio, así que lo fijo y lo pegajoso siguen funcionando. */
  overflow-x: clip;
  margin: 18px var(--container-pad) 24px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--jm-border);
  border-radius: 18px;
}
/* En las pantallas que ya son una sola tarjeta el panel sobra: quedaria una
   tarjeta dentro de otra. Si el navegador no soporta :has(), se queda el panel
   y no se rompe nada. Presentaciones lleva un formulario de tarjetas junto a
   sus pestañas: conserva el panel, o la barra de pestañas se corre 24 px al
   pasar de Productos a Presentaciones. */
.contenido:has(> .alta-layout),
.contenido:has(> form > .tarjeta):not(:has(> form.presenta)) {
  background: transparent;
  border-color: transparent;
  padding: 0;
}

/* Pestañas del módulo, con su ícono. La activa se tiñe y se subraya: se
   reconoce de lejos sin leerla. El aviso de datos de demostración vive en la
   misma franja, a la derecha, en vez de ocupar un renglón propio. */
.subtabs-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: -8px 0 20px;
  border-bottom: 1px solid var(--jm-border);
}
.subtabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  padding: 11px 14px 12px;
  border-radius: 9px 9px 0 0;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--jm-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.subtabs-link .icono { width: 17px; height: 17px; color: var(--jm-gray-soft); transition: color .15s ease; }
.subtabs-link:hover { color: var(--jm-navy); background: var(--hundido); }
.subtabs-link.activo { color: var(--jm-blue-texto); background: #EAF3FB; font-weight: 700; }
.subtabs-link.activo .icono { color: var(--jm-blue-texto); }
.subtabs-link.activo::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--jm-blue-texto);
}
.subtabs-barra .aviso-demo { flex-shrink: 0; margin-bottom: 6px; }

.barra-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
/* Las acciones de la pantalla, con su separación propia (sin depender del
   espacio entre etiquetas) para que en el teléfono no queden pegadas. */
.barra-acciones > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.tarjeta {
  background: #fff;
  border-radius: var(--rad);
  padding: var(--hueco-3) 26px;
  margin-bottom: var(--hueco-3);
  border: 1px solid var(--jm-border);
  box-shadow: var(--sombra);
  min-width: 0;
}
/* Una tarjeta sin encabezado de ícono (las que todavía no lo llevan) se titula
   igual que las que sí: mismo tamaño, mismo peso, sin versalitas. */
.tarjeta > h2 {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-grande); font-weight: 700;
  letter-spacing: -.01em;
  color: var(--jm-navy);
}

/* Encabezado de tarjeta: ícono en azulejo, título, una línea que dice para
   qué es la tarjeta y, a la derecha, sus acciones. Es la misma pieza en todo
   el sistema; el macro vive en _ui.html. */
.encabezado {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 14px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.encabezado.sin-linea { border-bottom: none; padding-bottom: 0; }
.encabezado-icono {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--azul-suave);
  color: var(--jm-blue-texto);
  box-shadow: inset 0 0 0 1px #D2E3F2;
}
.encabezado-icono .icono { width: 20px; height: 20px; stroke-width: 1.9px; }
.encabezado-icono.alerta { background: #FDECEC; color: var(--alerta); box-shadow: inset 0 0 0 1px #F6D2D2; }
.encabezado-icono.aviso { background: #FEF5E1; color: #8A4A06; box-shadow: inset 0 0 0 1px #F2DDB0; }
.encabezado-icono.correcto { background: #E6F6EC; color: var(--correcto); box-shadow: inset 0 0 0 1px #C6E6D2; }
.encabezado-texto { flex: 1 1 200px; min-width: 0; }
.encabezado-texto h2, .encabezado-texto h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  margin: 0;
  font-size: var(--t-grande); font-weight: 700;
  line-height: 1.25; letter-spacing: -.01em;
  color: var(--jm-navy);
  text-wrap: balance;
}
.encabezado-texto p {
  margin: 3px 0 0;
  max-width: var(--medida);
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--jm-gray-soft);
}
.encabezado-acciones {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-left: auto;
}
.tarjeta.alerta { border-top-color: var(--alerta); }
.tarjeta.aviso { border-top-color: var(--aviso); }

/* Texto que explica de qué va la tarjeta, debajo de su título. Va acotado
   porque a 1600px de ancho un párrafo corrido se vuelve ilegible. */
.nota-tarjeta {
  margin: -6px 0 var(--hueco-2);
  max-width: var(--medida);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--jm-gray-soft);
}

/* Encabezado de un grupo de datos dentro de una tarjeta. */
.etiqueta-grupo {
  margin-bottom: 6px;
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--jm-gray-soft);
}

/* Botones o avisos que van entre el título de la tarjeta y su contenido. */
.barra-tarjeta { margin: 0 0 var(--hueco-2); }

.lista-faltantes {
  margin: 0;
  padding-left: 18px;
  font-size: var(--t-base);
  line-height: 1.7;
}

/* Llamado de atencion al principio de una ficha: lo que detiene el tramite y
   el camino para resolverlo, en el mismo bloque. */
.llamado-cabecera { display: flex; align-items: flex-start; gap: 12px; }
.llamado-cabecera h2 { margin: 0 0 4px; font-size: var(--t-grande); }
.llamado-cabecera .nota-tarjeta { margin: 0; }
.llamado-icono {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #FEF2F2;
  color: var(--alerta);
  font-size: var(--t-grande);
}
.llamado-lista { list-style: none; margin: var(--hueco-2) 0 0; padding: 0; }
.llamado-lista li {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--linea);
}
.llamado-lista .boton { margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.pildoras { display: flex; flex-wrap: wrap; gap: 6px; }

/* Texto secundario dentro de un dato: la unidad, el detalle entre paréntesis. */
.apagado { color: var(--jm-gray-soft); font-weight: 400; }

/* Cuando el elemento va después de un bloque y necesita despegarse de él. */
.suelto, .pista.suelta { margin-top: var(--hueco-2); }
.error.suelto { margin-top: var(--hueco-2); margin-bottom: 0; }

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.indicador {
  display: flex;
  align-items: flex-start;
  gap: var(--hueco-2);
  background: #fff;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--jm-border);
}
/* Cuando el indicador dobla como filtro rápido de la tabla de abajo. */
a.indicador { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.indicador.activo {
  border-color: var(--jm-blue);
  box-shadow: 0 0 0 2px rgba(30,128,200,.16);
}
.indicador-icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  font-size: 16px;
  background: #E0F2FE; color: #075985;
}
.indicador-texto { flex: 1; min-width: 0; }
.indicador .etiqueta {
  display: flex;
  align-items: flex-end;
  min-height: 18px;
  font-size: var(--t-base); font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}
.indicador .cifra {
  font-size: var(--t-cifra); font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--jm-navy);
  line-height: 1.1;
}
.indicador .nota { font-size: var(--t-chico); color: var(--jm-gray-soft); margin-top: 3px; }
.indicador.alerta .cifra { color: var(--alerta); }
.indicador.alerta .indicador-icono { background: #FEE2E2; color: #B91C1C; }
.indicador.aviso .cifra { color: var(--aviso); }
.indicador.aviso .indicador-icono { background: #FEF3C7; color: #92400E; }
.indicador.correcto .cifra { color: var(--correcto); }
.indicador.correcto .indicador-icono { background: #DCFCE7; color: #166534; }
.indicador.neutro .cifra { color: #374151; }
.indicador.neutro .indicador-icono { background: #E5E7EB; color: #374151; }

/* ── Formularios ─────────────────────────────────────────────────────────── */

/* Tres columnas como maximo, y todas del mismo ancho.

   Antes era `auto-fit` suelto: el numero de columnas salia del ancho de la
   tarjeta, asi que la misma pantalla se dibujaba en 3, 5 o 6 columnas segun el
   monitor. Con seis, diez campos dejan huecos por todos lados y ningun campo
   queda alineado con el de la fila de arriba.

   El tope son los 960 px: a cuatro columnas de 230 no le alcanza, asi que se
   queda en tres por mas ancha que sea la tarjeta. Abajo sigue cediendo sola a
   dos y a una, que es lo que necesitan una ventana angosta y el telefono. */
.rejilla {
  display: grid;
  /* `auto-fill` y no `auto-fit`: con auto-fit las columnas vacias se colapsan
     y sus pixeles se reparten entre los campos que si hay, asi que un bloque
     de dos campos los dibuja mucho mas anchos que uno de tres. Es de donde
     salia que los campos midieran distinto de una tarjeta a otra. Con
     auto-fill la columna vacia se queda vacia y todos los campos del
     desarrollo miden lo mismo. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--hueco-3) 18px;
  max-width: 960px;
}
/* Un campo de captura no gana nada por medir 960 px: el ojo tiene que viajar
   de la etiqueta al dato y el renglon se lee vacio. Se acota a dos columnas,
   que es donde deja de crecer lo que se escribe dentro (una direccion, una
   razon social). */
.rejilla > .campo.ancho > input,
.rejilla > .campo.ancho > textarea { max-width: 640px; }

/* Quien es el proveedor y con quien se habla: dos bloques cortos que uno
   debajo del otro dejan media pantalla vacia. En el modal de vista rapida no
   aplica: ahi el ancho lo pone la ventana, no el monitor. */
.ficha-identidad { display: grid; gap: var(--hueco-3); align-items: start; }
/* 1400 y no 1200: a 1200 la columna izquierda se queda en 476 px y la rejilla
   de campos cae a una sola columna, mas angosta que si la tarjeta fuera a todo
   lo ancho. El corte esta donde la izquierda todavia da para dos columnas. */
@media (min-width: 1400px) {
  .ficha-identidad { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.ficha-modal-cuerpo .ficha-identidad { grid-template-columns: minmax(0, 1fr); }
.ficha-identidad > .tarjeta { margin-bottom: 0; }

/* El repositorio y los gastos van juntos cuando la pantalla da para los dos.
   El `:has()` es lo que evita la media tarjeta vacia: Compras no ve los
   gastos, y sin el, el repositorio se quedaria a medio ancho con un hueco al
   lado. Si el navegador no soporta :has(), se queda en una columna y no se
   rompe nada. */
.ficha-anexos { display: grid; gap: var(--hueco-3); align-items: start; }
@media (min-width: 1700px) {
  .ficha-anexos:has(> .tarjeta:nth-child(2)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.ficha-anexos > .tarjeta { margin-bottom: 0; }

.contactos { list-style: none; margin: 0; padding: 0; }
.contactos li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.contactos li:first-child { padding-top: 2px; border-top: none; }
.contacto-datos { min-width: 0; }
.contacto-nombre {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--t-base); font-weight: 700;
  color: var(--jm-gray);
}
.contacto-puesto { margin-top: 1px; font-size: var(--t-chico); color: var(--jm-gray-soft); }
.contacto-vias {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  margin-top: 6px;
  font-size: var(--t-chico);
}
.contacto-vias a { display: inline-flex; align-items: center; gap: 5px; }
.contacto-vias .icono { width: 13px; height: 13px; color: var(--jm-gray-soft); }
.contacto-telefono { color: var(--jm-sub); font-variant-numeric: tabular-nums; }
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }

label, .etiqueta-campo {
  margin-bottom: 6px;
  font-size: var(--t-base); font-weight: 600;
  color: var(--jm-gray);
}
.obligatorio { color: var(--alerta); font-weight: 700; }
label .obligatorio { color: var(--alerta); margin-left: 2px; }

/* Las casillas traen su propio tamano; el min-height es para los campos de
   captura, que deben quedar a la misma altura que un boton. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-height: 40px;
}
input, select, textarea {
  padding: 9px 12px;
  border: 1px solid var(--borde-control);
  border-radius: 8px;
  background: #fff;
  color: var(--jm-gray);
  box-shadow: 0 1px 2px rgba(15,42,78,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not(:focus):hover,
select:not(:focus):hover, textarea:not(:focus):hover { border-color: var(--borde-control-hover); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--jm-blue);
  box-shadow: 0 0 0 3px rgba(30,128,200,.18);
}
input::placeholder, textarea::placeholder { color: #66778B; opacity: 1; }
input[readonly] { background: var(--hundido); color: var(--jm-sub); box-shadow: none; }
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* La flecha de la lista la dibuja el sistema y no el navegador: la nativa
   cambia de forma entre Edge, Chrome y Safari y queda pegada al borde. */
select {
  white-space: nowrap;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6C81' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}
select[multiple] { background-image: none; padding-right: 12px; }
.control > select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6C81' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),
    linear-gradient(to right, var(--segmento) 40px, var(--segmento-linea) 40px 41px, transparent 41px);
  background-position: right 12px center, 0 0;
  background-size: 16px 16px, auto;
}
select:disabled, input:disabled, textarea:disabled {
  background-color: var(--hundido); color: var(--jm-gray-soft);
  border-color: var(--jm-border); box-shadow: none; cursor: not-allowed;
}

/* Lista desplegable del sistema, no la del sistema operativo. Donde el
   navegador ya permite dibujarla (Edge y Chrome recientes), el menú abierto
   lleva el mismo marco, radio, sombra y renglones que el menú de tres puntos
   y el filtro de categorías; en los demás se queda la nativa, que funciona
   igual. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select {
    display: flex; align-items: center; gap: 8px;
    padding-right: 12px;
    background-image: none;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
  }
  select::picker-icon {
    content: "";
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-left: auto;
    background-color: var(--jm-gray-soft);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate .18s var(--ease-out), background-color .15s ease;
  }
  select:open::picker-icon { rotate: 180deg; background-color: var(--jm-blue-texto); }
  .control > select {
    background-image: linear-gradient(to right, var(--segmento) 40px, var(--segmento-linea) 40px 41px, transparent 41px);
    background-size: auto;
  }
  /* El texto elegido va en su propia caja, que se encoge y se corta con
     puntos suspensivos; la flecha se queda con sus 16 px siempre. Sin esto,
     un texto más largo que la lista empujaba la flecha fuera del borde. */
  select > button {
    all: unset;
    display: flex; align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  select selectedcontent {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  select:open { border-color: var(--jm-blue); box-shadow: 0 0 0 3px rgba(30,128,200,.18); }

  ::picker(select) {
    margin-block: 6px;
    padding: 6px;
    min-inline-size: anchor-size(self-inline);
    max-block-size: min(320px, 60dvh);
    overflow-y: auto;
    border: 1px solid var(--jm-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15,42,78,.06), 0 14px 32px rgba(15,42,78,.16);
    opacity: 0;
    translate: 0 -4px;
    transition: opacity .15s ease, translate .15s var(--ease-out),
                display .15s allow-discrete, overlay .15s allow-discrete;
  }
  select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style {
    select:open::picker(select) { opacity: 0; translate: 0 -4px; }
  }

  select option {
    display: flex; align-items: center; gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: var(--t-base);
    color: var(--jm-gray);
    cursor: pointer;
  }
  select option:hover, select option:focus { background: var(--hundido); outline: none; }
  select option:focus-visible { box-shadow: inset 0 0 0 2px var(--jm-blue); }
  select option:checked { background: #EDF5FC; color: var(--jm-blue-texto); font-weight: 600; }
  select option:disabled { color: var(--jm-gray-soft); cursor: not-allowed; }
  select option::checkmark {
    order: 1;
    margin-left: auto;
    content: "";
    width: 16px; height: 16px;
    background-color: var(--jm-blue-texto);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (prefers-reduced-motion: reduce) {
    ::picker(select) { translate: none; }
    select::picker-icon { transition: none; }
  }
}

/* Lista con búsqueda (buscable.js): se ve como cualquier lista del sistema
   -mismo alto, segmento con ícono y flecha-, pero se puede escribir en ella.
   El menú abierto es el mismo de la lista: marco, radio, sombra, renglones
   de 36 px, lo elegido en azul con palomita. El <select> de origen se queda
   debajo, invisible, porque es el que se guarda y se valida. */
.control > select.buscable-origen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.buscable-campo {
  padding-right: 36px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.buscable-campo:focus { cursor: text; }
.buscable-flecha {
  position: absolute; z-index: 1;
  top: 50%; right: 12px;
  width: 16px; height: 16px;
  margin-top: -8px;
  color: var(--jm-gray-soft);
  pointer-events: none;
  transition: transform .18s var(--ease-out), color .15s ease;
}
.buscable-flecha svg { display: block; width: 100%; height: 100%; }
.buscable-campo[aria-expanded="true"] + .buscable-flecha { transform: rotate(180deg); color: var(--jm-blue-texto); }
.buscable-campo:disabled + .buscable-flecha { opacity: .5; }
.control:has(> select.buscable-origen.campo-invalido) > .buscable-campo {
  --segmento: #FDF1F1; --segmento-linea: #F3CDCD;
  border-color: var(--alerta);
  box-shadow: 0 0 0 3px rgba(185,28,28,.12);
}

.buscable-panel {
  position: fixed; z-index: 700;
  min-width: 240px;
  max-width: min(420px, calc(100vw - 16px));
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--jm-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,42,78,.06), 0 14px 32px rgba(15,42,78,.16);
  scrollbar-width: thin;
}
.buscable-panel[hidden] { display: none; }
.buscable-panel:not([hidden]):not(.sin-animar) { transform-origin: 20px 0; animation: pop-entra .15s var(--ease-out) both; }
.buscable-panel.arriba:not([hidden]):not(.sin-animar) { transform-origin: 20px 100%; }
.buscable-opcion {
  display: flex; align-items: center; gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: var(--t-base);
  color: var(--jm-gray);
  cursor: pointer;
  user-select: none;
}
.buscable-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.buscable-opcion.activa { background: var(--hundido); }
.buscable-opcion[aria-selected="true"] { background: #EDF5FC; color: var(--jm-blue-texto); font-weight: 600; }
.buscable-opcion[aria-selected="true"].activa { background: #E0EDF9; }
.buscable-opcion[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  background-color: var(--jm-blue-texto);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.buscable-opcion[aria-disabled="true"] { color: var(--jm-gray-soft); cursor: not-allowed; }
.buscable-opcion mark { padding: 0; background: none; color: var(--jm-blue-texto); font-weight: 700; }
.buscable-opcion.accion { color: var(--jm-blue-texto); font-weight: 600; }
.buscable-separador { height: 1px; margin: 4px 6px; background: var(--linea); }
.buscable-vacio { padding: 12px 10px; font-size: var(--t-chico); color: var(--jm-gray-soft); text-align: center; }
.buscable-mas { margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--linea); font-size: var(--t-mini); color: var(--jm-gray-soft); }
@media (prefers-reduced-motion: reduce) {
  .buscable-flecha { transition: none; }
}

/* Campo con ícono: el ícono dice qué dato va sin leer la etiqueta, y va en
   su propio segmento para que no se confunda con lo escrito.

   El segmento lo pinta el mismo campo como parte de su fondo, así que queda
   recortado por su borde y su radio a cualquier escala de pantalla; antes era
   una capa encima, metida a un píxel del borde, y en pantallas al 125 % o
   150 % ese píxel se redondeaba distinto que el borde y el segmento parecía
   salirse. El ícono es lo único que va encima: 16 px fijos, centrados en un
   segmento de 40, y nada en el campo se mueve ni cambia de tamaño al pasar
   el cursor o al enfocarlo, solo de color. */
.control {
  position: relative;
  display: flex; align-items: stretch;
  min-width: 0;
  --control-icono: 16px;
  --segmento: var(--hundido);
  --segmento-linea: var(--linea);
}
.control > input, .control > select, .control > textarea {
  flex: 1 1 auto; width: 100%; min-width: 0;
  padding-left: 52px;
  background-image: linear-gradient(to right, var(--segmento) 40px, var(--segmento-linea) 40px 41px, transparent 41px);
  background-repeat: no-repeat;
}
.control > textarea {
  background-image:
    linear-gradient(to right, var(--segmento) 40px, var(--segmento-linea) 40px 41px, transparent 41px),
    linear-gradient(var(--segmento-linea), var(--segmento-linea));
  background-size: 100% 38px, 41px 1px;
  background-position: 0 0, 0 38px;
}
.control > .icono {
  position: absolute; z-index: 1;
  top: 50%; left: calc(1px + (40px - var(--control-icono)) / 2);
  flex: none;
  width: var(--control-icono); height: var(--control-icono);
  margin-top: calc(var(--control-icono) / -2);
  color: var(--jm-gray-soft);
  pointer-events: none;
  transition: color .15s ease;
}
.control:has(> textarea) > .icono { top: 12px; margin-top: 0; }
.control:focus-within > .icono { color: var(--jm-blue-texto); }

/* Los números no llevan las flechitas del navegador: se dibujaban dentro del
   texto, junto a la unidad, con otro gris y otro tamaño. Con el teclado se
   sigue subiendo y bajando con las flechas. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.pista { margin-top: 4px; font-size: var(--t-chico); color: var(--jm-gray-soft); }

.acciones {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Cuatro botones y ninguno más. Principal: la acción que cierra la tarea, uno
   por vista. Secundario: lo demás. Suave: agregar algo a una lista, que se
   tiene que ver pero no compite con la principal. Peligro: quitar. */
.boton {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: var(--t-base); font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.boton.principal {
  background: var(--jm-blue-texto); color: #fff;
  box-shadow: 0 1px 2px rgba(15,42,78,.2), inset 0 1px 0 rgba(255,255,255,.14);
}
.boton.principal:hover { background: var(--jm-blue-texto-hover); }
.boton.secundario {
  background: #fff; color: var(--jm-gray);
  border-color: var(--borde-control);
  box-shadow: 0 1px 2px rgba(15,42,78,.05);
}
.boton.secundario:hover { background: var(--hundido); border-color: var(--borde-control-hover); }
.boton.secundario .icono { color: var(--jm-sub); }
.boton.suave { background: #EDF5FC; color: var(--jm-blue-texto); border-color: #C3DBF0; }
.boton.suave:hover { background: #E0EDF9; border-color: #9FC4E6; }
.boton.atencion { background: var(--aviso); color: #fff; box-shadow: 0 1px 2px rgba(120,53,15,.2); }
.boton.atencion:hover { background: #92400E; }
.boton.peligro { background: #fff; color: #A51D1D; border-color: #F0C3C3; }
.boton.peligro:hover { background: #FDF1F1; border-color: #E08D8D; }
.boton.chico { min-height: 32px; padding: 5px 12px; font-size: var(--t-chico); border-radius: 8px; }
.boton:disabled, .boton[aria-disabled="true"],
.boton-icono:disabled, .boton-icono[aria-disabled="true"] {
  background: #EEF2F6;
  color: #66778B;
  border-color: #DCE4EE;
  box-shadow: none;
  cursor: not-allowed;
}
.boton:disabled .icono, .boton[aria-disabled="true"] .icono { color: inherit; }

/* Acción de un solo ícono: editar una tarjeta, abrir el menú de un renglón.
   El nombre de la acción va en aria-label y aparece al pasar el cursor. */
.boton-icono {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--jm-sub);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.boton-icono .icono { width: 18px; height: 18px; }
.boton-icono:hover { background: var(--azul-suave); color: var(--jm-blue-texto); }
.boton-icono.con-borde { background: #fff; border-color: var(--borde-control); box-shadow: 0 1px 2px rgba(15,42,78,.05); }
.boton-icono.con-borde:hover { background: var(--hundido); border-color: var(--borde-control-hover); color: var(--jm-blue-texto); }
.boton-icono.peligro:hover { background: #FDECEC; color: var(--alerta); }
.boton-icono:focus-visible, .boton:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }

/* El nombre de un botón de ícono y las ayudas en línea salen en un solo
   globo colgado del <body> (globo.js): ningún contenedor lo recorta. */
.globo {
  position: fixed; z-index: 900;
  top: 0; left: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px 10px 7px;
  border-radius: 8px;
  background: var(--jm-navy);
  color: #fff;
  font-size: var(--t-chico); font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 8px 22px rgba(15,42,78,.26);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(.97);
  transform-origin: var(--flecha, 50%) 100%;
  transition: opacity .14s ease, transform .14s var(--ease-out);
}
.globo.abajo { transform: translateY(-3px) scale(.97); transform-origin: var(--flecha, 50%) 0; }
.globo.visible { opacity: 1; transform: none; }
.globo.al-instante { transition: none; }
.globo::after {
  content: "";
  position: absolute;
  top: 100%; left: var(--flecha, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--jm-navy);
}
.globo.abajo::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--jm-navy); }
@media (prefers-reduced-motion: reduce) {
  .globo { transform: none !important; }
}

/* ── Tablas ──────────────────────────────────────────────────────────────── */

/* Las tablas anchas se desplazan dentro de su marco. `contain: paint` es lo que
   evita que su ancho se propague al documento: con overflow-x a secas, Blink
   suma el contenido de la tabla al scroll del root y la página entera se
   arrastra en horizontal. */
.tabla-marco {
  overflow-x: auto;
  max-width: 100%;
  contain: paint;
}

table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
th {
  padding: 11px 12px;
  text-align: left;
  background: var(--hundido);
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-sub);
  white-space: nowrap;
  border-bottom: 1px solid var(--jm-border);
}
thead th:first-child { border-top-left-radius: 10px; }
thead th:last-child { border-top-right-radius: 10px; }
td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: middle;
  color: var(--jm-gray);
  border-bottom: 1px solid var(--linea);
}
tbody tr:last-child td { border-bottom: none; }
/* Las de captura se quedan compactas: son para teclear, no para leer. */
.matriz th, .matriz td { padding: 9px 10px; }
tbody tr:hover td { background: #FBFCFE; }
tbody tr.clicable { cursor: pointer; }


tbody tr.clicable:hover td { background: var(--azul-suave); }
th.numero, td.numero { text-align: right; font-variant-numeric: tabular-nums; }
.dato-folio {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-chico);
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--jm-blue-texto);
}
/* Sin color: en esta paleta el verde significa "correcto", y un MDF puede
   estar por debajo del minimo negociado. El peso basta para distinguirlo. */
.dato-porcentaje { font-weight: 800; }
.dato-fecha { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jm-sub); }

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--jm-border);
  border-radius: 8px;
  background: #fff;
  color: var(--jm-sub);
  font: inherit;
  font-size: var(--t-chico);
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
input[type="file"]:hover::file-selector-button {
  background: var(--azul-suave);
  border-color: #B9D4E8;
  color: var(--jm-blue-texto);
}

.proveedor-nombre { display: flex; align-items: center; gap: 10px; }
.avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #E0F2FE; color: #075985;
  font-size: var(--t-base); font-weight: 700;
}
.proveedor-nombre .detalle { font-size: var(--t-chico); color: var(--jm-gray-soft); }

.fila-menu { position: relative; display: inline-block; }
.fila-menu-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--jm-sub);
  cursor: pointer;
}
.fila-menu-boton .icono { width: 18px; height: 18px; }
.fila-menu-boton:hover, .fila-menu-boton[aria-expanded="true"] { background: var(--azul-suave); color: var(--jm-blue-texto); }
.fila-menu-panel {
  position: fixed;
  z-index: 560;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--jm-border);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15,42,78,.06), 0 14px 32px rgba(15,42,78,.16);
  padding: 6px;
}
/* Los renglones del menu pueden ser enlace, boton de un formulario o un aviso
   de que la accion no se puede: los tres se ven igual. */
.fila-menu-panel a,
.fila-menu-panel button,
.fila-menu-panel .menu-bloqueado {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: var(--t-base);
  text-align: left;
  color: var(--jm-navy);
  text-decoration: none;
  cursor: pointer;
}
.fila-menu-panel form { margin: 0; }
.fila-menu-panel a:hover,
.fila-menu-panel button:hover { background: var(--hundido); color: var(--jm-navy); }
.fila-menu-panel a .icono, .fila-menu-panel button .icono { width: 16px; height: 16px; color: var(--jm-gray-soft); }
.fila-menu-panel .peligroso { color: var(--alerta); }
.fila-menu-panel .peligroso .icono { color: currentColor; }
.fila-menu-panel .peligroso:hover { background: #FDF1F1; color: var(--alerta); }
.fila-menu-panel form + button, .fila-menu-panel button + form,
.fila-menu-panel form:has(.peligroso) { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 4px; }
.fila-menu-panel .menu-bloqueado { color: var(--jm-gray-soft); cursor: not-allowed; }

.tabla-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--jm-border);
  font-size: var(--t-base);
  color: var(--jm-gray-soft);
  flex-wrap: wrap;
}
.paginador { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.paginador-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--jm-border);
  border-radius: 6px;
  color: var(--jm-navy);
}
.paginador-boton.deshabilitado { color: #C7D2DD; cursor: default; }
.paginador-boton:not(.deshabilitado):not(.actual):hover {
  background: #F3F4F6;
  border-color: #B9CEE0;
}
.paginador-boton.actual {
  background: var(--jm-blue-texto);
  border-color: var(--jm-blue-texto);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.paginador-puntos { color: var(--jm-gray-soft); padding: 0 2px; }

.tabla-pie-info { flex-shrink: 0; }
.paginador-tamano {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: var(--t-chico); font-weight: 400;
  color: var(--jm-gray-soft);
  white-space: nowrap;
}
.paginador-tamano select {
  min-height: 30px;
  padding: 4px 8px;
  font-size: var(--t-chico);
}

/* El nombre de un grupo de renglones: se distingue por el tinte y el peso,
   sin la franja oscura que competía con el encabezado de la tabla. */
.agrupador th {
  padding-top: 12px;
  background: #EAF3FB;
  border-bottom: 1px solid #D2E3F2;
  color: var(--jm-navy);
  font-size: var(--t-base); font-weight: 700;
}

/* ── Tabla o tarjetas ────────────────────────────────────────────────────── */
/* Una tabla de ocho columnas deja de caber mucho antes de llegar al telefono:
   a partir de cierto ancho se recorta y hay que arrastrarla en horizontal para
   leer un renglon. En vez de eso, el mismo contenido se dibuja dos veces y el
   ancho decide cual se ve. El interruptor solo sirve para forzar una de las
   dos cuando el usuario prefiere otra cosa.

   Los cortes de cada pantalla estan MEDIDOS, no puestos a ojo: es el ancho de
   ventana en el que esa tabla empieza a recortarse dentro de su marco. Van mas
   abajo, cada uno con su numero. */

.vista-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--jm-bg2);
  border: 1px solid var(--jm-border);
  border-radius: 10px;
}
.vista-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px;
  padding: 5px 11px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--jm-sub);
  font-size: var(--t-mini); font-weight: 800;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vista-switch-btn .icono { width: 14px; height: 14px; }
.vista-switch-btn:hover { color: var(--jm-blue-texto); }
.vista-switch-btn.activo {
  background: #fff;
  color: var(--jm-blue-texto);
  box-shadow: 0 1px 3px rgba(15,42,78,.12);
}
/* En telefono no hay nada que elegir: la tabla no cabe de ninguna manera. */
@media (max-width: 760px) { .vista-switch { display: none; } }

/* Vive con el conteo, al final de la barra de filtros: es un control de la
   lista, no una accion de la pantalla. */
.filtros .conteo + .vista-switch { margin-left: 10px; }
.filtros .vista-switch:first-child { margin-left: auto; }
.barra-vista .vista-switch { flex-shrink: 0; }
.barra-vista {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 2px;
}

.tarjetas-lista {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
/* Un renglón de la lista dibujado como tarjeta: quién es arriba, sus datos
   con ícono en medio y, si tiene algo pendiente, el contorno lo marca y el
   pie lo dice con ícono y texto. */
.tarjeta-fila {
  position: relative;
  display: flex; flex-direction: column;
  padding: 16px 16px 12px;
  background: #fff;
  border: 1px solid var(--jm-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,42,78,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta-fila:hover { border-color: #B9CEE0; box-shadow: 0 6px 18px rgba(22,104,163,.09); }
}
.tarjeta-fila-cabecera {
  display: flex; align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--linea);
}
.tarjeta-fila-cabecera > .avatar { width: 40px; height: 40px; font-size: var(--t-medio); }
.tarjeta-fila-cabecera > .fila-menu { margin: -4px -6px 0 auto; }
.tarjeta-fila-titulo { flex: 1 1 auto; min-width: 0; }
.tarjeta-fila-titulo a, .tarjeta-fila-nombre {
  display: block;
  font-size: var(--t-medio); font-weight: 700;
  line-height: 1.3;
  color: var(--jm-blue-texto);
  overflow-wrap: anywhere;
}
.tarjeta-fila-nombre { color: var(--jm-gray); }
.tarjeta-fila-detalle {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
  font-size: var(--t-chico); font-weight: 500;
  color: var(--jm-gray-soft);
  min-width: 0;
}
.tarjeta-fila-detalle .icono { width: 13px; height: 13px; flex-shrink: 0; }
/* Las píldoras van debajo del nombre y no a su lado: una etiqueta larga
   ("Autorizada por excepción") se acomoda sin empujar ni tapar el nombre, y
   todas las tarjetas quedan alineadas igual. */
.tarjeta-fila-pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.tarjeta-fila-dato {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 5px 0;
}
.tarjeta-fila-dato + .tarjeta-fila-dato { border-top: 1px dashed var(--linea); }
.tarjeta-fila-dato .etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  font-size: var(--t-chico); font-weight: 500;
  color: var(--jm-gray-soft);
}
.tarjeta-fila-dato .etiqueta .icono { width: 15px; height: 15px; color: var(--jm-gray-soft); }
.tarjeta-fila-dato .valor {
  min-width: 0;
  font-size: var(--t-base); font-weight: 600;
  text-align: right;
  color: var(--jm-gray);
  overflow-wrap: anywhere;
}
.tarjeta-fila-pie { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.tarjeta-fila-completitud {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
  font-size: var(--t-chico); font-weight: 500;
  color: var(--jm-gray-soft);
}
.tarjeta-fila .barra-completitud { width: 100%; height: 6px; border-radius: 3px; }
.tarjeta-fila .barra-completitud span { border-radius: 3px; }
.tarjeta-fila.clicable { cursor: pointer; }

/* Pendientes: el contorno cambia de color y el pie lo dice. Rojo es vencido o
   devuelto; ámbar es lo que espera o está incompleto; verde, lo concluido. */
.tarjeta-fila-aviso {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 12px -16px 0;
  padding: 9px 16px 10px;
  border-top: 1px solid;
  font-size: var(--t-chico); font-weight: 600;
  line-height: 1.4;
}
.tarjeta-fila-aviso:last-child { margin-bottom: -12px; border-radius: 0 0 13px 13px; }
.tarjeta-fila-aviso .icono { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.tarjeta-fila-aviso.alerta { background: #FDF2F2; border-color: #F3CDCD; color: #A51D1D; }
.tarjeta-fila-aviso.aviso { background: #FEF8EA; border-color: #F2DDB0; color: #8A4A06; }
.tarjeta-fila-aviso + .tarjeta-fila-aviso { margin-top: 0; }
/* Lo pendiente (data-marca, lo decide main.py): la tarjeta con su contorno
   y el renglón de la tabla con una franja en su orilla izquierda. Es la
   misma marca en las dos vistas y es lo que cuenta el número de la pestaña.
   Rojo, vencido o devuelto; ámbar, falta un paso; verde, concluido. */
[data-marca="alerta"] { --marca-contorno: #E7A9A9; --marca-franja: #D64545; --marca-sombra: rgba(165,29,29,.10); }
[data-marca="aviso"] { --marca-contorno: #E6C47F; --marca-franja: #D9901A; --marca-sombra: rgba(138,74,6,.10); }
[data-marca="correcto"] { --marca-contorno: #B9DDC6; --marca-franja: #8CCBA3; }
.tarjeta-fila[data-marca="alerta"], .tarjeta-fila[data-marca="aviso"],
.condicion[data-marca="alerta"], .condicion[data-marca="aviso"],
.tarjeta[data-marca="alerta"], .tarjeta[data-marca="aviso"] {
  border-color: var(--marca-contorno);
  box-shadow: 0 0 0 1px var(--marca-contorno);
}
.tarjeta-fila[data-marca="correcto"] { border-color: var(--marca-contorno); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-fila[data-marca="alerta"]:hover, .tarjeta-fila[data-marca="aviso"]:hover {
    box-shadow: 0 0 0 1px var(--marca-contorno), 0 6px 18px var(--marca-sombra);
  }
}
tbody > tr[data-marca="alerta"] > td:first-child,
tbody > tr[data-marca="aviso"] > td:first-child,
tbody > tr[data-marca="correcto"] > td:first-child { box-shadow: inset 3px 0 0 var(--marca-franja); }

/* Una píldora dentro de una tarjeta o de un valor puede partirse en dos
   renglones en vez de salirse o taparse con lo de al lado. */
.tarjeta-fila .pildora, .valor .pildora { white-space: normal; text-align: left; max-width: 100%; }

/* La preferencia va en <html> y se pone en el <head>, antes de dibujar: así
   la lista nunca se ve primero de una forma y luego de la otra. */
:root[data-vista="tabla"] .lista > .tarjetas-lista { display: none; }
:root[data-vista="tarjetas"] .lista > .tabla-marco { display: none; }
:root[data-vista="tarjetas"] .lista > .tarjetas-lista { display: grid; }

/* Automatico, con el ancho medido de cada tabla. */
@media (max-width: 1219px) {
  :root:not([data-vista]) .lista-proveedores > .tabla-marco { display: none; }
  :root:not([data-vista]) .lista-proveedores > .tarjetas-lista { display: grid; }
}
@media (max-width: 1349px) {
  :root:not([data-vista]) .lista-condiciones > .tabla-marco { display: none; }
  :root:not([data-vista]) .lista-condiciones > .tarjetas-lista { display: grid; }
}
@media (max-width: 999px) {
  :root:not([data-vista]) .lista-vigencias > .tabla-marco { display: none; }
  :root:not([data-vista]) .lista-vigencias > .tarjetas-lista { display: grid; }
}
/* Autorizaciones nace al reves: la tarjeta es la vista de siempre porque ahi
   se decide, y la tabla es para barrer muchas de un vistazo. */
/* Al llegar desde "Revisar", el caso no debe quedar debajo de la barra. */
.condicion.pendiente { scroll-margin-top: 118px; }
.lista-autorizaciones > .tabla-marco { display: none; }
.lista-autorizaciones > .tarjetas-lista { display: grid; grid-template-columns: 1fr; }
/* La tarjeta de autorización ya trae su propio marco con la marca. */
:root[data-vista="tabla"] .lista-autorizaciones > .tabla-marco { display: block; }
:root[data-vista="tabla"] .lista-autorizaciones > .tarjetas-lista { display: none; }

/* ── Píldoras de estado ──────────────────────────────────────────────────── */

/* Pastillas de estado. Cada tono sale de la paleta de JM y lleva un filo
   interior un paso más oscuro que su fondo: sobre las tarjetas blancas y los
   renglones tenues de la tabla, la pastilla conserva su contorno sin
   necesitar sombra. El punto dice "esto es un estado"; las informativas (una
   marca, un fondo de marketing) no lo llevan. */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--pildora-filo, transparent);
  font-size: var(--t-chico); font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pildora.correcta::before, .pildora.espera::before,
.pildora.alerta::before, .pildora.neutra::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent);
  flex-shrink: 0;
}
.pildora-apilada { display: flex; width: fit-content; margin-top: 4px; }
.pildora.neutra { background: #EEF2F6; color: #3B4C60; --pildora-filo: #D6DFE9; }
.pildora.info { background: #E7F1FA; color: #125A8F; --pildora-filo: #C6DCEF; }
.pildora.espera { background: #FEF5E1; color: #8A4A06; --pildora-filo: #F2D9A2; }
.pildora.correcta { background: #E6F6EC; color: #17613A; --pildora-filo: #BCE2CA; }
.pildora.alerta { background: #FDECEC; color: #A51D1D; --pildora-filo: #F3C4C4; }

/* ── Calificación de completitud ─────────────────────────────────────────── */
/* Es un warning, no un bloqueo: JM fue explícito en que un registro incompleto
   avanza igual. El color solo indica qué tan lejos está de estar completo. */

.calificacion {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--t-base); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calificacion .total { font-size: var(--t-mini); font-weight: 600; color: #4B5563; }
.calificacion.alta { color: var(--correcto); }
.calificacion.media { color: var(--aviso); }
.calificacion.baja { color: var(--alerta); }

.barra-completitud {
  width: 54px; height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--jm-border);
  overflow: hidden;
}
.barra-completitud span { display: block; height: 100%; border-radius: 2px; }
.barra-completitud .alta { background: var(--correcto); }
.barra-completitud .media { background: var(--aviso); }
.barra-completitud .baja { background: var(--alerta); }

/* ── Bloque de condición comercial ───────────────────────────────────────── */
/* La llave triple se muestra siempre junta porque es lo que distingue un
   renglón de otro: el mismo proveedor y la misma marca desde otro origen son
   condiciones distintas. */

/* Una condición por renglón: la cabecera dice cuál es, en qué estado está y
   qué se puede hacer; el detalle se abre a pedido. */
.condiciones-lista { display: grid; gap: 10px; }

/* Sin overflow: hidden: recortaba el menú y los globos de sus botones. Las
   esquinas las redondea la propia cabecera. */
.condicion {
  border: 1px solid var(--jm-border);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 14px;
  /* Al llegar desde el llamado de arriba, el renglon quedaria debajo de la
     barra superior si no se le reserva su alto. */
  scroll-margin-top: 118px;
}
.condiciones-lista > .condicion { margin-bottom: 0; }
.condicion:target {
  border-color: var(--aviso);
  box-shadow: 0 0 0 3px rgba(180,83,9,.14);
}
.condicion-cabecera {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 12px 14px 12px 16px;
  border-radius: 11px 11px 0 0;
  background: var(--hundido);
  border-bottom: 1px solid var(--jm-border);
}
.condicion[data-plegable] > .condicion-cabecera { background: #fff; border-bottom-color: transparent; transition: background-color .15s ease, border-color .15s ease; }
.js .condicion[data-plegable] > .condicion-cabecera { cursor: pointer; }
.js .condicion[data-plegable]:not(.abierta) > .condicion-cabecera { border-radius: 11px; }
.condicion[data-plegable] > .condicion-cabecera:hover { background: var(--hundido); }
.condicion[data-plegable].abierta > .condicion-cabecera { border-bottom-color: var(--linea); }
.condicion-marca {
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--azul-suave);
  box-shadow: inset 0 0 0 1px #D2E3F2;
  color: var(--jm-blue-texto);
  font-size: var(--t-medio); font-weight: 700;
}
.condicion-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 160px; }
.condicion-resumen { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.llave {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--t-base); font-weight: 700;
  color: var(--jm-navy);
}
.llave .separador { color: var(--jm-gray-soft); font-weight: 400; }
.llave .origen { color: var(--jm-blue-texto); }
.condicion-cabecera .derecha { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.condicion-cabecera .derecha form { margin: 0; }
.condicion-plegar .icono { transition: transform .22s var(--ease-out); }
.condicion.abierta .condicion-plegar .icono { transform: rotate(180deg); }

/* El detalle se pliega con la altura de su renglón de rejilla: de 0fr a 1fr
   anima sin medir nada con JavaScript. Sin JavaScript todo queda abierto. */
.condicion-marco { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s var(--ease-out); }
.js .condicion[data-plegable]:not(.abierta) > .condicion-marco { grid-template-rows: 0fr; }
.condicion-marco > .condicion-cuerpo { min-height: 0; overflow: hidden; }
.condicion-marco > .condicion-cuerpo { padding-block: 0; }
.condicion-marco > .condicion-cuerpo::before,
.condicion-marco > .condicion-cuerpo::after { content: ""; display: block; height: 14px; }
.condicion-marco > .condicion-cuerpo > .condicion-columnas { margin-top: 0; }

.condicion-cuerpo { padding: var(--hueco-2) 16px; }
.grupo-condicion { margin-top: var(--hueco-2); }
.texto-condicion {
  margin: 0;
  max-width: var(--medida);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--jm-gray-soft);
}
/* 190 y no 150: cuando la condicion se parte en dos columnas, al bloque de
   datos le quedan ~880 px y con 150 caben cinco celdas tan angostas que
   "MDF 3 %" se parte en dos renglones. */
.datos-condicion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.dato {
  padding: 10px 12px;
  background: var(--hundido);
  border-radius: 10px;
  min-width: 0;
}
.dato.con-icono { display: flex; align-items: center; gap: 10px; }
.dato-icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: #EAF4FB;
  color: var(--jm-blue-texto);
  font-size: 14px;
}
.dato-texto { min-width: 0; }
/* Los nombres de los campos de una condición son datos que se leen de corrido,
   no encabezados de estructura: a 10.5px en versalitas, "Reposición de
   empaques" se partía en dos renglones y costaba leerlo. Las mayúsculas se
   quedan para lo que sí ordena la pantalla (títulos de tarjeta y de columna). */
.dato .etiqueta {
  font-size: var(--t-chico); font-weight: 500;
  color: var(--jm-gray-soft);
}
.dato .valor { margin-top: 2px; font-size: var(--t-base); font-weight: 600; color: var(--jm-gray); }

.condicion-columnas {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 14px;
}
.condicion-columnas .incumplimientos { margin-top: 14px; }
.condicion-columnas .resolucion { margin: 0; padding-top: 0; border-top: none; }
@media (max-width: 900px) {
  .condicion-columnas { grid-template-columns: 1fr; }
}
/* En el panel lateral no caben dos columnas: la decisión va arriba y el
   comentario abajo. */
.autorizar-en-panel .condicion-columnas { grid-template-columns: minmax(0, 1fr); }
.autorizar-en-panel .resolucion .acciones { justify-content: flex-end; }

.incumplimientos {
  margin: 14px 0 0;
  padding: 12px 16px 4px;
  border: 1px solid #F2DDB0;
  background: #FFFBF0;
  border-radius: 12px;
}
.incumplimientos h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px;
  font-size: var(--t-base); font-weight: 700;
  color: #78350F;
}
.incumplimientos h4 .icono { width: 16px; height: 16px; flex-shrink: 0; }
/* Cada punto es un renglón: el texto a la izquierda, su estado y su acción
   alineados a la derecha, en la misma columna en todos los renglones. */
.hallazgos { margin: 0; padding: 0; list-style: none; }
.hallazgo {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px;
  min-height: 44px;
  padding: 7px 0;
  font-size: var(--t-base); line-height: 1.4;
  color: #6B3A08;
}
.hallazgo + .hallazgo { border-top: 1px solid rgba(138,74,6,.14); }
.hallazgo-texto { flex: 1 1 220px; min-width: 0; }
.hallazgo > .pildora { flex: none; }

/* Decisión punto por punto: cada hallazgo con su "Autorizo / Devuelvo". */
.decisiones-cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.enlace-accion {
  padding: 0;
  border: none;
  background: none;
  font-size: var(--t-chico); font-weight: 700;
  color: var(--jm-blue-texto);
  cursor: pointer;
}
.enlace-accion:hover { text-decoration: underline; text-underline-offset: 3px; }
.punto-decision {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px;
  margin: 0;
  padding: 10px 0;
  border: none;
  border-top: 1px solid #EFD8AE;
  min-width: 0;
}
.decisiones-cabecera + .punto-decision { border-top: none; padding-top: 4px; }
.punto-decision > .punto-texto {
  float: left;
  flex: 1 1 200px;
  padding: 0;
  font-size: var(--t-base); font-weight: 600;
  color: #78350F;
}
.punto-decision > .opciones-fila { gap: 6px; }
.punto-decision > .pista,
.punto-decision > .error-campo { flex-basis: 100%; margin-top: 0; }
.opcion-decision { position: relative; margin: 0; cursor: pointer; }
.opcion-decision input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-decision span {
  display: inline-flex; align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #DFBC7D;
  border-radius: 999px;
  background: #fff;
  font-size: var(--t-chico); font-weight: 700;
  color: #78350F;
  transition: background .12s, border-color .12s, color .12s;
}
.opcion-decision:hover span { border-color: #92400E; }
.opcion-decision.autoriza input:checked + span {
  border-color: #166534; background: #DCFCE7; color: #14532D;
}
.opcion-decision.devuelve input:checked + span {
  border-color: #B91C1C; background: #FEE2E2; color: #991B1B;
}
.opcion-decision.corrige input:checked + span {
  border-color: var(--jm-blue); background: #E4EFF8; color: var(--jm-navy);
}
/* Dirección corrige el valor ahí mismo: los campos van debajo del punto. */
.punto-decision > .punto-correccion {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  padding: 10px 12px;
  border: 1px solid #DCE6F0; border-radius: var(--radio, 10px);
  background: #fff;
}
.punto-correccion[hidden] { display: none; }
.punto-correccion .campo { flex: 1 1 180px; margin: 0; }
.punto-correccion .pista { flex-basis: 100%; margin: 0; }
.opcion-decision input:checked + span::before { content: "✓"; margin-right: 5px; }
.opcion-decision input:focus-visible + span { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.punto-decision.grupo-invalido .opcion-decision span { border-color: var(--alerta); }

/* ── Documentos ──────────────────────────────────────────────────────────── */

.documentos { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.documento {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 0;
}
.documento + .documento { border-top: 1px solid var(--linea); }
.documentos > .documento:first-child { padding-top: 2px; }
.documento-icono {
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #EEF2F6;
  color: var(--jm-sub);
}
.documento-icono .icono { width: 18px; height: 18px; }
.documento.vigente .documento-icono { background: #E6F6EC; color: var(--correcto); }
.documento.por_vencer .documento-icono { background: #FEF5E1; color: #8A4A06; }
.documento.vencido .documento-icono { background: #FDECEC; color: var(--alerta); }
.documento-texto { flex: 1 1 220px; min-width: 0; }
.documento-nombre { font-size: var(--t-base); font-weight: 700; color: var(--jm-gray); }
.documento-detalle { margin-top: 1px; font-size: var(--t-chico); line-height: 1.45; color: var(--jm-gray-soft); overflow-wrap: anywhere; }
.documento-detalle.retiro { color: var(--jm-sub); }
.documento-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.documento-acciones form { margin: 0; }
.documentos.apagados .documento-nombre { color: var(--jm-sub); }
.historial.eliminados { margin-top: 16px; }
.historial.eliminados > .documentos { margin-top: 8px; }

.subir-documento {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--jm-border);
}
.subir-documento h3 {
  margin: 0 0 14px;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--jm-navy);
}
.subir-documento .acciones { margin-top: 16px; }

/* ── Arrastrar y soltar un archivo ───────────────────────────────────────── */

.soltar {
  margin-bottom: var(--hueco-3);
  padding: 22px 20px;
  border: 1px dashed #C3CFDB;
  border-radius: 10px;
  background: #FAFCFE;
  text-align: center;
  transition: border-color .15s, background .15s;
}
/* La clase la pone el script: sin JS el campo nativo tiene que verse. */
.soltar.mejorado { cursor: pointer; }
.soltar.mejorado input[type="file"] { display: none; }
.soltar:not(.mejorado) input[type="file"] { margin-top: 10px; }
.soltar:not(.mejorado) .soltar-elegido { display: none; }

.soltar.mejorado:hover, .soltar:focus-visible {
  border-color: var(--jm-blue);
  background: #F2F8FD;
}
.soltar.encima {
  border-color: var(--jm-blue);
  border-style: solid;
  background: #E8F3FC;
}

.soltar-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #E0F2FE;
  color: #075985;
}
.soltar-icono svg { width: 20px; height: 20px; }

.soltar-titulo {
  margin: 10px 0 2px;
  font-size: var(--t-base); font-weight: 600;
  color: var(--jm-navy);
}
.soltar-mensaje .pista { margin: 0; }

/* Ya con archivo elegido la zona deja de ser invitación y pasa a ser dato. */
.soltar-elegido {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.soltar-elegido .soltar-icono { flex-shrink: 0; }
.soltar-texto { flex: 1; min-width: 0; }
.soltar-nombre {
  font-size: var(--t-base); font-weight: 600;
  color: #1F2937;
  overflow-wrap: anywhere;
}
.soltar-detalle { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.soltar-quitar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--jm-gray-soft);
  cursor: pointer;
}
.soltar-quitar:hover { background: #FEF2F2; color: var(--alerta); }
.soltar-quitar svg { width: 18px; height: 18px; }

.soltar-error {
  margin: 12px 0 0;
  font-size: var(--t-chico);
  color: #991B1B;
}

/* Varios archivos elegidos: una lista de renglones, cada uno como el de un
   solo archivo, más el botón para seguir agregando. */
.soltar-varios {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
  text-align: left;
}
.soltar-varios .soltar-elegido { padding: 8px 10px; border-radius: 8px; background: #fff; }
/* Vista previa de una imagen elegida: la foto en lugar del ícono. Cabe
   completa (contain) para que un producto alargado no se recorte. */
.soltar-elegido.con-miniatura .soltar-icono {
  width: 64px; height: 64px; padding: 4px;
  border: 1px solid var(--jm-border); border-radius: 10px; background: #fff;
  overflow: hidden;
}
.soltar-elegido.con-miniatura .soltar-icono img { width: 100%; height: 100%; object-fit: contain; display: block; }
.soltar-portada {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; background: var(--azul-suave);
  font-size: 11px; font-weight: 600; color: var(--jm-blue-texto);
}
.soltar-agregar { margin-top: 14px; }

/* El campo va escondido detrás del botón: se elige el archivo y el formulario
   se manda solo. */
.boton.adjuntar { position: relative; overflow: hidden; cursor: pointer; }
.boton.adjuntar input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.capturar-gasto {
  margin-top: var(--hueco-3);
  padding-top: var(--hueco-3);
  border-top: 1px solid var(--jm-border);
}
.capturar-gasto h3 {
  margin: 0 0 var(--hueco-2);
  font-size: var(--t-base); font-weight: 700;
  color: var(--jm-navy);
}
.capturar-gasto .acciones { margin-top: 16px; }

/* ── Vista previa de un documento ────────────────────────────────────────── */

.visor-fondo {
  position: fixed;
  inset: 0;
  /* Encima de las ventanas: una versión anterior se abre desde el historial. */
  z-index: 570;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 42, 78, .45);
}
.visor-tarjeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 940px;
  height: 100%;
  max-height: 88vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sombra-flotante);
  overflow: hidden;
}
.visor-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--jm-border);
  flex-shrink: 0;
}
.visor-texto { min-width: 0; }
.visor-cabecera h2 {
  margin: 0;
  font-size: var(--t-medio); font-weight: 700;
  color: var(--jm-navy);
}
.visor-archivo {
  margin: 2px 0 0;
  font-size: var(--t-chico);
  color: var(--jm-gray-soft);
  overflow-wrap: anywhere;
}
.visor-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.visor-cerrar {
  width: 34px; height: 34px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--jm-gray-soft);
  font-size: var(--t-titulo);
  line-height: 1;
  cursor: pointer;
}
.visor-cerrar:hover { background: #EEF2F6; color: var(--jm-navy); }

.visor-cuerpo {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--jm-bg);
}
.visor-marco { width: 100%; height: 100%; border: none; background: #fff; }
.visor-imagen { max-width: 100%; max-height: 100%; object-fit: contain; }

.visor-sin-vista {
  max-width: 44ch;
  text-align: center;
  font-size: var(--t-base);
  color: var(--jm-gray-soft);
}
.visor-sin-vista .titulo {
  margin: 0 0 6px;
  font-size: var(--t-medio); font-weight: 700;
  color: var(--jm-navy);
}
.visor-sin-vista p { margin: 0; line-height: 1.55; }

@media (max-width: 660px) {
  .visor-fondo { padding: 0; }
  .visor-tarjeta { max-height: 100vh; border-radius: 0; }
}

.aviso-linea {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: var(--t-base);
  border: 1px solid var(--jm-border);
  background: var(--jm-bg);
  color: #374151;
}
.aviso-linea.correcta { border-color: #A7F3D0; background: #ECFDF5; color: #065F46; }
.aviso-linea.alerta { border-color: #FECACA; background: #FEF2F2; color: #991B1B; }

/* ── Filtros ─────────────────────────────────────────────────────────────── */

.filtros {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--jm-border);
  box-shadow: 0 1px 3px rgba(15,42,78,.08);
}
.filtros .campo { min-width: 160px; }
/* Por encima de la tabla: la lista del filtro de categorías se despliega
   sobre ella. Sin esto, la animación de entrada de la tabla la tapaba. */
.filtros { position: relative; z-index: 5; }
/* La busqueda no crece sin limite: estirada a todo el renglon dejaba los
   selects contra el borde derecho y el grupo se leia como tres controles
   sueltos en vez de uno solo. */
.filtros .campo:first-child { flex: 1 1 220px; max-width: 420px; }
/* Mientras llega el resultado del filtro la tabla se apaga. El retardo en la
   transicion es a proposito: si la respuesta llega antes, no se alcanza a ver
   nada y la lista solo cambia. */
#resultados { transition: opacity .1s; }
#resultados.filtrando { opacity: .5; pointer-events: none; transition: opacity .15s .18s; }

.filtros .conteo {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: #EAF4FB;
  color: var(--jm-navy);
  font-size: var(--t-chico); font-weight: 700;
}

/* ── Iconos ──────────────────────────────────────────────────────────────── */

.icono {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.boton .icono { width: 16px; height: 16px; stroke-width: 2.1px; }
.sidebar-link .icono, .sidebar-salir .icono { stroke-width: 2.2px; }

/* ── Trámite del alta ────────────────────────────────────────────────── */
/* La misma franja en el alta, en la captura de condiciones y en la ficha:
   tres pasos en renglón, con palomita los terminados, en azul el que está en
   curso. Al guardar, la franja queda en el mismo lugar y solo cambia el paso
   marcado. */

.tramite {
  container: tramite / inline-size;
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--panel);
  view-transition-name: tramite;
}
.modal-fondo .tramite { view-transition-name: none; }
.pasos {
  display: flex; align-items: center;
  margin: 0; padding: 0;
  list-style: none;
}
.paso {
  flex: 1 1 0;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.paso:last-child { flex: 0 0 auto; }
.paso:not(:last-child)::after {
  content: "";
  flex: 1 1 16px;
  min-width: 16px;
  height: 2px;
  margin: 0 12px 0 4px;
  border-radius: 1px;
  background: var(--jm-border);
}
.paso.hecho:not(:last-child)::after { background: var(--correcto); }
.marca-paso {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--jm-border);
  color: #5B6B7D;
  font-size: var(--t-chico); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.marca-paso .icono { width: 12px; height: 12px; stroke-width: 3px; }
.paso.actual .marca-paso { background: var(--jm-blue-texto); color: #fff; box-shadow: 0 0 0 3px rgba(30,128,200,.18); }
.paso.hecho .marca-paso { background: var(--correcto); color: #fff; }
.titulo-paso { font-size: var(--t-chico); font-weight: 700; white-space: nowrap; color: var(--jm-navy); }
.paso.pendiente .titulo-paso { color: var(--jm-gray-soft); font-weight: 600; }
@container tramite (max-width: 520px) {
  .paso:not(.actual) .titulo-paso { display: none; }
  .paso.actual .titulo-paso { white-space: normal; }
  .paso:last-child { flex: 0 1 auto; min-width: 0; }
}

/* Al guardar un paso del trámite, la página siguiente no cae de golpe: la
   franja se desliza a su lugar y lo demás se funde en 200 ms. Solo en ese
   paso; el <head> de base.html descarta la transición en cualquier otra
   navegación. Con movimiento reducido, la franja no viaja: solo se funde. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
::view-transition-group(tramite) { animation-duration: .32s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(tramite) { animation: none; }
}

/* ── Alta de proveedor: dos columnas ────────────────────────────────────── */

.alta-layout > form { min-width: 0; }

/* El reparto de las tarjetas no es automatico: la izquierda lleva la identidad
   del proveedor y la derecha su contacto, su banco y su planta. Asi el orden
   visual y el de tabulacion siguen siendo el orden de captura, que es lo que
   se pierde cuando se deja que las tarjetas caigan solas en dos columnas. */
.alta-columnas {
  display: grid;
  gap: 0 20px;
  align-items: start;
}
.alta-col { min-width: 0; }

.seccion-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.seccion-icono .icono { width: 20px; height: 20px; }
.seccion-icono.info { color: var(--jm-blue-texto); background: var(--azul-suave); box-shadow: inset 0 0 0 1px #D2E3F2; }

/* Alta de proveedor: contactos que se repiten. El primero es el que recibe
   el contrato y no se puede quitar; el resto son de respaldo, por si no
   contesta. */
.lista-contactos { display: flex; flex-direction: column; }
.contacto-fila {
  padding-top: var(--hueco-3);
  margin-top: var(--hueco-3);
  border-top: 1px solid var(--linea);
}
.contacto-fila:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.contacto-fila-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -6px 0 var(--hueco-1);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--jm-sub);
}
#agregarContacto { margin-top: var(--hueco-3); }
template { display: none; }

.tabla-conteo { white-space: nowrap; font-size: var(--t-chico); color: var(--jm-gray-soft); }

.aviso-contexto { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 20px; background: #EAF4FB; border: 1px solid #CFE6F7; border-radius: 12px; color: #0F3D5C; }
.aviso-contexto strong { display: block; color: var(--jm-navy); font-size: var(--t-medio); }
.aviso-contexto p { margin: 3px 0 0; font-size: var(--t-base); }

.autorizaciones-lista { display: flex; flex-direction: column; gap: 14px; }
.autorizaciones-lista .condicion { margin: 0; background: #fff; box-shadow: 0 1px 3px rgba(15,42,78,.08); }
.autorizaciones-intro { margin: 0 0 2px; }

/* Debajo de este ancho cada columna ya no alcanza para dos campos por renglon
   y los campos quedarian en fila india, uno por renglon y de 471 px de ancho.
   1374 es el primer ancho donde cada columna todavia alcanza para dos campos
   por renglon: esta medido por biseccion sobre la ficha completa. */
@media (min-width: 1374px) {
  .alta-columnas { grid-template-columns: 1fr 1fr; }
}

/* ── Campana y bandeja ───────────────────────────────────────────────────── */

.notif-wrapper { position: relative; }

.campana {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: none;
  border-radius: 9px;
  color: #374151;
  padding: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.campana:hover { background: #F3F4F6; color: var(--jm-navy); }
.campana.con-avisos { color: var(--jm-blue-texto); }
.campana[aria-expanded="true"] { background: #EAF4FB; color: var(--jm-blue-texto); }

.conteo-avisos {
  position: absolute;
  top: 1px; right: 1px;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--alerta);
  color: #fff;
  font-size: var(--t-micro); font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* ── Panel desplegable de notificaciones ────────────────────────────────── */

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--jm-border);
  box-shadow: 0 16px 40px rgba(15,42,78,.18);
  overflow: hidden;
  z-index: 200;
}
.notif-panel-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--jm-border);
  background: #F9FAFB;
  flex-shrink: 0;
}
.notif-panel-cabecera h2 {
  margin: 0;
  font-size: var(--t-medio); font-weight: 700;
  color: var(--jm-navy);
}
.notif-panel-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notif-panel-lista .aviso-fila { margin: 0; }

.notif-panel-pie {
  display: block;
  padding: 11px 16px;
  text-align: center;
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-blue-texto);
  border-top: 1px solid var(--jm-border);
  background: #F9FAFB;
  flex-shrink: 0;
}
.notif-panel-pie:hover { background: #F3F4F6; }

.avisos { display: flex; flex-direction: column; gap: 8px; }

/* Nombrada .aviso-fila (no .aviso a secas) porque "aviso" ya es la variante de
   color de advertencia en .indicador/.tarjeta/.pildora/.catalogo-icono; un
   .aviso bare aquí se colaba en esos elementos y les pintaba un borde azul
   ajeno a su semántica. */
.aviso-fila {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--jm-border);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.aviso-fila:hover { background: #F9FAFB; box-shadow: 0 2px 8px rgba(15,42,78,.08); }
@media (hover: hover) and (pointer: fine) {
  .aviso-fila:hover { transform: translateX(2px); }
}
/* El tipo de aviso lo carga el icono, que ya viene con su color de fondo. Un
   filo de color a un lado ademas es redundante. */
.aviso-fila.sin-leer { background: #EAF4FB; }
.aviso-fila.sin-leer:hover { background: #DBEAFE; }

.aviso-icono {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: #EAF4FB;
  color: var(--jm-blue-texto);
  flex-shrink: 0;
}
.aviso-fila.autorizacion .aviso-icono { background: #FEF3C7; color: #92400E; }
.aviso-fila.resolucion .aviso-icono { background: #DCFCE7; color: #166534; }
.aviso-fila.vencimiento .aviso-icono { background: #FEE2E2; color: #B91C1C; }

.aviso-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-titulo { font-size: var(--t-base); font-weight: 700; color: var(--jm-navy); }
.aviso-detalle { font-size: var(--t-base); color: #1F2937; }
.aviso-fecha { font-size: var(--t-mini); color: var(--jm-gray-soft); }

/* ── Autorizaciones ──────────────────────────────────────────────────────── */

/* El contorno de lo que espera decisión lo pone data-marca, igual que en
   cualquier tarjeta con algo pendiente. */
.autorizaciones-lista .condicion[data-marca="aviso"] {
  box-shadow: 0 0 0 1px var(--marca-contorno), 0 1px 3px rgba(15,42,78,.08);
}

.solicitud {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  font-size: var(--t-base);
  color: #1F2937;
}
.solicitud .icono { color: var(--jm-blue-texto); }

.nota-condicion {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 14px 0 0; font-size: var(--t-base); color: var(--jm-gray-soft);
}
.nota-condicion .icono { margin-top: 2px; flex-shrink: 0; }

.resolucion {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--jm-border);
}
.resolucion .acciones { margin-top: 12px; }
.opcional { font-weight: 400; color: var(--jm-gray-soft); }

.ver-ficha { margin: 12px 0 0; font-size: var(--t-base); }
.ver-ficha a { display: inline-flex; align-items: center; gap: 6px; }

.excepcion {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0;
  font-size: var(--t-base); font-weight: 600;
  color: #166534;
}

.devuelto {
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1px solid #EFC5C5;
  border-radius: 8px;
  background: #FEF2F2;
}
.devuelto h4 {
  margin: 0 0 4px;
  font-size: var(--t-base); font-weight: 700;
  color: #991B1B;
}
.devuelto p { margin: 0; font-size: var(--t-base); color: #991B1B; }

/* ── Historial ───────────────────────────────────────────────────────────── */

/* Bitácora de lo que pasó con una condición o con el repositorio. Cerrada es
   un renglón discreto; abierta, una lista fechada donde cada movimiento dice
   qué pasó, quién y cuándo, y en una edición, qué campo cambió de qué a qué. */
.historial { margin-top: 14px; }
.historial > summary {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px;
  padding: 0 10px 0 8px;
  border-radius: 8px;
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-blue-texto);
  cursor: pointer;
  list-style: none;
}
.historial > summary::-webkit-details-marker { display: none; }
.historial > summary:hover { background: var(--azul-suave); }
.historial > summary:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 1px; }
.historial-cuenta {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--azul-suave);
  font-variant-numeric: tabular-nums;
}
.historial > summary .historial-flecha { width: 12px; height: 12px; transition: transform .18s ease-out; }
.historial[open] > summary .historial-flecha { transform: rotate(180deg); }

.linea-tiempo {
  margin: 8px 0 0;
  padding: 4px 16px;
  list-style: none;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--panel);
}
.hito {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0 12px;
  padding: 12px 0;
}
.hito + .hito { border-top: 1px solid var(--linea); }
.hito .punto {
  width: 10px; height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: #94A3B8;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #CBD5E1;
}
.hito.autorizada .punto, .hito.cargado .punto { background: var(--correcto); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #A7D8B4; }
.hito.rechazada .punto, .hito.eliminado .punto { background: var(--alerta); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #F3B4B4; }
.hito.enviada .punto, .hito.reemplazado .punto { background: var(--aviso); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #F5CFA0; }
.hito.editada .punto { background: var(--jm-blue-texto); box-shadow: 0 0 0 3px #fff, 0 0 0 4px #BFDDF2; }
.hito-cabecera {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px 12px;
}
.hito-titulo { font-size: var(--t-base); color: var(--jm-gray); }
.hito-titulo strong { font-weight: 700; color: var(--jm-navy); }
.hito-fecha {
  font-size: var(--t-mini);
  color: var(--jm-gray-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hito-nota { margin: 3px 0 0; font-size: var(--t-chico); color: var(--jm-sub); }
/* La etapa o el estado antes y después, cuando la acción lo cambió. */
.hito-transicion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 0;
  font-size: var(--t-chico); color: var(--jm-sub);
}
.hito-transicion strong { color: var(--jm-navy); font-weight: 600; }
/* Qué cambió en una edición: columnas alineadas para que varios cambios se
   lean de un vistazo, el valor anterior apagado y el nuevo en firme. */
.hito-cambios {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content) auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: baseline;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--linea);
  list-style: none;
  font-size: var(--t-chico);
}
.hito-cambios li { display: contents; }
.hito-cambios .campo-cambio { color: var(--jm-sub); font-weight: 600; }
.hito-cambios .antes { color: var(--jm-gray-soft); text-decoration: line-through; text-decoration-color: rgba(90,108,129,.5); }
.hito-cambios .flecha-cambio { color: var(--jm-gray-soft); }
.hito-cambios .despues { font-weight: 700; color: var(--jm-navy); }
@media (max-width: 660px) {
  .hito-cambios { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hito-cambios .campo-cambio { grid-column: 1 / -1; margin-top: 4px; }
}

/* ── Catálogos editables ─────────────────────────────────────────────────── */

.intro {
  margin: -6px 0 16px;
  max-width: var(--medida);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--jm-gray-soft);
}

.tarjeta-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jm-border);
}
.tarjeta-cabecera h2 {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 4px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: var(--t-grande); font-weight: 700;
  letter-spacing: -.01em;
  color: var(--jm-navy);
}
.tarjeta-cabecera .intro { margin-bottom: 0; }
.tarjeta-cabecera form,
.tarjeta-cabecera a.boton { flex-shrink: 0; }

.valores { display: flex; flex-direction: column; gap: 6px; }

.valor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 9px;
  transition: background-color .15s ease-out;
}
.valor input[type="text"] { flex: 1; min-width: 0; max-width: 460px; }

/* Quitar una opción: una papelera discreta que marca el renglón. Marcado se
   lee tachado y en rojo tenue, con "Deshacer" a la mano; nada se quita hasta
   guardar. */
.quitar-valor {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  margin: 0 0 0 auto;
  border-radius: 8px;
  color: var(--jm-gray-soft);
  cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
/* Más específico que el interruptor global: aquí la casilla es invisible y
   cubre todo el botón. */
.quitar-valor input[type="checkbox"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 8px;
  background: none;
  opacity: 0;
  cursor: pointer;
}
.quitar-valor input[type="checkbox"]::before { display: none; }
.quitar-valor:hover { background: #FEF2F2; color: var(--alerta); }
.quitar-valor:has(input:focus-visible) { outline: 2px solid var(--jm-blue); outline-offset: 1px; }
.quitar-icono .icono { width: 16px; height: 16px; }
.quitar-deshacer {
  display: none;
  align-items: center; gap: 5px;
  padding: 0 10px;
  font-size: var(--t-chico); font-weight: 700;
  white-space: nowrap;
}
.quitar-deshacer .icono { width: 13px; height: 13px; }
.valor:has(.quitar-valor input:checked) { background: #FEF2F2; }
.valor:has(.quitar-valor input:checked) input[type="text"] {
  color: #9A6A6A;
  text-decoration: line-through;
  background: transparent;
  border-color: #F3C4C4;
}
.valor:has(.quitar-valor input:checked) .opcion.compacta,
.valor:has(.quitar-valor input:checked) .bandera-celda { opacity: .4; pointer-events: none; }
.valor:has(.quitar-valor input:checked) .quitar-valor { color: var(--jm-blue-texto); background: #fff; border: 1px solid var(--jm-border); }
.quitar-valor:has(input:checked) .quitar-icono { display: none; }
.quitar-valor:has(input:checked) .quitar-deshacer { display: inline-flex; }

.opcion.compacta {
  font-size: var(--t-chico);
  font-weight: 500;
  white-space: nowrap;
  color: var(--jm-gray-soft);
}

.valores.separado {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--jm-border);
}
.rol-nombre { flex: 1; font-size: var(--t-base); font-weight: 600; color: #1F2937; }
.detalle.excepciones { margin-top: 3px; color: var(--aviso); }
/* Encabezado de renglón en la comparación contra el mínimo negociado: es una
   etiqueta, no un encabezado de columna, así que no va en mayúsculas. */
th.fila-etiqueta {
  background: #fff;
  font-size: var(--t-base); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

.agregar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--jm-border);
  flex-wrap: wrap;
}
.agregar .campo { flex: 1; min-width: 220px; max-width: 420px; }
.agregar .boton { margin-left: auto; }

.lista-simple { margin: 0; padding-left: 18px; font-size: var(--t-base); }
.lista-simple li { margin-bottom: 3px; }

/* ── Catálogos: tarjeta resumen que abre una ventana ─────────────────────── */
/* La tarjeta solo da de qué trata el catálogo y una muestra de sus valores;
   la lista completa para editar vive en la ventana que abre al pulsarla. */

.catalogo-resumen {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
}
.catalogo-resumen:hover { background: #F9FAFB; }

.catalogo-icono {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  font-size: 18px;
}
.catalogo-icono.info { background: #E0F2FE; color: #075985; }
.catalogo-icono.correcto { background: #DCFCE7; color: #166534; }
.catalogo-icono.aviso { background: #FEF3C7; color: #92400E; }
.catalogo-icono.alerta { background: #FEE2E2; color: #B91C1C; }

.catalogo-info { flex: 1; min-width: 0; }
.catalogo-titulo {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: var(--t-medio); font-weight: 700; color: var(--jm-navy);
}
.catalogo-nota { margin: 3px 0 0; font-size: var(--t-chico); color: var(--jm-gray-soft); }
/* Muestra de la lista: cuántas opciones tiene y sus nombres en un solo
   renglón. Todas las tarjetas miden lo mismo sin importar cuántas opciones
   traiga cada lista. */
.catalogo-muestra {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  min-width: 0;
}
.catalogo-cuenta {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--azul-suave);
  color: var(--jm-blue-texto);
  font-size: var(--t-mini); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.catalogo-valores {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-chico);
  color: var(--jm-sub);
}

.catalogo-flecha {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: #9CA3AF;
}

/* ── Matriz de permisos ──────────────────────────────────────────────────── */

.matriz th.permiso-col {
  text-align: left;
  min-width: 260px;
  background: #fff;
  font-size: var(--t-base);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #1F2937;
}
.matriz thead th.permiso-col {
  background: var(--hundido);
  font-size: var(--t-chico);
  font-weight: 600;
}
.matriz th.rol-col { text-align: center; min-width: 116px; }
.matriz td.casilla { text-align: center; padding: 0; }
/* El objetivo de toque es la celda entera, no la casilla de 17 px. */
.matriz .casilla-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}
.matriz .casilla-area:hover { background: #EAF4FB; }
.matriz .casilla-area:has(input:disabled) { cursor: not-allowed; }
.matriz .casilla-area:has(input:disabled):hover { background: transparent; }
.matriz .agrupador th { text-align: left; }

/* ── Reglas de negocio ───────────────────────────────────────────────────── */

.reglas { display: flex; flex-direction: column; }
.regla {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--jm-border);
}
.regla:last-child { border-bottom: none; }
.regla:first-child { padding-top: 0; }
.regla-texto { flex: 1; min-width: 0; }
.regla-texto label { display: block; font-size: var(--t-base); margin-bottom: 2px; }
.regla-texto p { margin: 0; font-size: var(--t-chico); color: var(--jm-gray-soft); }
.regla-control { flex-shrink: 0; }
/* La lista toma el ancho de la opción elegida, como mínimo el de las otras
   listas y como máximo el de su renglón; si aun así no cabe, se corta con
   puntos suspensivos y la flecha se queda. */
.regla-control { min-width: 0; max-width: 100%; }
.regla-control select { width: auto; min-width: 220px; max-width: 100%; field-sizing: content; }

/* Reglas en dos columnas: el mínimo negociado a la izquierda, documentos y
   calidad de captura a la derecha. Con cada regla a todo lo ancho, el valor
   quedaba a un metro de su explicación. */
/* En columnas que se llenan de arriba abajo, cada tarjeta con su alto: la
   rejilla de renglones dejaba huecos cuando una tarjeta era mucho más alta
   que su vecina. */
.reglas-layout { margin-bottom: var(--hueco-3); }
.reglas-layout > .tarjeta { margin-bottom: var(--hueco-3); break-inside: avoid; }
@media (min-width: 1240px) {
  .reglas-layout { columns: 2; column-gap: var(--hueco-3); }
  .reglas-layout > .tarjeta { display: inline-block; width: 100%; }
}
/* «MXN por dólar»: la unidad larga necesita su segmento más ancho. */
.control.con-sufijo.sufijo-largo { --sufijo: 112px; }
.regla-control > .control.con-sufijo.sufijo-largo { width: 220px; }
/* Guardar, siempre a la vista, con aviso de lo pendiente. */
.barra-guardar {
  position: sticky; bottom: 12px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  margin-bottom: var(--hueco-4); padding: 12px 16px 12px 20px;
  border: 1px solid var(--jm-border); border-radius: 14px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 30px rgba(15, 42, 78, .14), 0 2px 6px rgba(15, 42, 78, .06);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.barra-guardar-estado { display: flex; align-items: center; margin: 0; font-size: var(--t-base); color: var(--jm-sub); }
.barra-guardar-estado > span { display: inline-flex; align-items: center; gap: 8px; }
.barra-guardar-estado .icono { width: 16px; height: 16px; }
.barra-guardar .con-pendientes { display: none; color: var(--aviso); font-weight: 600; }
.con-cambios .barra-guardar { border-color: #F2C98A; box-shadow: 0 0 0 1px #F2C98A, 0 10px 30px rgba(15, 42, 78, .14); }
.con-cambios .barra-guardar .sin-pendientes { display: none; }
.con-cambios .barra-guardar .con-pendientes { display: inline-flex; }
@media (max-width: 640px) {
  .barra-guardar { bottom: 0; border-radius: 14px 14px 0 0; }
  .barra-guardar .boton { flex: 1; justify-content: center; }
}
/* Una lista de opciones no cabe al lado del texto: va debajo, a lo ancho. */
.regla.regla-lista { flex-direction: column; gap: 10px; }
.regla.regla-lista .regla-control { width: 100%; }
.regla.regla-lista .opciones-multiples { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 16px; }

.reglas-layout + .acciones { margin-bottom: var(--hueco-4); }
.demo-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.demo-fila .nota-tarjeta { margin: 0; }

.opciones-en-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 14px;
}

/* ── Presentaciones: elegir productos para una presentación ─────────────── */
.presenta { display: grid; gap: var(--hueco-2, 18px); padding-bottom: 8px; }
.presenta-filtros { flex-wrap: wrap; }
.presenta-situacion { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 6px; }
.presenta-situacion .opcion-respuesta span { padding: 8px 14px; white-space: nowrap; }
.presenta-grupo-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.presenta-grupo-cabeza h2 { margin: 0; font-size: var(--t-grande); font-weight: 700; color: var(--jm-navy); }
.presenta-grupo-cabeza p { margin: 3px 0 0; font-size: var(--t-chico); color: var(--jm-sub); }
.presenta-cuenta {
  display: inline-block; min-width: 24px; margin-left: 6px; padding: 1px 8px;
  border-radius: 999px; background: var(--azul-suave);
  font-size: var(--t-chico); font-weight: 700; color: var(--jm-blue-texto); text-align: center;
  font-variant-numeric: tabular-nums;
}
.presenta-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.presenta-item { margin: 0; padding: 0; min-width: 0; }
.presenta-opcion { position: relative; display: block; height: 100%; margin: 0; cursor: pointer; }
.presenta-opcion .presenta-marco { height: 100%; }
.presenta-opcion input[type="checkbox"] { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; }
.presenta-marco {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 40px 10px 10px;
  border: 1px solid var(--jm-border); border-radius: 12px; background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease,
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .presenta-opcion:hover .presenta-marco { border-color: var(--borde-control-hover); }
}
.presenta-opcion input:focus-visible + .presenta-marco { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.presenta-opcion input:checked + .presenta-marco {
  border-color: #8DBBE0; background: #F3F8FD;
  box-shadow: 0 1px 2px rgba(18, 90, 143, .08), 0 0 0 1px #8DBBE0;
}
.presenta-foto {
  flex: none; width: 56px; height: 56px; padding: 3px;
  border-radius: 9px; background: #F7F8FA; object-fit: contain;
}
.presenta-foto.sin-foto { display: flex; align-items: center; justify-content: center; color: var(--jm-gray-soft); }
.presenta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.presenta-nombre { font-size: var(--t-chico); font-weight: 700; color: var(--jm-gray); overflow-wrap: break-word; line-height: 1.35; }
.presenta-detalle { font-size: 12px; color: var(--jm-sub); }
.presenta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.presenta-pvp { font-size: 12px; font-weight: 600; color: var(--jm-gray); font-variant-numeric: tabular-nums; }
/* La palomita aparece al elegir: confirma la selección sin depender solo
   del color del borde. */
.presenta-check {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--jm-border); background: #fff; color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.presenta-check .icono { width: 13px; height: 13px; }
.presenta-opcion input:checked + .presenta-marco .presenta-check {
  border-color: var(--jm-blue); background: var(--jm-blue); color: #fff; transform: scale(1.05);
}
.presenta-opcion:active .presenta-marco { transform: scale(0.99); }
/* La barra de la decisión se queda pegada abajo mientras se elige. */
.presenta-barra {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px;
  padding: 14px 18px;
  border: 1px solid var(--jm-border); border-radius: 14px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 30px rgba(15, 42, 78, .14), 0 2px 6px rgba(15, 42, 78, .06);
}
.presenta-elegidos { margin: 0 auto 8px 0; font-size: var(--t-base); color: var(--jm-sub); }
.presenta-elegidos strong { font-size: var(--t-grande); color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.presenta-cliente { min-width: 240px; margin: 0; }
.presenta-barra .error-campo { flex-basis: 100%; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .presenta-marco, .presenta-check { transition: none; }
  .presenta-opcion:active .presenta-marco { transform: none; }
}
@media (max-width: 640px) {
  .presenta-situacion { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .presenta-lista { grid-template-columns: minmax(0, 1fr); }
  /* En el teléfono la barra ocupa lo mínimo: el cliente arriba y, en un
     renglón, cuántos van y el botón. */
  .presenta-barra {
    bottom: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: 10px 12px; padding: 12px 14px; border-radius: 14px 14px 0 0;
  }
  .presenta-cliente { grid-column: 1 / -1; order: -1; min-width: 0; }
  .presenta-barra .error-campo { grid-column: 1 / -1; }
  .presenta-cliente > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .presenta-elegidos { margin: 0; }
  .presenta-barra .boton { justify-content: center; }
}

/* Las dos vistas de la pestaña: armar una presentación o su historial. */
.presenta-vistas {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--hueco-3);
  border: 1px solid var(--jm-border); border-radius: 12px; background: var(--hundido);
}
.presenta-vista {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 9px; font-size: var(--t-base); font-weight: 600; color: var(--jm-sub); text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.presenta-vista .icono { width: 15px; height: 15px; }
.presenta-vista[aria-current="page"] {
  background: #fff; color: var(--jm-navy);
  box-shadow: 0 1px 2px rgba(15, 42, 78, .08), 0 0 0 1px var(--jm-border);
}
@media (hover: hover) and (pointer: fine) {
  .presenta-vista:not([aria-current]):hover { color: var(--jm-navy); background: rgba(255, 255, 255, .65); }
}
.presenta-vista:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.presenta-vista-cuenta {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: #FCEFD9; color: var(--aviso);
  font-size: var(--t-mini); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}

/* Seguimiento: las presentaciones, como tarjetas del sistema. */
.presenta-historial { display: grid; gap: var(--hueco-3); }
.presenta-historial > .filtros { margin: 0; }
/* Con la barra de la presentación a la vista, el aviso sale encima de ella
   para no tapar el botón de descargar. */
body:has(form[data-presentacion]:not([hidden])) .toast { bottom: 118px; }
@media (max-width: 640px) {
  body:has(form[data-presentacion]:not([hidden])) .toast { bottom: 150px; }
}
/* La que se acaba de descargar o de guardar: se marca y su fondo se apaga. */
.tarjeta-presentacion.reciente { border-color: #8DBBE0; box-shadow: 0 0 0 1px #8DBBE0; animation: historial-llega 1.2s var(--ease-out); }
@keyframes historial-llega { from { background-color: var(--azul-suave); } }
.historial-fotos { display: flex; flex: none; padding-left: 10px; }
.historial-foto {
  flex: none; width: 40px; height: 40px; margin-left: -10px; padding: 3px;
  border: 2px solid #fff; border-radius: 10px; background: #F7F8FA; object-fit: contain;
  box-shadow: 0 0 0 1px var(--jm-border);
}
.historial-foto.sin-foto, .historial-mas { display: flex; align-items: center; justify-content: center; color: var(--jm-gray-soft); }
.historial-foto.sin-foto .icono { width: 18px; height: 18px; }
.historial-mas { background: var(--azul-suave); color: var(--jm-blue-texto); font-size: var(--t-chico); font-weight: 700; }
.vacio-accion { margin-top: 16px !important; }

/* Cuánto respondió el cliente: un tramo por producto autorizado. */
.avance-respuestas { display: grid; gap: 6px; min-width: 0; }
.avance-barra { display: flex; gap: 3px; height: 8px; }
.avance-barra > span { flex: 1; min-width: 4px; border-radius: 3px; background: var(--jm-bg2); }
.avance-barra > .aceptado { background: #2F9E5B; }
.avance-barra > .rechazado { background: #D64545; }
.avance-texto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-chico); color: var(--jm-sub); }
.avance-dato { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.avance-dato::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.avance-dato.aceptado { color: var(--correcto); }
.avance-dato.rechazado { color: var(--alerta); }
.avance-barra > .presentado { background: var(--jm-blue); }

/* Ficha: cómo va el producto con todos los clientes. */
.clientes-resumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  margin-bottom: var(--hueco-2); padding: 14px 16px;
  border-radius: var(--rad); background: var(--hundido);
}
.clientes-barra { flex: 1 1 240px; max-width: 420px; height: 10px; }
.clientes-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: var(--t-chico); color: var(--jm-sub); }
.clientes-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.clientes-leyenda li::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--jm-bg2); box-shadow: inset 0 0 0 1px var(--borde-control); }
.clientes-leyenda .aceptado::before { background: #2F9E5B; box-shadow: none; }
.clientes-leyenda .presentado::before { background: var(--jm-blue); box-shadow: none; }
.clientes-leyenda .rechazado::before { background: #D64545; box-shadow: none; }
.clientes-leyenda strong { color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.clientes-pendientes { margin-top: var(--hueco-2); }
.clientes-pendientes-titulo { margin: 0 0 8px; font-size: var(--t-chico); font-weight: 700; color: var(--jm-sub); }
.clientes-pendientes-titulo span { font-weight: 400; }
.clientes-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cliente-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px dashed var(--borde-control); border-radius: 999px; background: #fff;
  font: inherit; font-size: var(--t-chico); font-weight: 600; color: var(--jm-sub);
}
span.cliente-chip { padding-left: 12px; border-style: solid; font-weight: 500; }
button.cliente-chip { cursor: pointer; transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out); }
.cliente-chip .icono { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
  button.cliente-chip:hover { border-style: solid; border-color: #8DBBE0; background: #F3F8FD; color: var(--jm-blue-texto); }
}
button.cliente-chip:active { transform: scale(0.97); }
button.cliente-chip:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  button.cliente-chip { transition: none; }
  button.cliente-chip:active { transform: none; }
}

/* Panel de respuestas de una presentación. */
.modal-tarjeta.panel.angosto { max-width: min(760px, 94vw); }
.presenta-respuestas { display: grid; gap: var(--hueco-3); padding-top: 4px; }
.respuestas-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-radius: var(--rad); background: var(--hundido);
}
.respuestas-cabeza .avance-respuestas { flex: 1; max-width: 360px; }
.respuestas-cliente { max-width: 360px; margin: 0; }
.respuestas-lista { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.respuesta-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.respuesta-producto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.respuesta-foto {
  flex: none; width: 48px; height: 48px; padding: 3px;
  border-radius: 9px; background: #F7F8FA; object-fit: contain;
}
.respuesta-foto.sin-foto { display: flex; align-items: center; justify-content: center; color: var(--jm-gray-soft); }
.respuesta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.respuesta-nombre { font-size: var(--t-base); font-weight: 700; color: var(--jm-gray); text-decoration: none; overflow-wrap: break-word; }
@media (hover: hover) and (pointer: fine) { .respuesta-nombre:hover { color: var(--jm-blue-texto); text-decoration: underline; } }
.respuesta-detalle { font-size: var(--t-chico); color: var(--jm-sub); }
.respuesta-opciones { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.respuesta-opciones .opcion-respuesta span { min-height: 38px; padding: 7px 12px; white-space: nowrap; font-size: var(--t-chico); }
.respuesta-datos {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 140px 170px minmax(0, 1fr); gap: 10px 12px; align-items: end;
  padding-left: 60px;
}
.respuesta-datos .campo { margin: 0; }
.respuesta-datos:has([data-solo-acepto][hidden]) { grid-template-columns: minmax(0, 1fr); }
.respuesta-proceso, .respuesta-solo-lectura {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding-left: 60px; font-size: var(--t-chico); color: var(--jm-sub);
}
.respuesta-solo-lectura { grid-column: auto; padding-left: 0; }
.respuesta-fila.en-proceso .respuesta-foto { opacity: .7; }
@media (max-width: 640px) {
  .presenta-vistas { display: flex; }
  .presenta-vista { flex: 1; justify-content: center; }
  .respuestas-cabeza { flex-direction: column; align-items: stretch; }
  .respuestas-cabeza .avance-respuestas { max-width: none; }
  .respuesta-fila { grid-template-columns: minmax(0, 1fr); }
  .respuesta-opciones .opcion-respuesta { flex: 1; }
  .respuesta-opciones .opcion-respuesta span { padding: 7px 8px; }
  .respuesta-datos, .respuesta-datos:has([data-solo-acepto][hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 0; }
  .respuesta-datos .respuesta-nota { grid-column: 1 / -1; }
  .respuesta-proceso { padding-left: 0; }
}

.opciones-multiples {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 2px 16px;
  border: none; margin: 0; padding: 0;
}
.opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--t-base);
  font-weight: 500;
  color: #1F2937;
  cursor: pointer;
}
/* Toda casilla del sistema es un interruptor, las de hoy y las que vengan: se
   estiliza el elemento nativo, así que no hace falta marcado nuevo y sigue
   funcionando con teclado, lector de pantalla y formularios sin JavaScript.
   El riel apagado da 3.1:1 contra blanco, lo mínimo para que se distinga como
   control y no como adorno. */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 20px;
  margin: 0;
  border-radius: 999px;
  background: #8497AD;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .18s ease-out;
}
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,42,78,.3);
  transform-origin: 0 50%;
  transition: transform .2s var(--ease-out);
}
input[type="checkbox"]:checked { background: var(--jm-blue-texto); }
input[type="checkbox"]:checked::before { transform: translateX(14px); }
input[type="checkbox"]:hover:not(:disabled) { background: #6F839B; }
input[type="checkbox"]:checked:hover:not(:disabled) { background: var(--jm-blue-texto-hover); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"], input[type="checkbox"]::before { transition: none; }
}
/* Casilla que ocupa el lugar de un campo dentro de una rejilla: se alinea con
   los campos de al lado, no con la etiqueta de arriba. */

/* Varias opciones a la vez, como las categorías de un proveedor: una fila de
   interruptores con su nombre, y el renglón entero responde al clic. */
.grupo-opciones { border: none; margin: 0; padding: 0; min-width: 0; }
.grupo-opciones > legend {
  display: flex; align-items: center; gap: 4px;
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--t-base); font-weight: 600;
  color: #374151;
}
.grupo-opciones > legend .obligatorio { color: #DC2626; }
.opciones-fila { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.opciones-fila .opcion { margin: 0; min-height: 32px; }
.grupo-invalido input[type="checkbox"] { box-shadow: 0 0 0 2px var(--alerta); }

/* Ayuda en línea. Lo que antes era una nota fija debajo del campo ahora se
   abre al pasar el cursor o al llegar con el teclado: la pantalla de captura
   se queda con los campos, y la explicación sigue a un gesto de distancia. */
.ayuda {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 2px;
  border-radius: 50%;
  color: var(--jm-gray-soft);
  vertical-align: middle;
  cursor: help;
}
.ayuda .icono { width: 14px; height: 14px; }
.ayuda:hover, .ayuda:focus-visible { color: var(--jm-blue-texto); }
.ayuda:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 1px; }
.ayuda-texto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
h2 .ayuda { margin-left: 6px; }

/* Corrección rápida de un punto devuelto, dentro del recuadro de lo que
   quedó fuera del mínimo. El renglón entero abre el formulario. */
.hallazgo.corregible { display: block; padding: 0; }
.corregir-punto > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  min-height: 44px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}
.corregir-punto > summary::-webkit-details-marker { display: none; }
.corregir-punto > summary:hover { background: rgba(180,83,9,.07); }
.corregir-punto > summary:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 1px; }
/* "Corregir" se ve como un botón chico del sistema, no como otra píldora. */
.corregir-accion {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid #C3DBF0;
  background: #EDF5FC;
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-blue-texto);
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.corregir-accion .icono { width: 14px; height: 14px; }
.corregir-punto > summary:hover .corregir-accion { background: #E0EDF9; border-color: #9FC4E6; }
.corregir-punto[open] > summary .corregir-accion { visibility: hidden; }
.corregir-form {
  margin: 6px 0 8px;
  padding: 12px 14px;
  border: 1px solid #EFD8AE;
  border-radius: 8px;
  background: #fff;
  animation: aparecer-correccion .16s ease-out;
}
.corregir-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; align-items: end; }
.corregir-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.corregir-botones .boton { min-height: 34px; padding: 0 14px; }
@keyframes aparecer-correccion {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .corregir-form { animation: none; } }

/* Matriz de notificaciones: misma forma que la de permisos, con lo que hace
   falta para decidir: cuándo sale cada aviso y a cuántas personas le llega. */
.matriz-avisos th.permiso-col { min-width: 300px; }
.aviso-nombre { display: block; font-weight: 600; color: var(--jm-gray); }
.aviso-cuando { display: block; margin-top: 2px; font-size: var(--t-chico); font-weight: 400; color: var(--jm-gray-soft); }
.aviso-siempre {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px;
  font-size: var(--t-chico); font-weight: 600;
  color: var(--correcto);
}
.aviso-siempre .icono { width: 13px; height: 13px; }
.rol-personas {
  display: block;
  margin-top: 2px;
  font-family: var(--f);
  font-size: var(--t-mini); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--jm-gray-soft);
}

/* Filtro de una lista. Todos son de varias opciones, como la columna de
   Excel, y se ven como una lista desplegable del sistema: el mismo alto,
   borde, segmento con ícono y flecha que gira; el menú abierto, el mismo
   marco y renglones que el de la lista. Lo elegido se lee en el botón, y si
   son varias, su número en una cifra azul. */
.multifiltro { position: relative; --segmento: var(--hundido); --segmento-linea: var(--linea); }
.multifiltro > summary {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  min-width: 180px; max-width: 280px;
  height: 40px;
  padding: 0 12px 0 52px;
  border: 1px solid var(--borde-control);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15,42,78,.04);
  background: #fff linear-gradient(to right, var(--segmento) 40px, var(--segmento-linea) 40px 41px, transparent 41px) no-repeat;
  font-size: var(--t-base);
  color: var(--jm-gray);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.multifiltro > summary::-webkit-details-marker { display: none; }
.multifiltro > summary > .multifiltro-icono {
  position: absolute; left: 13px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  color: var(--jm-gray-soft);
  transition: color .15s ease;
}
.multifiltro-resumen { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multifiltro-cuenta {
  flex: none;
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--jm-blue-texto);
  color: #fff;
  font-size: var(--t-mini); font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.multifiltro-cuenta[hidden] { display: none; }
.multifiltro > summary > .multifiltro-flecha {
  flex: none;
  width: 16px; height: 16px;
  color: var(--jm-gray-soft);
  transition: transform .18s var(--ease-out), color .15s ease;
}
.multifiltro[open] > summary > .multifiltro-flecha { transform: rotate(180deg); color: var(--jm-blue-texto); }
.multifiltro > summary:hover { border-color: var(--borde-control-hover); }
.multifiltro > summary:focus-visible,
.multifiltro[open] > summary { outline: none; border-color: var(--jm-blue); box-shadow: 0 0 0 3px rgba(30,128,200,.18); }
.multifiltro[open] > summary > .multifiltro-icono,
.multifiltro.con-seleccion > summary > .multifiltro-icono { color: var(--jm-blue-texto); }
.multifiltro.con-seleccion > summary { border-color: #7FB0DA; background-color: #F5F9FD; color: var(--jm-blue-texto); font-weight: 600; }

.multifiltro-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px); left: 0;
  min-width: max(100%, 240px);
  max-width: min(320px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--jm-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,42,78,.06), 0 14px 32px rgba(15,42,78,.16);
}
.multifiltro-opcion {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: var(--t-base); font-weight: 500;
  color: var(--jm-gray);
  cursor: pointer;
}
.multifiltro-opcion > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.multifiltro-opcion:hover { background: var(--hundido); }
.multifiltro-opcion:has(input:checked) { background: #EDF5FC; color: var(--jm-blue-texto); font-weight: 600; }
.multifiltro-casilla {
  flex: none;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--borde-control-hover);
  border-radius: 5px;
  background: #fff;
  color: transparent;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.multifiltro-casilla .icono { width: 12px; height: 12px; stroke-width: 3px; }
.multifiltro-opcion > input:checked + .multifiltro-casilla { border-color: var(--jm-blue-texto); background: var(--jm-blue-texto); color: #fff; }
.multifiltro-opcion > input:focus-visible + .multifiltro-casilla { box-shadow: 0 0 0 3px rgba(30,128,200,.25); border-color: var(--jm-blue); }
.multifiltro-texto { min-width: 0; }
.multifiltro-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 6px -6px -6px;
  padding: 8px 8px 8px 16px;
  border-top: 1px solid var(--linea);
  font-size: var(--t-chico);
  color: var(--jm-gray-soft);
}
.multifiltro-pie-acciones { display: flex; gap: 6px; }
.multifiltro-pie [data-elegidas] { white-space: nowrap; }

.aviso-guardado {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid #A7D8B4;
  border-radius: 8px;
  background: #DCFCE7;
  color: #14532D;
  font-size: var(--t-base);
}
.aviso-guardado a { color: #14532D; }

/* ── Cuadro de confirmación ──────────────────────────────────────────────── */
/* Por encima de .modal-fondo (550): confirma acciones que se piden desde
   dentro de una ventana -como guardar un catálogo- y si quedara debajo, su
   botón de Continuar sería inalcanzable, tapado por la ventana de atrás. */

.confirmar-fondo {
  position: fixed;
  inset: 0;
  z-index: 580;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,42,78,.38);
}
.confirmar-tarjeta {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--jm-border);
  border-radius: 18px;
  box-shadow: var(--sombra-grande);
}
.confirmar-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: var(--azul-suave);
  color: var(--jm-blue-texto);
}
.confirmar-icono svg { width: 20px; height: 20px; }
.confirmar-tarjeta h3 {
  margin: 0 0 7px;
  font-size: var(--t-grande); font-weight: 800;
  letter-spacing: -.2px;
  color: var(--jm-gray);
}
.confirmar-tarjeta p {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--jm-sub);
}
.confirmar-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.confirmar-tarjeta.aviso .confirmar-icono { background: #FDF0D5; color: var(--aviso); }
.confirmar-lista {
  margin: 10px 0 0; padding-left: 18px;
  font-size: var(--t-base); line-height: 1.5; font-weight: 600; color: var(--jm-gray);
}

/* Decidir desde la ficha: los números a la vista antes de los botones. */
.decidir-cifras {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--jm-border); border-radius: 12px; background: #F7F8FA;
}
.decidir-cifras dt { font-size: var(--t-chico); color: var(--jm-sub); }
.decidir-cifras dd { margin: 3px 0 0; font-size: var(--t-grande); font-weight: 700; color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.decidir-cifras dd.negativa { color: var(--alerta); }
.modal-tarjeta .recuadro-decision { padding: 0; border: none; background: none; }
@media (max-width: 640px) { .decidir-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contrato: quién firma por el proveedor. */
.contrato-representante { margin-top: 18px; }
.representante-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.representante-opcion { position: relative; margin: 0; cursor: pointer; }
.representante-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.representante-opcion > span {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  padding: 10px 12px; border: 1px solid var(--jm-border); border-radius: 10px; background: #fff;
  font-size: var(--t-chico); line-height: 1.35;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.representante-opcion strong { font-weight: 700; color: var(--jm-gray); }
.representante-opcion input:checked + span { border-color: #8DBBE0; background: #F3F8FD; box-shadow: 0 0 0 1px #8DBBE0; }
.representante-opcion input:focus-visible + span { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .representante-opcion:hover > span { border-color: var(--borde-control-hover); }
}
.representante-otro { margin-top: 12px; }
.representante-otro[hidden], .contrato-faltan[hidden], [data-falta-representante][hidden] { display: none; }

/* Contrato: lo que saldrá en blanco, dicho antes de generarlo. */
.contrato-faltan {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid #F5D9A8; border-radius: 10px; background: #FFF8EB;
  font-size: var(--t-chico); line-height: 1.45; color: #78350F;
}
.contrato-faltan > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--aviso); }
.contrato-faltan p { margin: 0 0 4px; }
.contrato-faltan ul { margin: 0; padding-left: 16px; font-weight: 600; }

/* ── Ficha en modal (vista rápida) ───────────────────────────────────────── */

.ficha-modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(15,42,78,.45);
  overflow-y: auto;
}
.ficha-modal-tarjeta {
  width: 100%;
  max-width: 900px;
  background: #F7F8FA;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
  overflow: hidden;
}
.ficha-modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: #fff;
  border-bottom: 1px solid var(--jm-border);
}
.ficha-modal-cabecera h2 {
  margin: 0;
  font-size: var(--t-grande); font-weight: 700;
  color: var(--jm-navy);
}
.ficha-modal-acciones { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ficha-modal-cerrar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: none;
  border-radius: 8px;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--jm-gray-soft);
  cursor: pointer;
}
.ficha-modal-cerrar:hover { background: #EEF2F6; color: var(--jm-navy); }
.ficha-modal-cuerpo {
  padding: 22px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
/* Vista rápida de un producto: la foto manda a la izquierda, los datos para
   comparar a la derecha. */
.vista-producto { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
.vista-producto-foto {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: 14px;
  border: 1px solid var(--jm-border); border-radius: 12px; background: #fff;
}
.vista-producto-imagen { width: 100%; height: 100%; object-fit: contain; }
.vista-producto-imagen.sin-foto { display: flex; align-items: center; justify-content: center; color: var(--jm-gray-soft); }
.vista-producto-imagen.sin-foto .icono { width: 40px; height: 40px; }
.vista-producto-marca { margin: 0; font-size: var(--t-base); font-weight: 600; color: var(--jm-gray); }
.vista-producto-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.vista-producto-cifras {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin: 16px 0; padding: 12px 14px;
  border: 1px solid var(--jm-border); border-radius: 10px; background: #fff;
}
.vista-producto-cifras dt { font-size: var(--t-chico); color: var(--jm-sub); }
.vista-producto-cifras dd { margin: 2px 0 0; font-size: var(--t-grande); font-weight: 700; color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.vista-producto-descripcion { margin: 0 0 12px; font-size: var(--t-base); line-height: 1.5; color: var(--jm-gray); max-width: 65ch; }
.vista-producto-mas, .vista-producto-clientes { margin: 10px 0 0; font-size: var(--t-chico); }
.vista-producto-clientes { display: flex; align-items: center; gap: 6px; color: #17613A; font-weight: 600; }
.vista-producto-clientes .icono { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .vista-producto { grid-template-columns: minmax(0, 1fr); }
  .vista-producto-foto { max-width: 240px; }
}
.ficha-modal-cargando {
  margin: 40px 0;
  text-align: center;
  color: var(--jm-gray-soft);
}
body.con-modal-abierto { overflow: hidden; }

.aviso-cierre { text-align: center; }
.aviso-cierre-icono {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #DCFCE7;
  color: #166534;
  font-size: 26px;
}
.aviso-cierre h3 {
  margin: 0 0 8px;
  font-size: var(--t-medio); font-weight: 700;
  color: var(--jm-navy);
}
.aviso-cierre p { margin: 0; font-size: var(--t-base); line-height: 1.5; color: #4B5563; }
.aviso-cierre .confirmar-acciones { justify-content: center; }

/* ── Reorganización en columnas ──────────────────────────────────────────── */
/* Para pares de tarjetas cortas que, apiladas a lo largo de todo el ancho del
   contenedor, dejan demasiado blanco a los lados. */

.columnas-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.columnas-2 > .tarjeta { margin-bottom: 0; }

.tarjetas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.tarjetas-grid > .documento { margin: 0; }

.catalogos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 20px;
  align-items: start;
}
.catalogos-grid > .tarjeta { margin-bottom: 0; }

@media (max-width: 900px) {
  .columnas-2 { grid-template-columns: 1fr; }
  .catalogos-grid { grid-template-columns: 1fr; }
}

/* ── Estados ─────────────────────────────────────────────────────────────── */

/* Una pantalla vacía dice qué falta y cómo llenarla, no solo que está vacía. */
.vacio {
  padding: 40px 24px;
  text-align: center;
  color: var(--jm-gray-soft);
}
.vacio-panel { padding: 30px 20px; }
.vacio .titulo {
  font-size: var(--t-medio); font-weight: 700;
  color: var(--jm-navy);
  margin-bottom: 4px;
}
.vacio p {
  max-width: 52ch;
  margin: 0 auto;
  font-size: var(--t-base);
  line-height: 1.55;
}
/* Clase propia y no `.vacio .icono`: el macro de iconos le pone `.icono` a
   cada SVG, así que esa regla alcanzaba también al icono de los botones que
   viven dentro del estado vacío. */
.vacio-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #EEF3F8;
  color: #8FA6BD;
}
.vacio-icono svg { width: 22px; height: 22px; }
.vacio .acciones { justify-content: center; margin-top: 18px; }

.error {
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  background: #FEE2E2;
  color: #991B1B;
}

/* ── Movimiento ──────────────────────────────────────────────────────────── */
/* El contenido entra escalonado para que se note de dónde a dónde cambió la
   pantalla. Nada dura más de un cuarto de segundo: la interfaz es de captura
   diaria y la animación no puede estorbar. */

@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}


/* Solo reaccionan los indicadores que de verdad filtran la tabla de abajo. Los
   que nada más informan se quedan quietos: si todos se levantan al pasar el
   mouse, el movimiento deja de significar "esto se puede tocar". */
a.indicador:hover, a.indicador:focus-visible { border-color: var(--jm-blue); background: #F8FBFE; }

.condicion { transition: border-color .18s; }
.condicion:hover { border-color: #CBD5E1; }

tbody tr { transition: background .12s; }

.acceso { animation: entrar .3s ease-out both; }
.perfil { transition: background .15s, border-color .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) {
  .perfil:hover { transform: translateX(3px); }
}
.perfil:focus-visible { transform: translateX(3px); }
.perfil .flecha { transition: transform .18s; }
.perfil:hover .flecha { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0ms !important; }
  .boton:hover, .indicador:hover, .aviso-fila:hover, .perfil:hover { transform: none; }
}

/* ── Responsivo ──────────────────────────────────────────────────────────── */

/* El menu lateral se angosta antes de desaparecer: de completo a riel de
   iconos, y de riel a cajon. Antes se volvia un bloque horizontal arriba de la
   pagina y en un telefono se comia 327 px de los 844 de alto: el contenido no
   empezaba hasta el pixel 478. */

@media (max-width: 900px) {
  :root { --sidebar-w: 58px; }
  .sidebar-logo { padding: 14px 0; justify-content: center; }
  .sidebar-logo-text, .sidebar-logo-sub { display: none; }
  .sidebar-user { justify-content: center; padding: 12px 0; }
  .sidebar-user-info { display: none; }
  .sidebar-section-label { display: none; }
  .sidebar-nav { padding: 8px 6px; }
  .sidebar-link { justify-content: center; padding: 10px 0; }
  .sidebar-link span { display: none; }
  .sidebar-pie { padding: 10px 6px; }
  .sidebar-salir { justify-content: center; padding: 10px 0; }
  .sidebar-salir span { display: none; }
}

@media (max-width: 760px) {
  /* De riel a cajon: sale de pantalla y entra con el boton de menu. */
  :root { --sidebar-w: 260px; }
  body.con-sidebar { padding-left: 0; }
  body.nav-open { overflow: hidden; }

  .sidebar {
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .3s var(--ease-drawer);
    z-index: 70;
    box-shadow: 8px 0 28px rgba(15,42,78,.25);
  }
  body.nav-open .sidebar { transform: none; }

  .sidebar-logo { padding: 20px 18px 16px; justify-content: flex-start; }
  .sidebar-logo-text, .sidebar-logo-sub { display: block; }
  .sidebar-user { justify-content: flex-start; padding: 12px 14px; }
  .sidebar-user-info { display: block; }
  .sidebar-section-label { display: block; }
  .sidebar-nav { padding: 8px; }
  .sidebar-link { justify-content: flex-start; padding: 10px 12px; }
  .sidebar-link span { display: inline; }
  .sidebar-pie { padding: 10px 14px; }
  .sidebar-salir { justify-content: flex-start; padding: 10px 12px; }
  .sidebar-salir span { display: inline; }
  /* Con el cajon abierto el logo se recorre: ahi queda encima el boton de cerrar. */
  body.nav-open .sidebar-logo { padding-left: 62px; }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px; left: 12px;
    z-index: 80;
    width: 44px; height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--jm-navy);
    cursor: pointer;
  }
  .nav-toggle span {
    position: relative;
    display: block;
    width: 20px; height: 2.4px;
    background: #fff;
    border-radius: 2px;
    transition: background .2s ease;
  }
  .nav-toggle span::before, .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px; height: 2.4px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease;
  }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after { top: 6px; }
  /* Abierto, las tres lineas se vuelven una equis. */
  body.nav-open .nav-toggle span { background: transparent; }
  body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

  /* El display tiene que declararse aqui: la regla de arriba lo apaga para
     todos los anchos, y sin esto el fondo quedaba invisible aunque el cajon
     abriera. El atributo hidden lo sigue apagando cuando esta cerrado. */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15,42,78,.45);
  }

  /* El encabezado deja libre la esquina donde vive el boton, y se queda por
     debajo de el en el apilado: si no, lo tapa y el boton no se puede tocar.
     Tampoco se queda pegado arriba: en un telefono son 180 px fijos de los
     844 que hay, y aqui el boton ya esta siempre a la mano. */
  .topbar {
    position: static;
    z-index: 50;
    padding: 10px var(--container-pad) 14px 68px;
  }
  .topbar h1 { font-size: var(--t-grande); }
  .topbar-modulo { font-size: var(--t-micro); letter-spacing: 1.6px; }
  .contenido { margin: 12px 10px 16px; padding: 14px 12px; border-radius: 14px; }

  /* Con la barra superior ya sin fijar, el espacio reservado arriba del
     renglon sobra. */
  .condicion { scroll-margin-top: 16px; }

  .llamado-lista li { flex-direction: column; align-items: stretch; gap: 8px; }
  .llamado-lista .pildora { align-self: flex-start; }
  .llamado-lista .boton { margin-left: 0; justify-content: center; }
}


@media (max-width: 660px) {
  :root { --container-pad: 16px; }
  /* La campana se queda al lado del titulo. Antes se iba a su propio renglon y
     se comia 70 px de alto en un telefono para mostrar un solo icono. */
  .topbar { gap: 8px; align-items: flex-start; }
  .topbar-acciones { padding-top: 10px; }
  /* El aviso de demostracion y el boton de accion se apilan: lado a lado en
     390 px cada uno parte su texto en dos renglones. */
  .barra-acciones { flex-direction: column; align-items: stretch; gap: 10px; }
  .barra-acciones .aviso-demo { width: fit-content; }
  .barra-acciones .boton { width: 100%; justify-content: center; }
  .barra-acciones > div:last-child { flex-direction: column; }
  .valor { flex-wrap: wrap; }
  .valor input[type="text"] { max-width: none; flex-basis: 100%; }
  .opcion.compacta { min-height: 44px; }
  .agregar .boton { margin-left: 0; width: 100%; justify-content: center; }
  .campana { width: 44px; height: 44px; }
  .tarjeta { padding: 18px 16px; }
  .indicadores { grid-template-columns: 1fr; }
  .acciones .boton { flex: 1; justify-content: center; min-height: 44px; }
  .filtros .boton { min-height: 44px; }
  .sidebar-link { min-height: 44px; }
  .condicion-cabecera .derecha { margin-left: 0; width: 100%; }

  /* El objetivo táctil de una fila es la celda completa, no el texto del
     enlace, que en nombres cortos queda por debajo de 44 px. */
  td { padding: 12px 10px; }
  td > a { display: block; min-height: 24px; padding: 10px 0; margin: -10px 0; }

  .regla { flex-direction: column; gap: 10px; }
  .regla-control, .regla-control.ancho { width: 100%; }
  .opciones-multiples { grid-template-columns: 1fr; }
  .opcion { min-height: 44px; }

  .notif-panel { width: calc(100vw - 32px); right: -12px; }
  .confirmar-tarjeta { padding: 20px; }
  .confirmar-acciones .boton { flex: 1; justify-content: center; }

  .ficha-modal-fondo { padding: 0; }
  .ficha-modal-tarjeta { max-width: none; min-height: 100vh; border-radius: 0; }
  .ficha-modal-cuerpo { max-height: none; }
  .ficha-modal-acciones .ficha-modal-completa { display: none; }
}


/* ── Aviso flotante ──────────────────────────────────────────────────────── */
/* Para lo que se confirma y se olvida: un documento cargado, un porcentaje
   registrado. Antes esto vivia como una linea dentro de la tarjeta, que se
   quedaba ahi hasta recargar y competia con el contenido. */

.toast {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 600;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 17px;
  border: 1px solid var(--jm-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--sombra-grande);
  font-size: var(--t-base); font-weight: 700;
  color: var(--jm-gray);
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.toast.correcta { border-color: #BBE7CD; background: #F0FDF4; color: var(--correcto); }
.toast.alerta { border-color: #F2B8B5; background: #FEF2F2; color: var(--alerta); }
.toast-cerrar {
  margin-left: auto;
  width: 22px; height: 22px;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  opacity: .6;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.toast-cerrar:hover { opacity: 1; background: rgba(0,0,0,.06); }


/* ── Cargador ────────────────────────────────────────────────────────────── */

.girador {
  width: 20px; height: 20px;
  border: 3px solid var(--azul-suave);
  border-top-color: var(--jm-blue-texto);
  border-radius: 50%;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.ficha-modal-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 40px 0;
  font-weight: 800;
  color: var(--jm-blue-texto);
}

@media (prefers-reduced-motion: reduce) {
  .girador { animation-duration: 1.6s; }
}

/* ── Ventanas del sistema ────────────────────────────────────────────────── */
/* Para lo que se hace de vez en cuando: dar de alta un usuario, agregar un rol.
   Antes vivian como tarjetas permanentes debajo del contenido principal, que
   alargaban la pantalla con un formulario que casi nadie usa. */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(15,42,78,.38);
}

.modal-tarjeta {
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--jm-border);
  border-radius: 16px;
  box-shadow: var(--sombra-grande);
}
.modal-tarjeta.ancha { max-width: 760px; }

/* La cabecera y los botones se quedan a la vista aunque el formulario sea
   más alto que la pantalla: nadie tiene que bajar a buscar Guardar. */
.modal-cabecera {
  position: sticky; top: 0; z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 -26px 20px;
  padding: 20px 26px 16px;
  background: #fff;
  border-bottom: 1px solid var(--linea);
}
.modal-cabecera > div { flex: 1 1 auto; min-width: 0; }
.modal-titulo {
  margin: 0;
  font-size: var(--t-grande); font-weight: 700;
  line-height: 1.25; letter-spacing: -.01em;
  color: var(--jm-navy);
}
.modal-nota {
  margin: 3px 0 0;
  max-width: 56ch;
  font-size: var(--t-base);
  line-height: 1.45;
  color: var(--jm-gray-soft);
}
.modal-cerrar {
  flex-shrink: 0;
  align-self: flex-start;
  width: 34px; height: 34px;
  margin: -2px -6px 0 0;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--jm-gray-soft);
  line-height: 1;
  cursor: pointer;
}
.modal-cerrar:hover { background: var(--hundido); color: var(--jm-navy); }

.modal-acciones {
  position: sticky; bottom: 0; z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 24px -26px 0;
  padding: 14px 26px 18px;
  background: #fff;
  border-top: 1px solid var(--linea);
  flex-wrap: wrap;
}
/* Una acción que no es la de la ventana (quitar un contacto) se va a la
   izquierda, lejos de Guardar. */
.modal-acciones .a-la-izquierda { margin-right: auto; }
.modal-cuerpo { padding-bottom: 22px; }
.modal-cuerpo + .modal-acciones { margin-top: 0; }

@media (max-width: 660px) {
  .modal-fondo { padding: 0; align-items: stretch; }
  .modal-tarjeta { max-width: none; max-height: none; min-height: 100dvh; border-radius: 0; padding: 0 18px; }
  .modal-cabecera { margin: 0 -18px 18px; padding: 16px 18px 14px; }
  .modal-acciones { margin: 22px -18px 0; padding: 12px 18px 16px; }
  .modal-acciones .boton { flex: 1; justify-content: center; min-height: 44px; }
  .modal-acciones .a-la-izquierda { flex-basis: 100%; order: 2; margin-right: 0; }
}

/* ── Validación ──────────────────────────────────────────────────────────── */
/* El aviso se queda pegado al campo hasta que se corrige, en vez del globo del
   navegador que se ve como una alerta del sistema operativo y se va solo. */

.campo-invalido,
.campo-invalido:focus {
  border-color: var(--alerta);
  box-shadow: 0 0 0 3px rgba(185,28,28,.12);
}
/* El aviso ocupa como mucho dos renglones cortos debajo del campo: el campo
   conserva su tamaño y la rejilla apenas se mueve aunque haya varios. */
.error-campo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 5px;
  padding-left: 18px;
  font-size: var(--t-chico);
  font-weight: 600;
  line-height: 1.35;
  color: var(--alerta);
  background: no-repeat left 1px / 13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.5' r='.9' fill='%23B91C1C' stroke='none'/%3E%3C/svg%3E");
}
.control > .campo-invalido { --segmento: #FDF1F1; --segmento-linea: #F3CDCD; }
.control:has(> .campo-invalido) > .icono { color: var(--alerta); }

/* ── Acciones dentro de un renglón ───────────────────────────────────────── */

.acciones-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.acciones-fila form { margin: 0; }
.acciones-fila .boton { min-height: 30px; padding: 6px 12px; font-size: var(--t-chico); }

/* Un usuario sin acceso sigue a la vista, pero se lee como apagado. */
.fila-apagada td { background: #FBFCFD; }
.fila-apagada input, .fila-apagada select { color: var(--jm-gray-soft); }

/* ── Persona en una tabla ────────────────────────────────────────────────── */
/* Nombre y correo en la misma celda: el nombre carga el peso, el correo va
   apagado. Distinguirlos por jerarquía y no por columna deja la tabla más
   corta y se lee de un golpe. */

.persona { display: flex; align-items: center; gap: 10px; }
.persona-nombre { font-size: var(--t-base); font-weight: 700; color: var(--jm-gray); }
.persona-correo { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.matriz-avisos th.rol-col { min-width: 96px; }
.matriz-avisos th.permiso-col .aviso-nombre,
.matriz-avisos th.permiso-col .aviso-cuando,
.matriz-avisos th.permiso-col .aviso-siempre { font-family: var(--f); }
/* En el teléfono la matriz se desliza de lado, pero el nombre del aviso se
   queda fijo: sin él, una fila de interruptores no dice a qué se refiere. */
@media (max-width: 660px) {
  .matriz-avisos tbody th.permiso-col,
  .matriz-avisos thead th.permiso-col {
    position: sticky; left: 0; z-index: 1;
    min-width: 180px; width: 180px; max-width: 180px;
    white-space: normal;
    box-shadow: 1px 0 0 var(--linea);
  }
  .matriz-avisos .aviso-cuando { display: none; }
}

/* ── Ventana de una lista desplegable ────────────────────────────────────── */

/* La lista se lee como tabla: una columna por dato y cada nombre se edita
   escribiendo encima. Nada se aplica hasta guardar, así que cada renglón
   marca su estado con un punto -azul renombrada, verde nueva, rojo por
   quitar- y el pie repite la cuenta con los mismos colores. */
.lista-ventana {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
}
.lista-editor { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.lista-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -10px; padding: 0 10px 4px; }

.lista-editor .lista-encabezado,
.lista-editor .valor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: center;
  gap: 0 10px;
}
.lista-editor.con-banderas .lista-encabezado,
.lista-editor.con-banderas .valor { grid-template-columns: minmax(0, 1fr) 96px 108px; }

.lista-encabezado {
  position: sticky; top: 0; z-index: 1;
  padding: 0 10px 7px 16px;
  border-bottom: 1px solid var(--jm-border);
  background: #fff;
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-sub);
}
.lista-encabezado span:nth-child(2) { text-align: center; }

.lista-editor .valores { gap: 0; }
.lista-editor .valor {
  margin: 0;
  padding: 5px 10px 5px 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--linea);
}
.lista-editor .valor:hover { background: var(--panel); }
.lista-editor .valor input[type="text"] {
  max-width: none;
  border-color: transparent;
  background: transparent;
  font-weight: 500;
  color: var(--jm-gray);
}
.lista-editor .valor input[type="text"]:hover { border-color: var(--jm-border); background: #fff; }
.lista-editor .valor input[type="text"]:focus { background: #fff; }

.lista-editor .valor::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: transparent;
  transition: background-color .15s ease-out;
}
.lista-editor .valor.editada::before { background: var(--jm-blue-texto); }
.lista-editor .valor.editada input[type="text"] { font-weight: 700; color: var(--jm-blue-texto); }
.lista-editor .valor.nueva::before { background: var(--correcto); }
.lista-editor .valor.nueva { background: #F2FAF5; }
.lista-editor .valor.nueva input[type="text"] { border-color: #BFE3CB; background: #fff; }
.lista-editor .valor:has(.quitar-valor input:checked)::before { background: var(--alerta); }

.bandera-celda { justify-self: center; display: flex; align-items: center; cursor: pointer; }
.bandera-celda.vacia { cursor: default; }
.lista-editor .quitar-valor,
.descartar-nueva { justify-self: end; margin: 0; }
.descartar-nueva {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border: none; border-radius: 8px;
  background: none;
  color: var(--jm-gray-soft);
  cursor: pointer;
}
.descartar-nueva .icono { width: 15px; height: 15px; }
.descartar-nueva:hover { background: #fff; color: var(--jm-gray); }
.descartar-nueva:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 1px; }

.agregar-fila {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px dashed #B8CCE0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: var(--t-base); font-weight: 700;
  color: var(--jm-blue-texto);
  cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out;
}
.agregar-fila .icono { width: 14px; height: 14px; }
.agregar-fila:hover { background: var(--azul-suave); border-color: var(--jm-blue); }
.agregar-fila:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }

.lista-pie { align-items: center; margin-top: 14px; }
.lista-resumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 0 auto 0 0;
  font-size: var(--t-chico);
  color: var(--jm-gray-soft);
}
.lista-resumen .marca { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--jm-gray); }
.lista-resumen .marca::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lista-resumen .marca.editada::before { background: var(--jm-blue-texto); }
.lista-resumen .marca.nueva::before { background: var(--correcto); }
.lista-resumen .marca.quitar::before { background: var(--alerta); }
.lista-resumen .marca.bandera::before { background: var(--jm-gray-soft); }
.lista-pie .boton[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 660px) {
  .lista-editor .lista-encabezado,
  .lista-editor .valor { grid-template-columns: minmax(0, 1fr) 40px; }
  .lista-editor.con-banderas .lista-encabezado,
  .lista-editor.con-banderas .valor { grid-template-columns: minmax(0, 1fr) 46px 40px; }
  .lista-encabezado span:nth-child(2) { font-size: 8px; }
  .lista-editor .quitar-deshacer { padding: 0 8px; font-size: 0; gap: 0; }
  .lista-editor .quitar-deshacer .icono { width: 15px; height: 15px; }
  .lista-resumen { flex-basis: 100%; }
}


/* ── Movimiento del sistema ──────────────────────────────────────────────── */
/* Lo que se abre de vez en cuando -una ventana, un menú, un aviso- entra y
   sale por el mismo camino; lo que se usa cien veces al día no se mueve. Las
   entradas corren con CSS en cuanto el elemento se muestra; las salidas las
   dispara movimiento.js con la clase `saliendo`. Nada pasa de un tercio de
   segundo y todo usa las curvas de :root. */

@keyframes fondo-entra { from { opacity: 0; } }
@keyframes fondo-sale { to { opacity: 0; } }
@keyframes ventana-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes ventana-sale { to { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes hoja-entra { from { transform: translateY(100%); } }
@keyframes hoja-sale { to { transform: translateY(100%); } }
@keyframes pop-entra { from { opacity: 0; transform: scale(.96); } }
@keyframes pop-sale { to { opacity: 0; transform: scale(.97); } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(calc(100% + 20px)); } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(calc(100% + 20px)); } }
@keyframes fila-entra { from { opacity: 0; transform: translateY(-4px); } }

.saliendo { pointer-events: none; }

/* Ventanas: el fondo se atenúa y desenfoca apenas lo de atrás, y la ventana
   sube y se asienta en su lugar. Siempre centradas: no nacen de un botón. */
.modal-fondo:not([hidden]), .ficha-modal-fondo:not([hidden]),
.visor-fondo:not([hidden]), .confirmar-fondo {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fondo-entra .2s var(--ease-out) both;
}
.modal-fondo:not([hidden]) > .modal-tarjeta,
.ficha-modal-fondo:not([hidden]) > .ficha-modal-tarjeta,
.visor-fondo:not([hidden]) > .visor-tarjeta,
.confirmar-fondo > .confirmar-tarjeta {
  animation: ventana-entra .24s var(--ease-out) both;
}
.modal-fondo.saliendo, .ficha-modal-fondo.saliendo,
.visor-fondo.saliendo, .confirmar-fondo.saliendo {
  animation: fondo-sale .16s var(--ease-out) both;
}
.saliendo > .modal-tarjeta, .saliendo > .ficha-modal-tarjeta,
.saliendo > .visor-tarjeta, .saliendo > .confirmar-tarjeta {
  animation: ventana-sale .16s var(--ease-out) both;
}

/* En el teléfono las ventanas ocupan la pantalla: suben desde el borde de
   abajo como una hoja y bajan por el mismo borde al cerrarse. */
@media (max-width: 660px) {
  .modal-fondo:not([hidden]) > .modal-tarjeta,
  .ficha-modal-fondo:not([hidden]) > .ficha-modal-tarjeta,
  .visor-fondo:not([hidden]) > .visor-tarjeta {
    animation: hoja-entra .34s var(--ease-drawer) both;
  }
  .saliendo > .modal-tarjeta, .saliendo > .ficha-modal-tarjeta,
  .saliendo > .visor-tarjeta {
    animation: hoja-sale .22s var(--ease-out) both;
  }
}

/* Cuadro de confirmación: cuando lo que se confirma se pierde, el ícono lo
   dice antes que el texto. */
.confirmar-tarjeta.peligro .confirmar-icono { background: #FDECEC; color: var(--alerta); }

/* Botón de cerrar: el mismo ícono de tache en todas las ventanas. */
.modal-cerrar, .ficha-modal-cerrar, .visor-cerrar {
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-cerrar .icono, .ficha-modal-cerrar .icono, .visor-cerrar .icono { width: 18px; height: 18px; }
.modal-cerrar:hover { background: #EEF2F6; color: var(--jm-navy); }
.toast-cerrar { display: inline-flex; align-items: center; justify-content: center; }
.toast-cerrar .icono { width: 14px; height: 14px; }

/* Menús y paneles: nacen de su botón. La campana y los tres puntos están a la
   derecha, el filtro de categorías a la izquierda. */
.notif-panel:not([hidden]) { transform-origin: calc(100% - 18px) 0; animation: pop-entra .18s var(--ease-out) both; }
.notif-panel.saliendo { animation: pop-sale .12s var(--ease-out) both; }
.fila-menu-panel:not([hidden]) { transform-origin: 100% 0; animation: pop-entra .15s var(--ease-out) both; }
.fila-menu-panel.hacia-arriba:not([hidden]) { transform-origin: 100% 100%; }
.multifiltro[open] > .multifiltro-panel { transform-origin: 20px 0; animation: pop-entra .16s var(--ease-out) both; }

/* Avisos: entran por la orilla de abajo y se van por la misma. */
.toast { animation: aviso-entra .3s var(--ease-out) both; }
/* En el teléfono, con una ventana o un panel abierto, los botones quedan
   abajo: el aviso baja desde arriba para no taparlos. */
@keyframes aviso-entra-arriba { from { opacity: 0; transform: translateY(calc(-100% - 12px)); } }
@keyframes aviso-sale-arriba { to { opacity: 0; transform: translateY(calc(-100% - 12px)); } }
@media (max-width: 640px) {
  body:has(.modal-fondo:not([hidden])) .toast {
    top: 12px; bottom: auto; left: 12px; right: 12px; max-width: none;
    animation-name: aviso-entra-arriba;
  }
  body:has(.modal-fondo:not([hidden])) .toast.saliendo { animation-name: aviso-sale-arriba; }
}
.toast.saliendo { animation: aviso-sale .2s var(--ease-out) both; }

/* Historial y corrección rápida: se despliegan en vez de aparecer de golpe.
   Donde el navegador no sabe animar la altura, simplemente se abren. */
.historial, .corregir-punto { interpolate-size: allow-keywords; }
.historial::details-content, .corregir-punto::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .24s var(--ease-out), content-visibility .24s allow-discrete;
}
.historial[open]::details-content, .corregir-punto[open]::details-content { block-size: auto; }

/* Una opción nueva en una lista desplegable baja a su lugar. */
.lista-editor .valor.nueva { animation: fila-entra .18s var(--ease-out) both; }

/* Presión: todo lo que se pulsa se hunde un poco. Es la señal de que la
   interfaz oyó el clic antes de que el servidor conteste. */
.boton, .boton-icono { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s var(--ease-out); }
.campana { transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out); }
.modal-cerrar, .ficha-modal-cerrar, .visor-cerrar, .toast-cerrar, .fila-menu-boton, .descartar-nueva {
  transition: background-color .15s ease, color .15s ease, opacity .15s ease, transform .16s var(--ease-out);
}
.quitar-valor { transition: background-color .15s ease-out, color .15s ease-out, transform .16s var(--ease-out); }
.agregar-fila { transition: background-color .15s ease-out, border-color .15s ease-out, transform .16s var(--ease-out); }
.catalogo-resumen, a.indicador { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out); }
.enlace-accion, .corregir-accion { transition: color .15s ease, border-color .15s ease, transform .16s var(--ease-out); }

.boton:active:not(:disabled):not([aria-disabled="true"]),
.boton-icono:active:not(:disabled):not([aria-disabled="true"]),
.campana:active, .modal-cerrar:active, .ficha-modal-cerrar:active, .visor-cerrar:active,
.toast-cerrar:active, .fila-menu-boton:active, .descartar-nueva:active, .quitar-valor:active,
.agregar-fila:active, .enlace-accion:active {
  transform: scale(.97);
}
.catalogo-resumen:active, a.indicador:active { transform: scale(.99); }

/* El interruptor: la perilla se estira mientras se presiona, como un dedo que
   la empuja, y se asienta al soltar. */
input[type="checkbox"]:checked::before { transform-origin: 100% 50%; }
input[type="checkbox"]:active:not(:disabled)::before { transform: scaleX(1.28); }
input[type="checkbox"]:checked:active:not(:disabled)::before { transform: translateX(14px) scaleX(1.28); }

/* Movimiento reducido: lo que se desplaza pasa a ser un fundido corto, y lo
   que se hunde al pulsarlo se queda quieto. */
@media (prefers-reduced-motion: reduce) {
  @keyframes ventana-entra { from { opacity: 0; } }
  @keyframes ventana-sale { to { opacity: 0; } }
  @keyframes hoja-entra { from { opacity: 0; } }
  @keyframes hoja-sale { to { opacity: 0; } }
  @keyframes pop-entra { from { opacity: 0; } }
  @keyframes pop-sale { to { opacity: 0; } }
  @keyframes aviso-entra { from { opacity: 0; } }
  @keyframes aviso-entra-arriba { from { opacity: 0; } }
  @keyframes aviso-sale-arriba { to { opacity: 0; } }
  @keyframes aviso-sale { to { opacity: 0; } }
  @keyframes fila-entra { from { opacity: 0; } }
  .boton:active, .boton-icono:active, .campana:active, .modal-cerrar:active, .ficha-modal-cerrar:active,
  .visor-cerrar:active, .toast-cerrar:active, .fila-menu-boton:active,
  .descartar-nueva:active, .quitar-valor:active, .agregar-fila:active,
  .enlace-accion:active, .catalogo-resumen:active, a.indicador:active { transform: none !important; }
  .sidebar { transition-duration: .01ms !important; }
  .historial::details-content, .corregir-punto::details-content { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .modal-fondo, .ficha-modal-fondo, .visor-fondo, .confirmar-fondo {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(15,42,78,.62);
  }
}


/* Un porcentaje y un folio se leen de un golpe: "5 %" y "PR-1042" no se
   parten en dos renglones. */
td.dato-porcentaje, td.dato-folio { white-space: nowrap; }


/* ── Ficha del proveedor: expediente ─────────────────────────────────────── */

/* La ficha mide su propio ancho: la misma plantilla se ve en la página
   completa y dentro de la vista rápida, que es mucho más angosta. */
.ficha { container: ficha / inline-size; }

/* Carátula. Lo primero que se ve de un proveedor: quién es, en qué estado
   está, los cinco datos que se consultan a diario y cuánto le falta. El
   monograma en navy es el único bloque de color sólido de la pantalla. */
.caratula { padding: 22px 26px; }
.caratula-cabecera { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.caratula-monograma {
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--jm-navy);
  color: #fff;
  font-size: var(--t-titulo); font-weight: 800;
  letter-spacing: -.02em;
}
.caratula-identidad { flex: 1 1 260px; min-width: 0; }
.caratula-nombre {
  margin: 0;
  font-size: var(--t-grande); font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--jm-navy);
  text-wrap: balance;
}
.caratula-alias { margin: 3px 0 0; font-size: var(--t-base); color: var(--jm-gray-soft); }
.caratula-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.caratula-hechos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px 24px;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}
/* Cada dato con su ícono en un azulejo: se encuentra de un vistazo sin leer
   las etiquetas. El ícono va dentro de la etiqueta para que la lista de
   definiciones siga siendo válida. */
.caratula-hechos > div, .datos-lectura > div { position: relative; min-width: 0; min-height: 36px; padding-left: 48px; }
.caratula-hechos dt > .icono, .datos-lectura dt > .icono {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  padding: 9px;
  border-radius: 10px;
  background: var(--hundido);
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--jm-blue-texto);
}
.caratula-hechos dt { font-size: var(--t-chico); font-weight: 500; color: var(--jm-gray-soft); }
.caratula-hechos dd { margin: 2px 0 0; font-size: var(--t-base); font-weight: 700; color: var(--jm-gray); overflow-wrap: anywhere; }
.sin-dato { font-weight: 500 !important; font-style: italic; color: var(--jm-gray-soft) !important; }

/* Tres datos por renglón; en una ficha muy ancha, los seis juntos. La
   completitud es un dato más, del mismo ancho que los otros: su barra es
   corta y va pegada a la cifra, no se estira hasta la orilla. */
@container ficha (min-width: 700px) {
  .caratula-hechos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container ficha (min-width: 1400px) {
  .caratula-hechos { grid-template-columns: repeat(6, auto); justify-content: start; column-gap: 40px; }
}
@container ficha (max-width: 560px) {
  .caratula { padding: 18px; }
  .caratula-acciones { margin-left: 0; }
  .caratula-hechos { gap: 12px 28px; }
  .tramite { padding: 12px 14px; }
}

.hecho-completitud { max-width: 300px; }
.completitud-cifra { display: flex; align-items: center; gap: 10px; }
.completitud-cifra .calificacion { flex-shrink: 0; }
.barra-completitud.corta { display: block; flex: none; width: 64px; height: 6px; margin-top: 0; border-radius: 3px; }
.barra-completitud.corta span { display: block; height: 100%; border-radius: 3px; }

/* En el alta todavía no hay proveedor: un ícono en lugar de la inicial. */
.caratula-monograma.sin-proveedor { background: var(--azul-suave); color: var(--jm-blue-texto); }
.caratula-monograma.sin-proveedor .icono { width: 24px; height: 24px; }
.completitud-falta { display: block; margin-top: 3px; font-size: var(--t-chico); font-weight: 500; line-height: 1.4; color: var(--aviso); }

/* Dos columnas: el trabajo y la consulta. Por debajo de 1000 px de ficha, la
   consulta baja al final. */
.expediente { display: grid; gap: var(--hueco-3); align-items: start; }
.expediente-principal, .expediente-lateral { display: grid; gap: var(--hueco-3); align-content: start; min-width: 0; }
.expediente-principal > .tarjeta, .expediente-lateral > .tarjeta { margin-bottom: 0; }
.expediente-principal { container: principal / inline-size; }
@container ficha (min-width: 1000px) {
  .expediente { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
}
@container ficha (min-width: 1500px) {
  .expediente { grid-template-columns: minmax(0, 1fr) 400px; }
}
@container principal (max-width: 760px) {
  .condicion-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* Datos de consulta: se leen, no se capturan. Etiqueta arriba, dato abajo,
   una línea tenue entre cada uno; lo que falta se lee en cursiva. */
.datos-lectura { display: grid; gap: 16px; margin: 0; }
.datos-lectura dt { display: flex; align-items: center; gap: 2px; font-size: var(--t-chico); font-weight: 500; color: var(--jm-gray-soft); }
.datos-lectura dd { margin: 2px 0 0; font-size: var(--t-base); font-weight: 600; line-height: 1.45; color: var(--jm-gray); overflow-wrap: anywhere; }

/* Gasto aduanal: el porcentaje que rige, en grande; los anteriores, en una
   lista corta para auditar. */
.gasto-vigente { display: flex; align-items: center; gap: 16px; }
.gasto-cifra {
  font-size: var(--t-cifra); font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--jm-navy);
}
.unidad-cifra { margin-left: 2px; font-size: var(--t-medio); font-weight: 700; color: var(--jm-sub); }
.gasto-detalle { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--t-chico); color: var(--jm-gray-soft); }
.gastos-anteriores {
  display: grid; gap: 6px;
  margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--linea);
  list-style: none;
  font-size: var(--t-chico);
}
.gastos-anteriores li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: baseline; color: var(--jm-sub); }
.gastos-anteriores .dato-porcentaje { font-weight: 700; color: var(--jm-gray); }
.gasto-quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--jm-gray-soft); }

.vacio.compacto { padding: 14px 8px; }
.vacio.compacto .vacio-icono { width: 38px; height: 38px; }
.vacio.compacto .titulo { font-size: var(--t-base); }


/* La ficha en una columna angosta. El indicador de pasos compacto se queda en
   renglón aunque el de las pantallas del alta se apile en el teléfono; los
   botones de cada condición y de cada documento bajan a su propio renglón en
   lugar de salirse de la tarjeta. */
.tarjeta-cabecera { flex-wrap: wrap; }
@container principal (max-width: 600px) {
  .condicion-cabecera .derecha { width: 100%; margin-left: 0; justify-content: flex-start; }
  .condicion-cabecera .derecha .condicion-plegar { margin-left: auto; }
  .documento-acciones { width: 100%; }
}

/* En una columna angosta los datos de una condición van de dos en dos: uno
   por renglón, ocho datos alargaban la tarjeta a más de una pantalla. */
@container principal (max-width: 600px) {
  .datos-condicion { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dato { padding: 8px 10px; }
}

/* Contactos: la persona, cómo localizarla y su menú a la derecha. */
.contactos li > .fila-menu { margin-left: auto; align-self: center; }
.contactos .avatar { width: 38px; height: 38px; background: var(--azul-suave); color: var(--jm-blue-texto); box-shadow: inset 0 0 0 1px #D2E3F2; }
.contacto-vias a { color: var(--jm-blue-texto); text-decoration: none; }
.contacto-vias a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacto-vias a.contacto-telefono { color: var(--jm-sub); }

/* Lo que detiene el trámite, arriba de todo. */
.tarjeta.llamado { border-color: #F0CACA; box-shadow: 0 1px 2px rgba(165,29,29,.05), 0 8px 24px rgba(165,29,29,.07); }
.tarjeta.llamado > .encabezado { margin-bottom: 6px; border-bottom: none; padding-bottom: 0; }

/* La tarjeta que se acaba de guardar se ilumina un momento: al volver a la
   ficha se ve dónde quedó el cambio. */
@keyframes recien-guardada {
  0% { box-shadow: var(--sombra), 0 0 0 0 rgba(30,128,200,0); border-color: var(--jm-border); }
  18% { box-shadow: var(--sombra), 0 0 0 4px rgba(30,128,200,.26); border-color: var(--jm-blue); }
  100% { box-shadow: var(--sombra), 0 0 0 4px rgba(30,128,200,0); border-color: var(--jm-border); }
}
.recien-guardada { animation: recien-guardada 1.6s var(--ease-out) both; }

/* Historial de un documento, dentro de su ventana. */
.doc-resumen { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: var(--hundido); }
.doc-resumen > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.doc-resumen dt { font-size: var(--t-chico); font-weight: 500; color: var(--jm-gray-soft); }
.doc-resumen dd { margin: 0; font-size: var(--t-base); color: var(--jm-gray); overflow-wrap: anywhere; }
.doc-resumen dd .pildora { margin-right: 6px; }
.doc-subtitulo { margin: 20px 0 8px; font-size: var(--t-base); font-weight: 700; color: var(--jm-navy); }
.doc-resumen + .doc-subtitulo { margin-top: 0; }
.versiones { margin: 0; padding: 0; list-style: none; }
.versiones li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 0; }
.versiones li + li { border-top: 1px solid var(--linea); }
.doc-sin-movimientos { margin: 0; font-size: var(--t-base); color: var(--jm-gray-soft); }
.doc-historial .linea-tiempo { margin-top: 0; }
@media (max-width: 520px) {
  .doc-resumen > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .condicion-marco, .condicion-plegar .icono { transition: none; }
}


/* Panel lateral: entra por la derecha y sale por el mismo lado. */
.modal-fondo.lateral { justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden; }
.modal-tarjeta.panel {
  max-width: min(1080px, 94vw);
  height: 100dvh; max-height: none;
  margin: 0;
  padding: 0 28px;
  border-radius: 18px 0 0 18px;
  border-right: none;
}
.modal-tarjeta.panel .modal-cabecera { margin: 0 -28px 4px; padding: 20px 28px 16px; }
.modal-tarjeta.panel .modal-acciones { margin: 0 -28px; padding: 14px 28px 18px; }
a[aria-busy="true"] { cursor: progress; }

/* Regla del sistema: lo que se edita largo (6 campos o más, una lista que
   crece o un resultado que se recalcula) se abre como panel lateral, con la
   ficha a la vista detrás; lo corto, de un paso o de consulta, como ventana
   centrada. Un formulario de la página en panel ocupa todo el alto y deja
   los botones al pie aunque tenga pocos campos. */
.modal-tarjeta.panel { display: flex; flex-direction: column; }
.modal-tarjeta.panel > * { flex-shrink: 0; }
.modal-tarjeta.panel > form { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: 16px; }
.modal-tarjeta.panel > form > .modal-acciones { margin-top: auto; }
/* Lo mismo con lo que trae panel.js como panel lateral. */
.modal-tarjeta.panel:not(.centrado) > .panel-cuerpo { flex: 1 0 auto; display: flex; flex-direction: column; }
.modal-tarjeta.panel:not(.centrado) > .panel-cuerpo > form { flex: 1 0 auto; display: flex; flex-direction: column; }
.modal-tarjeta.panel:not(.centrado) > .panel-cuerpo > form > .modal-acciones { margin-top: auto; }
/* La lista desplegable conserva su desplazamiento propio dentro del panel. */
.modal-tarjeta.panel.lista-ventana { overflow: hidden; }
.modal-tarjeta.panel.lista-ventana > form { flex: 1 1 auto; min-height: 0; }

/* Centrado: el panel de un formulario corto (cargas masivas) se ve como
   ventana, del alto de su contenido y sin la franja vacía de abajo. */
@media (min-width: 661px) {
  .modal-fondo.lateral.centrado { justify-content: center; align-items: center; padding: 24px; }
  .modal-tarjeta.panel.centrado {
    height: auto; max-height: calc(100dvh - 48px); max-width: min(1040px, 94vw);
    border-radius: 18px; border-right: 1px solid var(--jm-border);
  }
  .modal-tarjeta.panel.centrado.angosto { max-width: min(760px, 94vw); }
  .modal-tarjeta.panel.centrado .panel-cuerpo { padding-bottom: 24px; }
  .modal-fondo.lateral.centrado:not([hidden]) > .modal-tarjeta.panel { animation: ventana-entra .24s var(--ease-out) both; }
  .modal-fondo.lateral.centrado.saliendo > .modal-tarjeta.panel { animation: ventana-sale .16s var(--ease-out) both; }
}
@keyframes panel-entra { from { opacity: 0; transform: translateX(48px); } }
@keyframes panel-sale { to { opacity: 0; transform: translateX(48px); } }
@media (min-width: 661px) {
  .modal-fondo.lateral:not([hidden]) > .modal-tarjeta.panel { animation: panel-entra .32s var(--ease-drawer) both; }
  .modal-fondo.lateral.saliendo > .modal-tarjeta.panel { animation: panel-sale .2s var(--ease-out) both; }
  /* El fondo dura lo mismo que la salida del panel: si acaba antes, la
     ventana se oculta con el panel a medio camino. */
  .modal-fondo.lateral:not(.centrado).saliendo { animation-duration: .2s; }
}
@media (max-width: 660px) {
  .modal-tarjeta.panel { max-width: none; border-radius: 0; padding: 0 18px; }
  .modal-tarjeta.panel .modal-cabecera { margin: 0 -18px 8px; padding: 16px 18px 14px; }
  .modal-tarjeta.panel .modal-acciones { margin: 8px -18px 0; padding: 12px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes panel-entra { from { opacity: 0; } }
  @keyframes panel-sale { to { opacity: 0; } }
}

.tabla-pie select { width: auto; min-width: 76px; }

/* Filtros de una lista en una sola barra: cada campo con su ícono, sin
   etiqueta encima. La etiqueta sigue ahí para el lector de pantalla. */
.filtros .control { min-width: 170px; }
.filtros .control > select { width: 100%; }

/* Los indicadores que filtran llevan el mismo azulejo que los encabezados. */
.indicador-icono { width: 40px; height: 40px; border-radius: 10px; }
.indicador-icono .icono { width: 19px; height: 19px; }

/* Qué hace cada rol: azulejos quietos, sin marco de tarjeta. */
.rol-resumen { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--hundido); }
.rol-resumen .documento-icono { background: var(--azul-suave); color: var(--jm-blue-texto); }
.rol-resumen.por-confirmar .documento-icono { background: #FEF5E1; color: #8A4A06; }
.rol-resumen .excepciones { display: flex; gap: 5px; align-items: baseline; margin-top: 4px; color: #8A4A06; }
.rol-resumen .excepciones .icono { flex-shrink: 0; transform: translateY(2px); }

/* Una línea de detalle bajo el dato de una celda. */
.detalle-celda { margin-top: 2px; font-size: var(--t-chico); color: var(--jm-gray-soft); }

/* Tabla o tarjetas: dos íconos, el nombre aparece al pasar el cursor. */
.vista-switch-btn { position: relative; min-height: 32px; padding: 6px 9px; }
.vista-switch-btn .icono { width: 16px; height: 16px; }

/* En el teléfono: el aviso de demostración va arriba de las pestañas, los
   filtros ocupan el ancho y las acciones de un documento empiezan en la
   orilla de la tarjeta. */
@media (max-width: 760px) {
  .subtabs-barra { flex-wrap: wrap; }
  .subtabs-barra .aviso-demo { order: -1; margin: 0 0 4px; }
  .subtabs { flex-basis: 100%; }
  .filtros .campo, .filtros .campo:first-child { flex: 1 1 100%; max-width: none; }
  .filtros .control, .filtros .multifiltro, .filtros .multifiltro > summary { width: 100%; max-width: none; }
  .multifiltro-panel { right: 0; max-width: none; }
}

/* Cuántos pendientes hay en una pestaña: un número corto junto al nombre.
   Ámbar si solo espera; rojo si algo ya venció o se devolvió. */
.subtabs-cuenta {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--t-mini); font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.subtabs-cuenta.espera { background: #FEF0CC; color: #7A3F06; box-shadow: inset 0 0 0 1px #F2D9A2; }
.subtabs-cuenta.alerta { background: #FBE1E1; color: #9A1B1B; box-shadow: inset 0 0 0 1px #F0BDBD; }

/* ── Formulario de condiciones ───────────────────────────────────────────── */
/* Secciones una debajo de otra, como un expediente: a la izquierda qué es y
   por qué importa, a la derecha sus campos. En la página va dentro de una
   tarjeta; en el panel lateral, el panel ya es la tarjeta. */
.form-condicion { container: condicion / inline-size; }
.form-condicion-tarjeta { padding-top: 8px; padding-bottom: 8px; }
.seccion-form {
  display: grid;
  gap: 16px 36px;
  padding: 24px 0;
  border-top: 1px solid var(--linea);
}
.seccion-form:first-child { border-top: none; padding-top: 16px; }
.seccion-form-titulo { display: flex; align-items: flex-start; gap: 12px; }
.seccion-form-titulo .encabezado-icono { width: 34px; height: 34px; border-radius: 9px; }
.seccion-form-titulo .encabezado-icono .icono { width: 17px; height: 17px; }
.seccion-form-titulo h3 {
  margin: 6px 0 0;
  font-size: var(--t-medio); font-weight: 700;
  line-height: 1.3;
  color: var(--jm-navy);
}
.seccion-form-titulo p { margin: 4px 0 0; font-size: var(--t-chico); line-height: 1.5; color: var(--jm-gray-soft); }
/* Los campos van de dos en dos, en el orden en que se leen: el Incoterm
   junto al MDF, cómo se cobra junto a cada cuánto. En el panel lateral y en
   la página es la misma rejilla; en la página no pasa de 760 px para que un
   campo de "90 días" no mida media pantalla. */
.seccion-form-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 20px;
  align-items: start;
  min-width: 0;
  max-width: 760px;
}
.seccion-form-campos > .ancho { grid-column: 1 / -1; }
@container condicion (min-width: 480px) {
  .seccion-form-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container condicion (min-width: 820px) {
  .seccion-form { grid-template-columns: 240px minmax(0, 1fr); }
}
/* Guardar siempre a la mano: el pie se queda abajo mientras se captura. */
.form-condicion-pie {
  position: sticky; bottom: 0; z-index: 5;
  margin: 0 -26px -8px;
  padding: 14px 26px 16px;
  border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--rad) var(--rad);
  background: rgba(255,255,255,.96);
}

/* Un número con su unidad: la unidad va dentro del campo, en su propio
   segmento a la derecha, pintado igual que el del ícono. El ícono dice de
   qué es el número; la unidad, en qué va. */
.control.con-sufijo { --sufijo: 52px; }
.control.con-sufijo > input {
  padding-right: calc(var(--sufijo) + 12px);
  background-image:
    linear-gradient(to right, var(--segmento) 40px, var(--segmento-linea) 40px 41px, transparent 41px),
    linear-gradient(to left, var(--segmento) var(--sufijo), var(--segmento-linea) var(--sufijo) calc(var(--sufijo) + 1px), transparent calc(var(--sufijo) + 1px));
}
.control.con-sufijo > .sufijo {
  position: absolute; z-index: 1;
  top: 0; bottom: 0; right: 1px;
  display: flex; align-items: center; justify-content: center;
  width: var(--sufijo);
  font-size: var(--t-chico); font-weight: 600;
  white-space: nowrap;
  color: var(--jm-sub);
  pointer-events: none;
  transition: color .15s ease;
}
.control.con-sufijo:focus-within > .sufijo { color: var(--jm-blue-texto); }
/* Sin ícono: el número y su unidad solos, como en las reglas de negocio. */
.control.sin-icono > input { padding-left: 12px; }
.control.sin-icono.con-sufijo > input {
  background-image: linear-gradient(to left, var(--segmento) var(--sufijo), var(--segmento-linea) var(--sufijo) calc(var(--sufijo) + 1px), transparent calc(var(--sufijo) + 1px));
}
.regla-control > .control.con-sufijo { width: 170px; }

/* Sí o no, como una lista de ajustes: el texto a la izquierda y el
   interruptor alineado a la derecha, un renglón por cosa pactada. */
.interruptores { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; }
@container condicion (min-width: 480px) {
  .interruptores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.interruptor {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea);
  font-size: var(--t-base); font-weight: 500;
  color: var(--jm-gray);
  cursor: pointer;
}
.interruptor input { flex-shrink: 0; }

/* Fondos de marketing: cada apoyo en su renglón, con su interruptor y en qué
   términos quedó. */
.fondos-lista { display: grid; }
.fondo-fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea);
}
.fondo-fila .opcion { margin: 0; min-height: 40px; }
@container condicion (max-width: 560px) {
  .fondo-fila { grid-template-columns: minmax(0, 1fr); }
}

/* Un dato con su unidad no se parte entre renglones. */
.sin-corte { white-space: nowrap; }

/* La etiqueta de estado dentro del título de un hito, despegada del texto. */
.hito-titulo .pildora { margin-left: 6px; vertical-align: 1px; }


/* ══ Productos ════════════════════════════════════════════════════════════ */
/* El módulo 2 usa las mismas piezas que proveedores: carátula, expediente,
   tarjetas con encabezado de ícono y la franja de pendientes. Aquí solo va lo
   que es propio del producto: su foto, el medidor del margen, la cadena del
   costeo y la mesa de revisión de dirección. */

/* ── Cuerpo de la ficha ──────────────────────────────────────────────────── */
/* Arriba, en una fila, lo que dice qué es el producto; abajo, a todo lo
   ancho, el trabajo: pre-costeo, clientes, comparativos y seguimiento. */
.producto-cuerpo { display: grid; gap: var(--hueco-3); container: principal / inline-size; }
.producto-cuerpo > .tarjeta, .producto-datos > .tarjeta, .producto-pareja > .tarjeta { margin-bottom: 0; }
.producto-datos { display: grid; gap: var(--hueco-3); grid-template-columns: minmax(0, 1fr); }
.producto-datos > .tarjeta { container: dato / inline-size; }
@container ficha (min-width: 600px) {
  .producto-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ficha (min-width: 1000px) {
  .producto-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .producto-datos > .tarjeta { padding-inline: 20px; }
}
/* Comparativos y Seguimiento: dos tarjetas de apoyo en la misma fila en vez
   de ocupar cada una todo el ancho, igual criterio que producto-datos. */
.producto-pareja { display: grid; gap: var(--hueco-3); grid-template-columns: minmax(0, 1fr); }
@container ficha (min-width: 1000px) {
  .producto-pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En una tarjeta angosta el encabezado no cabe en un renglón: ícono, título
   y botón arriba; la nota debajo, a todo lo ancho. */
.producto-datos .encabezado {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px 12px;
}
.producto-datos .encabezado-texto { display: contents; }
.producto-datos .encabezado-texto h2 { grid-column: 2; grid-row: 1; }
.producto-datos .encabezado-texto p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.producto-datos .encabezado-acciones { grid-column: 3; grid-row: 1; margin-left: 0; }
@container dato (max-width: 260px) {
  .datos-lectura.dos-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ── Foto del producto ───────────────────────────────────────────────────── */
/* Las imágenes de proveedor vienen con fondo blanco y de cualquier
   proporción: se muestran completas sobre blanco, nunca recortadas. */
.producto-foto {
  flex-shrink: 0;
  display: block;
  width: 44px; height: 44px;
  border-radius: 9px;
  border: 1px solid var(--linea);
  background: #fff;
  object-fit: contain;
}
.producto-foto.chica { width: 40px; height: 40px; border-radius: 8px; }
.producto-foto.mediana { width: 52px; height: 52px; border-radius: 10px; }
.producto-foto.grande { width: 76px; height: 76px; border-radius: 12px; }
.sin-foto {
  display: grid; place-items: center;
  background: var(--hundido);
  color: #8FA6BD;
}
.sin-foto .icono { width: 45%; height: 45%; }
/* Los nombres del catálogo no traen espacios: se parten donde haga falta. */
.topbar-titulo { min-width: 0; }
.topbar h1, .caratula-nombre, .recuadro-titulo h2 { overflow-wrap: anywhere; }
.caratula-foto {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 1px solid var(--jm-border);
  background: #fff;
  object-fit: contain;
}

/* ── Lista ───────────────────────────────────────────────────────────────── */
.filtro-fijo {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 14px;
  padding: 8px 10px 8px 14px;
  border: 1px solid #C6DCEF;
  border-radius: 10px;
  background: var(--azul-suave);
  font-size: var(--t-base);
  color: var(--jm-gray);
}
.filtro-fijo > .icono { width: 16px; height: 16px; color: var(--jm-blue-texto); }
.filtro-fijo > span { flex: 1 1 auto; min-width: 0; }
.indicadores-cinco { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.producto-celda { display: flex; align-items: center; gap: 12px; min-width: 220px; }
/* Los nombres del catálogo vienen pegados con diagonales (MOUSE/RIVAL3/ALAMB/NGO):
   se parten donde haga falta en lugar de ensanchar la tabla. */
.producto-celda .detalle { overflow-wrap: anywhere; }
/* El nombre ya trae sus cortes después de cada "/" (filtro partir_nombre);
   solo una parte más larga que la columna se parte por dentro. */
.producto-celda-texto > a { overflow-wrap: break-word; }
/* Con la columna "Tipo de marca", la tabla de productos necesita aire a
   1440 px: las etapas largas ("Devuelto para renegociar") van en dos
   renglones y el producto cede un poco, ahora que su nombre corta en "/". */
.lista-productos .tabla-marco td .pildora { white-space: normal; max-width: 136px; }
.lista-productos .producto-celda { min-width: 180px; }
.lista-productos .tabla-marco th, .lista-productos .tabla-marco td { padding-left: 10px; padding-right: 10px; }
.producto-celda-texto { min-width: 0; }
.producto-celda-texto > a { font-weight: 700; color: var(--jm-blue-texto); text-decoration: none; }
.producto-celda-texto > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.producto-celda .detalle {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 3px;
  font-size: var(--t-chico);
  color: var(--jm-gray-soft);
}
/* El código de propuesta es provisional: subrayado punteado, como algo que
   todavía se va a sustituir. */
.producto-codigo.temporal { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: #9FB8D2; }
.marca-celda { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.marca-nombre { font-weight: 600; color: var(--jm-gray); }
.tarjeta-producto .tarjeta-fila-cabecera > .producto-foto { margin-top: 2px; }
.pie-lista {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0 0 var(--hueco-3);
  font-size: var(--t-chico);
  color: var(--jm-gray-soft);
}
.pie-lista .icono { width: 14px; height: 14px; }
.pie-lista a { font-weight: 600; color: var(--jm-blue-texto); }

/* Cortes medidos: la tabla con costos se recorta a 1420 px de ventana; sin
   costos, a 1180. */
@media (max-width: 1439px) {
  :root:not([data-vista]) .lista-productos.con-costos > .tabla-marco { display: none; }
  :root:not([data-vista]) .lista-productos.con-costos > .tarjetas-lista { display: grid; }
}
@media (max-width: 1199px) {
  :root:not([data-vista]) .lista-productos:not(.con-costos) > .tabla-marco { display: none; }
  :root:not([data-vista]) .lista-productos:not(.con-costos) > .tarjetas-lista { display: grid; }
}

/* ── Medidor del margen ──────────────────────────────────────────────────── */
/* La cifra y una barra de 0 a 50 % con una raya en el mínimo: se lee si está
   arriba o abajo sin comparar dos números. El relleno se recorta en lugar de
   cambiar de ancho, así corre de un valor al otro sin recalcular la tabla. */
.medidor { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.medidor-cifra {
  min-width: 52px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.medidor.bien .medidor-cifra { color: var(--correcto); }
.medidor.bajo .medidor-cifra { color: var(--alerta); }
.medidor-barra {
  position: relative;
  width: 72px; height: 6px;
  border-radius: 999px;
  background: #E3EAF2;
}
.medidor-relleno {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #2F9E5B;
  transition: clip-path .24s var(--ease-out), background-color .24s ease;
}
.medidor.bajo .medidor-relleno { background: #D64545; }
.medidor-minimo {
  position: absolute; top: -3px; bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--jm-navy);
}
.medidor.grande { flex-direction: column; align-items: stretch; gap: 8px; }
.medidor.grande .medidor-cifra {
  min-width: 0;
  font-size: var(--t-cifra); font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: left;
}
.medidor.grande .medidor-barra { width: 100%; max-width: 240px; height: 8px; }
.medidor-vacio { font-size: var(--t-chico); font-style: italic; color: var(--jm-gray-soft); }

/* ── Ficha del producto ──────────────────────────────────────────────────── */
/* Cinco pasos no caben con nombre en una columna angosta: se queda el del
   paso en curso. */
@container tramite (max-width: 860px) {
  .tramite-largo .paso:not(.actual) .titulo-paso { display: none; }
  .tramite-largo .paso.actual .titulo-paso { white-space: normal; }
  .tramite-largo .paso:last-child { flex: 0 1 auto; min-width: 0; }
}

/* Lo que sigue en el trámite: una sola tarjeta, con el contorno del tono de
   lo que pasa. */
.siguiente-paso.alerta { border-color: #F0CACA; }
.siguiente-paso.aviso { border-color: #EED9AE; }
.siguiente-paso.correcto { border-color: #C6E6D2; }
.siguiente-paso.info { border-color: #C6DCEF; }
.siguiente-paso > .encabezado:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.siguiente-paso .encabezado-acciones form { margin: 0; }
.faltantes {
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.faltantes li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--hundido);
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-sub);
}
.faltantes .icono { width: 13px; height: 13px; color: var(--alerta); }
.nota-direccion {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--hundido);
  font-size: var(--t-base);
  color: var(--jm-sub);
}
.nota-direccion .icono { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--jm-blue-texto); }

/* Pre-costeo: dos columnas, de dónde sale el costo y cuánto deja. */
.costeo { display: grid; gap: 22px 36px; }
@container principal (min-width: 640px) {
  .costeo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.costeo-titulo { margin: 0 0 6px; font-size: var(--t-base); font-weight: 700; color: var(--jm-navy); }

/* La cadena se lee como un estado de cuenta: concepto a la izquierda,
   importe a la derecha, el total al final con más peso. */
.cadena { margin: 0; }
.cadena > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--linea);
}
.cadena dt { min-width: 0; font-size: var(--t-base); font-weight: 500; color: var(--jm-sub); }
.cadena dt .apagado { margin-left: 4px; font-size: var(--t-chico); }
.cadena dd {
  margin: 0;
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--jm-gray);
}
.cadena > .subtotal { border-bottom-style: solid; }
.cadena > .subtotal dd { color: var(--jm-sub); }
.cadena > .total { padding-top: 10px; border-bottom: none; }
.cadena > .total dt { font-weight: 700; color: var(--jm-navy); }
.cadena > .total dd { font-size: var(--t-medio); font-weight: 800; color: var(--jm-navy); }
.cadena.compacta > div { padding: 6px 0; }

.resultado-costeo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--hundido);
}
.resultado-etiqueta { margin-bottom: 6px; font-size: var(--t-chico); font-weight: 500; color: var(--jm-gray-soft); }
.resultado-cifra {
  font-size: var(--t-cifra); font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--jm-navy);
}
.resultado-cifra.negativa, dd.negativa { color: var(--alerta); }

.avisos-costeo { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.avisos-costeo:empty { display: none; }
.avisos-costeo li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 8px;
  font-size: var(--t-base);
  line-height: 1.45;
}
.avisos-costeo li > .icono { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.avisos-costeo .alerta { background: #FDF2F2; border-color: #F3CDCD; color: #9A1B1B; }
.avisos-costeo .aviso { background: #FEF8EA; border-color: #F2DDB0; color: #7A3F06; }
.avisos-costeo .info { background: #EFF6FC; border-color: #C6DCEF; color: #125A8F; }
.avisos-costeo.compactos { margin-top: 12px; gap: 6px; }
.avisos-costeo.compactos li { padding: 8px 10px; font-size: var(--t-chico); }

.costeo-pie { display: grid; gap: 8px; margin-top: 16px; }
.costeo-pie:empty { display: none; }
.inversa, .msrp {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--jm-sub);
}
.inversa > .icono, .msrp > .icono { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--jm-blue-texto); }
.inversa strong { color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.inversa.compacta { font-size: var(--t-chico); }
.inversa.compacta > .icono { width: 14px; height: 14px; }

.subtitulo-tarjeta { margin: 22px 0 10px; font-size: var(--t-base); font-weight: 700; color: var(--jm-navy); }
.encabezado + .subtitulo-tarjeta { margin-top: 0; }
.subtitulo-tarjeta .subtitulo-nota { margin-left: 8px; font-size: var(--t-chico); font-weight: 500; color: var(--jm-sub); }
/* Marca lo que en la demo se hace a mano y en una fase siguiente lo hará el
   sistema (la búsqueda con IA de los comparativos). */
.nota-fase {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px dashed #8DBBE0;
  border-radius: 8px;
  background: #EFF6FC;
  font-size: var(--t-chico);
  line-height: 1.5;
  color: #125A8F;
}
.nota-fase > .icono { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.nota-fase strong { font-weight: 700; }

.referencias { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.referencia {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  font-size: var(--t-base);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .referencia:hover { border-color: #B9CEE0; background: #F8FBFE; }
}
.referencia-texto { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.referencia-nombre { font-size: var(--t-base); font-weight: 600; line-height: 1.35; color: var(--jm-blue-texto); overflow-wrap: anywhere; }
.referencia-cifras {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--t-chico);
  font-variant-numeric: tabular-nums;
  color: var(--jm-gray);
}
.referencias.compactas .referencia { padding: 8px 10px; }
.vacio-linea {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--hundido);
  font-size: var(--t-base);
  color: var(--jm-gray-soft);
}
.vacio-linea > .icono { flex-shrink: 0; width: 16px; height: 16px; color: #8FA6BD; }

/* Búsqueda de mercado con IA: una herramienta acotada (encabezado + botón),
   no un botón suelto flotando en la tarjeta. El aviso y los resultados viven
   dentro del mismo marco, para que se lean como una sola pieza. */
.ia-panel {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--jm-border);
  border-radius: var(--rad);
  background: var(--azul-suave);
}
.ia-panel-encabezado {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px;
}
.ia-panel-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; margin: 0; }
.ia-panel-texto strong { font-size: var(--t-base); color: var(--jm-navy); }
.ia-panel-texto span { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.ia-panel [data-ia-boton] { flex-shrink: 0; }
/* Dónde buscar y el botón, juntos: se lee "en estas cadenas, buscar". */
.ia-panel-controles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ia-panel-controles .multifiltro > summary { background-color: #fff; }
.ia-panel [data-ia-boton][aria-busy="true"] .icono { animation: ia-girar .8s linear infinite; }

.ia-error {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 14px;
  border-radius: 8px;
  background: var(--panel);
  font-size: var(--t-base);
  color: var(--jm-gray-soft);
}
.ia-error:not([hidden]) { animation: fila-entra .18s var(--ease-out) both; }
.ia-subtitulo { margin: 0; font-size: var(--t-chico); font-weight: 600; color: var(--jm-gray-soft); }
.ia-resumen {
  margin: 0; padding: 0;
  font-size: var(--t-chico);
  color: var(--jm-gray-soft);
}
.ia-resumen:not([hidden]) { animation: fila-entra .18s var(--ease-out) both; }
.ia-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ia-lista li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 8px 12px;
  border: 1px solid var(--jm-border); border-radius: 8px;
  background: var(--panel);
  animation: fila-entra .2s var(--ease-out) both;
}
.ia-lista li:nth-child(2) { animation-delay: .04s; }
.ia-lista li:nth-child(3) { animation-delay: .08s; }
.ia-lista li:nth-child(4) { animation-delay: .12s; }
.ia-lista li:nth-child(n+5) { animation-delay: .16s; }
.ia-fila-imagen {
  position: relative; flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--hundido);
  overflow: hidden;
}
.ia-fila-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ia-fila-imagen-vacia {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #9FB3C8;
}
.ia-fila-imagen-vacia .icono { width: 16px; height: 16px; }
.ia-fila-imagen:has(img:not([hidden])) .ia-fila-imagen-vacia { display: none; }
.ia-fila-cuerpo { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; gap: 1px; }
.ia-cadena { font-weight: 600; color: var(--jm-navy); }
/* Si es el mismo producto o uno comparable de otra marca. */
.ia-tipo {
  display: inline-block; margin-left: 4px; padding: 1px 7px;
  border-radius: 999px; font-size: var(--t-chico); font-weight: 600; vertical-align: 1px;
  background: #EEF2F6; color: var(--jm-gray);
}
.ia-tipo.mismo { background: #DCFCE7; color: #14532D; }
.ia-marca { color: var(--jm-gray); }
.ia-enlace { font-size: var(--t-chico); font-weight: 600; color: var(--jm-blue-texto); text-underline-offset: 2px; }
.ia-enlace[hidden], .ia-sin-verificar[hidden] { display: none; }
.ia-sin-verificar { font-size: 11px; font-weight: 500; color: var(--aviso); }
.ia-sin-resultado { display: none; font-size: var(--t-chico); color: var(--jm-gray-soft); }
.ia-precio { font-variant-numeric: tabular-nums; color: var(--jm-gray-soft); }
.ia-confirmados form { margin: 0 0 0 auto; }

/* Cadena sin coincidencia real: mismo renglón, sin marca ni precio, con la
   leyenda en su lugar y menos peso visual que un resultado real. */
.ia-lista li[data-encontrado="false"] {
  background: transparent;
  border-style: dashed;
}
.ia-lista li[data-encontrado="false"] .ia-marca,
.ia-lista li[data-encontrado="false"] .ia-precio { display: none; }
.ia-lista li[data-encontrado="false"] .ia-sin-resultado { display: block; }
.ia-lista li[data-encontrado="false"] .ia-cadena { color: var(--jm-gray-soft); }

@keyframes ia-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ia-panel [data-ia-boton][aria-busy="true"] .icono { animation: none; opacity: .5; }
}

/* Descripción y especificaciones con IA ("Qué es", en la ficha y en la
   pre-alta). No es un botón suelto: una franja pegada arriba de los dos
   campos que llena, del mismo ancho que ellos, que dice qué va a buscar,
   cómo va y qué hizo. Una sola pieza con estados (data-estado):
   bloqueado · listo · buscando · hecho · error. El color de la franja cambia
   con el estado; el movimiento se reserva para lo que informa: el giro del
   botón y el brillo de los campos mientras busca. */
.ficha-ia { display: flex; flex-direction: column; gap: var(--hueco-2); max-width: 640px; }
.ficha-ia-franja {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--hundido);
  transition: background-color .2s ease, border-color .2s ease;
}
.ficha-ia-icono {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--azul-suave);
  color: var(--jm-blue-texto);
  transition: background-color .2s ease, color .2s ease;
}
.ficha-ia-icono .icono { display: none; width: 16px; height: 16px; }
.ficha-ia:is([data-estado="listo"], [data-estado="bloqueado"], [data-estado="buscando"]) .ficha-ia-icono .si-listo,
.ficha-ia[data-estado="hecho"] .ficha-ia-icono .si-hecho,
.ficha-ia:is([data-estado="error"], [data-estado="revisar"]) .ficha-ia-icono .si-error { display: block; }
.ficha-ia-texto {
  flex: 1 1 260px; min-width: 0;
  margin: 0;
  font-size: var(--t-chico); line-height: 1.45;
  color: var(--jm-gray-soft);
  text-wrap: pretty;
}
.ficha-ia-texto strong { margin-right: 3px; font-weight: 600; color: var(--jm-navy); }
.ficha-ia-acciones { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ficha-ia-acciones .enlace-accion { display: inline-flex; align-items: center; gap: 5px; }
.ficha-ia-acciones .enlace-accion .icono { width: 14px; height: 14px; }

/* Buscando: el ícono del botón cede su lugar a un giro. */
.ficha-ia-giro {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: ia-girar .7s linear infinite;
}
.ficha-ia[data-estado="buscando"] .ficha-ia-giro { display: inline-block; }
.ficha-ia[data-estado="buscando"] .ficha-ia-chispa { display: none; }

.ficha-ia[data-estado="hecho"] .ficha-ia-franja { background: #F1FAF4; border-color: #CFEBD9; }
.ficha-ia[data-estado="hecho"] .ficha-ia-icono { background: #E0F3E7; color: var(--correcto); }
.ficha-ia[data-estado="hecho"] .ficha-ia-texto strong { color: var(--correcto); }
/* "revisar": sí llenó, pero la ficha es de otra marca que la capturada. */
.ficha-ia:is([data-estado="error"], [data-estado="revisar"]) .ficha-ia-franja { background: #FEF9EC; border-color: #F2DDB0; }
.ficha-ia:is([data-estado="error"], [data-estado="revisar"]) .ficha-ia-icono { background: #FDF0D5; color: var(--aviso); }
.ficha-ia:is([data-estado="error"], [data-estado="revisar"]) .ficha-ia-texto strong { color: #8A4A06; }

.ficha-ia-etiqueta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.ficha-ia-etiqueta label { margin: 0; }
.ficha-ia-etiqueta .pildora { display: inline-flex; align-items: center; gap: 4px; }
.ficha-ia-etiqueta .pildora .icono { width: 12px; height: 12px; }
.ficha-ia-etiqueta .pildora:not([hidden]) { animation: fila-entra .18s var(--ease-out) both; }
.ficha-ia-caja { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; }
.ficha-ia-caja > textarea { width: 100%; transition: border-color .2s ease, box-shadow .15s ease, background-color .2s ease; }

/* Lo que llenó la IA, con un tinte que se va en cuanto la persona lo edita:
   ya es suyo. */
.ficha-ia-campo.sugerido textarea { background-color: #F5F9FD; border-color: #9FC4E6; }

/* Mientras busca, los dos campos dicen que ahí va a llegar el texto: un
   brillo que los recorre, de lado a lado, sin moverlos. */
.ficha-ia[data-estado="buscando"] textarea { background-color: var(--hundido); color: var(--jm-gray-soft); }
.ficha-ia[data-estado="buscando"] .ficha-ia-caja::after {
  content: "";
  position: absolute; inset: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  pointer-events: none;
  animation: ficha-ia-brillo 1.4s linear infinite;
}
@keyframes ficha-ia-brillo { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .ficha-ia[data-estado="buscando"] .ficha-ia-caja::after { display: none; }
  .ficha-ia-giro { animation: none; border-right-color: currentColor; opacity: .5; }
}

/* Presentación a clientes: una matriz, cliente por renglón, con su acción a
   la derecha en vez de una lista apilada con la mitad de la tarjeta vacía. */
/* Con muchos clientes la tarjeta no crece: la tabla se desplaza por dentro y
   el encabezado y el total se quedan a la vista. */
.tabla-clientes-marco { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.tabla-clientes-marco thead th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.tabla-clientes-marco tfoot th, .tabla-clientes-marco tfoot td { position: sticky; bottom: 0; z-index: 2; background: #fff; }
.tabla-clientes .cliente-nombre { font-weight: 600; color: var(--jm-gray); }
.tabla-clientes tr.sin-respuesta .cliente-nombre { font-weight: 500; color: var(--jm-gray-soft); }
.tabla-clientes .cliente-fecha { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-clientes .cliente-acciones { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* Piezas y costo: cifras alineadas a la derecha, con números de ancho fijo
   para que se lean en columna. */
.tabla-clientes .cliente-cifra { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--jm-gray); white-space: nowrap; }
.tabla-clientes th .th-nota { display: block; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--jm-sub); }
.tabla-clientes .cliente-nota { max-width: 22ch; }
.tabla-clientes .cliente-nota span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--t-chico); line-height: 1.4; color: var(--jm-sub);
}
.tabla-clientes tfoot th, .tabla-clientes tfoot td {
  padding-top: 12px; border-top: 1px solid var(--jm-border); border-bottom: none;
  font-size: var(--t-chico); font-weight: 600; color: var(--jm-gray); text-align: left; background: none;
}
.tabla-clientes tfoot td.numero { text-align: right; font-size: var(--t-base); }
.tabla-clientes tfoot .cliente-proyeccion { font-weight: 500; color: var(--jm-sub); }
/* En el teléfono cada cliente es un bloque: nombre y estado arriba, lo demás
   debajo, sin desplazarse de lado. */
@media (max-width: 640px) {
  .tabla-clientes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-clientes, .tabla-clientes tbody, .tabla-clientes tfoot { display: block; }
  .tabla-clientes tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--linea);
  }
  .tabla-clientes tbody td { display: block; padding: 0; border: 0; text-align: left; }
  .tabla-clientes tbody td:empty { display: none; }
  .tabla-clientes tbody td:nth-child(2) { justify-self: end; }
  .tabla-clientes tbody td:nth-child(n+3) { grid-column: 1 / -1; }
  .tabla-clientes .cliente-fecha { font-size: var(--t-chico); color: var(--jm-sub); }
  .tabla-clientes tbody .cliente-cifra:nth-child(4)::before { content: 'Piezas: '; font-weight: 500; color: var(--jm-sub); }
  .tabla-clientes tbody .cliente-cifra:nth-child(5)::before { content: 'Costo factura por pieza: '; font-weight: 500; color: var(--jm-sub); }
  .tabla-clientes .cliente-nota { max-width: none; }
  .tabla-clientes .cliente-acciones { justify-content: flex-start; }
  .tabla-clientes tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 12px 14px 0; }
  .tabla-clientes tfoot th, .tabla-clientes tfoot td { display: block; padding: 0; border: 0; }
}

/* Seguimiento: la caja para comentar arriba y la conversación debajo. */
.comentar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.comentar-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.comentar-acciones .campo-filtro { margin: 0; min-width: 200px; }
.comentario-avisados { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; font-size: var(--t-chico); color: var(--jm-sub); }
.comentario-avisados .icono { width: 13px; height: 13px; }
.comentar textarea, .recuadro-comentario textarea { min-height: 44px; field-sizing: content; max-height: 220px; }
.comentarios { display: grid; gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.comentarios li { display: flex; align-items: flex-start; gap: 12px; }
.comentarios .avatar { width: 34px; height: 34px; font-size: var(--t-chico); }
.comentarios li > div { min-width: 0; }
.comentario-cabecera { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.comentario-cabecera strong { margin-right: 6px; color: var(--jm-gray); }
.comentarios p { margin: 3px 0 0; font-size: var(--t-base); line-height: 1.5; color: var(--jm-gray); white-space: pre-line; overflow-wrap: anywhere; }

/* Imágenes: la portada a lo ancho y las demás en miniatura debajo. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.galeria li { position: relative; min-width: 0; }
.galeria li:first-child { grid-column: 1 / -1; }
.galeria-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
.galeria li:first-child .galeria-foto { aspect-ratio: 4 / 3; }
.galeria-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.galeria-foto:hover, .galeria-foto:focus-visible { border-color: #9FB8D2; }
.galeria form { position: absolute; top: 6px; right: 6px; margin: 0; }
.galeria-quitar {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid #F0C3C3;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #A51D1D;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.galeria-quitar .icono { width: 14px; height: 14px; }
.galeria-quitar:hover { background: #FDF1F1; }
@media (hover: hover) and (pointer: fine) {
  .galeria li .galeria-quitar { opacity: 0; }
  .galeria li:hover .galeria-quitar, .galeria-quitar:focus-visible { opacity: 1; }
}

/* Datos sin ícono en la ficha del producto: la etiqueta ya dice qué es y el
   hueco del azulejo solo empujaba el texto. */
.datos-lectura > div:not(:has(> dt > .icono)) { min-height: 0; padding-left: 0; }
.datos-lectura.dos-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.datos-lectura.dos-columnas > .ancho { grid-column: 1 / -1; }
/* Alineado a la izquierda: justificado, en una tarjeta angosta, abría huecos
   entre palabras. */
.texto-largo {
  white-space: pre-line;
  text-align: left;
  hyphens: auto;
}

/* Especificaciones: una por renglón, separadas por una línea tenue. */
.especificaciones { margin: 0; padding: 0; list-style: none; }
.especificaciones li {
  padding: 5px 0;
  border-top: 1px solid var(--jm-border);
  font-size: var(--t-base); line-height: 1.45; color: var(--jm-gray);
  hyphens: auto; overflow-wrap: anywhere;
}
.especificaciones li:first-child { border-top: none; padding-top: 0; }
.especificaciones-resto .especificaciones li:first-child { border-top: 1px solid var(--jm-border); padding-top: 5px; }
.especificaciones li strong { font-weight: 600; }
/* El resto se despliega en su lugar: la fila de la cuadrícula pasa de 0 a su
   alto natural, sin medir con JavaScript. */
.especificaciones-resto {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.especificaciones-resto > div { overflow: hidden; min-height: 0; }
.especificaciones-resto.abierto { grid-template-rows: 1fr; }
.especificaciones-boton { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.especificaciones-boton .icono { width: 14px; height: 14px; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.especificaciones-boton[aria-expanded="true"] .icono { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .especificaciones-resto, .especificaciones-boton .icono { transition: none; }
}

/* Qué respondió el cliente: tres opciones grandes, una sola se elige. */
.respuestas-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.opcion-respuesta { position: relative; margin: 0; cursor: pointer; }
.opcion-respuesta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-respuesta span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--borde-control);
  border-radius: 10px;
  background: #fff;
  font-size: var(--t-base); font-weight: 600;
  color: var(--jm-sub);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.opcion-respuesta span .icono { width: 16px; height: 16px; }
.opcion-respuesta:hover span { border-color: var(--borde-control-hover); }
.opcion-respuesta input:focus-visible + span { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.opcion-respuesta.presentado input:checked + span { background: #E7F1FA; border-color: #8DBBE0; color: #125A8F; }
.opcion-respuesta.aceptado input:checked + span { background: #E6F6EC; border-color: #8CCBA3; color: #17613A; }
.opcion-respuesta.rechazado input:checked + span { background: #FDECEC; border-color: #E7A9A9; color: #A51D1D; }
.opcion-respuesta.neutra input:checked + span { background: #E7F1FA; border-color: #8DBBE0; color: #125A8F; }
.tipo-marca-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
/* El % de gastos aduanales con que se va a costear, debajo de Costo y precio. */
.gastos-previos {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0 0; padding: 10px 12px;
  border-radius: 10px; background: var(--azul-suave);
  font-size: var(--t-chico); line-height: 1.45; color: var(--jm-gray);
}
.gastos-previos[hidden] { display: none; }
.gastos-previos > .icono { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--jm-blue-texto); }
.gastos-previos strong { color: var(--jm-navy); }

/* Clasificación: tres listas en un renglón, del general al particular. */
fieldset.clasificacion { min-width: 0; margin: 0; padding: 0; border: none; }
fieldset.clasificacion > legend { margin-bottom: 6px; padding: 0; }
.clasificacion-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.clasificacion-nuevo { margin-top: 10px; max-width: 420px; }

/* Nombre del producto en cuatro partes (macro nombre_producto). Mismo trato
   que la clasificación: un grupo con su etiqueta y los campos en rejilla. El
   número de cada parte es su posición en el nombre, como en la regla de JM;
   abajo, cómo queda, con el mismo trato que cualquier código del sistema. */
fieldset.nombre-producto { min-width: 0; margin: 0; padding: 0; border: none; }
fieldset.nombre-producto > legend { margin-bottom: 6px; padding: 0; }
fieldset.nombre-producto > legend .obligatorio { color: var(--alerta); margin-left: 2px; }
.nombre-partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
@media (max-width: 560px) { .nombre-partes { grid-template-columns: minmax(0, 1fr); } }
.nombre-parte { display: flex; flex-direction: column; min-width: 0; }
.nombre-parte > label {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
  font-size: var(--t-chico); font-weight: 600;
  color: var(--jm-sub);
}
.nombre-num {
  flex: none;
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--azul-suave);
  color: var(--jm-blue-texto);
  font-size: var(--t-mini); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.nombre-parte input:not(.buscable-campo) { text-transform: uppercase; }
.nombre-parte input::placeholder { text-transform: none; }
.nombre-resultado {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--hundido);
  transition: background-color .2s ease, border-color .2s ease;
}
.nombre-asi { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.nombre-vista {
  flex: 1 1 200px; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--t-base); font-weight: 800;
  letter-spacing: -.2px;
  color: var(--jm-blue-texto);
  overflow-wrap: anywhere;
}
.nombre-vista.vacia { font-family: var(--f); font-weight: 400; color: var(--jm-gray-soft); letter-spacing: 0; }
.nombre-cuenta { font-size: var(--t-chico); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--jm-gray-soft); }
.nombre-cuenta.excedido { color: var(--alerta); }
.nombre-producto.excedido .nombre-resultado { background: #FDF2F2; border-color: #F3CDCD; }

/* Listas desplegables: en las de códigos (colores) se ve el código de cada
   opción junto a su nombre. */
.valor-con-codigo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.valor-con-codigo input { flex: 1 1 auto; min-width: 0; }
.valor-codigo {
  flex: none; min-width: 52px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--t-chico); font-weight: 800;
  color: var(--jm-blue-texto);
}

.codigo-previo {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--hundido);
  font-size: var(--t-base);
  color: var(--jm-sub);
}
.codigo-previo .icono { width: 15px; height: 15px; color: var(--jm-blue-texto); }
.rejilla.rejilla-dos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ── Pre-costeo en captura ───────────────────────────────────────────────── */
/* Los campos a la izquierda y, a la derecha, cómo va quedando. El resumen
   se queda a la vista mientras se baja por el formulario. */
.costeo-form { display: grid; gap: 8px 32px; align-items: start; }
.costeo-form-campos { container: condicion / inline-size; min-width: 0; }
@container condicion (min-width: 980px) {
  .form-costeo .costeo-form { grid-template-columns: minmax(0, 1fr) 300px; }
  .form-costeo .costeo-vivo { position: sticky; top: 16px; margin-top: 16px; }
}
.costeo-vivo {
  display: grid; gap: 0;
  margin-bottom: 16px;
  padding: 18px 18px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--panel);
}
.costeo-vivo-titulo { margin: 0; font-size: var(--t-medio); font-weight: 700; color: var(--jm-navy); }
.costeo-vivo-tc { margin: 2px 0 10px; font-size: var(--t-chico); color: var(--jm-gray-soft); }
.costeo-vivo-tc strong { font-variant-numeric: tabular-nums; color: var(--jm-sub); }
.costeo-vivo-margen { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); }
.costeo-vivo .inversa { margin-top: 12px; }
.costeo-vivo-error { margin: 10px 0 0; color: var(--alerta); }
/* Mientras llega el cálculo, las cifras se apagan un poco. El retardo evita
   el parpadeo cuando la respuesta llega enseguida. */
.costeo-vivo [data-vivo], .costeo-vivo .medidor { transition: opacity .15s ease; }
.costeo-vivo.calculando [data-vivo], .costeo-vivo.calculando .medidor { opacity: .45; transition-delay: .12s; }
.dato-solo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  min-height: 40px;
  margin: 0;
  font-size: var(--t-base); font-weight: 600;
  color: var(--jm-gray);
}
.dato-solo .apagado { font-size: var(--t-chico); }

/* ── Revisión de dirección ───────────────────────────────────────────────── */
/* Un recuadro por producto, pensado para la junta: quién es, sus números y
   con qué se compara arriba; la decisión, siempre en el mismo lugar abajo. */
.nota-pantalla { max-width: none; margin: 0 0 16px; font-size: var(--t-base); line-height: 1.55; color: var(--jm-sub); }
.recuadros { display: grid; gap: var(--hueco-3); container: recuadros / inline-size; }
.recuadro {
  min-width: 0;
  border: 1px solid var(--jm-border);
  border-radius: var(--rad);
  background: #fff;
  box-shadow: var(--sombra);
  scroll-margin-top: 118px;
}
.recuadro.bajo-minimo { border-color: #E7A9A9; box-shadow: 0 0 0 1px #E7A9A9, var(--sombra); }
.recuadro-cuerpo { display: grid; gap: 20px 32px; padding: 22px 26px; }
@container recuadros (min-width: 900px) {
  .recuadro-cuerpo {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "identidad cifras" "contexto cifras";
    align-items: start;
  }
  .recuadro-identidad { grid-area: identidad; }
  .recuadro-cifras { grid-area: cifras; }
  .recuadro-contexto { grid-area: contexto; }
}
.recuadro-identidad { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.recuadro-titulo { min-width: 0; }
.recuadro-titulo h2 { margin: 0; font-size: var(--t-grande); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--jm-navy); }
.recuadro-titulo h2 a { color: inherit; text-decoration: none; }
.recuadro-titulo h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recuadro-titulo .pildoras { margin-top: 8px; }
.recuadro-diferenciador { max-width: 70ch; margin: 10px 0 0; font-size: var(--t-base); line-height: 1.5; color: var(--jm-sub); }
.recuadro-cifras { margin: 0; padding: 6px 16px; border-radius: 10px; background: var(--hundido); }
.recuadro-cifras > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #DCE6F0;
}
.recuadro-cifras > div:last-child { border-bottom: none; }
.recuadro-cifras dt { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.recuadro-cifras dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--jm-gray); text-align: right; }
.recuadro-cifras dd .apagado { display: block; font-size: var(--t-mini); }
.recuadro-cifras > .destacado { flex-direction: column; align-items: stretch; gap: 6px; }
.recuadro-cifras > .destacado dd { text-align: left; font-size: var(--t-medio); }
.recuadro-contexto { display: grid; gap: 14px; min-width: 0; }
.recuadro-comparativos .etiqueta-grupo { margin-top: 4px; }
.recuadro-comparativos .referencias + .etiqueta-grupo, .recuadro-comparativos .vacio-linea + .etiqueta-grupo { margin-top: 12px; }
.competencia { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--t-chico); color: var(--jm-sub); }
.recuadro-comentarios { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--hundido); }
.recuadro-comentarios p { margin: 0; font-size: var(--t-chico); line-height: 1.5; color: var(--jm-sub); }
.recuadro-decision {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: 12px;
  padding: 14px 26px 16px;
  border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--rad) var(--rad);
  background: var(--panel);
}
.recuadro-comentario { flex: 1 1 320px; min-width: 0; }
.recuadro-comentario textarea { width: 100%; }
/* Lo que acompaña a «Mandar a ventas»: a qué clientes primero y la proyección. */
.recuadro-ventas {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px;
  order: 2;
}
.recuadro-ventas .prioritarios { flex: 1 1 360px; min-width: 0; margin: 0; }
.recuadro-ventas .proyeccion { flex: 0 1 200px; margin: 0; }
.recuadro-decision .recuadro-botones { order: 3; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-opcion { position: relative; margin: 0; cursor: pointer; }
.chip-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opcion span {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px;
  border: 1px solid var(--linea); border-radius: 999px; background: #fff;
  font-size: var(--t-chico); font-weight: 600; color: var(--jm-gray);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.chip-opcion input:checked + span { border-color: var(--jm-blue); background: #E4EFF8; color: var(--jm-navy); }
.chip-opcion input:checked + span::before { content: "✓"; margin-right: 5px; }
.chip-opcion input:focus-visible + span { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.recuadro-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.decididos { margin-top: var(--hueco-3); }
.decididos-lista { margin: 0; padding: 0; list-style: none; }
.decididos-lista li {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
}
.decididos-lista li:last-child { border-bottom: none; }
.decididos-lista a { font-size: var(--t-base); font-weight: 600; color: var(--jm-blue-texto); text-decoration: none; }
.decididos-lista a:hover { text-decoration: underline; text-underline-offset: 3px; }
.decididos-lista .detalle-celda { margin: 0 0 0 auto; }

/* ── Normatividad, márgenes y carga masiva ───────────────────────────────── */
.tabla-compacta th { padding: 9px 12px; }
.tabla-compacta td { padding: 10px 12px; }
.margenes-grupos { display: grid; gap: var(--hueco-3); }
.margenes-grupos > .tarjeta { margin-bottom: 0; }
/* Gastos aduanales: la cifra que rige es lo primero que se lee. */
.tabla-gastos { width: 100%; min-width: 860px; table-layout: fixed; }
.tabla-gastos col.c-proveedor { width: 200px; }
.tabla-gastos col.c-marca { width: 190px; }
.tabla-gastos col.c-pais { width: 190px; }
.tabla-gastos col.c-cifra { width: 124px; }
.tabla-gastos col.c-fecha { width: 112px; }
.tabla-gastos col.c-acciones { width: 104px; }
.tabla-gastos td { overflow-wrap: anywhere; }
.tabla-gastos .gasto-cifra { font-size: var(--t-medio); color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.tabla-gastos .acciones-fila { justify-content: flex-end; }
.tabla-gastos .detalle-celda { display: block; }

.carga-layout { display: grid; gap: var(--hueco-3); align-items: start; }
.carga-layout > .tarjeta { margin-bottom: 0; }
@media (min-width: 1200px) {
  .carga-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.carga-layout .acciones { margin-top: 20px; }
/* Una sola tarjeta (la tabla de gastos): no deja media pantalla vacía. */
.carga-layout:has(> .tarjeta:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; width: 100%; }
.plantilla-excel {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--hueco-2); padding: 12px 14px;
  border: 1px solid var(--jm-border); border-radius: 10px; background: var(--hundido);
}
.plantilla-excel-icono {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; background: var(--jm-navy); color: #fff;
}
.plantilla-excel-icono .icono { width: 18px; height: 18px; }
.plantilla-excel-texto { flex: 1; min-width: 0; }
.plantilla-excel-titulo { margin: 0; font-size: var(--t-base); font-weight: 700; color: var(--jm-navy); }
.plantilla-excel .pista { margin: 2px 0 0; }
@media (max-width: 640px) {
  .plantilla-excel { flex-wrap: wrap; }
  .plantilla-excel .boton { width: 100%; justify-content: center; }
}
.carga-columnas { margin-top: 16px; }
.carga-columnas > summary {
  width: fit-content;
  font-size: var(--t-base); font-weight: 600;
  color: var(--jm-blue-texto);
  cursor: pointer;
}
.carga-columnas ul { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-chico); line-height: 1.7; color: var(--jm-sub); }
.carga-resumen-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 18px;
}
.carga-resumen-cabeza h2 { margin: 0; font-size: var(--t-grande); font-weight: 800; color: var(--jm-navy); overflow-wrap: anywhere; }
.carga-cuentas { display: flex; gap: 10px; margin: 0; }
.carga-cuentas > div { min-width: 120px; padding: 10px 16px; border-radius: 10px; background: var(--hundido); }
.carga-cuentas dt { font-size: var(--t-chico); color: var(--jm-gray-soft); }
.carga-cuentas dd { margin: 2px 0 0; font-size: var(--t-cifra); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--jm-navy); }
.carga-cuentas .correcta dd { color: var(--correcto); }
.carga-cuentas .con-error dd { color: var(--alerta); }
.tabla-carga .fila-error td { background: #FFF8F8; }
.tabla-carga td .detalle-celda { display: block; max-width: 36ch; }
/* La columna de revisión no se estrecha: el aviso cabe en dos renglones. */
.tabla-carga th:last-child, .tabla-carga td:last-child { min-width: 220px; }
.tabla-carga td:last-child .detalle-celda { max-width: 32ch; }
.carga-confirmar { margin-top: 18px; }
.carga-confirmar .pista { margin: 0 0 12px; }

/* ── En la ficha del proveedor ───────────────────────────────────────────── */
.etapas-resumen { margin-bottom: 14px; }
.etapas-resumen a.pildora strong { margin-left: 4px; font-variant-numeric: tabular-nums; }
.etapas-resumen a.pildora { text-decoration: none; transition: filter .15s ease; }
.etapas-resumen a.pildora:hover { filter: brightness(.96); }
.productos-mini { margin: 0; padding: 0; list-style: none; }
.productos-mini li + li { border-top: 1px solid var(--linea); }
.producto-mini { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: var(--t-base); color: inherit; text-decoration: none; }
.producto-mini-foto { flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; object-fit: contain; }
.producto-mini-foto.sin-foto { background: var(--hundido); }
.producto-mini-texto { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.producto-mini-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--jm-blue-texto); }
.producto-mini:hover .producto-mini-nombre { text-decoration: underline; text-underline-offset: 3px; }
.enlace-ver-todos { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: var(--t-base); font-weight: 600; color: var(--jm-blue-texto); text-decoration: none; }
.enlace-ver-todos .icono { width: 14px; height: 14px; }
.enlace-ver-todos:hover { text-decoration: underline; text-underline-offset: 3px; }
.gasto-grupo + .gasto-grupo { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linea); }
.gasto-grupo-titulo { margin-bottom: 8px; font-size: var(--t-chico); font-weight: 700; color: var(--jm-sub); }

/* ── Productos en el teléfono ────────────────────────────────────────────── */
@media (max-width: 660px) {
  .clasificacion-listas, .respuestas-opciones { grid-template-columns: minmax(0, 1fr); }
  .comentar { grid-template-columns: minmax(0, 1fr); }
  .comentar .boton { justify-self: end; }
  .datos-lectura.dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .resultado-costeo { grid-template-columns: minmax(0, 1fr); }
  .recuadro-cuerpo { padding: 18px; }
  .recuadro-decision { padding: 14px 18px 16px; }
  .recuadro-botones { width: 100%; margin-left: 0; }
  .recuadro-botones .boton { flex: 1 1 auto; justify-content: center; }
  .carga-cuentas { width: 100%; }
  .carga-cuentas > div { flex: 1 1 0; min-width: 0; }
  .clientes-estado li { grid-template-columns: minmax(0, 1fr) auto; }
  .clientes-estado li .cliente-fecha { grid-column: 1 / -1; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .medidor-relleno { transition: none; }
}

/* ── Revisión del 4-oct ─────────────────────────────────────────────────── */

/* Los historiales no se abren hasta el fin del mundo: se desplazan dentro
   de su marco. */
.historial > .linea-tiempo { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }

/* Presentar primero a: el número dice el orden. */
.chip-orden input:checked + span::before { content: none; }
.chip-orden .chip-numero:empty { display: none; }
.chip-orden .chip-numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin: 0 6px 0 -4px; border-radius: 50%;
  background: var(--jm-blue-dark); color: #fff;
  font-size: var(--t-mini); font-weight: 700; font-variant-numeric: tabular-nums;
}
.chip-opcion input[type="checkbox"], .chip-opcion input[type="checkbox"]:disabled { opacity: 0; pointer-events: none; }
.chip-orden input:disabled + span { opacity: .45; cursor: not-allowed; }
.chip-orden input:checked + span { transition: background-color .12s ease, border-color .12s ease, transform 160ms var(--ease-out); }
.chip-orden:active input:not(:disabled) + span { transform: scale(0.97); }
.prioritarios-pista { margin: 8px 0 0; }

/* Presentar primero a: un bloque con su propio fondo y título, no una línea de
   chips grises al fondo de la tarjeta. Pasaba desapercibido (6-oct). */
.prioritarios {
  --fondo-bloque: #F1F7FC;
  display: block; min-width: 0; margin: 0; padding: 12px 14px 12px;
  border: 1px solid #BBD6EE; border-radius: 12px; background: var(--fondo-bloque);
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.prioritarios-titulo { display: flex; align-items: center; gap: 8px; padding: 0 6px; margin-left: -6px; background: var(--fondo-bloque); border-radius: 8px; font-size: var(--t-base); font-weight: 700; color: var(--jm-navy); }
.prioritarios-icono { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #DCEBF8; color: var(--jm-blue-texto); }
.prioritarios-icono .icono { width: 14px; height: 14px; }
.prioritarios .chips { margin-top: 10px; }
.prioritarios .chip-opcion span { min-height: 32px; padding: 0 13px; font-size: var(--t-base); border-color: #CBDDEE; }
.prioritarios .chip-opcion:hover input:not(:checked):not(:disabled) + span { border-color: var(--jm-blue); }
.prioritarios .chip-opcion input:checked + span { border-color: var(--jm-blue-dark); background: #fff; box-shadow: 0 0 0 1px var(--jm-blue-dark); }
.prioritarios.invalida, .sab-lote-prioridad[open] > fieldset.invalida { --fondo-bloque: #FEF3F2; border-color: var(--alerta); }
.prioritarios.invalida .prioritarios-icono { background: #FBD5D2; color: var(--alerta); }
.prioritarios-error { margin: 8px 0 0; }
.prioritarios-error[hidden] { display: none; }
.obligatorio-claro { color: #FFB4B4; }
.orden-prioridad {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 18px; height: 18px; margin-right: 7px; padding: 0 5px; border-radius: 999px;
  background: var(--jm-blue-dark); color: #fff;
  font-size: var(--t-mini); font-weight: 700; font-variant-numeric: tabular-nums;
}
.cliente-nombre { display: inline-flex; align-items: center; }
.presenta-prioridad { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.presenta-prioridad-cliente { display: inline-flex; align-items: center; font-size: var(--t-mini); font-weight: 600; color: var(--jm-blue-texto); }
.presenta-prioridad .orden-prioridad { min-width: 16px; height: 16px; margin-right: 4px; font-size: 10px; }

/* La lista de productos para presentar se desplaza dentro de su tarjeta. */
.presenta-lista { max-height: 560px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; scrollbar-gutter: stable; }
@media (max-width: 640px) { .presenta-lista { max-height: 62dvh; } }
/* Hay más abajo: el último renglón visible se desvanece. */
.presenta-lista.hay-mas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
                          mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }

/* Ventana para elegir el cliente al descargar. */
.presentar-campos { margin-top: 4px; }
.presentar-resumen {
  margin: 16px 0 0; overflow: hidden;
  border: 1px solid var(--linea); border-radius: 12px; background: #fff;
  font-size: var(--t-base); color: var(--jm-sub);
}
.presentar-resumen:empty { display: none; }
.resumen-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 14px; background: var(--hundido); border-bottom: 1px solid var(--linea); }
.resumen-dato { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 11px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; font-size: var(--t-chico); }
.resumen-dato strong { font-size: var(--t-medio); font-weight: 800; color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.resumen-zip { margin-left: auto; font-size: var(--t-chico); font-weight: 600; color: var(--jm-blue-texto); }
.resumen-vacio { margin: 0; padding: 14px; font-size: var(--t-chico); color: var(--jm-gray-soft); }
.resumen-tabla-marco { max-height: 236px; overflow: auto; overscroll-behavior: contain; }
.resumen-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.resumen-tabla th, .resumen-tabla td { padding: 8px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: baseline; }
.resumen-tabla thead th { position: sticky; top: 0; z-index: 1; background: #fff; font-size: var(--t-chico); font-weight: 600; color: var(--jm-sub); }
.resumen-tabla tbody tr:last-child > * { border-bottom: none; }
.resumen-tabla .numero { text-align: right; font-variant-numeric: tabular-nums; }
.resumen-cliente { font-weight: 600; color: var(--jm-navy); }
.resumen-tabla td strong { color: var(--jm-navy); }
.resumen-detalle { display: block; font-size: var(--t-chico); color: var(--jm-sub); }
.resumen-tabla tr.repite > * { background: #FFF8E8; }
.resumen-notas { display: grid; gap: 6px; margin: 0; padding: 10px 14px; list-style: none; border-top: 1px solid var(--linea); background: var(--hundido); font-size: var(--t-chico); }
.resumen-notas li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.resumen-notas .icono { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--jm-blue-texto); }

/* Seguimiento: tarjetas por omisión; con el interruptor, un renglón por
   presentación agrupado por mes. */
.lista-presentaciones > .historial-meses { display: none; }
.lista-presentaciones > .tarjetas-lista { display: grid; gap: var(--hueco-3); }
:root[data-vista="tabla"] .lista-presentaciones > .historial-meses { display: grid; gap: var(--hueco-3); }
:root[data-vista="tabla"] .lista-presentaciones > .tarjetas-lista { display: none; }
.historial-mes-titulo { margin: 0 0 8px; font-size: var(--t-chico); font-weight: 700; color: var(--jm-sub); }
.historial-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.historial-item { display: flex; align-items: center; gap: 10px; }
.historial-abrir {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(220px, 1fr) auto; align-items: center; gap: 20px;
  padding: 12px 16px 12px 14px;
  border: 1px solid var(--jm-border); border-radius: var(--rad); background: #fff;
  color: inherit; text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .historial-abrir:hover { border-color: var(--borde-control-hover); box-shadow: var(--sombra); }
  .historial-abrir:hover .historial-accion .icono { transform: translateX(2px); }
}
.historial-abrir:active { transform: scale(0.995); }
.historial-abrir:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.historial-abrir[data-marca="aviso"] { border-color: #F2C98A; box-shadow: inset 4px 0 0 #E8A33D, 0 0 0 1px #F2C98A; }
.historial-item.reciente .historial-abrir {
  border-color: #8DBBE0; box-shadow: 0 0 0 1px #8DBBE0;
  animation: historial-llega 1.2s var(--ease-out);
}
.historial-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.historial-cliente { font-size: var(--t-medio); font-weight: 700; color: var(--jm-navy); }
.historial-cliente.sin-cliente { color: var(--aviso); }
.historial-meta { font-size: var(--t-chico); color: var(--jm-sub); }
.historial-accion {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-base); font-weight: 600; color: var(--jm-sub); white-space: nowrap;
}
.historial-accion.pendiente { color: var(--jm-blue-texto); }
.historial-accion .icono { width: 16px; height: 16px; transition: transform 160ms var(--ease-out); }
@media (max-width: 640px) {
  .historial-abrir {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "texto texto accion" "fotos avance avance";
    gap: 10px 12px; padding: 12px;
  }
  .historial-abrir .historial-texto { grid-area: texto; }
  .historial-abrir .historial-fotos { grid-area: fotos; }
  .historial-abrir .avance-respuestas { grid-area: avance; }
  .historial-accion { grid-area: accion; font-size: 0; gap: 0; }
  .historial-accion .icono { width: 18px; height: 18px; }
  .historial-abrir .historial-foto { width: 32px; height: 32px; margin-left: -8px; padding: 2px; border-radius: 8px; }
  .historial-abrir .historial-fotos .historial-foto:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .historial-abrir, .historial-accion .icono { transition: none; }
  .historial-abrir:active { transform: none; }
}
.enlace-fuerte { font-weight: 700; color: var(--jm-navy); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .enlace-fuerte:hover { color: var(--jm-blue-texto); text-decoration: underline; } }
.acciones-fila { display: inline-flex; align-items: center; gap: 8px; }
.filtros .campo.campo-fecha { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.campo-fecha > label { margin: 0; font-size: var(--t-chico); font-weight: 600; color: var(--jm-sub); white-space: nowrap; }
.campo-fecha > .control { flex: 1; min-width: 150px; }
.campo-fecha input[type="date"] { min-width: 0; }

/* Tarjeta de clientes de la ficha: la nota con espacio, la acción ceñida. */
.tabla-clientes { table-layout: auto; }
.tabla-clientes th:nth-child(1) { width: 20%; }
.tabla-clientes th:nth-child(2) { width: 13%; }
.tabla-clientes th:nth-child(3) { width: 11%; }
.tabla-clientes th:nth-child(4) { width: 8%; }
.tabla-clientes th:nth-child(5) { width: 11%; }
.tabla-clientes td:last-child, .tabla-clientes th:last-child { width: 1%; white-space: nowrap; }
.tabla-clientes th:nth-child(6) { width: 30%; padding-left: 20px; }
.tabla-clientes .cliente-nota { max-width: none; padding-left: 20px; }

/* Tabla de gastos: lo que espera alta. */
.carga-cuentas .espera dd { color: var(--aviso); }
.carga-espera { max-height: 320px; overflow-y: auto; margin-top: 8px; }

/* El % de gastos en el renglón de cada condición. */
.gastos-resumen.estimado { color: var(--aviso); }

/* Formulario de la condición: el % de gastos y su explicación. */
.gastos-condicion { display: grid; gap: 12px; }
.gastos-condicion .gastos-previos { margin: 0; }
.gastos-condicion-campos { margin: 0; }

/* Listas desplegables: apagar en vez de quitar (clientes). */
.activo-valor { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; margin: 0; cursor: pointer; }

.valor.apagada input[type="text"] { color: var(--jm-gray-soft); text-decoration: line-through; text-decoration-color: rgba(90, 108, 129, .4); }

/* Reglas: el texto de una regla no se aprieta junto a una lista ancha; si
   no caben, la lista baja. */
.regla { flex-wrap: wrap; }
.regla-texto { flex: 1 1 240px; }
.regla-control select { max-width: 340px; }
/* En las reglas de lista (orígenes, texto del contrato) el renglón va en
   columna: ahí el texto no se estira, y el control toma todo el ancho. */
.regla.regla-lista .regla-texto { flex: none; }
.regla.regla-lista .regla-control textarea { width: 100%; min-height: 104px; resize: vertical; }

/* Pre-alta: los cuatro números de la cuenta. */
.cuenta-numeros { margin: 6px 0 0; }

/* Ventana de decidir: los botones son el pie de la ventana, como en las
   demás, y no se amontonan junto al comentario. */
.modal-tarjeta .recuadro-decision { display: grid; gap: 16px; }
.modal-tarjeta .recuadro-ventas { order: 0; }
.modal-tarjeta .recuadro-decision .recuadro-botones {
  position: sticky; bottom: 0; z-index: 3;
  justify-content: flex-end; margin: 4px -26px 0; padding: 14px 26px 18px;
  border-top: 1px solid var(--linea); background: #fff;
}
@media (max-width: 660px) {
  .modal-tarjeta .recuadro-decision .recuadro-botones { margin: 4px -18px 0; padding: 12px 18px 16px; }
  .modal-tarjeta .recuadro-decision .recuadro-botones .boton { flex: 1 1 100%; justify-content: center; }
}
/* Cualquier ventana: los botones del pie se acomodan en dos renglones antes
   que salirse. */
.modal-acciones { flex-wrap: wrap; }
.modal-acciones .boton { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .chip-orden input:checked + span { transition: none; }
  .chip-orden:active input:not(:disabled) + span { transform: none; }
}

/* ── Segunda pasada del 4-oct ───────────────────────────────────────────── */

/* Tarjeta de gastos aduanales: con qué se costea cada marca y origen. */
.gastos-rigen { display: grid; margin: 0; padding: 0; list-style: none; }
.gasto-rige {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--linea);
}
.gasto-rige:first-child { padding-top: 2px; }
.gasto-rige-texto { display: grid; gap: 2px; min-width: 0; }
.gasto-rige-llave { font-size: var(--t-base); font-weight: 600; color: var(--jm-gray); }
.gasto-rige-fuente { font-size: var(--t-chico); color: var(--jm-sub); }
.gasto-rige-cifra {
  flex: none; font-size: var(--t-grande); font-weight: 800; color: var(--jm-navy);
  font-variant-numeric: tabular-nums;
}
.gasto-rige-cifra.estimado { color: var(--aviso); }
.gasto-rige-cifra .unidad-cifra { margin-left: 1px; font-size: var(--t-chico); font-weight: 700; }
.gastos-registrados { margin-top: var(--hueco-2); }
.gastos-registrados-cuerpo { max-height: 360px; overflow-y: auto; margin-top: 8px; }

/* Tabla vigente de gastos, en ventana. */
.gastos-tabla { display: grid; gap: var(--hueco-2); }
.gastos-tabla-filtros { margin: 0; }
.gastos-tabla-marco { max-height: 60dvh; overflow: auto; }

/* Ficha del producto: Aceptó y Rechazó en una sola fila. */
.tabla-clientes .cliente-acciones { flex-wrap: nowrap; }

/* Cargar varios documentos: un renglón por archivo con su estado. */
.subir-varios .soltar-varios { display: none; }
.subir-varios .soltar:has(.soltar-agregar:not([hidden])) { padding: 12px 16px; }
.docs-carga { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.docs-carga:empty { display: none; }
.doc-carga {
  padding: 12px 14px; border: 1px solid var(--jm-border); border-radius: 12px; background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
@starting-style { .doc-carga { opacity: 0; transform: translateY(6px); } }
.doc-carga.subiendo { border-color: #8DBBE0; }
.doc-carga.subido { background: #F4FBF6; border-color: #BFE3CB; }
.doc-carga-cabeza { display: flex; align-items: center; gap: 10px; }
.doc-carga-icono {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; background: var(--azul-suave); color: var(--jm-blue-texto);
}
.doc-carga-icono .icono { width: 16px; height: 16px; }
.doc-carga-archivo { display: grid; flex: 1; min-width: 0; }
.doc-carga-archivo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-base); color: var(--jm-gray); }
.doc-carga-archivo .apagado { font-size: var(--t-chico); }
.doc-carga-estado { flex: none; }
.doc-carga-campos {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px 12px;
  margin-top: 10px;
}
.doc-carga-campos .campo { margin: 0; }
.doc-carga-indeterminada { margin: 0 0 10px; white-space: nowrap; }
.doc-carga-error { margin: 8px 0 0; font-size: var(--t-chico); font-weight: 600; color: var(--alerta); }
.docs-carga-resumen { margin: 0 auto 0 0; font-size: var(--t-chico); color: var(--jm-sub); }
@media (max-width: 640px) {
  .doc-carga-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .doc-carga-campos .campo:first-child { grid-column: 1 / -1; }
  .docs-carga-resumen { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-carga { transition: none; }
  @starting-style { .doc-carga { opacity: 0; transform: none; } }
}

/* ── Sesión 4 (6-oct) ───────────────────────────────────────────────────── */

/* Las NOM del producto: una por renglón, con su costo y su X. */
.nom-lista { display: grid; gap: 8px; }
.nom-lista [data-nom-lista] { display: grid; gap: 8px; }
.nom-fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.nom-fila:not(:has(.con-sufijo)) { grid-template-columns: minmax(0, 1fr) auto; }
.nom-fila .quitar-valor { margin: 0; }
.nom-lista .enlace-accion { justify-self: start; }
.nom-por-pieza { margin: 0; }
.nom-por-pieza strong { font-variant-numeric: tabular-nums; color: var(--jm-navy); }
@media (max-width: 520px) {
  .nom-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .nom-fila .con-sufijo { grid-column: 1 / 2; }
}
.margenes-grupos .apagada td { color: var(--jm-gray-soft); }
.cuentas-anteriores > summary { cursor: pointer; font-weight: 600; color: var(--jm-sub); }

/* Fondos de marketing: «sale del MDF» solo se pregunta si el fondo aplica. */
.fondo-fila .fondo-mdf { grid-column: 1 / -1; min-height: 0; font-size: var(--t-sm, 0.875rem); color: var(--jm-sub); }
.fondo-fila:not(:has(input[name^="fondo_"]:checked)) .fondo-mdf { display: none; }
.fondo-aparte { color: var(--jm-sub); font-weight: 500; }

/* Objetivos de rebate: el resumen de arriba y la barra de cada meta. */
.rebates-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 var(--hueco-2, 16px); }
.rebates-dato { display: grid; gap: 2px; padding: 12px 16px; background: var(--jm-card, #fff); border: 1px solid var(--linea); border-radius: 12px; border-left: 4px solid var(--jm-bg2); }
.rebates-dato.aviso { border-left-color: var(--aviso); }
.rebates-dato.correcto { border-left-color: var(--correcto); }
.rebates-cifra { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--jm-navy); font-variant-numeric: tabular-nums; }
.rebates-leyenda { font-size: var(--t-sm, 0.875rem); color: var(--jm-sub); }
.rebate-barra { height: 6px; margin-top: 6px; min-width: 120px; border-radius: 3px; background: var(--jm-bg2); overflow: hidden; }
.rebate-barra > span { display: block; height: 100%; border-radius: 3px; background: var(--jm-blue-dark); }
.rebate-barra.correcta > span { background: var(--correcto); }
.rebate-barra.espera > span { background: var(--aviso); }
.rebate-barra.alerta > span { background: var(--alerta); }
.tarjeta-fila-barra { padding: 0 0 4px; }

/* Datos bancarios del proveedor. */
.datos-bancarios .dato-folio { word-break: break-all; }
.bancarios-cambios { margin-top: 12px; }

/* ── La sábana de costeo ─────────────────────────────────────────────────── */
/* Lo esencial cabe en una sola vista: producto, costo, landed, PVP, MSRP, cuenta,
   margen y OK. El producto queda fijo a la izquierda y el margen con el OK a la
   derecha, así que aunque la pantalla sea chica lo que se decide no se pierde.
   El desglose (vendor, MKT, trade, factura y neto) se abre con su interruptor. */
.sabana-marco { max-height: calc(100vh - 290px); min-height: 280px; overflow: auto; border-radius: 12px; }
.sabana { --sab-fondo: #fff; border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--t-base); }
.sabana th, .sabana td {
  padding: 7px 6px; border-bottom: 1px solid var(--linea); background: var(--sab-fondo);
  white-space: nowrap; vertical-align: middle; text-align: left;
}
.sabana .numero { text-align: right; font-variant-numeric: tabular-nums; }
.sabana thead th {
  position: sticky; top: 0; z-index: 3; padding-block: 10px; background: var(--jm-bg2);
  font-size: var(--t-chico); font-weight: 600; color: var(--jm-navy); border-bottom: 1px solid var(--jm-border);
}
.sabana thead th .ayuda { margin-left: 2px; }
.sabana .sab-sel { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; padding-inline: 0; text-align: center; }
.sabana .sab-producto {
  position: sticky; z-index: 2; left: 44px; min-width: 220px; max-width: 300px;
  white-space: normal; font-weight: 500; box-shadow: 1px 0 0 var(--linea);
}
.sabana:not(:has(.sab-sel)) .sab-producto { left: 0; }
.sabana .sab-margen { position: sticky; z-index: 2; right: 0; min-width: 120px; box-shadow: -1px 0 0 var(--linea); }
.sabana .sab-ok { position: sticky; z-index: 2; right: 0; width: 84px; min-width: 84px; text-align: center; }
.sabana:has(.sab-ok) .sab-margen { right: 84px; }
.sabana thead .sab-sel, .sabana thead .sab-producto, .sabana thead .sab-margen, .sabana thead .sab-ok { z-index: 5; background: var(--jm-bg2); }
.sabana-marco:not(.con-desglose) .sab-desglose { display: none; }

.sab-identidad { display: flex; align-items: center; gap: 10px; }
.sab-identidad > div { display: grid; gap: 2px; min-width: 0; }
.sab-identidad a { font-weight: 600; color: var(--jm-navy); line-height: 1.25; }
.sab-identidad .detalle-celda { display: block; }
.sab-pildoras { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; margin-left: 2px; }

.sabana tbody tr:hover > td, .sabana tbody tr:hover > th { background: #F4F8FC; }
.sabana tbody tr:has([data-sab-marca]:checked) > td, .sabana tbody tr:has([data-sab-marca]:checked) > th { background: #EAF3FB; }
.sabana tr[data-tono="bajo"] > th.sab-producto { box-shadow: inset 3px 0 0 var(--alerta), 1px 0 0 var(--linea); }

.sab-campo { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.sab-campo input, .sab-cuenta select {
  width: 72px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--jm-bg, #EEF3F9);
  font: inherit; text-align: right; font-variant-numeric: tabular-nums; color: var(--jm-navy);
  transition: border-color 140ms var(--ease-out, ease-out), background-color 140ms var(--ease-out, ease-out);
}
.sab-cuenta select { width: 150px; min-width: 0; text-align: left; }
.sab-campo input:hover, .sab-cuenta select:hover { border-color: var(--linea-fuerte, #C9D6E4); }
.sab-campo input:focus, .sab-cuenta select:focus { border-color: var(--jm-blue-dark); background: #fff; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--jm-blue) 22%, transparent); }
.sab-campo input::placeholder { color: var(--jm-gray-soft); }
.sab-unidad { color: var(--jm-sub); font-size: var(--t-chico); }
.sab-tc { display: block; margin-top: 2px; font-size: var(--t-chico); color: var(--jm-sub); }
.sab-cuenta-nota { display: block; margin-top: 3px; font-size: var(--t-chico); color: var(--aviso); }
.sab-alerta { color: var(--aviso); display: inline-flex; vertical-align: middle; margin-left: 4px; }
.sab-listo { color: var(--correcto); display: inline-flex; }
.sabana tbody tr.guardando td, .sabana tbody tr.guardando th { opacity: 0.7; }
.sabana tbody tr.guardado .medidor { animation: sab-guardado 900ms var(--ease-out, ease-out); border-radius: 8px; }
@keyframes sab-guardado { from { box-shadow: 0 0 0 5px color-mix(in srgb, var(--jm-blue) 30%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .sabana tbody tr.guardado .medidor { animation: none; } }

/* El margen de JM, grande y con su barra: es lo que se mira para autorizar. */
.medidor.celda { flex-direction: column; align-items: flex-start; gap: 5px; }
.medidor.celda .medidor-cifra { min-width: 0; font-size: var(--t-medio); font-weight: 800; line-height: 1; letter-spacing: -.01em; text-align: left; }
.medidor.celda .medidor-barra { width: 80px; height: 5px; }
.medidor.sin-margen .medidor-cifra { color: var(--jm-gray-soft); font-weight: 600; }
.medidor.sin-margen .medidor-relleno, .medidor.sin-margen .medidor-minimo { display: none; }
.sab-desglose-control { font-size: var(--t-chico); color: var(--jm-sub); }

/* Casilla de selección de un renglón: una palomita, no un interruptor. Los
   interruptores son para activar algo; elegir renglones de una lista se lee
   como una casilla de toda la vida. */
input[type="checkbox"].casilla {
  /* Sin el relleno de los campos de texto: se veía de 26 × 20, ancha y chata. */
  box-sizing: border-box; flex: none; padding: 0; margin: 0; min-width: 0;
  width: 18px; height: 18px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px #8497AD;
  transition: background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
input[type="checkbox"].casilla::before {
  top: 2px; left: 6px; width: 5px; height: 9px; border-radius: 0; background: none; box-shadow: none;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: 50% 60%;
  transition: transform 140ms var(--ease-out);
}
input[type="checkbox"].casilla:hover:not(:disabled) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--jm-blue-texto); }
input[type="checkbox"].casilla:checked, input[type="checkbox"].casilla:checked:hover:not(:disabled), input[type="checkbox"].casilla:indeterminate {
  background: var(--jm-blue-texto); box-shadow: inset 0 0 0 1.5px var(--jm-blue-texto);
}
input[type="checkbox"].casilla:checked::before, input[type="checkbox"].casilla:checked:active:not(:disabled)::before { transform: rotate(45deg) scale(1); }
input[type="checkbox"].casilla:active:not(:disabled)::before { transform: rotate(45deg) scale(0); }
input[type="checkbox"].casilla:indeterminate::before { top: 7px; left: 3px; width: 12px; height: 0; border-width: 0 0 2px 0; transform: none; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"].casilla, input[type="checkbox"].casilla::before { transition: none; } }

/* La barra del OK: la misma barra blanca fija de Presentaciones, a lo ancho de
   la lista. A la izquierda lo marcado (se abre la lista, como un carrito); en
   medio, a quién se presenta primero; a la derecha, el OK. Lo que se despliega
   sube desde su botón y nunca se sale de la barra. */
.sab-lote {
  position: sticky; bottom: 12px; z-index: 20; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px;
  border: 1px solid var(--jm-border); border-radius: 14px; background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 30px rgba(15, 42, 78, .14), 0 2px 6px rgba(15, 42, 78, .06);
}
.sab-lote[hidden] { display: none; }
.sab-lote > button[type="submit"] { margin-left: auto; }
.sab-lote-marcados > summary, .sab-lote-prioridad > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 12px; border: 1px solid var(--borde-control); border-radius: 10px; background: #fff;
  font-size: var(--t-base); font-weight: 600; color: var(--jm-navy);
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.sab-lote-marcados > summary::-webkit-details-marker, .sab-lote-prioridad > summary::-webkit-details-marker { display: none; }
.sab-lote-marcados > summary:hover, .sab-lote-prioridad > summary:hover { border-color: var(--borde-control-hover); background: var(--hundido); }
.sab-lote-marcados[open] > summary, .sab-lote-prioridad[open] > summary { border-color: var(--jm-blue-dark); box-shadow: 0 0 0 1px var(--jm-blue-dark); }
.sab-lote-marcados > summary .icono { width: 14px; height: 14px; color: var(--jm-sub); transition: rotate 160ms var(--ease-out); }
.sab-lote-marcados[open] > summary .icono { rotate: 180deg; }
.sab-lote-cuenta strong { font-size: var(--t-grande); font-variant-numeric: tabular-nums; color: var(--jm-navy); }
.sab-lote-fuera { font-weight: 500; color: var(--jm-sub); }
.sab-lote-prioridad-cuenta:not(:empty) { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--jm-blue-dark); color: #fff; font-size: var(--t-mini); font-weight: 700; }
.sab-lote .obligatorio-claro { color: var(--alerta); }

.sab-lote-panel, .sab-lote-prioridad[open] > fieldset {
  position: absolute; bottom: calc(100% + 8px); left: 12px; z-index: 2;
  width: min(620px, calc(100% - 24px)); max-height: min(60vh, 460px); overflow: auto; overscroll-behavior: contain;
  padding: 14px; color: var(--jm-navy); background: #fff; border: 1px solid var(--jm-border); border-radius: 12px;
  box-shadow: 0 14px 40px rgb(15 42 78 / 0.22);
}
.sab-lote-prioridad[open] > fieldset { --fondo-bloque: #fff; }
.sab-lote-panel-titulo { margin: 0 0 8px; font-size: var(--t-chico); font-weight: 700; color: var(--jm-sub); }
.sab-lote-items { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sab-lote-items li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: var(--t-base); }
.sab-lote-items li:hover { background: var(--hundido); }
.sab-lote-items .boton-icono { width: 28px; height: 28px; flex: none; }
.sab-lote-panel-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }

/* Sube desde su botón al abrirse; la barra entra desde abajo al marcar el primero. */
.sab-lote { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style { .sab-lote:not([hidden]) { opacity: 0; transform: translateY(12px); } }
.sab-lote-marcados[open] > .sab-lote-panel, .sab-lote-prioridad[open] > fieldset { transform-origin: 24px 100%; animation: sab-lista 160ms var(--ease-out); }
@keyframes sab-lista { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
  .sab-lote { transition: opacity 120ms ease; }
  @starting-style { .sab-lote:not([hidden]) { transform: none; } }
  .sab-lote-marcados[open] > .sab-lote-panel, .sab-lote-prioridad[open] > fieldset { animation: sab-lista-suave 120ms ease; }
  @keyframes sab-lista-suave { from { opacity: 0; } }
  .sab-lote-marcados > summary .icono { transition: none; }
}
@media (max-width: 640px) {
  .sab-lote > button[type="submit"] { width: 100%; margin-left: 0; }
}

/* Presentar primero a: otro cliente que no está en la lista, en la misma fila. */
.prioritarios-otro { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; max-width: 460px; }
.prioritarios-otro .control { flex: 1; min-width: 0; background: #fff; }
.prioritarios-otro input { font-size: var(--t-chico); }
.chip-otro span { border-style: dashed; }

/* Costeo: la cuenta. Abierta, con su categoría y sus cuatro números; cerrada,
   solo el cliente (la columna no crece). */
.sab-cuenta select selectedcontent .cuenta-detalle { display: none; }
.sab-cuenta option .cuenta-detalle { color: var(--jm-sub); font-weight: 500; }
.sab-cuenta .sab-cuenta-nota:not([data-tip]) { color: var(--jm-sub); }
.sabana tbody tr:target > td, .sabana tbody tr:target > th { background: #FFF8E6; transition: background-color 1.2s var(--ease-out); }
.sabana tbody tr { scroll-margin-top: 120px; scroll-margin-bottom: 120px; }

/* Margen con cada cuenta, en la ficha del producto. */
.cuentas-margen { margin-top: 12px; }
.cuentas-margen .tabla-marco { margin-top: 8px; }
.cuentas-margen th[scope="row"] { font-weight: 500; text-align: left; }
.cuentas-margen .cuenta-actual > * { background: color-mix(in srgb, var(--jm-bg2) 55%, transparent); }
.cuentas-margen .pista { margin: 8px 0 0; }

/* Pestañas con riel: un degradado dice de qué lado hay más. */
.subtabs { padding-inline: 2px; }
.subtabs.mas-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.subtabs.mas-izq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.subtabs.mas-izq.mas-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.subtabs-link { padding-inline: 12px; }

/* Rebates: cada dato con su detalle debajo, y las acciones en una línea. */
.lista-rebates td .detalle-celda { display: block; }
.lista-rebates .acciones-fila { flex-wrap: nowrap; }
.lista-rebates .rebate-barra { min-width: 140px; }


/* Imágenes y videos del producto. */
.galeria li { position: relative; }
.galeria-baja {
  position: absolute; left: 6px; bottom: 6px; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: #FEF0CC; color: #7A3F06;
  box-shadow: 0 0 0 1px #F2D9A2, 0 1px 3px rgb(15 42 78 / 0.25); pointer-events: auto;
}
.galeria-baja .icono { width: 14px; height: 14px; }
.galeria-videos-titulo { margin-top: 16px; }
.videos-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.videos-lista li { display: flex; align-items: center; gap: 8px; }
.video-abrir {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--jm-card, #fff); color: var(--jm-navy); cursor: pointer;
  transition: border-color 140ms var(--ease-out, ease-out), background-color 140ms var(--ease-out, ease-out);
}
.video-abrir:hover { border-color: var(--jm-blue); background: var(--jm-bg2); }
.video-abrir span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-video { max-width: 100%; max-height: 74vh; border-radius: 8px; background: #000; }

/* Presentaciones: ver lo elegido y por qué rechazaron. */
[data-presenta-ver-elegidos].activo { background: var(--jm-navy); border-color: var(--jm-navy); color: #fff; }
.rechazos-nota { list-style: none; margin: 8px 0 0; padding: 8px 10px; display: grid; gap: 4px; border-radius: 8px; background: #FDF2F2; font-size: var(--t-chico); color: #7F1D1D; }
.rechazos-nota li { display: flex; gap: 6px; align-items: flex-start; }
.rechazos-nota .icono { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.historial-rechazos { display: flex; align-items: center; gap: 6px; color: #9A1B1B; }
.historial-rechazos .icono { width: 14px; height: 14px; }
.respuesta-nota-texto { color: var(--jm-sub); font-style: italic; }

/* Tarjeta de producto en Presentaciones: todas del mismo tamaño. Lo principal
   arriba (foto, nombre de hasta dos renglones, marca, precio) y, si Dirección
   pidió presentarlo primero a ciertos clientes, un pie de una sola línea. */
.presenta-marco { flex-direction: column; align-items: stretch; gap: 8px; }
.presenta-principal { display: flex; align-items: center; gap: 12px; min-width: 0; }
.presenta-foto { width: 64px; height: 64px; }
.presenta-nombre {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.presenta-prioridad {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; margin: auto 0 0; padding-top: 8px;
  border-top: 1px solid var(--linea); white-space: nowrap; overflow: hidden;
}
.presenta-prioridad-rotulo { flex: none; font-size: var(--t-mini); color: var(--jm-sub); }
.presenta-prioridad-cliente { min-width: 0; flex: 0 1 auto; }
.presenta-prioridad-texto { overflow: hidden; text-overflow: ellipsis; max-width: 9.5em; }
.presenta-prioridad .orden-prioridad { flex: none; }
.presenta-prioridad-mas {
  flex: none; padding: 0 7px; border-radius: 999px; background: var(--jm-bg2); color: var(--jm-navy);
  font-size: var(--t-mini); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Entre pantallas: el menú y el marco se quedan quietos y el contenido se
   funde en 120 ms. La imagen del producto viaja de la lista a su ficha. */
.sidebar { view-transition-name: menu; }
.caratula-foto { view-transition-name: producto-foto; }
html[data-vt="pantalla"]::view-transition-old(root),
html[data-vt="pantalla"]::view-transition-new(root) { animation-duration: .12s; animation-timing-function: var(--ease-out); }
::view-transition-group(producto-foto) { animation-duration: .26s; animation-timing-function: var(--ease-out); }
::view-transition-group(menu) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(producto-foto) { animation: none; }
}

/* Ampliar una imagen en el visor para revisar su calidad. */
.visor-cuerpo { overflow: hidden; }
.visor-imagen { cursor: zoom-in; transition: transform 200ms var(--ease-out); will-change: transform; }
.visor-imagen.ampliada { transform: scale(2.4); cursor: zoom-out; transition: transform 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .visor-imagen, .visor-imagen.ampliada { transition: none; } }
.visor-pista { margin: 6px 0 0; font-size: var(--t-chico); color: var(--jm-sub); }


/* ── Clasificación de productos (Configuración) ───────────────────────────── */
.clasif-depto { padding: 0; margin-bottom: var(--hueco-2); }
.clasif-depto > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.clasif-depto > summary::-webkit-details-marker { display: none; }
.clasif-depto > summary:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: -2px; border-radius: 12px; }
.clasif-nombre { flex: 1; display: grid; gap: 2px; min-width: 0; font-size: var(--t-medio); color: var(--jm-navy); }
.clasif-nombre .detalle-celda { font-size: var(--t-chico); }
.clasif-flecha { display: inline-flex; color: var(--jm-sub); transition: transform 160ms var(--ease-out); }
.clasif-depto[open] .clasif-flecha { transform: rotate(90deg); }
.clasif-cuerpo { display: grid; gap: 16px; padding: 14px 18px 18px; border-top: 1px solid var(--linea); }
.clasif-categoria header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.clasif-categoria h3 { margin: 0; font-size: var(--t-base); color: var(--jm-navy); }
.clasif-categoria header .boton-icono { margin-left: auto; }
.clasif-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.clasif-tipo {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px 0 12px;
  border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--jm-gray);
  font: inherit; font-size: var(--t-chico); font-weight: 600; cursor: pointer;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), transform 160ms var(--ease-out);
}
.clasif-tipo:hover { border-color: var(--jm-blue); background: var(--jm-bg); }
.clasif-tipo:active { transform: scale(0.97); }
.clasif-tipo:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.clasif-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E4EFF8; color: var(--jm-navy); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.clasif-tipo.sin-uso .clasif-n { background: var(--jm-bg); color: var(--jm-gray-soft); }
.clasif-pieza { display: inline-flex; align-items: center; }
.clasif-pieza .clasif-tipo { white-space: nowrap; overflow-wrap: normal; }
.clasif-pieza:has(.clasif-x-form) .clasif-tipo { padding-right: 30px; }
.clasif-x-form { display: contents; }
.clasif-x {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: -27px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--jm-gray-soft); cursor: pointer;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.clasif-x svg { width: 12px; height: 12px; }
.clasif-x:hover { background: #FBE9E7; color: #B42318; }
.clasif-x:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 1px; }
.clasif-quitar { margin-right: auto; }
.clasif-quitar:disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .clasif-flecha, .clasif-tipo { transition: none; } .clasif-tipo:active { transform: none; } }

/* Costeo: las tres fases de un producto, como pestañas en segmentos. */
.sab-fases { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--linea); border-radius: 12px; background: var(--jm-bg); }
.sab-fase {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 9px;
  font-size: var(--t-base); font-weight: 600; color: var(--jm-sub); text-decoration: none;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.sab-fase:hover { color: var(--jm-navy); background: #fff; }
.sab-fase.actual { background: #fff; color: var(--jm-navy); box-shadow: 0 1px 2px rgb(15 42 78 / 0.14), inset 0 0 0 1px var(--jm-border); }
.sab-fase:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.sab-fase-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E4EFF8; color: var(--jm-navy); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.sab-fase.actual .sab-fase-n { background: var(--jm-blue-texto); color: #fff; }
.sab-espera { text-decoration: none; cursor: pointer; }
.sab-espera:hover { filter: brightness(0.96); }

/* Búsqueda con IA: la línea de indicaciones (opcional) se suma al UPC y al modelo. */
.ficha-ia-indicaciones, .ia-indicaciones { margin: 8px 0 0; }
.ficha-ia-indicaciones .control, .ia-indicaciones .control { background: #fff; }
.ficha-ia-indicaciones input, .ia-indicaciones input { font-size: var(--t-chico); }

/* Presentar: otros clientes escritos a mano, uno por pastilla. */
.otros-entrada { display: flex; align-items: stretch; gap: 8px; }
.otros-entrada .control { flex: 1; min-width: 0; }
.otros-lista { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.otro-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 4px 0 12px;
  border: 1px solid #C6DCEF; border-radius: 999px; background: #E7F1FA; color: #125A8F;
  font-size: var(--t-chico); font-weight: 600;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@starting-style { .otro-chip { opacity: 0; transform: scale(0.94); } }
.otro-quitar {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color 140ms var(--ease-out), transform 160ms var(--ease-out);
}
.otro-quitar .icono { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .otro-quitar:hover { background: #C6DCEF; } }
.otro-quitar:active { transform: scale(0.92); }
.otro-quitar:focus-visible { outline: 2px solid var(--jm-blue); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .otro-chip { transition: opacity 160ms ease; } @starting-style { .otro-chip { transform: none; } } }

/* ── Logos y fotos de la presentación (Configuración) ─────────────────────── */
.logos-grupo { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: var(--t-medio); color: var(--jm-navy); }
.conteo-grupo { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: #E4EFF8; color: var(--jm-navy); font-size: var(--t-chico); font-variant-numeric: tabular-nums; }
.logos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--hueco-2); align-items: start; }
.logo-tarjeta {
  display: grid; gap: 12px; padding: 16px; scroll-margin-top: 90px;
  background: #fff; border: 1px solid var(--jm-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,42,78,.04);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.logo-tarjeta:target { border-color: var(--jm-blue); box-shadow: 0 0 0 3px rgba(30,128,200,.16); }
@media (hover: hover) and (pointer: fine) {
  .logo-tarjeta:hover { border-color: #B9CEE0; box-shadow: 0 6px 18px rgba(22,104,163,.09); }
}
.logo-tarjeta-cabeza { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.logo-tarjeta-cabeza h3 { margin: 0; min-width: 0; font-size: var(--t-medio); color: var(--jm-gray); overflow-wrap: anywhere; }
.logo-ranuras { display: grid; gap: 14px; }
.logo-ranuras.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-ranura { display: grid; gap: 8px; align-content: start; min-width: 0; }
.logo-ranura-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.logo-ranura-titulo { font-size: var(--t-chico); font-weight: 600; color: var(--jm-gray-soft); }
.logo-vista {
  display: grid; place-items: center; aspect-ratio: 16 / 7; overflow: hidden;
  background: var(--hundido); border: 1px solid var(--linea); border-radius: 10px;
}
.logo-vista img { max-width: 88%; max-height: 84%; object-fit: contain; }
.logo-vista.sin-imagen {
  aspect-ratio: auto; min-height: 64px; grid-auto-flow: column; justify-content: center; gap: 8px; padding: 8px 12px;
  border-style: dashed; border-color: var(--borde-control); color: var(--jm-gray-soft); font-size: var(--t-chico); text-align: left;
}
.logo-vista.sin-imagen .icono { width: 18px; height: 18px; flex-shrink: 0; }
.logo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.logo-subir { position: relative; cursor: pointer; }
.logo-subir:focus-within { outline: 2px solid var(--jm-blue); outline-offset: 2px; }
.logo-subir.subiendo { opacity: .6; pointer-events: none; }
@media (max-width: 560px) { .logo-ranuras.dos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .logo-tarjeta { transition: none; } }
/* Carga masiva de productos y jerarquía de clasificación */
.modal-tarjeta.panel.centrado:has(.carga-productos) { width: 100%; max-width: 720px; }
.carga-productos { min-width: 0; max-width: 720px; margin-inline: auto; }
.carga-productos.carga-layout { grid-template-columns: minmax(0, 1fr); }
.carga-productos .tabla-marco { max-width: 100%; overflow: auto; contain: paint; }
.carga-productos .acciones { flex-wrap: wrap; }
.carga-productos .acciones > * { max-width: 100%; white-space: normal; }
.clasif-cuerpo { gap: var(--hueco-4); }
.clasif-categoria { min-width: 0; padding-left: var(--hueco-2); border-left: 1px solid var(--jm-border); }
.clasif-categoria header { flex-wrap: wrap; gap: var(--hueco-1); }
.clasif-categoria h3, .clasif-nombre, .clasif-tipo { overflow-wrap: anywhere; }
.clasif-categoria header .detalle-celda { flex: 1; }
.clasif-tipos > li { min-width: 0; max-width: 100%; }
.clasif-tipo { max-width: 100%; text-align: left; }
.clasif-tipo.sin-uso { color: var(--jm-gray-soft); background: var(--hundido); border-color: var(--linea); }
.clasif-n { flex-shrink: 0; }
.clasif-formulario { display: grid; gap: var(--hueco-2); margin-top: var(--hueco-2); }
.clasif-formulario .acciones { flex-wrap: wrap; }
@media (max-width: 540px) {
  .clasif-categoria header .detalle-celda { flex-basis: 100%; order: 1; }
  .clasif-formulario .acciones > * { flex: 1; }
}

/* Un enlace al lado de la etiqueta de un campo (Administrar cuentas). */
.etiqueta-enlace { margin-left: 8px; font-size: var(--t-chico); font-weight: 600; }

/* Carga masiva en dos pasos (lo comprado de los rebates). */
.pasos-carga { display: grid; gap: 16px; margin: 0; padding: 0 0 0 22px; }
.pasos-carga > li { display: grid; gap: 6px; padding-left: 4px; color: var(--jm-gray); }
.pasos-carga > li::marker { font-weight: 700; color: var(--jm-blue-texto); }
.pasos-carga .pista { margin: 0; }
.pasos-carga .boton { justify-self: start; margin-top: 4px; }

/* ── Reglas de negocio › Inteligencia artificial ──────────────────────────── */
.ia-pantalla { display: grid; gap: var(--hueco-3); }
.ia-estado { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--hueco-3); align-items: start; }
.ia-estado-principal { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ia-avatar { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--azul-suave); color: var(--jm-blue-texto); font-weight: 800; }
.ia-avatar .icono { width: 22px; height: 22px; }
.ia-avatar.anthropic { background: #F6E9DF; color: #9A4B1E; }
.ia-avatar.gemini { background: #E3EEFD; color: #1A56C9; }
.ia-avatar.chico { width: 36px; height: 36px; border-radius: 10px; font-size: var(--t-medio); }
.ia-avatar.openai { background: #EEF0F3; }
.ia-logo { width: 26px; height: 26px; }
.ia-avatar.chico .ia-logo { width: 20px; height: 20px; }
/* Las tarjetas ya traen su margen: el hueco de la rejilla no se suma encima. */
.ia-pantalla > .tarjeta { margin: 0; }
.ia-pantalla > .logos-grupo { margin: var(--hueco-2) 0 calc(var(--hueco-3) * -1 + 4px); }
.ia-pantalla > .nota-pantalla { margin: 0 0 calc(var(--hueco-3) * -1 + 10px); }
.ia-etiqueta { margin: 0 0 2px; font-size: var(--t-chico); font-weight: 600; color: var(--jm-sub); }
.ia-modelo { margin: 0; font-size: var(--t-grande); font-weight: 800; color: var(--jm-navy); line-height: 1.25; }
.ia-proveedor { margin-left: 6px; font-size: var(--t-chico); font-weight: 600; color: var(--jm-sub); }
.ia-pildoras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ia-consumo { min-width: 0; }
.ia-cifra { margin: 0 0 8px; font-size: var(--t-cifra); font-weight: 800; color: var(--jm-navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ia-cifra span { font-size: var(--t-base); font-weight: 600; color: var(--jm-sub); }
.ia-barra { height: 8px; border-radius: 999px; background: var(--hundido); overflow: hidden; }
.ia-barra span { display: block; height: 100%; border-radius: inherit; background: var(--jm-blue); }
.ia-barra.cerca span { background: var(--aviso); }
.ia-barra.llena span { background: var(--alerta); }
.ia-dias { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.ia-dias span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: #BFD7EC; }
.ia-dias span:last-child { background: var(--jm-blue); }
.ia-ajustes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--hueco-2); align-items: end; }
.ia-ajustes .campo { margin: 0; }
.ia-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--hueco-2); }
.ia-modelo-tarjeta {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff;
  border: 1px solid var(--jm-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,42,78,.04);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.ia-modelo-tarjeta.en-uso { border-color: var(--jm-blue-dark); box-shadow: 0 0 0 1px var(--jm-blue-dark), 0 6px 18px rgba(22,104,163,.10); }
@media (hover: hover) and (pointer: fine) { .ia-modelo-tarjeta:not(.en-uso):hover { border-color: #B9CEE0; box-shadow: 0 6px 18px rgba(22,104,163,.09); } }
.ia-modelo-tarjeta header { display: flex; align-items: center; gap: 10px; }
.ia-modelo-nombre { flex: 1; min-width: 0; }
.ia-modelo-nombre h3 { margin: 0; font-size: var(--t-medio); color: var(--jm-navy); }
.ia-modelo-nombre span { font-size: var(--t-chico); color: var(--jm-sub); }
.ia-lema { margin: 0; font-size: var(--t-base); font-style: italic; color: var(--jm-gray); }
.ia-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ia-datos > div { padding: 8px 10px; border-radius: 10px; background: var(--hundido); }
.ia-datos dt { font-size: var(--t-mini); font-weight: 600; color: var(--jm-sub); }
.ia-datos dd { margin: 2px 0 0; font-weight: 700; color: var(--jm-navy); }
.ia-costo span { color: #C9D6E4; letter-spacing: .04em; }
.ia-costo span.lleno { color: var(--correcto); }
.ia-para { display: flex; gap: 8px; margin: 0; font-size: var(--t-chico); line-height: 1.5; color: var(--jm-sub); }
.ia-para .icono { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ia-modelo-tarjeta footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linea); }
.ia-sin-llave { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-chico); color: var(--aviso); }
.ia-sin-llave .icono { width: 14px; height: 14px; }
.ia-modelo-tarjeta footer .boton { margin-left: auto; }
.ia-usos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco-3); }
.ia-usos h3 { margin: 0 0 8px; font-size: var(--t-base); color: var(--jm-navy); }
.ia-usos ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ia-usos li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--linea); font-size: var(--t-base); }
.ia-usos strong { font-variant-numeric: tabular-nums; color: var(--jm-navy); }
@media (max-width: 1100px) { .ia-estado { grid-template-columns: 1fr 1fr; } .ia-estado-principal { grid-column: 1 / -1; } .ia-ajustes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ia-estado, .ia-ajustes, .ia-usos { grid-template-columns: 1fr; } .ia-ajustes-boton .boton { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ia-modelo-tarjeta { transition: none; } }