:root {
  --radius: 12px;
  --gap: 16px;
  --maxw: 1440px;
}
/* Marca Racelab (race-lab.cl): navy #16273A, texto #F2F2F2, plata #D8D8D8 y azul #2C5282.
   En oscuro el primario es la plata de los botones del sitio, sobre un navy un punto más
   profundo que el del sitio para que las tarjetas se despeguen del fondo. En claro la plata
   desaparece sobre blanco, así que el primario pasa a ser el navy. */
:root[data-theme="dark"] {
  --bg: #101E2E; --surface: #16273A; --surface-2: #1E3149;
  --text: #F2F2F2; --muted: #93A6BB; --border: #2C3F57;
  --primary: #D8D8D8; --primary-ink: #16273A; --primary-text: #D8D8D8;
  --accent: #4C86C6; --danger: #F87171;
}
:root[data-theme="light"] {
  --bg: #F1F4F8; --surface: #FFFFFF; --surface-2: #F6F8FB;
  --text: #16273A; --muted: #5B7186; --border: #DCE4EE;
  --primary: #16273A; --primary-ink: #F2F2F2; --primary-text: #16273A;
  --accent: #2C5282; --danger: #DC2626;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Títulos, marca y cifras con la fuente display */
h1, h2, h3, .brand, .view h1, .modal-head h2, .stat-value, .kpi-value, .hero-num {
  font-family: "Urbanist", system-ui, -apple-system, sans-serif; letter-spacing: -0.01em;
}
/* Urbanist (la fuente de race-lab.cl) no tiene cifras tabulares: montos, KPI y columnas
   numéricas van en Inter para que los dígitos queden alineados en las tablas. */
.stat-value, .kpi-value, .hero-num, .barlist-val, .ct-sums, .totales, td.right, .right {
  font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.muted { color: var(--muted); }
.small { font-size: 13px; }
.boot { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }
.boot.error { color: var(--danger); text-align: center; padding: 24px; }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }

/* Brand */
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .5px; }
.brand-img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.auth-logo { display: block; width: 84px; height: 84px; object-fit: contain; margin: 0 auto 10px; }
.brand .logo { color: var(--primary-text); }
.brand .os { color: var(--muted); font-weight: 600; }
/* Logo de Racelab pintado por máscara: toma el color del texto del tema (blanco en oscuro,
   navy en claro) desde un solo PNG. Los documentos imprimibles usan el PNG navy directo,
   porque al imprimir los navegadores suelen omitir los fondos. */
