/* =====================================================================================================================
   PORTTI · ACABADO DEL SISTEMA DE DISEÑO
   Última hoja de las tres interfaces. No añade pantallas: unifica lo que cada sección definió por su cuenta para que
   todo hable el mismo idioma visual (tokens de css/tokens.css). Cambios solo de presentación.
   ===================================================================================================================== */

/* ---------- Controles: un solo contorno (1 px, contraste 3:1) y una sola altura por densidad ---------- */
#app-screen select, #app-screen input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.modal-box select, .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  border-width: 1px;
}
.sub-campo select { min-height: var(--control-h); border-color: var(--borde-control); font-size: var(--t-md); border-radius: var(--r-md); }
.sub-zona { border: 1px solid var(--borde-control) !important; border-radius: var(--r-md) !important; min-height: var(--control-h); }
.sub-zona:focus-within { border-color: var(--marca-carbon) !important; box-shadow: var(--foco); }
.sub-zona input { border: 0 !important; box-shadow: none !important; }
.segmentado { border-width: 1px; border-color: var(--borde-control); border-radius: var(--r-md); }
.det-puja-input { border-width: 1px; border-radius: var(--r-md); }
.det-puja-input:focus-within { box-shadow: var(--foco); }
/* R-80: un solo contorno al escribir la oferta (el de la caja); el campo no pinta el suyo */
.det-puja-input input:focus, .det-puja-input input:focus-visible { outline: none; box-shadow: none; border: none; }
/* R-80: los importes grandes con la fuente de la marca y cifras tabulares: en monoespaciada la coma ocupa
   un carácter entero y se leía «577 , 79 €» */
.precio-actual-box .precio-actual-num, .precio-box .precio-num, .sticky-bottom-bar .precio-sticky, .precio-sticky,
.det-puja-input input, .det-puja-input b, .rentabilidad-box .rentabilidad-num { font-family: var(--fuente); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Filtros de Subastas: una sola línea en escritorio (los interruptores van con el resto, no en una fila aparte) */
@media (min-width: 1100px) {
  .sub-mas { display: flex !important; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end; flex: 999 1 560px; }
  .sub-mas .sub-campo { flex: 1 1 120px; }
  .sub-mas .sub-campo select { width: 100%; min-width: 0; }
  .sub-mas .sub-check { flex: 0 0 auto; }
}

/* ---------- Paneles con contorno negro grueso → superficie con filete fino y acento lateral ----------
   El acento dice qué es: carbón = información de decisión, amarillo = acción pendiente, morado = agrupado. */
.rentabilidad-box, .det-rentabilidad, .bot-estado-box, .tr-bloque.resguardo, .cp-pack, .equipo-confirmar, .tr-semi, .trafico-banner-avisos,
.detalle-col-precio .sticky-bottom-bar {
  border: 1px solid var(--borde) !important; box-shadow: inset 3px 0 0 var(--marca-carbon); border-radius: var(--r-md) !important;
}
.equipo-bloque, .modo-card, .verificacion-panel { border-width: 1px !important; }
.pack-propuesta, .pack-tarjeta { border: 1px solid var(--borde) !important; box-shadow: inset 4px 0 0 var(--compartida); }

/* ---------- Badges y etiquetas: misma forma, tamaño y peso en toda la plataforma ---------- */
.urgencia-badge, .badge, .badge-ok, .sev, .pack-badge, .mc-forma, .copilot-mod-reg, .cr-op-etiqueta {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-full); padding: 1px 8px; line-height: 1.6;
  font-family: var(--fuente); font-size: var(--t-2xs); font-weight: var(--peso-fuerte); letter-spacing: .03em; white-space: nowrap; vertical-align: middle;
}

/* ---------- Botones compactos: una sola medida ---------- */
.btn-mini, .btn-sm { min-height: var(--control-h-sm) !important; padding: 0 var(--e-3) !important; font-size: var(--t-sm) !important; border-radius: var(--r-sm) !important; }
.btn-ghost.btn-mini { min-height: var(--control-h-sm); }

/* ---------- Títulos: escala única ---------- */
.panel h2 { font-size: var(--t-lg); }
.panel h3 { font-size: var(--t-md); }

/* ---------- Tablas y filas operativas: filetes finos, sin bordes verticales, cifras alineadas ---------- */
.tabla-simple { border-collapse: collapse; }
.tabla-simple td, .tabla-simple th { border-left: 0 !important; border-right: 0 !important; }
.tabla-simple td.num, .tabla-simple th.num, td.num { text-align: right; }

/* ---------- Estados vacíos y de carga ---------- */
.empty { color: var(--texto-2); }

/* ---------- Mensajes de estado: color semántico + icono (no solo color) ---------- */
.msg.error::before { content: '⚠ '; }
.msg.success::before { content: '✓ '; }

/* ---------- Publicar: campos que van juntos, en pareja ---------- */
.pub-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-4); }
.pub-par > div { min-width: 0; }
.pub-par label { margin-top: var(--e-4); }
.pub-par:first-child label { margin-top: 0; }
@media (max-width: 640px) { .pub-par { grid-template-columns: 1fr; } .pub-par:first-child > div + div label { margin-top: var(--e-4); } }
.req { color: var(--error); font-weight: var(--peso-fuerte); }

/* ---------- Seguimiento: etapas reales de la operación en una línea continua ---------- */
.sg-etapas { list-style: none; margin: var(--e-3) 0 var(--e-4); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.sg-etapas li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 22px var(--e-2) 0 0; font-size: var(--t-sm); min-width: 0; }
.sg-etapas li::before { content: ''; position: absolute; top: 7px; left: 14px; right: 0; height: 2px; background: var(--separador); }
.sg-etapas li:last-child::before { display: none; }
.sg-etapas li.hecha::before { background: var(--marca-carbon); }
.sg-et-punto { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde-fuerte); box-sizing: border-box; }
.sg-etapas li.hecha .sg-et-punto { background: var(--marca-carbon); border-color: var(--marca-carbon); }
.sg-etapas li.hecha .sg-et-punto::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--marca-amarillo); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sg-etapas li.actual .sg-et-punto { background: var(--marca-amarillo); border-color: var(--marca-carbon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-amarillo) 30%, transparent); }
.sg-etapas li.con-incidencia .sg-et-punto { background: var(--error); border-color: var(--error); box-shadow: 0 0 0 4px var(--error-fondo); }
.sg-etapas b { font-size: var(--t-sm); }
.sg-etapas li.pendiente b { color: var(--texto-2); font-weight: var(--peso-medio); }
.sg-etapas small { color: var(--texto-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.sg-etapas em { font-style: normal; font-size: var(--t-xs); font-weight: var(--peso-fuerte); color: var(--error); }
@media (max-width: 640px) {
  .sg-etapas { grid-template-columns: 1fr; gap: 0; }
  .sg-etapas li { padding: 0 0 var(--e-3) 28px; }
  .sg-etapas li::before { top: 16px; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
}

/* ---------- Subastas: lista para comparar ----------
   El equipo «conjunto completo» es el caso normal y ya no se etiqueta en cada fila (sí en el detalle).
   En el móvil, precio, tiempo y acción comparten línea. */
.sub-equipo:empty { display: none; }
@media (max-width: 760px) {
  .row-tabla.sub-fila { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ruta ruta" "precio accion" "tiempo accion"; gap: 2px var(--e-3); align-items: center; }
  .row-tabla.sub-fila .col-thumb { display: none; }
  .row-tabla.sub-fila .col-ruta { grid-area: ruta; min-width: 0; margin-bottom: var(--e-2); }
  .row-tabla.sub-fila .col-precio { grid-area: precio; }
  .row-tabla.sub-fila .col-tiempo { grid-area: tiempo; font-size: var(--t-sm); color: var(--texto-2); }
  .row-tabla.sub-fila .col-accion { grid-area: accion; }
  .row-tabla.sub-fila .col-accion button { margin: 0; min-height: var(--control-h); }
}

/* ---------- Economía (cargador y transportista) ----------
   Filtros alineados por su base, cifras a la derecha para poder compararlas y acción de cobro compacta. */
.eco-filtros { align-items: end; }
.eco-filtros label, .eco-personalizado label { margin-top: 0 !important; font-weight: var(--peso-fuerte); font-size: var(--t-xs); }
@media (min-width: 1100px) {
  .row-tabla-pagos > .num { text-align: right; justify-self: end; }
  .tabla-header-desktop-pagos.pagos-cols-t > span:nth-child(n+2):nth-child(-n+4), .tabla-header-desktop-pagos.pagos-cols-t > span:nth-child(6),
  .tabla-header-desktop-pagos.pagos-cols-c > span:nth-child(n+3):nth-child(-n+7) { text-align: right; }
  .row-tabla-pagos button.action { min-height: var(--control-h-sm); padding: 0 var(--e-3); font-size: var(--t-sm); }
}
.eco-kpi .v { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; font-size: var(--t-lg); }
.eco-kpi.destacada .v { font-size: var(--t-xl); }
.eco-kpi .l { font-size: var(--t-2xs); letter-spacing: var(--espaciado-versalitas); color: var(--texto-2); }

/* ---------- Una sola acción principal por fila: la primera de marca manda; las siguientes pasan a secundarias ---------- */
/* Ola A: la regla vale para cualquier grupo de botones hermanos (filas, pies de ventana, cabeceras de bloque): el
   amarillo de acción no se repite; las siguientes pasan a secundarias */
.row-actions > button.action ~ button.action, .row-actions > button.action ~ a.action,
.mc-acciones > button.action ~ button.action, .tr-acciones > button.action ~ button.action,
button.action ~ button.action, button.action ~ a.action, a.action ~ button.action, a.action ~ a.action {
  background: transparent; border: 1px solid var(--borde-control); color: var(--texto); box-shadow: none;
}

/* ===================== Copilot · Rutas y Cargas sueltas =====================
   Nivel 1: lo que hace falta para comparar (ruta, letra del mapa, margen). Nivel 2 al abrir: recorrido, cifras y misión.
   Nivel 3 plegado: por qué y análisis completo. La letra rellena dice «recomendada» (no hace falta repetirlo). */
.cp-explica-linea { padding: var(--e-2) 0 var(--e-2) var(--e-3) !important; background: none !important; border-left: 3px solid var(--marca-amarillo); border-radius: 0 !important; }
.cp-explica-linea p { margin: 0; font-size: var(--t-sm); }
/* Cargas sueltas: lista con filetes */
#cr-oportunidades .cr-op { background: none; border: 0; border-bottom: 1px solid var(--separador); border-radius: 0; box-shadow: none; padding: var(--e-3) var(--e-2); margin: 0; cursor: pointer; }
#cr-oportunidades .cr-op:hover, #cr-oportunidades .cr-op.resaltada { background: var(--superficie-hover); }
#cr-oportunidades .cr-op.abierta { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--marca-amarillo); }
.cr-op-cab strong { display: inline-flex; align-items: center; gap: var(--e-2); }
.cr-op-letra { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: var(--peso-fuerte) var(--t-xs) var(--fuente-num); background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borde-fuerte); flex: 0 0 24px; }
.cr-op.recomendada .cr-op-letra { background: var(--marca-carbon); color: var(--marca-amarillo); box-shadow: none; }
.cr-op-datos { padding-left: 32px; }
.cr-op-camino { font-weight: var(--peso-fuerte); color: var(--texto); }
.cr-op-detalle { padding-left: 32px; }
/* Rutas: tarjetas como unidad (se abren), con filete fino; la abierta lleva el acento */
#cr-planificacion .cr-op.cp-plan { border: 1px solid var(--borde) !important; border-left-width: 1px !important; border-radius: var(--r-md); margin-bottom: var(--e-2); }
#cr-planificacion .cr-op.cp-plan.abierta, #cr-planificacion .cr-op.resaltada { box-shadow: inset 3px 0 0 var(--marca-amarillo) !important; }
.cp-plan-mejor { display: block; font-size: var(--t-xs); color: var(--texto-2); font-weight: var(--peso-medio); margin-top: 1px; }
.cp-mas { margin: var(--e-3) 0; border-top: 1px solid var(--separador); padding-top: var(--e-2); }
.cp-mas > summary { cursor: pointer; font-weight: var(--peso-fuerte); font-size: var(--t-sm); padding: 4px 0; }
.cp-mas[open] > summary { margin-bottom: var(--e-2); }

/* ===================== Packs en Subastas (transportista) ===================== */
.pk-tarjeta { display: grid; gap: var(--e-3); padding: var(--e-4); margin-bottom: var(--e-3); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); box-shadow: inset 4px 0 0 var(--compartida); cursor: pointer; transition: border-color var(--t-rapido), box-shadow var(--t-rapido); }
.pk-tarjeta:hover { border-color: var(--borde-fuerte); box-shadow: inset 4px 0 0 var(--compartida), var(--sombra-2); }
.pk-tarjeta:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.pk-tarjeta.bloqueada { opacity: .7; }
.pk-t-cab { display: flex; justify-content: space-between; gap: var(--e-4); align-items: flex-start; }
.pk-t-tit { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pk-t-tit h4 { flex-basis: 100%; margin: 2px 0 0; font-size: var(--t-lg); line-height: var(--interlineado-compacto); }
.pk-t-tit p { flex-basis: 100%; margin: 0; }
.pk-t-fotos { display: flex; gap: 6px; flex: 0 0 auto; }
.pk-t-fotos img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--r-sm); background: var(--superficie-2); }
.pk-t-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--separador); border-bottom: 1px solid var(--separador); }
.pk-t-cifras > div { display: flex; flex-direction: column; gap: 1px; padding: var(--e-2) var(--e-3); min-width: 0; }
.pk-t-cifras > div + div { border-left: 1px solid var(--separador); }
.pk-t-cifras span { font-size: var(--t-2xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); }
.pk-t-cifras b { font-size: var(--t-lg); }
.pk-t-cifras small { font-size: var(--t-xs); color: var(--texto-2); }
.pk-t-margen.bien b { color: var(--ok); } .pk-t-margen.justo b { color: var(--aviso); } .pk-t-margen.mal b { color: var(--error); }
.pk-t-acciones { display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; }
.pk-t-acciones button { margin: 0; }
@media (max-width: 640px) {
  .pk-t-cab { flex-direction: column; }
  .pk-t-cifras { grid-template-columns: 1fr 1fr; }
  .pk-t-cifras > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--separador); }
  .pk-t-acciones button { flex: 1; }
}
/* Ficha completa */
.pkf-cab { display: flex; justify-content: space-between; gap: var(--e-4); align-items: flex-start; padding-bottom: var(--e-3); border-bottom: 1px solid var(--separador); }
.pkf-tit { min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pkf-tit h3 { flex-basis: 100%; margin: 4px 0 0; font-size: var(--t-xl); }
.pkf-tit p { flex-basis: 100%; margin: 0; color: var(--texto-2); font-size: var(--t-sm); }
.pkf-cierre { display: flex; flex-direction: column; align-items: flex-end; background: var(--carbon-900); color: var(--sobre-carbon); border-radius: var(--r-md); padding: var(--e-2) var(--e-4); flex: 0 0 auto; }
.pkf-cierre span { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--espaciado-versalitas); color: var(--sobre-carbon-2); }
.pkf-cierre b { font-size: var(--t-lg); color: var(--marca-amarillo); }
.pkf-cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-6); margin-top: var(--e-4); }
.pkf-mapa { height: 260px; border-radius: var(--r-md); overflow: hidden; background: var(--superficie-2); position: relative; z-index: 0; }
.pkf-cuerpo h4, .pkf-h { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-2); }
.pkf-der h4:first-child { margin-top: 0; }
.pkf-fila { display: flex; justify-content: space-between; gap: var(--e-3); padding: 6px 0; border-bottom: 1px dashed var(--separador); font-size: var(--t-sm); }
.pkf-fila span { color: var(--texto-2); }
.pkf-fila.total { border-bottom: 0; border-top: 2px solid var(--marca-carbon); margin-top: 4px; padding-top: 8px; font-size: var(--t-md); }
.pkf-fila.total span { color: var(--texto); font-weight: var(--peso-fuerte); }
.pkf-fila.total.bien b { color: var(--ok); } .pkf-fila.total.justo b { color: var(--aviso); } .pkf-fila.total.mal b { color: var(--error); }
.pkf-mini { margin: 4px 0 var(--e-2); font-size: var(--t-xs); color: var(--texto-2); }
.pkf-datos { margin-top: var(--e-4); }
.pkf-mercancias { display: grid; gap: 0; border-top: 1px solid var(--separador); }
.pkf-m { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--separador); }
.pkf-foto { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r-sm); background: var(--superficie-2); cursor: zoom-in; }
.pkf-foto.vacia { cursor: default; background: var(--superficie-2) url('/images/marca/imagotipo-carbon.svg') center / 22px no-repeat; opacity: .5; }
.pkf-m-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--t-sm); }
.pkf-m-txt span { color: var(--texto-2); font-size: var(--t-xs); }
.pkf-m-precio { font-size: var(--t-md); }
.pk-mk { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: var(--peso-fuerte) var(--t-xs) var(--fuente); box-shadow: 0 1px 5px color-mix(in srgb, var(--negro) 35%, transparent); border: 2px solid var(--superficie); }
.pk-mk.recogida { background: var(--marca-carbon); color: var(--blanco); }
.pk-mk.entrega { background: var(--marca-amarillo); color: var(--marca-carbon); }
@media (max-width: 760px) {
  .pkf-cab { flex-direction: column; } .pkf-cierre { align-items: flex-start; }
  .pkf-cuerpo { grid-template-columns: 1fr; gap: var(--e-2); }
  .pkf-m { grid-template-columns: 56px minmax(0, 1fr); } .pkf-foto { width: 56px; height: 44px; } .pkf-m-precio { grid-column: 2; }
}
.pkf-cierre .countdown-live { color: var(--marca-amarillo); font-family: var(--fuente-num); }

/* ===================== Subastas · filtros =====================
   Una barra de búsqueda (zona + radio + mi ubicación) y debajo una línea de píldoras: tipo, equipo, interruptores y,
   a la derecha, el orden. Los mismos controles de siempre (ids y funciones intactos), con forma de barra de herramientas. */
.sub-filtros { display: flex !important; flex-direction: column; align-items: stretch !important; gap: var(--e-3) !important; padding: 0 0 var(--e-4) !important; }
.sub-campo-zona { flex: none !important; font-size: 0 !important; }
.sub-zona { display: flex; align-items: center; gap: 0; min-height: 48px !important; padding: 0 6px 0 var(--e-3) !important; background: var(--superficie); box-shadow: var(--sombra-1); }
.sub-zona .sub-icono { color: var(--texto-2); display: inline-flex; }
.sub-zona input { flex: 1; font-size: var(--t-md) !important; padding: 0 var(--e-2) !important; min-height: 46px !important; }
.sub-radio { display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--e-2); border-left: 1px solid var(--separador); font-size: var(--t-sm); color: var(--texto-2); white-space: nowrap; }
.sub-radio select { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 36px !important; padding: 0 22px 0 2px !important; width: auto !important; font-size: var(--t-sm) !important; font-weight: var(--peso-fuerte); color: var(--texto); margin: 0; }
.sub-ubicacion { border-left: 1px solid var(--separador) !important; border-radius: 0 !important; padding-left: var(--e-3) !important; }
.sub-mas { display: flex !important; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.sub-pill { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; min-height: var(--control-h-sm); padding: 0 4px 0 var(--e-3);
  border: 1px solid var(--borde-control); border-radius: var(--r-full); background: var(--superficie); font-size: var(--t-2xs) !important; font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); margin: 0; flex: 0 0 auto !important; }
.sub-pill:focus-within { border-color: var(--marca-carbon); box-shadow: var(--foco); }
.sub-pill select { border: 0 !important; box-shadow: none !important; background: transparent; min-height: 32px !important; padding: 0 24px 0 0 !important; width: auto !important;
  min-width: 0 !important; font-size: var(--t-sm) !important; font-weight: var(--peso-fuerte); color: var(--texto); text-transform: none; letter-spacing: 0; margin: 0; }
.sub-orden { margin-left: auto; }
.sub-check { min-height: var(--control-h-sm) !important; flex: 0 0 auto !important; }
.sub-mas-btn { align-self: flex-start; }
@media (max-width: 640px) {
  .sub-mas.abierto { gap: var(--e-2); }
  .sub-orden { margin-left: 0; }
  .sub-pill, .sub-check { flex: 1 1 auto !important; justify-content: space-between; }
}
@media (min-width: 1100px) { .sub-filtros .sub-mas { flex: none !important; } }
.sub-filtros .sub-mas { flex: none; }
.sub-pill select { text-align: left; }
@media (max-width: 640px) { .sub-pill select { flex: 1; } }
.sub-mas .sub-check { align-self: center !important; }
/* Aviso de tarifa al publicar: la regla, el ejemplo y el consejo del pack, cada uno en su línea */
.aviso-comision { display: grid; gap: 6px; padding: var(--e-3) var(--e-4) !important; border-radius: var(--r-md) !important; font-size: var(--t-sm) !important; }
.aviso-comision .ac-ejemplo { color: var(--texto-2); }
.aviso-comision .ac-tip { padding-top: 6px; border-top: 1px dashed var(--marca-amarillo-borde); }
.aviso-comision .ac-tip a { font-weight: var(--peso-fuerte); margin-left: 4px; }

/* ===== Cabecera: logotipo oficial por rol + identificador del rol ===== */
.marca-cabecera { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.brand-logo { padding: 4px 0; border-radius: var(--r-sm); }
.brand-logo:focus-visible { outline: none; box-shadow: var(--foco); }
.logo-cabecera { display: block; height: 38px; width: auto; }
/* El logotipo de caja con línea amarilla (cabeceras claras: cargador y despacho) trae margen de protección en su lienzo
   (el dibujo ocupa ~76 % del alto): se escala para que el dibujo mida lo mismo que el logo anterior, sin agrandar la barra */
.logo-cabecera[src*="logotipo_01_caja_corta"] { height: 50px; margin-block: -6px; }
/* Identificador de la interfaz: filete, icono del perfil sobre su color y dos líneas (perfil y ámbito) */
.rol-cabecera { display: inline-flex; align-items: center; gap: 10px; padding-left: var(--e-4); margin-left: var(--e-1);
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); color: var(--marca-carbon); white-space: nowrap;
  animation: rol-entra var(--t-medio) var(--curva) both; }
