/* =====================================================================
   PESTAÑA "COSTOS" — Calculadora de Costos y Venta

   La paleta ya NO se declara aquí: vive en tokens.css, que se carga antes
   y que comparten los tres archivos. Esta hoja tenía su propio `:root`
   con un verde y un magenta, mientras style.css usaba otro verde y dos
   azules distintos — cinco colores de marca en la misma herramienta, y
   dos pestañas que no parecían el mismo producto. Los valores de ahora
   salen muestreados del PDF corporativo y están verificados contra
   WCAG AA; el detalle está en la cabecera de tokens.css.

   El antiguo `--gw-gris` daba 3.85:1 sobre blanco —por debajo de AA— y se
   usaba en etiquetas de 9px. Ahora apunta a --gw-texto-3 (7.05:1).

   El panel arranca en 430px pero el usuario puede ensancharlo
   arrastrando el borde, así que todo el layout es fluido y a partir
   de 700px los bloques se acomodan en fila.
   ===================================================================== */

/* Puente de nombres: el archivo usa `--gw-gris` y `--gw-suave` en decenas de sitios.
   Se reapuntan aquí en lugar de renombrarlos uno a uno, que sería un diff enorme sin
   ganancia. Los nombres nuevos son los de tokens.css. */
:root {
  --gw-gris: var(--gw-texto-3);
  --gw-suave: var(--gw-verde-tenue);
}

/* ================= BARRA Y ACCIONES ================= */
.calc-toolbar { margin-bottom: 12px; }
/* Dos columnas iguales: "Nuevos Costos" y "Nueva ACP" pesan lo mismo en el trabajo diario,
   y hacer una más ancha que la otra sugeriría lo contrario. `min-width: 0` porque si no el
   texto del botón impone un ancho mínimo y a 430 px se desborda la barra. */
.calc-toolbar-botones { display: flex; gap: 8px; }
.calc-toolbar-botones > button { flex: 1; min-width: 0; }

.calc-btn-primario,
.calc-btn-secundario,
.calc-btn-neutro,
.calc-btn-descarte {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}
.calc-btn-primario { background: var(--gw-verde); color: #fff; width: 100%; }
.calc-btn-primario:hover { background: var(--gw-verde-claro); }

/* Contorno suave, no verde saturado: cuatro botones con borde verde fuerte pesaban
   tanto como el primario y la pantalla no decía dónde mirar. */
.calc-btn-secundario { background: #fff; color: var(--gw-verde); border: 1px solid var(--gw-borde); }
/* T1.1 · el motivo de un botón gris, a la vista y no solo en el tooltip */
.calc-motivo-boton { font-size: 11px; color: var(--gw-texto-3); margin-top: 3px; line-height: 1.3; }
/* T2.1 · la línea "Siguiente paso", encima de la tira fija */
.calc-siguiente-paso { font-size: 12px; padding: 5px 8px; margin-bottom: 6px; border-radius: 4px;
  background: var(--gw-verde-tenue); color: var(--gw-texto-2); width: 100%; flex-basis: 100%;
  box-sizing: border-box;
  grid-column: 1 / -1; }   /* la barra de acciones es una rejilla: la línea ocupa la fila entera */
/* El rótulo, el «?» y el botón de minimizar en una franja; el texto debajo. Antes iba
   todo en un solo flex con `wrap` y el «?» se caía a un tercer renglón él solo. */
.calc-sp-cab { display: flex; gap: 6px; align-items: center; }
.calc-sp-texto { margin-top: 2px; }
.calc-siguiente-paso.minimizado { padding: 3px 8px; }
.calc-siguiente-paso.minimizado .calc-sp-texto { display: none; }
/* 🔴 El selector lleva DOS clases a propósito: `.calc-acciones button { width: 100% }`
   alcanza a todo botón de la barra y pesa más (una clase + un elemento) que `.calc-sp-min`
   a secas, así que el «−» salía en una casilla de 378 px con el signo perdido en el centro.
   Por lo mismo `.calc-sp-enlace` lleva `text-align: left`. */
.calc-siguiente-paso .calc-sp-min { margin-left: auto; background: none; border: 0;
  cursor: pointer; font: inherit; font-weight: bold; line-height: 1; padding: 0 6px;
  color: var(--gw-verde); width: auto; flex: 0 0 auto; }
.calc-sp-min:hover { background: var(--gw-borde); border-radius: 3px; }
.calc-sp-etq { font-weight: bold; color: var(--gw-verde); white-space: nowrap; }
.calc-sp-enlace { background: none; border: 0; padding: 0; color: var(--gw-verde);
  text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.calc-sp-enlace:hover { text-decoration: none; }
.calc-btn-secundario:hover { background: var(--gw-verde-tenue); border-color: var(--gw-verde); }

/* Neutro = acción secundaria sin carga: "Abrir" una guardada, "Cerrar todo". No debe
   parecer destructivo; para eso está .calc-btn-descarte, más abajo. */
.calc-btn-neutro { background: var(--gw-superficie); color: var(--gw-texto-2); }
.calc-btn-neutro:hover { background: var(--gw-borde); }

/* Descarta el trabajo en curso. En texto y apartado del resto para que no se pulse por
   inercia; el color de peligro solo aparece al pasar por encima, cuando ya hay intención. */
.calc-btn-descarte { background: none; color: var(--gw-texto-3); font-weight: 400; }
.calc-btn-descarte:hover { color: var(--gw-peligro); text-decoration: underline; }

/* ================= BARRA DE ACCIONES =================
   Estaba al final del formulario: con dos o tres opciones cargadas había que recorrer
   más de 2.000 px para llegar a Guardar. Fija al pie, con "Guardar" solo en su fila
   —es el único que escribe en la hoja— y el resto debajo, ya en segundo plano. */
.calc-acciones {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding: 10px 0 12px;
  background: var(--gw-fondo);
  border-top: 1px solid var(--gw-borde);
  box-shadow: var(--sombra-flotante);
}
.calc-acciones button { width: 100%; }
/* Guardar ocupa la fila entera, encima de los tres secundarios. */
.calc-acciones #btnCalcGuardar { grid-column: 1 / -1; }
/* Limpiar descarta el trabajo en curso: fila propia y sin peso, para no pulsarlo por inercia. */
.calc-acciones #btnCalcLimpiar { grid-column: 1 / -1; }

/* ================= TARJETAS ================= */
.calc-tarjeta {
  background: #fff;
  border: 1px solid var(--gw-borde);
  border-left: 4px solid var(--gw-verde);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}
.calc-tarjeta.es-alternativa { border-left-color: var(--gw-magenta); }

.calc-tarjeta-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gw-verde-tenue);
  border-bottom: 1px solid var(--gw-borde);
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  color: var(--gw-verde);
}
.calc-tarjeta-cab .calc-num {
  background: var(--gw-verde);
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  flex-shrink: 0;
}
.calc-tarjeta-cab .calc-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cabeceras plegables: son <div>/<span> con role="button", así que el anillo de foco hay
   que ponerlo a mano — sin él, al llegar con Tab no se ve dónde está el cursor. */
.calc-tarjeta-cab:focus-visible,
.calc-linea-nombre:focus-visible,
.calc-bloque-nombre:focus-visible {
  outline: 2px solid var(--gw-verde);
  outline-offset: -2px;
  border-radius: 3px;
}
.calc-tarjeta-cuerpo { padding: 12px; display: none; }
.calc-tarjeta-cuerpo.abierto { display: block; }

/* ================= SEGMENTOS ================= */
.calc-segmento { display: flex; gap: 0; margin-bottom: 10px; }
.calc-segmento button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--gw-borde);
  background: #fff;
  color: var(--gw-texto-2);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