.marca-logo { display: block; flex: none; background-color: var(--text);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.marca-logo.corto { width: 104px; height: 20px;
  -webkit-mask-image: url("../public/marca/logo-racelab-corto.png"); mask-image: url("../public/marca/logo-racelab-corto.png"); }
.marca-logo.completo { width: 220px; height: 56px; margin: 4px auto 14px;
  -webkit-mask-image: url("../public/marca/logo-racelab.png"); mask-image: url("../public/marca/logo-racelab.png"); }
.brand .marca-logo.corto { margin-right: 2px; }

/* Botones / inputs */
.btn { border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 10px 16px; border-radius: var(--radius); cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon { display: inline-block; vertical-align: middle; flex: none; }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; width: 100%; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .6; cursor: default; }
.icon-btn { background: transparent; border: 0; color: var(--text); font-size: 18px; cursor: pointer; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
input, select, textarea {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 15px; font-family: inherit; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.btn.xs { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.danger { color: var(--primary-ink); background: var(--danger); border-color: transparent; }
.btn.ghost.danger { background: transparent; color: var(--danger); }
.error { color: var(--danger); font-size: 13px; margin: 8px 0 0; }

/* Login */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.auth-card { width: 100%; max-width: 360px; }
.auth-card .brand { font-size: 28px; margin-bottom: 4px; }

/* Layout */
.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; }
.sidebar .brand { font-size: 22px; padding: 0 8px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 500; }
.nav-item:hover { background: var(--surface-2); }
.nav-item .ico { width: 20px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.sidebar-foot { margin-top: auto; padding: 0 8px; text-transform: capitalize; }
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar .spacer { flex: 1; }
.user { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-ink);
  display: grid; place-items: center; font-weight: 700; }
#menu-toggle { display: none; }
.outlet { padding: 24px; max-width: var(--maxw); width: 100%; }

/* Vistas */
.view h1 { margin: 0 0 16px; font-size: 22px; }
.grid.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { font-size: 26px; font-weight: 700; }

a.card.stat { text-decoration: none; color: var(--text); transition: border-color .15s; }
a.card.stat:hover { border-color: var(--primary); }

/* Control segmentado (filtro de rango del dashboard) */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.segmented button.on { background: var(--primary); color: var(--primary-ink); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { color: var(--muted); font-size: 13px; }
.kpi-value { font-size: 24px; font-weight: 700; }
.trend { font-size: 12px; font-weight: 600; }
.trend .muted { font-weight: 400; }
.trend.up { color: #22c55e; }
.trend.down { color: var(--danger); }
.trend.flat { color: var(--muted); }

/* Paneles de gráfico */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel-head h3 { margin: 0; font-size: 15px; }
.chart-svg { width: 100%; height: auto; display: block; }
.cg-grid { stroke: var(--border); stroke-width: 1; opacity: .6; }
.cg-axis { fill: var(--muted); font-size: 11px; }
.cg-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.cg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cg-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

/* Barras (desgloses por estado) */
.barlist { display: flex; flex-direction: column; gap: 8px; }
.barlist-row { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: 10px; font-size: 13px; }
.barlist-label { color: var(--muted); }
.barlist-track { background: var(--surface-2); border-radius: 999px; height: 8px; overflow: hidden; }
.barlist-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.barlist-val { text-align: right; font-variant-numeric: tabular-nums; }
/* Barras de Cobranza: etiqueta más ancha, valor con subtexto y filas clicables */
.cob-bars .barlist-row { grid-template-columns: minmax(90px,150px) 1fr auto; }
.cob-bars .barlist-label { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barlist-row.clickable { cursor: pointer; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
.barlist-row.clickable:hover { background: var(--surface-2); }
.kpi-card { display: flex; flex-direction: column; gap: 2px; }
/* Chips de etiquetas sugeridas (formulario de cliente) */
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { border: 1px solid rgba(148,163,184,.35); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chip:hover { border-color: var(--primary); }
.chip.active { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.dias-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.dias-pill.dias-ok { background: rgba(22,163,74,.16); color: #16a34a; }
.dias-pill.dias-warn { background: rgba(245,158,11,.18); color: #d97706; }
.dias-pill.dias-danger { background: rgba(239,68,68,.18); color: #ef4444; }
.tot-pago { padding-top: 8px; margin-top: 4px; border-top: 1px dashed rgba(148,163,184,.3); }
.tot-pago .tag-chips { margin-top: 4px; }
/* Gráficos interactivos: línea guía + tooltip con cifras al pasar el mouse */
.ichart { position: relative; }
.ichart .chart-svg { cursor: crosshair; }
.cg-guide { stroke: rgba(148,163,184,.55); stroke-dasharray: 3 3; }
.cg-focus { transition: opacity .08s; }
.chart-tip { position: absolute; top: 6px; background: var(--surface-2); border: 1px solid rgba(148,163,184,.3); border-radius: 8px; padding: 6px 9px; font-size: 12px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.28); z-index: 3; white-space: nowrap; }
.chart-tip .t-lbl { font-weight: 700; margin-bottom: 3px; }
.chart-tip .t-row { display: flex; align-items: center; gap: 6px; }
.chart-tip .t-row i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.chart-tip .t-row b { margin-left: 14px; font-variant-numeric: tabular-nums; }

/* Indicador de conexión / sincronización */
.sync { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 999px; }
.sync.ok { color: #22c55e; }
.sync.pend { color: #f59e0b; }
.sync.off { color: var(--danger); background: rgba(248,113,113,.12); }
@media (max-width: 560px) { .sync { font-size: 0; padding: 4px; } .sync::first-letter { font-size: 14px; } .hide-sm { display: none; } }

/* Encabezados de vista / toolbar */
.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.view-head h1 { margin: 0; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input, .toolbar select { max-width: 340px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-size: 13px; margin-bottom: 4px; }
.back:hover { color: var(--primary-text); }

/* Tablas */
/* Listados: la tabla scrollea dentro de un alto máximo y el encabezado queda fijo,
   así la página no crece "infinito" con muchas filas. */
.table-wrap { overflow: auto; max-height: calc(100vh - 250px); }
.table-wrap .tbl thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; box-shadow: inset 0 -1px 0 var(--border); }
/* En tablas cortas dentro de tarjetas no forzamos scroll molesto */
.card .table-wrap { max-height: 60vh; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl.compact th, .tbl.compact td { padding: 6px 8px; }
.tbl tr.clickable { cursor: pointer; }
.tbl tbody tr.clickable:hover { background: var(--surface-2); }
.tbl .right, .right { text-align: right; }
/* Botones dentro de tablas: no parten el texto en dos líneas */
.tbl .btn { white-space: nowrap; }
.tbl td .acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.acciones { text-align: right; white-space: nowrap; }
.acciones .btn { margin-left: 4px; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.badge.ok { background: rgba(34,197,94,.15); color: #22c55e; border-color: transparent; }
.badge.info { background: rgba(56,189,248,.15); color: #38bdf8; border-color: transparent; }
.badge.warn { background: rgba(245,158,11,.15); color: #f59e0b; border-color: transparent; }
.badge.danger { background: rgba(248,113,113,.15); color: var(--danger); border-color: transparent; }
.badge.muted { background: var(--surface-2); color: var(--muted); }
.badge.done { background: rgba(45,212,191,.16); color: #2dd4bf; border-color: transparent; }

/* Grids de tarjetas */
.grid.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: 15px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-head h3 { margin: 0; }
.card + .card { margin-top: 16px; }

/* Filas de lista (dashboard, vehículos, historial) */
.list-row, .veh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border); }
.list-row:last-child, .veh-row:last-child { border-bottom: 0; }
.list-row.clickable { cursor: pointer; }
.hist-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.consent-row:last-child { border-bottom: 0; }
.empty { padding: 16px; text-align: center; }

/* Definiciones (detalle cliente) */
dl.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
dl.datos dt { color: var(--muted); font-size: 13px; }
dl.datos dd { margin: 0; }

/* Totales */
.card.totales { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.card.totales > div { display: flex; justify-content: space-between; align-items: baseline; }
.card.totales .grande { border-top: 1px solid var(--border); padding-top: 8px; font-size: 18px; }
.card.totales .grande strong { color: var(--primary-text); }
.totales-mini { display: flex; gap: 18px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.totales-mini .grande strong { color: var(--primary-text); }

/* Editor de líneas */
.lineas-editor { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.lineas-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lineas-actions { display: flex; gap: 8px; align-items: center; }
.lineas-actions select { max-width: 220px; }
table.lineas input, table.lineas select { padding: 6px 8px; }
table.lineas .l-cant { width: 70px; }
table.lineas .l-precio { width: 110px; }

/* Formularios en grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .col-2 { grid-column: 1 / -1; }
label.inline { display: flex; align-items: center; gap: 8px; }
label.inline select { width: auto; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: center;
  z-index: 50; padding: 16px; }
.modal { width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; }
.modal.wide { max-width: 720px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* Toast */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.danger { border-left-color: var(--danger); }

/* Responsive */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; transform: translateX(-100%);
    transition: transform .2s; z-index: 20; }
  .layout.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  /* Fondo oscuro al abrir el menú; tocarlo lo cierra (manejado en app.js). */
  .layout.nav-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 15; }
  #menu-toggle { display: inline-block; }
  @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .outlet { padding: 14px; }
  .card { padding: 16px; }
  .toolbar input, .toolbar select { max-width: none; }
}

/* ---- Calendario (vista mensual) ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-title { display: flex; align-items: center; gap: 8px; }
.cal-title h1 { margin: 0; font-size: 20px; min-width: 190px; text-align: center; }
.cal-actions { display: flex; gap: 8px; }
[data-nav="next"] .icon { transform: rotate(180deg); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { margin-bottom: 6px; }
.cal-dow-cell { text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; padding: 2px 0; }

.cal-cell { min-height: 104px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  transition: border-color .12s; overflow: hidden; }
.cal-cell:hover { border-color: var(--primary); }
.cal-cell.fuera { opacity: .45; }
.cal-cell.hoy { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-num { font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-cell.hoy .cal-num { color: var(--primary-text); }
.cal-chips { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-chip { display: block; width: 100%; text-align: left; border: 1px solid var(--border);
  border-left: 3px solid var(--muted); background: var(--surface-2); color: var(--text);
  border-radius: 6px; padding: 2px 6px; font-size: 11px; line-height: 1.35; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip .h { font-weight: 700; }
.cal-chip.ok { border-left-color: #22c55e; }
.cal-chip.info { border-left-color: #38bdf8; }
.cal-chip.warn { border-left-color: #f59e0b; }
.cal-chip.danger { border-left-color: var(--danger); }
.cal-chip.muted { border-left-color: var(--muted); }
.cal-more { font-size: 10px; color: var(--muted); padding-left: 4px; }

@media (max-width: 820px) {
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 74px; padding: 4px; border-radius: 8px; }
  .cal-chip { font-size: 10px; padding: 1px 4px; }
  .cal-title h1 { min-width: 150px; font-size: 18px; }
}

/* ---- Dashboard: rango personalizado + panel de retiros ---- */
.dash-custom { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: -6px 0 16px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dash-custom label.inline { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.dash-custom input { max-width: 170px; }

.kpi.acento { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.kpi.acento .kpi-value { color: var(--primary-text); }

.panel.highlight { border-color: var(--primary); }
.retiros-top { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; margin-bottom: 8px; }
.retiros-hero { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
.retiros-hero .hero-num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--primary-text); }
.retiros-origen { min-width: 0; }
@media (max-width: 820px) {
  .retiros-top { grid-template-columns: 1fr; gap: 12px; }
  .retiros-hero .hero-num { font-size: 36px; }
}

/* ---- Tarjeta de totales (OT / cotización): alineación + toggle IVA ---- */
.totales .tot-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.totales .tot-input { width: 130px; text-align: right; padding: 7px 11px; }
.totales .tot-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; cursor: pointer; user-select: none; white-space: nowrap; margin: 0; }
.totales .tot-toggle input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.totales .tot-iva { border-top: 1px dashed var(--border); padding-top: 11px; }

/* Totales del formulario de cotización */
.cotiz-totales { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.ct-inputs { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ct-inputs > label { margin: 0; font-size: 12px; color: var(--muted); }
.ct-inputs input[type="number"] { width: 120px; text-align: right; }
.ct-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; padding-bottom: 8px; }
.ct-toggle input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.ct-sums { display: flex; align-items: baseline; gap: 16px; font-size: 14px; }
.ct-sums .ct-total { font-size: 18px; font-weight: 800; }
.ct-sums .ct-total strong { color: var(--primary-text); }

/* ============ Polish de UI — formularios y modales (identidad de marca) ============ */
/* Campos: foco con el color de marca y halo, hover sutil, placeholder tenue, transición */
input, select, textarea { transition: border-color .15s, box-shadow .15s, background .15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .72; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  background: var(--surface);
}

/* Micro-labels: dan jerarquía y separan visualmente los campos */
.form-grid > label, .modal-form > label, .ct-inputs > label {
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; color: var(--muted);
}
.form-grid > label.inline, .modal-form > label.inline { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; }

/* Encabezado del modal con separador claro */
.modal-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }

/* Sección "Líneas" como panel diferenciado */
.lineas-editor {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 18px;
  background: color-mix(in srgb, var(--surface-2) 40%, transparent);
}
.lineas-head strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
table.lineas thead th { background: var(--surface-2); text-transform: uppercase; letter-spacing: .03em; font-size: 11px; }
table.lineas tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }

/* Bloque de totales como panel destacado */
.cotiz-totales {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 16px;
}
.ct-sums .ct-total { font-size: 20px; }

/* Chips de método de pago con más presencia */
.tag-chips .chip { padding: 5px 12px; font-size: 13px; }

/* ============ Polish visual — profundidad, acentos y movimiento ============ */
/* Profundidad sutil en tarjetas y paneles + transición */
.card, .panel, .kpi { box-shadow: 0 1px 2px rgba(2,6,23,.10), 0 10px 26px rgba(2,6,23,.06);
  transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease; }
a.card:hover, .card.kpi-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
a.card.stat:hover, a.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(2,6,23,.12), 0 16px 34px rgba(2,6,23,.10); }

/* Acento de marca en KPIs */
.kpi, .kpi-card { position: relative; overflow: hidden; }
.kpi::after, .kpi-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 15%, transparent)); }

/* Ítem de navegación activo */
.nav-item.active { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--text); font-weight: 600; position: relative; }
.nav-item.active .ico { color: var(--primary); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nav-item { transition: background .15s ease, color .15s ease; }

/* Filas de tabla con hover en todas (no solo clicables) */
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 42%, transparent); }

/* Barras: animación de entrada al pintar */
.barlist-fill { transition: width .55s cubic-bezier(.22,1,.36,1); }

/* Gráficos: que el glow no se recorte */
.chart-svg { overflow: visible; }

/* Modal con más profundidad */
.modal.card { box-shadow: 0 24px 64px rgba(2,6,23,.45); }

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ============ Componentes pro: toast, skeleton, empty, donut, spark, ⌘K, bento ============ */
/* Toast con icono y variantes */
#toast { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
#toast .toast-ic { display: inline-flex; }
#toast.ok { border-left-color: #22c55e; } #toast.ok .toast-ic { color: #22c55e; }
#toast.warn { border-left-color: var(--primary); } #toast.warn .toast-ic { color: var(--primary); }
#toast.danger .toast-ic { color: var(--danger); }
#toast.info { border-left-color: #38bdf8; } #toast.info .toast-ic { color: #38bdf8; }

/* Estado vacío con icono y acción */
.empty { padding: 22px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty .empty-ic { color: var(--muted); opacity: .55; }

/* Skeleton shimmer */
.sk { display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-2) 75%, transparent) 25%, color-mix(in srgb, var(--muted) 20%, transparent) 37%, color-mix(in srgb, var(--surface-2) 75%, transparent) 63%);
  background-size: 400% 100%; animation: sk-shimmer 1.2s ease-in-out infinite; }
.sk-row td { padding: 13px 10px; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Dona */
.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-svg { width: 168px; height: 168px; flex: none; }
.donut-total { fill: var(--text); font-size: 22px; font-weight: 800; font-family: "Inter", system-ui, sans-serif; }
.donut-sub { fill: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; min-width: 150px; flex: 1; }
.donut-legend span { display: inline-flex; align-items: center; gap: 8px; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.donut-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Sparkline */
.sparkline { width: 100%; height: 36px; display: block; margin-top: 6px; }

/* Command palette (⌘K) */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(2,6,23,.55); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; z-index: 80; }
.cmdk { width: 100%; max-width: 580px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 28px 70px rgba(2,6,23,.55); overflow: hidden; }
.cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-input-wrap .ico { color: var(--muted); flex: none; }
.cmdk-input { border: 0; background: transparent; font-size: 16px; padding: 0; outline: none; box-shadow: none; }
.cmdk-input:focus { box-shadow: none; border: 0; background: transparent; }
.cmdk-list { max-height: 52vh; overflow: auto; padding: 6px; }
.cmdk-group { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--text); }
.cmdk-item .ico { color: var(--muted); display: inline-flex; flex: none; }
.cmdk-item .cmdk-sub { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.cmdk-item.active, .cmdk-item:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); }
.cmdk-item.active .ico { color: var(--primary); }
.cmdk-empty { padding: 26px; text-align: center; color: var(--muted); }
.cmdk-hint { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }
kbd { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 11px; font-family: inherit; }
.cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.cmdk-trigger:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--text); }
@media (max-width: 560px) { .cmdk-trigger .cmdk-trigger-txt { display: none; } }

/* Grilla bento (dashboard) */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.bento > * { margin: 0; }
.bento .b-2 { grid-column: span 2; } .bento .b-3 { grid-column: span 3; } .bento .b-4 { grid-column: span 4; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .b-3, .bento .b-4 { grid-column: span 2; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento .b-2, .bento .b-3, .bento .b-4 { grid-column: span 1; } }

/* Reordenar líneas (arrastrar) */
.lineas .l-drag { cursor: grab; color: var(--muted); width: 26px; text-align: center; }
.lineas .l-drag:active { cursor: grabbing; }
.lineas tr.dragging { opacity: .45; }
.lineas tbody tr { transition: background .12s ease; }

/* Diálogo "Enviar presupuesto": elección de canal */
.canales-lista { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.canal-opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.canal-opcion input { margin-top: 3px; width: auto; }
.canal-opcion.off { opacity: .6; cursor: not-allowed; }
.canal-opcion:not(.off):hover { border-color: var(--primary); }

/* Dashboard · presupuestos sin respuesta: caja con scroll propio y filtros */
.cot-seg-filtros { margin-bottom: 8px; }
.cot-seg-filtros input[type=search] { flex: 1; min-width: 180px; }
.cot-seg-lista { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.cot-seg-lista [data-cot-row][hidden] { display: none; }
.cot-seg-filtros select { width: auto; max-width: 160px; }
.cot-seg-filtros label.inline { white-space: nowrap; }

/* Estado de mensajería bajo el título (OT / cotización): una línea, sin cortes raros */
.msg-linea { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.4; margin-top: 2px; }
.msg-linea svg { flex: 0 0 auto; }
.msg-nombre { white-space: nowrap; }
.msg-linea .badge { white-space: nowrap; }
.msg-detalle { flex: 1 1 220px; min-width: 0; }
.view-head:has(.msg-linea) > div:first-child { flex: 1 1 380px; min-width: 0; }
.view-head:has(.msg-linea) > .acciones { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; white-space: normal; max-width: 55%; }
.view-head:has(.msg-linea) > .acciones .btn { white-space: nowrap; }

/* ===========================================================================
   Módulo Atribución (#/atribucion) — reglas, campañas con código y diagnóstico.
   Reutiliza .chip/.card/.kpi/.badge del sistema; sólo agrega lo propio.
   =========================================================================== */
.atribucion .tabs-atrib { margin-bottom: 16px; }
.atribucion .tabs-atrib .chip { padding: 8px 16px; font-size: 14px; min-height: 36px; }
.atribucion .dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }

/* Foco visible en todo lo que se pueda apretar (el CSS base sólo cubre campos) */
.atribucion button:focus-visible, .chips-field:focus-within, .chip:focus-visible,
.chip-x:focus-visible, .sw input:focus-visible + .sw-pista {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* --- Probador ------------------------------------------------------------ */
.atribucion .probador textarea { width: 100%; }
.atribucion .probador-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.atribucion .pr-res { display: flex; flex-direction: column; gap: 4px; min-height: 22px; }
.atribucion .pr-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.atribucion .avanzado summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; }
.atribucion .avanzado[open] summary { margin-bottom: 6px; }
.atribucion .explica p { max-width: 70ch; }
.atribucion .aviso-off { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-left: 3px solid var(--danger); margin-bottom: 14px; padding: 14px 18px; }

/* --- Lista de reglas ----------------------------------------------------- */
.atribucion .reglas-lista { display: flex; flex-direction: column; gap: 10px; }
.atribucion .regla { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; padding: 14px 16px; }
.atribucion .regla.apagada { opacity: .62; }
.atribucion .regla-orden { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.atribucion .regla-orden .icon-btn { min-width: 32px; min-height: 30px; }
.atribucion .regla-orden .icon-btn:disabled { opacity: .3; cursor: default; }
.atribucion .regla-orden [data-subir] svg { transform: rotate(90deg); }
.atribucion .regla-orden [data-bajar] svg { transform: rotate(-90deg); }
.atribucion .regla-prio { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.atribucion .regla-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.atribucion .regla-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atribucion .regla-linea { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.atribucion .regla-etq { font-size: 12px; color: var(--muted); min-width: 92px; }
.atribucion .regla-acciones { display: flex; align-items: center; gap: 4px; }

/* --- Campañas ------------------------------------------------------------ */
.atribucion .camp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--gap); }
.atribucion .campana { position: relative; padding: 18px; }
.atribucion .campana.apagada { opacity: .62; }
.atribucion .campana-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.atribucion .campana-datos { display: grid; gap: 6px; margin-bottom: 10px; }
.atribucion .campana-datos > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.atribucion .campana-acciones { position: absolute; top: 12px; right: 12px; display: flex; gap: 2px; }
.atribucion .link-row { display: flex; gap: 6px; align-items: center; }
.atribucion .link-row a.btn { text-decoration: none; }
.atribucion .link-row input { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.atribucion .aviso-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--danger); margin: 8px 0; }

/* --- Diagnóstico --------------------------------------------------------- */
.atribucion .sin-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.atribucion .sin-lista li { border-left: 2px solid var(--border); padding-left: 12px; }
.atribucion .sin-texto { margin: 4px 0 6px; font-size: 14px; max-width: 75ch; }

/* --- Chips de valor (condiciones y resultados) --------------------------- */
.chip-val, .chip-no, .chip-duro, .chip-out, .chip-codigo { cursor: default; }
.chip-no { border-style: dashed; color: var(--danger); }
.chip-duro { border-color: var(--primary); color: var(--primary-text); }
.chip-out { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: transparent; }
.chip-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.chip-x { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 5px;
  display: inline-flex; align-items: center; vertical-align: -2px; }

/* --- Campo de chips (en los modales) ------------------------------------- */
.chips-field { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px;
  padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; }
.chips-field.tono-no { border-style: dashed; }
.chips-lista { display: contents; }
.chips-field .chips-input { flex: 1 1 160px; min-width: 140px; border: 0; background: transparent;
  padding: 6px; font-size: 14px; color: var(--text); }
.chips-field .chips-input:focus { outline: none; }
.sugeridas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.modal-body .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.modal-body .bloque { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.modal-body .bloque legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.modal-body .previa-res { margin-top: 12px; }

/* --- Interruptor --------------------------------------------------------- */
.sw { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-pista { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; transition: background .2s, border-color .2s; }
.sw-pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.sw input:checked + .sw-pista { background: var(--primary); border-color: transparent; }
.sw input:checked + .sw-pista::after { transform: translateX(16px); background: var(--primary-ink); }

@media (max-width: 720px) {
  .atribucion .regla { grid-template-columns: 1fr; }
  .atribucion .regla-orden { flex-direction: row; justify-content: flex-start; }
  .atribucion .regla-acciones { justify-content: flex-end; }
  .atribucion .regla-etq { min-width: 100%; }
  .atribucion .tabs-atrib .chip, .atribucion .chip[data-dias] { min-height: 44px; padding: 10px 18px; }
  .atribucion .icon-btn { min-width: 44px; min-height: 44px; }
  .atribucion .link-row { flex-wrap: wrap; }
  .atribucion .link-row input { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-pista, .sw-pista::after { transition: none; }
}

/* --- Atribución v2: bloques Y, catálogos y panel de retorno --------------- */
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Condiciones en bloques (editor) */
.bloque-y { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.bloque-y .bloque-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bloque-y .bloque-head select { flex: 1 1 auto; width: auto; }
.conector-y-linea { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--muted); font-size: 12px; }
.conector-y-linea::before, .conector-y-linea::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.conector-y-linea span { font-weight: 700; letter-spacing: .08em; }

/* Condiciones en bloques (lectura, en la tarjeta de la regla) */
.atribucion .regla-condiciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.atribucion .bloque-lectura { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atribucion .conector-y { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }

/* Catálogos de fuentes y servicios */
.atribucion .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.atribucion .cat-item { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.atribucion .cat-item.apagada { opacity: .62; }
.atribucion .cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atribucion .cat-acciones { margin-left: auto; display: flex; gap: 2px; }
.atribucion .cat-pie { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.atribucion .cat-pie .muted { margin-right: 4px; }

/* Panel de retorno */
.atribucion .filtros-retorno { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--gap); padding: 14px 16px; }
.atribucion .filtros-fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.atribucion .avisos h3 { margin-bottom: 8px; }
.atribucion .avisos ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.atribucion .avisos li { max-width: 88ch; }

/* Matriz servicio × canal: una sola tinta, el número siempre visible */
.atribucion .matriz th[scope="row"] { font-weight: 600; white-space: nowrap; }
.atribucion .celda-matriz { font-variant-numeric: tabular-nums; border-radius: 4px; }

@media (max-width: 720px) {
  .atribucion .filtros-fila { flex-direction: column; align-items: stretch; }
  .atribucion .filtros-fila label.inline { flex-direction: column; align-items: stretch; gap: 4px; }
  .atribucion .filtros-fila select { width: 100% !important; }
  .atribucion .chip[data-dias-retorno] { min-height: 44px; padding: 10px 18px; }
}

/* ===========================================================================
   Atribución v3 — precisión: alineación, jerarquía y el recorrido del lead.
   =========================================================================== */

/* --- Filtros: una grilla pareja, etiqueta arriba ------------------------- */
.atribucion .filtros-retorno { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.atribucion .filtros-periodo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.atribucion .filtros-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.atribucion .filtros-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; }
.atribucion .filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.atribucion .filtro > label { font-size: 12px; color: var(--muted); margin: 0; }
.atribucion .filtro select { width: 100%; }
.atribucion .filtro-accion { justify-content: flex-end; }

/* --- Recorrido del lead (reemplaza el embudo de barras centradas) -------- */
.atribucion .embudo { list-style: none; margin: 4px 0 0; padding: 0; }
.atribucion .embudo-paso { display: flex; flex-direction: column; gap: 6px; }
.atribucion .embudo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.atribucion .embudo-txt { font-weight: 600; }
.atribucion .embudo-n { font-family: "Inter", system-ui, sans-serif; font-size: 26px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.atribucion .embudo-track { background: var(--surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.atribucion .embudo-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary);
  transition: width .55s cubic-bezier(.22,1,.36,1); }
.atribucion .embudo-caida { display: flex; align-items: center; gap: 10px; margin: 12px 0 12px 2px;
  font-size: 12px; color: var(--muted); }
.atribucion .embudo-caida::before { content: ""; width: 2px; height: 22px; background: var(--border); border-radius: 2px; }
.atribucion .embudo-pie { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }

/* --- Tabla por campaña --------------------------------------------------- */
.atribucion .tabla-herramientas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.atribucion .tabla-herramientas input[type="search"] { flex: 1 1 240px; max-width: 320px; }
.atribucion .tabla-herramientas label.inline { white-space: nowrap; gap: 6px; }
.atribucion .tbl-campanas th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.atribucion .tbl-campanas th.th-sort:hover { color: var(--primary-text); }
.atribucion .tbl-campanas th.th-sort[aria-sort="ascending"],
.atribucion .tbl-campanas th.th-sort[aria-sort="descending"] { color: var(--primary-text); }
.atribucion .tbl-campanas tbody tr:hover { background: var(--surface-2); }
.atribucion .tbl-campanas tfoot td { border-top: 1px solid var(--border); font-weight: 700; }
.atribucion .tbl-campanas tfoot { position: sticky; bottom: 0; background: var(--surface); }

/* --- Barras: etiqueta con ancho estable y valor completo ------------------ */
.atribucion .barlist-row { grid-template-columns: minmax(110px, 168px) 1fr auto; }
.atribucion .barlist-label { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atribucion .barlist-val { padding-left: 4px; }

/* --- Matriz: celdas separadas, no bloques pegados ------------------------ */
.atribucion .celda-matriz { padding: 4px; }
.atribucion .celda-caja { display: block; padding: 8px 10px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.atribucion .celda-vacia { display: block; padding: 8px 10px; color: var(--muted); }
.atribucion .matriz th[scope="row"] { font-weight: 600; white-space: nowrap; }

/* --- Ayuda --------------------------------------------------------------- */
.atribucion .ayuda { display: flex; flex-direction: column; gap: 14px; }
.atribucion .ayuda .card { padding: 20px 22px; }
.atribucion .ayuda h2 { margin: 0 0 10px; font-size: 19px; }
.atribucion .ayuda h3 { margin: 0 0 12px; font-size: 16px; }
.atribucion .ayuda p, .atribucion .ayuda li, .atribucion .ayuda dd { max-width: 78ch; }
.atribucion .ayuda p { margin: 0 0 10px; line-height: 1.6; }
.atribucion .ayuda-intro { border-left: 3px solid var(--primary); }
.atribucion .glosario { margin: 0; display: grid; grid-template-columns: minmax(130px, 210px) 1fr; gap: 10px 20px; }
.atribucion .glosario dt { font-weight: 700; color: var(--primary-text); }
.atribucion .glosario dd { margin: 0; line-height: 1.6; }
.atribucion .ayuda-rutina { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.atribucion .ayuda ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }

@media (max-width: 720px) {
  .atribucion .glosario { grid-template-columns: 1fr; gap: 2px 0; }
  .atribucion .glosario dd { margin-bottom: 10px; }
  .atribucion .embudo-n { font-size: 22px; }
  .atribucion .tabla-herramientas input[type="search"] { max-width: none; }
}

/* Aviso previo de borrado (confirmarPeligro): qué se pierde, antes de confirmar. */
.borrar-aviso .aviso-danger {
  display: flex; align-items: center; gap: 8px;
  color: var(--danger); font-weight: 600; margin: 0 0 12px;
}
.borrar-aviso .aviso-danger.small { font-weight: 500; font-size: .86rem; margin: 12px 0 0; }
.borrar-aviso .aviso-danger svg { flex: none; }
.borrar-aviso .perdidas { margin: 6px 0 0; padding-left: 20px; }
.borrar-aviso .perdidas li { margin: 2px 0; }
.borrar-aviso p { margin: 0 0 6px; }

/* ---------- Calendario v2: ocupación, días cerrados y panel lateral ---------- */
.cal-kpis { margin: 10px 0 12px; }
.cal-next svg { transform: rotate(180deg); }
.cal-cupo { display: flex; gap: 6px; flex-wrap: wrap; font-size: 10px; color: var(--muted); margin: 2px 0 4px; }
.cal-cupo .full { color: var(--danger); font-weight: 700; }
.cal-tag { margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 999px; background: var(--muted); color: #0b1220; vertical-align: middle; }
.cal-tag.full { background: var(--danger); color: #fff; }
.cal-cell.cerrado { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 6px,
  rgba(148,163,184,.14) 6px, rgba(148,163,184,.14) 12px); }
.cal-cell.nohabil { opacity: .7; }
.cal-cell.lleno { border-color: var(--danger); }
.cal-acta { float: right; font-weight: 700; }
.cal-acta.ok { color: #22c55e; }
.cal-acta.warn { color: #f59e0b; }
.cal-semana .cal-cell { min-height: 230px; }

.cal-drawer { position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh; z-index: 60;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: -18px 0 40px rgba(0,0,0,.35);
  display: flex; flex-direction: column; }
.cal-drawer[hidden] { display: none; }
.cal-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cal-drawer-head h3 { margin: 0 0 2px; }
.cal-drawer-body { padding: 14px 16px; overflow: auto; flex: 1; }
.cal-drawer-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.cal-dl { display: grid; grid-template-columns: 92px 1fr; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; }
.cal-dl dt { color: var(--muted); }
.cal-dl dd { margin: 0; word-break: break-word; }
.cal-notas { white-space: pre-wrap; margin-top: 12px; }
.cal-ventanas { display: flex; gap: 8px; margin-bottom: 12px; }
.cal-ventanas > div { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; }
.cal-ventanas > div.full { border-color: var(--danger); }
.cal-ventanas span { display: block; font-size: 11px; color: var(--muted); }
.cal-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.cal-row:hover { background: rgba(148,163,184,.08); }

@media (max-width: 720px) {
  .cal-drawer { width: 100%; }
  .cal-semana .cal-cell { min-height: 120px; }
}

/* ---------- Dashboard v2: secciones, alertas y listas con scroll ---------- */
.dash-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; min-height: 38px; border-radius: 999px;
  cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.dash-tabs button:hover { color: var(--text); border-color: var(--primary); }
.dash-tabs button.on { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.dash-taller { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.dash-taller select { min-height: 38px; }
.dash-nota { margin: -4px 0 14px; }

.dash-alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.dash-alerta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted);
  border-radius: var(--radius); padding: 12px 14px; color: var(--text); font: inherit;
  cursor: pointer; transition: border-color .2s, background .2s; }
.dash-alerta:hover { border-color: var(--primary); }
.dash-alerta.danger { border-left-color: var(--danger); }
.dash-alerta.warn { border-left-color: #f59e0b; }
.dash-alerta.ok { border-left-color: #22c55e; cursor: default; }
.dash-alerta-num { font-size: 26px; font-weight: 800; min-width: 2ch; text-align: center; }
.dash-alerta-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dash-alerta > svg { color: var(--muted); transform: rotate(180deg); flex: none; }

.dash-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-filtros input[type=search] { flex: 1; min-width: 190px; }
.panel-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.panel-scroll:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.panel-scroll::-webkit-scrollbar { width: 8px; }
.panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.list-row.lista-compacta { padding: 9px 0; gap: 12px; flex-wrap: wrap; }
.list-row .acciones { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .dash-tabs button { min-height: 44px; padding: 11px 16px; }
  .dash-taller select { min-height: 44px; }
  .panel-scroll { max-height: 320px; }
}

/* Tarjetas de atención del dashboard: mismo componente KPI, con acento de aviso */
.kpi.kpi-alerta { border-color: var(--danger); }
.kpi.kpi-alerta .kpi-value { color: var(--danger); }
.kpi .btn { align-self: flex-start; margin-top: 8px; }
.panel-head .segmented { flex: none; }
.dash-custom[hidden] { display: none; }

/* ==========================================================================
   v2 — Formularios de cotización / OT y ficha de OT (2026-09-21)
   Misma identidad: sólo tokens ya definidos arriba. El acento de marca se
   reserva para la acción primaria y la selección; el color por sección va
   únicamente en el ícono, para orientar sin ensuciar.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Modal en modo hoja: dos columnas con resumen fijo ---- */
.modal.hoja { max-width: 1180px; padding: 0; max-height: min(92vh, 940px); overflow: hidden;
  display: flex; flex-direction: column; }
.modal.hoja.compacta { max-width: 960px; }
.modal.hoja .modal-head { padding: 14px 20px; margin: 0; align-items: flex-start; }
.modal.hoja .modal-head h2 { font-size: 19px; }
.modal-sub { margin: 3px 0 0; }
.modal.hoja .modal-form { display: flex; flex: 1; min-height: 0; }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) 348px; width: 100%; min-height: 0; }
.modal.hoja .sheet-main { overflow: auto; padding: 0 20px 18px; min-height: 0; }
.sheet-side { border-left: 1px solid var(--border); background: var(--surface-2);
  display: flex; flex-direction: column; min-height: 0; }
.side-scroll { padding: 18px; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.side-foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.side-foot .btn.primary { width: 100%; min-height: 44px; }
.side-nota { text-align: center; margin: 0; }
.side-nota:empty { display: none; }

/* ---- Secciones del formulario ---- */
.fsec { padding: 16px 0; border-bottom: 1px solid var(--border); }
.fsec:last-child { border-bottom: 0; padding-bottom: 4px; }
.fsec-head { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; min-height: 28px; }
.fsec-head h3 { font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 700; margin: 0; letter-spacing: 0; }
.fsec-hint { font-size: 12.5px; color: var(--muted); }
.fsec-hint:empty { display: none; }
.fsec-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fsec-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tono) 16%, transparent); color: var(--tono); }
.fsec[data-tono="cliente"] { --tono: #38bdf8; }
.fsec[data-tono="vehiculo"] { --tono: #2dd4bf; }
.fsec[data-tono="trabajo"] { --tono: var(--primary); }
.fsec[data-tono="condiciones"] { --tono: #a78bfa; }
.req { color: var(--primary-text); }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campos .col-2 { grid-column: 1 / -1; }
.campos > label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; color: var(--muted); align-content: start; }
.campos > label .hint { text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 400; }

.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap .pre { position: absolute; left: 10px; color: var(--muted); font-size: 13px; pointer-events: none; }
.inp-wrap .suf { position: absolute; right: 10px; color: var(--muted); font-size: 12px; pointer-events: none; }
.inp-wrap input.con-pre { padding-left: 24px; }
.inp-wrap input.con-suf { padding-right: 34px; }

/* ---- Combobox ---- */
.combo { position: relative; }
.combo-field { position: relative; display: flex; align-items: center; }
.combo-field .combo-ic { position: absolute; left: 11px; color: var(--muted); pointer-events: none; display: grid; }
.combo-field input { padding-left: 34px; }
.combo-list { position: fixed; z-index: 70; margin: 0; padding: 5px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(2,6,23,.38); max-height: 300px; overflow-y: auto; overflow-x: hidden; min-width: 260px; box-sizing: border-box; }
.combo-opt { align-items: flex-start; }
.combo-opt .combo-rt { padding-top: 1px; }
.combo-opt { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.combo-opt .combo-txt { min-width: 0; flex: 1; }
/* Nombre y línea de contexto son bloques: un <span> en línea no recorta con overflow y el
   texto largo se pintaba debajo del precio. El nombre puede ocupar dos líneas (así
   "Parachoques Trasero" y "Delantero" se distinguen); el contexto sigue en una con puntos. */
.combo-opt .combo-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 600; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; }
.combo-opt .combo-mt { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt .combo-rt { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.combo-opt mark { background: color-mix(in srgb, var(--primary) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.combo-opt:hover, .combo-opt[aria-selected="true"] { background: var(--surface-2); }
.combo-opt[aria-selected="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent); }
.combo-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.combo-vacio { padding: 12px 10px; text-align: center; }
.combo-vacio p { margin: 0 0 9px; font-size: 13px; color: var(--muted); }

/* ---- Cliente elegido ---- */
.cli-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cli-avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, #38bdf8 18%, transparent); color: #38bdf8; font-weight: 700; font-size: 14px; }
.cli-quien { min-width: 0; flex: 1; }
.cli-nom { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cli-meta { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 3px 14px;
  margin-top: 3px; overflow-wrap: anywhere; }
.cli-meta span { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; }
.cli-acts { display: flex; gap: 6px; flex: none; }

/* ---- Vehículos como tarjetas ---- */
.veh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 10px; }
.veh-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  cursor: pointer; min-height: 62px; transition: border-color .15s, background .15s; }
.veh-card:hover { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
.veh-card:has(input:checked) { border-color: #2dd4bf; background: color-mix(in srgb, #2dd4bf 10%, transparent); }
.veh-card:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.veh-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, #2dd4bf 16%, transparent); color: #2dd4bf; }
.veh-txt { min-width: 0; }
.veh-txt b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veh-txt span { font-size: 12px; color: var(--muted); }
.veh-card.veh-add { border-style: dashed; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.veh-card.veh-add:hover { color: var(--text); }
.patente { display: inline-block; font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--text); }

/* ---- Tabla de líneas v2 ---- */
.lineas-wrap { overflow-x: auto; border-radius: 10px; }
table.lineas.v2 { width: 100%; min-width: 600px; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
table.lineas.v2 th { padding: 8px 10px; }
table.lineas.v2 td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
table.lineas.v2 tbody tr:last-child td { border-bottom: 0; }
table.lineas.v2 input, table.lineas.v2 select { min-height: 32px; font-size: 13.5px; }
table.lineas.v2 .l-sub { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
select.l-tipo { font-weight: 600; }
select.l-tipo[data-v="servicio"] { color: #38bdf8; border-color: color-mix(in srgb, #38bdf8 40%, var(--border)); }
select.l-tipo[data-v="repuesto"] { color: #a78bfa; border-color: color-mix(in srgb, #a78bfa 40%, var(--border)); }
select.l-tipo[data-v="otro"] { color: var(--muted); }
.lineas-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: 12.5px; color: var(--muted); }
.lineas-vacio td { padding: 0; }
.cat-combo { width: 240px; }

/* ---- Resumen lateral ---- */
.sum-tit { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; }
.sum-quien { display: flex; flex-direction: column; gap: 7px; }
.sum-quien .row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; min-width: 0; }
.sum-quien .row svg { color: var(--muted); }
.sum-quien .row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sum-filas { display: flex; flex-direction: column; gap: 9px; }
.sum-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); }
.sum-fila > label { margin: 0; font-size: 13.5px; }
.sum-fila .v { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.sum-fila input { width: 104px; text-align: right; min-height: 32px; font-size: 13.5px; }
.sum-fila .money { display: flex; gap: 5px; align-items: center; }
.sum-fila .money input { width: 72px; }
.sum-fila .money select { width: 54px; min-height: 32px; padding: 0 6px; text-align: center; }
.sum-sep { height: 1px; background: var(--border); }
.sum-iva { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-size: 13.5px; }
.sum-iva input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.sum-total span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.sum-total strong { font-family: "Inter", system-ui, sans-serif; font-size: 26px;
  font-variant-numeric: tabular-nums; color: var(--primary-text); }
.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.req-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.req-list li .mk { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--border); color: transparent; }
.req-list li.ok { color: var(--text); }
.req-list li.ok .mk { background: color-mix(in srgb, #22c55e 20%, transparent); border-color: transparent; color: #22c55e; }

/* ---- Ficha de OT ---- */
.ot-cab { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ot-cab h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.ot-meta { display: flex; flex-wrap: wrap; gap: 3px 18px; font-size: 13px; color: var(--muted); }
.ot-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ot-meta b { color: var(--text); font-weight: 600; }
.ot-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ot-acts .btn { width: auto; }
.pasos { display: flex; align-items: center; margin-bottom: 16px; padding: 12px 16px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.paso { display: flex; align-items: center; gap: 9px; flex: none; }
.paso .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; }
.paso .t { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.paso.hecho .n { background: color-mix(in srgb, #22c55e 20%, transparent); border-color: transparent; color: #22c55e; }
.paso.hecho .t, .paso.ahora .t { color: var(--text); }
.paso.ahora .n { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.paso.cancelado .n { background: color-mix(in srgb, var(--danger) 20%, transparent); border-color: transparent; color: var(--danger); }
.paso-linea { flex: 1 1 20px; min-width: 20px; max-width: 140px; height: 2px; background: var(--border); border-radius: 2px; margin: 0 8px; }
.pasos-nota { margin-left: auto; padding-left: 16px; white-space: nowrap; }
@media (max-width: 820px) { .pasos-nota { display: none; } }
.paso-linea.hecho { background: color-mix(in srgb, #22c55e 55%, transparent); }
.ot-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.ot-side { position: sticky; top: 16px; }
.kv { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px 14px; align-items: center; margin: 0; }
.kv dt { font-size: 12.5px; color: var(--muted); }
.kv dd { margin: 0; min-width: 0; }
.kv dd label { margin: 0; }

/* ---- Menú "más acciones" ---- */
.dd { position: relative; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 44px rgba(2,6,23,.38); }
.dd-menu[hidden] { display: none; }
.dd-menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13.5px; padding: 8px 9px; border-radius: 7px; cursor: pointer; text-align: left; }
.dd-menu button:hover { background: var(--surface-2); }
.dd-menu button.danger { color: var(--danger); }
.dd-menu .sep { height: 1px; background: var(--border); margin: 4px 0; }

@media (max-width: 1040px) {
  .sheet-body { grid-template-columns: minmax(0, 1fr); }
  .sheet-side { border-left: 0; border-top: 1px solid var(--border); }
  .modal.hoja { max-height: 92vh; }
  .modal.hoja .modal-form { overflow: auto; }
  .modal.hoja .sheet-main { overflow: visible; }
  .side-scroll { overflow: visible; }
  .ot-grid { grid-template-columns: minmax(0, 1fr); }
  .ot-side { position: static; }
}
@media (max-width: 720px) {
  .campos, .campos.tres { grid-template-columns: minmax(0, 1fr); }
  .cat-combo { width: 100%; }
  .fsec-acts { width: 100%; }
  .cli-card { flex-wrap: wrap; }
  .cli-quien { flex: 1 1 100%; order: 2; }
  .cli-acts { width: 100%; order: 3; }
  .cli-acts .btn { flex: 1; }
  table.lineas.v2 { min-width: 0; table-layout: auto; }
  table.lineas.v2 th, table.lineas.v2 td { padding: 6px; }
  table.lineas.v2 th:first-child, table.lineas.v2 td:first-child { display: none; }
  .ot-acts { margin-left: 0; width: 100%; }
}
.badge.violeta { background: color-mix(in srgb, #a78bfa 16%, transparent); color: #a78bfa; border-color: transparent; }

/* El atributo [hidden] tiene que ganarle a cualquier display: sin esto, un badge o un
   botón ocultos por JS seguían viéndose (pasaba con .badge, .btn y .sum-fila). */
[hidden] { display: none !important; }

/* Las micro-etiquetas van en mayúsculas, pero su contenido NO: el texto que escribe el
   usuario, los sufijos (km) y los chips conservan su forma. */
.campos > label input, .campos > label select, .campos > label textarea,
.campos > label .inp-wrap, .campos > label .tag-chips, .campos > label .hint,
.form-grid > label input, .form-grid > label select, .form-grid > label textarea,
.modal-form > label input, .modal-form > label select, .modal-form > label textarea,
.ct-inputs > label input, .ct-inputs > label select {
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.campos > label input, .campos > label select, .campos > label textarea { color: var(--text); font-size: 14px; }

/* Cabecera de tarjeta con ícono de sección: título a la izquierda, acciones a la derecha. */
.card-head.v2 { justify-content: flex-start; gap: 10px; }
.card-head.v2 .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
[data-historial] .hist-row { display: flex; gap: 12px; align-items: baseline; }
[data-historial] .hist-row > .muted { flex: none; min-width: 148px; }
table.lineas.v2 td.acciones .btn { margin-left: 0; padding: 4px 7px; }
table.lineas.v2 td.acciones { display: flex; gap: 4px; justify-content: flex-end; }

/* ==========================================================================
   v3 — Responsive (2026-09-22): la misma app en escritorio y en el celular.
   Escritorio: menú lateral agrupado, cabeceras y listados más limpios.
   Móvil (≤ 820 px): barra inferior, filas en vez de tablas, filtros en hoja,
   calendario en modo densidad, formularios a pantalla completa.
   Todo usa los tokens de arriba; lo nuevo se declara aquí.
   ========================================================================== */
:root {
  --tap: 44px;                 /* mínimo para no errarle con el dedo */
  --r-lg: 16px;
  --tabbar: 64px;              /* alto de la barra inferior (sin área segura) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --z-tabbar: 30; --z-hoja: 70; --z-toast: 90;
}
:root[data-theme="dark"] {
  --ok: #22c55e; --info: #38bdf8; --warn: #f59e0b; --done: #2dd4bf; --violet: #a78bfa;
  --surface-3: #2f3e57; --border-2: #46587c;
  --shadow-lg: 0 18px 44px rgba(2, 6, 23, .55);
}
:root[data-theme="light"] {
  --ok: #15803d; --info: #0369a1; --warn: #b45309; --done: #0f766e; --violet: #6d28d9;
  --surface-3: #e9eef5; --border-2: #cbd5e1;
  --shadow-lg: 0 14px 34px rgba(15, 23, 42, .14);
}

/* ---- Base: foco visible y tamaños de toque en todo lo que se aprieta ---- */
:where(a, button, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.btn { min-height: 38px; transition: background .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); }
.btn:not(:disabled):hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.btn.primary:not(:disabled):hover { background: color-mix(in srgb, var(--primary) 88%, #fff); border-color: transparent; }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn.xs { min-height: 30px; }
/* Botón "fantasma" de peligro (Eliminar, Se cayó, Cancelar): con borde, para que se lea como
   botón y no como texto rojo suelto (heredaba el borde transparente de .btn.danger). */
a.btn { text-decoration: none; }               /* enlaces con aspecto de botón (WhatsApp, Llamar) sin subrayado */
.btn.ghost.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.btn.ghost.danger:not(:disabled):hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
.icon-btn { min-width: 36px; min-height: 36px; border-radius: 10px; transition: background .15s var(--ease); }
.icon-btn:hover { background: var(--surface-2); }
.badge { white-space: nowrap; }
.badge.done { background: color-mix(in srgb, var(--done) 16%, transparent); color: var(--done); border-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Menú lateral agrupado (escritorio) ---- */
.sidebar { padding: 18px 12px 16px; gap: 14px; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.sidebar-close { display: none; }
.nav { gap: 2px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.nav-grupo { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.nav-grupo:first-child { padding-top: 0; }
.nav-titulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 12px 6px; }
.nav-item { padding: 9px 12px; min-height: 40px; font-size: 14.5px; }
.sidebar-foot { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.sidebar-rol { text-transform: capitalize; padding: 0 8px; }
.sidebar-tools { display: none; flex-direction: column; gap: 6px; }
.sidebar-tools .btn { justify-content: flex-start; width: 100%; }

/* ---- Barra superior ---- */
.topbar { position: sticky; top: 0; z-index: 25; min-height: 60px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar-title { display: none; margin: 0; font-size: 18px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .user { background: transparent; border: 0; padding: 4px; border-radius: 999px; cursor: pointer; font: inherit; color: var(--text); }
.topbar .user:hover { background: var(--surface-2); }
.topbar .uname { font-weight: 500; }
.topbar .btn.ghost { min-height: 36px; padding: 6px 12px; }
.cmdk-trigger { min-height: 36px; }

/* ---- Barra inferior (sólo móvil) ---- */
.tabbar { display: none; }

/* ---- Cabecera de vista: título y acciones alineados, sin saltos ---- */
.view-head { align-items: center; flex-wrap: wrap; }
.view-head h1 { font-size: 24px; }
.view-head > .acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; white-space: normal; }
.view-head > .acciones .btn { margin: 0; white-space: nowrap; }
.toolbar { align-items: center; }
.toolbar input, .toolbar select { min-height: 40px; }
.toolbar input[type="search"] { flex: 1 1 260px; max-width: 420px; }
.toolbar select { width: auto; }
.tb-movil { display: none; }

/* ---- Tablas (escritorio): filas más altas y cómodas, encabezado fijo ---- */
.tbl td { padding: 11px 10px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.clickable td:first-child { border-left: 3px solid transparent; }
.tbl tbody tr.clickable:hover td:first-child { border-left-color: var(--primary); }
.tbl td.acciones .btn.xs, .tbl .acciones .btn.xs { min-height: 32px; min-width: 32px; }

/* ---- Bloque "cuándo": en escritorio en línea ("Hoy · 10:30") ---- */
.cuando { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.cuando .c-d { order: 1; }
.cuando .c-h { order: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.cuando .c-h::before { content: "·"; color: var(--muted); margin-right: 6px; font-weight: 400; }
.cuando.es-hoy .c-d { color: var(--primary-text); font-weight: 600; }

/* ---- Hojas (Crear, Filtros, cuenta). Escritorio: diálogo centrado. Móvil: hoja inferior ---- */
.hoja-scrim { position: fixed; inset: 0; z-index: var(--z-hoja); background: rgba(2, 6, 23, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; transition: opacity .2s var(--ease); }
.hoja-scrim[data-on="true"] { opacity: 1; }
.hoja-ui { width: 100%; max-width: 460px; max-height: min(86vh, 720px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg);
  transform: translateY(14px); transition: transform .22s var(--ease); }
.hoja-scrim[data-on="true"] .hoja-ui { transform: none; }
.hoja-grab { display: none; width: 38px; height: 4px; border-radius: 99px; background: var(--border-2); margin: 9px auto 2px; flex: none; }
.hoja-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--border); }
.hoja-head h2 { margin: 0; font-size: 17px; flex: 1; }
.hoja-body { overflow-y: auto; padding: 8px 0 12px; min-height: 0; overscroll-behavior: contain; }
.hoja-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.hoja-foot .btn { flex: 1; min-height: 44px; width: auto; }
.hoja-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 15px; text-align: left; cursor: pointer; min-height: var(--tap); }
.hoja-opt:hover, .hoja-opt:focus-visible { background: var(--surface-2); outline: none; }
.hoja-oic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tono, var(--primary)) 16%, transparent); color: var(--tono, var(--primary)); }
.hoja-otxt { display: flex; flex-direction: column; min-width: 0; }
.hoja-ot { font-weight: 600; }
.hoja-os { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.perfil-quien { display: flex; align-items: center; gap: 12px; padding: 10px 18px 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.perfil-quien .avatar { width: 40px; height: 40px; font-size: 16px; }
.perfil-quien > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.perfil-quien b { font-size: 15px; }
/* Hoja de filtros: cada control con su etiqueta arriba, a todo el ancho */
.hoja-filtros { display: flex; flex-direction: column; gap: 14px; padding: 10px 18px 6px; }
.hoja-filtros .hoja-campo { display: grid; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: normal; }
.hoja-filtros .hoja-campo input, .hoja-filtros .hoja-campo select { width: 100% !important; max-width: none; min-height: var(--tap); font-size: 16px; }
.hoja-filtros label.inline.hoja-campo { display: grid; align-items: stretch; }
.hoja-filtros .hoja-etq { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hoja-filtros .hoja-check { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; color: var(--text); min-height: var(--tap); }
.hoja-filtros .hoja-check input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.hoja-filtros .hoja-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.hoja-filtros .hoja-botones .btn { width: auto; flex: 1 1 auto; min-height: 40px; }
.hoja-filtros .hoja-botones [hidden] { display: none !important; }
.hoja-filtros > .muted { padding-top: 2px; }

/* ---- Vista Hoy ---- */
.hoy .saludo { margin-bottom: 14px; }
.hoy .saludo h1 { margin: 0; font-size: 26px; }
.hoy .saludo p { margin: 2px 0 0; font-size: 14px; }
.hoy-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hoy .kpi .kpi-value.pri { color: var(--primary-text); }
.hoy .kpi .kpi-value.ok { color: var(--ok); }
.hoy .kpi .kpi-value.warn { color: var(--warn); }
.hoy .kpi .kpi-value.danger { color: var(--danger); }
.hoy .kpi-sub { line-height: 1.3; }
.aviso { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: 0 0 16px; padding: 12px 16px;
  border-radius: var(--radius); font: inherit; color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent); }
.aviso:hover { border-color: var(--warn); }
.aviso-ic { color: var(--warn); flex: none; display: grid; }
.aviso-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.aviso-txt b { display: block; margin-bottom: 1px; }
.aviso-link { color: var(--warn); font-weight: 700; font-size: 13.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.hoy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.hoy-grid > .block, .lista { min-width: 0; }
.block-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.block-head h2 { font-family: "Inter", system-ui, sans-serif; font-size: 14px; font-weight: 700; margin: 0; letter-spacing: 0; }
.block-head .link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--primary-text); text-decoration: none; background: 0; border: 0; padding: 4px 0; cursor: pointer; }
.block-head .link:hover { text-decoration: underline; }

/* ---- Lista de filas (Hoy, y el patrón que imitan las tablas en móvil) ---- */
.lista { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(2, 6, 23, .10), 0 10px 26px rgba(2, 6, 23, .06); }
.lista .empty { padding: 26px 16px; }
.fila { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
  min-height: var(--tap); color: var(--text); transition: background .12s var(--ease); }
.fila:last-child { border-bottom: 0; }
.fila:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.fila:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.fila-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fila .t1, .fila .t2, .fila .t3 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fila .t1 > b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.fila .t2, .fila .t3 { font-size: 12.5px; color: var(--muted); gap: 6px; }
.fila .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fila .t3 a.txt { color: var(--primary-text); text-decoration: none; }
.fila .t3 a.txt:hover { text-decoration: underline; }
.fila .t1 .money, .fila .t1 .badge, .fila .t2 > .badge:last-child, .fila .t2 > .fin:last-child, .fila .t2 > .dias-pill:last-child { margin-left: auto; flex: none; }
.fila .t2 > .fin:last-child { flex: 0 1 auto; min-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 6px; }
.fila .t2 .txt { flex: 0 1 auto; min-width: 48px; }
.fila .money { font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.fila .patente { flex: none; }
.fila .ini { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 12px;
  font-family: "Inter", system-ui, sans-serif; background: color-mix(in srgb, var(--tono, var(--info)) 14%, transparent); color: var(--tono, var(--info)); }
.fila > .cuando { flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 54px; padding: 6px 0; border-radius: 10px; background: var(--surface-2); line-height: 1.15; flex: none; }
.fila > .cuando .c-h { order: 1; font-family: "Inter", system-ui, sans-serif; font-size: 14px; }
.fila > .cuando .c-h::before { content: none; }
.fila > .cuando .c-d { order: 2; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fila > .cuando.es-hoy { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.fila > .cuando.es-hoy .c-h { color: var(--primary-text); }
.fila-act { flex: none; color: var(--muted); }
.fila-act:hover { color: var(--ok); }

/* ---- Calendario: puntos de densidad (sólo móvil) ---- */
.cal-pts { display: none; }

/* ==========================================================================
   MÓVIL (≤ 820 px)
   ========================================================================== */
@media (max-width: 820px) {
  /* Campos a 16 px: iOS no hace zoom al enfocar */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px; min-height: var(--tap); }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--primary); }
  .btn { min-height: var(--tap); }
  .btn.xs { min-height: 36px; padding: 6px 12px; }
  .icon-btn { min-width: var(--tap); min-height: var(--tap); }

  /* --- Chrome --- */
  .layout { grid-template-columns: 1fr; min-height: 100dvh; }
  .sidebar { padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 14px); width: min(300px, 86vw); }
  .sidebar { z-index: 45; }                       /* por sobre la barra superior fija */
  .layout.nav-open::before { z-index: 40; }
  #menu-toggle { display: inline-flex; margin-left: 0; }
  .sidebar-close { display: inline-flex; }
  .sidebar-tools { display: flex; }
  .topbar { padding: calc(env(safe-area-inset-top) + 8px) 10px 8px 6px; gap: 6px; min-height: 56px; }
  .topbar-title { display: block; }
  .topbar .spacer { display: none; }
  .topbar .cmdk-trigger { width: var(--tap); height: var(--tap); padding: 0; justify-content: center; border: 0; background: transparent; color: var(--text); border-radius: 12px; }
  .topbar .cmdk-trigger .ico svg { width: 20px; height: 20px; }
  .topbar .cmdk-trigger kbd, .topbar .cmdk-trigger-txt { display: none; }
  .topbar .solo-pc { display: none !important; }
  .topbar .user { padding: 2px; }
  .topbar .avatar { width: 32px; height: 32px; font-size: 13px; }
  .sync { font-size: 0; padding: 4px; }
  .sync::first-letter { font-size: 14px; }
  .outlet { padding: 12px 16px calc(var(--tabbar) + env(safe-area-inset-bottom) + 20px); }

  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    padding: 6px 4px calc(env(safe-area-inset-bottom) + 6px);
    background: color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border); }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: transparent; text-decoration: none;
    color: var(--muted); font-size: 10.5px; font-weight: 600; padding: 5px 2px; min-height: var(--tap); border-radius: 12px; transition: color .15s var(--ease); }
  .tab .ic { display: grid; place-items: center; width: 26px; height: 26px; }
  .tab.active, .tab[aria-current="page"] { color: var(--primary-text); }
  .fab { width: 52px; height: 52px; border-radius: 18px; border: 0; background: var(--primary); color: var(--primary-ink);
    display: grid; place-items: center; justify-self: center; cursor: pointer; margin-top: -18px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 45%, transparent); transition: transform .1s var(--ease); }
  .fab:active { transform: scale(.95); }

  /* --- Cabecera de vista: el título ya está en la barra superior; el "+ Nuevo" lo cubre el botón + --- */
  .view-head { margin-bottom: 12px; gap: 10px; }
  .view-head > h1:first-child, .view-head > div:first-child > h1:first-child { display: none; }
  .view-head .fab-cubre { display: none; }
  .view-head h1 { font-size: 22px; }
  .view-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .view-head > div:first-child > div.muted.small { flex-wrap: wrap; row-gap: 2px; }
  /* Acciones de ficha: la primaria a todo el ancho y el resto de a dos por fila */
  .view-head > .acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: none; margin-left: 0; }
  .view-head > .acciones .btn { width: 100% !important; white-space: normal; min-height: var(--tap); margin: 0; padding: 8px 10px; font-size: 14px; }
  .view-head > .acciones .btn.primary { grid-column: 1 / -1; order: -1; }
  .view-head > .acciones .dd { display: contents; }
  .ot-acts { width: 100%; margin-left: 0; gap: 8px; }
  .ot-acts > .btn { flex: 1 1 30%; white-space: nowrap; padding-inline: 10px; }
  .ot-acts > .btn.primary { flex-basis: 100%; order: -1; }
  .ot-acts .dd { flex: 0 0 auto; }
  .ot-meta { flex-direction: column; gap: 4px; }
  .ot-meta span { flex-wrap: wrap; }
  .back { min-height: 36px; align-items: center; }

  /* --- KPIs y controles --- */
  .kpis, .hoy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 13px; }
  .kpi-value { font-size: 22px; }
  /* Calendario y Operación: los números en una tira horizontal, la lista es lo importante */
  .cal-kpis, .op-kpis { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 2px 16px 4px; }
  .cal-kpis::-webkit-scrollbar, .op-kpis::-webkit-scrollbar { display: none; }
  .cal-kpis .kpi, .op-kpis .kpi { flex: 0 0 auto; min-width: 118px; padding: 10px 12px; gap: 2px; }
  .cal-kpis .kpi-value, .op-kpis .kpi-value { font-size: 20px; }
  .cal-kpis .kpi-label, .op-kpis .kpi-label { font-size: 12px; white-space: nowrap; }
  .segmented, .dash-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; }
  .segmented::-webkit-scrollbar, .dash-tabs::-webkit-scrollbar { display: none; }
  .segmented button, .dash-tabs button { flex: none; min-height: 36px; }
  .dash-barra { align-items: stretch; }
  .dash-custom { margin-top: 0; }
  .dash-custom label.inline { flex: 1 1 100%; }
  .dash-custom input { max-width: none; }
  .grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 16px; }

  /* --- Toolbar: buscador + Filtros (n) + chips; el resto va a la hoja --- */
  .toolbar[data-movil] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 12px; }
  .toolbar[data-movil] > * { display: none; }
  .toolbar[data-movil] > .tb-buscar, .toolbar[data-movil] > .tb-movil { display: flex; }
  .toolbar[data-movil] > .tb-buscar { min-width: 0; max-width: none; width: 100%; margin: 0; }
  .toolbar[data-movil] > label.tb-buscar { display: grid; gap: 4px; font-size: 12px; }
  .toolbar[data-movil] > label.tb-buscar input { width: 100% !important; }
  .toolbar[data-movil] > .tb-filtros { min-height: var(--tap); padding: 0 14px; gap: 6px; border-radius: 12px; }
  .toolbar[data-movil] > .tb-filtros .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
    background: var(--primary); color: var(--primary-ink); font-size: 12px; font-weight: 700; }
  .toolbar[data-movil] > .tb-filtros.on { border-color: var(--primary); color: var(--primary-text); }
  .toolbar[data-movil] > .chips { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; -ms-overflow-style: none;
    margin: 0 -16px; padding-inline: 16px; }
  .toolbar[data-movil] > .chips::-webkit-scrollbar { display: none; }
  .toolbar[data-movil] > .chips .chip { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; font-weight: 600; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; }
  .toolbar[data-movil] > .chips .chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: transparent; }

  /* --- Tablas → filas. Sólo las tablas con roles (th[data-m]) --- */
  .table-wrap:has(> .tbl-movil) { max-height: none; overflow: visible; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(2, 6, 23, .10), 0 10px 26px rgba(2, 6, 23, .06); }
  .tbl-movil, .tbl-movil tbody { display: block; width: 100%; }
  .tbl-movil thead { display: none; }
  .tbl-movil tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; position: relative;
    padding: 12px 14px; border-bottom: 1px solid var(--border); min-height: var(--tap); }
  .tbl-movil tbody tr:last-child { border-bottom: 0; }
  .tbl-movil tbody tr:hover td { background: transparent; }
  .tbl-movil tbody tr.clickable:active { background: var(--surface-2); }
  .tbl-movil tbody td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; font-size: 12.5px; color: var(--muted); }
  .tbl.compact.tbl-movil tbody td { padding: 0; }           /* .tbl.compact td pesa más que la regla de arriba */
  .tbl-movil tbody td br { display: none; }
  .tbl-movil tbody td .muted.small, .tbl-movil tbody td .small { font-size: 12.5px; }
  /* Línea 1: identifica (title) + dato duro (money). Línea 2: contexto (sub…) + estado (badge). Línea 3: detalle (meta). Línea 4: acciones. */
  .tbl-movil tbody tr::after { content: ""; flex-basis: 100%; height: 0; order: 3; }
  .tbl-movil tbody tr::before { content: ""; flex-basis: 100%; height: 0; order: 6; }
  .tbl-movil tbody td[data-m="title"] { order: 1; flex: 1 1 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl-movil tbody td[data-m="title"] strong, .tbl-movil tbody td[data-m="title"] b { font-weight: 600; }
  .tbl-movil tbody td[data-m="title"] .badge { vertical-align: 1px; margin-left: 4px; }
  .tbl-movil tbody td[data-m="title"] > div { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl-movil tbody td[data-m="money"] { order: 2; flex: none; margin-left: auto; font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14.5px; color: var(--text); white-space: nowrap; }
  .tbl-movil tbody td[data-m="sub"] { order: 4; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tbl-movil tbody td[data-m="sub"] strong { font-weight: 500; color: var(--text); }
  .tbl-movil tbody td[data-m="sub"] ~ td[data-m="sub"]:not(:empty)::before { content: "·"; margin-right: 6px; }
  .tbl-movil tbody td[data-m="badge"] { order: 5; flex: none; margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  /* Sin monto en la fila, el estado acompaña al título (línea 1), como en la demo de agenda */
  .tbl-movil tbody tr:not(:has(td[data-m="money"])) td[data-m="badge"] { order: 2; }
  .tbl-movil tbody td[data-m="meta"] { order: 7; flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
  .tbl-movil tbody td[data-m="meta"]:empty { display: none; }
  .tbl-movil tbody td[data-m="full"] { order: 8; flex: 1 1 100%; color: var(--text); font-size: 14px; }
  .tbl-movil tbody td[data-m="full"] select { width: 100%; }
  .tbl-movil tbody td[data-m="acts"] { order: 9; flex: 1 1 100%; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
  .tbl-movil tbody td[data-m="acts"]:empty { display: none; }
  .tbl-movil tbody td[data-m="acts"] .btn { margin: 0; min-height: 36px; min-width: 44px; }
  .tbl-movil tbody td[data-m="acts"] .acciones { display: contents; }
  .tbl-movil tbody td[data-m="hide"] { display: none; }
  /* Columna "cuándo" o casilla: un bloque fijo a la izquierda, las líneas a su derecha */
  .tbl-movil tbody td[data-m="when"], .tbl-movil tbody td[data-m="check"] { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); order: 0; }
  .tbl-movil tbody tr:has(td[data-m="when"]) { padding-left: 80px; }
  .tbl-movil tbody tr:has(td[data-m="check"]) { padding-left: 50px; }
  .tbl-movil tbody td[data-m="check"] input { width: 22px; height: 22px; accent-color: var(--primary); }
  .tbl-movil td[data-m="when"] .cuando { flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 54px; padding: 6px 0; border-radius: 10px; background: var(--surface-2); line-height: 1.15; }
  .tbl-movil td[data-m="when"] .cuando .c-h { order: 1; font-family: "Inter", system-ui, sans-serif; font-size: 14px; color: var(--text); }
  .tbl-movil td[data-m="when"] .cuando .c-h::before { content: none; }
  .tbl-movil td[data-m="when"] .cuando .c-d { order: 2; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .tbl-movil td[data-m="when"] .cuando.es-hoy { background: color-mix(in srgb, var(--primary) 16%, transparent); }
  .tbl-movil td[data-m="when"] .cuando.es-hoy .c-h { color: var(--primary-text); }
  .tbl-movil td[data-m="when"].op-hora { width: 54px; padding: 6px 0; border-radius: 10px; background: var(--surface-2); text-align: center; line-height: 1.15; }
  .tbl-movil td[data-m="when"].op-hora strong { font-family: "Inter", system-ui, sans-serif; font-size: 14px; color: var(--text); }
  .tbl-movil td[data-m="when"].op-hora .muted.small { font-size: 10.5px; display: block; }
  /* Filas de estado (cargando / vacío / error / detalle desplegable) */
  .tbl-movil tbody tr.sk-row td { flex: 1 1 100%; order: 1; }
  .tbl-movil tbody tr.op-detalle, .tbl-movil tbody tr.op-dia { padding: 8px 14px; }
  .tbl-movil tbody tr.op-dia td { color: var(--muted); font-weight: 600; text-transform: capitalize; }
  .tbl-movil tbody td .empty { padding: 20px 8px; }
  /* Operación: el detalle del cliente/contactos y las alertas caben en la fila */
  .tbl-movil .op-contacto { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .tbl-movil .op-acta { max-width: none; }
  .tbl-movil .op-alerta-mini { display: inline-flex; margin-left: 6px; }
  .tbl-movil tbody tr.op-con-alerta td:first-child { box-shadow: none; }
  .tbl-movil tbody tr.op-con-alerta { box-shadow: inset 3px 0 0 var(--danger); }
  .tbl-movil tbody tr.op-abierta { background: var(--surface-2); }
  .tbl-movil tbody tr.op-abierta td { background: transparent; }
  /* Leads: la campaña sigue al canal en la misma línea ("WhatsApp · Meta · Frenos Sep") */
  .tbl-movil tbody td[data-m="sub"] > div.muted { display: inline; }
  .tbl-movil tbody td[data-m="sub"] > div.muted::before { content: " · "; }
  .tbl-movil tbody td .dias-pill { margin-left: 4px; }
  .tbl-movil tbody td[data-m="badge"] .badge + .badge { margin-left: 0; }

  /* --- Modales: hoja a pantalla (casi) completa con pie fijo --- */
  .modal-overlay { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 0; }
  .modal { max-width: none; max-height: calc(100dvh - env(safe-area-inset-top) - 24px); border-radius: 20px 20px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; overflow: hidden; }
  .modal .modal-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .modal .modal-body { overflow-y: auto; min-height: 0; flex: 1; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .modal .modal-foot { position: sticky; bottom: 0; background: var(--surface); padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--border); flex-wrap: wrap; }
  .modal .modal-foot .btn { flex: 1 1 45%; min-height: var(--tap); width: auto !important; }
  .modal .modal-foot .btn.primary, .modal .modal-foot .btn.danger { order: 1; flex-basis: 100%; }
  .modal.wide { max-width: none; }
  .modal.hoja { max-height: calc(100dvh - env(safe-area-inset-top) - 12px); border-radius: 20px 20px 0 0; padding: 0; }
  .modal.hoja .modal-head { padding: 12px 16px; }
  .modal.hoja .modal-form { overflow: hidden; }
  .sheet-body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; flex: 1; -webkit-overflow-scrolling: touch; }
  .modal.hoja .sheet-main { padding: 0 16px 12px; overflow: visible; flex: none; min-height: auto; }
  .modal.hoja .sheet-side { flex: none; min-height: auto; }
  .sheet-side { border-left: 0; border-top: 1px solid var(--border); }
  .side-scroll { padding: 14px 16px; overflow: visible; }
  .side-foot { position: sticky; bottom: 0; background: var(--surface-2); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 2; }
  .campos, .campos.tres { grid-template-columns: minmax(0, 1fr); }
  .confirm-foot, .borrar-aviso + .modal-foot { flex-wrap: wrap; }

  /* --- Fichas (OT, cotización, cliente) --- */
  .ot-cab { gap: 10px; }
  .ot-cab h1 { font-size: 22px; }
  .kv { grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; }
  .pasos { padding: 10px 12px; margin-inline: -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .grid.cols-2 { grid-template-columns: 1fr; }
  dl.datos { grid-template-columns: 1fr; gap: 2px 0; }
  dl.datos dt { margin-top: 8px; }
  dl.datos dt:first-child { margin-top: 0; }
  .list-row, .veh-row, .consent-row { flex-wrap: wrap; }
  .list-row .acciones { width: 100%; justify-content: flex-end; }
  .card .table-wrap { max-height: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-historial] .hist-row { flex-wrap: wrap; }
  [data-historial] .hist-row > .muted { min-width: 0; flex: 1 1 100%; }

  /* --- Hoy --- */
  .hoy-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hoy .saludo h1 { font-size: 24px; }
  .aviso-link { display: none; }
  .aviso { padding: 12px 14px; }
  .fila { padding: 11px 12px; }

  /* --- Hojas como hoja inferior --- */
  .hoja-scrim { align-items: flex-end; padding: 0; }
  .hoja-ui { max-width: none; max-height: 86dvh; border-radius: 22px 22px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(102%); transition: transform .26s var(--ease); }
  .hoja-grab { display: block; }
  .hoja-head { padding: 6px 16px 10px; }
  .hoja-foot { padding: 12px 16px; }

  /* --- Calendario: modo densidad --- */
  .cal-head { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 10px; }
  .cal-title { justify-content: space-between; }
  .cal-title h1 { min-width: 0; flex: 1; font-size: 18px; }
  .cal-actions { flex-wrap: wrap; gap: 6px; }
  .cal-actions .segmented { flex: 1 1 100%; display: flex; }
  .cal-actions .segmented button { flex: 1; }
  .cal-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .cal-grid { gap: 2px; }
  .cal-grid.cal-dow { gap: 2px; }
  .cal-dow-cell { font-size: 11px; }
  .cal-cell { min-height: 0; aspect-ratio: 1 / 1.1; padding: 5px 0 4px; border: 0; border-radius: 12px; background: transparent; align-items: center; gap: 4px; }
  .cal-cell.hoy { box-shadow: none; }
  .cal-cell.hoy::after { content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--primary); border-radius: 12px; pointer-events: none; }
  .cal-cell { position: relative; }
  .cal-cell.hoy .cal-num { color: var(--primary-text); }
  .cal-cell.fuera { opacity: .35; }
  .cal-cell:hover { border-color: transparent; }
  .cal-cell:active { background: var(--surface-2); }
  .cal-cell.cerrado { background: repeating-linear-gradient(135deg, transparent, transparent 4px, color-mix(in srgb, var(--danger) 14%, transparent) 4px, color-mix(in srgb, var(--danger) 14%, transparent) 8px); }
  .cal-cell.lleno { border: 0; }
  .cal-cell.lleno .cal-num::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); margin-left: 3px; vertical-align: 3px; }
  .cal-num { font-size: 14px; color: var(--text); font-weight: 500; }
  .cal-tag, .cal-cupo, .cal-chips { display: none; }
  .cal-semana .cal-cell { min-height: 0; aspect-ratio: auto; }
  .cal-semana .cal-chips { display: flex; }
  .cal-semana .cal-pts { display: none; }
  .cal-pts { display: flex; gap: 3px; align-items: center; height: 8px; }
  .cal-pt { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
  .cal-pt.info { background: var(--info); } .cal-pt.done { background: var(--done); } .cal-pt.warn { background: var(--warn); }
  .cal-mas { font-size: 9.5px; color: var(--muted); font-weight: 700; line-height: 1; }
  .cal-drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; height: auto; max-height: 82dvh; border-left: 0; border-top: 1px solid var(--border);
    border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); padding-bottom: env(safe-area-inset-bottom); z-index: var(--z-hoja); }
  .cal-drawer::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 99px; background: var(--border-2); margin: 9px auto 0; }
  .cal-drawer-head { padding: 8px 16px 10px; }
  .cal-drawer-foot .btn { flex: 1 1 auto; min-height: 40px; }
  .cal-drawer-foot .btn.primary { flex-basis: 100%; order: -1; }

  /* --- Toast por sobre la barra inferior --- */
  #toast { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px); max-width: calc(100vw - 32px); }
  .cmdk-overlay { padding: calc(env(safe-area-inset-top) + 12px) 12px 12px; }
  .cmdk-list { max-height: 60dvh; }
  .combo-list { max-height: 260px; }
}

/* Entre 821 y 1100 px (tablet horizontal, notebooks chicos): menú más angosto */
@media (min-width: 821px) and (max-width: 1100px) {
  .layout { grid-template-columns: 216px 1fr; }
  .sidebar .brand { font-size: 20px; }
  .nav-item { font-size: 14px; padding: 8px 10px; }
  .outlet { padding: 20px; }
  .hoy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hoy-grid > section:first-child { grid-column: 1 / -1; }
}
@media (min-width: 821px) and (max-width: 1280px) {
  .hoy-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1101px) and (max-width: 1280px) {
  .hoy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hoy-grid > section:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Ficha de cliente (v3, 2026-09-22): cabecera con avatar, contacto y acciones,
   cuatro números, vehículos como tarjetas, historial unificado y columna lateral
   con datos, notas y privacidad. Mismo lenguaje que la ficha de OT.
   ========================================================================== */
.cli-head { align-items: flex-start; }
.cli-titulo { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; min-width: 0; }
.cli-avatar-lg { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none;
  font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 20px;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary-text); }
.cli-titulo-txt { min-width: 0; }
.cli-titulo h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.cli-titulo .ot-meta { gap: 3px 16px; }
.cli-semaforo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.cli-semaforo .badge { display: inline-flex; align-items: center; gap: 4px; }
.cli-acts .btn { width: auto; text-decoration: none; }
.cli-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cli-kpis .kpi-value.muted { color: var(--muted); }
.cli-kpis .kpi-sub { line-height: 1.3; }
.cli-grid { align-items: start; }
@media (min-width: 1041px) { .cli-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.cli-main, .cli-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cli-main > .card, .cli-side > .card { margin: 0; }
.cli-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cli-chips .chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 600; }
.cli-chips .chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.cli-chips .chip .n { opacity: .75; font-variant-numeric: tabular-nums; font-weight: 600; }
.tl { border-radius: 12px; box-shadow: none; }
.tl .fila .t1 > b { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tl .fila .ini svg { width: 18px; height: 18px; }
.veh-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.veh-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); min-width: 0; flex-wrap: wrap; }
.veh-item .veh-txt { flex: 1 1 140px; min-width: 0; }
.veh-item .veh-txt b { white-space: normal; }
.veh-item .veh-acts { display: flex; gap: 4px; flex: none; margin-left: auto; }
.veh-item .veh-acts .btn { margin: 0; }
.cli-kv { grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
.cli-kv dd { overflow-wrap: anywhere; }
.cli-kv dd a { color: var(--primary-text); text-decoration: none; }
.cli-kv dd a:hover { text-decoration: underline; }
.cli-notas { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }
.consent-lista .consent-row { gap: 10px; align-items: center; }
.consent-row .consent-txt { min-width: 0; flex: 1; }
.consent-row .consent-txt strong { font-size: 13.5px; font-weight: 600; }
.consent-row .consent-txt .muted { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.consent-row .btn { flex: none; }
.cli-privacidad-nota { margin: 12px 0 0; display: flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.cli-privacidad-nota svg { vertical-align: -2px; }
.cli-deuda { color: var(--danger); }

@media (max-width: 820px) {
  .cli-titulo { gap: 12px; }
  .cli-avatar-lg { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; }
  .cli-titulo h1 { font-size: 21px; }
  .cli-titulo .ot-meta { flex-direction: column; gap: 3px; }
  .cli-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-acts > .btn { flex: 1 1 42%; }
  .veh-lista { grid-template-columns: minmax(0, 1fr); }
  .veh-item .veh-acts { width: 100%; justify-content: flex-end; }
  .veh-item .veh-acts .btn { min-height: 36px; }
  .card-head.v2:has(.cli-chips) { flex-wrap: wrap; row-gap: 10px; }
  .card-head.v2 .right.cli-chips { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .card-head.v2 .right.cli-chips::-webkit-scrollbar { display: none; }
  .card-head.v2 .right.cli-chips .chip { flex: none; min-height: 34px; }
  .consent-row { flex-wrap: wrap; }
  .consent-row .btn { margin-left: auto; min-height: 36px; }
}

/* ---- Ficha de cliente · Servicios e inversión: tres lecturas + tabla por servicio ---- */
.serv-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.serv-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.serv-kpi .kpi-label { font-size: 12.5px; }
.serv-kpi .kpi-value { font-size: 20px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serv-kpi .kpi-value.muted { color: var(--muted); }
.serv-kpi .kpi-sub { line-height: 1.3; }
.serv-mix { display: flex; gap: 6px; align-items: baseline; }
.serv-mix-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--info, #38bdf8); margin: 4px 0 2px; }
.serv-mix-bar > span { display: block; height: 100%; flex: none; }
.serv-mix-bar > .s-trab { background: var(--primary); }
.serv-mix-bar > .s-rep { background: var(--violet, #a78bfa); }
.serv-pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.serv-pie b { color: var(--text); font-weight: 600; }
.serv-pie .op { opacity: .6; }
.serv-pie .serv-pie-total b { color: var(--primary-text); }
.serv-wrap { max-height: none; }
.serv-tbl th:first-child { min-width: 200px; }
.serv-tbl td strong { font-weight: 600; }
.serv-tbl td > div.muted.small { margin-top: 2px; font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.serv-tbl .patente { font-size: 11px; padding: 1px 6px; }
.serv-tbl td.serv-ultima, .serv-tbl td.serv-veces { white-space: nowrap; }
.serv-veces b { font-weight: 600; font-variant-numeric: tabular-nums; }
.serv-u { display: none; }
.serv-share { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.serv-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--surface-3, var(--surface-2)); overflow: hidden; }
.serv-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary); min-width: 2px; }
.serv-pct { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); width: 34px; text-align: right; flex: none; }
@media (max-width: 820px) {
  .serv-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .serv-resumen .serv-kpi:last-child { grid-column: 1 / -1; }
  .serv-kpi { padding: 10px 12px; }
  .serv-kpi .kpi-value { font-size: 18px; }
  .serv-u { display: inline; }
  .serv-tbl tbody td[data-m="title"] > div { display: flex; }
  .serv-tbl tbody td[data-m="meta"] .serv-share { display: flex; width: 100%; margin-top: 2px; }
  .serv-veces b { color: var(--text); }
}

/* ---- OT: casilla "Servicio ya entregado" en el resumen del formulario ---- */
.sum-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); cursor: pointer; }
.sum-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); flex: none; }
.sum-check > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sum-check b { font-size: 13.5px; font-weight: 600; }
.sum-check .small { font-size: 12px; line-height: 1.35; }
.sum-check:has(input:checked) { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }

/* ---- Agenda: selector de tipo (retiro / entrega) como dos botones grandes ---- */
.ag-tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.form-grid > .ag-tipo { margin-bottom: 4px; }
.ag-tipo-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 52px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; font: inherit; width: 100%; }
.ag-tipo-opt:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.ag-tipo-opt.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--primary); }
.ag-tipo-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ag-tipo-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary-text); }
.ag-tipo-opt.active .ag-tipo-ic { background: var(--primary); color: var(--primary-ink); }
.ag-tipo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ag-tipo-txt b { font-size: 14px; font-weight: 600; }
.ag-tipo-txt .small { font-size: 12px; line-height: 1.3; }

/* ---- OT · Fotos del taller: barra con conteo + subida de varias fotos desde la oficina ---- */
.fotos-taller-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fotos-taller-bar .btn { margin: 0; }
.empty [data-empty-action] { margin-top: 8px; }
.fotos-subida .fotos-momento { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.fotos-subida .fotos-momento > .muted.small { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; }
.fotos-subida .fotos-momento .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fotos-subida .fotos-momento .chip { min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.fotos-subida .fotos-momento .chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.fotos-elegir { position: relative; }
.fotos-elegir input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fotos-elegir input[type=file]:focus-visible + .fotos-drop { outline: 2px solid var(--primary); outline-offset: 2px; }
.fotos-drop { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 12px; border: 2px dashed var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--muted); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: normal; text-align: center; pointer-events: none; }
.fotos-drop.sobre { border-color: var(--primary); color: var(--text); background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)); }
.fotos-previa { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.acta-meta:empty { display: none; }
.fotos-previa-item { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.fotos-previa-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos-previa-item .icon-btn { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; min-height: 26px; border-radius: 8px; background: rgba(2,6,23,.65); color: #fff; }
@media (max-width: 820px) {
  .fotos-drop { min-height: 56px; }
  .fotos-previa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Selector "Cargar plantilla…" en cabeceras de tarjeta (ficha de OT) ---- */
select[data-plantilla] { min-width: 0; max-width: 100%; }
.card-head.v2 .right:has(select[data-plantilla]) { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.card-head.v2 .right select[data-plantilla] { min-height: 32px; padding: 4px 30px 4px 10px; font-size: 13px; width: auto; }
@media (max-width: 820px) {
  .card-head.v2:has(select[data-plantilla]) { flex-wrap: wrap; row-gap: 10px; }
  .card-head.v2 .right:has(select[data-plantilla]) { width: 100%; margin-left: 0; justify-content: flex-start; }
  .card-head.v2 .right select[data-plantilla] { flex: 1 1 160px; min-height: 36px; }
}

/* ---- Menú lateral: más contraste en títulos de grupo e íconos, separador entre grupos ---- */
.nav-titulo { color: color-mix(in srgb, var(--text) 70%, var(--muted)); font-size: 11.5px; letter-spacing: .08em; padding: 0 12px 7px; }
.nav-grupo + .nav-grupo { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; }
.nav-item { color: var(--text); }
.nav-item .ico { color: color-mix(in srgb, var(--text) 45%, var(--muted)); }
.nav-item:hover .ico { color: var(--text); }
:root[data-theme="light"] { --muted: #55657a; }        /* 5.2:1 sobre el fondo claro (antes 4.3:1) */

/* ---- Enlaces a fichas dentro de listas y fichas: discretos, subrayado punteado ---- */
a.cli-link { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--primary) 55%, transparent); }
a.cli-link:hover { color: var(--primary-text); border-bottom-style: solid; }
a.badge.cli-link { border-bottom: 0; }
a.badge.cli-link:hover { filter: brightness(1.15); text-decoration: underline; }

/* ---- Cabeceras de bloque/panel con acción secundaria ---- */
.block-head .link.link-danger { color: var(--danger); }
.block-head .link + .link { margin-left: 14px; }
.panel-head-acts { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ==========================================================================
   Cobranza v2 (2026-09-23) — cinta de deuda por antigüedad, pestañas, cola
   "Por vincular", detalle del documento con historial de pagos.
   Sólo tokens ya definidos arriba; el color de marca sigue reservado a la acción
   primaria y a la selección. Los tramos de antigüedad tienen su propia escala
   (verde → ámbar → naranja → rojo) porque acá el color ES el dato.
   ========================================================================== */
:root[data-theme="dark"]  { --cob-t1: #22c55e; --cob-t2: #eab308; --cob-t3: #f97316; --cob-t4: #ef4444; }
:root[data-theme="light"] { --cob-t1: #15803d; --cob-t2: #a16207; --cob-t3: #c2410c; --cob-t4: #b91c1c; }

.cob .view-head { align-items: flex-end; }
.cob-origen { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cob-origen .icon { color: var(--muted); }
.cob-head-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cob-head-acts .btn.primary { width: auto; }
.cob-head-acts label.inline { margin: 0; }
.cob-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary-text); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cob-link:hover { text-decoration-style: solid; }

/* --- Cabecera: deuda vigente + cinta --- */
.cob-hero { padding: 18px 20px 14px; margin-bottom: 14px; }
.cob-hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: end; margin-bottom: 14px; }
.cob-deuda, .cob-mini { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cob-lbl { color: var(--muted); font-size: 12.5px; }
.cob-num { font-family: "Inter", system-ui, sans-serif; font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cob-num-s { font-family: "Inter", system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cob-sub { font-size: 12.5px; }
.cob-mini { padding-left: 16px; border-left: 1px solid var(--border); }

.cob-cinta { display: flex; gap: 3px; height: 40px; border-radius: 10px; overflow: hidden; }
.cob-seg { flex: 0 0 var(--w); min-width: 0; border: 0; padding: 0 10px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: #fff; background: var(--tono); font: inherit; text-align: left; position: relative;
  transition: filter .18s var(--ease), opacity .18s var(--ease), flex-basis .45s var(--ease); }
.cob-seg.t1 { --tono: var(--cob-t1); } .cob-seg.t2 { --tono: var(--cob-t2); } .cob-seg.t3 { --tono: var(--cob-t3); } .cob-seg.t4 { --tono: var(--cob-t4); }
.cob-seg.t2 { color: #1c1400; }
:root[data-theme="light"] .cob-seg.t2 { color: #fff; }
.cob-seg:hover { filter: brightness(1.08); }
.cob-seg:focus-visible { outline: 2px solid var(--text); outline-offset: -3px; border-radius: 6px; }
.cob-cinta:has(.cob-seg.on) .cob-seg:not(.on) { opacity: .38; }
.cob-seg.on { filter: saturate(1.1); }
.cob-seg.on::after { content: ""; position: absolute; inset: 3px; border: 2px solid rgba(255,255,255,.85); border-radius: 7px; pointer-events: none; }
.cob-seg-lbl { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-seg-val { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cob-seg.angosto .cob-seg-lbl, .cob-seg.angosto .cob-seg-val { display: none; }
.cob-seg.vacio { flex: 1; background: var(--surface-2); color: var(--muted); cursor: default; justify-content: center; border: 1px dashed var(--border); border-radius: 10px; }
.cob-seg.vacio .cob-seg-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.cob-cinta-pie { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; align-items: center; }
.cob-leg { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; border-radius: 6px; }
.cob-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--tono); flex: none; }
.cob-leg.t1 { --tono: var(--cob-t1); } .cob-leg.t2 { --tono: var(--cob-t2); } .cob-leg.t3 { --tono: var(--cob-t3); } .cob-leg.t4 { --tono: var(--cob-t4); }
.cob-leg b { color: var(--text); font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.cob-leg:hover span:first-of-type, .cob-leg.on span:first-of-type { color: var(--text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cob-leg.on span:first-of-type { text-decoration-style: solid; }

/* --- Pestañas --- */
.cob-tabs { margin-bottom: 14px; }
.cob-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); vertical-align: 1px; }
.cob-tabs button.on .cob-n { background: rgba(0,0,0,.18); color: inherit; }
.cob-tabs button[hidden], .cob-n[hidden] { display: none; }

/* --- Tabla --- */
.cob-toolbar { align-items: center; }
.cob-toolbar label.inline { margin: 0; }
.cob-count { margin-left: auto; white-space: nowrap; }
.cob-toolbar .btn.ghost { width: auto; }
.cob-tbl .cob-tel { font-size: 12px; }
.cob-tbl .cob-doc { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 13.5px; }
.cob-tbl .badge.cob-svinc { vertical-align: 1px; margin-left: 4px; }
.cob-tbl td .patente { margin-left: 4px; }
.cob-tbl tbody tr:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cob-debe { color: var(--danger); }
.th-sort { cursor: pointer; user-select: none; }
.th-sort[aria-sort="ascending"]::after { content: " ↑"; }
.th-sort[aria-sort="descending"]::after { content: " ↓"; }

/* --- Registrar pago: método como chips --- */
.cob-pago-form .campos { margin-bottom: 4px; }
.cob-metodos .chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
.cob-metodos .chip.active { color: var(--primary-ink); }

/* --- Detalle del documento --- */
.cob-det { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 0 28px; }
.cob-det-main .fsec:first-child { padding-top: 4px; }
.cob-det-cli { display: flex; flex-direction: column; gap: 2px; }
.cob-det-nom { font-weight: 700; font-size: 16px; color: var(--text); text-decoration: none; }
a.cob-det-nom:hover { color: var(--primary-text); text-decoration: underline; }
.cob-det-nota { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text); }
.cob-det-nota .icon { color: var(--warn); margin-top: 2px; }
.cob-datos { grid-template-columns: 110px 1fr; }
.cob-datos dd .badge { vertical-align: 1px; }
.cob-det-side { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.cob-tot { display: flex; flex-direction: column; gap: 6px; }
.cob-tot > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.cob-tot > div b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.cob-tot-pend { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.cob-tot-pend b { font-family: "Inter", system-ui, sans-serif; font-size: 20px; font-weight: 700; }
.cob-tot-pend.debe b { color: var(--danger); }
.cob-tot-pend.ok b { color: var(--ok); }
.cob-pagos h4, .cob-det-pago h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-family: "Inter", system-ui, sans-serif; }
.cob-pago { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
.cob-pago:first-of-type { border-top: 0; }
.cob-pago-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cob-pago-l b { font-variant-numeric: tabular-nums; }
.cob-pago .icon-btn { color: var(--muted); }
.cob-pago .icon-btn:hover { color: var(--danger); }
.cob-det-pago { border-top: 1px solid var(--border); padding-top: 12px; }
.cob-det-pago label { margin-bottom: 10px; }

/* --- Nuevo documento --- */
.cob-nuevo-modo { margin-bottom: 8px; }
.cob-ot-resumen { margin: 8px 0 0; }
.combo-rt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* --- Sincronización + cola "Por vincular" --- */
.cob-sync { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.cob-sync-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.cob-sync-ic.crm { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.cob-sync-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cob-sync-txt .small { line-height: 1.45; }
.cob-sync-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.cob-sync-acts .btn { width: auto; }
.cob-sync-acts .sw { gap: 8px; font-size: 13px; color: var(--muted); }
.cob-sync-acts .sw .sw-lbl { white-space: nowrap; }
.cob-q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.cob-q-head h3 { margin: 0; font-size: 15px; }
.cob-q-lista { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.cob-q-lista .empty { padding: 28px 16px; }
.cob-q { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cob-q:last-child { border-bottom: 0; }
.cob-q-ini { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 13px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.cob-q-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cob-q-t1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.cob-q-t2 { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 13px; }
.cob-id { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.cob-id .icon { color: var(--muted); }
.cob-id.falta { color: var(--muted); border: 1px dashed var(--border); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.cob-q-nota { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text); }
.cob-q-nota .icon { color: var(--warn); margin-top: 3px; flex: none; }
.cob-q-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.cob-q-acts .btn { width: auto; }
.cob-sug { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); color: var(--ok); }
.cob-sug:hover { background: color-mix(in srgb, var(--ok) 12%, transparent); }

/* --- Análisis --- */
.cob-an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cob-an-grid .card + .card { margin-top: 0; }
.cob-an-ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cob-an-ctl .segmented button { min-height: 30px; }
.cob-bars button.barlist-row { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; padding: 0; cursor: pointer; border-radius: 6px; }
.cob-bars button.barlist-row:hover .barlist-label { color: var(--primary-text); }

@media (prefers-reduced-motion: reduce) {
  .cob-seg { transition: none; }
}
@media (max-width: 820px) {
  .cob .view-head { align-items: flex-start; flex-direction: column; }
  .cob-head-acts { width: 100%; justify-content: space-between; }
  .cob-head-acts .btn.primary { flex: 1; }
  .cob-hero { padding: 14px 14px 12px; }
  .cob-hero-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cob-deuda { grid-column: 1 / -1; }
  .cob-mini { padding-left: 0; border-left: 0; }
  .cob-mini + .cob-mini { padding-left: 12px; border-left: 1px solid var(--border); }
  .cob-cinta { height: 34px; }
  .cob-seg { padding: 0 8px; }
  .cob-seg-lbl { display: none; }
  .cob-cinta-pie { gap: 6px 14px; }
  .cob-leg span:last-of-type { display: none; }
  .cob-det { grid-template-columns: 1fr; }
  .cob-det-side { order: -1; }
  .cob-q { flex-wrap: wrap; }
  .cob-q-acts { width: 100%; justify-content: flex-start; padding-left: 54px; }
  .cob-q-acts .btn { min-height: 36px; }
  .cob-sync-acts { margin-left: 0; width: 100%; justify-content: space-between; }
  .cob-count { margin-left: 0; }
}
.cob-pago-form > label, .cob-det-pago > label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; color: var(--muted); }
.cob-h4-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text); font-size: 11px; margin-left: 4px; vertical-align: 1px; }
.cob-an-grid { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
@media (max-width: 820px) { .cob-an-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .cob-origen { display: block; }
  .cob-origen .icon { vertical-align: -2px; margin-right: 4px; }
  .cob-cinta-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .cob-leg { padding: 2px 0; }
  .cob-q-main { flex: 1 1 0; }
  .cob-q-acts { gap: 8px; }
  .cob-sync-txt { flex-basis: 100%; }
}
/* Cobranza v2.1 — planilla conectada y vínculo con la OT */
.cob-otlink { display: inline-flex; align-items: center; margin-left: 5px; color: var(--muted); vertical-align: -2px; }
.cob-otlink:hover { color: var(--primary-text); }
.cob-sin-ot { display: inline-block; border: 1px dashed var(--border); border-radius: 999px; padding: 0 7px; font-size: 11.5px; color: var(--muted); }
.cob-pasos { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.cob-sync-txt a { color: var(--primary-text); }
.cob-origen a { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cob-origen a:hover { color: var(--primary-text); }
/* Cobranza v2.2 — comisión (total − costo taller) */
.cob-hero-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.cob-tot-com b { color: var(--primary-text); }
@media (max-width: 820px) { .cob-hero-grid { grid-template-columns: 1fr 1fr; } .cob-mini:nth-of-type(4) { padding-left: 0; border-left: 0; } }
/* Cobranza v2.3 — período (año + mes) y "Cobros por mes" */
.cob-head-acts label.inline select + select { margin-left: 6px; }
.cob-meses-card { margin-bottom: 14px; }
.cob-meses { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px 24px; align-items: start; }
.cob-meses-tabla { max-height: none; }
.cob-meses-tabla .tbl td, .cob-meses-tabla .tbl th { padding: 5px 8px; font-size: 13px; }
.cob-meses-tabla tr.on td { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.cob-meses-tabla tr.cob-meses-total td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 600; }
.cob-bar-lbl { font-size: 10px; fill: var(--text); }
.cg-axis.on { fill: var(--primary-text); font-weight: 700; }
.cob-bar-hit:hover { fill: color-mix(in srgb, var(--text) 6%, transparent); }
@media (max-width: 820px) {
  .cob-meses { grid-template-columns: 1fr; }
  .cob-head-acts label.inline { flex: 1 1 100%; }
  .cob-head-acts label.inline select { flex: 1; }
}
.cob-hero-err { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13px; }
/* Cobranza v2.4 — cobrado por emisión; "Ingresado" (fecha de pago) como dato secundario; comisión sólo con costo taller */
.cob-hero-grid.sin-comision { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.cob-meses-tabla .cob-th-ing { font-weight: 500; }
.cob-meses-tabla td:first-child { white-space: nowrap; }
.cob-meses-tabla td.cob-ing { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 820px) { .cob-hero-grid.sin-comision { grid-template-columns: 1fr 1fr; } }
/* Cobranza v2.5 — listas largas: la tabla y la cola scrollean dentro de un alto máximo y se pintan por lotes */
[data-panel="cobrar"] > .table-wrap { max-height: calc(100vh - 210px); min-height: 220px; }
.cob-tbl tr.cob-mas td { text-align: center; padding: 10px; background: color-mix(in srgb, var(--surface-2, var(--surface)) 60%, transparent); }
.cob-tbl tr.cob-mas .btn { width: auto; margin-right: 10px; }
.cob-q-toolbar { align-items: center; margin: 0 0 8px; }
.cob-q-toolbar label.inline { margin: 0; }
.cob-q-lista { max-height: calc(100vh - 260px); min-height: 160px; overflow: auto; overscroll-behavior: contain; }
.cob-q.cob-q-mas { justify-content: center; gap: 10px; border-bottom: 0; }
.cob-q.cob-q-mas .btn { width: auto; }
@media (max-width: 820px) {
  [data-panel="cobrar"] > .table-wrap:has(> .tbl-movil) { max-height: none; }
  .cob-q-lista { max-height: none; overflow: visible; }
  .cob-q-toolbar label.inline { flex: 1 1 100%; }
  .cob-q-toolbar label.inline input { width: 100% !important; }
}
/* Cola más densa: caben ~9 nombres por pantalla en vez de 6 */
@media (min-width: 821px) {
  .cob-q { padding: 9px 14px; gap: 12px; }
  .cob-q-ini { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
  .cob-q-main { gap: 2px; }
  .cob-q-t1 { font-size: 14px; }
  .cob-q-t2, .cob-q-t3 { font-size: 12.5px; }
}

/* ==========================================================================
   Racelab VIP (2026-10-03): etapas de la OT, garage del cliente, boxes,
   propuesta en línea y paleta de estados más sobria.
   ========================================================================== */
/* Estados con menos saturación: el navy y la plata mandan, el color sólo informa. */
:root[data-theme="dark"]  { --ok: #5BBF8A; --info: #7FB2E5; --warn: #E0A458; --done: #6CC4B8; --violet: #A99BE0; }
:root[data-theme="light"] { --ok: #2F7D55; --info: #2C5282; --warn: #9A6118; --done: #2C7A72; --violet: #5B4B9A; }
.badge.ok     { background: color-mix(in srgb, var(--ok) 14%, transparent);     color: var(--ok); }
.badge.info   { background: color-mix(in srgb, var(--info) 14%, transparent);   color: var(--info); }
.badge.warn   { background: color-mix(in srgb, var(--warn) 14%, transparent);   color: var(--warn); }
.badge.danger { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }

/* Menú: grupo «Más» plegable */
.nav-mas > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-mas > summary::-webkit-details-marker { display: none; }
.nav-mas > summary .ico { transition: transform .15s ease; display: inline-flex; }
.nav-mas[open] > summary .ico { transform: rotate(90deg); }
.nav-mas > .nav-grupo { padding-top: 4px; }

/* Etapas de la OT */
.etapas { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.etapas li { flex: 1 1 0; min-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font-size: 12px; color: var(--muted); position: relative; padding-top: 2px; }
.etapas li::before { content: ""; position: absolute; top: 14px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--border); }
.etapas li:first-child::before { display: none; }
.etapas .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border);
  background: var(--surface); font: 600 12px/1 "Inter", system-ui, sans-serif; position: relative; z-index: 1; }
.etapas li.hecha { color: var(--text); }
.etapas li.hecha .n { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.etapas li.hecha::before, .etapas li.ahora::before { background: var(--primary); }
.etapas li.ahora { color: var(--text); font-weight: 700; }
.etapas li.ahora .n { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.etapa-desc { margin: 0 0 10px; }
.vip-etapas { margin-bottom: 16px; }
/* Las piezas VIP se montan dentro de un <div data-vip-…>: recuperan la separación de «.card + .card». */
.card + [data-vip-propuesta] > .card, .card + [data-vip-etapas] > .card { margin-top: 16px; }
[data-vip-propuesta] + .card, [data-vip-box] + .card { margin-top: 16px; }
button.link-txt { background: 0; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--primary-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.vip-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vip-acts .btn { width: auto; }
.vip-aviso { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.etapa-hist { margin-top: 12px; }
.etapa-hist summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.etapa-hist .hist-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.etapa-barra { display: inline-block; width: 64px; height: 5px; border-radius: 99px; background: var(--border); overflow: hidden; vertical-align: middle; }
.etapa-barra > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
@media (max-width: 820px) {
  .etapas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .etapas li { min-width: 74px; }
}

/* Garage del cliente */
.veh-lista.garage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.garage-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "foto txt" "foto acts";
  column-gap: 16px; row-gap: 10px; align-items: start; padding: 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.garage-foto { grid-area: foto; width: 150px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface); display: grid; place-items: center; color: var(--muted); }
.garage-foto img { width: 100%; height: 100%; object-fit: cover; }
.garage-txt { grid-area: txt; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.garage-txt b { font-size: 16px; }
.garage-prot { display: flex; flex-wrap: wrap; gap: 6px; }
.garage-chip { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--text); white-space: nowrap; }
.garage-chip.en-taller { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); font-weight: 600; }
.garage-card .veh-acts { grid-area: acts; align-self: end; margin-left: 0; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 820px) {
  .garage-card { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "foto txt" "acts acts"; }
  .garage-foto { width: 96px; }
  .garage-card .veh-acts { justify-content: flex-start; width: auto; }
}

/* Dashboard VIP */
.vip-kpis { margin-bottom: 12px; }
@media (min-width: 1180px) { .kpis.vip-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 821px) and (max-width: 1179px) { .kpis.vip-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vip-kpis .kpi-value { font-size: clamp(20px, 1.9vw, 26px); }
.vip-titulo { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.vip-titulo h2 { margin: 0; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* Boxes (diagrama por día) */
.gantt-card { overflow-x: auto; }
.gantt { display: grid; grid-template-columns: 110px 1fr; min-width: 760px; row-gap: 6px; }
.gantt-cab, .gantt-fila { display: grid; }
.gantt-dia { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 6px; line-height: 1.2; }
.gantt-dia b { display: block; font: 600 14px/1.2 "Inter", system-ui, sans-serif; color: var(--text); }
.gantt-dia.hoy b { color: var(--primary-ink); background: var(--primary); border-radius: 8px; display: inline-block; padding: 2px 6px; }
.gantt-dia.dom { opacity: .55; }
.gantt-box { display: flex; align-items: center; font-weight: 700; padding-right: 10px; }
.gantt-fila { position: relative; min-height: 62px; }
.gantt-celda { grid-row: 1; border-left: 1px dashed var(--border); }
.gantt-celda.hoy { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.gantt-barra { grid-row: 1; z-index: 1; margin: 6px 2px; border: 0; border-radius: 10px; padding: 6px 10px 9px; text-align: left; cursor: pointer;
  background: var(--primary); color: var(--primary-ink); display: flex; flex-direction: column; justify-content: center; min-width: 0; position: relative; overflow: hidden; }
.gantt-barra b { font: 700 13px/1.2 "Inter", system-ui, sans-serif; white-space: nowrap; }
.gantt-barra span { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-barra i { position: absolute; left: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--primary-ink) 60%, transparent); }
.gantt-barra.entregada { opacity: .5; }
.gantt-barra.choque { box-shadow: inset 0 0 0 2px var(--danger); }
.box-cfg { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

/* Hoy: bloque a todo el ancho (próximos contactos) */
.hoy-grid > .block-ancho { grid-column: 1 / -1; }
.block-sub { font-weight: 400; letter-spacing: 0; text-transform: none; }
.dias-pill { white-space: nowrap; }