.rol-cabecera[hidden] { display: none; }
.rol-ico { width: 32px; height: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--marca-carbon); color: var(--marca-amarillo); flex: none; }
.rol-ico svg { width: 18px; height: 18px; }
.rol-txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.rol-nombre { font-size: var(--t-base); font-weight: var(--peso-fuerte); letter-spacing: .01em; }
.rol-sub { font-size: var(--t-xs); opacity: .72; }
body[data-perfil="transportista"] .rol-cabecera { color: var(--sobre-carbon); }
body[data-perfil="transportista"] .rol-ico { background: var(--marca-amarillo); color: var(--marca-carbon); }
.rol-cabecera-manager { color: var(--texto); }
@keyframes rol-entra { from { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .rol-cabecera { animation: none; } }
@media (max-width: 640px) {
  /* En móvil: logotipo algo menor y, a su lado, solo el icono y el nombre del perfil */
  .logo-cabecera { height: 28px; }
  .logo-cabecera[src*="logotipo_01_caja_corta"] { height: 37px; margin-block: -4.5px; }
  .rol-cabecera { gap: 7px; padding-left: var(--e-3); }
  .rol-ico { width: 26px; height: 26px; border-radius: var(--r-sm); }
  .rol-ico svg { width: 15px; height: 15px; }
  .rol-txt { display: none; } /* en móvil, solo el icono del perfil (con su color): el nombre no cabe junto a los botones */
}
#app-screen > header #user-rol { display: none; } /* el rol ya lo dice el identificador junto al logotipo */

/* ===== Mis cargas: cada mercancía es una tarjeta propia; el filete de la izquierda dice cómo viaja ===== */
.mc-fila { background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--marca-carbon); border-radius: var(--r-lg);
  padding: var(--e-4) var(--e-5); margin: 0 0 var(--e-3); gap: var(--e-3); box-shadow: var(--sombra-1); transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva); }
.mc-fila:last-child { border-bottom: 1px solid var(--borde); margin-bottom: 0; }
.mc-fila:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.mc-fila[data-forma="suelta"] { border-left-color: var(--marca-carbon); }
.mc-fila[data-forma="pack"] { border-left-color: var(--compartida); }
.mc-fila[data-forma="compartida"] { border-left-color: var(--ok); }
.mc-fila[data-estado="Cancelada"] { opacity: .72; }
.mc-fila .row-actions { border-top: 1px solid var(--separador); padding-top: var(--e-3); margin-top: 2px; }
/* Dentro de un pack: tarjetas más planas para que se lea que son partes de lo mismo */
.mc-fila.en-pack { box-shadow: none; border-color: var(--separador); border-left-width: 3px; padding: var(--e-3) var(--e-4); margin: var(--e-2) 0 0; }
.mc-fila.en-pack:hover { box-shadow: none; }
.mc-grupo-filas { border-top: 0; margin-top: var(--e-2); }

/* Ruta compartida */
.mc-compartida { border: 1px solid var(--ok-borde); background: var(--superficie-2); border-radius: var(--r-md); padding: var(--e-3) var(--e-4); display: grid; gap: var(--e-2); }
.mc-comp-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ok); }
.mc-comp-cab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mc-comp-estado { margin-left: auto; font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-full); background: var(--aviso-fondo); color: var(--aviso); }
.mc-comp-estado.ok { background: var(--ok-fondo); color: var(--ok); }
.mc-comp-cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.mc-comp-camion { display: inline-flex; align-items: stretch; height: 28px; }
.mc-comp-huecos { display: inline-flex; gap: 3px; padding: 4px; border: 2px solid var(--ok); border-radius: var(--r-sm) var(--r-xs) var(--r-xs) var(--r-sm); background: var(--superficie); }
.mc-comp-huecos i, .mc-comp-leyenda i { display: inline-block; width: 14px; border-radius: var(--r-xs); background: var(--borde-fuerte); }
.mc-comp-huecos i.tuyo, .mc-comp-leyenda i.tuyo { background: var(--marca-amarillo); box-shadow: inset 0 0 0 1px var(--carril-5); }
.mc-comp-cabina { width: 16px; margin-left: 2px; border: 2px solid var(--ok); border-left-width: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--ok); }
.mc-comp-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: var(--t-xs); color: var(--texto-2); }
.mc-comp-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.mc-comp-leyenda i { height: 10px; width: 10px; }
.mc-comp-ahorro { margin: 0; font-size: var(--t-sm); }
.mc-comp-ahorro s { color: var(--texto-3); }
.mc-comp-nota { margin: 0; font-size: var(--t-xs); color: var(--texto-2); }
@media (max-width: 640px) { .mc-fila { padding: var(--e-3) var(--e-4); } .mc-comp-estado { margin-left: 0; } }

/* ===== Seguimiento del cargador: panel de control (estado + mapa arriba; cronología y datos en dos columnas) ===== */
.sg-cab-panel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); padding-bottom: var(--e-4); border-bottom: 1px solid var(--separador); }
.sg-cab-panel h2 { margin: 8px 0 0; font-size: var(--t-xl); }
.sg-cab-txt { min-width: 0; }
.sg-acciones { margin: 0; gap: var(--e-2); }
.sg-hero { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); margin: var(--e-4) 0; border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra-1); }
.sg-hero .sg-ahora { margin: 0; border-radius: 0; background: var(--superficie); border-right: 1px solid var(--separador); padding: var(--e-5); gap: var(--e-3); position: relative; }
.sg-hero .sg-ahora::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--marca-amarillo); }
.sg-hero .sg-ahora-frase { font-size: var(--t-lg); font-weight: var(--peso-fuerte); line-height: var(--interlineado-compacto); }
.sg-hero #mapa-seguimiento { height: 380px; margin: 0; border-radius: 0; }
.sg-etapas { margin: var(--e-2) 0 var(--e-4); }
.sg-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: var(--e-6); align-items: start; }
.sg-col-main > :first-child { margin-top: 0; }
.sg-col-lado { position: sticky; top: calc(var(--alto-cabecera, 72px) + 12px); }
.sg-col-lado .sg-datos { grid-template-columns: 1fr; margin-top: 0; }
.sg-sub { margin: var(--e-4) 0 var(--e-3); font-size: var(--t-2xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); }
.sg-cols .sg-sub:first-child, .sg-col-lado > .sg-sub:first-child { margin-top: 0; }
.sg-co2 { margin: var(--e-3) 0 0; }
/* Lista de la izquierda: tarjetas compactas; la seleccionada lleva el filete de carbón, no un relleno amarillo */
.seguimiento-item { border: 1px solid var(--borde); border-left: 3px solid var(--borde); background: var(--superficie); margin-bottom: var(--e-2); border-radius: var(--r-md); transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva); }
.seguimiento-item:hover { background: var(--superficie-hover); border-color: var(--borde-fuerte); }
.seguimiento-item.seleccionado { background: var(--superficie); border-color: var(--marca-carbon); border-left-color: var(--marca-carbon); box-shadow: var(--sombra-2); }
.seguimiento-item:focus-visible { outline: none; box-shadow: var(--foco); }
@media (max-width: 1100px) { .sg-cols { grid-template-columns: 1fr; } .sg-col-lado { position: static; } }
@media (max-width: 760px) {
  .sg-hero { grid-template-columns: 1fr; }
  .sg-hero .sg-ahora { border-right: 0; border-bottom: 1px solid var(--separador); padding: var(--e-4); }
  .sg-hero #mapa-seguimiento { height: 260px; }
}

/* ===== Mi perfil · Datos de la cuenta: dos bloques (A fiscal, B contacto) en rejilla de dos columnas ===== */
/* Grupos con fieldset/legend sin caja ni letra en cuadrado (ficha transportista-perfil, P2): un filete los separa */
.pf-bloque { border: 0; border-block-start: 1px solid var(--separador); border-radius: 0; padding: var(--e-5) 0 0; margin: 0 0 var(--e-6); background: none; min-inline-size: 0; }
.pf-bloque legend { float: inline-start; inline-size: 100%; padding: 0; margin: 0 0 var(--e-1); font-size: var(--t-md); font-weight: var(--peso-fuerte); color: var(--texto); }
.pf-bloque legend + * { clear: both; }
.pf-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--marca-carbon); color: var(--marca-amarillo); font-size: var(--t-xs); }
.pf-ayuda { margin: 0 0 var(--e-4); font-size: var(--t-sm); color: var(--texto-2); }
.pf-bloque .perfil-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); max-width: none; }
.pf-bloque .perfil-form > div { min-width: 0; }
.pf-bloque .pf-ancho { grid-column: 1 / -1; }
.pf-bloque input, .pf-bloque select { min-height: 48px; }
.pf-bloque .req { color: var(--error); }
.pf-tel { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-2); }
.pf-tel select { margin: 0; height: 48px; min-height: 48px; padding-top: 0; padding-bottom: 0; }
.pf-tel input { margin: 0; }
.pf-nota { display: block; margin-top: 6px; font-size: var(--t-xs); color: var(--texto-2); }
.pf-etiqueta { display: block; font-weight: var(--peso-fuerte); font-size: var(--t-sm); margin-bottom: 6px; }
.pf-idioma { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }
.pf-idioma b { color: var(--texto); }
.pf-fijo { background: var(--superficie-2); color: var(--texto-2); }
#perfil-aviso-fiscal { margin: 0 0 var(--e-4); }
/* Pie de guardado (U-06): pegado abajo mientras se edita; «Guardar cambios» solo se puede pulsar si hay cambios */
.pf-pie { position: sticky; inset-block-end: 0; z-index: 2; background: var(--superficie); }
.pf-pie-texto { font-size: var(--t-sm); color: var(--texto-2); }
.pf-pie.con-cambios .pf-pie-texto { color: var(--texto); font-weight: var(--peso-medio); }
@media (max-width: 640px) { .pf-bloque { padding: var(--e-4); } .pf-bloque .perfil-form { grid-template-columns: 1fr; } }

/* ===== Manager · Mapa de operaciones (torre de control) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tc-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--e-3); margin-bottom: var(--e-3); }
.tc-sub { margin: 4px 0 0; }
.tc-act { display: flex; align-items: center; gap: var(--e-3); }
.tc { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--e-4); align-items: stretch; }
.tc-panel { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: var(--e-4); max-height: calc(100vh - 190px); }
.tc-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.tc-filtro { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva); }
.tc-filtro b { font-size: var(--t-xl); line-height: 1; }
.tc-filtro span { font-size: var(--t-xs); color: var(--texto-2); }
.tc-filtro.alerta { border-left-color: var(--error); } .tc-filtro.transito { border-left-color: var(--marca-carbon); } .tc-filtro.asignacion { border-left-color: var(--aviso-fuerte); }
.tc-filtro.alerta b { color: var(--error); }
.tc-filtro:hover { background: var(--superficie-hover); }
.tc-filtro.activo { border-color: var(--marca-carbon); box-shadow: inset 0 0 0 1px var(--marca-carbon); background: var(--superficie-2); }
.tc-filtro:focus-visible { outline: none; box-shadow: var(--foco); }
.tc-kpi-extra { grid-column: 1 / -1; margin: 2px 0 0; font-size: var(--t-xs); color: var(--texto-2); }
.tc-buscar input { margin: 0; width: 100%; }
.tc-subastas { font-size: var(--t-xs); }
.tc-lista { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 0 calc(-1 * var(--e-2)); padding: 0 var(--e-2); }
.tc-fila { flex: none; margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--separador); border-left: 3px solid transparent; border-radius: 0; background: none; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer; }
.tc-fila.alerta { border-left-color: var(--error); } .tc-fila.transito { border-left-color: var(--marca-carbon); } .tc-fila.asignacion { border-left-color: var(--aviso-fuerte); }
.tc-fila.programada, .tc-fila.subasta { border-left-color: var(--borde); }
.tc-fila:hover { background: var(--superficie-hover); }
.tc-fila.sel { background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--marca-carbon); }
.tc-fila:focus-visible { outline: none; box-shadow: var(--foco); }
.tc-fila-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--texto-2); }
.tc-estado { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--t-2xs); }
.tc-estado.alerta { color: var(--error); } .tc-estado.transito { color: var(--texto); } .tc-estado.asignacion { color: var(--aviso-fuerte); }
.tc-ref { font-size: var(--t-xs); }
.tc-ruta { font-size: var(--t-sm); font-weight: 700; overflow-wrap: anywhere; }
.tc-quien { font-size: var(--t-xs); color: var(--texto-2); overflow-wrap: anywhere; }
.tc-fila-motivos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tc-motivo { display: inline-block; font-size: var(--t-2xs); font-weight: 700; color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); border-radius: var(--r-full); padding: 1px 8px; }
.tc-lista { gap: 0 !important; }
.tc-mas { margin: 6px 4px; }
.tc-pt { flex: none; display: inline-block; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--texto-2); }
.tc-pt.alerta { background: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 18%, transparent); } .tc-pt.transito { background: var(--marca-carbon); } .tc-pt.asignacion { background: var(--aviso-fuerte); }
.tc-pt.programada { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--texto-2); } .tc-pt.subasta { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--borde-control); }
.tc-leyenda { font-size: var(--t-xs); color: var(--texto-2); border-top: 1px solid var(--separador); padding-top: var(--e-2); }
.tc-leyenda summary { cursor: pointer; font-weight: 700; color: var(--texto); }
.tc-leyenda ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tc-leyenda li { display: flex; gap: 8px; align-items: flex-start; }
.tc-mapa-cont { position: relative; min-width: 0; border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; }
.tc-mapa-cont #mapa-global { height: calc(100vh - 190px); min-height: 480px; }
.tc-mk { width: 18px; height: 18px; border-radius: 50%; background: var(--texto-2); border: 3px solid var(--superficie); box-shadow: 0 1px 4px color-mix(in srgb, var(--negro) 35%, transparent); transition: transform var(--t-rapido) var(--curva); }
.tc-mk.alerta { background: var(--error); } .tc-mk.transito { background: var(--marca-carbon); } .tc-mk.asignacion { background: var(--aviso-fuerte); }
.tc-mk.programada { background: var(--superficie); border-color: var(--texto-2); } .tc-mk.subasta { background: var(--superficie); border-color: var(--borde-control); border-style: dashed; }
.tc-mk.camion { border-radius: var(--r-sm); }
.tc-mk.alerta.camion, .tc-mk.alerta { animation: tc-latido 2s ease-out infinite; }
.tc-mk.sel { transform: scale(1.35); box-shadow: 0 0 0 4px var(--marca-amarillo), 0 1px 4px color-mix(in srgb, var(--negro) 35%, transparent); }
@keyframes tc-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--error) 45%, transparent), 0 1px 4px color-mix(in srgb, var(--negro) 35%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--error) 0%, transparent), 0 1px 4px color-mix(in srgb, var(--negro) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tc-mk.alerta { animation: none; } }
.tc-grupo { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-carbon); color: var(--blanco); border: 3px solid var(--superficie); box-shadow: 0 2px 8px color-mix(in srgb, var(--negro) 30%, transparent); font: 700 var(--t-sm) var(--fuente-num); }
.tc-grupo.con-alertas { background: var(--marca-carbon); box-shadow: 0 0 0 3px var(--error), 0 2px 8px color-mix(in srgb, var(--negro) 30%, transparent); }
.tc-grupo i { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-full); background: var(--error); color: var(--blanco); font: 700 var(--t-2xs)/18px var(--fuente-num); font-style: normal; text-align: center; }
.tc-cajon { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(360px, calc(100% - 24px)); z-index: 500; overflow-y: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-3); padding: var(--e-4) var(--e-5); animation: tc-entra var(--t-medio) var(--curva) both; }
.tc-cajon:focus { outline: none; }
@keyframes tc-entra { from { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .tc-cajon { animation: none; } }
.tc-cajon-cab { display: flex; justify-content: space-between; align-items: center; }
.tc-cerrar { margin: 0; min-height: 0; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie); font-size: var(--t-xl); line-height: 1; cursor: pointer; }
.tc-cerrar:focus-visible { outline: none; box-shadow: var(--foco); }
.tc-cajon h2 { margin: var(--e-3) 0 2px; font-size: var(--t-lg); }
.tc-ref { margin: 0 0 var(--e-3); font-size: var(--t-xs); color: var(--texto-2); }
.tc-chip { font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-full); background: var(--superficie-2); color: var(--texto-2); }
.tc-chip.alerta { background: var(--error-fondo); color: var(--error); } .tc-chip.transito { background: var(--marca-carbon); color: var(--blanco); } .tc-chip.asignacion { background: var(--aviso-fondo); color: var(--aviso); }
.tc-motivos { margin: 0 0 var(--e-3); padding: 10px 12px; list-style: none; border-radius: var(--r-md); background: var(--error-fondo); border: 1px solid var(--error-borde); display: grid; gap: 4px; font-size: var(--t-sm); color: var(--error); font-weight: 700; }
.tc-motivos li::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background: var(--error); color: var(--blanco); font-size: var(--t-2xs); }
.tc-datos { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--separador); }
.tc-datos > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--separador); font-size: var(--t-sm); }
.tc-datos dt { color: var(--texto-2); } .tc-datos dd { margin: 0; overflow-wrap: anywhere; }
.tc-falta { color: var(--aviso-fuerte); font-weight: 700; }
.tc-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.tc-contacto { margin-top: var(--e-3); padding: 10px 12px; border-radius: var(--r-md); background: var(--superficie-2); font-size: var(--t-sm); }
.tc-contacto p { margin: 0 0 6px; }
@media (max-width: 1100px) {
  .tc { grid-template-columns: 1fr; }
  .tc-panel { max-height: none; }
  .tc-lista { max-height: 260px; }
  .tc-mapa-cont #mapa-global { height: 60vh; min-height: 360px; }
}
@media (max-width: 640px) { .tc-cajon { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 70%; } }
.cols-historial.con-accion { grid-template-columns: 150px 1.3fr 1.4fr 1fr 96px; }
@media (max-width: 1099px) { .cols-historial.con-accion { grid-template-columns: minmax(0, 1fr); } }

/* ===== Acceso: pantalla dividida en escritorio (marca a la izquierda, formulario a la derecha); en móvil, cabecera compacta ===== */
.login-marca { display: none; }
.login-brand { display: inline-flex; margin: 0 0 var(--e-5); border-radius: var(--r-sm); }
.login-brand img { height: 30px; width: auto; display: block; }
.login-brand:focus-visible { outline: none; box-shadow: var(--foco); }
#login-form input { min-height: 48px; }
#login-form label { font-weight: var(--peso-fuerte); font-size: var(--t-sm); margin-top: var(--e-4); margin-bottom: 6px; }
.login-perfiles button { min-height: 48px; }
@media (min-width: 980px) {
  #login-screen.login-dividido { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; align-items: stretch; justify-items: stretch; padding: 0; min-height: 100vh; }
  .login-marca { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-8); padding: 48px clamp(40px, 5vw, 80px); background: var(--carbon-900); color: var(--sobre-carbon); position: relative; overflow: hidden; }
  .login-marca::after { content: ''; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border: 48px solid color-mix(in srgb, var(--marca-amarillo) 6%, transparent); border-radius: 50%; pointer-events: none; }
  .login-marca-logo { height: 52px; width: auto; align-self: flex-start; }
  .login-marca-cuerpo { max-width: 34rem; position: relative; z-index: 1; }
  .login-marca h2 { margin: 0 0 var(--e-4); font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; color: var(--blanco); text-wrap: balance; }
  .login-marca-cuerpo > p { margin: 0 0 var(--e-8); font-size: var(--t-md); line-height: 1.6; color: var(--sobre-carbon-2); max-width: 30rem; }
  .login-marca-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); }
  .login-marca-lista li { display: grid; grid-template-columns: 40px 1fr; gap: var(--e-4); align-items: start; font-size: var(--t-base); line-height: 1.5; color: var(--sobre-carbon); }
  .login-marca-lista svg { width: 40px; height: 40px; padding: 9px; border-radius: var(--r-md); background: color-mix(in srgb, var(--marca-amarillo) 10%, transparent); fill: none; stroke: var(--marca-amarillo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
  .login-marca-pie { margin: 0; font-size: var(--t-xs); color: var(--sobre-carbon-2); position: relative; z-index: 1; }
  .login-marca-pie a { color: var(--sobre-carbon-2); }
  #login-screen > .login-panel { align-self: center; justify-self: center; width: min(420px, calc(100% - 64px)); max-width: 420px; margin: 48px 32px; box-shadow: none; border: 0; border-top: 0 !important; background: transparent; padding: 0; }
  .login-panel .login-brand { display: none; }
  .login-titulo { font-size: var(--t-2xl); }
  .login-panel .login-perfiles { background: var(--superficie); border: 1px solid var(--borde); }
  .login-idioma { position: absolute; top: 20px; right: 24px; z-index: 5; }
}
@media (prefers-reduced-motion: reduce) { .login-marca::after { display: none; } }

/* ===== Registro: indicador de pasos con círculos numerados, conectores y paso hecho con ✓ ===== */
.reg-logo img { height: 30px; width: auto; display: block; }
.stepper { list-style: none; margin: 0 0 var(--e-6); padding: 0; display: flex; counter-reset: paso; }
.stepper li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; text-align: center; }
.stepper li + li::before { content: ''; position: absolute; top: 15px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 2px; border-radius: var(--r-xs); background: var(--separador); transition: background var(--t-medio) var(--curva); }
.stepper li.hecho::before, .stepper li.activo::before { background: var(--marca-carbon); }
.st-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--borde-control); background: var(--superficie); color: var(--texto-2); font: 700 var(--t-sm) var(--fuente-num); transition: background var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva), color var(--t-medio) var(--curva); }
.stepper li.activo .st-num { background: var(--marca-amarillo); border-color: var(--marca-carbon); color: var(--marca-carbon); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-amarillo) 25%, transparent); }
.stepper li.hecho .st-num { background: var(--marca-carbon); border-color: var(--marca-carbon); color: var(--marca-amarillo); }
.st-txt { font-size: var(--t-xs); font-weight: var(--peso-fuerte); color: var(--texto-2); line-height: 1.25; padding: 0 4px; overflow-wrap: anywhere; }
.stepper li.activo .st-txt, .stepper li.hecho .st-txt { color: var(--texto); }
/* El alta completa tiene muchos pasos: fila desplazable con ancho mínimo por paso */
.stepper-largo { overflow-x: auto; scrollbar-width: none; padding: 6px 0 4px; }
.stepper-largo::-webkit-scrollbar { display: none; }
.stepper-largo li { flex: 1 1 64px; } /* fase I: los nueve pasos caben sin desplazarse */
.stepper-resumen { display: none; margin: 0 0 var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--texto); }
@media (prefers-reduced-motion: reduce) { .stepper li::before, .st-num { transition: none; } }
@media (max-width: 640px) {
  .stepper-resumen { display: block; }
  .stepper-largo .st-txt { display: none; }
  .stepper-largo li { flex: 1 0 44px; }
  .stepper-largo li + li::before { right: calc(50% + 18px); left: calc(-50% + 18px); }
}
[role="button"][tabindex="0"]:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-sm); }
@media (min-width: 761px) and (max-width: 1100px) { .mc-resumen { flex-wrap: wrap; row-gap: var(--e-2); } }
/* Configuración: parámetros por temas, plegables, con buscador */
.cfg-buscar input { margin: 0 0 var(--e-3); width: 100%; }
.cfg-grupo { border: 1px solid var(--borde); border-radius: var(--r-md); margin-bottom: var(--e-2); background: var(--superficie); }
.cfg-grupo > summary { cursor: pointer; padding: 10px 14px; display: flex; gap: 8px; align-items: baseline; }
.cfg-grupo[open] > summary { border-bottom: 1px solid var(--separador); }
.cfg-grupo .config-fila { padding-left: 14px; padding-right: 14px; }
.pr-impacto-form { align-items: flex-end; flex-wrap: wrap; gap: 12px; } .pr-impacto-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); font-weight: 700; } .pri-actual { min-height: 38px; display: flex; align-items: center; font-size: var(--t-base); }
.pr-impacto-form { display: flex; } .pr-impacto-form label { justify-content: flex-end; } .pr-impacto-form select, .pr-impacto-form input { height: 38px; min-height: 38px; margin: 0; padding-top: 0; padding-bottom: 0; } .pr-impacto-form button { margin: 0; }
.pr-impacto-form select, .pr-impacto-form input { flex: none; min-width: 160px; } /* .filtros les da flex-basis de 200 px, que dentro de una columna es altura */
/* Subasta sin ofertas: no hay cuenta atrás de cierre, sino plazo para la primera oferta */
.cierre-espera { display: block; font-size: var(--t-xs); font-weight: var(--peso-fuerte); color: var(--aviso); line-height: 1.3; }
.cierre-plazo { display: block; font-size: var(--t-xs); color: var(--texto-2); margin-top: 2px; }
.col-tiempo .cierre-espera, .col-tiempo .cierre-plazo { text-align: inherit; }
/* Valoración por mercancía (ficha y puja de pack) */
.pp-merc { margin: var(--e-3) 0 0; font-size: var(--t-sm); }
.pp-merc summary { cursor: pointer; font-weight: var(--peso-fuerte); }
.pp-merc-tabla { width: 100%; border-collapse: collapse; margin-top: var(--e-2); }
.pp-merc-tabla th { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--espaciado-versalitas); color: var(--texto-2); text-align: left; padding: 4px 0; border-bottom: 1px solid var(--separador); }
.pp-merc-tabla td { padding: 6px 0; border-bottom: 1px solid var(--separador); vertical-align: top; }
.pp-merc-tabla td small { display: block; color: var(--texto-2); font-size: var(--t-xs); }
.pp-merc-tabla .num { text-align: right; padding-left: 10px; white-space: nowrap; }
.pp-merc-tabla tr.mal td { color: var(--error); }
.pp-nota { font-size: var(--t-xs); color: var(--texto-2); margin: var(--e-2) 0 0; }
.cr-ocupacion { font-size: var(--t-xs); margin: 6px 0 0; }