.calc-segmento button:first-child { border-radius: 5px 0 0 5px; }
.calc-segmento button:last-child { border-radius: 0 5px 5px 0; }
.calc-segmento button.activo { background: var(--gw-verde); color: #fff; border-color: var(--gw-verde); }
.calc-segmento button:disabled { opacity: .45; cursor: not-allowed; }

/* ================= CAMPOS ================= */
.calc-campo { margin-bottom: 8px; }
/* 9px en un gris de 3.85:1 era el par con peor legibilidad de la calculadora, y es la
   etiqueta que más veces se repite en pantalla. 10px sobre --gw-texto-3 da 7.05:1. */
.calc-campo label {
  display: block;
  font-size: 10px;
  color: var(--gw-texto-3);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
  letter-spacing: .05em;
}
.calc-campo input,
.calc-campo select,
.calc-campo textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--gw-borde);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 12px;
  font-family: inherit;
}
.calc-campo input:focus,
.calc-campo select:focus,
.calc-campo textarea:focus {
  border-color: var(--gw-verde);
  outline: none;
  box-shadow: 0 0 0 2px rgba(15, 61, 38, .15);
}
.calc-campo input[readonly] { background: var(--gw-superficie); font-weight: bold; }

.calc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.calc-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

/* ================= RESUMEN DE VOLUMETRÍA ================= */
.calc-volumetria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--gw-verde-tenue);
  padding: 8px;
  border-radius: 5px;
  margin: 8px 0;
}
.calc-volumetria .calc-campo { margin-bottom: 0; }
.calc-volumetria input { background: #fff !important; text-align: right; }

.calc-badge {
  display: inline-block;
  background: var(--gw-magenta);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.calc-badge.neutro { background: var(--gw-gris); }

/* ================= BLOQUES DE COSTO ================= */
.calc-bloques { display: flex; flex-direction: column; gap: 10px; }

.calc-bloque {
  border: 1px solid var(--gw-borde);
  border-radius: 5px;
  background: var(--gw-fondo);
}
.calc-bloque-cab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid var(--gw-borde);
  border-radius: 5px 5px 0 0;
  font-size: 11px;
  font-weight: bold;
  color: var(--gw-verde);
}
.calc-bloque-cab .calc-bloque-nombre { flex: 1; cursor: pointer; }
.calc-bloque-cab select { font-size: 10px; padding: 3px; border: 1px solid var(--gw-borde); border-radius: 4px; }
.calc-bloque-cuerpo { padding: 10px; }
.calc-bloque.colapsado .calc-bloque-cuerpo { display: none; }

/* Acciones locales de un bloque: son texto, no botones. Cambian lo que hay en pantalla,
   no lo que hay en la hoja, y así se distinguen del Guardar del pie de un vistazo. */
.calc-bloque-pie {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 10px;
}
.calc-enlace {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--gw-texto-3);
  cursor: pointer;
}
.calc-enlace:hover { text-decoration: underline; }
.calc-enlace.fuerte { color: var(--gw-verde); font-weight: 700; }

.calc-bloque-resumen {
  display: none;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--gw-verde);
  background: var(--gw-verde-tenue);
  border-radius: 0 0 5px 5px;
}
.calc-bloque.colapsado .calc-bloque-resumen { display: block; }

/* Bloque que el incoterm deja del otro lado y además está vacío. Se atenúa, no se
   elimina: sigue a un clic de distancia para el caso en que igual haya que cotizarlo.
   Un bloque CON costos cargados nunca lleva esta clase. */
.calc-bloque.no-aplica { border-style: dashed; opacity: .72; }

/* El bloque que el incoterm deja fuera pero YA tiene costos cargados. No se atenúa ni se
   pliega solo: se marca, y la marca tiene que verse también con el bloque cerrado. */
.calc-bloque.revisar { border-color: var(--gw-aviso-borde); }
.calc-bloque.revisar .calc-bloque-resumen { color: var(--gw-aviso); background: var(--gw-aviso-fondo); }
.calc-bloque.no-aplica .calc-bloque-cab { background: var(--gw-fondo); color: var(--gw-gris); }
.calc-bloque.no-aplica .calc-bloque-resumen {
  color: var(--gw-gris);
  background: var(--gw-fondo);
}
.calc-bloque-etq {
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--gw-gris);
  border: 1px solid var(--gw-borde);
  border-radius: 3px;
  padding: 1px 5px;
  cursor: help;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Resumen de qué bloques nos tocan, bajo el botón Importación / Exportación. */
