/* ════════════════════════════════════════════════════════════════════════════════════
   CLIENTES — lista, alta/edicion y perfil, con la estetica del sistema (17/09/2026,
   item 5 del orden de estetica). Mismo criterio que Guias / Liquidaciones: barra de
   filtros, tarjetas con cabecera azul suave, chips de estado, botones con borde y el
   principal en coral. Tokens de main.css.

   ⚠ LO QUE NO SE TOCA: los ids del editor de la matriz (#tarifas-*, .tarifas-*, .t-*),
   del tarifario (#tarifario-*) y de las cotizaciones (.ctz-*): ese JS sigue igual. Lo de
   abajo de "MATRIZ Y TARIFARIO" es el CSS que vivia adentro de clientes-perfil.html,
   mudado aca tal cual.
   ════════════════════════════════════════════════════════════════════════════════════ */

:root { --cli-verde:#15803d; --cli-verde-suave:#dcfce7; --cli-ambar:#b45309; --cli-ambar-suave:#fef3c7;
  --cli-azul-suave:#eaf1f8; --cli-coral:#f26a4b; --cli-coral-oscuro:#d9573a; --cli-violeta:#5b21b6; --cli-violeta-suave:#ede9fe; }

/* ── Botones ───────────────────────────────────────────────────────────────────── */
.btn-outline { background:#fff; color:var(--color-primary); border:1px solid var(--color-primary); }
.btn-outline:hover { background:var(--cli-azul-suave); }
.btn-outline:disabled { opacity:.5; cursor:not-allowed; }
.btn-coral { background:var(--cli-coral); color:#fff; font-weight:700; border-radius:8px; box-shadow:0 3px 10px rgba(242,106,75,.3); }
.btn-coral:hover { background:var(--cli-coral-oscuro); }
.btn-coral:disabled { opacity:.6; cursor:wait; box-shadow:none; }
.btn-ghost { background:transparent; color:var(--color-primary); border:1px dashed var(--color-border); }
.btn-ghost:hover { background:#f1f5f9; border-color:var(--color-primary); }
.btn-peligro { background:#fff; color:var(--color-danger); border:1px solid #fca5a5; }
.btn-peligro:hover { background:#fef2f2; }

/* ── Chips ─────────────────────────────────────────────────────────────────────── */
.cli-chip { display:inline-block; padding:.16rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700; white-space:nowrap; line-height:1.5; }
.cli-chip.cobro { background:var(--cli-azul-suave); color:var(--color-primary); }
.cli-chip.activo { background:var(--cli-verde-suave); color:var(--cli-verde); }
.cli-chip.inactivo { background:#f1f5f9; color:#64748b; }
.cli-chip.fact { background:#f1f5f9; color:#475569; font-weight:600; }
.cli-chip.kg { background:var(--cli-violeta-suave); color:var(--cli-violeta); }
.cli-chip.matriz { background:var(--cli-azul-suave); color:var(--color-primary); }
.cli-chip.sin-margen { background:var(--cli-ambar-suave); color:var(--cli-ambar); }
.cli-chip.courier-DHL { background:#fdf3c4; color:#7a5a00; }
.cli-chip.courier-UPS { background:#efe6e2; color:#5a3a2c; }
.cli-chip.liquidado { background:var(--cli-verde-suave); color:var(--cli-verde); }
.cli-chip.pendiente { background:var(--cli-ambar-suave); color:var(--cli-ambar); }
.cli-chip.no_volo { background:#8c2f26; color:#fff; }
.guia-num { font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:600; color:var(--color-primary); }
.cuit { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.84rem; color:var(--color-muted); white-space:nowrap; }

/* ── Cabecera de pagina: pildora + boton ───────────────────────────────────────── */
.cli-cab-acciones { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.cli-pill { font-size:.76rem; font-weight:700; padding:.3rem .75rem; border-radius:999px; background:var(--cli-azul-suave);
  color:var(--color-primary); border:1px solid #c9d8e8; }
.cli-pill:empty { display:none; }

/* ── Barra de filtros ──────────────────────────────────────────────────────────── */
.cli-toolbar { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; padding:.9rem 1.1rem; background:#fbfcfe;
  border:1px solid var(--color-border); border-radius:10px; margin-bottom:1rem; }
.cli-toolbar .form-group { min-width:130px; margin:0; }
.cli-toolbar .form-group.ancho { flex:1 1 320px; max-width:460px; }
.cli-toolbar label { font-size:.7rem; letter-spacing:.4px; }
.cli-toolbar input, .cli-toolbar select { padding:.45rem .6rem; border-radius:6px; font-size:.9rem; background:#fff; }
.cli-toolbar input:focus, .cli-toolbar select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(42,54,97,.12); }
.cli-toolbar .cuenta { font-size:.78rem; color:var(--color-muted); white-space:nowrap; align-self:center; margin-left:auto; }
.cli-segmentos { display:flex; gap:.35rem; flex-wrap:wrap; }
.cli-seg { padding:.35rem .7rem; border-radius:999px; border:1px solid var(--color-border); background:#fff; font:inherit; font-size:.8rem;
  color:var(--color-muted); cursor:pointer; }
.cli-seg:hover { border-color:#b9c2d0; }
.cli-seg.on { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }

/* ── Lista ─────────────────────────────────────────────────────────────────────── */
.cli-lista { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.cli-tabla { width:100%; border-collapse:separate; border-spacing:0; font-size:.88rem; }
.cli-tabla th { text-align:left; font-weight:600; color:var(--color-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.3px;
  padding:.55rem .75rem; background:#f8fafc; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.cli-tabla td { padding:.6rem .75rem; vertical-align:middle; border-bottom:1px solid #eef2f7; }
.cli-tabla tbody tr:hover td { background:#fafbfd; }
.cli-tabla tbody tr:last-child td { border-bottom:0; }
.cli-tabla tbody tr.inactivo td { opacity:.6; }
.cli-tabla td.n, .cli-tabla th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cli-tabla .empty { padding:2rem; }
.cli-nombre { font-weight:700; color:var(--color-primary); min-width:180px; }
.cli-nombre a { color:inherit; text-decoration:none; }
.cli-nombre a:hover { text-decoration:underline; }
.cli-sub { display:block; font-size:.78rem; color:var(--color-muted); font-weight:400; margin-top:1px; }
.cli-contacto small { display:block; color:var(--color-muted); }
.cli-tabla td.acciones { white-space:nowrap; text-align:right; }
.cli-tabla td.acciones .btn { margin-left:.35rem; }
.cli-tabla .btn-sm { padding:.28rem .55rem; font-size:.8rem; border-radius:6px; }
a.btn, a.btn:hover { text-decoration:none; }

/* ── Formulario nuevo / editar (en la lista) ───────────────────────────────────── */
.cli-form { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:1rem; }
.cli-form-cab { display:flex; align-items:center; gap:.9rem; padding:.9rem 1.25rem; background:linear-gradient(90deg,var(--cli-azul-suave),#fff 70%); border-bottom:1px solid var(--color-border); }
.cli-form-cab h3, .cli-form-cab h2 { margin:0; font-size:1rem; color:var(--color-primary); }
.cli-form-cab p { margin:.1rem 0 0; font-size:.8rem; color:var(--color-muted); }
.cli-form-cuerpo { padding:1rem 1.25rem 1.25rem; display:grid; gap:1.1rem; }
.cli-sec h4 { margin:0 0 .6rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--color-muted); font-weight:700;
  display:flex; align-items:center; gap:.5rem; }
.cli-sec h4::after { content:''; flex:1; border-top:1px solid #eef2f7; }
.cli-sec h4 .btn { text-transform:none; letter-spacing:0; font-weight:500; }
.cli-sec-nota { font-size:.78rem; color:var(--color-muted); margin:-.3rem 0 .6rem; }
.cli-grid { display:grid; gap:.75rem 1rem; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.cli-grid .form-group { margin:0; min-width:0; }
.cli-grid .form-group.full { grid-column:1 / -1; }
.cli-grid label { font-size:.7rem; letter-spacing:.4px; }
.cli-grid input, .cli-grid select { padding:.45rem .6rem; border-radius:6px; font-size:.9rem; background:#fff; width:100%; min-width:0; }
.cli-grid input:focus, .cli-grid select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(42,54,97,.12); }
.cli-hint { font-size:.76rem; color:var(--color-muted); margin-top:.15rem; }
.cli-form-pie { display:flex; gap:.5rem; justify-content:flex-end; align-items:center; padding:.9rem 1.25rem; border-top:1px solid var(--color-border); background:#fbfcfe; flex-wrap:wrap; }
.cli-form-pie .izq { margin-right:auto; }

/* ── Perfil: cabecera ──────────────────────────────────────────────────────────── */
.per-cab { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:var(--shadow);
  padding:1.1rem 1.4rem; display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; border-left:5px solid var(--cli-coral); }
.per-cab.inactivo { border-left-color:#94a3b8; }
.per-avatar { width:52px; height:52px; border-radius:12px; background:var(--color-primary); color:#fff; font-weight:800; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.per-titulo { flex:1 1 260px; min-width:0; }
.per-titulo h1 { margin:0; font-size:1.35rem; color:var(--color-primary); line-height:1.2; overflow-wrap:anywhere; }
.per-titulo .razon { color:var(--color-muted); font-size:.86rem; margin-top:.15rem; overflow-wrap:anywhere; }
.per-chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.per-acciones { display:flex; gap:.5rem; flex-wrap:wrap; }
.per-acciones .btn { border-radius:8px; }
.per-nav { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1rem; }
.per-nav a { padding:.4rem .85rem; border-radius:999px; border:1px solid var(--color-border); background:#fff; font-size:.82rem;
  color:var(--color-muted); text-decoration:none; font-weight:500; }
.per-nav a:hover { border-color:var(--color-primary); color:var(--color-primary); }

/* ── Perfil: tarjetas de numeros ───────────────────────────────────────────────── */
.per-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.9rem; margin-bottom:1.1rem; }
.per-kpi { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:var(--shadow); padding:.85rem 1rem; }
.per-kpi .k { font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--color-muted); font-weight:700; }
.per-kpi .v { font-size:1.35rem; font-weight:800; color:var(--color-primary); margin-top:.15rem; font-variant-numeric:tabular-nums; }
.per-kpi .s { font-size:.74rem; color:var(--color-muted); }
.per-kpi.verde .v { color:var(--cli-verde); }
.per-kpi.ambar .v { color:var(--cli-ambar); }

/* ── Perfil: layout y tarjetas ─────────────────────────────────────────────────── */
.per-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:1.1rem; align-items:start; }
@media (max-width:1000px) { .per-layout { grid-template-columns:minmax(0,1fr); } }
.per-col { display:flex; flex-direction:column; gap:1.1rem; min-width:0; }
.per-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; scroll-margin-top:1rem; }
.per-card-cab { display:flex; align-items:center; gap:.75rem; padding:.8rem 1.1rem; background:linear-gradient(90deg,var(--cli-azul-suave),#fff 70%);
  border-bottom:1px solid var(--color-border); flex-wrap:wrap; }
.per-card-cab > div:first-child { flex:1 1 200px; min-width:0; }
.per-card-cab h2, .per-card-cab h3 { margin:0; font-size:.95rem; color:var(--color-primary); }
.per-card-cab p { margin:.1rem 0 0; font-size:.78rem; color:var(--color-muted); }
.per-card-cab .btn { border-radius:6px; }
.per-card-cab select { font-size:.8rem; padding:.3rem .5rem; width:auto; border-radius:6px; }
.per-card-cuerpo { padding:.9rem 1.1rem 1.1rem; }
.per-card-cuerpo.sin-pad { padding:0; }

/* Ficha: campos rotulados; en edicion se convierten en inputs (mismo id pf-*) */
.per-ficha { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem 1rem; }
.per-ficha-sec { grid-column:1 / -1; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--color-muted); font-weight:700;
  display:flex; align-items:center; gap:.5rem; margin-top:.35rem; }
.per-ficha-sec::after { content:''; flex:1; border-top:1px solid #eef2f7; }
.per-ficha-sec:first-child { margin-top:0; }
.info-field { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.info-field.full { grid-column:1 / -1; }
.info-field .field-label { font-size:.66rem; text-transform:uppercase; letter-spacing:.4px; color:var(--color-muted); font-weight:600; }
.info-field .field-value { font-size:.9rem; color:var(--color-text); font-weight:500; overflow-wrap:anywhere; }
.info-field .field-value.vacio { color:#94a3b8; font-weight:400; }
.info-field .field-value.falta { color:var(--cli-ambar); font-weight:700; }
.info-field input, .info-field select { display:none; padding:.4rem .55rem; border:1px solid var(--color-border); border-radius:6px; font:inherit; font-size:.88rem; width:100%; min-width:0; }
.info-field.editing .field-value { display:none; }
.info-field.editing input, .info-field.editing select { display:block; }
.info-field input:focus, .info-field select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(42,54,97,.12); }
.per-ficha-aviso { grid-column:1 / -1; font-size:.8rem; color:var(--cli-ambar); background:var(--cli-ambar-suave); border-radius:8px; padding:.5rem .75rem; }
.per-ficha-aviso:empty { display:none; }

/* Tablas del perfil */
.per-tabla { width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; }
.per-tabla th { text-align:left; font-weight:600; color:var(--color-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.3px;
  padding:.5rem .6rem; background:#f8fafc; border-bottom:1px solid var(--color-border); white-space:nowrap; }
.per-tabla td { padding:.5rem .6rem; vertical-align:middle; border-bottom:1px solid #eef2f7; }
.per-tabla tbody tr:hover td { background:#fafbfd; }
.per-tabla tbody tr:last-child td { border-bottom:0; }
.per-tabla tbody tr.no-volo td { opacity:.55; }
.per-tabla td.n, .per-tabla th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.per-tabla td.util { color:var(--cli-verde); font-weight:600; }
.per-tabla .empty { padding:1.5rem; }

/* Listas (direcciones, libretas, links) */
.per-lista { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.per-lista li { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--color-border); border-radius:8px; font-size:.86rem; background:#fff; }
.per-lista li .txt { flex:1; min-width:0; overflow-wrap:anywhere; }
.per-lista li small { display:block; color:var(--color-muted); font-size:.74rem; }
.per-lista li .code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; color:var(--color-primary); }
.per-lista li.vacio { border-style:dashed; color:var(--color-muted); justify-content:center; }
.btn-borrar-dir { background:none; border:none; padding:.2rem .4rem; cursor:pointer; color:#cbd5e1; font-size:.9rem; border-radius:4px; line-height:1; }
.btn-borrar-dir:hover:not(:disabled) { color:var(--color-danger); background:#fef2f2; }
.btn-borrar-dir:disabled { opacity:.3; cursor:default; }
.badge-principal { display:inline-block; padding:.1rem .45rem; border-radius:999px; font-size:.68rem; font-weight:700; background:var(--cli-azul-suave); color:var(--color-primary); }
.per-add { display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; margin-top:.6rem; background:none; border:1px dashed #b9c2d0;
  border-radius:6px; color:var(--color-muted); cursor:pointer; padding:.5rem .9rem; font:inherit; font-size:.86rem; }
.per-add:hover { border-color:var(--color-primary); color:var(--color-primary); background:#f7f9fd; }
#add-dir-form { display:none; margin-top:.6rem; }
#add-dir-form.visible { display:flex; gap:.5rem; align-items:center; }
#add-dir-form input { flex:1; padding:.45rem .6rem; border:1px solid var(--color-border); border-radius:6px; font:inherit; }
.links-list { list-style:none; margin:0; padding:0; }
#link-form { display:flex; gap:.5rem; align-items:end; flex-wrap:wrap; margin-top:.75rem; }
#link-form label { font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--color-muted); }
#link-form select, #link-form input[type="number"] { padding:.4rem .5rem; border:1px solid var(--color-border); border-radius:6px; font:inherit; font-size:.86rem; }
#link-form .lbl-check { font-size:.82rem; display:flex; align-items:center; gap:5px; padding-bottom:.45rem; text-transform:none; letter-spacing:0; color:var(--color-text); }

/* Resumen de la matriz (lo que se cobra), arriba de la grilla de edicion */
.tarifas-resumen { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.6rem; margin-bottom:.8rem; }
.tarifas-serv { border:1px solid var(--color-border); border-radius:8px; padding:.6rem .75rem; font-size:.82rem; }
.tarifas-serv b { display:block; color:var(--color-primary); }
.tarifas-serv .cli-chip { margin-top:.3rem; }
.tarifas-extra { display:flex; gap:1.25rem; flex-wrap:wrap; font-size:.82rem; color:var(--color-muted); }
.tarifas-extra b { color:var(--color-text); }

/* Grafico */
.chart-mensual-wrap { position:relative; height:240px; width:100%; }
#chart-mensual.hidden { display:none; }

/* ── Telefono ──────────────────────────────────────────────────────────────────── */
@media (max-width:640px) {
  .cli-toolbar { padding:.75rem .8rem; }
  .cli-toolbar .form-group { min-width:0; flex:1 1 45%; }
  .cli-toolbar .cuenta { margin-left:0; width:100%; }
  .cli-lista .table-wrap { overflow-x:auto; }
  .cli-form-cuerpo { padding:.8rem .8rem 1rem; }
  .per-cab { padding:.9rem 1rem; gap:.8rem; }
  .per-acciones { width:100%; }
  .per-acciones .btn { flex:1; }
  .per-card-cuerpo { padding:.8rem .8rem 1rem; }
  .per-tabla { font-size:.8rem; }
}

/* ════════════════════════════════════════════════════════════════════════════════════
   MATRIZ Y TARIFARIO — lo que vivia adentro de clientes-perfil.html, tal cual.
   ════════════════════════════════════════════════════════════════════════════════════ */
/* Matriz de tarifas (profit) — clases propias, no reusar .info-field ni ids pf- */
.tarifas-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.tarifas-general { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tarifas-general label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.tarifas-general input { width: 130px; }
.tarifas-grid-wrap { overflow-x: auto; }
table.tarifas-grid { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
table.tarifas-grid th, table.tarifas-grid td { border: 1px solid var(--color-border); padding: 0.35rem 0.5rem; text-align: center; }
table.tarifas-grid th { background: #f8fafc; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
table.tarifas-grid td.banda-label { background: #f8fafc; font-weight: 600; color: var(--color-text); white-space: nowrap; text-align: left; }
td.tarifa-cell { cursor: pointer; position: relative; }
td.tarifa-cell.heredado { color: var(--color-muted); }
td.tarifa-cell.propio { color: var(--color-text); font-weight: 600; background: #eff6ff; }
td.tarifa-cell .cell-del { position: absolute; top: 1px; right: 2px; font-size: 0.7rem; color: var(--color-muted); cursor: pointer; line-height: 1; }
td.tarifa-cell .cell-del:hover { color: var(--color-danger); }
td.tarifa-cell input { width: 60px; font-size: 0.8rem; padding: 0.1rem; text-align: center; }
/* Modo de tarifa (porcentaje / precio por kilo) y fuel propio del cliente */
.tarifas-modo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.tarifas-modo label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.tarifas-modo input { width: 150px; }
.tarifas-hint { font-size: 0.78rem; color: var(--color-muted); flex-basis: 100%; }
.tarifas-rangos { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.tarifas-rangos label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.tarifas-rangos input { width: 90px; }
table.tarifas-grid td.banda-label .rango-del { float: right; font-size: 0.75rem; color: var(--color-muted); cursor: pointer; padding-left: 0.5rem; }
table.tarifas-grid td.banda-label .rango-del:hover { color: var(--color-danger); }
/* Celda sin precio por kilo cargado: ese peso y esa zona se cobran con el PORCENTAJE
   de ganancia del cliente. No es un agujero, es el caso mixto, asi que se muestra
   distinto de un valor cargado pero sin pinta de error. */
td.tarifa-cell.por-pct { color: var(--color-muted); font-style: italic; background: #fafafa; }
table.tarifas-grid th.col-todas, table.tarifas-grid td.col-todas { border-right: 2px solid var(--color-border-strong, #b9c2d0); background: #fcfdff; }
table.tarifas-grid td.col-todas.propio { background: #eff6ff; }
table.tarifas-grid tr.fila-vieja td { background: #fffbeb; }
table.tarifas-grid tr.fila-vieja td.col-todas.propio { background: #fef3c7; }
.tramo-viejo { font-size: 0.65rem; font-weight: 600; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; border-radius: 10px; padding: 0 0.35rem; margin-left: 0.35rem; cursor: help; }
td.celda-vieja { color: var(--color-muted); cursor: help; }
.tarifas-rangos select { width: auto; font-size: 0.8rem; padding: 0.25rem 0.4rem; }

/* ── Matriz unificada (13/08): todos los servicios de corrido, sin pestañas ── */
.tarifas-bar { position: sticky; top: 0; z-index: 20; background: #fff;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 0.6rem; }
.tarifas-bar .tab { border: 1px solid var(--color-border); background: #fff; color: var(--color-muted);
  border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.tarifas-bar .tab:hover { border-color: #2a78d6; }
.tarifas-bar .tab.active { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.tarifas-bar .sep { width: 1px; height: 18px; background: var(--color-border); margin: 0 0.2rem; }
.tarifas-key { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-muted); font-size: 0.72rem; }
.tarifas-key .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; border: 1px solid rgba(11,11,11,.18); }
.tarifas-key .dot.p { background: #eff6ff; }
.tarifas-key .dot.h { background: repeating-linear-gradient(45deg,#eceae4 0 3px,#fff 3px 6px); }
.tarifas-key .dot.v { background: transparent; border-style: dashed; }
.tarifas-key .dot.z { background: #fdf2f2; border-color: rgba(208,59,59,.45); }
.tarifas-alerta { display: none; background: #fdf2f2; border: 1px solid rgba(208,59,59,.22);
  border-radius: 10px; padding: 0.55rem 0.8rem; margin: 0.4rem 0 0.2rem;
  font-size: 0.78rem; color: #7c2222; }
.tarifas-alerta b { color: #5e1717; }
.tarifa-seccion { background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  margin-top: 1rem; overflow: hidden; scroll-margin-top: 64px;
  box-shadow: 0 1px 2px rgba(11,11,11,.05), 0 4px 14px rgba(11,11,11,.04); }
.tarifa-sec-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1rem 0.6rem; flex-wrap: wrap; }
.tarifa-sec-head h3 { margin: 0; font-size: 0.95rem; font-weight: 650; }
.serv-chip { width: 34px; height: 22px; border-radius: 5px; display: inline-grid; place-items: center;
  font-size: 0.6rem; font-weight: 800; letter-spacing: .02em; }
.serv-chip.dhl { background: #ffcc00; color: #b00; }
.serv-chip.ups { background: #351c15; color: #ffb500; }
.tipo-tag { font-size: 0.66rem; font-weight: 700; color: #184f95; background: #e8f1fc;
  border-radius: 6px; padding: 0.15rem 0.5rem; text-transform: uppercase; letter-spacing: .05em; }
.tarifa-general-linea { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--color-muted); }
.tarifa-general-linea input { width: 90px; font-size: 0.8rem; padding: 0.15rem 0.3rem; }
.tarifa-impo-vacia { padding: 0.4rem 1rem 0.8rem; color: var(--color-muted); font-size: 0.78rem; }
.tarifa-impo-vacia a { cursor: pointer; color: #2a78d6; text-decoration: underline; }
.tarifa-seccion .tarifas-grid-wrap { padding: 0 0.6rem 0.6rem; }
/* Conmutador: vista de lo que se cobra / edición de una tabla concreta. */
.tarifas-vista { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0.2rem; }
.tarifas-vista .vista-btn { border: 1px solid var(--color-border); background: #fff; color: var(--color-muted);
  border-radius: 8px; padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.tarifas-vista .vista-btn.on { background: #2A3661; border-color: #2A3661; color: #fff; }
.tarifas-vista .vista-btn:hover:not(.on) { border-color: #2a78d6; }
td.tarifa-cell.heredado { background: repeating-linear-gradient(45deg,#f7f6f2 0 5px,transparent 5px 10px); }
td.tarifa-cell.heredado.sin-valor { background: none; }
td.tarifa-cell.cero { background: #fdf2f2; }
td.tarifa-cell.cero .cell-val { color: #d03b3b; font-weight: 650; }

/* ── Panel del tarifario para el cliente ───────────────────────────────── */
.tarifario-modal { position: fixed; inset: 0; background: rgba(20,26,36,.55);
  z-index: 900; display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; }
.tarifario-modal.hidden { display: none; }
.tarifario-caja { background: #fff; border-radius: 12px; width: 100%; height: 96vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.tarifario-caja > header { display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1.1rem; border-bottom: 1px solid #e5e8ee; }
.tarifario-caja > header h2 { margin: 0; font-size: 1.05rem; }
.tarifario-cuerpo { display: flex; flex: 1; min-height: 0; }
.tarifario-opciones { width: 330px; flex: 0 0 330px; overflow-y: auto;
  padding: 0.9rem 1rem 0; border-right: 1px solid #e5e8ee; background: #fafbfc; }
.tarifario-preview { flex: 1; min-width: 0; background: #eceaf0; }
.tarifario-preview iframe { width: 100%; height: 100%; border: 0; }
.t-grupo { margin-bottom: 1.1rem; }
.t-grupo h3 { margin: 0 0 0.45rem; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: .06em; color: #6b7688; }
.t-escenarios { display: flex; flex-direction: column; gap: 0.3rem; }
.t-esc, .t-rango { text-align: left; background: #fff; border: 1px solid #d7dce4;
  border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.8rem; cursor: pointer; }
.t-esc.active, .t-rango.active { background: #2A3661; border-color: #2A3661; color: #fff; font-weight: 600; }
.t-ayuda { margin: 0.4rem 0 0; font-size: 0.72rem; color: #6b7688; line-height: 1.4; }
/* main.css pone los label en mayúsculas y en negrita para los formularios de carga;
   acá son quince opciones seguidas y así gritan. */
.t-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem;
  padding: 0.15rem 0; cursor: pointer; text-transform: none; font-weight: 400;
  letter-spacing: 0; color: #2c3542; }
.t-check input { margin: 0; }
.t-fila { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.45rem; }
.t-fila label { font-size: 0.75rem; color: #55606f; text-transform: none;
  font-weight: 500; letter-spacing: 0; }
.t-fila input, .t-fila select { border: 1px solid #d7dce4; border-radius: 6px;
  padding: 0.25rem 0.4rem; font-size: 0.8rem; max-width: 150px; }
.t-fila input[type="number"] { width: 70px; }
.t-alerta { background: #fdf3c7; border-left: 4px solid #e6b800; padding: 0.5rem 0.65rem;
  font-size: 0.76rem; border-radius: 0 6px 6px 0; margin-bottom: 0.8rem; line-height: 1.45; }
.t-acciones { display: flex; gap: 0.5rem; position: sticky; bottom: 0;
  background: #fafbfc; padding: 0.6rem 0 0.9rem; border-top: 1px solid #e5e8ee; }
.t-enviados { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto; }
.t-enviados li { display: flex; justify-content: space-between; gap: 0.5rem;
  padding: 0.28rem 0.2rem; font-size: 0.76rem; border-bottom: 1px solid #eef1f5;
  cursor: pointer; border-radius: 4px; }
.t-enviados li:hover { background: #eef4fb; }
.t-enviados li.activo { background: #e1edfb; }
.t-enviados li .t-env-que { color: #2c3542; }
.t-enviados li .t-env-cuando { color: #7a8496; white-space: nowrap; }
.t-enviados li.t-env-vacio { color: #7a8496; cursor: default; border: 0; }
.t-enviados li.t-env-vacio:hover { background: none; }
/* ── Cotizaciones del cliente (mudadas del cotizador el 26/08) ── */
.ctz-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ctz-tabla th { text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: .6px; color: #8a8494; padding: 6px 8px; border-bottom: 1px solid #e6e3ec; }
.ctz-tabla td { padding: 7px 8px; border-bottom: 1px solid #eeecf2; vertical-align: middle; }
.ctz-chip { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; background: #ece9f1; color: #6b6478; font-weight: 700; }
.ctz-chip.aceptada { background: #dcfce7; color: #166534; }
.ctz-chip.vencida, .ctz-chip.rechazada { background: #f3f4f6; color: #9ca3af; }
.ctz-chip.manual { background: #fef3c7; color: #92400e; }
.ctz-acciones { display: flex; flex-direction: column; gap: 4px; }
.ctz-acciones button { font-family: inherit; font-size: 11px; padding: 3px 8px;
  cursor: pointer; border: 1px solid #cfc9da; border-radius: 5px; background: #fff; }
.ctz-acciones button:hover { border-color: #2A3661; }
.ctz-vacio { font-size: 12.5px; color: #8a8494; padding: 6px 2px; }
.ctz-desglose td { background: #fbfafc; }
.ctz-desglose-caja { display: flex; gap: 18px; flex-wrap: wrap; padding: 6px 4px; }
.ctz-desglose-op { min-width: 220px; font-size: 12px; }
.ctz-desglose-op .dg-tit { font-weight: 700; margin-bottom: 4px; color: #2A3661; }
.ctz-desglose-op .dg-row { display: flex; justify-content: space-between; gap: 14px;
  padding: 2px 0; font-family: 'Courier New', monospace; }
.ctz-desglose-op .dg-row.dg-total { border-top: 1px solid #2A3661; font-weight: 700; margin-top: 3px; padding-top: 4px; }
/* Opciones guardadas / no guardadas (10/09) y el botón Aceptada directo. */
.ctz-op-enviada { color: #166534; font-weight: 600; }
.ctz-op-no { color: #9ca3af; }
.ctz-acciones button.ctz-btn-ok { background: #dcfce7; border-color: #86efac; color: #166534; font-weight: 700; }
.ctz-acciones button.ctz-btn-ok:hover { background: #bbf7d0; }
/* "Ver cuadro" y el modal con la imagen para reenviar (10/09). */
.ctz-ver-cuadro { margin-top: 6px; font-family: inherit; font-size: 11px; padding: 3px 8px;
  cursor: pointer; border: 1px solid #2A3661; border-radius: 5px; background: #fff; color: #2A3661; }
.ctz-ver-cuadro:hover { background: #eaf1f8; }
.ctz-cuadro-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 16px; }
.ctz-cuadro-overlay.on { display: flex; }
.ctz-cuadro-box { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-width: 760px; width: 100%; max-height: 95vh; display: flex; flex-direction: column; overflow: hidden; }
.ctz-cuadro-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid #e6e3ec; font-size: 13px; }
.ctz-cuadro-sub { color: #8a8494; font-size: 12px; }
.ctz-cuadro-x { margin-left: auto; background: none; border: none; font-size: 20px; cursor: pointer; color: #8a8494; }
.ctz-cuadro-img { padding: 16px; overflow: auto; background: #f3f4f6; text-align: center; }
.ctz-cuadro-img img { max-width: 100%; height: auto; box-shadow: 0 2px 10px rgba(0,0,0,.12); background: #fff; }
.ctz-cuadro-pie { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #e6e3ec; }
.ctz-cuadro-pie .btn { white-space: nowrap; }
.ctz-cuadro-nota { margin-right: auto; font-size: 11.5px; color: #8a8494; }


/* ── Unir clientes (24/09/2026) ─────────────────────────────────────────────── */
.unir-modal { position:fixed; inset:0; background:rgba(20,26,36,.55); z-index:900; display:flex; align-items:center; justify-content:center; padding:2vh 2vw; }
.unir-modal.hidden { display:none; }
.unir-caja { background:#fff; border-radius:12px; width:min(860px,100%); max-height:94vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.unir-caja > header { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1.1rem; border-bottom:1px solid #e5e8ee; }
.unir-caja > header h2 { margin:0; font-size:1.05rem; color:var(--color-primary); }
.unir-caja > header p { margin:.15rem 0 0; font-size:.78rem; color:var(--color-muted); }
.unir-cuerpo { padding:1rem 1.1rem; overflow-y:auto; }
.unir-cuerpo h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--color-muted); margin:.9rem 0 .45rem; }
.unir-cuerpo h3:first-child { margin-top:0; }
.unir-sug { display:grid; gap:.4rem; }
.unir-sug button { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; padding:.5rem .7rem; border:1px solid var(--color-border); border-radius:8px; background:#fff; font:inherit; cursor:pointer; }
.unir-sug button:hover { border-color:var(--color-primary); background:#f7f9fd; }
.unir-sug button b { color:var(--color-primary); }
.unir-sug button small { color:var(--color-muted); margin-left:auto; white-space:nowrap; }
.unir-sug .vacio { font-size:.85rem; color:var(--color-muted); }
.unir-elige { display:grid; grid-template-columns:1fr auto 1fr; gap:.75rem; align-items:end; }
.unir-elige label { display:block; font-size:.75rem; color:var(--color-muted); margin-bottom:.25rem; }
.unir-elige select { width:100%; padding:.5rem .6rem; border:1px solid var(--color-border); border-radius:6px; font:inherit; }
.unir-elige .flecha { font-size:1.4rem; color:var(--color-muted); padding-bottom:.35rem; }
.unir-lados { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.unir-lado { border:1px solid var(--color-border); border-radius:10px; padding:.7rem .9rem; }
.unir-lado.origen { border-color:#f5c2b8; background:#fff7f5; }
.unir-lado.destino { border-color:#bfd3f2; background:#f5f9ff; }
.unir-lado .rol { font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
.unir-lado.origen .rol { color:#b3412b; }
.unir-lado.destino .rol { color:#1e40af; }
.unir-lado .nombre { font-weight:700; color:var(--color-primary); font-size:1rem; margin:.15rem 0; }
.unir-lado small { display:block; color:var(--color-muted); font-size:.76rem; }
.unir-tabla { width:100%; font-size:.84rem; margin-top:.5rem; }
.unir-tabla td.n { text-align:right; font-variant-numeric:tabular-nums; }
.unir-tabla td.n.cero { color:#b9c2d0; }
.unir-nota { font-size:.8rem; color:var(--color-muted); margin-top:.5rem; }
.unir-confirma { display:flex; align-items:center; gap:.5rem; font-size:.88rem; margin-top:.9rem; cursor:pointer; text-transform:none; letter-spacing:0; color:var(--color-text); font-weight:500; }
.unir-confirma input { width:16px; height:16px; }
.unir-caja .btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.unir-caja > footer { display:flex; justify-content:flex-end; gap:.5rem; padding:.7rem 1.1rem; border-top:1px solid #e5e8ee; background:#fafbfc; }
.unir-resultado { background:#e8f5ec; border:1px solid #bfe3c8; color:#166534; border-radius:8px; padding:.7rem .9rem; font-size:.88rem; }
.unir-resultado ul { margin:.3rem 0 0 1rem; padding:0; }

/* ── Razones sociales en el perfil (24/09/2026) ─────────────────────────────── */
.rs-lista li { align-items:flex-start; flex-wrap:wrap; }
.rs-lista li .txt b { color:var(--color-primary); }
.rs-lista .rs-chips { display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.2rem; }
.rs-lista .rs-chip { font-size:.68rem; padding:.1rem .4rem; border-radius:4px; background:#f1f5f9; color:var(--color-muted); font-weight:600; }
.rs-lista .rs-chip.principal { background:#dbeafe; color:#1e40af; }
.rs-lista .rs-chip.tercero { background:#fef3c7; color:#92400e; }
.rs-lista .rs-chip.inactiva { background:#fdecea; color:#b91c1c; }
.rs-lista .rs-chip.saldo { background:#e8f5ec; color:#166534; }
.rs-lista .rs-acc { display:flex; gap:.3rem; margin-left:auto; }
.rs-lista .rs-acc button { background:none; border:1px solid var(--color-border); border-radius:6px; padding:.2rem .5rem; font:inherit; font-size:.74rem; cursor:pointer; color:var(--color-primary); }
.rs-lista .rs-acc button:hover { background:var(--cli-azul-suave); }
.rs-form { display:none; margin-top:.6rem; padding:.7rem; border:1px dashed #b9c2d0; border-radius:8px; }
.rs-form.visible { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .6rem; }
.rs-form label { font-size:.72rem; color:var(--color-muted); display:block; margin-bottom:.15rem; }
.rs-form input, .rs-form select { width:100%; padding:.4rem .55rem; border:1px solid var(--color-border); border-radius:6px; font:inherit; font-size:.86rem; }
.rs-form .full { grid-column:1 / -1; }
.rs-form .chk { display:flex; align-items:center; gap:.35rem; font-size:.82rem; padding-top:1.1rem; }
.rs-form .acc { grid-column:1 / -1; display:flex; gap:.4rem; justify-content:flex-end; }

/* ── Paso de la tarifa (29/09/2026) ─────────────────────────────────────────────── */
.tarifas-paso { align-items: center; }
.paso-seg { display: inline-flex; border: 1.5px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.paso-seg button { border: none; background: #fff; padding: .35rem .8rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--color-muted); cursor: pointer; }
.paso-seg button + button { border-left: 1.5px solid var(--color-border); }
.paso-seg button.on { background: var(--color-primary); color: #fff; }
#paso-hasta { width: 70px; }
#paso-hasta.hidden, #paso-hasta-lbl.hidden { display: none; }
/* Juegos largos (1 kg / 0,5 kg): la tabla tiene scroll propio con la cabecera y la columna del
   tramo fijas, y un buscador de peso arriba. */
.grid-buscar { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; font-size: .85rem; }
.grid-buscar label { white-space: nowrap; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.grid-buscar-input { width: 90px; padding: .3rem .45rem; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; }
.tarifas-grid-wrap.largo { max-height: 520px; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px; }
.tarifas-grid-wrap.largo table.tarifas-grid thead th { position: sticky; top: 0; z-index: 2; }
.tarifas-grid-wrap.largo table.tarifas-grid td.banda-label { position: sticky; left: 0; z-index: 1; }
.tarifas-grid-wrap.largo table.tarifas-grid th:first-child { left: 0; z-index: 3; }

.unir-nota { color: #b45309; font-size: 11px; }
.rs-mover { display: flex; gap: 6px; align-items: center; margin-top: 6px; width: 100%; font-size: 13px; }
.rs-mover select { flex: 1; min-width: 0; }

/* Escalones al revés en la tarifa (09/10/2026): aviso arriba de la grilla y celdas en rojo. */
.tarifas-saltos { background: #fee2e2; border: 1px solid #fca5a5; border-radius: 10px; padding: .6rem .9rem; margin: .5rem 0 .75rem; font-size: .86rem; color: #7f1d1d; line-height: 1.5; }
.tarifas-saltos ul { margin: .3rem 0 0; padding-left: 1.2rem; }
td.tarifa-cell.salto { background: #fee2e2 !important; color: #b91c1c !important; box-shadow: inset 0 0 0 2px #fca5a5; }