/* Demo privada: aviso en la entrada al llegar desde la portada y pantalla de la demo sin pase */
.login-aviso-demo { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--marca-amarillo-suave); border: 1px solid var(--marca-amarillo-borde); color: var(--texto); font-size: var(--t-sm); }
.login-aviso-demo span { color: var(--texto-2); }
.demo-cerrada { display: flex; flex-direction: column; gap: 10px; }
.demo-cerrada .boton-enlace { display: flex; align-items: center; justify-content: center; min-height: var(--control-h-lg); text-decoration: none; border-radius: var(--r-sm); }
.demo-cerrada .config-ayuda { margin: 4px 0 0; text-align: center; }
.demo-perfiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.demo-perfiles button { flex: 1 1 180px; }

/* Cargas disponibles: paginación (rango, páginas y tamaño) y lista que no salta mientras llega la página */
#lista-subastas-activas.cargando-lista { opacity: .55; pointer-events: none; transition: opacity var(--t-rapido); }
.paginacion-cargas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0 2px; border-top: 1px solid var(--separador); margin-top: 6px; font-size: var(--t-sm); color: var(--texto-2); }
.paginacion-cargas:empty { display: none; }
.pag-rango b { color: var(--texto); font-weight: var(--peso-fuerte); }
.pag-controles { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pag-controles button { margin: 0; width: auto; min-height: var(--control-h-sm); padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--texto); font: inherit; cursor: pointer; }
.pag-controles button:hover:not(:disabled) { background: var(--superficie-hover); }
.pag-controles button:disabled { color: var(--deshabilitado); cursor: default; }
.pag-controles .pag-num { min-width: var(--control-h-sm); padding: 0 6px; font-family: var(--fuente-num); }
.pag-controles .pag-num.activa { border-color: var(--borde-fuerte); font-weight: 700; }
.pag-hueco { padding: 0 2px; color: var(--texto-3); }
.pag-tamano { display: flex; align-items: center; gap: 6px; margin: 0; }
.pag-tamano select { width: auto; min-height: var(--control-h-sm); margin: 0; padding: 0 8px; }
@media (max-width: 600px) { .paginacion-cargas { justify-content: center; } .pag-rango { width: 100%; text-align: center; } }

/* Capas: los mapas encierran sus capas (Leaflet usa z-index 400-1000 por dentro) y no pasan por encima de la cabecera
   ni de su menú al hacer scroll; el cajón de la torre de control se queda dentro de su mapa */
.leaflet-container, .tc-mapa-cont { isolation: isolate; }
/* P3-7 (04/11): la atribución de los mapas, legible (#0078a8 de Leaflet daba 3,6:1); el fondo es claro en los dos temas */
.leaflet-control-attribution a { color: var(--marca-carbon); text-decoration: underline; }

/* Login del Manager: centrado, con el logotipo de la cabecera */
.login-manager-marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); margin-bottom: var(--e-6); }
.login-manager-marca img { height: 30px; width: auto; }
.login-manager-marca h1 { margin: 0; font-size: var(--t-xl); text-wrap: balance; }
.login-manager-marca p { margin: 0; color: var(--texto-2); font-size: var(--t-sm); }

/* ===================================================================================================
   Composición (18/10): menos cajas. Primitivas del sistema y su primera aplicación, Portti Copilot.
   · .seccion    → bloque integrado en la página: título, entradilla y filete arriba; sin fondo ni borde.
   · .filas/.fila → pares etiqueta-cifra en filas con filete (sustituyen a las cajitas grises).
   · .destacada  → la decisión de la pantalla (una por pantalla): superficie, filete y acento a la izquierda.
   · tarjeta     → solo para elementos comparables (cargas, rutas, opciones): borde fino, sin sombra.
   =================================================================================================== */
:root { --acento-ancho: 3px; --espacio-seccion: var(--e-6); }
.seccion { padding: var(--espacio-seccion) 0; border-top: 1px solid var(--separador); background: none; }
.seccion:first-child { border-top: 0; padding-top: 0; }
main.container > section.seccion { border-top: 0; padding-top: 0; } /* Manager: cada sección es una página, sin filete arriba */
.filas { display: flex; flex-direction: column; }
.fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); padding: var(--e-2) 0; border-bottom: 1px solid var(--separador); }
.fila:last-child { border-bottom: 0; }
.fila .num { text-align: right; font-variant-numeric: tabular-nums; }
.destacada { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  box-shadow: inset var(--acento-ancho) 0 0 var(--marca-carbon); padding: var(--e-5) var(--e-6); }

/* --- Portti Copilot: los bloques son secciones de la página, no tarjetas apiladas --- */
#panel-rutas .panel:not(.cr-mapa-panel):not(.detalle-popup):not(#cp-recomendacion) {
  background: none; border: 0; border-top: 1px solid var(--separador); border-radius: 0; box-shadow: none;
  padding: var(--espacio-seccion) 0; margin: 0;
}
#panel-rutas .cp-pestanas + .panel, #panel-rutas .cp-explica + .panel { border-top: 0; padding-top: var(--e-3); }
/* La recomendación es la decisión de la pantalla: la única superficie destacada */
#panel-rutas #cp-recomendacion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  box-shadow: inset var(--acento-ancho) 0 0 var(--marca-carbon); padding: var(--e-5) var(--e-6); margin: var(--e-3) 0 var(--e-6); }
#panel-rutas #cp-recomendacion .cp-rec-item { border: 0; border-radius: 0; box-shadow: none; background: none; padding: var(--e-2) 0 var(--e-3);
  border-bottom: 1px solid var(--separador); }
#panel-rutas #cp-recomendacion .cp-rec-item:last-child { border-bottom: 0; }
/* Explicación de cada pestaña: una sola forma (texto con filete amarillo), sin fondo azul */
#panel-rutas .cp-explica { background: none; border: 0; border-left: var(--acento-ancho) solid var(--marca-amarillo); border-radius: 0;
  padding: 2px 0 2px var(--e-3); color: var(--texto-2); }
/* Banda de cifras: una sola línea entre casillas, sin doble filete */
#panel-rutas div.cp-estado { background: none !important; border: 0; border-radius: 0; gap: 0; border-top: 1px solid var(--separador); border-bottom: 1px solid var(--separador); }
#panel-rutas div.cp-estado > * { box-shadow: none !important; background: none; border: 0; border-left: 1px solid var(--separador); border-radius: 0; padding: var(--e-3) var(--e-4); }
#panel-rutas div.cp-estado > *:first-child { border-left: 0; padding-left: 0; }
/* Cajitas grises interiores (límites, estado del bot, objetivos): filas sin fondo */
#panel-rutas .cp-limite-bloque, #panel-rutas .cp-bot-estado, #panel-rutas .cp-objetivo { background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--separador); padding: var(--e-3) 0; }
/* Destinos: opciones comparables (tarjetas), con la elegida marcada sin pesar tanto */
#panel-rutas .cp-destino { border-width: 1px; border-radius: var(--r-sm); background: var(--superficie); }
#panel-rutas .cp-destino.activo { background: var(--superficie); border-color: var(--marca-carbon);
  box-shadow: inset 0 0 0 1px var(--marca-carbon), inset var(--acento-ancho) 0 0 var(--marca-amarillo); }
@media (max-width: 640px) {
  #panel-rutas div.cp-estado > * { border-left: 0; border-top: 1px solid var(--separador); padding-left: 0; }
  #panel-rutas div.cp-estado > *:nth-child(-n+2) { border-top: 0; }
}

/* Publicar: espacio en el camión (huecos de suelo, metros lineales y apilado) */
.ocupacion { display: flex; flex-direction: column; gap: 4px; margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-left: var(--acento-ancho) solid var(--marca-carbon);
  background: var(--superficie-2); font-size: var(--t-sm); }
.ocupacion.aviso { border-left-color: var(--error); }
.ocupacion span { color: var(--texto); }
.ocupacion small { color: var(--texto-2); font-size: var(--t-xs); }
input.campo-fijado { background: var(--superficie-2); color: var(--texto); cursor: default; }

/* Publicar: dónde es cada punto (otra dirección, mi centro o agenda) y su ficha detallada */
.pp-lugar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.pp-lugar button { margin: 0; width: auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--r-full); background: var(--superficie);
  color: var(--texto); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.pp-lugar button.activo { border-color: var(--marca-carbon); background: var(--marca-carbon); color: var(--blanco); }
.pp-otra .row-meta { margin: 4px 0; }
.pp-mas { margin-top: var(--e-3); border-top: 1px solid var(--separador); padding-top: var(--e-2); }
.pp-mas summary { cursor: pointer; font-weight: 700; font-size: var(--t-sm); }
.pp-medios { border: 0; padding: 0; margin: var(--e-2) 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pp-medios legend { font-weight: 700; font-size: var(--t-sm); margin-bottom: 4px; padding: 0; }
.pp-medios label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.ficha-punto { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 6px 0 0; font-size: var(--t-sm); }
.ficha-punto dt { color: var(--texto-2); }
.ficha-punto dd { margin: 0; overflow-wrap: anywhere; }

/* Seguimiento del cargador: más filtros */
.sg-mas { margin-top: 8px; }
.sg-mas summary { cursor: pointer; font-weight: 700; font-size: var(--t-sm); }
.sg-mas-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.sg-mas-campos label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: var(--t-xs); color: var(--texto-2); font-weight: 700; }
.sg-mas-campos select, .sg-mas-campos input { margin: 0; min-height: 36px; font-weight: 400; }
.sg-mas-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- Estado del pago: etiqueta con punto, color por estado (Manager y app) ---------- */
.estado-pago { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-full); border: 1px solid transparent;
  font-family: var(--fuente); font-size: var(--t-xs); font-weight: var(--peso-fuerte); line-height: 1.4; white-space: nowrap; letter-spacing: .01em; }
.estado-pago::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.estado-pago.ep-pendiente { background: var(--aviso-fondo); color: var(--aviso); border-color: var(--aviso-borde); }
.estado-pago.ep-revision, .estado-pago.ep-programado { background: var(--info-fondo); color: var(--info); border-color: var(--info-borde); }
.estado-pago.ep-programado::before { background: transparent; border: 2px solid currentColor; width: 5px; height: 5px; }
.estado-pago.ep-abonado { background: var(--ok-fondo); color: var(--ok); border-color: var(--ok-borde); }
.estado-pago.ep-incidencia, .estado-pago.ep-rechazado { background: var(--error-fondo); color: var(--error); border-color: var(--error-borde); }
.estado-pago.ep-otro { background: var(--superficie-2); color: var(--texto-2); border-color: var(--borde); }
.estado-pago-fecha { display: block; margin-top: 3px; font-size: var(--t-2xs); color: var(--texto-2); }

/* ---------- Economía del cargador: ahorro y tarifa de Portti, cada uno con su peso ---------- */
.eco-celda-ahorro, .eco-celda-tarifa { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.eco-ahorro { color: var(--ok); font-weight: var(--peso-fuerte); font-size: var(--t-md); }
.eco-tarifa { color: var(--texto); font-weight: var(--peso-fuerte); font-size: var(--t-md); padding: 1px 8px; border-radius: var(--r-sm); background: var(--superficie-2); }
.eco-tarifa-cero { color: var(--texto-2); }
.eco-sub { font-family: var(--fuente); font-size: var(--t-2xs); color: var(--texto-2); line-height: 1.35; text-align: right; white-space: normal; }
@media (max-width: 899px) { .eco-celda-ahorro, .eco-celda-tarifa { align-items: flex-start; } .eco-sub { text-align: left; max-width: none; } }

/* ---------- Ayuda «?» (Manager y app): js/ayuda-q.js ---------- */
.ayuda-q, button.ayuda-q { display: inline-grid; flex: none; box-shadow: none; text-transform: none; letter-spacing: 0; line-height: 1; place-items: center; width: 20px; height: 20px; min-width: 0; min-height: 0; margin: 0 0 0 4px; padding: 0; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2);
  font: 700 var(--t-2xs)/1 var(--fuente); cursor: pointer; }
.ayuda-q:hover, button.ayuda-q:hover, .ayuda-q[aria-expanded="true"] { background: var(--marca-carbon); color: var(--blanco); border-color: var(--marca-carbon); }
.ayuda-q:focus-visible { outline: none; box-shadow: var(--foco); }
/* P2-8 (04/11): el círculo se ve de 20 px, pero se pulsa en 24 × 24 (WCAG 2.5.8) */
.ayuda-q, button.ayuda-q { position: relative; }
.ayuda-q::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.ayuda-nota { position: absolute; max-width: min(340px, calc(100vw - 32px)); text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; z-index: var(--z-toast); background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: var(--r-md); box-shadow: var(--sombra-3); padding: 12px 14px; font-size: var(--t-sm); line-height: 1.45; }
.ayuda-nota strong { display: block; margin-bottom: 4px; font-size: var(--t-base); }
.ayuda-nota p { margin: 0 0 6px; } .ayuda-nota p:last-child { margin-bottom: 0; }
.ayuda-ej, .ayuda-rec { color: var(--texto-2); }

/* ---------- Selector de fotos (cámara o galería) ---------- */
.sel-fotos { display: grid; gap: 8px; margin: 4px 0 6px; }
.sf-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-btn { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; min-height: var(--control-h-sm); padding: 0 14px; font-weight: var(--peso-fuerte); }
.sf-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-btn:focus-within { box-shadow: var(--foco); }
.sf-miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-miniaturas:empty { display: none; }
.sf-mini { position: relative; margin: 0; width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--borde); }
.sf-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-quitar { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--negro) 65%, transparent); color: var(--blanco); font-size: var(--t-md); line-height: 1; cursor: pointer; }
.sf-nota { margin: 0; font-size: var(--t-xs); color: var(--texto-2); }
.sf-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sf-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); display: block; }

/* ---------- PORTTI Trust: indicadores separados ---------- */
.trust-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }
.trust-ind { display: flex; flex-direction: column; gap: 4px; padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.trust-tit { font-size: var(--t-2xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); }
.trust-ind b.num { font-size: var(--t-lg); }
.trust-insuf { font-size: var(--t-sm); color: var(--texto-2); font-weight: var(--peso-fuerte); }
.trust-ind .efectividad-bar-bg { height: 8px; margin-top: 2px; }

/* ---------- Copilot para flotas y destino rápido ---------- */
.cp-camion { display: grid; gap: 8px; margin: 0 0 var(--e-3); }
.cp-camion-tit { font-size: var(--t-2xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); }
.cp-camion-lista { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.cp-camion-chip { display: flex; align-items: flex-start; gap: 10px; min-height: 0; min-width: 168px; margin: 0; padding: 10px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto); font: var(--peso-fuerte) var(--t-sm) var(--fuente); cursor: pointer; text-align: left; scroll-snap-align: start; flex: none; }
.cp-camion-chip:hover { border-color: var(--marca-carbon); }
.cp-camion-ico { width: 26px; height: 26px; flex: none; color: var(--texto-2); margin-top: 2px; }
.cp-camion-txt { display: grid; gap: 2px; min-width: 0; }
.cp-camion-txt b { font-size: var(--t-md); letter-spacing: .02em; }
.cp-camion-chip small { font-weight: 400; color: var(--texto-2); }
.cp-camion-estado { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-2xs); font-weight: var(--peso-fuerte); color: var(--texto-2); }
.cp-camion-chip.activo { background: var(--marca-carbon); color: var(--blanco); border-color: var(--marca-carbon); box-shadow: 0 2px 8px color-mix(in srgb, var(--negro) 15%, transparent); }
.cp-camion-chip.activo small, .cp-camion-chip.activo .cp-camion-estado, .cp-camion-chip.activo .cp-camion-ico { color: var(--sobre-carbon-2); }
.cp-a-quien { margin-left: 6px; padding: 1px 8px; border-radius: var(--r-full); background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-2xs); font-weight: var(--peso-fuerte); text-transform: none; letter-spacing: 0; }
.cp-punto { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--texto-3); }
.cp-punto.ep-revision { background: var(--info); } .cp-punto.ep-pendiente { background: var(--aviso); } .cp-punto.ep-abonado { background: var(--ok); } .cp-punto.ep-incidencia { background: var(--error); }
.cp-flota-resumen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: var(--e-3); }
.cp-flota-cuenta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--texto-2); }
.cp-flota-cuenta b { color: var(--texto); }
.cp-flota-lista { display: grid; gap: 0; margin-bottom: var(--e-3); border-top: 1px solid var(--separador); }
.cp-flota-fila { display: grid; grid-template-columns: minmax(170px, 1.2fr) auto minmax(0, 2fr) auto; gap: 10px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--separador); }
.cp-flota-camion { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cp-flota-camion > div { display: flex; flex-direction: column; min-width: 0; }
.cp-flota-que { min-width: 0; }
.cp-falta { color: var(--error); }
.cp-flota-acc { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .cp-flota-fila { grid-template-columns: 1fr auto; } .cp-flota-que, .cp-flota-acc { grid-column: 1 / -1; justify-content: flex-start; } }
.cp-viaje-rapido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 var(--e-3); }
.cp-viaje-rapido:empty { display: none; }
.cp-vr-tit { font-family: var(--fuente); font-weight: var(--peso-fuerte); font-size: var(--t-sm); }
.cp-vr-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-vr-op { display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 0; padding: 7px 12px; border-radius: var(--r-md); border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: var(--peso-fuerte) var(--t-sm) var(--fuente); cursor: pointer; }
.cp-vr-op small { font-weight: 400; color: var(--texto-2); }
.cp-vr-op .ico { width: 16px; height: 16px; }
.cp-vr-op.activo { border-color: var(--marca-carbon); box-shadow: inset 0 0 0 1px var(--marca-carbon); background: var(--marca-amarillo-suave); }

/* ---------- Documentos del transporte y avisos de Guardian ---------- */
.doc-grupo { margin: 14px 0 6px; font-size: var(--t-2xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); }
.doc-principal { border-left: 3px solid var(--marca-amarillo); padding-left: 10px; }
.guardian-aviso { margin: 8px 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); font-size: var(--t-sm); }
.guardian-aviso.alta { background: var(--error-fondo); border-color: var(--error-borde); }
.guardian-conf { font-size: var(--t-2xs); color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.guardian-rec { margin-top: 4px; font-weight: var(--peso-fuerte); }

/* ---------- Publicar: mercancía reconocida, obligatorios y seguro ---------- */
.req { color: var(--error); font-weight: var(--peso-fuerte); }
.mercancia-sugerida:empty { display: none; }
.ms-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; margin: 6px 0 10px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--ok-fondo); border: 1px solid var(--ok-borde); font-size: var(--t-sm); }
.ms-tarjeta > svg { width: 22px; height: 22px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.ms-tarjeta > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-chips span { padding: 2px 8px; border-radius: var(--r-full); background: var(--superficie); border: 1px solid var(--borde); font-size: var(--t-xs); }
.ms-hecho { color: var(--ok); font-weight: var(--peso-fuerte); }
.ms-fuente { font-size: var(--t-2xs); color: var(--texto-2); }
.ms-nada { margin: 6px 0 10px; font-size: var(--t-sm); color: var(--texto-2); }
@media (max-width: 600px) { .ms-tarjeta { grid-template-columns: auto minmax(0, 1fr); } .ms-tarjeta > button { grid-column: 1 / -1; } }
.pub-seguro .pub-bloque-cab p { max-width: 70ch; }

/* ---------- Mi jornada (tira) ---------- */
.tira-jornada:empty { display: none; }
.tira-jornada { margin: 0 0 var(--e-3); }
.tj-boton { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; min-height: 0; margin: 0; padding: 10px 14px; text-align: left;
  border: 1px solid var(--info-borde); border-left: 4px solid var(--info); border-radius: var(--r-md); background: var(--info-fondo); color: var(--texto); cursor: pointer; font-family: var(--fuente); }
.tj-boton b { font-size: var(--t-md); }
.tj-boton span { font-size: var(--t-sm); color: var(--texto-2); }
.tj-boton.tj-medio { border-color: var(--aviso-borde); border-left-color: var(--aviso); background: var(--aviso-fondo); }
.tj-boton.tj-poco { border-color: var(--error-borde); border-left-color: var(--error); background: var(--error-fondo); }

/* ---------- Publicar: grupaje destacado ---------- */
.pub-grupaje { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: center; margin: var(--e-3) 0; padding: 16px 18px; cursor: pointer;
  border: 1.5px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); transition: border-color .15s, background .15s; }