.calc-tramo {
  font-size: 10px;
  line-height: 1.5;
  color: var(--gw-verde);
  background: var(--gw-verde-tenue);
  border-radius: 5px;
  padding: 6px 8px;
  margin: -4px 0 10px;
}
.calc-tramo-fuera { color: var(--gw-gris); }

/* Pistas de una línea bajo un campo, para decir dónde se edita el dato de al lado. */
.calc-pista { font-size: 10px; color: var(--gw-gris); margin-top: 4px; line-height: 1.4; }

/* Una pista suelta entre dos campos se lee como si perteneciera al de ABAJO, que es el
   que tiene al lado. La de días libres quedaba justo encima de RUTA y parecía suya.
   El grupo la ata visualmente a lo que hay ARRIBA y deja aire antes del campo siguiente. */
.calc-grupo { margin-bottom: 10px; }
.calc-grupo > .calc-pista { padding-left: 2px; border-left: 2px solid var(--gw-borde); }

/* ================= DÍAS LIBRES POR NAVIERA (FCL) =================
   El nombre llega de la lista de Gastos Destino y no se edita aquí: dos sitios donde
   escribir el mismo dato era justo lo que obligaba a reescribir la naviera a mano. */
.calc-dias {
  border: 1px solid var(--gw-borde);
  border-radius: 5px;
  background: #fff;
  padding: 4px 6px;
}
.calc-dias-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.calc-dias-fila + .calc-dias-fila { border-top: 1px solid var(--gw-borde); }
.calc-dias-nombre {
  flex: 1.3;
  min-width: 0;
  font-size: 11px;
  font-weight: bold;
  color: var(--gw-verde);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-dias-nombre em { font-weight: normal; color: var(--gw-gris); }
.calc-dias-fila input { flex: 1; min-width: 0; }
.calc-dias-unidad { font-size: 10px; color: var(--gw-gris); }

.calc-btn-mini {
  background: var(--gw-verde);
  color: #fff;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.calc-btn-mini.secundario { background: var(--gw-superficie); color: var(--gw-texto-2); }
.calc-btn-mini.peligro { background: var(--gw-peligro); }

/* ================= LÍNEA DE COSTO ================= */
.calc-linea {
  background: #fff;
  border: 1px solid var(--gw-borde);
  border-radius: 5px;
  padding: 8px;
  margin-bottom: 8px;
}
.calc-linea.es-nota { background: var(--gw-aviso-fondo); border-color: var(--gw-aviso-borde); }
.calc-linea.es-nota .calc-costos { opacity: .45; pointer-events: none; }

/* Cabecera plegable del concepto, con el mismo gesto que la de los bloques de costos.
   El nombre cede el ancho y se recorta con ellipsis por CSS, no cortando la cadena: así
   ensanchar el panel enseña mas texto, y el `title` lleva el entero. La cifra NO se
   encoge —es el dato que se viene a mirar— y por eso lleva `flex-shrink: 0`. */
.calc-linea-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.calc-linea-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  color: var(--gw-verde);
}
.calc-linea-cifra {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--gw-texto-3);
  white-space: nowrap;
}
.calc-linea:not(.colapsado) .calc-linea-titulo {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--gw-borde);
}
.calc-linea.colapsado .calc-linea-cuerpo { display: none; }
/* Plegada, la tarjeta se estrecha: sin cuerpo, el relleno de 8px la dejaba tan alta como
   una fila de campos y se perdia la mitad de lo que se gana al plegarla. */
.calc-linea.colapsado { padding: 5px 8px; }

.calc-linea-cab { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 6px; }
.calc-linea-cab .calc-campo { flex: 1; margin-bottom: 0; }

.calc-costos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--gw-borde);
}
.calc-costos .calc-campo { margin-bottom: 0; }
.calc-costos input { text-align: right; }
.calc-venta label { color: var(--gw-magenta); }

/* Los mínimos de una línea medida (KGS, CBM): misma rejilla que los importes, debajo. */
.calc-minimos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.calc-minimos .calc-campo { margin-bottom: 0; }
.calc-minimos input { text-align: right; }
.calc-minimos label span { text-transform: none; letter-spacing: 0; }
/* Cuando manda el mínimo conviene que salte a la vista, como en el Profit Share. */
.calc-minimo-aplica { color: var(--gw-aviso); font-weight: bold; }

.calc-linea-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--gw-borde);
  font-size: 10px;
  color: var(--gw-gris);
}
.calc-check { display: flex; align-items: center; gap: 4px; font-size: 10px; cursor: pointer; }
.calc-check input { width: auto; }

.calc-margen-ok { color: var(--gw-verde); font-weight: bold; }
.calc-margen-mal { color: var(--gw-peligro); font-weight: bold; }
/* Costo y venta en monedas distintas: no hay margen que colorear (Caso 1). */
.calc-margen-nc { color: var(--gw-texto-3); font-style: italic; }

/* ================= SUBTOTALES Y TOTALES ================= */
.calc-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
  border-top: 1px solid var(--gw-borde);
  color: var(--gw-texto-2);
}
.calc-subtotal strong { color: var(--gw-verde); }

.calc-totales {
  background: #fff;
  border: 2px solid var(--gw-verde);
  border-radius: 6px;
  padding: 12px;
  margin-top: 12px;
}
.calc-totales h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--gw-verde);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.calc-total-moneda {
  border-top: 1px solid var(--gw-borde);
  padding-top: 8px;
  margin-top: 8px;
}
.calc-total-fila {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}
.calc-total-fila.destacado {
  font-weight: bold;
  font-size: 13px;
  color: var(--gw-verde);
  border-top: 1px solid var(--gw-borde);
  margin-top: 4px;
  padding-top: 5px;
}
.calc-total-fila .calc-etq { color: var(--gw-gris); }

