:root {
  --bg: #eef4f9;
  --surface: #ffffff;
  --surface-soft: #f6f9fc;
  --ink: #202733;
  --muted: #607088;
  --line: #d3deea;
  --line-strong: #adc0d2;
  --primary: #b0703c;
  --primary-strong: #8c5530;
  --primary-soft: #f6ece2;
  --nav: #1a3455;
  --nav-hover: #243f6a;
  --accent: #cc2020;
  --accent-soft: #fde8e8;
  --green: #1f7a5b;
  --amber: #a76f22;
  --red: #b4443f;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 8px 24px rgba(16, 24, 40, 0.10);
}

* {
  box-sizing: border-box;
}

.login-screen {
  display: none;
  min-height: 100vh;
}

body.login-active .login-screen {
  align-items: stretch;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  min-height: 100vh;
}

body.login-active .app-shell {
  display: none;
}

/* Mientras se valida la sesion (hay token, esperando /auth/me) no se muestra ni
   la app ni el login, para evitar el destello de "la barra aparece y al segundo
   desaparece". Al resolver se muestra lo que corresponda. */
body.auth-checking .app-shell,
body.auth-checking .login-screen {
  display: none !important;
}

/* Panel de marca (izquierda) */
.login-hero {
  align-items: center;
  background: radial-gradient(130% 125% at 0% 0%, #244a78 0%, var(--nav) 46%, #0e2440 100%);
  color: #fff;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 56px;
  position: relative;
}

.login-hero::before {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 24px);
  content: "";
  inset: 0;
  position: absolute;
}

.login-hero::after {
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  height: 380px;
  opacity: 0.1;
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
}

.login-hero-content {
  max-width: 470px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.login-logo {
  display: block;
  margin-bottom: 30px;
  width: 264px;
}

.login-logo svg {
  display: block;
  height: auto;
  width: 100%;
}

.login-hero h1 {
  color: #fff;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.16;
  margin: 0 0 14px;
}

.login-hero-content > p {
  color: #c7d6e6;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 26px;
}

.login-points {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.login-points li {
  color: #e6eef7;
  font-size: 14px;
  font-weight: 600;
  padding-left: 28px;
  position: relative;
}

.login-points li::before {
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 16px;
}

.login-foot {
  color: #8fa6bd;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* Panel de acceso (derecha) */
.login-panel {
  align-items: center;
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 48px;
}

.login-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(13,39,66,0.12);
  display: grid;
  gap: 15px;
  max-width: 380px;
  padding: 34px 30px;
  width: 100%;
}

.login-card-head h2 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
}

.login-card-head p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.login-card label {
  color: #344052;
  display: grid;
  font-size: 12.5px;
  font-weight: 800;
  gap: 6px;
}

.login-card input {
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 15px;
  padding: 11px 12px;
  width: 100%;
}

.login-card input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,95,176,0.15);
  outline: none;
}

.login-card button[type="submit"] {
  background: var(--primary);
  border: none;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
  padding: 12px;
}

.login-card button[type="submit"]:hover { background: var(--primary-strong); }
.login-card button[type="submit"]:disabled { cursor: default; opacity: 0.7; }

.login-error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 8px;
  color: #b42318;
  display: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
}

.login-hint {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 0;
  text-align: center;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', 'Segoe UI', Inter, Arial, Helvetica, sans-serif;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 14px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.button-link,
.nav-item,
.submenu-item,
.secondary,
.danger,
.mini-action,
.sort-direction,
.header-tool,
.client-order-item {
  white-space: nowrap;
}

button:hover {
  background: var(--primary-strong);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(40, 88, 123, 0.18);
  outline-offset: 1px;
}

button.secondary {
  background: #eef2f6;
  color: var(--ink);
  border: 1px solid var(--line);
}

/* NORMA (jul-2026, pedido del jefe): los botones SECUNDARIOS son compactos por defecto en todo el TMS
   (patrón "Vista compacta" / "Disponibles hoy"), no el chunky 16px/11px-14px del botón base. Los primarios
   de color (submits críticos) mantienen su tamaño. Se excluye .mini-action (Docs/Aplicar/…) que ya es diminuto
   y a los que este selector, más específico, agrandaría. Reglas de barra más específicas (11px) siguen mandando. */
button.secondary:not(.mini-action):not(.button-link) {
  font-size: 11px;
  padding: 5px 10px;
  min-height: 30px;
  line-height: 1.2;
}
/* Dentro de la parrilla de Tráfico los botones ya son pequeños y ESCALAN con el zoom de filas: la norma
   global (min-height fijo) los reventaba (enormes al 50%). Aquí se neutraliza para que sigan su propio
   tamaño; los .button-link (Notas/Añadir carga-descarga) ya están fuera de la norma por el :not de arriba. */
#servicesList button.secondary:not(.mini-action) {
  min-height: 0;
  padding: 2px 6px;
  font-size: inherit;
  line-height: 1.2;
}

button.secondary:hover {
  background: #e5ebf2;
}

/* Anclas que deben verse como boton (descargas "Exportar Excel" en las barras). */
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.button:hover {
  background: var(--primary-strong);
}

a.button.secondary {
  background: #eef2f6;
  color: var(--ink);
  border: 1px solid var(--line);
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11px;
}

a.button.secondary:hover {
  background: #e5ebf2;
}

.list-toolbar a.button,
.providers-toolbar a.button {
  font-size: clamp(11px, 0.9vw, 13px);
}

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--nav);
  color: #fff;
  border-right: 1px solid #0f1620;
  height: 100vh;
  padding: 24px 18px;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.brand {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
  padding: 0 4px;
}

.brand-mark {
  align-items: center;
  background: var(--primary-strong);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  letter-spacing: 0.5px;
  overflow: hidden;
  position: relative;
  width: 52px;
}

.brand-mark::before {
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  height: 13px;
  left: 0;
  position: absolute;
  width: 20px;
}

.login-logo {
  overflow: hidden;
  position: relative;
}

.brand strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.brand small {
  color: #8fa8c4;
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.nav {
  display: grid;
  gap: 6px;
}

.mobile-chrome-toggle-slot {
  display: none;
}

.nav-line {
  align-items: center;
  display: inline-flex;
  gap: 2px;
  min-width: 0;
  width: fit-content;
}

.nav-line .nav-item,
.nav-line .submenu-item {
  flex: 0 1 auto;
  min-width: 0;
  padding-right: 8px;
}
/* En el desplegable (submenú vertical) el texto NO debe recortarse: cada ítem a su ancho de contenido
   (p.ej. "Cuadrante Conductores"). El contenedor del submenú crece a lo ancho del ítem más largo. */
.submenu-line .submenu-item { flex: 0 0 auto; min-width: max-content; }

.nav-open-link {
  align-items: center;
  background: #d7dde5;
  border: 1px solid #aab4c1;
  border-radius: 999px;
  color: #293446;
  display: inline-flex;
  flex: 0 0 15px;
  font-size: 8px;
  font-weight: 900;
  height: 15px;
  justify-content: center;
  text-decoration: none;
  width: 15px;
}

.nav-open-link:hover {
  background: #eef2f6;
  color: #111827;
}

.nav-item {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: #dce4ee;
  display: flex;
  gap: 7px;
  padding: 12px 13px;
  text-align: left;
}

.submenu-arrow {
  align-items: center;
  background: #202b39;
  border: 1px solid #4b5a6f;
  border-radius: 4px;
  display: inline-flex;
  flex: 0 0 18px;
  height: 18px;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  width: 18px;
}

.submenu-arrow::before {
  border-bottom: 4px solid transparent;
  border-left: 5px solid #c9d3df;
  border-top: 4px solid transparent;
  content: "";
  display: block;
  height: 0;
  transition: transform 0.15s ease, border-left-color 0.15s ease;
  width: 0;
}

.nav-item.submenu-open .submenu-arrow::before {
  transform: rotate(90deg);
}

.nav-item.active .submenu-arrow,
.nav-item:hover .submenu-arrow {
  background: #314054;
  border-color: #667790;
}

.nav-item.active .submenu-arrow::before,
.nav-item:hover .submenu-arrow::before {
  border-left-color: #fff;
}

.nav-item.active,
.nav-item:hover {
  background: var(--nav-hover);
  border-color: #3560a0;
}

.submenu {
  display: none;
  gap: 4px;
  margin: -2px 0 6px 18px;
}

.submenu.open {
  display: grid;
}

.submenu-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #b9c5d4;
  font-size: 13px;
  min-height: 30px;
  padding: 7px 10px;
  text-align: left;
}

.submenu-item.active,
.submenu-item:hover {
  background: #1e3f6a;
  border-color: #3560a0;
  color: #fff;
}

.main {
  padding: 28px;
}

.topbar {
  align-items: center;
  background: linear-gradient(180deg, #f8fbfd 0%, #edf5fb 100%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 18px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 27px;
  letter-spacing: 0;
}

h2 {
  font-size: 17px;
}

.topbar p {
  color: var(--muted);
  margin-top: 5px;
}


.range-date-control {
  display: none;
  gap: 6px;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
}

.date-control.range-active #singleDateControl {
  display: none;
}

.date-control.range-active .range-date-control {
  display: grid;
}

.compact-control {
  justify-self: end;
}

label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-height: 40px;
  padding: 10px;
  width: 100%;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

.floating-field {
  display: block;
  position: relative;
}

.floating-field > span {
  background: #fff;
  border: 1px solid #d7e1eb;
  border-radius: 999px;
  color: #607088;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 6px;
  position: absolute;
  right: 9px;
  text-transform: uppercase;
  top: -6px;
  z-index: 1;
}

.floating-field > input {
  padding-right: 86px;
}

textarea {
  min-height: 82px;
  resize: vertical;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.section-title {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  /* Separa el texto descriptivo del borde derecho para que no quede pegado/
     cortado contra el borde de la pantalla. */
  padding-right: 28px;
}

.section-title strong {
  text-align: right;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-title strong {
  color: var(--ink);
  font-size: 14px;
}

.subnav {
  background: #e8edf3;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: inline-flex;
  gap: 3px;
  margin: 0 0 14px;
  padding: 3px;
}

.subnav-item {
  background: transparent;
  color: #344052;
  font-size: 13px;
  min-height: 32px;
  padding: 7px 12px;
}

.subnav-item.active,
.subnav-item:hover {
  background: #fff;
  color: var(--primary-strong);
}

.customer-tab {
  display: none;
}

.customer-tab.active {
  display: block;
}

.summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  margin-bottom: 18px;
}

.metric,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.metric {
  padding: 17px;
  border-top: 2px solid var(--primary-soft);
}

.metric span {
  color: var(--muted);
  display: block;
  font-size: 13px;
}

.metric strong {
  display: block;
  font-size: 28px;
  margin-top: 4px;
}

.work-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 380px 1fr;
}

.split-view {
  display: grid;
  gap: 18px;
  grid-template-columns: 380px 1fr;
}

.panel {
  min-width: 0;
  padding: 18px;
}

.panel-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-title-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.panel-title-actions h2 {
  margin: 0;
  white-space: nowrap;
}

.panel-title-actions .app-send {
  font-size: 13px;
  min-height: 34px;
  white-space: nowrap;
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.panel-actions select {
  min-height: 34px;
  min-width: 190px;
}

.traffic-search-input {
  min-height: 34px;
  min-width: 260px;
  width: min(360px, 28vw);
}

.icon-button {
  min-width: 34px;
  padding-left: 0;
  padding-right: 0;
}

.form {
  display: grid;
  gap: 11px;
}

.form.editing {
  border-left: 4px solid var(--accent);
  padding-left: 12px;
}

.form-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-actions button {
  flex: 1 1 130px;
}

.ghost {
  display: none;
}

.form.editing .ghost {
  display: inline-flex;
}

.danger {
  background: #f7dfdc;
  border: 1px solid #e5b7b2;
  color: var(--red);
}

.danger:hover {
  background: #efcbc6;
}

.two-cols {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.service-list,
.table-list {
  display: grid;
  gap: 10px;
}

.list-toolbar {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1fr) 170px 74px;
  margin-bottom: 10px;
  padding: 8px;
}

.list-toolbar input,
.list-toolbar select {
  min-height: 34px;
}

/* Toolbars de Direcciones y Tarifas: 4 controles (buscar + orden + borrar + Asc)
   en UNA sola fila; con 3 columnas el boton "Asc" caia a una segunda linea. */
.list-toolbar[data-list-toolbar="addresses"],
.list-toolbar[data-list-toolbar="rates"],
.list-toolbar[data-list-toolbar="fuelings"] {
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
}

.list-toolbar .sort-direction {
  min-height: 34px;
  padding: 8px 11px;
}

#driversView .split-view > .panel:last-child {
  min-width: 0;
}

.drivers-panel-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.drivers-panel-actions .secondary,
.drivers-panel-actions .new-driver-btn {
  min-height: 34px;
  padding: 7px 14px;
  white-space: nowrap;
}

#driversView .driver-filter-panel {
  align-items: stretch;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin-bottom: 10px;
  padding: 8px;
  position: sticky;
  top: 74px;
  z-index: 7;
}

.driver-filter-row {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.driver-filter-main {
  grid-template-columns: minmax(240px, 1.55fr) minmax(96px, 0.55fr) minmax(118px, 0.7fr) minmax(150px, 0.95fr) minmax(140px, 0.8fr);
}

.driver-filter-secondary {
  grid-template-columns: minmax(96px, 0.6fr) minmax(96px, 0.6fr) minmax(100px, 0.62fr) minmax(96px, 0.6fr) minmax(140px, 0.9fr) 64px 112px;
}

.driver-filter-field {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 10px;
  font-weight: 800;
  gap: 3px;
  letter-spacing: 0.03em;
  min-width: 0;
  text-transform: uppercase;
}

.driver-filter-field input,
.driver-filter-field select,
.driver-filter-panel button {
  height: 34px;
  min-height: 34px;
  min-width: 0;
  width: 100%;
}

.driver-filter-field input,
.driver-filter-field select {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.driver-filter-field select {
  padding-right: 28px;
}

.driver-sort-direction,
.driver-clear-filters {
  align-self: end;
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}

.driver-clear-filters {
  justify-self: stretch;
}

.driver-shunter-centers,
.driver-modal-shunter-centers {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.driver-shunter-centers[hidden],
.driver-modal-shunter-centers[hidden] {
  display: none;
}

.driver-modal-shunter-centers {
  grid-column: 1 / -1;
}

.driver-modal-shunter-centers label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.driver-map-card {
  width: min(980px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  min-width: min(720px, calc(100vw - 48px));
  min-height: min(520px, calc(100vh - 48px));
}

/* Mapa en pestaña nueva (standalone): SOLO el mapa, a pantalla completa,
   sin la pagina de conductores debajo. */
body.driver-map-only { overflow: hidden; }
body.driver-map-only #driverMapPanel.open {
  padding: 0;
  background: var(--bg);
}
body.driver-map-only #driverMapPanel .driver-map-card {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
}

.driver-map-layout {
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 280px);
  min-height: 0;
}

.driver-map-canvas {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 360px;
  overflow: hidden;
}

.driver-map-canvas svg {
  display: block;
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.driver-map-spain {
  fill: #edf5ef;
  stroke: #94a98f;
  stroke-width: 1.2;
}

.driver-map-portugal {
  fill: #e7edf3;
  stroke: #a8b4c0;
  stroke-width: 0.8;
}

.driver-map-island {
  fill: #edf5ef;
  stroke: #94a98f;
  stroke-width: 0.7;
}

.driver-map-point circle {
  stroke: #fff;
  stroke-width: 0.7;
}

.driver-map-side {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.driver-map-stats {
  background: #f3f6f9;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 3px 8px;
  grid-template-columns: auto 1fr;
  padding: 10px 12px;
}

.driver-map-stats strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.driver-map-stats span {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.driver-map-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

.driver-map-list li {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
}

.driver-map-list strong {
  color: var(--ink);
  font-size: 12px;
}

.driver-map-list span,
.driver-map-missing {
  color: var(--muted);
  font-size: 11px;
}

.driver-map-missing {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
}

.driver-map-missing p {
  max-height: 90px;
  overflow: auto;
}

@media (max-width: 1280px) {
  .driver-filter-main {
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(112px, 0.7fr));
  }
  .driver-filter-operative,
  .driver-filter-main .driver-filter-field:last-child {
    grid-column: span 1;
  }
  .driver-filter-secondary {
    grid-template-columns: repeat(4, minmax(104px, 1fr)) 130px 64px 112px;
  }
}

@media (max-width: 980px) {
  .driver-filter-main,
  .driver-filter-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .driver-filter-search {
    grid-column: 1 / -1;
  }
}

.service-list.table-mode {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: block;
  overflow-x: auto;
}

.service-table {
  border-collapse: collapse;
  min-width: 2100px;
  width: 100%;
}

.service-table th,
.service-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.service-table .select-header,
.service-table .select-cell {
  text-align: center;
  width: 44px;
}

.service-app-check {
  accent-color: var(--accent);
  cursor: pointer;
  min-height: 16px;
  width: 16px;
}

.service-app-check:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#servicesList .service-table thead th {
  height: 28px;
  line-height: 1;
  padding-bottom: 3px;
  padding-top: 3px;
  vertical-align: middle;
}

#servicesList .service-table thead .select-header {
  width: 38px;
}

#servicesList .service-table thead .service-app-check {
  display: block;
  height: 16px;
  margin: 0 auto;
  min-height: 16px;
  width: 16px;
}

#servicesList .service-table thead .compact-header-content {
  min-height: 18px;
}

#servicesList .service-table thead .compact-filter-button {
  flex-basis: 14px !important;
  height: 14px !important;
  max-height: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  min-width: 14px !important;
  width: 14px !important;
}

.service-table .actions-cell {
  white-space: nowrap;
}

.service-table button,
.row-actions button {
  padding: 7px 10px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.service-table th {
  background: #e8f1f8;
  color: var(--primary-strong);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-table tr:last-child td {
  border-bottom: 0;
}

.service-list.density-compact .service-table th,
.service-list.density-compact .service-table td {
  padding: 6px 8px;
}

.service-list.density-comfortable .service-table th,
.service-list.density-comfortable .service-table td {
  padding: 14px 12px;
}

.service-list.small-text {
  font-size: 13px;
}

.service-card-check {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.columns-panel,
.view-options-panel {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: none;
  gap: 8px;
  margin: -4px 0 14px;
  padding: 10px;
}

.columns-panel.open {
  display: grid;
}

.view-options-panel.open {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.segmented-control {
  background: #e6f0f7;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: inline-flex;
  padding: 3px;
}

.segmented-control button {
  background: transparent;
  color: var(--ink);
  padding: 7px 10px;
}

.segmented-control button.active {
  background: #fff;
  color: var(--primary-strong);
  box-shadow: 0 1px 4px rgba(28, 38, 51, 0.12);
}

.toggle-control {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 8px;
}

.toggle-control input {
  min-height: 18px;
  width: auto;
}

/* Popup "Configurar columnas": filas-tarjeta con un solo scroll y flechas discretas.
   La doble clase .attachment-card.columns-card gana a .attachment-card (que impone
   overflow:auto y ancho grande) — mismo truco que view-options-card. */
.attachment-card.columns-card {
  width: min(480px, 94vw);
  height: auto;
  max-height: min(680px, calc(100vh - 64px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  resize: none;
}

.columns-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.column-control {
  align-items: center;
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  border: 1px solid #e7ecf2;
  border-radius: 9px;
  background: #fbfcfe;
  padding: 5px 6px 5px 10px;
}

.column-control:hover {
  background: #f4f7fb;
}

.column-control-main {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex: 1 1 auto;
  gap: 9px;
  min-width: 0;
}

.column-control-main span {
  color: #2c3a4d;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-control.is-off .column-control-main span {
  color: #97a3b4;
  font-weight: 500;
}

.column-control input {
  accent-color: var(--primary);
  flex: 0 0 auto;
  height: 15px;
  min-height: 15px;
  width: 15px;
}

.column-control .col-order-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #8a98ab;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  min-height: 0;
  min-width: 0;
  padding: 4px 6px;
}

.column-control .col-order-btn:hover {
  background: #eef2f7;
  color: #33465e;
}

.column-control .col-order-btn:disabled {
  background: transparent;
  color: #8a98ab;
  cursor: default;
  opacity: 0.25;
}

.service-card,
.row-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  user-select: none;
  background: var(--surface-soft);
  padding: 13px;
}

.service-card {
  display: grid;
  gap: 10px;
}

.service-list.density-compact .service-card {
  gap: 6px;
  padding: 9px;
}

.service-list.density-comfortable .service-card {
  gap: 14px;
  padding: 17px;
}

.service-card-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-field span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.service-field strong {
  display: block;
  font-weight: 700;
}

.service-top,
.row-top {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.service-title,
.row-title {
  font-weight: 800;
}

.link-title {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.link-title:hover {
  background: transparent;
  color: var(--primary);
  text-decoration: underline;
}

.muted {
  color: var(--muted);
}

.customer-detail {
  display: none;
}

.customer-detail.open {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px;
}

.detail-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.detail-head > button {
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
}

.detail-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-head h2 {
  font-size: 20px;
  margin-top: 2px;
}

.detail-grid {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.detail-grid span,
.detail-related p {
  color: #4d5a6b;
  font-size: 13px;
  margin: 0;
}

.detail-grid .wide {
  grid-column: span 2;
}

.detail-grid b {
  color: #253044;
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}

.detail-related {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.detail-related section {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.detail-related h3 {
  font-size: 13px;
  margin: 0;
}

.rate-group {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding-top: 7px;
}

.rate-group:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.rate-group strong {
  color: var(--primary-strong);
  font-size: 12px;
}

.pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
  white-space: nowrap;
}

.pill.pending {
  background: #e9eef4;
  color: #475569;
}

.pill.assigned {
  background: #dbe8f2;
  color: #28587b;
}

.pill.in_progress {
  background: #dff1ea;
  color: var(--green);
}

.pill.completed {
  background: #e3e8ee;
  color: #334155;
}

.pill.incident {
  background: #f7dfdc;
  color: var(--red);
}

.pill.cancelled {
  background: #eef1f4;
  color: #64748b;
}

.service-meta {
  color: var(--muted);
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.empty {
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  padding: 24px;
  text-align: center;
}

.toast {
  background: var(--nav);
  border-radius: 6px;
  top: 56px;
  left: 18px;
  color: #fff;
  display: none;
  padding: 10px 14px;
  position: fixed;
  max-width: 320px;
  font-size: 0.85rem;
  z-index: 200;
  box-shadow: 0 3px 12px rgba(0,0,0,.25);
}

.toast.show {
  display: block;
}

@media (max-width: 980px) {
  body.login-active .login-screen {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .login-hero {
    display: none;
  }

  .app-shell,
  .work-grid,
  .split-view {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding: 14px;
  }

  .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 16px;
  }

  .summary-grid,
  .two-cols,
  .service-meta,
  .service-card-grid {
    grid-template-columns: 1fr;
  }

  .nav {
    grid-template-columns: 1fr 1fr;
  }
}

/* Operational desktop polish */
body {
  background: #eef2f6;
}

[hidden] {
  display: none !important;
}

.app-shell {
  grid-template-columns: 236px 1fr;
}

.sidebar {
  padding: 18px 14px;
}

.brand {
  margin-bottom: 22px;
}

.brand-mark {
  height: 36px;
  width: 36px;
}

.nav-item {
  border-radius: 6px;
  font-size: 14px;
  padding: 11px 12px;
}

.main {
  padding: 24px;
}

.topbar {
  align-items: end;
  background: #f7f9fb;
  box-shadow: none;
  min-height: 0;
  padding: 16px 18px;
}

h1 {
  font-size: 24px;
}

.topbar p {
  font-size: 14px;
}

.date-control {
  align-items: end;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  min-width: 520px;
}

#singleDateControl {
  min-width: 170px;
}

.range-date-control {
  align-items: end;
  display: none;
  gap: 8px;
  grid-template-columns: auto 170px auto 170px;
}

.date-control.range-active .range-date-control {
  display: grid;
}

.compact-control {
  justify-self: auto;
}

.segmented-control {
  border-radius: 6px;
  padding: 2px;
}

.segmented-control button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #344052;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  min-height: 30px;
  padding: 6px 10px;
}

.segmented-control button:hover {
  background: #dbe3ec;
}

.segmented-control button.active {
  background: #fff;
  color: var(--primary-strong);
}

input,
select,
textarea {
  border-color: #cfd7e2;
  min-height: 36px;
  padding: 8px 10px;
}

textarea {
  min-height: 68px;
}

.summary-grid {
  gap: 10px;
  margin-bottom: 14px;
}

.metric {
  box-shadow: none;
  padding: 13px 15px;
}

.metric strong {
  font-size: 24px;
}

.work-grid {
  align-items: start;
  gap: 22px;
  grid-template-columns: 330px minmax(0, 1fr);
}

.panel {
  box-shadow: 0 4px 14px rgba(16,24,40,0.07);
  padding: 14px;
}

.panel-head {
  margin-bottom: 12px;
}

.panel-head h2 {
  font-size: 16px;
}

.panel-actions {
  align-items: center;
}

.panel-actions button,
button.secondary {
  min-height: 34px;
  padding: 8px 11px;
}

.panel-actions button,
.list-toolbar button,
.form-actions button {
  font-size: clamp(11px, 0.9vw, 13px);
}

.form {
  gap: 9px;
}

.advanced-fields {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.advanced-fields summary {
  color: var(--primary-strong);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.advanced-fields[open] {
  display: grid;
  gap: 9px;
}

.form-actions {
  flex-wrap: nowrap;
}

.form-actions button {
  flex: 1;
  min-height: 36px;
  padding: 9px 12px;
}

.services-panel {
  overflow: hidden;
  min-height: 520px;
}

.columns-panel,
.view-options-panel {
  margin: 0 0 12px;
  padding: 9px;
}

.view-options-panel.open {
  background: #f7f9fb;
  border-color: #cfd7e2;
  justify-content: flex-start;
}

.toggle-control {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  min-height: 34px;
  padding: 6px 10px;
}

.toggle-control input,
.column-control input {
  accent-color: var(--primary);
  height: 16px;
  min-height: 16px;
  padding: 0;
  width: 16px;
}

.service-list.table-mode {
  background: #fff;
  max-height: calc(100vh - 250px);
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
}

.service-table {
  font-size: 11px;
  min-width: 1700px;
  table-layout: fixed;
}

.service-table th {
  background: #f1f4f8;
  border-bottom: 1px solid #cbd5e1;
  color: #4b5565;
  font-size: 10px;
  padding: 6px 10px;
  position: sticky;
  top: 0;
  z-index: 3;
}

.service-table td {
  padding: 8px 10px;
}

.service-table th,
.service-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-table .col-route {
  min-width: 280px;
}

.service-table th {
  position: sticky;
}

.service-table th[data-column-key] {
  cursor: grab;
  min-width: 70px;
  position: sticky;
}

.service-table th.col-route,
.service-table td.col-route {
  min-width: 280px;
}

.service-table th[data-column-key]:active {
  cursor: grabbing;
}

.column-drag-label {
  display: inline-block;
  padding-right: 8px;
}

.header-tool {
  border-radius: 4px;
  font-size: 10px;
  min-height: 20px;
  padding: 3px 6px;
}

.client-order-panel {
  align-items: start;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px;
}

.attachment-card.client-order-panel {
  background: #fff;
  margin: 0;
  padding: 16px;
}

.client-order-panel span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.client-order-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-order-day {
  display: grid;
  gap: 6px;
}

.client-order-day-head {
  align-items: center;
  display: flex;
  gap: 8px;
}

.client-order-day h3 {
  color: var(--ink);
  font-size: 12px;
  margin: 0;
  text-transform: uppercase;
}

.client-order-day-head button {
  font-size: 11px;
  min-height: 24px;
  padding: 4px 7px;
}

.client-order-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: grab;
  font-size: 12px;
  min-height: 28px;
  padding: 5px 8px;
  touch-action: none;
  user-select: none;
}

.client-order-item:focus-visible,
.field-picker-item:focus-visible {
  outline: 3px solid rgba(40, 88, 123, 0.18);
  outline-offset: 1px;
}

.client-order-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-order-preview span,
.client-order-day-check {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  padding: 6px 8px;
}

.client-order-days-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.client-order-day-check {
  align-items: center;
  display: flex;
  gap: 8px;
}

.client-order-day-check input {
  accent-color: var(--primary);
  height: 16px;
  min-height: 16px;
  padding: 0;
  width: 16px;
}

.client-order-apply-actions {
  display: flex;
  justify-content: flex-end;
}

.dragging-column {
  opacity: 0.45;
}

.column-drop-target {
  background: #e8f2ec !important;
  box-shadow: inset 3px 0 0 var(--green);
}

.column-resizer {
  background: transparent;
  border: 0;
  bottom: 0;
  cursor: col-resize;
  min-height: 0;
  padding: 0;
  position: absolute;
  right: -3px;
  top: 0;
  width: 7px;`n  z-index: 10;
}

.column-resizer::after {
  background: #cbd5e1;
  bottom: 7px;
  content: "";
  position: absolute;
  right: 3px;
  top: 7px;
  width: 1px;
}

.column-resizer:hover {
  background: rgba(40, 88, 123, 0.18);
}

.col-service_date,
.col-service_date_2,
.col-loading_at,
.col-unloading_at {
  white-space: nowrap;
}

.editable-cell {
  cursor: default;
}

.editable-value {
  border: 1px solid transparent;
  border-radius: 4px;
  display: inline-block;
  min-height: 22px;
  min-width: 24px;
  padding: 3px 5px;
}

.col-notes .editable-value,
.col-incidents .editable-value,
.col-incident_type_notes .editable-value,
.col-departure_info .editable-value {
  display: -webkit-box;
  line-height: 1.25;
  max-height: calc(1.25em * 3 + 8px);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
}

.field-edit-hotspot:hover,
.field-edit-hotspot:hover .time-value {
  background: #fff8df;
  border-color: #e3c66d;
  border-radius: 4px;
}

.field-edit-hotspot {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.editable-value.is-empty-editable,
.field-edit-hotspot.is-empty-editable,
.time-value.is-empty-editable {
  color: #6b7a90;
  font-size: 11px;
  font-weight: 700;
  min-width: 48px;
  text-align: center;
  text-transform: uppercase;
}

.service-date-cell > .field-edit-hotspot,
.service-customer-cell .field-edit-hotspot {
  display: inline-block;
  min-height: 22px;
  min-width: 24px;
  padding: 3px 5px;
}

.col-driver_name.editable-cell,
.col-vehicle_plate.editable-cell,
.col-trailer_plate.editable-cell,
.col-loading_at.editable-cell,
.col-unloading_at.editable-cell {
  cursor: pointer;
}

/* El span de hora dentro de service-time-cell ocupa el ancho completo
   para que sea fácil de clicar */
.service-time-cell .time-value {
  display: block;
  min-height: 22px;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.inline-input {
  background: #fff;
  border: 1px solid var(--primary);
  border-radius: 4px;
  min-height: 26px;
  padding: 4px 6px;
  width: 100%;
}

.inline-textarea {
  box-shadow: 0 12px 30px rgba(28, 38, 51, 0.18);
  font-size: 13px;
  left: 4px;
  line-height: 1.35;
  min-height: 112px;
  min-width: min(520px, calc(100vw - 90px));
  position: absolute;
  resize: both;
  top: 4px;
  white-space: normal;
  z-index: 32;
}

.datetime-fields {
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr;
  min-width: 0;
}

.datetime-form-field,
.inline-datetime-editor {
  display: grid;
  gap: 5px;
  grid-template-columns: minmax(0, 1fr) 56px 56px;
  min-width: 0;
}

.datetime-form-field {
  grid-template-columns: minmax(0, 1fr) 52px 52px;
}

.datetime-label {
  color: #5b6778;
  font-size: 11px;
  font-weight: 900;
  grid-column: 1 / -1;
  line-height: 1;
  text-transform: uppercase;
}

.datetime-form-field input,
.datetime-form-field select,
.inline-datetime-editor input,
.inline-datetime-editor select {
  font-size: 12px;
  min-height: 32px;
  padding: 5px 7px;
}

.datetime-form-field input,
.datetime-form-field select {
  padding-left: 5px;
  padding-right: 5px;
}

.inline-datetime-editor {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(28, 38, 51, 0.14);
  grid-template-columns: 132px 58px 58px auto;
  left: 6px;
  min-width: 326px;
  padding: 6px;
  position: absolute;
  top: 4px;
  z-index: 30;
}

.service-table td.editing-cell {
  overflow: visible;
  position: relative;
  z-index: 25;
}

.service-table td.editing-cell .field-edit-hotspot,
.service-table td.editing-cell .route-address-hotspot {
  background: #fff8df;
  border-color: #e3c66d;
  border-radius: 4px;
}

.service-table tr:has(td.editing-cell) {
  position: relative;
  z-index: 20;
}

.related-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proof-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 4px;
}

.proof-chip {
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #344052;
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  min-height: 23px;
  padding: 4px 8px;
  text-transform: none;
  white-space: nowrap;
}

.proof-chip.send {
  background: #e3f2eb;
  border-color: #b9dfcd;
  color: var(--green);
}

.driver-app-chip {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  max-width: none;
  min-height: 20px;
  min-width: 82px;
  padding: 2px 6px;
  text-transform: uppercase;
  white-space: nowrap;
  width: fit-content;
}

.driver-app-chip.not-sent {
  background: #fff1f1;
  border: 1px solid #f4cdcd;
  color: #b56a6a;
}

.driver-app-chip.sent {
  background: #fff7da;
  border: 1px solid #efdca1;
  color: #9b7a31;
}

.driver-app-chip.confirmed {
  background: #edf8f2;
  border: 1px solid #c7e7d5;
  color: #4b8f6f;
}

.driver-app-chip.send-cancelled {
  background: #f3f4f6;
  border: 1px solid #d3dae3;
  color: #778194;
}
/* Viaje modificado tras enviarlo: el conductor aun no ha leido el cambio. */
.driver-app-chip.changed {
  background: #ffe7c7;
  border: 1px solid #efb462;
  color: #95560a;
  font-weight: 700;
}

.driver-app-status-wrap {
  align-items: center;
  display: inline-flex;
  gap: 4px;
}

.driver-app-menu-button {
  background: #eef2f6;
  border: 1px solid #c7d0dc;
  border-radius: 999px;
  color: #526071;
  font-size: 9px;
  height: 18px;
  min-height: 18px;
  padding: 0 5px;
}

.service-date-cell {
  display: grid;
  gap: 7px;
  justify-items: start;
}

.cancel-service-button {
  align-items: center;
  background: #fff8f8;
  border: 1px solid #f0cece;
  border-radius: 4px;
  color: #b46a6a;
  display: inline-flex;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 19px;
  min-width: 0;
  padding: 3px 7px;
  text-transform: uppercase;
  width: fit-content;
}

.cancel-service-button.is-cancelled {
  background: #f2bcbc;
  border-color: #d98f8f;
  color: #873d3d;
}

.app-send {
  background: #fff3cd;
  border-color: #ebd28a;
  color: #8a5b00;
}

.proof-workflow {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}

.proof-workflow span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.proof-workflow .row-actions {
  grid-column: 1 / -1;
}

.related-line span {
  flex: 1 1 260px;
}

.service-customer-cell {
  border: 1px solid transparent;
  border-radius: 4px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 3px 5px;
}

.customer-title-row,
.customer-meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.customer-title-row strong {
  min-width: 0;
}

.proof-send-button {
  background: #eaf2fb;
  border: 1px solid #9fc3e6;
  border-radius: 5px;
  color: #1f5d8f;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  min-height: 20px;
  padding: 3px 6px;
  white-space: nowrap;
}

.proof-send-button:hover {
  background: #dcecfb;
}

.proof-send-button.sent {
  background: #e3f2eb;
  border-color: #9bd3b5;
  color: #176244;
}

.cmr-send-button {
  background: #fdf1e7;
  border: 1px solid #e0b48a;
  border-radius: 4px;
  color: #9a531c;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  min-height: 19px;
  padding: 3px 7px;
  white-space: nowrap;
}

/* Docs y CMR en la fila inferior del cliente: compactos (más finos que la fila). */
.customer-meta-row .mini-action,
.customer-meta-row .cmr-send-button,
.customer-title-row .proof-send-button,
.customer-meta-row .cancel-service-button {
  font-size: 9px;
  line-height: 1;
  min-height: 19px;
  padding: 3px 7px;
}

/* Aviso "Limpiar = todas las fechas" en Tráfico diario. */
.all-dates-note {
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: 6px;
  color: #78350f;
  font-size: 12.5px;
  margin: 0 0 8px;
  padding: 6px 12px;
}

.cmr-send-button:hover {
  background: #f8e4d1;
}

.cmr-send-button.sent {
  background: #e3f2eb;
  border-color: #9bd3b5;
  color: #176244;
}

.mini-action,
.route-map-actions .button-link {
  border-radius: 4px;
  font-size: 10px;
  line-height: 1;
  min-height: 22px;
  padding: 4px 6px;
  width: fit-content;
}

.route-cell {
  display: grid;
  gap: 4px 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  min-width: 0;
}

.route-field {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.route-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Hotspot de dirección: misma estética que el resto de celdas editables */
.route-address-hotspot {
  cursor: pointer;
  display: block;
  font-size: 12px;
  font-weight: 700;
  min-height: 24px;
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-address-hotspot:hover {
  background: #fff8df;
  border-color: #e3c66d;
}

.route-col {
  display: grid;
  gap: 3px;
  min-width: 0;
  align-content: start;
}
.route-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.route-link-ruta { font-weight: 800; }
.compact-route-actions { margin-top: 3px; }

/* --- Paradas multiples de carga / descarga --- */
.route-add-stop {
  font-size: 10px;
  line-height: 1;
  min-height: 22px;
  padding: 4px 6px;
  border-radius: 4px;
  width: fit-content;
  justify-self: start;
}
/* Botones de notas de carga/descarga, DEBAJO del nombre del conductor (la celda
   tiene hueco vertical de sobra -> filas delgadas). Pequenos; resaltados en
   cobre cuando ya hay nota. */
.svc-notes-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 3px;
}
/* Mas especifico que .button-link (que va despues en el CSS) para ganar el tamano. */
.svc-notes-row .route-notes-btn {
  border-radius: 4px;
  flex: 0 1 auto;
  font-size: 10px;
  line-height: 1;
  min-height: 20px;
  min-width: 0;
  overflow: hidden;
  padding: 3px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-notes-row .route-notes-btn.has-notes {
  background: #f6ece2;
  border-color: var(--primary);
  color: var(--primary-strong);
  font-weight: 800;
}
.route-multi-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.route-stop-list {
  list-style: none;
  margin: 3px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.route-stop {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: 12px;
}
.route-stop.dragging { opacity: 0.45; }
.route-stop.drag-over { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.route-stop-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 11px;
  user-select: none;
}
.route-stop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #eef2f6;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
}
.route-stop-main {
  cursor: pointer;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.route-stop-main:hover .route-stop-addr { text-decoration: underline; }
.route-stop-addr {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-stop-time { color: var(--muted); font-size: 10px; }
.route-stop-del {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  min-height: 0;
}
.route-stop-del:hover { color: #c0392b; background: transparent; }

/* Paradas extra del formulario "Nuevo servicio" */
.form-extra-stops { display: grid; gap: 6px; }
.form-extra-stops-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form-extra-stops-actions button { font-size: 12px; padding: 6px 10px; }
.form-stop-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
}
.form-stop-tag { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.form-stop-addr-btn { width: 100%; text-align: left; font-size: 12px; padding: 6px 10px; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-stop-dt { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.form-stop-dt .form-stop-date { width: 140px; }
.form-stop-dt .form-stop-hour, .form-stop-dt .form-stop-minute { width: 54px; }
.form-stop-remove {
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; min-height: 0;
}
.form-stop-remove:hover { color: #c0392b; background: transparent; }

/* Paradas extra en el pop up de edición (doble clic) */
.modal-stops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 8px; }
.modal-stops-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.modal-stops-col > button { justify-self: start; font-size: 12px; padding: 6px 10px; }
/* Fila de parada extra (Carga 2 / Descarga 2…): que la dirección y la fecha/hora se vean COMPLETAS
   y no se aplasten en media columna -> dirección en su línea (ancha), fecha/hora debajo. */
.modal-stops-col .form-stop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.modal-stops-col .form-stop-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--muted); text-transform: uppercase; min-width: 52px; }
.modal-stops-col .form-stop-addr-btn { flex: 1 1 150px; min-width: 150px; width: auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 32px; }
.modal-stops-col .form-stop-dt { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.modal-stops-col .form-stop-date { width: 148px; flex: 0 0 auto; }
.modal-stops-col .form-stop-hour, .modal-stops-col .form-stop-minute { width: 54px; flex: 0 0 auto; }
.modal-stops-col .form-stop-remove { flex: 0 0 auto; }
/* TRAYECTO como LISTA DE PARADAS (27-07-2026): dos columnas —Cargas / Descargas— y dentro, las paradas
   EN ORDEN, todas con la misma forma: nº · dirección · fecha y hora (y la ✕ solo en las añadidas). La
   parada 1 es la principal, y su hora vive aquí (antes estaba en otra sección "Tiempos", lejísimos). */
.svc-route-grid { gap: 14px 18px; margin-top: 4px; }
.svc-route-col { border: 1px solid var(--line, #e6ebf1); border-radius: 10px; padding: 12px; background: #fcfdfe;
  gap: 8px;
  /* QUE NADA SE SALGA DEL RECUADRO (lo vio el jefe en una ficha con dos cargas: la fecha de CARGA 1 se
     salía por la derecha e invadía la columna de descargas). Un elemento flexible tiene `min-width:auto`
     por defecto, así que NO puede encogerse por debajo de lo que ocupa su contenido: la columna se
     ensanchaba sola y desbordaba en vez de repartir. Con `min-width:0` vuelve a repartirse, y el resto de
     reglas de abajo garantizan que la fila de una parada SIEMPRE puede partirse. */
  min-width: 0; }
.svc-route-col, .svc-route-col * { box-sizing: border-box; }
/* Y la CLAVE del desborde: la columna es a su vez una rejilla, y una pista `auto` se dimensiona por el
   contenido MAXIMO, asi que la fila de la parada se plantaba en sus 281 px aunque la columna midiera 231
   y se salia por el lateral. `minmax(0, 1fr)` le dice a la pista que puede encogerse. */
.svc-route-col { grid-template-columns: minmax(0, 1fr); }
.svc-route-col .form-stop-row { flex-wrap: wrap; min-width: 0; }
/* La dirección puede encogerse (ya recorta con puntos suspensivos); en pantallas estrechas se lleva la
   fila entera para ella y la fecha baja debajo, en vez de empujar hacia fuera. */
.svc-route-col .form-stop-addr-btn { flex: 1 1 140px; min-width: 0; max-width: 100%; }
/* El grupo fecha+hora+minutos también se parte si hace falta, y nunca es más ancho que su columna. */
.svc-route-col .form-stop-dt { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.svc-route-col .form-stop-dt input,
.svc-route-col .form-stop-dt select { max-width: 100%; }
.svc-route-title { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary-strong, #8a5a2b); }
.svc-route-col .form-stop-row { padding: 7px 8px; border: 1px solid #eef1f5; border-radius: 8px; background: #fff; }
.svc-route-col .form-stop-row + .form-stop-row { margin-top: 6px; }
#modalLoadStopsList .form-stop-row:first-child, #modalUnloadStopsList .form-stop-row:first-child { margin-top: 6px; }
.svc-route-main { border-color: #dfe6ee !important; }
/* Anchos de la parada: COMODOS cuando hay sitio, pero que CEDEN antes que desbordar. La fecha llevaba
   140 px fijos y la hora y los minutos 54 cada uno; en una ficha estrecha ese trio no cabia y se salia por
   el lateral invadiendo la columna de al lado (lo vio el jefe en una ficha con dos cargas). Ahora la fecha
   encoge con un minimo legible y la hora y los minutos bajan de renglon antes que empujar.
   OJO al tocar esto: estas reglas van DESPUES del bloque de arriba a proposito — con la misma
   especificidad manda la ultima, y por eso la version anterior de este arreglo no hacia nada. */
.svc-route-col .form-stop-tag { min-width: 0; }
.svc-route-col .form-stop-dt { gap: 4px; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.svc-route-col .form-stop-date { width: auto; flex: 1 1 118px; min-width: 0; max-width: 100%; }
.svc-route-col .form-stop-hour,
.svc-route-col .form-stop-minute { flex: 0 1 auto; min-width: 0; }
/* SIMETRÍA de las paradas (28-07-2026, lo vio el jefe): la parada 1 monta su fecha/hora con
   `.datetime-form-field` (12px, 32px de alto) y las AÑADIDAS no llevaban esa clase, así que caían al input
   grande del formulario (16px, 43px) — dos filas que hacen lo mismo con dos tamaños distintos. Se igualan
   aquí, que es lo que son: los campos de una parada. */
.svc-route-col .form-stop-dt input,
.svc-route-col .form-stop-dt select {
  font-size: 12px; min-height: 32px; height: 32px; padding: 5px; box-sizing: border-box;
}
.svc-route-col .form-stop-hour, .svc-route-col .form-stop-minute { width: 54px; }
/* La ✕ de quitar parada, del mismo alto que los campos (antes sobresalía y desalineaba la fila). */
.svc-route-col .form-stop-remove { min-height: 32px; height: 32px; padding: 0 8px; line-height: 1; }
.svc-route-notes { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: 11px;
  font-weight: 700; color: var(--muted); }
.svc-route-notes textarea { min-height: 54px; font-weight: 400; }

/* --- Direcciones operativas (Tráfico diario) --- */
.taddr-clientbar { margin-bottom: 12px; display: flex; align-items: flex-end; gap: 16px; }
.taddr-bar-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 0; }
.taddr-bar-group-grow { flex: 1 1 0; min-width: 0; }
.taddr-bar-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.taddr-bar-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.taddr-clientselect { position: relative; flex: 1 1 auto; min-width: 0; }
.taddr-clear { flex: 0 0 auto; }
.taddr-addrselect { position: relative; flex: 1 1 360px; min-width: 0; }
.taddr-addrselect > input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.taddr-addrselect .taddr-clientdrop { max-height: 60vh; overflow-y: auto; }
.taddr-role-tag { font-size: 10px; font-weight: 700; color: var(--primary-strong); background: #eef3fb; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.taddr-clientbtn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; cursor: pointer; font-weight: 700; }
.taddr-clientbtn:hover { background: #f6f9fc; }
.taddr-clientbtn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taddr-clientbtn-caret { color: var(--muted); flex-shrink: 0; }
.taddr-clientdrop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 8px; display: grid; gap: 6px; }
.taddr-clientdrop input { width: 100%; }
.taddr-list { display: grid; gap: 4px; max-height: 48vh; overflow-y: auto; }
.taddr-item { display: grid; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.taddr-item:hover { background: #f6f9fc; }
.taddr-item.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.taddr-item-name { font-weight: 700; font-size: 13px; }
.taddr-item-sub { font-size: 11px; color: var(--muted); }
.taddr-detail { min-width: 0; }
.taddr-card { display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.taddr-readonly { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px 16px; }
.taddr-readonly > div { display: grid; gap: 2px; min-width: 0; }
.taddr-readonly > div > span { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.taddr-readonly > div > strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taddr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.taddr-section-head h3 { font-size: 13px; margin: 0; }
.taddr-addr-list { display: grid; gap: 4px; }
/* Contactos operativos: celdas compactas (ancho del contenido) APILADAS DE DOS EN DOS: cada columna es una
   pila de 2; al llegar a 2 salta a una columna nueva (con 5 → 2+2+1, ninguna columna con 3). */
.taddr-contacts { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  grid-auto-columns: minmax(0, max-content); justify-content: start; align-items: start; gap: 4px 8px; overflow-x: auto; }
.taddr-contacts .taddr-contact-row { max-width: 340px; }
.taddr-contact-row, .taddr-addr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
.taddr-contact-main, .taddr-addr-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.taddr-contact-main span { font-size: 11px; color: var(--muted); }
.taddr-addr-name { font-weight: 700; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taddr-addr-detail { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.taddr-addr-sub { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taddr-both-tag { font-size: 10px; color: var(--primary-strong); font-weight: 700; }
.taddr-drag-handle { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; color: var(--muted); cursor: grab; font-size: 11px; letter-spacing: -2px; user-select: none; padding-right: 2px; }
.taddr-addr-row[draggable="true"] { cursor: default; }
.taddr-addr-row.dragging { opacity: 0.5; border-color: var(--primary-strong); background: #f0f6ff; }
.taddr-row-actions { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.taddr-maps-btn { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #ea4335; text-decoration: none; border: 1px solid #f3c0bb; background: #fef0ef; border-radius: 5px; padding: 2px 6px; line-height: 1; white-space: nowrap; }
.taddr-maps-btn:hover { background: #fde3e1; border-color: #ea4335; }
.taddr-maps-btn svg { display: block; }
.taddr-addr-row { cursor: default; }
.taddr-addr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.taddr-addr-col { min-width: 0; }
.taddr-addr-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.taddr-addr-actions button { font-size: 11px; padding: 5px 8px; }
.taddr-assoc-list { display: grid; gap: 4px; align-content: start; max-height: 52vh; overflow-y: auto; }
.taddr-assoc-opt { align-content: start; }
.taddr-assoc-opt { display: grid; text-align: left; gap: 1px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; cursor: pointer; background: #fff; color: var(--ink); }
.taddr-assoc-opt:hover { background: #f6f9fc; }
.taddr-assoc-opt strong { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taddr-assoc-opt span { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .taddr-shell { grid-template-columns: 1fr; }
  .taddr-readonly { grid-template-columns: 1fr 1fr; }
  .taddr-addr-cols { grid-template-columns: 1fr; }
}

.service-time-cell {
  display: grid;
  gap: 5px;
}

.driver-milestones {
  display: flex;
  gap: 4px;
}

.driver-milestone {
  align-items: center;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 5px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font-size: 9px;
  font-weight: 900;
  gap: 3px;
  min-height: 20px;
  min-width: 43px;
  padding: 2px 3px 3px;
  white-space: nowrap;
}

.driver-milestone b {
  align-items: center;
  background: #e2e8f0;
  border-radius: 4px;
  color: #334155;
  display: inline-flex;
  font-size: 8px;
  justify-content: center;
  min-width: 16px;
  padding: 2px 3px;
}

.driver-milestone small {
  color: inherit;
  font-size: 9px;
  /* Con line-height=1 los dígitos quedaban ópticamente altos respecto a la etiqueta LC/SC…
     Igualo la altura de línea a la del badge (12px) y centro, para que hora y letras cuadren. */
  line-height: 12px;
  display: inline-flex;
  align-items: center;
}

/* ── Estados de color de los hitos (código de color con SIGNIFICADO) ───────────
   m-none gris = sin marcar · m-ok verde = a tiempo · m-warn amarillo = retraso/vigilar
   · m-alert rojo = fuera de plazo (llegada no marcada tras la cita, o salida >2h). */
.driver-milestone.m-ok {
  background: #f6fbf8;
  border-color: #9bd3b5;
  border-bottom-color: #2f9d65;
  color: #176244;
}
.driver-milestone.m-ok b { background: #d7f0e2; color: #176244; }

.driver-milestone.m-warn {
  background: #fff7e6;
  border-color: #ecc76a;
  border-bottom-color: #d99a1c;
  color: #8a5a10;
}
.driver-milestone.m-warn b { background: #f6e2b0; color: #8a5a10; }

.driver-milestone.m-alert {
  background: #fdecec;
  border-color: #ef9a9a;
  border-bottom-color: #d0342c;
  color: #b3261e;
}
.driver-milestone.m-alert b { background: #f6cdcd; color: #b3261e; }

/* Corregido por tráfico = recuadro GRUESO (como en negrita), SIN cambiar el color
   (el color ya significa el estado de puntualidad). Se superpone a cualquier estado. */
.driver-milestone.manual {
  border-width: 2px;
  font-weight: 1000;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Aviso de llegada SILENCIADO por tráfico (venía a rojo, lo quitó al comprobar que el
   conductor llega): chip gris con borde punteado — ni alarma ni "a tiempo", solo "controlado". */
.driver-milestone.acked {
  border-style: dashed;
  border-color: #9aa7b6;
  color: #6b7787;
}

.mail-template-preview {
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.mail-template-preview p {
  color: var(--ink);
  font-size: 13px;
}

.narrow-card {
  max-width: 620px;
}

/* Enviar albarán: destinatarios (checkboxes multi) + asunto/cuerpo editables */
.proof-mail-form { display: grid; gap: 6px; }
.proof-mail-lbl { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 6px; }
.proof-mail-lbl .muted { font-weight: 500; text-transform: none; letter-spacing: 0; }
.proof-mail-recipients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; max-height: 168px; overflow-y: auto; }
.proof-mail-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; min-width: 0; }
.proof-mail-chk input { flex: 0 0 auto; width: auto; margin: 0; }
.proof-mail-chk span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proof-mail-chk .proof-del { flex: 0 0 auto; margin-left: auto; opacity: .55; }
.proof-mail-chk:hover .proof-del { opacity: 1; }
.proof-mail-add { display: flex; gap: 6px; }
.proof-mail-add input { flex: 1 1 auto; }
.proof-mail-add button { flex: 0 0 auto; }
.proof-mail-input, .proof-mail-textarea { width: 100%; }
.proof-mail-textarea { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.4; }

.milestone-card {
  max-width: 560px;
  width: min(460px, 94vw);
  height: auto;
  min-height: 0;
  overflow: visible;
  resize: none;
}

/* ── Popup unificado de los 4 hitos (LC/SC/LD/SD) + paralización ─────────────── */
/* La tarjeta se limita a la pantalla y hace scroll DENTRO (overflow auto); antes la clase
   heredada .milestone-card forzaba overflow:visible y el contenido se salía por abajo. */
.attachment-card.mst-card {
  max-width: 560px;
  width: min(560px, 95vw);
  height: auto;
  /* Tope alto para que en pantallas normales quepa TODO (incl. paralización cobrar+pagar)
     sin barra de scroll; en pantallas bajas sigue capado a 98vh y scrollea lo justo. */
  max-height: min(98vh, 960px);
  overflow: auto;
  overscroll-behavior: contain;
  resize: none;
  gap: 12px;
}
/* "Guardar hitos" fijo al fondo de la tarjeta: siempre visible aunque se haga scroll. */
.attachment-card.mst-card > .form-actions {
  position: sticky;
  bottom: -16px;
  margin: 4px -16px -16px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--line, #e6ecf3);
  box-shadow: 0 -6px 10px -8px rgba(15, 23, 42, 0.18);
  z-index: 2;
}
.mst-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 11px;
}
.mst-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.mst-dot { width: 11px; height: 11px; border-radius: 3px; border: 1px solid; display: inline-block; }
.mst-dot.m-ok { background: #f6fbf8; border-color: #2f9d65; }
.mst-dot.m-warn { background: #fff7e6; border-color: #d99a1c; }
.mst-dot.m-alert { background: #fdecec; border-color: #d0342c; }
.mst-dot.m-none { background: #fff; border-color: #cbd5e1; }
.mst-legend-manual { font-weight: 700; color: #566173; }

/* Orden temporal: fila superior CARGA (LC · SC), fila inferior DESCARGA (LD · SD).
   Cada grupo = 2 celdas horizontales del MISMO tamaño (grid align-items:stretch iguala
   la altura de la pareja; el min-height del info reserva 2 líneas para que las 4 midan igual). */
.mst-groups { display: flex; flex-direction: column; gap: 12px; }
.mst-group { display: flex; flex-direction: column; gap: 7px; }
.mst-group-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
@media (max-width: 520px) { .mst-group-cells { grid-template-columns: 1fr; } }
.mst-group-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8a5a2b; margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--line, #e6ecf3);
}

.mst-row {
  border: 1px solid var(--line, #e6ecf3);
  border-left: 4px solid #cbd5e1;
  border-radius: 9px;
  background: #fbfcfe;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.mst-row.m-ok { border-left-color: #2f9d65; }
.mst-row.m-warn { border-left-color: #d99a1c; }
.mst-row.m-alert { border-left-color: #d0342c; background: #fef7f7; }
.mst-row.is-acked { border-left-color: #9aa7b6; border-left-style: dashed; }

/* Botón de Tráfico para silenciar/reactivar el aviso rojo de llegada sin marcar.
   Ocupa el ancho de la celda y el texto ENVUELVE (antes se salía y quedaba cortado). */
.mst-ack-btn {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  border: 1px solid #d0342c;
  background: #fff;
  color: #b3261e;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  cursor: pointer;
}
.mst-ack-btn:hover { background: #fdecec; }
.mst-ack-btn.is-on { border-color: #9aa7b6; color: #566173; }
.mst-ack-btn.is-on:hover { background: #eef2f7; }
.mst-row-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mst-row-label { font-size: 12.5px; color: #24303f; }
/* Reserva 2 líneas para que las 4 celdas midan igual aunque una tenga info más larga. */
.mst-row-info { font-size: 11px; flex: 1 1 100%; min-height: 30px; line-height: 1.35; }
/* Campos anclados abajo: así los selects/observaciones quedan alineados entre las 4 celdas. */
.mst-row-fields { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; margin-top: auto; }
.mst-row-fields .mst-note { grid-column: 1 / -1; }
.mst-row-fields input,
.mst-row-fields select {
  min-height: 32px; font-size: 13px; border: 1px solid var(--line, #d3deea);
  border-radius: 6px; padding: 0 8px; min-width: 0;
}

.mst-paraliz {
  border: 1px solid #f3d2a6; background: #fbeede; border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.mst-paraliz.is-alert { border-color: #ef9a9a; background: #fdecec; }
.mst-paraliz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mst-paraliz-head strong { color: #7a4a10; font-size: 13px; }
.mst-paraliz.is-alert .mst-paraliz-head strong { color: #b3261e; }
.mst-paraliz-detail { font-size: 12px; margin: 0; }
.mst-paraliz-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mst-paraliz-actions label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: #566173; }
.mst-paraliz-actions input { min-height: 34px; width: 120px; border: 1px solid var(--line, #d3deea); border-radius: 6px; padding: 0 9px; font-size: 14px; }
.mst-paraliz-note { font-size: 11px; margin: 2px 0 0; }
/* Línea informativa: paralización que YA está en cargos (evita re-añadir por error). */
.mst-paraliz-existing {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #1c5b8a;
  background: #eaf3fb; border: 1px solid #c5ddef; border-radius: 7px;
  padding: 6px 9px; margin: 0;
}
.mst-paraliz-existing .ic { flex: 0 0 auto; margin-top: 1px; }

/* ── Popup de edición de campo individual ───────────────────────── */
.field-edit-card {
  max-width: 420px;
}

/* --- Sistema robusto de popup de campo (estetica garantizada a CUALQUIER ancho) ---
   Objetivo: que el contenido nunca se amontone ni se pierda, ni desborde en horizontal,
   sea el popup ancho o estrecho. La cabecera (titulo + botones Ficha/Cerrar) ENVUELVE en
   vez de desbordar; el titulo puede encoger; los campos ocupan el ancho sin salirse. */
.field-edit-card > .detail-head {
  flex-wrap: wrap;
  row-gap: 6px;
}
.field-edit-card > .detail-head > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.field-edit-card > .detail-head > div:last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.field-edit-card .detail-head h2 {
  overflow-wrap: anywhere;
}
.field-edit-card .field-edit-body input,
.field-edit-card .field-edit-body select,
.field-edit-card .field-edit-body textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Popup "Dar de baja" de una unidad (Camiones) + badge Traccion/Remolque ---
   Doble clase para ganar a .traffic-popup-resizable que standardizeModal aplica (si no, el
   popup salia a 860px de ancho y 540px de alto). Es un formulario pequeno: tamano fijo y alto
   automatico, sin tirador. */
.attachment-card.vehicle-baja-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(460px, calc(100vw - 32px));
  max-width: 460px;
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  resize: none;
  box-sizing: border-box;
}
.vehicle-baja-card .vehicle-baja-help { margin: 0; font-size: 13px; }
.vehicle-baja-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  gap: 12px;
}
.vehicle-baja-card > label,
.vehicle-baja-grid > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.vehicle-baja-card select,
.vehicle-baja-card input,
.vehicle-baja-card textarea {
  width: 100%;
  box-sizing: border-box;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.vehicle-baja-card textarea { resize: vertical; min-height: 64px; }
.vehicle-baja-card .form-actions { margin-top: 2px; }
.veh-baja-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
.veh-baja-type.is-traction { background: #e8f0fe; color: #1a56b8; }
.veh-baja-type.is-trailer { background: #fff3e0; color: #b26a00; }

/* --- "Nuevo Vehículo": la antigua ficha lateral de alta pasa a MODAL (se abre con el boton del
   toolbar). La lista de flota ocupa todo el ancho; el formulario queda oculto hasta abrirlo. --- */
#vehiclesView .split-view { grid-template-columns: 1fr; }
/* El grupo Nuevo vehículo / Campos / Opciones va junto, tras "Borrar filtros" (sin empuje a la derecha). */
/* Mismo alto (34px) que los .secondary de su barra: un primario más grande en medio del grupo rompía
   la coherencia visual (feedback del jefe); destaca por color, no por tamaño. margin-left:auto separa
   los dos grupos lógicos de la barra: controles de lista (buscar/ordenar/Asc/Borrar) a la izquierda y
   acciones (+Nuevo vehículo/Campos/Opciones) a la derecha. */
.new-vehicle-btn { margin-left: auto; padding: 8px 14px; }
.new-vehicle-modal { display: none; }
#newVehiclePanel.new-vehicle-modal.open {
  /* !important para ganar a #vehiclesView .split-view > .panel:first-child (que fija
     position/z-index del panel del form en su rol original de columna). */
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1200 !important;
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-shadow: 0 16px 48px rgba(15, 30, 50, 0.30);
}
.new-vehicle-modal .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.new-vehicle-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1199;
  background: rgba(15, 30, 50, 0.42);
}

/* --- "Nuevo Conductor": misma idea que Nuevo Vehiculo (ficha lateral de alta -> modal). --- */
#driversView .split-view { grid-template-columns: 1fr; }
.new-driver-modal { display: none; }
#newDriverPanel.new-driver-modal.open {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1200 !important;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  box-shadow: 0 16px 48px rgba(15, 30, 50, 0.30);
}
.new-driver-modal .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.new-driver-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1199;
  background: rgba(15, 30, 50, 0.42);
}

/* El subtitulo (cliente/albaran) no debe desbordar verticalmente: max 2 lineas. */
.field-edit-card .detail-head p,
.milestone-card .detail-head p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.field-edit-body {
  display: grid;
  gap: 6px;
  padding: 4px 0 2px;
}

.field-edit-body label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.field-edit-body input,
.field-edit-body select,
.field-edit-body textarea {
  font-size: 15px;
  min-height: 44px;
}

.field-edit-body textarea {
  min-height: 80px;
  resize: vertical;
}

.external-assign-inline {
  align-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  margin: 0 0 4px;
  padding: 10px;
}

.external-assign-button {
  background: #f7fbff !important;
  border-color: #b9cadc !important;
  color: var(--primary) !important;
  font-size: 13px;
  min-height: 34px;
  padding: 7px 14px;
}

.external-assign-button:hover {
  background: var(--primary-soft) !important;
}

.field-edit-datetime {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 72px 72px;
}

.field-edit-datetime input[type="date"] {
  min-width: 0;
}

.field-edit-datetime select {
  min-width: 0;
  padding-left: 6px;
  padding-right: 2px;
}

.field-edit-wide {
  max-width: 600px;
}

/* Edición de textos largos (Observaciones, etc.): ventana grande,
   redimensionable (con memoria de tamaño vía JS) y con el textarea
   ocupando todo el alto disponible del popup. */
.traffic-popup-resizable.field-edit-textarea {
  display: flex;
  flex-direction: column;
  width: min(720px, calc(100vw - 56px));
  max-width: min(960px, calc(100vw - 56px));
  height: min(600px, calc(100vh - 80px));
  min-width: min(420px, calc(100vw - 56px));
  min-height: 320px;
}

.traffic-popup-resizable.field-edit-textarea .field-edit-body {
  flex: 1 1 auto;
  min-height: 0;
}

.traffic-popup-resizable.field-edit-textarea .field-edit-body textarea {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  resize: none;
}

.traffic-popup-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  text-transform: none;
}

.traffic-popup-resizable {
  /* Altura definida para que flex distribuya espacio correctamente:
     sin height explícito, max-height solo recorta pero no ancla el footer. */
  height: min(540px, calc(100vh - 80px));
  max-height: calc(100vh - 20px);
  min-height: 190px;
  min-width: min(320px, calc(100vw - 56px));
  max-width: min(860px, calc(100vw - 56px));
  overflow: hidden;
  resize: both;
  box-sizing: border-box;
  background: #fff; /* garantiza fondo sólido aunque attachment-card no cargue */
}

/* Popups pequeños (hitos, campos simples sin lista): sin altura fija para que
   no aparezcan con espacio vacío innecesario. El contenido cabe siempre dentro
   del min-height, no hay riesgo de que el botón quede fuera. */
.traffic-popup-resizable.field-edit-card:not(.field-edit-wide),
.traffic-popup-resizable.view-options-card {
  height: auto;
  min-height: 0;
  max-width: 360px;
}

.traffic-popup-card > .detail-head,
.traffic-popup-card > .form-actions,
.traffic-popup-card > .compact-filter-title,
.traffic-popup-card > .compact-filter-actions-row,
.traffic-popup-card > .compact-filter-wide-action,
.traffic-popup-card > .client-order-apply-actions {
  flex: 0 0 auto;
}

/* El botón Guardar/Cancelar siempre se ancla al fondo del popup,
   aunque el contenido sea pequeño y no ocupe toda la altura. */
.traffic-popup-card > .form-actions {
  margin-top: auto;
}

.traffic-popup-scroll,
.traffic-popup-resizable .field-edit-body,
.traffic-popup-resizable .field-picker-grid,
.traffic-popup-resizable .compact-filter-values,
.traffic-popup-resizable .driver-send-review,
.traffic-popup-resizable .client-order-preview,
.traffic-popup-resizable .client-order-days-grid,
.traffic-popup-resizable .service-edit-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* El cuerpo de los popups de campo es un flex-column: el input de búsqueda queda fijo
   arriba y solo el grid interno desplaza. Para tipos no-picker (select, texto, datetime)
   el contenido es pequeño y no necesita scroll propio. */
.traffic-popup-resizable .field-edit-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* La asignacion externa inyecta el alta de proveedor nuevo dentro del cuerpo: este
   SI debe desplazar para no recortar los campos de abajo (Email administracion...). */
.external-assign-card .field-edit-body {
  overflow: auto;
}

.traffic-popup-resizable .field-picker-grid {
  height: auto;
}

/* Picker compacto: rejilla de 6 columnas para horas — 48 slots en 8 filas,
   todo visible sin necesidad de scroll */
/* Selector doble-clase para superar la especificidad de .field-picker-grid */
.field-picker-grid.field-picker-compact {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.field-picker-grid.field-picker-compact .field-picker-item {
  border-bottom: 1px solid #eef2f7;
  border-right: 1px solid #eef2f7;
  justify-content: center;
  min-height: 34px;
  padding: 5px 4px;
  text-align: center;
}

.field-picker-grid.field-picker-compact .field-picker-item strong {
  font-size: 13px;
  font-weight: 600;
}

/* El popup de hora no necesita altura fija ni scroll propio:
   la rejilla compacta cabe en el espacio disponible */
.traffic-popup-resizable.field-edit-compact {
  height: auto;
}

.traffic-popup-resizable.field-edit-compact .field-edit-body {
  overflow: visible;
}

.external-assign-card {
  max-width: 680px;
  width: min(680px, calc(100vw - 48px));
}

.external-provider-request-form {
  background: #f7fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.provider-request-note,
.external-provider-status {
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

/* ── MODAL DE EDICIÓN COMPLETA DE SERVICIO ─────────────────────────── */
.service-edit-modal {
  max-width: 720px;
  width: min(720px, calc(100vw - 48px));
}

.service-edit-body {
  padding: 4px 0 8px;
}

.service-edit-section {
  border-top: 1px solid var(--line);
  padding: 14px 0 4px;
}

.service-edit-section:first-child {
  border-top: none;
  padding-top: 2px;
}

.service-edit-section-title {
  color: var(--brand, #8a5a2b);
  border-bottom: 1px solid var(--line, #e4e9f0);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  margin: 0 0 10px;
  padding-bottom: 5px;
  text-transform: uppercase;
}

.service-edit-grid {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(2, 1fr);
}

.service-edit-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.service-edit-grid label {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 11px;
  font-weight: 700;
  gap: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.service-edit-grid label.wide {
  grid-column: 1 / -1;
}

.service-edit-grid input,
.service-edit-grid select {
  font-size: 14px;
  font-weight: 400;
  min-height: 38px;
  text-transform: none;
}

.service-edit-grid textarea {
  font-size: 14px;
  font-weight: 400;
  min-height: 64px;
  resize: vertical;
  text-transform: none;
}

.traffic-popup-resizable.field-edit-compact .field-picker-grid {
  flex: 0 0 auto; /* no ocupa espacio extra; se ajusta a su contenido */
  overflow: hidden;
}

.field-picker-grid {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: block;
  gap: 6px;
  height: 240px;
  max-height: 70vh;
  min-height: 80px;
  overflow-y: auto;
  padding: 0;
}

.field-picker-item {
  align-items: center;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  border-radius: 0;
  cursor: pointer;
  display: grid;
  gap: 2px;
  grid-template-columns: minmax(0, 1fr);
  min-height: 38px;
  padding: 7px 10px;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
}

.field-picker-item:last-child {
  border-bottom: 0;
}

.field-picker-item:hover {
  background: #eef4fb;
}

.field-picker-item.is-selected {
  background: #dbeaf8;
  box-shadow: inset 3px 0 0 var(--primary);
}

.field-picker-item.is-available strong {
  color: var(--primary);
}

.field-picker-item strong {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.field-picker-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.field-picker-empty {
  grid-column: 1 / -1;
  padding: 12px 0;
  text-align: center;
}

.field-date-picker-body {
  overflow: visible;
}

.field-date-picker {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.field-date-month {
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.field-date-month h3 {
  color: var(--primary);
  font-size: 13px;
  margin: 0 0 8px;
  text-align: center;
  text-transform: capitalize;
}

.field-date-weekdays,
.field-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.field-date-weekdays span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.field-date-day {
  align-items: center;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #d6e0ea;
  border-radius: 6px;
  color: var(--text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 26px;
  padding: 0;
}

.field-date-day.is-empty {
  background: transparent;
  border-color: transparent;
}

.field-date-day.is-today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(12, 48, 83, 0.28);
}

.field-date-day.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.milestone-editor-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1fr) 92px 92px;
}

.milestone-editor-grid label {
  display: grid;
  gap: 5px;
}

/* sin hover de fila completa: el feedback visual solo aparece en celdas editables */

.service-drop-row {
  user-select: none;
}

.service-drop-row.selected-row,
.service-table tbody tr.selected-row:hover {
  background: #eaf2f8;
  box-shadow: inset 3px 0 0 var(--primary);
}

.service-drop-row.drag-over {
  background: #eef7f2 !important;
  box-shadow: inset 0 0 0 2px rgba(31, 122, 91, 0.35);
}

.service-drop-row.driver-finished-row,
.service-table tbody tr.driver-finished-row:hover {
  background: #f0faf4;
}

.service-drop-row.service-cancelled-row,
.service-table tbody tr.service-cancelled-row:hover {
  background: #fff0f0;
}

/* Servicio SIN ASIGNAR en rojo suave + barra roja (aviso de "hay que asignarlo para cubrirlo"). Cubre la
   fila normal (.service-table, fondo en el <tr>) y la tarjeta (.service-card, ambas con .service-drop-row).
   La vista COMPACTA pinta el fondo en los <td>: eso lo cubren las reglas #servicesList de más abajo. */
.service-drop-row.service-unassigned-row {
  background: #fdeaea;
  box-shadow: inset 3px 0 0 var(--accent);
}

.service-cancelled-row .route-address-hotspot,
.service-cancelled-row .editable-value,
.service-cancelled-row .service-time-cell > span {
  background: #fff4f4;
  border-color: #efcaca;
  color: #7f5555;
}

.service-table tbody tr.day-break-row td {
  border-top: 3px solid #111827;
}

.service-table tbody tr.day-break-row td:first-child {
  box-shadow: none;
}

.empty {
  background: #fbfcfe;
  color: #7a8697;
  min-height: 220px;
  display: grid;
  place-items: center;
}

.small-empty {
  min-height: 90px;
}

.service-card {
  background: #fff;
  box-shadow: none;
}

.row-card {
  padding: 8px 10px;
}

.row-main {
  min-width: 0;
}

.row-title-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions,
.inline-actions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.row-actions button,
.service-table button,
.service-card .row-actions button {
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  min-height: 26px;
  padding: 5px 8px;
}

.row-card .muted {
  font-size: 12px;
  line-height: 1.25;
  margin-top: 2px;
}

.row-card .pill {
  font-size: 11px;
  padding: 4px 7px;
}

.vehicle-row-card {
  cursor: pointer;
  padding: 7px 10px;
}

.vehicle-list-line {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 34px;
}

/* Pastillas de la fila del camion: letra mas pequena para que toda la informacion quepa en UNA sola
   linea sin apelmazarse (peticion del jefe: verlo todo de un vistazo, sin ruido). */
.vehicle-list-line .doc-badge {
  font-size: 10px;
  letter-spacing: .1px;
  padding: 3px 6px;
}

.vehicle-list-line .vehicle-availability {
  font-size: 10.5px;
}

.vehicle-plate-link {
  font-size: 18px;
  line-height: 1;
  text-align: left;
}

.vehicle-line-description {
  color: #476078;
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-line-actions {
  justify-self: end;
}

.vehicle-availability {
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 6px;
  justify-content: center;
  line-height: 1;
  min-width: 94px;
  padding: 5px 8px;
  white-space: nowrap;
}

.vehicle-availability span {
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.vehicle-availability.is-available {
  background: #f3fbf7;
  border-color: #b7dec8;
  color: #236b43;
}

.vehicle-availability.is-available span {
  background: #17a34a;
}

.vehicle-availability.is-unavailable {
  background: #fff3f3;
  border-color: #edbcbc;
  color: #9d3f3f;
}

.vehicle-availability.is-unavailable span {
  background: #d33f3f;
}

.doc-badge-row {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.doc-badge {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
}

.doc-muted {
  background: #f8fafc;
  color: #64748b;
}

.doc-ok {
  background: #eaf8f0;
  border-color: #a7dec0;
  color: #207849;
}

.doc-warning {
  background: #fff6dc;
  border-color: #efd17a;
  color: #9a6b00;
}

.doc-danger {
  background: #fff0f0;
  border-color: #efb4b4;
  color: #a43a3a;
}

/* Badge de aceite en la fila de flota: compacto, en una sola linea */
.doc-oil {
  white-space: nowrap;
}

/* Aceite alto: bandera ambar (rojo = bajo usa .doc-danger) */
.doc-oil-warn {
  background: #fff6dc;
  border-color: #efd17a;
  color: #9a6b00;
}

/* Tarjeta de aceite en el topbar de Trafico cuando hay incidencia */
.metric.is-oil-alert {
  background: #fff0f0;
  box-shadow: inset 0 0 0 1px #efb4b4;
}

.metric.is-oil-alert strong {
  color: #b42318;
}

.rate-card {
  border-left: 3px solid var(--primary);
}

.fueling-card {
  border-left: 3px solid var(--green);
}

.compact-fueling {
  padding: 7px 9px;
}

.fueling-line {
  align-items: center;
  display: grid;
  gap: 6px 8px;
  /* Columnas fijas dimensionadas al contenido (sin huecos entre campos); la holgura sobrante de las
     pantallas anchas la absorbe el espaciador final, en vez de inflar columnas con texto corto. */
  grid-template-columns:
    100px 48px 86px 138px 118px 126px 80px 62px 92px 148px 200px 90px
    minmax(0, 1fr);
  min-width: 1300px;
}

/* Repostajes: cabecera de la sección (sin panel lateral; doble clic abre la ficha-modal) */
.fuelings-body { display: flex; flex-direction: column; gap: 12px; }
.fuelings-actions { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.fuelings-actions .ticket-drop-zone { flex: 1 1 280px; min-width: 0; margin: 0; }
.fueling-new-btn { flex: 0 0 auto; align-self: stretch; background: var(--brand, #2563eb); border: none;
  border-radius: 10px; color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; padding: 12px 20px; white-space: nowrap; }
.fueling-new-btn:hover { filter: brightness(1.05); }

.fueling-line span,
.fueling-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fueling-line strong {
  color: var(--ink);
}

.fueling-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fueling-type,
.fueling-plate,
.fueling-card-number {
  font-variant-numeric: tabular-nums;
}

.fueling-adblue,
.fueling-station {
  min-width: 0;
}

#fuelingsList,
#fuelingsListHeader {
  overflow-x: auto;
}

#fuelingsList .row-actions {
  justify-content: flex-end;
  min-width: 112px;
}

.driver-modal-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.driver-modal-field span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.driver-modal-field input,
.driver-modal-field select {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--ink);
}

/* Bloque de datos de la AUSENCIA (Baja médica / Permiso retribuido) en la ficha del conductor.
   Contenido y acotado (nada desborda el ancho), color propio (ámbar) para leerse como grupo. */
.driver-absence-fields {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line, #e2e8f0);
  border-left: 4px solid #d97706;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.06);
  padding: 10px 12px;
}
.driver-absence-head {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 8px;
}
.driver-absence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  min-width: 0;
}
.driver-absence-grid .driver-modal-field { min-width: 0; }
.driver-absence-grid .driver-modal-field input,
.driver-absence-grid .driver-modal-field select,
.driver-absence-grid .driver-modal-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
}
.driver-absence-reason { grid-column: 1 / -1; }
.driver-absence-reason textarea { resize: vertical; min-height: 42px; }
@media (max-width: 720px) {
  .driver-absence-grid { grid-template-columns: 1fr; }
}

/* Historial de ausencias (bajas médicas / permisos) en la ficha del conductor. */
.dabs-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dabs-empty { padding: 6px 2px; }
.dabs-row {
  min-width: 0;
  border: 1px solid var(--line, #e2e8f0);
  border-left: 4px solid var(--muted, #94a3b8);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface, #fff);
}
.dabs-row.dabs-baja { border-left-color: #dc2626; }
.dabs-row.dabs-permiso { border-left-color: #d97706; }
.dabs-row.is-open { background: rgba(148, 163, 184, 0.06); }
.dabs-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dabs-kind { font-weight: 700; font-size: 0.82rem; color: var(--ink); }
.dabs-state { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; }
.dabs-state-open { background: #dcfce7; color: #15803d; }
.dabs-state-closed { background: #eef2f6; color: var(--muted, #64748b); }
.dabs-days { font-size: 0.64rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #ffe0c2; color: #b4470f; }
.dabs-motive { font-size: 0.64rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #e0e7ff; color: #3730a3; }

/* Enlace de llamada (tel:) — discreto: hereda el color del entorno, icono atenuado, resalta al hover.
   inline-flex para alinear icono+número; nowrap para que no se parta en dos líneas. */
.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
}
.tel-link > svg { flex: 0 0 auto; opacity: 0.65; }
.tel-link > span { overflow: hidden; text-overflow: ellipsis; }
.tel-link:hover { color: var(--accent, #0d426b); text-decoration: underline; }
.tel-link:hover > svg { opacity: 1; }
.tel-sep { opacity: 0.5; }

/* Botón de llamada pegado a un <input> de teléfono en las fichas (marca el número escrito). Posicionado
   por JS (top/left); aquí solo el aspecto. No roba foco (tabindex -1) y no descuadra (absolute sobre el label). */
.tel-call-btn {
  position: absolute;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted, #64748b);
  cursor: pointer;
  border-radius: 6px;
  z-index: 2;
  transition: color .12s, background .12s;
}
.tel-call-btn:hover { color: var(--accent, #0d426b); background: rgba(13, 66, 107, 0.09); }
.tel-call-btn > svg { pointer-events: none; }
.dabs-dates { font-size: 0.75rem; color: var(--muted, #64748b); margin-top: 2px; }
.dabs-reason { font-size: 0.8rem; color: var(--ink); margin-top: 3px; overflow-wrap: anywhere; }
.dabs-justif { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; min-width: 0; }
.dabs-justif .ddoc-fname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dabs-nojustif {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; color: #b45309;
  background: rgba(217, 119, 6, 0.13); border-radius: 999px; padding: 2px 9px;
}
.dabs-attach {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: var(--nav, #1f2937);
  border: 1px solid var(--line, #e2e8f0); border-radius: 6px; padding: 3px 9px;
  background: var(--surface, #fff);
}
.dabs-attach:hover { background: var(--surface-soft, #f5f7fa); }
.dabs-attach.is-dragover { background: #eaf2ff; border-color: var(--accent, #1a6de0); border-style: dashed; }
.dabs-summary { margin-left: 4px; }

/* Banner de avisos de ausencias en Tráfico (reincorporación / visita médica / falta justificante). */
.dabs-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid #f0c98a; background: #fff4e0;
}
.dabs-banner.is-today { border-color: #eda58f; background: #ffe9e1; }
.dabs-banner-title { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; color: var(--ink); }
.dabs-banner-chip {
  border: 1px solid #e6c07a; background: #fff; border-radius: 999px; padding: 3px 11px;
  font-size: 12px; font-weight: 600; color: #92600f; cursor: pointer;
}
.dabs-banner-chip:hover { background: #fff8ec; }
.dabs-banner-chip.is-today { border-color: #e28a6a; color: #b3401f; background: #fff3ef; }
.dabs-banner-chip.is-miss { border-color: #d9b3e6; color: #7a3aa0; background: #fbf3ff; }

.fueling-col-header {
  padding: 4px 9px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  background: transparent;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.fueling-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-bottom: 10px;
}

.fueling-summary article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

.fueling-summary span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.fueling-summary strong {
  color: var(--ink);
  display: block;
  font-size: 20px;
  margin-top: 3px;
}

.rate-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 3px;
}

.rate-summary span {
  color: #334155;
  font-weight: 700;
}

.rate-summary strong {
  color: var(--primary-strong);
  font-size: 13px;
}

.rate-grid {
  display: grid;
  gap: 5px 12px;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  margin-top: 7px;
}

.rate-grid span {
  color: #5d6979;
  font-size: 12px;
}

.rate-grid b {
  color: #253044;
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.source-line {
  color: #8a6a21;
  font-size: 11px;
  margin-top: 5px;
}

.attachment-panel {
  background: rgba(24, 32, 43, 0.34);
  bottom: 0;
  display: none;
  left: 0;
  padding: 28px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
}

.attachment-panel.open {
  display: grid;
  place-items: center;
}

#milestonePanel {
  background: rgba(10, 16, 26, 0.72);
  overflow-y: auto;
  align-items: center;
  z-index: 40;
}

/* Selector de dirección: overlay por encima del modal de servicio (sin pisarse). */
#addrPickerPanel {
  background: rgba(10, 16, 26, 0.55);
  overflow-y: auto;
  align-items: center;
  z-index: 50;
}

/* Diálogo de confirmación (tasar/destasar/cancelar...): siempre por encima del
   modal de edición de servicio (#milestonePanel z-index 40) y del selector de
   direcciones (50); si no, aparecería oculto detrás. */
#serviceCancelPanel {
  z-index: 2000; /* confirm/diálogo siempre por encima de otros popups (rec-overlay z60, panel z1200) */
}

#vehicleDocsPanel.open {
  align-items: start;
  overflow: auto;
  padding: 18px;
  place-items: start center;
}

#compactFilterPanel,
#vacationFilterPanel {
  background: transparent;
  padding: 0;
  pointer-events: none;
}

#compactFilterPanel.open,
#vacationFilterPanel.open {
  display: block;
  place-items: unset;
}

#compactFilterPanel .compact-filter-popover,
#vacationFilterPanel .compact-filter-popover,
#lsFilterPanel .compact-filter-popover {
  pointer-events: auto;
  position: fixed;
}

.attachment-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  box-sizing: border-box;
  align-content: start;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 20px);
  max-width: 860px;
  min-height: 100px;
  min-width: 280px;
  overflow: auto;
  padding: 16px;
  resize: both;
  width: min(860px, calc(100vw - 56px));
}

.attachment-card p {
  color: var(--muted);
  margin-top: 3px;
}

.attachment-card.traffic-popup-card.field-edit-card:not(.field-edit-wide) {
  resize: none;
  width: min(520px, calc(100vw - 56px));
}

.attachment-card.traffic-popup-card.milestone-card {
  resize: none;
  box-sizing: border-box;
  width: min(460px, calc(100vw - 56px));
  height: auto;
  min-width: 320px;
  min-height: 0;
  max-width: calc(100vw - 56px);
  overflow: visible;
}

.driver-send-review {
  display: grid;
  gap: 8px;
}

.driver-send-line {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: flex;
  gap: 10px;
  line-height: 1.35;
  padding: 9px 10px;
}

.driver-send-line input {
  accent-color: var(--primary);
  flex: 0 0 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.driver-send-deca-note {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  line-height: 1.45;
  padding: 9px 12px;
}

.driver-send-deca-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.driver-send-deca-note span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.attachment-drop {
  background: #f7f9fb;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 18px;
  text-align: center;
}

.attachment-drop.drag-over {
  background: #eef7f2;
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(31, 122, 91, 0.25);
}

.service-document-drop strong {
  font-size: 15px;
}

.service-document-drop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ticket-drop-zone,
.mail-drop-zone {
  background: #f7f9fb;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 14px;
  text-align: center;
}

.ticket-drop-zone.drag-over,
.mail-drop-zone.drag-over {
  background: #eef7f2;
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(31, 122, 91, 0.25);
}

.ticket-drop-zone input,
.mail-drop-zone input {
  display: none;
}

.ticket-drop-zone span,
.mail-drop-zone span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.full-width-button {
  margin: -2px 0 10px;
  width: 100%;
}

.hidden-field {
  display: none;
}

.mail-paste-card {
  max-width: 760px;
  width: min(760px, calc(100vw - 56px));
}

.mail-paste-textarea {
  min-height: 260px;
  resize: vertical;
}

.ticket-review-card {
  max-width: 980px;
  width: min(980px, calc(100vw - 56px));
}

.ticket-review-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.ticket-review-grid label {
  display: grid;
  gap: 4px;
}

.warning-line {
  color: var(--amber) !important;
  font-weight: 700;
}

.ticket-raw-text {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #344052;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

.attachment-drop input {
  display: none;
}

.attachment-drop span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.attachment-merge-note {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

.vehicle-doc-card {
  align-content: start;
  gap: 8px;
  max-height: calc(100vh - 20px);
  max-width: min(1180px, calc(100vw - 42px));
  padding: 12px 14px;
  width: min(1180px, calc(100vw - 42px));
}

#vehiclesView .split-view > .panel:first-child {
  align-self: start;
  max-height: calc(100vh - 88px);
  overflow: auto;
  position: sticky;
  top: 74px;
  z-index: 6;
}

#vehiclesView .split-view > .panel:last-child .list-toolbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 8px;
  position: sticky;
  top: 74px;
  z-index: 7;
}

#vehicleForm textarea[name="notes"] {
  min-height: 138px;
  resize: vertical;
}

.fleet-filter-panel {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.fleet-filter-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La busqueda NO ocupa todo el ancho en pantallas grandes; los controles
   (orden / Asc / Borrar filtros) van justo despues, con su ancho real (texto
   completo, sin recorte). */
.fleet-filter-row > input[data-list-filter="vehicles"] {
  flex: 1 1 340px;
  max-width: 520px;
  min-width: 220px;
}

.fleet-filter-row > [data-list-sort] {
  flex: 0 0 auto;
  min-width: 170px;
  width: auto;
}

.fleet-filter-row > .sort-direction,
.fleet-filter-row > [data-list-clear] {
  flex: 0 0 auto;
  overflow: visible;
  width: auto;
}

/* Los SIETE filtros + los tres botones de acción, en UNA sola fila (petición del jefe, 30-07-2026:
   «haz los campos más pequeños para que los tres botones de arriba quepan en la fila de abajo»).
   Deja de ser una rejilla de 7 columnas fijas: los desplegables reparten el ancho sobrante y los
   botones ocupan lo suyo, así que caben los diez controles sin desbordar. */
.fleet-filter-row-secondary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fleet-filter-row-secondary > select {
  flex: 1 1 128px;
  min-width: 0;
}

.fleet-filter-row-secondary > button {
  flex: 0 0 auto;
}

.fleet-filter-panel input,
.fleet-filter-panel select,
.fleet-filter-panel button {
  /* Letra más pequeña en TODOS los campos de la barra: con la de antes, «Disponibilidad: todos» o
     «Ordenar por uso habitual» se recortaban con puntos suspensivos. */
  font-size: 12.5px;
  min-height: 31px;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 0;
  padding-top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-filter-panel select {
  padding-right: 22px;
}

.fleet-filter-row-secondary > select,
.fleet-filter-row-secondary > button {
  font-size: 11.5px;
  min-height: 30px;
  padding-left: 7px;
}

.fleet-filter-row-secondary > button {
  padding-left: 10px;
  padding-right: 10px;
}

.vehicle-row-card.selected,
.driver-row-card.selected,
.fueling-card.selected,
.customer-row-card.selected {
  border-color: #1d5b89;
  box-shadow: inset 3px 0 0 #1d5b89;
}

.vehicle-row-card,
.vehicle-list-line {
  user-select: none;
}

.vehicle-plate-link {
  color: var(--ink);
  font-size: 17px;
  white-space: nowrap;
}

.vehicle-row-card.is-archived {
  background: #f8fafc;
  opacity: 0.92;
}

.vehicle-history-panel {
  margin-top: 10px;
}

.vehicle-history-panel summary {
  cursor: pointer;
  font-weight: 800;
  padding: 8px 4px;
}

.vehicle-doc-alert {
  background: #edf6fb;
  border: 1px solid #b9d7e8;
  border-radius: 6px;
  color: var(--primary-strong);
  font-weight: 800;
  padding: 8px 10px;
}

.vehicle-doc-alert.warn {
  background: #fff6dc;
  border-color: #efd17a;
  color: #946200;
}

/* Dar de baja: al FINAL de la ficha y PLEGADO. El botón rojo estaba antes en cada línea del listado de
   camiones y con la flota entera en pantalla parecía una alarma. Aquí es una acción excepcional, en su
   sitio y sin gritar: el rojo solo aparece cuando el operativo despliega a propósito. */
.vehicle-baja-section { border-color: #e6d4d4; background: #fdfafa; }
.vehicle-baja-box > summary { cursor: pointer; font-weight: 700; font-size: 12.5px; color: #8a5a5a;
  list-style: none; padding: 2px 0; }
.vehicle-baja-box > summary::-webkit-details-marker { display: none; }
.vehicle-baja-box > summary::before { content: "▸ "; color: #b08a8a; }
.vehicle-baja-box[open] > summary::before { content: "▾ "; }
.vehicle-baja-box > summary:hover { color: #a4231f; }
.vehicle-baja-note { margin: 6px 0 8px; font-size: 12px; }
/* El plegado se fuerza a mano: `.vehicle-doc-section` es un grid y su display se impone al del
   <details>, asi que el boton rojo seguia VISIBLE con el desplegable cerrado (medido: 47x195 px). */
.vehicle-baja-box:not([open]) > :not(summary) { display: none; }

/* Dialogo "hora de descarga": propone carga+2h y deja teclear otra. */
.ask-unload-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700;
  color: var(--muted, #6b7280); margin: 2px 0 0; }
.ask-unload-field input[type="time"] { width: 120px; font-size: 15px; font-weight: 600; padding: 6px 8px; }
.ask-unload-day { margin: 4px 0 0; font-size: 12px; }

.vehicle-doc-section {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 9px 10px;
}

.vehicle-doc-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
}

.vehicle-doc-title::-webkit-details-marker {
  display: none;
}

.vehicle-doc-title > div {
  display: grid;
  gap: 2px;
}

.vehicle-doc-title strong {
  color: var(--ink);
  font-size: 16px;
}

.vehicle-doc-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vehicle-doc-compact-section {
  gap: 0;
  padding: 0;
}

.vehicle-doc-summary-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(132px, auto) 54px;
  min-height: 56px;
  padding: 8px 10px;
}

.vehicle-doc-summary-main {
  align-items: baseline;
  display: flex;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.vehicle-doc-summary-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-doc-view-button {
  justify-self: center;
  min-width: 132px;
}

.vehicle-doc-compact-section[open] .vehicle-doc-lanes {
  border-top: 1px solid var(--line);
  padding: 10px;
}

.vehicle-doc-lanes {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vehicle-doc-lane {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  display: grid;
  gap: 7px;
  padding: 8px;
}

.vehicle-doc-lane h3 {
  color: var(--primary-strong);
  font-size: 13px;
  margin: 0;
}

.vehicle-doc-upload {
  display: grid;
  gap: 8px;
}

.vehicle-doc-fields {
  align-items: end;
  display: grid;
  gap: 6px;
  grid-template-columns: 132px minmax(0, 1fr) auto;
}

.vehicle-doc-drop {
  padding: 9px;
}

.vehicle-doc-drop.drag-over {
  background: #e7f4fb;
  border-color: var(--primary);
}

.vehicle-profile-grid {
  align-items: end;
  display: grid;
  gap: 6px 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
/* min-width:0 permite que un select con texto largo (nombre de conductor) se ajuste a su columna
   en vez de ensanchar el grid y cortar el botón "Guardar estado". */
.vehicle-profile-grid > * { min-width: 0; }
.vehicle-profile-grid select,
.vehicle-profile-grid input { width: 100%; max-width: 100%; box-sizing: border-box; }
.vehicle-profile-grid > button[type="submit"] { justify-self: start; white-space: nowrap; }

/* ── Ficha del camion · retoques del jefe (31-07-2026) ─────────────────────────────────────────────
   "Estado mecanico y averias" cabe en DOS FILAS: 7 campos arriba, Estado + Guardar abajo a la derecha,
   con la letra mas pequena para que ninguno se corte. */
/* DOS filas: arriba los 5 campos cortos; abajo Estado + los dos LARGOS (conductor y conjunto, que se
   cortaban) mas anchos, y el boton al final a la derecha. */
.vehicle-profile-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.vehicle-profile-grid label { font-size: 10.5px; }
.vehicle-profile-grid select,
.vehicle-profile-grid input { font-size: 12px; min-height: 29px; padding: 3px 6px; }
.vehicle-profile-grid > label:nth-of-type(6) { grid-column: 2 / 4; }   /* Conductor asignado */
.vehicle-profile-grid > label:nth-of-type(7) { grid-column: 4 / 6; }   /* Conjunto (remolque) */
.vehicle-profile-grid > label:nth-of-type(8) { grid-column: 1; grid-row: 2; }   /* Estado */
.vehicle-profile-grid > button[type="submit"] {
  align-self: end; font-size: 12px; grid-column: 6; grid-row: 2; justify-self: end;
  min-height: 29px; padding: 0 14px;
}
.vehicle-profile-grid .assign-warn { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .vehicle-profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vehicle-profile-grid > label:nth-of-type(6),
  .vehicle-profile-grid > label:nth-of-type(7) { grid-column: auto; }
  .vehicle-profile-grid > label:nth-of-type(8) { grid-column: auto; grid-row: auto; }
  .vehicle-profile-grid > button[type="submit"] { grid-column: auto; grid-row: auto; justify-self: start; }
}

/* Tarjetas de combustible: campos pequenos y TODO a la izquierda (el PIN ocupaba el ancho entero). */
.vehicle-cards-form .veh-card-default { font-size: 11.5px; }
.vehicle-cards-form .veh-card-default select { font-size: 12px; min-height: 28px; width: auto; }
.vehicle-cards-form .veh-card-grid {
  gap: 5px 10px; grid-template-columns: auto 170px 150px; justify-content: start;
}
.vehicle-cards-form .veh-card-grid input { font-size: 12px; min-height: 28px; padding: 3px 7px; width: 100%; }
.vehicle-cards-form .veh-card-head { font-size: 10px; }
.vehicle-cards-form .form-actions { justify-content: flex-start; }
.vehicle-cards-form .form-actions button { font-size: 12px; min-height: 29px; padding: 0 16px; }

/* Las dos notas de ITV y Tacografo, en UNA fila y a mitad de ancho cada una. */
.vehicle-doc-alerts { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.vehicle-doc-alerts > .vehicle-doc-alert { margin: 0; }
@media (max-width: 760px) { .vehicle-doc-alerts { grid-template-columns: 1fr; } }

/* Pastilla de estado junto a la matricula. */
.veh-head-chip {
  border-radius: 999px; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .01em;
  padding: 3px 11px; vertical-align: middle;
}
.veh-head-chip.is-ok { background: #e5f4ec; color: #1f7a4d; }
.veh-head-chip.is-warn { background: #fdf2dc; color: #9a6a12; }
.veh-head-chip.is-bad { background: #b23b31; color: #fff; }

/* Bloques que se abren solo si hacen falta (Nivel de aceite, Tarjetas): una linea y a otra cosa. */
.veh-fold > summary {
  align-items: center; cursor: pointer; display: flex; gap: 10px; justify-content: space-between;
  list-style: none; padding: 2px 0;
}
.veh-fold > summary::-webkit-details-marker { display: none; }
/* MISMA flecha en TODOS los bloques plegables de la ficha (aceite, tarjetas, ITV, tacografo, seguros,
   documentacion tecnica): si unos la llevan y otros no, la ficha se lee como dos sitios distintos. */
.veh-fold > summary::before,
.vehicle-doc-compact-section > summary::before {
  color: #97a5b6; content: "\25B8"; flex: 0 0 auto; font-size: 11px; transition: transform .12s ease;
}
.veh-fold[open] > summary::before,
.vehicle-doc-compact-section[open] > summary::before { transform: rotate(90deg); }
/* La rejilla del resumen gana su columna para la flecha (y el titulo queda alineado con los de arriba). */
.vehicle-doc-summary-row { align-items: center; grid-template-columns: 9px minmax(240px, 1fr) minmax(132px, auto) 54px; }
.veh-fold .veh-fold-t {
  color: #8a6a3a; flex: 1; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.veh-fold .veh-fold-s { color: #56657a; font-size: 11.5px; text-align: right; }
.veh-fold.has-alert .veh-fold-s { color: #9a6a12; font-weight: 700; }
.veh-fold-body { padding-top: 10px; }

/* "Reportar averia" en AZUL: es la accion que abre el asistente, no un guardado mas. */
.fr-launch button.is-report { background: #2f5fa8; border-color: #2f5fa8; color: #fff; }
.fr-launch button.is-report:hover { background: #26508f; border-color: #26508f; }

.vehicle-fault-form {
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.vehicle-fault-form textarea {
  min-height: 48px;
}

.fault-fields {
  grid-template-columns: 140px 130px 110px 130px 1fr;
  align-items: center;
}

.fault-fields .fault-inoperable-check {
  margin: 0;
}

.vehicle-fault-create {
  margin: 2px 0 4px;
}

/* Boton compacto (no una barra a todo el ancho): se ajusta al texto y se ve pulsable. */
.vehicle-fault-create > summary {
  align-items: center;
  background: #eef3fa;
  border: 1px solid #c2d2e6;
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(20, 40, 70, 0.05);
  color: #243a59;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  list-style: none;
  padding: 6px 12px;
}

.vehicle-fault-create > summary:hover {
  background: #e1ebf7;
  border-color: #9fb6d4;
}

.vehicle-fault-create[open] > summary {
  margin-bottom: 10px;
}

.vehicle-fault-create > summary::-webkit-details-marker {
  display: none;
}

.vehicle-fault-history-head {
  align-items: center;
  color: #42536a;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 2px 2px 0;
}

.vehicle-fault-history-head strong {
  color: var(--ink);
  font-size: 13px;
}

.vehicle-fault-history-head span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.vehicle-fault-history {
  min-height: 54px;
}

/* ── Nivel de aceite (control semanal, analogo a averias) ── */
.vehicle-oil-form {
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.vehicle-oil-form textarea {
  min-height: 44px;
  width: 100%;
}

.oil-fields {
  align-items: end;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vehicle-oil-create {
  background: #f8fafc;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  margin-top: 4px;
  padding: 7px 9px;
}

.vehicle-oil-create > summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.vehicle-oil-create > summary::-webkit-details-marker {
  display: none;
}

.oil-pill {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
}

.oil-pill.ok {
  background: #e3f2eb;
  color: #1f7a5b;
}

.oil-pill.bad {
  background: #fdecec;
  color: #b42318;
}

.oil-alert-tag {
  background: #fdecec;
  border-radius: 999px;
  color: #b42318;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
}

.vehicle-oil-history {
  min-height: 40px;
}

/* Cada reporte del historial de aceite en una sola linea */
.oil-report-row {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 6px 10px;
}

.oil-report-row .oil-row-date {
  font-weight: 800;
  white-space: nowrap;
}

.oil-report-row .oil-pill {
  flex-shrink: 0;
}

.oil-report-row .oil-row-meta {
  color: var(--muted);
  flex: 1 1 auto;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oil-report-row .oil-row-resolved {
  font-size: 12px;
  white-space: nowrap;
}

.oil-report-row .oil-row-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.oil-report-row .oil-row-actions button {
  font-size: 12px;
  min-height: 28px;
  padding: 4px 10px;
}

.vehicle-oil-history-more {
  margin-top: 6px;
}

.vehicle-oil-history-more > summary {
  color: var(--primary, #28587b);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  padding: 4px 2px;
}

.vehicle-oil-history-more > summary::-webkit-details-marker {
  display: none;
}

.vehicle-oil-history-more[open] > summary {
  margin-bottom: 6px;
}

.vehicle-doc-compact-section > summary::after,
.vehicle-fault-create > summary::after {
  background: #d6e1f1;
  border-radius: 4px;
  color: #3f5575;
  content: "Abrir";
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
}

.vehicle-doc-compact-section[open] > summary::after,
.vehicle-fault-create[open] > summary::after {
  content: "Cerrar";
}

.vacation-panel {
  overflow: hidden;
}

.vacation-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.vacation-toolbar input {
  flex: 1 1 260px;
  min-width: 220px;
}

.vacation-toolbar button {
  padding: 8px 10px;
}

.compact-date-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  row-gap: 0;
}

.compact-date-btn {
  font-size: 12px;
  min-height: 30px;
  padding: 4px 10px;
}

.compact-date-btn.active {
  background: var(--accent, #0d426b);
  color: #fff;
  border-color: var(--accent, #0d426b);
}

.compact-date-range-label {
  flex-shrink: 0;
}

.compact-date-range-label input[type="date"] {
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
  height: 30px;
  padding: 2px 6px;
  width: 130px;
}

.compact-date-sep {
  color: var(--muted);
  font-size: 13px;
}

.vacation-import-label {
  cursor: pointer;
}

.vacation-import-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  gap: 4px;
  min-height: 34px;
  padding: 6px 12px;
  white-space: nowrap;
}

.vacation-import-btn:hover {
  background: var(--surface-hover, #f1f5f9);
}

.vacation-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.vacation-mark-filter-button {
  font-size: 11px;
  padding: 6px 9px;
}

.vacation-chip {
  border: 1px solid var(--line);
  border-radius: 4px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 6px;
}

.vacation-summary {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  margin-bottom: 8px;
}

.vacation-month-buttons {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-start;
  margin: -2px 0 6px 0;
  max-width: none;
  overflow-x: auto;
}

.vacation-month-button {
  border-radius: 5px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  min-width: 42px;
  min-height: 24px;
  padding: 5px 6px;
  white-space: nowrap;
}

.vacation-month-button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.vacation-summary article {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  min-width: 0;
  padding: 6px 8px;
}

.vacation-summary span {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.vacation-summary strong {
  display: block;
  font-size: 16px;
  line-height: 1.15;
  margin-top: 2px;
}

.vacation-summary small {
  color: var(--muted);
  display: block;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacation-grid-wrap {
  background: #fff;
  border: 1px solid #7b8794;
  border-radius: 4px;
  max-height: calc(100vh - 245px);
  overflow: auto;
}

.vacation-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10px;
  line-height: 1.05;
  min-width: max-content;
  table-layout: fixed;
  width: max-content;
}

.vacation-grid th,
.vacation-grid td {
  border-bottom: 1px solid #aeb7c2;
  border-right: 1px solid #aeb7c2;
  height: 23px;
  min-width: 26px;
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
}

.vacation-grid thead th {
  background: #e6ebf0;
  border-bottom: 2px solid #1f2933;
  color: #102640;
  font-size: 9px;
  font-weight: 900;
  position: sticky;
  top: 0;
  z-index: 3;
}

.vacation-grid thead tr:nth-child(2) th {
  top: 25px;
}

.vacation-group-label {
  display: block;
  min-height: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacation-header-content {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  justify-content: center;
  width: 100%;
}

.vacation-filter-button {
  transform: scale(0.9);
}

.vacation-grid tbody th {
  font-size: 10px;
  font-weight: 900;
}

.vacation-grid .sticky-col {
  background: #fff;
  position: sticky;
  text-align: left;
  z-index: 2;
}

.vacation-grid thead .sticky-col {
  background: #e6ebf0;
  z-index: 4;
}

.vacation-grid .sticky-name {
  left: 0;
  max-width: 205px;
  min-width: 205px;
  width: 205px;
}

.vacation-grid tbody tr:hover .sticky-name {
  background: #dbeafe;
}

.vacation-grid .sticky-operation {
  left: 205px;
  max-width: 92px;
  min-width: 92px;
  width: 92px;
}

.vacation-grid .summary-col,
.vacation-summary-cell {
  max-width: 64px;
  min-width: 64px;
  width: 64px;
}

.vacation-grid .summary-accrual_start,
.vacation-grid .summary-accrual_end {
  max-width: 54px;
  min-width: 54px;
  width: 54px;
}

.vacation-grid .summary-holidays_worked,
.vacation-grid .summary-holidays_requested,
.vacation-grid .summary-holiday_compensated,
.vacation-grid .summary-holiday_paid,
.vacation-grid .summary-pending_fpc_2025,
.vacation-grid .summary-pending_holiday_compensation,
.vacation-grid .summary-vacation_taken,
.vacation-grid .summary-vacation_requested,
.vacation-grid .summary-vacation_pending {
  max-width: 46px;
  min-width: 46px;
  width: 46px;
}

.vacation-grid .date-col {
  max-width: 30px;
  min-width: 30px;
  width: 30px;
}

.vacation-grid .month-col {
  color: #102640;
  text-align: center;
}

.vacation-grid .day-col {
  color: #102640;
}

.vacation-grid .month-band-a {
  background: #fde9dc;
}

.vacation-grid .month-band-b {
  background: #edf2f5;
}

.vacation-grid .month-band-a.is-special-day {
  background: #f5d0bc;
}

.vacation-grid .month-band-b.is-special-day {
  background: #d5dde5;
}

.vacation-cell {
  color: #1f2933;
  font-weight: 900;
}
/* Celda que muestra el código de MOTIVO concreto (DF/IT/TDOM/…): fuente más pequeña y apretada para que
   quepan los códigos de 3-4 letras sin ensanchar la columna. El color lo sigue poniendo vacation-p/-b. */
.vacation-cell.has-motive { font-size: 0.6rem; letter-spacing: -0.04em; }
/* Tira "Ausencias por motivo" (KPI del periodo mostrado) sobre la parrilla de Absentismos. */
.vacation-motive-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 8px;
}
.vms-title { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted, #64748b); }
.vms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vms-chip { font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #e0e7ff; color: #3730a3; white-space: nowrap; }
.vms-chip b { font-weight: 800; }
.vms-total { font-size: 0.72rem; font-weight: 700; color: var(--muted, #64748b); }

.vacation-cell.is-editable {
  cursor: cell;
  user-select: none;
}

.vacation-cell.is-editable:hover {
  outline: 2px solid #d8a83d;
  outline-offset: -2px;
}

.vacation-edit-card {
  max-width: 620px;
}

.vacation-edit-card label {
  display: grid;
  gap: 5px;
}

.vacation-edit-help {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vacation-summary-cell {
  background: #f5f7fa;
  color: #1f2933;
}

.vacation-b {
  background: #fff2ad;
  color: #b4443f;
}

.vacation-v-confirmed {
  background: #d4f5e2;
  color: #145c30;
  font-weight: 700;
}

.vacation-v-requested {
  background: #fef9c3;
  color: #854d0e;
}

.vacation-c {
  background: #e4eefb;
  color: #0b3a5b;
}

.vacation-l {
  background: #eef2f6;
  color: #607088;
}

/* PR = Permiso retribuido (naranja del permiso; distinto del azul de CAP y del verde de vacaciones). */
.vacation-p {
  background: #ffe0c2;
  color: #b4470f;
  font-weight: 700;
}

.vacation-other {
  background: #f1e8ff;
  color: #5d3f8f;
}

.vacation-cell.is-selected {
  box-shadow: inset 0 0 0 2px #0d426b;
  position: relative;
}

.vacation-cell.is-selected::after {
  background: rgba(13, 66, 107, 0.08);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Absentismos: clic en el NOMBRE resalta toda su fila (tinte translúcido superpuesto que respeta el
   color de cada marca; usa background-image para NO pisar el box-shadow de la selección de celdas). */
#driverVacationGrid th.sticky-name[data-vacation-rowname] { cursor: pointer; }
#driverVacationGrid tr.is-row-highlight > * {
  background-image: linear-gradient(rgba(13, 66, 107, 0.12), rgba(13, 66, 107, 0.12));
}
#driverVacationGrid tr.is-row-highlight th.sticky-name {
  font-weight: 800;
  background-image: linear-gradient(rgba(13, 66, 107, 0.20), rgba(13, 66, 107, 0.20));
}

.driver-shifts-panel {
  overflow: hidden;
}

.shift-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.shift-toolbar input {
  flex: 1 1 260px;
  min-width: 240px;
}

.driver-shift-summary {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  margin-bottom: 8px;
}

.driver-shift-summary article {
  background: #fff;
  border: 1px solid #cbd9e8;
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  min-width: 0;
  padding: 6px 8px;
}

.driver-shift-summary span {
  color: #5e7188;
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.driver-shift-summary strong {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.driver-shift-summary small {
  color: #53657a;
  display: block;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-shift-grid-wrap {
  background: #fff;
  border: 1px solid #7b8794;
  border-radius: 5px;
  max-height: calc(100vh - 245px);
  overflow: auto;
}

.driver-shift-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  min-width: 980px;
  table-layout: fixed;
  width: 100%;
}

.driver-shift-grid th,
.driver-shift-grid td {
  border-bottom: 1px solid #d5dde7;
  border-right: 1px solid #d5dde7;
  padding: 3px;
  text-align: center;
  vertical-align: middle;
}

.driver-shift-grid thead th {
  background: #e6ebf0;
  border-bottom: 2px solid #1f2933;
  color: #102640;
  font-size: 10px;
  font-weight: 900;
  position: sticky;
  top: 0;
  z-index: 2;
}

.driver-shift-grid tbody th {
  background: #fff;
  color: #102640;
  font-weight: 900;
  text-align: left;
  width: 210px;
}

.shift-cell {
  align-items: center;
  background: #f6f9fc;
  border: 1px solid #cbd9e8;
  border-radius: 6px;
  color: #243447;
  cursor: pointer;
  display: grid;
  gap: 1px;
  min-height: 35px;
  padding: 4px 5px;
  width: 100%;
}

.shift-cell.is-selected {
  border-color: #0d426b;
  box-shadow: inset 0 0 0 2px #0d426b, 0 0 0 2px rgba(13, 66, 107, 0.08);
}

.shift-cell strong {
  font-size: 11px;
  line-height: 1;
}

.shift-cell span {
  color: #607088;
  font-size: 10px;
  line-height: 1;
}

.shift-work {
  background: #edf9f1;
  border-color: #a9dbc0;
}

.shift-rest {
  background: #fff7df;
  border-color: #e8cf90;
}

.shift-off {
  background: #fff0f0;
  border-color: #e7b7b7;
}

.shift-open {
  background: #bcdcff;
  border-color: #3b82f6;
  box-shadow: inset 0 0 0 1px #3b82f6;
}

.shift-open strong {
  color: #1d4ed8;
}

.shift-edit-card {
  max-width: 720px;
}

.shift-edit-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.driver-availability-panel {
  display: none;
}

.driver-availability-panel.open {
  background: #fff;
  border: 1px solid #cbd9e8;
  border-radius: 6px;
  display: block;
  margin-bottom: 8px;
  padding: 8px;
}

.availability-head {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}

.availability-head span {
  color: #607088;
  font-size: 12px;
}

.availability-head button {
  margin-left: auto;
}

.availability-chips {
  display: flex;
  flex-direction: column;   /* un conductor debajo de otro (no en fila) */
  align-items: flex-start;
  gap: 6px;
}

.availability-chip {
  align-items: center;
  border: 1px solid #d4dde8;
  border-radius: 999px;
  display: inline-flex;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
}

.availability-chip small {
  color: #607088;
  font-size: 10px;
  font-weight: 700;
}

.load-green {
  background: #edf9f1;
  border-color: #a9dbc0;
}

.load-yellow {
  background: #fff7df;
  border-color: #e8cf90;
}

.load-red {
  background: #fff0f0;
  border-color: #e7b7b7;
}

.attachment-list article.open-fault {
  background: #fff7ed;
  border-color: #fed7aa;
}

.document-viewer-card {
  max-width: min(1180px, calc(100vw - 56px));
  width: min(1180px, calc(100vw - 56px));
}

.document-viewer-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.document-viewer-canvas {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  min-height: 520px;
  overflow: auto;
  padding: 16px;
}

.document-viewer-canvas img {
  max-height: 76vh;
  max-width: 100%;
  transform-origin: center center;
}

.document-viewer-canvas iframe {
  background: #fff;
  border: 0;
  height: 76vh;
  transform-origin: center center;
  width: 100%;
}

.attachment-list {
  display: grid;
  gap: 8px;
}

.proof-merge-actions {
  align-items: center;
  background: #f8fbfe;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 8px 10px;
}

.proof-merge-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.proof-merge-check {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 5px;
  margin-bottom: 3px;
}

.proof-merge-check input {
  margin: 0;
}

.attachment-list article {
  align-items: center;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px;
}

.attachment-list span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

/* Miniatura clicable de la foto del albaran en el pop-up de documentos. */
.attachment-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.attachment-thumb {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 auto;
  height: 52px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  width: 52px;
}

.attachment-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.button-link {
  align-items: center;
  border-radius: 5px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  min-height: 26px;
  padding: 5px 8px;
  text-decoration: none;
}

.button-link.secondary {
  background: #eef2f6;
  border: 1px solid var(--line);
  color: var(--ink);
}

.table-list {
  gap: 6px;
}

@media (max-width: 1100px) {
  .date-control {
    align-items: stretch;
    flex-direction: column;
    min-width: 0;
  }

  .range-date-control {
    grid-template-columns: 1fr;
  }

  .list-toolbar {
    grid-template-columns: 1fr;
  }

  .detail-grid,
  .detail-related,
  .fueling-summary,
  .ticket-review-grid {
    grid-template-columns: 1fr;
  }

  .fueling-line {
    grid-template-columns: 1fr;
  }

  .detail-grid .wide {
    grid-column: auto;
  }
}

/* Wide traffic workspace */
.app-shell {
  display: block;
  min-height: 100vh;
}

.sidebar {
  align-items: center;
  display: flex;
  gap: 20px;
  height: auto;
  left: 0;
  min-height: 64px;
  overflow: visible;
  padding: 10px 22px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 30;
  /* Linea blanca fina + sombra muy sutil para delimitar la barra del contenido
     (sin mover el contenido: el padding-top de .main sigue igualando la barra). */
  border-bottom: 2px solid #ffffff;
  box-shadow: 0 4px 8px rgba(13, 39, 66, 0.08);
}

.brand {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.nav {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
}

.nav-has-dropdown {
  position: relative;
}

.nav-line {
  width: auto;
}

.nav-item {
  font-size: 13px;
  min-height: 34px;
  padding: 7px 8px;
  white-space: nowrap;
}

.submenu {
  align-items: stretch;
  background: var(--nav);
  border: 1px solid #33435a;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(10, 16, 24, 0.25);
  gap: 5px;
  left: 0;
  margin: 0;
  min-width: 180px;
  width: max-content;   /* crece para que quepa el ítem más ancho + su flechita ↗ ("Cuadrante Conductores") */
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 40;
}
/* Cada línea del desplegable (ítem + ↗) a lo ancho completo, con la flechita al final sin salirse. */
.submenu.open .submenu-line { display: flex; align-items: center; width: 100%; gap: 6px; }
.submenu.open .submenu-line .submenu-item { flex: 1 1 auto; }

.submenu.open {
  display: grid;
}

.submenu-line {
  margin-left: 0;
}

.submenu-item {
  min-height: 30px;
  padding: 6px 9px;
}

.nav-open-link {
  flex-basis: 14px;
  height: 14px;
  width: 14px;
}

.main {
  padding: 84px 24px 28px;
}

.work-grid {
  grid-template-columns: minmax(0, 1fr);
}

.service-editor-panel {
  background: #fbfcfe;
  box-shadow: none;
  padding: 12px 14px;
}

.service-editor-panel .panel-head {
  margin-bottom: 0;
}

.service-editor-panel.is-collapsed .service-editor-body {
  display: none;
}

.service-editor-body {
  align-items: start;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: 210px minmax(0, 1fr);
  grid-template-rows: min-content min-content 1fr;
  margin-top: 8px;
  padding-top: 8px;
}

/* Columna izquierda: "Soltar email" arriba y "Pegar texto del email" justo debajo */
.service-editor-body .mail-drop-zone { grid-column: 1; grid-row: 1; }
.service-editor-body #pasteMailButton { grid-column: 1; grid-row: 2 / 4; align-self: stretch; }
.service-editor-body #serviceForm { grid-column: 2; grid-row: 1 / 4; }

.service-editor-body .mail-drop-zone {
  min-height: 44px;
  padding: 6px 8px;
}

.service-editor-body .mail-drop-zone strong {
  font-size: 12px;
}

.service-editor-body .mail-drop-zone span {
  font-size: 11px;
}

.service-editor-body #pasteMailButton {
  align-self: stretch;
  font-size: 12px;
  min-height: 44px;
  padding: 5px 8px;
}

#serviceForm {
  align-items: start;
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 8px;
}

#serviceForm input,
#serviceForm select,
#serviceForm textarea {
  font-size: 13px;
  min-height: 30px;
  padding: 5px 8px;
}

#serviceForm > input,
#serviceForm > textarea,
#serviceForm > .two-cols,
#serviceForm > .datetime-fields,
#serviceForm > .advanced-fields,
#serviceForm > .form-actions {
  min-width: 0;
}

#serviceForm .datetime-fields {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 6px;
  grid-column: 1 / 7;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6px;
}

#serviceForm .datetime-form-field {
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) 46px 46px;
}

#serviceForm .datetime-label {
  font-size: 10px;
  grid-column: 1 / -1;
}

/* ===== Layout ordenado del formulario de nuevo servicio (grid 6 col) ===== */
/* Fila 1: Cliente | Albaran */
#serviceForm input[name="customer_name"] { grid-column: 1 / 4; }
#serviceForm .svc-albaran-wrap { grid-column: 4 / 7; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
#serviceForm .svc-albaran-wrap input { grid-column: auto; min-width: 0; }
.svc-cita { font-size: 10px; line-height: 1.2; color: var(--primary-strong); margin-top: 2px; white-space: normal; }
#serviceForm .svc-clientselect { grid-column: 1 / 4; position: relative; min-width: 0; }
.svc-clientbtn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; min-height: 30px; cursor: pointer; font-size: 13px; }
.svc-clientbtn:hover { background: #f6f9fc; }
.svc-clientbtn-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.svc-clientbtn-name.is-placeholder { color: var(--muted); font-weight: 400; }
.svc-clientbtn-caret { color: var(--muted); flex-shrink: 0; font-size: 11px; }
.svc-clientdrop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 8px; display: grid; gap: 6px; }
.svc-clientdrop > input { width: 100%; box-sizing: border-box; }
.svc-clientdrop .taddr-list { max-height: 320px; overflow-y: auto; display: grid; gap: 2px; }
.svc-addr-pick {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 32px;
  font-size: 12px;
}

/* ===== Carga/descarga compactas: dirección + día + hora juntas, en 2 columnas (carga | descarga) =====
   Fila 1 = carga 1 + descarga 1. La 2ª/3ª aparecen bajo su columna al pulsar "+ carga" / "+ descarga". */
#serviceForm .svc-route {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}
#serviceForm .svc-route-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#serviceForm .svc-route-head { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
/* en columna ancha: dirección + fecha/hora en una fila; si no caben, la fecha/hora baja sola debajo */
#serviceForm .svc-route-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
#serviceForm .svc-route-leg .svc-addr-pick { flex: 1 1 150px; min-width: 150px; }
/* fecha/hora compacta dentro de la pierna (día + hora + min), igual en la parada principal y en las extra */
#serviceForm .svc-route .datetime-form-field,
#serviceForm .svc-extra-list .form-stop-dt { display: flex; gap: 4px; flex: 0 0 auto; align-items: center; }
#serviceForm .svc-route .datetime-form-field [data-date-part],
#serviceForm .svc-extra-list .form-stop-date { width: 124px; flex: 0 0 auto; }
#serviceForm .svc-route .datetime-form-field [data-hour-part],
#serviceForm .svc-route .datetime-form-field [data-minute-part],
#serviceForm .svc-extra-list .form-stop-hour,
#serviceForm .svc-extra-list .form-stop-minute { width: 54px; flex: 0 0 auto; }
/* listas de paradas extra: una fila por parada, mismo aspecto que la pierna principal */
#serviceForm .svc-extra-list { display: flex; flex-direction: column; gap: 6px; }
#serviceForm .svc-extra-list .form-stop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; }
/* etiqueta "Carga 2" / "Descarga 2"… (la principal es la 1) */
#serviceForm .svc-extra-list .form-stop-tag { display: inline-block; flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--muted); text-transform: uppercase; min-width: 52px; }
#serviceForm .svc-extra-list .form-stop-addr-btn { flex: 1 1 150px; min-width: 150px; width: auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 32px; }
#serviceForm .svc-extra-list .form-stop-remove { flex: 0 0 auto; }
/* botón pequeño para añadir 2ª/3ª carga o descarga */
#serviceForm .mini-add { align-self: flex-start; font-size: 12px; min-height: 28px; padding: 4px 10px; }
/* ===== Fila superior: Cliente · Albarán · Cita · [Servicio recurrente] [Listado recurrentes] ===== */
#serviceForm .svc-top-row {
  grid-column: 1 / 7;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 6px;
}
#serviceForm .svc-top-row .svc-clientselect { flex: 3 1 220px; min-width: 0; }
#serviceForm .svc-top-row .svc-albaran-wrap { flex: 3 1 200px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; }
#serviceForm .svc-top-row .svc-albaran-wrap input { min-width: 0; }
#serviceForm .svc-top-row .svc-recurring-actions { flex: 0 0 auto; justify-content: flex-end; }
#serviceForm .svc-top-row .svc-recurring-actions button { font-size: 12px; min-height: 30px; padding: 6px 10px; white-space: nowrap; }

/* Conductor + Matricula + Remolque + Precio + Precio venta en una sola fila */
#serviceForm .svc-assign-row {
  grid-column: 1 / 7;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: 6px;
}
#serviceForm .svc-assign-who { position: relative; display: flex; gap: 6px; min-width: 0; }
#serviceForm .svc-assign-mode { flex: 0 0 auto; width: 118px; }
#serviceForm .svc-assign-field { flex: 1 1 auto; min-width: 0; }
#serviceForm .svc-provider-select { position: relative; flex: 1 1 auto; min-width: 0; }
#serviceForm .svc-provider-select .svc-clientbtn { min-height: 30px; }
/* Conductor (ancho completo) */
#serviceForm .conductor-assign-wrap {
  grid-column: 1 / 7;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#serviceForm .conductor-assign-buttons { display: flex; gap: 6px; }
#serviceForm .conductor-assign-buttons .secondary {
  flex: 1;
  font-size: 12px;
  min-height: 30px;
  white-space: nowrap;
}
#serviceForm .external-fields { display: grid; gap: 6px; }

/* Fila 3: Matricula/Remolque | Precio/Precio venta */
#serviceForm .td-row-plates { grid-column: 1 / 4; }
#serviceForm .td-row-prices { grid-column: 4 / 7; }

/* Fila 4: Incidencias (ancho completo) */
#serviceForm input[name="incidents"] { grid-column: 1 / 7; }

/* Fila 5: Observaciones */
#serviceForm textarea[name="notes"] { grid-column: 1 / 7; min-height: 42px; }

/* Fila 6: Campos avanzados */
#serviceForm .advanced-fields { grid-column: 1 / 7; padding: 5px 8px; }
#serviceForm .advanced-fields summary { font-size: 12px; }
#serviceForm .advanced-fields[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: start;
}
#serviceForm .advanced-fields > summary,
#serviceForm .advanced-fields > .two-cols,
#serviceForm .advanced-fields > textarea,
#serviceForm .advanced-fields > input[name="excel_index"] { grid-column: 1 / -1; }

/* Fila 7: Acciones a la derecha */
#serviceForm .form-actions {
  grid-column: 1 / 7;
  align-self: end;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}
#serviceForm .form-actions button {
  flex: 0 0 auto;
  font-size: 12px;
  min-height: 30px;
  padding: 6px 14px;
}

.services-panel {
  min-height: 620px;
}

@media (max-width: 1300px) {
  .service-editor-body {
    grid-template-columns: 1fr;
  }

  /* En pantallas estrechas, los campos apilan a ancho completo (orden logico) */
  #serviceForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #serviceForm input[name="customer_name"],
  #serviceForm input[name="route"],
  #serviceForm .datetime-fields,
  #serviceForm .svc-route,
  #serviceForm .svc-top-row,
  #serviceForm .conductor-assign-wrap,
  #serviceForm .td-row-plates,
  #serviceForm .td-row-prices,
  #serviceForm input[name="incidents"],
  #serviceForm textarea[name="notes"],
  #serviceForm .advanced-fields,
  #serviceForm .form-actions {
    grid-column: 1 / -1;
  }
}

/* Compact sticky traffic header. El padding-top iguala la altura de la barra
   superior fija (64px) para que la cabecera sticky quede a ras, sin hueco ni
   "salto" de 12px al empezar a hacer scroll. */
.main {
  padding: 64px 14px 18px;
}

/* ── Solo el listado hace scroll (Proveedores y Clientes) ───────────────────
   La vista ocupa el alto de pantalla bajo la barra de metricas (~129px:
   nav 64 + metricas ~59 + margenes); la seccion, los filtros y el panel
   lateral quedan fijos y solo el contenedor de la lista desplaza. */
#providersView.view.active,
#customersView.view.active,
#driversView.view.active,
#vehiclesView.view.active,
#fuelingsView.view.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 147px);
  overflow: hidden;
}

#providersView > .section-title,
#customersView > .section-title,
#driversView > .section-title,
#vehiclesView > .section-title,
#fuelingsView > .section-title {
  flex: 0 0 auto;
}

/* Conductores, Flota y Repostajes: section-title + split-view (form fijo a la
   izquierda, filtros fijos y lista con scroll a la derecha). position:static
   anula los sticky heredados del diseno antiguo (scroll de pagina) que tapaban
   la primera fila del listado. */
#driversView > .split-view,
#vehiclesView > .split-view,
#fuelingsView > .split-view {
  flex: 1 1 auto;
  min-height: 0;
}
#driversView > .split-view > .panel:first-child,
#vehiclesView > .split-view > .panel:first-child,
#fuelingsView > .split-view > .panel:first-child {
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  position: static;
  top: auto;
}
#driversView > .split-view > .panel:last-child,
#vehiclesView > .split-view > .panel:last-child,
#fuelingsView > .split-view > .panel:last-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#driversView > .split-view > .panel:last-child > .drivers-panel-actions,
#driversView > .split-view > .panel:last-child > .list-toolbar,
#vehiclesView > .split-view > .panel:last-child > .list-toolbar,
#vehiclesView > .split-view > .panel:last-child > .vehicle-history-panel,
#fuelingsView > .split-view > .panel:last-child > .ticket-drop-zone,
#fuelingsView > .split-view > .panel:last-child > .list-toolbar,
#fuelingsView > .split-view > .panel:last-child > .fueling-summary,
#fuelingsView > .split-view > .panel:last-child > #fuelingsListHeader {
  flex: 0 0 auto;
  position: static;
  top: auto;
}
#driversView > .split-view > .panel:last-child > #driversList,
#vehiclesView > .split-view > .panel:last-child > #vehiclesList,
#fuelingsView > .split-view > .panel:last-child > #fuelingsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Estos listados son grid; con pocas filas (al filtrar) el align-content por
     defecto (normal=stretch) estiraba las filas para rellenar el alto. Con
     'start' se empaquetan arriba y el hueco sobrante queda vacio. */
  align-content: start;
}

/* Proveedores: contenido = filtros + stats (fijos) + lista (scroll) */
#providersView > #providersContent {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#providersView > #providersContent > .list-toolbar,
#providersView > #providersContent > .providers-stats-bar {
  flex: 0 0 auto;
}
#providersView > #providersContent > #providersListWrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Clientes: el wrapper de pestanas y la pestana activa llenan el alto disponible.
   :not(.section-title) para no afectar a la cabecera (que tambien es un div). */
#customersView > div:not(.section-title) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#customersView .customer-tab.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Pestana Clientes: filtros + stats fijos, solo #customersList scrollea */
#customersTab .customers-view-shell,
#customersTab .customers-main-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#customersTab .list-toolbar,
#customersTab #customersStatsBar {
  flex: 0 0 auto;
}
#customersTab #customersList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Es un grid (.table-list); con pocas filas, el align-content por defecto
     (normal=stretch) estiraba las fichas para rellenar el alto. 'start' las
     empaqueta arriba y el hueco sobrante queda vacio. */
  align-content: start;
}

/* Pestanas Direcciones y Tarifas: panel lateral fijo (con scroll propio si es
   alto) y solo la lista de la derecha scrollea */
#addressesTab .split-view,
#ratesTab .split-view {
  flex: 1 1 auto;
  min-height: 0;
}
#addressesTab .split-view > .panel:first-child,
#ratesTab .split-view > .panel:first-child {
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
}
#addressesTab .split-view > .panel:last-child,
#ratesTab .split-view > .panel:last-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#addressesTab .split-view > .panel:last-child .list-toolbar,
#ratesTab .split-view > .panel:last-child .list-toolbar {
  flex: 0 0 auto;
}
#addressesList,
#ratesList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Grids (.table-list): empaquetar las fichas arriba, que no se estiren al filtrar. */
  align-content: start;
}

.topbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 230px) minmax(360px, 1fr) auto;
  margin-bottom: 6px;
  margin-top: 6px; /* aire entre el menú azul y la barra de sección (feedback del jefe) */
  padding: 8px 12px;
  position: sticky;
  top: 64px;
  z-index: 28;
}

.topbar h1 {
  font-size: 20px;
}

body.fleet-topbar-mode .topbar {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
}

body.traffic-fleet-summary-mode .topbar {
  gap: 6px;
  /* logo + 8 banners (2 metricas: Servicios/En curso + 6 de flota) + zona de fechas. Las columnas
     de banner = numero exacto de banners para que SIEMPRE quepan en UNA fila (en pantallas
     estrechas el topbar hace scroll horizontal, nunca salta a una segunda fila). */
  grid-template-columns: minmax(118px, 150px) repeat(8, minmax(84px, 1fr)) minmax(360px, auto);
}

.fleet-summary-bar {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
}

.topbar .summary-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  min-width: 0;
}

body.traffic-fleet-summary-mode .fleet-summary-bar {
  display: contents;
}

body.traffic-fleet-summary-mode .topbar .summary-grid {
  display: contents;
}

.fleet-summary-card,
.topbar .metric {
  background: #fff;
  border: 1px solid #cbd9e8;
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  display: grid;
  gap: 1px;
  min-height: 36px;
  min-width: 0;
  overflow: hidden;
  padding: 4px 7px;
}

.topbar-filter-card {
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.topbar-filter-card:hover,
.topbar-filter-card:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(176, 112, 60, 0.20);
  outline: none;
}

.topbar-filter-card:active {
  transform: translateY(1px);
}

body.traffic-fleet-summary-mode .fleet-summary-card,
body.traffic-fleet-summary-mode .topbar .metric {
  height: 54px;
  min-height: 54px;
  min-width: 0;
  padding: 6px 8px;
}

.fleet-summary-card span,
.topbar .metric span {
  color: #5e7188;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fleet-summary-card strong,
.topbar .metric strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
}

body.traffic-fleet-summary-mode .fleet-summary-card strong,
body.traffic-fleet-summary-mode .topbar .metric strong {
  font-size: 15px;
}

body.traffic-fleet-summary-mode .fleet-summary-card span,
body.traffic-fleet-summary-mode .topbar .metric span {
  font-size: 9px;
}

.fleet-summary-card small {
  color: #53657a;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-summary-line {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

body.traffic-fleet-summary-mode .fleet-summary-card small {
  font-size: 10px;
}

.fault-inoperable-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--danger, #c0392b);
  margin: 4px 0 6px;
  cursor: pointer;
}

.fault-inoperable-check input {
  accent-color: var(--danger, #c0392b);
  width: 15px;
  height: 15px;
}

.fault-reporter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 4px;
}

.fault-select-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fault-select-label > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fault-select-wrap {
  position: relative;
}

.fault-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.fault-styled-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: var(--ink, #1a2332);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 0;
}

.fault-styled-select:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.fault-dropzone {
  position: relative;
  margin: 8px 0 4px;
  border: 1.5px dashed #b8c8db;
  border-radius: 8px;
  background: #f6f9fc;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}

.fault-dropzone.is-over {
  border-color: var(--primary, #2563eb);
  background: #eef4ff;
}

.fault-dz-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 0;
}

.fault-dz-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px 12px;
  color: #64748b;
  cursor: pointer;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.fault-dz-body svg {
  color: #94a3b8;
  flex-shrink: 0;
}

.fault-dz-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1a2332);
}

.fault-dz-sub {
  font-size: 11px;
  color: #94a3b8;
}

.fault-dz-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 10px 10px;
  position: relative;
  z-index: 1;
}

.fault-dz-thumb {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.fault-dz-thumb img {
  width: 72px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #d1dce8;
  display: block;
}

.fault-dz-fname {
  font-size: 10px;
  color: #64748b;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.fault-dz-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(30,40,60,0.7);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fault-dz-remove:hover {
  background: #c0392b;
}

.fault-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  min-height: 10px;
}

.fault-img-gallery-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.fault-img-thumb {
  position: relative;
  display: inline-block;
}

.fault-img-thumb img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border, #d1d5db);
  cursor: zoom-in;
  display: block;
}

.fault-img-thumb .danger.mini-action {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 16px;
  border-radius: 3px;
  opacity: 0.85;
}

.fault-img-thumb .danger.mini-action:hover {
  opacity: 1;
}

.fault-img-gallery-mini .fault-img-thumb img {
  width: 56px;
  height: 42px;
}

.fleet-summary-card.is-ok {
  border-left-color: #2e8b57;
  background: #f0faf4;
}

.fleet-summary-card.is-warning {
  border-left-color: #c48b1d;
  background: #fffaf0;
}

.fleet-summary-card.is-danger {
  border-left-color: #cf4f4f;
  background: #fff4f4;
}

/* Recuadro "Ausencias": mismo naranja que la línea del conductor en permiso (pedido del jefe). */
.fleet-summary-card.is-ausencias {
  border-left-color: #f2ac55;
  background: #ffe1bd;
}

.fleet-summary-groups div {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.fleet-summary-groups div span {
  background: #eef5fb;
  border: 1px solid #cfdeec;
  border-radius: 999px;
  color: #14324e;
  padding: 3px 6px;
  text-transform: none;
}

.topbar .summary-grid {
  margin: 0;
}

.topbar .metric {
  box-shadow: none;
}

.topbar .metric strong {
  margin: 0;
}

.date-control {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

body.traffic-fleet-summary-mode .date-control {
  gap: 4px;
  max-width: none;
}

body.traffic-fleet-summary-mode #singleDateControl,
body.traffic-fleet-summary-mode .range-date-control input {
  width: 120px;
}

body.traffic-fleet-summary-mode .range-date-control {
  gap: 4px;
  grid-template-columns: 120px 120px;
}

body.traffic-fleet-summary-mode .segmented-control button {
  font-size: 11px;
  min-height: 26px;
  padding: 4px 7px;
}
/* El selector de periodo DE LAS VISTAS HORARIAS (Planificador y Jornadas comparten cabecero) va SIEMPRE
   compacto, anclado a su propio contenedor. Antes heredaba el compacto de la clase del body de arriba
   —que es del TOPBAR de Tráfico diario y tiene su propia vida—: al entrar al Planificador la clase se
   quedaba pegada ~45 s hasta que un repintado del topbar la quitaba, y los botones Día/Semana/Mes/Rango
   daban el ESTIRÓN en la cara del operativo (lo cazó el jefe, 01-08-2026). */
.traffic-hourly-root .segmented-control button {
  font-size: 11px;
  min-height: 26px;
  padding: 4px 7px;
}

.date-control label {
  display: none;
}

#singleDateControl,
.range-date-control input {
  min-width: 0;
  width: 138px;
}

.range-date-control {
  gap: 5px;
  grid-template-columns: 138px 138px;
}

.quick-date-filters {
  display: inline-flex;
  gap: 5px;
}

.quick-date-filters button,
.segmented-control button {
  font-size: 12px;
  min-height: 28px;
  padding: 5px 8px;
}

#planningView .section-title {
  display: none;
}

.work-grid {
  gap: 6px;
}

.service-editor-panel {
  padding: 7px 10px;
  position: sticky;
  top: 132px;
  z-index: 26;
}

.service-editor-panel .panel-head {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 30px;
  overflow: visible;
}

#serviceEditorToggle {
  min-height: 28px;
  padding: 5px 9px;
}

.service-editor-title-button {
  font-size: 13px;
  justify-self: start;
  min-width: 120px;
}

.service-editor-title-button[aria-expanded="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.traffic-filter-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
}

/* Filtros a la izquierda, acciones a la derecha (criterio de toolbars). */
.traffic-filter-actions #clientOrderButton {
  margin-left: auto;
}

.traffic-filter-actions input,
.traffic-filter-actions select {
  flex: 0 1 auto;
  font-size: 12px;
  min-height: 30px;
  padding: 5px 8px;
  width: auto;
}

.traffic-filter-actions select {
  min-width: 0;
}

.traffic-filter-actions #trafficSearchInput {
  flex: 0 1 220px;
  min-width: 160px;
}

/* Fechas de filtro ocultas: el calendario Día/Rango (movido aquí desde el topbar) es la única
   fecha visible; el JS sigue escribiendo en ellas vía syncVisibilityRangeFromTopbar(). */
.traffic-filter-actions #trafficDateFromFilter,
.traffic-filter-actions #trafficDateToFilter {
  display: none;
}

.traffic-filter-actions #trafficStateFilter {
  flex: 0 1 220px;
  min-width: 170px;
}

.traffic-filter-actions #driverTrafficFilter {
  flex: 0 1 240px;
  min-width: 190px;
}

.traffic-filter-actions button {
  flex: 0 0 auto;
  font-size: 11px;
  min-height: 30px;
  padding: 5px 8px;
}

/* El grupo Día/Rango dentro de la barra: 24px de botón + 2px de padding + 1px de borde = 30px,
   la misma altura que el resto de controles. El prefijo body iguala la especificidad (0,2,2)
   de la regla de fleet-summary-mode; al ir después, gana esta. */
.traffic-filter-actions .segmented-control {
  align-self: center;
  padding: 2px;
}

body .traffic-filter-actions .segmented-control button {
  font-size: 11px;
  min-height: 24px;
  padding: 3px 9px;
}

.services-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  padding: 8px;
}

.services-panel > .panel-head {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin: -8px -8px 8px;
  padding: 7px 8px;
  position: static;
  z-index: 1;
}

.services-head-actions {
  align-items: center;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-left: auto;
}

.services-panel .panel-title-actions {
  gap: 6px;
}

.services-panel .panel-title-actions h2 {
  font-size: 14px;
  line-height: 1;
}

.services-panel .panel-title-actions .app-send {
  font-size: 11px;
  min-height: 28px;
  padding: 5px 8px;
}

.services-panel .compact-traffic-toggle {
  font-size: 11px;
  min-height: 30px;
  padding: 5px 8px;
}

.traffic-row-zoom-control {
  align-items: center;
  background: #f7fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 30px;
  padding: 4px 6px 4px 8px;
  white-space: nowrap;
}

.traffic-row-zoom-toggle-slot {
  display: inline-flex;
}

.traffic-row-zoom-control span,
.traffic-row-zoom-control output {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.traffic-row-zoom-control output {
  color: var(--primary-strong);
  min-width: 34px;
  text-align: right;
}

.traffic-row-zoom-control input[type="range"] {
  accent-color: var(--brand);
  cursor: pointer;
  min-height: 18px;
  padding: 0;
  width: 104px;
}

.traffic-row-zoom-control button.secondary {
  font-size: 10px;
  min-height: 22px;
  padding: 3px 7px;
}

.traffic-row-zoom-control .traffic-chrome-toggle {
  box-shadow: none;
  font-size: 10px;
  min-height: 22px;
  padding: 3px 7px;
  position: static;
  right: auto;
  top: auto;
}

/* Igualar TODOS los botones de la fila "Servicios del dia" al mismo tamano compacto */
.services-panel .panel-title-actions button.secondary {
  font-size: 11px;
  min-height: 28px;
  padding: 5px 8px;
}

/* Todos los botones de la fila a la misma altura (la del mas alto): la fila los
   estira y el contenido (texto + badge) se centra. */
.services-panel .panel-title-actions {
  align-items: stretch;
}
.services-panel .panel-title-actions > h2 {
  align-self: center;
}
.services-panel .panel-title-actions button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.traffic-chrome-toggle {
  border-color: #9fb4cc;
  box-shadow: 0 4px 14px rgba(28, 38, 51, 0.18);
  font-size: 11px;
  font-weight: 800;
  min-height: 30px;
  overflow: hidden;
  padding: 5px 10px;
  /* Por defecto NO flota: vive dentro del control "Zoom filas" (estático) o, colapsado,
     como pestaña centrada arriba (esas reglas ponen su propio position:fixed). El
     position:fixed;top:74px;right:16px de antes era herencia del diseño flotante viejo y
     dejaba un botón fantasma arriba-derecha si el JS no lo había recolocado aún. */
  position: static;
  transition: transform 0.14s ease, max-width 0.14s ease, padding 0.14s ease, color 0.1s ease;
  /* z-index: auto a propósito. El botón es un FLEX ITEM (hijo de .traffic-row-zoom-control, que es flex):
     con z-index != auto un flex item CREA stacking context aunque sea position:static, y se pintaba POR
     ENCIMA de la barra superior (z-index 30) y del contenido al hacer scroll (bug "flota al scrollear" que
     solo se veía en Chrome de móvil real). Las pestañas peek (colapsado) fijan su propio z-index cuando
     pasan a position:fixed, así que no dependen de éste. */
  z-index: auto;
}

/* Salvaguarda anti-fantasma: si por una carrera de arranque el botón queda suelto como hijo
   directo de <body> SIN estar en modo pestaña colapsada, no debe asomar; el JS lo recoloca en
   el hueco de "Zoom filas" al renderizar. Las pestañas colapsadas (que sí van en body) se
   excluyen por su clase, así que siguen viéndose. */
body:not(.traffic-chrome-collapsed):not(.mobile-chrome-collapsed) > .traffic-chrome-toggle {
  display: none;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed .traffic-chrome-toggle {
  background: #fff;
  border-color: var(--primary);
  border-radius: 0 0 8px 8px;
  color: transparent;
  left: 50%;
  max-width: 38px;
  min-height: 30px;
  padding: 5px 0;
  position: fixed;
  right: auto;
  top: 0;
  transform: translate(-50%, -17px);
  width: 38px;
  z-index: 1200;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed .traffic-chrome-toggle::after {
  border: solid var(--primary-strong);
  border-width: 0 2px 2px 0;
  bottom: 5px;
  content: "";
  height: 7px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 7px;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed .traffic-chrome-toggle:hover,
body.traffic-chrome-planning-active.traffic-chrome-collapsed .traffic-chrome-toggle:focus-visible {
  color: var(--primary-strong);
  max-width: 170px;
  padding: 5px 10px;
  transform: translate(-50%, 0);
  width: auto;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed .traffic-chrome-toggle:hover::after,
body.traffic-chrome-planning-active.traffic-chrome-collapsed .traffic-chrome-toggle:focus-visible::after {
  border: 0;
  content: none;
  height: 0;
  width: 0;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed .app-shell {
  grid-template-columns: 1fr;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed .sidebar,
body.traffic-chrome-planning-active.traffic-chrome-collapsed .topbar,
body.traffic-chrome-planning-active.traffic-chrome-collapsed #planningView.active #driverAvailabilityBar,
body.traffic-chrome-planning-active.traffic-chrome-collapsed #planningView.active .service-editor-panel,
body.traffic-chrome-planning-active.traffic-chrome-collapsed #planningView.active .services-panel > .panel-head,
body.traffic-chrome-planning-active.traffic-chrome-collapsed #planningView.active .all-dates-note {
  display: none !important;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed main.main {
  padding: 0 !important;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed #planningView.active .work-grid {
  gap: 0;
}

body.traffic-chrome-planning-active.traffic-chrome-collapsed #planningView.active .services-panel {
  min-height: calc(100vh - 18px);
  padding: 0;
}

/* Selector de vehiculos (Averia / Repostaje desde trafico diario) */
.td-veh-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 26, 0.55);
  display: grid;
  place-items: center;
  z-index: 4000;
}
.td-veh-picker {
  width: min(440px, 92vw);
  height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.td-veh-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.td-veh-picker-head strong { font-size: 14px; color: var(--ink); }
.td-veh-picker-search {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
}
.td-veh-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 140px;
}
.td-veh-item {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink);
}
.td-veh-item:hover { background: var(--primary-soft); }
.td-veh-item.selected {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
  font-weight: 600;
}
.td-veh-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Repostaje -> selector de CONDUCTOR con arrastre de ticket (foto sobre el conductor) */
.td-drv-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.td-drv-hint .ic { flex: 0 0 auto; color: var(--primary); }
.td-drv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}
.td-drv-item:hover { background: var(--primary-soft); }
.td-drv-item.drag-over {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.td-drv-item.drag-over * { pointer-events: none; }
.td-drv-name { font-weight: 600; color: var(--ink); }
.td-drv-op {
  font-size: 11px;
  color: var(--muted);
  background: #f1f4f8;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.td-drv-cam {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}
.td-drv-cam:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* Control semanal de aceite: indicador reportado/pendiente en el selector */
.td-oil-pill {
  border-radius: 999px;
  float: right;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 8px;
}
.td-oil-pill.ok { background: #e3f2eb; color: #1f7a5b; }
.td-oil-pill.pend { background: #fdecec; color: #b42318; }

/* Badge de pendientes sobre el boton "Aceite" en Trafico diario */
.td-oil-badge {
  background: #d92d20;
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  margin-left: 5px;
  min-width: 15px;
  padding: 2px 4px;
  text-align: center;
}
.td-veh-picker-actions { display: flex; justify-content: flex-end; }
.td-veh-accept {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.td-veh-accept:disabled { opacity: 0.5; cursor: not-allowed; }

.traffic-search-input {
  min-width: 180px;
  width: auto;
}

.traffic-date-filter {
  min-width: 124px;
}

body.traffic-compact-mode .topbar,
body.traffic-compact-mode .columns-panel,
body.traffic-compact-mode .view-options-panel,
body.traffic-compact-mode #serviceEditorToggle,
body.traffic-compact-mode .service-editor-body {
  display: none !important;
}

body.traffic-compact-mode .sidebar {
  display: none;
}

body.traffic-compact-mode .main {
  padding-top: 6px;
}

body.traffic-compact-mode .work-grid {
  gap: 4px;
}

body.traffic-compact-mode .service-editor-panel {
  display: none;
}

body.traffic-compact-mode .services-panel > .panel-head {
  background: transparent;
  border: 0;
  justify-content: space-between;
  margin: 0 0 3px;
  padding: 0;
  position: static;
  z-index: 40;
}

body.traffic-compact-mode .services-panel .panel-title-actions {
  display: none;
}

body.traffic-compact-mode .services-head-actions {
  display: flex;
  justify-content: space-between;
  margin-left: 0;
  width: 100%;
}

body.traffic-compact-mode .service-editor-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  position: sticky;
  top: 58px;
  z-index: 35;
}

body.traffic-compact-mode .service-editor-panel .panel-head {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
}

body.traffic-compact-mode .traffic-filter-actions {
  display: flex;
  justify-content: flex-end;
}

body.traffic-compact-mode .traffic-filter-actions > :not(#compactTrafficToggle) {
  display: none;
}

.compact-traffic-toggle {
  min-height: 30px;
  padding: 5px 8px;
  white-space: nowrap;
}

.compact-clear-filters {
  display: none;
  min-height: 30px;
  padding: 5px 8px;
  white-space: nowrap;
}

body.traffic-compact-mode .compact-clear-filters {
  display: inline-flex;
  background: #fff;
  border-color: var(--primary);
  color: var(--primary);
  font-size: 11px;
}

body.traffic-compact-mode .compact-traffic-toggle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 11px;
  min-height: 30px;
  padding: 5px 8px;
}

body.traffic-compact-mode .services-panel {
  min-height: 0;
  padding: 4px;
}

.service-list.compact-screen-mode {
  border-color: #111827;
  border-radius: 3px;
  max-height: calc(100vh - 88px);
}

.service-list.compact-screen-mode.no-horizontal-scroll {
  overflow-x: hidden;
}

.compact-service-table {
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.2;
  min-width: 1680px;
  table-layout: fixed;
}

.compact-service-table th,
.compact-service-table td {
  border: 1px solid #111827;
  padding: 1px 3px;
  text-align: center;
  vertical-align: middle;
}

.compact-service-table th {
  background: #e6f0f7;
  color: var(--primary-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  overflow: visible;
  padding: 2px 4px;
  position: sticky;
  text-transform: uppercase;
  z-index: 5;
}

.compact-header-content {
  align-items: center;
  display: inline-flex;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.compact-filter-button {
  align-items: center;
  appearance: none;
  background: #f8fafc;
  border: 1px solid #b8c2cf;
  border-radius: 3px !important;
  box-sizing: border-box;
  color: #334155;
  display: inline-flex;
  flex: 0 0 16px !important;
  font-size: 0;
  height: 16px !important;
  justify-content: center;
  line-height: 1;
  max-height: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  min-width: 16px !important;
  overflow: hidden;
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  width: 16px !important;
}

.compact-filter-button::after {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  content: "";
  display: block;
  height: 0;
  width: 0;
}

.compact-filter-button.is-filtered {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.compact-filter-popover {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 55;
}

.compact-filter-title,
.compact-filter-actions-row {
  align-items: center;
  display: flex;
  gap: 5px;
}

.compact-filter-title {
  justify-content: space-between;
}

.compact-filter-actions-row {
  flex: 0 0 auto;
  justify-content: flex-start;
}

.compact-filter-title span {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.compact-filter-popover button {
  font-size: 12px;
  min-height: 32px;
  padding: 6px 10px;
}

.compact-filter-wide-action {
  width: 100%;
}

.compact-filter-values {
  border: 1px solid #d3dbe6;
  border-radius: 5px;
  display: block;
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  width: 100%;
}

.compact-filter-option {
  align-items: center;
  background: #fff;
  color: #172033;
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 30px;
  padding: 5px 8px;
  user-select: none;
}

.compact-filter-option:hover {
  background: #eef4fb;
}

.compact-filter-option + .compact-filter-option {
  border-top: 1px solid #eef2f7;
}

.compact-filter-option input {
  min-height: auto;
  width: auto;
}

.compact-service-table td {
  background: #fff;
  color: #111827;
  height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-service-table .col-service_date_2 {
  width: 70px;
}

.compact-service-table .col-customer_name {
  font-weight: 800;
  width: 112px;
}

.compact-service-table .col-delivery_note {
  width: 122px;
}

.compact-service-table .col-route {
  width: 260px;
}

.compact-service-table .col-loading_at,
.compact-service-table .col-unloading_at,
.compact-service-table .col-departure_info,
.compact-service-table .col-incidents {
  width: 92px;
}

.compact-service-table .col-driver_name {
  width: 150px;
}

.compact-service-table .col-vehicle_plate,
.compact-service-table .col-trailer_plate {
  width: 82px;
}

.compact-service-table .col-notes,
.compact-service-table .col-incident_type_notes {
  width: 160px;
}

.compact-service-table .col-stoppage,
.compact-service-table .col-cost_price,
.compact-service-table .col-sale_price {
  width: 84px;
}

.compact-service-table .driver-finished-row td {
  background: #f0faf4;
}

/* Servicio TASADO: toda la fila en morado pastel (por encima del verde de
   "recibido"/finished, que comparte especificidad). La ruta se resalta un punto mas. */
.compact-service-table .compact-rated-row td {
  background: #f3eefc;
}
.compact-service-table .compact-rated-row td.col-route {
  background: #e7ddf7;
  color: #5a37a3;
  font-weight: 800;
}

/* Servicio SIN ASIGNAR: fila en rojo suave + barra izquierda roja, para avisar al operativo de que hay
   que asignarlo para poder cubrirlo. Prefijo #servicesList (id) para ganar al hover terracota de la vista
   compacta. "Sin asignar" nunca es cancelado (serviceIsUnassigned lo excluye), así que no colisiona. */
#servicesList .compact-service-table tbody tr.service-unassigned-row td { background: #fdeaea; }
#servicesList .compact-service-table tbody tr.service-unassigned-row:hover td { background: #fbdcdc; }
#servicesList .compact-service-table tbody tr.service-unassigned-row td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.compact-service-table .service-cancelled-row td {
  background: #ffecec;
  color: #9a3f3f;
}

.compact-service-table tbody tr.day-break-row td {
  border-top: 3px solid #000;
}

.compact-service-table tr.compact-filter-hidden {
  display: none;
}

/* Traffic workspace scroll containment */
body.traffic-fleet-summary-mode {
  overflow: hidden;
}

body.traffic-fleet-summary-mode .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  padding: 70px 10px 8px;
}

body.traffic-fleet-summary-mode .topbar {
  margin: 6px 0; /* mismo aire bajo el menú azul que el resto de secciones */
  position: static;
  z-index: 28;
}

body.traffic-fleet-summary-mode #planningView.active {
  display: block;
  min-height: 0;
  overflow: hidden;
}

body.traffic-fleet-summary-mode .work-grid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.traffic-fleet-summary-mode .service-editor-panel {
  position: static;
}

body.traffic-fleet-summary-mode .services-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.traffic-fleet-summary-mode .service-list.table-mode {
  height: 100%;
  max-height: none;
  overflow: auto;
}

/* ── Barra de disponibilidad de conductores ─────────────────────────── */

.driver-availability-bar {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

.avail-bar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.avail-bar-free {
  border-left-color: var(--green);
}

.avail-bar-head {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.avail-bar-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.avail-bar-count {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.avail-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.avail-bar-chip {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #dbe4ee;
  border-radius: 4px;
  color: var(--ink);
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}

.avail-bar-chip b {
  background: var(--primary-soft);
  border-radius: 3px;
  color: var(--primary-strong);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 4px;
}

.avail-bar-chip.load-overloaded {
  background: #fff6e0;
  border-color: #f0d080;
  color: #7a5500;
}

.avail-bar-chip.load-overloaded b {
  background: #fbeec0;
  color: #7a5500;
}

.avail-bar-chip.avail-more {
  background: #e9eef4;
  border-color: #c8d4e0;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 1500px) {
  .service-editor-panel .panel-head {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .traffic-filter-actions {
    justify-content: flex-start;
  }
}


/* ── Cuadrante Decathlon ───────────────────────────────────────────── */

.decathlon-schedule-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
/* Botones compactos: texto completo sin puntos suspensivos. */
.decathlon-schedule-toolbar > button { padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.decathlon-schedule-toolbar .dct-mode-toggle button { padding: 4px 10px; font-size: 12px; }
.decathlon-schedule-toolbar .dct-toolbar-right { margin-left: auto; }

.dct-week-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  min-width: 120px;
  text-align: center;
}

.dct-toolbar-sep {
  flex: 1;
}

.dct-import-dropzone {
  align-items: center;
  background: #f7fbff;
  border: 1px dashed #93b7d8;
  border-radius: var(--radius);
  color: var(--primary-strong);
  cursor: pointer;
  display: grid;
  gap: 4px;
  justify-items: center;
  margin-bottom: 10px;
  min-height: 70px;
  padding: 12px;
  text-align: center;
}

.dct-import-dropzone span {
  color: var(--muted);
  font-size: 12px;
}

.dct-import-dropzone.is-dragover {
  background: #e8f3ff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(38, 97, 140, 0.12);
}

.dct-grid-scroll {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--surface);
}

.dct-table {
  border-collapse: collapse;
  min-width: 800px;
  width: 100%;
}

.dct-th-driver,
.dct-td-driver {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  border-right: 2px solid var(--line-strong);
  font-size: 12px;
  font-weight: 700;
  min-width: 150px;
  padding: 8px 12px;
  position: sticky;
  left: 0;
  white-space: nowrap;
  z-index: 2;
}

.dct-th-driver {
  background: #e8f0f8;
  color: var(--primary-strong);
  font-size: 11px;
  text-transform: uppercase;
}

.dct-th-day {
  background: #e8f0f8;
  border-bottom: 2px solid var(--line-strong);
  color: var(--primary-strong);
  font-size: 11px;
  min-width: 120px;
  padding: 6px 8px;
  text-align: center;
  text-transform: uppercase;
}

.dct-th-day span {
  display: block;
  font-weight: 800;
}

.dct-th-day small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.dct-today-col {
  background: #fef9e7 !important;
  border-left: 2px solid #e6c84a;
  border-right: 2px solid #e6c84a;
}

.dct-td-cell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 5px 6px;
  text-align: center;
  vertical-align: middle;
}

.dct-free {
  background: #fafbfc;
}

.dct-task-badge {
  border-radius: 5px;
  display: inline-grid;
  gap: 1px;
  font-size: 11px;
  padding: 4px 7px;
  text-align: left;
  width: 100%;
}

.dct-task-badge b {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.dct-task-badge small {
  color: inherit;
  font-size: 10px;
  opacity: 0.8;
}

/* Colores por tipo de tarea */
.dct-lanzadera {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.dct-lanzadera6 {
  background: #e0e7ff;
  border: 1px solid #a5b4fc;
  color: #3730a3;
}

.dct-ecommerce {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

.dct-dehesa {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.dct-nocturno {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
}

.dct-viajes {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
}

.dct-other {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
}

.dct-rest {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
}

.dct-free-dot {
  color: var(--muted);
  font-size: 11px;
}

.dct-empty {
  min-height: 200px;
  font-size: 14px;
  line-height: 1.6;
}

/* ── Campo conductor inteligente ─────────────────────────────────────── */

.conductor-assign-wrap {
  display: grid;
  gap: 6px;
}

.conductor-assign-wrap [name="driver_name"] {
  width: 100%;
}

.conductor-assign-buttons {
  display: flex;
  gap: 6px;
}

.conductor-assign-buttons button {
  flex: 1;
  font-size: 12px;
  min-height: 30px;
  padding: 5px 8px;
}

.active-assign-btn {
  background: var(--primary) !important;
  border-color: var(--primary-strong) !important;
  color: #fff !important;
}

.external-fields {
  display: grid;
  gap: 6px;
}

.conductor-assign-wrap.is-external [name="driver_name"] {
  display: none;
}

/* ── Badge EXT en tabla de servicios ─────────────────────────────────── */

.ext-badge {
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: 3px;
  color: #e65100;
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  margin-right: 3px;
  padding: 2px 4px;
  text-transform: uppercase;
  vertical-align: middle;
}

.ext-order-btn {
  background: #fff3e0 !important;
  border-color: #ffb74d !important;
  color: #e65100 !important;
  font-weight: 700;
}

.ext-order-btn:hover {
  background: #ffe0b2 !important;
}

.external-driver-cell {
  align-items: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.2;
}

.external-driver-cell .ext-order-btn {
  font-size: 10px;
  min-height: 22px;
  padding: 3px 8px;
  white-space: nowrap;
}

.external-driver-cell .ext-order-btn.sent {
  background: #e7f8ef !important;
  border-color: #8fd6ad !important;
  color: #087443 !important;
}

/* ── Panel de orden de carga ─────────────────────────────────────────── */

.external-order-card {
  height: auto;
  max-height: calc(100vh - 48px);
  max-width: 860px;
  overflow: auto;
  resize: both;
  width: min(860px, calc(100vw - 40px));
}

.external-order-card .service-edit-body {
  flex: 0 0 auto;
  overflow: visible;
}

.order-preview-document {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #111827;
  font-family: 'Geist', "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 420px;
  padding: 18px 20px;
  white-space: pre-wrap;
}

.order-preview-document:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(13, 66, 107, 0.12);
  outline: none;
}

.order-header-strip {
  background: var(--nav);
  border-radius: 6px;
  padding: 14px 18px;
}

.order-header-logo {
  align-items: center;
  display: flex;
  gap: 14px;
}

.order-logo-dlt {
  background: #fff;
  border-radius: 6px;
  color: var(--primary);
  font-size: 20px;
  font-weight: 900;
  height: 48px;
  letter-spacing: 1px;
  line-height: 48px;
  min-width: 60px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.order-logo-dlt::before {
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
}

.order-header-logo strong {
  color: #fff;
  display: block;
  font-size: 15px;
}

.order-header-logo small {
  color: #8fa8c4;
  font-size: 11px;
}

.order-meta-grid {
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.order-meta-item {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 8px 12px;
}

.order-meta-item:nth-child(even) {
  border-right: 0;
}

.order-meta-wide {
  grid-column: span 1;
}

.order-meta-full {
  border-right: 0;
  grid-column: span 2;
}

.order-meta-price {
  border-bottom: 0;
  grid-column: span 2;
}

.order-meta-item span {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.order-meta-item strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
}

.order-meta-item small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  margin-top: 2px;
}

.order-price {
  color: var(--primary) !important;
  font-size: 20px !important;
}

.order-conditions {
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.order-conditions summary {
  color: var(--primary-strong);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: 8px 12px;
}

.order-conditions summary::-webkit-details-marker { display: none; }

.order-conditions-list {
  border-top: 1px solid var(--line);
  color: #334155;
  line-height: 1.55;
  margin: 0;
  padding: 10px 10px 10px 28px;
}

.order-conditions-list li {
  margin-bottom: 4px;
}

.order-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.order-raw-textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #334155;
  font-family: 'Geist', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  min-height: 180px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

/* ================================================================
   VISTA DE ADMINISTRACION - Clientes y Proveedores
   ================================================================ */

.admin-tabs-bar {
  border-bottom: 2px solid var(--line);
  display: flex;
  gap: 0;
  margin-bottom: 20px;
}

.admin-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: -2px;
  padding: 10px 20px;
  transition: color 0.15s, border-color 0.15s;
}
.admin-tab-btn:hover { color: var(--text); }
.admin-tab-btn.active { border-bottom-color: var(--primary); color: var(--primary); }

.admin-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-search { flex: 1 1 220px; min-width: 180px; }
.admin-filter-select { min-width: 160px; }
.admin-filter-check {
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 6px;
  white-space: nowrap;
}
.admin-toolbar-actions { display: flex; gap: 8px; margin-left: auto; }

.admin-stats {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.admin-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
}

.admin-table {
  border-collapse: collapse;
  font-size: 13px;
  min-width: 700px;
  width: 100%;
}
.admin-table thead th {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 9px 12px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-table tbody td {
  border-bottom: 1px solid var(--line);
  max-width: 220px;
  overflow: hidden;
  padding: 9px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: #f8fafc; }

.admin-table tbody tr[data-admin-customer-id],
.admin-table tbody tr[data-admin-provider-id] { cursor: pointer; }

.customer-row-card {
  cursor: pointer;
}

#customersView { position: relative; overflow: hidden; }
#customersView.active { display: flex; flex-direction: column; }
.customers-view-shell,
.customers-main-panel {
  min-height: 0;
  position: relative;
}
.customers-view-shell { flex: 1; }
.customers-main-panel {
  height: 100%;
  overflow: hidden;
}
#customersTab .list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
#customersTab .list-toolbar input[data-list-filter="customers"] {
  flex: 1 1 260px;
  min-width: 220px;
}
#customersTab .list-toolbar select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
}
#customersTab .list-toolbar .admin-filter-check {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 8px;
}
#customersTab .list-toolbar button {
  flex: 0 0 auto;
  min-height: 34px;
}
#customersList {
  padding: 4px 0;
}
.customer-list-line {
  grid-template-columns: minmax(260px, 2fr) 64px 100px minmax(170px, 1fr) auto;
}
/* La ficha se gestiona con el pop up; se retiran los paneles laterales en ambas
   secciones (clic simple solo selecciona; doble clic / botón Ficha = pop up). */
#customerDetail { display: none !important; }
#providerDetailPanel { display: none !important; }
#customerDetail {
  position: fixed;
  top: 104px;
  right: 14px;
  bottom: 14px;
  width: min(480px, 90vw);
  background: var(--bg, #fff);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 10;
  box-shadow: -4px 0 20px rgba(0,0,0,.08);
  display: block;
}
#customerDetail[aria-hidden="true"] {
  pointer-events: none;
}
#customerDetail[aria-hidden="false"] {
  transform: translateX(0);
  pointer-events: auto;
}
.compact-link-button {
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: inherit;
  display: inline-flex;
  font-size: 12px;
  padding: 4px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.customer-full-page {
  background: var(--bg);
  color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECCIÓN DE PROVEEDORES
   ══════════════════════════════════════════════════════════════════════════════ */

.providers-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin: 10px 14px 8px;
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.providers-search {
  flex: 1 1 260px;
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
/* Neutraliza el width:100% global de los select para que queden compactos en
   línea (mismo criterio que la barra de Clientes). */
.providers-toolbar .admin-filter-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 150px;
}
.providers-toolbar .admin-filter-check { flex: 0 0 auto; }
.providers-toolbar button,
.providers-toolbar a.button { flex: 0 0 auto; }
.providers-stats-bar {
  display: flex;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.stat-chip {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--bg-secondary, #f5f5f5);
  color: var(--text-secondary, #666);
}
.stat-chip-green { background: #e6f4ea; color: #1a6630; }

/* Providers list — card/grid style (matches vehicle list) */
#providersListWrap { padding: 4px 0; }
.provider-row-card {
  cursor: pointer;
  padding: 7px 10px;
  transition: box-shadow .12s;
}
.provider-row-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.provider-row-card.selected { background: #eaf2ff; border-color: #b8d4f8; }
.provider-row-inactive { opacity: .6; }
.provider-list-line {
  display: grid;
  align-items: center;
  gap: 10px;
  /* Nombre flexible (peso 2): aprovecha el espacio libre del medio y evita que
     los nombres queden cortados. Descripción con peso 1. */
  grid-template-columns: minmax(260px, 2fr) 64px 100px minmax(170px, 1fr) auto;
  min-height: 34px;
}
.provider-name-cell {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Nombre comercial dentro de la celda del nombre ("Toti" junto a la razón social). No es un hijo más
   de la rejilla: iría a su propia columna y descolocaría la fila entera. */
.provider-comname {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-strong, #2563eb);
  margin-left: 6px;
}
.provider-comname::before { content: "· "; color: #bbb; font-weight: 400; }
.provider-type-badge { justify-self: start; }
.provider-line-description {
  font-size: 12px;
  color: var(--text-secondary, #666);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-line-actions { justify-self: end; display: flex; gap: 4px; align-items: center; }

/* Panel de detalle de proveedor */
#providersView { flex-direction: column; position: relative; overflow: hidden; }
#providersView.active { display: flex; }
#providersContent { flex: 1; overflow-y: auto; }
#providerDetailPanel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 90vw);
  background: var(--bg, #fff);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 10;
  box-shadow: -4px 0 20px rgba(0,0,0,.08);
}
#providerDetailPanel[aria-hidden="false"] { transform: translateX(0); }

.provider-panel-inner { display: flex; flex-direction: column; height: 100%; }
.provider-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg, #fff);
  z-index: 1;
}
.provider-panel-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.provider-panel-meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.provider-panel-head-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.provider-panel-body { padding: 0 0 24px; }
.provider-alert-bar {
  background: #fff3cd;
  border-bottom: 1px solid #f0c040;
  padding: 8px 16px;
  font-size: 12px;
  color: #7a5c00;
}
.provider-section {
  padding: 14px 16px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}
.provider-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary, #888);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.provider-fields-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 4px;
}
.provider-field { display: flex; flex-direction: column; min-width: 120px; max-width: 100%; }
.provider-field-label { font-size: 11px; color: var(--text-secondary, #888); margin-bottom: 1px; }
.provider-field-value { font-size: 13px; }

.provider-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.provider-subtable th {
  text-align: left;
  padding: 4px 8px;
  background: var(--bg-secondary, #f5f5f5);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-secondary, #666);
  font-size: 11px;
}
.provider-subtable td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.provider-subtable tr:last-child td { border-bottom: none; }

/* Modal de edición de proveedor — ocupa más pantalla */
.provider-edit-form.traffic-popup-card {
  min-height: min(680px, 80vh);
  /* No pasar nunca del alto de pantalla: si el jefe agranda el popup, el modal se
     queda dentro del viewport y el cuerpo hace scroll (no se pierde el botón Guardar
     ni las últimas filas de conductores por debajo del borde). */
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.provider-edit-form .field-edit-body {
  flex: 1;
  min-height: 0; /* imprescindible en flexbox para que overflow:auto realmente scrollee */
  overflow-y: auto;
  /* BUG del scroll (jul-2026): .field-edit-body es un grid; con altura DEFINIDA (flex:1 dentro
     del form) repartía sus filas a PARTES IGUALES (grid-template-rows salía "71 217 217") y, como
     .pvb-section lleva overflow:hidden (→ su min-height:auto se resuelve a 0), COMPRIMÍA la sección
     de Administración a ~206px RECORTANDO sus campos (Método de pago/IBAN) sin dejar scroll. Fix:
     que cada fila mida su contenido y sea el CUERPO el que desborde y scrollee. */
  grid-auto-rows: max-content;
  align-content: start;
}
/* Barra de scroll SIEMPRE visible y agarrable en la ficha de proveedor (pedido del
   jefe: "una barra de scroll lateral para navegar la ficha"). El cuerpo es el único
   scroller; se marca con color de marca para que se vea sin dudar. */
.provider-edit-form .field-edit-body {
  scrollbar-width: thin;
  scrollbar-color: var(--nav, #64748b) rgba(15, 23, 42, 0.08);
}
.provider-edit-form .field-edit-body::-webkit-scrollbar { width: 12px; }
.provider-edit-form .field-edit-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.06);
  border-radius: 8px;
}
.provider-edit-form .field-edit-body::-webkit-scrollbar-thumb {
  background: var(--nav, #94a3b8);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.provider-edit-form .field-edit-body::-webkit-scrollbar-thumb:hover {
  background: var(--nav-strong, var(--primary, #475569));
}
/* En 3 columnas, algunos campos deben seguir ocupando todo el ancho */
.provider-edit-form .field-edit-body label[style*="grid-column:1/-1"],
.provider-edit-form .field-edit-body div[style*="grid-column:1/-1"] {
  grid-column: 1 / -1;
}

.ticket-drop-zone.drag-over { border-color: var(--accent, #1a6de0); background: #eaf2ff; }
.ticket-drop-zone.scanning { opacity: .7; pointer-events: none; }

/* ── Órdenes tipo: tabs y lista de plantillas ──────────────────────── */
.ext-tab-bar {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 12px;
}
.ext-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 6px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color .15s, border-color .15s;
}
.ext-tab:hover { color: var(--accent); }
.ext-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tpl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 10px;
}
.tpl-count { font-size: 0.82rem; color: var(--muted); flex: 1; }

.tpl-list {
  padding: 0 0 16px;
}
.tpl-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.tpl-row:hover { background: var(--hover, rgba(0,0,0,.03)); }
/* En la tabla de Ordenes tipo, las filas son filas de tabla (no tarjeta grid) */
.admin-table tr.tpl-row { display: table-row; grid-template-columns: none; gap: 0; padding: 0; }
.admin-table tr.tpl-row > td { display: table-cell; vertical-align: middle; }
.tpl-icon { font-size: 1.1rem; text-align: center; }
.tpl-info { min-width: 0; }
.tpl-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-meta { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.tpl-notes { font-size: 0.77rem; color: var(--muted); margin-top: 2px; font-style: italic; }
.tpl-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.tpl-dl-link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 5px; font-size: 0.78rem;
  text-decoration: none; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  cursor: pointer;
}
.tpl-dl-link:hover { border-color: var(--accent); color: var(--accent); }
.tpl-empty { padding: 24px 16px; color: var(--muted); font-size: 0.88rem; text-align: center; }

.tpl-upload-form {
  margin: 0 12px 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpl-upload-title { margin: 0 0 4px; font-size: 0.9rem; font-weight: 700; }
.tpl-field-label { font-size: 0.75rem; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tpl-field-input {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 9px; font-size: 0.85rem; background: var(--bg); color: var(--text);
  width: 100%; box-sizing: border-box;
}
/* .tpl-dropzone reutiliza .ticket-drop-zone — sin estilos propios */
.tpl-file-name { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.tpl-upload-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }

/* ── Visor de plantilla — popup flotante tipo folio ─────────────── */
.tpl-folio-card {
  /* Proporciones A4: 210×297 → ~700×990px */
  width: min(700px, 96vw);
  height: min(92vh, 990px);
  min-width: 360px;
  min-height: 280px;
  max-width: min(1200px, 97vw);
  max-height: min(1400px, 97vh);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(16,24,40,0.16), 0 0 0 1px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  box-sizing: border-box;
}
.tpl-order-folio {
  /* Proporciones A4: 210×297mm — ancho ~760px, alto ~1060px */
  width: min(760px, 98vw);
  height: min(96vh, 1060px);
  min-width: 420px;
  min-height: 360px;
  max-width: min(1200px, 98vw);
  max-height: min(1400px, 97vh);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(16,24,40,0.16), 0 0 0 1px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  box-sizing: border-box;
}
/* Cuerpo scrollable del folio — fondo gris como lector PDF */
.tpl-folio-doc-body {
  flex: 1;
  overflow-y: auto;
  background: #e8eaed;
  padding: 20px;
}
/* Hoja A4 renderizada (mammoth) */
.tpl-docx-a4 {
  background: #fff;
  margin: 0 auto;
  max-width: 680px;
  min-height: 200px;
  padding: 36px 44px;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,.14);
  font-family: "Calibri", "Arial", sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #111;
}
.tpl-docx-a4 img { max-width: 100%; max-height: 180px; height: auto; display: block; object-fit: contain; }
.tpl-docx-a4 table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 0.82rem; }
.tpl-docx-a4 td, .tpl-docx-a4 th { border: 1px solid #ccc; padding: 4px 8px; vertical-align: top; }
.tpl-docx-a4 strong, .tpl-docx-a4 b { font-weight: 700; }
.tpl-docx-a4 p { margin: 4px 0; }
.tpl-docx-a4 h1 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 4px; }
.tpl-docx-a4 h2 { font-size: 0.95rem; font-weight: 700; margin: 10px 0 3px; }
/* Footer con email y botones de envío */
.tpl-folio-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.tpl-folio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.tpl-folio-title {
  font-weight: 700;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.tpl-folio-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.tpl-folio-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  background: #f0f0f0;
}

/* Documento DOCX renderizado — simula hoja A4 */
.tpl-docx-render {
  background: #fff;
  margin: 0 auto;
  max-width: 680px;
  padding: 32px 40px;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  font-family: "Calibri", "Arial", sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #111;
}
.tpl-docx-render img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.tpl-docx-render table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.82rem;
}
.tpl-docx-render td, .tpl-docx-render th {
  border: 1px solid #ccc;
  padding: 4px 8px;
  vertical-align: top;
}
.tpl-docx-render h1 { font-size: 1.05rem; font-weight: 700; margin: 14px 0 4px; }
.tpl-docx-render h2 { font-size: 0.95rem; font-weight: 700; margin: 10px 0 3px; }
.tpl-docx-render p  { margin: 4px 0; }
.tpl-loading { padding: 40px; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* ── Flujo de envío de orden con plantilla ───────────────────────────────── */
.tpl-send-card {
  /* attachment-card provee bg, borde y sombra */
  display: flex;
  flex-direction: column;
}
.tpl-send-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.tpl-send-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.tpl-send-section:last-child { border-bottom: none; }
.tpl-send-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: 8px;
}

/* Selector de plantilla */
.tpl-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tpl-picker-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tpl-picker-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.tpl-picker-card input[type="radio"] { accent-color: var(--accent); }
.tpl-picker-icon { font-size: 1.2rem; flex-shrink: 0; }
.tpl-picker-info { display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.tpl-picker-info strong { font-weight: 600; }
.tpl-no-templates {
  font-size: 0.83rem;
  color: var(--muted);
  padding: 6px 0;
}
.tpl-no-templates a { color: var(--accent); }

/* Grid de datos del servicio */
.tpl-send-data-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 3px 10px;
  font-size: 0.82rem;
}
.tpl-data-key { color: var(--muted); font-weight: 600; }
.tpl-data-val { color: var(--text); }

/* Aviso email faltante */
.tpl-email-warn {
  font-size: 0.78rem;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 7px;
}

/* Referencia de tokens */
.tpl-tokens-ref {
  margin: 10px 16px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.tpl-tokens-ref summary {
  padding: 9px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  background: var(--bg);
  user-select: none;
}
.tpl-tokens-ref summary:hover { color: var(--accent); }
.tpl-tokens-ref[open] summary { border-bottom: 1px solid var(--border); }
.tpl-tokens-table { padding: 10px 14px 14px; }
.tpl-tokens-intro { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.tpl-tokens-table code {
  font-family: monospace;
  font-size: 0.8rem;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ── Fault image lightbox ──────────────────────────────────────────────── */
.fault-lb-overlay {
  align-items: center;
  background: rgba(8, 12, 20, 0.92);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  gap: 0;
}
.fault-lb-img-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 90vh;
  max-width: calc(100vw - 120px);
}
.fault-lb-img {
  border-radius: 6px;
  max-height: 85vh;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 0 8px 28px rgba(16,24,40,0.18);
}
.fault-lb-counter {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.fault-lb-prev,
.fault-lb-next {
  align-items: center;
  background: rgba(255,255,255,0.10);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 32px;
  height: 52px;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
  width: 52px;
  flex-shrink: 0;
  margin: 0 10px;
}
.fault-lb-prev:hover,
.fault-lb-next:hover {
  background: rgba(255,255,255,0.22);
}
.fault-lb-close {
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  height: 36px;
  line-height: 1;
  position: fixed;
  right: 18px;
  top: 18px;
  width: 36px;
  transition: background 0.15s;
}
.fault-lb-close:hover { background: rgba(255,255,255,0.25); }



/* =====================================================================
   LISTADOS — Vista completa (ls-* namespace)
   2026-06-10 v2 — alineado con el sistema de diseño del proyecto
   ===================================================================== */

#listingsView {
  flex-direction: column;
}
#listingsView.active {
  display: flex;
}

/* ── Nav de secciones (tabs superiores) ── */
.ls-nav {
  display: flex;
  gap: 2px;
  padding: 12px 20px 0;
  border-bottom: 2px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.ls-nav-btn {
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 4px 4px 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.ls-nav-btn:hover { color: var(--primary); background: var(--primary-soft); }
.ls-nav-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--primary-soft);
}

/* ── Panel de cada sección ── */
.ls-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.ls-panel.active { display: flex; }
#listingsView .ls-panel { display: none !important; }
#listingsView .ls-panel.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* ── Toolbar de filtros ── */
.ls-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  overflow-x: auto;
  align-self: flex-start;
  width: fit-content;
  min-width: 100%;
}
.ls-search {
  flex: 0 0 180px;
  min-width: 120px;
  max-width: 200px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ls-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,55,88,0.12);
  background: var(--surface);
}
.ls-select {
  height: 28px;
  max-width: 240px; /* sin tope se comía todo el ancho de la barra */
  min-width: 170px; /* y sin suelo colapsaba hasta quedarse en solo la flecha */
  padding: 0 24px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23607088'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s;
}
.ls-select:focus { border-color: var(--primary); }
.ls-toolbar-group { display: flex; align-items: center; gap: 6px; }
.ls-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ls-date {
  height: 28px;
  width: 118px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s;
}
.ls-date:focus { border-color: var(--primary); }
/* Acciones (exports/imports) empujadas a la derecha: separa los dos grupos lógicos de la barra
   (filtros a la izquierda · acciones de datos a la derecha). */
.ls-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ls-count-inline {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.ls-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px; /* misma altura que el resto de controles de esta barra compacta (selects/fechas) */
  padding: 0 14px;
  background: var(--primary) !important;
  color: #fff !important;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  height: 28px;
  padding: 0 12px;
  transition: background 0.15s, transform 0.1s;
}
.ls-export-btn:hover { background: var(--primary-strong)!important; color: #fff!important; transform: translateY(-1px); }
.ls-export-btn:active { transform: translateY(0); }
/* Los <button> de la barra heredan un min-height 34px de una regla genérica: igualarlos a los 28px
   de esta barra compacta (con id para ganar en especificidad). */
#listingsView .ls-export-btn { height: 28px; min-height: 28px; }
/* Variante neutra: mismo tamaño/forma que el primario, sin su color (NetOffice, Importar Laso...).
   Jerarquía por color, no por tamaño: la acción principal (Exportar Excel) es la única primaria. */
.ls-export-btn.secondary { background: #eef2f6 !important; color: var(--ink) !important; border: 1px solid var(--line-strong); }
.ls-export-btn.secondary:hover { background: #e5ebf2 !important; color: var(--ink) !important; }

/* ── Tabla de resultados — reutiliza .admin-table con overrides ── */
#listingsView .admin-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 178px);
  border: none;
  border-radius: 0;
  margin: 0;
}
#listingsView .admin-table-wrap p {
  padding: 32px 20px;
  color: var(--muted);
  font-size: 14px;
}
#listingsView .admin-table { min-width: 600px; }
#listingsView .admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
}
#listingsView .admin-table tbody tr { cursor: default; }
#listingsView .admin-table tbody td { max-width: 320px; }

/* ── Badges de estado en servicios ── */
.ls-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ls-badge-pending   { background: #fff3cd; color: #856404; }
.ls-badge-assigned  { background: #cfe2ff; color: #0a4b8a; }
.ls-badge-in_progress { background: #d1e7dd; color: #0f5132; }
.ls-badge-completed { background: #d1e7dd; color: #0f5132; }
.ls-badge-incident  { background: #f8d7da; color: #842029; }
.ls-badge-cancelled { background: #e2e3e5; color: #41464b; }
.ls-badge-tasado    { background: #e3d8f6; color: #5a37a3; }
.status-tasado      { background: #e3d8f6; color: #5a37a3; }
/* "Sin asignar" (derivado de "sin conductor"): tono ámbar de aviso, coherente con la fila resaltada. */
.ls-badge-sin_asignar { background: #fde8cf; color: #9a3412; }
.status-sin_asignar   { background: #fde8cf; color: #9a3412; }
.pill.sin_asignar     { background: #fde8cf; color: #9a3412; }

/* Búsqueda dentro de popover de filtro compacto */
.compact-filter-search-wrap {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.compact-filter-search-input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.compact-filter-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(26,55,88,0.15);
  background: var(--surface);
}

/* Filas ocultas por búsqueda de texto en filtro compacto */
.compact-service-table tbody tr.compact-search-hidden { display: none; }

/* Mismo filtrado por columna en la vista de gestión (tabla principal) */
.service-table tbody tr.compact-filter-hidden { display: none; }
.service-table tbody tr.compact-search-hidden { display: none; }

/* Checkbox "Seleccionar todo" en filtros compactos */
.compact-filter-select-all span { color: var(--ink); }
.compact-filter-separator {
  height: 1px;
  background: var(--line);
  margin: 2px 8px;
  flex-shrink: 0;
}

/* --- Compact filter Aceptar button --- */
.compact-filter-apply-row {
  padding: 8px 12px 12px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.compact-filter-apply-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 6px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.compact-filter-apply-btn:hover {
  opacity: 0.9;
}

/* ── Listados: tabla estilo compact view ── */

/* ── Listados: override compact-service-table para legibilidad ── */
.ls-service-table { min-width: 600px; font-size: 13px; line-height: 1.35; }
.ls-service-table th,
.ls-service-table td { text-align: left; padding: 3px 8px; height: auto; }
.ls-service-table th { text-transform: uppercase; letter-spacing: 0.04em; position: relative; overflow: visible; font-size: 11px; }
.ls-service-table td { color: var(--ink); background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.ls-service-table tbody tr:nth-child(even) td { background: #f6f9fc; }
.ls-service-table tbody tr:hover td { background: var(--primary-soft); }
.ls-service-table .column-drag-label { font-weight: 800; color: var(--primary-strong, #1e3a5f); text-transform: uppercase; letter-spacing: 0.04em; }
/* ls-tab-newwin: flecha abrir nueva pestana */
.ls-nav-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.ls-tab-newwin { font-size: 9px; color: rgba(255,255,255,0.55); line-height: 1; padding: 1px 2px; border-radius: 2px; cursor: pointer; flex-shrink: 0; }
.ls-tab-newwin:hover { color: #fff; background: rgba(255,255,255,0.18); }
.ls-nav-btn.active .ls-tab-newwin { color: rgba(255,255,255,0.75); }

/* Listados: garantia de layout horizontal toolbar - alta especificidad */
#listingsView .ls-panel.active > .ls-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
/* ===== Justificacion de columnas en trafico diario =====
   Centradas todas menos Cliente, Trayecto, Observaciones, Incidencias y Acciones */
.service-table td.col-service_date_2, .service-table th.col-service_date_2,
.service-table td.col-delivery_note, .service-table th.col-delivery_note,
.service-table td.col-loading_at, .service-table th.col-loading_at,
.service-table td.col-unloading_at, .service-table th.col-unloading_at,
.service-table td.col-driver_name, .service-table th.col-driver_name,
.service-table td.col-vehicle_plate, .service-table th.col-vehicle_plate,
.service-table td.col-trailer_plate, .service-table th.col-trailer_plate,
.service-table td.col-departure_info, .service-table th.col-departure_info,
.service-table td.col-stoppage, .service-table th.col-stoppage,
.service-table td.col-cost_price, .service-table th.col-cost_price,
.service-table td.col-sale_price, .service-table th.col-sale_price {
  text-align: center;
}
/* Excepciones explicitas: a la izquierda */
.service-table td.col-customer_name, .service-table th.col-customer_name,
.service-table td.col-route, .service-table th.col-route,
.service-table td.col-notes, .service-table th.col-notes,
.service-table td.col-incidents, .service-table th.col-incidents,
.service-table td.col-incident_type_notes, .service-table th.col-incident_type_notes {
  text-align: left;
}
/* Centrar tambien el contenido editable (hotspots) de las columnas centradas */
.service-table td.col-service_date_2 .field-edit-hotspot,
.service-table td.col-loading_at .service-time-cell,
.service-table td.col-unloading_at .service-time-cell,
.service-table td.col-driver_name .field-edit-hotspot,
.service-table td.col-vehicle_plate .field-edit-hotspot,
.service-table td.col-trailer_plate .field-edit-hotspot,
.service-table td.col-departure_info .field-edit-hotspot,
.service-table td.col-stoppage .field-edit-hotspot,
.service-table td.col-cost_price .field-edit-hotspot,
.service-table td.col-sale_price .field-edit-hotspot,
.service-table td.col-delivery_note .field-edit-hotspot {
  justify-content: center;
}

/* Botones "Enviar orden" + "Datos" en la misma fila (celda conductor externo) */
.external-driver-cell .ext-btn-row { display: flex; gap: 4px; align-items: center; }

/* ===== Popup Cancelar viaje (reorganizado) ===== */
#serviceCancelPanel .cancel-intro { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
#serviceCancelPanel .cancel-reason { display: block; margin-bottom: 10px; }
#serviceCancelPanel .cancel-money-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
#serviceCancelPanel .cancel-money-block {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface-soft);
}
#serviceCancelPanel .cancel-money-block .check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  order: -1;
}
#serviceCancelPanel .cancel-money-block .check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 0;
  min-height: 0;
  flex: 0 0 15px;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
  appearance: auto;
  -webkit-appearance: auto;
}
#serviceCancelPanel .cancel-amount { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
#serviceCancelPanel .cancel-actions { display: flex; gap: 8px; align-items: center; }
#serviceCancelPanel .cancel-actions .cancel-delete-btn { margin-left: auto; }

/* Importe de cancelacion desactivado cuando el check no esta marcado */
#serviceCancelPanel .cancel-amount input:disabled {
  opacity: 0.45;
  background: #eef2f6;
  cursor: not-allowed;
}

/* Boton Actualizar en los listados */
.ls-refresh-btn {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #eef2f6;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ls-refresh-btn:hover { background: #e2e8f0; }
.ls-refresh-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* Filas de listados: doble clic abre la ficha */
.ls-service-table tbody tr.ls-row-clickable { cursor: pointer; user-select: none; }
.ls-service-table tbody tr.ls-row-clickable:hover td { background: var(--primary-soft); }

/* Listas formateadas propias para sustituir los desplegables nativos del navegador */
.formatted-combo-input {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px !important;
}
.formatted-combo-panel {
  position: fixed;
  z-index: 100000;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}
.formatted-combo-panel[aria-hidden="false"] { display: block; }
.formatted-combo-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.formatted-combo-option:hover,
.formatted-combo-option:focus {
  background: var(--primary-soft);
  outline: none;
}
.formatted-combo-option strong {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ink);
}
.formatted-combo-option span {
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
}
.formatted-combo-empty {
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* Fechas de filtros de rango (todo el TMS): numero mas pequeno para que la fecha
   completa quepa dentro del recuadro y no se corte el ano. */
#serviceDate,
#serviceDateFrom,
#serviceDateTo,
#compactDateFrom,
#compactDateTo,
.compact-date-range-label input[type="date"],
.traffic-date-filter,
.ls-date {
  font-size: 10.5px;
}

/* Tarjeta de conductor: "telefono - carnet" y las etiquetas (tipo, operativa)
   en una sola linea, sin ocupar mas alto del necesario. Scopeado a driver-row-card. */
.driver-row-card .muted,
.driver-row-card .row-tags {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.driver-row-card .row-tags {
  margin-left: 12px;
  gap: 6px;
}

/* Tarjeta de conductor: nombre + datos + etiquetas TODO en una sola linea (sin botones). */
.driver-row-card .driver-row-oneline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.driver-row-card .driver-row-oneline .row-title { font-weight: 600; }
.driver-row-card .driver-row-oneline .muted,
.driver-row-card .driver-row-oneline .row-tags {
  display: inline-flex;
  align-items: center;
}
.driver-row-card .driver-row-oneline .row-tags { gap: 6px; margin-left: 0; }

/* Absentismos: conductor marcado como Inactivo en Conductores (master) -> fila medio sombreada. */
.vacation-grid tr.vacation-row-inactive td,
.vacation-grid tr.vacation-row-inactive th {
  background-image: linear-gradient(rgba(130, 130, 130, 0.16), rgba(130, 130, 130, 0.16));
}
.vacation-grid tr.vacation-row-inactive th.sticky-name,
.vacation-grid tr.vacation-row-inactive td.sticky-operation {
  color: var(--muted);
  font-style: italic;
}

/* Mapa real (Leaflet) de conductores */
.driver-map-real {
  flex: 1;
  min-width: 0;
  height: 560px;
  min-height: 380px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.driver-map-real .leaflet-container { width: 100%; height: 100%; font: inherit; }

/* ── Servicios recurrentes ─────────────────────────────────────────────── */
/* Fila carga/descarga acortada + dos botones al lado */
/* Toda la fila (carga/descarga + 2 botones) ocupa el ancho completo del form
   como hacia antes la datetime-fields, en una sola fila. */
#serviceForm .datetime-row-wrap {
  grid-column: 1 / 7;
}
.datetime-row-wrap {
  align-items: stretch;   /* los botones ocupan todo el alto de la fila carga/descarga */
  display: flex;
  gap: 8px;
}
.datetime-row-wrap .datetime-fields {
  flex: 1 1 auto;   /* carga/descarga se estiran */
  min-width: 0;
}
.svc-recurring-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;   /* los dos botones en la misma fila */
  gap: 6px;
}
.svc-recurring-actions button {
  font-size: 12px;
  min-height: 32px;      /* misma altura que los inputs de la fila */
  padding: 6px 12px;
  white-space: nowrap;
}

/* "Limpiar formulario" a la derecha de la fila de acciones */
#serviceForm .form-actions { grid-column: 1 / 7; }
#serviceForm .form-actions button { flex: 0 0 auto; }
#serviceForm #svcClearForm { margin-left: auto; }

/* Overlay y tarjeta de los modales de recurrentes */
.rec-overlay {
  align-items: flex-start;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  inset: 0;
  justify-content: center;
  overflow: auto;
  padding: 40px 16px;
  position: fixed;
  z-index: 60;
}
.rec-overlay.open { display: flex; }
.rec-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(820px, 96vw);
  width: 100%;
}
.rec-card .detail-head { align-items: flex-start; }
.pastemail-card .pastemail-text {
  width: 100%;
  min-height: 240px;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* MRW Planning: caja para pegar + previsualización de los servicios a crear */
.mrw-card { max-width: min(1180px, 97vw); }
.mrw-card .mrw-text {
  width: 100%;
  min-height: 230px;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: pre-wrap;     /* envuelve las líneas largas: sin barra de desplazamiento lateral */
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overflow-y: auto;
}
.mrw-preview { min-height: 40px; }
.mrw-prev-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.mrw-prev-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.mrw-prev-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mrw-prev-table th, .mrw-prev-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mrw-prev-table thead th { position: sticky; top: 0; background: #f3f6f9; font-weight: 700; }
.mrw-prev-table tbody tr:hover { background: #f6f9fc; }
.mrw-tag { background: #fff4e6; border: 1px solid #f3d2a6; border-radius: 5px; color: #b9701b; font-size: 10px; font-weight: 700; padding: 0 6px; margin-left: 4px; }
.mrw-warn { color: #b54708; font-weight: 700; }

/* Calendario multi-selección */
.rec-cal-nav {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.rec-cal-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.rec-cal-month { flex: 0 0 auto; width: 234px; }
.rec-cal-mtitle {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.rec-cal-mini-actions { display: flex; gap: 4px; }
.rec-mini {
  background: #eef3f7;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  min-height: 0;
  padding: 2px 7px;
}
.rec-cal-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
}
.rec-cal-dow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.rec-cal-empty { aspect-ratio: 1; }
.rec-cal-day {
  aspect-ratio: 1;
  background: #f6f9fc;
  border: 1px solid #e0e7ef;
  border-radius: 5px;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  min-height: 0;
  padding: 0;
}
.rec-cal-day:hover { background: #e7edf4; }
.rec-cal-day.is-sel {
  background: var(--primary, #28587b);
  border-color: var(--primary, #28587b);
  color: #fff;
  font-weight: 800;
}
/* Calendario de JORNADAS de Verallia (reutiliza .rec-cal-*): enlace "Jornadas", atajos y tono de finde */
.vb-jornadas-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary, #28587b); text-decoration: underline dotted; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.vb-jornadas-link:hover { text-decoration: underline; }
.vb-jornadas-link svg { opacity: .7; }
.vbj-quick { display: flex; align-items: center; gap: 6px; margin: 2px 0 10px; flex-wrap: wrap; font-size: .82rem; }
.rec-cal-day.vbj-wknd { background: #fdf3e7; border-color: #f2dcc0; }
.rec-cal-day.vbj-wknd.is-sel { background: var(--primary, #28587b); border-color: var(--primary, #28587b); }
/* Editor de TRAMOS manuales de Verallia */
.vb-manualbadge { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9a3412; background: #ffedd5; border: 1px solid #fed7aa; border-radius: 4px; padding: 1px 6px; }
.vble-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.vble-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--border, #e5e7eb); white-space: nowrap; }
.vble-table td { padding: 3px 6px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
.vble-f { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: .82rem; }
/* El popup arranca ancho de verdad: las clases base (.attachment-card/.rec-card) capan a ~820px
   con su max-width; con id+clase lo forzamos para que quepan todas las columnas sin scroll. */
#vblePanel .vble-card { max-width: min(1200px, 98vw); width: min(1200px, 98vw); }
/* Anchos mínimos por columna para que los campos se lean completos (matrícula, conductor, fecha, ruta, tipo). */
.vble-f[data-f="date"] { min-width: 132px; }
.vble-f[data-f="plate"] { min-width: 104px; }
.vble-f[data-f="driver"] { min-width: 146px; }
.vble-type { min-width: 92px; }
.vble-route { min-width: 320px; }
.vble-route .vble-place { width: calc(50% - 16px); min-width: 138px; display: inline-block; }
.vble-km { width: 72px; }
.vble-act { white-space: nowrap; }
.vble-act .mini-action { padding: 2px 6px; }
.vble-act .mini-action.danger { color: var(--danger, #b00); font-weight: 700; }
/* Editor inline dentro del panel Detalle */
.vb-detail-edit .vble-host { overflow-x: auto; }
.vb-detail-edithint { margin: 6px 2px 10px; font-size: .74rem; line-height: 1.4; }
.vb-det-insert { font-size: 11px; }
.rec-foot {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  padding-top: 10px;
}

/* Listado de recurrentes */
.rec-list-card { max-width: min(1160px, 98vw); }
.rec-client-layout {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  min-height: min(560px, 70vh);
}
.rec-client-panel,
.rec-service-panel {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 7px;
  min-width: 0;
}
.rec-client-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rec-panel-title {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding: 9px 10px;
  text-transform: uppercase;
}
.rec-client-list {
  display: grid;
  gap: 5px;
  overflow: auto;
  padding: 8px;
}
.rec-client-item {
  align-items: start;
  background: #fff;
  border: 1px solid #d8e2ec;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 0;
  padding: 8px 9px;
  text-align: left;
}
.rec-client-item:hover { background: #eef3f7; }
.rec-client-item.is-active {
  background: #eaf2fb;
  border-color: #9fc3e6;
  box-shadow: inset 3px 0 0 var(--primary, #28587b);
}
.rec-client-name {
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-client-meta {
  color: #9a531c;
  font-size: 11px;
  font-weight: 800;
}
.rec-client-preview {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-service-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.rec-service-head {
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 12px;
}
.rec-service-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rec-service-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.rec-service-head strong {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-service-head small {
  color: var(--muted);
  font-size: 12px;
}
.rec-service-head button {
  flex: 0 0 auto;
  font-size: 12px;
  min-height: 30px;
  padding: 6px 10px;
  white-space: nowrap;
}
.rec-list {
  align-content: start;
  display: grid;
  gap: 6px;
  max-height: 60vh;
  overflow: auto;
  padding: 8px;
}
.rec-empty {
  color: var(--muted);
  margin: 0;
  padding: 24px;
  text-align: center;
}
.rec-row {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 42px;
  overflow: hidden;
  padding: 6px 8px;
}
.rec-row:hover { background: #eef3f7; }
.rec-row-main {
  align-items: start;
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.rec-row-main strong {
  font-size: 14px;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.22;
  max-height: 2.44em;
  white-space: normal;
}
.rec-albaran {
  background: #eef3f7;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--primary, #28587b);
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
  padding: 1px 7px;
}
.rec-name {
  background: var(--primary, #28587b);
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
  padding: 1px 8px;
}
.rec-stops {
  background: #fff4e6;
  border: 1px solid #f3d2a6;
  border-radius: 5px;
  color: #b9701b;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}
.rec-row-main > span {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-row-actions { display: flex; flex-shrink: 0; gap: 6px; }
.rec-row-actions button { font-size: 12px; min-height: 30px; padding: 5px 10px; white-space: nowrap; }

@media (max-width: 760px) {
  .rec-client-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .rec-client-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 76vw);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rec-service-head {
    align-items: stretch;
    flex-direction: column;
  }
  .rec-service-head button {
    width: 100%;
  }
  .rec-row {
    align-items: stretch;
    flex-direction: column;
  }
  .rec-row-main {
    align-items: start;
    display: grid;
    gap: 2px;
  }
  .rec-row-main strong,
  .rec-row-main > .muted {
    min-width: 0;
  }
  .rec-row-actions {
    justify-content: flex-start;
  }
}

/* Edición / diálogos */
.rec-edit-card { max-width: min(680px, 96vw); }
.rec-edit-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rec-fld { display: grid; gap: 3px; }
.rec-fld span { color: var(--muted); font-size: 12px; font-weight: 700; }
.rec-edit-grid .rec-fld-wide { grid-column: 1 / -1; }
.rec-name-row { margin: 4px 0 6px; }
.rec-name-row .rec-fld input { width: 100%; box-sizing: border-box; }
/* TRAYECTO del editor de plantilla — MISMA forma que la ficha de servicio de Tráfico diario (28-07-2026):
   dos columnas enmarcadas (Cargas / Descargas) con las paradas JUNTAS y en orden. La parada 1 es el punto
   principal; las siguientes llevan además su día respecto a la carga. La numeración la pone un CONTADOR
   de CSS, así que al añadir o quitar una parada se renumera sola (sin tocar JS). */
.rec-route-head { margin: 12px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary-strong, #8a5a2b); }
.rec-route-head small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.rec-route { display: grid; gap: 10px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* LA GEMELA de la ficha de servicio: mismo blindaje contra desbordes. La pista interior tiene que poder
   encogerse (`minmax(0,1fr)`) o la fila de la parada se planta en su ancho maximo y se sale del recuadro
   invadiendo la columna de al lado. Arreglar una sin la otra es el clasico de esta casa. */
.rec-route-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start;
  min-width: 0; counter-reset: recstop;
  border: 1px solid var(--line, #e6ebf1); border-radius: 10px; padding: 12px; background: #fcfdfe; }
.rec-route-col, .rec-route-col * { box-sizing: border-box; }
.rec-route-col input, .rec-route-col select { max-width: 100%; min-width: 0; }
.rec-route-col[data-rec-side="load"] { --rec-stop-label: "Carga"; }
.rec-route-col[data-rec-side="unload"] { --rec-stop-label: "Descarga"; }
.rec-route-title { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary-strong, #8a5a2b); }
.rec-route-col .rec-stop-row { border: 1px solid #eef1f5; border-radius: 8px; background: #fff; padding: 7px 8px; flex-wrap: wrap; }
.rec-route-col .rec-stop-row.is-main { border-color: #dfe6ee; }
/* El número de parada: contador, no texto en el HTML (las filas se añaden y quitan por JS). */
.rec-route-col .rec-stop-row::before {
  counter-increment: recstop;
  content: var(--rec-stop-label) " " counter(recstop);
  /* min-width 0, no 62px: la etiqueta del contador imponía ancho aunque no lo hubiera y era lo único que
     seguía pudiendo desbordar la columna en fichas estrechas. El primer intento de arreglarlo puso la
     corrección ANTES de esta regla — misma especificidad, manda la última — y no hacía nada: el mismo
     gotcha que ya se cazó en la ficha de servicio, reintroducido en su gemela. Se corrige AQUÍ. */
  flex: 0 0 auto; min-width: 0; font-size: 11px; font-weight: 700; color: var(--muted);
}
/* La parada 1 no tiene selector de día: ES el día de carga. Se deja el hueco escrito para que las dos
   filas queden alineadas (misma rejilla, misma altura). */
.rec-stop-day-fixed { flex: 0 0 auto; width: 104px; font-size: 11px; color: var(--muted); font-style: italic;
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px;
  border: 1px dashed #e3e9f0; border-radius: 6px; background: #fbfcfe; }
/* Editor de plantilla: cargas/descargas adicionales (2 columnas, fila dirección + hora + quitar) */
.rec-stops-edit {
  display: grid;
  gap: 10px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.rec-stops-edit-col { display: grid; gap: 6px; align-content: start; min-width: 0; }
.rec-stops-edit-title { color: var(--muted); font-size: 12px; font-weight: 700; }
.rec-stops-list { display: grid; gap: 6px; }
.rec-stop-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.rec-stop-row input { font-size: 13px; min-height: 30px; padding: 5px 8px; }
.rec-stop-row .rec-stop-addr { flex: 1 1 auto; min-width: 0; }
.rec-stop-row .rec-stop-time { flex: 0 0 auto; width: 96px; }
.rec-stop-row .rec-stop-day { flex: 0 0 auto; width: 104px; font-size: 12px; min-height: 30px; padding: 4px 6px; }
/* Hora descarga con selector de día (Mismo día / Carga +N) en el editor de recurrentes. */
.rec-desc-row { display: flex; gap: 6px; align-items: center; }
.rec-desc-row input[type="time"] { flex: 1 1 auto; min-width: 0; }
.rec-desc-row .rec-desc-day { flex: 0 0 auto; width: 104px; font-size: 12px; min-height: 30px; padding: 4px 6px; }
.rec-stop-remove { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.rec-stop-remove:hover { color: var(--danger, #c0392b); }
.rec-stop-add { justify-self: start; font-size: 12px; padding: 5px 10px; }
.rec-dialog { max-width: min(520px, 96vw); }
.rec-dialog-body { display: grid; gap: 10px; }

/* ── Tarjetas de combustible: seccion en la ficha del vehiculo ─────────── */
.vehicle-cards-form {
  background: #fff;
  border: 1px solid #dbe4ee;
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 8px;
}
.veh-card-default { align-items: center; display: flex; font-weight: 700; gap: 8px; }
.veh-card-default select { max-width: 160px; }
.veh-card-grid {
  align-items: center;
  display: grid;
  gap: 6px 8px;
  grid-template-columns: 80px minmax(0, 1fr) 150px;
}
.veh-card-head { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.veh-card-row { display: contents; }
.veh-card-name { font-weight: 700; }

/* Ventana del PIN al pulsar "Tarjetas" en Trafico */
.td-cardpin-overlay {
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 70;
}
.td-cardpin {
  background: #fff;
  display: grid;
  gap: 10px;
  max-width: min(360px, 92vw);
  padding: 18px;
  text-align: center;
  width: 100%;
}
.td-cardpin-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; text-align: left; }
.td-cardpin-plate { display: block; font-size: 20px; font-weight: 900; }
.td-cardpin-copy { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.td-cardpin-copy.is-copied { color: #15803d; border-color: #15803d; }
.td-cardpin-cardname { color: var(--muted); font-size: 13px; font-weight: 700; }
.td-cardpin-pin {
  color: var(--primary, #28587b);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 6px;
}
.td-cardpin-valid { font-size: 12px; }
.td-cardpin-empty { padding: 10px 0; }

/* -- Cuenta en la barra lateral ------------------------------------------ */
.account-chip {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 14px;
  position: relative;
}
.account-main, .account-main--static {
  align-items: center;
  display: flex;
  gap: 9px;
}
.account-trigger {
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  gap: 9px;
  padding: 5px 11px 5px 7px;
}
.account-trigger:hover { background: rgba(255,255,255,0.13); }
.account-caret {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.7);
  flex: 0 0 auto;
  margin-left: 2px;
}
.account-menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(13,39,66,0.22);
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
}
.account-menu[hidden] { display: none; }
.account-menu-item {
  background: none;
  border: none;
  border-radius: 7px;
  color: #344052;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
}
.account-menu-item:hover { background: #f1f5f9; }
.account-menu-item--logout { color: var(--accent); }
.account-menu-item--logout:hover { background: #fdeceb; }
.account-avatar {
  align-items: center;
  background: var(--accent);
  border-radius: 9px;
  color: #fff;
  display: flex;
  flex: 0 0 38px;
  font-size: 14px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
}
.account-avatar--dev { background: #5a6b7e; }
.account-meta { display: grid; line-height: 1.2; min-width: 0; }
.account-meta strong {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-meta small { color: #9fb2c6; font-size: 11.5px; }

/* -- Modales de acceso (cambio de contrasena, etc.) ---------------------- */
.auth-overlay {
  align-items: center;
  background: rgba(10,24,40,0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 4000;
}
.auth-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(13,39,66,0.3);
  display: grid;
  gap: 13px;
  max-width: 360px;
  padding: 26px 24px;
  width: 100%;
}
.auth-modal h3 { font-size: 19px; font-weight: 800; margin: 0; }
.auth-note { color: var(--muted); font-size: 13px; margin: -4px 0 0; }
.auth-modal label {
  color: #344052;
  display: grid;
  font-size: 12.5px;
  font-weight: 700;
  gap: 5px;
}
.auth-modal input {
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
  padding: 10px 11px;
}
.auth-modal input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,95,176,0.15);
  outline: none;
}
.auth-error {
  color: #b42318;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 0;
}
.auth-error:empty { display: none; }
.auth-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.auth-modal-actions button {
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
}
.auth-modal-actions button[type="submit"] {
  background: var(--primary);
  border: none;
  color: #fff;
}
.auth-modal-actions button.secondary {
  background: #fff;
  border: 1px solid var(--line);
  color: #344052;
}

/* -- Inicio (dashboard) --------------------------------------------------- */
.home-dashboard {
  margin: 0 auto;
  max-width: 1180px;
  padding: 26px 28px 44px;
}
.home-head {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 22px;
}
.home-head h2 { color: var(--ink); font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.home-head p { color: var(--muted); font-size: 14px; margin: 0; }
.home-head p::first-letter { text-transform: uppercase; }
.home-brand svg { height: 44px; width: auto; }

.home-stats {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 26px;
}
@media (max-width: 1080px) { .home-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .home-stats { grid-template-columns: repeat(2, 1fr); } }
.home-stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(13,39,66,0.05);
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
}
.home-stat--clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.home-stat--clickable:hover,
.home-stat--clickable:focus-visible {
  border-color: #c58b5f;
  box-shadow: 0 8px 20px rgba(13,39,66,0.09);
  outline: none;
  transform: translateY(-1px);
}
.home-stat--clickable:active {
  transform: translateY(0);
}
.home-stat .hs-icon {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  margin-bottom: 10px;
  width: 32px;
}
.home-stat .hs-icon--navy { background: #eaf0f7; color: var(--nav); }
.home-stat .hs-icon--copper { background: #f4ece4; color: var(--primary); }
.home-stat .hs-icon--green { background: #e7f3ec; color: #1f8a4c; }
.home-stat .hs-icon--red { background: #fdeceb; color: var(--accent); }
.home-stat .hs-icon--amber { background: #fbf0df; color: #b06f00; }
.home-stat .hs-val { color: var(--ink); font-size: 29px; font-weight: 800; line-height: 1.05; }
.home-stat .hs-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 5px;
  text-transform: uppercase;
}
.home-stat .hs-sub { color: var(--muted); font-size: 12px; margin-top: 1px; }
.home-stat--alert .hs-val { color: var(--accent); }
.home-stat--warn .hs-val { color: #b06f00; }

.home-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1.1fr 0.9fr;
}
.home-grid--single { grid-template-columns: 1fr; }
.home-block h3 { color: var(--ink); font-size: 15px; font-weight: 800; margin: 0 0 12px; }

.home-shortcuts {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.home-shortcut {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.home-shortcut:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(13,39,66,0.08);
  transform: translateY(-1px);
}
.home-shortcut--manual {
  background: linear-gradient(135deg, #fffaf4, #ffffff);
  border-color: #d9b58e;
  grid-column: 1 / -1;
}
.home-shortcut--manual .hsc-icon {
  background: #b8733d;
}
.home-shortcut--manual .hsc-label {
  color: #7a421f;
}
.home-shortcut--manual .hsc-desc {
  white-space: normal;
}
.home-shortcut .hsc-icon {
  align-items: center;
  background: var(--nav);
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 20px;
  height: 38px;
  justify-content: center;
}
.home-shortcut .hsc-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.home-shortcut .hsc-label { color: var(--ink); font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-shortcut .hsc-desc { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-shortcut .hsc-arrow {
  background: var(--primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  flex: 0 0 auto;
  height: 11px;
  width: 14px;
}

.home-activity {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.home-act-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: auto auto 1fr auto;
  padding: 9px 14px;
}
.home-act-row:last-child { border-bottom: none; }
.ha-action {
  background: #eef2f7;
  border-radius: 6px;
  color: #45556c;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  white-space: nowrap;
}
.ha-login { background: #e7f3ec; color: #1f8a4c; }
.ha-logout { background: #f1eef7; color: #6b4fa0; }
.ha-create { background: #e7f0fb; color: #1f5fb0; }
.ha-update { background: #fdf2e3; color: #b06f00; }
.ha-delete { background: #fdeceb; color: var(--accent); }
.ha-user { color: var(--ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ha-summary { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-time { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.home-empty { color: var(--muted); font-size: 13px; margin: 0; padding: 14px; }

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

/* -- Gestion de usuarios -------------------------------------------------- */
.users-manager { margin: 0 auto; max-width: 1100px; padding: 22px 26px 44px; }
.um-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
.um-head h2 { color: var(--ink); font-size: 22px; font-weight: 800; margin: 0; }
.um-sub { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
.um-new {
  background: var(--primary);
  border: none;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  white-space: nowrap;
}
.um-new:hover { background: var(--primary-strong); }

.um-body { align-items: start; display: grid; gap: 20px; grid-template-columns: 320px 1fr; }
.um-list { display: flex; flex-direction: column; gap: 8px; }
.um-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto auto;
  padding: 10px 12px;
  text-align: left;
}
.um-row:hover { border-color: var(--primary); }
.um-row.is-sel { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(176,112,60,0.18); }
.um-avatar {
  align-items: center;
  background: var(--nav);
  border-radius: 9px;
  color: #fff;
  display: flex;
  flex: 0 0 36px;
  font-size: 13px;
  font-weight: 800;
  height: 36px;
  justify-content: center;
}
.um-avatar--off { background: #9aa7b6; }
.um-row-main { display: grid; min-width: 0; }
.um-name { color: var(--ink); font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-uname { color: var(--muted); font-size: 12px; }
.dap-nopass { color: #b45309; font-weight: 600; }
.um-role-badge {
  background: #eef2f7;
  border-radius: 6px;
  color: #45556c;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}
.um-dot { border-radius: 50%; height: 9px; width: 9px; }
.um-dot.on { background: #1f8a4c; }
.um-dot.off { background: #c0392b; }

.um-detail { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.um-empty, .um-denied { color: var(--muted); font-size: 14px; padding: 44px 30px; text-align: center; }

/* Pestañas de Usuarios (Usuarios del TMS / Conductores app) + buscador */
.um-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 2px; margin-bottom: 18px; }
.um-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; color: var(--muted); cursor: pointer; font: inherit; font-weight: 600; margin-bottom: -1px; min-height: 0; padding: 9px 16px; }
.um-tab:hover { background: var(--surface-soft); color: var(--ink); }
.um-tab.is-active { border-bottom-color: var(--nav); color: var(--nav); }
/* En el TMS no existe una utilidad global .hidden; el cambio de pestana de
   Usuarios oculta el panel inactivo con esta regla propia. */
.um-tabpanel.hidden { display: none !important; }

/* Estado Tasado del servicio: boton (verde) + banner en la ficha de edicion. */
.tasar-btn { background: #9575cd; border-color: #9575cd; color: #fff; }
.tasar-btn:hover { background: #7e57c2; }
.tasado-banner {
  background: #efeafc;
  border: 1px solid #d8caf2;
  border-radius: 8px;
  color: #5e3aa6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  margin: 8px 0 0;
  padding: 7px 10px;
  text-transform: uppercase;
}
.laso-banner {
  background: #e2f4f1;
  border: 1px solid #b7e0d8;
  border-radius: 8px;
  color: #0f6e5e;
  font-size: 12px;
  font-weight: 600;
  margin: 6px 0 0;
  padding: 6px 10px;
}
.tasado-chip {
  background: #efeafc;
  border: 1px solid #d8caf2;
  border-radius: 5px;
  color: #5e3aa6;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  white-space: nowrap;
}

/* Marca "Laso Imp." — servicios importados del export de Laso (source=LASO). Color propio (teal)
   para distinguirlo del Tasado (morado) y del resto. */
.laso-chip {
  background: #e2f4f1;
  border: 1px solid #b7e0d8;
  border-radius: 5px;
  color: #0f6e5e;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  white-space: nowrap;
}
.ls-badge-laso { background: #e2f4f1; color: #0f6e5e; border: 1px solid #b7e0d8; }

/* Cargos extraordinarios en la ficha del servicio (concepto + importe). */
.extra-charges-list { display: flex; flex-direction: column; gap: 6px; }
.extra-charge-row { align-items: center; display: grid; gap: 8px; grid-template-columns: 1fr 110px auto auto; }
.extra-charge-row .ec-concept, .extra-charge-row .ec-amount { box-sizing: border-box; width: 100%; }
.extra-charge-row .ec-meta { font-size: 11px; white-space: nowrap; }
.extra-charges-foot { align-items: center; display: flex; gap: 12px; margin-top: 8px; }
.extra-charges-total { font-weight: 700; }
/* Dos bloques de cargos (a cobrar / a pagar) dentro de la seccion. */
.extra-charges-block { margin-bottom: 12px; }
.extra-charges-block + .extra-charges-block { border-top: 1px dashed var(--line); padding-top: 12px; }
.extra-charges-sub { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; margin: 0 0 6px; text-transform: uppercase; }
/* Totales efectivos (base + cargos) bajo Precio cobrar/pagar. */
.economico-totales { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.economico-totales:empty { display: none; }
.eco-total { font-size: 12.5px; font-weight: 700; }
.eco-total:empty { display: none; }
.eco-total-cobrar { color: var(--accent, #1f6feb); }
.eco-total-pagar { color: #b8860b; }
/* Económico y Cargos en DOS columnas: A cobrar (izq, azul) / A pagar (der, ámbar).
   align-items:stretch → los dos recuadros SIEMPRE la misma altura. */
.eco-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: stretch; }
.eco-col { display: flex; flex-direction: column; gap: 7px; padding: 9px 11px 11px; border: 1px solid; border-radius: 9px; min-width: 0; }
.eco-col-cobrar { background: rgba(31, 111, 235, 0.045); border-color: rgba(31, 111, 235, 0.22); }
.eco-col-pagar { background: rgba(184, 134, 11, 0.06); border-color: rgba(184, 134, 11, 0.30); }
.eco-col-title { margin: 0 0 1px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.eco-col-cobrar .eco-col-title { color: #1f6feb; }
.eco-col-pagar .eco-col-title { color: #b8860b; }
.eco-field { display: flex; flex-direction: column; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted, #6b7280); }
.eco-col .eco-field input { height: 30px; min-height: 30px; padding: 0 9px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink, #1f2933); border: 1px solid var(--line, #d4dae3); border-radius: 6px; background: #fff; width: 100%; box-sizing: border-box; }
.eco-col .eco-field input:focus { border-color: var(--brand, #8a5a2b); box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.13); outline: none; }
.eco-col .eco-total { margin: -1px 0 1px; }
.eco-col .extra-charges-foot { margin-top: 4px; flex-wrap: wrap; }
.eco-col .tf-svc-quote, .eco-col .svc-pay-ref { margin-top: 2px; }
/* Fila de acciones del recuadro A pagar: "Aplicar media" + "Ver servicios" comparten línea (ahorra una fila). */
.svc-pay-ref-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
/* "Ver servicios": botón compacto ámbar, emparejado con "Aplicar media", sin descolocar la columna. */
.eco-col-pagar .svc-view-prov-services { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 700; color: #8a6100; background: rgba(184, 134, 11, 0.10); border: 1px solid rgba(184, 134, 11, 0.38); border-radius: 6px; cursor: pointer; }
.eco-col-pagar .svc-view-prov-services:hover { background: rgba(184, 134, 11, 0.18); }
.eco-col-pagar .svc-view-prov-services svg { width: 13px; height: 13px; }
/* Repaso ficha de servicio (jul-2026): campos más pequeños y densos (solo en el modal de servicio). */
.service-edit-modal .service-edit-section { padding: 10px 0 3px; }
.service-edit-modal .service-edit-grid { gap: 8px 14px; }
.service-edit-modal .service-edit-grid input:not([type="checkbox"]),
.service-edit-modal .service-edit-grid select { height: 28px; min-height: 28px; padding: 0 8px; font-size: 13px; }
.service-edit-modal .service-edit-grid textarea { min-height: 44px; font-size: 13px; }
.service-edit-modal .service-edit-grid label > button,
.service-edit-modal .service-edit-grid label .svc-addr-pick { min-height: 28px; padding: 2px 9px; font-size: 12.5px; }
.service-edit-modal .service-edit-section-title { margin-bottom: 7px; padding-bottom: 4px; }
/* Filas alineadas: el control se pega ABAJO de su celda, así una pista de 2 líneas (p. ej. Conductor
   externo) no baja su input respecto a los vecinos — todos los campos de la fila quedan a la misma altura. */
.service-edit-modal .service-edit-grid > label > input,
.service-edit-modal .service-edit-grid > label > select,
.service-edit-modal .service-edit-grid > label > textarea,
.service-edit-modal .service-edit-grid > label > .datetime-form-field,
.service-edit-modal .service-edit-grid > label > button,
.service-edit-modal .service-edit-grid > label > .svc-addr-pick { margin-top: auto; }
/* Cargos dentro de las columnas estrechas: CONCEPTO (motivo) en una fila propia y ancha, e IMPORTE +
   quién/cuándo + quitar en la fila de abajo. Así siempre se lee el motivo del cargo/pago. */
.eco-col .extra-charge-row { grid-template-columns: 120px 1fr auto; grid-template-rows: auto auto; row-gap: 4px; column-gap: 8px; align-items: center; }
.eco-col .extra-charge-row .ec-concept { grid-column: 1 / -1; grid-row: 1; width: 100%; }
.eco-col .extra-charge-row .ec-amount { grid-column: 1; grid-row: 2; width: 100%; }
.eco-col .extra-charge-row .ec-meta { grid-column: 2; grid-row: 2; }
.eco-col .extra-charge-row [data-remove-ec] { grid-column: 3; grid-row: 2; }
/* Botón WhatsApp del DeCA con el verde corporativo de WhatsApp. */
.deca-actions .deca-btn[data-wa-deca] { background: #25d366; border-color: #1fbf5b; color: #fff; font-weight: 600; }
.deca-actions .deca-btn[data-wa-deca]:hover { background: #1eb85a; border-color: #17a54f; color: #fff; }
/* Cargos extraordinarios: tipografía y densidad más pequeñas que el resto de la ficha. */
.service-edit-modal .svc-charges { padding-top: 8px; }
.svc-charges .eco-2col { gap: 10px 12px; }
.svc-charges .eco-col { padding: 8px 9px 9px; gap: 5px; }
.svc-charges .eco-col-title { font-size: 9px; }
.svc-charges .extra-charge-row input { height: 26px; min-height: 26px; padding: 0 7px; font-size: 12px; }
.svc-charges .extra-charge-row .ec-meta { font-size: 10px; }
.svc-charges .extra-charges-total { font-size: 12px; }
.svc-charges .extra-charges-foot { margin-top: 3px; gap: 8px; }
.svc-charges .extra-charges-foot button { font-size: 11px; padding: 3px 8px; min-height: 0; }
.svc-charges p.muted { font-size: 10px !important; margin-top: 6px !important; }
/* Cargo YA GUARDADO: línea informativa (concepto · importe · quién/cuándo · lápiz para editar · quitar).
   Los .ec-concept/.ec-amount van OCULTOS (siguen contando para el total y el guardado). El lápiz la vuelve editable. */
.eco-col .extra-charge-row.extra-charge-applied { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.extra-charge-applied .eca-concept { font-weight: 600; color: var(--ink, #1f2933); font-size: 12px; }
.extra-charge-applied .eca-amount { font-weight: 700; color: var(--ink, #1f2933); font-size: 12px; white-space: nowrap; }
.extra-charge-applied .eca-amount::before { content: "· "; color: var(--muted, #6b7280); font-weight: 400; }
.eco-col-cobrar .extra-charge-applied .eca-amount { color: #1f6feb; }
.eco-col-pagar .extra-charge-applied .eca-amount { color: #b8860b; }
.extra-charge-applied .ec-meta { margin-left: auto; white-space: nowrap; }
.extra-charge-applied .eca-edit { color: var(--muted, #6b7280); display: inline-flex; align-items: center; }
.extra-charge-applied .eca-edit:hover { color: var(--brand, #8a5a2b); }
.extra-charge-applied .eca-edit svg { display: block; }
/* Chip identificable en fila: marca que el precio/celda incluye cargos extra. */
.charge-chip { border-radius: 7px; display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1.5; padding: 0 5px; vertical-align: middle; white-space: nowrap; }
.charge-chip-cobrar { background: rgba(31, 111, 235, 0.14); color: #1f6feb; }
.charge-chip-pagar { background: rgba(184, 134, 11, 0.16); color: #b8860b; }
.dap-search { margin-bottom: 8px; }
.dap-search input { box-sizing: border-box; width: 100%; }
.dap-rows { display: flex; flex-direction: column; gap: 8px; }
.dap-danger-zone { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; margin-top: 4px; padding-top: 14px; }
.dap-danger-zone span { color: var(--muted); font-size: 12px; }

.um-form { display: grid; gap: 16px; padding: 24px 26px 26px; }
.um-form-head { align-items: baseline; display: flex; gap: 10px; }
.um-form-head h3 { font-size: 19px; font-weight: 800; margin: 0; }
.um-form-uname { color: var(--muted); font-size: 13px; }
.um-fields { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.um-fld { color: #344052; display: grid; font-size: 12.5px; font-weight: 700; gap: 5px; }
.um-fld input, .um-fld select, .um-fld textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 11px;
  width: 100%;
}
.um-fld input:focus, .um-fld select:focus, .um-fld textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(176,112,60,0.15);
  outline: none;
}
.um-fld--check { align-items: center; align-self: end; display: flex; flex-direction: row; font-size: 13px; gap: 8px; padding-bottom: 9px; }
.um-fld--check input { width: auto; }

.um-perms-block { border-top: 1px solid var(--line); padding-top: 14px; }
.um-perms-title { color: #344052; font-size: 12.5px; font-weight: 800; }
.um-perms {
  display: grid;
  gap: 9px 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 11px 0 6px;
}
.um-perm { align-items: center; color: var(--ink); display: flex; font-size: 13.5px; font-weight: 600; gap: 8px; justify-content: space-between; }
.um-perm-name { flex: 1 1 auto; min-width: 0; }
.um-perm-level { flex: 0 0 auto; width: 132px; font-size: 13px; min-height: 28px; padding: 3px 6px; }
.um-perm input { width: auto; }
.um-perms-hint { color: var(--muted); font-size: 12px; margin: 0; }

/* ── Modo "Solo consulta" por sección (permisos de edición) ──────────────── */
.readonly-chip { display: none; }
body.section-readonly .readonly-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #8a5a00; background: #fff4e0; border: 1px solid #f0c98a;
}
.readonly-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: #e08a00; }
/* Ocultar controles de creación de la sección activa cuando el usuario es de solo consulta */
body.section-readonly #serviceEditorToggle,
body.section-readonly [data-action="new-driver"],
body.section-readonly [data-action="new-vehicle"],
body.section-readonly #mainNewCustomer,
body.section-readonly #adminNewCustomer,
body.section-readonly #adminNewProvider,
body.section-readonly #btnNewProvider,
body.section-readonly #umNewUser,
body.section-readonly #dapNewDriver { display: none !important; }

/* ── Mensajes (avisos internos) ───────────────────────────────────────────── */
.nav-msg-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #e23b3b; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; vertical-align: middle;
}
.msg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.msg-head h2 { margin: 0; }
.msg-sub { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
.msg-new { background: var(--brand, #2563eb); border: none; border-radius: 8px; color: #fff; cursor: pointer;
  font-weight: 700; padding: 9px 14px; white-space: nowrap; }
.msg-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 4px; margin: 10px 0 14px; }
.msg-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer;
  font-size: 13.5px; font-weight: 700; padding: 8px 12px; }
.msg-tab.is-active { border-bottom-color: var(--brand, #2563eb); color: var(--ink); }
.msg-list { display: flex; flex-direction: column; gap: 10px; }
.msg-empty { color: var(--muted); font-size: 13px; padding: 22px 4px; text-align: center; }
.msg-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid #d7dde6; border-radius: 10px; padding: 11px 13px; }
.msg-card.is-unread { border-left-color: var(--brand, #2563eb); background: #f7faff; }
.msg-card.is-imp { border-left-color: #e0852b; }
.msg-card-top { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 8px; }
.msg-from { color: var(--ink); }
.msg-date { margin-left: auto; white-space: nowrap; }
.msg-card-subject { color: var(--ink); font-size: 14.5px; font-weight: 700; margin: 5px 0 2px; }
.msg-card-body { color: #36414f; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.msg-card-foot { align-items: center; display: flex; gap: 10px; margin-top: 8px; }
/* Mandar a historial / Devolver a recibidos: accion secundaria, a la derecha del pie. */
.msg-archive { background: #fff; border: 1px solid var(--line); border-radius: 7px; color: #54616f; cursor: pointer;
  font-size: 12px; font-weight: 700; margin-left: auto; padding: 5px 12px; }
.msg-archive:hover { background: #f2f6fb; color: var(--ink); }
.msg-card.is-hist { border-left-color: #b9c5d4; }
.msg-hist-noack { color: var(--muted); }
/* Barra de filtros del Historial: filtros a la izquierda, contador a la derecha. */
.msg-histbar { align-items: center; background: var(--surface-soft, #f6f9fc); border: 1px solid var(--line);
  border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 9px 11px; }
.msg-histbar .msg-hist-search { flex: 1 1 220px; min-width: 170px; }
.msg-histbar .msg-hist-sender { flex: 0 1 210px; min-width: 150px; }
.msg-histbar input, .msg-histbar select { background: #fff; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); font: inherit; font-size: 13px; padding: 6px 9px; }
.msg-hist-date { align-items: center; color: var(--muted); display: flex; font-size: 12px; font-weight: 700; gap: 5px; }
.msg-hist-count { color: var(--muted); font-size: 12px; font-weight: 700; margin-left: auto; white-space: nowrap; }
.msg-prio { background: #eef1f5; border-radius: 999px; color: #54616f; font-size: 11px; font-weight: 800; padding: 2px 8px; }
.msg-prio--imp { background: #fdecdc; color: #b15a12; }
.msg-sched { background: #eef4ff; border-radius: 999px; color: #2c5bb8; font-size: 11px; font-weight: 700; padding: 2px 8px; }
.msg-ack { background: var(--brand, #2563eb); border: none; border-radius: 7px; color: #fff; cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 6px 14px; }
.msg-read-ok { color: #1f9d57; font-size: 12.5px; font-weight: 700; }
.msg-rcpts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.msg-rcpt { background: #f1f3f6; border-radius: 6px; color: #5a6675; font-size: 11.5px; padding: 2px 7px; }
.msg-rcpt.is-read { background: #e6f6ed; color: #1f9d57; }
.msg-pending { color: var(--muted); font-size: 11.5px; margin-top: 6px; }

/* Banner de avisos en cada seccion */
.messages-banner { align-items: center; background: #fff6e0; border: 1px solid #f0d49a; border-radius: 9px;
  color: #6b4e16; display: flex; gap: 10px; margin: 0 0 12px; padding: 8px 12px; }
.mb-dot { background: #e0852b; border-radius: 50%; flex: 0 0 auto; height: 8px; width: 8px; }
.mb-text { flex: 1 1 auto; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-more { color: #94702a; }
.mb-view { background: #e0852b; border: none; border-radius: 7px; color: #fff; cursor: pointer; flex: 0 0 auto; font-size: 12.5px; font-weight: 700; padding: 6px 12px; }

/* Popup: redactar y popup de no leidos */
.msg-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(18, 24, 33, .46); padding: 18px; }
.msg-compose, .msg-unread { background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
  display: flex; flex-direction: column; max-height: 90vh; width: min(560px, 96vw); }
.msg-compose-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 14px 18px; }
.msg-compose-head h3 { margin: 0; }
.msg-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 24px; line-height: 1; padding: 0 4px; }
.msg-compose-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 16px 18px; }
.msg-fld { color: var(--ink); display: flex; flex-direction: column; font-size: 12.5px; font-weight: 700; gap: 5px; }
.msg-fld--inline { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.msg-fld input[type="text"], .msg-fld input:not([type]), .msg-fld input#msgSubject, .msg-fld textarea, .msg-fld input[type="datetime-local"] {
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 500; padding: 8px 10px; width: 100%; }
.msg-fld-label { color: #344052; font-size: 12.5px; font-weight: 800; }
.msg-prio-pick, .msg-when-pick { display: flex; gap: 16px; }
.msg-prio-pick label, .msg-when-pick label, .msg-repeat { align-items: center; color: var(--ink); display: flex; font-size: 13px; font-weight: 600; gap: 6px; }
.msg-when-extra { margin-top: 8px; }
.msg-repeat { margin-top: 8px; }
.msg-repeat input[type="number"] { border: 1px solid var(--line); border-radius: 6px; font: inherit; padding: 4px 6px; width: 58px; }
.msg-all { align-items: center; display: inline-flex; font-size: 12px; font-weight: 600; gap: 5px; margin-left: 10px; vertical-align: middle; }
.msg-rcpt-groups { display: flex; flex-direction: column; gap: 8px; max-height: 230px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; }
.msg-group-head { font-weight: 800; }
.msg-group-all { align-items: center; color: #344052; display: flex; font-size: 12.5px; gap: 6px; }
.msg-group-users { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 4px 16px; }
.msg-rcpt-pick { align-items: center; color: var(--ink); display: flex; font-size: 13px; font-weight: 500; gap: 6px; }
.msg-rcpt-pick small { color: var(--muted); }
.msg-error { color: #c0392b; font-size: 12.5px; min-height: 14px; }
.msg-compose-foot { border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; }
.msg-send { background: var(--brand, #2563eb); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-weight: 700; padding: 9px 18px; }
.msg-send:disabled { opacity: .6; cursor: default; }
.msg-unread-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 14px 18px; }
.msg-unread-item { border: 1px solid var(--line); border-left: 4px solid var(--brand, #2563eb); border-radius: 10px; padding: 10px 12px; }
.msg-unread-item.is-imp { border-left-color: #e0852b; }
/* Las casillas/radios no deben heredar el width:100% global de inputs del TMS */
.msg-overlay input[type="checkbox"], .msg-overlay input[type="radio"] { width: auto; flex: 0 0 auto; margin: 0; }

/* Panel-resumen de mensajes en Inicio (doble tamaño respecto al banner fino) */
.home-msg-banner { background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 14px; margin: 4px 0 16px; padding: 16px 20px; }
.home-msg-banner.tone-ok { background: #eafaf1; border-color: #bfe6cf; border-left-color: #1f9d57; }
.home-msg-banner.tone-info { background: #eef4ff; border-color: #c2d6f5; border-left-color: #2f6fe0; }
.home-msg-banner.tone-alert { background: #fff4e0; border-color: #f0c98a; border-left-color: #e0852b; }
.hmb-main { align-items: center; display: flex; gap: 14px; }
/* Toque de color (pedido del jefe): el icono va en un TILE tintado del color del tono, para que la
   tarjeta no quede plana (igual de vivo que en móvil). El SVG usa currentColor → hereda el color. */
.hmb-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: #dbe8ff; color: #2f6fe0; }
.home-msg-banner.tone-ok .hmb-icon { background: #d3f0e0; color: #1f9d57; }
.home-msg-banner.tone-info .hmb-icon { background: #dbe8ff; color: #2f6fe0; }
.home-msg-banner.tone-alert .hmb-icon { background: #ffe6c2; color: #e0852b; }
.hmb-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.hmb-headline { color: var(--ink); font-size: 17px; font-weight: 700; }
.hmb-sub { color: var(--muted); font-size: 13.5px; }
.hmb-action { background: var(--brand, #2563eb); border: none; border-radius: 9px; color: #fff; cursor: pointer; flex: 0 0 auto; font-size: 14px; font-weight: 700; padding: 10px 18px; }
.home-msg-banner.tone-alert .hmb-action { background: #e0852b; }
.home-msg-banner.tone-ok .hmb-action { background: #1f9d57; }
.hmb-list { border-top: 1px solid rgba(20, 30, 45, .08); display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 12px 0 0; padding: 12px 0 0; }
.hmb-list li { align-items: baseline; color: #36414f; display: flex; font-size: 13.5px; gap: 8px; }
.hmb-li-from { color: var(--ink); flex: 0 0 auto; font-weight: 700; }
.hmb-li-subj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmb-li-imp { background: #fdecdc; border-radius: 999px; color: #b15a12; flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 1px 7px; }

.um-pass-block { align-items: start; border-top: 1px solid var(--line); display: grid; gap: 10px; padding-top: 14px; }
.um-pass-hidden { display: none; }
.um-pass-input { display: block; position: relative; }
.um-pass-input input { padding-right: 40px; }
.um-eye {
  align-items: center; background: none; border: none; border-radius: 6px;
  color: var(--muted); cursor: pointer; display: inline-flex; height: 30px;
  justify-content: center; padding: 0; position: absolute; right: 5px;
  top: 50%; transform: translateY(-50%); width: 32px;
}
.um-eye:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
.um-eye.is-on { color: var(--primary); }
.um-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  justify-self: start;
  padding: 0;
  text-decoration: underline;
}
.um-error { color: #b42318; font-size: 13px; font-weight: 600; }
.um-error:empty { display: none; }
.um-actions { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 10px; padding-top: 16px; }
.um-actions-spacer { flex: 1; }
.um-save {
  background: var(--primary);
  border: none;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
}
.um-save:hover { background: var(--primary-strong); }
.um-save:disabled { cursor: default; opacity: 0.7; }
.um-danger {
  background: #fff;
  border: 1px solid #e3b0ac;
  border-radius: 9px;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
}
.um-danger:hover { background: #fdeceb; }
.um-actions .secondary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #344052;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
}

.um-log-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(13,39,66,0.3);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  max-width: 560px;
  width: 100%;
}
.um-log-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 15px 20px; }
.um-log-head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.um-log-who { color: var(--muted); font-size: 13px; }
.um-log-head .secondary { background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; padding: 7px 12px; }
.um-log-body { overflow-y: auto; padding: 6px 12px 14px; }
.um-log-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: auto 1fr auto; padding: 9px 6px; }
.um-log-row:last-child { border-bottom: none; }
.um-log-summary { color: var(--ink); font-size: 13px; }
.um-log-time { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* -- Listados: tabla "sleek" (densa, sin lineas verticales, cabecera clara) --
   Scope #listingsView para no afectar a la tabla de Trafico diario. */
#listingsView .ls-service-table { font-size: 10.5px; line-height: 1.25; }
#listingsView .ls-service-table th,
#listingsView .ls-service-table td {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #eef1f6;
  padding: 2px 8px;
}
#listingsView .ls-service-table thead th {
  background: #eef2f8;
  border-bottom: 2px solid var(--primary);
  color: #5a6b80;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}
#listingsView .ls-service-table tbody tr:nth-child(even) td { background: #f7f9fc; }
#listingsView .ls-service-table tbody tr:nth-child(odd) td { background: #fff; }
#listingsView .ls-service-table tbody tr:hover td { background: #f6ece2; }
#listingsView .ls-service-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
/* Fila SELECCIONADA (clic simple): tinte terracota más marcado que el hover + barra izq. persistente.
   Doble clase (.ls-row-selected.ls-row-clickable) para ganar a los fondos par/impar y al hover. */
#listingsView .ls-service-table tbody tr.ls-row-selected.ls-row-clickable td { background: #f0dcc9; }
#listingsView .ls-service-table tbody tr.ls-row-selected.ls-row-clickable:hover td { background: #ecd3ba; }
#listingsView .ls-service-table tbody tr.ls-row-selected.ls-row-clickable td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
#listingsView .ls-badge { border-radius: 20px; }
#listingsView .ls-service-table thead th { cursor: pointer; user-select: none; }
#listingsView .ls-service-table thead th:hover { background: #e4ebf4; }
#listingsView .ls-service-table thead th.ls-col-sorted { background: #e7eef7; }
#listingsView .ls-service-table .ls-sort-ind { color: var(--primary); font-size: 11px; font-weight: 700; margin-left: 3px; }

/* ── Listados tipo EXCEL (jul-2026): scroll propio + cabecera fija + resize real por <colgroup> ──
   El wrap scrollea él solo (alto fijado por JS, lsSizeTableWrap) → la página no se mueve y la barra
   de filtros, las pestañas y las cabeceras quedan SIEMPRE a la vista. */
#listingsView .ls-table-wrap { overflow: auto; overscroll-behavior: contain; }
/* Con anchos congelados en el <colgroup>, layout FIJO: el resize es exacto y no lo recoloca el
   contenido; width:max-content = SUMA de columnas: puede crecer más allá del panel (scroll horizontal)
   y también quedarse MÁS ESTRECHA que él (sin min-width: con él, el sobrante se repartía entre las
   columnas y estrechar "no movía nada"). */
#listingsView .ls-service-table.ls-fixed { table-layout: fixed; width: max-content; min-width: 0; }   /* min-width:0 anula el 600px base: sin él, por debajo de 600 la tabla repartía el sobrante y estrechar "no movía nada" */
/* Columna estrecha: la cabecera recorta su texto (el tirador queda fuera del clip, en el borde). */
#listingsView .ls-service-table th .compact-header-content { overflow: hidden; }
/* Cabecera pegajosa. El borde inferior pasa a box-shadow inset: con border-collapse los bordes NO
   acompañan al sticky (se quedan scrolleando con las filas); la sombra sí. */
#listingsView .ls-service-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--primary);
}
/* Acceso directo a la ficha en cada línea: botón ✎ superpuesto al final de la 1ª celda (no ocupa
   sitio: absolute → nada se descoloca). Visible al pasar el ratón o con la fila seleccionada. */
#listingsView .ls-service-table td:first-child { position: relative; }
#listingsView .ls-row-open {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s;
}
#listingsView .ls-service-table tbody tr:hover .ls-row-open,
#listingsView .ls-service-table tbody tr.ls-row-selected .ls-row-open { opacity: 1; }

/* -- Vista compacta de Trafico: mismo lenguaje sleek (sin lineas verticales,
   cabecera clara con acento cobre), PRESERVANDO el color de fila por estado
   (finalizado/valorado/cancelado). Scope body.traffic-compact-mode. -- */
body.traffic-compact-mode .compact-service-table th,
body.traffic-compact-mode .compact-service-table td {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #eef1f6;
}
body.traffic-compact-mode .compact-service-table thead th {
  background: #eef2f8;
  border-bottom: 2px solid var(--primary);
  color: #5a6b80;
}
body.traffic-compact-mode .compact-service-table tbody tr:hover td { background: #f6ece2; }
body.traffic-compact-mode .compact-service-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
body.traffic-compact-mode .compact-service-table tbody tr.day-break-row td { border-top: 2px solid #c9d4e2; }

/* -- Vista compacta: botones de accion trasladados al hueco de la barra de
   filtros, todo en una sola fila. -- */
body.traffic-compact-mode .services-head-actions {
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-start;
  overflow-x: auto;
}
body.traffic-compact-mode #compactTrafficToggle { margin-left: auto; }
.compact-action-buttons { align-items: center; display: flex; flex-wrap: nowrap; gap: 6px; }
body.traffic-compact-mode .compact-action-buttons button {
  flex: 0 0 auto;
  font-size: 11px;
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   MÓVIL — adaptaciones SOLO para teléfono: pantalla estrecha (≤768px) O baja
   (≤480px). Lo segundo capta el MÓVIL EN HORIZONTAL (p.ej. 844×390): supera 768px
   de ancho pero sigue siendo un teléfono. Portátiles/escritorio tienen mucho más
   alto, así que NO entran aquí (la versión de ESCRITORIO no cambia — auditoría).
   ════════════════════════════════════════════════════════════════════════════ */

/* ===== Reporte de avería por cuestionario (35-fault-report.js) =====================================
   Una pregunta cada vez con botones grandes: el operativo va rápido y no ve nada improcedente.
   Jerarquía por COLOR (no por tamaño): la pregunta manda, las salidas de emergencia quedan apagadas. */
.fr-launch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px; }
.fr-launch button { display: inline-flex; align-items: center; gap: 6px; }
.fr-launch .muted { font-size: 11.5px; }
.fr-modal { background: #fff; border-radius: 14px; width: min(620px, 94vw); max-height: 92dvh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 48px rgba(16,26,40,.28); }
.fr-head { padding: 12px 14px 10px; border-bottom: 1px solid #eef2f7; background: #f8fafc; }
.fr-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fr-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #b23b31; }
.fr-title { margin: 1px 0 0; font-size: 19px; font-weight: 800; color: #1f2c3a; letter-spacing: .01em; }
/* Lo que YA sabemos: se enseña como contexto, nunca se pregunta. */
.fr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fr-chip { font-size: 11px; font-weight: 600; color: #56657a; background: #eef2f7;
  border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 9px; }
.fr-progress { height: 3px; background: #e6ebf2; border-radius: 3px; margin-top: 10px; overflow: hidden; }
.fr-progress i { display: block; height: 100%; background: #b23b31; transition: width .28s ease; }
.fr-progress-txt { font-size: 10.5px; color: #8a97a8; margin-top: 4px; }

.fr-body { padding: 14px; overflow: auto; flex: 1; }
/* Lo ya contestado, clicable para corregirse sin perder el resto. */
.fr-recap { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.fr-recap-chip { font-size: 11px; color: #56657a; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 3px 8px; cursor: pointer; }
.fr-recap-chip:hover { border-color: #b23b31; color: #b23b31; }
.fr-recap-chip b { color: #1f2c3a; font-weight: 700; }

.fr-q-title { font-size: 17px; font-weight: 800; color: #1f2c3a; margin-bottom: 3px; text-wrap: balance; }
.fr-q-hint { font-size: 12px; color: #8a97a8; margin-bottom: 12px; }
/* Rejilla SIMÉTRICA: nº de columnas según nº de opciones (2×2 para 4, fila de 3 para 3…), lo fija el JS en
   --fr-cols. Con nº impar en 2 columnas, la última ocupa el ancho completo para no dejar el hueco suelto. */
.fr-opts { display: grid; grid-template-columns: repeat(var(--fr-cols, 2), minmax(0, 1fr)); gap: 8px; }
.fr-opt.fr-opt--wide { grid-column: 1 / -1; }
.fr-opt { display: flex; align-items: center; gap: 8px; text-align: left; padding: 11px 12px;
  background: #fff; border: 1.5px solid #dfe5ec; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; color: #1f2c3a; transition: border-color .12s, background .12s; min-width: 0; }
.fr-opt:hover { border-color: #b23b31; background: #fdf6f5; }
.fr-opt.is-on { border-color: #b23b31; background: #fbe7e5; }
/* El texto es un flex item: sin `min-width:0` no encoge y las etiquetas largas ("Almacén o centro
   shunter") se salen del recuadro. Con esto parte de línea y el botón crece a lo alto. */
.fr-opt b { font-weight: 700; flex: 1 1 auto; min-width: 0; white-space: normal;
  overflow-wrap: anywhere; word-break: break-word; }
.fr-note-lbl { font-size: 12px; color: #56657a; margin: 9px 0 4px; font-weight: 600; }
.fr-opt-n { flex: none; width: 19px; height: 19px; border-radius: 5px; background: #eef2f7;
  color: #8a97a8; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.fr-opts.is-many .fr-opt { padding: 8px 11px; }
.fr-many-go { margin-top: 11px; display: flex; justify-content: flex-end; }
.fr-gps-row { margin-top: 8px; display: flex; }
.fr-text { width: 100%; font-size: 13.5px; padding: 9px 10px; border: 1.5px solid #dfe5ec; border-radius: 10px; }
.fr-photo input[type="file"] { width: 100%; font-size: 12.5px; }
.fr-files { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fr-file { font-size: 11px; background: #eef2f7; border-radius: 7px; padding: 2px 6px; color: #56657a; }
.fr-file button { border: 0; background: none; color: #b23b31; cursor: pointer; font-size: 13px; padding: 0 0 0 4px; }
/* Salidas de emergencia: siempre a mano pero APAGADAS, para que no compitan con la respuesta real. */
.fr-skips { display: flex; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed #e6ebf2; }
.fr-skips button { font-size: 11.5px; padding: 4px 10px; }

.fr-done-t { font-size: 14px; font-weight: 800; color: #1f7a4d; display: flex; align-items: center; gap: 6px; }
.fr-done-h { font-size: 11.5px; color: #8a97a8; margin: 2px 0 10px; }

/* Cajon de ARRASTRAR Y SOLTAR fotos + miniaturas con visor (mismo patron que el resto del TMS). */
.fr-drop { border: 1.5px dashed #cfd8e3; border-radius: 10px; padding: 14px 12px; text-align: center;
  cursor: pointer; background: #fbfcfe; transition: border-color .12s, background .12s; }
.fr-drop:hover { border-color: #b23b31; background: #fdf6f5; }
.fr-drop.is-dragover { border-color: #b23b31; background: #fbe7e5; border-style: solid; }
.fr-drop-t { font-size: 12.5px; font-weight: 700; color: #56657a; display: flex; align-items: center;
  justify-content: center; gap: 6px; }
.fr-drop-h { font-size: 11px; color: #9aa8ba; margin-top: 2px; }
.fr-thumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.fr-thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  border: 1px solid #e2e8f0; cursor: zoom-in; display: block; background: #eef2f7; }
.fr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fr-thumb-vid { width: 100%; height: 100%; display: grid; place-items: center; color: #56657a; }
/* La X va en overlay para NO descolocar la miniatura [[ui-buttons-dont-break-cell-layout]] */
.fr-thumb-x { position: absolute; top: 2px; right: 2px; width: 17px; height: 17px; border: 0;
  border-radius: 50%; background: rgba(15,23,42,.62); color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0; }
.fr-thumb-x:hover { background: #b23b31; }

/* Bloque de cierre (fotos + observaciones) en la pantalla final: separado del resumen para que se
   vea que ahi TODAVIA se puede aportar, no es solo lectura. */
.fr-cierre { margin-top: 12px; padding-top: 11px; border-top: 1px solid #eef2f7; }
.fr-cierre-t { font-size: 12.5px; font-weight: 700; color: #1f2c3a; margin-bottom: 3px; }
.fr-cierre input[type="file"] { width: 100%; font-size: 12px; }
.fr-cierre .fr-q-hint { margin-bottom: 6px; }
.fr-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-top: 1px solid #eef2f7; background: #f8fafc; }
.fr-foot-sp { flex: 1; }                    /* acciones a la derecha, como en el resto del TMS */
.fr-foot button { font-size: 12.5px; padding: 6px 13px; }


/* ===== Ficha / hilo de la averia (fase 3) ========================================================= */
/* La ficha va al DOBLE de ancho y a dos columnas (peticion del jefe: "bastante mas grande, casi el
   doble, porque seguramente vaya creciendo en campos y en informacion"). Izquierda = lo que paso y sus
   papeles; derecha = lo que hace taller. Por debajo de 1000px se apilan solas. */
.ft-modal { width: min(1180px, 96vw); }
.ft-modal .fr-body { padding-top: 12px; }
.ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.ft-cols .ft-col { min-width: 0; }
.ft-cols .ft-col > .ft-block-t:first-child { margin-top: 2px; }
@media (max-width: 1000px) { .ft-cols { grid-template-columns: 1fr; } }

/* Papeles de la averia (facturas): zona de arrastre + una fila por documento con sus importes. */
.ftd-box { display: flex; flex-direction: column; gap: 8px; }
.ftd-drop {
  border: 1.5px dashed #cfd8e3; border-radius: 10px; background: #fbfcfe; padding: 12px 12px 11px;
  text-align: center; transition: border-color .12s ease, background .12s ease;
}
.ftd-drop.is-dragover { border-color: #b23b31; background: #fdf4f2; }
.ftd-drop-t { font-size: 12.5px; font-weight: 700; color: #1f2c3a; }
.ftd-drop-s { font-size: 11px; color: #8a97a8; margin-top: 2px; }
.ftd-drop-a { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 9px; }
.ftd-drop-a select, .ftd-drop-a button { font-size: 12px; padding: 5px 11px; }
.ftd-empty { font-size: 11.5px; color: #8a97a8; text-align: center; padding: 4px 0 2px; }
.ftd-row { border: 1px solid #e6ebf2; border-radius: 10px; background: #fff; padding: 8px 10px 9px; }
.ftd-head { align-items: center; display: flex; gap: 7px; margin-bottom: 7px; }
.ftd-name {
  align-items: center; background: none; border: none; color: #3660a8; cursor: pointer; display: inline-flex;
  font-size: 12px; font-weight: 700; gap: 4px; max-width: 55%; overflow: hidden; padding: 0;
  text-overflow: ellipsis; white-space: nowrap;
}
.ftd-name:hover { color: #b23b31; text-decoration: underline; }
.ftd-warn { background: #fdf2dc; border-radius: 999px; color: #9a6a12; font-size: 10px; font-weight: 700; padding: 2px 7px; }
.ftd-ok { background: #e5f4ec; border-radius: 999px; color: #1f7a4d; font-size: 10px; font-weight: 700; padding: 2px 7px; }
.ftd-sp { flex: 1; }
.ftd-x { background: none; border: none; color: #97a5b6; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.ftd-x:hover { color: #b23b31; }
.ftd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; }
.ftd-grid label { color: #56657a; display: flex; flex-direction: column; font-size: 10.5px; gap: 2px; min-width: 0; }
.ftd-grid label.is-wide { grid-column: span 2; }
.ftd-grid input, .ftd-grid select { font-size: 12px; min-height: 28px; padding: 3px 6px; width: 100%; }
.ftd-act { display: flex; justify-content: flex-end; margin-top: 7px; }
.ftd-act button { font-size: 12px; padding: 5px 12px; }
.ftd-total { color: #1f7a4d; font-size: 11px; font-weight: 700; }
@media (max-width: 700px) { .ftd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ft-badge { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ft-st-report { background: #fdf2dc; color: #9a6a12; } .ft-st-draft { background: #eef2f7; color: #56657a; }
.ft-st-work { background: #e9f0fb; color: #3660a8; } .ft-st-done { background: #e5f4ec; color: #1f7a4d; }
.ft-mov.is-stop { background: #fbe7e5; color: #b23b31; border-color: #f3c9c4; }
.ft-mov.is-noop { background: #b23b31; color: #fff; border-color: #94271e; }   /* NO OPERATIVO = fuera de servicio */
.ft-mov.is-go { background: #e5f4ec; color: #1f7a4d; border-color: #bfe6cf; }
.ft-block-t { font-size: 12px; font-weight: 800; color: #1f2c3a; margin: 14px 0 7px; letter-spacing: .01em; }
.ft-parte { margin-top: 2px; border: 1px solid #eef2f7; border-radius: 10px; padding: 4px 11px 8px; }
.ft-parte > summary { font-size: 12px; font-weight: 700; color: #56657a; cursor: pointer; padding: 6px 0; }
.ft-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ft-att { font-size: 11px; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 7px; padding: 3px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: #56657a; }
.ft-att:hover { border-color: #b23b31; color: #b23b31; }
/* Miniatura de adjunto en la ficha de avería (imagen real; PDF/otros = icono de archivo). Clic → visor. */
.ft-att-thumb { width: 64px; height: 64px; padding: 0; border: 1px solid #dfe5ec; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f4f6f9; display: grid; place-items: center; }
.ft-att-thumb:hover { border-color: #b23b31; }
.ft-att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-att-doc { color: #8a97a8; }
/* Determinacion de taller: fondo tenue para que se lea como "capa aparte" del reporte. */
.ft-taller { background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 10px; padding: 10px 12px; margin-top: 6px; }
.ft-taller.is-ro { background: #f0f4f8; }
.ft-taller-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ft-taller-grid label { display: flex; flex-direction: column; font-size: 11.5px; gap: 3px; color: #56657a; }
.ft-note { font-size: 12px; color: #56657a; font-style: italic; margin-top: 4px; }
.ft-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ft-actions button { font-size: 12.5px; padding: 6px 13px; }
.ft-state-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ft-cost-grid label { display: flex; flex-direction: column; font-size: 11px; gap: 3px; color: #56657a; }
.ft-cost-grid input { font-size: 13px; padding: 6px 8px; border: 1.5px solid #dfe5ec; border-radius: 8px; width: 100%; }
.ft-cost-total { text-align: right; font-size: 13px; color: #56657a; margin-top: 7px; }
.ft-cost-total b { color: #1f2c3a; font-size: 15px; }
.ft-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ft-state-btns button { font-size: 12px; padding: 5px 11px; }
/* Conversacion: taller a un lado, trafico al otro; los hitos, centrados y en gris. */
.ft-msgs { display: flex; flex-direction: column; gap: 7px; max-height: 34vh; overflow: auto; padding: 4px 2px; }
.ft-msg { max-width: 82%; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; }
.ft-trafico-side { align-self: flex-start; background: #eef2f7; }
.ft-taller-side { align-self: flex-end; background: #e9f0fb; }
.ft-msg-head { font-size: 10.5px; color: #8a97a8; margin-bottom: 2px; }
.ft-msg-head b { color: #1f2c3a; }
.ft-needs { background: #fdf2dc; color: #9a6a12; border-radius: 5px; padding: 0 5px; font-weight: 700; }
.ft-when { float: right; color: #b5c0cd; }
.ft-milestone { align-self: center; font-size: 11px; color: #8a97a8; display: flex; align-items: center; gap: 5px; }
.ft-milestone .ft-when { float: none; margin-left: 4px; }
.ft-compose { margin-top: 9px; }
.ft-ask { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #56657a; margin-top: 5px; }
.ft-ask input { width: auto; flex: none; }

@media (max-width: 768px), (max-height: 480px) {
  /* Recuadro de mensajes del Inicio: en móvil el botón a la derecha estrujaba el texto (se partía
     palabra a palabra). Lo apilamos: icono + texto a todo el ancho, y el botón a ancho completo
     debajo del recuadro. */
  .hmb-main { flex-wrap: wrap; }
  .hmb-action { flex: 1 0 100%; margin-top: 12px; padding: 12px 18px; }

  /* --- Barra superior en móvil: que la navegación no se apelotone ---
     El logo (~221px) + la cuenta (~165px) ya llenan los ~390px del ancho, así
     que la nav no cabía en la misma fila (quedaba a 0px). Solución: marca y
     cuenta arriba; la NAVEGACIÓN baja a su propia fila, a lo ancho, y se
     desplaza en horizontal (swipe) si no caben todas las entradas. Cada entrada
     conserva su tamaño natural (ya no se encoge ni corta el texto).
     La barra es position:fixed, así que al ocupar 2 filas se sube el
     padding-top de .main para que el contenido no quede tapado. */
  .sidebar {
    flex-wrap: wrap;
    height: auto;
    align-items: center;
    row-gap: 4px;
    column-gap: 10px;                  /* en escritorio es 20px; aquí más justo */
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .sidebar .brand { flex: 0 1 auto; min-width: 0; }
  .sidebar .brand > div { display: none; }           /* móvil: solo el logo "DLT"; el texto largo ocupaba 173px */
  .sidebar .account-chip { margin-left: auto; }      /* cuenta pegada a la derecha */
  .sidebar .nav {
    order: 10;                          /* siempre la última: cae a su propia fila */
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;                       /* habilita el scroll horizontal */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  /* desplazamiento suave en iOS */
  }
  .sidebar .nav > .nav-line { flex: 0 0 auto; }      /* entradas de 1er nivel: no encoger */
  .sidebar .nav::-webkit-scrollbar { height: 3px; }
  .sidebar .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 3px; }
  /* El contenido baja para no quedar bajo la barra fija de 2 filas (~98px en móvil).
     Cada vista define su propio padding (`body.traffic-fleet-summary-mode .main`, etc.,
     especificidad 0,2,0), así que uso `.app-shell main.main` (0,2,1) para ganar a TODAS
     y dejar el contenido (incl. la barra de métricas `.topbar`) por debajo de la barra. */
  .app-shell main.main { padding-top: 104px; }

  /* ---- #1 Barra de contexto (métricas + filtros) ----
     En escritorio es una fila (grid `160px 360px…` o flex) más ancha que el móvil, lo que
     desplazaba TODA la página de lado en casi todas las vistas. Aquí se apila en vertical y
     las tarjetas de métricas pasan a 2 columnas. El `!important` gana a las variantes por
     vista (body.fleet-topbar-mode, body.traffic-fleet-summary-mode…); como está dentro del
     @media, el escritorio NO se ve afectado. */
  main.main .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  main.main .topbar > * { min-width: 0; max-width: 100%; }
  main.main .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main.main .fleet-summary-bar { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  main.main .range-date-control { grid-template-columns: 1fr 1fr !important; }
  main.main .quick-date-filters { flex-wrap: wrap; }

  /* ---- #2 Tablas anchas: que se desplacen DENTRO de su caja, no que empujen la página ----
     Listados: su `.ls-table-wrap` iba en overflow:visible, así que la tabla (2193px) escapaba
     y movía TODA la página 716px de lado. Se fuerza scroll horizontal propio y se acota el
     ancho. (Las demás tablas de datos ya van en `.admin-table-wrap` con scroll; lo reforzamos.) */
  main.main .ls-table-wrap,
  main.main .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Listados (~713px de desplazamiento lateral). Dos causas:
     1) `#listingsView .ls-panel.active` está forzado a `overflow:visible !important` con un
        selector de ID -> hay que igualar especificidad + !important + ir DESPUÉS para ganar.
     2) `.ls-toolbar` tenía `align-self:flex-start` -> se dimensionaba a su CONTENIDO (~28
        filtros, ~1092px) en vez de al ancho del panel. Lo estiramos al ancho; conserva su
        propio `overflow-x:auto`, así que los filtros se ven desplazando el toolbar.
     La tabla mantiene su scroll propio en `.ls-table-wrap`. Solo móvil; escritorio intacto. */
  #listingsView .ls-panel.active { overflow-x: hidden !important; min-width: 0; }
  #listingsView .ls-toolbar { align-self: stretch !important; min-width: 0 !important; max-width: 100% !important; }
  #listingsView .ls-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }
  #listingsView .ls-toolbar-group {
    flex: 1 1 148px !important;
    min-width: 0 !important;
  }
  #listingsView .ls-toolbar-group .ls-date {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  #listingsView .ls-toolbar .ls-select,
  #listingsView .ls-toolbar .ls-search {
    flex: 1 1 170px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #listingsView .ls-toolbar-right {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #listingsView .ls-toolbar-right .ls-export-btn {
    flex: 1 1 142px !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #listingsView .ls-count-inline {
    align-items: center !important;
    display: inline-flex !important;
    flex: 1 1 100% !important;
    min-height: 24px !important;
  }

  /* Órdenes de carga: la barra de pestañas (.ext-tab-bar, flex nowrap) tenía contenido más
     ancho que la pantalla y se desbordaba ~49px; que envuelva en móvil. */
  main.main .ext-tab-bar { flex-wrap: wrap; min-width: 0; }

  /* ---- #4 Submenús: desplegable que SE ABRE al tocar el apartado ----
     En escritorio el submenú es un desplegable flotante (absolute, bajo el padre) que se abre con
     la flecha o el hover. En móvil táctil no hay hover y la flecha es diminuta, así que un JS
     (solo ≤768px) abre el submenú al tocar el apartado padre. Aquí el submenú ABIERTO se muestra
     como panel FIJO a lo ancho bajo la barra superior, para que el overflow de la barra no lo
     recorte (era la causa de que "no se abriera"). El cierre: tocar un subapartado o fuera. */
  .sidebar .nav .submenu-arrow { opacity: 1; }
  .sidebar .nav .submenu.open {
    position: fixed;
    top: 100px;            /* justo bajo la barra superior (~98px) */
    left: 8px;
    right: 8px;
    width: auto;
    min-width: 0;
    max-height: 64vh;
    overflow-y: auto;
    grid-template-columns: 1fr;   /* lista vertical */
    z-index: 60;
  }
  .sidebar .nav .submenu.open .submenu-line,
  .sidebar .nav .submenu.open .submenu-item { width: 100%; }

  /* ---- #5 Listas/tablas invisibles -> FLUJO NATURAL en móvil ----
     El TMS usa un layout de escritorio tipo app: `main.main` es un grid de altura fija y cada
     panel scrollea por dentro. A 390px ese grid colapsa (la fila de la vista queda en 0px), así
     que en Tráfico solo se veían los banners y en Conductores/Flota no salía la lista (la tabla
     estaba en el DOM con 958px pero su contenedor medía 2px). Aquí pasamos a flujo natural: la
     PÁGINA scrollea y las listas se ven enteras. En escritorio (>768px) el grid no se toca. */
  /* La PÁGINA debe scrollear: en escritorio body/main usan overflow:hidden y el scroll va por
     dentro de cada panel; en móvil eso bloqueaba el scroll táctil aunque el contenido fuese más
     alto que la pantalla. Aquí lo liberamos para que scrollee la página entera. */
  html, body { height: auto !important; min-height: 100% !important; overflow: visible !important; }
  main.main { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
  main.main .view.active { height: auto !important; min-height: 0 !important; }
  main.main .work-grid,
  main.main .split-view,
  main.main .panel { display: block !important; height: auto !important; min-height: 0 !important; }
  main.main .split-view { grid-template-columns: 1fr !important; }   /* paneles partidos -> apilados */
  main.main .service-list,
  main.main .table-list,
  main.main .controlled-list { height: auto !important; max-height: none !important; }

  /* Direcciones (Tráfico): apilar en 1 columna las direcciones de carga/descarga y los datos
     del cliente; en escritorio van en 2 columnas pero en móvil estrechan demasiado. */
  main.main .taddr-addr-cols { grid-template-columns: 1fr !important; }
  main.main .taddr-readonly { grid-template-columns: 1fr !important; }
  /* La barra OPERATIVA (selector de cliente | direcciones) iba en 2 columnas lado a lado;
     apilarla (la de la izquierda debajo de la de la derecha, por eso column-reverse). */
  main.main .taddr-clientbar { flex-direction: column-reverse !important; align-items: stretch !important; }
  main.main .taddr-clientbar .taddr-bar-group { width: 100% !important; min-width: 0 !important; }

  /* ---- #6 Banners de métricas: SOLO en Tráfico diario, a la mitad (2 columnas) ----
     En el resto de secciones (Inicio, Conductores, Flota, Listados...) los banners del topbar
     estorban: Inicio ya tiene su propio panel de tarjetas. Por eso EN MÓVIL se ocultan por
     defecto y solo se muestran en Tráfico (body.traffic-fleet-summary-mode), compactos en
     rejilla de 2 columnas (sus contenedores son display:contents, por eso hay que forzar grid).
     Solo móvil: en escritorio los recuadros contextuales del topbar se quedan como están. */
  main.main .topbar .summary-grid,
  main.main .topbar .fleet-summary-bar { display: none !important; }
  body.traffic-fleet-summary-mode main.main .summary-grid,
  body.traffic-fleet-summary-mode main.main .fleet-summary-bar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  body.traffic-fleet-summary-mode main.main .summary-grid > *,
  body.traffic-fleet-summary-mode main.main .fleet-summary-bar > * {
    display: flex !important;          /* etiqueta + número EN LÍNEA -> tarjeta más baja */
    flex-wrap: wrap !important;        /* la lista de matrículas (si la hay) baja sola */
    align-items: baseline !important;
    gap: 1px 6px !important;
    padding: 3px 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;            /* anula el height:54px fijo -> tarjeta a la altura del contenido */
    overflow: hidden !important;        /* simetría: el contenido no se sale de la tarjeta */
  }

  /* ---- #7 Popups / fichas ----
     El "ancho de pantalla + sin redimensionar" ya NO se aplica por ancho de ventana (eso hacía
     que en un PC con ventana estrecha el popup saliera estirado y sin tirador). Ahora ese modo
     vive en un bloque SOLO para dispositivos táctiles reales (ver más abajo, fuera de este
     @media). En PC (aunque la ventana sea estrecha) el popup conserva su comportamiento de
     escritorio: redimensionable y con tamaño propio. Móvil y web siguen independientes porque,
     además, en móvil el tamaño NO se guarda (savePopupSize/restorePopupSize en JS). */

  /* ---- #8 Quitar en móvil los formularios de alta "Nuevo conductor/camión/repostaje" ----
     Ocupan mucho y esas altas se hacen cómodas en la web. Se oculta SOLO el panel que contiene
     el <form> de alta; la lista y sus filtros (que NO son <form>) se mantienen. */
  #driversView .split-view > .panel:has(form),
  #vehiclesView .split-view > .panel:has(form),
  #fuelingsView .split-view > .panel:has(form) { display: none !important; }

  /* ---- #5 Ficha del vehículo: recolocar los campos para que quepan a lo ancho ----
     Las rejillas de campos de la ficha usan columnas fijas (p.ej. .vehicle-profile-grid =
     6×120px = 780px) que se salían del ancho del móvil. En móvil van a 1 columna -> la ficha se
     ALARGA pero todos los campos caben y se leen. Las filas con nombre largo flexionan la columna
     del nombre en vez de desbordar. Solo móvil; en escritorio la ficha sigue en varias columnas. */
  .vehicle-profile-grid,
  .vehicle-doc-fields,
  .fault-reporter-row,
  .vehicle-doc-lanes { grid-template-columns: 1fr !important; }
  .veh-card-grid { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .vehicle-doc-title { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  /* El contenedor (sección/form) tenía min-width:auto -> crecía a su contenido (528px) dentro
     del popup (que entonces scrolleaba en horizontal). Le damos ancho definido del popup para
     que las rejillas de 1 columna ocupen el ancho real y los campos quepan. */
  .vehicle-doc-card .vehicle-doc-section,
  .vehicle-doc-card form,
  .vehicle-doc-card .vehicle-profile-grid,
  .vehicle-doc-card .vehicle-doc-fields,
  .vehicle-doc-card .fault-reporter-row,
  .vehicle-doc-card .vehicle-doc-lanes,
  .vehicle-doc-card .veh-card-grid,
  .vehicle-doc-card .vehicle-doc-title {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vehicle-doc-card input,
  .vehicle-doc-card select,
  .vehicle-doc-card textarea { max-width: 100% !important; min-width: 0 !important; }
  /* Red de seguridad: ningún descendiente (formulario de aceite, título, etc.) excede el ancho
     del popup, y el popup NO scrollea en horizontal. Como las rejillas ya van a 1 columna, no
     se corta contenido: simplemente todo se apila a lo ancho de la ficha. */
  .vehicle-doc-card { overflow-x: hidden !important; }
  .vehicle-doc-card * { min-width: 0 !important; max-width: 100% !important; }
  .vehicle-doc-card .vehicle-doc-title { flex-wrap: wrap !important; }
  .vehicle-doc-card .vehicle-oil-form { grid-template-columns: 1fr !important; }

  /* ---- #4 Usuarios: la ficha de edición DEBAJO de la lista (no a la derecha) ----
     En escritorio es `grid-template-columns: 320px 1fr` (lista | ficha). En móvil se apila:
     la lista arriba y la ficha de edición debajo. (En la web sigue a la derecha.) */
  #usersView .um-body { grid-template-columns: 1fr !important; }
  #usersView .um-list { max-height: none !important; }

  /* A) Avería con fotos: la fila (flex nowrap) envuelve, para que Editar/Borrar no queden justos. */
  .vehicle-doc-card .open-fault { flex-wrap: wrap !important; }

  /* B) Triángulo del submenú más grande y tocable (el desplegable se abre SOLO con él). */
  .sidebar .nav .submenu-arrow {
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 4px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* C) Al scrollear dentro de un popup, que NO arrastre la lista del fondo (scroll chaining). */
  .attachment-card,
  .traffic-popup-card,
  .attachment-panel { overscroll-behavior: contain !important; }
  .attachment-panel {
    padding: 8px !important;
  }
  .attachment-panel.open {
    align-items: center !important;
    justify-items: center !important;
    place-items: center !important;
  }
  #vehicleDocsPanel.open {
    padding: 8px !important;
    place-items: start center !important;
  }
  .attachment-card,
  .traffic-popup-card,
  .traffic-popup-resizable,
  .rec-card,
  .rec-edit-card,
  .rec-dialog {
    box-sizing: border-box !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    width: min(100%, calc(100vw - 16px)) !important;
  }
  .attachment-card,
  .traffic-popup-card,
  .traffic-popup-resizable {
    max-height: calc(100dvh - 16px) !important;
    resize: none !important;
  }
  .traffic-popup-scroll,
  .traffic-popup-resizable .field-edit-body,
  .traffic-popup-resizable .field-picker-grid,
  .traffic-popup-resizable .compact-filter-values,
  .traffic-popup-resizable .driver-send-review,
  .traffic-popup-resizable .client-order-preview,
  .traffic-popup-resizable .client-order-days-grid,
  .traffic-popup-resizable .service-edit-body {
    max-height: calc(100dvh - 150px) !important;
    overscroll-behavior: contain !important;
  }
  .traffic-popup-card > .detail-head,
  .traffic-popup-card > .form-actions,
  .attachment-card > .detail-head,
  .attachment-card > .form-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  .traffic-popup-card > .detail-head > *,
  .attachment-card > .detail-head > * {
    min-width: 0 !important;
  }
  .traffic-popup-card > .form-actions button,
  .attachment-card > .form-actions button {
    flex: 1 1 128px !important;
    min-width: 0 !important;
  }
  .rec-overlay {
    padding: 8px !important;
  }
  .rec-list-card {
    max-width: calc(100vw - 16px) !important;
  }

  /* ---- #1 Tráfico: compactar la zona de fecha (ganar filas) ----
     El bloque .date-control apilaba toggle "Día/Rango" + fechas en varias filas. Aquí van
     el toggle y las DOS fechas en UNA fila. (Los botones Día/Mañana/Tres días/Semana viven
     ahora en la barra de filtros del panel de servicios, no en el topbar.) */
  main.main .topbar .date-control {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  main.main .topbar .date-control .range-date-control { flex: 1 1 auto !important; min-width: 0 !important; }

  /* ---- Repostajes: tarjetas demasiado altas ----
     La .fueling-line es un grid de 1 columna (regla vieja) y apilaba sus 13 campos en vertical
     (~376px), además con la tarjeta a 1202px (scroll horizontal): lo peor de ambos. Aquí la
     tarjeta ocupa el ancho de pantalla y los 13 campos fluyen en rejilla compacta de varias
     columnas -> mucho más baja y sin scroll horizontal. */
  #fuelingsView .table-list { grid-template-columns: minmax(0, 1fr) !important; }
  #fuelingsView .fueling-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
  #fuelingsView .fueling-line {
    display: flex !important;
    flex-wrap: wrap !important;          /* los campos fluyen y envuelven a su ancho natural */
    align-items: baseline !important;
    gap: 1px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #fuelingsView .fueling-line > * { flex: 0 0 auto !important; min-width: 0 !important; max-width: 100% !important; }

  /* ---- Tráfico · cabecera "Servicios del día": botones que se solapaban ----
     La cabecera lleva muchos botones de acción (Enviar a app, Duplicar, Disponibles, MRW, Tarjetas,
     Avería, Repostajes, Aceite + Vista compacta) en una fila que a 375px se montaban unos sobre
     otros. Se apila la cabecera y las barras de botones envuelven a varias filas. Solo móvil. */
  main.main .services-panel .panel-head { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px; }
  main.main .services-panel .panel-title-actions,
  main.main .services-panel .services-head-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px; min-width: 0; }
  main.main .services-panel .traffic-row-zoom-control {
    flex: 1 1 100% !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
    white-space: normal;
    width: 100%;
  }
  main.main .services-panel .traffic-row-zoom-toggle-slot {
    flex: 0 0 auto;
  }
  main.main .services-panel .traffic-row-zoom-control .traffic-chrome-toggle {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: nowrap;
  }
  main.main .services-panel .traffic-row-zoom-control input[type="range"] {
    flex: 1 1 128px;
    min-width: 110px;
    width: auto;
  }
  main.main .services-panel .traffic-row-zoom-control output {
    flex: 0 0 34px;
  }

  /* ---- Tráfico · Nuevo servicio: apilar en móvil ----
     1) El editor (zona de email a la izquierda | formulario a la derecha) se apila: el email
        arriba y el FORMULARIO a ancho completo (en escritorio iba en una columna estrecha).
        OJO: solo cuando NO está colapsado. Si lo aplicábamos siempre (.service-editor-body), el
        display:block !important anulaba el colapso (.is-collapsed .service-editor-body{display:none})
        y la ficha "Nuevo servicio" se quedaba abierta ocupando toda la pantalla y tapando los
        servicios del día. Con :not(.is-collapsed) el panel colapsa de verdad en móvil. */
  .service-editor-panel:not(.is-collapsed) .service-editor-body { display: block !important; }
  .service-editor-body .mail-drop-zone,
  .service-editor-body #pasteMailButton,
  .service-editor-body #serviceForm { grid-column: auto !important; grid-row: auto !important; }
  .service-editor-body #pasteMailButton { margin: 6px 0; min-height: 52px; }
  /* 2) La zona carga|descarga va en 2 columnas en escritorio; a ~390px estrecharía demasiado, así
        que se apila (carga arriba, descarga debajo) y cada parada usa el ancho completo (dirección
        legible + fecha/hora debajo). La fila superior (cliente · albarán · cita · recurrentes)
        también se apila a lo ancho. */
  #serviceForm .svc-route { grid-template-columns: 1fr !important; }
  #serviceForm .svc-top-row { flex-direction: column; align-items: stretch; }
  /* en columna, el flex-basis del escritorio (200px) sería ALTURA: lo reseteo a contenido */
  #serviceForm .svc-top-row .svc-clientselect,
  #serviceForm .svc-top-row .svc-albaran-wrap,
  #serviceForm .svc-top-row .svc-recurring-actions { flex: 0 0 auto; width: 100%; min-width: 0; }
  #serviceForm .svc-top-row .svc-recurring-actions { justify-content: flex-start; }
  #serviceForm .svc-top-row .svc-recurring-actions button { flex: 1 1 auto; }
  /* 3) Asignación (Conductor/Externa · Matrícula · Remolque · Precios): 5 columnas se apretaban
        en móvil. Conductor a ancho completo; matrícula|remolque y precio pagar|cobrar en pares. */
  #serviceForm .svc-assign-row { grid-template-columns: 1fr 1fr !important; }
  #serviceForm .svc-assign-row .svc-assign-who { grid-column: 1 / -1; }
}

/* ====================================================================================
   Popups a ANCHO COMPLETO solo en DISPOSITIVOS TÁCTILES reales (teléfonos), no en PC.
   `(hover: none) and (pointer: coarse)` = el puntero primario es el dedo y no hay hover:
   teléfonos sí; un PC (aunque tenga la ventana estrecha, o sea un portátil táctil con
   ratón) NO. Así, en el ordenador el popup siempre mantiene su comportamiento de
   escritorio (redimensionable, con tamaño propio) y la web NUNCA hereda el tamaño del
   móvil. Se limita a <=820px para no estirar el popup en tablets grandes. */
@media (hover: none) and (pointer: coarse) and (max-width: 820px) {
  .attachment-card,
  .traffic-popup-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 90vh !important;
    resize: none !important;
  }
}

/* ── Operativa Verallia (parrilla del plan diario) ───────────────────────── */
#veralliaPlanContent { padding: 4px 0 24px; }
.vp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vp-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vp-nav button { min-width: 36px; }
/* Combo de SEMANAS (bloques semanales como los emails "SEMANA N - DLT"): botón que abre un calendario
   de dos meses. Mismo ancho que el campo de fecha de arriba (324px) para que queden alineados. */
.vp-weekcombo-wrap { position: relative; display: inline-block; }
.vp-weeksel { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 13px; cursor: pointer; background: #fff; width: 324px; max-width: 324px; height: 36px; box-sizing: border-box; text-align: left; color: #333; font-family: inherit; }
.vp-weeksel:hover { border-color: #9bb4d6; }
.vp-weeksel.open { border-color: #5a86c6; box-shadow: 0 0 0 2px rgba(90, 134, 198, .18); }
.vp-weeksel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-weeksel-caret { color: #7a93b5; font-size: 11px; flex: 0 0 auto; transition: transform .12s; }
.vp-weeksel.open .vp-weeksel-caret { transform: rotate(180deg); }
/* Popup del calendario: anclado bajo el combo (a la izquierda de la barra), se extiende hacia la
   derecha por el hueco central. Dos meses lado a lado. */
.vp-weekcal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; background: #fff; border: 1px solid #cdd7e5; border-radius: 10px; box-shadow: 0 12px 34px rgba(20, 50, 90, .18); padding: 12px 14px; }
.vp-weekcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vp-weekcal-caption { font-weight: 600; font-size: 12.5px; color: #556; }
/* Flechas de mes: iconos limpios. `padding:0` + flex-centrado ANULAN el padding global de <button>
   (11px 14px) que descentraba el chevron y deformaba la caja. */
.vp-wc-nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid #d5dde8; border-radius: 8px; background: #fff; cursor: pointer; color: #2c5c9c; font-size: 20px; line-height: 1; transition: border-color .12s, background .12s, color .12s; }
.vp-wc-nav:hover { border-color: #5a86c6; background: #eef5fd; color: #1c4a86; }
.vp-wc-nav:active { background: #dcebfb; }
.vp-weekcal-months { display: flex; gap: 20px; }
.vp-wc-mtitle { text-align: center; font-weight: 600; font-size: 12.5px; color: #2c3e56; margin-bottom: 6px; }
.vp-wc-grid { display: flex; flex-direction: column; gap: 2px; }
.vp-wc-dow, .vp-wc-week { display: grid; grid-template-columns: 26px repeat(7, 30px); align-items: center; }
.vp-wc-dow span { text-align: center; font-size: 10.5px; color: #8a99ad; font-weight: 600; }
.vp-wc-dow .vp-wc-num { font-size: 9px; color: #aab6c6; }
.vp-wc-week { border-radius: 6px; cursor: pointer; padding: 1px 0; transition: background .1s; }
.vp-wc-week:hover { background: #e6f0fb; box-shadow: inset 0 0 0 1px #b7d2ef; }
.vp-wc-num { text-align: center; font-size: 10px; color: #9aa7b8; }
.vp-wc-day { text-align: center; font-size: 12px; color: #37475c; padding: 3px 0; border-radius: 5px; }
.vp-wc-out { color: #c3ccd8; }
.vp-wc-today { outline: 1.5px solid #d08b1f; outline-offset: -3px; font-weight: 700; }
.vp-wc-sel { background: #dbeafe; }
.vp-wc-sel:hover { background: #cfe3fb; }
.vp-wc-plan { box-shadow: inset 3px 0 0 #4a86c6; }
.vp-wc-plan .vp-wc-num { color: #2c5c9c; font-weight: 700; }
.vp-weekcal-foot { display: flex; gap: 14px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #eef2f7; font-size: 11px; color: #7a8aa0; }
.vp-wc-legend { display: inline-flex; align-items: center; gap: 5px; }
.vp-wc-legend::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.vp-wc-legend-plan::before { box-shadow: inset 3px 0 0 #4a86c6; border: 1px solid #cdd7e5; }
.vp-wc-legend-sel::before { background: #dbeafe; }
/* La navegación (‹ Hoy › + combo de semanas) va en una sola fila; el max-width le deja hueco central
   a la zona de soltar la imagen para que no la empuje. */
.vp-nav { max-width: 640px; }
.vp-weeklabel { font-weight: 600; font-size: 14px; white-space: nowrap; color: #444; }
.vp-actions { display: flex; gap: 8px; }
.vp-grid { border: 1px solid #e2e2e2; border-radius: 10px; overflow: auto; background: #fff; }
.vp-row { display: grid; grid-template-columns: 66px repeat(5, minmax(120px, 1fr)); min-width: 760px; }
/* Separador de DÍA marcado (más evidente que las líneas de camión, que quedan finas): jerarquía días > camiones. */
.vp-row + .vp-row { border-top: 2px solid #aab4c4; }
.vp-head { background: #f7f8fa; }
.vp-head .vp-slotcol { padding: 8px 10px; border-left: 1px solid #ededed; }
.vp-slot-name { font-weight: 600; font-size: 13px; }
.vp-slot-plate { font-size: 12px; color: #555; }
.vp-slot-driver { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-daycol { padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fafbfc; }
.vp-dow { font-size: 12px; font-weight: 600; text-transform: capitalize; }
.vp-dnum { font-size: 11px; color: #888; }
.vp-cell { border-left: 1px solid #ededed; padding: 6px; min-height: 80px; display: flex; flex-direction: column; gap: 6px; }
.vp-card { border: 1px solid #dfe3e8; border-radius: 7px; padding: 7px 8px; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.vp-card[draggable="true"] { cursor: grab; }
.vp-card.vp-dragging { opacity: .45; cursor: grabbing; }
.vp-card.vp-drop-onto { border-color: #185fa5; box-shadow: 0 0 0 2px rgba(24, 95, 165, .28); }
.vp-cell.vp-drop-target { background: #eef5fb; outline: 2px dashed #9cc2e8; outline-offset: -3px; }
.vp-card:hover { border-color: #9bb4d6; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.vp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 16px; }
.vp-card-ref { font-family: monospace; font-size: 12px; font-weight: 600; margin-top: 4px; }
.vp-card-route { font-size: 12px; margin-top: 2px; }
.vp-card-prevu { font-size: 10.5px; color: #8a6d3b; margin-top: 2px; font-style: italic; }
.vp-arrow { color: #aab; }
.vp-card-cita { font-size: 11px; color: #667; margin-top: 4px; }
/* Dos viajes en la celda: la cita de cada viaje pegada a su línea de ruta. */
.vp-card-legcita { font-size: 10.5px; color: #92400e; background: #fef3c7; border-radius: 5px;
  padding: 0 5px; font-weight: 700; white-space: nowrap; }
.vp-card-gen { color: #1d9e75; font-weight: 700; }
.vp-card-done { background: #f6fbf8; }
.vp-card-review { border-color: #e6a700; border-width: 2px; }
/* MULTI-DÍA (tránsito): la carga descarga otro día. Barra ámbar inset (sin descolocar) + línea "En tránsito". */
.vp-card-transit { font-size: 10.5px; color: #6a5a2e; margin-top: 3px; font-style: italic; }
.vp-card-multiday { box-shadow: inset 3px 0 0 #cfa24e; }
.vp-card-multiday:hover { box-shadow: inset 3px 0 0 #cfa24e, 0 1px 4px rgba(0,0,0,.07); }
/* Cruce de finde: decisión de salida (domingo=jornada extra / lunes) o aviso de que falta decidirla. */
.vp-card-wd { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 7px; border-radius: 5px; margin-top: 3px; }
.vp-wd-sunday { background: #fde2c8; color: #a24d0b; border: 1px solid #eab308; }
.vp-wd-monday { background: #eef2f6; color: #64748b; }
.vp-wd-ask { background: #fef9c3; color: #854d0e; border: 1px dashed #ca8a04; }
/* Eco de SALIDA en domingo (jornada extra): anotación en la fila del domingo; clic abre la carga. */
.vp-echo-depart { border-color: #eab308; background: #fefce8; }
.vp-echo-depart:hover { border-color: #ca8a04; background: #fef9c3; }
.vp-echo-tag-depart { color: #a24d0b; background: #fde2c8; }
/* Nota del troceo de finde en la tabla de tramos de facturación. */
.vbl-wknote { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: #eef2f6; color: #64748b; margin-left: 4px; white-space: nowrap; }
.vbl-wknote-sunday { background: #fde2c8; color: #a24d0b; }
/* Eco de DESCARGA (solo lectura) en la casilla del día de entrega. Es el MISMO viaje; clic abre su carga. */
.vp-echo { border: 1px dashed #b9c4d2; background: #f3f6fa; border-radius: 8px; padding: 5px 8px; margin-bottom: 6px; cursor: pointer; opacity: .92; }
.vp-echo:hover { border-color: #7fa8d4; background: #eef4fb; opacity: 1; }
.vp-echo-tag { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #3d7a57; background: #e3f2ea; padding: 1px 6px; border-radius: 5px; margin-right: 5px; }
.vp-echo-dest { font-size: 11.5px; font-weight: 600; color: #33465e; }
.vp-echo-ref { display: block; font-family: monospace; font-size: 10px; color: #8492a6; margin-top: 2px; }
/* Descarga previa registrada a mano: eco en tono ámbar (arrastre de un viaje anterior). */
.vp-echo-manual { border-style: dashed; border-color: #cbb37a; background: #fbf7ef; }
.vp-echo-manual:hover { border-color: #b9902f; background: #f8f0e0; }
/* Selector de TIPO de entrada en la ficha (Carga / Descarga que llega de antes) + nota. */
.vp-typerow { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; flex-wrap: wrap; }
.vp-typelabel { font-size: 11px; font-weight: 600; color: #667; text-transform: uppercase; letter-spacing: .3px; }
.vp-typerow select { padding: 4px 8px; border: 1px solid #c7d2e0; border-radius: 6px; font-size: 13px; }
.vp-typebadge { display: inline-block; font-size: 11px; font-weight: 700; color: #6a5a2e; background: #fdf3e0; border: 1px solid #e6cf9e; padding: 3px 9px; border-radius: 6px; }
.vp-delivery-note { font-size: 11.5px; color: #566; background: #f3f6fa; border-left: 3px solid #cfa24e; padding: 6px 10px; margin: 6px 0 2px; border-radius: 4px; }
.vp-chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 6px; }
.vp-chip-recogida { background: #e6f1fb; color: #185fa5; }
.vp-chip-ruta { background: #e1f5ee; color: #0f6e56; }
.vp-chip-asignar { background: #eee; color: #666; }
.vp-chip-review { background: #fcefd2; color: #8a5a00; }
/* Transporeon: un transporte ANULADO por el cargador no es "un estado mas", es lo que hay que ver. */
.vp-chip-anulado { background: #fde2e1; color: #a4231f; font-weight: 700; }
.tp-anulado { background: #fffafa; }
.tp-anulado > div:first-child > span:first-child { text-decoration: line-through; color: #a4231f; }
/* Cabecera de dia en la lista de transportes (con 50+ una lista plana no se lee). */
.tp-day { position: sticky; top: 0; z-index: 1; background: #f3f6fa; border-bottom: 1px solid #dde3ea;
  padding: 4px 12px; font-size: .76rem; font-weight: 800; letter-spacing: .03em; color: #445; }
.tp-day-n { margin-left: 8px; background: #dde5f0; color: #33415c; border-radius: 9px;
  padding: 0 7px; font-size: .72rem; font-weight: 700; }
/* Lo que cambio el cargador DESPUES de asignarnoslo: no llega por el email del plan, solo por TP. */
.tp-cambios { margin-top: 4px; background: #fdf3e0; border: 1px solid #f0d9a8; border-radius: 4px;
  padding: 4px 8px; font-size: .76rem; color: #8a5a00; line-height: 1.4; }
.tp-cambios svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.vp-add { border: 1px dashed #cbd2da; background: transparent; color: #9aa3ad; border-radius: 7px; padding: 3px; font-size: 16px; line-height: 1; cursor: pointer; }
.vp-add-top { font-size: 11px; font-weight: 700; padding: 2px 4px; color: #7a889c; opacity: .85; }
.vp-add-top:hover { opacity: 1; border-color: #185fa5; color: #185fa5; }
/* "Salida domingo": botón pequeño y discreto en rojo pálido, en la cabecera del camión */
.vp-sunday-btn { display: block; width: 100%; margin-top: 6px; border: 1px solid #f0b6ae; background: #fdeeec; color: #b23b31;
  font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 5px; cursor: pointer; opacity: .82; }
.vp-sunday-btn:hover { opacity: 1; background: #fbe0dd; }
/* ARRANQUE EN FRÍO, visible en la columna del camión: de dónde sale, cargado/vacío y si sale dom o lun.
   Antes solo se veía el aviso MIENTRAS faltaba, así que al rellenarlo no quedaba rastro y parecía perdido. */
.vp-cold-chip { display: block; width: 100%; margin-top: 6px; text-align: left; cursor: pointer;
  border: 1px solid #cfd9e6; background: #eef3f9; color: #3d5573; font-size: 10px; font-weight: 600;
  padding: 3px 6px; border-radius: 5px; line-height: 1.3; }
.vp-cold-chip:hover { background: #e3ebf6; }
.vp-cold-chip b { font-weight: 800; color: #27405f; }
.vp-cold-chip.is-loaded { border-color: #bfe0cd; background: #edf7f1; color: #226b47; }
.vp-cold-chip.is-loaded b { color: #17543a; }
.vp-cold-chip.is-loaded:hover { background: #e2f2e9; }
.vp-cold-chip-dow { display: inline-block; margin-left: 3px; padding: 0 4px; border-radius: 4px;
  background: rgba(0, 0, 0, .07); font-weight: 800; }
.vp-cold-chip-dow.is-sun { background: #f6d9d4; color: #a33a2e; }
/* Facturación: botón volver discreto + Exportar a Excel más pequeño */
.vb-back { font-size: 12px; padding: 5px 11px; }
.vb-export-sm { font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 7px; }
.vp-add:hover { border-color: #9bb4d6; color: #4a76b8; background: #f7faff; }
.vp-cardform { width: min(720px, 94vw); }
.vp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 0; }
.vp-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 500; color: #666; }
.vp-f input, .vp-f select { padding: 6px 8px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; }
.vp-f-wide { grid-column: 1 / -1; }
.vp-kmhint { align-self: end; font-size: 12px; color: #445; padding-bottom: 6px; }
.vp-km-fix { color: #0f6e56; font-weight: 600; }
.vp-km-var { color: #8a5a00; }
.vp-legs { grid-column: 1 / -1; }
.vp-legbox { border: 1px dashed #cdd4dc; border-radius: 7px; padding: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.vp-legtitle { width: 100%; font-size: 11px; font-weight: 600; color: #778; }
.vp-legbox input { flex: 1; min-width: 140px; padding: 6px 8px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; }
.vp-del { color: #a12; }
.vp-slotsform { max-width: min(1040px, 96vw); width: 100%; }
.vp-slotgrid { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.vp-slothead { display: grid; grid-template-columns: 84px 1.1fr 1fr 1.3fr; gap: 10px; font-size: 11px; font-weight: 600; color: #888; padding: 0 2px; }
.vp-slotrow { display: grid; grid-template-columns: 84px 1.1fr 1fr 1.3fr; gap: 10px; align-items: center; }
.vp-slotlbl { font-weight: 600; font-size: 13px; }
.vp-slotrow input, .vp-slotrow select { padding: 6px 8px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; background: #fff; max-width: 100%; }
/* Facturación Verallia */
#veralliaBillingContent { padding: 4px 0 24px; }
.vb-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.vb-month { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.vb-month input { padding: 5px 8px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; }
.vb-tariffs { font-size: 12px; }
.vb-grandtotal { font-size: 14px; }
.vb-grandtotal strong { font-size: 17px; color: #0f6e56; }
.vb-warn { background: #fcefd2; color: #8a5a00; border: 0.5px solid #e6c478; border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; }
.vb-unk-head { margin-bottom: 8px; }
.vb-unk-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.vb-unk-route { flex: 1; font-weight: 500; color: #6a4600; }
.vb-unk-km { width: 70px; }
.vb-unk-foot { margin-top: 8px; }
.vb-unk-foot button { font-size: 12px; }
/* Catálogo de rutas */
.vp-catform { max-width: min(840px, 96vw); width: 100%; }
.vp-cat-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.vp-cat-add input { padding: 6px 8px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; }
.vp-cat-add input#vpCatO, .vp-cat-add input#vpCatD { flex: 1; min-width: 120px; }
.vp-cat-kmadd { width: 70px; }
.vp-cat-wrap { max-height: 50vh; overflow: auto; margin-top: 10px; border: 0.5px solid #e2e2e2; border-radius: 8px; }
.vp-cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vp-cat-table th { text-align: left; background: #f7f8fa; padding: 6px 10px; position: sticky; top: 0; z-index: 1; font-size: 11px; font-weight: 600; color: #888; }
.vp-cat-head th { vertical-align: top; }
.vp-cat-fcol { display: block; width: 100%; margin-top: 5px; padding: 4px 7px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 12px; font-weight: 400; color: #333; box-sizing: border-box; }
.vp-cat-fcol:focus { outline: none; border-color: #b07a2a; box-shadow: 0 0 0 2px rgba(176,122,42,0.15); }
.vp-cat-table td { padding: 4px 10px; border-top: 0.5px solid #f0f0f0; }
.vp-cat-km { width: 64px; padding: 3px 6px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; text-align: right; }
.vp-cat-fix { font-size: 11px; color: #0f6e56; font-weight: 600; }
.vp-cat-var { font-size: 11px; color: #8a5a00; }
.vb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.vb-card { border: 0.5px solid #e2e2e2; border-radius: 10px; background: #fff; padding: 12px 14px; }
.vb-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.vb-driver { font-size: 11px; color: #888; }
.vb-total { font-size: 18px; font-weight: 600; color: #0f6e56; white-space: nowrap; }
.vb-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.vb-table th { text-align: left; font-size: 11px; font-weight: 600; color: #888; padding: 2px 5px; border-bottom: 0.5px solid #eee; }
.vb-table td { padding: 4px 5px; border-bottom: 0.5px solid #f3f3f3; }
.vb-num { text-align: right; white-space: nowrap; }
/* anchos fijos de columna: la tabla siempre cabe en la tarjeta (Importe nunca se recorta) */
.vb-table th:nth-child(1), .vb-table td:nth-child(1) { width: 33%; white-space: normal; word-break: break-word; }
/* Cantidad alineada a la IZQUIERDA: el input arranca en el mismo punto en todas las filas y tarjetas
   (con alineación derecha, la unidad "días"/"km" desplazaba el input y lo descuadraba). */
.vb-table th:nth-child(2), .vb-table td:nth-child(2) { width: 26%; text-align: left; white-space: nowrap; vertical-align: middle; }
.vb-table th:nth-child(3), .vb-table td:nth-child(3) { width: 18%; }
.vb-table th:nth-child(4), .vb-table td:nth-child(4) { width: 23%; }
/* Input más estrecho DENTRO de la tabla: con 58px, en tarjetas al ancho mínimo (340px, las 5 en fila) la
   unidad "días" (más ancha que "km") se salía de la columna Cantidad y se montaba sobre el Precio. */
.vb-table .vb-edit { width: 46px; vertical-align: middle; }
.vb-imp { font-weight: 600; }
.vb-card-foot { margin-top: 8px; font-size: 11px; }
.vb-edit { width: 64px; padding: 3px 6px; border: 1px solid #d0d0d0; border-radius: 5px; font-size: 13px; text-align: right; }
.vb-edit:focus { outline: none; border-color: #5a86c6; box-shadow: 0 0 0 2px rgba(90,134,198,.2); }
.vb-unit { font-size: 11px; color: #888; margin-left: 3px; }
.vb-autohint { font-size: 10px; color: #b07; margin-left: 4px; }
.vb-vlegs { margin-top: 8px; font-size: 12px; }
.vb-vlegs > summary { cursor: pointer; color: #555; padding: 4px 0; list-style: revert; }
.vb-vleg-warn { color: #b3261e; font-weight: 600; }
.vb-vleg-list { list-style: none; margin: 4px 0 0; padding: 6px 8px; background: #fafbfc; border: 0.5px solid #eee; border-radius: 6px; max-height: 180px; overflow: auto; }
.vb-vleg { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: #333; }
.vb-vleg-base { color: #888; }
.vb-vleg-km { color: #555; white-space: nowrap; }
.vb-vleg-unk { color: #b3261e; }
.vb-transit { font-size: 10px; color: #0f6e56; background: #e7f5ef; border-radius: 4px; padding: 1px 5px; }
.vb-vleg-unk .vb-vleg-km { color: #b3261e; font-weight: 600; }
.vb-gpsrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 0.5px solid #eee; font-size: 12px; flex-wrap: wrap; }
.vb-gps-lbl { color: #555; }
.vb-gps-input { width: 80px; flex: 0 0 auto; }
/* Botones de tramos, pequeños, a la derecha de la fila de GPS (acciones a la derecha). */
.vb-gpsrow-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.vb-gpsrow-actions button { font-size: 11px; padding: 3px 9px; white-space: nowrap; }
.vb-usegps { font-size: 11px; padding: 2px 8px; border: 0.5px solid #9bb4d6; background: #f2f7ff; color: #2c5c9c; border-radius: 5px; cursor: pointer; }
.vb-usegps:hover { background: #e3eeff; }
.vb-del-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 9px 11px; border: 1px solid var(--amber); background: #fdf6e9; color: var(--ink); border-radius: 7px; font-size: 12.5px; line-height: 1.35; }
.vb-del-warn .ic { color: var(--amber); flex: 0 0 auto; margin-top: 1px; }

/* Verallia — botones de vacío (rutas/GPS) + libro de tramos editable + panel Detalle */
.vb-vacioopts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; font-size: 11px; }
.vb-usebtn { font-size: 11px; padding: 2px 8px; border: 1px solid #9bb4d6; background: #f2f7ff; color: #2c5c9c; border-radius: 5px; cursor: pointer; }
.vb-usebtn:hover { background: #e3eeff; }
.vb-usebtn-rutas { border-color: #c8ab86; background: #f7efe2; color: #8a5a30; }
.vb-usebtn-rutas:hover { background: #f0e4d2; }
.vb-vertramos { font-size: 11px; }
.vb-detail { margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.vb-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); border-radius: 8px 8px 0 0; }
.vb-detail-head strong { color: var(--ink); font-size: 14px; }
.vb-detail-head .ic { color: var(--muted); }
.vb-det-filter { padding: 4px 8px; border: 1px solid #cfcfcf; border-radius: 6px; font-size: 12px; }
.vb-det-chk { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.vb-det-tot { font-size: 12px; color: var(--ink); font-weight: 500; }
.vbl-wrap { overflow-x: auto; }
.vbl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vbl-table th { text-align: left; font-size: 11px; font-weight: 600; color: #888; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.vbl-table td { padding: 3px 8px; border-bottom: 1px solid #f3f3f3; vertical-align: middle; }
.vbl-num { text-align: right; white-space: nowrap; }
.vbl-imp { font-weight: 600; }
.vbl-cam { color: var(--muted); white-space: nowrap; }
.vbl-route { min-width: 230px; }
.vbl-ro { color: var(--ink); }
.vbl-field, .vbl-km { border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; font-size: 12px; background: transparent; width: 100%; box-sizing: border-box; }
.vbl-field:hover, .vbl-km:hover { border-color: #e0e0e0; }
.vbl-field:focus, .vbl-km:focus { border-color: #5a86c6; background: #fff; outline: none; }
.vbl-km { width: 70px; text-align: right; }
.vbl-date { width: 130px; }
.vbl-route .vbl-field { width: 46%; display: inline-block; }
.vbl-badge { font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.vbl-badge-cargado { background: #e7f1ff; color: #2c5c9c; }
.vbl-badge-vacio { background: #f0f0f0; color: #666; }
.vbl-badge-palets { background: #eaf6ec; color: #1f7a5b; }
.vbl-badge-transito { background: #fdf2e3; color: #8a6d3b; }
.vbl-row.vbl-vacio td { background: #fafafa; }
.vbl-flag { font-size: 10px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.vbl-flag-gps, .vbl-flag-move { cursor: pointer; }
.vbl-flag-gps:hover, .vbl-flag-move:hover { text-decoration: underline; }
.vbl-flag-gps { color: var(--red); font-weight: 600; }
.vbl-flag-move { color: #fff; background: var(--red); font-weight: 600; padding: 1px 6px; border-radius: 10px; }
.vbl-flag-nokm { color: var(--amber); }
.vbl-row.vbl-rowalert td { background: #fdeceb; }
.vbl-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.vb-card-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.vb-card-actions2 { margin-top: 6px; }
.vb-card-actions button { padding: 5px 10px; font-size: .82rem; white-space: nowrap; }
.vb-card-actions .vb-card-foot { margin-left: 2px; }
/* Aviso "tramos a mano por detrás del plan" + CTA para traer los días nuevos del plan */
.vb-plan-behind { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 7px 10px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; font-size: 12px; color: #7c2d12; }
.vb-plan-behind-msg { flex: 1; min-width: 150px; line-height: 1.35; }
.vb-plan-behind-msg strong { color: #9a3412; }
.vb-pullplan { background: #ea7317; color: #fff; border: 0; border-radius: 6px; padding: 5px 11px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.vb-pullplan:hover { background: #c2560c; }
/* Retoques quirúrgicos: marca de tramo fijado (pin) + aviso de retoques descolgados (huérfanos) */
.vbl-pin { font-size: 11px; color: #4f46e5; font-weight: 700; }
.vbl-pin-insert { color: #7c3aed; }
.vble-pincell { white-space: nowrap; }
.vble-pinmark { color: #4f46e5; font-weight: 700; margin-right: 3px; }
tr.vble-pinned > td:first-child { box-shadow: inset 3px 0 0 #4f46e5; }
.vb-orphan-strip { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.vb-orphan-strip .vb-plan-behind-msg strong { color: #b91c1c; }
.vb-reset { font-size: 12px; }
.vp-ocr-card { max-width: min(1500px, 98vw); width: 100%; }
.vp-ocr-wrap { max-height: 58vh; overflow-y: auto; overflow-x: hidden; margin: 10px 0; border: 0.5px solid #e2e2e2; border-radius: 8px; }
/* Las columnas largas (ruta, desc. anterior, cita) hacen salto de línea para que la tabla NUNCA se pase de
   ancho (sin barra de scroll horizontal); Camión y etiquetas se mantienen en una sola línea. */
.vp-ocr-table td { white-space: normal; overflow-wrap: anywhere; }
.vp-ocr-table td:first-child { white-space: nowrap; }
.vp-ocr-table .vp-ocr-tag, .vp-ocr-table .vp-chip { white-space: nowrap; }
/* "Importar todo igualmente" (con duplicados): camino con salvedad → matiz ámbar, secundario al recomendado. */
.vp-ocr-importall { border-color: #e6cf9e; color: #8a6d3b; }
.vp-ocr-importall:hover { background: #fdf3e0; border-color: #d9b877; }
.vp-ocr-deliv { color: #2c5c9c; font-weight: 500; white-space: nowrap; }
.vp-card-driver { font-size: 11px; color: #555; font-weight: 500; margin-top: 4px; }
.vp-card-driver-warn { color: #b06a00; }
.vp-card-deliv { color: #2c5c9c; font-weight: 500; white-space: nowrap; }
.vp-ocr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vp-ocr-table th { text-align: left; background: #f7f8fa; padding: 6px 10px; position: sticky; top: 0; font-weight: 600; font-size: 12px; }
.vp-ocr-table td { padding: 6px 10px; border-top: 0.5px solid #eee; }
.vp-ocr-ref { font-family: monospace; font-weight: 600; }
.vp-ocr-dayrow td { background: #eef3f8; font-weight: 600; }
.vp-ocr-tag { font-size: 10px; font-weight: 600; background: #e6f1fb; color: #185fa5; padding: 1px 6px; border-radius: 5px; }
.vp-ocr-tag.vp-ocr-have { background: #e7f4ea; color: #2e7d46; }
.vp-ocr-exists { opacity: .58; }
.vp-ocr-exists td { background: #fafafa; }
/* MOVIDA POR EL CLIENTE (solo aviso): la referencia ya está en el TMS en otra casilla; no se toca. */
.vp-ocr-tag.vp-ocr-moved { background: #fde2c8; color: #a24d0b; font-weight: 800; }
.vp-ocr-moved-row td { background: #fff9f0; }
.vp-ocr-moved-row { opacity: .75; }
.vp-ocr-moved-count { color: #a24d0b; }
/* Listado previo de "Generar servicios pendientes": qué se va a crear, en orden (día · camión · ruta). */
.vp-genlist { max-height: min(46vh, 420px); overflow-y: auto; margin: 10px 0 4px; border: 1px solid #e3e6ea;
  border-radius: 8px; background: #fff; }
.vp-genlist-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 11px;
  border-bottom: 1px solid #eef1f4; font-size: 12.5px; line-height: 1.3; }
.vp-genlist-row:last-child { border-bottom: 0; }
.vp-genlist-day { font-weight: 800; color: #1f2937; min-width: 74px; }
.vp-genlist-slot { color: #475569; min-width: 128px; }
.vp-genlist-ref { font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-weight: 700;
  font-size: 12px; color: #0f3d63; }
.vp-genlist-route { color: #334155; }
.vp-genlist-cita { margin-left: auto; color: #92400e; background: #fef3c7; border-radius: 6px;
  padding: 1px 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vp-ocr-ignored { color: #b23b31; }
.vp-ocr-repaired { color: #a24d0b; }
/* DESCARGA de ARRASTRE: fila de descargas del plan (entrega del lunes de un viaje de la semana anterior). */
.vp-ocr-tag.vp-ocr-deliv-tag { background: #fef3c7; color: #92400e; }
.vp-ocr-warn { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; padding: 9px 12px; font-size: 12.5px;
  color: #8a2b22; background: #fbe7e5; border: 1px solid #f0b6ae; border-radius: 8px; line-height: 1.35; }
.vp-ocr-warn b { color: #b23b31; }
.vp-ocr-warn svg { flex: none; color: #c0453b; margin-top: 1px; }
/* Avisos del LECTOR (fecha supuesta, notas sin columna): informan, no alarman → ámbar, no rojo. */
.vp-ocr-warn.vp-ocr-note { color: #6b5320; background: #fdf6e6; border-color: #efdcb0; }
.vp-ocr-warn.vp-ocr-note svg { color: #c8901f; }
.vp-ocr-tag.vp-ocr-conflict-tag { background: #fbe0dd; color: #b23b31; }
.vp-ocr-conflict td { background: #fdeeec; }
/* CAMBIADA por el cliente: la casilla del TMS es distinta de lo que ahora muestra el plan (aviso). */
.vp-ocr-tag.vp-ocr-changed { background: #fbe0dd; color: #b23b31; font-weight: 800; }
.vp-ocr-changed-row td { background: #fff5f4; }
.vp-ocr-changed-count { color: #b23b31; }
.vp-ocr-antes { font-size: 11px; color: #8a2b22; margin-top: 2px; }
.vp-ocr-conflict td:first-child { box-shadow: inset 3px 0 0 #d4534e; }
/* CARGAS DE LOS BLOQUES DE ABAJO (las siguientes de la semana): el camión sale de su posición en la fila
   y el día del orden de los bloques, así que ambos son EDITABLES aquí mismo. Azul (informativo), no rojo:
   no es un error, es un dato que hay que confirmar. */
.vp-ocr-extra-row td { background: #f4f8fd; }
.vp-ocr-tag.vp-ocr-extra-tag { background: #e6f1fb; color: #185fa5; }
.vp-ocr-tag.vp-ocr-place-tag { background: #fde2c8; color: #a24d0b; font-weight: 800; }
.vp-ocr-place { white-space: nowrap; }
.vp-ocr-table select.vp-ocr-slot, .vp-ocr-table input.vp-ocr-day { height: 26px; min-height: 0; padding: 1px 5px; font-size: 11.5px;
  border: 1px solid #c1ccdb; border-radius: 6px; background: #fff; vertical-align: middle; }
.vp-ocr-table select.vp-ocr-slot { width: 78px; margin-right: 4px; }
.vp-ocr-table input.vp-ocr-day { width: 118px; }
.vp-ocr-place-note { font-size: 12px; color: #a24d0b; font-weight: 700; margin-right: 10px; align-self: center; }
/* Checkbox por fila del OCR: pequeño y discreto, MARCADO por defecto (todo importable). El operativo
   solo excluye lo que no quiera meter (p. ej. una carga a 2 días vista que el cliente aún puede cambiar). */
.vp-ocr-chk-th, .vp-ocr-chk-td { width: 30px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.vp-ocr-table input.vp-ocr-chk { -webkit-appearance: none; appearance: none; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; width: 15px !important; height: 15px !important; min-height: 0 !important; vertical-align: middle; border: 1.5px solid #c1ccdb; border-radius: 4px; background: #fff; cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.vp-ocr-table input.vp-ocr-chk:hover { border-color: #8aa6c8; }
.vp-ocr-table input.vp-ocr-chk:checked { background: #2c7a4b; border-color: #2c7a4b; }
.vp-ocr-table input.vp-ocr-chk:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vp-ocr-table input.vp-ocr-chk:indeterminate { background: #7c8aa0; border-color: #7c8aa0; }
.vp-ocr-table input.vp-ocr-chk:indeterminate::after { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 0; border-top: 2px solid #fff; }
.vp-ocr-table input.vp-ocr-chk:focus-visible { outline: 2px solid #2c7a4b; outline-offset: 1px; }
/* Overlay persistente mientras el OCR lee la imagen del plan (Tesseract puede tardar). */
.vp-reading { position: fixed; inset: 0; z-index: 5200; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.28); }
.vp-reading.open { display: flex; animation: tmsFadeIn 0.15s ease-out; }
.vp-reading-card { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #fff; border-radius: 14px; box-shadow: 0 18px 44px rgba(2, 6, 23, 0.32); max-width: min(92vw, 430px); }
.vp-reading-spin { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #d8e2f0; border-top-color: #2c5c9c; animation: tubSpin 0.8s linear infinite; }
.vp-reading-txt { display: flex; flex-direction: column; gap: 2px; }
.vp-reading-txt b { font-size: 14px; color: #1f2937; }
.vp-reading-txt span { font-size: 12px; color: #6b7688; }

/* Pegar plan de Verallia en TEXTO (alternativa a la imagen del email cuando llega como tabla). */
.vp-paste-overlay { position: fixed; inset: 0; z-index: 5300; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: tmsFadeIn .15s ease-out; }
/* Tres franjas: cabecera fija · cuerpo (el campo manda, se lleva todo el alto) · pie con las acciones a la
   derecha. Antes iba todo suelto en la tarjeta: el "Cerrar" pegado al borde, el párrafo a todo lo ancho y
   el botón de leer ocupando la anchura entera, que pesaba más que el propio campo. */
.vp-paste-card { background: #fff; border-radius: 14px; width: min(720px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(2, 6, 23, .35); animation: tmsCardIn .18s cubic-bezier(.16,1,.3,1); }
.vp-paste-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 18px 12px; border-bottom: 1px solid #e9eef5; }
.vp-paste-head h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.2; }
.vp-paste-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #98a6b8; }
.vp-paste-body { padding: 14px 18px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.vp-paste-note { margin: 0; font-size: 13px; line-height: 1.5; color: #5b6879; max-width: 62ch; }
.vp-paste-note b { color: #33475b; }
.vp-paste-label { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 700; color: #33475b; }
.vp-paste-label small { font-weight: 500; font-size: 11.5px; color: #8a98ab; line-height: 1.45; }
.vp-paste-text { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; padding: 11px 13px; border: 1px solid #d3dbe6; border-radius: 10px;
  resize: vertical; min-height: 220px; background: #fcfdfe; transition: border-color .12s, box-shadow .12s; }
.vp-paste-text::placeholder { color: #b8c2d0; }
.vp-paste-text:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(176, 112, 60, .16); background: #fff; }
.vp-paste-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid #e9eef5; background: #fafbfd; }
.vp-paste-spacer { flex: 1 1 auto; }
.vp-paste-tip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #7b8798; max-width: 44ch; line-height: 1.4; }
.vp-paste-tip svg { flex: none; color: #a9b4c4; }
.vp-paste-go { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .vp-paste-tip { max-width: 100%; order: 3; }
  .vp-paste-spacer { display: none; }
}
/* Asistente de ARRANQUE EN FRÍO: cómo empieza cada camión el mes (posición/cargado/vacío/salida dom-lun). */
.vp-cold-overlay { position: fixed; inset: 0; z-index: 5300; background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: tmsFadeIn .15s ease-out; }
.vp-cold-card { background: #fff; border-radius: 14px; width: min(1000px, 96vw); max-height: 92vh; overflow: auto;
  box-shadow: 0 18px 50px rgba(2, 6, 23, .35); padding: 4px 18px 18px; animation: tmsCardIn .18s cubic-bezier(.16,1,.3,1); }
.vp-cold-head { padding-top: 4px; }
.vp-cold-card .flow-note { margin: 6px 2px 12px; }
.vp-cold-actions { display: flex; justify-content: flex-end; gap: 10px; }
.vp-cold-rows { display: flex; flex-direction: column; gap: 10px; }
.vp-cold-row { display: grid; grid-template-columns: 150px 1.25fr 1.2fr 0.8fr 1.25fr; gap: 10px; align-items: end;
  padding: 10px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fbfcfe; }
.vp-cold-f select, .vp-cold-f input { min-width: 0; }
.vp-cold-truck { font-weight: 700; font-size: 13px; color: #2c3a4f; display: flex; flex-direction: column; align-self: center; }
.vp-cold-truck small { font-weight: 400; font-size: 11px; color: #7a879b; margin-top: 2px; line-height: 1.25; }
.vp-cold-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #55627a; }
.vp-cold-f select, .vp-cold-f input { padding: 6px 8px; border: 1px solid #d3dbe6; border-radius: 8px; font-size: 12.5px; background: #fff; }
.vp-cold-f select:focus, .vp-cold-f input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(176,112,60,.16); }
.vp-cold-hint { grid-column: 1 / -1; font-size: 11px; color: #8a93a6; }
/* Aviso de arranque en frío pendiente (lleva al asistente donde se marca la salida domingo/lunes). */
.vp-cold-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 14px;
  background: #fff7ed; border: 1px solid #f4cf9a; border-left: 4px solid #d98a2b; border-radius: 10px; }
.vp-cold-banner-ic { color: #b9741f; display: flex; }
.vp-cold-banner-ic svg { width: 20px; height: 20px; }
.vp-cold-banner-tx { flex: 1; font-size: 13px; color: #6b4d22; line-height: 1.35; }
.vp-cold-banner-btn { background: #d98a2b; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vp-cold-banner-btn:hover { background: #c67c22; }
/* Cerrar mes: filas por camión (viaje en curso + posición + km facturados este mes). */
.vp-close-row { display: grid; grid-template-columns: 150px 1.5fr 1.1fr 1fr; gap: 10px; align-items: end;
  padding: 10px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #fbfcfe; }
.vp-close-info { align-self: center; font-size: 12.5px; color: #55627a; }
.vp-close-trip b { color: #2c3a4f; }
.vp-close-trip-base { color: #9aa3b5; font-style: italic; }
.vp-close-hidden { visibility: hidden; }
.vp-close-gps { font-size: 10.5px; color: #8a93a6; margin-top: 3px; }
.vp-close-gps a { color: #2c5c9c; text-decoration: none; }
.vp-close-gps a:hover { text-decoration: underline; }
@media (max-width: 760px) { .vp-close-row { grid-template-columns: 1fr 1fr; } .vp-close-info { grid-column: 1 / -1; } }
@media (max-width: 760px) { .vp-cold-row { grid-template-columns: 1fr 1fr; } .vp-cold-truck { grid-column: 1 / -1; } }
/* ===== Feedback de OCUPADO global (cualquier tarea > 0,5 s en todo el TMS) ===== */
body.tms-busy, body.tms-busy * { cursor: progress !important; }
body.tms-busy::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary, #b0703c), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: tmsBusyBar 1s linear infinite; }
@keyframes tmsBusyBar { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.tms-busy::after { animation: none; background-position: 50% 0; } }
/* Tarjeta de carga Verallia mientras se borra: apagada + spinner + sin clics (evita el doble clic). */
.vp-card-deleting { position: relative; opacity: .5; pointer-events: none; }
.vp-card-deleting::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(179, 38, 30, .2); border-top-color: #b3261e; border-radius: 50%; animation: tmsSpin .6s linear infinite; }
@keyframes tmsSpin { to { transform: rotate(360deg); } }
/* Zona de soltar la imagen del plan: CENTRADA en la barra (entre navegación y acciones) y a DOBLE
   fila de alto, para que sea el blanco natural del arrastre (petición del jefe, 18-jul). */
.vp-drop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 26px; min-height: 68px; border: 1.5px dashed #9bb4d6; border-radius: 10px; background: #f7faff; color: #2c5c9c; cursor: pointer; font-size: 13.5px; transition: background .12s, border-color .12s; margin: 0 auto; align-self: stretch; flex: 1 1 auto; max-width: 480px; }
.vp-drop:hover { background: #eef4fc; border-color: #5a86c6; }
.vp-drop:focus-visible { outline: 2px solid #5a86c6; outline-offset: 1px; }
.vp-drop-over { background: #dcebff; border-color: #2c5c9c; border-style: solid; }
.vp-drop-ic { font-size: 22px; line-height: 1; }
.vp-drop-ic svg { width: 20px; height: 20px; display: block; }
.vp-drop-tx { display: flex; flex-direction: column; line-height: 1.15; }
.vp-drop-tx small { color: #7a93b5; font-size: 10px; }
/* Dos vías de importar el plan, una al lado de la otra: imagen (arrastrar) y texto (pegar). */
.vp-imports { display: flex; align-items: stretch; justify-content: center; gap: 12px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.vp-imports .vp-drop { margin: 0; }
.vp-drop-paste { flex: 0 1 230px; max-width: 250px; background: #f2f4f7; border-color: #bcc6d4; color: #46536b; }
.vp-drop-paste:hover { background: #e9edf3; border-color: #8fa1bd; }
.vp-drop-paste .vp-drop-tx small { color: #8592a8; }

/* Avisos informativos de asignación conductor↔vehículo (no bloquean) */
.assign-warn { background: #fff8e1; border: 1px solid #f0d27a; border-radius: 6px; padding: 7px 10px; font-size: 12px; color: #6b5300; margin-top: 4px; }
.assign-warn-line { padding: 1px 0; }
.doc-badge.doc-warn { background: #fdecea; color: #b3261e; border: 1px solid #f3b7b1; font-weight: 600; }

/* Histórico de conductores dados de baja (colapsable bajo el listado de conductores) */
.driver-history-block { margin-top: 12px; border-top: 1px solid #e6e6e6; padding-top: 8px; }
.driver-history-block > summary { cursor: pointer; padding: 6px 0; color: #555; font-weight: 600; }
.driver-row-card.is-archived { opacity: 0.9; }

/* Conductor en BAJA MÉDICA (estado "Baja" = sick_leave): toda la línea con un rojo muy suave pero
   perceptible, para verlo de un vistazo en el listado de conductores. */
.driver-row-card.is-sick-leave { background: #fdeeee; border-color: #f0cccc; }
.driver-row-card.is-sick-leave.selected { background: #fbe0e0; border-color: #e6a9a9; }
/* Permiso retribuido = NARANJA (pedido del jefe): la tarjeta del conductor cambia de color. Naranja
   marcado pero aún legible con el texto oscuro de la tarjeta. */
.driver-row-card.is-permiso { background: #ffe1bd; border-color: #f2ac55; }
.driver-row-card.is-permiso.selected { background: #ffd39f; border-color: #eb9f3b; }

/* ── Configurador de CAMPOS y gestor de OPCIONES (desplegables) ─────────────────────────────
   Modales más finos: lista de casillas en 2 columnas, alineadas a la izquierda, con hover. */
.opt-config-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px;
  padding: 6px 2px 10px; max-height: 54vh; overflow: auto;
}
.opt-config-row {
  display: flex !important; align-items: center; justify-content: flex-start !important;
  gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-weight: 500;
  color: #2a3b4d; transition: background .12s ease; text-align: left;
}
.opt-config-row:hover { background: #f1f5fb; }
.opt-config-row input { margin: 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: #c2703d; }
.opt-config-row span { font-size: 13px; line-height: 1.2; }
@media (max-width: 768px) { .opt-config-list { grid-template-columns: 1fr; } }

/* Modales/fichas con rejilla de 2 columnas a 1 columna SOLO por ancho estrecho (móvil vertical);
   en apaisado (ancho amplio, alto bajo) se mantienen las 2 columnas para no estirar los campos ni
   alargar el scroll. */
@media (max-width: 768px) {
  .traffic-popup-card [style*="grid-template-columns:1fr 1fr"],
  .traffic-popup-card [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .driver-modal-shunter-centers { grid-template-columns: 1fr !important; }
  /* Formularios cliente/proveedor/servicio (rejilla 2-3 col) a 1 columna en móvil estrecho:
     en 3 col se recortaban "Razón social", "Código ERP"... */
  .service-edit-grid,
  .service-edit-grid.cols-3,
  .eco-2col { grid-template-columns: 1fr !important; }

  /* Usuarios: la ficha de edición se despliega bajo la fila (acordeón), a 1 columna, para verlo todo.
     (La colocación bajo la fila la hace umPlaceDetail en JS; aquí solo el aspecto y el ancho.) */
  .um-fields { grid-template-columns: 1fr !important; }
  .um-detail--inline { width: 100%; margin: 3px 0 8px; box-shadow: 0 6px 16px rgba(20, 40, 80, .10); }
  .um-detail--inline .um-form { padding: 18px 16px 18px; }
  .um-detail--inline .um-actions { flex-wrap: wrap; gap: 8px; }

  /* ---- Ficha de proveedor a dos bloques: apilar en móvil vertical ----
     El modal de edición usa .pvb-grid3 (3 columnas) y el panel rico subtablas anchas; a 375px los
     campos quedaban a ~65px con los selects truncados ("tran"). Aquí: rejilla de campos a 1 columna,
     nada excede el ancho del popup (sin scroll horizontal), la barra de acciones ENVUELVE y las
     subtablas del panel rico se desplazan dentro de su caja. Solo móvil vertical; escritorio y
     apaisado intactos. */
  .pvb-body.pvb-grid3 { grid-template-columns: 1fr !important; }
  /* El formulario scrollea verticalmente en móvil; sin max-height no entra todo el contenido. */
  .provider-edit-form {
    overflow-x: hidden !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* UN SOLO scroller en móvil = el formulario. El .field-edit-body trae de escritorio un
     max-height:78vh + overflow:auto INLINE que, anidado con el scroll del formulario, se peleaban y
     dejaban el bloque de Tráfico cortado (no se llegaba a contacto/emails/tarifa/packs). Aquí se
     neutraliza para que TODO fluya y el formulario haga el único scroll. */
  /* min-height:auto (revierte el min-height:0 de escritorio): en móvil el cuerpo DEBE crecer a su
     contenido para que el ÚNICO scroller sea el formulario; con min-height:0 el cuerpo flex colapsaba,
     el contenido se derramaba y el botón Guardar quedaba fuera de pantalla. */
  .provider-edit-form .field-edit-body { max-height: none !important; overflow: visible !important; min-height: auto !important; }
  .provider-edit-form .pvb-section,
  .provider-edit-form .pvb-body,
  .provider-edit-form label,
  .provider-edit-form input,
  .provider-edit-form select,
  .provider-edit-form textarea {
    min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  /* Cabecera del bloque: el título largo puede envolver sin empujar el chevron fuera. */
  .provider-edit-form .pvb-head { flex-wrap: wrap; row-gap: 2px; }
  /* Subtablas dentro de la ficha (conductores, matrículas, servicios): scroll horizontal propio. */
  .provider-edit-form .provider-subtable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* Barra de acciones (Ver servicios / Eliminar / Cancelar / Guardar): antes desbordaba a la
     derecha ("Gu…" cortado). Envuelve en 2 filas y los botones reparten el ancho. */
  .provider-edit-form > .form-actions { flex-wrap: wrap !important; gap: 6px !important; }
  .provider-edit-form > .form-actions button { flex: 1 1 auto; min-height: 34px; }
  .provider-edit-form > .form-actions [style*="margin-right:auto"] { flex-basis: 100%; }
}

/* Gestor de opciones de un desplegable (categoría + valores con borrar/ordenar + añadir). */
.cat-mgr-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; }
.cat-mgr-tab {
  border: 1px solid #d7dee7; background: #fff; color: #50627a; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .12s ease;
}
.cat-mgr-tab:hover { border-color: #c2703d; color: #c2703d; }
.cat-mgr-tab.is-active { background: #c2703d; border-color: #c2703d; color: #fff; }
/* Barra sobre la lista: ordenar A-Z (con listas de 15-20 valores, subir uno a mano es una tortura). */
.cat-mgr-toolbar { align-items: center; display: flex; gap: 10px; padding: 0 2px 8px; }
.cat-mgr-toolbar button { font-size: 12px; padding: 5px 12px; }
.cat-mgr-toolbar button:disabled { cursor: default; opacity: .45; }
.cat-mgr-count { color: #8494a8; font-size: 11.5px; }
.cat-mgr-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; padding: 2px; }
/* Lo que esta escrito en las fichas pero no en la lista (matriculas sueltas metidas en Operativa, etc.):
   o se sube a la lista, o se quita de las fichas que lo llevan. */
.cat-mgr-out { border-top: 1px dashed #dde4ec; margin-top: 10px; padding-top: 9px; }
.cat-mgr-out h4 { color: #9a6a12; font-size: 11px; font-weight: 800; letter-spacing: .04em; margin: 0 0 2px; text-transform: uppercase; }
.cat-mgr-out p { color: #8a97a8; font-size: 11.5px; margin: 0 0 7px; }
.cat-mgr-outrow {
  align-items: center; background: #fffdf7; border: 1px solid #f0e2c4; border-radius: 9px;
  display: flex; gap: 8px; margin-bottom: 4px; padding: 6px 10px;
}
.cat-mgr-outrow .cat-mgr-val { color: #7a5a10; flex: 1; font-size: 13px; font-weight: 700; min-width: 0; }
.cat-mgr-outrow button { font-size: 11.5px; padding: 4px 10px; }
.cat-mgr-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e7ecf2;
  border-radius: 9px; background: #fbfcfe;
}
.cat-mgr-item .cat-mgr-val { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #2a3b4d; }
.cat-mgr-item .cat-mgr-used { font-size: 11px; color: #7b8aa0; font-weight: 500; white-space: nowrap; }
.cat-mgr-iconbtn {
  border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; color: #8a98ab;
}
.cat-mgr-iconbtn:hover { background: #eef2f7; color: #2a3b4d; }
.cat-mgr-iconbtn.is-danger:hover { background: #fdecec; color: #c0392b; }
.cat-mgr-iconbtn:disabled { opacity: .3; cursor: default; }
.cat-mgr-add { display: flex; gap: 8px; padding-top: 10px; }
.cat-mgr-add input { flex: 1; min-width: 0; }
.cat-mgr-empty { padding: 18px 6px; color: #8a98ab; font-size: 13px; text-align: center; }
.cat-mgr-locked { font-size: 12px; color: #9aa7b8; padding: 8px 2px 0; }
/* Recuadro de ayuda del gestor de Tareas del cuadrante: explica las 3 opciones de disponibilidad. */
.dtm-help { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 10px; padding: 9px 11px;
  background: #f3f7fc; border: 1px solid #e0e8f2; border-left: 3px solid #9fb4cc; border-radius: 8px;
  font-size: 11.5px; line-height: 1.4; color: #46586c; }
.dtm-help-t { font-weight: 800; color: #2a3b4d; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.dtm-help b { color: #2a3b4d; }
.dtm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.dtm-dot-av { background: #2f8f5b; }   /* disponible */
.dtm-dot-pa { background: #d9a021; }   /* media jornada */
.dtm-dot-fu { background: #64748b; }   /* ocupa jornada */
.cat-mgr-item .dtm-avail { flex: 0 0 auto; font-size: 11px; padding: 3px 6px; min-height: 26px;
  border: 1px solid #cfd8e3; border-radius: 6px; background: #fff; color: #2a3b4d; max-width: 150px; }

/* ── Código de color del TMS: amarillo=shunter · azul=viajes · rojo=baja médica ──────────────
   Tinte suave de toda la fila por tipo/uso. Misma semántica en conductores, camiones y mapa. */
.driver-row-card.is-shunter,
.vehicle-row-card.is-shunter { background: #fcf6da; border-color: #ece2a0; }
.driver-row-card.is-viajes,
.vehicle-row-card.is-viajes  { background: #eaf2fc; border-color: #c9ddf3; }
.driver-row-card.is-shunter.selected,
.vehicle-row-card.is-shunter.selected { background: #f6ecbf; border-color: #ddcd78; }
.driver-row-card.is-viajes.selected,
.vehicle-row-card.is-viajes.selected  { background: #dce9f8; border-color: #a8c8ee; }

/* Leyenda pequeña del código de color: va a la derecha de la fila de botones (hueco libre),
   sin añadir filas ni descolocar el layout. Se oculta en móvil para no apretar la cabecera. */
.color-legend {
  display: inline-flex; align-items: center; gap: 14px; margin-left: auto;
  font-size: 11px; color: #6b7a8d; font-weight: 600; flex-wrap: wrap;
}
.color-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.color-legend .cl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.10); }
.cl-dot.cl-shunter { background: #eab308; }
.cl-dot.cl-viajes  { background: #3b82f6; }
.cl-dot.cl-sick    { background: #dc2626; }
@media (max-width: 768px) { .color-legend { display: none; } }

/* MRW Planning: fila de entrada por imagen (OCR) junto al pegado de texto. */
.mrw-input-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.mrw-img-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 8px;
  background: #c2703d; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.mrw-img-btn:hover { background: #ad6334; }
.mrw-img-hint { font-size: 12px; }
.mrw-img-status { font-size: 12px; font-weight: 600; margin-left: auto; }
.mrw-img-status.is-loading { color: #7b8aa0; }
.mrw-img-status.is-ok { color: #1f9d57; }
.mrw-img-status.is-warn { color: #c0392b; }

/* ── Popups de disponibilidad: dos columnas (izq = disponible · der = utilizado/ausente) + código
   de color estándar (carga de trabajo y ausencias). ────────────────────────────────────────── */
.av-head-actions { display: flex; gap: 8px; align-items: center; }
/* Popup de disponibilidad: grande de inicio para ver todo de golpe (no usa standardizeModal → tamaño CSS).
   Doble clase para ganar a .traffic-popup-resizable (que lo dejaba en 540px de alto). */
.traffic-popup-resizable.driver-availability-card {
  width: min(1040px, calc(100vw - 40px));
  max-width: min(1040px, calc(100vw - 40px));
  height: min(800px, calc(100vh - 40px));
}
.avail2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.avail2-col { min-width: 0; }
.avail2-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.avail2-head--left { color: #1f9d57; }
.avail2-head--right { color: #b06a2c; }
.avail2-head--work { color: #b06a2c; }
.avail2-head--absent { color: #7f8a99; }
.avail2-list { display: flex; flex-direction: column; gap: 6px; }
.av-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; border-radius: 9px; border: 1px solid #d7dee7; background: #fff; font-size: 13px; }
.av-chip b { font-weight: 700; color: #243; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.av-chip small { color: #54657a; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* Colores estándar (mismas clases en los puntos de la leyenda) */
.av-c-disp, .av-c-v1 { background: #e7f5ec; border-color: #b6e0c5; }
.av-c-v2, .av-c-vac  { background: #fdf6dd; border-color: #ecdf9e; }
.av-c-full           { background: #fdeeee; border-color: #f0cccc; }
.av-c-baja           { background: #f3c2c5; border-color: #d9534f; }
.av-c-permiso        { background: #ffe0c2; border-color: #f97316; }
.av-c-verallia       { background: #f9d7cf; border-color: #de5b3b; }
.av-c-parcial        { background: #fdeecb; border-color: #e2ad4e; }
.av-c-libra          { background: #eaf2fc; border-color: #c9ddf3; }
.av-c-otro           { background: #eef1f5; border-color: #d7dee7; }
/* Leyenda desplegable del código de color */
.av-legend { margin: 0 0 12px; font-size: 12px; }
.av-legend > summary { cursor: pointer; font-weight: 700; color: #50627a; padding: 4px 0; list-style: revert; }
.av-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 8px 2px 2px; }
.av-legend-grid > span { display: inline-flex; align-items: center; gap: 7px; color: #3a4a5d; }
.av-dot { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); display: inline-block; flex: 0 0 auto; }
@media (max-width: 768px) {
  .avail2 { grid-template-columns: 1fr; }
  .av-legend-grid { grid-template-columns: 1fr; }
}

/* Editor de reglas/umbrales del código de color de disponibilidad. */
.ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 6px 0 4px; }
.ar-fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #2a3b4d; }
.ar-fld input, .ar-fld textarea { width: 100%; }
.ar-fld small { font-weight: 500; color: #7b8aa0; font-size: 11px; }
.ar-fld.ar-wide { padding-top: 10px; }
/* En el popup de Absentismos los chips estándar van en fila que envuelve. */
.availability-chips .av-chip { flex: 0 1 auto; }
@media (max-width: 768px) { .ar-grid { grid-template-columns: 1fr; } }

/* Cuadrante Decathlon: tarea con color de catálogo; si el color es oscuro, texto en blanco. */
.dct-task-badge.dct-dark, .dct-task-badge.dct-dark b, .dct-task-badge.dct-dark small { color: #fff; }

/* Cuadrante Decathlon: ausencia reflejada de Absentismos (read-only, color estándar av-c-*). */
.dct-task-badge.dct-absence { color: #333; font-style: italic; cursor: default; }
.dct-td-cell.dct-absent { cursor: not-allowed; }

/* ===== Cuadrante Decathlon — toggle Semana/Mes ===== */
.dct-mode-toggle { display: inline-flex; gap: 0; border: 1px solid #cdd5e0; border-radius: 7px; overflow: hidden; }
.dct-mode-toggle button { border: 0; border-radius: 0; margin: 0; padding: 5px 12px; box-shadow: none; }
.dct-mode-toggle button + button { border-left: 1px solid #cdd5e0; }
.dct-mode-toggle button.active { background: #1f6feb; color: #fff; }

/* ===== Cuadrante Decathlon — vista MES (matriz compacta) ===== */
.dct-month-scroll { overflow-x: auto; }
.dct-month-table { border-collapse: collapse; table-layout: fixed; width: max-content; font-size: 10px; }
.dct-month-table th, .dct-month-table td { border: 1px solid #e6e9ef; }
.dct-month-table .dct-th-driver, .dct-td-mdriver {
  position: sticky; left: 0; z-index: 2; background: #f7f9fc; text-align: left;
  width: 132px; max-width: 132px; min-width: 132px; padding: 2px 6px; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dct-th-mday {
  width: 27px; min-width: 27px; max-width: 27px; padding: 2px 0; text-align: center; line-height: 1.05; background: #f7f9fc;
}
.dct-th-mday span { display: block; font-weight: 700; }
.dct-th-mday small { display: block; font-size: 8px; color: #8a93a3; }
.dct-td-mcell { width: 27px; min-width: 27px; max-width: 27px; height: 26px; padding: 1px; text-align: center; cursor: pointer; }
.dct-td-mcell.dct-weekend, .dct-th-mday.dct-weekend { background: #f1f3f7; }
.dct-td-mcell.dct-today-col, .dct-th-mday.dct-today-col { box-shadow: inset 0 0 0 2px #1f6feb33; }
.dct-td-mcell.dct-absent { cursor: not-allowed; }
.dct-mchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 19px; padding: 0 2px; border-radius: 4px; border: 1px solid #cdd5e0;
  font-size: 9px; font-weight: 700; line-height: 1; background: #eef1f5; color: #2a2f3a;
}
.dct-mfree { color: #c4cbd6; }

/* Cuadrante Conductores: nombre del conductor clicable (cambiar/quitar fila). */
.dct-driver-click { cursor: pointer; }
.dct-driver-click:hover { background: #eef3fb; text-decoration: underline; }
/* Conductor NO disponible por su estado maestro (baja/vacaciones/permiso/inactivo): nombre atenuado + chip. */
.dct-driver-away { color: #9a3b38; }
.dct-driver-away small.dct-driver-tag {
  margin-left: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 6px;
  border-radius: 999px;
  background: #f6dede;
  color: #9a3b38;
  vertical-align: middle;
}
.dct-driver-ext small.dct-driver-tag { background: #e4eefb; color: #0b3a5b; }

/* Cuadrante Conductores: asa para reordenar filas (arrastrar y soltar). El asa vive en el padding
   izquierdo de la celda del nombre (reservado), así el nombre no se descoloca; aparece al pasar el ratón. */
.dct-td-driver { padding-left: 22px; }
.dct-drag-handle {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 22px;
  color: var(--muted);
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.dct-td-driver:hover .dct-drag-handle { opacity: 0.75; }
.dct-drag-handle:hover { opacity: 1; color: var(--primary-strong); }
.dct-drag-handle:active { cursor: grabbing; }
.dct-row-dragging { opacity: 0.5; }
.dct-row-dragging .dct-td-driver { background: var(--surface); }

/* Emparejamiento de tareas del cuadrante con servicios recurrentes (modal del import). */
/* `flex: 0 0 auto` a propósito: con varias secciones (conflictos + absentismos + tareas + conductores)
   el flex las encogía y cada una se quedaba con su propio scroll diminuto — cuatro barras y lo
   importante fuera de vista. Ahora cada lista ocupa lo suyo y scrollea LA TARJETA, que ya es
   `overflow-y:auto`. El tope de 52vh sigue por si una lista sola es larguísima. */
.dct-reco-list { max-height: 52vh; overflow-y: auto; flex: 0 0 auto; }
.dct-reco-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
}
.dct-reco-info { flex: 1 1 auto; min-width: 0; }
.dct-reco-hint { font-size: 12px; margin-top: 2px; }
.dct-reco-sim { color: var(--primary-strong); }
.dct-reco-none { color: #9a3b38; }
.dct-reco-select, .dct-reco-dselect { flex: 0 0 auto; max-width: 46%; }
.dct-reco-section {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 10px 2px 2px;
}
.dct-reco-section:first-of-type { margin-top: 2px; }

/* ── Expediente del proveedor (sección Documentación de la ficha) ──────────────────────────────────
   Reusa .ddoc-* de la documentación del conductor; aquí solo lo propio: agrupación por bloques,
   casilla que acepta arrastrar y soltar, y la lista de matrículas editable. */
.pdoc-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 12px 2px 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.pdoc-section .ddoc-body > .pdoc-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
/* Documento POR VEHÍCULO (ITV, permiso de circulación): un título y dos ranuras, tractora y remolque.
   Cada uno tiene su matrícula, su caducidad y su fichero: la ITV del remolque no vence con la otra. */
.pdoc-family { margin: 4px 0 2px; }
.pdoc-family-title { font-size: 13px; font-weight: 600; margin: 6px 2px 2px; }
.pdoc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.pdoc-pair .pdoc-unit { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pdoc-pair .pdoc-unit .ddoc-title { font-size: 12px; color: var(--muted); font-weight: 600; }
@media (max-width: 900px) {
  .pdoc-pair { grid-template-columns: 1fr; }
}
.pdoc-row { transition: background .12s ease, box-shadow .12s ease; border-radius: 8px; }
/* Resalte al arrastrar un fichero encima: dice DÓNDE va a caer antes de soltarlo. */
.pdoc-row.is-dragover {
  background: rgba(37, 99, 235, .07);
  box-shadow: inset 0 0 0 2px var(--primary-strong, #2563eb);
}
.pdoc-missing {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 2px 2px 6px;
  padding: 7px 10px;
  border: 1px solid #f0c9c5;
  border-radius: 8px;
  background: #fdf3f2;
  color: #9a3b38;
  font-size: 12px;
  line-height: 1.35;
}
.pdoc-missing svg { flex: 0 0 auto; margin-top: 2px; }
/* Versiones anteriores plegadas: una subida = una línea. */
.pdoc-hist-toggle {
  background: none;
  border: 0;
  padding: 2px 0 0 2px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline dotted;
}
.pdoc-hist-toggle:hover { color: var(--text, #222); }
.pdoc-hist-toggle.is-open { text-decoration: none; font-weight: 600; }
.pdoc-hist-list[hidden] { display: none; }
.ddoc-file-hist { opacity: .72; }
/* Papelera en dos toques: el 1º pide confirmación en la propia fila (nada de abrir otro panel encima,
   que cerraba la ficha), el 2º borra. Se rinde sola a los 4 s. */
.ddoc-del.is-confirm {
  width: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
/* Matrículas: filas tractora + remolque con su aspa. */
.pveh-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pveh-row { display: flex; align-items: center; gap: 8px; }
.pveh-row .pveh-plate { flex: 1 1 0; min-width: 0; text-transform: uppercase; }
.pveh-row .mini-action { flex: 0 0 auto; }
.pveh-pack { font-size: 12px; margin: 8px 0 0; }
.pveh-pack code { font-size: 11px; }
.pveh-pack span { font-size: 11px; }
@media (max-width: 760px) {
  .pveh-row { flex-wrap: wrap; }
  .pveh-row .pveh-plate { flex: 1 1 46%; }
}

/* Conflictos de VERSIÓN del cuadrante (dos tablas de la misma semana con repartos distintos). La fila
   no se centra como las demás: lleva varias líneas (una por candidato) y el select debe quedar arriba. */
.dct-conf-row { align-items: flex-start; }
.dct-conf-row .dct-conf-select { flex: 0 0 auto; max-width: 46%; margin-top: 2px; }
.dct-conf-opt { font-size: 12px; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dct-conf-opt .muted { font-size: 11px; }
/* La ausencia es lo que de verdad decide el conflicto: se ve sin buscarla. */
.dct-conf-away {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fdecea;
  color: #9a3b38;
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}
.dct-conf-away svg { width: 12px; height: 12px; flex: 0 0 auto; }
.dct-conf-away-row { display: flex; align-items: flex-start; gap: 8px; color: #9a3b38; }
.dct-conf-away-row svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
/* Consecuencia de dejar un conflicto sin decidir, a la vista antes de pulsar Importar. */
.dct-conf-pending {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 2px 0;
  padding: 8px 10px;
  border: 1px solid #f0c9c5;
  border-radius: 8px;
  background: #fdf3f2;
  color: #9a3b38;
  font-size: 12px;
  line-height: 1.35;
}
.dct-conf-pending[hidden] { display: none; }
.dct-conf-pending svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }

/* Ficha con cambios sin guardar: al clicar fuera NO se cierra; la tarjeta "tiembla" para avisar. */
@keyframes tmsModalShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.tms-modal-shake { animation: tmsModalShake 0.3s ease; }

/* Datos del transporte (externo): matrículas como desplegable del proveedor + input "Otra…". */
.field-edit-body .ext-plate-sel { width: 100%; }
.field-edit-body .ext-plate-other { width: 100%; margin-top: 6px; }

/* Botón "Datos" de un servicio externo SIN datos de conductor/matrículas todavía: rojo de un vistazo. */
.ext-data-btn.ext-data-missing {
  background: #fdeaea;
  border-color: #e6b3b3;
  color: #b3261e;
  font-weight: 600;
}
.ext-data-btn.ext-data-missing:hover { background: #fbdcdc; }

/* Cuadrante Decathlon: selección por arrastre de celdas. */
.dct-table { user-select: none; }
.dct-td-cell.is-selected, .dct-td-mcell.is-selected { box-shadow: inset 0 0 0 2px #1f6feb; background: rgba(31,111,235,0.10); }
.dct-lanz-tramos button.is-on { background: #1f6feb; color: #fff; border-color: #1f6feb; }

/* Cuadrante Decathlon — modal "Asignar a servicios" (vista previa). */
.asg-preview { max-height: 320px; overflow: auto; border: 1px solid #eef1f5; border-radius: 6px; }
.asg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.asg-table th, .asg-table td { border-bottom: 1px solid #eef1f5; padding: 4px 8px; text-align: left; vertical-align: top; }
.asg-table th { position: sticky; top: 0; background: #f7f9fc; font-weight: 600; }
.asg-act { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.asg-act.asg-crear { background: #e3f3e8; color: #1c7a3f; }
.asg-act.asg-asignar { background: #dbe9fb; color: #1f5bbf; }
.asg-warn { color: #b5532f; font-size: 11px; margin-top: 2px; }

/* Modal "Asignar a servicios" — lista de servicios (checklist legible). */
.asg-tasklist { border: 1px solid #eef1f5; border-radius: 6px; max-height: 220px; overflow-y: auto; }
.asg-task-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f1f3f7; }
.asg-task-row:last-child { border-bottom: 0; }
.asg-task-row input[type="checkbox"], #dctLinkList input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; }
.asg-task-row span { flex: 1; font-size: 13px; }

/* Modal "Asignar a servicios": más alto y que crezca la zona de scroll, no el hueco. */
#dctAssignForm { max-height: 88vh; display: flex; flex-direction: column; }
#dctAssignBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#dctAssignBody .asg-preview { flex: 1 1 auto; min-height: 160px; max-height: none; }
.asg-act.asg-block { background: #f3c2c5; color: #9b2c2c; }
.asg-blocked { background: #fdf0f0; }
.asg-blocked td { color: #7a2e2e; }
/* "Ya asignado" = existe y ya tiene ese mismo conductor → se deja como está (no se re-asigna). */
.asg-act.asg-keep { background: #eceef1; color: #5b636e; }
.asg-unchanged { background: #fafbfc; }
.asg-unchanged td { color: #7b828c; }
.asg-keep-txt { color: #5b636e; font-size: 12px; }

/* Barra "Deshacer" (último cambio, TMS-wide). */
#undoBar { position: fixed; left: 16px; bottom: 16px; z-index: 3000; display: none; align-items: center; gap: 10px;
  background: #1f2a44; color: #fff; padding: 7px 8px 7px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  font-size: 13px; max-width: 92vw; }
#undoBar.show { display: inline-flex; }
#undoBar button[data-undo-go] { background: #1f6feb; color: #fff; border: 0; border-radius: 6px; padding: 5px 12px; font-weight: 600; cursor: pointer; }
#undoBar button[data-undo-x] { background: transparent; color: #cdd5e0; border: 0; cursor: pointer; font-size: 13px; padding: 2px 4px; line-height: 1; }

/* Planificación externa: selector de proveedor + etiqueta de cliente detectado. */
.ext-prov-row { margin: 0 0 10px; flex-wrap: wrap; }
.ext-detected { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
/* Pestaña de planificación recurrente creada por el usuario (se distingue con un puntito). */
.ext-tab-custom::before { content: "\25CF"; color: var(--accent, #b8733d); font-size: 8px; margin-right: 5px; vertical-align: middle; }
/* Los 3 desplegables del modo Auto: Cliente / Carga / Descarga. Filtros a la izquierda, en fila. */
.ext-auto-pickers { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
  background: var(--surface-soft, #f6f9fc); border: 1px solid var(--line); border-radius: 10px; }
.ext-auto-pickers label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; font-weight: 700;
  color: var(--muted); flex: 1 1 200px; min-width: 160px; }
.ext-auto-pickers select, .ext-auto-pickers input[type="text"] { border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; padding: 7px 9px; }
/* Barra de gestión de una pestaña recurrente (renombrar / eliminar). */
.ext-custom-bar { align-items: flex-end; }
.ext-custom-bar #extRenameInput { min-width: 180px; }
.ext-custom-bar button { border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; padding: 7px 12px; }
.ext-custom-bar #extRenameSave { background: var(--accent, #b8733d); border-color: var(--accent, #b8733d); color: #fff; }
.ext-custom-bar .ext-custom-hint { flex: 1 1 100%; font-weight: 400; font-size: 12px; margin-top: 2px; }

/* Planificación externa: NORMAS DE LECTURA (lista editable por proveedor, persistente). */
.ext-rules { border: 1px solid var(--border, #dee2e6); border-radius: 8px; background: var(--surface-2, #f8f9fa); padding: 8px 10px; margin: 8px 0 4px; }
.ext-rules-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; cursor: pointer; }
.ext-rules.collapsed { padding: 5px 10px; }
.ext-rules.collapsed .ext-rules-head { margin-bottom: 0; }
.ext-rules-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--border, #dee2e6); color: var(--text, #343a40); font-size: 10.5px; font-weight: 700; }
.ext-rules-chevron { display: inline-flex; margin-left: 2px; color: var(--muted, #868e96); transition: transform 0.15s; }
.ext-rules-chevron svg { width: 14px; height: 14px; }
.ext-rules:not(.collapsed) .ext-rules-chevron { transform: rotate(180deg); }
.ext-rules-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.ext-rules-title svg { width: 14px; height: 14px; }
.ext-rules-hint { font-size: 11.5px; flex: 1 1 auto; }
.ext-rules-btn { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.ext-rules-btn:first-of-type { margin-left: auto; }
.ext-rules-btn svg { width: 13px; height: 13px; }
.ext-rules-list { display: flex; flex-direction: column; gap: 5px; }
.ext-rules-empty { font-size: 12px; padding: 2px 0; }
.ext-rule { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ext-rule .ext-rule-sel { height: 28px; min-height: 28px; padding: 0 4px; font-size: 12px; }
.ext-rule [data-r="field"] { width: 168px; flex: 0 0 auto; }
.ext-rule [data-r="target"] { width: 148px; flex: 0 0 auto; }
.ext-rule [data-r="mode"] { width: 222px; flex: 0 0 auto; }
.ext-rule .ext-rule-txt { height: 28px; min-height: 28px; padding: 0 8px; font-size: 12px; width: 92px; flex: 0 0 auto; }
.ext-rule .ext-rule-time { height: 28px; min-height: 28px; padding: 0 6px; font-size: 12px; width: 92px; flex: 0 0 auto; }
.ext-rule > .muted { font-size: 12px; white-space: nowrap; }
.ext-rule-del { height: 28px; width: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;
  background: transparent; color: var(--muted, #868e96); border-radius: 6px; cursor: pointer; padding: 0; }
.ext-rule-del:hover { color: #b02a37; background: #fdecec; border-color: #f4b9b9; }
.ext-rule-del svg { width: 14px; height: 14px; }

/* Planificación externa: direcciones matcheadas/aprendidas en la previsualización. */
.ext-addr { border: 0; background: transparent; font: inherit; color: inherit; padding: 0 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; text-align: left; }
.ext-addr:hover { background: var(--surface-2, #f1f3f5); }
.ext-addr svg { width: 12px; height: 12px; flex: 0 0 auto; }
.ext-addr-warn { color: #b02a37; border-bottom: 1px dashed #d38b92; border-radius: 0; }
.ext-addr-warn:hover { background: #fdecec; }
.ext-addr-ok svg { color: #2b8a3e; }
.ext-cli-time { font-size: 10.5px; color: var(--muted, #868e96); background: var(--surface-2, #f1f3f5);
  border: 1px solid var(--border, #dee2e6); border-radius: 5px; padding: 0 5px; white-space: nowrap; }

/* Planificación externa: selector de dirección (aprende el alias). */
.ext-pick-overlay { z-index: 2100; }
.ext-pick-card { max-width: 560px; width: 94vw; }
.ext-pick-card #extPickFilter { width: 100%; height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; margin: 0 0 8px; }
.ext-pick-list { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ext-pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer; font: inherit; }
.ext-pick-item:hover { background: var(--surface-2, #f1f3f5); border-color: var(--border, #dee2e6); }
.ext-pick-item strong { font-size: 12.5px; }
.ext-pick-item .muted { font-size: 11.5px; }

/* ══ Pulido estético (jul 2026) ══════════════════════════════════════════════
   1) Sistema UNIFICADO de campos en las fichas grandes (servicio + conductor):
      etiqueta pequeña en mayúsculas gris + control de 32px + foco de marca.
   2) Toast con acento verde/rojo y entrada suave. 3) Modales con entrada animada.
   4) Estados vacíos con icono. 5) Menú: transiciones suaves. */

/* 1) Campos de ficha unificados */
.service-edit-modal .service-edit-grid > label,
#driverEditModalForm .field-edit-body label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted, #6b7280);
}
/* las pistas en gris dentro de la etiqueta no van en mayúsculas; el texto-etiqueta sí */
.service-edit-modal .service-edit-grid > label > span.muted,
.service-edit-modal .service-edit-grid > label span[style],
#driverEditModalForm .field-edit-body label span.muted { text-transform: none; letter-spacing: 0; }
.service-edit-modal .service-edit-grid input:not([type="checkbox"]),
.service-edit-modal .service-edit-grid select,
#driverEditModalForm .field-edit-body input:not([type="checkbox"]):not([type="date"]),
#driverEditModalForm .field-edit-body input[type="date"],
#driverEditModalForm .field-edit-body select {
  height: 32px; min-height: 32px; padding: 0 9px; font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink, #1f2933);
}
.service-edit-modal .service-edit-grid textarea,
#driverEditModalForm .field-edit-body textarea {
  font-size: 13.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink, #1f2933);
}
.service-edit-modal .service-edit-grid label > button,
.service-edit-modal .service-edit-grid label .svc-addr-pick {
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.service-edit-modal input:focus, .service-edit-modal select:focus, .service-edit-modal textarea:focus,
#driverEditModalForm input:focus, #driverEditModalForm select:focus, #driverEditModalForm textarea:focus {
  border-color: var(--brand, #8a5a2b);
  box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.13);
  outline: none;
}

/* 2) Toast: acento por tipo + entrada/salida suave (misma esquina de siempre) */
.toast {
  /* Entra deslizando desde arriba. ease-OUT (no `ease`): arranca rápido y frena → se siente inmediato. */
  display: block; opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(.16, 1, .3, 1);
  border-left: 4px solid #3fa46a;
}
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .18s linear; transform: none; } }

/* Botón "Emitir DeCA": no lleva icono (su texto se reescribe), así que el estado OCUPADO es un anillo que
   gira junto al texto mientras se generan los PDF. Scoped al botón: nada de reglas globales de botón. */
@keyframes ui-spin { to { transform: rotate(360deg); } }
#emitSelectedDecaButton { transition: transform .13s ease-out; }
#emitSelectedDecaButton:active:not(:disabled) { transform: scale(.97); transition-duration: .06s; }
#emitSelectedDecaButton.is-busy::after {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 7px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: ui-spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #emitSelectedDecaButton { transition: none; }
  #emitSelectedDecaButton:active:not(:disabled) { transform: none; }
  #emitSelectedDecaButton.is-busy::after { animation: none; opacity: .5; }
}
.toast.show { opacity: 1; transform: none; }
.toast.error { border-left-color: #e05252; }

/* 3) Modales: entrada con fundido + leve escala (respeta reduced-motion) */
@keyframes tmsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmsCardIn { from { opacity: 0; transform: translateY(7px) scale(0.985); } to { opacity: 1; transform: none; } }
.rec-overlay.open { animation: tmsFadeIn 0.12s ease-out; }
.rec-overlay.open > .rec-card,
.rec-overlay.open > form,
#milestonePanel.open > .attachment-card,
#milestonePanel.open > form,
#serviceCancelPanel.open > .attachment-card,
#serviceCancelPanel.open > form {
  animation: tmsCardIn 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .rec-overlay.open, .rec-overlay.open > .rec-card, .rec-overlay.open > form,
  #milestonePanel.open > .attachment-card, #milestonePanel.open > form,
  #serviceCancelPanel.open > .attachment-card, #serviceCancelPanel.open > form { animation: none; }
}

/* 4) Estados vacíos con icono (renderRows los pinta en todas las listas) */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; }
.empty .ic { color: var(--muted, #6b7280); opacity: 0.5; }
.empty p { margin: 0; font-size: 13px; color: var(--muted, #6b7280); }

/* 5) Menú: hover con transición (sin saltos) y submenús más suaves */
.nav-item { transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.submenu-item { border-radius: 6px; transition: background 0.12s ease; }

/* Títulos de sección de las fichas: jerarquía sobre las etiquetas de campo (marrón + filete). */
.service-edit-modal p.service-edit-section-title,
p.service-edit-section-title { color: #8a5a2b; }

/* 6) Tráfico: densidad de fila ESTABLE — altura mínima por densidad, centrado vertical y
      truncado a una línea del texto largo (las celdas multilínea intencionadas no se tocan). */
.service-table td { vertical-align: middle; line-height: 1.3; }
.service-table tbody tr { height: 42px; }
.service-list.density-compact .service-table tbody tr { height: 34px; }
.service-list.density-comfortable .service-table tbody tr { height: 54px; }
/* :where() = especificidad mínima: no pisa el clamp de 3 líneas de Notas/Incidencias */
#servicesList.row-zoom-active .service-table {
  font-size: clamp(9.4px, calc(11px * var(--traffic-text-zoom, 1)), 12px);
}
#servicesList.row-zoom-active .service-table th,
#servicesList.row-zoom-active .service-table td {
  padding: calc(6px * var(--traffic-row-zoom, 1)) calc(8px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .service-table th {
  font-size: clamp(8.5px, calc(10px * var(--traffic-text-zoom, 1)), 11px);
}
#servicesList.row-zoom-active .service-table tbody tr {
  height: calc(42px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active.density-compact .service-table tbody tr {
  height: calc(34px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active.density-comfortable .service-table tbody tr {
  height: calc(54px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .service-time-cell {
  gap: calc(5px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .service-date-cell {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: calc(2px * var(--traffic-row-zoom, 1)) calc(4px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .service-date-cell > .field-edit-hotspot {
  line-height: 1.05;
  min-height: 0;
}
#servicesList.row-zoom-active .service-date-cell :where(.driver-app-chip, .deca-stamp, .tasado-chip, .laso-chip) {
  font-size: clamp(7px, calc(8px * var(--traffic-text-zoom, 1)), 9px);
  line-height: 1;
  min-height: clamp(8px, calc(15px * var(--traffic-row-zoom, 1)), 18px);
  min-width: 0;
  padding: calc(1px * var(--traffic-row-zoom, 1)) calc(4px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .service-date-cell .driver-app-status-wrap {
  gap: calc(2px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .route-cell {
  gap: calc(1px * var(--traffic-row-zoom, 1)) calc(5px * var(--traffic-row-zoom, 1));
  grid-template-columns: repeat(auto-fit, minmax(min(125px, 100%), 1fr));
}
#servicesList.row-zoom-active .route-field,
#servicesList.row-zoom-active .route-col {
  gap: 0;
}
#servicesList.row-zoom-active .route-label {
  font-size: clamp(8px, calc(9px * var(--traffic-text-zoom, 1)), 10px);
  line-height: 1;
}
#servicesList.row-zoom-active .route-address-hotspot {
  font-size: clamp(10px, calc(11px * var(--traffic-text-zoom, 1)), 12.5px);
  line-height: 1.08;
  min-height: clamp(10px, calc(18px * var(--traffic-row-zoom, 1)), 22px);
  padding: calc(1px * var(--traffic-row-zoom, 1)) calc(4px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .compact-route-actions {
  flex-wrap: nowrap;
  margin-top: 0;
}
#servicesList.row-zoom-active .route-map-actions {
  flex-wrap: nowrap;
  gap: calc(2px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .route-map-actions .button-link,
#servicesList.row-zoom-active .route-map-actions .route-add-stop {
  font-size: clamp(7px, calc(8px * var(--traffic-text-zoom, 1)), 9px);
  line-height: 1;
  min-height: clamp(8px, calc(15px * var(--traffic-row-zoom, 1)), 18px);
  padding: calc(1px * var(--traffic-row-zoom, 1)) calc(3px * var(--traffic-row-zoom, 1));
  white-space: nowrap;
}
#servicesList.row-zoom-active .route-field-multi {
  gap: calc(1px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .route-multi-head {
  gap: calc(3px * var(--traffic-row-zoom, 1));
  line-height: 1;
}
#servicesList.row-zoom-active .route-stop-list {
  gap: clamp(2px, calc(4px * var(--traffic-row-zoom, 1)), 4px);
  margin-top: clamp(2px, calc(4px * var(--traffic-row-zoom, 1)), 4px);
}
#servicesList.row-zoom-active .route-stop {
  border-color: #d8e2ec;
  border-radius: 5px;
  gap: clamp(3px, calc(5px * var(--traffic-row-zoom, 1)), 5px);
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  min-height: clamp(17px, calc(26px * var(--traffic-row-zoom, 1)), 28px);
  padding: clamp(2px, calc(3px * var(--traffic-row-zoom, 1)), 4px) clamp(4px, calc(6px * var(--traffic-row-zoom, 1)), 7px);
}
#servicesList.row-zoom-active .route-stop-handle {
  font-size: clamp(8px, calc(9px * var(--traffic-text-zoom, 1)), 10px);
  line-height: 1;
}
#servicesList.row-zoom-active .route-stop-num {
  font-size: clamp(7.5px, calc(8px * var(--traffic-text-zoom, 1)), 9px);
  height: clamp(13px, calc(16px * var(--traffic-row-zoom, 1)), 16px);
  min-width: clamp(13px, calc(16px * var(--traffic-row-zoom, 1)), 16px);
}
#servicesList.row-zoom-active .route-stop-main {
  flex-direction: row;
  gap: clamp(4px, calc(7px * var(--traffic-row-zoom, 1)), 7px);
  line-height: 1.12;
}
#servicesList.row-zoom-active .route-stop-addr {
  font-size: clamp(9px, calc(11px * var(--traffic-text-zoom, 1)), 12px);
  min-width: 0;
}
#servicesList.row-zoom-active .route-stop-time {
  flex: 0 0 auto;
  font-size: clamp(7.5px, calc(9px * var(--traffic-text-zoom, 1)), 10px);
  line-height: 1.05;
  white-space: nowrap;
}
#servicesList.row-zoom-active .route-stop-del {
  font-size: clamp(9px, calc(11px * var(--traffic-text-zoom, 1)), 12px);
  line-height: 1;
  min-height: 0;
  padding: 0 clamp(2px, calc(3px * var(--traffic-row-zoom, 1)), 4px);
}
#servicesList.row-zoom-active .driver-milestones,
#servicesList.row-zoom-active .customer-meta-row,
#servicesList.row-zoom-active .compact-route-actions {
  gap: calc(4px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active :where(.mini-action, .cmr-send-button, .proof-send-button, .cancel-service-button, .deca-stamp, .route-action) {
  font-size: clamp(8px, calc(9px * var(--traffic-text-zoom, 1)), 11px);
  min-height: clamp(10px, calc(19px * var(--traffic-row-zoom, 1)), 24px);
  padding: calc(3px * var(--traffic-row-zoom, 1)) calc(7px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .route-action {
  line-height: 1;
  min-height: clamp(9px, calc(17px * var(--traffic-row-zoom, 1)), 20px);
  padding: calc(1px * var(--traffic-row-zoom, 1)) calc(5px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .driver-milestone {
  font-size: clamp(8px, calc(9px * var(--traffic-text-zoom, 1)), 11px);
  min-height: clamp(10px, calc(20px * var(--traffic-row-zoom, 1)), 26px);
  min-width: clamp(22px, calc(43px * var(--traffic-row-zoom, 1)), 54px);
  padding: calc(2px * var(--traffic-row-zoom, 1)) calc(3px * var(--traffic-row-zoom, 1)) calc(3px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .driver-milestone b {
  font-size: clamp(7px, calc(8px * var(--traffic-text-zoom, 1)), 9px);
  min-width: clamp(8px, calc(16px * var(--traffic-row-zoom, 1)), 20px);
  padding: calc(2px * var(--traffic-row-zoom, 1)) calc(3px * var(--traffic-row-zoom, 1));
}
#servicesList.row-zoom-active .driver-milestone small {
  font-size: clamp(8px, calc(9px * var(--traffic-text-zoom, 1)), 11px);
  line-height: clamp(7px, calc(12px * var(--traffic-row-zoom, 1)), 15px);
}
.service-table td :where(.editable-value, .field-edit-hotspot) {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; white-space: nowrap;
}
/* EXCEPCIÓN: la celda de hora con hitos LC/SC/LD/SD no es texto — el inline-block+overflow
   de arriba CORTABA los chips por la derecha ("22:4…"). Vuelve a su grid y los chips
   envuelven a una segunda línea si la columna es estrecha (siempre legibles enteros). */
.service-table td .service-time-cell.field-edit-hotspot {
  display: grid; overflow: visible; white-space: normal;
}
.service-table td .service-time-cell .driver-milestones { flex-wrap: wrap; }
.service-table .svc-cita { font-size: 10.5px; line-height: 1.2; }

/* 7) Verallia (Fase 6): campos y popups alineados con el sistema unificado + foco de marca. */
.vp-f { color: var(--muted, #6b7280); font-size: 10.5px; font-weight: 700; gap: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.vp-f input, .vp-f select {
  border: 1px solid var(--line, #d3deea); color: var(--ink, #1f2933); font-size: 13.5px; font-weight: 400;
  height: 32px; letter-spacing: 0; min-height: 32px; padding: 0 9px; text-transform: none;
}
.vp-legtitle { color: var(--muted, #6b7280); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; width: 100%; }
.vp-legbox { border-color: var(--line, #d3deea); }
.vp-legbox input { border: 1px solid var(--line, #d3deea); height: 32px; min-height: 32px; padding: 0 9px; }
.vb-edit { border-color: var(--line, #d3deea); }
.vp-f input:focus, .vp-f select:focus, .vp-legbox input:focus, .vb-edit:focus {
  border-color: #8a5a2b; box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.13); outline: none;
}

/* 8) Ficha de vehículo unificada (perfil dentro de la ficha documental + alta de vehículo). */
.vehicle-profile-grid label,
#vehicleForm label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted, #6b7280);
}
.vehicle-profile-grid label span.muted,
#vehicleForm label span.muted { text-transform: none; letter-spacing: 0; }
.vehicle-profile-grid input, .vehicle-profile-grid select,
#vehicleForm input:not([type="checkbox"]), #vehicleForm select {
  height: 32px; min-height: 32px; padding: 0 9px; font-size: 13.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink, #1f2933);
}
.vehicle-profile-grid input:focus, .vehicle-profile-grid select:focus,
#vehicleForm input:focus, #vehicleForm select:focus {
  border-color: #8a5a2b; box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.13); outline: none;
}
.vehicle-doc-title strong {
  color: #8a5a2b; display: block; font-size: 11px; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
}

/* DeCA — documento de control electrónico: sección de la ficha, chips, tarjeta y popups. */
.deca-section { border-top: 2px solid var(--brand, #8a5a2b); }
.deca-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deca-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 6px; text-transform: uppercase; }
.deca-chip-ok { background: #e7f2ea; color: #2f7a45; }
.deca-chip-warn { background: #fbeede; color: #b9701b; }
.deca-chip-danger { background: #fbe6e6; color: #b02a37; }
.deca-chip-muted { background: var(--surface-2, #f1f3f5); color: var(--muted, #868e96); }
.deca-num { font-weight: 800; font-size: 13px; color: var(--brand, #8a5a2b); }
.deca-meta { font-size: 11.5px; }
.deca-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.deca-btn { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.deca-btn-primary { background: var(--brand, #8a5a2b); color: #fff; border: 1px solid var(--brand, #8a5a2b); border-radius: 6px; cursor: pointer; font-weight: 700; }
.deca-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.deca-btn-danger { color: #b02a37; }
.deca-gear { width: 30px; padding: 0; justify-content: center; }
.deca-note { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; border-radius: 8px; padding: 7px 10px; margin-top: 8px; line-height: 1.4; }
.deca-note svg { flex: 0 0 auto; margin-top: 1px; }
.deca-note-warn { background: #fbeede; border: 1px solid #f3d2a6; color: #7a4a10; }
.deca-note-sent { background: #e7f4ea; border: 1px solid #b7dcc2; color: #2e6b41; font-weight: 500; }
.deca-firmas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.deca-firmas-label { font-size: 11.5px; }
.deca-history { font-size: 11px; margin-top: 7px; }
.deca-history a { color: var(--brand, #8a5a2b); }

.deca-metric.is-danger { background: #fbe6e6; }
.deca-metric.is-danger strong { color: #b02a37; }

.deca-day-card { max-width: 720px; width: 94vw; }
.deca-day-list { display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow: auto; }
/* Fila = REJILLA fija (hora | cliente | ruta | chip): todo alineado en columnas, sin baile.
   Colores explícitos: el botón NO hereda el blanco de los botones primarios. */
.deca-day-row { display: grid; grid-template-columns: 48px minmax(150px, 200px) 1fr auto;
  align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--border, #e9ecef);
  background: #fff; color: var(--ink, #1f2933); border-radius: 8px; padding: 8px 10px; cursor: pointer;
  font: inherit; font-size: 13px; }
.deca-day-row:hover { border-color: var(--brand, #8a5a2b); background: var(--surface-2, #faf6ef); }
.deca-day-hora { font-variant-numeric: tabular-nums; font-weight: 700; color: #8a5a2b; text-align: left; }
.deca-day-cliente { color: #1f2933; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deca-day-ruta { color: var(--muted, #6b7280); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deca-day-flecha { color: #b9a58c; }

/* Sello DeCA por servicio en la tabla de Tráfico (junto a NO ENVIADO / Tasado). */
.deca-stamp { display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  box-sizing: border-box; font-family: inherit; font-size: 9px; font-weight: 700; height: 19px; line-height: 1;
  letter-spacing: 0; max-height: 19px; min-height: 19px; padding: 3px 7px; text-transform: none;
  white-space: nowrap; cursor: pointer; }
.deca-stamp-ok { background: #2f7a45; border: 1px solid #2f7a45; color: #fff; }
.deca-stamp-missing { background: #fff; color: #b02a37; border: 1px dashed #d98b93; }
.deca-stamp-anulado { background: #fbe6e6; color: #b02a37; border: 1px solid #f0b6bc; }

/* Botón "Guardar mercancía" bajo los tres campos (guardado parcial sin cerrar la ficha). */
.mercancia-actions { display: flex; justify-content: flex-end; margin-top: 6px; }

.deca-config-overlay { z-index: 2100; }
.deca-config-card { max-width: 560px; width: 94vw; }
.deca-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.deca-cfg-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; }
.deca-cfg-f input { height: 32px; min-height: 32px; padding: 0 9px; font-size: 13px; }
.deca-cfg-f:nth-child(3), .deca-cfg-f:nth-child(4), .deca-cfg-f:nth-child(5) { grid-column: 1 / -1; }
@media (max-width: 640px) { .deca-cfg-grid { grid-template-columns: 1fr; } }

/* Ficha de conductor: sección Documentación Conductor (colapsada de serie; avisos como la ITV). */
.ddoc-section { margin-top: 14px; border-top: 1px solid var(--border, #dee2e6); padding-top: 12px; }
.ddoc-section-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; user-select: none; }
.ddoc-section-head svg { color: var(--brand, #8a5a2b); }
.ddoc-section.collapsed .ddoc-body { display: none; }
.ddoc-section.collapsed .ddoc-section-head { margin-bottom: 0; }
.ddoc-chevron { display: inline-flex; margin-left: auto; color: var(--muted, #868e96); transition: transform 0.15s; }
.ddoc-chevron svg { color: var(--muted, #868e96); }
.ddoc-section:not(.collapsed) .ddoc-chevron { transform: rotate(180deg); }
.ddoc-section-hint { font-weight: 400; font-size: 11.5px; margin: 0 0 8px; }

/* Escaneo de PDF/imagen COMBINADO (DNI + carnet + tacógrafo + CAP en un fichero). */
.dcombo-launch { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 2px 0 12px; padding: 9px 10px;
  border: 1px dashed var(--primary, #b0703c); border-radius: 8px; background: var(--primary-soft, #f6ece2);
  transition: background .12s, border-color .12s, box-shadow .12s; }
.dcombo-launch.is-dragover { border-style: solid; border-color: var(--primary-strong, #8c5530);
  background: #f0dcc9; box-shadow: inset 0 0 0 2px var(--primary, #b0703c); }
.dcombo-launch.is-dragover * { pointer-events: none; }   /* el arrastre no lo roban los hijos */
.dcombo-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: #fff; background: var(--primary, #b0703c); border-radius: 7px; padding: 7px 12px; white-space: nowrap; }
.dcombo-btn:hover { background: var(--primary-strong, #8c5530); }
/* El botón es un <label> (envuelve el input file), así que dentro de una ficha lo pisaban las reglas
   genéricas de etiqueta y quedaba GRIS sobre marrón — ilegible (contraste 1,25). Y no basta con subir
   la especificidad: en la ficha de conductor la que gana lleva ID
   (`#driverEditModalForm .field-edit-body label`, 1-1-1). El color de un BOTÓN no puede depender de en
   qué ficha caiga, así que aquí `!important` es lo correcto. Fondo al tono fuerte para llegar a un
   contraste holgado (blanco sobre #8c5530 ≈ 6:1). */
.dcombo-launch .dcombo-btn {
  color: #fff !important;
  background: var(--primary-strong, #8c5530);
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 12.5px;
}
.dcombo-launch .dcombo-btn:hover { background: #74441f; }
.dcombo-launch .dcombo-btn svg { color: #fff; }
.dcombo-hint { flex: 1 1 220px; font-size: 11.5px; }

/* Modal de previsualización del escaneo combinado. */
.dcombo-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(20, 24, 33, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow: auto; }
.dcombo-modal { background: var(--surface, #fff); border-radius: 12px; width: min(920px, 96vw); max-width: 96vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 16px 18px 18px; }
.dcombo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dcombo-head span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); font-weight: 700; }
.dcombo-head h2 { margin: 2px 0 0; font-size: 18px; }
.dcombo-note { font-size: 12px; color: var(--muted, #55606e); margin: 0 0 12px; line-height: 1.45; }
.dcombo-conf { font-style: normal; font-weight: 700; font-size: 10px; border-radius: 999px; padding: 1px 6px; border: 1px solid transparent; }
.dcombo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dcombo-card { display: flex; gap: 10px; border: 1px solid var(--border, #e5e9ef); border-radius: 10px; padding: 10px; background: var(--surface-soft, #f6f9fc); }
.dcombo-img { flex: 0 0 128px; }
.dcombo-img img { width: 128px; height: auto; border-radius: 6px; border: 1px solid #d8dee6; display: block; background: #fff; }
.dcombo-cardbody { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dcombo-inc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }
.dcombo-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted, #6b7280); }
.dcombo-f > span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.dcombo-in { height: 32px; min-height: 32px; padding: 0 9px; font-size: 13px; width: 100%; border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1); background: #fff; }
.dcombo-in.doc-ok { border-color: #a7dec0; }
.dcombo-in.doc-warning { border-color: #efd17a; background: #fffdf5; }
.dcombo-in.doc-danger { border-color: #efb4b4; background: #fffafa; }
select.dcombo-in { padding: 0 6px; }
.dcombo-actions { display: flex; gap: 10px; margin-top: 16px; }
.dcombo-actions button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 680px) { .dcombo-grid { grid-template-columns: 1fr; } .dcombo-img, .dcombo-img img { flex-basis: 104px; width: 104px; } }

/* Banner de caducidades en la sección Conductores. */
.ddoc-banner { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; border-radius: 8px; padding: 7px 10px; margin: 0 0 10px;
  border: 1px solid; font-size: 12px; }
.ddoc-banner.is-warning { background: #fff8ec; border-color: #f3d2a6; }
.ddoc-banner.is-danger { background: #fdf0f0; border-color: #f4b9b9; }
.ddoc-banner-title { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; }
.ddoc-banner.is-danger .ddoc-banner-title { color: #9b2c2c; }
.ddoc-banner.is-warning .ddoc-banner-title { color: #92600e; }
.ddoc-banner-chip { border: 1px solid transparent; border-radius: 12px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; font-weight: 600; }
.ddoc-banner-chip.doc-danger { background: #f8d7da; color: #842029; }
.ddoc-banner-chip.doc-warning { background: #fff3cd; color: #664d03; }
.ddoc-banner-chip:hover { border-color: currentColor; }
.ddoc-row { border: 1px solid var(--border, #e9ecef); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; background: var(--surface-2, #fbfcfd); }
.ddoc-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 7px; }
.ddoc-title { font-weight: 600; font-size: 12.5px; }
.ddoc-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.ddoc-f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted, #6b7280); }
.ddoc-f span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; }
.ddoc-f input { height: 30px; min-height: 30px; padding: 0 8px; font-size: 13px; width: 168px; }
.ddoc-f.ddoc-f-sm input { width: 92px; }
.ddoc-files { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.ddoc-file { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ddoc-file a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand, #1f6feb); text-decoration: none; }
.ddoc-file a:hover { text-decoration: underline; }
.ddoc-file .muted { flex: 1 1 auto; font-size: 11px; }
/* Nombre del fichero: "Ver" (imagen, abre el visor) o "Abrir" (PDF). Botón con pinta de enlace. */
.ddoc-fname { display: inline-flex; align-items: center; gap: 4px; color: var(--primary, #b0703c); text-decoration: none;
  background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ddoc-fname:hover { text-decoration: underline; }
/* Descargar: icono aparte, discreto (para no tener que abrir para guardar). */
.ddoc-dl { height: 24px; width: 24px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: var(--muted, #868e96); border-radius: 6px; }
.ddoc-dl:hover { color: var(--primary, #b0703c); background: var(--primary-soft, #f6ece2); }
.ddoc-hist { display: inline-block; font-size: 10px; font-weight: 700; background: var(--border, #e9ecef); color: var(--muted, #6b7280); border-radius: 4px; padding: 0 5px; }
.ddoc-del { height: 24px; width: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--muted, #868e96); border-radius: 6px; cursor: pointer; padding: 0; }
.ddoc-del:hover { color: #b02a37; background: #fdecec; border-color: #f4b9b9; }
.ddoc-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ddoc-upload { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border, #dee2e6); border-radius: 6px; padding: 5px 10px; background: #fff; }
.ddoc-upload:hover { border-color: var(--brand, #8a5a2b); }
/* Resalte al arrastrar un fichero sobre el botón "Subir / escanear" de ese tipo. */
.ddoc-upload.is-dragover { border-style: dashed; border-color: var(--primary, #b0703c);
  background: var(--primary-soft, #f6ece2); box-shadow: inset 0 0 0 1px var(--primary, #b0703c); }
.ddoc-upload.is-dragover * { pointer-events: none; }
.ddoc-hint { font-size: 11.5px; }
.ddoc-upload-status { font-size: 11.5px; }
.ddoc-upload-status.is-loading { color: var(--muted, #868e96); }
.ddoc-upload-status.is-ok { color: #2b8a3e; }
.ddoc-upload-status.is-warn { color: #b02a37; }

/* Importar viajes Laso */
.laso-card { max-width: 1100px; width: 96vw; }
.laso-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.laso-chip { font-size: 12px; background: var(--surface-2, #f1f3f5); border: 1px solid var(--border, #dee2e6); border-radius: 12px; padding: 2px 9px; }
.laso-chip.ok { background: #e6f6ec; border-color: #b7e3c6; }
.laso-chip.warn { background: #fdecec; border-color: #f4b9b9; }
.laso-chip.muted { color: var(--muted, #868e96); }
.laso-warn-box { background: #fdecec; border: 1px solid #f4b9b9; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin: 0 0 10px; line-height: 1.5; }
.laso-details { margin: 0 0 10px; }
.laso-details > summary { cursor: pointer; font-size: 12.5px; color: var(--muted, #868e96); padding: 4px 0; }
.laso-trips { max-height: 46vh; overflow: auto; }
.laso-row-warn td { background: #fdf3f3; }
.laso-row-already td { color: var(--muted, #adb5bd); }
.laso-ext { display: inline-block; font-size: 10px; font-weight: 700; background: #4263eb; color: #fff; border-radius: 4px; padding: 0 4px; vertical-align: middle; }
/* YA IMPORTADO PERO DISTINTO en el archivo nuevo: ámbar (no es un error, es una decisión que tomar) con
   el "antes → después" debajo y su casilla para actualizarlo. Nace desmarcada: lo del TMS manda salvo
   que el operativo diga lo contrario. */
.laso-chip.chg { background: #fdf3e2; border-color: #eccb92; color: #7a5510; font-weight: 600; }
.laso-chg-box { background: #fdf6e9; border: 1px solid #eccb92; border-radius: 8px; padding: 8px 10px; font-size: 12.5px;
  margin: 0 0 10px; line-height: 1.5; color: #6b5320; }
.laso-chg-box svg { vertical-align: -2px; color: #c8901f; }
.laso-chg-actions { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.laso-chg-actions button { font-size: 12px; padding: 3px 10px; }
.laso-upd-count { font-size: 12px; color: #7a5510; font-weight: 600; }
.laso-row-changed td { background: #fdf6e9; }
.laso-upd { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #7a5510; white-space: nowrap; cursor: pointer; }
.laso-upd input { width: 14px; height: 14px; min-height: 0; margin: 0; cursor: pointer; }
.laso-diff-row td { background: #fffdf7; border-top: 0; padding: 4px 10px 8px; }
.laso-diff-t { font-size: 11px; font-weight: 700; color: #a08040; text-transform: uppercase; letter-spacing: .02em; margin-right: 8px; }
.laso-diff { display: inline-block; font-size: 11.5px; margin: 2px 12px 2px 0; color: #5b4a2a; }
.laso-diff b { font-weight: 600; color: #7a5510; }
.laso-diff-b { font-style: normal; text-decoration: line-through; color: #9b8a6a; }
.laso-diff-a { font-style: normal; font-weight: 600; color: #1d6b3f; }

/* Importar Laso: badge de tipo (viaje/shunter/admin) */
.laso-kind { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 5px; }
.laso-k-tr { background: #e7f0ff; color: #1c4fd6; }
.laso-k-sh { background: #fff1e0; color: #c2670a; }
.laso-k-ad { background: #eee9fb; color: #6b46c1; }

/* ===== Tareas DLT (tareas internas) ===== */
.dlt-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.dlt-chips { display:flex; gap:4px; flex-wrap:wrap; }
.dlt-chip { font-size:12px; padding:4px 10px; border:1px solid var(--border,#dee2e6); border-radius:14px; background:var(--surface-2,#f1f3f5); color:#374151 !important; cursor:pointer; }
.dlt-chip.active { background:#1c4fd6 !important; color:#fff !important; border-color:#1c4fd6; }
.dlt-card-actions { display:flex; gap:6px; margin-top:8px; justify-content:flex-end; }
.dlt-card-actions button { font-size:12px; padding:3px 9px; }
.dlt-card-actions .dlt-archive-btn { background:transparent; border:1px solid var(--border,#dee2e6); color:#555; border-radius:6px; }
/* Enviada pero SIN acuse = gris (no es un logro); con acuse del conductor = verde. */
.dlt-sent { font-size:12px; color:#6b7280; font-weight:600; align-self:center; }
.dlt-sent.is-ack { color:#2f9e44; }

/* ── Tareas DLT como UNA LÍNEA en Tráfico diario ───────────────────────────────────────────────
   Fila a lo ancho (no reparte por columnas) para que quepa toda la información de un vistazo. Sigue
   el patron de la fila de Verallia: tamaños FIJOS para que el zoom de filas no la descuadre. */
#servicesList .service-table tbody tr.dlt-task-row { height: auto; cursor: pointer; }
#servicesList .service-table tr.dlt-task-row td {
  padding: 4px 12px; font-size: 12px; line-height: 1.35;
  background: #eef4ff; border-bottom: 1px solid #d7e3fb; border-left: 3px solid #4c7fe0;
  white-space: nowrap;
}
/* GOTCHA: el flex NO puede ir en el <td> — al dejar de ser `display:table-cell` se ignora el colspan y
   la fila se colapsa a un pellizco (visto en pantalla). Va en un envoltorio DENTRO de la celda. */
#servicesList .service-table tr.dlt-task-row .dlt-tr-line { display: flex; align-items: center; }
/* SIMETRIA: el bloque de datos ocupa un ancho FIJO, asi el estado y el acuse caen siempre en la misma
   vertical fila tras fila (antes bailaban segun lo larga que fuera la descripcion). Lo que no cabe se
   recorta con puntos suspensivos; el texto entero esta en el title y en la ficha. */
.dlt-tr-info { flex: 0 0 780px; max-width: 780px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* La fila de tarea OBEDECE al zoom de filas, como cualquier otra fila de la parrilla (la de Verallia es
   un resumen y por eso va fija; esta es una fila de trabajo mas). Se escalan padding, texto, iconos y
   tambien el ancho del bloque de datos, para que los rotulos sigan alineados a cualquier zoom. */
#servicesList.row-zoom-active .service-table tr.dlt-task-row td {
  padding: calc(4px * var(--traffic-row-zoom, 1)) calc(12px * var(--traffic-row-zoom, 1));
  font-size: clamp(9px, calc(12px * var(--traffic-text-zoom, 1)), 13px);
}
#servicesList.row-zoom-active .dlt-tr-info {
  flex-basis: calc(780px * var(--traffic-text-zoom, 1));
  max-width: calc(780px * var(--traffic-text-zoom, 1));
}
#servicesList.row-zoom-active .dlt-tr-tag,
#servicesList.row-zoom-active .dlt-tr-urgent { font-size: clamp(8px, calc(10px * var(--traffic-text-zoom, 1)), 11px); }
#servicesList.row-zoom-active .dlt-tr-bit svg,
#servicesList.row-zoom-active .dlt-tr-ok svg { width: calc(12px * var(--traffic-text-zoom, 1)); height: calc(12px * var(--traffic-text-zoom, 1)); }
/* OJO especificidad: la regla base lleva `.service-table tr` (2 elementos), asi que urgente/hecha
   tienen que repetir ese mismo camino o no ganan (verificado: salia azul siendo urgente). */
#servicesList .service-table tr.dlt-task-row:hover td { background: #e3edff; }
#servicesList .service-table tr.dlt-task-row.is-urgent td { background: #fdeeee; border-left-color: #d64545; }
#servicesList .service-table tr.dlt-task-row.is-urgent:hover td { background: #fbe3e3; }
#servicesList .service-table tr.dlt-task-row.is-done td { background: #eef7f0; border-left-color: #2f9e44; }
.dlt-tr-tag { display:inline-block; background:#4c7fe0; color:#fff; font-size:10px; font-weight:800;
  letter-spacing:.05em; border-radius:3px; padding:1px 5px; margin-right:8px; vertical-align:1px; }
.dlt-task-row.is-urgent .dlt-tr-tag { background:#d64545; }
.dlt-task-row.is-done .dlt-tr-tag { background:#2f9e44; }
.dlt-tr-type { font-weight:800; color:#1f3d63; margin-right:8px; }
.dlt-tr-urgent { color:#d64545; font-weight:800; font-size:10.5px; letter-spacing:.04em; margin-right:8px; }
.dlt-tr-desc { color:#33415c; margin-right:10px; }
.dlt-tr-bit { color:#5b6b85; margin-right:10px; white-space:nowrap; }
.dlt-tr-bit svg { width:12px; height:12px; vertical-align:-2px; opacity:.75; }
/* El estado y el acuse van PEGADOS al resto de la línea, no flotados al borde: la tabla es muy ancha
   (1500px+) y con float:right quedaban a tomar viento, con un vacío enorme en medio. */
.dlt-tr-right { display:inline-flex; align-items:center; gap:8px; margin-left:6px; }
.dlt-tr-ok { color:#2f9e44; font-weight:700; }
.dlt-tr-ok svg { width:12px; height:12px; vertical-align:-2px; }
.dlt-tr-sent { color:#8a5a00; font-weight:600; }
.dlt-tr-warn { color:#d64545; font-weight:700; }
.dlt-tr-muted { color:#8a94a6; }
/* En vista compacta la fila usa las mismas reglas: la tabla es distinta pero la clase es la misma. */
#servicesList .compact-service-table tr.dlt-task-row td { font-size: 11px; padding: 3px 10px; }
.dlt-list { display:flex; flex-direction:column; gap:8px; }
.dlt-card { border:1px solid var(--border,#dee2e6); border-left:4px solid #adb5bd; border-radius:8px; padding:10px 12px; background:var(--surface,#fff); cursor:pointer; }
.dlt-card:hover { box-shadow:0 1px 6px rgba(0,0,0,.08); }
.dlt-card.is-urgent { border-left-color:#e03131; }
.dlt-card-top { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.dlt-card-desc { font-weight:600; margin:2px 0; }
.dlt-card-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted,#868e96); }
.dlt-card-meta .dlt-age { margin-left:auto; }
.dlt-type { display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; border:1px solid var(--border,#dee2e6); background:#eef; }
.dlt-urgent { font-size:10px; font-weight:800; color:#e03131; letter-spacing:.04em; }
.dlt-deadline { font-size:12px; color:#c2670a; }
.dlt-pill { font-size:11px; font-weight:700; padding:2px 9px; border-radius:10px; color:#fff !important; }
.dlt-st-pending { background:#f59f00; }
.dlt-st-planned { background:#4263eb; }
.dlt-st-done { background:#2f9e44; }
.dlt-st-closed { background:#868e96; }
.dlt-st-cancelled { background:#e03131; text-decoration:line-through; }
.dlt-cat-list { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.dlt-cat-row { display:flex; align-items:center; gap:6px; }
.dlt-cat-row .dlt-cat-val { flex:1; min-width:0; }
.dlt-cat-row .dlt-cat-color { width:34px; flex:none; padding:0; }
.dlt-cat-row button { flex:none; padding:4px 8px; font-size:12px; }
.dlt-cat-add { display:flex; gap:6px; align-items:center; margin-top:8px; }
.dlt-cat-add input:not([type="color"]) { flex:1; }
.dlt-card-modal { max-width:720px; width:94vw; }
.dlt-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 12px; }
.dlt-form-grid label { display:flex; flex-direction:column; font-size:12px; gap:3px; }
.dlt-form-grid label.wide { grid-column:1 / -1; }
.dlt-edit-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--border,#eee); }
.dlt-lifecycle { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; }
.dlt-thread { margin-top:10px; border-top:1px solid var(--border,#eee); padding-top:8px; max-height:34vh; overflow:auto; }
.dlt-thread-title { font-weight:700; font-size:13px; margin-bottom:6px; }
.dlt-comment { border-left:3px solid #dee2e6; padding:3px 8px; margin:4px 0; font-size:13px; }
.dlt-comment.is-milestone { border-left-color:#1c4fd6; background:#f6f8ff; }
.dlt-comment-head { display:flex; gap:8px; font-size:11px; color:var(--muted,#868e96); }
.dlt-comment-head strong { color:inherit; }
.dlt-addcomment { display:flex; gap:6px; margin-top:8px; }
.dlt-addcomment input { flex:1; }
.dlt-type-list { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.dlt-type-row { display:flex; align-items:center; gap:8px; }
.dlt-type-add { display:flex; gap:6px; align-items:center; margin-top:8px; }
.dlt-type-add input[type="text"], .dlt-type-add input:not([type]) { flex:1; }
.dlt-time-row { display:flex; gap:6px; align-items:center; margin:4px 0; }
.nav-dlt-badge { display:inline-block; min-width:16px; padding:0 5px; font-size:11px; font-weight:700; text-align:center; background:#1c7ed6; color:#fff; border-radius:9px; margin-left:4px; }

/* Popup de avisos DLT: separar un poco los botones y desplazarlos a la derecha (solo este popup). */
#dltAlertOverlay .msg-card-foot { display: flex; gap: 12px; padding-left: 10px; }

/* Flota GPS (posición en vivo + recorridos) */
.gps-fleet { display:flex; flex-direction:column; gap:10px; }
.gps-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.gps-toolbar #gpsSearch { flex:0 0 240px; padding:6px 10px; border:1px solid #cfcfcf; border-radius:6px; }
.gps-legend { display:flex; align-items:center; gap:6px; font-size:12px; color:#5f5e5a; margin-left:auto; }
.gps-legend i { width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:8px; }
/* Geovallas de los centros de shunting: círculo hueco a juego con el trazo del mapa (azul discontinuo). */
.gps-legend i.gps-legend-fence { background:rgba(43,108,176,.10); border:1.5px dashed #2b6cb0; }
.gps-fences-btn.is-on { border-color:#b9cdea; background:#eef4fc; color:#1f5fb0; }
/* Etiqueta con el código del centro (MAD4, BCN1…) junto al punto: discreta, para no tapar el mapa. */
.leaflet-tooltip.gps-fence-label { background:rgba(255,255,255,.88); border:1px solid #cddcf0; color:#1f5fb0;
  font-weight:700; font-size:11px; padding:1px 5px; box-shadow:none; }
.leaflet-tooltip.gps-fence-label:before { display:none; }
.gps-body { display:flex; gap:12px; align-items:stretch; }
.gps-list { flex:0 0 320px; max-height:72vh; overflow:auto; border:1px solid #e6e6e6; border-radius:8px; background:#fff; }
/* isolation:isolate confina los z-index internos de Leaflet (paneles 400 / controles 1000) para que
   el mapa NO se superponga sobre el submenú de navegación (z=40) ni otros overlays de la barra. */
.gps-map { flex:1; min-height:72vh; border-radius:8px; overflow:hidden; border:1px solid #e6e6e6; isolation:isolate; }
.gps-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #f0f0ee; cursor:pointer; }
.gps-row:hover { background:#f6f8fb; }
.gps-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.gps-row-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.gps-row-sub { font-size:12px; color:#5f5e5a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gps-row-meta { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; white-space:nowrap; }
.gps-row .link-btn { background:none; border:none; color:#185fa5; cursor:pointer; padding:0; font-size:12px; }
@media (max-width:768px){ .gps-body{ flex-direction:column; } .gps-list{ flex:none; max-height:38vh; } .gps-map{ min-height:46vh; } .gps-legend{ margin-left:0; } }
.gps-veh-box { padding:6px 0; font-size:13px; }
.gps-veh-line { display:flex; align-items:center; gap:8px; }
/* Acciones GPS en la cabecera de la sección (ocupan el hueco central del título). */
.vehicle-doc-title .gps-veh-actions { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
.vehicle-doc-title .gps-veh-actions button { padding:4px 9px; font-size:12px; line-height:1.3; }
.vehicle-doc-title .gps-doc-sub { font-size:12px; color:#6b7280; font-weight:400; white-space:nowrap; }

.gps-dt-list { max-height:60vh; overflow:auto; padding:8px 12px 12px; }
.gps-dt-table { width:100%; border-collapse:collapse; font-size:13px; }
.gps-dt-table th, .gps-dt-table td { text-align:left; padding:6px 8px; border-bottom:1px solid #f0f0ee; white-space:nowrap; }
.gps-dt-table td:first-child, .gps-dt-table th:first-child { white-space:normal; }
.vehicle-fault-history-box > summary { cursor:pointer; font-weight:500; color:var(--ink); padding:6px 0; }
.vehicle-fault-history-box[open] > summary { margin-bottom:6px; }
.gps-dt-table th { color:#5f5e5a; font-weight:500; position:sticky; top:0; background:#fff; }
.gps-dt-table td:nth-child(n+3), .gps-dt-table th:nth-child(n+3) { text-align:right; }
.gps-dt-table tbody tr.gps-dt-row { cursor:pointer; }
.gps-dt-table tbody tr.gps-dt-row:hover td { background:#f6f8fb; }

/* Averías (KPIs) */
/* Filas de documento en la ficha del camion (ITV, tacografo, seguros, doc. tecnica): el nombre del
   fichero ya lleva la matricula y la caducidad, asi que no necesita cuerpo de titular. NORMA DEL JEFE:
   los textos, siempre un escalon por debajo de lo "comodo" — la densidad es la usabilidad. */
.vehicle-doc-lane .attachment-list article strong,
.vehicle-doc-lane .attachment-list article > div > strong { font-size: 11.5px; line-height: 1.25; }
.vehicle-doc-lane .attachment-list article span { font-size: 10.5px; }
.vehicle-doc-lane .attachment-list article button { font-size: 11px; padding: 3px 9px; }

/* ===== GESTOR DE FLOTA (Camiones > Gestor de flota) ============================================== */
/* El maestro: una fila por unidad y los cuatro campos que la colocan (operativa, centro, conductor y
   conjunto) editables en linea. La ultima columna dice lo que NO cuadra. */
.fm-bar { align-items: center; display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; }
.fm-bar input, .fm-bar select, .fm-bar button { font-size: 11.5px; min-height: 30px; }
.fm-bar > * { flex: 0 1 auto; min-width: 0; }
.fm-bar select { flex: 0 1 148px; padding-left: 7px; width: auto; }
.fm-bar input[type="search"] { flex: 0 1 250px; min-width: 150px; width: auto; }
.fm-bar button { flex: 0 0 auto; white-space: nowrap; }
.fm-sp { flex: 1 1 auto; }
@media (max-width: 1200px) { .fm-bar { flex-wrap: wrap; } }
.fm-count { color: #8a97a8; font-size: 11.5px; margin-bottom: 8px; }
.fm-link { background: none; border: none; color: #b23b31; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.fm-link:hover { text-decoration: underline; }
.fm-tablewrap { border: 1px solid #e6ebf2; border-radius: 10px; overflow: auto; }
.fm-table { border-collapse: collapse; width: 100%; }
.fm-table th {
  background: #f8fafc; border-bottom: 1px solid #e6ebf2; color: #56657a; font-size: 9.5px;
  font-weight: 800; letter-spacing: .04em; padding: 5px 6px; position: sticky; text-align: left;
  text-transform: uppercase; top: 0; white-space: nowrap; z-index: 1;
}
.fm-table td { border-bottom: 1px solid #f1f4f8; padding: 3px 6px; vertical-align: middle; }
.fm-table tbody tr:hover { background: #fbfcfe; }
.fm-table tr.has-warn { background: #fffdf7; }
/* Celdas COMPACTAS: van a entrar mas columnas, asi que la fila tiene que caber sin pedir sitio. */
.fm-table select, .fm-table input.fm-cell {
  font-size: 11px; min-height: 24px; padding: 1px 5px; width: 100%;
}
.fm-table .fcombo-wrap, .fm-table .formatted-combo { width: 100%; }
.fm-plate button { background: none; border: none; color: #3660a8; cursor: pointer; font-size: 12px; font-weight: 800; padding: 0; }
.fm-plate button:hover { color: #b23b31; text-decoration: underline; }
.fm-lock { background: #eef2f7; border-radius: 999px; color: #56657a; font-size: 9.5px; font-style: normal; font-weight: 700; margin-left: 6px; padding: 1px 7px; }
.fm-tipo { color: #8a97a8; font-size: 10px; white-space: nowrap; }
.fm-na { color: #c3ccd8; }
.fm-warn { max-width: 320px; }
.fm-chip { border-radius: 7px; display: block; font-size: 10.5px; font-weight: 600; margin: 1px 0; overflow: hidden; padding: 2px 7px; text-overflow: ellipsis; white-space: nowrap; }
.fm-chip.is-warn { background: #fdf2dc; color: #9a6a12; }
.fm-chip.is-grave { background: #fbe7e5; color: #b23b31; }
.fm-ok { color: #1f7a4d; font-weight: 800; }
/* El rotulo de estado, en su sitio: la fila la manda la MATRICULA, no un cartel verde gritando
   "Operativa" en las 98 filas. Letra pequena y color sereno; lo que tiene que saltar es lo que falla. */
.fm-op .fm-ok { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; opacity: .85; }
.fm-op .fm-chip { font-size: 10px; }
.fm-empty { color: #8a97a8; padding: 22px; text-align: center; }
/* Volver al Gestor por donde ibas: el boton solo existe si vienes de alli, y la fila se senala al llegar. */
.fm-volver {
  background: #eef4ff; border-color: #bcd0f0; color: #2f5fa8; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.fm-volver:hover { background: #dfe9fb; border-color: #9dbaea; }
.fm-vuelta { animation: fmVuelta 2.4s ease-out; }
@keyframes fmVuelta {
  0%, 30% { background: #fff3d6; box-shadow: inset 3px 0 0 #c2703d; }
  100% { background: transparent; box-shadow: none; }
}

/* ===== Averias · seccion de TALLER (Camiones > Averias) ========================================== */
/* Cuatro pestanas: Activas (la bandeja) · Historico · Por camion · KPIs. La fila de la averia se lee
   sin abrir nada: estado, folio, matricula, sintoma y desde cuando esta abierta. */
.ftw-tabs { align-items: center; border-bottom: 1px solid #e6ebf2; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding-bottom: 8px; }
.ftw-tab {
  background: #fff; border: 1px solid #d7dee7; border-radius: 999px; color: #50627a; cursor: pointer;
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; transition: all .12s ease;
}
.ftw-tab:hover { border-color: #c2703d; color: #c2703d; }
.ftw-tab.is-active { background: #c2703d; border-color: #c2703d; color: #fff; }
.ftw-tab-n { background: rgba(255,255,255,.28); border-radius: 999px; font-size: 10.5px; font-style: normal; margin-left: 4px; padding: 1px 6px; }
.ftw-tab:not(.is-active) .ftw-tab-n { background: #eef2f7; color: #56657a; }
.ftw-tabs-sp { flex: 1; }
.ftw-alert { background: #fdf2dc; border-radius: 999px; color: #9a6a12; font-size: 11px; font-weight: 700; padding: 3px 10px; }
.ftw-draft { background: #eef2f7; border-radius: 999px; color: #56657a; font-size: 11px; font-weight: 600; padding: 3px 10px; }
.ftw-body { display: flex; flex-direction: column; gap: 8px; }
.ftw-block > h3 { align-items: center; color: #56657a; display: flex; font-size: 11.5px; font-weight: 800; gap: 7px;
  letter-spacing: .04em; margin: 10px 0 6px; text-transform: uppercase; }
.ftw-block > h3 i { background: #eef2f7; border-radius: 999px; color: #56657a; font-size: 11px; font-style: normal; padding: 1px 8px; }
.ftw-block.is-urgent > h3 { color: #b23b31; } .ftw-block.is-urgent > h3 i { background: #fbe7e5; color: #b23b31; }
.ftw-row {
  align-items: center; background: #fff; border: 1px solid #e6ebf2; border-radius: 10px; display: flex;
  gap: 10px; margin-bottom: 6px; padding: 9px 11px;
}
.ftw-row.is-noop { border-color: #f0c4be; box-shadow: inset 3px 0 0 #b23b31; }
.ftw-row.is-new { background: #fffdf7; }
.ftw-main { flex: 1; min-width: 0; }
.ftw-l1 { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.ftw-folio { color: #8a97a8; font-size: 11px; font-weight: 700; }
.ftw-plate { background: none; border: none; color: #3660a8; cursor: pointer; font-size: 13.5px; font-weight: 800; padding: 0; }
.ftw-plate:hover { color: #b23b31; text-decoration: underline; }
.ftw-title { color: #1f2c3a; font-size: 12.5px; font-weight: 600; }
.ftw-mob { background: #eef2f7; border-radius: 999px; color: #56657a; font-size: 10px; font-weight: 700; padding: 2px 8px; }
.ftw-mob.is-noop { background: #b23b31; color: #fff; }
.ftw-l2 { color: #8a97a8; display: flex; flex-wrap: wrap; font-size: 11px; gap: 10px; margin-top: 3px; }
.ftw-cost { color: #1f7a4d; font-weight: 700; }
.ftw-desc { color: #56657a; font-size: 11.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftw-act { display: flex; flex: 0 0 auto; gap: 6px; }
.ftw-act button { font-size: 11.5px; padding: 5px 11px; }
.ftw-empty { align-items: center; color: #8a97a8; display: flex; flex-direction: column; gap: 4px; padding: 26px 10px; text-align: center; }
.ftw-empty b { color: #1f2c3a; font-size: 13.5px; }
.ftw-empty span { font-size: 12px; max-width: 46ch; }
/* TODOS en UNA fila (peticion del jefe): sin base explicita, la regla global `select{width:100%}` los
   ponia a ancho completo y cada uno se iba a su renglon. */
.ftw-filters { align-items: center; display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 4px; }
.ftw-filters input, .ftw-filters select, .ftw-filters button { font-size: 11.5px; min-height: 30px; }
.ftw-filters > * { flex: 0 1 auto; min-width: 0; }
.ftw-filters select { flex: 0 1 138px; padding-left: 7px; width: auto; }
/* El buscador NO crece: si estira, empuja los desplegables al otro extremo de la pantalla. */
.ftw-filters input[type="search"] { flex: 0 1 240px; min-width: 140px; width: auto; }
.ftw-filters::after { content: ""; flex: 1 1 auto; }   /* el hueco sobrante, al final */
.ftw-filters input[type="date"] { flex: 0 0 auto; width: auto; }
.ftw-filters button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1200px) { .ftw-filters { flex-wrap: wrap; } }
.ftw-filters label { align-items: center; color: #56657a; display: flex; font-size: 11.5px; gap: 4px; }
.ftw-count { color: #8a97a8; font-size: 11.5px; margin: 2px 0 4px; }
.ftw-veh { border: 1px solid #e6ebf2; border-radius: 10px; margin-bottom: 6px; overflow: hidden; }
.ftw-veh.is-open { border-color: #c2703d; }
.ftw-veh-head { align-items: center; background: #fbfcfe; border: none; cursor: pointer; display: flex; flex-wrap: wrap;
  gap: 12px; padding: 9px 12px; text-align: left; width: 100%; }
.ftw-veh-head:hover { background: #f4f7fb; }
.ftw-veh-head b { color: #1f2c3a; font-size: 13.5px; min-width: 88px; }
.ftw-veh-live { background: #fbe7e5; border-radius: 999px; color: #b23b31; font-size: 10.5px; font-weight: 700; padding: 2px 9px; }
.ftw-veh-ok { background: #e5f4ec; border-radius: 999px; color: #1f7a4d; font-size: 10.5px; font-weight: 700; padding: 2px 9px; }
.ftw-veh-n, .ftw-veh-last { color: #8a97a8; font-size: 11px; }
.ftw-veh-cost { color: #1f7a4d; font-size: 11px; font-weight: 700; }
.ftw-veh-body { background: #fff; padding: 8px 10px 4px; }
@media (max-width: 760px) {
  .ftw-row { align-items: stretch; flex-direction: column; }
  .ftw-act { justify-content: flex-end; }
}

.fk-wrap { display:flex; flex-direction:column; gap:14px; }
.fk-filters { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.fk-filters > label { display:flex; flex-direction:column; font-size:12px; color:#5f5e5a; gap:3px; }
.fk-filters input, .fk-filters select { padding:5px 8px; border:1px solid #cfcfcf; border-radius:6px; font-size:13px; }
.fk-filters #fkExport { margin-left:auto; }
.fk-cards { display:flex; flex-wrap:wrap; gap:10px; }
.fk-card { flex:1 1 120px; background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.fk-card-val { font-size:18px; font-weight:500; color:var(--ink); }
.fk-card-lbl { font-size:12px; color:#6b7280; }
.fk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(440px,1fr)); gap:14px; }
.fk-table-box { background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:10px 12px; }
.fk-table-box h3 { margin:0 0 8px; font-size:14px; font-weight:500; color:var(--ink); }
.fk-table { width:100%; border-collapse:collapse; font-size:13px; }
.fk-table th, .fk-table td { padding:5px 8px; border-bottom:1px solid #f0f0ee; text-align:left; }
.fk-table th.fk-num, .fk-table td.fk-num { text-align:right; white-space:nowrap; }
.fk-table th { color:#5f5e5a; font-weight:500; }
.fk-table td.fk-strong { font-weight:500; }
.fault-cost-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:6px 0; }
.fault-cost-row > label { display:flex; flex-direction:column; font-size:12px; color:#5f5e5a; gap:3px; }
.fault-cost-row input { width:110px; padding:5px 8px; border:1px solid #cfcfcf; border-radius:6px; }
.fault-cost-total { margin-left:auto; align-self:center; font-size:13px; }

/* Averías — gráficas SVG */
.fc-block { display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.fc-block-head { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:14px; font-weight:600; }
.fc-block-head .ic { color:var(--muted); }
.fc-row2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:14px; }
.fc-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px 12px; min-width:0; }
.fc-card .fc-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.fc-card .fc-head h3 { margin:0; font-size:13px; font-weight:500; color:var(--ink); }
.fc-toggle { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:1px solid var(--line); border-radius:5px; background:var(--surface-soft); color:var(--muted); cursor:pointer; flex:0 0 auto; }
.fc-toggle:hover { color:var(--ink); border-color:var(--line-strong); }
.fc-toggle .ic { transition:transform .15s ease; }
.fc-card.fc-collapsed .fc-toggle .ic { transform:rotate(-90deg); }
.fc-card.fc-collapsed .fc-body, .fc-card.fc-collapsed .fc-legend { display:none; }
.fc-card.fc-collapsed { padding-bottom:8px; }
.fc-legend { display:flex; flex-wrap:wrap; gap:4px 10px; margin-left:auto; }
.fc-leg-item { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.fc-leg-item i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.fc-svg { width:100%; height:auto; display:block; }
.fc-svg text { font-family:inherit; }
.fc-tx { fill:var(--muted); font-size:10.5px; }
.fc-lbl { fill:var(--ink); font-size:11.5px; }
.fc-val { fill:var(--ink); font-size:11px; font-weight:500; }
.fc-sub { fill:var(--muted); font-size:10px; }
.fc-quad { fill:var(--muted); font-size:10px; font-style:italic; }
.fc-grid { stroke:var(--line); stroke-width:1; }
.fc-grid-mark { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.fc-pareto { fill:none; stroke:var(--nav); stroke-width:1.5; }
.fc-pareto-dot { fill:var(--nav); }
.fc-costline { fill:none; stroke:var(--primary-strong); stroke-width:1.8; }
.fc-costdot { fill:var(--primary-strong); }
.fc-empty { padding:22px 14px; text-align:center; color:var(--muted); font-size:13px; }
.fc-cap { margin-top:4px; text-align:center; color:var(--muted); font-size:11px; }
.fk-charts-toggle { display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; }
.fk-charts-toggle:hover { background:var(--surface-soft); }
.fk-charts-toggle .ic:first-child { color:var(--muted); }
.fk-charts-toggle .ic.fk-ct-open { transform:rotate(180deg); }
.fk-charts-toggle .ic { transition:transform .15s ease; }

/* ── Constructor de KPIs (27-kpi.js): chips de métricas + vistas guardadas ──────────────
   Clases propias .kpi-* para no tocar las .fk-* (compartidas con los KPIs de averías). */
.kpi-chip-groups { display:flex; flex-direction:column; gap:8px; background:var(--surface); border:1px solid #e6e6e6; border-radius:8px; padding:10px 12px; }
.kpi-chip-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kpi-chip-cat { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; min-width:168px; display:inline-flex; align-items:center; gap:5px; }
.kpi-chip { font-size:12px; padding:4px 10px; min-height:26px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); color:#374151; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.kpi-chip:hover { border-color:var(--line-strong); background:#eef2f6; }
.kpi-chip.active { background:var(--nav); color:#fff; border-color:var(--nav); }
.kpi-chip.active:hover { background:#24436b; }
.kpi-chip.disabled { opacity:.45; cursor:not-allowed; }
.kpi-chip.disabled:hover { border-color:var(--line); background:var(--surface-soft); }
/* Selects acotados (criterio de toolbars: que no bailen) y acciones a la derecha. */
#kpiDim { min-width:180px; max-width:230px; }
#kpiPreset { min-width:190px; max-width:250px; }
.fk-filters .kpi-actions { margin-left:auto; display:inline-flex; align-items:flex-end; gap:8px; }
.kpi-save-form { display:inline-flex; align-items:center; gap:4px; }
.kpi-save-form input { padding:5px 8px; border:1px solid #cfcfcf; border-radius:6px; font-size:13px; width:180px; }
.fk-table th.kpi-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.fk-table th.kpi-sortable:hover { color:var(--ink); }
/* Incidencias de entrada del shunter (el POR QUÉ bajo el QUÉ). Jerarquía por COLOR: rojo = turno
   sin cubrir, ámbar = retraso, y "Sin explicar" en rojo apagado porque es una tarea, no un fallo. */
.fk-table-box h3 .kpi-inc-pend { margin-left:8px; font-size:11px; font-weight:600; color:#a1341f; background:#fdeceb;
  border:1px solid #f4cdc7; border-radius:10px; padding:1px 8px; vertical-align:1px; }
.fk-table-box h3 .kpi-inc-csv { margin-left:auto; }
.fk-table-box h3 { display:flex; align-items:center; gap:0; }
.kpi-inc-table td { vertical-align:middle; }
.kpi-inc-when { white-space:nowrap; font-variant-numeric:tabular-nums; }
.kpi-inc-tag { display:inline-block; font-size:11px; font-weight:600; border-radius:10px; padding:1px 8px; white-space:nowrap; }
.kpi-inc-late { color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4; }
.kpi-inc-no { color:#a1341f; background:#fdeceb; border:1px solid #f4cdc7; }
.kpi-inc-why { font-size:12px; }
.kpi-inc-todo { color:#b06055; font-style:italic; }
.kpi-explain-modal .kpi-explain-body { display:flex; flex-direction:column; gap:10px; margin:12px 0 4px; }
.kpi-explain-modal .kpi-explain-body label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.kpi-explain-modal select, .kpi-explain-modal textarea { font-size:13px; padding:6px 8px; border:1px solid #cfcfcf;
  border-radius:6px; background:var(--surface); color:var(--ink); font-family:inherit; width:100%; }
.kpi-explain-modal textarea { resize:vertical; min-height:60px; }
.kpi-explain-modal .sh-modal-foot { gap:8px; }
/* Rescate del turno: bloque aparte del motivo porque responde a otra pregunta — no "por qué falló"
   sino "cuánto tiempo estuvo el puesto vacío", que es lo que le duele al cliente. */
.kpi-explain-modal .sh-cover-box { border:1px solid var(--line,#e2e6ec); border-radius:8px; padding:10px 12px;
  background:var(--surface-soft,#f7f9fb); display:flex; flex-direction:column; gap:8px; }
.kpi-explain-modal .sh-cover-chk { flex-direction:row !important; align-items:center; gap:7px; cursor:pointer;
  font-size:13px !important; color:var(--ink) !important; font-weight:600; }
.kpi-explain-modal .sh-cover-chk input { width:auto; flex:0 0 auto; margin:0; }
.kpi-explain-modal .sh-cover-fields { display:flex; gap:10px; }
.kpi-explain-modal .sh-cover-fields > label { flex:1 1 auto; }
.kpi-explain-modal .sh-cover-fields > label:last-of-type { flex:0 0 118px; }
.kpi-explain-modal .sh-cover-fields.is-off { display:none; }
.kpi-explain-modal .sh-cover-fields input { font-size:13px; padding:6px 8px; border:1px solid #cfcfcf;
  border-radius:6px; background:var(--surface); color:var(--ink); width:100%; }
.kpi-explain-modal .sh-cover-min { flex-direction:row !important; align-items:center; justify-content:space-between; gap:10px; }
.kpi-explain-modal .sh-cover-min span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.kpi-explain-modal .sh-cover-min input { width:88px; text-align:right; font-variant-numeric:tabular-nums;
  font-size:13px; padding:6px 8px; border:1px solid #cfcfcf; border-radius:6px; background:var(--surface); color:var(--ink); }
.kpi-explain-modal .sh-cover-hint { margin:0; font-size:11px; line-height:1.4; }
/* Columna "Descubierto" y chip de rescate en el listado de incidencias del KPI. */
.kpi-inc-un { white-space:nowrap; font-variant-numeric:tabular-nums; }
.kpi-inc-cov { color:#1d6b4f; background:#e8f6ef; border:1px solid #bfe3d2; }

/* ── Ficha de proveedor a DOS bloques (Tráfico / Administración), colapsables ──────────────
   Delimitación clara por color: Tráfico con acento --nav (azul marino), Administración con
   --primary (marrón marca). El bloque del departamento del visitante llega arriba y abierto. */
.pvb-section { border:1px solid var(--line); border-radius:8px; margin:0 0 12px; background:var(--surface); overflow:hidden; }
.pvb-section.pvb-traffic { border-left:4px solid var(--nav); }
.pvb-section.pvb-admin { border-left:4px solid var(--primary); }
.pvb-head { display:flex; align-items:center; gap:8px; padding:9px 12px; cursor:pointer; user-select:none;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); background:var(--surface-soft); }
.pvb-traffic > .pvb-head { color:var(--nav); }
.pvb-admin > .pvb-head { color:var(--primary-strong); }
.pvb-head:hover { background:#eef2f6; }
.pvb-head .ddoc-chevron { margin-left:auto; display:inline-flex; transition:transform .15s ease; }
.pvb-section:not(.collapsed) > .pvb-head .ddoc-chevron { transform:rotate(180deg); }
.pvb-section.collapsed > .pvb-body { display:none; }
.pvb-body { padding:12px; }
/* Rejilla de 3 columnas del modal de edición: por CLASE, nunca inline (un display inline
   pisaría el display:none del colapso — gotcha CSS documentado). */
.pvb-body.pvb-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px 20px; }
.pvb-lock { font-size:10px; font-weight:600; letter-spacing:.03em; padding:2px 8px; border-radius:10px;
  background:#eceff3; color:var(--muted); border:1px solid var(--line); text-transform:none; }
.pvb-memory-hint { border-top:1px dashed var(--line); padding-top:8px; }
/* Nota de memoria en el popup Datos del transporte */
.ext-data-note { grid-column:1/-1; margin:0 0 4px; font-size:12px; }

.gps-cell-btn { background:none; border:none; cursor:pointer; padding:0 2px; line-height:1; vertical-align:middle; color:#185fa5; }
.gps-cell-btn:hover { transform:scale(1.15); }

/* Iconos SVG del set propio (00-icons.js) — heredan el color del texto y se alinean a la línea. */
.ic { display:inline-block; vertical-align:-0.15em; flex:none; }
button .ic, .link-btn .ic, .secondary .ic { vertical-align:-0.18em; }
.hmb-icon .ic { width:22px; height:22px; vertical-align:middle; }
.gps-cell-btn .ic { vertical-align:middle; }

/* Filas de horario de aviso: el input no debe comerse el botón "Quitar". */
.dlt-time-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.dlt-time-row input[type="time"] { flex: 1; min-width: 0; }
.dlt-time-row button { flex: none; }

/* Fila "añadir tipo/centro": el selector de color no debe ocupar todo el ancho. */
.dlt-cat-add input[type="color"] { width: 36px; flex: none; padding: 0; }
/* Avisos por tarea (dentro de la ficha) */
.dlt-alerts-block { margin-top: 10px; border-top: 1px solid var(--border,#eee); padding-top: 8px; }
.dlt-alerts-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.dlt-alert-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.dlt-alert-toggle input[type="checkbox"] { width: auto; flex: none; }
.dlt-alert-times { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.dlt-alert-times input[type="time"] { flex: 1; min-width: 0; }

/* ===== Ficha de tarea DLT: más compacta y elegante (acotado al modal) ===== */
.dlt-card-modal input, .dlt-card-modal select, .dlt-card-modal textarea { font-size: 13px; padding: 5px 8px; }
.dlt-card-modal .dlt-form-grid { gap: 8px; }
.dlt-card-modal .dlt-edit-actions { gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px 0; }
.dlt-card-modal .dlt-lifecycle { gap: 6px; flex-wrap: wrap; margin-left: auto; }
.dlt-card-modal .dlt-edit-actions button,
.dlt-card-modal .dlt-lifecycle button,
.dlt-card-modal .dlt-alerts-block button,
.dlt-card-modal .dlt-addcomment button { font-size: 12px; padding: 5px 11px; min-height: 0; line-height: 1.2; border-radius: 7px; }
.dlt-card-modal .dlt-lifecycle input[type="date"] { max-width: 150px; padding: 4px 8px; }
.dlt-alerts-block { margin-top: 8px; padding-top: 7px; }
.dlt-alerts-title { font-size: 12px; }
.dlt-alert-toggle { font-size: 12.5px; margin-bottom: 5px; }
/* Horas de aviso EN FILA (envuelven): 4 horas ocupaban 4 renglones y estiraban la ficha; en horizontal
   caben de un vistazo. Cada hora es una pastillita compacta con su "Quitar" al lado. */
.dlt-card-modal .dlt-alert-times { flex-direction: row; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.dlt-card-modal .dlt-time-row { gap: 4px; margin: 0; flex: none; }
.dlt-card-modal .dlt-time-row input[type="time"] { width: 92px; max-width: 92px; padding: 4px 6px; flex: none; }
.dlt-card-modal .dlt-time-row button { padding: 3px 8px; font-size: 11px; }
.dlt-sent { font-size: 12px; }

/* Turnos: conductores DE BAJA en rojo suave (editables, pero no utilizables en el resto del TMS). */
.driver-shift-grid tr.shift-row-baja > th { background: #fdecec; color: #c92a2a; }
.driver-shift-grid tr.shift-row-baja > td { background: #fdecec; }
.driver-shift-grid tr.shift-row-baja .shift-cell.shift-empty { background: #fdecec; border-color: #f1c0c0; }
.shift-baja-tag { display: inline-block; font-size: 10px; font-weight: 700; background: #e03131; color: #fff; border-radius: 6px; padding: 0 6px; margin-left: 6px; vertical-align: middle; }

/* ── Sincronizar desde Excel (Laso): panel de importación + vista previa de reconciliación ──────
   Jerarquía por COLOR (criterio del jefe): verde=alta, ámbar=cambio real, azul=ruido de teléfono,
   gris=informativo (huérfanos que no se tocan). */
.admin-import-modal .service-edit-body { padding: 4px 2px 2px; }
.admin-import-dropzone {
  border: 1.5px dashed var(--line, #c9d3df); border-radius: 12px; padding: 26px 18px;
  text-align: center; color: var(--muted, #64748b); background: var(--surface-soft, #f7f9fb);
  transition: border-color .12s, background .12s;
}
.admin-import-dropzone.drag-over { border-color: var(--nav, #2f6b8f); background: #eef4fa; }
.admin-import-dropzone svg { color: var(--nav, #2f6b8f); opacity: .8; }
.admin-import-filebtn {
  display: inline-block; margin-top: 6px; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  background: var(--nav, #2f6b8f); color: #fff; font-weight: 600; font-size: 13px;
}
.admin-import-filebtn:hover { filter: brightness(1.06); }
.admin-import-hints { margin-top: 14px; font-size: 12px; color: var(--muted, #64748b); line-height: 1.5; }
.admin-import-hints p { margin: 4px 0; }

.rc-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.rc-stat {
  flex: 1 1 92px; min-width: 92px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
  padding: 8px 10px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 1px;
  border-left-width: 4px; border-left-color: var(--line, #cbd5e1);
}
.rc-stat strong { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-stat span { font-size: 11px; color: var(--muted, #64748b); }
.rc-stat.rc-new { border-left-color: #2f9e44; } .rc-stat.rc-new strong { color: #2f9e44; }
.rc-stat.rc-upd { border-left-color: #e8952b; } .rc-stat.rc-upd strong { color: #c9770f; }
.rc-stat.rc-noise { border-left-color: #4a86c6; } .rc-stat.rc-noise strong { color: #3a6ea5; }
.rc-stat.rc-orphan { border-left-color: #94a3b8; } .rc-stat.rc-orphan strong { color: #64748b; }

.rc-note { font-size: 12px; color: var(--ink, #334155); line-height: 1.55; margin: 0 0 12px;
  background: var(--surface-soft, #f7f9fb); border-radius: 8px; padding: 8px 11px; }
.rc-optin { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 11px;
  font-size: 12.5px; color: var(--ink, #334155); border: 1px dashed var(--line, #d9e0e8);
  border-radius: 8px; background: #fff; cursor: pointer; }
.rc-optin input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--nav, #2f6b8f); cursor: pointer; }
.rc-block { margin: 8px 0; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; overflow: hidden; }
.rc-block > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13px;
  background: var(--surface-soft, #f7f9fb); color: var(--ink, #334155); user-select: none; }
.rc-block > summary:hover { background: #eef2f6; }
.rc-block[open] > summary { border-bottom: 1px solid var(--line, #e2e8f0); }

.rc-upd-list { max-height: 46vh; overflow: auto; padding: 4px; }
.rc-upd-item { padding: 7px 9px; border-bottom: 1px solid var(--line, #eef2f6); font-size: 13px; }
.rc-upd-item:last-child { border-bottom: none; }
.rc-diff { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; flex-wrap: wrap; }
.rc-diff-f { font-weight: 600; color: var(--muted, #64748b); min-width: 96px; }
.rc-diff-old { color: #b3261e; text-decoration: line-through; opacity: .8; }
.rc-diff-arw { color: var(--muted, #94a3b8); }
.rc-diff-new { color: #2f9e44; font-weight: 600; }

.rc-orphan-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px; max-height: 34vh; overflow: auto; }
.rc-chip { font-size: 11px; background: #f1f5f9; border: 1px solid var(--line, #e2e8f0); border-radius: 999px;
  padding: 2px 9px; color: var(--ink, #475569); }
.rc-chip i { color: var(--muted, #94a3b8); font-style: normal; }

.admin-preview-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; }
.admin-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-preview-table th { position: sticky; top: 0; background: var(--surface-soft, #f5f7fa); text-align: left;
  padding: 6px 9px; font-weight: 600; color: var(--muted, #64748b); border-bottom: 1px solid var(--line, #e2e8f0); }
.admin-preview-table td { padding: 5px 9px; border-bottom: 1px solid var(--line, #eef2f6); }

/* ── Aviso de versión nueva (auto-actualización) ───────────────────────────
   Barra flotante abajo a la derecha: "Hay una versión nueva" + Actualizar.
   Recuerda: recarga normal (conserva ajustes); nunca hace falta limpiar caché. */
.tms-update-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 36px);
  padding: 10px 12px 10px 14px;
  background: var(--nav, #1f2937);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
  font-size: 13.5px;
  animation: tubIn 0.22s ease-out;
}
@keyframes tubIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tms-update-banner .tub-ico { display: inline-flex; opacity: 0.9; }
.tms-update-banner .tub-ico .ic { animation: tubSpin 4s linear infinite; }
@keyframes tubSpin { to { transform: rotate(360deg); } }
.tms-update-banner .tub-txt { font-weight: 600; }
.tms-update-banner .tub-btn {
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  color: var(--nav, #1f2937);
}
.tms-update-banner .tub-btn:hover { background: #eef2ff; }
.tms-update-banner .tub-x {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  display: inline-flex;
  padding: 4px;
  border-radius: 6px;
}
.tms-update-banner .tub-x:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
@media (prefers-reduced-motion: reduce) {
  .tms-update-banner { animation: none; }
  .tms-update-banner .tub-ico .ic { animation: none; }
}

@media (max-width: 768px), (max-height: 480px) {
  .mobile-chrome-toggle-slot {
    display: inline-flex;
    flex: 0 0 auto;
    order: 20;
  }

  .mobile-chrome-toggle-slot .traffic-chrome-toggle {
    background: #fff;
    border-color: #c58b5f;
    box-shadow: none;
    color: var(--primary-strong);
    font-size: 11px;
    min-height: 28px;
    padding: 5px 10px;
    position: static;
    right: auto;
    top: auto;
    transform: none;
    white-space: nowrap;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed .sidebar,
  body.mobile-chrome-active.mobile-chrome-collapsed .topbar {
    display: none !important;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed #planningView.active #driverAvailabilityBar,
  body.mobile-chrome-active.mobile-chrome-collapsed #planningView.active .service-editor-panel,
  body.mobile-chrome-active.mobile-chrome-collapsed #planningView.active .services-panel > .panel-head,
  body.mobile-chrome-active.mobile-chrome-collapsed #planningView.active .all-dates-note {
    display: none !important;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed main.main {
    padding: 8px 8px 8px !important;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed #planningView.active .work-grid {
    gap: 0;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed #planningView.active .services-panel {
    min-height: calc(100vh - 18px);
    padding: 0;
  }

  /* Colapsado en móvil: el botón queda como PESTAÑA desplegable centrada arriba (peek), para volver a
     mostrar los controles. Es una pestaña pequeña que asoma; al hover/foco se despliega con el texto. */
  body.mobile-chrome-active.mobile-chrome-collapsed .traffic-chrome-toggle {
    background: #fff;
    border-color: var(--primary);
    border-radius: 0 0 8px 8px;
    color: transparent;
    left: 50%;
    max-width: 38px;
    min-height: 30px;
    padding: 5px 0;
    position: fixed;
    right: auto;
    top: 0;
    transform: translate(-50%, -17px);
    width: 38px;
    z-index: 1200;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed .traffic-chrome-toggle::after {
    border: solid var(--primary-strong);
    border-width: 0 2px 2px 0;
    bottom: 5px;
    content: "";
    height: 7px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed .traffic-chrome-toggle:hover,
  body.mobile-chrome-active.mobile-chrome-collapsed .traffic-chrome-toggle:focus-visible {
    color: var(--primary-strong);
    max-width: 170px;
    padding: 5px 10px;
    transform: translate(-50%, 0);
    width: auto;
  }

  body.mobile-chrome-active.mobile-chrome-collapsed .traffic-chrome-toggle:hover::after,
  body.mobile-chrome-active.mobile-chrome-collapsed .traffic-chrome-toggle:focus-visible::after {
    border: 0;
    content: none;
    height: 0;
    width: 0;
  }
}

/* ── Sección TARIFAS (jul-2026): lenguaje visual del TMS (tarjetas con acento, tabla sleek) ── */
.tf-tabbar { display: flex; gap: 8px; margin: 2px 0 14px; }
.tf-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 7px 16px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); }
.tf-tab svg { opacity: .85; }
.tf-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.tf-tab.active { background: var(--nav); border-color: var(--nav); color: #fff; }
.tf-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tf-toolbar input[type="search"] { flex: 0 0 260px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.tf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.tf-counts { display: inline-flex; gap: 6px; }
.tf-chip { border-radius: 14px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; }
.tf-chip-green { background: #e7f2ea; color: var(--green); }
.tf-chip-amber { background: #fdf3e0; color: var(--amber); }
.tf-chip-grey { background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line); }
.tf-fuel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.tf-fuel input { width: 52px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; text-align: right; }
/* Tabla al estilo Listados: densa, cabecera clara con subrayado terracota, cebra + hover */
.tf-table { width: 100%; border-collapse: collapse; }
.tf-table th { background: #eef2f8; color: #5a6b80; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--primary); padding: 6px 9px; text-align: left; }
.tf-table td { padding: 4px 9px; border-bottom: 1px solid #eef1f6; font-size: 12.5px; background: var(--surface); }
.tf-table tbody tr:nth-child(even) td { background: var(--surface-soft); }
.tf-table tbody tr:hover td { background: var(--primary-soft); }
.tf-row { cursor: pointer; }
.tf-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.tf-badge-sale { background: #e7f2ea; color: var(--green); }
.tf-badge-cost { background: #efe7f7; color: #5b3a86; }
.tf-badge-active { background: #e7f2ea; color: var(--green); }
.tf-badge-draft { background: #fdf3e0; color: var(--amber); }
.tf-badge-superseded { background: var(--surface-soft); color: var(--muted); }
/* Tarjetas de la ficha: mismo lenguaje que la ficha de proveedor (borde izquierdo de color) */
.tf-card { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 8px; background: var(--surface); margin: 0 0 12px; overflow: hidden; }
.tf-card-nav { border-left-color: var(--nav); }
.tf-card-primary { border-left-color: var(--primary); }
.tf-card-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--nav); background: var(--surface-soft); }
.tf-card-primary > .tf-card-head { color: var(--primary-strong); }
.tf-card-head svg { flex-shrink: 0; }
.tf-count { background: var(--nav); color: #fff; border-radius: 10px; padding: 0 8px; font-size: 11px; line-height: 17px; }
.tf-card-primary .tf-count { background: var(--primary); }
.tf-card-body { padding: 12px; }
.tf-card-body.tf-card-flush { padding: 0; }
.tf-detail-head { margin-bottom: 12px; }
.tf-detail-title { display: flex; flex-direction: column; line-height: 1.2; }
.tf-detail-title strong { font-size: 15px; color: var(--ink); }
.tf-detail-title span { font-size: 12px; color: var(--muted); }
.tf-headgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
.tf-headgrid label { font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .tf-headgrid { grid-template-columns: 1fr 1fr; } }
/* Calculadora: tres paneles con el mismo acento de tarjeta */
.tf-calcgrid { display: grid; grid-template-columns: 320px 1fr 380px; gap: 14px; align-items: start; }
@media (max-width: 1200px) { .tf-calcgrid { grid-template-columns: 1fr; } }
.tf-calcform, .tf-params, .tf-calcout { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.tf-calcform { border-left: 4px solid var(--nav); }
.tf-calcout { border-left: 4px solid var(--primary); min-height: 220px; }
.tf-params { border-left: 4px solid var(--line-strong); }
.tf-calcform h3, .tf-params h3, .tf-calcout h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 9px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--nav); background: var(--surface-soft); }
.tf-calcout h3 { color: var(--primary-strong); }
.tf-calcform label, .tf-params label { font-size: 12px; color: var(--muted); padding: 0 12px; }
.tf-calcform button[type="submit"] { margin: 6px 12px 0; }
.tf-params form { display: flex; flex-direction: column; gap: 8px; }
.tf-params fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 4px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px; }
.tf-params legend { font-weight: 700; font-size: 11px; color: var(--nav); padding: 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.tf-params form > label { padding: 0 12px; }
.tf-params form > div { padding: 0 12px; }
.tf-params .muted { padding: 0 12px; }
.tf-calcout > * { margin-left: 12px; margin-right: 12px; }
.tf-calcout > h3 { margin-left: 0; margin-right: 0; }
.tf-price-hero { display: flex; flex-direction: column; gap: 2px; background: var(--primary-soft); border: 1px solid #ecd9c4; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.tf-price-hero span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-strong); font-weight: 700; }
.tf-price-hero strong { font-size: 26px; color: var(--primary-strong); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tf-price-hero small { color: var(--muted); }
.tf-compare { margin: 8px 12px 0; padding: 8px 10px; background: var(--surface-soft); border-radius: 6px; font-size: 13px; }
/* Revisión de precios */
.tf-revchips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tf-rev-ok { background: #e7f2ea; color: var(--green); }
.tf-rev-desviacion { background: var(--accent-soft); color: var(--accent); }
.tf-rev-sin_precio { background: #fdf3e0; color: var(--amber); }
.tf-rev-sin_regla { background: var(--surface-soft); color: var(--muted); }
.tf-rev-sin_tarifa { background: var(--surface-soft); color: var(--muted); }
.tf-revrow { cursor: pointer; }
/* Chip "Según tarifa" en la ficha del servicio */
.tf-svc-quote { margin-top: 6px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-svc-chip { background: #e7f2ea; color: var(--green); border-radius: 14px; padding: 3px 10px; }
/* Sugerencia de tarifa dentro del formulario de nuevo servicio: compacta, sin margen superior extra. */
.svc-form-quote { margin: 2px 0 2px; font-size: 12px; }
.svc-form-quote:empty { display: none; }

/* Referencia de PRECIO A PAGAR a un proveedor externo (últimas veces en la misma ruta). */
.svc-pay-ref { margin: 6px 0 2px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.svc-pay-ref:empty { display: none; }
.svc-pay-ref-head { color: var(--ink); }
.svc-pay-ref-list { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-pay-ref-chip { background: #eef2f7; border: 1px solid #d6deea; border-radius: 12px; padding: 2px 9px; font-weight: 600; color: #2c3e5c; white-space: nowrap; cursor: pointer; font-size: inherit; line-height: 1.5; transition: background .12s, border-color .12s; }
.svc-pay-ref-chip:hover { background: #dfe8f4; border-color: #9fb6d6; }
.svc-pay-ref-chip:active { background: #cddcef; }
.svc-pay-ref-chip small { font-weight: 400; color: #7a889c; }
.svc-pay-ref-hint { font-size: 11px; }
.svc-pay-ref-none { color: #8a5a00; background: #fdf3d0; border: 1px solid #ecd88f; border-radius: 6px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.svc-pay-ref-ask { color: #8a5a00; background: #fff7e3; border: 1px solid #ecd88f; border-left: 3px solid #e0a83e; border-radius: 6px; padding: 5px 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.35; }
.svc-pay-ref-ask b { color: #6e4600; }

/* "Ocultar Verallia": fila fina amarillenta que sustituye al bloque de servicios Verallia oculto.
   Tamaños FIJOS (altura/padding/fuente) con especificidad por encima de las reglas del zoom de filas
   (que escalan por variables), para que no se infle ni descoloque el botón "Mostrar" a ningún zoom. */
/* Fila MUY fina: altura auto (se ajusta al botón tamaño Docs) y padding mínimo; la especificidad por
   encima del zoom mantiene el padding fijo aunque el botón (mini-action) sí escale como "Docs". */
#servicesList .service-table tbody tr.verallia-collapsed-row { height: auto; }
#servicesList .service-table tr.verallia-collapsed-row td {
  padding: 2px 12px;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  background: #fdf3d0;
  color: #7a5b00;
  border-top: 1px solid #ecd88f;
  border-bottom: 1px solid #ecd88f;
  border-left: 3px solid #e6c34d;
}
#servicesList .verallia-collapsed-row:hover td { background: #fbedc0; }
.verallia-collapsed-row .vcol-tag { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a6a00; margin-right: 10px; }
.verallia-collapsed-row .vcol-count { color: #9a7b1a; font-size: 11px; }
/* Fecha del bloque: solo sale en vista de RANGO (hay un resumen por dia). Tamano fijo como el resto. */
.verallia-collapsed-row .vcol-day { color: #8a6a00; font-size: 11px; font-weight: 700; margin-right: 10px; }
/* El botón "Mostrar" con tamaño EXACTO de "Docs" (mini-action). Se fuerza con especificidad (#servicesList)
   porque reglas genéricas de botón de la tabla lo agrandaban; el tinte pega con la fila amarilla. */
#servicesList .verallia-collapsed-row .vcol-show {
  margin-left: 12px; vertical-align: middle; border: 1px solid #d9b84a; background: #fff8e1; color: #7a5b00;
  font-size: 10px; line-height: 1; min-height: 22px; padding: 4px 6px; border-radius: 4px; width: fit-content;
}
#servicesList .verallia-collapsed-row .vcol-show:hover { background: #fff2c4; }
/* Botón de la barra: normal (como los demás, SIN amarillo). Tamaño = norma global de .secondary (11px),
   idéntico a "Vista compacta"; sin regla propia para no descuadrar. */
.tf-svc-warn { background: #fdf3e0; color: var(--amber); border-radius: 14px; padding: 3px 10px; font-weight: 600; }

/* Trafico diario en movil: ordena los controles en filas logicas.
   Es solo presentacion; no cambia IDs, handlers ni estado de filtros. */
@media (max-width: 768px), (max-height: 480px) {
  #planningView .work-grid {
    gap: 6px;
  }

  #planningView .service-editor-panel {
    padding: 8px;
  }

  #planningView .service-editor-panel .panel-head {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #planningView #serviceEditorToggle {
    justify-self: stretch;
    min-height: 34px;
    width: 100%;
  }

  #planningView .traffic-filter-actions {
    align-items: stretch;
    display: grid !important;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  #planningView .traffic-filter-actions > * {
    min-width: 0;
  }

  #planningView .traffic-filter-actions input,
  #planningView .traffic-filter-actions select,
  #planningView .traffic-filter-actions button {
    font-size: 12px;
    min-height: 34px;
    width: 100%;
  }

  #planningView .traffic-filter-actions #trafficSearchInput {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #planningView .traffic-filter-actions .date-control {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(92px, 0.44fr) minmax(0, 1fr);
    margin: 0;
    padding: 7px;
  }

  #planningView .traffic-filter-actions .compact-control {
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  #planningView .traffic-filter-actions .compact-control button {
    padding-left: 6px;
    padding-right: 6px;
  }

  #planningView .traffic-filter-actions #singleDateControl {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
  }

  #planningView .traffic-filter-actions .date-control.range-active #singleDateControl {
    display: none;
  }

  #planningView .traffic-filter-actions #singleDateControl label {
    display: none;
  }

  #planningView .traffic-filter-actions #rangeDateControl {
    display: none;
    gap: 6px;
    grid-column: 1 / -1;
    grid-template-columns: 42px minmax(0, 1fr) 42px minmax(0, 1fr);
  }

  #planningView .traffic-filter-actions .date-control.range-active #rangeDateControl {
    display: grid;
  }

  #planningView .traffic-filter-actions #rangeDateControl label {
    align-self: center;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
  }

  #planningView .traffic-filter-actions .quick-date-filters {
    display: grid;
    gap: 7px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #planningView .traffic-filter-actions .quick-date-filters button {
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
  }

  #planningView .traffic-filter-actions #trafficStateFilter,
  #planningView .traffic-filter-actions #driverTrafficFilter {
    grid-column: 1 / -1;
  }

  #planningView .traffic-filter-actions #clientOrderButton {
    margin-left: 0;
  }

  #planningView .traffic-filter-actions #clearDriverTrafficFilter,
  #planningView .traffic-filter-actions #clientOrderButton,
  #planningView .traffic-filter-actions #columnsButton,
  #planningView .traffic-filter-actions #viewOptionsButton {
    grid-column: span 2;
  }

  #planningView .traffic-filter-actions #refreshButton {
    grid-column: 1 / -1;
  }

  #planningView .services-panel > .panel-head {
    padding: 7px;
  }

  #planningView .services-panel .panel-title-actions {
    display: grid !important;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #planningView .services-panel .panel-title-actions > h2 {
    grid-column: 1 / -1;
    margin: 0;
  }

  #planningView .services-panel .panel-title-actions button {
    min-height: 34px;
    width: 100%;
  }

  #planningView .services-panel .services-head-actions {
    display: grid !important;
    gap: 7px;
    grid-template-columns: 1fr;
  }

  #planningView .services-panel .compact-traffic-toggle {
    min-height: 34px;
    width: 100%;
  }

  body.traffic-compact-mode #planningView .services-panel > .panel-head {
    max-width: calc(100vw - 28px);
    min-width: 0;
    overflow: visible;
    width: calc(100vw - 28px);
  }

  body.traffic-compact-mode #planningView .services-panel .services-head-actions {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    width: 100%;
  }

  body.traffic-compact-mode #planningView .services-panel .services-head-actions > * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  body.traffic-compact-mode #planningView .compact-date-bar,
  body.traffic-compact-mode #planningView .compact-action-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.traffic-compact-mode #planningView #compactTrafficToggle {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    margin-left: 0;
    min-width: 0;
    overflow: visible;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  #planningView .traffic-filter-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #planningView .traffic-filter-actions .date-control {
    grid-template-columns: 1fr;
  }

  #planningView .traffic-filter-actions #singleDateControl {
    grid-column: 1 / -1;
    width: 100%;
  }

  #planningView .traffic-filter-actions #singleDateControl input {
    width: 100%;
  }

  #planningView .traffic-filter-actions #rangeDateControl {
    grid-template-columns: 1fr 1fr;
  }

  #planningView .traffic-filter-actions #rangeDateControl label {
    display: none;
  }

  #planningView .traffic-filter-actions .quick-date-filters,
  #planningView .services-panel .panel-title-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* WhatsApp / OpenWA (modulo aislado) */
.wa-page {
  display: grid;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
}
.wa-hero,
.wa-card {
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(15, 35, 70, 0.06);
}
.wa-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-left: 4px solid #b8733b;
}
.wa-hero h2,
.wa-card h3 {
  margin: 0;
  color: #13233a;
}
.wa-hero p,
.wa-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.wa-eyebrow,
.wa-card-head span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: #53667f;
  font-weight: 800;
  letter-spacing: 0;
}
.wa-status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.wa-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef3f8;
  color: #53667f;
  font-size: 12px;
  font-weight: 800;
}
.wa-pill-ok {
  background: #e7f7ee;
  color: #16824b;
}
.wa-pill-bad {
  background: #fdeaea;
  color: #b4232d;
}
.wa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 14px;
}
.wa-grid-bottom {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wa-card {
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.wa-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wa-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wa-card label {
  display: grid;
  gap: 5px;
  color: #27364a;
  font-size: 12px;
  font-weight: 800;
}
.wa-card input,
.wa-card textarea {
  width: 100%;
  border: 1px solid #cfdbea;
  border-radius: 6px;
  padding: 8px 9px;
  font: inherit;
  font-weight: 500;
  color: #13233a;
  background: #fbfdff;
}
.wa-check {
  display: inline-flex !important;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 8px !important;
}
.wa-check input {
  width: auto;
}
.wa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Diálogo de envío WhatsApp desde la ficha: filas de destinatario (casilla + etiqueta + teléfono). */
.wa-warn { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.4; background: #fbeede; border: 1px solid #f3d2a6; color: #7a4a10; border-radius: 8px; padding: 8px 11px; margin: 10px 0 0; }
.wa-warn svg { flex: 0 0 auto; margin-top: 1px; }
.wa-recips { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.wa-recip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-recip-lbl { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #445; min-width: 130px; white-space: nowrap; cursor: pointer; }
.wa-recip-lbl input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; width: 16px !important; height: 16px !important; min-height: 0 !important; flex: 0 0 16px; border: 1.5px solid #c1ccdb; border-radius: 4px; background: #fff; cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.wa-recip-lbl input[type="checkbox"]:hover { border-color: #8aa6c8; }
.wa-recip-lbl input[type="checkbox"]:checked { background: #2c7a4b; border-color: #2c7a4b; }
.wa-recip-lbl input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wa-recip-lbl input[type="checkbox"]:focus-visible { outline: 2px solid #2c7a4b; outline-offset: 1px; }
.wa-recip > input { flex: 1; min-width: 180px; padding: 6px 9px; border: 1px solid #c7d2e0; border-radius: 6px; font-size: 13px; }
/* Casilla "Adjuntar PDF del DeCA" del diálogo de envío: mismo check verde discreto. */
.wa-attach { display: flex; align-items: center; gap: 8px; margin: 9px 0 0; font-size: 12.5px; color: #33465f; cursor: pointer; }
.wa-attach input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; width: 16px !important; height: 16px !important; min-height: 0 !important; flex: 0 0 16px; border: 1.5px solid #c1ccdb; border-radius: 4px; background: #fff; cursor: pointer; position: relative; transition: background .12s, border-color .12s; }
.wa-attach input[type="checkbox"]:hover { border-color: #8aa6c8; }
.wa-attach input[type="checkbox"]:checked { background: #2c7a4b; border-color: #2c7a4b; }
.wa-attach input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wa-attach input[type="checkbox"]:focus-visible { outline: 2px solid #2c7a4b; outline-offset: 1px; }
.wa-attach b { font-weight: 600; color: #1f2d40; }
.wa-diagnostics {
  display: grid;
  gap: 8px;
  margin: 0;
}
.wa-diagnostics div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.wa-diagnostics dt {
  color: #53667f;
  font-size: 12px;
  font-weight: 800;
}
.wa-diagnostics dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.wa-log {
  max-height: 230px;
  overflow: auto;
  margin: 0;
  border: 1px solid #d7e3ef;
  border-radius: 6px;
  padding: 10px;
  background: #f7fafc;
  color: #243449;
  font-size: 12px;
  white-space: pre-wrap;
}
.wa-inline-warning {
  margin: 0;
  border: 1px solid #ecd88f;
  border-left: 3px solid #d59b33;
  border-radius: 6px;
  background: #fff7e3;
  color: #7a5300;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 860px) {
  .wa-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .wa-status-stack {
    justify-content: flex-start;
  }
  .wa-grid,
  .wa-grid-bottom,
  .wa-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────── Sección SHUNTER (jul-2026) ─────────────────────────
   Sistema visual propio sh-*, coherente con el TMS (variables de tema). Ver
   docs/SHUNTER_ARQUITECTURA.md. Estados de entrada con color semantico. */
.sh-page { padding: 4px 2px 40px; }
.sh-loading, .sh-muted { color: #8a98ab; font-size: 13px; padding: 16px 4px; }
/* La cabecera se separa del borde para que el icono y "Shunter" queden a la altura del TEXTO de las
   pestañas de abajo (no pegados al canto de la pantalla, que era lo que chirriaba). */
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 4px 2px 14px 15px; border-bottom: 1px solid var(--border, #e6ebf1); margin-bottom: 12px; }
.sh-head-title { display: flex; align-items: center; gap: 12px; }
/* El icono se alinea con "Shunter", NO con el bloque entero: centrado en la caja completa quedaba 8px
   por encima del titulo (a la altura del epigrafe). Se ancla abajo y se ajusta con el margen. */
.sh-head-title .ic { color: var(--brand, #8a5a2b); align-self: flex-end; margin-bottom: 2px; }
.sh-eyebrow { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #98a6b8; font-weight: 700; }
.sh-head-title h2 { margin: 1px 0 0; font-size: 22px; letter-spacing: -.01em; color: var(--ink, #1f2c3a); }
.sh-head-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: #5c6b7e; font-weight: 600; }
.sh-head-meta .ic { color: #98a6b8; vertical-align: -2px; }

.sh-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sh-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border, #dbe3ec);
  background: var(--surface, #fff); color: #55647a; font-size: 12.5px; font-weight: 700; padding: 7px 14px;
  border-radius: 999px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.sh-tab .ic { color: #9aa7b8; }
.sh-tab:hover { border-color: #b9c6d6; color: #2a3b4d; }
.sh-tab.is-active { background: var(--brand, #8a5a2b); border-color: var(--brand, #8a5a2b); color: #fff; }
.sh-tab.is-active .ic { color: #fff; }

.sh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-center-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.sh-center-pill { border: 1px solid #d6deea; background: #f6f8fb; color: #46586c; font-size: 11.5px; font-weight: 800;
  letter-spacing: .02em; padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.sh-center-pill:hover { border-color: #b9c6d6; }
.sh-center-pill.is-active { background: var(--primary, #274060); border-color: var(--primary, #274060); color: #fff; }
.sh-week-nav { display: flex; align-items: center; gap: 6px; }
.sh-week-label { font-size: 12px; font-weight: 700; color: #46586c; min-width: 150px; text-align: center; }
.sh-flip { transform: rotate(180deg); }
.sh-weekcombo-wrap { position: relative; display: inline-block; }
/* El combo va pegado a la derecha de la barra → el calendario (2 meses, ancho) se anclaba a la izquierda y
   se salía por el borde derecho. Anclarlo a la derecha del botón: crece hacia la izquierda y no se desborda. */
.sh-weekcombo-wrap .vp-weekcal { left: auto; right: 0; max-width: calc(100vw - 32px); overflow-x: auto; }

/* Cuadrante de 4 semanas apiladas — la semana elegida encabeza (arriba), calendario tipo Verallia */
.sh-weeks { display: flex; flex-direction: column; gap: 18px; }
.sh-weekblock { display: flex; flex-direction: column; gap: 7px; }
.sh-weekblock-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  color: #7a889c; letter-spacing: .01em; padding-left: 2px; }
.sh-weekblock.is-current .sh-weekblock-head { color: var(--brand, #8a5a2b); }
.sh-wb-tag { display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; background: var(--brand, #8a5a2b); color: #fff; }
.sh-wb-tag.sh-wb-now { background: #e5f4ec; color: #1f7a4d; }
.sh-weekblock-grid { overflow-x: auto; border: 1px solid var(--border, #e6ebf1); border-radius: 12px; background: var(--surface, #fff); }
.sh-weekblock.is-current .sh-weekblock-grid { border-color: #e4c9a8; box-shadow: 0 1px 10px rgba(138, 90, 43, .07); }

.sh-grid-wrap { overflow-x: auto; border: 1px solid var(--border, #e6ebf1); border-radius: 12px; background: var(--surface, #fff); }
.sh-grid { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 12px; }
.sh-grid th, .sh-grid td { border: 1px solid #eef2f7; padding: 0; }
.sh-grid-corner { background: #f6f8fb; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #8a98ab; padding: 8px 10px; text-align: center; width: 130px; }
.sh-grid-day { background: #f6f8fb; padding: 6px 4px; text-align: center; width: 12%; }
.sh-grid-day span { display: block; font-weight: 800; color: #46586c; }
.sh-grid-day small { color: #98a6b8; font-weight: 600; }
.sh-grid-day.is-today { background: #fdf3e2; }
.sh-grid-day.is-today span { color: var(--brand, #8a5a2b); }
.sh-grid-shift { background: #fbfcfe; text-align: center; padding: 8px 10px; }
.sh-grid-shift b { display: block; color: #2a3b4d; font-size: 12.5px; }
.sh-grid-shift small { color: #98a6b8; font-weight: 600; }
.sh-grid-cell { position: relative; vertical-align: top; padding: 4px !important; height: 42px; }
.sh-grid-cell.is-today { background: #fffaf2; }
.sh-cov-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; margin: 2px; padding: 3px 7px; border-radius: 6px;
  cursor: pointer; border: 1px solid transparent; background: #eef2f7; color: #2c3e5c; white-space: nowrap; vertical-align: top; }
.sh-cov-chip .sh-cov-name { font-size: 11px; font-weight: 700; line-height: 1.1; }
.sh-cov-chip .sh-cov-time { font-size: 8.5px; font-weight: 700; line-height: 1; padding: 1px 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .6); opacity: .85; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.sh-cov-chip:hover { filter: brightness(.96); }
.sh-cell-add { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 6px; border: 1px dashed #cbd6e2;
  background: #fff; color: #9aa7b8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .1s; }
.sh-grid-cell:hover .sh-cell-add { opacity: 1; }
.sh-cell-add:hover { border-color: var(--brand, #8a5a2b); color: var(--brand, #8a5a2b); }
.sh-grid-empty { padding: 20px !important; text-align: center; color: #8a98ab; font-size: 13px; }
/* Banda de DISPONIBILIDAD (guardia en casa) — concepto distinto de los turnos de trabajo: raya gruesa
   arriba + tinte propio. No confundir con el "equipo de disponibilidades" (rol que cubre ausencias). */
.sh-shift-hint { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #7c8bab; }
.sh-row-standby > .sh-grid-shift { background: #eef2f9; }
.sh-row-standby > .sh-grid-cell { background: #f7f9fd; }
.sh-row-standby > .sh-grid-cell.is-today { background: #fffaf2; }
.sh-standby-divide > th, .sh-standby-divide > td { border-top: 3px solid #9fb0cc; }

/* ── VISTA HORARIA (panel nacional de entradas/salidas en eje de horas) ── */
.sh-hh-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-hh-datenav { display: flex; align-items: center; gap: 6px; }
.sh-hh-datewrap { position: relative; display: inline-flex; }
.sh-hh-date { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-weight: 800; color: #2a3b4d; font-size: 13px; min-width: 118px; text-align: center; text-transform: capitalize; border: 1px solid #dfe6ee; background: #fff; border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.sh-hh-date:hover { border-color: #c4d0de; background: #f6f8fb; }
.sh-hh-date svg { color: #8a97a8; }
/* El input de fecha va superpuesto y transparente sobre la etiqueta: el calendario nativo se ancla ahí. */
.sh-hh-datein { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; border: 0; cursor: pointer; }
.sh-hh-legend { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.5px; color: #6b7a8d; }
.sh-hh-kpi { font-weight: 600; color: #46586c; }
.sh-hh-kpi b { color: var(--brand, #8a5a2b); font-size: 14px; font-weight: 800; }
.sh-hh-warn { color: #b23b31 !important; }
.sh-lg { padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.sh-lg.sh-st-ok { background: #e5f4ec; color: #1f7a4d; }
.sh-lg.sh-st-late { background: #fdf2dc; color: #9a6a12; }
.sh-lg.sh-st-noshow { background: #fbe7e5; color: #b23b31; }
.sh-lg.sh-st-pending { background: #eef2f7; color: #56657a; }
.sh-hh-wrap { overflow-x: auto; border: 1px solid var(--border, #e6ebf1); border-radius: 12px; background: var(--surface, #fff); }
.sh-hh-ruler, .sh-hh-row { display: flex; min-width: 940px; }
.sh-hh-ruler { position: sticky; top: 0; z-index: 3; background: #fff; height: 22px; border-bottom: 1px solid #eef2f7; }
.sh-hh-cty { flex: 0 0 92px; width: 92px; position: sticky; left: 0; z-index: 2; background: #f6f8fb; border-right: 1px solid #e6ebf1; padding: 5px 9px; box-sizing: border-box; }
.sh-hh-cty b { display: block; font-size: 12px; font-weight: 800; color: #2a3b4d; line-height: 1.1; }
.sh-hh-cty small { font-size: 9px; color: #98a6b8; font-weight: 600; letter-spacing: .02em; }
.sh-hh-ruler .sh-hh-cty { background: #fff; border-right-color: #eef2f7; }
.sh-hh-track { position: relative; flex: 1 1 auto; min-height: 24px;
  background-image: linear-gradient(90deg, #eef2f7 1px, transparent 1px); background-repeat: repeat-x; background-position: left top; }
.sh-hh-tick { position: absolute; top: 5px; transform: translateX(-50%); font-size: 9.5px; color: #98a6b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-hh-tick.is-out { display: none; }
/* La REGLA de horas es la superficie de zoom/pan (estilo DAW): ruleta = zoom, arrastrar = desplazar. */
.sh-zoomable .sh-hh-ruler, .jh-zoomable .sh-hh-ruler { cursor: ew-resize; user-select: none; touch-action: none; }
.sh-zoomable .sh-hh-ruler.is-grabbing, .jh-zoomable .sh-hh-ruler.is-grabbing { cursor: grabbing; }
.sh-hh-rulhint { display: flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 800; color: #b4c0cf; letter-spacing: .03em; text-transform: uppercase; overflow: hidden; }
.sh-hh-rulhint svg { flex: 0 0 auto; opacity: .85; }
/* La barra "en vivo" (presencia WeMob) conserva un ancho mínimo legible a cualquier nivel de zoom. */
.sh-hbar.sh-hbar-live { min-width: 90px; }
/* Separación entre CENTROS: cada fila es un centro y puede llevar varios carriles de bandas, así que la
   raya fina de antes se perdía entre las propias bandas y no se veía dónde acababa un centro y empezaba
   el siguiente. Línea gruesa y con contraste real. */
.sh-hh-rows .sh-hh-row { border-top: 2px solid #ccd6e3; }
.sh-hh-rows .sh-hh-row:first-child { border-top: none; }
/* La columna del código de centro también marca el corte (es sticky y se pinta aparte al scrollear). */
.sh-hh-rows .sh-hh-row + .sh-hh-row .sh-hh-cty { box-shadow: inset 0 1px 0 #ccd6e3; }
.sh-hbar { position: absolute; height: 36px; border-radius: 6px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 3px 8px; font-size: 10.5px; line-height: 1.15; white-space: nowrap; border: 1px solid transparent; cursor: pointer; }
.sh-hbar:hover { filter: brightness(.97); box-shadow: 0 1px 4px rgba(20, 50, 90, .12); }
.sh-hbar-l1 { display: flex; align-items: center; gap: 5px; overflow: hidden; }
.sh-hbar-n { font-weight: 800; }
.sh-hbar-t { opacity: .72; font-variant-numeric: tabular-nums; }
.sh-hbar-card { display: flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; opacity: .92; font-variant-numeric: tabular-nums; }
.sh-hbar-card .ic { opacity: .8; }
.sh-hbar.sh-st-ok { background: #e5f4ec; color: #1f7a4d; border-color: #b6ddc6; }
.sh-hbar.sh-st-late { background: #fdf2dc; color: #9a6a12; border-color: #ecd6a1; }
.sh-hbar.sh-st-noshow { background: #fbe7e5; color: #b23b31; border-color: #ecc3bd; }
.sh-hbar.sh-st-pending { background: #eef2f7; color: #56657a; border-color: #d6deea; }
.sh-hbar.sh-st-excused { background: #e9f0fb; color: #3660a8; border-color: #c4d5ef; }
/* Barra de PRESENCIA física (WeMob): está en el centro ahora, tarjeta metida. Distinta de los turnos. */
/* Fichaje confirmado por ATurnos (el rey): el ✓ + hora en verde para que se lea como "entrada confirmada". */
.sh-hbar.src-aturnos .sh-hbar-card { color: #1f7a4d; font-weight: 700; }
/* DESCUBIERTO en vivo: pastilla roja con los minutos que el servicio quedó VACÍO antes de que entrara este
   turno (relevo tardío respecto a la salida del saliente). `flex:none` → nunca se recorta aunque la barra
   sea estrecha; va la primera del renglón para que se lea sí o sí. El color propio pisa el verde de ATurnos. */
.sh-hbar-desc { flex: none; display: inline-flex; align-items: center; background: #d64b3f; color: #fff !important;
  font-weight: 800; font-size: 8.5px; line-height: 1; padding: 2px 4px; border-radius: 4px; letter-spacing: .2px; }
.sh-hbar.has-desc { border-color: #e6a8a1; }
/* LO CUBRE EL EQUIPO DE DISPONIBILIDAD (no la plantilla del centro). El color de la barra sigue siendo el
   de PUNTUALIDAD —es el dato del KPI—, así que la marca va aparte y con el MARRÓN del equipo, el mismo
   tono que su banda: filete grueso a la izquierda + pastilla con escudo. Se lee de un vistazo sin quitarle
   sitio a lo importante. */
.sh-hbar.is-eqcover { border-left: 4px solid #a9803f; }
.sh-hbar-eq { flex: none; display: inline-flex; align-items: center; gap: 2px; background: #f3e6cf; color: #7a5a30 !important;
  font-weight: 800; font-size: 8.5px; line-height: 1; padding: 2px 5px; border-radius: 4px; letter-spacing: .2px; }
.sh-hbar-eq svg { width: 9px; height: 9px; }
.sh-lg.sh-lg-eq { display: inline-flex; align-items: center; gap: 4px; background: #f7efe1; color: #7a5a30; border: 1px solid #e0cba4; }
.sh-lg.sh-lg-eq svg { color: #a9803f; }
.sh-pop-eq { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #7a5a30; }
.sh-pop-eq svg { color: #a9803f; }
/* SALIÓ ANTES DE SU HORA. Dos señales que se leen a la vez: la hora de salida SUBRAYADA EN AMARILLO (marcador,
   siempre igual → "mira esta hora") y la COLA de la banda teñida según la gravedad — ámbar hasta 10 min, rojo
   por encima (el degradado va inline en la barra, ver el render). El color propio pisa el verde de ATurnos. */
.sh-hbar-out { flex: none; white-space: nowrap; }
.sh-hbar-out.is-early { background: #ffdf7e; color: #6d4b00 !important; font-weight: 800;
  padding: 1px 3px; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(140, 96, 0, .35); }
/* El tinte de la cola es PROPORCIONAL (dice cuánto se fue antes), pero 2 min sobre una jornada de 8 h son 2 px
   y no se ven. Por eso el extremo lleva además un REMATE de ancho fijo: el remate dice "se fue antes" y su
   color la gravedad; el tinte, cuánto. Así se ve siempre sin exagerar la proporción. */
.sh-hbar.has-early { border-color: #e2bd77; border-right: 4px solid #e0a021; }
.sh-hbar.has-early.is-early-bad { border-color: #e0a49c; border-right-color: #d64b3f; }
/* Fichaje RECIÉN llegado (tras sincronizar): un halo verde que aparece y se desvanece, para que el ojo lo
   cace entre 20 barras. 1,4 s y se acabó — ni parpadeo insistente ni nada que distraiga después.
   `box-shadow` en vez de moverla: la barra no se desplaza ni empuja a las vecinas. */
@keyframes sh-fresh {
  0%   { box-shadow: 0 0 0 0 rgba(31, 122, 77, .55); }
  35%  { box-shadow: 0 0 0 5px rgba(31, 122, 77, .18); }
  100% { box-shadow: 0 0 0 0 rgba(31, 122, 77, 0); }
}
.sh-hbar.is-fresh { animation: sh-fresh 1.4s cubic-bezier(.16, 1, .3, 1) 1; }
@media (prefers-reduced-motion: reduce) { .sh-hbar.is-fresh { animation: none; } }
.sh-hbar.sh-hbar-live { background: #e3f4f1; color: #147a6b; border-color: #a6ddd2; border-left-width: 3px; }
/* Presencia SIN turno propio: mismo tono live pero con filete ámbar de AVISO + texto ámbar, para que el
   operativo lo revise (quién está vs quién debería estar). */
.sh-hbar.sh-hbar-live.is-unplanned { border-left: 4px solid #e0a021; }
.sh-hbar-live .sh-live-warn { color: #b26a00; font-weight: 700; }
/* EXPLICADA: aparecer sin turno no siempre es un fallo (fue a llevar una tractora y se marchó). Una vez
   dicho a qué vino, la barra pierde el filete ámbar y pasa al tono live tranquilo con el motivo escrito:
   el hecho consta, pero ya no pide revisión. */
/* OTRA TAREA (no cobertura de turno): AZUL. Fuera de la escala verde/ámbar/rojo de puntualidad a propósito —
   no se está juzgando si cubrió bien un turno, es que vino a otra cosa (dejar una tractora, taller, apoyo).
   El azul lo dice de un vistazo sin tener que leer el motivo. */
.sh-hbar.sh-hbar-live.is-explained { background: #e8eefc; color: #2f4d8f; border-color: #c3d3f0; border-left: 4px solid #4a72c4; }
.sh-hbar-live .sh-live-ok { color: #2f4d8f; font-weight: 700; }
/* TARJETA PUESTA PERO SIN SEÑAL: el camión lleva horas parado con la ignición apagada. NO se afirma que la
   persona siga allí (quien va a dejar una tractora se marcha y la tarjeta se queda): gris apagado, sin el
   punto "en vivo" y con la hora de la última señal. Es un "no lo sé", no un aviso. */
.sh-hbar.sh-hbar-live.is-stale { background: #eef1f4; color: #5a6675; border-color: #d3dae2; border-left: 4px solid #9aa7b5; }
.sh-hbar-live .sh-live-stale { color: #6b7787; font-weight: 700; }
/* Barra CERRADA (ya no llega hasta "ahora"): remate liso a la derecha en vez del degradado de "en curso". */
.sh-hbar.sh-hbar-live.is-closed { border-right: 3px solid currentColor; }
.sh-pop-warn { display: flex; gap: 6px; align-items: flex-start; background: #fdf3e0; border: 1px solid #f0d9a8;
  color: #8a5a12; border-radius: 8px; padding: 7px 9px; font-size: 12px; margin-bottom: 8px; line-height: 1.35; }
/* Mismo bloque, ya resuelto: AZUL (otra tarea), a juego con su barra en la Vista horaria. */
.sh-pop-warn.is-ok { background: #e8eefc; border-color: #c3d3f0; color: #2f4d8f; }
.sh-pop-warn.is-ok b { color: #21396d; }
/* El detalle libre va en su propia línea: es la letra pequeña del aviso, no parte de la frase. */
.sh-pop-warn-note { display: block; margin-top: 3px; opacity: .8; font-size: 11px; }
/* Lo que se va a registrar, dicho sin ambigüedad antes de elegir el motivo. */
.sh-pres-claim { display: flex; gap: 6px; align-items: flex-start; background: #e8eefc; border: 1px solid #c3d3f0;
  color: #2f4d8f; border-radius: 8px; padding: 7px 9px; font-size: 12px; line-height: 1.35; }
.sh-pres-claim > svg { flex: 0 0 auto; margin-top: 1px; }
.sh-pres-claim b { color: #21396d; font-weight: 800; }
/* El icono es un ítem flex fijo; TODO el texto va en un único span (si no, cada <b> sería un ítem flex y el
   aviso se rompía en columnas). */
.sh-pop-warn > svg { flex: 0 0 auto; margin-top: 1px; }
.sh-pop-warn-txt { flex: 1; min-width: 0; }
.sh-pop-warn b { color: #7a4e0c; font-weight: 800; }
/* DISPONIBILIDAD (guardia en casa): marrón suave, deliberadamente fuera de la escala verde/ámbar/rojo de
   puntualidad — no es un turno que se fiche, así que no debe leerse como "bien/tarde/no ha entrado". */
.sh-hbar.sh-hbar-disp { background: #f0e7dd; color: #7a5c3e; border-color: #d9c5ad; }
.sh-hbar.sh-hbar-disp .sh-hbar-t { opacity: .8; }
/* Sin franja en el cuadrante: se estira al día entero, y el rayado avisa de que la hora no consta. */
.sh-hbar.sh-hbar-disp.is-nohours { border-style: dashed; background:
  repeating-linear-gradient(135deg, #f0e7dd, #f0e7dd 7px, #e8dccd 7px, #e8dccd 14px); }
.sh-pop-head.sh-pop-disp { background: #f0e7dd; color: #7a5c3e; }
/* GUARDIA DE DÍA: acude a NUESTRA base, no a un centro de Amazon. Misma familia marrón que la guardia de
   noche (es el mismo equipo) pero llena y con filete: es jornada de trabajo, no localización desde casa.
   Fuera de la escala de puntualidad a propósito: nadie ficha en la base, así que no hay nada que juzgar. */
.sh-hbar.sh-hbar-guard { background: #e6d8c8; color: #6b4e30; border-color: #cbb193; border-left: 4px solid #b08968; }
.sh-hbar.sh-hbar-guard .sh-hbar-t { opacity: .8; }

/* Trafico diario - vista horaria de conductores de viajes.
   Modulo consultivo: prefijo th/traffic-hourly para no interferir con Shunter ni con la tabla normal. */
.traffic-hourly-open {
  background: #17365d !important;
  border-color: #315d91 !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,.12), 0 1px 2px rgba(13, 35, 64, .18);
}
.traffic-hourly-open:hover { background: #224b7d !important; color: #fff !important; }
#trafficHourlyView {
  min-height: calc(100vh - 120px);
}
.traffic-hourly-root {
  width: min(1600px, calc(100vw - 32px));
  margin: 14px auto 24px;
}
.traffic-hourly-card {
  width: 100%;
  min-height: calc(100vh - 188px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.th-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.th-toolbar, .th-filters, .th-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.th-toolbar {
  padding: 10px 12px;
  background: #f6f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.th-toolbar input[type="date"], .th-filters input, .th-filters select {
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 9px;
  font: inherit;
  background: #fff;
  min-width: 150px;
}
.th-mode button.active {
  background: #17365d;
  color: #fff;
  border-color: #17365d;
}
.th-next .ic { transform: rotate(180deg); }
.th-filters {
  padding: 8px 0 0;
}
.th-filters #thSearch { flex: 1 1 260px; }
.th-summary {
  margin-top: 10px;
  padding: 9px 12px;
  background: #fbf7ef;
  border: 1px solid #ead2b5;
  border-radius: 8px;
  color: #594127;
}
.th-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(180,116,55,.2);
  font-size: 12px;
  font-weight: 700;
}
.th-summary b { font-size: 16px; color: #1d3352; }
.th-summary .is-warn { background: #fff0e5; border-color: #e7b27c; color: #9a4d0c; }
.th-summary small { margin-left: auto; color: var(--muted); font-weight: 700; }
.th-wrap {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: #fff;
  flex: 1 1 auto;
}
.th-ruler, .th-row {
  display: grid;
  grid-template-columns: 210px minmax(980px, 1fr);
  min-width: 1190px;
}
.th-ruler {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f3f6fa;
  border-bottom: 1px solid var(--line);
  min-height: 42px;
}
.th-driver {
  padding: 9px 12px;
  border-right: 1px solid var(--line);
  background: #fbfcfe;
  overflow: hidden;
}
.th-driver b {
  display: block;
  font-size: 12px;
  line-height: 1.15;
  color: #1f2f45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-driver small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-track {
  position: relative;
  min-height: 42px;
  background-image: linear-gradient(to right, rgba(75, 103, 140, .14) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.th-row { border-bottom: 1px solid var(--line); }
.th-row:hover .th-driver { background: #f2f7fb; }
.th-day-band {
  position: absolute;
  top: 0;
  height: 18px;
  padding-left: 6px;
  border-left: 1px solid rgba(39, 68, 106, .25);
  color: #233a57;
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
.th-tick {
  position: absolute;
  bottom: 5px;
  transform: translateX(-50%);
  color: #667895;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.th-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d1242f;
  box-shadow: 0 0 0 1px rgba(209,36,47,.18);
  z-index: 2;
}
.th-bar {
  position: absolute;
  height: 36px;
  border: 1px solid #c8d8eb;
  border-left: 4px solid #5b8bc5;
  border-radius: 7px;
  background: #eaf3ff;
  color: #17365d;
  padding: 4px 7px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(20, 48, 80, .08);
}
.th-bar:hover { filter: brightness(.98); box-shadow: 0 2px 5px rgba(20,48,80,.18); z-index: 4; }
.th-bar span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.th-bar b, .th-bar em {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.th-bar b { font-size: 11px; line-height: 1.05; }
.th-bar em { font-size: 9.5px; font-style: normal; opacity: .76; font-weight: 700; }
.th-bar.is-running { background: #e5f4ec; border-color: #b6ddc6; border-left-color: #1f9b61; color: #175a39; }
.th-bar.is-done { background: #f0f4f8; border-color: #d7e0ea; border-left-color: #8a99aa; color: #4b5c70; }
.th-empty {
  padding: 24px;
  color: var(--muted);
  font-weight: 700;
}
.th-note {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 768px), (max-height: 480px) {
  .traffic-hourly-root {
    width: calc(100vw - 16px);
    margin: 8px auto 16px;
  }
  .traffic-hourly-card {
    min-height: 0;
  }
  .th-toolbar, .th-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .th-toolbar .th-mode, .th-filters #thSearch { grid-column: 1 / -1; }
  .th-toolbar input[type="date"], .th-filters input, .th-filters select, .th-toolbar button {
    width: 100%;
    min-width: 0;
  }
  .th-summary small { flex-basis: 100%; margin-left: 0; }
  .th-ruler, .th-row { grid-template-columns: 150px minmax(720px, 1fr); min-width: 870px; }
  .th-driver { padding: 8px; }
}
.sh-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #14b8a6; box-shadow: 0 0 0 2px rgba(20,184,166,.25); flex: 0 0 auto; animation: shpulse 1.8s ease-in-out infinite; }
@keyframes shpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sh-live-dot { animation: none; } }
/* Banda del EQUIPO DE DISPONIBILIDADES: cuelga de su provincia, no de un centro. Fondo levemente
   distinto y línea de puntos arriba para que se lea como "esto no es un centro". */
.sh-hh-row.is-equipo .sh-hh-cty { background: #f3f0ec; }
.sh-hh-row.is-equipo .sh-hh-cty b { color: #7a5c3e; }
.sh-hh-row.is-equipo .sh-hh-track { background-color: #fbfaf8; }
.sh-hh-row.is-equipo { border-top-style: dashed; }
/* Los del equipo que hoy no tienen nada en el cuadrante: chips al final de la banda, sin barra. */
.sh-eq-free { position: absolute; right: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px; z-index: 2; }
.sh-eq-chip { font-size: 10px; font-weight: 700; color: #98a6b8; background: #fff; border: 1px dashed #d7dee8;
  border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
/* DESPLEGADO en un centro: su barra está en el carril de ese centro (donde se busca), y aquí queda el
   rastro de dónde está. Marrón del equipo, con línea continua: no es "sin nada", es "está fuera". */
.sh-eq-chip.is-deployed { color: #7a5a30; border: 1px solid #d8c3a0; background: #fdf8f0; }
.sh-eq-chip.is-deployed svg { vertical-align: -1px; margin-right: 1px; }
.sh-hh-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #d9484f; z-index: 1; box-shadow: 0 0 0 1px rgba(217, 72, 79, .2); }
.sh-hh-empty { position: absolute; left: 9px; top: 5px; font-size: 10px; color: #b8c2d0; }
/* Ventanita de detalle al clicar una banda */
.sh-pop { position: fixed; z-index: 200; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #cdd7e5;
  border-radius: 11px; box-shadow: 0 14px 40px rgba(20, 50, 90, .22); overflow: hidden; }
/* Entrada del desplegable: nace desde su esquina superior izquierda (justo donde está la barra que has
   pulsado), así se entiende de dónde sale. 150 ms y ease-out: se percibe fluido, no lento. Solo
   transform/opacity → no reflow, la parrilla no se resiente. */
@keyframes sh-pop-in { from { opacity: 0; transform: scale(.96) translateY(-5px); } to { opacity: 1; transform: none; } }
.sh-pop { transform-origin: top left; animation: sh-pop-in .15s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .sh-pop { animation: none; } }
.sh-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 9px 12px; font-size: 13px; }
.sh-pop-head b { font-weight: 800; color: #1f2c3a; }
/* Nombre + teléfono clicable debajo: para llamar sin salir de la vista. */
.sh-pop-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sh-pop-tel { font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.sh-pop-tel .tel-link { color: inherit; opacity: .9; }
.sh-pop-tel.is-none { font-weight: 600; opacity: .55; font-style: italic; }
.sh-pop-head.sh-st-ok { background: #e5f4ec; } .sh-pop-head.sh-st-ok b { color: #1f7a4d; }
.sh-pop-head.sh-st-late { background: #fdf2dc; } .sh-pop-head.sh-st-late b { color: #9a6a12; }
.sh-pop-head.sh-st-noshow { background: #fbe7e5; } .sh-pop-head.sh-st-noshow b { color: #b23b31; }
.sh-pop-head.sh-st-pending { background: #eef2f7; } .sh-pop-head.sh-st-pending b { color: #56657a; }
.sh-pop-head.sh-st-excused { background: #e9f0fb; } .sh-pop-head.sh-st-excused b { color: #3660a8; }
.sh-pop-head.sh-pr-live { background: #e3f4f1; } .sh-pop-head.sh-pr-live b { color: #147a6b; }
.sh-pop-x { border: none; background: rgba(255, 255, 255, .5); color: #56657a; border-radius: 6px; cursor: pointer; padding: 2px 4px; display: inline-flex; }
.sh-pop-x:hover { background: rgba(255, 255, 255, .9); }
.sh-pop-body { padding: 4px 12px 10px; }

/* Trafico · Vista horaria v2.
   Replica la lectura temporal de Shunter: regla de horas, columna fija, barras por carril
   y detalle al pulsar. Dia agrupa por conductor; semana/mes agrupan por fecha. */
#trafficHourlyView {
  min-height: calc(100vh - 88px);
  background: #eef2f6;
  overflow-x: hidden;
}
body.traffic-hourly-active .topbar { display: none !important; }
.traffic-hourly-root {
  width: min(1760px, calc(100vw - 22px));
  margin: 10px auto 18px;
}
.traffic-hourly-card {
  width: 100%;
  min-height: calc(100vh - 118px);
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(25, 48, 77, .07);
  overflow: hidden;
}
.th-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.th-head > div:first-child { min-width: 0; }
.th-head > div:first-child > span {
  color: #58708f;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.th-head h2 {
  margin: 2px 0 0;
  color: #1d2e44;
  font-size: 21px;
  line-height: 1.15;
}
.th-head p { margin: 3px 0 0; color: #687a91; font-size: 12.5px; }
.th-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.th-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #dce4ee;
  border-radius: 7px;
  background: #f5f8fb;
}
.th-date-nav { display: flex; align-items: center; gap: 6px; }
.th-controls button { min-height: 32px; }
.th-controls input[type="date"] {
  width: 145px;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid #cbd7e5;
  border-radius: 6px;
  background: #fff;
  padding: 4px 8px;
  font: inherit;
  color: #273a52;
}
.th-controls .th-refresh { margin-left: auto; }
.th-mode button.active {
  border-color: #234f7f;
  background: #173b65;
  color: #fff;
}
.th-next .ic { transform: rotate(180deg); }
.th-filters {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(155px, 1fr));
  gap: 7px;
  padding: 8px 0 0;
}
.th-filters input, .th-filters select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid #cbd7e5;
  border-radius: 6px;
  background: #fff;
  padding: 5px 8px;
  color: #273a52;
  font: inherit;
  font-size: 12px;
}
.th-filters select:disabled { background: #edf1f5; color: #7a8798; }
.th-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid #e1d1bb;
  border-radius: 7px;
  background: #fbf7f0;
  color: #594a39;
}
.th-summary > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(155, 112, 63, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 10.5px;
  font-weight: 700;
}
.th-summary b { color: #173b65; font-size: 14px; }
.th-summary .is-warn { border-color: #e2a267; background: #fff0e3; color: #91490c; }
.th-summary > small {
  margin-left: auto;
  color: #6b5a46;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: capitalize;
}
.th-summary .th-wemob-state {
  border-color: #d1d8e1;
  background: #eef2f6;
  color: #6d7887;
}
.th-summary .th-wemob-state.is-on {
  border-color: #abd8ce;
  background: #e6f5f1;
  color: #147a6b;
}
.th-summary .th-wemob-state i { display: inline-block; }
.th-error {
  margin-top: 8px;
  border: 1px solid #ecc4bf;
  border-radius: 6px;
  background: #fcebea;
  color: #9b332c;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 700;
}
.th-wrap {
  max-height: calc(100vh - 330px);
  min-height: 250px;
  margin-top: 8px;
  overflow: auto;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #fff;
}
.th-ruler, .th-row {
  display: grid;
  grid-template-columns: 190px minmax(1120px, 1fr);
  min-width: 1310px;
}
.th-ruler {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 26px;
  border-bottom: 1px solid #dce4ee;
  background: #fff;
}
.th-row { border-top: 2px solid #d6dee8; }
.th-rows .th-row:first-child { border-top: none; }
.th-row.is-today > .th-row-label { background: #fff6df; }
.th-row-label {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-right: 1px solid #dce4ee;
  background: #f6f8fb;
  padding: 7px 9px;
}
.th-ruler .th-row-label { z-index: 7; background: #fff; }
.th-row-label b {
  display: block;
  overflow: hidden;
  color: #263a52;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
}
.th-row-label small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #718198;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-track {
  position: relative;
  min-height: 26px;
  background-color: #fff;
  background-image: linear-gradient(90deg, #e8edf3 1px, transparent 1px);
  background-position: left top;
  background-repeat: repeat-x;
}
.th-tick {
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  color: #8391a3;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.th-now {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 2px;
  background: #d9484f;
  box-shadow: 0 0 0 1px rgba(217, 72, 79, .18);
}
.th-bar {
  position: absolute;
  height: 36px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #bed0e4;
  border-left: 4px solid #4379b4;
  border-radius: 6px;
  background: #e8f1fb;
  color: #173b65;
  padding: 3px 7px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.th-bar:hover { z-index: 5; filter: brightness(.97); box-shadow: 0 2px 5px rgba(23, 59, 101, .17); }
.th-bar-main { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.th-bar b, .th-bar em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.th-bar b { font-size: 10.5px; line-height: 1.08; }
.th-bar em { font-size: 9px; font-style: normal; font-weight: 700; opacity: .76; }
.th-bar.is-running { border-color: #a8d5bd; border-left-color: #198654; background: #e5f4ec; color: #19623f; }
.th-bar.is-done { border-color: #d3dce7; border-left-color: #7f8da0; background: #eff3f7; color: #526175; }
.th-bar.is-historical { border-color: #e0bd91; border-left-color: #b66f2f; background: #fff3e3; color: #75461c; }
.th-bar.is-long { border-right-style: dashed; }
.th-live {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #9dd5ca;
  border-left: 4px solid #159583;
  border-radius: 6px;
  background: #e2f4f0;
  color: #116c60;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.th-live b { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; }
.th-empty-inline {
  position: absolute;
  top: 8px;
  left: 9px;
  color: #a8b3c1;
  font-size: 10px;
}
.th-loading {
  padding: 26px 14px;
  color: #68798e;
  font-size: 12px;
  font-weight: 700;
}
.th-foot {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  padding: 7px 2px 0;
  color: #6c7b8e;
  font-size: 10.5px;
}
.th-foot span { display: inline-flex; align-items: center; gap: 5px; }
.th-legend-dot { width: 10px; height: 10px; border-radius: 3px; background: #e8f1fb; border-left: 3px solid #4379b4; }
.th-legend-dot.is-live { background: #e2f4f0; border-left-color: #159583; }
.th-legend-dot.is-hist { background: #fff3e3; border-left-color: #b66f2f; }
.th-detail-pop {
  position: fixed;
  z-index: 240;
  width: 360px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  border: 1px solid #c7d3e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 15px 42px rgba(20, 43, 72, .24);
  animation: sh-pop-in .15s cubic-bezier(.16, 1, .3, 1);
}
.th-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid #dce4ee;
  background: #eef4fa;
}
.th-detail-head > div { min-width: 0; }
.th-detail-head small { display: block; color: #6d8098; font-size: 9px; font-weight: 800; }
.th-detail-head b { display: block; overflow: hidden; color: #223952; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.th-detail-head button {
  display: inline-flex;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #617287;
  padding: 3px;
}
.th-detail-head button:hover { background: #dfe8f2; }
.th-detail-body { padding: 10px 11px 11px; }
.th-detail-body h3 { margin: 0; color: #1f3046; font-size: 14px; }
.th-detail-route { margin: 3px 0 9px; color: #5f7086; font-size: 11.5px; line-height: 1.35; }
.th-detail-body dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
}
.th-detail-body dl > div { min-width: 0; border: 1px solid #e1e7ef; border-radius: 6px; padding: 6px 7px; background: #fafbfd; }
.th-detail-body dt { color: #77879b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.th-detail-body dd { margin: 2px 0 0; overflow-wrap: anywhere; color: #283b52; font-size: 11px; font-weight: 700; }
.th-detail-note { margin: 8px 0 0; border-left: 3px solid #c17a38; background: #fff7ec; color: #75502c; padding: 6px 8px; font-size: 10.5px; line-height: 1.3; }
.th-detail-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }

@media (max-width: 900px), (max-height: 500px) {
  .traffic-hourly-root { width: calc(100vw - 12px); margin: 6px auto 12px; }
  .traffic-hourly-card { min-height: 0; padding: 9px; }
  .th-head { align-items: stretch; flex-direction: column; gap: 8px; }
  .th-head-actions { justify-content: space-between; }
  .th-controls { display: flex; align-items: stretch; flex-direction: column; }
  .th-controls .th-mode { display: grid; grid-template-columns: repeat(3, 1fr); }
  .th-date-nav { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px auto; min-width: 0; }
  .th-date-nav input { width: 100%; min-width: 0; }
  .th-controls .th-refresh { width: 100%; margin-left: 0; }
  .th-filters { grid-template-columns: 1fr 1fr; }
  .th-filters #thSearch { grid-column: 1 / -1; }
  .th-summary > small { order: -1; width: 100%; margin-left: 0; }
  .th-wrap { max-height: none; min-height: 280px; }
  .th-ruler, .th-row { grid-template-columns: 145px minmax(900px, 1fr); min-width: 1045px; }
  .th-row-label { padding: 6px 7px; }
  .th-detail-pop { width: min(360px, calc(100vw - 20px)); }
}
.sh-pop-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #f0f3f7; font-size: 12px; }
.sh-pop-row:last-child { border-bottom: none; }
.sh-pop-row > span { color: #8a98ab; white-space: nowrap; }
.sh-pop-row > b { color: #2a3b4d; font-weight: 700; text-align: right; }
/* Causa de un retraso / turno sin cubrir dentro de la ventanita: el motivo en peso normal (es texto,
   no un dato numérico) y un botón discreto para anotarlo sin salir de la Vista horaria. */
.sh-pop-why { font-weight: 400; }
.sh-pop-why.is-todo { color: #b06055; font-style: italic; }
.sh-pop-mini { font-size: 11px; font-weight: 600; padding: 1px 7px; border: 1px solid var(--line, #d8dee6);
  border-radius: 10px; background: var(--surface-soft, #f4f6f9); color: #34506f; cursor: pointer; white-space: nowrap; }
.sh-pop-mini:hover { border-color: #b9cdea; background: #eef4fc; }

/* PRESENCIA (realidad física WeMob) */
.sh-pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sh-pr-card { border: 1px solid var(--border, #e6ebf1); border-radius: 11px; background: var(--surface, #fff); overflow: hidden; }
.sh-pr-card.sh-pr-un { border-style: dashed; background: #fbfcfe; }
.sh-pr-head { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #f6f8fb; border-bottom: 1px solid #eef2f7; font-size: 13px; color: #2a3b4d; }
.sh-pr-head b { font-weight: 800; }
.sh-pr-head small { color: #98a6b8; font-weight: 600; font-size: 10px; }
.sh-pr-head .sh-pr-n { margin-left: auto; background: var(--brand, #8a5a2b); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
.sh-pr-un .sh-pr-head .sh-pr-n { background: #9aa7b8; }
.sh-pr-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #f4f6f9; font-size: 12px; flex-wrap: wrap; }
.sh-pr-row:last-child { border-bottom: none; }
.sh-pr-drv { color: #2a3b4d; font-weight: 700; flex: 1 1 auto; min-width: 120px; }
.sh-pr-veh { color: #46586c; font-weight: 700; font-variant-numeric: tabular-nums; background: #eef2f7; border-radius: 5px; padding: 1px 6px; }
.sh-pr-since { color: #7a889c; font-variant-numeric: tabular-nums; }
.sh-pr-dist { color: #1f7a4d; font-weight: 700; }
/* Dos geo-cercas que se pisan = una ubicación mal puesta. Se avisa arriba de Presencia. */
.sh-pr-warn { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; padding: 8px 11px;
  background: #fdf3e3; border: 1px solid #e8c98f; border-left: 4px solid #d08c1e; border-radius: 8px;
  color: #6b4a12; font-size: 12.5px; line-height: 1.45; }
.sh-pr-warn svg { flex: none; margin-top: 1px; }
/* Geo-cercas solapadas: el centro lo ha desempatado el cuadrante, no la distancia. */
.sh-pr-tie { color: #8a5a2b; background: #fdf3e3; border: 1px solid #e8d3ae; border-radius: 5px;
  padding: 0 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; cursor: help; }
.sh-pr-map { color: var(--brand, #8a5a2b); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; font-weight: 700;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; }
.sh-pr-map:hover { text-decoration: underline; }
/* Matrícula CLICABLE: abre la ubicación en WeMob (copia la matrícula para pegarla en el buscador). */
.sh-plate-wemob { font-weight: 700; font-variant-numeric: tabular-nums; background: #eef2f7; color: #2a3b4d;
  border: 1px solid #dbe3ee; border-radius: 5px; padding: 1px 6px; cursor: pointer; font-family: inherit; font-size: inherit; }
.sh-plate-wemob:hover { background: #e3edfb; border-color: #b9cdea; color: #1f5fb0; text-decoration: underline; }

.sh-shifts-editor { margin-top: 14px; border: 1px solid var(--border, #e6ebf1); border-radius: 10px; background: #fbfcfe; padding: 4px 12px; }
.sh-shifts-editor summary { cursor: pointer; font-weight: 700; font-size: 12.5px; color: #46586c; padding: 8px 2px; list-style: none; display: flex; align-items: center; gap: 7px; }
.sh-shifts-editor summary .ic { color: #9aa7b8; }
.sh-shifts-list { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 10px; }
.sh-shift-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #fff; border: 1px solid #eef2f7; border-radius: 8px; }
.sh-shift-name { flex: 1; font-weight: 700; color: #2a3b4d; font-size: 12.5px; }
.sh-shift-time { font-size: 12px; color: #6b7a8d; font-variant-numeric: tabular-nums; }
.sh-shift-add { display: flex; align-items: center; gap: 6px; padding: 4px 0 12px; flex-wrap: wrap; }
.sh-dash { color: #9aa7b8; }
.sh-in { border: 1px solid #cfd8e3; border-radius: 7px; padding: 6px 9px; font-size: 12.5px; min-height: 30px; background: #fff; color: #2a3b4d; }
.sh-in:focus { outline: none; border-color: var(--brand, #8a5a2b); box-shadow: 0 0 0 3px rgba(138,90,43,.12); }
.sh-in-time { width: 66px; text-align: center; font-variant-numeric: tabular-nums; }
.sh-shift-add .sh-in:first-child { flex: 1; min-width: 160px; }

.sh-entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sh-entry-head h3 { margin: 0; font-size: 15px; color: var(--ink, #1f2c3a); display: flex; align-items: center; gap: 8px; }
.sh-entry-head .ic { color: var(--brand, #8a5a2b); }
.sh-sum { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sh-sum-card { flex: 1; min-width: 110px; border: 1px solid var(--border, #e6ebf1); border-left: 3px solid #cbd6e2; border-radius: 10px;
  background: var(--surface, #fff); padding: 10px 14px; }
.sh-sum-card b { display: block; font-size: 22px; font-weight: 800; color: var(--ink, #1f2c3a); line-height: 1; }
.sh-sum-card span { font-size: 11.5px; color: #7a889c; font-weight: 600; }
.sh-sum-card.sh-st-pending { border-left-color: #9aa7b8; }
.sh-sum-card.sh-st-ok { border-left-color: #2f8f5b; }
.sh-sum-card.sh-st-noshow { border-left-color: #c0453b; }

.sh-entry-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sh-entry-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #8a98ab; padding: 8px 10px; border-bottom: 1px solid #e6ebf1; }
.sh-entry-table td { padding: 9px 10px; border-bottom: 1px solid #f0f3f7; color: #2c3e5c; }
.sh-entry-table tr:hover td { background: #fafbfd; }
.sh-th-act, .sh-td-act { text-align: right; white-space: nowrap; }
.sh-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sh-st-pending.sh-pill { background: #eef2f7; color: #6b7a8d; }
.sh-st-ok.sh-pill { background: #e5f4ec; color: #1f7a4d; }
.sh-st-late.sh-pill { background: #fdf2dc; color: #9a6a12; }
.sh-st-noshow.sh-pill { background: #fbe7e5; color: #b23b31; }
.sh-st-excused.sh-pill { background: #e9f0fb; color: #3660a8; }
.sh-cov-chip.sh-st-ok { background: #e5f4ec; color: #1f7a4d; }
.sh-cov-chip.sh-st-late { background: #fdf2dc; color: #9a6a12; }
.sh-cov-chip.sh-st-noshow { background: #fbe7e5; color: #b23b31; }
.sh-checked { color: #5c6b7e; font-weight: 600; margin-right: 6px; }
.sh-btn { border: 1px solid #d6deea; background: #fff; color: #46586c; font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 7px; cursor: pointer; margin-left: 5px; }
.sh-btn:hover { filter: brightness(.97); }
/* ── Micro-interacciones de los botones de la barra (movimiento CON PROPÓSITO) ──────────────────────
   Criterios: solo `transform`/`opacity` (van por GPU, no repintan layout), 60-200 ms y ease-out. Lo justo
   para que el botón "responda" y para decir "estoy trabajando"; nada decorativo. */
.sh-btn { transition: transform .13s ease-out, filter .13s ease-out; }
.sh-btn:active:not(:disabled) { transform: scale(.96); transition-duration: .06s; }   /* acuse de pulsación */
.sh-btn:disabled { opacity: .6; cursor: default; }
/* Estado OCUPADO: el icono gira mientras dura la sincronización (2-3 s), en vez de quedarse gris y mudo. */
@keyframes sh-spin { to { transform: rotate(360deg); } }
.sh-btn.is-busy svg { animation: sh-spin .7s linear infinite; transform-origin: 50% 50%; }
/* Quien tenga el sistema con "reducir movimiento" no ve giros ni escalados: solo el cambio de opacidad. */
@media (prefers-reduced-motion: reduce) {
  .sh-btn { transition: none; }
  .sh-btn:active:not(:disabled) { transform: none; }
  .sh-btn.is-busy svg { animation: none; opacity: .55; }
}
.sh-btn-ok { border-color: #b6ddc6; color: #1f7a4d; }
/* ATurnos = rey del control de entrada: botón con acento verde para distinguirlo del respaldo WeMob. */
.sh-btn-aturnos { border-color: #b6ddc6; color: #1f7a4d; background: #f2fbf6; }
.sh-btn-aturnos:disabled { opacity: .55; cursor: default; }
.sh-btn-ok:hover { background: #e5f4ec; }
.sh-btn-late { border-color: #ecd6a1; color: #9a6a12; }
.sh-btn-no { border-color: #ecc3bd; color: #b23b31; }
.sh-btn-no:hover { background: #fbe7e5; }
.sh-btn-undo, .sh-btn-snooze { color: #8a98ab; }
.sh-empty { text-align: center; color: #8a98ab; padding: 40px 10px; }
.sh-empty .ic { color: #cbd6e2; }
.sh-empty p { margin: 8px 0 0; font-size: 13px; }

.sh-overlay { position: fixed; inset: 0; background: rgba(20,30,45,.42); display: grid; place-items: center; z-index: 4000; padding: 16px; }
.sh-modal { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: var(--surface, #fff); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(20,30,45,.28); padding: 16px 18px; }
.sh-modal-due { max-width: 540px; }
.sh-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sh-modal-head h3 { margin: 2px 0 0; font-size: 16px; color: var(--ink, #1f2c3a); }
.sh-pick-search { width: 100%; margin-bottom: 10px; }
.sh-pick-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #98a6b8; font-weight: 700; margin: 8px 0 5px; }
.sh-pick-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-pick { border: 1px solid #d6deea; background: #f6f8fb; color: #2c3e5c; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.sh-pick:hover { border-color: var(--brand, #8a5a2b); background: #fff; }
.sh-pick.is-used { opacity: .5; cursor: default; }
.sh-due-list { display: flex; flex-direction: column; gap: 8px; }
.sh-due-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid #ecd88f; border-left: 3px solid #e0a83e; background: #fff9ec; border-radius: 10px; padding: 10px 12px; }
.sh-due-info b { color: #2a3b4d; }
.sh-due-info span { display: block; font-size: 12px; color: #6b7a8d; }
.sh-due-late { color: #b23b31; font-style: normal; font-weight: 700; }
.sh-due-act { display: flex; gap: 6px; flex-wrap: wrap; }
.sh-modal-foot { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ── Pestaña PERSONAL (roster estanco + roles + ausencias) ── */
.sh-ptoolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* Buscador de personal: con 95 personas los chips no bastan (busca por nombre, telefono o centro). */
.sh-psearch-row { display: flex; gap: 8px; align-items: center; }
.sh-psearch { flex: 0 1 340px; max-width: 340px; }
.sh-chipf-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-chipf { border: 1px solid #d6deea; background: #f6f8fb; color: #46586c; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.sh-chipf:hover { border-color: var(--brand, #8a5a2b); background: #fff; }
.sh-chipf.is-active { background: var(--brand, #8a5a2b); border-color: var(--brand, #8a5a2b); color: #fff; }
/* 2º nivel: centros de la provincia elegida — sangrado + acento, chips un punto más discretos (jerarquía por color) */
.sh-chipf-sub { padding-left: 14px; margin-left: 2px; border-left: 2px solid #e4c9a8; }
.sh-chipf-sub .sh-chipf { border-radius: 7px; font-size: 11.5px; padding: 4px 10px; background: #eef2f7; font-weight: 700; }
.sh-chipf-sub .sh-chipf:hover { background: #fff; border-color: var(--brand, #8a5a2b); }
.sh-chipf-sub .sh-chipf.is-active { background: var(--brand, #8a5a2b); border-color: var(--brand, #8a5a2b); color: #fff; }
.sh-psum { font-size: 12.5px; color: #6b7a8d; display: flex; align-items: center; gap: 6px; }
.sh-psum b { color: var(--ink, #1f2c3a); font-weight: 800; }
/* Acción a la derecha (filtros a la izquierda, acciones a la derecha). */
.sh-padd { margin-left: auto; }
.sh-modal-newperson { max-width: 560px; }
/* Cotejo de CENTROS con ATurnos: tabla comparativa; solo se resaltan las filas con algo que añadir. */
.sh-modal-centers { max-width: 1000px; width: min(1000px, calc(100vw - 32px)); }
.sh-cc-intro { font-size: 12.5px; color: #64748b; line-height: 1.5; margin: 0 0 8px; }
.sh-cc-sum { font-size: 12.5px; font-weight: 700; color: #33475b; margin: 0 0 8px; }
.sh-cc-wrap { max-height: 52vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.sh-cc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sh-cc-table th { position: sticky; top: 0; background: #f6f8fb; text-align: left; font-weight: 700; color: #52606d;
  padding: 6px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.sh-cc-table td { padding: 5px 8px; border-bottom: 1px solid #eef2f6; vertical-align: top; }
.sh-cc-table tr.sh-cc-dif td { background: #fdf6e9; }
.sh-cc-add { font-weight: 800; color: #1d6b3f; }
.sh-cc-prov { font-size: 10.5px; font-weight: 700; color: #a24d0b; background: #fde2c8; border-radius: 5px; padding: 1px 5px; }
.sh-cc-rest > summary { cursor: pointer; font-size: 12px; color: #64748b; padding: 6px 8px; }
/* Pegar las "otras localizaciones" (su API no las da): caja plegable dentro del mismo cotejo. */
.sh-cc-paste { margin-top: 10px; border-top: 1px dashed #dbe3ec; padding-top: 8px; }
.sh-cc-paste > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #33475b; display: flex; align-items: center; gap: 6px; }
.sh-cc-paste code { background: #f1f5f9; border-radius: 4px; padding: 0 4px; font-size: 11.5px; }
.sh-cc-ta { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }
.sh-cc-paste-foot { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.sh-cc-paste-foot .sh-muted { font-size: 12px; line-height: 1.5; }
.sh-newperson-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.sh-newperson-foot .sh-muted { font-size: 12px; }
.sh-pwrap { display: flex; flex-direction: column; gap: 14px; }
.sh-pgroup-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8a98ab; font-weight: 800;
  display: flex; align-items: center; gap: 6px; margin: 2px 0 7px; }
.sh-pgroup-head small { background: #eef2f7; color: #6b7a8d; border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.sh-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.sh-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
  border: 1px solid var(--border, #e6ebf1); border-radius: 10px; background: var(--surface, #fff); padding: 9px 12px; }
.sh-prow:hover { border-color: var(--brand, #8a5a2b); box-shadow: 0 2px 10px rgba(20,30,45,.06); }
.sh-prow:focus { outline: 2px solid rgba(138,90,43,.35); outline-offset: 1px; }
.sh-prow-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sh-prow-txt { min-width: 0; }
.sh-prow-txt b { display: block; font-size: 13px; color: var(--ink, #1f2c3a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Segunda línea de la fila de Personal: CENTROS (se recortan) + TELÉFONO (fijo, nunca se recorta). Antes
   era un solo texto con `max-width:210px` + elipsis: al ensanchar la lista de centros —o al estrechar la
   ventana, que mete más columnas— el número desaparecía y solo quedaba el icono del teléfono. */
.sh-prow-txt small { display: flex; align-items: baseline; font-size: 11px; color: #8a98ab; white-space: nowrap;
  min-width: 0; max-width: 100%; }
.sh-prow-cen { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sh-prow-tel { flex: none; }
.sh-prow-tel::before { content: "·"; margin: 0 5px; color: #c3ccd8; }
.sh-role-badge { flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 6px; }
.sh-role-shunter { background: #eef2f7; color: #5c6b7e; }
.sh-role-comodin { background: #eaf6ee; color: #2f7d4f; }
.sh-role-formador { background: #e9f0fb; color: #3660a8; }
.sh-role-coord { background: #efeafc; color: #6a45b8; }
.sh-role-disp { background: #fdf2dc; color: #9a6a12; }
.sh-st-pill { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sh-st-pill.sh-st-ok { background: #e5f4ec; color: #1f7a4d; }
.sh-st-pill.sh-st-noshow { background: #fbe7e5; color: #b23b31; }
.sh-st-pill.sh-st-inactive { background: #eef2f7; color: #6b7a8d; }
/* Ficha de persona (modal ancho a 3 columnas) */
/* Ficha de personal APAISADA: tres secciones apiladas, cada una a lo ancho. Antes eran tres columnas y
   la de centros no cabía (scroll interno propio); así entra todo de un vistazo. */
/* REJILLA DE 4 COLUMNAS en toda la ficha (petición del jefe): campos y centros caen siempre en la misma
   cuadrícula, así no quedan huecos raros ni filas a medias. La lista de personas es otra cosa y mantiene
   sus columnas automáticas. */
.sh-modal-person { max-width: 1000px; }
.sh-person-body { display: flex; flex-direction: column; gap: 8px; }
.sh-person-sec { border: 1px solid #eef2f7; border-radius: 9px; padding: 8px 10px; background: #fcfdfe; }
.sh-person-sec > .sh-sub { margin-bottom: 6px; }
/* Documentación shunter: reutiliza las clases del sistema de conductores (ddoc-, dcombo-, doc-badge). Las 5
   filas de tipo se disponen en rejilla (2 columnas en ancho) para no alargar la ficha; el escáner combinado
   y el texto de ayuda ocupan todo el ancho. */
.sh-docs-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.sh-docs-body > .ddoc-section-hint, .sh-docs-body > .dcombo-launch { grid-column: 1 / -1; }
.sh-docs-body .ddoc-row { border: 1px solid #eef2f7; border-radius: 8px; padding: 7px 9px; background: #fff; margin: 0; }
@media (max-width: 760px) { .sh-docs-body { grid-template-columns: 1fr; } }
.sh-person-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 10px; align-items: end; }
/* Los 4 campos, uno por columna, en UNA fila. (El email tuvo `span 2` un rato y empujaba a una fila de
   más: 4 campos en una rejilla de 4 no caben si uno ocupa dos.) */
.sh-person-fields .sh-f-wide { grid-column: auto; }
/* La casilla y el botón comparten la última fila: la casilla a la izquierda, el botón pegado a la derecha. */
.sh-person-fields .sh-f-chk { grid-column: span 2; }
.sh-person-fields .sh-f-save { grid-column: 4; justify-self: end; }
.sh-person-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sh-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #98a6b8; font-weight: 800; margin-bottom: 2px; }
.sh-f { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: #6b7a8d; font-weight: 600; }
.sh-f-chk { flex-direction: row; align-items: center; gap: 7px; flex: 0 0 auto !important; max-width: none !important; white-space: nowrap; }
/* GOTCHA conocido: la regla global `input { width: 100% }` estira también los checkbox dentro de un flex
   y salen como un cuadro enorme con la etiqueta partida (mismo caso que el modal de albaranes). */
.sh-f-chk input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
/* Centros: FLUYEN, no van en rejilla. Con 4 columnas fijas el hueco era peor, no mejor: la altura de la
   fila la marcaba Madrid (5 centros) y Barcelona/Castellón/Murcia quedaban con un agujero debajo, y
   Sevilla caía sola dejando 3 columnas vacías. Fluyendo, los 11 centros entran en 2 líneas justas.
   La etiqueta de provincia va EN LÍNEA con sus centros (no ocupando un renglón propio). */
.sh-elig-wrap { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; }
.sh-elig-prov { display: inline-flex; flex-wrap: nowrap; gap: 4px; align-items: center; padding: 3px 6px;
  border: 1px solid #eef2f7; border-radius: 7px; background: #fff; }
.sh-elig-prov > span { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; color: #98a6b8; text-transform: uppercase; letter-spacing: .04em; }
.sh-elig-chk { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #46586c; border: 1px solid #e6ebf1;
  border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.sh-elig-chk input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.sh-elig-note { display: block; margin-top: 6px; font-size: 10.5px; color: #98a6b8; font-weight: 600; }
/* Ausencias a lo ancho: arriba la lista de episodios y debajo el alta en UNA sola línea. */
/* OJO con el nombre: `.sh-abs-row` YA EXISTE (es cada fila de la lista de ausencias, definida más abajo).
   Reutilizarlo aquí hacía que las dos reglas se pisaran — el contenedor heredaba su borde y su
   `align-items:center` (que en columna encoge la banda a su contenido: el alta se quedaba en 555px y
   rompía en 4 líneas teniendo 1000 libres), y a la vez las filas reales heredaban mi `flex-direction:
   column`. De ahí `sh-abs-panel`, que es solo el envoltorio de la sección. */
.sh-abs-panel { display: block; }
.sh-abs-panel .sh-abs-list { margin-bottom: 0; }
.sh-abs-panel .sh-abs-add { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e6ebf1; align-items: flex-end; }
/* Sin anchos explícitos los controles heredan el `input { width: 100% }` global y cada uno se come una
   línea (era lo lógico cuando esto vivía en una columna estrecha; apaisado hay sitio de sobra). */
.sh-abs-add #shAbsKind { width: 150px; }
.sh-abs-add input[type="date"] { width: 148px; }
.sh-abs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.sh-abs-row { display: flex; align-items: center; gap: 8px; border: 1px solid #eef1f6; border-radius: 8px; padding: 5px 8px; }
.sh-abs-kind { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.sh-absk-sick_leave { background: #fbe7e5; color: #b23b31; }
.sh-absk-vacation { background: #e5f4ec; color: #1f7a4d; }
.sh-absk-permiso { background: #fdf2dc; color: #9a6a12; }
.sh-absk-otro { background: #eef2f7; color: #6b7a8d; }
/* ── Pestaña NOVEDADES (ATN-4): resumen + secciones de ausencias/altas/bajas desde ATurnos ─────────── */
.sh-nov-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.sh-nov-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-nov-kpi { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 78px; padding: 7px 13px; background: #f4f7fb; border: 1px solid #e5ebf2; border-radius: 10px; font-size: 10.5px; color: #7789a0; line-height: 1.15; text-align: center; }
.sh-nov-kpi b { font-size: 19px; font-weight: 800; color: #2c3e50; }
.sh-nov-kpi.kpi-abs b { color: #1f7a4d; }
.sh-nov-kpi.kpi-alta b { color: #2b6cb0; }
.sh-nov-kpi.kpi-baja b { color: #b23b31; }
.sh-nov-src { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #8090a0; }
.sh-nov-src svg { vertical-align: -1px; }
.sh-nov-wrap { display: flex; flex-direction: column; gap: 14px; }
.sh-nov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sh-nov-sec { border: 1px solid #e6ecf3; border-radius: 12px; overflow: hidden; background: #fff; }
.sh-nov-sechead { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #54687d; background: #f6f9fc; border-bottom: 1px solid #eef2f7; }
.sh-nov-sechead svg { color: #8fa1b3; }
.sh-nov-sechead small { margin-left: auto; font-size: 11px; font-weight: 800; color: #7a8ba0; background: #e9eef5; padding: 1px 8px; border-radius: 9px; }
.sh-nov-sec.is-today .sh-nov-sechead { background: #eef7f1; color: #1f7a4d; }
.sh-nov-sec.is-today .sh-nov-sechead svg { color: #1f7a4d; }
.sh-nov-list { display: flex; flex-direction: column; }
.sh-nov-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) auto minmax(92px, 1fr) minmax(120px, 1.2fr); align-items: center; gap: 10px; padding: 7px 12px; border-top: 1px solid #f2f5f9; font-size: 12.5px; }
.sh-nov-list .sh-nov-row:first-child { border-top: 0; }
.sh-nov-name { font-weight: 700; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-nov-unlinked { font-size: 9.5px; font-weight: 700; color: #9a6a12; background: #fdf2dc; padding: 1px 6px; border-radius: 6px; }
.sh-nov-range { color: #6b7a8d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-nov-extra { color: #8090a0; font-size: 11.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-nov-tag { font-size: 9.5px; font-weight: 700; color: #2b6cb0; background: #e8f0fb; padding: 2px 7px; border-radius: 6px; justify-self: start; white-space: nowrap; }
.sh-nov-tag.is-baja { color: #b23b31; background: #fbe7e5; }
.sh-nov-row.sh-nov-side { grid-template-columns: minmax(110px, 1.2fr) auto 1.4fr; }
.sh-nov-none { padding: 13px; color: #9aa7b5; font-size: 12px; text-align: center; }
.sh-nov-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 42px 20px; color: #6b7a8d; text-align: center; }
.sh-nov-empty svg { color: #c3cedb; }
.sh-abs-dates { font-size: 12px; color: #46586c; font-variant-numeric: tabular-nums; flex: 1; }
/* Motivo, días fuera, estado y justificante de cada episodio (historial rico, igual que en conductores). */
.sh-abs-motive { font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 2px 6px; border-radius: 5px; background: #eef0fb; color: #4a54a8; }
.sh-abs-days { font-style: normal; color: #8a97a8; font-size: 11px; }
.sh-abs-openpill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #fdf2dc; color: #9a6a12; }
.sh-abs-row.is-open { border-color: #f0dcae; background: #fffdf7; }
.sh-abs-justif { display: inline-flex; align-items: center; gap: 3px; }
.sh-abs-jbtn { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #3660a8; background: #eef3fb; border: none; border-radius: 6px; padding: 3px 7px; cursor: pointer; text-decoration: none; }
.sh-abs-jbtn:hover { background: #e0e9f7; }
.sh-abs-jbtn.is-danger { color: #b23b31; background: #fbe9e7; }
.sh-abs-nojustif { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #9a6a12; background: #fdf4e3; border: 1px dashed #e6c98f; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.sh-abs-nojustif:hover { background: #fbeccf; }
.sh-abs-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-abs-add .sh-in { font-size: 12px; }
.sh-muted { color: #98a6b8; font-size: 12px; }
@media (max-width: 760px) { .sh-modal-person { max-width: 460px; }
  .sh-person-fields .sh-f, .sh-person-fields .sh-f-wide { flex: 1 1 100%; max-width: none; }
  .sh-person-fields .sh-f-save { margin-left: 0; width: 100%; } }

/* ── Pestaña PLANIFICACIÓN (necesidades del cliente → curva de cobertura + cuánta gente) ── */
.sh-plan-help { font-size: 12px; color: #6b7a8d; background: #f6f8fb; border: 1px solid #e6ebf1; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 12px; display: flex; gap: 6px; align-items: baseline; }
.sh-need-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--border, #e6ebf1); border-radius: 10px; background: var(--surface, #fff); }
.sh-need-add-days { display: flex; gap: 4px; flex-wrap: wrap; }
.sh-day-chip { display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid #d6deea; background: #f6f8fb; color: #6b7a8d; font-size: 11.5px; font-weight: 700;
  min-width: 36px; height: 28px; padding: 0 8px; border-radius: 7px; cursor: pointer; line-height: 1; }
.sh-day-chip.is-active { background: var(--brand, #8a5a2b); border-color: var(--brand, #8a5a2b); color: #fff; }
.sh-day-lv { padding: 0 9px; }
.sh-in-hc { width: 58px; text-align: center; }
.sh-need-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
.sh-need-col { border: 1px solid #eef1f6; border-radius: 8px; padding: 6px; min-height: 62px; background: var(--surface, #fff); }
.sh-need-day { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: #8a98ab; text-align: center; margin-bottom: 5px; }
.sh-need-chip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border: 1px solid #dbe6f0; background: #eef5fb;
  border-radius: 6px; padding: 3px 5px; margin-bottom: 4px; font-size: 11px; color: #2c3e5c; }
.sh-need-chip span { font-weight: 700; font-variant-numeric: tabular-nums; }
.sh-need-chip em { font-style: normal; color: #1f7a4d; font-weight: 700; }
.sh-need-chip small { color: #7a889c; width: 100%; }
.sh-need-del { margin-left: auto; border: none; background: none; color: #b23b31; font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.sh-need-empty { color: #c3ccd8; text-align: center; font-size: 12px; padding: 6px 0; }
.sh-plan-actions { margin-bottom: 14px; }
.sh-calc-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: var(--brand, #8a5a2b); color: #fff;
  font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: 9px; cursor: pointer; }
.sh-calc-btn:hover { filter: brightness(1.06); }
.sh-plan-result:empty { display: none; }
.sh-plan-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sh-kpi { flex: 1; min-width: 118px; border: 1px solid var(--border, #e6ebf1); border-radius: 10px; padding: 10px 14px; background: var(--surface, #fff); }
.sh-kpi b { display: block; font-size: 22px; font-weight: 800; color: var(--ink, #1f2c3a); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sh-kpi span { font-size: 11.5px; color: #7a889c; font-weight: 600; }
.sh-kpi small { display: block; font-size: 10.5px; color: #98a6b8; margin-top: 2px; }
.sh-kpi-big { border-color: var(--brand, #8a5a2b); border-width: 1.5px; }
.sh-kpi-big b { color: var(--brand, #8a5a2b); font-size: 28px; }
.sh-tr-line { font-size: 12.5px; color: #46586c; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.sh-tr-warn { color: #b23b31; font-weight: 700; }
.sh-tr-ok { color: #1f7a4d; font-weight: 700; }
.sh-cv-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8a98ab; font-weight: 700; margin-bottom: 8px; }
.sh-cv-wrap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sh-cv-lbl { font-size: 11px; color: #6b7a8d; text-align: center; margin-bottom: 4px; }
.sh-cv-lbl b { color: var(--brand, #8a5a2b); }
.sh-cv-bars { display: flex; align-items: flex-end; gap: 1px; height: 46px; border-bottom: 1px solid #e6ebf1; }
.sh-cv-cell { flex: 1 1 0; height: 100%; display: flex; flex-direction: column-reverse; }
.sh-cv-bar { width: 100%; background: #2f6bb0; border-radius: 1px 1px 0 0; opacity: .9; }
.sh-cv-bar.is-zero { background: transparent; }
.sh-cv-disp { width: 100%; background: #e0982e; border-radius: 1px 1px 0 0; opacity: .9; }
@media (max-width: 720px) { .sh-need-grid, .sh-cv-wrap { grid-template-columns: repeat(2, 1fr); } }

/* ── Planificación shunter: escenarios (input canónico) + disponibilidad + pegar ── */
.sh-scen-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 8px 0 6px; }
.sh-scen-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid #d6deea;
  background: #f6f8fb; color: #3a4c60; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.sh-scen-pill small { font-size: 9.5px; font-weight: 600; color: #97a5b8; letter-spacing: .02em; }
.sh-scen-pill:hover { border-color: var(--brand, #8a5a2b); background: #fff; }
.sh-scen-pill.is-active { background: var(--brand, #8a5a2b); border-color: var(--brand, #8a5a2b); color: #fff; }
.sh-scen-pill.is-active small { color: #f0e2d4; }
.sh-scen-pill.is-default { border-style: dashed; }
.sh-scen-add { border: 1px dashed #b7c2d2; background: #fff; color: #556; font-size: 12px; font-weight: 600; padding: 5px 11px;
  border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sh-scen-add:hover { border-color: var(--brand, #8a5a2b); color: var(--brand, #8a5a2b); }
.sh-scen-manage { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12px; color: #556; margin-bottom: 10px; }
.sh-scen-manage.sh-muted, .sh-muted { color: #9aa7b8; font-style: italic; }
.sh-scen-name { min-width: 180px; font-weight: 600; }
.sh-scen-del { color: #b23b31 !important; }
.sh-kind-toggle { display: inline-flex; border: 1px solid #d6deea; border-radius: 8px; overflow: hidden; margin-right: 8px; }
.sh-kind { border: none; background: #f6f8fb; color: #566; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; }
.sh-kind + .sh-kind { border-left: 1px solid #d6deea; }
.sh-kind.is-active { background: #2f6bb0; color: #fff; }
.sh-kind.is-active[data-sh-kind="disponibilidad"] { background: #e0982e; }
.sh-disp-presets { display: inline-flex; gap: 5px; margin-right: 6px; }
.sh-preset { border: 1px solid #e5c99a; background: #fdf4e6; color: #9a6a1f; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.sh-preset:hover { background: #f9e9cf; }
.sh-need-chip.is-disp { background: #fdf4e6; border-color: #eccf9f; color: #7a5a1f; }
.sh-need-chip .sh-disp-tag { color: #b0791f; font-weight: 700; }
.sh-kpi-disp { border-color: #e0982e; }
.sh-kpi-disp b { color: #c07d1f; }
.sh-cv-title .sh-lg-turno { color: #2f6bb0; font-weight: 800; }
.sh-cv-title .sh-lg-disp { color: #c07d1f; font-weight: 800; }
.sh-paste-card { max-width: 640px; width: 92vw; }
.sh-paste-text { width: 100%; min-height: 210px; resize: vertical; border: 1px solid #d6deea; border-radius: 8px; padding: 10px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; margin: 4px 0 2px; box-sizing: border-box; }
.sh-paste-prev { font-size: 12px; margin-right: 8px; display: inline-flex; align-items: center; gap: 8px; }
.sh-paste-prev .sh-paste-ok { color: #1f7a4d; font-weight: 700; }
.sh-paste-prev [data-sh-paste-apply] { font-size: 12px; padding: 6px 12px; }
/* ── Rotación propuesta (persona × día) ── */
.sh-roster-btn { background: #2f6bb0; }
.sh-roster-box:empty { display: none; }
.sh-roster-head { font-size: 13px; color: #2c3e5c; margin: 14px 0 6px; }
.sh-roster-head b { color: #2f6bb0; font-size: 15px; }
.sh-ro-note { color: #c07d1f; font-weight: 700; }
.sh-ro-warn { font-size: 12px; color: #9a6a1f; background: #fdf4e6; border: 1px solid #eccf9f; border-radius: 7px; padding: 6px 10px; margin-bottom: 8px; }
.sh-roster-wrap { overflow-x: auto; }
.sh-roster-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.sh-roster-table th, .sh-roster-table td { border: 1px solid #e6ebf1; text-align: center; padding: 4px 6px; }
.sh-roster-table thead th { background: #f3f6fa; color: #55647a; font-size: 11px; font-weight: 700; }
.sh-roster-table tbody th { background: #f8fafc; color: #2c3e5c; font-weight: 800; }
.sh-ro-turno { background: #eaf2fb; color: #1c4a86; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.sh-ro-turno small { display: block; font-size: 9.5px; color: #6f92bd; font-weight: 600; }
.sh-ro-disp { background: #fdf4e6; color: #9a6a1f; font-weight: 700; line-height: 1.05; }
.sh-ro-disp small { display: block; font-size: 9.5px; color: #b9924e; }
.sh-ro-off { color: #cbd4df; }
.sh-ro-cnt { font-weight: 700; color: #55647a; font-variant-numeric: tabular-nums; }
.sh-ro-red { color: #c07d1f; font-size: 10px; }
.sh-ro-legal { font-size: 10.5px; color: #8a98ab; margin-top: 7px; line-height: 1.4; }
.sh-ro-ok { color: #1f7a4d; font-weight: 700; }
.sh-ro-tb { display: inline-block; font-size: 9.5px; font-weight: 700; color: #2f6bb0; background: #eaf2fb; border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.sh-ro-legend { font-size: 10.5px; color: #6b7a8d; margin: 4px 0 8px; line-height: 1.45; }
.sh-roster-table tbody td small { display: block; font-size: 9px; font-weight: 600; opacity: .7; }

/* ══ RRHH (33-rrhh.js) — sección de Recursos Humanos ═══════════════════════════════════════════════
   Paleta sobria con acento propio VERDE PIZARRA (#2f6f5f): distingue la sección (los datos son de
   personas, no de tráfico) sin gritar. Jerarquía por COLOR, como manda el criterio de diseño. */
.hr-wrap { display:flex; flex-direction:column; gap:12px; }
.hr-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hr-title { display:inline-flex; align-items:center; gap:8px; color:#2f6f5f; }
.hr-title h2 { margin:0; font-size:20px; color:var(--ink); }
.hr-head-meta { display:inline-flex; align-items:center; gap:12px; font-size:12.5px; flex-wrap:wrap; }
.hr-head-meta > span { display:inline-flex; align-items:center; gap:5px; }
.hr-review-chip { color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4; border-radius:10px;
  padding:2px 9px; font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.hr-ok-chip { color:#1d6b4f; background:#e8f6ef; border:1px solid #bfe3d2; border-radius:10px;
  padding:2px 9px; font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.hr-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.hr-tab { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:6px 13px;
  border:1px solid var(--line,#dde3ea); border-radius:18px; background:var(--surface,#fff);
  color:#44546a; cursor:pointer; }
.hr-tab:hover { border-color:#b9d2c9; background:#f2f8f6; }
.hr-tab.active { background:#2f6f5f; border-color:#2f6f5f; color:#fff; }
.hr-body { display:flex; flex-direction:column; gap:12px; }
.hr-card { background:var(--surface,#fff); border:1px solid var(--line,#e3e7ec); border-radius:10px; padding:12px 14px; }
.hr-card h3 { margin:0 0 8px; font-size:14px; font-weight:600; color:var(--ink); }
.hr-sec-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.hr-sec-head h3 { margin:0; }

/* Toolbar de pestaña: filtros a la IZQUIERDA, acciones a la DERECHA (margin-left:auto). */
.hr-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hr-toolbar input[type="search"] { flex:0 1 240px; min-width:150px; padding:6px 10px; border:1px solid #cfd6de; border-radius:7px; }
.hr-toolbar select { max-width:200px; padding:6px 8px; border:1px solid #cfd6de; border-radius:7px; background:#fff; }
.hr-actions { margin-left:auto; display:inline-flex; gap:8px; }
.hr-chk { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:#44546a; cursor:pointer; }
.hr-chk input { width:auto; margin:0; }

/* Tabla densa (patrón Listados) con scroll propio: la página nunca desborda lateralmente. */
.hr-table-card { padding-bottom:6px; }
.hr-table-scroll { overflow-x:auto; }
.hr-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.hr-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  color:#7a8798; font-weight:600; padding:6px 8px; border-bottom:1px solid #e3e7ec; white-space:nowrap; }
.hr-table td { padding:6px 8px; border-bottom:1px solid #eef1f5; vertical-align:middle; }
.hr-table tbody tr { cursor:pointer; }
.hr-table tbody tr:hover td { background:#f4f9f7; }
.hr-td-name b { font-weight:600; }
.hr-row-off td { opacity:.55; }
.hr-off-pill { font-size:10.5px; font-weight:600; color:#a1341f; background:#fdeceb; border:1px solid #f4cdc7;
  border-radius:8px; padding:0 6px; margin-left:5px; }
.hr-kind-pill { display:inline-block; font-size:11px; font-weight:600; border-radius:9px; padding:1px 8px; white-space:nowrap; }
.hr-k-conductor { color:#1f5fb0; background:#eaf2fc; border:1px solid #c9dcf4; }
.hr-k-shunter { color:#70481f; background:#f7efe4; border:1px solid #e8d7bd; }
.hr-k-oficina { color:#2f6f5f; background:#eaf5f1; border:1px solid #c8e3da; }
.hr-missing { color:#b06055; font-style:italic; font-size:12px; }

/* Modal RRHH (reusa la mecánica .sh-overlay/.sh-modal del shunter, ampliada). */
.hr-modal { max-width:680px; }
.hr-modal-wide { max-width:840px; }
.hr-modal .hr-links { display:flex; gap:8px; align-items:flex-start; }
.hr-sec { margin:10px 0 0; }
.hr-sub { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#7a8798; font-weight:700;
  margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.hr-sensitive { color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4; border-radius:8px;
  padding:0 7px; font-size:10px; letter-spacing:.3px; display:inline-flex; align-items:center; gap:3px; }
.hr-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 12px; }
.hr-grid-3 { grid-template-columns:repeat(3, 1fr); }
.hr-f { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#5d6b7d; }
.hr-f-wide { grid-column:1/-1; }
.hr-f input, .hr-f select { font-size:13px; padding:6px 8px; border:1px solid #cfd6de; border-radius:6px;
  background:var(--surface,#fff); color:var(--ink); width:100%; }
.hr-f input:disabled, .hr-f select:disabled { background:#f4f6f8; color:#7a8798; }
.hr-unit { font-style:normal; color:#9aa6b3; }
.hr-x { border:none; background:none; color:#a1341f; cursor:pointer; padding:2px; }
.hr-cat-table input { width:100%; font-size:12.5px; padding:4px 7px; border:1px solid #d8dee6; border-radius:5px; }
.hr-conv-body { max-height:62vh; overflow-y:auto; padding-right:4px; }

/* Configuración: tarjetas de convenio. */
.hr-conv-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.hr-conv-card { border:1px solid #dde5e1; border-left:4px solid #2f6f5f; border-radius:9px; padding:10px 12px;
  cursor:pointer; background:#fff; }
.hr-conv-card:hover { background:#f2f8f6; border-color:#b9d2c9; border-left-color:#2f6f5f; }
.hr-conv-card.is-off { opacity:.55; }
.hr-conv-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hr-conv-head b { font-size:13.5px; }
.hr-conv-name { font-size:11.5px; color:#7a8798; margin-top:2px; min-height:2.4em; }
.hr-conv-meta { display:flex; justify-content:space-between; font-size:11.5px; color:#5d6b7d; margin-top:6px; }

/* Import: previsualización. */
.hr-imp-body { max-height:56vh; overflow-y:auto; margin:10px 0 4px; }
.hr-imp-counts { display:flex; gap:14px; align-items:baseline; font-size:13px; flex-wrap:wrap; }
.hr-imp-amb { margin:8px 0; font-size:12px; color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4;
  border-radius:7px; padding:7px 10px; }
.hr-imp-list { margin-top:8px; display:flex; flex-direction:column; gap:2px; }
.hr-imp-row { font-size:12.5px; padding:2px 0; }

/* RRHH · Nóminas: tarjetas de totales, celdas ajustables y detalle por día. */
.hr-pay-cards { display:flex; gap:10px; flex-wrap:wrap; }
.hr-pay-card { background:var(--surface,#fff); border:1px solid var(--line,#e3e7ec); border-radius:9px;
  padding:8px 14px; display:flex; flex-direction:column; min-width:96px; }
.hr-pay-card b { font-size:17px; font-variant-numeric:tabular-nums; }
.hr-pay-card span { font-size:11px; color:#7a8798; }
.hr-pay-warn { border-color:#f0dcb4; background:#fdf8ec; }
.hr-pay-warn b { color:#8a5a00; }
.hr-pay-bad { border-color:#f4cdc7; background:#fdf1f0; }
.hr-pay-bad b { color:#a1341f; }
.hr-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hr-pay-table th.hr-num { text-align:right; }
.hr-cell-edit { cursor:pointer; }
.hr-cell-edit:hover { background:#eef7f3 !important; box-shadow:inset 0 0 0 1px #b9d2c9; border-radius:4px; }
.hr-cell-adj { color:#1f5fb0; font-weight:600; position:relative; }
.hr-adj-dot { position:absolute; top:3px; right:2px; width:5px; height:5px; border-radius:50%;
  background:#1f5fb0; display:inline-block; }
.hr-row-val td { background:#f4faf7; }
.hr-val-pill { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600;
  color:#1d6b4f; background:#e8f6ef; border:1px solid #bfe3d2; border-radius:9px; padding:1px 8px; }
.hr-est-chip { font-size:10.5px; font-weight:600; color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4;
  border-radius:8px; padding:0 6px; white-space:nowrap; }
.hr-rev-chip { font-size:10.5px; font-weight:600; color:#a1341f; background:#fdeceb; border:1px solid #f4cdc7;
  border-radius:8px; padding:0 6px; white-space:nowrap; }
.hr-day-row > td { background:#f7faf9; padding:0 8px 10px; }
.hr-day-wrap { border:1px solid #dbe7e2; border-radius:8px; background:#fff; padding:6px 10px; margin-top:4px;
  max-height:320px; overflow-y:auto; }
.hr-day-table { font-size:12px; }
.hr-day-table td, .hr-day-table th { padding:4px 7px; }
.hr-day-est td { color:#8a6d3b; }

/* RRHH · Documentación: estados de caducidad, aptitud del reconocimiento y checklist del expediente. */
.hr-doc-st { display:inline-block; font-size:11px; font-weight:600; border-radius:9px; padding:1px 8px; white-space:nowrap; }
.hr-doc-ok { color:#1d6b4f; background:#e8f6ef; border:1px solid #bfe3d2; }
.hr-doc-soon { color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4; }
.hr-doc-expired { color:#a1341f; background:#fdeceb; border:1px solid #f4cdc7; }
.hr-doc-none { color:#5d6b7d; background:#f1f4f7; border:1px solid #dfe5eb; }
.hr-apt-pill { font-size:10.5px; font-weight:600; border-radius:8px; padding:0 6px; margin-left:4px; }
.hr-apt-apto { color:#1d6b4f; background:#e8f6ef; border:1px solid #bfe3d2; }
.hr-apt-apto_limitaciones { color:#8a5a00; background:#fdf3e0; border:1px solid #f0dcb4; }
.hr-apt-no_apto { color:#a1341f; background:#fdeceb; border:1px solid #f4cdc7; }
.hr-chip-reqs { display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px; }
.hr-chip-req { font-size:11px; font-weight:600; border-radius:10px; padding:2px 9px; }
.hr-chip-req.is-ok { color:#1d6b4f; background:#e8f6ef; border:1px solid #bfe3d2; }
.hr-chip-req.is-missing { color:#a1341f; background:#fdeceb; border:1px solid #f4cdc7; }
.hr-expdoc-row { display:flex; align-items:center; gap:10px; padding:4px 0; border-bottom:1px solid #eef1f5; font-size:12.5px; }
.hr-expdoc-row > span:first-child { flex:1; }

/* RRHH · PRL + Selección */
.hr-upl-btn { display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.hr-epi-item { display:flex; gap:6px; margin-bottom:4px; }
.hr-epi-item select { flex:1; }
.hr-vac-card { border:1px solid #dde5e1; border-left:4px solid #2f6f5f; border-radius:9px; padding:10px 12px;
  cursor:pointer; background:#fff; }
.hr-vac-card:hover { background:#f2f8f6; }
.hr-app-block { border:1px solid #e3e7ec; border-radius:8px; padding:8px 10px; margin:6px 0; background:#fafcfb; }
.hr-app-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.hr-app-head b { font-size:13px; }
.hr-stage-sel { font-size:12px; padding:3px 6px; border:1px solid #cfd6de; border-radius:6px; }
.hr-iv-row { display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0; border-top:1px dashed #e6ebe8; flex-wrap:wrap; }
.hr-iv-when { font-variant-numeric:tabular-nums; color:#5d6b7d; white-space:nowrap; }
.hr-iv-score { color:#c98a00; letter-spacing:1px; }
.hr-iv-notes { color:#44546a; }

/* Bloque RRHH en la ficha de conductor (gated): acento propio de la sección. */
.hr-drv-block { border-left:4px solid #2f6f5f !important; margin-top:10px; }
.hr-drv-grid { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:3px 12px; font-size:12.5px; margin:4px 0 8px; }
.hr-drv-grid span { color:#7a8798; }
.hr-drv-grid b { font-weight:600; }

/* ── RRHH · móvil (≤768px): tablas con su scroll, rejillas a 1-2 columnas, modales a pantalla casi
   completa. Mismo criterio que el resto del TMS móvil. ── */
@media (max-width: 768px) {
  .hr-tabs { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .hr-tab { white-space:nowrap; flex:0 0 auto; }
  .hr-head { gap:8px; }
  .hr-head-meta { font-size:11.5px; gap:8px; }
  .hr-toolbar input[type="search"] { flex:1 1 100%; }
  .hr-toolbar select { max-width:none; flex:1 1 40%; }
  .hr-actions { margin-left:0; width:100%; justify-content:flex-end; }
  .hr-grid, .hr-grid-3 { grid-template-columns:1fr 1fr; }
  .hr-modal, .hr-modal-wide { max-width:96vw; }
  .hr-conv-body { max-height:70vh; }
  .hr-pay-cards { gap:6px; }
  .hr-pay-card { min-width:84px; padding:6px 10px; }
  .hr-pay-card b { font-size:15px; }
  .hr-conv-grid { grid-template-columns:1fr; }
  .hr-drv-grid { grid-template-columns:auto 1fr; }
  .hr-app-head { gap:6px; }
}

/* ── VISTA HORARIA DE JORNADAS (Tráfico y RRHH) ────────────────────────────────────────────────────
   Reutiliza la rejilla de la Vista horaria de shunter (.sh-hh-* / .sh-hbar, globales) para que la
   lectura horaria sea la MISMA en todo el TMS. Aquí solo van las diferencias propias: la columna de
   etiqueta es más ancha (caben nombres de persona, no códigos de centro de 4 letras) y los colores
   por estado de servicio + la barra del tacógrafo. ── */
.jh-wrap .sh-hh-cty { flex: 0 0 168px; width: 168px; }
.jh-wrap .sh-hh-cty b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh-wrap .sh-hh-cty small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh-wrap .sh-hh-ruler, .jh-wrap .sh-hh-row { min-width: 1020px; }
.jh-wrap .sh-hh-row.is-today > .sh-hh-cty { background: #fff6df; }
.jh-wrap .sh-hh-row.is-ext > .sh-hh-cty { background: #fdf6ee; }

.sh-hbar.jh-plan { background: #eaf2fc; color: #2f5c8f; border-color: #c6dbf3; border-left: 3px solid #4379b4; }
.sh-hbar.jh-run  { background: #e5f4ec; color: #19623f; border-color: #b6ddc6; border-left: 3px solid #1f9b61; }
.sh-hbar.jh-done { background: #f0f4f8; color: #4b5c70; border-color: #d7e0ea; border-left: 3px solid #8a99aa; }
.sh-hbar.jh-ext  { background: #fdf1e3; color: #8a5a2b; border-color: #edd6b8; border-left: 3px solid #b66f2f; }
/* estimado = viene del plan, sin hitos reales del conductor. Se marca en la propia barra (rayado
   suave) para que nadie confunda una previsión con un hecho. */
.sh-hbar.is-est { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 5px, transparent 5px 10px); }
.sh-hbar.is-long { border-right: 3px dashed currentColor; }

/* Tacógrafo: la jornada REAL. Va en tono oscuro para que destaque sobre el plan, y por dentro se
   trocea por estado (conducción / otros trabajos / disponibilidad) — el descanso no se pinta. */
.sh-hbar.jh-tacho { background: #2f3b4c; color: #eef3f9; border-color: #222c3a; border-left: 3px solid #14324f; }
.sh-hbar.jh-tacho .sh-hbar-n { font-weight: 800; }
.sh-hbar.jh-tacho .sh-hbar-t { opacity: .85; }
.jh-tacho-seg { position: absolute; inset: 0; opacity: .55; pointer-events: none; }
.jh-tacho-seg i { position: absolute; top: 0; bottom: 0; display: block; }
.jh-tacho-seg .tc-drive { background: #4bb3f0; }
.jh-tacho-seg .tc-work  { background: #f0b64b; }
.jh-tacho-seg .tc-avail { background: #7f8da0; }

.th-legend-dot.is-run { background: #e5f4ec; border-left-color: #1f9b61; }
.th-legend-dot.is-done { background: #f0f4f8; border-left-color: #8a99aa; }
.th-legend-dot.is-ext { background: #fdf1e3; border-left-color: #b66f2f; }
.th-legend-dot.is-drive { background: #2f3b4c; border-left-color: #4bb3f0; }
.th-legend-dot.is-work { background: #2f3b4c; border-left-color: #f0b64b; }
.th-legend-dot.is-avail { background: #2f3b4c; border-left-color: #7f8da0; }
.th-est { color: #9a6a12; font-weight: 700; }

/* ── PARRILLA DE PLANIFICACIÓN (solo perfil tráfico) ───────────────────────────────────────────────
   La Vista horaria de Tráfico es además un tablero: el COLOR de la barra dice la ASIGNACIÓN (verde
   asignado / rojo sin asignar / azul-ámbar propuesto en borrador) y arriba hay pastillas que se
   arrastran sobre los servicios. Nada toca la BD hasta pulsar "Aplicar". ── */
.sh-hbar.jh-assigned     { background: #e6f5ec; color: #17643f; border-color: #bfe3cc; border-left: 3px solid #22a05f; }
.sh-hbar.jh-assigned-ext { background: #e5f3f1; color: #145a52; border-color: #bfe0da; border-left: 3px solid #1f9b8f; }
/* SIN ASIGNAR = EN BLANCO (jefe, 27-07-2026). Antes iba en rojo, pero ahora el rojo significa "jornada
   completa" en el código de carga: pintar de rojo lo que no tiene a nadie despistaba. Blanco = está
   libre, como la pastilla sin nada. Se distingue por el filete gris y el borde discontinuo. */
.sh-hbar.jh-unassigned   { background: #fff; color: #5c6673; border: 1px dashed #cfd6df; border-left: 3px solid #b6bfcb; }
/* CUÁNTO OCUPA de la jornada, con el codigo de color de Trafico diario (peticion del jefe): ambar = deja
   hueco para otro servicio (media Lanzadera, viaje de 4-6 h) · rojo = ocupa el dia entero (SAS nocturno,
   Verallia, viaje de +6 h). Solo sobre lo ASIGNADO a un conductor nuestro: en lo sin asignar manda su
   propio rojo de aviso y en un externo la jornada no es nuestra. Mismos tonos que `.av-c-*`. */
.sh-hbar.jh-assigned.jh-occ-parcial { background: #fdeecb; color: #7a5510; border-color: #e2ad4e; border-left-color: #d99321; }
.sh-hbar.jh-assigned.jh-occ-full    { background: #fdeeee; color: #8f2f27; border-color: #f0cccc; border-left-color: #d64b3f; }
/* La ocupación se mide por PERSONA y día con el código de Tráfico diario (1 viaje verde · 2 amarillo ·
   3 rojo), y marca también al EXTERNO y a lo PROPUESTO en borrador: un proveedor con el día lleno
   tampoco puede coger otro viaje. Va después de las reglas base (misma especificidad) para ganarles. */
.sh-hbar.jh-occ-v1, .sh-hbar.jh-assigned.jh-occ-v1, .sh-hbar.jh-assigned-ext.jh-occ-v1,
.sh-hbar.jh-prop-drv.jh-occ-v1, .sh-hbar.jh-prop-ext.jh-occ-v1 {
  background: #e9f6ee; color: #1d6b3f; border-color: #b6e0c5; border-left-color: #35a163; }
.sh-hbar.jh-occ-v2, .sh-hbar.jh-assigned.jh-occ-v2, .sh-hbar.jh-assigned-ext.jh-occ-parcial,
.sh-hbar.jh-assigned-ext.jh-occ-v2, .sh-hbar.jh-prop-drv.jh-occ-parcial, .sh-hbar.jh-prop-drv.jh-occ-v2,
.sh-hbar.jh-prop-ext.jh-occ-parcial, .sh-hbar.jh-prop-ext.jh-occ-v2 {
  background: #fdeecb; color: #7a5510; border-color: #e2ad4e; border-left-color: #d99321; }
.sh-hbar.jh-assigned-ext.jh-occ-full, .sh-hbar.jh-prop-drv.jh-occ-full, .sh-hbar.jh-prop-ext.jh-occ-full {
  background: #fdeeee; color: #8f2f27; border-color: #f0cccc; border-left-color: #d64b3f; }
/* El recuadro DISCONTINUO marca "es un borrador", pero su color era fijo (azul/ocre) y desentonaba dentro
   de una barra ya teñida por la carga: el conductor propuesto se veía verde en un marco ocre. Sigue el
   mismo código de color; lo que dice "borrador" es que sea discontinuo, no su tono. */
.sh-hbar.jh-prop-drv.jh-occ-v1, .sh-hbar.jh-prop-ext.jh-occ-v1 { outline-color: #79c496; }
.sh-hbar.jh-prop-drv.jh-occ-v2, .sh-hbar.jh-prop-ext.jh-occ-v2,
.sh-hbar.jh-prop-drv.jh-occ-parcial, .sh-hbar.jh-prop-ext.jh-occ-parcial { outline-color: #e0b060; }
.sh-hbar.jh-prop-drv.jh-occ-full, .sh-hbar.jh-prop-ext.jh-occ-full { outline-color: #e0968c; }
/* RESALTAR LO DE UNA PERSONA al pasar el ratón por su pastilla (petición del jefe, 28-jul-2026): lo suyo
   queda encendido y en primer plano; el resto se va al fondo (apagado y sin color, pero legible: sigue
   siendo el contexto). Solo visual y solo mientras el ratón está encima. */
#trafficHourlyView.jh-focusing .sh-hbar { opacity: .28; filter: saturate(.35); }
#trafficHourlyView.jh-focusing .sh-hbar.is-focus {
  opacity: 1; filter: none; z-index: 7;
  box-shadow: 0 0 0 2px rgba(24, 95, 165, .5), 0 4px 12px rgba(15, 42, 72, .22); }
/* La pastilla no lleva NADA ese día: en vez de dejar la parrilla a medio gas sin decir por qué, se apaga
   solo un punto (se entiende que no hay nada que resaltar). */
#trafficHourlyView.jh-focusing.jh-focus-none .sh-hbar { opacity: .6; filter: none; }
#trafficHourlyView.jh-focusing .jhw-cell .sh-hbar.is-focus { box-shadow: 0 0 0 2px rgba(24, 95, 165, .5); }
/* Pastilla de proveedor con el día ocupado: el punto de color manda (igual que en la de conductor) y el
   borde acompaña, para que se note sin arrastrarla. */
/* Las pastillas arrancan EN BLANCO y solo se colorean por la carga del día (1 verde · 2 amarillo ·
   3 rojo), como el código de Tráfico diario. El punto lleva el color; el borde acompaña. */
.th-pill.th-pill-extname.is-v1      { border-color: #79c496; }
.th-pill.th-pill-extname.is-v2,
.th-pill.th-pill-extname.is-parcial { border-color: #e2ad4e; }
.th-pill.th-pill-extname.is-full    { border-color: #d64b3f; color: #8f2f27; }
/* NO asignable (baja, vacaciones, Verallia, día libre…): se ve, pero apagada y sin poder arrastrarla,
   con el motivo al lado. Antes desaparecía y no había forma de saber por qué. */
.th-pill.is-blocked { background: #f5f6f8; border-color: #e2e6ec; color: #97a1ae; cursor: default;
  box-shadow: none; }
.th-pill.is-blocked:hover { transform: none; box-shadow: none; }
.th-pill-why { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; color: #8a94a3; background: #e9edf2; border-radius: 999px; padding: 2px 6px;
  margin-left: 5px; }
.th-legend-dot.is-occ-v1      { background: #e9f6ee; border-left-color: #35a163; }
.th-legend-dot.is-occ-parcial { background: #fdeecb; border-left-color: #d99321; }
.th-legend-dot.is-occ-full    { background: #fdeeee; border-left-color: #d64b3f; }

.sh-hbar.jh-prop-drv     { background: #e8effc; color: #294f9c; border-color: #c5d6f3; border-left: 3px solid #3f6fd4;
  outline: 1.5px dashed #6f93da; outline-offset: -3px; }
.sh-hbar.jh-prop-ext     { background: #fdf3e0; color: #855012; border-color: #efd9ac; border-left: 3px solid #d99321;
  outline: 1.5px dashed #e0b060; outline-offset: -3px; }
/* Pastilla dentro de la barra que dice a quién se le va a asignar, con una x para quitarla del borrador. */
.sh-hbar .jh-prop-card { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.jh-prop-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-left: 2px; border-radius: 50%; background: rgba(0,0,0,.10); cursor: pointer; }
.jh-prop-x:hover { background: rgba(0,0,0,.22); }
/* Servicio bajo el cursor mientras se arrastra una pastilla: destaca como diana. */
.sh-hbar.th-drop-hot { outline: 2px solid var(--primary); outline-offset: 1px;
  box-shadow: 0 4px 14px rgba(140,85,48,.35); transform: translateY(-1px); z-index: 6; }
/* Mientras se arrastra: los servicios (diana) resaltan y lo no planificable (tareas) se atenúa. */
body.th-planning-drag .sh-hbar[data-th-plannable] { outline: 1px dashed rgba(140,85,48,.5); outline-offset: 1px; }
body.th-planning-drag .sh-hbar:not([data-th-plannable]):not(.jh-tacho) { opacity: .5; }
/* Fila "Sin asignar" (arriba del todo): su etiqueta va con acento rojo para que salte a la vista. */
.jh-wrap .sh-hh-row.jh-row-unassigned > .sh-hh-cty { background: #fff; box-shadow: inset 3px 0 0 #b6bfcb; }
.jh-wrap .sh-hh-row.jh-row-unassigned > .sh-hh-cty b { color: #33465e; }

.th-legend-dot.is-assigned { background: #e6f5ec; border-left-color: #22a05f; }
.th-legend-dot.is-unassigned { background: #fff; border: 1px dashed #cfd6df; border-left: 3px solid #b6bfcb; }
.th-legend-dot.is-prop { background: #e8effc; border-left-color: #3f6fd4; }
.th-summary .th-sum-sin { background: #fdecea; border-color: #f0c3bc; color: #8f2f27; }
.th-summary .th-sum-sin b { color: #a5372c; }
/* Contador "N solapes" clicable: al pulsarlo, las bandas en conflicto brillan 5 s (thFlashOverlaps). */
.th-summary .th-sum-solapes[data-th-solapes] { cursor: pointer; user-select: none; }
.th-summary .th-sum-solapes[data-th-solapes]:hover { box-shadow: 0 1px 6px rgba(204, 32, 32, .28); }
@keyframes jhSolapeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204, 32, 32, 0); }
  50% { box-shadow: 0 0 0 4px rgba(204, 32, 32, .5), 0 0 18px 5px rgba(204, 32, 32, .55); }
}
.sh-hbar.jh-solape-glow { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 9;
  animation: jhSolapeGlow 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sh-hbar.jh-solape-glow { animation: none; box-shadow: 0 0 0 4px rgba(204, 32, 32, .45); }
}

/* Paleta de pastillas: "Externo" + conductores, arrastrables. Estética cálida (marca) para que se lea
   como "zona de planificación" y no se confunda con los filtros de arriba. */
.th-plan { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; padding: 9px 11px;
  background: linear-gradient(180deg, #fbf7f2, #f7f1e9); border: 1px solid #ecdfce; border-radius: 12px; }
.th-plan-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-plan-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: var(--primary-strong); }
.th-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px; border: 1px solid #d9c6ad; background: #fff; color: #5a4632;
  cursor: grab; user-select: none; white-space: nowrap; transition: transform .08s, box-shadow .08s, background .12s; }
.th-pill:hover { box-shadow: 0 2px 8px rgba(140,85,48,.20); transform: translateY(-1px); }
.th-pill:active { cursor: grabbing; }
.th-pill.is-dragging { opacity: .5; }
.th-pill.is-hidden { display: none; }
.th-pill-ext { background: #fff; border-color: #e6c79b; color: #8a5a2b; }
/* Proveedores HABITUALES como pastillas con nombre (para simular el dia). Llevan una x para quitarlas. */
.th-pill-extname { padding-right: 5px; font-weight: 700; }
/* Blanco COMODO: la x medía 11x11 px y con el ratón se fallaba (el jefe: "la cruz no funciona"). Ahora
   18x18 con su fondo al pasar por encima, y no arrastra: borra. */
.th-pill-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  min-height: 0; margin-left: 4px; margin-right: -3px; padding: 0; border: none; background: transparent;
  color: inherit; border-radius: 50%; opacity: .55; cursor: pointer; flex: 0 0 18px; }
.th-pill-x:hover { opacity: 1; background: rgba(138,90,43,.22); }
.th-pill-x svg { pointer-events: none; }   /* el clic llega SIEMPRE al boton, no al <path> */
/* La pastilla con nombre ya no es <button>: hay que darle el aspecto a mano (el .th-pill base asume boton). */
.th-pill-extname { display: inline-flex; align-items: center; gap: 4px; }
.th-pill-addext { border-style: dashed; background: #fff; color: #8a5a2b; cursor: pointer; font-weight: 600; }
.th-pill-addext:hover { background: #fdf1e3; }
/* Elector de proveedores: lista con casillas y buscador (el buscador queda FUERA de la lista que se
   repinta, para no perder el foco al teclear). */
/* ── Elector de externos: ventana con MARGENES CONSTANTES (18px, los mismos que la cabecera y el pie de
   .th-confirm-card) y tres zonas claras: cabecera · buscar+contador · lista · acciones. ── */
.th-ext-card { width: min(620px, 94vw); }
/* Buscar + contador, en su propia banda con el mismo margen lateral que el resto. */
.th-ext-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; }
.th-ext-search { flex: 1 1 auto; height: 34px; font-size: 13px; }
.th-ext-count { flex: 0 0 auto; display: inline-flex; align-items: center; height: 26px;
  font-size: 11.5px; font-weight: 700; color: #8a5a2b; background: #fdf1e3; border: 1px solid #e6c79b;
  border-radius: 999px; padding: 0 11px; white-space: nowrap; }
/* La lista, encajada en su propio marco: se ve dónde empieza y dónde acaba, y no toca los bordes. */
.th-ext-list { margin: 0 18px 4px; padding: 0; max-height: 44vh; overflow: auto;
  border: 1px solid var(--line, #e3e9f1); border-radius: 8px; background: #fff; }
/* Cabecerita de grupo: elegidos → con los que ya has trabajado → todos. Con 1.163 nombres, una lista
   plana empezaba por los "(Embargado…)" y no habia por donde entrar. */
.th-ext-group { position: sticky; top: 0; z-index: 1; background: #f7f9fc;
  border-bottom: 1px solid #e8edf4; padding: 5px 12px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #7b8ba1; }
.th-ext-group + .th-ext-group { border-top: none; }
/* SIMETRIA: TODAS las filas a la misma altura, en UNA linea con elipsis (el nombre entero, en el title).
   Antes los nombres largos partian a dos lineas y la lista quedaba a saltos. */
.th-ext-row { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 32px;
  font-size: 12.5px; cursor: pointer; border-bottom: 1px solid #f4f7fa; }
.th-ext-row:last-child { border-bottom: none; }
.th-ext-row:hover { background: #f6f9fd; }
.th-ext-row.is-on { background: #fdf7f0; }
.th-ext-row.is-on .th-ext-name { font-weight: 700; color: #6b4423; }
.th-ext-row input { width: 15px; height: 15px; margin: 0; flex: 0 0 15px; accent-color: #8a5a2b; }
/* Nombre + alias JUNTOS (el alias no se va al borde derecho). */
.th-ext-txt { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.th-ext-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-ext-com { flex: 0 0 auto; font-size: 11px; color: #8a5a2b; background: #fdf1e3;
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.th-ext-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
/* Pie: explicación a la izquierda, acciones a la derecha (secundaria y luego la principal). */
.th-ext-actions { align-items: center; }
.th-ext-foot { flex: 1 1 auto; margin-right: auto; font-size: 11px; color: var(--muted); line-height: 1.35; }
/* Punto de disponibilidad DENTRO de la pastilla: mismo código de color que Tráfico diario (av-c-*). */
.th-pill .th-pill-avdot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; margin-right: 1px; }
.th-pill-search { flex: 0 0 170px; font-size: 11px; padding: 5px 9px; border: 1px solid #d9c6ad; border-radius: 8px; background: #fff; }
.th-pill-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 100%;
  max-height: 92px; overflow-y: auto; padding: 2px; }
.th-pill-empty { font-size: 11px; color: var(--muted); font-style: italic; }
.th-plan-actions { display: flex; align-items: center; gap: 8px; }
.th-plan-count { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: #8f5a12; }
.th-plan-actions .secondary { margin-left: auto; }
.th-plan-apply { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--primary-strong); background: var(--primary); color: #fff; cursor: pointer; }
.th-plan-apply:hover { background: var(--primary-strong); }
.th-plan-apply:disabled { opacity: .6; cursor: default; }
@media (max-width: 768px) {
  .th-pill-search { flex-basis: 100%; }
  .th-plan-actions { flex-wrap: wrap; }
}

/* Bloque de CARGA/DESCARGA de un servicio que cruza de día: chip que dice qué pata es. */
.sh-hbar .jh-leg { position: absolute; top: 1px; right: 3px; font-size: 7.5px; font-weight: 900;
  letter-spacing: .06em; opacity: .75; pointer-events: none; }
.sh-hbar.is-leg { border-right-style: dashed; }
/* ✓ de una propuesta: asignar SOLO ese servicio (pide confirmación), al lado de la ✕. */
.jh-prop-ok { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-left: 3px; border-radius: 50%; background: rgba(34,160,95,.18); color: #17643f; cursor: pointer; }
.jh-prop-ok:hover { background: rgba(34,160,95,.38); }

/* ── SEMANA por CLIENTE: rejilla cliente × 7 columnas de día ── */
.jhw-wrap { overflow-x: auto; }
.jhw-grid { min-width: 1080px; border: 1px solid #dfe6ee; border-radius: 10px; overflow: hidden; background: #fff; }
.jhw-row { display: grid; grid-template-columns: 168px repeat(7, 1fr); border-top: 2px solid #ccd6e3; }
.jhw-row:first-child { border-top: none; }
.jhw-head { background: #f4f7fa; border-top: none; }
.jhw-head .jhw-cell { display: flex; align-items: center; justify-content: center; padding: 7px 4px;
  font-size: 10.5px; font-weight: 800; color: #46586e; text-transform: capitalize; position: static; height: auto; }
.jhw-head .jhw-cty { display: flex; align-items: center; padding: 7px 10px; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: #7a8798; }
.jhw-cty { padding: 6px 10px; background: #fbfcfe; border-right: 1px solid #e3e9f0; min-width: 0; }
.jhw-cty b { display: block; font-size: 11.5px; color: #1d3352; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jhw-cty small { display: block; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jhw-cell { position: relative; border-right: 1px solid #eef2f7; min-width: 0; overflow: hidden; }
.jhw-cell:last-child { border-right: none; }
.jhw-cell.is-today { background: #fffdf4; }
.jhw-row.jh-row-unassigned .jhw-cty { background: #fff; box-shadow: inset 3px 0 0 #b6bfcb; }
.jhw-row.jh-row-unassigned .jhw-cty b { color: #33465e; }
/* Bandas mini dentro de una celda de día (una columna = 24 h): compactas, el detalle vive en el hover. */
.sh-hbar.jh-mini { height: 28px; padding: 2px 5px; font-size: 8.5px; line-height: 1.1; gap: 1px; border-radius: 5px; }
.sh-hbar.jh-mini .sh-hbar-card { font-size: 8px; }
.sh-hbar.jh-mini .jh-leg { font-size: 6.5px; }

/* ── MODAL de confirmación de asignaciones (Aplicar / asignar UNO): comprobar antes de tocar nada ── */
.th-confirm-overlay, .th-ask-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(20, 32, 48, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.th-ask-overlay { z-index: 320; }                          /* el aviso va POR ENCIMA del modal de aplicar */
.th-ask-msg { margin: 0; padding: 4px 0; font-size: 12.5px; line-height: 1.5; color: #33465e; }
.th-cf-reasig { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-size: 10px; font-weight: 700; color: #a5372c; }
.th-cf-reasig .ic { color: #c0492f; }
.th-confirm-card { width: min(640px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 50px rgba(10, 25, 45, .35); overflow: hidden;
  animation: tmsCardIn .18s ease-out; }
.th-cf-head { padding: 14px 18px 10px; border-bottom: 1px solid #edf1f6; }
.th-cf-head b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; color: #1d3352; }
.th-cf-head span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.th-cf-list { flex: 1; overflow-y: auto; padding: 8px 18px; }
.th-cf-row { display: grid; grid-template-columns: 1fr 26px auto; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid #f1f4f8; }
.th-cf-row:last-child { border-bottom: none; }
.th-cf-svc b { display: block; font-size: 12px; color: #1d3352; }
.th-cf-svc small { display: block; font-size: 10.5px; color: var(--muted); }
.th-cf-svc .th-cf-ref { color: #7a5c3e; font-weight: 700; }
.th-cf-arrow { display: flex; justify-content: center; color: #9aa8ba; }
.th-cf-arrow .ic { transform: rotate(180deg); }
.th-cf-who { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px; background: #e8effc; color: #294f9c; border: 1px solid #c5d6f3; }
.th-cf-who.is-ext { background: #fdf3e0; color: #855012; border-color: #efd9ac; }
/* DESASIGNAR: se queda sin nadie → en blanco, igual que un servicio sin asignar. */
.th-cf-who.is-none { background: #fff; color: #5c6673; border: 1px dashed #cfd6df; }
.th-cf-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid #edf1f6; background: #fafbfd; }
.th-confirm-card.th-cf-small { width: min(460px, 94vw); }
/* CAMBIAR HORARIO desde la vista horaria. Márgenes iguales (18px) arriba, abajo y a los lados, y los
   dos campos a la misma anchura: es un cuadro de dos decisiones, tiene que leerse simétrico. */
.th-hours-card { width: min(430px, 94vw); }
.th-hours-warn { display: flex; align-items: flex-start; gap: 8px; margin: 14px 18px 0; padding: 10px 12px;
  border-radius: 9px; background: #fdf6e6; border: 1px solid #efdcb0; border-left: 3px solid #dda93c;
  font-size: 11.5px; line-height: 1.45; color: #6b5320; }
.th-hours-warn .ic { flex: 0 0 auto; color: #c8901f; margin-top: 1px; }
.th-hours-warn b { color: #4e3c12; }
.th-hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 18px 0; }
.th-hours-grid label { display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #7b8797; }
.th-hours-grid input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #d5dde7;
  border-radius: 8px; font-size: 13.5px; font-weight: 700; color: #1d3352; background: #fff; }
.th-hours-grid input:focus { outline: none; border-color: #7ea6d8; box-shadow: 0 0 0 3px rgba(126, 166, 216, .22); }
.th-hours-note { margin: 10px 18px 14px; min-height: 30px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.th-cf-who.is-hours { background: #f3eef8; color: #5b3e8f; border-color: #ddd0ee; }
/* Decisión de horas cuando el servicio se DESPLAZÓ: aviso + dos opciones, debajo de su fila. */
.th-cf-row.has-hours { grid-template-columns: 1fr 26px auto; }
.th-cf-hours { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px; padding: 8px 10px; background: #fdf8ef; border: 1px solid #eeddba; border-radius: 8px; }
.th-cf-hwarn { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #8f5a12; }
.th-cf-hwarn b { color: #6b3f06; }
.th-cf-hours label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4b3d28; cursor: pointer; }
.th-cf-hours input[type="radio"] { accent-color: var(--primary); margin: 0; }
/* Banda con horario DESPLAZADO en borrador: contorno punteado morado + chip MOVIDO. */
.sh-hbar.jh-shifted { outline: 2px dotted #8f6cc9; outline-offset: -2px; }
.sh-hbar .jh-shift-flag { background: #f3eef8; color: #5b3e8f; padding: 0 3px; border-radius: 3px;
  right: auto; left: 3px; opacity: 1; }
.sh-hbar.is-leg .jh-shift-flag { top: 11px; }
.sh-hbar.jh-time-dragging { opacity: .75; cursor: grabbing; z-index: 8;
  box-shadow: 0 6px 18px rgba(91,62,143,.35); }
.jh-wrap .sh-hbar[data-th-plannable] { touch-action: pan-y; }

/* Ventanita de la Vista horaria de jornadas: reutiliza `.sh-pop` de shunter (borde, sombra, cabecera
   con color, filas etiqueta/valor) y solo añade sus cabeceras y dos adornos propios. Que las dos
   pantallas se lean igual es la norma: la Vista horaria de shunter es la referencia. */
.sh-pop.jh-pop { width: 348px; }
.jh-pop .sh-pop-tel { font-weight: 600; opacity: .82; letter-spacing: .01em; }
.sh-pop-head.jh-pop-plan  { background: #eaf2fc; } .sh-pop-head.jh-pop-plan b  { color: #2f5c8f; }
.sh-pop-head.jh-pop-done  { background: #f0f4f8; } .sh-pop-head.jh-pop-done b  { color: #4b5c70; }
.sh-pop-head.jh-pop-ext   { background: #fdf1e3; } .sh-pop-head.jh-pop-ext b   { color: #8a5a2b; }
/* El tacógrafo, en oscuro: es el mismo tono de su barra en la parrilla, así se sabe qué estás mirando. */
.sh-pop-head.jh-pop-tacho { background: #2f3b4c; } .sh-pop-head.jh-pop-tacho b { color: #f4f8fc; }
.sh-pop-head.jh-pop-tacho .sh-pop-tel { color: #b9c7d8; }
.sh-pop-head.jh-pop-tacho .sh-pop-x { background: rgba(255,255,255,.14); color: #dbe5f0; }
.sh-pop-head.jh-pop-tacho .sh-pop-x:hover { background: rgba(255,255,255,.28); }
/* Separador de grupo dentro del cuerpo (Horario / Unidad / Jornada). */
.jh-pop-sep { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #9aa8ba; padding: 9px 0 3px; border-bottom: 1px solid #eef2f7; }
/* Reparto de la jornada en una barrita: mismos colores que los tramos de la parrilla. */
.jh-pop-mix { display: flex; width: 116px; height: 8px; border-radius: 4px; overflow: hidden;
  background: #eef2f7; box-shadow: inset 0 0 0 1px rgba(20,50,90,.06); }
.jh-pop-mix i { display: block; height: 100%; }
.jh-pop-mix .tc-drive { background: #4bb3f0; }
.jh-pop-mix .tc-work  { background: #f0b64b; }
.jh-pop-mix .tc-avail { background: #7f8da0; }

@media (max-width: 768px) {
  .jh-wrap .sh-hh-cty { flex: 0 0 120px; width: 120px; }
  .jh-wrap .sh-hh-ruler, .jh-wrap .sh-hh-row { min-width: 760px; }
}

/* Leyenda ARRIBA (pedido del jefe): en una lista larga el pie no se ve nunca, así que las
   explicaciones van sobre la parrilla, pegadas a ella. */
.th-foot.th-legend-top { margin: 0 0 6px; padding: 6px 10px; border-top: none;
  border: 1px solid var(--border, #e6ebf1); border-radius: 9px; background: var(--surface-soft, #f7f9fc); }
.th-legend-note { color: #8a98ab; font-style: italic; }

/* Cabecera de la ventanita a tres líneas: nombre, contexto (servicio/día) y TELÉFONO clicable. */
.jh-pop .sh-pop-sub { font-size: 10.5px; font-weight: 700; opacity: .72; line-height: 1.2; }
.sh-pop-head.jh-pop-tacho .sh-pop-sub { color: #b9c7d8; opacity: .9; }
.sh-pop-head.jh-pop-tacho .sh-pop-tel .tel-link { color: #eaf2fb; }
/* Valor de fila que además es un salto: el albarán lleva a Tráfico diario con el servicio señalado. */
.jh-pop-link { border: none; background: none; padding: 0; font: inherit; font-weight: 700;
  color: #2f5c8f; cursor: pointer; text-align: right; border-bottom: 1px dashed #a9c4e4; }
.jh-pop-link:hover { color: #1d4372; border-bottom-color: #1d4372; }
/* Botón de EDITAR dentro de la ficha (cambiar horario): mismo enlace, con su icono alineado. */
.jh-pop-edit { display: inline-flex; align-items: center; gap: 5px; }
.jh-pop-edit .ic { color: #5b7fae; }

/* Listado de jornadas (RRHH): la MISMA información que la parrilla, en tabla auditable y exportable.
   Reutiliza `.hr-table` de RRHH para que se lea igual que el resto de la sección. */
.jh-list { border:1px solid var(--border,#e6ebf1); border-radius:9px; background:var(--surface,#fff); }
.jh-list .hr-table th { white-space:nowrap; }
.jh-list .hr-table td { white-space:nowrap; }
.jh-list .th-num { text-align:right; font-variant-numeric:tabular-nums; }
.jh-list th.th-num { text-align:right; }
.jh-list .th-list-soft { color:#8a98ab; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
/* La diferencia plan↔tacógrafo es la columna que se mira: en verde si se trabajó MÁS de lo planificado
   y en ámbar si menos. No es un juicio, es un aviso de que hay algo que explicar. */
.jh-list .th-num.is-mas { color:#1f7a4d; font-weight:800; }
.jh-list .th-num.is-menos { color:#9a6a12; font-weight:800; }
.th-layout { margin-left:4px; }

/* Conmutador Parrilla ↔ Listado: pastilla que SE DESLIZA (el jefe: "que se vea el efecto"). El fondo
   blanco del `.segmented-control` normal salta de golpe; aquí se sustituye por un pseudo-elemento que
   viaja de un lado a otro en 520 ms con una curva suave. Solo se anima `transform` → sin reflow. */
.th-layout { position: relative; isolation: isolate; }
.th-layout::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: 4px; background: #fff;
  box-shadow: 0 1px 4px rgba(28, 38, 51, .12);
  transition: transform .52s cubic-bezier(.22, 1, .28, 1);
}
.th-layout.is-listado::before { transform: translateX(100%); }
.th-layout button { position: relative; transition: color .3s ease; }
/* la pastilla ya hace de fondo: los botones no lo pintan (si no, se ve el salto duro debajo) */
.th-layout button.active { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .th-layout::before { transition: none; } }

/* Fila del listado con su ficha abierta: se marca para saber a cuál corresponde lo que estás viendo. */
.jh-list tbody tr.is-open td { background: #eaf2fc; box-shadow: inset 3px 0 0 #4379b4; }

/* SELECCIÓN de fila (dónde estás mirando): se queda aunque cierres la ficha. Más suave que `is-open`,
   que marca la fila cuya ficha está a la vista. */
.jh-list tbody tr.is-sel td { background: #f4f8fd; box-shadow: inset 3px 0 0 #b9cdea; }
.jh-list tbody tr.is-sel.is-open td { background: #eaf2fc; box-shadow: inset 3px 0 0 #4379b4; }

/* Cabecera ordenable del listado de jornadas: mismo gesto y mismo indicador que Listados. */
.jh-list th[data-th-sort] { cursor: pointer; user-select: none; }
.jh-list th[data-th-sort]:hover { background: #eef4fb; }
.jh-list th.ls-col-sorted { color: #2f5c8f; }
.jh-list .is-mas { color: #1f7a4d; font-weight: 800; }
.jh-list .is-menos { color: #9a6a12; font-weight: 800; }
/* separador "a" entre las dos fechas del modo Rango */
.th-date-sep { color: #8a98ab; font-size: 12px; padding: 0 2px; }

/* "Limpiar" de la vista horaria: a la derecha de los filtros (acciones a la derecha, norma de la casa).
   Apagado cuando no hay nada que quitar — así la fila no baila y se ve si estás viendo todo o un recorte. */
.th-filters .th-clear { margin-left: auto; white-space: nowrap; }
.th-filters .th-clear[disabled] { opacity: .45; cursor: default; }

/* Mobile audit for Shunter, RRHH and the hourly views (2026-07-23).
   Only the timeline/table viewport may pan horizontally; the document itself
   must always remain at the physical viewport width. */
.sh-entry-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.sh-entry-scroll .sh-entry-table { min-width: 588px; }

@media (max-width: 768px), (max-height: 480px) {
  #shunterView,
  #rrhhView,
  #trafficHourlyView,
  #rrhhHourlyView {
    max-width: 100%;
    overflow-x: hidden;
  }

  .traffic-hourly-root {
    width: 100%;
    max-width: 100%;
    margin: 6px 0 12px;
  }

  .sh-page,
  .hr-page {
    min-width: 0;
    max-width: 100%;
  }

  .sh-hh-datenav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
  .sh-hh-datenav .sh-hh-date { flex: 1 1 118px; }
  .sh-hh-datenav .sh-btn { flex: 0 1 auto; min-width: 0; }

  .sh-hh-wrap,
  .th-wrap {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .sh-hbar { touch-action: pan-x pan-y; }

  .sh-pop {
    box-sizing: border-box;
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .sh-pop-head,
  .sh-modal-head,
  .sh-modal-foot {
    flex-wrap: wrap;
    min-width: 0;
  }
  .sh-pop-who,
  .sh-pop-row > b {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .sh-pop-row > span { flex: 0 0 auto; }

  .sh-overlay {
    box-sizing: border-box;
    padding: 8px;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .sh-modal,
  .hr-modal,
  .hr-modal-wide {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  .sh-modal input,
  .sh-modal select,
  .sh-modal textarea,
  .hr-modal input,
  .hr-modal select,
  .hr-modal textarea {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  .sh-modal-foot { gap: 8px; }
  .sh-modal-foot > button { flex: 1 1 120px; min-width: 0; }

  .sh-entry-scroll {
    border: 1px solid var(--border, #e6ebf1);
    border-radius: 9px;
  }

  .sh-prow { align-items: flex-start; }
  .sh-prow-l,
  .sh-prow-txt {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* En móvil hay sitio de sobra a lo alto: la línea se parte y el teléfono baja a su propio renglón. */
  .sh-prow-txt small {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .sh-prow-cen { overflow: visible; }
  .sh-prow-tel {
    display: block;
    margin-top: 2px;
  }
  .sh-prow-tel::before { content: none; }   /* en su propio renglón el punto sobra */

  .sh-nov-cols { grid-template-columns: 1fr; }
  .sh-nov-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
  }
  .sh-nov-row .sh-nov-range,
  .sh-nov-row .sh-nov-extra {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .sh-nov-row.sh-nov-side {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .sh-nov-row.sh-nov-side .sh-nov-extra { grid-column: 1 / -1; }

  .hr-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .hr-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .hr-table-scroll {
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .hr-head,
  .hr-toolbar,
  .hr-actions { min-width: 0; }
}

@media (max-width: 760px) {
  .sh-person-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sh-person-fields .sh-f-wide,
  .sh-person-fields .sh-f-chk,
  .sh-person-fields .sh-f-save {
    grid-column: 1 / -1;
  }
  .sh-person-fields .sh-f,
  .sh-person-fields .sh-f-wide {
    min-width: 0;
    max-width: none;
  }
  .sh-person-fields .sh-f-save {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  .hr-grid,
  .hr-grid-3 { grid-template-columns: 1fr; }

  .traffic-hourly-root {
    width: 100%;
    max-width: 100%;
    margin: 6px 0 12px;
  }
  .th-controls .th-mode {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .th-date-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .th-date-nav > [data-th-move="-1"] { grid-column: 1; grid-row: 1; }
  .th-date-nav > #thAnchorDate { grid-column: 2 / 6; grid-row: 1; }
  .th-date-nav > [data-th-move="1"] { grid-column: 6; grid-row: 1; }
  .th-date-nav > [data-th-today] { grid-column: 1 / 4; grid-row: 2; }
  .th-date-nav > [data-th-tomorrow] { grid-column: 4 / 7; grid-row: 2; }
  .th-date-nav > button {
    width: 100%;
    min-width: 0;
  }

  .th-date-nav:has(#thFromDate) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .th-date-nav:has(#thFromDate) > #thFromDate {
    grid-column: 1 / 4;
    grid-row: 1;
  }
  .th-date-nav:has(#thFromDate) > .th-date-sep {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    text-align: center;
  }
  .th-date-nav:has(#thFromDate) > #thToDate {
    grid-column: 5 / 8;
    grid-row: 1;
  }
  .th-date-nav:has(#thFromDate) > [data-th-move="-1"] {
    grid-column: 1;
    grid-row: 2;
  }
  .th-date-nav:has(#thFromDate) > [data-th-today] {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  .th-date-nav:has(#thFromDate) > [data-th-tomorrow] {
    grid-column: 4 / 7;
    grid-row: 2;
  }
  .th-date-nav:has(#thFromDate) > [data-th-move="1"] {
    grid-column: 7;
    grid-row: 2;
  }
}

/* Tareas internas DLT en la vista horaria: trabajo propio NO facturable. Color propio (verde pizarra,
   el de RRHH/personas, porque esto va del conductor, no de un cliente) para no confundirlas con un
   servicio de cliente ni con un externo. */
.sh-hbar.jh-task { background: #e7f1ee; color: #2f6f5f; border-color: #bcdcd2; border-left: 3px solid #2f6f5f; }
.th-legend-dot.is-task { background: #e7f1ee; border-left-color: #2f6f5f; }
.sh-pop-head.jh-pop-task { background: #e7f1ee; } .sh-pop-head.jh-pop-task b { color: #2f6f5f; }
/* Cabecera "abrible": doble clic lleva a su destino (ficha de tarea, o servicio en Tráfico diario).
   La flecha ↗ y el cursor lo anuncian; sirve para cualquier tono de cabecera (tarea/servicio). */
.sh-pop-head.is-openable { cursor: pointer; }
.sh-pop-head.is-openable .sh-pop-who b::after { content: " ↗"; font-size: 10px; opacity: .55; }
.sh-pop-head.is-openable:hover { filter: brightness(0.97); }

/* ── Tareas DLT en Trafico diario: MOVIL ──────────────────────────────────────────────────────────
   En pantalla ancha la fila es UNA linea con el bloque de datos a 780px fijos (asi los rotulos quedan
   alineados entre filas). En un movil esos 780px obligarian a desplazar la tabla para ver el estado, asi
   que la linea ENVUELVE: los datos ocupan todo el ancho y el estado + acuse bajan a su propio renglon.
   La simetria se mantiene: todas las filas parten igual. */
@media (max-width: 768px), (max-height: 480px) {
  #servicesList .service-table tr.dlt-task-row .dlt-tr-line { flex-wrap: wrap; align-items: flex-start; }
  #servicesList .service-table tr.dlt-task-row td,
  #servicesList.row-zoom-active .service-table tr.dlt-task-row td { white-space: normal; }
  #servicesList .dlt-tr-info,
  #servicesList.row-zoom-active .dlt-tr-info {
    flex: 1 1 100%; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip;
  }
  #servicesList .dlt-tr-right { margin-left: 0; margin-top: 2px; flex-wrap: wrap; }
}

/* ── FRANJAS DE COLOR MÁS GRUESAS Y VIVAS (jefe, 27-07-2026: "apenas se perciben") ─────────────────
   El filete de la izquierda es lo que dice de un vistazo la carga de la persona, así que sube de 3 a 5 px
   y los tonos se saturan. Va al FINAL del archivo para ganar a las reglas de arriba sin tocarlas. */
.jh-wrap .sh-hbar { border-left-width: 5px !important; }
.sh-hbar.jh-occ-v1      { border-left-color: #1f8f4d !important; }
.sh-hbar.jh-occ-parcial,
.sh-hbar.jh-occ-v2      { border-left-color: #d98613 !important; }
.sh-hbar.jh-occ-full    { border-left-color: #c8362a !important; }
.sh-hbar.jh-unassigned  { border-left-color: #98a3b1 !important; }
.sh-hbar.jh-assigned:not([class*="jh-occ-"])     { border-left-color: #17914f !important; }
.sh-hbar.jh-assigned-ext:not([class*="jh-occ-"]) { border-left-color: #12857a !important; }
.sh-hbar.jh-prop-drv:not([class*="jh-occ-"])     { border-left-color: #2f5fc7 !important; }
.sh-hbar.jh-prop-ext:not([class*="jh-occ-"])     { border-left-color: #cf8410 !important; }
.sh-hbar.jh-task        { border-left-width: 5px !important; }
/* El punto de la pastilla también se veía flojo: más grande y con el aro más marcado. */
.th-pill .av-dot.th-pill-avdot { width: 12px; height: 12px; flex: 0 0 12px; border-width: 2px; }
.th-pill.th-pill-extname.is-v1   { border-color: #1f8f4d; }
.th-pill.th-pill-extname.is-v2,
.th-pill.th-pill-extname.is-parcial { border-color: #d98613; }
.th-pill.th-pill-extname.is-full { border-color: #c8362a; }
/* Fila de acciones del tablero SIEMPRE visible: apagada mientras no haya nada que aplicar. */
.th-plan-actions.is-empty .th-plan-count { color: var(--muted); font-style: italic; }
.th-plan-actions button[disabled] { opacity: .45; cursor: not-allowed; }
/* La franja de color de la fila del cliente (izquierda) también sube de 3 a 5 px. */
.jh-wrap .sh-hh-row.jh-row-unassigned > .sh-hh-cty { box-shadow: inset 5px 0 0 #98a3b1; }
.jhw-row.jh-row-unassigned .jhw-cty { box-shadow: inset 5px 0 0 #98a3b1; }

/* Aviso de REASIGNACIÓN en el modal de aplicar: qué servicios ya tienen a alguien y a quién se le quita.
   Ámbar (es un aviso, no un error) y con la lista completa, no un resumen. */
.th-cf-warn { display: flex; align-items: flex-start; gap: 9px; margin: 12px 18px 0; padding: 10px 12px;
  border-radius: 9px; background: #fdf6e6; border: 1px solid #efdcb0; border-left: 3px solid #dda93c;
  font-size: 12px; line-height: 1.45; color: #6b5320; }
.th-cf-warn .ic { flex: 0 0 auto; color: #c8901f; margin-top: 1px; }
.th-cf-warn b { color: #4e3c12; }
.th-cf-warn ul { margin: 5px 0 0; padding-left: 16px; }
.th-cf-warn li { margin: 2px 0; }

/* ── Control de entrada: filtros + columna de FICHAJE ──────────────────────────────────────────────
   La pestaña es la lista de "quién tenía que entrar y si entró". Con 90 personas en 11 centros hacía
   falta filtrar (petición del jefe, 28-jul-2026): día, tipo, provincia, centro, estado y búsqueda. */
.sh-entry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sh-entry-what { margin: 2px 0 0; font-size: 12.5px; color: #7b8798; line-height: 1.45; max-width: 720px; }
.sh-entry-otherday { font-size: 12px; font-weight: 700; color: #a24d0b; }
.sh-entry-tools { margin-top: 8px; }
.sh-entry-daybar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.sh-entry-daybar .sh-entry-date { width: 150px; }
.sh-entry-daybar .sh-psearch { flex: 1 1 220px; min-width: 180px; }
.sh-entry-today { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #2f7d4f; background: #eaf6ee; border: 1px solid #cbe8d5; border-radius: 6px; padding: 3px 8px; }
/* Origen del fichaje: ATurnos manda, la tarjeta respalda, "a mano" es lo que puso una persona. */
.sh-src { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.sh-src-atn { background: #eaf6ee; color: #2f7d4f; }
.sh-src-wm  { background: #eef2f7; color: #5c6b7e; }
.sh-src-man { background: #fdf3e2; color: #7a5510; }
/* Control de entrada · columna "Por qué": lo explicado (misma explicación que la Vista horaria, viven en la
   MISMA fila de cobertura) o el botón para explicarlo. Explicar NO cambia el estado. */
.sh-why { border: 0; border-radius: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-why-done { background: #eef2f7; color: #5c6b7e; }
.sh-why-done:hover { background: #e2e8f0; }
.sh-why-todo { background: #fdf3e2; color: #a24d0b; }
.sh-why-todo:hover { background: #fbe6c8; }
.sh-why-cov { font-size: 10px; font-weight: 700; color: #2f7d4f; background: #eaf6ee; border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.sh-chipf-sep { display: inline-block; width: 1px; height: 18px; background: #dbe3ec; margin: 0 6px; vertical-align: middle; }
.sh-chipf.is-warn { border-color: #e6c79a; color: #7a5510; }
.sh-chipf.is-warn.is-active { background: #a24d0b; border-color: #a24d0b; color: #fff; }
/* "Sin confirmar" cuenta solo a quien YA debería haber entrado; los que aún no empiezan se dicen aparte. */
.sh-sum-soon { font-style: normal; font-size: 10.5px; font-weight: 700; color: #8a98ab; }
/* Puesto vacío atribuido al SALIENTE (se fue antes y el relevo aún no había entrado): mismo dato que la
   pastilla roja del entrante, pero de quien lo causó → ámbar, el color de "salió antes de su hora". */
.sh-hbar-desc.is-out { background: #e0a021; }
/* INCIDENCIA EXPLICADA: cartelito con el motivo en la propia banda (el detalle, al pasar el ratón). No
   cambia el color de la barra —el fallo sigue contando—, solo dice que ya está justificado y por qué. */
.sh-hbar-why { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255, 255, 255, .82); color: #4a5665 !important; border: 1px solid rgba(90, 105, 125, .22);
  font-weight: 700; font-size: 8.5px; line-height: 1; padding: 2px 5px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.sh-hbar-why svg { flex: none; color: #2f7d4f; }
/* "Editar la lista" junto a la etiqueta Motivo: el catálogo de motivos es del TMS y se amplía desde aquí,
   que es donde se nota que falta uno (si hay que escribirlo a mano en "Qué pasó"…). */
/* El <label> es flex en columna, así que el float NO aplica (queda como fila propia): se alinea al final
   para que quede a la derecha, encima del desplegable. */
.sh-explain-lbl { float: right; align-self: flex-end; margin-top: -2px; font-weight: 400; }
.sh-explain-cat { border: 0; background: transparent; color: #8a5a2b; font-size: 11px; font-weight: 700;
  cursor: pointer; padding: 0 2px; display: inline-flex; align-items: center; gap: 3px; }
/* NO cambia de aspecto al pasar el ratón: la regla global `button:hover` (0,1,1) le ganaba a la de arriba
   (0,1,0) y le pintaba el fondo del color de marca — sobre texto marrón se quedaba un bloque macizo y el
   texto desaparecía. Se fijan los tres estados con más especificidad. */
.sh-explain-cat:hover,
.sh-explain-cat:focus,
.sh-explain-cat:active { background: transparent; color: #8a5a2b; box-shadow: none; transform: none; text-decoration: none; }
/* Lista DE FÁBRICA en el gestor de desplegables: se ve lo que hay hoy (aunque no esté en BD) para que el
   primer cambio no la sustituya por una sola opción. */
.cat-mgr-factory-note { font-size: 12px; color: #5b6b7c; background: #f5f8fb; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; line-height: 1.35; }
.cat-mgr-item.is-factory { opacity: .72; background: #fbfcfd; }
.cat-mgr-factory-act { margin-top: 8px; }
.cat-mgr-factory-act button { font-size: 12px; }
/* «+N paradas» en la banda: el viaje multiparada acaba en la última descarga y conviene verlo. */
.jh-stops { font-style: normal; font-size: 9px; font-weight: 700; opacity: .75; letter-spacing: .2px; }

/* ── PLANIFICADOR · grupos combinables (F1) ──────────────────────────────────────────────────────
   Marca de grupo en la banda (letra + color) y tira de grupos bajo la paleta. El color NO dice nada
   del estado del servicio: solo agrupa lo que puede hacer un mismo camión. */
.jh-grp { position: absolute; left: 3px; top: 3px; z-index: 2; font-style: normal; font-weight: 800;
  font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 4px; color: #fff; letter-spacing: .3px; }
.jh-grp.is-solo { background: #94a3b8 !important; }
.sh-hbar .jh-grp + .sh-hbar-l1 { padding-left: 16px; }
.jh-grp-c0 { background: #2563eb; } .jh-grp-c1 { background: #b45309; } .jh-grp-c2 { background: #15803d; }
.jh-grp-c3 { background: #7c3aed; } .jh-grp-c4 { background: #be123c; } .jh-grp-c5 { background: #0e7490; }
.jh-grp-c6 { background: #a16207; } .jh-grp-c7 { background: #4338ca; }
.th-groups { border-top: 1px solid #e6e9ef; padding: 8px 12px 10px; background: #fbfcfe; }
.th-groups-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3a4658; margin-bottom: 7px; }
.th-groups-head .muted { font-size: 11px; }
.th-grp-clear { margin-left: auto; font-size: 11px; padding: 4px 9px; }
.th-groups-list { display: flex; flex-wrap: wrap; gap: 7px; }
.th-grp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d7dee8; border-left-width: 5px;
  background: #fff; color: #22303f; border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.th-grp-chip b { font-size: 13px; }
.th-grp-chip .th-grp-h { color: #6b7a8d; font-weight: 500; font-size: 11px; }
.th-grp-chip.is-warn { border-color: #e6b800; background: #fffdf3; }
.th-grp-chip.is-solo { opacity: .8; }
.th-grp-chip.is-on { box-shadow: 0 0 0 2px rgba(37,99,235,.35); }
.th-grp-chip.th-drop-hot { box-shadow: 0 0 0 3px rgba(21,128,61,.35); border-color: #15803d; }
.th-grp-chip.jh-grp-c0 { border-left-color: #2563eb; } .th-grp-chip.jh-grp-c1 { border-left-color: #b45309; }
.th-grp-chip.jh-grp-c2 { border-left-color: #15803d; } .th-grp-chip.jh-grp-c3 { border-left-color: #7c3aed; }
.th-grp-chip.jh-grp-c4 { border-left-color: #be123c; } .th-grp-chip.jh-grp-c5 { border-left-color: #0e7490; }
.th-grp-chip.jh-grp-c6 { border-left-color: #a16207; } .th-grp-chip.jh-grp-c7 { border-left-color: #4338ca; }
.th-grp-btn { margin-right: auto; }
.th-grp-cover { margin-left: auto; font-size: 11px; padding: 5px 10px; }
.th-grp-clear { margin-left: 6px; }
.th-grp-who { display: inline-flex; align-items: center; gap: 3px; background: #eaf3ea; color: #1f5f2f;
  border-radius: 5px; padding: 1px 5px; font-size: 10px; font-weight: 700; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-grp-who.is-ext { background: #f3eee6; color: #7a5a2b; }

/* ── NORMAS del planificador (tabla abierta) ───────────────────────────────────────────────────── */
.th-rules-card { max-width: min(860px, 96vw); width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.th-rules-list { overflow: auto; padding: 4px 2px 10px; display: flex; flex-direction: column; gap: 6px; }
.th-rules-empty { color: #6b7a8d; font-size: 13px; padding: 14px; background: #f7f9fc; border-radius: 8px; }
.th-rule { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e2e8f0; border-radius: 9px;
  padding: 8px 10px; background: #fff; }
.th-rule.is-off { opacity: .5; background: #f7f8fa; }
.th-rule-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; }
.th-rule-main b { font-size: 13px; color: #22303f; }
.th-rule-sc { color: #3a4658; }
.th-rule-pa { color: #1f5f2f; font-weight: 700; }
.th-rule-vg { color: #7a5a2b; font-weight: 700; }
.th-rule-note { flex: 1 0 100%; font-style: normal; color: #6b7a8d; font-size: 11px; }
.th-rule-act { display: flex; gap: 5px; }
.th-rule-act button { font-size: 11px; padding: 4px 9px; }
.th-rule-x { color: #b3261e; }
.th-rule-new { border-top: 1px solid #e6e9ef; padding-top: 10px; margin-top: 6px; }
.th-rule-new h3 { margin: 0 0 6px; font-size: 13px; }
.th-rule-help { margin: 0 0 8px; font-size: 11px; color: #6b7a8d; }
.th-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.th-rule-grid label { font-size: 11px; color: #55637a; display: flex; flex-direction: column; gap: 3px; }
.th-rule-grid label.wide { grid-column: 1 / -1; }
.th-rule-grid input, .th-rule-new select { font-size: 12px; padding: 5px 7px; }
.th-grp-rules { font-size: 11px; padding: 5px 10px; margin-left: auto; }
.th-grp-cover { margin-left: 6px; }
@media (max-width: 720px) { .th-rule-grid { grid-template-columns: 1fr 1fr; } }
.th-grp-rem { display: inline-flex; align-items: center; gap: 4px; background: #fff8e6; color: #7a5a2b;
  border: 1px solid #f0dcae; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 700; margin-left: auto; }
.th-grp-rem + .th-grp-rules { margin-left: 6px; }
.th-rule.is-editing { border-color: #b6852f; box-shadow: 0 0 0 2px rgba(182,133,47,.18); }
.th-rule-new.is-editing { background: #fffdf6; border-radius: 9px; padding: 10px; border: 1px solid #f0dcae; }
.th-rule-rg { font-size: 10px; font-weight: 800; color: #55637a; background: #eef2f7; border-radius: 5px; padding: 1px 6px; }
.th-rule-rg.is-hard { background: #fdecea; color: #b3261e; }
.th-rule-rg.is-soft { background: #eaf3ea; color: #1f5f2f; }
.th-rule-rigor .th-rule-rigor-row { display: flex; align-items: center; gap: 10px; }
.th-rule-rigor input[type="range"] { flex: 1 1 auto; }
.th-rule-rigor b { font-size: 11px; color: #22303f; white-space: nowrap; }
.th-rule-rigor-help { display: block; font-style: normal; font-size: 10px; color: #8a97a8; margin-top: 2px; }
/* Salida MÁS TARDE del fin de turno: se ve, pero no es un fallo (suele ser que cubrió o que el relevo
   llegó tarde) → azul informativo, nunca rojo. */
.sh-hbar-out.is-over { box-shadow: inset 0 -0.55em 0 rgba(37,99,235,.22); }
/* Salida ANOTADA A MANO (alguien avisó de que se iba): se distingue del fichaje. */
.sh-hbar-out.is-manual { box-shadow: inset 0 -0.55em 0 rgba(15,118,110,.20); font-style: italic; }
.sh-pop-horas { display: inline-flex; align-items: center; gap: 4px; color: #0f766e; font-weight: 700; }
.sh-exit-modal { max-width: 380px; }
.sh-exit-modal .kpi-explain-body label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sh-exit-modal input[type="time"] { flex: none; width: 120px; }
.sh-hbar-over { font-style: normal; font-size: 9px; font-weight: 800; color: #1d4ed8; margin-left: 2px; }
/* El retraso que NO llega a «tarde» (por debajo de los 10 min de gracia del KPI): el color de la barra
   sigue siendo el del estado, y el desvío se marca aquí — verlo es cosa del operativo, no del KPI. */
.sh-hbar-late { font-style: normal; font-size: 9px; font-weight: 800; color: #b45309; margin-left: 1px; }
.sh-pop-why.is-over { background: #e8effb; color: #1d4ed8; }
/* Fichaje MUY TARDE (>15 min, norma del jefe 01-08-2026): la hora del fichaje en ROJO y RECUADRADA.
   El fondo de la barra sigue siendo el del estado del KPI; esto es el dedo señalando la cifra. */
.sh-hbar-in { font-style: normal; }
.sh-hbar-in.is-verylate { color: #b3261e; font-weight: 800; border: 1px solid #d64b3f; border-radius: 4px;
  padding: 0 3px; background: rgba(255, 255, 255, .8); }
/* …y al lado, el cuánto en palabras y EN ROJO: «Ha fichado 1 h 21 min tarde». */
.sh-hbar-vltxt { font-style: normal; font-weight: 800; font-size: 8.5px; color: #b3261e; margin-left: 3px; }
/* «No ha fichado»: punto rojo parpadeante mientras el turno está EN CURSO sin fichaje; en un turno ya
   terminado y confirmado «No entró» queda el texto solo, sin parpadeo. */
.sh-hbar-noshow { flex: none; display: inline-flex; align-items: center; gap: 3px; color: #b3261e;
  font-weight: 800; font-size: 8.5px; letter-spacing: .2px; text-transform: uppercase; }
.sh-hbar-noshow .sh-dot-blink { width: 7px; height: 7px; border-radius: 50%; background: #d64b3f;
  display: inline-block; animation: shDotBlink 1s ease-in-out infinite; }
@keyframes shDotBlink { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }

/* ── Vista horaria de Shunter · filtro de CENTROS ────────────────────────────────────────────────── */
.sh-hh-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px 8px; }
.sh-hhf-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #55637a; }
.sh-hhf-grp { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px; border: 1px solid #e6e9ef;
  border-radius: 8px; background: #fbfcfe; }
.sh-hhf-prov { border: 0; background: transparent; color: #6b7a8d; font-size: 10px; font-weight: 800;
  letter-spacing: .3px; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.sh-hhf-prov:hover { background: #eef2f7; color: #22303f; }
.sh-hhf-prov.is-on { background: #e6efe8; color: #1f5f2f; }
.sh-hhf-c, .sh-hhf-all { border: 1px solid #d7dee8; background: #fff; color: #55637a; border-radius: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.sh-hhf-c:hover, .sh-hhf-all:hover { border-color: #b6852f; color: #22303f; }
.sh-hhf-c.is-on, .sh-hhf-all.is-on { background: #7a5a2b; border-color: #7a5a2b; color: #fff; }
.sh-hhf-n { font-size: 10px; font-weight: 700; color: #7a5a2b; background: #fdf6e8; border-radius: 5px; padding: 2px 6px; }
@media (max-width: 720px) { .sh-hh-filter { padding: 6px 8px; } }
/* HORAS: labor en el centro sin turno publicado. Tono propio (turquesa) — no es puntualidad, es trabajo
   que hay que ver: cubrir un rato, llevar una unidad a taller, un cambio de unidad. */
.sh-hbar-horas { background: #e6f4f4; border: 1px solid #6aa9a9; border-left: 4px solid #2f7f7f; color: #1d4f4f; }
.sh-hbar-horas .sh-hbar-card { background: #2f7f7f; color: #fff; }
.sh-lg-horas { background: #e6f4f4; color: #1d4f4f; }
.sh-hbar-horas .sh-hbar-ok { font-style: normal; font-weight: 800; opacity: .95; }

/* TARJETA PUESTA Y SIN FICHAR (norma del jefe, 30-jul-2026). Ambar, como todo lo que "hay que mirar" en
   shunter: la persona ESTA en el centro (WeMob ve su tarjeta en un camion de la geo-cerca) pero no ha
   fichado en ATurnos, asi que no es un "no ha venido" sino un "avisale para que fiche". */
.sh-hbar-cardin { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 0 5px;
  border-radius: 7px; background: rgba(224,160,33,.22); border: 1px solid rgba(224,160,33,.55);
  color: #7a5106; font-size: 10px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.sh-hbar.has-cardin { box-shadow: inset 3px 0 0 #e0a021; }
/* La misma noticia dentro del aviso "¿Han entrado a turno?": una linea propia bajo el nombre, para que se
   lea antes de decidir entre "Si, ha entrado" y "No". */
.sh-due-card { display: block; margin-top: 4px; padding: 5px 8px; border-radius: 8px;
  background: rgba(224,160,33,.12); border: 1px solid rgba(224,160,33,.4); color: #7a5106; font-size: 11.5px; }
.sh-due-card b { font-weight: 700; }
.sh-due-card em { display: block; margin-top: 2px; font-style: normal; color: #6b5a3a; font-size: 11px; }

/* == EL COACH DEL PLANIFICADOR ======================================================================
   Pantalla completa de normas y tolerancias. Manda una cosa por encima de la estetica (aviso del jefe,
   30-07-2026): que se lea SIN ESFUERZO, o el operativo deja de entrenarlo. De ahi la frase grande por
   norma, el deslizador con su significado al lado, y nada de rejillas de campos vacios. */
.coach-overlay { position: fixed; inset: 0; z-index: 5200; background: rgba(15,23,42,.55);
  display: flex; align-items: stretch; justify-content: center; padding: 18px; overflow: auto; }
.coach-panel { background: #fff; border-radius: 14px; width: min(1180px, 100%); max-height: calc(100dvh - 36px);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,.28); }
.coach-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 16px 20px 14px; border-bottom: 1px solid #e6ebf2; }
.coach-eyebrow { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .6px; color: #7c8798; }
.coach-head h2 { margin: 2px 0 4px; font-size: 21px; }
.coach-head p { margin: 0; max-width: 78ch; font-size: 12.5px; color: #5b6676; line-height: 1.5; }
.coach-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 20px;
  border-bottom: 1px solid #eef2f7; background: #fbfcfe; }
.coach-bar input[type=search] { flex: 0 1 220px; height: 32px; border: 1px solid #d7dee8; border-radius: 8px; padding: 0 10px; }
.coach-fams { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-fchip { border: 1px solid #d7dee8; background: #fff; border-radius: 999px; padding: 4px 11px;
  font-size: 12px; cursor: pointer; color: #46505f; }
.coach-fchip.is-on { background: #6b4f1d; border-color: #6b4f1d; color: #fff; font-weight: 600; }
.coach-only { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5b6676; }
.coach-count { font-size: 11.5px; color: #7c8798; margin-left: auto; }
.coach-body { padding: 14px 20px 20px; overflow: auto; }
.coach-fam { margin-bottom: 18px; }
.coach-fam > header { margin-bottom: 8px; }
.coach-fam h3 { margin: 0; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: #6b4f1d; }
.coach-fam header p { margin: 1px 0 0; font-size: 11.5px; color: #8a94a3; }
.coach-card { border: 1px solid #e6ebf2; border-radius: 11px; padding: 11px 13px; margin-bottom: 8px; background: #fff; }
.coach-card.is-off { background: #f7f8fa; opacity: .72; }
.coach-card-top { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.coach-frase { margin: 0; font-size: 14px; line-height: 1.45; color: #1f2937; flex: 1 1 auto; min-width: 0; }
.coach-card-acts { display: flex; gap: 5px; flex: none; }
.coach-mini { border: 1px solid #d7dee8; background: #fff; border-radius: 7px; padding: 3px 9px;
  font-size: 11.5px; cursor: pointer; color: #46505f; }
.coach-mini:hover { border-color: #6b4f1d; color: #6b4f1d; }
.coach-mini.is-del:hover { border-color: #c0392b; color: #c0392b; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.coach-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: #eef2f7; color: #5b6676; }
.coach-chip.is-off { background: #f1d9d6; color: #8a3a2e; }
.coach-chip.is-info { background: #fdf0d5; color: #7a5106; }
.coach-tol { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.coach-tol label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5b6676; flex: 1 1 320px; }
.coach-tol input[type=range] { flex: 1 1 auto; min-width: 140px; accent-color: #6b4f1d; }
.coach-tol-txt { font-size: 12px; color: #6b4f1d; font-weight: 600; flex: 1 1 260px; }
.coach-note { margin: 6px 0 0; font-size: 11.5px; color: #7c8798; font-style: italic; }
.coach-empty { padding: 26px; text-align: center; color: #8a94a3; font-size: 13px; }
.coach-form, .coach-picker { border: 1px solid #d9c9a3; background: #fffdf7; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; }
.coach-form-head h3 { margin: 0 0 3px; font-size: 15px; }
.coach-form-help { margin: 0 0 4px; font-size: 12px; color: #5b6676; }
.coach-form-ej { margin: 0 0 4px; font-size: 12px; color: #6b4f1d; }
.coach-form-info { margin: 0; font-size: 11.5px; color: #7a5106; background: #fdf0d5; padding: 5px 8px; border-radius: 7px; }
.coach-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin: 11px 0; }
.coach-form-grid label, .coach-form-note { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: #5b6676; }
.coach-form-grid input, .coach-form-grid select, .coach-form-note input { height: 32px; border: 1px solid #d7dee8;
  border-radius: 8px; padding: 0 9px; font-size: 13px; background: #fff; }
.coach-help { font-size: 10.5px; color: #8a94a3; font-style: normal; }
.coach-form-tol { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.coach-form-tol label { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5b6676; flex: 1 1 320px; }
.coach-form-tol input[type=range] { flex: 1 1 auto; accent-color: #6b4f1d; }
.coach-form-tol b { font-size: 12.5px; color: #6b4f1d; flex: 1 1 260px; }
.coach-preview { margin: 10px 0 4px; padding: 8px 10px; background: #fff; border: 1px dashed #d9c9a3; border-radius: 8px; }
.coach-preview span { display: block; font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: #8a94a3; }
.coach-preview b { font-size: 13.5px; color: #1f2937; font-weight: 600; }
/* Mientras la norma no dice de qué habla, aquí va una INDICACIÓN, no una frase: si se pinta igual que
   la norma compuesta, parece que el TMS propone algo por su cuenta (queja del jefe, 30-07-2026). */
.coach-preview b.is-hint { color: #8a94a3; font-weight: 500; font-style: italic; }

/* == C6 · SIMULACIÓN antes de guardar + LO QUE CORRIGES =========================================== */
.coach-sim { margin: 8px 0 2px; padding: 10px 12px; border: 1px solid #cfe0f5; background: #f6faff;
  border-radius: 10px; }
.coach-sim h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #1d4ed8; }
.coach-sim-nums { font-size: 13px; color: #1f2937; margin-bottom: 6px; }
.coach-sim-nums b.is-worse { color: #b91c1c; }
.coach-sim-nums b.is-better { color: #1f7a4d; }
.coach-sim ul { margin: 0; padding-left: 18px; font-size: 12px; color: #46505f; }
.coach-sim li { margin: 2px 0; }
.coach-sim-note { margin: 6px 0 0; font-size: 11px; color: #8a94a3; }
.coach-sim-wait { margin: 0; font-size: 12px; color: #6b7280; }
.coach-learn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 16px 6px;
  border: 1px solid #e6ebf2; border-radius: 10px; background: #fff; }
.coach-learn > div { flex: 1 1 auto; min-width: 0; }
.coach-learn b { display: block; font-size: 12.5px; color: #1f2937; }
.coach-learn-sub { display: block; font-size: 11px; color: #8a94a3; margin-top: 2px; }
.coach-learn > button { flex: 0 0 auto; height: 30px; padding: 0 11px; font-size: 11.5px; }

/* == C3-ter · TRES PLANIFICACIONES DEL MISMO DÍA ====================================================
   Tres tarjetas en fila, cada una con su criterio arriba, sus NÚMEROS en medio (que es por lo que se
   elige) y el reparto grupo a grupo debajo. */
/* Las tres tarjetas ocupan lo que ocupan: el panel del coach se estira (está pensado para una lista
   larga) y aquí dejaba medio folio en blanco debajo. */
.th-planes { width: min(1180px, 100%); align-self: flex-start; padding-bottom: 14px; }
.th-planes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;
  padding: 12px 16px 4px; }
.th-plan-card { border: 1px solid #e6ebf2; border-radius: 12px; background: #fff; padding: 12px 13px;
  display: flex; flex-direction: column; gap: 9px; }
.th-plan-card header { display: grid; grid-template-columns: 30px 1fr; grid-template-areas: "l t" ". p"; gap: 2px 9px; }
.th-pl-let { grid-area: l; width: 28px; height: 28px; border-radius: 8px; background: #6b4f1d; color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.th-plan-card header h3 { grid-area: t; margin: 3px 0 0; font-size: 14.5px; color: #1f2937; }
.th-plan-card header p { grid-area: p; margin: 0; font-size: 12px; color: #46505f; }
.th-pl-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center;
  border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; padding: 8px 0; }
.th-pl-nums b { display: block; font-size: 18px; color: #1f2937; line-height: 1.1; }
.th-pl-nums b.is-casa { color: #1f7a4d; }
.th-pl-nums b.is-fuera { color: #6b4f1d; }
.th-pl-nums b.is-warn { color: #b45309; }
.th-pl-nums span { display: block; font-size: 10px; color: #8a94a3; margin-top: 2px; line-height: 1.25; }
.th-pl-det { margin: 0; font-size: 11.5px; color: #6b7280; }
.th-pl-warn { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #b45309;
  background: #fffbeb; border: 1px solid #fde9c8; border-radius: 8px; padding: 6px 8px; }
/* La propuesta que MUEVE horarios: mismo cartel ámbar pero con el reloj y en un tono propio, porque es
   la información que decide si se elige o no (los cambios se confirman viaje a viaje al Aplicar). */
.th-pl-warn.is-move { color: #92400e; background: #fef3e2; border-color: #fbd9a5; font-weight: 600;
  flex-wrap: wrap; }
.th-pl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
  max-height: 260px; overflow: auto; }
.th-pl-list li { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.th-pl-ruta { flex: 1 1 auto; min-width: 0; color: #6b7280; font-size: 11px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.th-pl-list b { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-pl-list b.is-casa { color: #1f7a4d; }
.th-pl-list b.is-fuera { color: #6b4f1d; }
.th-plan-card > button { align-self: stretch; }
.th-pl-igual { margin: 12px 16px 0; padding: 8px 11px; border: 1px solid #cfe6d8; background: #f2fbf6;
  border-radius: 9px; font-size: 12.5px; color: #1f5c3d; }
.th-grp-planes { margin-left: 6px; }
.th-plan-card.is-igual { background: #fbfcfe; }
.th-pl-mismo { display: inline-block; font-style: normal; font-size: 10px; font-weight: 600; color: #5b6676;
  background: #eef2f7; border-radius: 999px; padding: 2px 7px; vertical-align: middle; margin-left: 4px; }

/* == EL VACÍO ENTRE VIAJES (dentro del panel «por qué») ============================================
   Un renglón por enlace: de dónde a dónde, cuántos km y de dónde sale ese número. Cuando no se sabe,
   una casilla para escribirlo — es la manera de que la norma de vacío deje de callar. */
.th-vacio { margin: 8px 0 2px; padding: 9px 10px; border: 1px solid #e6ebf2; border-radius: 10px;
  background: #fbfcfe; }
.th-vacio h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 5px; font-size: 12px; color: #1f2937; }
.th-vacio-warn { font-style: normal; font-size: 10px; font-weight: 700; color: #b45309;
  background: #fffbeb; border: 1px solid #fde9c8; border-radius: 999px; padding: 1px 7px; }
.th-vacio-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 11.5px; }
.th-vacio-row > span { flex: 1 1 auto; min-width: 0; color: #46505f; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.th-vacio-row > b { flex: 0 0 auto; color: #1f2937; }
.th-vacio-row > i { flex: 0 0 auto; font-style: normal; font-size: 10px; color: #8a94a3; }
.th-vacio-set { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #8a94a3; }
.th-vacio-set input { width: 62px; height: 26px; border: 1px solid #d7dee8; border-radius: 7px;
  padding: 0 6px; font-size: 11.5px; }
.th-vacio-set button { height: 26px; padding: 0 8px; font-size: 11px; }

/* == EL CATÁLOGO DE DISTANCIAS DEL PLANIFICADOR ====================================================
   Una fila por trayecto encadenado. Los que no se saben salen primero: son los que hay que escribir. */
.th-km { width: min(900px, 100%); align-self: flex-start; padding-bottom: 12px; }
.th-km-list { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; }
.th-km-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #e6ebf2;
  border-radius: 9px; background: #fff; font-size: 12.5px; }
.th-km-row.is-none { border-color: #fde9c8; background: #fffbeb; }
.th-km-ruta { flex: 1 1 auto; min-width: 0; color: #1f2937; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.th-km-veces { flex: 0 0 auto; font-style: normal; font-size: 11px; color: #8a94a3; }
.th-km-src { flex: 0 0 150px; font-style: normal; font-size: 10.5px; color: #8a94a3; text-align: right; }
.th-km-set { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #8a94a3; }
.th-km-set input { width: 68px; height: 28px; border: 1px solid #d7dee8; border-radius: 7px; padding: 0 7px;
  font-size: 12px; text-align: right; }
.th-km-row > button { flex: 0 0 auto; height: 28px; padding: 0 9px; font-size: 11px; }
/* Quitar un trayecto que no existe en la practica (y poder devolverlo). */
.th-km-drop { background: none; border: 1px solid transparent; color: #97a5b6; cursor: pointer; }
.th-km-drop:hover { border-color: #f0c4be; color: #b23b31; }
.th-km-out { border-top: 1px dashed #dde4ec; margin-top: 10px; padding-top: 8px; }
.th-km-out > summary { color: #8a97a8; cursor: pointer; font-size: 11.5px; font-weight: 600; }
.th-km-outrow { align-items: center; color: #56657a; display: flex; font-size: 12px; gap: 10px; justify-content: space-between; padding: 5px 2px; }
.th-km-outrow button { font-size: 11px; padding: 3px 10px; }
@media (max-width: 720px) {
  .th-km-row { flex-wrap: wrap; }
  .th-km-src { flex: 1 1 auto; text-align: left; }
}

/* == C4 · ACCIONES QUE MEJORARÍAN EL DÍA ===========================================================
   Bajo la tira de grupos. No son avisos: son cosas que hacer, con su plazo y lo que se gana. */
.th-acciones { margin-top: 8px; border-top: 1px dashed #e6ebf2; padding-top: 8px; }
.th-acciones h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: #6b4f1d; font-weight: 700; }
.th-acciones h4 span { font-weight: 500; color: #8a94a3; font-size: 11px; }
.th-accion { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 5px;
  border: 1px solid #f0e3c8; background: #fffdf7; border-radius: 10px; }
.th-accion > svg { flex: 0 0 auto; margin-top: 1px; color: #b45309; }
.th-accion > div { flex: 1 1 auto; min-width: 0; }
.th-accion b { display: block; font-size: 12.5px; color: #1f2937; }
.th-acc-gana { display: block; font-size: 11.5px; color: #1f7a4d; margin-top: 1px; }
.th-acc-plazo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #b45309;
  margin-top: 2px; }
.th-acc-nota, .th-acc-det { display: block; font-style: normal; font-size: 10.5px; color: #8a94a3; margin-top: 1px; }
.th-accion > button { flex: 0 0 auto; height: 26px; padding: 0 9px; font-size: 11px; }
@media (max-width: 720px) {
  .th-accion { flex-wrap: wrap; }
  .th-accion > button { margin-left: 21px; }
}
.coach-form-acts { display: flex; justify-content: flex-end; gap: 8px; }
.coach-picker header { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; margin-bottom: 8px; }
.coach-picker h3 { margin: 0; font-size: 15px; }
.coach-picker header p { margin: 2px 0 0; font-size: 12px; color: #5b6676; flex: 1 1 auto; }
.coach-picker-fam { margin-bottom: 10px; }
.coach-picker-fam h4 { margin: 0 0 5px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: #6b4f1d; }
.coach-pick { display: block; width: 100%; text-align: left; border: 1px solid #e6ebf2; background: #fff;
  border-radius: 9px; padding: 8px 11px; margin-bottom: 5px; cursor: pointer; }
.coach-pick:hover { border-color: #6b4f1d; background: #fffdf7; }
.coach-pick b { display: block; font-size: 13px; color: #1f2937; }
.coach-pick span { display: block; font-size: 11.5px; color: #7c8798; margin-top: 1px; }
.coach-pick i { display: inline-block; margin-top: 4px; }
@media (max-width: 720px) {
  .coach-overlay { padding: 8px; }
  .coach-panel { max-height: calc(100dvh - 16px); }
  .coach-head, .coach-bar, .coach-body { padding-left: 12px; padding-right: 12px; }
  .coach-count { margin-left: 0; }
  .coach-card-top { flex-direction: column; }
  .coach-card-acts { align-self: flex-end; }
}

/* == POR QUE ESTA PROPUESTA (C2) ====================================================================
   El "?" de cada grupo abre la lista de razones. Reusa la ficha flotante de shunter (.sh-pop) para no
   inventar otra ventana: misma cabecera con color, misma aspa, mismo comportamiento. */
.th-grp-why { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
  margin-left: 4px; border-radius: 50%; background: rgba(255,255,255,.72); color: #46505f; font-style: normal;
  font-size: 10px; font-weight: 700; cursor: help; flex: none; }
.th-grp-why:hover { background: #fff; color: #6b4f1d; }
.th-porque-pop { width: min(420px, calc(100vw - 24px)); z-index: 5300; }
.th-porque-body { max-height: 60vh; overflow: auto; padding: 8px 10px; }
.th-porque { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #f0f3f7; }
.th-porque:last-child { border-bottom: 0; }
.th-porque svg { flex: none; margin-top: 2px; color: #6b4f1d; }
.th-porque b { display: block; font-size: 12.5px; font-weight: 600; color: #1f2937; line-height: 1.4; }
.th-porque span { display: block; font-size: 11px; color: #7c8798; margin-top: 1px; line-height: 1.35; }
.th-porque-info { display: block; font-size: 10.5px; color: #7a5106; background: #fdf0d5; border-radius: 5px;
  padding: 1px 6px; margin-top: 3px; font-style: normal; }
.th-porque.is-info b { color: #6b5a3a; }

/* La CUENTA del reparto (C3), dentro de la ficha del "por que" del grupo. */
.th-porque-rep { padding: 9px 11px; background: #fbfaf6; border-bottom: 1px solid #ece7dc; }
.th-porque-rep h4 { margin: 0 0 5px; font-size: 13px; color: #1f2937; }
.th-rep-bolsa { font-style: normal; font-size: 10px; background: #e7eefb; color: #2f4d80; border-radius: 999px; padding: 1px 7px; }
.th-rep-sum { list-style: none; margin: 0; padding: 0; }
.th-rep-sum li { font-size: 11.5px; color: #46505f; padding: 1px 0; }
.th-rep-sum li b { display: inline-block; min-width: 30px; color: #6b4f1d; font-weight: 700; }
.th-rep-sum li span { color: #8a94a3; }
.th-rep-tot { border-top: 1px dashed #ded7c7; margin-top: 3px; padding-top: 3px !important; }
.th-rep-alt, .th-rep-out { margin: 5px 0 0; font-size: 11px; color: #7c8798; line-height: 1.4; }
.th-rep-out { color: #8a7f6a; }

/* Import de Laso: separar lo que BLOQUEA (rojo, .laso-warn-box) de lo que solo AVISA (ambar) y de lo que
   esta bien y solo se informa (verde: los conductores ficticios de siempre). Con un solo aviso rojo para
   todo, ver a JULIA en la lista parecia que faltaban 300 servicios por importar. */
.laso-info-box { margin: 8px 0; padding: 8px 11px; border-radius: 9px; font-size: 12px; line-height: 1.45;
  background: rgba(224,160,33,.10); border: 1px solid rgba(224,160,33,.38); color: #6b5a3a; }
.laso-info-box em { display: block; margin-top: 3px; color: #7c8798; font-style: normal; font-size: 11.5px; }
.laso-info-box.is-ok { background: rgba(45,140,80,.08); border-color: rgba(45,140,80,.32); color: #2f6a45; }

.laso-multi-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.laso-multi-list span { font-size: 10.5px; background: #fff; border: 1px solid #cfe3d6; border-radius: 999px; padding: 1px 8px; color: #2f6a45; }

/* == C3-bis - MATRIZ DE POSIBILIDADES ===============================================================
   Una fila por RUTA del dia, con su deslizador. Se lee de arriba abajo sin esfuerzo: que viaje es, que
   dice el historico y cuanta posibilidad hay de darselo. */
.coach-matrix { width: min(920px, 100%); }
.coach-mx-day { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5b6676; }
.coach-mx-day input { height: 30px; border: 1px solid #d7dee8; border-radius: 8px; padding: 0 8px; }
.coach-mx-row { display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 9px 11px; border: 1px solid #e6ebf2; border-radius: 10px; margin-bottom: 6px; background: #fff; }
.coach-mx-what { flex: 1 1 auto; min-width: 0; }
.coach-mx-what b { display: block; font-size: 13px; color: #1f2937; }
.coach-mx-what span { display: block; font-size: 12px; color: #46505f; margin-top: 1px; }
.coach-mx-what i { display: block; font-size: 11px; color: #8a94a3; font-style: normal; margin-top: 2px; }
.coach-mx-set { flex: 0 0 320px; display: flex; align-items: center; gap: 10px; }
.coach-mx-set input[type=range] { flex: 1 1 auto; accent-color: #6b4f1d; }
.coach-mx-set b { flex: 0 0 150px; font-size: 11.5px; color: #6b4f1d; text-align: right; }
.coach-mini.is-mx { border-color: #d9c9a3; color: #6b4f1d; }
@media (max-width: 720px) {
  .coach-mx-row { flex-direction: column; align-items: stretch; }
  .coach-mx-set { flex: 1 1 auto; }
}

/* ── AVERÍAS · el parte impreso: la nota va ANTES de los botones de imprimir (jefe, 01-08-2026) ──── */
.ft-print-note { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #1d4ed8;
  background: #eef4ff; border: 1px solid #d3e0fb; border-radius: 999px; padding: 3px 9px; margin-right: 6px; }
.ft-print-note.is-none { color: #92400e; background: #fef3e2; border-color: #fbd9a5; }

/* ── AVERÍAS · borrar exige decir POR QUÉ (jefe, 01-08-2026) ─────────────────────────────────────── */
.fdel-ask { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.fdel-lbl { font-size: 11.5px; font-weight: 700; color: #334155; }
.fdel-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.fdel-opt { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #1f2937; }
.fdel-note { width: 100%; font-size: 12px; padding: 5px 7px; border: 1px solid #d7dee8; border-radius: 6px; }
.fdel-warn { margin: 0; font-size: 11px; color: #b45309; }