.pub-grupaje:hover { border-color: var(--marca-carbon); }
.pub-grupaje input { margin: 0; width: 20px; height: 20px; accent-color: var(--ok); }
.pub-grupaje.activo { border-color: var(--ok); background: var(--ok-fondo); }
.pg-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--marca-amarillo); }
.pg-ico svg { width: 34px; height: 34px; fill: none; stroke: var(--carbon-900); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg-ico .pg-c1 { fill: var(--carbon-900); stroke: none; } .pg-ico .pg-c2 { fill: var(--blanco); }
.pub-grupaje.activo .pg-ico { background: var(--ok); } .pub-grupaje.activo .pg-ico svg { stroke: var(--blanco); } .pub-grupaje.activo .pg-ico .pg-c1 { fill: var(--blanco); } .pub-grupaje.activo .pg-ico .pg-c2 { fill: var(--ok); }
.pg-texto { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--texto-2); }
.pg-texto b { font-size: var(--t-md); color: var(--texto); }
.pg-letra { font-size: var(--t-2xs); color: var(--texto-2); }
.pg-dato { font-size: var(--t-xs); color: var(--texto-2); }
/* Etiqueta para el transportista: carga exclusiva (va sola) */
.sub-tag.exclusiva, .det-etiqueta.exclusiva { background: var(--marca-carbon); border-color: var(--marca-carbon); color: var(--marca-amarillo); font-weight: 700; }
/* Exclusiva o de emergencia: misma pieza, acento de alerta (no de ahorro) */
.pub-grupaje + .pub-exclusiva { margin-top: calc(-1 * var(--e-2)); }
.pub-exclusiva input { accent-color: var(--marca-carbon); }
.pub-exclusiva.activo { border-color: var(--marca-carbon); background: var(--superficie-2); box-shadow: inset 4px 0 0 var(--marca-amarillo); }
.pub-exclusiva.activo .pg-ico { background: var(--marca-carbon); } .pub-exclusiva.activo .pg-ico svg { stroke: var(--blanco); } .pub-exclusiva.activo .pg-ico .pg-c1 { fill: var(--marca-amarillo); }
.pg-importe { font-size: var(--t-sm); color: var(--texto); }
.pg-importe b { font-variant-numeric: tabular-nums; }
.pub-grupaje:has(input:disabled) { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .pub-grupaje { transition: none; } }
.pg-dato:empty { display: none; }

/* ---------- Paperless: qué hace falta en cada transporte ---------- */
.req-lista { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.req-lista li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--t-sm); }
.req-lista li > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.req-ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs); background: var(--superficie-2); color: var(--texto-2); }
.req-hecho .req-ico { background: var(--ok-fondo); color: var(--ok); }
.req-falta .req-ico { background: var(--error-fondo); color: var(--error); }
.req-revisar .req-ico { background: var(--aviso-fondo); color: var(--aviso); }

/* ---------- R-80: rentabilidad en vivo al pujar ---------- */
.pj-rent { --c: var(--ok); border: 1.5px solid var(--borde); border-left: 5px solid var(--c); border-radius: var(--r-md); padding: 10px 12px; background: var(--superficie); text-align: left; }
.pj-rent.ambar { --c: var(--aviso); } .pj-rent.rojo { --c: var(--error); }
.pj-rent-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.pj-rent-cifras > div { display: grid; gap: 1px; min-width: 0; }
.pj-rent-cifras span { font-size: var(--t-2xs); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: var(--espaciado-versalitas); color: var(--texto-2); }
.pj-rent-cifras b { font-family: var(--fuente); font-variant-numeric: tabular-nums; font-size: var(--t-lg); color: var(--texto); }
.pj-rent-queda b { color: var(--c); font-size: var(--t-h1); }
.pj-rent-cifras small { font-size: var(--t-2xs); color: var(--texto-2); }
.pj-rent-barra { height: 8px; border-radius: var(--r-full); background: var(--superficie-2); margin: 10px 0 6px; overflow: hidden; }
.pj-rent-barra i { display: block; height: 100%; background: var(--c); border-radius: inherit; transition: width .2s; }
.pj-rent-pie { font-size: var(--t-sm); color: var(--texto-2); }
.pj-rent-avisos { margin-top: 6px; font-size: var(--t-sm); }
@media (max-width: 560px) { .pj-rent-cifras { grid-template-columns: 1fr 1fr; } .pj-rent-queda { grid-column: 1 / -1; order: -1; } }
@media (prefers-reduced-motion: reduce) { .pj-rent-barra i { transition: none; } }


/* ---------- R-73: ruta del Copilot en grande ---------- */
.rg-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rg-cab h3 { margin: 0; }
.rg-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin: 8px 0 4px; }
.rg-mapa { height: 320px; border-radius: var(--r-md); border: 1px solid var(--borde); background: var(--superficie-2); }
.rg-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.rg-cifras > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--superficie-2); }
.rg-cifras span { font-size: var(--t-2xs); font-weight: var(--peso-fuerte); color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-versalitas); }
.rg-cifras b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.rg-cargas { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rg-cargas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--separador); border-radius: var(--r-sm); }
.rg-cargas .row-meta { grid-column: 1; }
.rg-margen { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: var(--peso-fuerte); color: var(--ok); font-variant-numeric: tabular-nums; }
.rg-margen.neg { color: var(--error); }
.rg-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--t-sm); }
.rg-lista li.si { color: var(--ok); } .rg-lista li.no { color: var(--error); }
.cp-ver-grande { margin: 8px 0; }
@media (max-width: 700px) { .rg-grid { grid-template-columns: 1fr; } .rg-mapa { height: 240px; } }

/* Burbuja del asistente (isotipo de Portti Copilot) dentro de un formulario */
.copilot-burbuja { display: flex; gap: 10px; align-items: flex-start; margin: -4px 0 var(--e-3); padding: 10px 12px; border-radius: var(--r-md); background: var(--superficie-2); font-size: var(--t-sm); color: var(--texto); }
.copilot-burbuja-iso { flex: none; width: 28px; height: 28px; }
.copilot-burbuja-iso svg { width: 100%; height: 100%; }

/* Cifras: fuente de la marca con números tabulares en toda la app y el Manager (los importes se alinean sin
   que la coma ocupe un carácter entero) */
body { font-variant-numeric: tabular-nums; }

/* ---------- R-65: cambio de modalidad visible y mínimo plegado con Aceptar ya ---------- */
.pub-cambio { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; padding: 10px 12px; border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-md); cursor: pointer; font-weight: 400; }
.pub-cambio input { width: 18px; height: 18px; margin: 2px 0 0; min-height: 0; flex: none; accent-color: var(--ok); }
.pub-cambio span { display: grid; gap: 2px; font-size: var(--t-sm); }
.pub-cambio small { color: var(--texto-2); font-size: var(--t-xs); }
.pub-cambio.activa { border-style: solid; border-color: var(--ok); background: var(--ok-fondo); }
.pub-minimo { margin: 12px 0 0; }
.pub-minimo > summary { cursor: pointer; font-weight: var(--peso-fuerte); font-size: var(--t-sm); color: var(--texto); padding: 4px 0; }
.pub-minimo:not([open]) > summary { color: var(--texto-2); font-weight: 400; }
.pub-minimo > summary::marker { color: var(--texto-2); }
/* ---------- R-66: «¿Qué es más importante en esta carga?» ---------- */
.pub-prefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pub-pref { display: grid; gap: 4px; align-content: start; text-align: left; margin: 0; min-height: 0; padding: 10px 12px; border: 1.5px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie); color: var(--texto); font: 400 var(--t-sm) var(--fuente); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; }
.pub-pref b { font-size: var(--t-md); }
.pub-pref-efecto { color: var(--texto-2); font-size: var(--t-xs); line-height: 1.4; }
.pub-pref:hover { border-color: var(--marca-carbon); }
.pub-pref.activa { border-color: var(--marca-carbon); box-shadow: inset 0 0 0 1px var(--marca-carbon); background: var(--superficie-2); }
.pub-pref:focus-visible { outline: none; box-shadow: var(--foco); }
@media (max-width: 640px) { .pub-prefs { grid-template-columns: 1fr; } }

/* R-66: equipo necesario con dibujo */
.pub-equipo-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--superficie-2); }
.pub-equipo-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--marca-carbon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pub-equipo-op:has(input:checked) .pub-equipo-ico { background: var(--marca-amarillo); }

/* ---------- R-70: ajustes de un camión del Copilot ---------- */
.cam-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.cam-cab-der { display: grid; justify-items: end; gap: 4px; }
.cam-falta { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--error-fondo); color: var(--error); font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cam-grupo { margin: 12px 0 4px; }
.cam-grupo h4 { margin: 0 0 4px; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--espaciado-versalitas); color: var(--texto-2); }
.cam-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--separador); }
.cam-nombre { font-weight: var(--peso-fuerte); font-size: var(--t-sm); }
.cam-empresa { font-size: var(--t-xs); color: var(--texto-2); }
.cam-valor { display: grid; gap: 4px; }
.cam-valor input, .cam-valor select { margin: 0; }
.cam-valor input:disabled, .cam-valor select:disabled { background: var(--superficie-2); color: var(--texto-2); }
.cam-como { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-xs); font-weight: 400; color: var(--texto-2); cursor: pointer; }
.cam-como input { width: 16px; height: 16px; min-height: 0; margin: 0; }
@media (max-width: 640px) { .cam-fila { grid-template-columns: 1fr; } }

/* ---------- R-62: permisos por puesto ---------- */
.emp-matriz { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.emp-matriz th, .emp-matriz td { padding: 8px 10px; border-bottom: 1px solid var(--separador); text-align: left; vertical-align: middle; }
.emp-matriz th { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--espaciado-versalitas); color: var(--texto-2); }
.emp-matriz tr.emp-seccion th { background: var(--superficie-2); color: var(--texto); padding-top: 12px; font-weight: 700; }
.emp-puestos { margin-top: 18px; }
.emp-puestos-l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.emp-puestos-l li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--separador); border-radius: var(--r-md); }
/* Interruptor propio (ficha transportista-mi-empresa, A-05): la casilla real queda encima, transparente, y recibe el
   foco y el clic; la pista dice sí/no con posición y color, nunca solo con color (el estado lo lee el lector como switch) */
.emp-interruptor { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; min-block-size: 44px; }
.emp-interruptor input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.emp-interruptor-pista { position: relative; flex: none; inline-size: 36px; block-size: 20px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); transition: background-color 150ms ease-out; }
.emp-interruptor-pista::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--texto-2); transition: transform 150ms ease-out; }
.emp-interruptor input:checked + .emp-interruptor-pista { background: var(--texto); border-color: var(--texto); }
.emp-interruptor input:checked + .emp-interruptor-pista::after { background: var(--superficie); transform: translateX(16px); }
.emp-interruptor input:checked + .emp-interruptor-pista:dir(rtl)::after { transform: translateX(-16px); }
.emp-interruptor input:focus-visible + .emp-interruptor-pista { box-shadow: var(--foco); }
.emp-interruptor input:disabled + .emp-interruptor-pista { opacity: .5; }
.emp-interruptor small { font-weight: 400; font-size: var(--t-xs); color: var(--texto-2); }
@media (prefers-reduced-motion: reduce) { .emp-interruptor-pista, .emp-interruptor-pista::after { transition: none; } }
.emp-matriz td.emp-fijo .ico { color: var(--texto); }
.emp-matriz-puesto { display: none; }
@media (max-width: 640px) {
  .emp-matriz-puesto { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--e-3); }
  .emp-matriz-puesto select { margin: 0; }
  .emp-matriz .emp-col-fuera { display: none; }
  .emp-matriz thead { display: none; }
  .emp-matriz td:last-child, .emp-matriz td[data-col]:not(.emp-col-fuera) { text-align: end; inline-size: 64px; }
}

/* Mi empresa: el equipo en filas de lista, sin avatares; el puesto en un botón con su menú y «⋯» para lo demás */
.emp-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; padding: 0 0 var(--e-4); border-block-end: 0; }
.emp-cabecera p { margin: 0; }
.emp-nombre-empresa { font-size: var(--t-lg); }
.emp-cabecera .action { margin: 0; }
.emp-bloque > h3 { display: block; }
.emp-cuenta { display: block; margin-block-start: 2px; font-size: var(--t-sm); font-weight: var(--peso-normal); color: var(--texto-2); }
.emp-personas { border-block-start: 1px solid var(--separador); }
.fila-lista.emp-persona { display: flex; grid-template-columns: none; padding-block: var(--e-3); align-items: flex-start; }
.fila-lista.emp-persona.inactivo .fl-titulo, .fila-lista.emp-persona.inactivo .fl-meta { color: var(--texto-3); }
.fila-lista.emp-persona { opacity: 1; }
.emp-persona .fl-cuerpo { overflow-wrap: anywhere; }
.emp-persona .empresa-ficha { margin-top: 2px; }
.emp-persona-acc { flex: none; display: flex; flex-direction: row; gap: var(--e-1); align-items: center; }
.emp-persona-acc button { margin: 0; }
.emp-rol-btn { display: inline-flex; align-items: center; gap: 4px; }
.emp-rol-btn .ico { transform: rotate(90deg); }
.emp-mas { inline-size: 40px; padding-inline: 0; justify-content: center; display: inline-flex; align-items: center; }
.emp-persona .empresa-rol, .emp-persona .empresa-rol.titular { background: none; padding: 0; border-radius: 0; font-weight: var(--peso-medio); color: var(--texto-2); }
.emp-id { background: none; padding: 0; margin: 0; font-weight: var(--peso-normal); color: var(--texto-2); }
.emp-sufijo { margin: var(--e-2) 0 0; }
@media (max-width: 640px) {
  .fila-lista.emp-persona { flex-wrap: wrap; }
  .emp-persona-acc { inline-size: 100%; justify-content: flex-start; }
  .emp-persona-acc button { min-block-size: 44px; }
  .emp-mas { inline-size: 44px; }
}


/* ---------- R-63: «¿Querías decir…?» y avisos de coherencia ---------- */
.ms-alternativas { margin-top: 6px; font-size: var(--t-sm); color: var(--texto-2); }
.ms-alternativas .btn-link { padding: 0; margin: 0; min-height: 0; font-size: inherit; }
.pub-coherencia:empty { display: none; }
.coh-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.coh-lista li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); font-size: var(--t-sm); }
.coh-lista .coh-aviso { background: var(--aviso-fondo); color: var(--texto); border-left: 3px solid var(--aviso); }
.coh-lista .coh-info { background: var(--superficie-2); color: var(--texto); border-left: 3px solid var(--info); }
.coh-nota { margin: 4px 0 0; font-size: var(--t-2xs); color: var(--texto-2); }

/* R-93: el Bot de Ruta, una zona propia dentro de Ajustes. Cabecera de identidad en carbón con lo que vigila ahora;
   debajo, sus tres pasos como una secuencia numerada sobre una superficie cálida. Solo tokens del sistema */
#panel-rutas #cp-bot-panel { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-md);
  box-shadow: inset var(--acento-ancho) 0 0 var(--marca-amarillo); padding: 0 0 var(--e-3); margin: var(--e-5) 0; overflow: hidden; }
#panel-rutas #cp-bot-panel > h3 { margin: 0; padding: var(--e-4) var(--e-5) var(--e-2); background: var(--carbon-900); color: var(--sobre-carbon); }
#panel-rutas #cp-bot-panel > h3 .ico { color: var(--marca-amarillo); }
#panel-rutas #cp-bot-panel .cp-bot-resumen { background: var(--carbon-900); color: var(--sobre-carbon); padding: 0 var(--e-5) var(--e-4); }
#panel-rutas #cp-bot-panel .cp-bot-estado { border-top: 1px solid color-mix(in srgb, var(--sobre-carbon) 14%, transparent); padding: var(--e-3) 0 0; margin: 0; }
#panel-rutas #cp-bot-panel .cp-bot-estado .row-meta, #panel-rutas #cp-bot-panel .cp-bot-estado .mascota-panel .row-meta { color: var(--sobre-carbon-2); }
#panel-rutas #cp-bot-panel .cp-bot-estado strong, #panel-rutas #cp-bot-panel .cp-bot-estado b { color: var(--marca-amarillo); }
#panel-rutas #cp-bot-panel .cp-bot-estado-txt { font-size: var(--t-base); line-height: 1.5; }
#panel-rutas #cp-bot-panel .cp-bot-paso { position: relative; margin: 0 var(--e-5); padding: var(--e-4) 0 var(--e-4) 40px; border-top: 0; }
#panel-rutas #cp-bot-panel .cp-bot-paso + .cp-bot-paso { border-top: 1px solid var(--separador); }
#panel-rutas #cp-bot-panel .cp-bot-paso::before { content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--borde); }
#panel-rutas #cp-bot-panel .cp-bot-paso:first-of-type::before { top: calc(var(--e-4) + 12px); }
#panel-rutas #cp-bot-panel .cp-bot-paso:last-of-type::before { bottom: calc(100% - var(--e-4) - 12px); }
#panel-rutas #cp-bot-panel .cp-bot-paso h4 { font-size: var(--t-base); }
#panel-rutas #cp-bot-panel .cp-bot-num { position: absolute; left: 0; top: var(--e-4); width: 26px; height: 26px; background: var(--marca-amarillo); color: var(--marca-carbon);
  font-weight: 700; box-shadow: 0 0 0 4px var(--superficie-2); }
@media (max-width: 700px) {
  #panel-rutas #cp-bot-panel > h3, #panel-rutas #cp-bot-panel .cp-bot-resumen { padding-left: var(--e-4); padding-right: var(--e-4); }
  #panel-rutas #cp-bot-panel .cp-bot-paso { margin: 0 var(--e-4); padding-left: 36px; }
}

/* R-92: matriz de permisos con columnas fijas (titular, administrador) y puestos propios */
.emp-matriz th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; }
.emp-matriz .emp-puesto-acc { display: block; margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.emp-matriz .emp-puesto-acc .btn-link { font-size: var(--t-2xs); padding: 0; min-height: 0; }
.emp-matriz td.emp-fijo, .emp-matriz th.emp-fijo { background: var(--superficie-2); text-align: center; }
.emp-matriz td.emp-fijo span { color: var(--ok); font-weight: 700; }
.emp-matriz td.emp-no-aplica { color: var(--texto-3); text-align: center; }
.emp-matriz tr.emp-fila-total td:first-child b { color: var(--marca-carbon); }
.emp-matriz tr.emp-fila-total td { border-bottom: 2px solid var(--borde); }
.emp-nuevo-puesto { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--separador); }
.emp-nuevo-puesto h4 { margin: 0 0 4px; }
.emp-nuevo-puesto-f { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.emp-nuevo-puesto-f label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--t-sm); }
.emp-nuevo-puesto-f input, .emp-nuevo-puesto-f select { margin: 0; min-width: 180px; }

/* Mis cargas por días (HOY, MAÑANA y fechas) */
.mc-dia-grupo { margin-top: var(--e-5); }
.mc-dia-grupo:first-child { margin-top: 0; }
.mc-dia { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin: 0 0 var(--e-3); padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--borde); font-size: var(--t-base); font-weight: var(--peso-normal); }
.mc-dia b { font-size: var(--t-sm); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto); }
.mc-dia.hoy { border-bottom: 2px solid var(--marca-amarillo); }
.mc-dia.hoy b { background: var(--marca-amarillo); color: var(--marca-carbon); padding: 1px var(--e-2); border-radius: var(--r-sm); }
.mc-dia.pasado .mc-dia-fecha, .mc-dia.pasado b { color: var(--texto-2); }
.mc-dia-fecha { color: var(--texto); }
.mc-dia-n { margin-inline-start: auto; color: var(--texto-3); font-size: var(--t-xs); }
.mc-dias-anteriores { margin: var(--e-8) 0 0; color: var(--texto-3); font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; }

/* Mercancías de emergencia (Red de Respaldo): ámbar oscuro discreto */
.nav-tab-emergencias .tab-icono { color: var(--aviso); }
.nav-tab-emergencias.activa { box-shadow: inset 3px 0 0 var(--aviso); }
/* Ficha transportista-emergencias: cabecera en texto (sin banda ni baldosa), oferta como fila de lista con filete
   ámbar de 2 px, plazo de 18 px tabular y el precio con su base junto a «te queda» y a la acción */
.em-cabecera { margin: 0 0 var(--e-4); }
.em-socio, .em-cifras { margin: 0; color: var(--texto-2); font-size: var(--t-sm); }
.em-socio b { color: var(--texto); font-weight: var(--peso-medio); }
.em-bloque { margin: 0 0 var(--e-6); }
.em-h { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.em-regla { margin: 0 0 var(--e-2); }
.em-lista { border-block-start: 1px solid var(--separador); }
.fila-lista.em-oferta { flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-6); padding-block: var(--e-3); }
.fila-lista.em-oferta::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px; background: var(--aviso); }
.em-oferta-cuerpo { flex: 1 1 360px; min-inline-size: 0; display: grid; gap: var(--e-1); }
.em-oferta-cuerpo p, .em-oferta-cuerpo h3 { margin: 0; }
.em-plazo { font-size: var(--t-sm); color: var(--texto-2); }
.em-plazo b { font-size: 18px; font-weight: var(--peso-fuerte); color: var(--aviso); font-variant-numeric: tabular-nums; }
.em-ruta { font-size: var(--t-md); font-weight: var(--peso-fuerte); }
.em-ventanas { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.em-ventanas > span { display: inline-flex; align-items: center; gap: var(--e-1); }
.em-ventanas .ico { flex: none; color: var(--texto-3); }
.em-oferta-pie { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--e-3); }
.em-precio { margin: 0; display: grid; gap: 2px; text-align: end; }
.em-precio-cifra { font-size: var(--t-lg); font-weight: var(--peso-fuerte); }
.em-queda { display: grid; gap: 0; font-size: var(--t-sm); }
.em-queda b { font-weight: var(--peso-fuerte); }
.em-queda small { color: var(--texto-3); font-size: var(--t-xs); max-inline-size: 34ch; justify-self: end; }
.em-queda.es-negativo b { color: var(--error); }
.em-acciones { display: flex; gap: var(--e-2); }
.em-acciones button { margin: 0; }
.em-ver { margin: var(--e-2) 0 0; }
@media (max-width: 640px) {
  .em-oferta-pie { justify-content: stretch; }
  .em-precio { text-align: start; inline-size: 100%; }
  .em-queda small { justify-self: start; }
  .em-acciones { inline-size: 100%; }
  .em-acciones button { flex: 1 1 0; min-block-size: 48px; }
}
.login-respaldo { margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid var(--aviso-borde); border-left: 4px solid var(--aviso); border-radius: var(--r-md); background: var(--aviso-fondo); color: var(--texto); }
.login-respaldo p { margin: 4px 0 0; font-size: var(--t-sm); }