/* Cabecera de cada embarque dentro del comparador. Solo aparece con varios: con uno
   el panel se queda exactamente como estaba. Sin colores propios — regla 16. */
.calc-grupo-comparador { margin-bottom: 10px; }
.calc-grupo-cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--gw-verde); border-bottom: 1px solid var(--gw-borde);
  padding: 4px 0 3px 0; margin-bottom: 4px;
}
.calc-grupo-cab .calc-etq { text-transform: none; font-weight: 500; white-space: nowrap; }

.calc-nota-comparador { font-size: 10px; color: var(--gw-texto-3); margin-top: 8px; line-height: 1.45; }

/* ================= RESUMEN FIJO DEL PIE ================= */
.calc-resumen-fijo:not(:empty) {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--gw-borde);
  padding-bottom: 7px;
  margin-bottom: 3px;
}
.calc-resumen-fila {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  padding: 2px 0;
}
.calc-resumen-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gw-texto-2);
  font-weight: 600;
}
.calc-resumen-cifras {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--gw-texto);
}
.calc-resumen-fijo .calc-excluida { opacity: .5; }

/* Molde del callout del PDF corporativo (el recuadro "LANDFALL CONFIRMADO"): filete
   lateral del color del tono, fondo pálido y título en versalitas espaciadas. */
.calc-aviso {
  background: var(--gw-aviso-fondo);
  border: 1px solid var(--gw-aviso-borde);
  border-left: 3px solid var(--gw-aviso);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  color: var(--gw-aviso);
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 10px;
  margin: 8px 0;
}
.calc-aviso.error {
  background: var(--gw-peligro-fondo);
  border-color: var(--gw-peligro-borde);
  border-left-color: var(--gw-peligro);
  color: var(--gw-peligro);
}

/* El panel de Profit Share (.calc-ps*) se retiró el 2026-09-10: es una línea normal con
   mínimo, y el peso declarado vive en el campo Tramo de la volumetría. */
/* El combo del tramo, en la rejilla de la volumetría: la flecha no debe salirse. */
.calc-volumetria .calc-combo { min-width: 0; }
.calc-volumetria .calc-combo input { text-align: left; }

/* ================= TOOLTIP ================= */
.calc-tip { position: relative; display: inline-block; cursor: help; color: var(--gw-magenta); font-weight: bold; }
.calc-tip .calc-tip-txt {
  visibility: hidden;
  position: absolute;
  z-index: 50;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gw-texto);
  color: #fff;
  font-weight: normal;
  text-align: left;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 10px;
  width: 170px;
  line-height: 1.35;
}
.calc-tip:hover .calc-tip-txt { visibility: visible; }

/* ================= MODAL ================= */
.calc-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9999;
  overflow-y: auto;
}
.calc-modal.abierto { display: block; }
.calc-modal-caja {
  background: #fff;
  width: 92%;
  max-width: 620px;
  margin: 24px auto;
  padding: 18px;
  border-radius: 8px;
  position: relative;
}
.calc-modal-caja h3 { margin: 0 0 12px 0; color: var(--gw-verde); font-size: 15px; }
/* La tarjeta de la Pestaña 1 trae su tabla de bultos y necesita más aire que un modal de
   texto. En el panel lateral manda el 92% de todos modos; esto solo cuenta cuando el panel
   se ensancha o se abre en ventana. */
.calc-modal-caja.ancha { max-width: 860px; }
/* Un modal alto dentro de un panel de 700 px de alto no se puede recorrer si la caja crece
   sin límite: el fondo oscuro se lleva el scroll y el pie con los botones queda fuera. */
.calc-modal-caja.ancha .calc-modal-cuerpo { max-height: 60vh; overflow-y: auto; }
.calc-modal-pie {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gw-borde);
}
.calc-modal-pie > button { flex: 1; }
.calc-modal-cerrar {
  position: absolute; top: 8px; right: 10px;
  border: none; background: none; font-size: 18px; cursor: pointer; color: var(--gw-texto-3);
}
.calc-modal textarea {
  width: 100%;
  height: 320px;
  box-sizing: border-box;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 10px;
  border: 1px solid var(--gw-borde);
  border-radius: 5px;
  resize: vertical;
}
.calc-opcion-ruta {
  border: 1px solid var(--gw-borde);
  border-radius: 5px;
  padding: 9px;
  margin-bottom: 7px;
  cursor: pointer;
  font-size: 12px;
}
.calc-opcion-ruta:hover { background: var(--gw-verde-tenue); border-color: var(--gw-verde); }
.calc-opcion-ruta strong { color: var(--gw-verde); }
/* Campo que espera una decisión del usuario y no puede darse por hecha: hoy solo el
   selector "Cotiza el embarque" cuando hay más de una ruta. Se marca con el color de
   alerta —el mismo que el resto de la interfaz usa para "esto te falta"— y no con rojo de
   error: no está mal, está sin contestar. */
.calc-pendiente { border-color: var(--gw-alerta-borde); background: var(--gw-alerta-fondo); }

/* Ruta que ya cotiza otro embarque de esta misma Combinada: se ve, para saber que existe
   y quién la tiene, pero no se puede elegir. Dos embarques en la misma fila de Seguimiento
   se pisan el Profit (ver calcFilasTomadasPor). */
.calc-opcion-ruta.tomada { cursor: not-allowed; opacity: .55; background: var(--gw-superficie); }
.calc-opcion-ruta.tomada:hover { background: var(--gw-superficie); border-color: var(--gw-borde); }
.calc-opcion-ruta.tomada strong { color: var(--gw-texto-3); }

/* ================= PANEL ANCHO ================= */
@media (min-width: 700px) {
  .calc-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .calc-bloques { flex-direction: row; align-items: flex-start; }
  .calc-bloques > .calc-bloque { flex: 1; min-width: 0; }
  .calc-costos { grid-template-columns: repeat(4, 1fr); }
  /* `.calc-acciones` se queda en tres columnas a cualquier ancho: Guardar y Limpiar
     ocupan la fila entera y los tres secundarios llenan la de en medio. Con cuatro
     columnas quedaba un hueco a la derecha de los secundarios. */
}

/* ================= COMBO DE CONCEPTOS =================
   Campo de texto con catálogo desplegable: sugiere el término estandarizado
   pero deja escribir uno nuevo. */
.calc-combo { position: relative; display: flex; align-items: stretch; }
.calc-combo > input { flex: 1; min-width: 0; border-radius: 4px 0 0 4px; }

.calc-combo-flecha {
  flex: 0 0 auto;
  width: 26px;
  border: 1px solid var(--gw-borde);
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: var(--gw-suave);
  color: var(--gw-verde);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.calc-combo-flecha:hover { background: var(--gw-verde); color: #fff; }

.calc-combo-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 210px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--gw-verde);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.calc-combo-op {
  padding: 6px 9px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--gw-superficie);
}
.calc-combo-op:last-child { border-bottom: 0; }
.calc-combo-op:hover { background: var(--gw-suave); color: var(--gw-verde); }
.calc-combo-vacio { padding: 8px 9px; font-size: 11px; color: var(--gw-tenue); font-style: italic; }

/* ===== Buscador de cotizaciones guardadas ===== */
.calc-buscador { margin-top: 10px; }
.calc-buscador input {
  font-size: 12px;
  padding: 7px 9px;
  border: 1px solid var(--gw-borde);
  border-radius: 4px;
  box-sizing: border-box;
}

.calc-guardada {
  border: 1px solid var(--gw-borde);
  border-left: 3px solid var(--gw-verde);
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 8px;
  background: #fff;
}
.calc-guardada-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--gw-verde);
  font-size: 12px;
}
.calc-guardada-datos { font-size: 11px; color: var(--gw-texto-2); margin-top: 3px; line-height: 1.5; }

/* ===== Comparador de opciones ===== */
/* La opción más barata de cada moneda, señalada sin recurrir solo al color. */
.calc-mejor {
  background: var(--gw-verde);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
}

/* Una opción que se registra pero no se le presenta al cliente. */
.calc-total-moneda.calc-excluida { opacity: .55; }
.calc-total-moneda.calc-excluida .calc-total-fila.destacado { text-decoration: line-through; }

/* El iframe de impresión vive fuera de la vista pero debe existir en el DOM. */
#calc_iframe_impresion {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
}

/* =====================================================================
   MODO TARIFARIO
   =====================================================================
   Ni un color propio: todo sale de tokens.css (regla 16). Lo que sí es propio de esta
   pantalla es la densidad — aquí se comparan cifras, y las cifras se leen mejor juntas
   que aireadas.
   ===================================================================== */

.tar-vistas { margin-bottom: 10px; }

/* La barra de fechas manda sobre las cinco vistas, así que va encima de sus botones y
   fuera de todas ellas. La nota cede el ancho y se va a una línea propia en un panel
   estrecho: es explicación, no dato, y no puede empujar a los campos fuera de la vista. */
.tar-rango {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--gw-superficie);
  border: 1px solid var(--gw-borde);
  border-radius: 5px;
}
.tar-rango .calc-campo { margin-bottom: 0; width: auto; }
.tar-rango .calc-campo input { width: 140px; }
.tar-rango button { width: auto; white-space: nowrap; }
.tar-rango button[disabled] { opacity: .45; cursor: default; }
.tar-rango-nota {
  flex: 1 1 100%;
  font-size: 10px;
  color: var(--gw-texto-3);
  line-height: 1.4;
}

/* El mando que hace útil la pantalla. Va pegado arriba de los resultados y se queda
   fijo al desplazar: se mira el ranking mientras se mueve la cantidad, no después. */
.tar-cantidad {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: auto 80px auto; gap: 6px; align-items: center;
  background: var(--gw-verde-tenue);
  border: 1px solid var(--gw-borde);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 10px;
}
.tar-cantidad label { font-size: var(--t-micro); text-transform: uppercase;
                      letter-spacing: .3px; color: var(--gw-texto-2); font-weight: 600; }
.tar-cantidad input[type="number"] {
  width: 100%; padding: 5px 6px; text-align: right; font-weight: bold;
  border: 1px solid var(--gw-borde); border-radius: 4px; background: var(--gw-blanco);
}
.tar-cantidad input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--gw-verde); }
.tar-cantidad .tar-unidad { font-size: var(--t-s); color: var(--gw-texto-2); font-weight: 600; }
.tar-pista { grid-column: 1 / -1; font-size: var(--t-micro); color: var(--gw-texto-3); }

.tar-moneda { margin-bottom: 12px; }
.tar-moneda-cab {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .5px;
  color: var(--gw-texto-2); font-weight: 700; padding: 4px 2px;
  border-bottom: 1px solid var(--gw-borde);  margin-bottom: 6px;
}

/* Una tarjeta por agente. El ganador se marca con el borde y el fondo, no con el tamaño:
   una fila más grande desordena la comparación, que es justo lo que se está mirando. */
.tar-agente {
  border: 1px solid var(--gw-borde); border-left: 3px solid var(--gw-borde);
  border-radius: 5px; padding: 8px 10px; margin-bottom: 6px; background: var(--gw-blanco);
}
.tar-agente.gana { border-left-color: var(--gw-verde); background: var(--gw-verde-tenue); }
.tar-agente.vencida { opacity: .72; }
.tar-agente-cab { display: flex; align-items: baseline; gap: 8px; }
.tar-agente-nombre { flex: 1; min-width: 0; font-weight: 700; font-size: var(--t-s);
                     color: var(--gw-texto); overflow: hidden; text-overflow: ellipsis; }