/* Mis cargas: «Pendiente de ti» */
.mc-pendiente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4);
  border: 1px solid var(--marca-amarillo-borde); border-radius: var(--r-lg); background: var(--marca-amarillo-suave); }
.mc-pend-tit { font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto); margin-inline-end: var(--e-2); }
.mc-pend { margin: 0; min-height: 34px; padding: 4px var(--e-3); border-radius: var(--r-full); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font-size: var(--t-sm); cursor: pointer; }
.mc-pend:hover { border-color: var(--texto); }
.mc-pend.activa { background: var(--marca-carbon); border-color: var(--marca-carbon); color: var(--blanco); }
.mc-pend.sin_ofertas { border-color: var(--aviso-borde); color: var(--aviso); }
.mc-pend.sin_ofertas.activa { background: var(--aviso); color: var(--blanco); }
.mc-pendiente[hidden] { display: none; }

/* Dónde repostar: combustible y precio que puede haber cambiado */
.repostaje-comb { display: inline-flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.repostaje-comb select { width: auto; min-height: 34px; }
.repostaje-antiguo { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-start: 4px; border-radius: 50%; background: var(--aviso-fondo); color: var(--aviso); font-size: var(--t-2xs); font-weight: var(--peso-fuerte); vertical-align: 2px; }
.repostaje-hgv { display: inline-block; margin-inline-start: 6px; padding: 0 6px; border-radius: var(--r-full); background: var(--ok-fondo); color: var(--ok); font-size: var(--t-2xs); font-weight: var(--peso-fuerte); }
.repostaje-hgv.no { background: var(--aviso-fondo); color: var(--aviso); }
.repostaje-dato-antiguo { color: var(--aviso); }

/* Repostajes y consumo real */
.rp-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); margin: var(--e-3) 0; }
.rp-resumen > div { padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie-2); }
.rp-resumen span { display: block; font-size: var(--t-xs); color: var(--texto-3); }
.rp-resumen b { display: block; font-size: var(--t-md); }
.rp-resumen small { display: block; color: var(--texto-3); }

/* «Inicio» del cargador (24/10/2026): filas de lo de hoy y agenda de transportistas */
.ini-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--separador); cursor: pointer; }
.ini-fila:last-child { border-bottom: 0; }
.ini-fila:hover { background: var(--superficie-hover); }
.ini-txt { flex: 1; min-width: 180px; }
.ini-hito { font-size: var(--t-2xs); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--r-full); background: var(--info-fondo); color: var(--info); }
.ini-hito.entrega { background: var(--ok-fondo); color: var(--ok); }
.ini-hito.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.ini-estrella { border: 0; background: none; font-size: var(--t-xl); line-height: 1; color: var(--deshabilitado); cursor: pointer; padding: 2px 4px; min-height: 32px; }
.ini-estrella.activa { color: var(--aviso); }

/* Cuadro financiero del transportista (Economía): tabla de cifras alineadas, con aire y filas separadas */
.eco-cuadro-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.eco-cuadro-tabla th { padding: 10px 12px; text-align: start; font-size: var(--t-2xs); font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); border-bottom: 2px solid var(--texto); white-space: nowrap; }
.eco-cuadro-tabla td { padding: 11px 12px; border-bottom: 1px solid var(--separador); white-space: nowrap; }
.eco-cuadro-tabla td:first-child { font-weight: var(--peso-fuerte); }
.eco-cuadro-tabla th.num, .eco-cuadro-tabla td.num { text-align: end; }
.eco-cuadro-tabla tbody tr:hover { background: var(--superficie-hover); }

/* Torre de control: capas propias del mapa, panel plegable y pantalla completa (25/10/2026) */
.tc-capas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); }
.tc-capa { display: inline-flex; align-items: center; gap: 8px; margin: 0; width: auto; min-height: 36px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--borde-control); background: var(--superficie); color: var(--texto); font-weight: var(--peso-fuerte); font-size: var(--t-sm); cursor: pointer; }
.tc-capa b { font-size: var(--t-xs); color: var(--texto-2); }
.tc-capa.activa { background: var(--marca-carbon); color: var(--sobre-carbon); border-color: var(--marca-carbon); }
.tc-capa.activa b { color: var(--marca-amarillo); }
.tc-capa i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 12px; }
.tc-cp-op { background: var(--marca-carbon); box-shadow: 0 0 0 2px var(--marca-amarillo) inset; }
.tc-cp-dem { background: var(--error); border-radius: var(--r-sm) !important; transform: rotate(45deg); }
.tc-cp-of { background: var(--marca-amarillo); border: 1px solid var(--marca-carbon); }
.tc-cp-tr { background: var(--aviso); }
.tc-dem { width: 16px; height: 16px; transform: rotate(45deg); border-radius: var(--r-sm); border: 2px solid var(--superficie); box-shadow: 0 1px 4px color-mix(in srgb, var(--negro) 35%, transparent); }
.tc-dem.sin-cubrir { background: var(--error); }
.tc-dem.sin-pujas { background: var(--aviso-fuerte); }
.tc-dem.con-pujas { background: var(--texto-2); }
.tc-tr { width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--aviso); color: var(--blanco); font: 800 var(--t-sm)/20px var(--fuente); text-align: center; box-shadow: 0 1px 4px color-mix(in srgb, var(--negro) 35%, transparent); }
.tc-tr.corte, .tc-tr.accidente { background: var(--error); }
.tc-demanda-lista { display: flex; flex-direction: column; gap: var(--e-2); border-top: 1px solid var(--separador); padding-top: var(--e-3); overflow-y: auto; }
.tc-demanda-lista h3 { margin: 0; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .05em; }
.tc-fila.dem.sin-cubrir { box-shadow: inset 3px 0 0 var(--error); }
#seccion-mapa.tc-sin-panel .tc { grid-template-columns: minmax(0, 1fr); }
#seccion-mapa.tc-sin-panel .tc-panel { display: none; }
.tc:fullscreen { background: var(--fondo); padding: var(--e-3); grid-template-columns: 320px minmax(0, 1fr); }
.tc:fullscreen .tc-panel { max-height: calc(100vh - 24px); }
.tc:fullscreen .tc-mapa-cont #mapa-global { height: calc(100vh - 24px); }
#seccion-mapa.tc-sin-panel .tc:fullscreen { grid-template-columns: minmax(0, 1fr); }
.panel-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Accesibilidad (fase H, 26/10): la estrella de confianza es un icono con contraste suficiente */
.ini-estrella { color: var(--texto-2); }
.ini-estrella .ico-estrella { width: 20px; height: 20px; stroke-width: 1.8; }
.ini-estrella.activa .ico-estrella { fill: var(--marca-amarillo); stroke: var(--marca-carbon); }
/* Sobre la caja oscura del precio, el estado de la subasta en los colores para carbón (contraste AA) */
.precio-actual-box .cierre-espera { color: var(--marca-amarillo); }
.precio-actual-box .cierre-plazo, .precio-actual-box .cierre-plazo .countdown-live { color: var(--sobre-carbon-2); }
/* Mi jornada, igual en Cargas disponibles y en el Copilot (fase I, 26/10): neutro con filete carbón; color solo si quedan pocas horas */
.tj-boton:not(.tj-medio):not(.tj-poco) { background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--marca-carbon); }
.tj-boton:hover { border-color: var(--marca-carbon); }
/* Copilot: lo ya contratado antes de la ruta va aparte, como nota (no es parte de la economía de la ruta) */
.cp-agenda-previa { margin: var(--e-2) 0 0; padding: 6px 10px; border-left: 3px solid var(--borde-fuerte); font-size: var(--t-sm); color: var(--texto-2); }
/* Mis transportes: tramo sin calcular (misma ciudad, falta la dirección exacta) */
.tr-sin-calcular { color: var(--aviso); font-weight: var(--peso-fuerte); }
/* Mis transportes: tiempo previsto en la parada (MET Norway); un riesgo para el camión se resalta */
.tr-tiempo { display: block; margin-top: 2px; color: var(--texto-2); font-size: var(--t-xs); }
.tr-tiempo.riesgo { color: var(--aviso); font-weight: var(--peso-fuerte); }
.tr-tiempo.riesgo.peligro { color: var(--error); }
.tr-tiempo .ico { width: 13px; height: 13px; vertical-align: -2px; }
/* Copilot: el tiempo en la ruta */
.rg-tiempo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rg-tiempo-lista li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 10px; border-left: 3px solid var(--borde); }
.rg-tiempo-lista li.riesgo { border-left-color: var(--aviso); }
.rg-tiempo-lista li.riesgo.peligro { border-left-color: var(--error); }
.rg-tiempo-lista li.riesgo > span:last-child { color: var(--aviso); font-weight: var(--peso-fuerte); }
.rg-tiempo-lista li.riesgo.peligro > span:last-child { color: var(--error); }
.rg-tiempo-lista .ico { width: 14px; height: 14px; vertical-align: -2px; }
/* Fotos de la firma (daños o falta de mercancía): miniatura con la hora de la foto y la de subida */
.fh-fotos { display: grid; gap: var(--e-1); margin-top: var(--e-2); }
.cp-fotos-firma { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.cp-fotos-firma figure { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-2); align-items: start; }
.cp-fotos-firma img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--borde); background: var(--superficie-2); }
.cp-fotos-firma figcaption { font-size: var(--t-sm); color: var(--texto-2); display: grid; gap: 2px; }
.cp-fotos-firma .aviso { color: var(--aviso); font-weight: var(--peso-fuerte); }
.cp-fotos-firma .aviso .ico { width: 13px; height: 13px; vertical-align: -2px; }
.cp-estado-merc { margin: 4px 0 8px; font-size: var(--t-sm); color: var(--aviso); }
/* Mi empresa del cargador: lo que el puesto no puede hacer no se ofrece (el servidor lo comprueba igualmente) */
body.sin-adjudicar [onclick^="aceptarAhora("], body.sin-adjudicar [onclick^="aceptarAhoraPack"] { display: none !important; }
body.sin-cancelar [onclick^="cancelarCarga("], body.sin-cancelar [onclick^="cancelarPack"] { display: none !important; }
/* Economía y Mi flota con pestañas (28/10/2026) */
.eco-pestanas { margin: 0 0 var(--e-3); }
.vh-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin: 0 0 var(--e-3); }
/* Cuadro financiero: seis cifras en tres columnas (antes cuatro, con dos huecos vacíos) */
.eco-kpis.eco-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .eco-kpis.eco-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eco-nota-sueldos { margin: var(--e-2) 0 0; }
/* Premium: iconos de categoría dibujados para Portti (en vez de emojis) */
.pm-icono { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }
.pm-chip-cat .pm-icono, .pm-socio-cat .pm-icono { width: 16px; height: 16px; margin-right: 2px; }

/* ---------- Portti Legal (transportista) ---------- */
.lg-cab h2 { margin: 0 0 6px; }
.lg-cab p { margin: 0 0 10px; max-width: 70ch; }
.lg-aviso { padding: 8px 12px; border-left: 3px solid var(--marca-amarillo); background: var(--superficie-2); font-size: var(--t-base); }
.lg-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.lg-op { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.lg-op-datos { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.lg-op-datos .row-meta { flex-basis: 100%; }
.lg-op-importe { display: flex; flex-direction: column; align-items: flex-end; }
.lg-exp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); cursor: pointer; }
.lg-exp:hover, .lg-exp:focus-visible { border-color: var(--marca-carbon); }
.lg-num { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 6px; border: 1.5px solid var(--marca-carbon); border-radius: var(--r-sm); font-size: var(--t-sm); }
.lg-exp-datos { display: flex; flex-direction: column; min-width: 0; }
.lg-exp-datos b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-chip { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: var(--peso-fuerte); border: 1px solid var(--borde); white-space: nowrap; vertical-align: middle; }
.lg-chip.aviso { color: var(--aviso); background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.lg-chip.ok { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-borde); }
.lg-chip.apagado { color: var(--ink-soft); }
.lg-form fieldset { border: 1px solid var(--borde); border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 12px; display: grid; gap: 8px; }
.lg-form legend { font-weight: 700; padding: 0 4px; }
.lg-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lg-dos > label, .lg-tres > label { margin: 0; align-self: end; }
.lg-consent { flex-direction: row !important; align-items: flex-start; gap: 8px; font-size: var(--t-sm); }
.lg-consent input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.lg-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; margin: 10px 0; }
.lg-ficha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-ficha span { font-size: var(--t-xs); color: var(--ink-soft); }
.lg-descripcion { white-space: pre-wrap; padding: 10px 12px; border-left: 3px solid var(--borde-fuerte); background: var(--superficie-2); margin: 8px 0; }
.lg-docs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.lg-tiempo { list-style: none; margin: 8px 0 14px; padding: 0 0 0 16px; border-left: 2px solid var(--borde-fuerte); display: grid; gap: 10px; }
.lg-tiempo li { position: relative; }
.lg-tiempo li::before { content: ''; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: var(--r-xs); background: var(--marca-amarillo); border: 1px solid var(--marca-carbon); }
.lg-confirmar { flex: 1 1 100%; font-size: var(--t-base); }
@media (max-width: 560px) {
  .lg-op { grid-template-columns: minmax(0, 1fr); }
  .lg-op-importe { flex-direction: row; align-items: baseline; gap: 6px; }
  .lg-op .btn-mini { grid-column: 1 / -1; }
  .lg-exp { grid-template-columns: auto minmax(0, 1fr); }
  .lg-tres { grid-template-columns: 1fr 1fr; }
}

/* ---------- Portti Academy (dentro de Premium) · ficha transportista-academy ----------
   Buscador y «Filtrar (n)» en una línea (los filtros, en una hoja); tarjetas solo porque los cursos se comparan entre sí:
   planas, sin píldoras, categoría y datos en la meta y el precio junto a su botón. */
.pm-vistas { margin: 0 0 var(--e-3); }
.ac-cabecera h2 { margin: 0 0 var(--e-1); }
.ac-cabecera p { margin: 0 0 var(--e-3); max-inline-size: 70ch; color: var(--texto-2); }
.ac-buscar { display: flex; gap: var(--e-2); align-items: stretch; }
.ac-buscar-campo { position: relative; flex: 1 1 auto; min-inline-size: 0; display: flex; align-items: center; }
.ac-buscar-campo .ico { position: absolute; inset-inline-start: var(--e-3); color: var(--texto-2); pointer-events: none; }
.ac-buscar-campo input { inline-size: 100%; margin: 0; padding-inline-start: calc(var(--e-3) + var(--e-6)); }
.ac-buscar > .btn-ghost { flex: none; display: inline-flex; align-items: center; gap: var(--e-2); margin: 0; min-block-size: var(--control-h); }
.ac-puestos { margin-block-start: var(--e-3); }
.ac-filtros-hoja { display: grid; gap: var(--e-5); }
.ac-filtro-grupo h3 { margin: 0 0 var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto-2); }
.ac-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e-3); margin: 0 0 var(--e-3); }
.ac-curso { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); border: 1px solid var(--separador); border-radius: var(--r-md); background: var(--superficie); min-inline-size: 0; }
.ac-curso h3 { margin: 0; font-size: var(--t-lg); line-height: var(--il-compacto); }
.ac-curso p { margin: 0; }
.ac-meta { font-size: var(--t-sm); color: var(--texto-2); }
.ac-desc { font-size: var(--t-base); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ac-oficial-nota { padding: var(--e-2) var(--e-3); border: 1px solid var(--ok-borde); border-radius: var(--r-sm); background: var(--ok-fondo); color: var(--ok); font-size: var(--t-base); }
.ac-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-2); margin-block-start: auto; padding-block-start: var(--e-3); border-block-start: 1px solid var(--separador); }
.ac-pie > .btn-ghost { flex: none; margin: 0; }
.ac-precios { display: flex; flex-direction: column; gap: var(--e-0-5); min-inline-size: 0; }
.ac-precio, .pk-precio { display: inline-flex; gap: var(--e-1); align-items: baseline; flex-wrap: wrap; }
.ac-premium { font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--texto); }
.ac-mios { margin: var(--e-2) 0; }
@media (max-width: 640px) {
  .ac-rejilla { grid-template-columns: minmax(0, 1fr); }
  .ac-buscar-campo input { font-size: var(--t-md); }
}

/* ---------- Portti Secure Parking (dentro de Premium) · ficha transportista-aparcamientos ----------
   Búsqueda en una fila en PC (dos en el móvil), fecha propia dd/mm/aaaa + hh:mm, resultados y reservas en .fila-lista. */
.filtros-parking { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1.4fr) auto auto; gap: var(--e-3); align-items: end; }
.filtros-parking label { display: flex; flex-direction: column; gap: var(--e-1); min-inline-size: 0; font-size: var(--t-sm); }
.filtros-parking label input, .filtros-parking select { margin: 0; }
.filtros-parking > .primary { margin: 0; min-block-size: var(--control-h); }
.pk-fecha { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.pk-fecha legend { padding: 0; margin-block-end: var(--e-1); font-size: var(--t-sm); font-weight: var(--peso-fuerte); }
.pk-fecha-campos { display: grid; grid-template-columns: minmax(0, 1fr) calc(5ch + var(--e-6)); gap: var(--e-1); }
.pk-fecha-campos input { margin: 0; min-inline-size: 0; font-variant-numeric: tabular-nums; }
.pk-requisitos { flex-wrap: nowrap; align-self: end; }
.pk-requisitos .chip { min-block-size: var(--control-h); }
#pk-fecha-ayuda { margin: var(--e-2) 0 0; }
.pk-resultados h3 { margin: 0 0 var(--e-2); }
.pk-resultados h3:focus { outline: none; }
.pk-fila .fl-cuerpo { gap: var(--e-1); }
.pk-fila .fl-lado, .pk-mias .fl-lado { text-align: end; }
.pk-fila .fl-lado .btn-mini, .pk-mias .fl-lado .btn-mini { margin: 0; }
.pk-estado { display: block; }
.fl-cifra .pk-base { display: block; }
@media (max-width: 900px) {
  .filtros-parking { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filtros-parking .pk-donde { grid-column: 1 / -1; }
  .pk-requisitos { align-self: center; }
}
@media (max-width: 640px) {
  .filtros-parking input, .filtros-parking select { font-size: var(--t-md); }
  .filtros-parking > .primary, .filtros-parking .pk-fecha { grid-column: 1 / -1; }
  .filtros-parking .pk-fecha { order: 2; }
  .filtros-parking > .primary { order: 3; }
  .pk-fila, .pk-mias .fila-lista { flex-direction: column; align-items: stretch; }
  .pk-fila .fl-lado, .pk-mias .fl-lado { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: start; }
}

/* ---------- Portti Legal: presupuestos de despachos (cliente) ---------- */
.lg-presupuesto { border: 1px solid var(--borde); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 10px; background: var(--superficie); }
.lg-presupuesto.aceptado { border-color: var(--ok-borde); }
.lg-presupuesto.descartado, .lg-presupuesto.rechazado { opacity: .7; }
.lg-p-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-bottom: 8px; }
.lg-p-cab .lg-chip { margin-left: auto; }
.lg-p-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.lg-p-tabla td { padding: 4px 0; border-bottom: 1px solid var(--borde); }
.lg-p-total td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--marca-carbon); }
.lg-p-fila span { font-size: var(--t-xs); color: var(--ink-soft); }
.lg-p-fila p { margin: 2px 0 8px; white-space: pre-wrap; }
.lg-p-acciones { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde-fuerte); }
.lg-mensaje { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 10px 0; }
.lg-mensaje label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }

/* Publicar: horarios que aplica Portti y medidas dudosas */
.pv-aplicar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0; padding: 8px 10px; border: 1px dashed var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); }
.pv-aplicar ul { margin: 0; padding-left: 18px; flex: 1 1 260px; font-size: var(--t-base); }
.pv-aplicado { color: var(--ok); font-weight: var(--peso-fuerte); margin: 6px 0; }
.vol-dudas { display: flex; flex-wrap: wrap; gap: 6px; }
.vol-suelo { display: block; margin-top: 2px; }
/* Medida dudosa o imposible: el aviso ocupa toda la fila (debajo del volumen) y los botones van bajo el texto */
.vol-asistente:has(.vol-duda) { grid-template-columns: 1fr; }
.vol-duda { flex-wrap: wrap; align-items: flex-start; background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); }
.vol-duda > div:not(.vol-dudas) { flex: 1 1 260px; font-size: var(--t-base); }
.vol-duda > div > span { font-size: var(--t-sm); color: var(--texto); }
.vol-duda .vol-dudas { flex-basis: 100%; padding-left: 34px; }
.vol-propuesta.vol-duda > .vol-dudas { flex-direction: row; flex-wrap: wrap; gap: 8px; } .vol-duda .vol-dudas button { width: auto; margin: 0; }