.tar-corona {
  display: inline-block; background: var(--gw-verde); color: var(--gw-blanco);
  font-size: var(--t-micro); font-weight: 700; border-radius: 3px;
  padding: 1px 5px; margin-right: 5px;
}
.tar-agente-total { font-weight: 700; font-size: var(--t-m); color: var(--gw-verde);
                    white-space: nowrap; font-variant-numeric: tabular-nums; }
.tar-agente-total.sin { color: var(--gw-texto-3); font-weight: 600; font-size: var(--t-s); }
.tar-agente-detalle { font-size: var(--t-micro); color: var(--gw-texto-2); margin-top: 3px; }
.tar-agente-cond { font-size: var(--t-micro); color: var(--gw-texto-3); margin-top: 2px; }
.tar-agente-nota { font-size: var(--t-micro); color: var(--gw-texto-3); margin-top: 4px;
                   border-top: 1px dashed var(--gw-borde); padding-top: 4px; }

.tar-agente-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tar-etq {
  font-size: var(--t-micro); border-radius: 3px; padding: 1px 6px;
  background: var(--gw-superficie); color: var(--gw-texto-2); white-space: nowrap;
}
.tar-etq.buena { background: var(--gw-verde); color: var(--gw-blanco); }
.tar-etq.ojo { background: var(--gw-aviso); color: var(--gw-texto); }
.tar-etq.mala { background: var(--gw-peligro); color: var(--gw-blanco); }

/* Las tablas se salen del ancho del panel a propósito y se desplazan solas: recortarlas
   a la fuerza escondería columnas sin decirlo. */
.tar-tabla-caja { overflow-x: auto; margin-bottom: 10px; border: 1px solid var(--gw-borde);
                  border-radius: 5px; background: var(--gw-blanco); }
.tar-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tar-tabla th {
  text-align: left; padding: 6px 8px; background: var(--gw-verde); color: var(--gw-blanco);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.tar-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--gw-borde); vertical-align: top; }
.tar-tabla tr:last-child td { border-bottom: 0; }
.tar-tabla .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tar-tabla .mal { color: var(--gw-peligro); font-weight: 700; }
.tar-pct { font-size: var(--t-micro); color: var(--gw-texto-3); }

.tar-huecos { border: 1px dashed var(--gw-borde-fuerte); border-radius: 5px;
              padding: 8px 10px; margin-bottom: 10px; }
.tar-huecos-cab { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .3px;
                  color: var(--gw-texto-2); font-weight: 700; margin-bottom: 4px; }
.tar-hueco { font-size: var(--t-s); color: var(--gw-texto-2); padding: 2px 0; }

/* La conclusión en una frase. Es lo que alguien copia y pega en un correo, así que se
   distingue del resto sin gritar. */
.tar-conclusion {
  background: var(--gw-verde-tenue); border-left: 3px solid var(--gw-verde);
  border-radius: 4px; padding: 8px 10px; margin-bottom: 10px;
  font-size: var(--t-s); color: var(--gw-texto);
}

.tar-esqueleto > div {
  height: 54px; border-radius: 5px; margin-bottom: 6px;
  background: linear-gradient(90deg, var(--gw-superficie) 25%, var(--gw-borde) 50%, var(--gw-superficie) 75%);
  background-size: 200% 100%;
  animation: tar-brillo 1.2s linear infinite;
}
@keyframes tar-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .tar-esqueleto > div { animation: none; background: var(--gw-superficie); }
}

/* ── Fase 1: lo que cambia lo que se compara, y lo que lo explica ───────────── */

/* Los dos ajustes que mueven el número: puerta a puerta y estadía. Van pegados debajo de
   la cantidad porque son parte de la misma pregunta —"comparar QUÉ, a cuánto"— y no una
   configuración escondida en otro sitio. */
.tar-ajustes {
  border: 1px solid var(--gw-borde); border-top: 0;
  border-radius: 0 0 6px 6px; padding: 8px 10px; margin: -10px 0 12px;
  background: var(--gw-superficie);
}
.tar-ajustes .calc-segmento { margin-bottom: 6px; }
.tar-ajustes .calc-pista { margin-bottom: 6px; }

/* Cuánto está por encima del primero. Va pequeño y debajo del importe: es el segundo dato
   que se mira, nunca el primero. */
.tar-agente-precio { display: flex; flex-direction: column; align-items: flex-end; }
.tar-dif {
  display: block; font-size: var(--t-micro); font-weight: 600;
  color: var(--gw-texto-3); text-align: right;
}

/* La escalera de tramos. Nace plegada porque en una lista de ocho agentes abrir todas
   sería un muro; y se abre sin repintar, para no perder el sitio. */
.tar-tramos { margin-top: 6px; }
.tar-tramos-cab {
  display: inline-block; cursor: pointer; user-select: none;
  font-size: var(--t-micro); font-weight: 600; color: var(--gw-verde);
  border-bottom: 1px dotted var(--gw-verde); padding-bottom: 1px;
}
.tar-tramos-cab:focus-visible { outline: 2px solid var(--gw-verde); outline-offset: 2px; }
.tar-tramos-cuerpo {
  margin-top: 6px; border-top: 1px solid var(--gw-borde); padding-top: 6px;
}
.tar-tramos-cargo { margin-bottom: 6px; }
.tar-tramos-cargo:last-child { margin-bottom: 0; }
.tar-tramos-tit {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .3px;
  color: var(--gw-texto-3); margin-bottom: 2px;
}
.tar-tramo {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--t-micro); color: var(--gw-texto-2);
  padding: 1px 4px; border-radius: 3px; font-variant-numeric: tabular-nums;
}
/* El tramo que se aplicó a esta cantidad. Sin esta marca la escalera es una lista de
   números y no una explicación del precio que está arriba. */
.tar-tramo.puesto {
  background: var(--gw-verde-tenue); color: var(--gw-texto); font-weight: 700;
}