/* ---------- Publicar: pasos numerados, resumen fijo y medir el ahorro ---------- */
.pub-paso { display: flex; align-items: center; gap: 10px; margin: var(--e-5) 0 var(--e-3); font-size: var(--t-lg); scroll-margin-top: 90px; }
.pub-bloque-cab .pub-paso { margin-top: 0; }
.pub-paso-n { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--r-sm); background: var(--marca-carbon); color: var(--marca-amarillo); font-size: var(--t-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-candado { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; }
.pub-resumen { position: sticky; top: 88px; padding: 16px 18px; border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); }
.pub-resumen h3 { margin: 0 0 10px; font-size: var(--t-lg); }
.rp-pasos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.rp-pasos a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-md); color: inherit; text-decoration: none; }
.rp-pasos a:hover, .rp-pasos a:focus-visible { background: var(--superficie-2); }
.rp-n { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; border: 1.5px solid var(--borde-fuerte); font-size: var(--t-xs); font-weight: 700; }
.rp-pasos .hecho .rp-n { background: var(--ok); border-color: var(--ok); color: var(--blanco); }
.rp-pasos .pendiente .rp-n { border-color: var(--marca-carbon); }
.rp-txt { display: flex; flex-direction: column; min-width: 0; }
.rp-txt small { color: var(--ink-soft); font-size: var(--t-xs); }
.rp-pasos .pendiente small { color: var(--aviso); font-weight: var(--peso-fuerte); }
.rp-datos { margin: 0; padding-top: 10px; border-top: 1px dashed var(--borde-fuerte); display: grid; gap: 8px; }
.rp-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: var(--t-sm); }
.rp-fila dt { color: var(--ink-soft); }
.rp-fila dd { margin: 0; font-weight: var(--peso-fuerte); overflow-wrap: anywhere; }
.rp-fila dd.vacio { font-weight: 400; color: var(--ink-soft); font-style: italic; }
.rp-nota { margin: 12px 0 0; font-size: var(--t-sm); }
.pub-ahorro { margin: 10px 0; padding: 8px 12px; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.pub-ahorro summary { cursor: pointer; font-weight: var(--peso-fuerte); }
.pub-ahorro[open] summary { margin-bottom: 8px; }
.bulto-tipo svg .d2 { fill: var(--marca-amarillo); stroke: none; opacity: .9; }
.bulto-tipo.activo svg .d2 { fill: var(--marca-amarillo); opacity: .35; }
@media (max-width: 980px) { .pub-resumen { display: none; } }
@media (min-width: 981px) {
  .publicar-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .publicar-col-logistica { align-self: stretch; }
}

/* Facturas: el porte rotulado, para no confundir su referencia con el número de factura */
.fila-factura .ref-etq { font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }

/* Descripción de la mercancía con formato limitado (negrita, cursiva, subrayado) */
.tr-editor { display: grid; gap: 0; border: 1px solid var(--borde-control); border-radius: var(--r-sm); background: var(--superficie); overflow: hidden; }
.tr-editor:focus-within { border-color: var(--foco-color); box-shadow: 0 0 0 3px var(--marca-amarillo-suave); }
.tr-barra { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--separador); background: var(--superficie-2); }
.tr-boton { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--texto); font-size: var(--t-base); cursor: pointer; }
.tr-boton:hover { background: var(--superficie-hover); border-color: var(--borde); }
.tr-boton:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 1px; }
.tr-ayuda { margin-inline-start: auto; font-size: var(--t-xs); color: var(--texto-3); }
.tr-editor textarea { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.tr-editor textarea:focus { box-shadow: none; outline: none; }
.tr-vista { padding: 8px 12px 10px; border-top: 1px dashed var(--separador); background: var(--superficie-2); }
.tr-vista-et { display: block; font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px; }
.tr-vista-texto { color: var(--texto); line-height: var(--interlineado); overflow-wrap: anywhere; }
@media (max-width: 520px) { .tr-ayuda { display: none; } }

/* Ruta de varias paradas del cargador: horario previsto de cada parada y aviso si no llega a tiempo */
.pk-prevista { color: var(--texto-2); }
.pk-prevista.tarde { color: var(--error); font-weight: var(--peso-fuerte); }
.mc-nota.aviso { background: color-mix(in srgb, var(--error) 9%, var(--superficie)); color: var(--error); font-weight: var(--peso-fuerte); }

/* Corregir una carga publicada: datos en dos columnas y fotos actuales */
.corr-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.corr-fotos-tit { margin: 16px 0 6px; display: flex; gap: 8px; align-items: baseline; }
.corr-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.corr-fotos .sf-mini { width: 88px; height: 88px; }

/* Portti Legal · documentos de la reclamación */
.lg-documentos { margin: 14px 0; }
.lg-documentos h3 { display: flex; gap: 8px; align-items: baseline; }
.lg-doc-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.lg-doc-lista li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); }
.lg-doc-tipo { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); }
.lg-doc-lista .enlace { background: none; border: 0; padding: 0; color: var(--texto); font-weight: var(--peso-fuerte); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; text-align: start; }
.lg-doc-subir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.lg-doc-subir label { display: grid; gap: 4px; font-size: var(--t-sm); font-weight: var(--peso-fuerte); }
.lg-doc-subir select { margin: 0; }
.lg-doc-archivo { cursor: pointer; }
.lg-p-exito { display: grid; gap: 2px; margin: 6px 0 4px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--marca-amarillo-suave); }
/* Portti Legal · reclamación del cargador: datos del caso */
.lg-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 6px 0 10px; }
.lg-detalle > div { min-width: 0; }
.lg-detalle dt { font-size: .8em; color: var(--texto-suave, inherit); }
.lg-detalle dd { margin: 0; }
/* Premium Cargadores · solicitudes a socios */
.pm-sol { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; }
.pm-sol > div { min-width: 0; }
.pm-sol-resp { margin: 6px 0 0; }
.pm-beneficio-acc { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) { .pm-sol { grid-template-columns: 1fr; } }
.lg-autorizar { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: var(--r-md); margin: 8px 0; }

/* ---------- Mi ruta: tu recorrido paso a paso (mismos números que el mapa) ---------- */
.mr-paso-ayuda { margin: -4px 0 10px; font-size: var(--t-xs); color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mr-ley { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--peso-fuerte); color: var(--texto); }
.mr-ley::before { content: ''; width: 12px; height: 12px; border-radius: 50%; }
.mr-ley.recoger::before { background: var(--marca-amarillo); box-shadow: inset 0 0 0 1.5px var(--marca-carbon); }
.mr-ley.entregar::before { background: var(--marca-carbon); }
.mr-pasos { list-style: none; margin: 0; padding: 0; position: relative; }
.mr-paso { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.mr-paso:last-child { padding-bottom: 0; }
/* Hilo del recorrido entre un paso y el siguiente */
.mr-paso:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 30px; bottom: 2px; width: 2px; background: var(--borde); }
.mr-paso-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--t-base); font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.mr-paso.recoger .mr-paso-n { background: var(--marca-amarillo); color: var(--marca-carbon); box-shadow: inset 0 0 0 2px var(--marca-carbon); }
.mr-paso.entregar .mr-paso-n { background: var(--marca-carbon); color: var(--marca-amarillo); }
.mr-paso.ahora .mr-paso-n { background: var(--superficie); box-shadow: inset 0 0 0 2px var(--marca-carbon); }
.mr-paso.ahora .mr-paso-n::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--marca-carbon); }
.mr-paso-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 4px; }
.mr-paso-verbo { font-size: var(--t-md); line-height: 1.25; color: var(--texto); }
.mr-paso.ahora .mr-paso-verbo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.mr-paso-que { font-size: var(--t-sm); color: var(--texto); line-height: 1.5; }
.mr-paso-detalle { font-size: var(--t-xs); color: var(--texto-2); }
.mr-paso-camion { align-self: flex-start; margin-top: 2px; font-size: var(--t-2xs); font-weight: var(--peso-fuerte); color: var(--texto-2); background: var(--superficie-2); border-radius: var(--r-full); padding: 2px 10px; }
@media (max-width: 600px) { .mr-paso-verbo { font-size: var(--t-base); } }

/* ---------- Iconos de Phosphor (duotono): contorno en el color del texto y acento de marca ---------- */
svg.ph .ph-acento { fill: var(--marca-amarillo); opacity: .7; }
.nav-tab:hover svg.ph .ph-acento { opacity: 1; }
/* En la sección activa el contorno ya va en amarillo: el acento baja para que se lea el dibujo */
.nav-tab.activa svg.ph .ph-acento { opacity: .28; }
.nav-tab-premium svg.tab-icono.ph { color: inherit; }
.nav-tab-emergencias svg.ph .ph-acento { fill: var(--aviso); }
.cp-camion-ico.ph { width: 22px; height: 22px; }

/* ---------- Copilot: dónde busca «Lo más rentable» ---------- */
.cp-ambito { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--t-sm); color: var(--texto-2); }
.cp-ambito-op { width: auto; min-height: 32px; margin: 0; padding: 4px 12px; border-radius: var(--r-full); border: 1.5px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-weight: var(--peso-fuerte); cursor: pointer; }
.cp-ambito-op.activo { border-color: var(--marca-carbon); background: var(--marca-carbon); color: var(--blanco); }

/* ---------- Tablero del transportista (excelencia visual, 30/10/2026): una pieza, dos zonas, sin tarjetas ---------- */
.tablero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin: 0 0 var(--e-4);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); overflow: hidden; }
.tb-zona { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; min-width: 0; }
.tb-mes { border-left: 1px solid var(--borde); background: linear-gradient(180deg, var(--superficie-2), var(--superficie)); }
.tb-tit { font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.tablero button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; width: auto; min-height: 0; text-align: left; cursor: pointer; }
.tb-urgente { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 10px 14px !important;
  border-left: 4px solid var(--error) !important; background: var(--error-fondo) !important; border-radius: 0 var(--r-md) var(--r-md) 0; }
.tb-urgente.aviso { border-left-color: var(--marca-amarillo) !important; background: var(--yellow-tint, var(--marca-amarillo-suave)) !important; }
.tb-urgente-txt { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; color: var(--texto); }
.tb-accion { font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.tb-calma { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }
.tb-conts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.tb-cont { font-size: var(--t-sm) !important; color: var(--texto-2) !important; }
.tb-cont b { font-size: var(--t-xl); color: var(--texto); margin-right: 2px; }
.tb-cont.cero b { color: var(--texto-2); font-weight: var(--peso-fuerte); }
.tb-cont:hover b, .tb-cont:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.tb-cifra { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-cifra b { font-size: 34px; line-height: 1; letter-spacing: -.01em; }
.tb-cifra span { font-size: var(--t-sm); color: var(--texto-2); }
.tb-libro { display: flex; flex-direction: column; border-top: 1px solid var(--borde); }
.tb-fila { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0 !important; border-bottom: 1px dashed var(--borde) !important; font-size: var(--t-sm) !important; }
.tb-fila:last-child { border-bottom: 0 !important; }
.tb-fila span { color: var(--texto-2); }
.tb-fila b { font-size: var(--t-base); }
.tb-fila.neg b { color: var(--error); }
.tb-fila.tenue b { color: var(--texto-2); font-weight: var(--peso-fuerte); }
.tb-sin { font-weight: var(--peso-fuerte); color: var(--aviso) !important; font-size: var(--t-xs); }
.tb-fila:hover span, .tb-fila:focus-visible span { color: var(--texto); }
.tablero button:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; border-radius: var(--r-sm); }
@media (max-width: 760px) {
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .tb-mes { border-left: 0; border-top: 1px solid var(--borde); }
  .tb-cifra b { font-size: var(--t-cifra); }
}
#stats-transportista { display: block; }
/* La jornada y las programadas, en una línea bajo el tablero: sin cajas, separadas por un filete */
#transportista-tab-subastas .zona-atencion { gap: 0; margin-top: calc(-1 * var(--e-2)); border-bottom: 1px solid var(--borde); }
#transportista-tab-subastas .zona-atencion .tj-boton:not(.tj-medio):not(.tj-poco), #transportista-tab-subastas .zona-atencion .prog-banner { background: transparent; border: 0; border-radius: 0; }
#transportista-tab-subastas .zona-atencion > :not(:empty) + :not(:empty) { border-left: 1px solid var(--borde); }
@media (max-width: 700px) { #transportista-tab-subastas .zona-atencion > :not(:empty) + :not(:empty) { border-left: 0; border-top: 1px solid var(--borde); } }

/* ---------- Inicio del cargador: agenda en dos columnas (excelencia visual, 30/10/2026) ---------- */
.ic-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 var(--e-4); }
.ic-hola { display: inline-block; font-size: var(--t-sm); color: var(--texto-2); }
.ic-hola::first-letter { text-transform: uppercase; }
.ic-tit { margin: 2px 0 0; font-size: var(--t-cifra); line-height: 1.15; }
.ic-acciones { display: flex; gap: 8px; }
.ic-acciones button { width: auto; margin: 0; }
.ic-marco { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ic-agenda, .ic-lateral { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 4px 20px; min-width: 0; }
.ic-sec { padding: 16px 0; }
.ic-sec + .ic-sec { border-top: 1px solid var(--borde); }
.ic-sec-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--t-lg); }
.ic-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-full); background: var(--marca-carbon); color: var(--blanco); font-size: var(--t-xs); }
.ic-sub { margin: 12px 0 4px; font-size: var(--t-sm); color: var(--texto-2); font-weight: 700; }
@media (max-width: 980px) { .ic-marco { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Economía del transportista: la liquidación como una cuenta (excelencia visual, 30/10/2026) ---------- */
.eco-liq { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); margin: 0 0 var(--e-4); overflow: hidden; }
.eco-liq-cuenta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; padding: 18px 20px; }
.eco-liq-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eco-liq-t small { font-size: var(--t-xs); color: var(--texto-2); font-weight: var(--peso-fuerte); }
.eco-liq-t b { font-size: var(--t-xl); line-height: 1.1; }
.eco-liq-t.total { padding: 8px 14px; border-radius: var(--r-md); background: var(--marca-carbon); color: var(--blanco); }
.eco-liq-t.total small { color: color-mix(in srgb, var(--blanco) 72%, transparent); }
.eco-liq-t.total b { font-size: var(--t-cifra); color: var(--marca-amarillo); }
.eco-liq-op { font-size: var(--t-cifra); font-weight: 700; line-height: 1; color: var(--texto-2); padding-bottom: 4px; }
.eco-liq-cobro { display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 10px 20px; border-top: 1px solid var(--borde); background: var(--superficie-2); font-size: var(--t-sm); color: var(--texto-2); }
.eco-liq-cobro b { color: var(--texto); margin-left: 4px; }
.eco-liq-cobro .pendiente b { color: var(--aviso); }
@media (max-width: 600px) { .eco-liq-op { display: none; } .eco-liq-cuenta { display: grid; grid-template-columns: 1fr 1fr; } .eco-liq-t.total { grid-column: 1 / -1; } }

/* ---------- Operaciones logísticas del cargador (fase 1) ---------- */
.op-lista { display: flex; flex-direction: column; }
.op-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; margin: 0; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--borde); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.op-fila:hover { background: var(--superficie-2); }
.op-ref { font-weight: 700; font-variant-numeric: tabular-nums; }
.op-estado { display: inline-block; padding: 2px 10px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; background: var(--superficie-2); color: var(--texto); }
.op-estado.op-completada, .op-estado.op-t-completado { background: var(--ok-fondo); color: var(--ok); }
.op-estado.op-incidencia, .op-estado.op-t-incidencia { background: var(--error-fondo); color: var(--error); }
.op-estado.op-en_curso, .op-estado.op-t-en_curso, .op-estado.op-contratada, .op-estado.op-t-contratado { background: var(--marca-carbon); color: var(--blanco); }
.op-tramos { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.op-tramo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.op-tramo-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--superficie-2); font-weight: 800; }
.op-tramo.completado .op-tramo-n { background: var(--ok); color: var(--blanco); }
.op-tramo.en_curso .op-tramo-n, .op-tramo.contratado .op-tramo-n { background: var(--marca-amarillo); color: var(--marca-carbon); }
.op-tramo.incidencia .op-tramo-n { background: var(--error); color: var(--blanco); }
.op-recepcion { margin: 12px 0; padding: 14px; border-left: 4px solid var(--marca-amarillo); background: var(--superficie-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.op-codigos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.op-eventos { list-style: none; margin: 0; padding: 0; }
.op-eventos li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--borde); font-size: var(--t-sm); }
.op-opciones { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
@media (max-width: 600px) { .op-fila { grid-template-columns: minmax(0, 1fr) auto; } .op-fila .row-meta { display: none; } }

/* ---------- Última milla del cargador (30/10): lista con avance, ventana de alta por pasos y botón de cerrar ---------- */
.modal-box { position: relative; }
.modal-cerrar { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); font-size: var(--t-h1); line-height: 1; cursor: pointer; }
.modal-cerrar:hover, .modal-cerrar:focus-visible { background: var(--superficie-2); color: var(--texto); }
.modal-box > .modal-cerrar + h3 { padding-right: 40px; }
.um-como { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.um-como li { padding: 12px 16px 12px 0; display: flex; flex-direction: column; gap: 2px; }
.um-como li + li { padding-left: 16px; border-left: 1px solid var(--borde); }
.um-como span { font-size: var(--t-sm); color: var(--texto-2); }
.um-lista { list-style: none; margin: 0; padding: 0; }
.um-fila { padding: 16px 0; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: 6px; }
.um-fila.anulada { opacity: .65; }
.um-fila-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.um-ref { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); cursor: pointer; text-decoration: underline; text-decoration-color: var(--marca-amarillo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.um-fila-cab .op-estado { margin-left: auto; }
.um-ruta { font-size: var(--t-md); }
.um-meta { font-size: var(--t-sm); color: var(--texto-2); }
.um-fila-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.um-siguiente { font-size: var(--t-sm); font-weight: 700; }
.um-acciones { display: flex; gap: 8px; }
.um-acciones button { margin: 0; }
.um-pasos { list-style: none; margin: 4px 0; padding: 0; display: flex; gap: 4px; max-width: 560px; }
.um-pasos li { flex: 1; padding-top: 8px; border-top: 4px solid var(--borde); font-size: var(--t-xs); color: var(--texto-2); }
.um-pasos li.hecho { border-top-color: var(--ok); color: var(--texto); }
.um-pasos li.ahora { border-top-color: var(--marca-amarillo); color: var(--texto); font-weight: 700; }
.um-vacio { padding: 24px 0 8px; }
.um-anuladas { margin-top: 14px; }
.um-anuladas summary, .um-historial summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.um-paso { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.um-paso legend { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; padding: 0; }
.um-paso legend span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--marca-carbon); color: var(--blanco); font-size: var(--t-xs); }
.um-cargas { display: flex; flex-direction: column; max-height: 220px; overflow: auto; border: 1px solid var(--borde); border-radius: var(--r-md); }
.um-carga, .um-tipo { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; cursor: pointer; font-weight: 400; }
.um-carga + .um-carga { border-top: 1px solid var(--borde); }
.um-carga input, .um-tipo input { margin-top: 3px; flex: none; width: auto; }
.um-carga span, .um-tipo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.um-carga small, .um-tipo small { color: var(--texto-2); font-size: var(--t-sm); }
.um-carga:has(input:checked), .um-tipo:has(input:checked) { background: var(--superficie-2); box-shadow: inset 4px 0 0 var(--marca-amarillo); }
.um-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.um-tipo { border: 1px solid var(--borde); border-radius: var(--r-md); }
.um-det-cab { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.um-det-cab h3 { margin: 0; }
.um-detalle h4 { margin: 16px 0 6px; }
@media (max-width: 700px) { .um-como, .um-tipos { grid-template-columns: 1fr; } .um-como li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--borde); } }
.um-det-cab { flex-wrap: wrap; }
.um-det-cab h3 { white-space: nowrap; font-variant-numeric: tabular-nums; }
.um-det-cab .op-estado { white-space: nowrap; }
.pub-rec-motivos { margin: 8px 0 0; font-size: var(--t-sm); }
.pub-rec-motivos summary { cursor: pointer; font-weight: 700; }
.pub-rec-motivos ul { margin: 6px 0 0; padding-left: 18px; color: var(--texto-2); }

/* ---------- Mis cargas · Corregir (30/10): lo fijo a la vista y la ficha de cada punto ---------- */
.corr-fijo { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 10px 0 6px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.corr-fijo div { padding: 8px 12px 8px 0; min-width: 0; }
.corr-fijo dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.corr-fijo dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.corr-punto { border: 0; border-top: 3px solid var(--marca-carbon); margin: 0; padding: 8px 0 0; min-width: 0; }
.corr-punto legend { font-weight: 800; padding: 0 8px 0 0; }
.corr-dos:has(.corr-punto) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 12px; }
@media (max-width: 700px) { .corr-dos:has(.corr-punto) { grid-template-columns: 1fr; } }

/* ---------- Pestañas internas (31/10, encargo del propietario): en todas las secciones con apartados, una línea debajo
   que dice «esto se pulsa». Barra con su línea base; cada apartado con su subrayado al pasar y el amarillo en el activo. */
.sub-vista-grupo, .ficha-pestanas, .perfil-subtabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px !important;
  background: none !important; border-radius: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--borde-fuerte); box-shadow: none !important; }
.sub-vista-grupo::-webkit-scrollbar, .ficha-pestanas::-webkit-scrollbar { display: none; }
.sub-vista-grupo button, .ficha-pestana, .eco-pestanas button, .cp-pestanas button, .perfil-subtabs button {
  position: relative; min-height: 44px !important; margin: 0 0 -1px !important; padding: 10px 14px 9px !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--texto-2) !important; font-weight: 700; white-space: nowrap; cursor: pointer;
  border-bottom: 3px solid transparent !important; transition: color .15s, border-color .15s; }
.sub-vista-grupo button:hover, .ficha-pestana:hover, .eco-pestanas button:hover, .cp-pestanas button:hover, .perfil-subtabs button:hover {
  color: var(--texto) !important; border-bottom-color: var(--borde-fuerte) !important; }
.sub-vista-grupo button.activo, .ficha-pestana.activa, .eco-pestanas button.activa, .cp-pestanas button.activa, .perfil-subtabs button.activa,
.sub-vista-grupo button[aria-selected="true"], .eco-pestanas button[aria-selected="true"], .perfil-subtabs button[aria-selected="true"] {
  color: var(--texto) !important; border-bottom-color: var(--marca-amarillo) !important; }
.sub-vista-grupo button:focus-visible, .ficha-pestana:focus-visible, .eco-pestanas button:focus-visible, .cp-pestanas button:focus-visible { outline: 2px solid var(--foco-color); outline-offset: -2px; }
.eco-pestanas { border-bottom: 1px solid var(--borde-fuerte) !important; gap: 2px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
@media (prefers-reduced-motion: reduce) { .sub-vista-grupo button, .ficha-pestana, .eco-pestanas button, .cp-pestanas button { transition: none; } }
@media (max-width: 600px) { .sub-vista-grupo button { flex: 0 0 auto !important; } }
/* Sello VIP de Portti Premium en el menú (31/10): negro con letras blancas; en la pestaña activa (fondo carbón), invertido */
.tab-vip { display: inline-grid; place-items: center; width: 30px !important; height: 18px !important; border-radius: var(--r-sm); background: var(--carbon-900); color: var(--blanco);
  font: 800 var(--t-2xs)/1 var(--fuente); letter-spacing: .06em; flex: none; }
.nav-tab.activa .tab-vip { background: var(--superficie); color: var(--carbon-900); }
/* premium.css tiñe .tab-icono de dorado; el distintivo VIP mantiene su propio contraste */
.nav-tab-premium .tab-vip { color: var(--blanco); }
.nav-tab-premium.activa .tab-vip, #app-screen > .nav-tabs .nav-tab.activa .tab-vip { color: var(--carbon-900); }

/* ---------- Premium · Red logística (31/10): qué es, cómo funciona, búsqueda alineada y estado de cada solicitud ---------- */
.nw-cabecera h2 { margin: 0 0 var(--e-1); }
.nw-cabecera > p { max-inline-size: 72ch; margin: 0 0 var(--e-3); color: var(--texto-2); }
/* Ficha transportista-red-logistica (04/11): servicio (selector propio con su descripción), dónde, distancia, Frío/ADR y
   Buscar en una fila; resultados y peticiones en .fila-lista. Fuera los pasos 1-4 y la cuadrícula de servicios. */
.nw-buscar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 0.8fr) auto auto; }
.nw-servicio-campo { min-inline-size: 0; }
.nw-servicio-campo .selector { margin: 0; }
.nw-lista .nw-sol { flex-direction: column; align-items: stretch; }
.nw-sol .fl-lado { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.nw-sol .fl-lado .btn-mini { margin: 0; }
.nw-sol .fl-cifra { display: inline-flex; align-items: baseline; gap: var(--e-2); margin-inline-end: auto; }
.nw-que { color: var(--texto-2); }
.nw-condiciones { white-space: pre-wrap; }
.nw-vigencia { display: block; }
@media (max-width: 900px) { .nw-buscar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nw-buscar .nw-servicio-campo, .nw-buscar .pk-donde { grid-column: 1 / -1; } }
@media (max-width: 640px) { .nw-fila, .nw-sol { flex-direction: column; align-items: stretch; } .nw-sol .fl-lado, .nw-fila .fl-lado { justify-content: flex-start; } }
/* Mi jornada (31/10): el texto a la izquierda y un botón visible a la derecha, como «Ver» en Programadas */
.tj-boton { flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between; gap: 12px !important; cursor: pointer; }
.tj-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.tj-accion { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--marca-carbon); border-radius: var(--r-full);
  font-weight: 700; font-size: var(--t-sm); color: var(--texto); background: var(--superficie); white-space: nowrap; }
.tj-boton:hover .tj-accion, .tj-boton:focus-visible .tj-accion { background: var(--marca-carbon); color: var(--blanco); }
@media (max-width: 600px) { .tj-boton { flex-wrap: wrap !important; } .tj-accion { min-height: 36px; } }
.mj-historial { margin: 12px 0 4px; }
.mj-historial summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.mj-tabla { font-size: var(--t-sm); }
/* Mi jornada · ventana (ficha transportista-mi-jornada, 04/11): primero lo que haces y lo que te queda, luego cuatro
   botones de 64 px y, plegado, lo del tacógrafo en campos h:mm. Sin glifos ni «?» de 20 px. */
.mj-resumen { padding: 0 0 var(--e-3); }
.mj-resumen-1 { margin: 0 0 var(--e-1); font-size: var(--t-xl); font-weight: var(--peso-fuerte); line-height: 1.25; }
.mj-resumen-2 { margin: 0; font-size: var(--t-base); color: var(--texto-2); }
.mj-resumen .num { font-variant-numeric: tabular-nums; }
.mj-ahora { padding: var(--e-3) 0 var(--e-4); border-block: 1px solid var(--borde); margin-bottom: var(--e-3); }
.mj-ahora-tit { font-weight: var(--peso-fuerte); margin: 0 0 var(--e-2); }
.mj-acciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
.mj-acciones button { font: inherit; font-weight: var(--peso-fuerte); margin: 0; min-height: 64px; border: 1px solid var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); color: var(--texto); }
.mj-acciones button[aria-pressed="true"] { background: var(--marca-carbon); color: var(--blanco); border-color: var(--marca-carbon); box-shadow: inset 0 -4px 0 var(--marca-amarillo); }
.mj-fin-zona { margin-top: var(--e-3); }
.mj-fin-zona .mj-fin { min-height: 44px; margin: 0; }
.mj-fin-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.mj-fin-confirmar[hidden] { display: none; }
.mj-fin-confirmar p { flex: 1 1 100%; margin: 0; font-weight: var(--peso-medio); }
.mj-fin-confirmar button { min-height: 44px; margin: 0; }
.mj-suma { margin: var(--e-3) 0 0; }
.mj-tacografo { margin: 0 0 var(--e-3); }
.mj-tacografo > summary { cursor: pointer; font-weight: var(--peso-fuerte); min-height: 44px; display: flex; align-items: center; }
.mj-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); margin: var(--e-2) 0 var(--e-3); }
.mj-campo label { margin: 0 0 var(--e-1); }
.mj-campo input { margin: 0; max-inline-size: 10ch; font-variant-numeric: tabular-nums; }
.mj-ayuda { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texto-2); }
.mj-ampliado { margin: 0 0 var(--e-2); }
.mj-fuente { margin: var(--e-3) 0 0; }
@media (max-width: 600px) { .mj-acciones, .mj-campos { grid-template-columns: 1fr 1fr; } }
.tj-traf { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--ok); background: var(--superficie-2); font-size: var(--t-sm); }
.tj-traf.medio { border-left-color: var(--aviso); }
.tj-traf.poco { border-left-color: var(--error); }

/* ---------- Cargas disponibles del transportista: impreso con cartel de destino (rediseño, propuesta D) ----------
   Cada carga es un impreso como la carta de porte (casillas numeradas sobre papel), que abre con un cartel de destino de
   autovía y acaba en un resguardo con lo que te queda. Los impresos se apoyan en una mesa carbón: papel en la mano. */
#transportista-tab-subastas .tabla-header-desktop { display: none !important; }
#lista-subastas-activas ,#packs-abiertos.pk-mesa { background: var(--carbon-900); border-radius: var(--r-lg); padding: var(--e-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--e-3); align-items: start; }
#lista-subastas-activas > .flota-aviso-lista ,#packs-abiertos.pk-mesa > .flota-aviso-lista { grid-column: 1 / -1; margin: 0; color: var(--sobre-carbon); }
#lista-subastas-activas > .empty-branded,#packs-abiertos.pk-mesa > .empty-branded, #lista-subastas-activas > p , #packs-abiertos.pk-mesa > p { grid-column: 1 / -1; background: var(--superficie); border-radius: var(--r-md); margin: 0; }
.impreso { background: var(--superficie); color: var(--texto); border-radius: var(--r-sm); cursor: pointer; display: flex; flex-direction: column; min-width: 0; transition: transform var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva); }
.impreso:hover { background: var(--superficie); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--negro) 60%, transparent); transform: translateY(-1px); }
.impreso:focus-within { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.imp-cab { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borde); }
.imp-cab .estrella { margin: 0; }
.imp-sello { margin-left: auto; flex: none; font: 700 var(--t-2xs)/1 var(--fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-carbon); border: 2px solid var(--marca-carbon); border-radius: var(--r-sm); padding: 4px 6px; transform: rotate(-3deg); white-space: nowrap; }
.imp-sello.subasta { background: var(--marca-carbon); color: var(--marca-amarillo); }

/* Cartel de destino: panel negro con doble filete blanco, flecha hacia donde está el destino, ciudad en mayúsculas y km */
.senal-destino { margin: var(--e-3) var(--e-3) 0; background: var(--carbon-900); color: var(--blanco); border-radius: var(--r-sm); padding: var(--e-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--e-3); align-items: center; box-shadow: inset 0 0 0 2px var(--superficie), inset 0 0 0 4px var(--carbon-900); }
.sd-dest { display: flex; align-items: center; gap: var(--e-2); min-width: 0; font: 800 1.45rem/1 var(--fuente-senal); text-transform: uppercase; letter-spacing: -.005em; }
.sd-ciudad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-flecha { width: 22px; height: 22px; flex: none; fill: var(--blanco); transition: none; }
.sd-km { font: 800 1.45rem/1 var(--fuente-senal); font-variant-numeric: tabular-nums; text-align: right; }
.sd-desde, .sd-cerca { font: 600 var(--t-sm)/1.2 var(--fuente-senal); color: var(--sobre-carbon-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-et { font-weight: var(--peso-fuerte); opacity: .8; }
.sd-cerca { text-align: right; }
.imp-tags { padding: var(--e-2) var(--e-3) 0; margin: 0; }

/* Casillas numeradas, como las de la carta de porte */
.imp-casillas { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--e-3); border-top: 1px solid var(--borde); }
.imp-casilla { position: relative; padding: var(--e-2) var(--e-3) var(--e-3); border-bottom: 1px solid var(--borde); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imp-casilla:nth-child(even) { border-left: 1px solid var(--borde); }
.imp-casilla.ancha { grid-column: 1 / -1; border-left: 0; }
.imp-et { display: flex; align-items: baseline; gap: 6px; font: 500 var(--t-2xs)/1.2 var(--fuente); letter-spacing: var(--espaciado-versalitas); text-transform: uppercase; color: var(--texto-2); }
.imp-et i { font-style: normal; font-weight: 700; color: var(--texto); }
.imp-v { font: 500 var(--t-base)/1.25 var(--fuente-num); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.imp-v small, .imp-eurkm { display: block; font-size: var(--t-xs); color: var(--texto-2); }
.imp-precio { font-weight: 700; }

/* Resguardo: separado por la línea de corte, con lo que te queda y la acción */
.imp-resguardo { position: relative; margin-top: auto; border-top: 2px dashed var(--borde-fuerte); padding: var(--e-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; }
.imp-resguardo::before, .imp-resguardo::after { content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--carbon-900); }
.imp-resguardo::before { left: -8px; } .imp-resguardo::after { right: -8px; }
.imp-queda { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imp-queda b { font: 700 var(--t-cifra)/1.05 var(--fuente-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.imp-queda.nivel-bajo_minimo b, .imp-queda.nivel-justo b { color: var(--aviso); }
.imp-queda.nivel-perdidas b { color: var(--error); }
.imp-estimado { text-transform: none; letter-spacing: 0; }
.imp-nota { font-size: var(--t-xs); color: var(--texto-2); line-height: 1.3; }
.imp-resguardo button { margin: 0; min-height: var(--control-h); padding: 0 var(--e-5); white-space: nowrap; }
.imp-btn.oscuro { background: var(--marca-carbon); color: var(--blanco); }
.impreso.bloqueada { background: var(--superficie); opacity: .88; }
.impreso.bloqueada .senal-destino { background: var(--carbon-700); box-shadow: inset 0 0 0 2px var(--separador), inset 0 0 0 4px var(--carbon-700); }
.impreso .vivo-estado:empty { display: none; }
@media (max-width: 760px) {
  #lista-subastas-activas ,  #packs-abiertos.pk-mesa { margin: 0 calc(-1 * var(--e-4)); border-radius: 0; padding: var(--e-3) var(--e-3) var(--e-5); }
}
@media (prefers-reduced-motion: reduce) { .impreso, .impreso:hover { transition: none; transform: none; } }

/* Menú inferior del móvil: el componente .barra-inferior vive en css/componentes.css (B3) y su encaje en css/marco.css */
@media (hover: none) { .impreso:hover { transform: none; box-shadow: none; } }
.menu-secciones { display: grid; gap: var(--e-2); margin: var(--e-3) 0; }
.menu-seccion { margin: 0; min-height: var(--control-h); text-align: left; padding: 0 var(--e-4); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); color: var(--texto); font: 500 var(--t-base) var(--fuente); }
.imp-estimado::before { content: "· "; }

/* Cargas disponibles en el PC: cada carga es una tira de impreso sobre el fondo claro (cartel de destino | casillas |
   línea de corte | resguardo), todas alineadas para comparar. El móvil mantiene los impresos sobre la mesa carbón. */
@media (min-width: 761px) {
  #lista-subastas-activas ,  #packs-abiertos.pk-mesa { background: none; padding: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  #lista-subastas-activas > .flota-aviso-lista ,  #packs-abiertos.pk-mesa > .flota-aviso-lista { color: var(--texto-2); }
  .impreso { display: grid; grid-template-columns: 264px minmax(0, 1fr) 224px; grid-template-areas: "cab casillas resguardo" "senal casillas resguardo" "tags casillas resguardo";
    grid-template-rows: auto auto 1fr; border-radius: var(--r-md); box-shadow: 0 1px 0 color-mix(in srgb, var(--negro) 4%, transparent), 0 4px 14px -10px color-mix(in srgb, var(--carbon-900) 35%, transparent); }
  .impreso:hover { box-shadow: 0 1px 0 color-mix(in srgb, var(--negro) 4%, transparent), 0 10px 26px -14px color-mix(in srgb, var(--carbon-900) 45%, transparent); }
  .imp-cab { grid-area: cab; border-bottom: 0; padding: var(--e-3) var(--e-3) 0; }
  .senal-destino { grid-area: senal; margin: var(--e-2) var(--e-3) 0; }
  .sd-dest, .sd-km { font-size: var(--t-xl); }
  .imp-tags { grid-area: tags; padding: var(--e-2) var(--e-3) var(--e-3); align-self: start; }
  .imp-casillas { grid-area: casillas; margin: 0; border-top: 0; border-left: 1px solid var(--borde); grid-template-columns: 1fr 1fr 1.25fr 1fr; align-content: stretch; }
  .imp-casilla { border-bottom: 0; border-left: 1px solid var(--borde); padding: var(--e-4); }
  .imp-casilla:first-child { border-left: 0; }
  .imp-casilla:nth-child(even) { border-left: 1px solid var(--borde); }
  .imp-casilla.ancha { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--borde); padding-top: var(--e-2); }
  .imp-v { font-size: var(--t-md); }
  .imp-resguardo { grid-area: resguardo; border-top: 0; border-left: 2px dashed var(--borde-fuerte); grid-template-columns: minmax(0, 1fr); align-content: space-between; padding: var(--e-4); }
  .imp-resguardo::before, .imp-resguardo::after { display: none; }
  .imp-resguardo button { width: 100%; }
  .imp-nota { display: none; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .impreso { grid-template-columns: 236px minmax(0, 1fr) 196px; }
  .imp-casillas { grid-template-columns: 1fr 1fr; }
  .imp-casilla:nth-child(3) { border-left: 0; }
  .imp-casilla:nth-child(n+3) { border-top: 1px solid var(--borde); }
}

/* ---------- Cargas disponibles en el PC (1100 px o más): tablón de salidas con mapa (opción 6) ----------
   El tablón, oscuro como el de una estación, se lee de un vistazo. A su lado, el mapa con las rutas y la ficha de la
   carga elegida. Por debajo de 1100 px siguen las tiras (tableta) o los impresos (móvil). */
.cargas-mapa { display: none; }
@media (min-width: 1100px) {
  .cargas-marco.activo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 500px); gap: var(--e-4); align-items: start; }
  .cargas-marco.activo .cargas-mapa { display: block; position: sticky; top: calc(var(--alto-cabecera, 72px) + var(--alto-banda, 0px) + var(--e-3)); height: calc(100vh - var(--alto-cabecera, 72px) - var(--alto-banda, 0px) - var(--e-6)); min-height: 520px;
    border-radius: var(--r-lg); overflow: hidden; background: var(--separador); border: 1px solid var(--borde); }
  .cargas-mapa-lienzo { position: absolute; inset: 0; }
  .cargas-ficha { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); z-index: 500; background: var(--superficie); border-radius: var(--r-md); padding: var(--e-4); box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--carbon-900) 50%, transparent); max-height: 46%; overflow: auto; }
  .cargas-ficha .senal-destino { margin: var(--e-2) 0; }
  .cargas-ficha-vacia { margin: 0; color: var(--texto-2); }
  .cf-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); }
  .cf-cab .imp-sello { margin: 0; }
  .cf-info { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--texto-2); }
  .cf-cuenta { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--e-3); margin: 0; font-size: var(--t-sm); }
  .cf-cuenta dt, .cf-cuenta dd { margin: 0; } .cf-cuenta dd { text-align: right; font-variant-numeric: tabular-nums; }
  .cf-cuenta .cf-total { border-top: 2px dashed var(--borde-fuerte); padding-top: var(--e-2); margin-top: 2px; font-weight: 700; font-size: var(--t-base); }
  .cf-cuenta dd.cf-total { font-size: var(--t-h1); }
  .cf-cuenta dd.nivel-bajo_minimo, .cf-cuenta dd.nivel-justo { color: var(--aviso); } .cf-cuenta dd.nivel-perdidas { color: var(--error); }
  .cf-acciones { display: flex; gap: var(--e-2); margin-top: var(--e-3); }
  .cf-acciones button { margin: 0; min-height: var(--control-h); } .cf-acciones .action { flex: 1; } .cf-acciones .action.oscuro { background: var(--marca-carbon); color: var(--blanco); }

  /* El tablón */
  #lista-subastas-activas.tablon ,  #packs-abiertos.pk-mesa.tablon { display: block; background: var(--carbon-900); border-radius: var(--r-lg); padding: 0; overflow: hidden; color: var(--sobre-carbon); }
  #lista-subastas-activas.tablon > .flota-aviso-lista ,  #packs-abiertos.pk-mesa.tablon > .flota-aviso-lista { padding: var(--e-3) var(--e-4); margin: 0; color: var(--sobre-carbon-2); border-bottom: 1px solid var(--sobre-carbon-borde); }
  #lista-subastas-activas.tablon .tsl-fila ,  #packs-abiertos.pk-mesa.tablon .tsl-fila { display: grid; grid-template-columns: 58px minmax(0, 1fr) 92px 104px auto; gap: 0 var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--carbon-700); cursor: pointer; }
  .tsl-fila:nth-child(odd) { background: var(--marca-carbon); }
  .tsl-fila:hover { background: var(--carbon-800); }
  .tsl-fila.activa { background: var(--carbon-700); box-shadow: inset 4px 0 0 var(--marca-amarillo); }
  .tsl-fila:focus-visible { outline: 2px solid var(--foco-color); outline-offset: -2px; }
  .tsl-fila.bloqueada { opacity: .6; }
  .tsl-hora b { display: block; font: 800 1.25rem/1 var(--fuente-senal); color: var(--marca-amarillo); font-variant-numeric: tabular-nums; }
  .tsl-hora small { display: block; margin-top: 3px; font-size: var(--t-2xs); color: var(--sobre-carbon-2); text-transform: capitalize; }
  .tsl-centro { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  #lista-subastas-activas .tsl-destino,  #packs-abiertos.pk-mesa .tsl-destino, #lista-subastas-activas .tsl-destino .sd-ciudad , #packs-abiertos.pk-mesa .tsl-destino .sd-ciudad { color: var(--blanco); }
  .tsl-destino { display: flex; align-items: center; gap: var(--e-2); font: 800 1.25rem/1 var(--fuente-senal); text-transform: uppercase; color: var(--blanco); min-width: 0; }
  .tsl-destino .sd-flecha { width: 18px; height: 18px; }
  .tsl-linea { font-size: var(--t-xs); color: var(--sobre-carbon-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tsl-linea .imp-sello { transform: none; margin: 0 6px 0 0; padding: 2px 5px; vertical-align: 1px; border-color: var(--sobre-carbon); color: var(--sobre-carbon); }
  .tsl-linea .imp-sello.subasta { background: var(--marca-amarillo); border-color: var(--marca-amarillo); color: var(--marca-carbon); }
  .tsl-et { opacity: .8; }
  .tsl-cierre .countdown-live, .tsl-cierre .num { color: var(--sobre-carbon); }
  .tsl-tags { margin: 0; }
  .tsl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  .tsl-tags .sub-tag { font-size: var(--t-2xs); margin: 0; }
  .tsl-tags .sub-tag.frio { background: var(--info-fondo); color: var(--info); }
  .tsl-precio, .tsl-queda { text-align: right; font-variant-numeric: tabular-nums; }
  .tsl-precio b { display: block; font: 700 var(--t-base) var(--fuente-num); color: var(--blanco); }
  .tsl-precio b, .tsl-queda b { white-space: nowrap; }
  .tsl-precio small, .tsl-queda small { white-space: nowrap; display: block; font-size: var(--t-2xs); color: var(--sobre-carbon-2); margin-top: 2px; }
  .tsl-queda b { display: block; font: 700 var(--t-lg)/1.1 var(--fuente-num); color: var(--blanco); }
  .tsl-queda.nivel-bajo_minimo b, .tsl-queda.nivel-justo b { color: var(--aviso-sobre-carbon); } .tsl-queda.nivel-perdidas b { color: var(--error-sobre-carbon); }
  .tsl-accion { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
  .tsl-accion .tsl-btn { margin: 0; min-height: 40px; padding: 0 var(--e-4); }
  .tsl-accion .tsl-btn.claro { background: var(--sobre-carbon); color: var(--marca-carbon); }
  .tsl-accion .btn-ghost { color: var(--sobre-carbon); border-color: var(--sobre-carbon-borde); }
  .tsl-accion .estrella { margin: 0; color: var(--sobre-carbon-2); }
  .tsl-accion .estrella.activa { color: var(--marca-amarillo); }
  .tsl-fila .vivo-estado:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tsl-fila { transition: none; } }
/* Ruta agrupada: «No me interesa» a la izquierda y separado; Cerrar y Aceptar juntos a la derecha */
.rg-acciones { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.rg-acciones .rg-rechazar { margin-right: auto; }
/* Horarios de Publicar: la recomendación cambió con los datos nuevos */
.pv-cambio { margin: var(--e-2) 0 0; font-weight: var(--peso-fuerte); color: var(--aviso); }
/* Navegación por todas las paradas: desde dónde sale la ruta (el camión o tu ubicación) */
.nav-origen { display: inline-block; margin-right: var(--e-2); font-weight: var(--peso-fuerte); }
.nav-origen.aviso { color: var(--aviso); }
.nav-origen-cambiar { font-size: var(--t-sm); }

/* ---------- Cabecera de sección: el componente vive en css/componentes.css (.cabecera-seccion, B2). Aquí solo queda
   el H2 que repetía el título dentro de su tarjeta, fuera de la vista y para los lectores de pantalla ---------- */
.titulo-en-cabecera { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:has(> h2.titulo-en-cabecera) { justify-content: flex-end; }
/* Mapa de Cargas disponibles: fondo sobrio (el mapa sin colores) para que la ruta elegida destaque */
.cargas-mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.06); }
.mapa-rotulo { background: var(--marca-carbon); color: var(--blanco); border: 0; border-radius: var(--r-sm); font: 700 var(--t-xs)/1 var(--fuente); padding: 5px 7px; box-shadow: 0 2px 6px color-mix(in srgb, var(--negro) 25%, transparent); }
.mapa-rotulo.destino { background: var(--marca-amarillo); color: var(--marca-carbon); }
.mapa-rotulo::before { display: none; }
.cf-cab { align-items: center; }
.cf-queda { margin-left: auto; text-align: right; line-height: 1; }
.cf-queda small { display: block; font-size: var(--t-2xs); color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; }
.cf-queda b { font: 700 var(--t-xl)/1.1 var(--fuente-num); font-variant-numeric: tabular-nums; }
.cf-queda.nivel-bajo_minimo b, .cf-queda.nivel-justo b { color: var(--aviso); } .cf-queda.nivel-perdidas b { color: var(--error); }
.cf-ruta { margin: var(--e-2) 0 2px; font-size: var(--t-base); }
.cf-desglose { margin-top: var(--e-2); font-size: var(--t-sm); }
.cf-desglose summary { cursor: pointer; color: var(--texto-2); }
.cf-desglose .cf-cuenta { margin-top: var(--e-2); }
/* Publicar: peso por palé enlazado, ayuda para estimar el peso y bultos en total (prompts 17 y 20) */
.peso-no-se { display: inline-block; margin-top: 4px; font-size: var(--t-sm); }
.peso-palet-nota:empty, #peso-ayuda:empty { display: none; }
.peso-palet-nota { margin-top: var(--e-2); font-size: var(--t-sm); }
.peso-palet-nota p { margin: 0 0 4px; }
.ppn-cuenta b { font-variant-numeric: tabular-nums; margin-right: var(--e-2); }
.ppn-cuenta span { color: var(--texto-2); }
.ppn-aviso { color: var(--aviso); }
.peso-ayuda-caja { margin-top: var(--e-2); padding: var(--e-3); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-sm); background: var(--superficie-2); }
.peso-ayuda-caja p { margin: 0 0 6px; }
.peso-ayuda-caja b { font-variant-numeric: tabular-nums; }
.peso-ayuda-falta, .peso-ayuda-hecho { margin: 6px 0 0; font-size: var(--t-sm); color: var(--texto-2); max-width: 70ch; }
.peso-ayuda-hecho { color: var(--aviso); }
.firma-previstos { grid-column: 1 / -1; margin: 6px 0 0; font-size: var(--t-sm); color: var(--texto-2); }
.firma-previstos b { color: var(--texto); font-variant-numeric: tabular-nums; }
/* Packs en Cargas disponibles con el mismo lenguaje que las cargas sueltas: sello «Pack» en carbón y amarillo, y las
   paradas en orden bajo el cartel (móvil) o bajo la línea del tablón (PC) */
#packs-abiertos.pk-mesa { margin-bottom: var(--e-4); }
#packs-abiertos.pk-mesa > .packs-ver-mas { grid-column: 1 / -1; justify-self: start; }
.pk-titulo b { color: inherit; }
.imp-sello.pack { background: var(--marca-carbon); border-color: var(--marca-carbon); color: var(--marca-amarillo); }
.tsl-linea .imp-sello.pack { background: transparent; border-color: var(--marca-amarillo); color: var(--marca-amarillo); }
.pk-paradas { margin: 0; padding: 0 var(--e-4) var(--e-2); font-size: var(--t-sm); color: var(--texto-2); overflow-wrap: anywhere; }
.tsl-linea.pk-paradas { padding: 0; white-space: normal; }
.imp-cab .pack-estado { margin-left: auto; }
@media (min-width: 761px) { .impreso .pk-paradas { grid-area: tags; padding: 0 var(--e-4) var(--e-3); } }
/* Publicar: lo que rellena Portti va marcado como «sugerido» hasta que el cargador lo toca (prompt 14) */
label.campo-sugerido::after { content: attr(data-sugerido-txt); margin-left: 6px; padding: 1px 6px; border-radius: var(--r-sm); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .02em; vertical-align: 1px; background: var(--marca-amarillo); color: var(--marca-carbon); }
[data-sugerido]:not([type="checkbox"]) { border-style: dashed; }
.seguro-sugerido:empty { display: none; }
.seguro-sugerido { display: grid; gap: var(--e-2); margin: var(--e-2) 0 var(--e-3); }
.ss-valor { padding: var(--e-3); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-sm); background: var(--superficie-2); }
.ss-valor p { margin: 0 0 6px; max-width: 75ch; } .ss-valor b { font-variant-numeric: tabular-nums; }
.ss-robo { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }
/* Publicar: reparto en varios camiones (prompt 19) */
.reparto-camiones { display: grid; gap: var(--e-2); margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px dashed var(--borde); }
.rc-opciones { display: grid; gap: 6px; }
.rc-op { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie); cursor: pointer; font-weight: 500; }
.rc-op input { width: auto; margin: 3px 0 0; }
.rc-op span { display: flex; flex-direction: column; gap: 2px; } .rc-op small { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rc-op:has(input:checked) { border-color: var(--marca-carbon); box-shadow: inset 3px 0 0 var(--marca-amarillo); }
.sub-tag.multicamion { background: var(--marca-carbon); color: var(--marca-amarillo); }
/* Copilot · ruta agrupada: línea de tiempo con un carril por mercancía (prompt 16). Seis colores de carril distinguibles
   en claro y oscuro; la recogida es un punto lleno y la entrega un anillo */
:root { --carril-0: var(--carril-0); --carril-1: var(--carril-1); --carril-2: var(--carril-2); --carril-3: var(--carril-3); --carril-4: var(--carril-4); --carril-5: var(--carril-5); }
.rg-color.c0, .rg-carril.c0 { --c: var(--carril-0); } .rg-color.c1, .rg-carril.c1 { --c: var(--carril-1); } .rg-color.c2, .rg-carril.c2 { --c: var(--carril-2); }
.rg-color.c3, .rg-carril.c3 { --c: var(--carril-3); } .rg-color.c4, .rg-carril.c4 { --c: var(--carril-4); } .rg-color.c5, .rg-carril.c5 { --c: var(--carril-5); }
.rg-resumen { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); }
.rg-resumen > div { display: grid; gap: 2px; min-width: 120px; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie-2); }
.rg-resumen span { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); } .rg-resumen b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; } .rg-resumen b.rg-holgura { font-size: var(--t-sm); justify-self: start; } .rg-resumen small { color: var(--texto-2); text-transform: capitalize; }
.rg-leyenda { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--e-4); font-size: var(--t-sm); }
.rg-leyenda li { display: flex; align-items: center; gap: 6px; }
.rg-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.rg-linea { list-style: none; margin: 0; padding: 0; }
.rg-linea > li { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); column-gap: var(--e-3); align-items: stretch; }
.rg-hora { padding-top: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.rg-hora b { display: block; font-size: var(--t-base); } .rg-hora small { color: var(--texto-2); font-size: var(--t-2xs); text-transform: capitalize; }
.rg-carriles { display: flex; gap: 4px; }
.rg-carril { position: relative; width: 12px; }
.rg-carril.sigue::before, .rg-carril.inicio::before, .rg-carril.fin::before { content: ""; position: absolute; left: 4px; width: 4px; background: var(--c); }
.rg-carril.sigue::before { top: 0; bottom: 0; }
.rg-carril.inicio::before { top: 18px; bottom: 0; } .rg-carril.fin::before { top: 0; height: 18px; }
.rg-carril.inicio::after, .rg-carril.fin::after { content: ""; position: absolute; left: 0; top: 12px; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.rg-carril.inicio::after { background: var(--c); } .rg-carril.fin::after { background: var(--superficie); border: 3px solid var(--c); }
.rg-info { padding: 6px 0 var(--e-3); min-width: 0; display: grid; gap: 4px; }
.rg-que { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rg-ventana { font-size: var(--t-sm); color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.rg-holgura { display: inline-flex; gap: 4px; padding: 1px 8px; border-radius: var(--r-md); font-size: var(--t-xs); font-weight: 700; background: var(--ok-fondo); color: var(--ok); }
.rg-holgura.justo { background: var(--aviso-fondo); color: var(--aviso); } .rg-holgura.apurado { background: var(--error-fondo); color: var(--error); }
.rg-tramo .rg-tramo-txt { padding: 4px 0; font-size: var(--t-xs); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rg-nota { margin-top: var(--e-2); font-size: var(--t-xs); }
@media (max-width: 520px) { .rg-linea > li { grid-template-columns: 48px auto minmax(0, 1fr); column-gap: var(--e-2); } }
/* Copilot · «Toda la flota» como tablero por camión (prompt 9) */
.tf-intro { margin: 0 0 var(--e-3); }
.tf-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--e-3); }
.tf-camion { display: grid; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.tf-camion.sin-posicion { border-style: dashed; }
.tf-abrir { all: unset; cursor: pointer; display: grid; gap: var(--e-2); border-radius: var(--r-sm); }
.tf-abrir:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 3px; }
.tf-matricula { justify-self: start; font: 800 var(--t-lg)/1 var(--fuente-num); letter-spacing: .04em; padding: 5px 8px; border: 2px solid var(--marca-carbon); border-radius: var(--r-sm); background: var(--superficie); color: var(--marca-carbon); }
.tf-conductor { color: var(--texto-2); font-size: var(--t-sm); }
.tf-dato { display: grid; gap: 1px; } .tf-dato small { color: var(--texto-2); font-size: var(--t-xs); } .tf-dato b { font-size: var(--t-base); }
.tf-camion.sin-posicion .tf-fuente { color: var(--aviso); }
.tf-ir { font-weight: 700; font-size: var(--t-sm); }
.tf-abrir:hover .tf-ir { text-decoration: underline; }
.tf-ubicar { justify-self: start; }
.tf-origen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-sm); background: var(--superficie-2); font-size: var(--t-sm); }
.tf-origen.aviso { background: var(--aviso-fondo); }
/* UI-11 (auditoría de interfaz): en pantallas táctiles los campos miden al menos 16 px, para que iOS no amplíe la página */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}
/* UI-10 (auditoría de interfaz): con la banda de demo encima, la zona segura superior la ocupa la banda, no la cabecera */
/* La banda de demo y su zona segura: css/marco.css */
/* UI-24: las cifras de las bandas de KPI bajan de línea en lugar de recortarse */
.eco-kpi { min-width: 0; }
.eco-kpi .v { overflow-wrap: anywhere; }
/* UI-28: sin el destello gris de iOS al tocar, sin la espera del doble toque y sin arrastrar el fondo con una ventana abierta */
button, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html:has(> body.sin-scroll) { overflow: hidden; }
body.sin-scroll { overscroll-behavior: none; }