/* En la tabla de agentes, las rutas en exclusiva no son un error pero sí algo que mirar. */
/* Las magnitudes extra de la vista Ruta (fase 4): el peso cuando se compara por volumen. */
.tar-magnitudes { border-bottom: 1px dashed var(--gw-borde); padding-bottom: 8px; margin-bottom: 8px; }

/* Vista Demanda (fase 3). Ni un color propio: todo sale de tokens.css (regla 16). */
.tar-cifras { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tar-cifra { flex: 1 1 110px; background: var(--gw-superficie); border: 1px solid var(--gw-borde);
             border-radius: 4px; padding: 6px 10px; }
.tar-cifra strong { display: block; font-size: 1.35rem; line-height: 1.1;
                    font-variant-numeric: tabular-nums; color: var(--gw-texto); }
.tar-cifra span { display: block; font-size: var(--t-micro); color: var(--gw-texto-2); margin-top: 2px; }
.tar-cifra.ojo strong { color: var(--gw-naranja); }
/* ── Mapa de quiebres ─────────────────────────────────────────────────────────
   Va debajo de las tarjetas del grupo: primero el precio a la cantidad preguntada, y
   después cómo cambia el ganador con el tamaño. */
.tar-mapa { margin: 8px 0 4px; padding-top: 8px; border-top: 1px dashed var(--gw-borde); }
.tar-mapa-tit { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .4px;
                color: var(--gw-texto-3); margin-bottom: 6px; }
.tar-mapa-tira { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tar-mapa-tramo { flex: 1 1 auto; min-width: 120px; padding: 5px 8px; border-radius: 4px;
                  background: var(--gw-superficie); border: 1px solid var(--gw-borde); }
.tar-mapa-tramo strong { display: block; font-size: var(--t-s); color: var(--gw-texto); }
.tar-mapa-tramo span { display: block; font-size: var(--t-micro); color: var(--gw-texto-2);
                       font-variant-numeric: tabular-nums; }
.tar-mapa-tramo.aqui { border-color: var(--gw-verde); background: var(--gw-verde-tenue); }
.tar-mapa-tramo.nadie strong { color: var(--gw-texto-3); font-weight: 500; }

/* ── Vencimientos ──────────────────────────────────────────────────────────────
   El aviso vive encima de las cinco vistas y solo aparece cuando tiene algo que decir:
   un banner permanente se deja de leer, y el día que importa tampoco se lee. */
.tar-aviso-venc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--gw-superficie); border: 1px solid var(--gw-borde);
  border-left: 3px solid var(--gw-naranja); border-radius: 4px;
  padding: 8px 10px; margin-bottom: 10px;
  font-size: var(--t-s); color: var(--gw-texto);
}
.tar-aviso-venc.grave { border-left-color: var(--gw-peligro); }
.tar-aviso-venc strong { font-variant-numeric: tabular-nums; }
.tar-aviso-venc .tar-aviso-txt { flex: 1 1 240px; }
.tar-plegable-cuerpo { margin-top: 6px; }
.tar-venc-detalle { font-size: var(--t-micro); color: var(--gw-texto-2);
                    padding: 2px 0 2px 10px; border-left: 2px solid var(--gw-borde); }
.tar-venc-detalle.mal { border-left-color: var(--gw-peligro); color: var(--gw-texto); }
.tar-tabla td.mal { color: var(--gw-peligro); font-weight: 600; }
.tar-tabla td.bien { color: var(--gw-exito); }

.tar-bloque-tit { font-weight: 700; font-size: var(--t-s); margin: 14px 0 6px;
                  padding-bottom: 4px; border-bottom: 1px solid var(--gw-borde);
                  color: var(--gw-texto); }
.calc-btn-menudo { font-size: var(--t-micro); padding: 2px 8px; border-radius: 3px;
                   border: 1px solid var(--gw-borde); background: var(--gw-superficie);
                   color: var(--gw-texto-2); cursor: pointer; }
.calc-btn-menudo:hover { background: var(--gw-verde-tenue); color: var(--gw-texto); }

.tar-tabla .ojo { color: var(--gw-texto); font-weight: 700; }

/* ── Buscar y ordenar la tabla de agentes (E4) ─────────────────────────────────
   Con cuatro agentes la tabla se leía entera; con cuarenta, no. El buscador vive FUERA
   del bloque que se repinta a cada tecla — si no, perdería el foco a la primera letra. */
.tar-buscador { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); }
.tar-buscador label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .3px;
                      color: var(--gw-texto-3); white-space: nowrap; }
.tar-buscador input { flex: 1; min-width: 0; }
.tar-tabla th.orden { cursor: pointer; user-select: none; }
.tar-tabla th.orden:hover { background: var(--gw-verde-tenue); }
.tar-tabla th.orden:focus-visible { outline: 2px solid var(--gw-magenta); outline-offset: -2px; }
.tar-tabla th.orden.activa { color: var(--gw-verde); }
.tar-tabla tr.abierta td { background: var(--gw-verde-tenue); }
.tar-ag-link { cursor: pointer; font-weight: 600; color: var(--gw-verde);
               border-bottom: 1px dotted var(--gw-borde-fuerte); }
.tar-ag-link:hover { color: var(--gw-magenta); border-bottom-color: var(--gw-magenta); }
.tar-ag-link:focus-visible { outline: 2px solid var(--gw-magenta); outline-offset: 2px; }

/* ── La ficha de un agente (D4) ────────────────────────────────────────────────
   Va DEBAJO de la tabla y no la sustituye: media conversación de pricing es mirar la
   ficha de uno sin perder de vista la fila del otro. */
.tar-detalle { border: 1px solid var(--gw-borde-fuerte); border-radius: var(--r-m);
               background: var(--gw-blanco); padding: var(--e-3); margin-bottom: var(--e-3); }
.tar-detalle-cab { display: flex; flex-wrap: wrap; gap: var(--e-2);
                   align-items: flex-start; justify-content: space-between;
                   padding-bottom: var(--e-2); margin-bottom: var(--e-2);
                   border-bottom: 2px solid var(--gw-magenta); }