/* UI-08: ventanas de confirmación, aviso y texto (confirmarAccion, avisarAccion y pedirTexto en 01-base.js) */
.ventana-accion p { margin: 0 0 var(--e-3); }
.ventana-accion label { display: block; margin: 0 0 var(--e-2); }
.ventana-accion input { width: 100%; }
.ventana-accion .modal-actions > button { margin-top: 0; }
/* Confirmación común de pujar y aceptar (confirmarPuja, 02-subastas.js): cifras con su base, aviso de pérdidas (no bloquea) */
.ventana-accion .va-ruta { font-weight: 600; margin: 0 0 var(--e-2); }
.ventana-accion .va-cifras { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0 0 var(--e-3); }
.ventana-accion .va-cifras > div { display: contents; }
.ventana-accion .va-cifras dt, .ventana-accion .va-cifras dd { margin: 0; padding-block: var(--e-1); border-block-end: 1px solid var(--separador); }
.ventana-accion .va-cifras dd { text-align: end; padding-inline-start: var(--e-4); font-variant-numeric: tabular-nums; }
.ventana-accion .va-cifras .es-negativo dd { color: var(--error); font-weight: 600; }
.ventana-accion .va-aviso { padding: var(--e-2) var(--e-3); border: 1px solid var(--aviso-borde); border-radius: var(--r-md); background: var(--aviso-fondo); color: var(--aviso); }
.ventana-accion .va-notas p { margin: 0 0 var(--e-1); color: var(--texto-2); }
/* UI-06: valoración con radios; la elegida se distingue por la forma (★ / ☆), el contorno y el texto */
.estrella-selector { border: 0; padding: 0; margin: var(--e-4) 0 var(--e-2); min-inline-size: 0; text-align: center; font-size: 36px; line-height: 1; }
.estrella-selector .estrella-opcion { display: inline-block; margin: 0; padding: 0 2px; font-size: inherit; cursor: pointer; }
.estrella-selector .estrella-forma { display: inline-block; padding: 0 2px; border-radius: var(--r-md); color: var(--marca-carbon); }
.estrella-selector .estrella-forma.llena { color: var(--marca-amarillo); -webkit-text-stroke: 1px var(--marca-carbon); }
.estrella-selector input:focus-visible + .estrella-forma { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.estrella-texto { margin: 0 0 var(--e-4); text-align: center; font-weight: var(--peso-fuerte); }
/* UI-31: enlace de salto (solo se ve con el teclado) y destino sin contorno */
.saltar-contenido { position: fixed; left: var(--e-3); top: -100px; z-index: 2000; padding: var(--e-2) var(--e-4); border-radius: var(--r-md); background: var(--marca-carbon); color: var(--sobre-carbon); font-weight: var(--peso-fuerte); text-decoration: none; }
.saltar-contenido:focus { top: var(--e-3); }
#contenido:focus, .detalle-popup:focus { outline: none; }

/* ---------- Ola A (03/11): foco sobre superficies carbón ----------
   Sobre carbón el anillo carbón no se ve: dentro de estas superficies el foco pasa a amarillo (11:1) con el hueco en
   carbón (--foco-oscuro). La lista de superficies claras/oscuras se unifica en la ola B con [data-superficie="carbon"]. */
.copilot-mod, .fo-cab, .login-marca, .pkf-cierre, #lista-subastas-activas, #packs-abiertos.pk-mesa,
#panel-rutas #cp-bot-panel > h3, #panel-rutas #cp-bot-panel .cp-bot-resumen, .as-cab, .ola-banner, .mr-carga.a-bordo,
.precio-actual-box, .in-bloque {
  --foco-color: var(--foco-color-oscuro); --foco: var(--foco-oscuro);
}
:is(.copilot-mod, .fo-cab, .pkf-cierre, #lista-subastas-activas, #packs-abiertos.pk-mesa, .ola-banner, .in-bloque, .oscuro, [data-superficie="carbon"])
  :is(button.action ~ button.action, button.action ~ a.action) { color: var(--sobre-carbon); border-color: var(--sobre-carbon-2); }

/* ===== Copilot del transportista · tanda 1 (T1, T5, T6) · 03/11/2026 · docs/auditorias/2026-11-03-copilot-transportista-ux.md ===== */

/* ---------- T5 · Móvil: la recomendación en la primera pantalla (P0-1) ---------- */
@media (max-width: 640px) {
  /* Fuera las capas de ayuda que empujan la decisión hacia abajo. La frase «El Copilot nunca acepta ni puja por ti»
     sigue en el pie del Resumen (.cs-nota), también con «Toda la flota» (recomendacionFlotaHTML, M-14). */
  #panel-rutas .intro-pestana[data-intro="copilot"],
  #panel-rutas .cp-seccion[data-cp="resumen"] > .cp-explica,
  #panel-rutas details.cp-como { display: none; }
  /* El botón flotante del Copilot repite el destino de la barra inferior y tapa «Ir a una base» (auditoría 31) */
  body:has(#panel-rutas:not(.hidden)) #mascota-flotante { display: none; }
  /* «Mi jornada» en una sola línea. Solo se recorta el texto (.tj-txt); la acción del botón («Indicar mis horas»,
     «Actualizar») se ve siempre entera, y el botón no se recorta, así que el foco tampoco (WCAG 2.4.11). El texto
     completo sigue en el title del botón y en la pestaña Jornada. */
  #panel-rutas .tira-jornada { margin: 0 0 var(--e-2); }
  #panel-rutas .tira-jornada .tj-boton { flex-wrap: nowrap; }
  #panel-rutas .tira-jornada .tj-txt { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
  #panel-rutas .tira-jornada .tj-txt > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* La segunda línea no se oculta (segunda revisión, R2-I2): lleva el límite del día y los avisos de normativa
     («te toca la pausa de 45 min», «revisa tu registro»). Se recorta con puntos suspensivos y, si trae un aviso
     (<strong>), en móvil se enseña solo el aviso en lugar del resto de la línea. El lector de pantalla la lee entera. */
  #panel-rutas .tira-jornada .tj-txt { gap: 0 var(--e-2); }
  #panel-rutas .tira-jornada .tj-txt > b { flex: 0 1 auto; }
  #panel-rutas .tira-jornada .tj-txt > span { flex: 1 1 0; min-width: 0; }
  #panel-rutas .tira-jornada .tj-txt > span:has(strong) { font-size: 0; flex: 0 1 auto; }
  #panel-rutas .tira-jornada .tj-txt > span:has(strong) strong { font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--texto); }
  #panel-rutas .tira-jornada .tj-txt > span:has(strong) strong + strong { margin-inline-start: var(--e-2); }
  #panel-rutas .tira-jornada .tj-accion { flex: 0 0 auto; white-space: nowrap; }
  /* La línea de frescura, debajo del título y sin empujar */
  #panel-rutas .cp-frescura { flex-basis: 100%; margin: 0; }
}

/* ---------- T1 · Frescura y errores con reintento ---------- */
#panel-rutas .cp-titulo .cp-frescura { margin-block: 0; margin-inline: auto 0; font-size: var(--t-xs); color: var(--texto-2); }
#panel-rutas .cp-frescura:empty { display: none; }
#panel-rutas .cp-frescura-error { color: var(--error); }
#panel-rutas .cp-frescura .btn-link { margin-inline-start: var(--e-2); }
#panel-rutas .cp-frescura:focus, #panel-rutas .cp-seccion:focus { outline: none; }             /* foco programático tras «Reintentar»: no se pinta */
/* Error de un bloque: el filete de aviso del sistema (--aviso), en el lado de inicio de línea (RTL incluido) */
#panel-rutas .cp-error { padding-block: var(--e-3); padding-inline: var(--e-4) 0; border-inline-start: 3px solid var(--aviso); }
#panel-rutas .cp-reintentar[aria-disabled="true"] { cursor: progress; opacity: .7; }
#panel-rutas .cp-error p { margin: 0 0 var(--e-2); }
#panel-rutas .cp-error .cp-error-tit { color: var(--texto); }
#panel-rutas .cp-elige-camion p { margin: 0 0 var(--e-3); }
#panel-rutas .cp-elige-lista { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* ---------- T6 · Controles reales en lugar de div onclick ---------- */
/* Cabecera de una carga suelta: ahora es un <button class="btn-link cr-op-cab"> que despliega el detalle */
#cr-oportunidades .cr-op { cursor: default; }
#cr-oportunidades button.cr-op-cab { display: flex; justify-content: space-between; width: 100%; text-align: start; text-decoration: none; color: inherit; cursor: pointer; }
#cr-oportunidades button.cr-op-cab:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
/* El recorrido de la tarjeta del Resumen es un enlace real (abre la subasta) */
.cs-carta .cs-ruta-enlace { color: inherit; text-decoration: none; }
@media (hover: hover) { .cs-carta .cs-ruta-enlace:hover { text-decoration: underline; } }
.cs-carta .cs-ruta-enlace:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
/* Exigencia de los avisos: las tarjetas de modo son <button> (antes div onclick sin foco) */
button.modo-card { background: transparent; color: inherit; margin: 0; min-height: var(--control-h); font: inherit; font-size: var(--t-sm); font-weight: var(--peso-fuerte); }
button.modo-card.selected { background: var(--yellow-tint, var(--marca-amarillo-suave)); }
button.modo-card:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }

/* ===================== Fichas del cargador (04/11/2026): ofrecer, documentación, seguimiento y última milla ===================== */
/* Ofrecer y programar: grupos con su leyenda (no versalitas), radios con texto en dos líneas, fecha dd/mm/aaaa + hh:mm */
.of-objeto { margin: 0 0 var(--e-2); display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: baseline; }
.of-a-quien { margin: 0 0 var(--e-4); }
.of-grupo { border: 0; padding: 0; margin: 0 0 var(--e-4); min-inline-size: 0; }
.prog-oferta .of-grupo { border-block-start: 1px solid var(--separador); padding-block-start: var(--e-4); }
.of-sub { padding: 0; margin: 0 0 var(--e-3); font-size: var(--t-base); font-weight: var(--peso-fuerte); color: var(--texto); }
.oferta-modo > span { display: flex; flex-direction: column; gap: var(--e-0-5); }
.olas-opcion.urgente:has(input:checked) { border-color: var(--aviso); background: var(--aviso-fondo); }
.prog-plan { border: 0; border-inline-start: 3px solid var(--marca-amarillo); border-radius: 0; padding-block: var(--e-1); padding-inline: var(--e-3) 0; margin: 0 0 var(--e-4); }
.prog-plan-texto { display: flex; flex-direction: column; gap: var(--e-0-5); margin: 0 0 var(--e-1); }
.prog-plan .btn-mini { margin-block-start: var(--e-2); min-block-size: var(--diana-min); }
.prog-fecha-campos { display: grid; grid-template-columns: minmax(0, 12ch) minmax(0, 8ch); gap: var(--e-3); }
.prog-fecha-campos input { font-variant-numeric: tabular-nums; }
.prog-aviso strong { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
.modal-actions #btn-ofrecer, .modal-actions #btn-guardar-fecha-oferta, .modal-actions #btn-crear-operacion { margin-top: 0; }
.ventana-accion .va-cifras .va-total dt, .ventana-accion .va-cifras .va-total dd { font-weight: var(--peso-fuerte); border-block-end: 0; }
@media (max-width: 640px) { .prog-fecha-campos { grid-template-columns: 1fr 1fr; } }

/* Documentación: zona propia para elegir o soltar el archivo; el control del navegador va encima, invisible */
.etiqueta-campo { display: block; margin: var(--e-3) 0 var(--e-1); font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--texto); }
.zona-archivo { position: relative; min-block-size: 96px; border: 1px dashed var(--borde-fuerte); border-radius: var(--r-md); background: var(--superficie); }
.zona-archivo:hover { background: var(--superficie-hover); }
.zona-archivo:focus-within { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--texto); }
.zona-archivo-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zona-archivo-caja { display: flex; align-items: center; justify-content: center; gap: var(--e-3); min-block-size: 96px; padding: var(--e-3); pointer-events: none; }
.zona-archivo-textos { display: flex; flex-direction: column; gap: var(--e-0-5); }
.zona-archivo-textos span { font-size: var(--t-sm); color: var(--texto-2); }
.doc-ayuda { margin: var(--e-1) 0 0; overflow-wrap: anywhere; }
.req-lista li { grid-template-columns: minmax(0, 1fr); }
.doc-item .btn-mini { white-space: nowrap; }

/* Seguimiento: encabezados de fase y de bloque en tipo de frase (antes, versalitas) y lista alcanzable con teclado */
.sg-seccion { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: var(--peso-fuerte); color: var(--texto-2); }
.sg-sub { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--texto); }
.seguimiento-item:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.sg-equipo { margin-block-start: var(--e-2); }

/* Última milla: la referencia es un dato, no un enlace (el detalle se abre con «Ver detalle») */
.um-ref { cursor: default; text-decoration: none; font-weight: var(--peso-fuerte); }
.um-fila-cab .estado { margin-inline-start: auto; }
.um-det-cab .estado { margin-inline-start: var(--e-2); }

/* Centros y semirremolques (ficha cargador-centros, 04/11/2026): filas con un solo «⋯» de 44 px */
.perfil-lista .lista-filas { margin: 0; }
.perfil-fila .fl-accion .perfil-mas { min-block-size: var(--diana-min); min-inline-size: var(--diana-min); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.perfil-notas { min-block-size: 64px; }