.tar-detalle-nombre { font-size: var(--t-l); font-weight: 700; color: var(--gw-texto); }
.tar-detalle-resumen { font-size: var(--t-s); color: var(--gw-texto-2);
                       font-variant-numeric: tabular-nums; }
.tar-detalle-mal { color: var(--gw-peligro); font-weight: 600; }
.tar-detalle-botones { display: flex; gap: var(--e-1); }
.tar-detalle-botones button { width: auto; }
.tar-detalle-sec { margin-bottom: var(--e-3); }
.tar-detalle-tit { font-weight: 700; font-size: var(--t-s); color: var(--gw-texto);
                   margin-bottom: var(--e-1); }
.tar-detalle-lista { display: flex; flex-direction: column; gap: 2px; }
.tar-detalle-item { font-size: var(--t-s); color: var(--gw-texto-2);
                    padding: 2px 0 2px var(--e-2); border-left: 2px solid var(--gw-borde); }
.tar-detalle-item.mal { border-left-color: var(--gw-peligro); color: var(--gw-texto); }
.tar-tabla td.bien { color: var(--gw-exito); font-weight: 600; }
.tar-detalle-mas { border-left-style: dashed; color: var(--gw-texto-3); font-style: italic; }

/* ── Comparar varios puertos ───────────────────────────────────────────────────
   Con 126 puertos de embarque en una sola modalidad, la lista tiene que tener altura
   propia y buscador: si creciera con el contenido, la tarjeta mediría dos pantallas. */
.tar-selector { border: 1px solid var(--gw-borde); border-radius: var(--r-m);
                padding: var(--e-2); margin-bottom: var(--e-2); background: var(--gw-fondo); }
.tar-selector-cab { display: flex; justify-content: space-between; align-items: baseline;
                    font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .3px;
                    color: var(--gw-texto-3); font-weight: 700; margin-bottom: var(--e-1); }
.tar-selector-botones { display: flex; gap: var(--e-1); margin: var(--e-1) 0; }
.tar-selector-lista { max-height: 190px; overflow-y: auto; border: 1px solid var(--gw-borde);
                      border-radius: var(--r-s); background: var(--gw-blanco);
                      padding: var(--e-1); }
.tar-selector-item { display: flex; align-items: center; gap: var(--e-2);
                     padding: 2px var(--e-1); font-size: var(--t-s); cursor: pointer; }
.tar-selector-item:hover { background: var(--gw-verde-tenue); }
/* 🔴 La casilla que con lo ya marcado no dejaría ni una tarifa. Se ATENÚA, no se esconde:
   quitarla no dejaría distinguir "ese puerto no existe" de "ese agente no llega ahí", que
   se arreglan en sitios distintos (reglas 20 y 25). Sigue pulsable a propósito. Es opacidad
   y no un color, así que no hace falta un token nuevo (regla 16). */
.tar-selector-item.vacio { opacity: .42; }
.tar-selector-item.vacio:hover { opacity: 1; }
.tar-selector-item span:nth-of-type(1) { flex: 1; }
.tar-selector-item input { margin: 0; }

/* El filtro predeterminado de la tarjeta de puertos (2026-08-28). Se separa del resto del
   cuerpo con una línea porque no es un paso de la comparación: es lo que se hace UNA vez
   para no volver a marcar 126 casillas cada mañana. Sin ni un color propio — todo sale de
   tokens.css (regla 16). */
.tar-preset { border-top: 1px dashed var(--gw-borde); margin-top: var(--e-2);
              padding-top: var(--e-2); }

/* La carta de precios del tarifario, en pantalla (2026-08-28). Los tramos solo existían en
   el PDF: para ver a cuánto cobra cada agente en cada tramo había que generar el documento.
   Sin ningún color propio — todo sale de tokens.css (regla 16). */
.tar-tabla-caja { margin: 8px 0 4px; padding-top: 8px;
                  border-top: 1px dashed var(--gw-borde); }
.tar-tabla-caja > button { width: 100%; margin-bottom: var(--e-1); }
.tar-tabla-cuerpo.oculto { display: none; }
.tar-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tar-tabla th { text-align: left; padding: 4px 6px; background: var(--gw-verde);
                color: var(--gw-blanco); font-size: var(--t-micro);
                text-transform: uppercase; letter-spacing: .3px; }
.tar-tabla td { padding: 4px 6px; border-bottom: 1px solid var(--gw-borde);
                vertical-align: top; }
.tar-tabla td.n, .tar-tabla th.n { text-align: right; white-space: nowrap; }
.tar-tabla td.gana { background: var(--gw-verde-tenue); }
.tar-tabla td.gana strong { color: var(--gw-verde); }
/* Una línea por naviera en la celda de un agente (2026-10-21), como en el PDF. */
.tar-tabla .tar-nv { white-space: nowrap; line-height: 1.35; }
.tar-tabla .tar-nv:not(.top) { color: var(--gw-texto-2); }

/* El modo con Claude (2026-10-12): el cargo leído de un correo, hasta que se toca. */
.calc-linea.calc-linea-ia { border-left: 3px solid var(--gw-aviso-borde); background: var(--gw-aviso-fondo); }
.calc-ia-etiqueta { font-size: 10px; font-weight: 700; color: var(--gw-aviso); background: var(--gw-blanco); border: 1px solid var(--gw-aviso-borde); border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.ia-armar-item { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--gw-borde); }
.ia-armar-item.apagado { opacity: .55; }
.ia-armar-item label { flex: 1; cursor: pointer; font-size: 12px; line-height: 1.35; }
.ia-armar-sub { font-size: 11px; color: var(--gw-texto-3); }
.ia-armar-vencida { color: var(--gw-peligro); font-weight: 700; }
.ia-armar-seccion { margin: 10px 0; }
.ia-armar-seccion h4 { margin: 0 0 4px; font-size: 12px; color: var(--gw-verde); }
.ia-armar-opciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 12px; }
.ia-armar-opciones input[type="number"] { width: 60px; }