/*
  Paleta corporativa CCCS (cccs.cl): azul marino #041E42, rojo #E83840 y blanco.
  El azul marino es el color estructural (textos, botones, estados activos). El rojo es acento de
  marca (logo, indicador del menu, CTA de la portada): no se usa en botones de la app porque las
  acciones destructivas ya son rojas y se confundirian.
*/
:root {
  --color-fondo: #f5f7fa;
  --color-fondo-suave: #eef2f6;
  --color-superficie: #ffffff;
  --color-superficie-media: #e8edf4;
  --color-superficie-fuerte: #dde4ee;
  --color-primario: #041e42;
  --color-primario-fuerte: #03152f;
  --color-secundario: #2a5298;
  --color-acento: #e83840;
  --color-marca: #e83840;
  --color-marca-fuerte: #c9262f;
  --color-marca-suave: #fdecee;
  --color-texto: #0b1a30;
  --color-texto-suave: #475569;
  --color-borde: #cbd5e1;
  --color-error: #ba1a1a;
  --color-error-fondo: #ffdad6;
  --sombra-fuerte: 0 25px 60px rgba(4, 30, 66, 0.18);
}

.driver-scoring-page {
  display: grid;
  gap: 24px;
}

.driver-scoring-filters,
.driver-scoring-summary {
  margin: 0;
}

.driver-scoring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 24px;
  align-items: start;
}

.driver-scoring-hero,
.driver-scoring-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
}

.driver-scoring-hero__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.driver-scoring-hero__head h2,
.driver-scoring-card h3 {
  margin: 4px 0 0;
  color: #041e42;
}

.driver-scoring-hero__head p,
.driver-scoring-card p {
  margin: 8px 0 0;
  color: #2f3747;
}

.driver-scoring-hero__head > strong {
  font-size: 2.2rem;
  color: #041e42;
}

.driver-scoring-ranking,
.driver-scoring-side,
.driver-scoring-detail-list,
.driver-scoring-formula {
  display: grid;
  gap: 14px;
}

.driver-scoring-rank-card {
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  text-align: left;
  cursor: pointer;
}

.driver-scoring-rank-card:hover,
.driver-scoring-rank-card--active {
  border-color: #041e42;
  box-shadow: 0 12px 26px rgba(0, 31, 63, 0.08);
}

.driver-scoring-rank-card__score {
  aspect-ratio: 1;
  border-radius: 8px;
  display: grid;
  place-items: center;
  align-content: center;
  color: #fff;
}

.driver-scoring-rank-card__score strong {
  font-size: 1.65rem;
  line-height: 1;
}

.driver-scoring-rank-card__score span,
.driver-scoring-rank-card > div > span,
.driver-scoring-detail-list span,
.driver-scoring-formula span {
  color: #2f3747;
}

.driver-scoring-rank-card__score span {
  color: #fff;
  font-weight: 700;
}

.driver-scoring-rank-card__score--high { background: #2a9d8f; }
.driver-scoring-rank-card__score--medium { background: #e76f51; }
.driver-scoring-rank-card__score--low { background: #ba1a1a; }

.driver-scoring-rank-card > div > strong {
  display: block;
  color: #041e42;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.driver-scoring-mini-bars {
  display: grid;
  gap: 6px;
  margin-top: 26px;
}

.driver-scoring-mini-bars i {
  display: block;
  height: 7px;
  border-radius: 8px;
  background: linear-gradient(90deg, #2a9d8f, #e76f51, #ba1a1a);
}

.driver-scoring-focus {
  border-left: 4px solid #ba1a1a;
}

.driver-scoring-formula {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-scoring-formula span,
.driver-scoring-detail-list span {
  border: 1px solid #e7ecf3;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.driver-scoring-formula strong,
.driver-scoring-detail-list strong {
  color: #041e42;
}

.driver-scoring-table th,
.driver-scoring-table td {
  white-space: nowrap;
}

@media (max-width: 980px) {
  .driver-scoring-layout,
  .driver-scoring-filters,
  .driver-scoring-summary {
    grid-template-columns: 1fr;
  }

  .driver-scoring-hero__head,
  .driver-scoring-rank-card {
    grid-template-columns: 1fr;
  }

  .driver-scoring-rank-card__score {
    width: 92px;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: 'Inter', sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
}

* {
  box-sizing: border-box;
}

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

button {
  cursor: pointer;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.login-shell {
  min-height: 100vh;
}

.login-screen {
  min-height: 100vh;
  background: #ffffff;
}

.login-panel {
  display: flex;
  min-height: 100vh;
}

.login-panel__left {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.login-content {
  width: 100%;
  max-width: 28rem;
}

.login-logo-block {
  margin-bottom: 3rem;
}

.login-logo,
.portal-brand-title {
  color: var(--color-primario-fuerte);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  margin: 0 0 0.5rem;
}

.login-logo-img {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 0.9rem;
}

.login-logo-line {
  height: 0.25rem;
  width: 3rem;
  border-radius: 999px;
  background: var(--color-marca);
}

.login-heading {
  margin-bottom: 2.5rem;
}

.login-heading h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.login-heading p {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  font-weight: 500;
}

.login-form {
  display: grid;
  gap: 1.5rem;
}

.login-field {
  display: grid;
  gap: 0.5rem;
}

.login-field label {
  color: var(--color-texto);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.login-field__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.login-field__head a,
.login-mfa-link button,
.login-ghost-icon {
  color: var(--color-primario);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.login-field__head a {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.login-input-wrap {
  position: relative;
}

.login-input-wrap > .material-symbols-outlined {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(68, 71, 78, 0.6);
  font-size: 1.25rem;
}

.login-input-wrap input {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 0.5rem;
  background: #f8f9fa;
  font-size: 0.92rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-input-wrap input:focus,
.portal-search input:focus,
.filtros-panel select:focus,
.filtros-panel input:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.login-ghost-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  width: 100%;
  padding-right: 2.5rem;
}

.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--color-primario);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
}

.password-toggle .material-symbols-outlined {
  font-size: 1.25rem;
}

.login-error {
  border: 1px solid rgba(186, 26, 26, 0.18);
  background: #ffefed;
  color: #93000a;
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.login-submit-wrap {
  padding-top: 0.25rem;
}

.login-submit,
.boton-principal {
  border: 0;
  border-radius: 0.5rem;
  background: var(--color-primario);
  color: #ffffff;
  font-weight: 800;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.login-submit {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  box-shadow: 0 18px 40px rgba(4, 30, 66, 0.22);
}

/* En la portada el CTA va en rojo CCCS, como en cccs.cl; dentro de la app los botones son azul marino. */
.login-form .login-submit {
  background: var(--color-marca);
  box-shadow: 0 18px 40px rgba(232, 56, 64, 0.28);
  transition: background 0.18s ease, transform 0.18s ease;
}

.login-form .login-submit:hover {
  background: var(--color-marca-fuerte);
  opacity: 1;
}

.login-form .login-submit:focus-visible {
  outline: 3px solid rgba(232, 56, 64, 0.35);
  outline-offset: 2px;
}

.login-submit:hover,
.boton-principal:hover {
  opacity: 0.97;
}

.login-submit:active,
.boton-principal:active {
  transform: scale(0.99);
}

.login-mfa-link {
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}

.login-mfa-link button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(68, 71, 78, 0.8);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.login-footer-inline {
  margin-top: 5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(196, 198, 207, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: rgba(68, 71, 78, 0.55);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.login-footer-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(4, 30, 66, 0.68);
}

.login-panel__right {
  display: none;
}

.portal-shell {
  min-height: 100vh;
  background: var(--color-fondo);
}

.portal-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  height: 100vh;
  width: 16rem;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(196, 198, 207, 0.15);
  background: var(--color-fondo-suave);
  padding: 1.25rem 0 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  transition: transform 0.22s ease;
}

.portal-brand-block {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.portal-brand-link {
  display: inline-block;
  line-height: 0;
}

.portal-brand-logo {
  display: block;
  width: 116px;
  height: auto;
  margin-bottom: 0.55rem;
}

.portal-brand-title {
  font-size: 1.12rem;
  margin-bottom: 0.1rem;
}

.portal-brand-subtitle {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.7;
}

.portal-nav {
  display: grid;
  gap: 0.2rem;
}

/* Buscador del menu: queda fijo arriba para no tener que recorrer todo el sidebar. */
.portal-nav-search {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.15rem 1.1rem 0.55rem;
  background: var(--color-fondo-suave);
}

.portal-nav-search__box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(196, 198, 207, 0.4);
  border-radius: 0.6rem;
  background: var(--color-superficie);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.portal-nav-search__box:focus-within {
  border-color: var(--color-primario-fuerte);
  box-shadow: 0 0 0 3px rgba(4, 30, 66, 0.1);
}

.portal-nav-search__box .material-symbols-outlined {
  font-size: 1.05rem;
  color: var(--color-texto-suave);
}

.portal-nav-search__box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-primario-fuerte);
  font-size: 0.78rem;
  font-weight: 600;
}

.portal-nav-search__box input::placeholder {
  color: var(--color-texto-suave);
  font-weight: 500;
}

.portal-nav-search__clear {
  display: flex;
  align-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.portal-nav-search__clear:hover .material-symbols-outlined {
  color: var(--color-primario-fuerte);
}

.portal-nav-results {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.portal-nav-result__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.portal-nav-result__text small {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.portal-nav-results__empty {
  margin: 0;
  padding: 0.75rem 1.35rem;
  color: var(--color-texto-suave);
  font-size: 0.75rem;
}

/* Accesos rapidos: favoritos fijados por el usuario y modulos frecuentes automaticos. */
.portal-nav-quick {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.portal-nav-quick__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.35rem 0.2rem;
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-nav-quick__title .material-symbols-outlined {
  font-size: 0.95rem;
}

.portal-nav-divider {
  margin: 0.5rem 1.35rem 0.35rem;
  border-top: 1px solid rgba(196, 198, 207, 0.25);
}

.portal-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* El pin vive en una canaleta a la izquierda; el contenido del link se corre para dejarle lugar. */
.portal-nav-item .portal-nav-link,
.portal-nav-link--sin-pin {
  flex: 1;
  min-width: 0;
  padding-left: 2.05rem;
}

.portal-nav-group__content .portal-nav-item .portal-nav-link {
  padding-left: 2.75rem;
}

.portal-nav-pin {
  position: absolute;
  left: 0.5rem;
  display: flex;
  align-items: center;
  border: 0;
  padding: 0.15rem;
  border-radius: 0.35rem;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.portal-nav-group__content .portal-nav-pin {
  left: 1.2rem;
}

.portal-nav-pin .material-symbols-outlined {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}

.portal-nav-item:hover .portal-nav-pin,
.portal-nav-pin:focus-visible {
  opacity: 1;
}

.portal-nav-pin:hover {
  background: rgba(4, 30, 66, 0.1);
}

.portal-nav-item--favorito .portal-nav-pin {
  opacity: 1;
}

.portal-nav-item--favorito .portal-nav-pin .material-symbols-outlined {
  color: var(--color-primario-fuerte);
  font-variation-settings: 'FILL' 1;
}

/* Reordenar favoritos arrastrando */
.portal-nav-item--arrastrable {
  cursor: grab;
}

.portal-nav-item--arrastrando {
  opacity: 0.45;
}

.portal-nav-item--destino {
  box-shadow: inset 0 2px 0 0 var(--color-primario-fuerte);
}

/* =================== Command palette (Ctrl+K) =================== */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 11vh 1rem 1rem;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}

.palette {
  width: min(560px, 100%);
  border-radius: 0.9rem;
  background: var(--color-superficie);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.palette__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.3);
}

.palette__search .material-symbols-outlined {
  color: var(--color-texto-suave);
}

.palette__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--color-primario-fuerte);
  font-size: 0.92rem;
  font-weight: 600;
}

.palette__search input::placeholder {
  color: var(--color-texto-suave);
  font-weight: 500;
}

.palette__hint {
  padding: 0.15rem 0.4rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 0.3rem;
  color: var(--color-texto-suave);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.palette__results {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.35rem;
}

.palette__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--color-primario-fuerte);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.palette__item--activo,
.palette__item:hover {
  background: var(--color-superficie-media);
}

.palette__item .material-symbols-outlined {
  font-size: 1.1rem;
  color: var(--color-texto-suave);
}

.palette__item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.palette__item-text small {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.palette__empty {
  padding: 1.2rem;
  color: var(--color-texto-suave);
  font-size: 0.8rem;
  text-align: center;
}

.portal-nav-link,
.portal-footer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.35rem;
  color: var(--color-texto-suave);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border-left: 4px solid transparent;
}

.portal-nav-link.active,
.portal-nav-link:hover,
.portal-footer-link:hover {
  background: var(--color-superficie-media);
  color: var(--color-primario-fuerte);
}

.portal-nav-link.active {
  border-left-color: var(--color-marca);
  font-weight: 700;
}

.portal-nav-group {
  display: flex;
  flex-direction: column;
  margin-top: 0.35rem;
}

.portal-nav-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 1.35rem 0.55rem 1.1rem;
  background: transparent;
  border: 0;
  border-left: 4px solid transparent;
  cursor: pointer;
  color: var(--color-texto-suave);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.portal-nav-group__header:hover {
  background: var(--color-superficie-media);
  color: var(--color-primario-fuerte);
}

.portal-nav-group__header .material-symbols-outlined {
  font-size: 1.05rem;
  color: var(--color-texto-suave);
}

.portal-nav-group__label {
  flex: 1;
}

.portal-nav-group__bullet {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-primario-fuerte);
}

.portal-nav-group__caret {
  font-size: 1.05rem;
  transition: transform 0.18s ease;
}

.portal-nav-group--expanded .portal-nav-group__caret {
  transform: rotate(180deg);
}

.portal-nav-group__content {
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.15rem 0 0.35rem 0;
}

.portal-nav-group--expanded .portal-nav-group__content {
  display: flex;
}

.portal-nav-group__content .portal-nav-link {
  padding-left: 2.1rem;
  font-size: 0.78rem;
}

/* =================== Asistente IA (chat) =================== */
.ai-chat-page { display:flex; flex-direction:column; }

.ai-chat-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0.85rem;
  height: calc(100vh - 230px);
  min-height: 520px;
}

@media (max-width: 1020px) {
  .ai-chat-layout { grid-template-columns: 1fr; height: auto; }
}

.ai-chat-sidebar {
  background: #ffffff;
  border: 1px solid rgba(196, 198, 207, 0.32);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(4, 30, 66, 0.06);
}
.ai-chat-sidebar__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.32);
  color: #041e42; font-size: 0.85rem;
}
.ai-chat-sidebar__head .material-symbols-outlined { font-size: 1.1rem; }
.ai-chat-sidebar__list {
  flex: 1; overflow-y: auto; padding: 0.5rem 0.4rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.ai-chat-sidebar__empty {
  color: #94a3b8; font-size: 0.82rem; padding: 1rem; text-align: center;
}

.ai-chat-session-item {
  position: relative;
  padding: 0.55rem 2rem 0.55rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  border: 1px solid transparent;
}
.ai-chat-session-item:hover { background: #f1f5f9; }
.ai-chat-session-item--active { background: #eef6ff; border-color: #b8d8f5; }
.ai-chat-session-item__title {
  color: #041e42; font-size: 0.82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-chat-session-item__meta {
  color: #94a3b8; font-size: 0.7rem; margin-top: 0.15rem;
  display: flex; gap: 0.25rem;
}
.ai-chat-session-item__delete {
  position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  opacity: 0; transition: opacity 0.12s ease, background 0.12s ease;
}
.ai-chat-session-item:hover .ai-chat-session-item__delete { opacity: 1; }
.ai-chat-session-item__delete:hover { background: #fee2e2; color: #dc2626; }

.ai-chat-shell {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(196, 198, 207, 0.32);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(4, 30, 66, 0.06);
  min-height: 520px;
}

.ai-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
}

.ai-chat-empty {
  margin: auto;
  text-align: center;
  max-width: 540px;
  color: #64748b;
  padding: 2rem 1rem;
}
.ai-chat-empty__icon { font-size: 3.2rem; color: #94a3b8; }
.ai-chat-empty h3 { color: #041e42; margin: 0.6rem 0 0.4rem; }
.ai-chat-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.ai-chat-suggestion {
  background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 999px;
  padding: 0.5rem 0.95rem; font-size: 0.82rem; color: #041e42; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-chat-suggestion:hover { background: #e2e8f0; border-color: #94a3b8; }

.ai-chat-msg {
  display: flex; gap: 0.7rem; align-items: flex-start;
  max-width: 100%;
}
.ai-chat-msg--user { flex-direction: row-reverse; }
.ai-chat-msg__avatar {
  flex-shrink: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #041e42; color: #fff;
}
.ai-chat-msg--user .ai-chat-msg__avatar { background: #1d4365; }
.ai-chat-msg--assistant .ai-chat-msg__avatar { background: #0e7490; }
.ai-chat-msg__avatar .material-symbols-outlined { font-size: 1.15rem; }

.ai-chat-msg__bubble {
  max-width: min(78%, 760px);
  background: #f8fafc;
  border: 1px solid rgba(196, 198, 207, 0.32);
  border-radius: 14px;
  padding: 0.7rem 0.95rem;
  color: #041e42;
  font-size: 0.9rem;
  line-height: 1.45;
}
.ai-chat-msg--user .ai-chat-msg__bubble {
  background: #041e42; color: #ffffff; border-color: transparent;
}
.ai-chat-msg__content code {
  background: rgba(0,0,0,0.06); padding: 0.05rem 0.32rem; border-radius: 3px;
  font-family: 'Courier New', monospace; font-size: 0.85em;
}
.ai-chat-msg--user .ai-chat-msg__content code { background: rgba(255,255,255,0.18); }
.ai-chat-msg__time {
  font-size: 0.66rem; opacity: 0.5; margin-top: 0.35rem;
}
.ai-chat-msg--user .ai-chat-msg__time { color: #ffffff; opacity: 0.7; text-align: right; }

.ai-chat-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.55rem; }
.ai-chat-tool-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #eef6ff; border: 1px solid #b8d8f5; color: #0f4c81;
  border-radius: 999px; padding: 0.18rem 0.55rem; font-size: 0.72rem; font-weight: 600;
}

.ai-chat-feedback-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: #94a3b8; cursor: pointer;
  border-radius: 0.3rem; padding: 0.15rem 0.3rem;
  transition: all 0.15s ease;
}
.ai-chat-feedback-btn:hover { background: #f1f5f9; color: #475569; }
.ai-chat-feedback-btn--active-up { background: #dcfce7; color: #15803d; border-color: #86efac; }
.ai-chat-feedback-btn--active-down { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

.ai-chat-slash-suggestions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0;
}
.ai-chat-slash-chip {
  background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155;
  border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.78rem; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease;
}
.ai-chat-slash-chip:hover { background: #e2e8f0; border-color: #94a3b8; }
.ai-chat-slash-menu {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 0.4rem;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  max-height: 320px; overflow-y: auto; z-index: 50;
}
.ai-chat-slash-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 0.55rem 0.75rem;
  cursor: pointer; font-size: 0.85rem; color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
}
.ai-chat-slash-item:hover { background: #f8fafc; }
.ai-chat-slash-item__name { font-weight: 600; color: #0f172a; }
.ai-chat-slash-item__desc { display: block; font-size: 0.74rem; color: #64748b; margin-top: 0.1rem; }

.ai-chat-cursor {
  display: inline-block;
  width: 0.55rem; height: 1.05rem;
  background: #041e42; margin-left: 2px; vertical-align: text-bottom;
  animation: aiChatCursorBlink 0.9s steps(2) infinite;
}
@keyframes aiChatCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.ai-chat-typing { display: inline-flex; gap: 0.25rem; padding: 0.2rem 0; }
.ai-chat-typing span {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #94a3b8;
  animation: aiChatBlink 1.2s infinite ease-in-out;
}
.ai-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiChatBlink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.ai-chat-composer {
  display: flex; gap: 0.6rem; align-items: flex-end;
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(196, 198, 207, 0.32);
  background: #ffffff;
}
.ai-chat-input {
  flex: 1; min-height: 2.6rem; max-height: 8rem;
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 0.6rem 0.85rem;
  font-family: inherit; font-size: 0.92rem; resize: vertical;
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color: #041e42;
}
.ai-chat-input:focus { border-color: #041e42; box-shadow: 0 0 0 3px rgba(4, 30, 66, 0.12); }
.ai-chat-send {
  flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #041e42; color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.ai-chat-send:hover:not(:disabled) { background: #0f223a; }
.ai-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

.ai-chat-md-table {
  border-collapse: collapse; width: 100%; margin: 0.6rem 0; font-size: 0.82rem;
}
.ai-chat-md-table th, .ai-chat-md-table td {
  border: 1px solid rgba(196, 198, 207, 0.42);
  padding: 0.35rem 0.55rem; text-align: left;
}
.ai-chat-md-table th { background: rgba(4, 30, 66, 0.06); font-weight: 700; }
.ai-chat-msg--user .ai-chat-md-table th,
.ai-chat-msg--user .ai-chat-md-table td { border-color: rgba(255,255,255,0.25); }
.ai-chat-msg--user .ai-chat-md-table th { background: rgba(255,255,255,0.12); }

/* =================== Tabs estilo Clientes =================== */
.customers-tabs {
  display: flex;
  gap: 0.2rem;
  margin: 0.5rem 0 1.3rem;
  border-bottom: 1px solid #e2e8f0;
}

.customers-tabs__link {
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.customers-tabs__link:hover {
  color: #041e42;
}

.customers-tabs__link--active {
  color: #041e42;
  border-bottom-color: #041e42;
}

.customers-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.4rem;
  background: #dc2626;
  color: #ffffff;
  border-radius: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
}

/* =================== Portal publico de registro =================== */
.public-portal-shell {
  min-height: 100vh;
  background: linear-gradient(180deg, #f5f7fa 0%, #eef2f6 100%);
  padding: 2.5rem 1rem 4rem;
  font-family: 'Inter', sans-serif;
  color: var(--color-texto);
}

.public-portal-container {
  max-width: 920px;
  margin: 0 auto;
}

.public-portal-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(4, 30, 66, 0.08);
  overflow: hidden;
}

.public-portal-hero {
  padding: 2.2rem 2.4rem 1.6rem;
  background: linear-gradient(135deg, #041e42 0%, #1d4365 100%);
  color: #ffffff;
}

.public-portal-hero__brand {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
}

.public-portal-hero__title {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0.4rem 0 0.5rem;
  letter-spacing: -0.02em;
}

.public-portal-hero__subtitle {
  font-size: 0.95rem;
  opacity: 0.85;
  margin: 0;
  font-weight: 400;
}

.public-portal-stepper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1.1rem 2.4rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
}

.public-portal-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.public-portal-step__bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #cbd5e1;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.public-portal-step--active .public-portal-step__bubble {
  background: #041e42;
  box-shadow: 0 0 0 4px rgba(4, 30, 66, 0.12);
}

.public-portal-step--done .public-portal-step__bubble {
  background: #10b981;
}

.public-portal-step__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.public-portal-step--active .public-portal-step__label {
  color: #041e42;
}

.public-portal-step__connector {
  width: 24px;
  height: 2px;
  background: #cbd5e1;
  margin: 0 0.2rem;
  flex-shrink: 0;
}

.public-portal-step--done + .public-portal-step__connector {
  background: #10b981;
}

.public-portal-body {
  padding: 2rem 2.4rem 2.4rem;
  animation: publicPortalFadeIn 0.28s ease;
}

@keyframes publicPortalFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.public-portal-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #041e42;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}

.public-portal-section-copy {
  color: #64748b;
  font-size: 0.88rem;
  margin: 0 0 1.4rem;
}

.public-portal-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

.public-portal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.public-portal-field--full {
  grid-column: 1 / -1;
}

.public-portal-field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.public-portal-field input,
.public-portal-field select,
.public-portal-field textarea {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  font-family: inherit;
  background: #ffffff;
  color: #041e42;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.public-portal-field input:focus,
.public-portal-field select:focus,
.public-portal-field textarea:focus {
  outline: none;
  border-color: #041e42;
  box-shadow: 0 0 0 3px rgba(4, 30, 66, 0.12);
}

.public-portal-field--required label::after {
  content: ' *';
  color: #dc2626;
}

.public-portal-field-error {
  color: #dc2626;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.public-portal-check-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition: background 0.15s ease;
}

.public-portal-check-row:hover {
  background: #f1f5f9;
}

.public-portal-check-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
}

.public-portal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.public-portal-btn {
  padding: 0.75rem 1.4rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition: all 0.15s ease;
  font-family: inherit;
}

.public-portal-btn--primary {
  background: #041e42;
  color: #ffffff;
}

.public-portal-btn--primary:hover:not(:disabled) {
  background: #0f223a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(4, 30, 66, 0.25);
}

.public-portal-btn--secondary {
  background: #ffffff;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.public-portal-btn--secondary:hover:not(:disabled) {
  background: #f8fafc;
}

.public-portal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.public-portal-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.public-portal-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.public-portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: #eef2f7;
  border-radius: 16px;
  font-size: 0.85rem;
  color: #041e42;
}

.public-portal-chip button {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
}

.public-portal-cc-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.public-portal-cc-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: #f8fafc;
}

.public-portal-cc-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}

.public-portal-cc-card__head strong {
  font-size: 0.85rem;
  color: #041e42;
}

.public-portal-cc-card__remove {
  background: transparent;
  border: 0;
  color: #dc2626;
  cursor: pointer;
  font-size: 0.82rem;
}

.public-portal-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 1.6rem;
  text-align: center;
  background: #f8fafc;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.public-portal-dropzone:hover {
  border-color: #041e42;
  background: #f1f5f9;
}

.public-portal-dropzone__icon {
  font-size: 2rem;
  color: #94a3b8;
}

.public-portal-success {
  text-align: center;
  padding: 3rem 2rem;
}

.public-portal-success__icon {
  font-size: 4rem;
  color: #10b981;
}

.public-portal-success__title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #041e42;
  margin: 1rem 0 0.5rem;
}

.public-portal-success__code {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #f1f5f9;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #041e42;
  margin: 1rem 0;
}

.public-portal-error-banner {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  color: #991b1b;
  margin-bottom: 1.2rem;
  font-size: 0.88rem;
}

/* ===== Descarga publica de la app movil (/descargar-app) ===== */
.app-download-status {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: #64748b;
  font-size: 0.95rem;
}

.app-download-status--empty { padding-top: 2rem; }

.app-download-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  margin-bottom: 1.25rem;
}

.app-download-badge {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 12px;
  background: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-download-badge .material-symbols-outlined {
  color: #fff;
  font-size: 2rem;
}

.app-download-version {
  font-size: 1.35rem;
  font-weight: 700;
  color: #041e42;
  line-height: 1.2;
}

.app-download-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: #64748b;
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

.app-download-notes {
  background: #f8fafc;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
}

.app-download-notes__title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #041e42;
  margin: 0 0 0.4rem;
}

.app-download-notes p { margin: 0; color: #475569; font-size: 0.9rem; white-space: pre-line; }

.app-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: #10b981;
  color: #fff;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.app-download-btn:hover { background: #059669; }
.app-download-btn .material-symbols-outlined { font-size: 1.4rem; }

.app-download-help {
  margin-top: 1.6rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.2rem;
}

.app-download-help__title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #041e42;
  margin: 0 0 0.6rem;
}

.app-download-help ol {
  margin: 0;
  padding-left: 1.2rem;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .public-portal-hero,
  .public-portal-body,
  .public-portal-stepper { padding-left: 1.2rem; padding-right: 1.2rem; }
  .public-portal-field-grid { grid-template-columns: 1fr; }
  .public-portal-hero__title { font-size: 1.4rem; }
  .public-portal-step__label { display: none; }
}

.portal-primary-action {
  display: block;
  margin: 1rem 1.5rem 0;
  border-radius: 0.125rem;
  background: var(--color-primario-fuerte);
  padding: 0.75rem 0.95rem;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
}

.portal-sidebar-footer {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(196, 198, 207, 0.2);
  padding-top: 1rem;
}

.portal-main {
  margin-left: 16rem;
  min-height: 100vh;
  transition: margin-left 0.22s ease;
}

.portal-shell--sidebar-collapsed .portal-sidebar {
  transform: translateX(-100%);
}

.portal-shell--sidebar-collapsed .portal-main {
  margin-left: 0;
}

.portal-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  height: 3.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.15);
  background: rgba(245, 247, 250, 0.94);
  padding: 0 1.6rem;
  backdrop-filter: blur(18px);
}

.portal-topbar-left,
.portal-topbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.portal-menu-toggle {
  align-items: center;
  background: var(--color-superficie-fuerte);
  border: 1px solid rgba(196, 198, 207, 0.55);
  border-radius: 8px;
  color: var(--color-primario-fuerte);
  cursor: pointer;
  display: inline-flex;
  height: 2.35rem;
  justify-content: center;
  width: 2.35rem;
}

.portal-menu-toggle:hover {
  background: var(--color-superficie-media);
}

.portal-menu-toggle .material-symbols-outlined {
  font-size: 1.35rem;
}

.operaciones-tabla--compacta th,
.operaciones-tabla--compacta td {
  font-size: 0.82rem;
  vertical-align: top;
}

.charges-row--warning {
  background: rgba(255, 218, 214, 0.18);
}

.charges-empty-value {
  color: #93000a;
  font-weight: 700;
}

.charges-reason {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: #93000a;
  line-height: 1.35;
}

.portal-topbar-title {
  color: var(--color-primario-fuerte);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.portal-topbar-subtitle {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
}

.portal-search {
  position: relative;
  display: none;
}

.portal-search .material-symbols-outlined {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(68, 71, 78, 0.6);
  font-size: 1rem;
}

.portal-search input {
  width: 20rem;
  border: 1px solid transparent;
  border-radius: 0.125rem;
  background: var(--color-superficie-fuerte);
  padding: 0.62rem 0.95rem 0.62rem 2.25rem;
  font-size: 0.9rem;
  outline: none;
}

.portal-topbar-button,
.portal-icon-button,
.alertas-panel__head button,
.operaciones-panel__head button,
.operaciones-panel__footer a,
.mapa-panel__controles button,
.tarjeta-ruta__fila,
.operaciones-accion,
.mapa-marcador,
.boton-secundario {
  border: 0;
  background: transparent;
}

.portal-topbar-button {
  color: var(--color-primario-fuerte);
  font-size: 0.82rem;
  font-weight: 600;
}

.portal-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
}

.portal-user-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-left: 1px solid rgba(196, 198, 207, 0.2);
  padding-left: 1.5rem;
}

.portal-user-avatar {
  display: flex;
  height: 2rem;
  width: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-superficie-fuerte);
  border: 1px solid rgba(196, 198, 207, 0.3);
  color: var(--color-primario-fuerte);
  font-size: 0.7rem;
  font-weight: 800;
}

.portal-user-chip strong,
.portal-user-chip span {
  display: block;
}

.portal-user-chip strong {
  font-size: 0.8rem;
}

.portal-user-chip span {
  color: var(--color-texto-suave);
  font-size: 0.66rem;
}

/* Texto de apoyo bajo un campo: explica la consecuencia de lo elegido sin parecer un error. */
.campo-ayuda {
  margin-top: 0.5rem;
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  line-height: 1.4;
}

.campo-ayuda--destacado {
  border-left: 3px solid #b45309;
  background: rgba(180, 83, 9, 0.06);
  border-radius: 0 0.4rem 0.4rem 0;
  padding: 0.45rem 0.65rem;
  color: #b45309;
  font-weight: 600;
}

/* Vigencia de la sesion: linea discreta bajo el usuario mientras queda jornada, y cada vez mas
   visible a medida que se acerca el cierre del dia. */
.portal-session {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.1rem;
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.portal-session .material-symbols-outlined {
  font-size: 0.8rem;
}

.portal-session--aviso {
  color: #b45309;
}

.portal-session--critica {
  color: #b91c1c;
}

.portal-session-extender {
  margin-left: 0.75rem;
  border: 1px solid rgba(185, 28, 28, 0.35);
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  cursor: pointer;
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.portal-session-extender:hover {
  background: rgba(185, 28, 28, 0.16);
}

.sesion-aviso {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 22rem;
  border: 1px solid rgba(185, 28, 28, 0.3);
  border-radius: 0.9rem;
  background: var(--color-superficie);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  padding: 1rem 1.1rem;
}

.sesion-aviso__cuerpo {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.sesion-aviso__icono {
  color: #b91c1c;
}

.sesion-aviso__cuerpo strong {
  display: block;
  font-size: 0.85rem;
}

.sesion-aviso__cuerpo p {
  margin: 0.25rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.75rem;
  line-height: 1.35;
}

.sesion-aviso__acciones {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.sesion-aviso__descartar,
.sesion-aviso__principal {
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 0.4rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.sesion-aviso__descartar {
  border: 1px solid rgba(196, 198, 207, 0.4);
  background: transparent;
  color: var(--color-texto-suave);
}

.sesion-aviso__principal {
  border: 1px solid #b91c1c;
  background: #b91c1c;
  color: #fff;
}

.portal-page-canvas {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem;
}

.panel-carga {
  display: flex;
  justify-content: center;
  padding-top: 5rem;
}

.panel-carga__tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.22);
  padding: 1.25rem 1.5rem;
}

.panel-carga__tarjeta strong,
.panel-carga__tarjeta p {
  display: block;
  margin: 0;
}

.panel-carga__tarjeta p {
  color: var(--color-texto-suave);
  margin-top: 0.25rem;
}

.tablero-ejecutivo,
.vista-operativa {
  display: grid;
  gap: 1.5rem;
}

.vista-operativa__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 0.7rem;
}

.tablero-encabezado {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
}

.tablero-encabezado__etiqueta {
  display: inline-flex;
  padding: 0.4rem 0.8rem;
  background: rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.tablero-encabezado h1 {
  margin: 1rem 0 0.75rem;
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.tablero-encabezado p {
  margin: 0;
  max-width: 48rem;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

.tablero-encabezado__meta {
  min-width: 14rem;
  text-align: right;
}

.tablero-encabezado__meta span,
.tablero-encabezado__meta strong {
  display: block;
}

.tablero-encabezado__meta span {
  color: var(--color-texto-suave);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.tablero-encabezado__meta strong {
  margin-top: 0.4rem;
  color: var(--color-primario-fuerte);
  font-size: 1.15rem;
}

.filtros-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.7rem;
  align-items: end;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(196, 198, 207, 0.18);
  padding: 0.75rem;
}

.filtros-panel--compacto {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.pickups-filtros-panel {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
}

/* Bandeja de etiquetas del portal: el buscador manda y el resto son controles cortos, igual que en
   Encomiendas. La variante con cliente la usa el back office, que ademas elige de que vendedor mira. */
.portal-labels-filtros {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

.portal-labels-filtros--con-cliente {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}

@media (max-width: 1100px) {
  .portal-labels-filtros,
  .portal-labels-filtros--con-cliente {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.filtros-panel__grupo {
  display: grid;
  gap: 0.45rem;
}

.filtros-panel__grupo--ancho {
  grid-column: span 2;
}

.filtros-panel__grupo label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.filtros-panel select,
.filtros-panel input,
.filtros-panel textarea {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.56rem 0.72rem;
  font-size: 0.82rem;
  outline: none;
}

.filtros-panel textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 2.6rem;
}

/* Filtros de Encomiendas en una sola fila: buscar (ancho) + estado + hub + origen(Flex) + acciones,
   sin que los botones bajen de linea. */
.shipments-filtros {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
}

/* Checkbox "Solo Flex" presentado como control de filtro (mismo borde/alto/tipografia que selects). */
.shipments-flex-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.56rem 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}

.shipments-flex-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primario);
}

.shipments-flex-check span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-texto);
}

.filtros-panel textarea:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.filtros-panel__acciones {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.boton-principal,
.boton-secundario {
  padding: 0.6rem 0.82rem;
  white-space: nowrap;
  font-size: 0.78rem;
}

.boton-secundario {
  color: var(--color-texto-suave);
  border: 1px solid rgba(196, 198, 207, 0.35);
  background: var(--color-superficie);
  font-weight: 700;
}

.tablero-kpis,
.resumen-operativo,
.resumen-grid {
  display: grid;
  gap: 1rem;
}

.tablero-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.15rem;
}

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

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

.resumen-operativo article,
.kpi-card,
.tarjeta-ruta,
.tarjeta-monitoreo,
.tabla-operativa-panel {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.resumen-operativo article {
  padding: 0.72rem 0.82rem;
}

.resumen-operativo span,
.resumen-operativo strong {
  display: block;
}

.resumen-operativo span {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.resumen-operativo strong {
  margin-top: 0.28rem;
  font-size: 1.18rem;
  letter-spacing: -0.05em;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 7.45rem;
  border-left: 2px solid var(--color-primario-fuerte);
  padding: 1rem 1.05rem;
}

.kpi-card span,
.kpi-card small {
  display: block;
}

.kpi-card > div > span:first-child {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kpi-card > span:first-child {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kpi-card strong {
  display: block;
  margin-top: 0.36rem;
  font-size: 1.62rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dispatch-kpi-grid {
  gap: 0.75rem;
}

.dispatch-kpi-grid--balanced {
  align-items: stretch;
}

.dispatch-kpi-card {
  min-height: 5.9rem;
  padding: 0.9rem 1rem;
  justify-content: space-between;
}

.dispatch-kpi-card span {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dispatch-kpi-card strong {
  margin-top: 0.5rem;
  font-size: 1.28rem;
  line-height: 1;
}

/* Cajas resumen de los modulos (Despacho, Incidentados, detalle de despacho/troncal/retiro,
   planificacion): se igualan a la proporcion/alto compacto del modulo Encomiendas (.resumen-operativo)
   en vez del kpi-card alto con barra lateral. Gana por especificidad a los modificadores por pagina. */
.resumen-grid .kpi-card {
  min-height: 0;
  padding: 0.72rem 0.82rem;
  border-left: 1px solid rgba(196, 198, 207, 0.18);
  justify-content: flex-start;
}

/* Acerca el valor a su etiqueta (algunas paginas empujan el strong con margin-top grande).
   Solo se ajusta el margen, no el tamano de fuente, para no afectar codigos/chips especiales. */
.resumen-grid .kpi-card strong {
  margin-top: 0.28rem;
}

.kpi-card--terciario { border-left-color: #002425; }
.kpi-card--secundario { border-left-color: var(--color-secundario); }
.kpi-card--primario { border-left-color: var(--color-primario); }
.kpi-card--error { border-left-color: var(--color-error); }
.kpi-card--acento { border-left-color: var(--color-acento); }

.kpi-card--error strong { color: var(--color-error); }

.kpi-barras {
  display: flex;
  align-items: end;
  gap: 0.35rem;
  height: 2.85rem;
  opacity: 0.45;
}

.kpi-barras div {
  flex: 1;
  background: var(--color-primario-fuerte);
}

.kpi-barras--solidas {
  opacity: 0.25;
}

.kpi-barras--solidas div {
  background: var(--color-primario);
}

.kpi-card__pie,
.kpi-alerta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.kpi-card__pie small {
  color: var(--color-secundario);
  font-size: 0.6875rem;
  font-weight: 700;
}

.kpi-card__pie .material-symbols-outlined {
  color: var(--color-secundario);
}

.kpi-alerta {
  background: rgba(255, 218, 214, 0.35);
  padding: 0.45rem 0.55rem;
}

.kpi-alerta .material-symbols-outlined,
.kpi-alerta small {
  color: #93000a;
}

.kpi-alerta small {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi-progreso {
  display: grid;
  gap: 0.45rem;
}

.kpi-progreso div {
  width: 100%;
  height: 0.35rem;
  background: var(--color-superficie-fuerte);
  overflow: hidden;
}

.kpi-progreso div span {
  display: block;
  height: 100%;
  background: #002425;
}

.kpi-progreso small {
  color: var(--color-texto-suave);
  font-size: 0.625rem;
  text-align: right;
}

.tablero-medio {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.9fr);
  gap: 2rem;
}

.tablero-medio--simple {
  grid-template-columns: 1fr;
}

.mapa-panel {
  position: relative;
  min-height: 29rem;
  overflow: hidden;
  background: var(--color-superficie-media);
}

.mapa-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: grayscale(1) contrast(1.15);
}

.mapa-panel__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 247, 250, 0.1), rgba(245, 247, 250, 0.15));
}

.mapa-panel__tarjeta,
.mapa-panel__controles {
  position: absolute;
  z-index: 2;
}

.mapa-panel__tarjeta {
  top: 1.5rem;
  left: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1rem 1.1rem;
  border: 1px solid rgba(196, 198, 207, 0.15);
  backdrop-filter: blur(14px);
}

.mapa-panel__tarjeta h3,
.mapa-panel__tarjeta p,
.mapa-panel__tarjeta small {
  margin: 0;
}

.mapa-panel__tarjeta h3 {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mapa-panel__tarjeta p {
  margin-top: 0.4rem;
  color: var(--color-primario-fuerte);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.mapa-panel__tarjeta small {
  margin-top: 0.25rem;
  color: var(--color-texto-suave);
  font-size: 0.72rem;
}

.mapa-panel__controles {
  right: 1.5rem;
  bottom: 1.5rem;
  display: grid;
  gap: 0.5rem;
}

.mapa-panel__controles button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-texto-suave);
  border: 1px solid rgba(196, 198, 207, 0.15);
  width: 2.2rem;
  height: 2.2rem;
}

.mapa-marcador {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.mapa-marcador__pulso {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.18);
  transform: translate(-50%, -50%);
  animation: pulso 1.8s infinite;
}

.mapa-marcador__punto {
  position: relative;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--color-primario-fuerte);
  border: 2px solid var(--color-superficie);
}

.mapa-marcador--critico .mapa-marcador__punto {
  background: var(--color-error);
}

.mapa-marcador__etiqueta {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(196, 198, 207, 0.15);
  padding: 0.35rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.alertas-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-superficie-media);
  padding: 1.5rem;
}

.alertas-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.alertas-panel__head h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.alertas-panel__head h2 span {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--color-error);
  animation: pulso 1.8s infinite;
}

.alertas-panel__head button,
.operaciones-panel__head button,
.operaciones-panel__footer a {
  color: var(--color-primario-fuerte);
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.alertas-panel__lista,
.tarjeta-ruta__lista,
.tarjetas-ruta-grid,
.tarjetas-monitoreo-grid {
  display: grid;
  gap: 1rem;
}

.alerta-item {
  border-left: 4px solid var(--color-borde);
  background: rgba(255, 255, 255, 0.42);
  padding: 1rem;
}

.alerta-item--error {
  border-left-color: var(--color-error);
}

.alerta-item--secundaria {
  border-left-color: var(--color-secundario);
}

.alerta-item--neutra {
  border-left-color: var(--color-borde);
}

.alerta-item--vacia {
  border-left-color: var(--color-acento);
}

.alerta-item__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.alerta-item__head span,
.alerta-item__head small {
  color: var(--color-texto-suave);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.alerta-item h4,
.alerta-item p {
  margin: 0;
}

.alerta-item h4 {
  font-size: 0.95rem;
}

.alerta-item p {
  margin-top: 0.45rem;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  line-height: 1.6;
}

.operaciones-panel,
.tabla-operativa-panel {
  background: var(--color-superficie-media);
  padding-bottom: 1.5rem;
}

.operaciones-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
}

.operaciones-panel__head h2 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.operaciones-panel__head div {
  display: flex;
  gap: 1rem;
}

.operaciones-panel__head button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-texto-suave);
}

.operaciones-tabla-wrap,
.tabla-operativa-panel {
  overflow-x: auto;
}

.operaciones-tabla {
  width: 100%;
  border-collapse: collapse;
}

.operaciones-tabla thead tr {
  background: rgba(220, 227, 236, 0.6);
  border-bottom: 1px solid rgba(196, 198, 207, 0.2);
}

.operaciones-tabla th,
.operaciones-tabla td {
  padding: 0.68rem 0.85rem;
  text-align: left;
}

.operaciones-tabla th {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.operaciones-tabla td {
  font-size: 0.72rem;
}

.operaciones-tabla tbody tr {
  border-bottom: 1px solid rgba(196, 198, 207, 0.08);
}

.operaciones-tabla tbody tr:hover {
  background: rgba(255, 255, 255, 0.35);
}

.operaciones-tabla td {
  font-size: 0.75rem;
}

.operaciones-tabla__tracking {
  color: var(--color-primario-fuerte);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.68rem;
  font-weight: 700;
}

.operaciones-tabla__check {
  width: 2.25rem;
  padding-right: 0.35rem;
  text-align: center;
}

/* Valor que necesita mirarse dos veces: un precio bajo el costo, una solicitud por vencer. */
.texto-alerta {
  color: #93000a;
  font-weight: 700;
}

/* Segunda linea dentro de una celda: el dato de apoyo del valor principal. */
.operaciones-tabla__sub {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-texto-suave);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Encabezado de un panel de tabla: titulo y una linea que explica que se esta mirando. */
.tabla-operativa-panel__titulo {
  display: grid;
  gap: 0.2rem;
  padding: 1.1rem 1.25rem 0.9rem;
}

.tabla-operativa-panel__titulo h3 {
  margin: 0;
  color: var(--color-primario-fuerte);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.tabla-operativa-panel__titulo > span {
  color: var(--color-texto-suave);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.45;
}

.transit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.transit-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.transit-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) minmax(7rem, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(196, 198, 207, 0.4);
}

.transit-row:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.operaciones-tabla__check input[type="checkbox"] {
  cursor: pointer;
  height: 1rem;
  width: 1rem;
}

.estado-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.55rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.estado-chip--transito {
  background: rgba(42, 82, 152, 0.15);
  color: #2a5298;
}

.estado-chip--entregado {
  background: rgba(220, 227, 236, 0.9);
  color: var(--color-texto);
}

.estado-chip--incidente {
  background: rgba(255, 218, 214, 0.5);
  color: #93000a;
}

.estado-chip--neutro {
  background: rgba(196, 198, 207, 0.24);
  color: var(--color-texto-suave);
}

.estado-chip--flex {
  background: #f4b400;
  color: #3a2e00;
  margin-left: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid #c98f00;
  box-shadow: 0 1px 3px rgba(201, 143, 0, 0.35);
}

.estado-chip--vtex {
  background: #f71963;
  color: #fff;
  margin-left: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid #c2114b;
  box-shadow: 0 1px 3px rgba(194, 17, 75, 0.35);
}

.estado-chip--shopify {
  background: #5e8e3e;
  color: #fff;
  margin-left: 0.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 1px solid #46702c;
  box-shadow: 0 1px 3px rgba(70, 112, 44, 0.35);
}

.estado-chip--pendiente {
  background: rgba(245, 158, 11, 0.18);
  color: #92580a;
}

.estado-chip--retirado {
  background: rgba(13, 148, 136, 0.16);
  color: #0f766e;
}

.estado-chip--admitido {
  background: rgba(99, 102, 241, 0.16);
  color: #4338ca;
}

.estado-chip--despacho {
  background: rgba(6, 182, 212, 0.16);
  color: #155e75;
}

.estado-chip--troncal {
  background: rgba(37, 99, 235, 0.16);
  color: #1e40af;
}

.estado-chip--reparto {
  background: rgba(139, 92, 246, 0.18);
  color: #6d28d9;
}

.estado-chip--reingreso {
  background: rgba(249, 115, 22, 0.18);
  color: #9a3412;
}

/* Encomienda anulada: rojo solido para que resalte por sobre el rojo suave de incidente. */
.estado-chip--cancelado {
  background: #dc2626;
  color: #ffffff;
  font-weight: 700;
}

.estado-chip--borrador {
  background: rgba(100, 116, 139, 0.16);
  color: #334155;
}

.operaciones-tabla__medidas {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}

.flex-codigo {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid #f4b400;
  border-radius: 0.35rem;
  background: rgba(244, 180, 0, 0.12);
  color: #6b5200;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Bulto Mercado Libre Flex: borde amarillo + tinte para identificarlo de un vistazo. */
.operaciones-tabla tbody tr.fila-flex td {
  background: rgba(244, 180, 0, 0.12);
  border-top: 2px solid #f4b400;
  border-bottom: 2px solid #f4b400;
}

.operaciones-tabla tbody tr.fila-flex td:first-child {
  border-left: 3px solid #f4b400;
}

.operaciones-tabla tbody tr.fila-flex td:last-child {
  border-right: 2px solid #f4b400;
}

.operaciones-tabla tbody tr.fila-flex:hover td {
  background: rgba(244, 180, 0, 0.2);
}

/* Bulto de una tienda VTEX: mismo tratamiento que Flex, en el magenta de la marca para que los dos
   origenes no se confundan a distancia dentro de la misma columna. */
.operaciones-tabla tbody tr.fila-vtex td {
  background: rgba(247, 25, 99, 0.09);
  border-top: 2px solid #f71963;
  border-bottom: 2px solid #f71963;
}

.operaciones-tabla tbody tr.fila-vtex td:first-child {
  border-left: 3px solid #f71963;
}

.operaciones-tabla tbody tr.fila-vtex td:last-child {
  border-right: 2px solid #f71963;
}

.operaciones-tabla tbody tr.fila-vtex:hover td {
  background: rgba(247, 25, 99, 0.16);
}

/* Bulto de una tienda Shopify: mismo tratamiento, en el verde de la marca. */
.operaciones-tabla tbody tr.fila-shopify td {
  background: rgba(94, 142, 62, 0.1);
  border-top: 2px solid #5e8e3e;
  border-bottom: 2px solid #5e8e3e;
}

.operaciones-tabla tbody tr.fila-shopify td:first-child {
  border-left: 3px solid #5e8e3e;
}

.operaciones-tabla tbody tr.fila-shopify td:last-child {
  border-right: 2px solid #5e8e3e;
}

.operaciones-tabla tbody tr.fila-shopify:hover td {
  background: rgba(94, 142, 62, 0.18);
}

.operaciones-accion {
  color: var(--color-texto-suave);
}

.operaciones-vacia {
  text-align: center;
  color: var(--color-texto-suave);
  padding: 2rem 1.5rem;
}

.operaciones-panel__footer {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.tarjetas-ruta-grid,
.tarjetas-monitoreo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tarjeta-ruta,
.tarjeta-monitoreo {
  padding: 1rem;
}

.tarjeta-ruta__head,
.tarjeta-monitoreo__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.tarjeta-ruta__head span,
.tarjeta-monitoreo__head span {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.tarjeta-ruta__head h3,
.tarjeta-monitoreo__head h3 {
  margin: 0.35rem 0 0;
  font-size: 0.98rem;
}

.tarjeta-ruta__head strong,
.estado-conexion {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
}

.tarjeta-ruta__fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-top: 1px solid rgba(196, 198, 207, 0.16);
  text-align: left;
}

.tarjeta-ruta__fila strong,
.tarjeta-ruta__fila span {
  display: block;
}

.tarjeta-ruta__fila strong {
  color: var(--color-primario-fuerte);
}

.tarjeta-ruta__fila span,
.tarjeta-monitoreo__datos span {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
}

.tarjeta-ruta__metricas {
  text-align: right;
}

.tarjeta-ruta__fila--vacia,
.tarjeta-ruta--vacia,
.tarjeta-monitoreo--vacia {
  color: var(--color-texto-suave);
}

.tarjeta-monitoreo__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.tarjeta-monitoreo__datos strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-primario-fuerte);
  font-size: 0.86rem;
}

.estado-conexion--activo {
  color: #2a5298;
  font-weight: 800;
}

.app-page-title {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.app-page-copy {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.86rem;
  line-height: 1.42;
}

.hero-card,
.dashboard-hero,
.dashboard-grid {
  display: none;
}

@keyframes pulso {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.6;
  }

  70% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0;
  }
}

@media (min-width: 1024px) {
  .login-panel__left {
    width: 50%;
    padding: 3rem 4rem 3rem 6rem;
  }

  .login-panel__right {
    width: 50%;
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--color-primario);
  }

  .login-panel__right img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
  }

  /* Velo azul marino CCCS: deja ver la flota arriba y asegura contraste del texto abajo. */
  .login-panel__overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(4, 30, 66, 0.35) 0%, rgba(4, 30, 66, 0.72) 48%, rgba(4, 30, 66, 0.96) 100%),
      linear-gradient(90deg, rgba(4, 30, 66, 0.55), transparent 60%);
  }

  .login-panel__right::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--color-marca);
  }

  .login-brand-story {
    position: absolute;
    left: clamp(3rem, 6vw, 6rem);
    right: clamp(3rem, 6vw, 6rem);
    bottom: clamp(3rem, 8vh, 6rem);
    color: #ffffff;
  }

  .login-brand-story__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--color-marca);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .login-brand-story h2 {
    max-width: 30rem;
    margin: 1.25rem 0 0.9rem;
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .login-brand-story p {
    max-width: 32rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .login-brand-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 34rem;
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .login-brand-stats div {
    border-left: 3px solid var(--color-marca);
    padding-left: 0.85rem;
  }

  .login-brand-stats dt {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .login-brand-stats dd {
    margin: 0.2rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 500;
  }

  .login-quote-signature {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .login-quote-signature div {
    width: 3rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
  }

  .login-quote-signature span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    opacity: 0.7;
  }

  .portal-search {
    display: block;
  }
}

@media (max-width: 1200px) {
  .tablero-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .filtros-panel,
  .filtros-panel--compacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filtros-panel__acciones,
  .filtros-panel__grupo--ancho {
    grid-column: auto;
  }
}

@media (max-width: 1023px) {
  .login-footer-inline {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .portal-shell--sidebar-collapsed .portal-sidebar {
    display: none;
  }

  .portal-main {
    margin-left: 0;
  }

  .portal-topbar,
  .tablero-encabezado,
  .operaciones-panel__head,
  .vista-operativa__encabezado {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-topbar-left,
  .portal-topbar-right {
    width: 100%;
    flex-wrap: wrap;
  }

  .portal-user-chip {
    border-left: 0;
    padding-left: 0;
  }

  .tablero-kpis,
  .resumen-operativo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tablero-medio,
  .tarjetas-ruta-grid,
  .tarjetas-monitoreo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .portal-page-canvas,
  .portal-topbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .portal-brand-block,
  .portal-nav-link,
  .portal-footer-link,
  .portal-primary-action {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .tablero-kpis,
  .resumen-operativo,
  .filtros-panel,
  .filtros-panel--compacto,
  .tarjeta-monitoreo__datos {
    grid-template-columns: 1fr;
  }

  .tablero-encabezado__meta {
    text-align: left;
    min-width: auto;
  }

  .operaciones-panel__head div,
  .filtros-panel__acciones {
    flex-wrap: wrap;
  }
}

.password-change-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.password-change-card {
  width: 100%;
  max-width: 36rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.2);
  padding: 2rem;
  box-shadow: var(--sombra-fuerte);
}

.password-change-card__tag {
  display: inline-flex;
  padding: 0.4rem 0.7rem;
  background: rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.password-change-card h1 {
  margin: 1rem 0 0.75rem;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.password-change-card p {
  margin: 0 0 1.5rem;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

/* Acceso denegado: pantalla de cortesia para el usuario autenticado sin modulos del portal
   (perfil de integracion API). Comparte el encuadre del cambio de contrasena. */
.access-denied-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.access-denied-card {
  width: 100%;
  max-width: 34rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.2);
  padding: 2rem;
  box-shadow: var(--sombra-fuerte);
  text-align: center;
}

.access-denied-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 218, 214, 0.6);
  color: #93000a;
  margin-bottom: 1.25rem;
}

.access-denied-card__icon .material-symbols-outlined {
  font-size: 2.1rem;
}

.access-denied-card__tag {
  display: inline-flex;
  padding: 0.4rem 0.7rem;
  background: rgba(255, 218, 214, 0.55);
  color: #93000a;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.access-denied-card h1 {
  margin: 1rem 0 0.75rem;
  font-size: 1.75rem;
  letter-spacing: -0.04em;
}

.access-denied-card p {
  margin: 0 0 1.5rem;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

.access-denied-card__cuenta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(4, 30, 66, 0.06);
  color: var(--color-primario-fuerte);
  font-size: 0.9rem;
}

.access-denied-card__cuenta .material-symbols-outlined {
  font-size: 1.15rem;
}

.access-denied-card__acciones {
  margin-top: 1.5rem;
}

/* La salida es un <a> (funciona aunque el circuito no levante), asi que hay que darle el cuerpo
   que el <button> traia de fabrica. */
.access-denied-card__acciones .login-submit {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.mensaje-estado {
  padding: 0.9rem 1rem;
  border-left: 4px solid var(--color-secundario);
  background: rgba(160, 190, 230, 0.25);
}

.mensaje-estado--error {
  border-left-color: var(--color-error);
  background: rgba(255, 218, 214, 0.45);
  color: #93000a;
}

.mensaje-estado--ok {
  color: var(--color-primario-fuerte);
}

.mensaje-estado--alerta {
  border-left-color: var(--color-error);
  background: rgba(255, 218, 214, 0.5);
  color: #93000a;
}

.tabs-mantenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.tabs-mantenedor button {
  border: 1px solid rgba(196, 198, 207, 0.3);
  background: var(--color-superficie);
  padding: 0.8rem 1rem;
  color: var(--color-texto-suave);
  font-weight: 700;
}

.tabs-mantenedor .tab-activo {
  border-color: var(--color-primario-fuerte);
  background: rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
}

.modal-panel--clientes .tabs-mantenedor {
  gap: 0.5rem;
  max-width: 48rem;
}

.modal-panel--clientes .tabs-mantenedor button {
  width: auto;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  white-space: nowrap;
}

.campo-textarea {
  width: 100%;
  min-height: 6.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 0.5rem;
  background: #f8f9fa;
  color: var(--color-texto);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-textarea:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.campo-lectura {
  width: 100%;
  min-height: 2.85rem;
  display: flex;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.5rem;
  background: rgba(246, 247, 241, 0.95);
  color: var(--color-texto);
  line-height: 1.35;
}

.campo-lectura--multilinea {
  min-height: 5.25rem;
  align-items: flex-start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mantenedor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}

.mantenedor-formulario,
.mantenedor-listado {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.2);
  padding: 1.5rem;
}

.mantenedor-formulario__head h2,
.mantenedor-listado h2 {
  margin: 0;
  font-size: 1.15rem;
}

.mantenedor-formulario__head p {
  margin: 0.5rem 0 0;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

.mantenedor-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.mantenedor-roles {
  margin-top: 1.25rem;
}

.mantenedor-roles > label {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}

.mantenedor-roles__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mantenedor-roles__lista label,
.mantenedor-switch {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-texto);
}

.mantenedor-switch {
  margin-top: 1rem;
}

.listado-simple {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.listado-simple--alto {
  max-height: 34rem;
  overflow: auto;
}

.listado-simple__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.14);
}

.listado-simple__item strong,
.listado-simple__item span {
  display: block;
}

.listado-simple__item span {
  margin-top: 0.25rem;
  color: var(--color-texto-suave);
  font-size: 0.82rem;
}

.listado-simple__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge--alerta {
  background: rgba(255, 218, 214, 0.5);
  color: #93000a;
}

.badge--info {
  background: rgba(42, 82, 152, 0.14);
  color: #2a5298;
}

.badge--ok {
  background: rgba(160, 190, 230, 0.35);
  color: var(--color-primario-fuerte);
}

.vista-operativa__encabezado--accion {
  justify-content: space-between;
  align-items: center;
}

.tabla-operativa-panel--sin-padding {
  padding-bottom: 0;
}

.tabla-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.14);
}

.tabla-panel__head h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.operaciones-accion--texto {
  color: var(--color-primario-fuerte);
  font-weight: 700;
}

.listado-simple__badges--inline {
  justify-content: flex-start;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(3, 31, 65, 0.38);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-panel {
  width: min(42rem, 100%);
  max-height: calc(100vh - 4rem);
  overflow: auto;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
  box-shadow: var(--sombra-fuerte);
  padding: 1.5rem;
}

.modal-panel--compacto {
  width: min(32rem, 100%);
}

.modal-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.modal-panel__tag {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  background: rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.modal-panel__tag--alerta {
  background: rgba(255, 218, 214, 0.6);
  color: #93000a;
}

.modal-panel__head h2 {
  margin: 0.8rem 0 0;
  font-size: 1.45rem;
  letter-spacing: -0.04em;
}

.modal-panel__close {
  color: var(--color-texto-suave);
}

.modal-panel__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modal-ayuda {
  color: var(--color-texto-suave);
  font-size: 0.82rem;
}

.mantenedor-campos--una-columna {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .modal-backdrop {
    padding: 1rem;
  }

  .modal-panel__footer,
  .vista-operativa__encabezado--accion,
  .tabla-panel__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tabla-panel__toolbar {
  padding: 1rem 1.5rem 0;
}

.tabla-panel__toolbar input {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.75rem 0.9rem;
}

.paginador-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(196, 198, 207, 0.14);
  color: var(--color-texto-suave);
  font-size: 0.82rem;
}

/* Variante para cuando el paginador va ARRIBA de la grilla: el separador pasa al borde inferior. */
.paginador-panel--superior {
  border-top: 0;
  border-bottom: 1px solid rgba(196, 198, 207, 0.14);
}

.paginador-panel > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.paginador-panel__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.paginador-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.paginador-panel__page-size {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.paginador-panel__page-size span {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.paginador-panel__page-size select {
  min-width: 5.5rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.5rem 0.65rem;
  font-size: 0.82rem;
  outline: none;
}

.paginador-panel__page-size select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.boton-secundario:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 720px) {
  .paginador-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .paginador-panel__meta,
  .paginador-panel__actions {
    width: 100%;
  }
}

.modal-panel--ancho {
  width: min(74rem, 100%);
}

.modal-panel--clientes {
  width: min(96rem, calc(100vw - 2rem));
  max-height: min(92vh, 58rem);
  overflow-y: auto;
}

.modal-panel__head--alineado {
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.modal-panel__copy {
  margin: 0.85rem 0 0;
  max-width: 42rem;
  color: var(--color-texto-suave);
  line-height: 1.6;
}

.modal-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(4, 30, 66, 0.28);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-texto-suave);
}

.modal-panel__close:hover {
  color: var(--color-primario-fuerte);
  border-color: rgba(4, 30, 66, 0.45);
}

.modal-seccion {
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.55);
}

.modal-seccion__head {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.modal-seccion__head h3 {
  margin: 0;
  color: var(--color-primario-fuerte);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.modal-seccion__head span {
  color: var(--color-texto-suave);
  font-size: 0.74rem;
  font-weight: 700;
}

.modal-formulario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  margin-top: 0;
}

.modal-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mantenedor-roles--integrado {
  margin-top: 0;
}

.mantenedor-check-card {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(196, 198, 207, 0.22);
  background: var(--color-superficie);
}

.mantenedor-check-card span {
  font-weight: 600;
}

.mantenedor-switch--panel {
  margin-top: 0;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(196, 198, 207, 0.22);
  background: var(--color-superficie);
}

.modal-panel__footer--separado {
  margin-top: 1.25rem;
  padding-top: 0.5rem;
}

@media (max-width: 1023px) {
  .modal-switch-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .modal-panel--ancho {
    width: 100%;
  }

  .modal-panel__close {
    width: 3.25rem;
    height: 3.25rem;
  }

  .modal-seccion__head,
  .modal-switch-grid,
  .mantenedor-roles__lista,
  .mantenedor-campos {
    grid-template-columns: 1fr;
  }
}



.modal-panel .filtros-panel__grupo {
  display: grid;
  gap: 0.45rem;
}

.modal-panel .filtros-panel__grupo label,
.modal-panel .mantenedor-roles > label {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.modal-panel .filtros-panel__grupo input,
.modal-panel .filtros-panel__grupo select {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.75rem 0.9rem;
  outline: none;
}

.modal-panel .filtros-panel__grupo input:focus,
.modal-panel .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.modal-panel .mantenedor-roles__lista {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-panel .mantenedor-check-card,
.modal-panel .mantenedor-switch--panel {
  min-height: 3.2rem;
}

.campo-obligatorio {
  color: var(--color-error);
}

.campo-error {
  color: #93000a;
  font-size: 0.76rem;
  font-weight: 700;
}

.modal-panel .campo-control--error,
.filtros-panel .campo-control--error {
  border-color: rgba(186, 26, 26, 0.55) !important;
  background: rgba(255, 218, 214, 0.18) !important;
}

.shipment-edit-page .shipment-detail-card {
  padding: 1.15rem 1.25rem 1.2rem;
}

.shipment-edit-page .mantenedor-campos {
  margin-top: 0.2rem;
}

.shipment-edit-page .filtros-panel__grupo {
  gap: 0.45rem;
}

.shipment-edit-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.shipment-edit-page .filtros-panel__grupo input,
.shipment-edit-page .filtros-panel__grupo select {
  width: 100%;
  min-height: 3rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.2rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.75rem 0.9rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.shipment-edit-page .filtros-panel__grupo input:focus,
.shipment-edit-page .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
  background: #fff;
}

.shipment-edit-page .filtros-panel__grupo input[disabled],
.shipment-edit-page .filtros-panel__grupo select[disabled] {
  background: rgba(4, 30, 66, 0.045);
  color: rgba(4, 30, 66, 0.86);
  border-color: rgba(196, 198, 207, 0.2);
}

.shipment-edit-page .campo-control--error {
  border-color: rgba(186, 26, 26, 0.55) !important;
  background: rgba(255, 218, 214, 0.18) !important;
}

.campo-tarjeta--error {
  border-color: rgba(186, 26, 26, 0.55);
  background: rgba(255, 218, 214, 0.18);
}

.buscador-autocomplete {
  position: relative;
}

.buscador-autocomplete input::-webkit-calendar-picker-indicator {
  opacity: 0.45;
}

.filtros-panel--mantenedor {
  grid-template-columns: minmax(0, 1fr) auto;
}

.transfer-toolbar {
  grid-template-columns: minmax(260px, 1.1fr) minmax(240px, 1fr) auto;
}

.transfer-toolbar .boton-secundario {
  width: 100%;
  min-height: 2.35rem;
}

.transfer-summary {
  margin-top: 1.15rem;
}

.transfer-table {
  margin-top: 1.15rem;
}

.transfer-actions {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196, 198, 207, 0.22);
}

.filtros-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-texto-suave);
  font-weight: 700;
}

.toast-stack {
  position: fixed;
  top: 5rem;
  right: 2rem;
  z-index: 130;
  display: grid;
  gap: 0.75rem;
  width: min(24rem, calc(100vw - 2rem));
}

.toast-panel {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--sombra-fuerte);
  padding: 1rem 1.1rem;
  color: var(--color-primario-fuerte);
  font-size: 0.86rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.toast-panel--ok {
  border-left: 4px solid var(--color-secundario);
}

.toast-panel--error {
  border-left: 4px solid var(--color-error);
  color: #93000a;
}

.toast-panel--leaving {
  transform: translateX(120%);
  opacity: 0;
}

.toast-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
}

.toast-panel__close:hover {
  opacity: 1;
}

.acciones-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.operaciones-accion--alerta {
  color: #8a2d2d;
}

.fila-inactiva {
  opacity: 0.72;
}

.texto-secundario {
  color: var(--color-texto-suave);
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  .toast-stack {
    left: 1rem;
    right: 1rem;
    width: auto;
  }

  .filtros-panel--mantenedor {
    grid-template-columns: 1fr;
  }

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

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

.modal-formulario-grid .filtros-panel__grupo--full {
  grid-column: 1 / -1;
}

/* Cada grupo es a su vez un grid (label + control + ayuda) y, como item del grid del modal, se estira
   a la altura de la fila. Sin esto, un campo SIN texto de ayuda junto a uno que si lo tiene reparte el
   espacio sobrante entre sus filas y el control crece: dos selects vecinos terminan con distinta
   altura sin que nadie lo haya pedido. */
.modal-formulario-grid .filtros-panel__grupo {
  align-content: start;
}

/*
 * Un grupo que solo contiene un check queda mas alto que el campo de al lado, porque no tiene la
 * etiqueta de arriba. Alinearlo al fondo lo deja a la altura del input vecino en vez de flotando.
 */
.modal-formulario-grid .filtros-panel__grupo--check {
  align-content: end;
  padding-bottom: 0.55rem;
}

/* Sin esto el check y su texto se separan a lo ancho de la columna del grid. */
.filtros-panel__grupo--check .filtros-check-inline {
  justify-self: start;
}

.modal-panel--xl {
  width: min(92rem, 100%);
}

.modal-panel--bulk-upload {
  min-height: min(52rem, 86vh);
}

.modal-panel--bulk-upload .modal-panel__head {
  margin-bottom: 0.5rem;
}

.modal-panel--bulk-upload .modal-panel__copy {
  max-width: 52rem;
  line-height: 1.55;
  margin-top: 0.75rem;
}

.modal-panel--bulk-upload .modal-seccion:first-of-type {
  margin-top: 1.5rem;
}

.selector-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
  max-height: 20rem;
  overflow: auto;
}

.selector-chip-grid .mantenedor-check-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.65rem;
  align-items: start;
}

.selector-chip-grid .mantenedor-check-card input {
  grid-row: span 2;
  margin-top: 0.15rem;
}

.selector-chip-grid .mantenedor-check-card small {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
}

.campo-error--bloque {
  display: block;
  margin-top: 0.75rem;
}

.tariff-rules-stack {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.tariff-rule-card {
  border: 1px solid rgba(196, 198, 207, 0.22);
  background: var(--color-superficie);
  padding: 1rem;
}

.tariff-rule-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.tariff-rule-card__head strong,
.tariff-rule-card__head span {
  display: block;
}

.tariff-rule-card__head span {
  margin-top: 0.2rem;
  color: var(--color-texto-suave);
  font-size: 0.76rem;
}

.tariff-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.dual-listbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.dual-listbox__panel {
  display: grid;
  gap: 0.45rem;
}

.dual-listbox__panel label {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dual-listbox__select {
  width: 100%;
  min-height: 18rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.75rem 0.9rem;
  outline: none;
}

.dual-listbox__select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.dual-listbox__actions {
  display: grid;
  gap: 0.75rem;
}

.dual-listbox__actions .boton-secundario {
  min-width: 8rem;
  justify-content: center;
}

.shipment-totals-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.shipment-totals-panel article {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: var(--color-superficie);
}

.shipment-totals-panel span {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.shipment-totals-panel strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-primario-fuerte);
  font-size: 1.15rem;
}

.shipment-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.shipment-detail-card {
  padding: 1.2rem;
}

.shipment-detail-card__head {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.shipment-detail-card__head h2 {
  margin: 0;
  color: var(--color-primario-fuerte);
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.shipment-detail-card__head span {
  color: var(--color-texto-suave);
  font-size: 0.7rem;
  font-weight: 700;
}

.shipment-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.shipment-detail-meta div,
.shipment-detail-notes,
.shipment-detail-addresses article,
.shipment-package-card {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
}

.shipment-detail-meta div,
.shipment-detail-notes,
.shipment-detail-addresses article {
  padding: 0.85rem;
}

.shipment-detail-meta span,
.shipment-detail-notes span,
.shipment-detail-addresses span,
.shipment-package-card__meta span,
.shipment-label-card__content span {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.shipment-detail-meta strong,
.shipment-detail-notes strong,
.shipment-detail-addresses strong,
.shipment-package-card__meta strong,
.shipment-label-card__content strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-primario-fuerte);
}

.shipment-detail-notes {
  margin-top: 1rem;
}

.shipment-detail-addresses {
  display: grid;
  gap: 1rem;
}

.shipment-detail-addresses p,
.shipment-label-card__content p {
  margin: 0.35rem 0 0;
  color: var(--color-texto-suave);
}

.shipment-package-grid {
  display: grid;
  gap: 1rem;
}

.shipment-package-card {
  padding: 0.85rem;
}

.shipment-package-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.shipment-package-card__head strong,
.shipment-package-card__head span {
  display: block;
}

.shipment-package-card__head strong {
  color: var(--color-primario-fuerte);
  font-size: 0.9rem;
}

.shipment-package-card__head span {
  margin-top: 0.2rem;
  color: var(--color-texto-suave);
  font-size: 0.7rem;
}

.shipment-package-card__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

.shipment-package-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.shipment-package-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.shipment-package-card__meta div {
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: var(--color-superficie);
}

.shipment-label-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid rgba(4, 30, 66, 0.18);
  background: var(--color-superficie);
}

.shipment-label-card__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  min-height: 9rem;
  padding: 0.55rem;
  background: #fff;
  border: 1px solid rgba(196, 198, 207, 0.2);
}

.shipment-label-card__qr svg {
  width: 100%;
  height: auto;
}

.shipment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(22rem, 0.8fr);
  gap: 1.5rem;
  align-items: start;
}

.shipment-layout__main,
.shipment-layout__sidebar {
  display: grid;
  gap: 1.5rem;
}

.shipment-layout__sidebar {
  position: sticky;
  top: 1.5rem;
}

.shipment-detail-card__head--action {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.shipment-label-preview {
  border: 1px solid rgba(4, 30, 66, 0.14);
  background: #fff;
  padding: 1rem;
  display: grid;
  gap: 1rem;
  box-shadow: 0 1.1rem 2.8rem rgba(4, 30, 66, 0.08);
  min-width: 0;
}

.shipment-label-preview--fullwidth {
  width: 100%;
}

.shipment-label-preview__header,
.shipment-print-label__header,
.shipment-print-label__footer,
.shipment-print-label__routing,
.shipment-label-preview__body {
  gap: 1rem;
}

.shipment-label-preview__header,
.shipment-print-label__header,
.shipment-print-label__footer,
.shipment-print-label__routing {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.shipment-print-label__footer {
  align-items: start;
  justify-content: flex-start;
}

.shipment-label-preview__header span,
.shipment-print-label__brand-copy,
.shipment-print-label__shipment span,
.shipment-print-label__badge,
.shipment-print-label__service span,
.shipment-print-label__metrics span,
.shipment-label-preview__content span,
.shipment-label-preview__header small,
.shipment-label-preview__content p,
.shipment-label-preview__codes p {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shipment-label-preview__header strong,
.shipment-label-preview__content strong,
.shipment-print-label__shipment strong,
.shipment-print-label__brand,
.shipment-print-label__segment-body strong,
.shipment-print-label__service strong,
.shipment-print-label__metrics strong,
.shipment-print-label__codes strong {
  color: var(--color-primario-fuerte);
}

.shipment-label-preview__header strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.05rem;
  line-height: 1.15;
  word-break: break-word;
}

.shipment-label-preview__qr {
  width: 100%;
  max-width: 10.5rem;
  aspect-ratio: 1;
  min-height: 10.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 198, 207, 0.2);
  background: var(--color-superficie);
  padding: 0.65rem;
  box-shadow: inset 0 0 0 0.35rem rgba(160, 190, 230, 0.12);
  margin: 0 auto;
}

.shipment-label-preview__qr--wide {
  max-width: 15rem;
  min-height: 15rem;
  padding: 0.45rem;
  margin: 0;
}

.shipment-label-preview__qr svg {
  width: 100%;
  height: 100%;
}

.shipment-label-preview__content {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.shipment-label-preview__content--wide {
  align-content: start;
}

.shipment-label-preview__content p,
.shipment-label-preview__codes p {
  margin: 0.3rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  word-break: break-word;
}

.shipment-label-preview__body {
  display: grid;
  grid-template-columns: minmax(8.5rem, 10.5rem) minmax(0, 1fr);
  align-items: start;
}

.shipment-label-preview__body--wide {
  grid-template-columns: minmax(14rem, 15rem) minmax(0, 1fr);
  gap: 1.25rem;
}

.shipment-label-preview__address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.shipment-label-preview__address-grid article {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.35);
  padding: 0.9rem 1rem;
  min-width: 0;
}

.shipment-label-preview__codes--inline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 0;
  padding-top: 0;
}

.shipment-label-preview__codes--inline p {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.35);
  margin: 0;
}

.shipment-label-preview__codes--inline strong {
  display: inline;
}

.shipment-certification-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196, 198, 207, 0.18);
}

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

.shipment-certification-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.9rem;
}

.shipment-certification-media,
.shipment-certification-map {
    display: grid;
    gap: 0.9rem;
}

.shipment-certification-map__frame {
    width: 100%;
    min-height: 20rem;
    border: 1px solid rgba(3, 31, 65, 0.12);
    border-radius: 1rem;
    background: #f8fafc;
}

.shipment-certification-map__actions {
    display: flex;
    justify-content: flex-end;
}

.shipment-certification-photo {
    display: grid;
    gap: 0.45rem;
}

.shipment-certification-photo__button {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.shipment-certification-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1rem;
  border: 1px solid rgba(196, 198, 207, 0.2);
  background: #fff;
}

.shipment-certification-photo span {
    color: var(--color-texto-suave);
    font-size: 0.72rem;
    font-weight: 700;
  }

.shipment-photo-modal-backdrop {
    padding: 1.5rem;
}

.shipment-photo-modal {
    width: min(64rem, 100%);
}

.shipment-photo-modal__body {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: calc(100vh - 12rem);
    overflow: auto;
}

.shipment-photo-modal__body img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 12rem);
    border-radius: 1rem;
    object-fit: contain;
    box-shadow: 0 1rem 2rem rgba(3, 31, 65, 0.12);
}

.pickup-signature-box--delivery {
    margin-top: 0;
    max-width: 46rem;
}

.shipment-tracking-view {
  gap: 1.15rem;
}

.shipment-tracking-search {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.shipment-tracking-search .filtros-panel__grupo {
  margin-bottom: 0;
}

.shipment-tracking-search__actions {
  align-self: end;
  padding-bottom: 0.05rem;
}

.shipment-tracking-empty {
  padding: 0.95rem;
}

.shipment-tracking-empty strong,
.shipment-tracking-empty p {
  display: block;
  margin: 0;
}

.shipment-tracking-empty p {
  margin-top: 0.35rem;
  color: var(--color-texto-suave);
  font-size: 0.74rem;
}

.shipment-tracking-timeline-panel {
  padding: 0.85rem;
  display: grid;
  gap: 0.85rem;
}

.shipment-tracking-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 0.25rem 0 0.55rem;
  scrollbar-width: thin;
}

.shipment-tracking-timeline__item {
  flex: 0 0 8rem;
  min-width: 8rem;
  min-height: 6.1rem;
  padding: 0.78rem 0.72rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.4);
  display: grid;
  gap: 0.32rem;
  justify-items: center;
  text-align: center;
  border-radius: 1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.shipment-tracking-timeline__item .material-symbols-outlined {
  font-size: 1.05rem;
}

.shipment-tracking-timeline__item strong,
.shipment-tracking-timeline__item small {
  display: block;
}

.shipment-tracking-timeline__item strong {
  color: var(--color-primario-fuerte);
  font-size: 0.76rem;
  line-height: 1.15;
}

.shipment-tracking-timeline__item small {
  color: var(--color-texto-suave);
  font-size: 0.62rem;
}

.shipment-tracking-timeline__item--done {
  border-color: rgba(42, 82, 152, 0.22);
  background: rgba(160, 190, 230, 0.22);
}

.shipment-tracking-timeline__item--current {
  border-color: rgba(4, 30, 66, 0.22);
  background: rgba(4, 30, 66, 0.08);
  box-shadow: inset 0 0 0 2px rgba(4, 30, 66, 0.12);
}

.shipment-tracking-timeline__item--upcoming {
  background: rgba(245, 247, 250, 0.28);
  color: var(--color-texto-suave);
  opacity: 0.78;
}

.shipment-tracking-timeline__item--selected {
  transform: translateY(-0.18rem);
  box-shadow: 0 20px 40px rgba(4, 30, 66, 0.1);
}

.shipment-tracking-timeline__line {
  flex: 0 0 3.2rem;
  height: 0.28rem;
  border-radius: 999px;
  margin: 0 0.35rem;
  background: linear-gradient(90deg, rgba(196, 198, 207, 0.18) 0%, rgba(196, 198, 207, 0.42) 100%);
}

.shipment-tracking-timeline__line--active {
  background: linear-gradient(90deg, rgba(42, 82, 152, 0.35) 0%, rgba(4, 30, 66, 0.75) 100%);
}

.shipment-tracking-detail {
  display: grid;
  gap: 1rem;
}

.shipment-tracking-detail__summary,
.shipment-tracking-detail__events {
  padding: 1rem;
}

.shipment-tracking-evidence-stack {
  display: grid;
  gap: 1rem;
}

.shipment-tracking-evidence-card {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.35rem;
}

.shipment-tracking-entry__detail {
  margin-top: 0.35rem;
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  line-height: 1.5;
}

.shipment-tracking-signature {
  width: 8rem;
  min-width: 8rem;
  height: 4.25rem;
  border: 1px solid rgba(196, 198, 207, 0.22);
  border-radius: 0.65rem;
  overflow: hidden;
  background: #f8fafc;
}

.shipment-tracking-signature svg {
  width: 100%;
  height: 100%;
  display: block;
}

.shipment-tracking-signature__empty {
  color: var(--color-texto-suave);
  font-size: 0.74rem;
  font-weight: 700;
}

.shipment-label-preview__codes {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(196, 198, 207, 0.18);
}

.shipment-timeline {
  display: grid;
  gap: 0.95rem;
}

.shipment-timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  position: relative;
}

.shipment-timeline__item::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 1.25rem;
  bottom: -1.05rem;
  width: 2px;
  background: rgba(42, 82, 152, 0.18);
}

.shipment-timeline__item:last-child::before {
  display: none;
}

.shipment-timeline__dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: var(--color-primario);
  box-shadow: 0 0 0 0.3rem rgba(160, 190, 230, 0.35);
  margin-top: 0.35rem;
}

.shipment-timeline__content {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
}

.shipment-timeline__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.shipment-timeline__meta span,
.shipment-timeline__content small {
  color: var(--color-texto-suave);
  font-size: 0.66rem;
  font-weight: 700;
}

.shipment-timeline__meta strong {
  color: var(--color-primario-fuerte);
  font-size: 0.84rem;
}

.shipment-timeline__content p {
  margin: 0.45rem 0 0;
  color: var(--color-texto);
}

.shipment-timeline__empty {
  color: var(--color-texto-suave);
  font-size: 0.82rem;
}

.shipment-labels-page {
  gap: 1.5rem;
}

.shipment-print-stack {
  display: grid;
  gap: 1.5rem;
}

.shipment-print-label {
  width: 100%;
  max-width: 101.6mm;
  min-height: 152.4mm;
  background: #fff;
  border: 1px solid rgba(196, 198, 207, 0.24);
  box-shadow: var(--sombra-fuerte);
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
  page-break-after: always;
  page-break-inside: avoid;
  overflow: hidden;
}

.shipment-print-label__header {
  align-items: start;
  border-bottom: 3px solid var(--color-primario);
  padding-bottom: 0.8rem;
  justify-content: flex-end;
}

.shipment-print-label__shipment {
  text-align: center;
  width: 100%;
  max-width: none;
}

.shipment-print-label__shipment span {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.shipment-print-label__shipment strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.95rem;
  line-height: 1;
  word-break: break-word;
}

.shipment-print-label__segment {
  display: grid;
  grid-template-columns: 4.9rem 1fr;
  gap: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.24);
  align-items: start;
}

.shipment-print-label__badge {
  align-self: start;
  background: var(--color-primario);
  color: #fff;
  padding: 0.25rem 0.4rem;
  width: 100%;
  text-align: center;
}

.shipment-print-label__segment-body p {
  margin: 0.3rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
  word-break: break-word;
}

.shipment-print-label__routing {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 4rem;
  gap: 0.5rem;
}

.shipment-print-label__service,
.shipment-print-label__metrics {
  border: 1px solid rgba(196, 198, 207, 0.24);
  padding: 0.7rem;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.shipment-print-label__metrics {
  grid-template-columns: 1fr;
}

.shipment-print-label__routing > div:last-child {
  border: 1px solid rgba(196, 198, 207, 0.24);
  padding: 0.7rem 0.5rem;
  display: grid;
  align-content: center;
  gap: 0.2rem;
  background: rgba(245, 247, 250, 0.35);
}

.shipment-print-label__routing > div:last-child span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.shipment-print-label__routing > div:last-child strong {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-primario-fuerte);
}

.shipment-print-label__service strong,
.shipment-print-label__metrics strong {
  display: block;
  margin-top: 0;
  font-size: 0.92rem;
  line-height: 1.05;
  word-break: break-word;
}

.shipment-print-label__service strong {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.shipment-print-label__codes {
  width: 100%;
  max-width: 5.6rem;
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.shipment-print-label__codes div {
  border: 1px solid rgba(196, 198, 207, 0.24);
  padding: 0.75rem 0.85rem;
}

.shipment-print-label__codes strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
  line-height: 1.1;
  word-break: break-word;
}

.shipment-print-label__codes--compact strong {
  font-size: 0.98rem;
}

.shipment-print-label__qr-block {
  width: 64mm;
  display: grid;
  gap: 0;
  align-content: start;
  justify-items: start;
  margin-top: -0.8rem;
}

.shipment-print-label__qr {
  width: 64mm;
  height: 64mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-primario);
  padding: 0.2mm;
  background: #fff;
  overflow: hidden;
}

.shipment-print-label__qr svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
}

.admissions-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.75fr);
  gap: 1.15rem;
  align-items: start;
}

.admissions-scanner-card,
.admissions-guide-card {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.admissions-scanner-toolbar {
  grid-template-columns: minmax(15rem, 0.6fr) minmax(0, 1.5fr) minmax(15rem, 0.7fr);
  margin-bottom: 0.85rem;
}

.admissions-scan-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.68rem;
}

.admissions-scan-input input {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.62rem 0.78rem;
  outline: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.admissions-scan-input select {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.62rem 0.78rem;
  outline: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.admissions-scan-input input:focus,
.admissions-scan-input select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.admissions-scanner-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.68rem;
}

.admissions-scanner-meta article,
.admissions-guide-item {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
}

.admissions-scanner-meta article {
  padding: 0.64rem 0.72rem;
}

.admissions-scanner-meta span,
.admissions-guide-item__meta span {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admissions-scanner-meta strong {
  display: block;
  margin-top: 0.28rem;
  color: var(--color-primario-fuerte);
  font-size: 1rem;
  letter-spacing: -0.04em;
}

.admissions-focus-banner {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  margin-bottom: 0.85rem;
  padding: 0.68rem 0.78rem;
  border-left: 4px solid var(--color-primario);
  background: rgba(160, 190, 230, 0.16);
}

.admissions-focus-banner .material-symbols-outlined {
  color: var(--color-primario);
}

.admissions-focus-banner strong,
.admissions-focus-banner p {
  display: block;
  margin: 0;
}

.admissions-focus-banner p {
  margin-top: 0.2rem;
  color: var(--color-texto-suave);
  font-size: 0.68rem;
}

.admissions-guide-list {
  display: grid;
  gap: 1rem;
}

.admissions-guide-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.95rem;
}

.admissions-guide-summary article {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(255, 255, 255, 0.72);
  padding: 0.58rem 0.62rem;
}

.admissions-guide-summary span,
.admissions-guide-summary small {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.admissions-guide-summary strong {
  display: block;
  margin-top: 0.28rem;
  color: var(--color-primario-fuerte);
  font-size: 1.08rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.admissions-guide-summary small {
  margin-top: 0.25rem;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.admissions-guide-item {
  padding: 0.85rem;
}

.admissions-guide-item--completed {
  border-color: rgba(42, 82, 152, 0.22);
  background: rgba(160, 190, 230, 0.22);
}

.admissions-guide-section-title {
  color: var(--color-texto-suave);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 0.35rem;
}

.admissions-guide-item__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.8rem;
}

.admissions-guide-item__head strong,
.admissions-guide-item__head span,
.admissions-guide-item__head small {
  display: block;
}

.admissions-guide-item__status {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
}

.admissions-guide-item__head strong {
  color: var(--color-primario-fuerte);
  font-size: 0.86rem;
}

.admissions-guide-item__head span,
.admissions-guide-item__head small {
  color: var(--color-texto-suave);
  font-size: 0.7rem;
}

.admissions-guide-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.55rem;
  background: rgba(42, 82, 152, 0.16);
  color: var(--color-primario-fuerte);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admissions-guide-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.admissions-guide-progress div {
  width: 100%;
  height: 0.55rem;
  background: var(--color-superficie-fuerte);
  overflow: hidden;
}

.admissions-guide-progress div span {
  display: block;
  height: 100%;
  background: var(--color-primario);
}

.admissions-guide-item--completed .admissions-guide-progress div span {
  background: var(--color-secundario);
}

.admissions-guide-progress strong {
  color: var(--color-primario-fuerte);
  font-size: 0.76rem;
}

.admissions-guide-item__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.admissions-rectified-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid rgba(196, 198, 207, 0.24);
  background: rgba(245, 247, 250, 0.45);
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.admissions-rectified-chip--ok {
  border-color: rgba(42, 82, 152, 0.28);
  background: rgba(160, 190, 230, 0.22);
  color: var(--color-primario-fuerte);
}

.monitoring-header-meta {
  min-width: 14rem;
  text-align: right;
}

.monitoring-header-meta span,
.monitoring-header-meta strong {
  display: block;
}

.monitoring-header-meta span,
.monitoring-kicker {
  color: var(--color-texto-suave);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.monitoring-header-meta strong {
  margin-top: 0.3rem;
  color: var(--color-primario-fuerte);
  font-size: 0.98rem;
}

.monitoring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(24rem, 0.85fr);
  gap: 1.5rem;
  align-items: start;
}

.monitoring-map-panel,
.monitoring-side-card {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.monitoring-map-panel {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.monitoring-map-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: start;
}

.monitoring-map-panel__head h2,
.monitoring-side-card__head h3 {
  margin: 0.3rem 0 0.35rem;
  color: var(--color-primario-fuerte);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}

.monitoring-map-panel__head p {
  margin: 0;
  color: var(--color-texto-suave);
  max-width: 42rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.monitoring-legend {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  min-width: 13rem;
}

.monitoring-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-texto-suave);
  font-size: 0.7rem;
  font-weight: 700;
}

.monitoring-legend__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  display: inline-block;
}

.monitoring-legend__dot--driver {
  background: var(--color-primario);
}

.monitoring-legend__dot--hub {
  background: #041e42;
}

.monitoring-legend__dot--pickup {
  background: var(--color-secundario);
}

.monitoring-legend__dot--idle {
  background: #8da7b8;
}

.monitoring-map-panel__warning {
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--color-error);
  background: rgba(255, 218, 214, 0.45);
}

.monitoring-map-panel__warning strong,
.monitoring-map-panel__warning p {
  display: block;
  margin: 0;
}

.monitoring-map-panel__warning p {
  margin-top: 0.3rem;
  color: var(--color-texto-suave);
}

.monitoring-map-canvas {
  width: 100%;
  min-height: 32rem;
  border: 1px solid rgba(196, 198, 207, 0.2);
  background: linear-gradient(180deg, rgba(160, 190, 230, 0.18), rgba(245, 247, 250, 0.75));
}

.monitoring-side-panel {
  display: grid;
  gap: 1rem;
}

.monitoring-side-card {
  padding: 0.9rem;
  display: grid;
  gap: 0.95rem;
}

.monitoring-side-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.monitoring-side-card__head strong:last-child {
  color: var(--color-primario-fuerte);
  font-size: 1.15rem;
  letter-spacing: -0.04em;
}

.monitoring-side-list {
  display: grid;
  gap: 0.85rem;
  max-height: 35rem;
  overflow: auto;
  padding-right: 0.15rem;
}

.monitoring-side-item {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.8rem;
}

.monitoring-side-item--action {
  width: 100%;
  text-align: left;
}

.monitoring-side-item--selected {
  border-color: rgba(4, 30, 66, 0.22);
  background: rgba(160, 190, 230, 0.2);
}

.monitoring-side-item--highlighted {
  border-color: rgba(42, 82, 152, 0.28);
  box-shadow: inset 0 0 0 2px rgba(42, 82, 152, 0.16);
}

.monitoring-side-item--completed {
  border-color: rgba(42, 82, 152, 0.26);
  background: rgba(160, 190, 230, 0.22);
}

.monitoring-side-item--empty strong,
.monitoring-side-item--empty p,
.monitoring-side-item__head strong,
.monitoring-side-item__head span,
.monitoring-side-item p {
  display: block;
  margin: 0;
}

.monitoring-side-item__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.monitoring-side-item__head strong {
  color: var(--color-primario-fuerte);
  font-size: 0.86rem;
}

.monitoring-side-item__head span,
.monitoring-side-item p {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
}

.monitoring-side-item p {
  margin-top: 0.35rem;
  line-height: 1.45;
}

.monitoring-side-item__percent {
  color: var(--color-primario-fuerte);
  font-size: 0.9rem;
  white-space: nowrap;
}

.monitoring-activity-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  padding: 0.28rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.monitoring-activity-chip--pickup {
  background: rgba(42, 82, 152, 0.16);
  color: var(--color-primario-fuerte);
}

.monitoring-activity-chip--delivery {
  background: rgba(4, 30, 66, 0.14);
  color: var(--color-primario-fuerte);
}

.monitoring-activity-chip--assigned {
  background: rgba(160, 190, 230, 0.28);
  color: var(--color-primario-fuerte);
}

.gm-sdpgo-popup {
  display: grid;
  gap: 0.2rem;
  min-width: 12rem;
}

.gm-sdpgo-popup strong {
  color: var(--color-primario-fuerte);
  font-size: 0.95rem;
}

.gm-sdpgo-popup span,
.gm-sdpgo-popup p,
.gm-sdpgo-popup small {
  margin: 0;
  color: var(--color-texto-suave);
}

.gm-sdpgo-popup span,
.gm-sdpgo-popup small {
  font-size: 0.76rem;
}

.gm-sdpgo-popup p {
  font-size: 0.82rem;
}

.monitoring-detail-panel {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

.monitoring-detail-panel__empty {
  padding: 1rem;
  border-left: 4px solid var(--color-primario);
  background: rgba(160, 190, 230, 0.12);
}

.monitoring-detail-panel__empty strong,
.monitoring-detail-panel__empty p {
  display: block;
  margin: 0;
}

.monitoring-detail-panel__empty p {
  margin-top: 0.3rem;
  color: var(--color-texto-suave);
}

.monitoring-detail-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.monitoring-detail-panel__head h2 {
  margin: 0.3rem 0 0.35rem;
  color: var(--color-primario-fuerte);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.monitoring-detail-panel__head p,
.monitoring-detail-card .shipment-detail-card__head span {
  margin: 0;
  color: var(--color-texto-suave);
}

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

.monitoring-detail-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.5fr);
  gap: 1rem;
}

.monitoring-detail-card {
  display: grid;
  gap: 1rem;
}

.monitoring-detail-card .shipment-detail-card__head h3 {
  margin: 0;
  color: var(--color-primario-fuerte);
  font-size: 1.05rem;
}

.monitoring-detail-meta {
  display: grid;
  gap: 0.85rem;
}

.monitoring-detail-meta article {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.82rem 0.9rem;
}

.monitoring-detail-meta span,
.monitoring-detail-meta strong {
  display: block;
}

.monitoring-detail-meta span {
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.monitoring-detail-meta strong {
  margin-top: 0.35rem;
  color: var(--color-primario-fuerte);
}

.monitoring-detail-table-wrap {
  overflow: auto;
  width: 100%;
}

.inventory-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.inventory-summary-grid article {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
  padding: 0.85rem 0.95rem;
}

.inventory-summary-grid span,
.inventory-summary-grid strong {
  display: block;
}

.inventory-summary-grid span {
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.inventory-summary-grid strong {
  margin-top: 0.35rem;
  color: var(--color-primario-fuerte);
  font-size: 1.45rem;
  letter-spacing: -0.05em;
}

.inventory-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(22rem, 0.75fr);
}

.inventory-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(22rem, 0.75fr);
  gap: 1.15rem;
  align-items: start;
}

.inventory-board-panel {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
  padding: 0.85rem;
  display: grid;
  gap: 1rem;
}

.inventory-board-panel__head h2,
.inventory-card-group__head h3 {
  margin: 0.3rem 0 0.35rem;
  color: var(--color-primario-fuerte);
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.inventory-board-panel__head p {
  margin: 0;
  color: var(--color-texto-suave);
  max-width: 48rem;
  font-size: 0.78rem;
  line-height: 1.38;
}

.inventory-card-group {
  display: grid;
  gap: 0.75rem;
}

.inventory-card-group__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.inventory-card-group__head strong {
  color: var(--color-primario-fuerte);
  font-size: 0.82rem;
}

.inventory-card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.inventory-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.65rem;
}

.inventory-card--selected {
  border-color: rgba(4, 30, 66, 0.22);
  background: rgba(160, 190, 230, 0.2);
}

.inventory-card--empty {
  grid-column: 1 / -1;
}

.inventory-card__head {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: start;
}

.inventory-card__head strong,
.inventory-card__head span,
.inventory-card p,
.inventory-card small {
  display: block;
  margin: 0;
}

.inventory-card__head > div > strong {
  color: var(--color-primario-fuerte);
  font-size: 0.78rem;
  line-height: 1.2;
}

.inventory-card__head span,
.inventory-card p,
.inventory-card small {
  color: var(--color-texto-suave);
  font-size: 0.64rem;
  line-height: 1.35;
}

.inventory-card p {
  margin-top: 0.25rem;
  word-break: break-word;
}

.inventory-card small {
  margin-top: 0.15rem;
}

.inventory-card__qty {
  color: var(--color-primario-fuerte);
  font-size: 0.95rem;
  letter-spacing: -0.05em;
  flex-shrink: 0;
}

.dispatch-entry-grid,
.dispatch-history-grid {
  display: grid;
  gap: 1.5rem;
}

.dispatch-entry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dispatch-entry-card {
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}

.dispatch-entry-card .boton-principal {
  width: 100%;
  justify-content: center;
  min-height: 3rem;
}

.dispatch-history-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dispatch-history-grid--single {
  grid-template-columns: 1fr;
}

.dispatch-list-filters {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) minmax(150px, 180px) minmax(150px, 180px);
  align-items: end;
  margin-top: 1.15rem;
  margin-bottom: 1.15rem;
}

.dispatch-list-filters .filtros-panel__grupo {
  min-width: 0;
}

.dispatch-list-filters input,
.dispatch-list-filters select {
  min-height: 2.8rem;
}

.dispatch-list-table {
  margin-top: 0;
}

/* Quien creo la salida y cuando. Van apilados en una celda y no en dos columnas: la grilla ya
   tiene diez y el dato se lee junto ("lo armo fulano, a tal hora"). */
.dispatch-autor {
  white-space: nowrap;
}

/* Anulacion de despacho: el aviso de lo que el sistema NO puede deshacer (envios ya emitidos en el
   integrador) tiene que leerse antes de firmar, no despues. */
.anulacion-aviso {
  border-left: 3px solid var(--color-alerta, #b42318);
  background: rgba(180, 35, 24, 0.06);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.anulacion-aviso--ficha {
  margin: 0 0 1rem;
}

.anulacion-tabla__check {
  width: 2.4rem;
}

/* Detalle libre del motivo, bajo el nombre del motivo en el historial. */
.anulacion-nota {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
}

.anulacion-panel .operaciones-tabla td {
  vertical-align: middle;
}

/* Evento de un despacho anulado en la bitacora interna: se sigue viendo —adentro del TMS importa
   saber que el bulto estuvo en esa salida— pero atenuado, para que no compita con lo que si paso.
   En el seguimiento del cliente directamente no aparece. */
.shipment-timeline__item--anulado .shipment-timeline__content {
  opacity: 0.62;
}

.shipment-timeline__item--anulado .shipment-timeline__content p {
  text-decoration: line-through;
}

/* Tarjeta "Creado por" de la ficha de despacho: un nombre propio no se lee con el tamano de un KPI
   numerico, asi que baja de cuerpo y la fecha queda de apoyo. */
.kpi-card--autor strong {
  font-size: 1.02rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.kpi-card--autor small {
  margin-top: 0.3rem;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
}

.dispatch-autor__nombre {
  display: block;
}

.dispatch-autor__fecha {
  display: block;
  font-size: 0.78rem;
  color: var(--color-texto-secundario, #6b7280);
}

/* Detalle de despacho (ruta y troncal): tarjetas superiores mas compactas, separacion de la
   lista de bultos y tarjetas "Resumen final" / lateral estandarizadas a fondo blanco. */
.dispatch-detail .shipment-detail-card {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.dispatch-detail .resumen-grid .kpi-card {
  min-height: auto;
  padding: 0.72rem 0.85rem;
}

.dispatch-detail .resumen-grid .kpi-card span {
  font-size: 0.55rem;
}

.dispatch-detail .resumen-grid .kpi-card strong {
  margin-top: 0.3rem;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.dispatch-detail .dispatch-summary-grid {
  margin-bottom: 1.1rem;
}

.dispatch-stop-toolbar {
  margin-bottom: 1rem;
}

.dispatch-target-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dispatch-target-chip {
  min-width: 11.5rem;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(196, 198, 207, 0.22);
  background: rgba(245, 247, 250, 0.45);
  text-align: left;
}

.dispatch-target-chip strong,
.dispatch-target-chip span {
  display: block;
}

.dispatch-target-chip strong {
  color: var(--color-primario-fuerte);
  font-size: 0.76rem;
}

.dispatch-target-chip span {
  margin-top: 0.25rem;
  color: var(--color-texto-suave);
  font-size: 0.64rem;
}

.dispatch-target-chip--active {
  border-color: rgba(4, 30, 66, 0.24);
  background: rgba(160, 190, 230, 0.22);
  box-shadow: inset 0 0 0 1px rgba(4, 30, 66, 0.12);
}

.dispatch-final-grid,
.dispatch-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.dispatch-final-grid--form {
  margin: 0.85rem 0;
  padding: 0.72rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(255, 255, 255, 0.6);
  grid-template-columns: minmax(18rem, 1.4fr) minmax(12rem, 0.7fr) minmax(12rem, 0.7fr);
  align-items: end;
}

.dispatch-final-grid--form .filtros-panel__grupo {
  display: grid;
  gap: 0.45rem;
}

.dispatch-final-grid--form .filtros-panel__grupo label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.dispatch-final-grid--form select,
.dispatch-final-grid--form input {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.56rem 0.72rem;
  outline: none;
  min-height: 2.7rem;
  border-radius: 0.125rem;
  appearance: none;
  -webkit-appearance: none;
  font-size: 0.82rem;
}

.dispatch-final-grid--form select:focus,
.dispatch-final-grid--form input:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.dispatch-summary-grid--wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dispatch-summary-card {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(196, 198, 207, 0.18);
}

.dispatch-summary-grid article {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.68rem 0.75rem;
}

.dispatch-summary-grid span,
.dispatch-summary-grid strong {
  display: block;
}

.dispatch-summary-grid span {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dispatch-summary-grid strong {
  margin-top: 0.3rem;
  color: var(--color-primario-fuerte);
  font-size: 0.82rem;
}

.incident-redispatch-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

.incident-redispatch-top > * {
  min-width: 0;
}

.incident-redispatch-filters {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) minmax(220px, 260px);
  align-items: end;
  margin-top: 1.15rem;
}

.incident-redispatch-filters .filtros-panel__grupo {
  min-width: 0;
}

.incident-redispatch-filters input,
.incident-redispatch-filters select {
  min-height: 2.8rem;
}

.incident-redispatch-sidebar {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.incident-redispatch-sidebar .dispatch-final-grid--form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.incident-redispatch-sidebar .dispatch-summary-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.incident-redispatch-table-card {
  margin-bottom: 1.5rem;
}

.incident-redispatch-table-card .tabla-operativa-panel {
  overflow-x: auto;
  max-width: 100%;
}

.incident-redispatch-table-card .operaciones-tabla {
  min-width: 82rem;
  width: 100%;
}

.incident-redispatch-table-card .operaciones-tabla th,
.incident-redispatch-table-card .operaciones-tabla td {
  vertical-align: top;
}

.incident-redispatch-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196, 198, 207, 0.18);
}

.incident-redispatch-toolbar__meta {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.incident-redispatch-toolbar__meta strong {
  color: var(--color-primario-fuerte);
  font-size: 1.1rem;
  letter-spacing: -0.03em;
}

.incident-redispatch-toolbar__meta span {
  color: var(--color-texto-suave);
  font-size: 0.74rem;
  font-weight: 700;
}

.incident-redispatch-toolbar__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.incident-redispatch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.incident-redispatch-selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.incident-redispatch-selection article {
  min-height: 5.9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
}

.incident-redispatch-selection span {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.incident-redispatch-selection strong {
  display: block;
  margin-top: 0.28rem;
  color: var(--color-primario-fuerte);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.incident-redispatch-picked {
  display: grid;
  gap: 0.9rem;
}

@media (max-width: 1280px) {
  .incident-redispatch-sidebar .dispatch-final-grid--form,
  .incident-redispatch-sidebar .dispatch-summary-grid--wide,
  .incident-redispatch-selection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .incident-redispatch-filters {
    grid-template-columns: 1fr;
  }

  .incident-redispatch-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .incident-redispatch-sidebar .dispatch-final-grid--form,
  .incident-redispatch-sidebar .dispatch-summary-grid--wide,
  .incident-redispatch-selection {
    grid-template-columns: 1fr;
  }
}

.route-manifest-page {
  gap: 1.5rem;
}

.route-manifest-sheet {
  width: min(100%, 8.5in);
  min-height: auto;
  margin: 0 auto;
  padding: 0.85rem;
  background: #ffffff;
  border: 1px solid rgba(196, 198, 207, 0.22);
  display: grid;
  gap: 0.7rem;
}

.route-manifest-sheet__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  border-bottom: 2px solid var(--color-primario);
  padding-bottom: 0.55rem;
}

.route-manifest-sheet__header h2,
.route-manifest-sheet__header span,
.route-manifest-sheet__meta strong,
.route-manifest-sheet__meta span {
  display: block;
  margin: 0;
}

.route-manifest-sheet__header h2 {
  color: var(--color-primario-fuerte);
  font-size: 1rem;
}

.route-manifest-sheet__header span,
.route-manifest-sheet__meta span {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
}

.route-manifest-sheet__meta {
  text-align: right;
}

.route-manifest-sheet__meta strong {
  color: var(--color-primario-fuerte);
  font-size: 0.9rem;
}

.route-manifest-sheet__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.route-manifest-sheet__summary article {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.55rem 0.7rem;
}

.route-manifest-sheet__summary span,
.route-manifest-sheet__summary strong {
  display: block;
}

.route-manifest-sheet__summary span {
  color: var(--color-texto-suave);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.route-manifest-sheet__summary strong {
  margin-top: 0.18rem;
  color: var(--color-primario-fuerte);
  font-size: 0.88rem;
  line-height: 1.2;
}

.route-manifest-table {
  width: 100%;
  border-collapse: collapse;
}

.route-manifest-table th,
.route-manifest-table td {
  border: 1px solid rgba(196, 198, 207, 0.18);
  padding: 0.38rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.route-manifest-table th {
  background: rgba(245, 247, 250, 0.65);
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.route-manifest-table td {
  font-size: 0.72rem;
  line-height: 1.25;
}

/* ------------------------------------------------------------------------------------------------
   Manifiesto compacto (despacho a ruta y delegado). Reclamo de operaciones 27-09-2026: se imprimian
   muchas hojas porque cada fila ocupaba 2-3 lineas y la cabecera eran 4 tarjetas en dos filas.
   La cabecera queda en una linea, el resumen pasa a una tira de texto y la tabla baja letra y aire.
   Codigo, categoria, sector y zona no parten linea y el seller se corta con "...", asi el ancho que
   sobra se lo lleva la direccion, que es la unica columna que de verdad necesita partir linea.
   No se aplica al de integrador: sus casillas de firma usan las tarjetas del resumen.
   ------------------------------------------------------------------------------------------------ */
.route-manifest-sheet--compact {
  gap: 0.35rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__header {
  align-items: baseline;
  padding-bottom: 0.25rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__header > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__header h2 {
  font-size: 0.85rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__header span,
.route-manifest-sheet--compact .route-manifest-sheet__meta span {
  font-size: 0.62rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__meta strong {
  font-size: 0.75rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
}

.route-manifest-sheet--compact .route-manifest-sheet__summary article {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  border: 0;
  background: none;
  padding: 0;
}

.route-manifest-sheet--compact .route-manifest-sheet__summary span {
  font-size: 0.52rem;
  letter-spacing: 0.08em;
}

.route-manifest-sheet--compact .route-manifest-sheet__summary strong {
  margin-top: 0;
  font-size: 0.72rem;
}

.route-manifest-sheet--compact .route-manifest-table {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.route-manifest-sheet--compact .route-manifest-table th,
.route-manifest-sheet--compact .route-manifest-table td {
  border-color: rgba(196, 198, 207, 0.45);
  padding: 0.1rem 0.28rem;
}

.route-manifest-sheet--compact .route-manifest-table th {
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.route-manifest-sheet--compact .route-manifest-table td {
  font-size: 0.6rem;
  line-height: 1.12;
}

/* Filas alternas: con la letra chica es lo que evita que el ojo salte de fila al leer de lado a lado. */
.route-manifest-sheet--compact .route-manifest-table tbody tr:nth-child(even) {
  background: rgba(245, 247, 250, 0.55);
}

.route-manifest-table__fit {
  white-space: nowrap;
}

.route-manifest-table__clip {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linehaul-manifest-section {
  display: grid;
  gap: 0.45rem;
}

.linehaul-manifest-section__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  border-left: 4px solid var(--color-primario);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.5rem 0.7rem;
}

.linehaul-manifest-section__head strong,
.linehaul-manifest-section__head span,
.linehaul-manifest-section__head small {
  display: block;
  margin: 0;
}

.linehaul-manifest-section__head strong {
  color: var(--color-primario-fuerte);
}

.linehaul-manifest-section__head span,
.linehaul-manifest-section__head small {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
}

.inventory-type-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
  padding: 0.22rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: normal;
  text-align: center;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  color: var(--color-primario-fuerte);
}

.inventory-type-chip--hub {
  background: rgba(4, 30, 66, 0.12);
  color: var(--color-primario-fuerte);
}

.inventory-type-chip--pickup {
  background: rgba(42, 82, 152, 0.16);
  color: var(--color-primario-fuerte);
}

.inventory-type-chip--lastmile {
  background: rgba(160, 190, 230, 0.24);
  color: var(--color-primario-fuerte);
}

.inventory-empty-groups {
  display: grid;
  gap: 0.75rem;
}

.inventory-empty-groups__item {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.8rem 0.9rem;
}

.inventory-empty-groups__item strong,
.inventory-empty-groups__item span {
  display: block;
}

.inventory-empty-groups__item strong {
  color: var(--color-primario-fuerte);
  font-size: 0.84rem;
}

.inventory-empty-groups__item span {
  margin-top: 0.25rem;
  color: var(--color-texto-suave);
  font-size: 0.7rem;
}

.inventory-detail-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 1rem;
  align-items: end;
}

.inventory-detail-toolbar__search {
  display: grid;
  gap: 0.45rem;
}

.inventory-detail-toolbar__search label,
.inventory-detail-toolbar__meta span {
  color: var(--color-texto-suave);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.inventory-detail-toolbar__search input {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.68rem 0.8rem;
  font-size: 0.9rem;
  outline: none;
}

.inventory-detail-toolbar__meta {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.45);
  padding: 0.72rem 0.8rem;
}

.inventory-detail-toolbar__meta strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-primario-fuerte);
  font-size: 1.28rem;
  letter-spacing: -0.05em;
}

.pickup-signature-box {
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(248, 252, 246, 0.72);
}

.pickup-signature-box > span {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pickup-signature-box__canvas {
    border: 1px solid rgba(4, 30, 66, 0.12);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
.pickup-signature-box__canvas svg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  
.pickup-signature-box__canvas--detail {
      height: 7.5rem;
      padding: 0.4rem;
    }
  
.pickup-manifest-signature {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.1rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(248, 252, 246, 0.72);
}

.pickup-manifest-signature span {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--color-texto-suave);
    font-size: 0.72rem;
  font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

.pickup-signature-box__canvas--manifest {
    height: 8rem;
  }

.pickup-detail-kpi-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "code code code code code seller seller seller seller hub hub hub"
    "bultos bultos bultos estado estado estado . . . . . .";
  align-items: stretch;
}

.pickup-detail-kpi-card {
  min-height: 5.4rem;
}

.pickup-detail-kpi-card--code {
  grid-area: code;
}

.pickup-detail-kpi-card:nth-child(2) {
  grid-area: seller;
}

.pickup-detail-kpi-card:nth-child(3) {
  grid-area: hub;
}

.pickup-detail-kpi-card:nth-child(4) {
  grid-area: bultos;
}

.pickup-detail-kpi-card--status {
  grid-area: estado;
  justify-content: flex-end;
  align-items: flex-start;
}

.pickup-detail-kpi-card__status {
  display: block;
  margin-top: 0;
  margin-bottom: 0.2rem;
}

.estado-chip--pickup-detail {
  padding: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  background: transparent;
  color: var(--color-primario-fuerte);
  text-transform: none;
}

.pickup-detail-kpi-card strong {
  margin-top: 0.18rem;
}

.pickup-detail-kpi-card--code strong {
  font-size: clamp(1.9rem, 2vw, 2.4rem);
  line-height: 1.05;
}

.pickup-detail-kpi-card--status .estado-chip {
  align-self: flex-start;
}

.pickup-detail-summary-grid {
  grid-template-columns: minmax(20rem, 1.7fr) minmax(14rem, 1.2fr) minmax(10rem, 0.78fr) minmax(8rem, 0.62fr);
  margin-bottom: 1.35rem;
}

.pickup-detail-summary-grid__wide {
  min-width: 0;
}

.pickup-detail-summary-grid__wide strong {
  font-size: 0.96rem;
}

.pickup-detail-table-panel {
  margin-top: 1.2rem;
}

.pickup-detail-context-card {
  margin-top: 10rem;
}

.pickup-list-row--pending td {
  background: linear-gradient(0deg, rgba(255, 243, 205, 0.42), rgba(255, 243, 205, 0.42));
}

.pickup-list-row--partial td {
  background: linear-gradient(0deg, rgba(42, 82, 152, 0.08), rgba(42, 82, 152, 0.08));
}

.pickup-list-row--complete td {
  background: linear-gradient(0deg, rgba(220, 227, 236, 0.6), rgba(220, 227, 236, 0.6));
}

.pickup-list-row:hover td {
  filter: brightness(0.99);
}

.estado-chip--pickup-list {
  padding: 0.42rem 0.7rem;
  font-size: 0.68rem;
}

.pickup-calendar-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(4, 30, 66, 0.1);
  background: linear-gradient(180deg, rgba(248, 249, 250, 0.9), rgba(255, 255, 255, 0.98));
}

.pickup-calendar-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.pickup-calendar-panel__head h2 {
  margin: 0;
  color: var(--color-primario-fuerte);
}

.pickup-calendar-panel__head p {
  margin: 0.25rem 0 0;
  color: var(--color-texto-secundario);
}

.pickup-calendar-empty {
  padding: 2rem 1rem;
  border: 1px dashed rgba(4, 30, 66, 0.18);
  color: var(--color-texto-secundario);
  text-align: center;
}

.pickup-calendar-warning {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(212, 160, 23, 0.28);
  background: rgba(255, 243, 205, 0.7);
  color: #7a5a00;
  font-weight: 700;
}

.pickup-outlook-board {
  display: grid;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: 1rem;
  border: 1px solid rgba(4, 30, 66, 0.1);
  background: linear-gradient(180deg, rgba(250, 252, 248, 0.96), rgba(255, 255, 255, 0.98));
}

.pickup-outlook-board__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
}

.pickup-outlook-board__legend-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-start;
}

.pickup-outlook-board__legend-title {
  color: var(--color-primario-fuerte);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pickup-outlook-board__legend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.pickup-outlook-board__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 18rem;
  color: var(--color-primario-fuerte);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
}

.pickup-outlook-board__legend-square {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.pickup-status-square,
.pickup-demarcation-square {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(4, 30, 66, 0.08);
}

.pickup-status-square--green {
  background: #98d14b;
}

.pickup-status-square--yellow {
  background: #ffef3a;
}

.pickup-status-square--red {
  background: #ff2d20;
}

.pickup-status-square--neutral {
  background: #d8dde3;
}

.pickup-outlook-board__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pickup-outlook-board__day {
  border: 1px solid rgba(4, 30, 66, 0.12);
  background: rgba(255, 255, 255, 0.94);
}

.pickup-outlook-board__day-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
}

.pickup-outlook-board__day-head strong {
  white-space: nowrap;
}

.pickup-outlook-board__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.pickup-outlook-board__table th,
.pickup-outlook-board__table td {
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid rgba(4, 30, 66, 0.06);
  text-align: left;
  vertical-align: top;
  font-size: 0.75rem;
  line-height: 1.25;
  word-break: break-word;
}

.pickup-outlook-board__table th {
  color: var(--color-primario-fuerte);
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  word-break: normal;
  overflow-wrap: anywhere;
}

.pickup-demarcation--green {
  background: #98d14b;
}

.pickup-demarcation--yellow {
  background: #ffef3a;
}

.pickup-demarcation--red {
  background: #ff2d20;
}

.pickup-demarcation--neutral {
  background: #d8dde3;
}

.pickup-calendar-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.8rem;
}

.pickup-calendar-day,
.pickup-calendar-column {
  display: grid;
  gap: 0.7rem;
  min-height: 11rem;
  padding: 0.85rem;
  border: 1px solid rgba(4, 30, 66, 0.1);
  background: rgba(255, 255, 255, 0.92);
}

.pickup-calendar-day--past,
.pickup-calendar-column--past {
  background: rgba(237, 239, 242, 0.92);
  border-color: rgba(4, 30, 66, 0.06);
}

.pickup-calendar-day--active {
  border-color: rgba(4, 30, 66, 0.28);
  box-shadow: 0 10px 25px rgba(4, 30, 66, 0.08);
}

.pickup-calendar-day header,
.pickup-calendar-column__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.pickup-calendar-day header strong,
.pickup-calendar-column__head strong {
  color: var(--color-primario-fuerte);
}

.pickup-calendar-day__items,
.pickup-calendar-column__body,
.pickup-calendar-day-view {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.pickup-calendar-day__more {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
  font-weight: 700;
}

.pickup-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.8rem;
}

.pickup-calendar-hour-grid {
  display: grid;
  gap: 0.75rem;
}

.pickup-calendar-hour-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid rgba(4, 30, 66, 0.08);
  background: rgba(255, 255, 255, 0.92);
}

.pickup-calendar-hour-row--past {
  background: rgba(237, 239, 242, 0.92);
  border-color: rgba(4, 30, 66, 0.06);
}

.pickup-calendar-hour-row__label {
  color: var(--color-primario-fuerte);
  font-size: 0.8rem;
  font-weight: 800;
  padding-top: 0.45rem;
}

.pickup-calendar-hour-row__body {
  display: grid;
  gap: 0.55rem;
  min-height: 3rem;
}

.pickup-calendar-hour-row__empty {
  color: var(--color-texto-secundario);
  font-size: 0.75rem;
  padding: 0.55rem 0.25rem;
}

.pickup-calendar-event {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(4, 30, 66, 0.08);
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.pickup-calendar-event--past {
  background: rgba(245, 246, 248, 0.98);
  border-color: rgba(4, 30, 66, 0.06);
}

.pickup-calendar-event--past strong,
.pickup-calendar-event--past span {
  color: rgba(4, 30, 66, 0.62);
}

.pickup-calendar-event strong {
  font-size: 0.8rem;
}

.pickup-calendar-event span {
  color: var(--color-texto-secundario);
  font-size: 0.72rem;
}

.pickup-calendar-event--row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.pickup-calendar-event.estado-chip--warning {
  border-left: 4px solid #d4a017;
}

.pickup-calendar-event.estado-chip--success {
  border-left: 4px solid #2a9d8f;
}

.pickup-calendar-event.estado-chip--danger {
  border-left: 4px solid #b02a37;
}

.pickup-schedule-grid {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(4, 30, 66, 0.08);
  background:
    linear-gradient(180deg, rgba(244, 248, 250, 0.92), rgba(255, 255, 255, 0.98));
}

.pickup-schedule-row {
  display: grid;
  grid-template-columns: 5rem repeat(7, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: center;
}

.pickup-schedule-row--head {
  align-items: stretch;
}

.pickup-schedule-form-grid {
  row-gap: 1rem;
  margin-bottom: 1.25rem;
}

.pickup-schedule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.pickup-schedule-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  font-weight: 700;
}

.pickup-schedule-legend__count {
  margin-left: auto;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(4, 30, 66, 0.1);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-primario-fuerte);
  font-size: 0.78rem;
  font-weight: 800;
}

.pickup-schedule-legend__swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid rgba(4, 30, 66, 0.18);
  background: rgba(255, 255, 255, 0.96);
}

.pickup-schedule-legend__swatch--selected {
  border-color: rgba(42, 157, 143, 0.72);
  background: #2a9d8f;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.12);
}

.pickup-schedule-legend__swatch--conflict {
  border-color: rgba(176, 42, 55, 0.72);
  background: #b02a37;
  box-shadow: 0 0 0 4px rgba(176, 42, 55, 0.12);
}

.pickup-schedule-estimate {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(4, 30, 66, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-primario-fuerte);
  font-size: 0.82rem;
  line-height: 1.45;
}

.pickup-schedule-conflicts {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(176, 42, 55, 0.16);
  background: rgba(176, 42, 55, 0.06);
  color: #8f2430;
  font-size: 0.8rem;
  line-height: 1.45;
}

.pickup-schedule-row__corner,
.pickup-schedule-column__head {
  min-height: 2.75rem;
  border: 1px solid rgba(4, 30, 66, 0.08);
  background: rgba(233, 238, 245, 0.72);
}

.pickup-schedule-column__head {
  display: grid;
  place-items: center;
  color: var(--color-primario-fuerte);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pickup-schedule-row__label {
  color: var(--color-primario-fuerte);
  font-size: 0.78rem;
  font-weight: 700;
  padding-left: 0.15rem;
}

.pickup-schedule-cell {
  display: grid;
  place-items: center;
  min-height: 2.9rem;
  position: relative;
  border: 1px solid rgba(4, 30, 66, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 250, 0.95));
  color: var(--color-texto-secundario);
  font-weight: 700;
  border-radius: 0.2rem;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.pickup-schedule-cell:hover {
  border-color: rgba(4, 30, 66, 0.22);
  box-shadow: 0 8px 20px rgba(4, 30, 66, 0.08);
  transform: translateY(-1px);
}

.pickup-schedule-cell:focus-visible {
  outline: none;
  border-color: rgba(42, 157, 143, 0.55);
  box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.16);
}

.pickup-schedule-cell__indicator {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 2px solid rgba(4, 30, 66, 0.18);
  background: rgba(255, 255, 255, 0.96);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.pickup-schedule-cell--selected {
  border-color: rgba(42, 157, 143, 0.34);
  background:
    linear-gradient(180deg, rgba(42, 157, 143, 0.22), rgba(42, 157, 143, 0.1));
  color: var(--color-primario-fuerte);
  box-shadow: inset 0 0 0 1px rgba(42, 157, 143, 0.12);
}

.pickup-schedule-cell--selected .pickup-schedule-cell__indicator {
  border-color: rgba(42, 157, 143, 0.72);
  background: #2a9d8f;
  box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.12);
  transform: scale(1.06);
}

.pickup-schedule-cell--conflict {
  border-color: rgba(176, 42, 55, 0.28);
  background:
    linear-gradient(180deg, rgba(176, 42, 55, 0.12), rgba(255, 255, 255, 0.96));
}

.pickup-schedule-cell--conflict .pickup-schedule-cell__indicator {
  border-color: rgba(176, 42, 55, 0.52);
  background: rgba(255, 255, 255, 0.96);
}

.pickup-schedule-cell--selected-conflict {
  border-color: rgba(176, 42, 55, 0.32);
  background:
    linear-gradient(135deg, rgba(42, 157, 143, 0.16), rgba(176, 42, 55, 0.14));
  box-shadow: inset 0 0 0 1px rgba(176, 42, 55, 0.12);
}

.pickup-schedule-cell--selected-conflict .pickup-schedule-cell__indicator {
  border-color: rgba(176, 42, 55, 0.72);
  background: #b02a37;
  box-shadow: 0 0 0 4px rgba(176, 42, 55, 0.12);
}

.pickup-schedule-cell__badge {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #b02a37;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 1100px) {
  .pickup-outlook-board__grid,
  .pickup-calendar-month,
  .pickup-calendar-week {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .pickup-schedule-row__label,
  .pickup-schedule-row__corner {
    grid-column: 1 / -1;
  }

  .pickup-schedule-legend__count {
    width: 100%;
    margin-left: 0;
  }

  .pickup-calendar-hour-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .pickup-outlook-board__grid,
  .pickup-calendar-month,
  .pickup-calendar-week {
    grid-template-columns: 1fr;
  }

  .pickup-calendar-event--row {
    grid-template-columns: 1fr;
  }
}

.shipments-autocomplete {
  position: relative;
}

.shipments-autocomplete__panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 0;
  border: 1px solid rgba(196, 198, 207, 0.22);
  background: var(--color-superficie);
  box-shadow: 0 16px 30px rgba(4, 30, 66, 0.12);
  max-height: 18rem;
  overflow-y: auto;
}

.shipments-autocomplete__item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 0;
  border-bottom: 1px solid rgba(196, 198, 207, 0.16);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.shipments-autocomplete__item:last-child {
  border-bottom: 0;
}

.shipments-autocomplete__item:hover {
  background: rgba(160, 190, 230, 0.14);
}

.shipments-autocomplete__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(196, 198, 207, 0.2);
  background: rgba(245, 247, 250, 0.65);
  color: var(--color-primario-fuerte);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shipments-autocomplete__value {
  color: var(--color-primario-fuerte);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.monitoring-detail-table-wrap .tabla-operativa th {
  font-size: 0.62rem;
}

.monitoring-detail-table-wrap .tabla-operativa td {
  font-size: 0.74rem;
  vertical-align: top;
}

.monitoring-detail-table-wrap .tabla-operativa td strong {
  font-size: 0.8rem;
}

.monitoring-detail-table-wrap .tabla-operativa {
  width: 100%;
  table-layout: fixed;
}

.monitoring-detail-table-wrap .tabla-operativa th:nth-child(1),
.monitoring-detail-table-wrap .tabla-operativa td:nth-child(1) {
  width: 22%;
}

.monitoring-detail-table-wrap .tabla-operativa th:nth-child(2),
.monitoring-detail-table-wrap .tabla-operativa td:nth-child(2) {
  width: 15%;
}

.monitoring-detail-table-wrap .tabla-operativa th:nth-child(3),
.monitoring-detail-table-wrap .tabla-operativa td:nth-child(3) {
  width: 17%;
}

.monitoring-detail-table-wrap .tabla-operativa th:nth-child(4),
.monitoring-detail-table-wrap .tabla-operativa td:nth-child(4) {
  width: 28%;
}

.monitoring-detail-table-wrap .tabla-operativa th:nth-child(5),
.monitoring-detail-table-wrap .tabla-operativa td:nth-child(5) {
  width: 18%;
}

.monitoring-detail-table-wrap .texto-secundario {
  font-size: 0.82rem;
}

.lastmile-live-layout,
.lastmile-history-layout,
.lastmile-detail-layout {
  display: grid;
  gap: 1.25rem;
}

.lastmile-live-layout,
.lastmile-history-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
}

.lastmile-detail-layout {
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
}

.lastmile-live-board,
.lastmile-detail-card,
.lastmile-driver-card,
.lastmile-empty-state {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.lastmile-section-head,
.lastmile-driver-card,
.lastmile-detail-card,
.lastmile-empty-state {
  padding: 0.8rem;
}

.lastmile-section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.lastmile-section-head h2,
.lastmile-section-head p {
  margin: 0;
}

.lastmile-section-head h2 {
  margin-top: 0.35rem;
  color: var(--color-primario-fuerte);
}

.lastmile-section-head p {
  margin-top: 0.35rem;
  color: var(--color-texto-suave);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lastmile-driver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 17.5rem));
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0 1rem 1rem;
}

.lastmile-driver-card {
  display: grid;
  gap: 0.55rem;
  text-align: left;
}

.lastmile-driver-card--selected {
  border-color: rgba(4, 30, 66, 0.28);
  box-shadow: inset 0 0 0 1px rgba(4, 30, 66, 0.12);
}

.lastmile-driver-card__head,
.lastmile-driver-card__identity,
.lastmile-driver-card__compact-meta,
.lastmile-progress-block__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.lastmile-driver-card__identity {
  justify-content: flex-start;
}

.lastmile-driver-card__avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
  font-weight: 800;
  font-size: 0.78rem;
}

.lastmile-driver-card__identity strong,
.lastmile-driver-card__identity span,
.lastmile-driver-card__compact-meta span,
.lastmile-progress-block span,
.lastmile-progress-block strong,
.lastmile-progress-block small {
  display: block;
}

.lastmile-driver-card__identity strong,
.lastmile-progress-block strong {
  color: var(--color-primario-fuerte);
  font-size: 0.95rem;
  line-height: 1.1;
}

.lastmile-driver-card__identity span,
.lastmile-driver-card__compact-meta span,
.lastmile-progress-block span,
.lastmile-progress-block small {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
}

.lastmile-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.12rem 0.45rem;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lastmile-status-chip--online {
  background: rgba(42, 157, 143, 0.14);
  color: #0f5f55;
}

.lastmile-status-chip--idle {
  background: rgba(231, 111, 81, 0.14);
  color: #8c3a2b;
}

.lastmile-progress-block {
  display: grid;
  gap: 0.35rem;
}

.lastmile-driver-card__compact-meta {
  font-size: 0.66rem;
  padding-top: 0.1rem;
  border-top: 1px solid rgba(196, 198, 207, 0.14);
}

.lastmile-progress-bar {
  overflow: hidden;
  width: 100%;
  height: 0.58rem;
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.08);
}

.lastmile-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #041e42, #2a9d8f);
}

.lastmile-map-canvas {
  min-height: 22rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.5);
}

.lastmile-map-canvas--history {
  min-height: 30rem;
}

.lastmile-map-caption,
.lastmile-dispatch-chip-grid {
  display: grid;
  gap: 0.75rem;
}

.lastmile-map-caption {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.8rem;
}

.lastmile-map-caption article,
.lastmile-dispatch-chip {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.55);
  padding: 0.7rem 0.8rem;
}

.lastmile-map-caption span,
.lastmile-dispatch-chip span,
.lastmile-dispatch-chip small {
  display: block;
  color: var(--color-texto-suave);
  font-size: 0.68rem;
}

.lastmile-map-caption strong,
.lastmile-dispatch-chip strong {
  display: block;
  color: var(--color-primario-fuerte);
}

.lastmile-dispatch-chip-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lastmile-empty-state {
  margin: 0 1rem 1rem;
}

.lastmile-empty-state strong,
.lastmile-empty-state p {
  display: block;
  margin: 0;
}

.lastmile-empty-state p {
  margin-top: 0.45rem;
  color: var(--color-texto-suave);
}

@media (max-width: 1200px) {
  .lastmile-live-layout,
  .lastmile-history-layout,
  .lastmile-detail-layout,
  .lastmile-driver-grid,
  .lastmile-dispatch-chip-grid,
  .lastmile-map-caption {
    grid-template-columns: 1fr;
  }
}


@media print {
  .no-print,
  .portal-sidebar,
  .portal-topbar {
    display: none !important;
  }

  .portal-main,
  .portal-page-canvas,
  .shipment-labels-page {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .shipment-print-stack {
    gap: 0 !important;
  }

  .shipment-print-label {
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
  }

  /* ============================================================================================
     Cabecera de los manifiestos al imprimir (ruta, integrador, delegado, troncal y retiro: todos
     comparten estas clases).

     El problema no era el diseño sino el ancho: una hoja carta mide ~816 px, o sea MENOS que el
     punto de quiebre de 1200 px, asi que al imprimir se activaba la regla movil que apila las
     tarjetas del resumen en una sola columna. Cuatro datos que en pantalla ocupan una linea se
     convertian en cuatro bloques y empujaban la tabla —lo unico que de verdad importa del
     manifiesto— hacia abajo, a veces a una segunda hoja.

     Aca se restaura la fila y se aprieta el resto de la cabecera, sin tocar la vista en pantalla.
     ============================================================================================ */
  .route-manifest-sheet__summary {
    /* Cuatro columnas fijas y no auto-fit: los manifiestos tienen 4 tarjetas (ruta, delegado,
       troncal, retiro) u 8 (integrador), asi que 4 da una fila exacta en un caso y dos filas
       parejas en el otro. */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
  }

  .route-manifest-sheet {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 0.4rem !important;
  }

  .route-manifest-page {
    gap: 0 !important;
  }

  .route-manifest-sheet__header {
    padding-bottom: 0.3rem !important;
  }

  .route-manifest-sheet__summary article {
    padding: 0.3rem 0.45rem !important;
  }

  .route-manifest-sheet__summary strong {
    margin-top: 0.05rem !important;
    font-size: 0.8rem !important;
  }

  .linehaul-manifest-section__head {
    padding: 0.3rem 0.5rem !important;
  }

  /* Manifiesto compacto: las reglas de arriba llevan !important, asi que aca se repiten las suyas. */
  .route-manifest-sheet--compact {
    gap: 0.3rem !important;
  }

  .route-manifest-sheet--compact .route-manifest-sheet__header {
    padding-bottom: 0.2rem !important;
  }

  .route-manifest-sheet--compact .route-manifest-sheet__summary {
    gap: 0.1rem 1.1rem !important;
  }

  .route-manifest-sheet--compact .route-manifest-sheet__summary article {
    padding: 0 !important;
  }

  .route-manifest-sheet--compact .route-manifest-sheet__summary strong {
    margin-top: 0 !important;
    font-size: 0.72rem !important;
  }

  /* La firma del retiro se lleva casi 3 cm entre margenes y caja. Se conserva el espacio para
     firmar, que es el punto, pero sin el aire de alrededor. */
  .pickup-manifest-signature {
    margin: 0.5rem 0 0 !important;
    padding: 0.5rem 0.6rem !important;
  }

  .pickup-signature-box__canvas--manifest {
    height: 5rem !important;
  }

  /* La tabla es lo que puede ocupar varias hojas: que no parta una fila al medio y que repita el
     encabezado en cada pagina. */
  .route-manifest-table {
    page-break-inside: auto;
  }

  .route-manifest-table thead {
    display: table-header-group;
  }

  .route-manifest-table tr {
    page-break-inside: avoid;
  }
}

@media (max-width: 1200px) {
  .shipment-totals-panel,
  .shipment-detail-grid,
  .shipment-package-card__body,
  .shipment-package-card__meta,
  .shipment-layout,
  .monitoring-layout,
  .inventory-dashboard-grid,
  .inventory-summary-grid,
  .monitoring-detail-grid,
  .inventory-detail-toolbar,
  .admissions-workbench,
  .admissions-scanner-toolbar,
  .shipment-print-label__routing,
  .shipment-label-preview__body,
  .shipment-label-preview__address-grid,
  .shipment-label-preview__codes--inline,
  .shipment-print-label__footer {
    grid-template-columns: 1fr;
  }

  .shipment-layout__sidebar {
    position: static;
  }

  .monitoring-map-panel__head {
    grid-template-columns: 1fr;
    display: grid;
  }

  .monitoring-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shipment-tracking-search {
    grid-template-columns: 1fr;
  }

  .shipment-tracking-search__actions {
    padding-bottom: 0;
  }

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

  .dispatch-entry-grid,
  .dispatch-history-grid,
  .resumen-grid,
  .dispatch-final-grid,
  .dispatch-summary-grid,
  .dispatch-summary-grid--wide,
  .route-manifest-sheet__summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .selector-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tariff-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .selector-chip-grid,
  .tariff-rule-grid {
    grid-template-columns: 1fr;
  }

  .dual-listbox {
    grid-template-columns: 1fr;
  }

  .dual-listbox__actions {
    grid-template-columns: 1fr 1fr;
  }
}

.vista-operativa__acciones {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.bulk-upload-panel {
  display: grid;
  gap: 1.3rem;
}

.bulk-upload-panel__actions {
  display: flex;
  justify-content: flex-start;
}

.bulk-upload-panel__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.bulk-upload-panel__column {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bulk-upload-dropzone {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 1.8rem 1.6rem;
  border: 1px dashed var(--color-borde);
  border-radius: 0.9rem;
  background: #f9fbf7;
  cursor: pointer;
  min-height: 7.25rem;
  align-content: center;
}

.bulk-upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.bulk-upload-dropzone__title {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--color-primario-fuerte);
}

.bulk-upload-dropzone__copy {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}

.bulk-progress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.bulk-progress-card {
  display: grid;
  gap: 0.35rem;
  padding: 1.2rem 1.1rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 0.85rem;
  min-height: 7.1rem;
  align-content: start;
}

.bulk-progress-card span {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.bulk-progress-card strong {
  font-size: 1.5rem;
  color: var(--color-primario-fuerte);
  letter-spacing: -0.03em;
}

.bulk-progress-bar {
  overflow: hidden;
  width: 100%;
  height: 0.8rem;
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.08);
}

.bulk-progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primario), var(--color-secundario));
  transition: width 0.2s ease;
}

.bulk-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  font-size: 0.84rem;
  color: var(--color-texto-suave);
  margin-top: 0.35rem;
}

.bulk-progress-copy strong {
  color: var(--color-primario-fuerte);
}

@media (max-width: 960px) {
  .bulk-progress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cliente-tarifa-stack {
  display: grid;
  gap: 14px;
}

.cliente-tarifa-card {
  border: 1px solid var(--color-borde);
  background: #fff;
  padding: 16px;
}

.cliente-tarifa-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.cliente-tarifa-card__head small {
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cliente-tarifa-rules {
  display: grid;
  gap: 10px;
}

.cliente-tarifa-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  border-top: 1px solid var(--color-borde);
  padding-top: 12px;
}

.cliente-tarifa-rule__copy {
  display: grid;
  gap: 4px;
}

.cliente-tarifa-rule__copy span {
  color: var(--color-texto-suave);
  font-size: 0.92rem;
}

.cliente-tarifa-discount-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cliente-tarifa-toolbar {
  display: grid;
  grid-template-columns: minmax(18rem, 0.45fr) minmax(18rem, 0.55fr);
  gap: 18px;
  margin: 18px 0 20px;
  max-width: 64rem;
}

.cliente-centros-stack {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  max-width: 76rem;
}

.cliente-centro-card {
  padding: 22px;
}

.cliente-centro-card__head {
  margin-bottom: 18px;
}

.cliente-centro-card__grid {
  grid-template-columns: minmax(10rem, 16rem) minmax(18rem, 1fr);
  gap: 18px;
}

.cliente-centro-card__campo {
  display: grid;
  gap: 12px;
}

.cliente-centro-card__campo input {
  min-height: 48px;
}

.cliente-centro-card__acciones {
  justify-content: flex-start;
  gap: 14px;
  margin-top: 20px;
}

.cliente-centros-actions {
  justify-content: flex-start;
  margin-top: 22px;
}

.cliente-centro-card__tarifas {
  padding-inline: 1.15rem;
}

.cliente-retiro-card {
  padding: 16px 18px;
}

.cliente-retiro-card__head {
  margin-bottom: 12px;
}

.cliente-retiro-card__grid {
  grid-template-columns: 1.5fr 1fr;
  gap: 10px 16px;
}

.cliente-retiro-card__grid .cliente-retiro-card__full {
  grid-column: 1 / -1;
}

.cliente-retiro-card .cliente-centro-card__campo {
  gap: 6px;
}

.cliente-retiro-card .cliente-centro-card__campo input,
.cliente-retiro-card .cliente-centro-card__campo select {
  min-height: 42px;
}

.cliente-retiro-card .cliente-centro-card__acciones {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .cliente-tarifa-rule {
    grid-template-columns: 1fr;
  }

  .cliente-tarifa-discount-grid {
    grid-template-columns: 1fr;
  }

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

.reports-page {
  gap: 1.25rem;
}

.reports-kpis {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.reports-callout {
  padding: 1.15rem 1.35rem;
}

.reports-callout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.reports-callout__grid article {
  background: rgba(242, 246, 251, 0.95);
  border: 1px solid rgba(18, 31, 53, 0.08);
  border-radius: 18px;
  padding: 1rem 1.1rem;
}

.reports-callout__grid span {
  display: block;
  color: var(--color-texto-secundario);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}

.reports-callout__grid strong {
  display: block;
  font-size: 1.7rem;
  color: var(--color-primario);
  margin-bottom: 0.35rem;
}

.reports-callout__grid p {
  margin: 0;
  color: var(--color-texto-secundario);
  font-size: 0.92rem;
  line-height: 1.45;
}

.reports-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.9rem;
}

.reports-section-head h2 {
  margin: 0;
  font-size: 1.08rem;
}

.reports-section-head p {
  margin: 0.35rem 0 0;
  color: var(--color-texto-secundario);
  max-width: 62rem;
}

.reports-table-controls {
  min-width: 210px;
  justify-items: stretch;
  white-space: nowrap;
}

.reports-table-controls label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.reports-table-controls select {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.56rem 0.72rem;
  font-size: 0.82rem;
  outline: none;
}

.reports-table-controls select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.reports-table-scroll {
  max-height: 34rem;
  overflow: auto;
}

/* ===== Supervision FLEX Mercado Libre ===== */
.flex-live-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.flex-live-controls__ventana {
  display: inline-flex;
  gap: 0.35rem;
  margin-right: 0.25rem;
}

.chip-toggle {
  border: 1px solid rgba(26, 54, 93, 0.18);
  background: var(--color-superficie);
  color: var(--color-texto-secundario);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.chip-toggle--activo {
  background: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}

.boton-secundario--activo {
  border-color: var(--color-primario);
  color: var(--color-primario);
  font-weight: 700;
}

.flex-live-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-texto-secundario);
  margin: -0.4rem 0 0.4rem;
}

.flex-live-status__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #9aa3b2;
  display: inline-block;
}

.flex-live-status__dot--on {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
  animation: flexPulse 1.8s infinite;
}

@keyframes flexPulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70% { box-shadow: 0 0 0 0.5rem rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.flex-alertas {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.flex-alerta {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
}

.flex-alerta p { margin: 0.15rem 0 0; font-size: 0.85rem; }

.flex-alerta--error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
  color: #991b1b;
}

.flex-alerta--warn {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.3);
  color: #92400e;
}

.flex-alerta--info {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #1e40af;
}

.flex-cell-alerta {
  color: #b91c1c;
  font-weight: 600;
}

.reports-table {
  min-width: 1500px;
}

.reports-table th {
  white-space: nowrap;
}

.reports-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.reports-table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--color-superficie);
  border-top: 2px solid rgba(26, 54, 93, 0.16);
  font-variant-numeric: tabular-nums;
}

/* Columna "Peso mayor" resaltada: es el valor que manda para tarifa y categoria. */
.reports-th--mayor {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

.reports-cell--mayor {
  background: rgba(217, 119, 6, 0.10);
  color: #92400e;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reports-table tfoot td.reports-cell--mayor {
  background: rgba(217, 119, 6, 0.16);
  color: #92400e;
}

.reports-section-head__acciones {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .reports-section-head {
    flex-direction: column;
  }

  .reports-section-head__acciones {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .reports-table-controls {
    width: 100%;
    max-width: 280px;
  }
}

.profile-permission-groups {
    display: grid;
    gap: 1rem;
}

.profile-permission-group {
    border: 1px solid rgba(26, 54, 93, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem 1.1rem;
}

.profile-permission-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.profile-permission-group__head strong {
    color: #041e42;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-permission-group__head span {
    color: rgba(4, 30, 66, 0.64);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.planning-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.planning-toolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1.5fr) minmax(180px, 0.7fr) minmax(180px, 0.6fr) minmax(220px, 0.8fr);
    gap: 0.85rem;
    align-items: end;
}

.planning-toolbar .filtros-panel__grupo {
    min-width: 0;
}

.planning-toolbar .filtros-panel__grupo input,
.planning-toolbar .filtros-panel__grupo select {
    width: 100%;
}

.planning-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(680px, 1.55fr);
    gap: 1rem;
    align-items: start;
}

.planning-list-card,
.planning-detail-card {
    min-height: 720px;
    border: 1px solid transparent;
    border-radius: 0.125rem;
    background: var(--color-superficie-fuerte);
    box-shadow: none;
    padding: 1rem 1.05rem 1.1rem;
}

.planning-kpi-card {
    min-height: 112px;
    padding: 1rem 1.15rem;
}

.planning-kpi-card span {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.planning-kpi-card strong {
    margin-top: 1.4rem;
    font-size: 2rem;
    line-height: 1;
}

.planning-kpi-card--balance {
    grid-column: span 2;
    min-height: 126px;
}

.planning-kpi-card--balance strong {
    font-size: 2.4rem;
}

.planning-suggestion-list,
.planning-stop-list {
    display: grid;
    gap: 0.8rem;
}

.planning-suggestion-card {
    width: 100%;
    border: 1px solid rgba(4, 30, 66, 0.08);
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.95rem;
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.planning-suggestion-card:hover,
.planning-suggestion-card--active {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 1px var(--color-primario);
    transform: none;
}

.planning-suggestion-card__head,
.planning-detail-section__head,
.planning-suggestion-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.planning-suggestion-card__head strong,
.planning-detail-section__head h3,
.planning-stop-item__content strong {
    color: #041e42;
}

.planning-suggestion-card__head span,
.planning-suggestion-card__footer span,
.planning-detail-section__head span,
.planning-stop-item__content span,
.planning-stop-item__content small {
    color: rgba(4, 30, 66, 0.7);
    font-size: 0.82rem;
}

.planning-suggestion-card__meta,
.planning-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.planning-suggestion-card__meta article,
.planning-summary-grid article {
    border: 1px solid transparent;
    border-radius: 0.125rem;
    background: var(--color-superficie-fuerte);
    padding: 0.75rem 0.85rem;
}

.planning-suggestion-card__meta span,
.planning-summary-grid span {
    display: block;
    color: rgba(4, 30, 66, 0.64);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planning-suggestion-card__meta strong,
.planning-summary-grid strong {
    display: block;
    margin-top: 0.3rem;
    color: #041e42;
    font-size: 0.98rem;
}

.planning-detail-section {
    margin-top: 1.1rem;
}

.planning-map-canvas {
    width: 100%;
    height: clamp(520px, 58vh, 700px);
    min-height: 520px;
    border: 1px solid rgba(4, 30, 66, 0.08);
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.88);
    overflow: hidden;
}

/* position + z-index:0 crean un STACKING CONTEXT propio, y ese es el punto de la regla.

   Leaflet reparte z-index altos entre sus capas: 400 a los panes, 800 a los controles y 1000 a las
   esquinas. El modal de la aplicacion vive en 120, asi que sin aislar nada el mapa de cobertura —que esta
   en la pagina de atras— se dibujaba ENCIMA del modal de importacion.

   Subir el z-index del modal habria sido perseguir el sintoma: cualquier otro componente con z-index alto
   volveria a ganarle. Encerrando el mapa en su propio contexto, sus 1000 internos pasan a ordenarse solo
   entre ellos y el contenedor completo se comporta como una capa 0 frente al resto de la interfaz. */
.sector-map-canvas {
    position: relative;
    z-index: 0;
    width: 100%;
    height: clamp(460px, 56vh, 640px);
    min-height: 460px;
    border: 1px solid rgba(4, 30, 66, 0.08);
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.88);
    overflow: hidden;
}

.sector-map-actions {
    margin-top: 0.75rem;
}

/* Mapa de cobertura de la pantalla de sectores: mas bajo que el editor, porque comparte pantalla
   con la tabla y las cajas de resumen. */
.sector-map-canvas--overview {
    height: clamp(380px, 44vh, 520px);
    min-height: 380px;
}

.sector-overview-panel {
    padding: 1rem 1.15rem 1.15rem;
}

.sector-overview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Los vertices los dibuja Leaflet como divIcon; el <span> interior es el punto visible. Sin
   pointer-events el marcador entero deja de recibir el arrastre. */
.sector-vertice span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: grab;
}

.sector-vertice--intermedio span {
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px dashed rgba(4, 30, 66, 0.55);
    box-shadow: none;
    cursor: copy;
}

.sector-import-warnings {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: rgba(4, 30, 66, 0.78);
}

/* La previsualizacion de la importacion puede traer decenas de filas: se acota el alto para que el
   boton de confirmar no quede fuera de pantalla. */
.sector-import-tabla {
    max-height: 340px;
    overflow: auto;
    border: 1px solid rgba(4, 30, 66, 0.08);
    border-radius: 0.125rem;
}

.sector-color-dot {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    margin-right: 0.45rem;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.planning-map-warning {
    border: 1px solid rgba(4, 30, 66, 0.08);
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.95rem 1rem;
    color: #041e42;
}

.planning-map-warning strong,
.planning-map-note {
    color: #041e42;
}

.planning-map-warning p,
.planning-map-note {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    color: rgba(4, 30, 66, 0.72);
}

.planning-zone-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.planning-stop-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    border: 1px solid rgba(4, 30, 66, 0.08);
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.88);
    padding: 0.85rem 0.95rem;
}

.planning-stop-item__index {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #041e42;
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}

.planning-stop-item__content {
    display: grid;
    gap: 0.2rem;
    width: 100%;
}

.planning-stop-item__eta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.planning-stop-item__eta span {
    border: 1px solid rgba(4, 30, 66, 0.08);
    background: rgba(4, 30, 66, 0.04);
    color: #041e42;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.45rem;
    text-transform: uppercase;
}

.planning-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 1200px) {
    .planning-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .planning-kpi-card--balance {
        grid-column: span 3;
    }

    .planning-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planning-layout {
        grid-template-columns: 1fr;
    }

    .planning-map-canvas {
        height: clamp(460px, 56vh, 620px);
        min-height: 460px;
    }

    .planning-list-card,
    .planning-detail-card {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .planning-kpi-grid,
    .planning-toolbar {
        grid-template-columns: 1fr;
    }

    .planning-kpi-card--balance {
        grid-column: span 1;
    }

    .planning-map-canvas {
        height: 420px;
        min-height: 420px;
    }
}

.operational-heatmap-page {
  gap: 1.2rem;
}

.operational-heatmap-filters,
.operational-heatmap-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

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

.operational-heatmap-layout {
  display: grid;
  grid-template-columns: minmax(620px, 1.45fr) minmax(320px, 0.75fr);
  gap: 1rem;
  align-items: start;
}

.operational-heatmap-map-panel,
.operational-heatmap-card {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: var(--color-superficie);
}

.operational-heatmap-map-panel {
  padding: 1rem;
}

.operational-heatmap-map-panel__head,
.operational-heatmap-card__head,
.operational-heatmap-row__head,
.operational-heatmap-row__metrics,
.operational-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.operational-heatmap-map-panel__head {
  align-items: flex-start;
  margin-bottom: 0.9rem;
}

.operational-heatmap-map-panel__head h2,
.operational-heatmap-map-panel__head p,
.operational-heatmap-card h3,
.operational-heatmap-card p {
  margin: 0;
}

.operational-heatmap-map-panel__head h2,
.operational-heatmap-card h3 {
  color: var(--color-primario-fuerte);
}

.operational-heatmap-map-panel__head p,
.operational-heatmap-card p {
  margin-top: 0.35rem;
  color: var(--color-texto-suave);
  line-height: 1.45;
}

.operational-heatmap-map-canvas {
  min-height: 34rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.5);
}

.operational-heatmap-empty-map-note {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(196, 198, 207, 0.18);
  border-top: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-texto-suave);
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
}

.operational-heatmap-empty-map-note strong {
  color: var(--color-primario-fuerte);
}

.operational-heatmap-legend {
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  font-weight: 700;
}

.operational-heatmap-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.operational-heatmap-legend__dot {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
}

.operational-heatmap-legend__dot--low { background: #2a9d8f; }
.operational-heatmap-legend__dot--medium { background: #e76f51; }
.operational-heatmap-legend__dot--high { background: #ba1a1a; }

.operational-heatmap-side,
.operational-heatmap-list {
  display: grid;
  gap: 0.85rem;
}

.operational-heatmap-card {
  padding: 1rem;
}

.operational-heatmap-focus {
  border-left: 3px solid var(--color-error);
}

.operational-heatmap-guide {
  border-left: 3px solid var(--color-secundario);
}

.operational-heatmap-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.operational-heatmap-guide__grid span {
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.5);
  color: var(--color-texto-suave);
  padding: 0.5rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.operational-heatmap-card__head {
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.operational-heatmap-card__head h3 {
  margin: 0.25rem 0 0;
}

.operational-heatmap-card__head strong {
  color: var(--color-primario-fuerte);
  font-size: 1.35rem;
}

.operational-heatmap-row {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.42);
  padding: 0.78rem 0.85rem;
  text-align: left;
}

.operational-heatmap-row:hover,
.operational-heatmap-row--selected {
  border-color: var(--color-primario);
  box-shadow: inset 0 0 0 1px rgba(4, 30, 66, 0.14);
}

.operational-heatmap-row__head strong,
.operational-heatmap-row__head span {
  color: var(--color-primario-fuerte);
}

.operational-heatmap-row__head span {
  font-size: 0.78rem;
  font-weight: 800;
}

.operational-heatmap-row__metrics {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.operational-heatmap-row__metrics span {
  color: var(--color-texto-suave);
  font-size: 0.68rem;
  font-weight: 700;
}

.operational-heatmap-row__bar {
  overflow: hidden;
  width: 100%;
  height: 0.38rem;
  margin-top: 0.65rem;
  background: rgba(4, 30, 66, 0.08);
}

.operational-heatmap-row__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2a9d8f, #e76f51, #ba1a1a);
}

.operational-heatmap-table {
  min-width: 980px;
}

.operational-heatmap-info {
  display: grid;
  gap: 0.35rem;
  max-width: 260px;
  color: #041e42;
}

.operational-heatmap-info strong,
.operational-heatmap-info span,
.operational-heatmap-info small {
  display: block;
}

.operational-heatmap-info p {
  margin: 0;
  color: rgba(4, 30, 66, 0.74);
}

.operational-heatmap-info div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.operational-heatmap-info small {
  border: 1px solid rgba(4, 30, 66, 0.12);
  background: rgba(245, 247, 250, 0.8);
  padding: 0.2rem 0.35rem;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .operational-heatmap-layout,
  .operational-heatmap-filters,
  .operational-heatmap-summary {
    grid-template-columns: 1fr;
  }

  .operational-heatmap-map-panel__head {
    display: grid;
  }

  .operational-heatmap-map-canvas {
    min-height: 28rem;
  }
}

.global-transit {
  --transit-ink: #121826;
  --transit-muted: #697184;
  --transit-line: #dfe5ee;
  --transit-paper: rgba(255, 255, 255, 0.92);
  --transit-sand: #f5f7ef;
  --transit-green: #173f35;
  --transit-blue: #203c73;
}

.global-transit__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.45rem;
  color: var(--transit-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.global-transit__header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.global-transit__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.global-transit__summary article,
.global-transit__board,
.global-transit-detail {
  border: 1px solid rgba(18, 24, 38, 0.08);
  background: var(--transit-paper);
  box-shadow: 0 18px 48px rgba(18, 24, 38, 0.06);
}

.global-transit__summary article {
  padding: 1rem 1.1rem;
}

.global-transit__summary span,
.global-transit-card__top small,
.global-transit-card__route span,
.global-transit-card__eta span,
.global-transit-detail__facts span,
.global-transit-detail__hero span {
  display: block;
  color: var(--transit-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.global-transit__summary strong {
  display: block;
  margin-top: 0.45rem;
  color: var(--transit-ink);
  font-size: 1.7rem;
  line-height: 1;
}

.global-transit__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.8fr);
  gap: 1.25rem;
  align-items: start;
}

.global-transit__board,
.global-transit-detail {
  min-width: 0;
  padding: 1.2rem;
}

.global-transit__toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.global-transit__toolbar h2,
.global-transit-detail__head h2,
.global-transit-cargo__head h3 {
  margin: 0;
  color: var(--transit-ink);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.global-transit__filters {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.25rem;
  background: #eef2f6;
}

.global-transit__filter {
  border: 0;
  background: transparent;
  color: var(--transit-muted);
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.global-transit__filter--active {
  background: #ffffff;
  color: var(--transit-ink);
  box-shadow: 0 8px 24px rgba(18, 24, 38, 0.08);
}

.global-transit__list {
  display: grid;
  gap: 0.85rem;
}

.global-transit-card {
  display: grid;
  width: 100%;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  background: linear-gradient(135deg, #ffffff 0%, #f8faf5 100%);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.global-transit-card:hover,
.global-transit-card--selected {
  transform: translateY(-2px);
  border-color: rgba(23, 63, 53, 0.32);
  box-shadow: 0 18px 44px rgba(18, 24, 38, 0.1);
}

.global-transit-card__top,
.global-transit-card__meta,
.global-transit-card__eta,
.global-transit-cargo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.global-transit-card__top strong {
  color: var(--transit-ink);
  font-size: 1rem;
  margin-right: auto;
}

.global-transit-card__kind {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.55rem;
  color: #ffffff;
  background: var(--transit-green);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.global-transit-card__kind--linehaul {
  background: var(--transit-blue);
}

.global-transit-card__kind--pickup {
  background: var(--transit-green);
}

.global-transit-card__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
}

.global-transit-card__route strong {
  display: block;
  margin-top: 0.3rem;
  color: var(--transit-ink);
  font-size: 0.95rem;
}

.global-transit-card__line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.45rem;
  align-items: center;
  color: var(--transit-green);
}

.global-transit-card__line i {
  display: block;
  height: 1px;
  background: var(--transit-line);
}

.global-transit-card__line .material-symbols-outlined {
  font-size: 1.25rem;
}

.global-transit-card__meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--transit-muted);
  font-size: 0.82rem;
}

.global-transit-card__meta span {
  padding-right: 0.75rem;
  border-right: 1px solid var(--transit-line);
}

.global-transit-card__meta span:last-child {
  border-right: 0;
}

.global-transit-card__eta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 0.75rem;
  border-top: 1px solid var(--transit-line);
}

.global-transit-card__eta strong,
.global-transit-detail__facts strong,
.global-transit-detail__hero strong {
  display: block;
  margin-top: 0.28rem;
  color: var(--transit-ink);
  font-size: 0.82rem;
}

.global-transit-detail {
  position: sticky;
  top: 1rem;
}

.global-transit-detail__empty,
.global-transit__empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 2rem;
  text-align: center;
  background: var(--transit-sand);
}

.global-transit-detail__empty .material-symbols-outlined {
  color: var(--transit-green);
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.global-transit-detail__empty strong,
.global-transit__empty strong {
  color: var(--transit-ink);
  font-size: 1rem;
}

.global-transit-detail__empty p,
.global-transit__empty p,
.global-transit-detail__head p {
  margin: 0.4rem 0 0;
  color: var(--transit-muted);
}

.global-transit-detail__head h2 {
  font-size: 0.92rem;
}

.global-transit-detail__head p {
  font-size: 0.82rem;
}

.global-transit-detail__head {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.global-transit-detail__hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.global-transit-detail__hero article,
.global-transit-detail__facts article {
  padding: 0.78rem;
  background: var(--transit-sand);
}

.global-transit-detail__path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--transit-line);
  border-bottom: 1px solid var(--transit-line);
}

.global-transit-detail__path i {
  display: block;
  height: 1px;
  background: var(--transit-green);
}

.global-transit-detail__path strong,
.global-transit-detail__path span {
  display: block;
}

.global-transit-detail__path strong {
  color: var(--transit-ink);
  font-size: 0.86rem;
}

.global-transit-detail__path span {
  margin-top: 0.25rem;
  color: var(--transit-muted);
  font-size: 0.72rem;
}

.global-transit-detail__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.global-transit-cargo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--transit-line);
}

.global-transit-cargo__head strong {
  color: var(--transit-ink);
  font-size: 1rem;
}

.global-transit-cargo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.85rem 0;
}

.global-transit-cargo__chips span {
  padding: 0.42rem 0.55rem;
  background: #eef2f6;
  color: var(--transit-muted);
  font-size: 0.76rem;
}

.global-transit-cargo__list {
  display: grid;
  gap: 0.5rem;
  max-height: 360px;
  overflow: auto;
}

.global-transit-cargo__list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.75rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
}

.global-transit-cargo__list strong,
.global-transit-cargo__list span,
.global-transit-cargo__list small {
  display: block;
}

.global-transit-cargo__list strong {
  color: var(--transit-ink);
}

.global-transit-cargo__list span,
.global-transit-cargo__list small {
  color: var(--transit-muted);
  font-size: 0.78rem;
}

@media (max-width: 1180px) {
  .global-transit__shell,
  .global-transit__summary {
    grid-template-columns: 1fr 1fr;
  }

  .global-transit-detail {
    position: static;
  }
}

@media (max-width: 760px) {
  .global-transit__header-actions,
  .global-transit__toolbar,
  .global-transit-card__top {
    align-items: stretch;
    flex-direction: column;
  }

  .global-transit__shell,
  .global-transit__summary,
  .global-transit-card__route,
  .global-transit-card__eta,
  .global-transit-detail__hero,
  .global-transit-detail__facts,
  .global-transit-detail__path {
    grid-template-columns: 1fr;
  }

  .global-transit-card__line {
    grid-template-columns: 1fr auto 1fr;
  }
}

.dispatch-live-page {
  display: grid;
  gap: 1rem;
}

.dispatch-live-toolbar {
  align-items: end;
}

.dispatch-live-panel {
  overflow: hidden;
}

.dispatch-live-table-wrap {
  max-height: 68vh;
}

.dispatch-live-table th:nth-child(1),
.dispatch-live-table td:nth-child(1) {
  min-width: 12rem;
}

.dispatch-live-table th:nth-child(6),
.dispatch-live-table td:nth-child(6) {
  min-width: 28rem;
}

/* Densidad compartida por las vistas Tabla y Consolidado para soportar muchas ultimas
   millas (40+) sin verse extenso: tipografia, padding, pills y encabezados reducidos. */
.dispatch-live-table td {
  font-size: .78rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
}

.dispatch-live-table thead th {
  font-size: .6rem;
  letter-spacing: .04em;
  padding-top: .4rem;
  padding-bottom: .4rem;
}

.dispatch-live-table .dispatch-live-vehicle {
  font-size: .8rem;
}

.dispatch-live-table .dispatch-live-muted {
  font-size: .68rem;
  margin-top: .08rem;
}

.dispatch-live-table .dispatch-live-pill {
  font-size: .7rem;
  min-width: 1.7rem;
  padding: .12rem .4rem;
}

/* Bultos, Despachos y Avance ajustadas a su contenido (sin huecos). Se usan AMBAS clases
   del <table> para ganar en especificidad a las reglas base de nth-child(6)/(7) de la vista
   Tabla, que aparecen mas abajo en este archivo (min-width 28rem y 13.5rem) y, con igual
   especificidad, ganarian por orden de fuente. */
.dispatch-live-table.dispatch-live-table--consolidado th:nth-child(6),
.dispatch-live-table.dispatch-live-table--consolidado td:nth-child(6),
.dispatch-live-table.dispatch-live-table--consolidado th:nth-child(7),
.dispatch-live-table.dispatch-live-table--consolidado td:nth-child(7),
.dispatch-live-table.dispatch-live-table--consolidado th:nth-child(8),
.dispatch-live-table.dispatch-live-table--consolidado td:nth-child(8) {
  min-width: 0;
  width: 1%;
  white-space: nowrap;
}

/* La columna "Ultima milla" (9na) absorbe la holgura del ancho. */
.dispatch-live-table.dispatch-live-table--consolidado th:nth-child(9),
.dispatch-live-table.dispatch-live-table--consolidado td:nth-child(9) {
  width: 100%;
}

/* Despachos (7ma) alineada a la derecha: el pill queda pegado a la barra de avance. */
.dispatch-live-table.dispatch-live-table--consolidado th:nth-child(7),
.dispatch-live-table.dispatch-live-table--consolidado td:nth-child(7) {
  text-align: right;
  padding-right: .3rem;
}

/* Avance (8va) sin sangria izquierda: la barra arranca justo despues de Despachos. */
.dispatch-live-table.dispatch-live-table--consolidado th:nth-child(8),
.dispatch-live-table.dispatch-live-table--consolidado td:nth-child(8) {
  padding-left: .3rem;
}

/* Vista Tabla: mismo criterio que Consolidado. "Bultos" (6ta) ajustada a su contenido
   (sin el hueco de 28rem) y "Avance entregas" (7ma) toma el espacio sobrante para que
   las barras apiladas se vean amplias y pegadas al resto. */
.dispatch-live-table.dispatch-live-table--tabla th:nth-child(6),
.dispatch-live-table.dispatch-live-table--tabla td:nth-child(6) {
  min-width: 0;
  width: 1%;
  white-space: nowrap;
}

.dispatch-live-table.dispatch-live-table--tabla th:nth-child(7),
.dispatch-live-table.dispatch-live-table--tabla td:nth-child(7) {
  width: 100%;
}

.dispatch-live-table--tabla .dispatch-live-progress-track {
  height: 1.6rem;
}

.dispatch-live-table--tabla .dispatch-live-progress-label {
  font-size: .76rem;
}

.dispatch-live-table--tabla .dispatch-live-progress-stack {
  gap: .45rem;
}

.dispatch-live-table--consolidado .dispatch-live-progress-track {
  height: 1.3rem;
  min-width: 8.5rem;
  width: 8.5rem;
}

.dispatch-live-table--consolidado .dispatch-live-progress-label {
  font-size: .7rem;
}

.dispatch-live-table .dispatch-live-detail-button {
  font-size: .72rem;
  padding: .25rem .55rem;
}

.dispatch-live-vehicle,
.dispatch-live-muted {
  display: block;
}

.dispatch-live-vehicle {
  color: #102033;
  font-weight: 850;
}

.dispatch-live-muted {
  color: #64748b;
  font-size: .78rem;
  line-height: 1.25;
  margin-top: .2rem;
}

.dispatch-live-pill {
  align-items: center;
  background: #eef6f4;
  border: 1px solid #c8dfd9;
  border-radius: 999px;
  color: #1f5c55;
  display: inline-flex;
  font-size: .8rem;
  font-weight: 800;
  justify-content: center;
  min-width: 2.2rem;
  padding: .25rem .55rem;
}

.dispatch-live-progress-stack {
  display: grid;
  gap: .62rem;
}

.dispatch-live-progress-node {
  display: grid;
  gap: .22rem;
  position: relative;
}

.dispatch-live-progress-row {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  padding: .12rem 0;
  text-align: left;
  width: 100%;
}

.dispatch-live-progress-row:hover .dispatch-live-progress-track {
  box-shadow: 0 0 0 2px rgba(16, 32, 51, .08);
}

.dispatch-live-progress-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: #475569;
  cursor: pointer;
  display: flex;
  font-size: .72rem;
  font-weight: 850;
  gap: .35rem;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0 .2rem;
  text-align: left;
  width: 100%;
}

.dispatch-live-progress-link::before {
  border: 1px solid #94a3b8;
  border-radius: 999px;
  content: "";
  flex: 0 0 .46rem;
  height: .46rem;
}

.dispatch-live-progress-link--incoming {
  color: #1f5c55;
}

.dispatch-live-progress-link--incoming::before {
  background: #2f8f83;
  border-color: #2f8f83;
}

.dispatch-live-progress-link--outgoing {
  color: #8f3340;
  padding-left: 1.1rem;
  position: relative;
}

.dispatch-live-progress-link--outgoing::after {
  background: #b44752;
  bottom: calc(100% - .08rem);
  content: "";
  left: .38rem;
  position: absolute;
  top: -.35rem;
  width: 2px;
}

.dispatch-live-progress-link--outgoing::before {
  background: #b44752;
  border-color: #b44752;
}

.dispatch-live-progress-link:hover span {
  text-decoration: underline;
}

.dispatch-live-progress-code {
  color: #334155;
  font-size: .78rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-live-progress-track {
  background: #edf1f4;
  border: 1px solid #d7e0e6;
  border-radius: 9px;
  display: block;
  height: 1.95rem;
  min-width: 12rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* La columna "Avance entregas" (7ma) necesita ancho para que la barra se vea bien. */
.dispatch-live-table th:nth-child(7),
.dispatch-live-table td:nth-child(7) {
  min-width: 13.5rem;
}

.dispatch-live-progress-track--card {
  height: 1.35rem;
  margin-top: .65rem;
}

.dispatch-live-progress-fill {
  bottom: 0;
  display: block;
  position: absolute;
  top: 0;
}

.dispatch-live-progress-fill--delivered {
  background: linear-gradient(90deg, #2f8f83, #48aa9c);
  left: 0;
}

.dispatch-live-progress-fill--incidented {
  background: linear-gradient(90deg, #a9404a, #c4515b);
}

.dispatch-live-progress-label {
  align-items: center;
  color: #0f172a;
  display: flex;
  font-size: .84rem;
  font-weight: 850;
  inset: 0;
  justify-content: center;
  line-height: 1;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  z-index: 2;
}

.dispatch-live-progress-meta {
  color: #475569;
  font-size: .76rem;
  font-weight: 800;
  text-align: right;
}

.dispatch-live-detail-button {
  white-space: nowrap;
}

.dispatch-live-modal {
  max-height: 92vh;
  overflow: auto;
}

.dispatch-live-modal-kpis {
  margin: .8rem 0 1rem;
}

.dispatch-live-dispatch-grid {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1rem;
}

.dispatch-live-dispatch-card {
  background: #ffffff;
  border: 1px solid #dce3ea;
  border-radius: 8px;
  cursor: pointer;
  padding: .85rem;
  text-align: left;
}

.dispatch-live-dispatch-card--selected {
  border-color: #2a9d8f;
  box-shadow: 0 0 0 3px rgba(42, 157, 143, .14);
}

.dispatch-live-dispatch-card strong,
.dispatch-live-dispatch-card span,
.dispatch-live-dispatch-card small {
  display: block;
}

.dispatch-live-dispatch-card .dispatch-live-progress-label,
.dispatch-live-progress-track .dispatch-live-progress-label {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  margin: 0;
  position: absolute;
}

.dispatch-live-progress-label::before {
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 999px;
  bottom: .18rem;
  content: "";
  left: 50%;
  min-width: 5.7rem;
  position: absolute;
  top: .18rem;
  transform: translateX(-50%);
  z-index: -1;
}

.dispatch-live-dispatch-card strong {
  color: #102033;
  font-weight: 850;
}

.dispatch-live-dispatch-card span,
.dispatch-live-dispatch-card small {
  color: #64748b;
  font-size: .78rem;
  margin-top: .18rem;
}

.dispatch-live-card-link {
  border-left: 3px solid #94a3b8;
  padding-left: .45rem;
}

.dispatch-live-card-link--incoming {
  border-color: #2f8f83;
  color: #1f5c55 !important;
}

.dispatch-live-card-link--outgoing {
  border-color: #b44752;
  color: #8f3340 !important;
}

.dispatch-live-modal-table {
  max-height: 52vh;
}

.dispatch-live-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dispatch-live-photo-thumb {
  background: #f8fafc;
  border: 1px solid #d8e0e8;
  border-radius: 6px;
  cursor: pointer;
  height: 2.6rem;
  overflow: hidden;
  padding: 0;
  width: 2.6rem;
}

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

.dispatch-live-photo-backdrop {
  z-index: 1100;
}

@media (max-width: 900px) {
  .dispatch-live-progress-row {
    display: block;
  }

  .dispatch-live-progress-meta {
    text-align: left;
  }

  .dispatch-live-table th:nth-child(6),
  .dispatch-live-table td:nth-child(6) {
    min-width: 18rem;
  }
}

.driver-logbook-page {
  background: #f4f6f5;
  color: #172026;
  display: grid;
  gap: 1rem;
  min-height: calc(100vh - 4rem);
}

.driver-logbook-toolbar {
  align-items: end;
  background: #ffffff;
  border: 1px solid #e3e7e5;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(16rem, 1fr) auto;
  padding: 1rem;
}

.driver-logbook-toolbar h1 {
  font-size: 1.45rem;
  font-weight: 900;
  margin: 0;
}

.driver-logbook-toolbar p {
  color: #66737b;
  margin: .28rem 0 0;
}

.driver-logbook-filters {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: flex-end;
}

.driver-logbook-filters label {
  display: grid;
  gap: .25rem;
}

.driver-logbook-filters span {
  color: #5b6770;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.driver-logbook-filters select,
.driver-logbook-filters input {
  background: #ffffff;
  border: 1px solid #d8dfe8;
  border-radius: 6px;
  min-height: 2.45rem;
  min-width: 12rem;
  padding: .5rem .7rem;
}

.driver-logbook-filters button {
  background: #1f2f46;
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 850;
  min-height: 2.45rem;
  padding: .5rem 1rem;
}

.driver-logbook-shell {
  display: grid;
  gap: 0;
  grid-template-columns: 20rem minmax(0, 1fr);
}

.driver-logbook-sidebar {
  background: #ffffff;
  border-right: 1px solid #dfe5ee;
  min-height: 45rem;
}

.driver-logbook-profile {
  align-items: center;
  background: #e7c44c;
  display: grid;
  gap: .9rem;
  grid-template-columns: 4rem 1fr;
  padding: 1.25rem;
}

.driver-logbook-avatar {
  align-items: center;
  background: rgba(23, 32, 38, .16);
  border-radius: 50%;
  color: #172026;
  display: flex;
  font-size: 1.35rem;
  font-weight: 900;
  height: 4rem;
  justify-content: center;
  width: 4rem;
}

.driver-logbook-profile strong,
.driver-logbook-profile span,
.driver-logbook-profile small {
  display: block;
}

.driver-logbook-profile strong {
  font-weight: 900;
}

.driver-logbook-profile span {
  font-weight: 850;
  margin-top: .15rem;
}

.driver-logbook-profile small {
  margin-top: .2rem;
}

.driver-logbook-side-stats {
  border-bottom: 1px solid #e3e7e5;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.driver-logbook-side-stats article {
  align-items: center;
  border-right: 1px solid #e3e7e5;
  border-top: 1px solid #e3e7e5;
  display: grid;
  gap: .1rem;
  grid-template-columns: 1.6rem 1fr;
  padding: .75rem .9rem;
}

.driver-logbook-side-stats article:nth-child(2n) {
  border-right: 0;
}

.driver-logbook-side-stats .material-symbols-outlined {
  color: #d8b642;
  font-size: 1.35rem;
  grid-row: span 2;
}

.driver-logbook-side-stats strong {
  font-size: .98rem;
  font-weight: 900;
}

.driver-logbook-side-stats small {
  color: #6b7780;
  font-size: .74rem;
}

.driver-logbook-active-route {
  background: #d7d9d8;
  color: #5b6268;
  padding: .75rem 1.25rem;
}

.driver-logbook-active-route span {
  display: block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.driver-logbook-active-route strong {
  color: #343b40;
}

.driver-logbook-vertical-timeline {
  max-height: 46rem;
  overflow: auto;
  padding: .9rem 1rem 1rem 1.3rem;
}

.driver-logbook-stop {
  background: transparent;
  border: 0;
  border-left: 3px solid #d5dce6;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: .16rem;
  margin: 0;
  padding: .35rem 0 .8rem 1.35rem;
  position: relative;
  text-align: left;
  width: 100%;
}

.driver-logbook-stop-dot {
  background: #aab4b0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #d5dce6;
  height: .85rem;
  left: -.55rem;
  position: absolute;
  top: .48rem;
  width: .85rem;
}

.driver-logbook-stop-time {
  color: #6b7780;
  font-size: .74rem;
  font-weight: 850;
}

.driver-logbook-stop strong {
  color: #172026;
  font-size: .9rem;
  font-weight: 900;
}

.driver-logbook-stop small {
  color: #6b7780;
  line-height: 1.25;
}

.driver-logbook-stop em {
  align-self: start;
  background: #f3f5f4;
  border-radius: 999px;
  color: #5e6870;
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
  margin-top: .15rem;
  padding: .24rem .55rem;
}

.driver-logbook-stop--delivered .driver-logbook-stop-dot,
.driver-logbook-pin.driver-logbook-stop--delivered {
  background: #49b374;
}

.driver-logbook-stop--incidented .driver-logbook-stop-dot,
.driver-logbook-pin.driver-logbook-stop--incidented {
  background: #c84f5f;
}

.driver-logbook-stop--pickup .driver-logbook-stop-dot,
.driver-logbook-pin.driver-logbook-stop--pickup {
  background: #2f80c0;
}

.driver-logbook-stop--pending .driver-logbook-stop-dot,
.driver-logbook-pin.driver-logbook-stop--pending {
  background: #9ca3af;
}

.driver-logbook-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.driver-logbook-kpis {
  background: #ffffff;
  border-bottom: 1px solid #e3e7e5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.driver-logbook-kpis article {
  border-right: 1px solid #e3e7e5;
  min-height: 4.4rem;
  padding: .7rem .85rem;
}

.driver-logbook-kpis article:last-child {
  border-right: 0;
}

.driver-logbook-kpis strong {
  display: inline-block;
  font-size: 1rem;
  font-weight: 900;
  min-width: 1.8rem;
}

.driver-logbook-kpis span {
  color: #6b7780;
  display: inline-block;
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.15;
  margin-left: .25rem;
  max-width: 7rem;
  vertical-align: baseline;
}

.driver-logbook-inventory,
.driver-logbook-map-panel,
.driver-logbook-horizontal {
  background: #ffffff;
  border: 1px solid #e3e7e5;
  margin: 0 1rem;
}

.driver-logbook-section-head {
  align-items: end;
  display: flex;
  justify-content: space-between;
  padding: .8rem 1rem .2rem;
}

.driver-logbook-section-head h2 {
  font-size: .95rem;
  font-weight: 900;
  margin: 0;
}

.driver-logbook-section-head span {
  color: #6b7780;
  font-size: .76rem;
  font-weight: 750;
}

.driver-logbook-bars {
  align-items: end;
  display: flex;
  gap: .45rem;
  height: 11rem;
  padding: .8rem 1rem 3.7rem;
}

.driver-logbook-bar {
  align-items: center;
  border-bottom: 1px solid #cdd6e1;
  display: flex;
  flex: 1 1 2rem;
  height: 100%;
  justify-content: end;
  min-width: 2.2rem;
  position: relative;
}

.driver-logbook-bar-fill {
  background: rgba(47, 128, 192, .24);
  border: 1px solid rgba(47, 128, 192, .45);
  bottom: 1.85rem;
  left: 12%;
  position: absolute;
  right: 12%;
}

.driver-logbook-bar--dispatch .driver-logbook-bar-fill {
  background: rgba(31, 47, 70, .18);
  border-color: rgba(31, 47, 70, .36);
}

.driver-logbook-bar--pickup .driver-logbook-bar-fill {
  background: rgba(47, 128, 192, .24);
  border-color: rgba(47, 128, 192, .48);
}

.driver-logbook-bar--delivered .driver-logbook-bar-fill {
  background: rgba(42, 157, 143, .22);
  border-color: rgba(42, 157, 143, .48);
}

.driver-logbook-bar--incidented .driver-logbook-bar-fill {
  background: rgba(196, 81, 91, .2);
  border-color: rgba(196, 81, 91, .48);
}

.driver-logbook-bar--admission .driver-logbook-bar-fill {
  background: rgba(120, 128, 138, .2);
  border-color: rgba(120, 128, 138, .48);
}

.driver-logbook-bar strong {
  font-size: .72rem;
  font-weight: 900;
  position: absolute;
  top: .1rem;
}

.driver-logbook-bar small {
  bottom: .98rem;
  color: #6b7780;
  font-size: .7rem;
  position: absolute;
}

.driver-logbook-bar b {
  bottom: -.15rem;
  color: #172026;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-logbook-bar i {
  bottom: -1.35rem;
  color: #77828a;
  font-size: .6rem;
  font-style: normal;
  max-width: 7.5rem;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-logbook-bar em {
  background: #172026;
  border-radius: 999px;
  bottom: 1.95rem;
  color: #ffffff;
  font-size: .62rem;
  font-style: normal;
  font-weight: 850;
  left: 50%;
  padding: .15rem .42rem;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

.driver-logbook-map {
  height: 24rem;
  margin-top: .6rem;
  width: 100%;
}

.driver-logbook-hourline {
  height: 7rem;
  margin: 1.1rem 1rem 1rem;
  position: relative;
}

.driver-logbook-hourline::before {
  background: #d5dce6;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 2.9rem;
}

.driver-logbook-hourline > span {
  color: #7a858c;
  font-size: .68rem;
  font-weight: 850;
  position: absolute;
  top: 3.45rem;
  transform: translateX(-50%);
}

.driver-logbook-pin {
  align-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .18);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  height: 1.55rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 2.12rem;
  transform: translateX(-50%);
  width: 1.55rem;
}

.driver-logbook-pin .material-symbols-outlined {
  font-size: .95rem;
}

.driver-logbook-empty {
  background: #ffffff;
  border: 1px solid #e3e7e5;
  color: #66737b;
  font-weight: 850;
  padding: 1.2rem;
}

.driver-logbook-empty--compact {
  border: 0;
  padding: .8rem;
}

@media (max-width: 1100px) {
  .driver-logbook-toolbar,
  .driver-logbook-shell {
    grid-template-columns: 1fr;
  }

  .driver-logbook-sidebar {
    min-height: 0;
  }

  .driver-logbook-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .driver-logbook-section-head {
    align-items: start;
    display: grid;
    gap: .25rem;
  }
}

/* ============================================================
   Mantenedor de notificaciones por email (/app/email-notifications)
   Edita en linea (no en modal), por eso replica el estandar de campos
   usado en .modal-panel / .shipment-edit-page.
   ============================================================ */
.email-notifications-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.email-notifications-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.email-notifications-page .filtros-panel__grupo select {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.2rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.email-notifications-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.email-notifications-page .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
  background: #fff;
}

.email-notifications-page .filtros-panel__grupo input::placeholder {
  color: rgba(4, 30, 66, 0.4);
}

/* Checkbox de los switches (evidencia, notificar): tamano contenido */
.email-notifications-page .mantenedor-switch input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
}

.email-notifications-page .tariff-rule-card {
  border-radius: 0.35rem;
}

.email-notifications-page .email-rule-head-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
  align-items: stretch;
}

.email-notifications-page .email-rule-head-switches .mantenedor-switch--panel {
  margin: 0;
  min-width: 16rem;
}

.email-notifications-page .email-rule-test-actions {
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .email-notifications-page .email-rule-head-switches {
    justify-content: flex-start;
    width: 100%;
  }

  .email-notifications-page .email-rule-head-switches .mantenedor-switch--panel {
    min-width: 0;
    width: 100%;
  }
}

/* ===== Salud de flota (/app/fleet-health) ===== */
.kpi-card--ok { border-left-color: #2D6A4F; }
.kpi-card--ok strong { color: #2D6A4F; }
.kpi-card--warn { border-left-color: #B7791F; }
.kpi-card--warn strong { color: #B7791F; }
.kpi-card--danger { border-left-color: var(--color-error); }
.kpi-card--danger strong { color: var(--color-error); }

.fleet-health-actualizado {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--color-texto-suave, #5b6b6b);
}
.fleet-health-actualizado .material-symbols-outlined { font-size: 1.05rem; }

.fleet-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.fleet-card {
    background: #fff;
    border: 1px solid #e4e9e9;
    border-left: 4px solid #c7d0d0;
    border-radius: 12px;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.fleet-card--online { border-left-color: #2D6A4F; }
.fleet-card--offline { border-left-color: #b9c0c0; opacity: .92; }

.fleet-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.fleet-card__identity { display: flex; align-items: center; gap: .55rem; }
.fleet-card__dot {
    width: 10px; height: 10px; border-radius: 50%;
    margin-top: .35rem; flex: 0 0 auto;
}
.fleet-card__dot--online { background: #2D6A4F; box-shadow: 0 0 0 3px rgba(45,106,79,.18); }
.fleet-card__dot--offline { background: #b0b8b8; }
.fleet-card__name { display: block; font-size: .98rem; line-height: 1.2; }
.fleet-card__sub { display: block; font-size: .76rem; color: #6b7878; margin-top: .12rem; }
.fleet-card__activity {
    font-size: .72rem; font-weight: 600;
    background: #eef4f3; color: #1d3a36;
    padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}

.fleet-card__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem .5rem;
}
.fleet-metric { display: flex; align-items: center; gap: .5rem; }
.fleet-metric__icon { font-size: 1.45rem; color: #4a5757; flex: 0 0 auto; }
.fleet-metric__icon--ok { color: #2D6A4F; }
.fleet-metric__icon--warn { color: #B7791F; }
.fleet-metric__icon--danger { color: var(--color-error); }
.fleet-metric__data { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.fleet-metric__value { font-weight: 700; font-size: .92rem; }
.fleet-metric__label { font-size: .72rem; color: #6b7878; }

.fleet-card__perms { display: flex; flex-wrap: wrap; gap: .35rem; }
.fleet-perm {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .7rem; font-weight: 600;
    padding: .15rem .45rem; border-radius: 6px;
    border: 1px solid transparent;
}
.fleet-perm .material-symbols-outlined { font-size: .95rem; }
.fleet-perm--ok { background: #e8f3ee; color: #1f5b44; border-color: #cbe6da; }
.fleet-perm--bad { background: #fbe9e9; color: #9b2c2c; border-color: #f3cccc; }
.fleet-perm--unknown { background: #f0f2f2; color: #7a8585; border-color: #e1e6e6; }

.fleet-card__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; border-top: 1px solid #eef1f1; padding-top: .55rem;
}
.fleet-card__version { font-size: .74rem; color: #8a9494; font-weight: 600; }
.fleet-card__map {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .78rem; font-weight: 600; color: #1d4ed8; text-decoration: none;
}
.fleet-card__map .material-symbols-outlined { font-size: 1.05rem; }
.fleet-card__map:hover { text-decoration: underline; }
.fleet-card__map--off { color: #9aa3a3; font-weight: 500; }

/* ===== Ultima milla live: tabs + mosaico por conductor ===== */
.dispatch-live-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dispatch-live-tabs { display: inline-flex; gap: .25rem; background: #eef2f3; border-radius: 9px; padding: .2rem; }
.dispatch-live-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 0; background: transparent; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: #51606a;
  padding: .42rem .8rem; border-radius: 7px; white-space: nowrap;
}
.dispatch-live-tab .material-symbols-outlined { font-size: 1.05rem; }
.dispatch-live-tab--active { background: #fff; color: #102033; box-shadow: 0 1px 3px rgba(15,23,42,.12); }

.dispatch-live-mosaic { display: flex; flex-direction: column; gap: .45rem; padding-top: .3rem; }
.dispatch-live-mosaic-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem;
  padding: .25rem .1rem .5rem; font-size: .76rem; color: #51606a;
}
.dispatch-live-legend-item { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; }
.dispatch-live-swatch { width: .9rem; height: .9rem; border-radius: 4px; display: inline-block; }
.dispatch-live-legend-hint { margin-left: auto; font-style: italic; color: #8a9499; }

.dispatch-live-driver-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: .8rem;
  align-items: start;
  border: 1px solid #e4e9ec;
  border-radius: 10px;
  padding: .55rem .7rem;
  background: #fff;
}
.dispatch-live-driver-name { display: block; font-size: .85rem; color: #102033; }
.dispatch-live-driver-times { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .3rem; font-size: .72rem; color: #41525c; }
.dispatch-live-driver-times b { color: #6b7980; font-weight: 700; margin-right: .15rem; }
.dispatch-live-driver-tally { display: inline-flex; gap: .3rem; margin-top: .35rem; }
.dispatch-live-tally {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.25rem; padding: 0 .35rem;
  border-radius: 6px; font-size: .72rem; font-weight: 800;
}
.dispatch-live-tally--ok { background: rgba(46,158,107,.16); color: #1d7a4f; }
.dispatch-live-tally--transit { background: rgba(71,85,105,.15); color: #3b4654; }
.dispatch-live-tally--bad { background: rgba(196,81,91,.16); color: #a3303a; }

.dispatch-live-boxes { display: flex; flex-wrap: wrap; gap: .35rem; }
.dispatch-live-box {
  position: relative;
  width: 2.6rem; height: 2.6rem;
  border: 0; border-radius: 8px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  padding: .2rem;
  color: #fff; font-family: var(--fuente-mono, monospace);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .1s ease, box-shadow .1s ease;
}
.dispatch-live-box:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(15,23,42,.22); }
.dispatch-live-box__code { font-size: .6rem; font-weight: 700; letter-spacing: .02em; opacity: .92; }
.dispatch-live-box__flex {
  position: absolute; top: .12rem; left: .2rem;
  font-size: .58rem; font-weight: 900; line-height: 1;
  background: #ffd54a; color: #6b4f00; border-radius: 3px; padding: .05rem .18rem;
}
.dispatch-live-box__vtex {
  position: absolute; top: .12rem; left: .2rem;
  font-size: .58rem; font-weight: 900; line-height: 1;
  background: #f71963; color: #fff; border-radius: 3px; padding: .05rem .18rem;
}
.dispatch-live-box__shopify {
  position: absolute; top: .12rem; left: .2rem;
  font-size: .58rem; font-weight: 900; line-height: 1;
  background: #5e8e3e; color: #fff; border-radius: 3px; padding: .05rem .18rem;
}
.dispatch-live-box--delivered { background: #2e9e6b; }
.dispatch-live-box--transit { background: #475569; }
.dispatch-live-box--incidented { background: #c4515b; }

@media (max-width: 760px) {
  .dispatch-live-driver-row { grid-template-columns: 1fr; }
}

/* Popup breve del bulto */
.dispatch-live-pkg-modal { max-width: 540px; }
.dispatch-live-pkg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem; margin: .4rem 0 1rem;
}
.dispatch-live-pkg-field { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dispatch-live-pkg-field--full { grid-column: 1 / -1; }
.dispatch-live-pkg-field > span:first-child {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8a9499; font-weight: 700;
}
.dispatch-live-pkg-field strong { font-size: .9rem; color: #1d2733; }
.dispatch-live-pkg-field .estado-chip { align-self: flex-start; }
.dispatch-live-pkg-evidence { border-top: 1px solid #eef1f1; padding-top: .7rem; }
.dispatch-live-pkg-evidence__label {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: #8a9499; font-weight: 700; margin-bottom: .45rem;
}

/* =================== Despachos delegados en linea =================== */
.ddl-check { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 600; cursor: pointer; }
.ddl-check input { width: 1rem; height: 1rem; }

.resumen-operativo__alerta strong { color: #b3261e; }

.ddl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  padding: .85rem;
}

/* Tarjeta a lo ancho: el contenido se reparte en columnas (identidad / avance / partners /
   acciones) para aprovechar el espacio en vez de dejar la mitad derecha vacia. */
.ddl-card {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(230px, 1fr) minmax(280px, 1.4fr) auto;
  gap: 1.1rem;
  align-items: stretch;
  padding: .95rem 1rem;
  border: 1px solid #e6eaea;
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ddl-card__col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.ddl-card__col + .ddl-card__col { border-left: 1px solid #f0f2f2; padding-left: 1.1rem; }
.ddl-card__col--acciones { align-items: flex-end; justify-content: space-between; text-align: right; }

.ddl-col-title {
  font-size: .65rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #8a9499;
}

@media (max-width: 1250px) {
  .ddl-card { grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr); }
  .ddl-card__col:nth-child(3) { border-left: 0; padding-left: 0; }
  .ddl-card__col--acciones { grid-column: 1 / -1; flex-direction: row; align-items: center; border-left: 0; padding-left: 0; border-top: 1px solid #f0f2f2; padding-top: .6rem; }
}

.ddl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.ddl-card__code { display: block; font-size: .95rem; letter-spacing: .01em; }
.ddl-card__head .dispatch-live-muted { display: block; margin-top: .15rem; }

.ddl-card__lider {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .65rem; border-radius: .55rem; background: #f6f8f8;
}
.ddl-card__lider > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ddl-card__lider .material-symbols-outlined { font-size: 1.2rem; color: #6b7785; }

.ddl-age {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .45rem; border-radius: .4rem;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
}
.ddl-age .material-symbols-outlined { font-size: .9rem; }
.ddl-age--ok { background: rgba(46, 125, 50, .12); color: #2e7d32; }
.ddl-age--atencion { background: rgba(224, 161, 0, .16); color: #9a6b00; }
.ddl-age--alerta { background: rgba(230, 119, 0, .18); color: #b35400; }
.ddl-age--critico { background: rgba(179, 38, 30, .15); color: #b3261e; }
.ddl-age--cerrado { background: #f0f2f2; color: #8a9499; }

.ddl-progress .dispatch-live-progress-track { width: 100%; }

.ddl-tally { display: flex; flex-wrap: wrap; gap: .35rem; }
.ddl-tally__item {
  padding: .22rem .5rem; border-radius: .4rem;
  font-size: .72rem; font-weight: 600; color: #4b5563; background: #f2f4f4;
}
.ddl-tally__item b { font-weight: 800; }
.ddl-tally__item--pendiente { background: rgba(4, 30, 66, .1); color: #041e42; }
.ddl-tally__item--reparto { background: rgba(42, 82, 152, .16); color: #2a5298; }
.ddl-tally__item--ok { background: rgba(46, 125, 50, .12); color: #2e7d32; }
.ddl-tally__item--bad { background: rgba(179, 38, 30, .12); color: #b3261e; }

.ddl-partners { display: flex; flex-direction: column; gap: .35rem; }
.ddl-partners__title {
  font-size: .65rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #8a9499;
}
.ddl-partners__empty { margin: 0; font-size: .76rem; color: #8a9499; }

.ddl-partner { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; border-top: 1px solid #f0f2f2; }
.ddl-partner .material-symbols-outlined { font-size: 1.05rem; color: #6b7785; }
.ddl-partner__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ddl-partner__info strong { font-size: .8rem; }
.ddl-partner__nums { display: flex; gap: .25rem; }

.ddl-card__acciones { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 820px) {
  .ddl-card { grid-template-columns: 1fr; gap: .7rem; }
  .ddl-card__col + .ddl-card__col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid #f0f2f2; padding-top: .6rem;
  }
  .ddl-card__col--acciones { flex-direction: column; align-items: stretch; text-align: left; }
  .ddl-card__acciones { justify-content: flex-start; }
}

.ddl-reasignacion {
  display: flex; flex-direction: column; gap: .2rem;
  margin-top: .35rem; padding: .45rem .55rem;
  border-radius: .5rem; background: rgba(179, 38, 30, .07);
}
.ddl-reasignacion strong { font-size: .78rem; color: #b3261e; }
.ddl-reasignacion .estado-chip { align-self: flex-start; }

/* Switch deslizante estilo iOS: se aplica directo sobre el <input type="checkbox">. */
.ios-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-borde);
  cursor: pointer;
  outline: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.ios-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(3, 31, 65, .35);
  transition: transform .2s ease;
}
.ios-switch:checked {
  background: var(--color-primario-fuerte);
}
.ios-switch:checked::before {
  transform: translateX(20px);
}
.ios-switch:focus-visible {
  box-shadow: 0 0 0 3px rgba(42, 82, 152, .45);
}
.ios-switch:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ios-switch-campo {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-texto);
}
.ios-switch-campo span {
  line-height: 1.2;
}

/* ===================== Recepcion de troncales: avance de gestion =====================
   La barra muestra dos tramos sobre el total de bultos del troncal: lo recibido y lo cerrado con una
   condicion (no llego / perdido / dañado). Lo que queda sin pintar es lo que todavia no se gestiono, que
   es exactamente lo que bloquea el cierre del troncal. */
.linehaul-progreso {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 9rem;
}

.linehaul-progreso__barra {
  display: flex;
  width: 100%;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(196, 198, 207, 0.32);
}

.linehaul-progreso__tramo {
  display: block;
  height: 100%;
  transition: width 0.25s ease;
}

.linehaul-progreso__tramo--recibido {
  background: var(--color-primario);
}

.linehaul-progreso__tramo--novedad {
  background: #d98324;
}

.linehaul-progreso small {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
}

/* En el detalle la barra ocupa todo el ancho y el porcentaje va al lado: es el indicador que el operador
   mira mientras pistolea. */
.linehaul-progreso--detalle {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.9rem;
}

.linehaul-progreso--detalle .linehaul-progreso__barra {
  height: 0.7rem;
}

.linehaul-progreso--detalle strong {
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--color-texto);
}

/* Fila de un bulto cerrado con novedad: se distingue de la fila atenuada del recibido, porque no es lo
   mismo "esto ya esta" que "esto no llego y alguien tendra que responder". */
.fila-novedad {
  background: rgba(217, 131, 36, 0.08);
}

/* ==========================================================================
   Integradores de transporte (Blue Express, Correos de Chile, Ezquerra)
   ========================================================================== */

/* Chip del integrador. Cada marca lleva su propio color para que en el tablero de despachos se
   reconozca de un vistazo con quien salio la carga, sin tener que leer la fila completa. */
.carrier-chip {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
}

.carrier-chip--blue {
  background: rgba(0, 82, 155, 0.16);
  color: #00529b;
  border: 1px solid rgba(0, 82, 155, 0.35);
}

.carrier-chip--correos {
  background: rgba(198, 40, 40, 0.14);
  color: #b3261e;
  border: 1px solid rgba(198, 40, 40, 0.32);
}

/* El celeste corporativo de Ezquerra es #76CDDF. Va en el fondo y el borde, pero NO en el texto:
   sobre blanco da 1.7:1 de contraste y el chip queda ilegible. El texto usa el mismo matiz (190 grados)
   bajado de luminosidad, asi que se sigue leyendo como el celeste de la marca. */
.carrier-chip--ezquerra {
  background: rgba(118, 205, 223, 0.22);
  color: #196676;
  border: 1px solid rgba(118, 205, 223, 0.75);
}

/* Bloque de avisos entrantes del integrador (Ezquerra). Se separa visualmente de las credenciales de
   salida porque son cosas opuestas —una sirve para llamarlos, la otra para que ellos nos llamen— y
   confundirlas lleva a entregarle a un tercero la credencial con la que emitimos envios. */
.carrier-webhook {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--color-borde, #d5d9e0);
  border-radius: 6px;
  background: rgba(4, 30, 66, 0.03);
}

.carrier-webhook__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.6rem;
}

.carrier-webhook__head strong {
  font-size: 0.85rem;
}

.carrier-webhook__head small {
  font-size: 0.74rem;
  color: var(--color-texto-suave, #6b7280);
}

.carrier-webhook__fila {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.carrier-webhook__fila input {
  flex: 1 1 auto;
  min-width: 0;
}

.carrier-webhook__url {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
}

/* La URL lleva el token y puede pasar los 120 caracteres: sin el scroll propio, el modal completo
   se estira a lo ancho y la pantalla queda inservible en un notebook. */
.carrier-webhook__url code {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.06);
  font-size: 0.76rem;
  user-select: all;
}

.carrier-webhook__url small {
  color: var(--color-texto-suave, #6b7280);
  font-size: 0.72rem;
}

.carrier-webhook__url small code {
  display: inline;
  padding: 0.05rem 0.25rem;
  white-space: normal;
}

/* "no aplica" en la columna de comunas: distingue al integrador que no las usa del que las tiene sin
   cargar, que en la misma celda se veria como un 0 y se leeria como una configuracion pendiente. */
.carrier-na {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-texto-suave, #6b7280);
}

.carrier-chip--generico {
  background: rgba(4, 30, 66, 0.12);
  color: var(--color-primario-fuerte);
  border: 1px solid rgba(4, 30, 66, 0.28);
}

/* Chip del integrador bajo la direccion, en la bandeja de encomiendas. Va en su propia linea para no
   competir con la direccion, que es el dato principal de esa celda. */
.destino-integrador {
  margin-top: 0.25rem;
}

.carrier-nombre {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
}

.carrier-error {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #b3261e;
}

.carrier-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.carrier-aviso {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
}

.carrier-aviso p {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
}

.carrier-aviso--qa {
  background: rgba(217, 131, 36, 0.1);
  border: 1px solid rgba(217, 131, 36, 0.3);
}

.carrier-aviso--pendiente {
  background: rgba(120, 120, 120, 0.1);
  border: 1px solid rgba(120, 120, 120, 0.28);
}

/* Aviso con accion propia (importar catalogo): el boton va al final de la fila. */
.carrier-aviso--catalogo {
  background: rgba(42, 82, 152, 0.1);
  border: 1px solid rgba(42, 82, 152, 0.3);
  align-items: center;
}

.carrier-aviso--catalogo > div {
  flex: 1;
}

.carrier-ping {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

.carrier-parametros {
  display: grid;
  gap: 0.5rem;
}

.carrier-parametro {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.carrier-parametro input {
  padding: 6px 8px;
  border: 1px solid rgba(4, 30, 66, 0.25);
  border-radius: 6px;
}

.carrier-bulk {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(4, 30, 66, 0.25);
  border-radius: 6px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  margin-bottom: 0.6rem;
}

.carrier-preview {
  margin-top: 0.7rem;
  font-size: 0.82rem;
}

.carrier-preview p {
  margin: 0.2rem 0;
}

.carrier-preview__alerta {
  color: #b3261e;
}

/* La grilla de comunas puede tener cientos de filas: se acota su alto para que el modal no crezca sin
   fin y el pie con los botones siga siendo alcanzable. */
.carrier-comunas-tabla {
  max-height: 340px;
  overflow-y: auto;
}

.carrier-input-codigo {
  width: 130px;
  padding: 5px 7px;
  border: 1px solid rgba(4, 30, 66, 0.25);
  border-radius: 6px;
  text-transform: uppercase;
}

/* Nombre del servicio en la grilla de servicios del integrador. Mas ancho que .carrier-input-codigo
   porque lleva la descripcion completa ("PAQUETE EXPRESS DOMICILIO"). */
.carrier-input-nombre {
  width: 320px;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(4, 30, 66, 0.25);
  border-radius: 6px;
}

/* Selector de la grilla de estados del integrador. Mas ancho que .carrier-input-codigo porque muestra
   etiquetas completas ("En despacho (integrador)"), no codigos. */
.carrier-select {
  width: 190px;
  padding: 5px 7px;
  border: 1px solid rgba(4, 30, 66, 0.25);
  border-radius: 6px;
  background: #fff;
}

/* Contador de estados sin traducir en el boton del listado: es la unica senal de que el integrador
   estreno un estado nuevo, asi que se pinta como alerta y no como un badge neutro. */
.carrier-pendientes {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e63946;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Fila de un estado que el seguimiento detecto y nadie tradujo todavia. */
.fila-pendiente {
  background: rgba(230, 57, 70, 0.06);
}

.carrier-etiqueta-preview {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(4, 30, 66, 0.05);
  padding: 0.6rem;
  border-radius: 4px;
}

/* ============================================================
   Perimetro de entrega (/app/delivery-perimeter)
   Es una pagina de configuracion larga, no un modal: replica el
   estandar de campos de .modal-panel / .email-notifications-page y
   agrega el resumen superior, las tarjetas de opcion y los callouts.
   ============================================================ */
.delivery-perimeter-page .tabs-mantenedor {
  margin-bottom: -0.4rem;
}

/* --- Resumen de la configuracion vigente --- */
.delivery-perimeter-page .perimetro-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.75rem;
}

.delivery-perimeter-page .perimetro-resumen__item {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.95rem 1.1rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.32);
  border-left: 3px solid rgba(4, 30, 66, 0.45);
  border-radius: 0.35rem;
}

.delivery-perimeter-page .perimetro-resumen__item > span {
  color: var(--color-texto-suave);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.delivery-perimeter-page .perimetro-resumen__item > strong {
  color: var(--color-primario-fuerte);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.delivery-perimeter-page .perimetro-resumen__item > small {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  line-height: 1.3;
}

.delivery-perimeter-page .perimetro-resumen__item--ok {
  border-left-color: #2d6a4f;
}

.delivery-perimeter-page .perimetro-resumen__item--ok > strong {
  color: #2d6a4f;
}

.delivery-perimeter-page .perimetro-resumen__item--warn {
  border-left-color: #b7791f;
}

.delivery-perimeter-page .perimetro-resumen__item--warn > strong {
  color: #b7791f;
}

.delivery-perimeter-page .perimetro-resumen__item--off {
  border-left-color: rgba(68, 71, 78, 0.4);
}

.delivery-perimeter-page .perimetro-resumen__item--off > strong {
  color: var(--color-texto-suave);
}

/* --- Bloques de configuracion ---
   .tabla-operativa-panel solo trae padding-bottom (el resto del aire lo dan
   los __head de las tablas), asi que aca se declara el recuadro completo. */
.delivery-perimeter-page .perimetro-bloque {
  display: grid;
  gap: 1.25rem;
  padding: 1.4rem 1.6rem 1.6rem;
  border-radius: 0.35rem;
}

.delivery-perimeter-page .perimetro-bloque .modal-seccion__head {
  margin-bottom: 0;
  gap: 0.35rem;
}

.delivery-perimeter-page .perimetro-bloque .modal-seccion__head span {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 68ch;
}

.delivery-perimeter-page .perimetro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem 1.4rem;
  align-items: start;
}

.delivery-perimeter-page .perimetro-grid--opciones {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.delivery-perimeter-page .perimetro-grid__ancho {
  grid-column: 1 / -1;
}

/* --- Campos: estandar de .modal-panel, con anchos contenidos --- */
.delivery-perimeter-page .filtros-panel__grupo {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.delivery-perimeter-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.delivery-perimeter-page .filtros-panel__grupo input:not([type="checkbox"]),
.delivery-perimeter-page .filtros-panel__grupo select,
.delivery-perimeter-page .filtros-panel__grupo textarea {
  width: 100%;
  max-width: 26rem;
  box-sizing: border-box;
  min-height: 2.7rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 0.25rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.delivery-perimeter-page .filtros-panel__grupo textarea {
  font-family: inherit;
  min-height: 4.2rem;
  max-width: 42rem;
  resize: vertical;
}

.delivery-perimeter-page .filtros-panel__grupo input:not([type="checkbox"]):focus,
.delivery-perimeter-page .filtros-panel__grupo select:focus,
.delivery-perimeter-page .filtros-panel__grupo textarea:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.delivery-perimeter-page .filtros-panel__grupo input[type="number"] {
  max-width: 9.5rem;
}

.delivery-perimeter-page .filtros-panel__grupo .texto-secundario {
  font-size: 0.74rem;
  line-height: 1.35;
  max-width: 46ch;
}

/* Valor derivado que acompana a un campo (radio efectivo, por ejemplo) */
.delivery-perimeter-page .perimetro-derivado {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  width: fit-content;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.07);
  color: var(--color-primario-fuerte);
  font-size: 0.72rem;
  font-weight: 700;
}

/* --- Tarjeta de opcion (reemplaza al switch de ancho completo) --- */
.delivery-perimeter-page .perimetro-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 0.35rem;
  background: var(--color-superficie);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

/* Estirar la tarjeta al alto de su fila: en una grilla de opciones todas
   quedan parejas, aunque la ayuda de una ocupe dos lineas mas. */
.delivery-perimeter-page .perimetro-check {
  align-self: stretch;
}

.delivery-perimeter-page .perimetro-check:hover {
  border-color: rgba(4, 30, 66, 0.45);
}

.delivery-perimeter-page .perimetro-check:has(input:checked) {
  border-color: rgba(4, 30, 66, 0.55);
  background: rgba(4, 30, 66, 0.045);
}

.delivery-perimeter-page .perimetro-check:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.delivery-perimeter-page .perimetro-check input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.1rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--color-primario);
  cursor: inherit;
}

.delivery-perimeter-page .perimetro-check__texto {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.delivery-perimeter-page .perimetro-check__texto strong {
  color: var(--color-primario-fuerte);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
}

.delivery-perimeter-page .perimetro-check__texto small {
  color: var(--color-texto-suave);
  font-size: 0.73rem;
  line-height: 1.35;
}

/* --- Callout de ayuda --- */
.delivery-perimeter-page .perimetro-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem 1.05rem;
  border-left: 3px solid rgba(4, 30, 66, 0.32);
  border-radius: 0.2rem;
  background: rgba(4, 30, 66, 0.04);
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  line-height: 1.45;
}

.delivery-perimeter-page .perimetro-nota strong,
.delivery-perimeter-page .perimetro-nota a {
  color: var(--color-primario-fuerte);
}

.delivery-perimeter-page .perimetro-nota .material-symbols-outlined {
  margin-top: 0.05rem;
  font-size: 1.05rem;
  color: rgba(4, 30, 66, 0.6);
}

.delivery-perimeter-page .perimetro-nota--alerta {
  border-left-color: #b7791f;
  background: rgba(183, 121, 31, 0.08);
}

.delivery-perimeter-page .perimetro-nota--alerta .material-symbols-outlined {
  color: #b7791f;
}

.delivery-perimeter-page .perimetro-nota p {
  margin: 0;
}

.delivery-perimeter-page .perimetro-nota p + p {
  margin-top: 0.5rem;
}

/* --- Cobertura: barra del porcentaje medible --- */
.delivery-perimeter-page .perimetro-medible {
  display: grid;
  gap: 0.3rem;
  min-width: 6.5rem;
}

.delivery-perimeter-page .perimetro-barra {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.12);
  overflow: hidden;
}

.delivery-perimeter-page .perimetro-barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2d6a4f;
}

.delivery-perimeter-page .perimetro-barra i.es-media {
  background: #b7791f;
}

.delivery-perimeter-page .perimetro-barra i.es-baja {
  background: var(--color-error);
}

.delivery-perimeter-page .perimetro-pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: center;
  color: var(--color-texto-suave);
  font-size: 0.76rem;
}

@media (max-width: 720px) {
  .delivery-perimeter-page .perimetro-bloque {
    gap: 1rem;
    padding: 1.1rem 1.1rem 1.25rem;
  }

  .delivery-perimeter-page .perimetro-grid,
  .delivery-perimeter-page .perimetro-grid--opciones {
    grid-template-columns: 1fr;
  }

  .delivery-perimeter-page .filtros-panel__grupo input:not([type="checkbox"]),
  .delivery-perimeter-page .filtros-panel__grupo select,
  .delivery-perimeter-page .filtros-panel__grupo textarea {
    max-width: none;
  }
}

/* =============================================================================================
   Centro de operaciones en vivo (/app/live)

   El color de cada tipo de evento llega desde el catalogo de C# en la variable --familia, de modo
   que el grafico, la leyenda, los chips y el feed pintan siempre igual sin repetir hex aca.
   La superficie de referencia es el blanco de las tarjetas: es contra ese blanco que se valido la
   paleta, y por eso los separadores entre cintas son huecos de superficie y no bordes dibujados.
   ============================================================================================= */

.live-ops__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(196, 198, 207, 0.35);
  background: var(--color-superficie);
}

.live-ops__estado--ok { color: #0f6b3f; }
.live-ops__estado--alerta { color: #8a3a12; }

.live-ops__pulso {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* El latido solo corre cuando el feed esta al dia: un punto quieto ya dice que algo se atraso. */
.live-ops__estado--ok .live-ops__pulso {
  animation: live-ops-latido 1.8s ease-in-out infinite;
}

@keyframes live-ops-latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .live-ops__estado--ok .live-ops__pulso { animation: none; }
}

/* Antes eran ocho columnas fijas, una por familia. Ahora el numero de familias depende de que canales
   tenga conectados el courier (Flex, Shopify, VTEX...), asi que las columnas se acomodan solas: con ocho
   tarjetas se ve igual que antes, y con doce no deja una segunda fila a medio llenar. */
.live-ops__kpis {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.live-ops__kpi {
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
  border-top: 2px solid var(--familia);
  padding: 0.72rem 0.82rem;
}

.live-ops__kpi span,
.live-ops__kpi strong { display: block; }

.live-ops__kpi span {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.live-ops__kpi strong {
  margin-top: 0.28rem;
  font-size: 1.18rem;
  letter-spacing: -0.05em;
}

.live-ops__filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0 0.35rem;
}

.live-ops__ventana {
  display: inline-flex;
  border: 1px solid rgba(196, 198, 207, 0.4);
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-superficie);
}

.live-ops__ventana-btn {
  border: 0;
  background: transparent;
  padding: 0.4rem 0.95rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.live-ops__ventana-btn.is-activo {
  background: var(--color-primario);
  color: #fff;
}

.live-ops__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Los chips son a la vez leyenda y filtro. Apagado = solo contorno; encendido = la marca de color
   con su valor al lado, que es lo que permite leer el dato sin depender del tono. */
.live-ops__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 198, 207, 0.5);
  background: var(--color-superficie);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.live-ops__chip.is-activo { color: var(--color-texto); }

.live-ops__chip-marca {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 3px;
  background: rgba(196, 198, 207, 0.6);
}

.live-ops__chip.is-activo .live-ops__chip-marca { background: var(--familia); }

.live-ops__chip-valor {
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}

.live-ops__chip--reset { border-style: dashed; }

.live-ops__panel {
  margin-top: 1rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
  padding: 1rem 1.1rem 1.15rem;
}

.live-ops__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.live-ops__panel-head h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.live-ops__panel-head p {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
}

.live-ops__link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 999px;
  background: var(--color-superficie);
  padding: 0.32rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
  white-space: nowrap;
}

.live-ops__link-btn .material-symbols-outlined { font-size: 1rem; }

.live-ops__retenidos { color: #8a3a12; font-weight: 700; }

/* --- Grafico de cintas --- */

.live-ops__grafico {
  position: relative;
}

.live-ops__svg {
  width: 100%;
  height: auto;
  display: block;
}

.live-ops__svg-eje {
  stroke: #c4c6cf;
  stroke-width: 1;
}

.live-ops__svg-tick {
  fill: var(--color-texto-suave);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.live-ops__svg-etiqueta {
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
}

.live-ops__svg-cruz {
  stroke: rgba(11, 11, 11, 0.35);
  stroke-width: 1;
  pointer-events: none;
}

.live-ops__svg-zona {
  fill: transparent;
  cursor: crosshair;
}

.live-ops__svg-zona:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: -2px;
}

.live-ops__tooltip {
  position: absolute;
  top: 0.5rem;
  transform: translateX(0.6rem);
  min-width: 11rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.55);
  box-shadow: 0 12px 28px rgba(4, 30, 66, 0.14);
  padding: 0.6rem 0.7rem;
  pointer-events: none;
  z-index: 3;
}

/* Cerca del borde derecho el globo se voltea, o se saldria de la tarjeta. */
.live-ops__tooltip--izq { transform: translateX(calc(-100% - 0.6rem)); }

.live-ops__tooltip-titulo {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-texto-suave);
}

/* En el globo manda el valor y el nombre acompana: el lector ya sabe que serie mira y viene por el numero. */
.live-ops__tooltip-fila {
  display: grid;
  grid-template-columns: 0.9rem 2.2rem 1fr;
  align-items: center;
  gap: 0.35rem;
  margin: 0.12rem 0;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
}

.live-ops__tooltip-fila strong {
  text-align: right;
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
}

.live-ops__tooltip-llave {
  height: 2px;
  border-radius: 2px;
  background: var(--familia);
}

.live-ops__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgba(196, 198, 207, 0.28);
}

.live-ops__leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
}

.live-ops__leyenda-marca {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: var(--familia);
}

.live-ops__leyenda-nombre { color: var(--color-texto-suave); }

.live-ops__leyenda-valor {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.live-ops__tabla-scroll {
  overflow-x: auto;
  max-height: 26rem;
  overflow-y: auto;
}

.live-ops__tabla th,
.live-ops__tabla td {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Feed --- */

.live-ops__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 34rem;
  overflow-y: auto;
}

.live-ops__hecho {
  display: grid;
  grid-template-columns: 3.9rem 1.5rem minmax(0, 1fr) auto 1.5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.35rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.22);
  border-left: 3px solid var(--familia);
  padding-left: 0.6rem;
}

.live-ops__hecho:hover { background: var(--color-fondo-suave); }

.live-ops__hecho-hora {
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
}

.live-ops__hecho-glifo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--familia);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.live-ops__hecho-cuerpo { min-width: 0; }

.live-ops__hecho-titulo {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-ops__hecho-familia {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-texto-suave);
  margin-right: 0.35rem;
}

.live-ops__hecho-titulo strong { margin-left: 0.35rem; }

.live-ops__hecho-detalle {
  margin: 0.12rem 0 0;
  font-size: 0.7rem;
  color: var(--color-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-ops__hecho-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: 0.68rem;
  color: var(--color-texto-suave);
  white-space: nowrap;
}

.live-ops__hecho-actor { font-weight: 700; }

.live-ops__hecho-ir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secundario);
}

.live-ops__hecho-ir .material-symbols-outlined { font-size: 1.05rem; }

.live-ops__vacio { margin: 0; }

@media (max-width: 1400px) {
  .live-ops__kpis { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

@media (max-width: 900px) {
  .live-ops__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .live-ops__hecho {
    grid-template-columns: 3.4rem 1.4rem minmax(0, 1fr);
    grid-template-areas:
      "hora glifo cuerpo"
      "meta meta meta";
  }

  .live-ops__hecho-meta {
    grid-area: meta;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
  }

  .live-ops__hecho-ir { display: none; }
}

/* ==========================================================================
   Integradores en linea (/app/carrier-live)
   Reutiliza la maquinaria visual de "ultima milla live" (.dispatch-live-*) y de "delegados en linea"
   (.ddl-*): la operacion ya sabe leer esas barras, esos semaforos y esas tarjetas, y un tablero nuevo
   con otro lenguaje visual obligaria a aprender dos veces lo mismo. Aca solo vive lo que ese lenguaje
   todavia no tenia: los avisos de configuracion, el bloque de alertas por integrador, la linea de
   tiempo del integrador y los tres colores de cuadro que la ultima milla no necesita.
   ========================================================================== */

.cil-avisos { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }

.cil-aviso {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .85rem; border-radius: .55rem;
  font-size: .8rem; line-height: 1.3;
}
.cil-aviso > div { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.cil-aviso strong { font-size: .82rem; }
.cil-aviso span { color: inherit; }
.cil-aviso .material-symbols-outlined { font-size: 1.25rem; }
.cil-aviso .boton-secundario { flex: 0 0 auto; }

/* Emitir contra QA no rompe nada en pantalla pero deja la carga sin envio real: el aviso tiene que
   pesar visualmente mas que el resto del tablero. */
.cil-aviso--alerta { background: rgba(179, 38, 30, .09); color: #8f2019; border: 1px solid rgba(179, 38, 30, .25); }
.cil-aviso--info { background: rgba(4, 30, 66, .06); color: #041e42; border: 1px solid rgba(4, 30, 66, .18); }

.cil-meta { display: flex; flex-direction: column; gap: .25rem; font-size: .76rem; color: #41525c; }
.cil-meta__item { display: inline-flex; align-items: center; gap: .35rem; }
.cil-meta__item .material-symbols-outlined { font-size: .95rem; color: #6b7785; }
.cil-meta__item b { color: #6b7980; font-weight: 700; }

.cil-alertas { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.cil-alerta {
  display: flex; align-items: baseline; gap: .35rem;
  padding: .35rem .5rem; border-radius: .45rem;
  font-size: .72rem; background: #f2f4f4; color: #4b5563;
}
.cil-alerta strong { font-size: .95rem; font-weight: 800; }
.cil-alerta--ok { background: rgba(46, 125, 50, .1); color: #2e7d32; }
.cil-alerta--aviso { background: rgba(224, 161, 0, .16); color: #9a6b00; }
.cil-alerta--mal { background: rgba(179, 38, 30, .12); color: #b3261e; }

.cil-evidencia {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .78rem; font-weight: 700; color: #2a5298;
}
.cil-evidencia .material-symbols-outlined { font-size: 1rem; }

/* Fila del bulto que el integrador nunca reconocio: se marca en la grilla porque es el caso que hay
   que ir a reclamar, no uno mas de la lista. */
.cil-fila--alerta { background: rgba(179, 38, 30, .05); }

.cil-modal-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .9rem; }

/* Cuadros del mosaico que la ultima milla no tiene: en integradores hay estados previos al reparto
   (por emitir, en su poder) y uno que alla no existe (la emision fallida). */
.cil-box--handed { background: #041e42; }
.cil-box--error { background: #d97706; }
.cil-box--pending { background: #94a3b8; }
.cil-box--cancelled { background: #64748b; }

/* Envio emitido y sin un solo movimiento del integrador: el punto lo delata dentro del mosaico sin
   cambiarle el color, que sigue diciendo en que etapa esta. */
.cil-box--mudo::after {
  content: "";
  position: absolute; top: .18rem; right: .18rem;
  width: .42rem; height: .42rem; border-radius: 50%;
  background: #ff4d4f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
}

/* Detalle del bulto: datos a la izquierda, trazabilidad del integrador a la derecha. */
.cil-pkg-modal { max-width: 1100px; }
.cil-pkg-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.2rem; }
.cil-pkg-datos { min-width: 0; }
.cil-pkg-timeline {
  min-width: 0; display: flex; flex-direction: column; gap: .5rem;
  padding-left: 1.2rem; border-left: 1px solid #eef1f1;
}

@media (max-width: 900px) {
  .cil-pkg-grid { grid-template-columns: 1fr; }
  .cil-pkg-timeline { padding-left: 0; border-left: 0; border-top: 1px solid #eef1f1; padding-top: .8rem; }
  .cil-alertas { grid-template-columns: 1fr; }
}

.cil-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cil-timeline__item { position: relative; display: flex; gap: .6rem; padding: 0 0 .7rem .1rem; }
.cil-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute; left: .29rem; top: .85rem; bottom: 0;
  width: 1px; background: #e1e6e6;
}
.cil-timeline__punto {
  flex: 0 0 auto; width: .6rem; height: .6rem; margin-top: .3rem;
  border-radius: 50%; background: #2a5298;
}
.cil-timeline__item:first-child .cil-timeline__punto { background: #2e9e6b; box-shadow: 0 0 0 3px rgba(46, 158, 107, .18); }
.cil-timeline__cuerpo { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.cil-timeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }
.cil-timeline__head strong { font-size: .82rem; color: #1d2733; }
.cil-timeline__efecto {
  align-self: flex-start;
  padding: .1rem .4rem; border-radius: .35rem;
  font-size: .68rem; font-weight: 700;
}
.cil-timeline__efecto--aplicado { background: rgba(46, 125, 50, .12); color: #2e7d32; }
/* Un movimiento informativo no es un fallo: se pinta neutro para que nadie lo lea como un error. */
.cil-timeline__efecto--info { background: #f0f2f2; color: #6b7785; }

/* =====================================================================================
 * Modulo WhatsApp (Meta Cloud API): conexion, notificaciones por cliente y bitacora.
 *
 * Sigue el estandar de .delivery-perimeter-page: campos con ancho contenido —un input de
 * 100 % de ancho en una pantalla de 27 pulgadas es imposible de leer—, tarjetas de opcion
 * en vez de switches sueltos, y bloques con aire propio, porque .tabla-operativa-panel no
 * trae padding lateral y un formulario metido ahi queda pegado a los bordes.
 *
 * El unico color prestado de fuera de la paleta es el verde de WhatsApp, y solo donde
 * ayuda a leer: la burbuja de vista previa y el acento de una regla encendida.
 * ===================================================================================== */

.whatsapp-page {
  --wa-verde: #25d366;
  --wa-verde-fuerte: #128c7e;
  --wa-burbuja: #dcf8c6;
}

/* --- Bloques con aire --- */
.whatsapp-page .wa-panel {
  display: grid;
  gap: 1.25rem;
  padding: 1.4rem 1.6rem 1.6rem;
  border-radius: 0.35rem;
}

.whatsapp-page .wa-panel .modal-seccion__head {
  margin-bottom: 0;
  gap: 0.35rem;
}

.whatsapp-page .wa-panel .modal-seccion__head span {
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 78ch;
}

/* --- Rejilla de campos --- */
.whatsapp-page .wa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem 1.4rem;
  align-items: start;
}

.whatsapp-page .wa-grid--ancho {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.whatsapp-page .wa-grid__full {
  grid-column: 1 / -1;
}

/* --- Campos --- */
.whatsapp-page .filtros-panel__grupo {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

.whatsapp-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.whatsapp-page .filtros-panel__grupo input:not([type="checkbox"]),
.whatsapp-page .filtros-panel__grupo select,
.whatsapp-page .filtros-panel__grupo textarea {
  width: 100%;
  max-width: 26rem;
  box-sizing: border-box;
  min-height: 2.7rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 0.25rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.whatsapp-page .wa-grid__full input:not([type="checkbox"]),
.whatsapp-page .wa-grid__full select {
  max-width: 42rem;
}

.whatsapp-page .filtros-panel__grupo input:not([type="checkbox"]):focus,
.whatsapp-page .filtros-panel__grupo select:focus,
.whatsapp-page .filtros-panel__grupo textarea:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.whatsapp-page .filtros-panel__grupo input[type="number"] {
  max-width: 9.5rem;
}

/* Un token de Meta es tan largo que sin fuente monoespaciada no se puede comparar de un vistazo. */
.whatsapp-page .filtros-panel__grupo input[type="password"],
.whatsapp-page .wa-mono input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.01em;
}

.whatsapp-page .filtros-panel__grupo .texto-secundario,
.whatsapp-page .wa-ayuda {
  color: var(--color-texto-suave);
  font-size: 0.74rem;
  line-height: 1.4;
  max-width: 52ch;
}

.whatsapp-page .campo-lectura {
  border-radius: 0.25rem;
  font-size: 0.86rem;
}

/* --- Cabecera de estado (mismo lenguaje que las cajas KPI de Encomiendas) --- */
.whatsapp-page .wa-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 0.75rem;
}

.whatsapp-page .wa-caja {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.95rem 1.1rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.32);
  border-left: 3px solid rgba(4, 30, 66, 0.45);
  border-radius: 0.35rem;
}

.whatsapp-page .wa-caja span {
  color: var(--color-texto-suave);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.whatsapp-page .wa-caja strong {
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-caja small {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-caja--ok { border-left-color: var(--wa-verde-fuerte); }
.whatsapp-page .wa-caja--alerta { border-left-color: #b7791f; }
.whatsapp-page .wa-caja--error { border-left-color: #c0392b; }

/* --- Callout de ayuda --- */
.whatsapp-page .wa-nota {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem 1.05rem;
  border-left: 3px solid rgba(4, 30, 66, 0.32);
  border-radius: 0.2rem;
  background: rgba(4, 30, 66, 0.04);
  color: var(--color-texto-suave);
  font-size: 0.79rem;
  line-height: 1.5;
}

.whatsapp-page .wa-nota strong,
.whatsapp-page .wa-nota a { color: var(--color-primario-fuerte); }

.whatsapp-page .wa-nota .material-symbols-outlined {
  margin-top: 0.05rem;
  font-size: 1.05rem;
  color: rgba(4, 30, 66, 0.6);
}

.whatsapp-page .wa-nota--alerta {
  border-left-color: #b7791f;
  background: rgba(183, 121, 31, 0.08);
}

.whatsapp-page .wa-nota--alerta .material-symbols-outlined { color: #b7791f; }

/* --- URL del webhook: se copia a mano, asi que tiene que leerse caracter por caracter --- */
.whatsapp-page .wa-codigo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(4, 30, 66, 0.28);
  border-radius: 0.3rem;
  background: rgba(4, 30, 66, 0.04);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.84rem;
  color: var(--color-primario-fuerte);
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-codigo .material-symbols-outlined {
  font-size: 1.05rem;
  color: rgba(4, 30, 66, 0.55);
  flex: 0 0 auto;
}

/* --- Lista de clientes: tarjetas seleccionables, no un mar de checkboxes --- */
.whatsapp-page .wa-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
}

.whatsapp-page .wa-cliente {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 0.3rem;
  background: var(--color-superficie);
  font-size: 0.84rem;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.whatsapp-page .wa-cliente:hover { border-color: rgba(4, 30, 66, 0.45); }

.whatsapp-page .wa-cliente:has(input:checked) {
  border-color: rgba(4, 30, 66, 0.55);
  background: rgba(4, 30, 66, 0.045);
}

.whatsapp-page .wa-cliente input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--color-primario);
  cursor: inherit;
}

.whatsapp-page .wa-cliente--todos { grid-column: 1 / -1; }

/* --- Tarjeta de regla por estado --- */
.whatsapp-page .wa-reglas {
  display: grid;
  gap: 0.9rem;
}

.whatsapp-page .wa-regla {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-left: 3px solid rgba(196, 198, 207, 0.6);
  border-radius: 0.35rem;
  background: var(--color-superficie);
  transition: border-color 0.16s ease;
}

/* Una regla encendida se distingue del resto de un vistazo: es la que le va a escribir a alguien. */
.whatsapp-page .wa-regla--activa { border-left-color: var(--wa-verde-fuerte); }

.whatsapp-page .wa-regla__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.whatsapp-page .wa-regla__titulo {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.whatsapp-page .wa-regla__titulo strong {
  color: var(--color-primario-fuerte);
  font-size: 0.95rem;
  font-weight: 700;
}

.whatsapp-page .wa-regla__titulo small {
  color: var(--color-texto-suave);
  font-size: 0.75rem;
  line-height: 1.4;
}

.whatsapp-page .wa-regla__switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Interruptor como tarjeta: el area de click es la tarjeta entera, no un cuadradito de 13 px. */
.whatsapp-page .wa-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-radius: 999px;
  background: var(--color-superficie);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-texto);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.whatsapp-page .wa-switch:hover { border-color: rgba(4, 30, 66, 0.45); }

.whatsapp-page .wa-switch:has(input:checked) {
  border-color: rgba(18, 140, 126, 0.6);
  background: rgba(37, 211, 102, 0.1);
  color: var(--wa-verde-fuerte);
}

.whatsapp-page .wa-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.whatsapp-page .wa-switch input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--wa-verde-fuerte);
  cursor: inherit;
}

/* --- Texto de la plantilla tal como esta aprobada en Meta --- */
.whatsapp-page .wa-plantilla {
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(196, 198, 207, 0.4);
  border-radius: 0.3rem;
  background: rgba(246, 247, 241, 0.95);
  color: var(--color-texto);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Vista previa: se ve como en el telefono, no como texto suelto --- */
.whatsapp-page .wa-preview {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1.1rem;
  border-radius: 0.35rem;
  background:
    repeating-linear-gradient(45deg, rgba(4, 30, 66, 0.018) 0 12px, transparent 12px 24px),
    #ece5dd;
}

.whatsapp-page .wa-preview__etiqueta {
  color: rgba(4, 30, 66, 0.55);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.whatsapp-page .wa-burbuja {
  position: relative;
  max-width: 32rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem 0.05rem 0.5rem 0.5rem;
  background: var(--wa-burbuja);
  color: #111b21;
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
}

/* La hora va en el flujo y no absoluta: cuando la plantilla tiene boton, una hora anclada al fondo
   de la burbuja le cae encima. */
.whatsapp-page .wa-burbuja__hora {
  display: block;
  margin-top: 0.25rem;
  text-align: right;
  color: rgba(17, 27, 33, 0.45);
  font-size: 0.66rem;
  font-weight: 600;
}

.whatsapp-page .wa-burbuja__encabezado {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.whatsapp-page .wa-burbuja__pie {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(17, 27, 33, 0.08);
  color: rgba(17, 27, 33, 0.45);
  font-size: 0.74rem;
}

.whatsapp-page .wa-burbuja__boton {
  display: block;
  margin: 0.5rem -0.9rem -0.7rem;
  padding: 0.6rem;
  border-top: 1px solid rgba(17, 27, 33, 0.1);
  color: #027eb5;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

/* --- Acciones --- */
.whatsapp-page .wa-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.whatsapp-page .wa-acciones a.boton-secundario {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* --- Tablas del modulo --- */
.whatsapp-page .wa-tabla-scroll {
  overflow-x: auto;
  border: 1px solid rgba(196, 198, 207, 0.3);
  border-radius: 0.3rem;
}

.whatsapp-page .wa-tabla-scroll table { margin: 0; }

.whatsapp-page .wa-texto-largo {
  max-width: 34rem;
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-vacio {
  padding: 2rem 1rem;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 900px) {
  .whatsapp-page .wa-panel { padding: 1.1rem 1rem 1.2rem; }
  .whatsapp-page .wa-grid { grid-template-columns: 1fr; }
  .whatsapp-page .filtros-panel__grupo input:not([type="checkbox"]),
  .whatsapp-page .filtros-panel__grupo select,
  .whatsapp-page .wa-grid__full input:not([type="checkbox"]),
  .whatsapp-page .wa-grid__full select { max-width: 100%; }
}

/* --- Plantillas: tarjetas, no tabla ---------------------------------------------------
 * Una plantilla es un parrafo con marcadores, no un dato de una celda. En tabla, la columna
 * del texto se come el ancho, obliga a scroll horizontal y deja el resto de las columnas
 * apretadas contra el borde. En tarjeta se lee el mensaje completo, que es justamente lo
 * que hay que revisar antes de elegirla en una regla.
 * ------------------------------------------------------------------------------------- */
.whatsapp-page .wa-plantillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  gap: 0.9rem;
}

/* Columna flexible —y no grid— para poder empujar los chips al fondo con margin-top:auto: en una
   fila de tarjetas de alto distinto, los resumenes de variables quedan a la misma altura. */
.whatsapp-page .wa-plantilla-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid rgba(196, 198, 207, 0.45);
  border-left: 3px solid var(--wa-verde-fuerte);
  border-radius: 0.35rem;
  background: var(--color-superficie);
}

/* Una plantilla que Meta no aprobo no se puede enviar: se apaga para que no se elija por error. */
.whatsapp-page .wa-plantilla-card--bloqueada {
  border-left-color: rgba(192, 57, 43, 0.55);
  background: rgba(246, 247, 241, 0.6);
}

.whatsapp-page .wa-plantilla-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.whatsapp-page .wa-plantilla-card__nombre {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primario-fuerte);
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-plantilla-card__meta {
  color: var(--color-texto-suave);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.whatsapp-page .wa-plantilla-card .wa-plantilla {
  margin: 0;
  min-height: 4.5rem;
}

/* Marcadores resaltados dentro del texto de la plantilla: son los huecos que hay que mapear. */
.whatsapp-page .wa-marcador {
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
  background: rgba(18, 140, 126, 0.14);
  color: var(--wa-verde-fuerte);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
}

.whatsapp-page .wa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.whatsapp-page .wa-plantilla-card .wa-chips {
  margin-top: auto;
  padding-top: 0.15rem;
}

.whatsapp-page .wa-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.035);
  color: var(--color-texto-suave);
  font-size: 0.7rem;
  font-weight: 700;
}

.whatsapp-page .wa-chip--sin { opacity: 0.65; }

.whatsapp-page .wa-plantilla-card__nota {
  color: #c0392b;
  font-size: 0.73rem;
  line-height: 1.4;
}

/* --- Bitacora de envios ---------------------------------------------------------------
 * La tabla hereda .operaciones-tabla (el estandar del sistema) y aca solo se reparte el
 * ancho. Sin repartirlo, la columna del mensaje —que es un parrafo— se come la fila y deja
 * fecha, telefono e intentos apretados contra el borde.
 * ------------------------------------------------------------------------------------- */
.whatsapp-page .wa-tabla {
  /* Ocho columnas con contenido real no entran en un portatil: mejor scroll horizontal
     explicito que columnas de dos caracteres. */
  min-width: 68rem;
}

.whatsapp-page .wa-tabla th,
.whatsapp-page .wa-tabla td {
  vertical-align: top;
}

.whatsapp-page .wa-tabla__fecha {
  width: 9.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.whatsapp-page .wa-tabla__telefono {
  width: 9.5rem;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
}

.whatsapp-page .wa-tabla__estado-bulto {
  display: inline-block;
  margin-right: 0.35rem;
}

.whatsapp-page .wa-tabla__plantilla {
  width: 12rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* El mensaje es lo que se viene a leer: se le da el ancho que sobra y un interlineado comodo. */
.whatsapp-page .wa-tabla__mensaje {
  min-width: 22rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-texto);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-tabla__error {
  width: 18rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #93000a;
  overflow-wrap: anywhere;
}

.whatsapp-page .wa-tabla__num {
  width: 3.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.whatsapp-page .wa-chip--prueba {
  padding: 0.1rem 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Una fila con el mensaje entero es alta: la separacion entre filas es lo unico que evita
   leer dos envios como si fueran uno. */
.whatsapp-page .wa-tabla tbody tr + tr td {
  border-top: 1px solid rgba(196, 198, 207, 0.32);
}

/* La columna del estado del bulto lleva ademas el chip "Prueba": con menos ancho, el estado se
   parte en dos lineas y el chip queda colgando solo. */
.whatsapp-page .wa-tabla th:nth-child(4),
.whatsapp-page .wa-tabla td:nth-child(4) {
  width: 11rem;
}

/* =============================================================================================
   Manifiestos de retiro (/app/pickup-manifests)

   Mismo estandar de campos que el resto de los mantenedores (.email-notifications-page /
   .shipment-edit-page). La clase va tanto en la vista como en los .modal-panel de la pagina:
   los modales viven fuera de la <section>, asi que sin ella los campos del formulario se
   quedarian con el estilo por defecto del navegador.
   ============================================================================================= */
.pickup-manifests-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pickup-manifests-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.pickup-manifests-page .filtros-panel__grupo select {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.2rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.pickup-manifests-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.pickup-manifests-page .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
  background: #fff;
}

.pickup-manifests-page .filtros-panel__grupo input::placeholder {
  color: rgba(4, 30, 66, 0.4);
}

/* Los tres campos de hora son cortos: a ancho completo quedan con medio campo vacio. */
.pickup-manifests-page .filtros-panel__grupo input[type="time"] {
  max-width: 10rem;
}

.pickup-manifests-page .mantenedor-switch input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
}

/* Tres interruptores cortos: en la grilla de dos columnas el tercero queda solo en su fila. */
.pickup-manifests-page .pickup-manifests-switches {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.9rem;
}

/* El nombre de la configuracion acompana al cliente en la misma celda. */
.pickup-manifests-page .operaciones-tabla .texto-secundario {
  display: block;
}

/* La lista de destinatarios puede ser larga: se recorta y el detalle queda en el title. */
.pickup-manifests-page .celda-recortada {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Cinco acciones por fila: con el gap estandar la columna empuja a la tabla al scroll. */
.pickup-manifests-page .operaciones-tabla .acciones-inline {
  gap: 0.55rem;
}

@media (max-width: 900px) {
  .pickup-manifests-page .pickup-manifests-switches {
    grid-template-columns: 1fr;
  }

  .pickup-manifests-page .celda-recortada {
    max-width: 11rem;
  }
}

/* ── Categorias de cliente (mantenedor + chip en listados) ─────────────────
   El chip toma su color de la categoria via la variable --segmento-color que
   inyecta la pagina. Sin variable cae al gris neutro, que es lo que corresponde
   a un cliente todavia sin categorizar. */
.segmento-chip {
  --segmento-color: rgba(4, 30, 66, 0.58);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--segmento-color);
  border: 1px solid color-mix(in srgb, var(--segmento-color) 35%, transparent);
  background: color-mix(in srgb, var(--segmento-color) 12%, transparent);
}

.segmento-chip--vacio {
  --segmento-color: rgba(4, 30, 66, 0.45);
  font-weight: 600;
}

.customer-segments-page input[type="color"] {
  min-height: 2.4rem;
  padding: 0.15rem;
  cursor: pointer;
}

/* ── Concentracion de carga por sector (/app/load-heatmap) ────────────────── */
/* El mapa manda: se le da el doble de ancho que a la tabla, y la tabla se queda con lo justo para
   leer sector, bultos y participacion. Antes iban casi a la par y el mapa quedaba apretado, que es
   justo lo contrario de lo que esta pantalla existe para hacer. */
.load-heatmap-split {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(19rem, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* Pantalla completa: overlay dentro de la pagina, no la Fullscreen API del navegador. El operador no
   pierde el portal y sale con Esc. */
.load-heatmap-split--full {
  position: fixed;
  inset: 0;
  z-index: 1200;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.34fr);
  gap: 0;
  padding: 0;
  background: var(--color-fondo, #eceae3);
}

.load-heatmap-split--full .load-heatmap-map-panel,
.load-heatmap-split--full .load-heatmap-table-panel {
  border-radius: 0;
  max-height: none;
}

.load-heatmap-split--full .load-heatmap-map {
  min-height: 0;
  border-radius: 0;
}

.load-heatmap-split--full .load-heatmap-table-panel {
  overflow: auto;
}

.load-heatmap-map-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* El envoltorio existe para poder anclar el boton de pantalla completa sobre el mapa sin meterlo
   dentro del div que maneja Leaflet (que lo borraria al redibujar). */
.load-heatmap-map-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.load-heatmap-map {
  width: 100%;
  /* De 30rem a 44rem: con 30 el mapa mostraba Santiago del tamano de una estampilla y habia que hacer
     zoom para distinguir un sector de otro. */
  min-height: 44rem;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-fondo, #eceae3);
}

/* Controles flotantes sobre el mapa. Van agrupados arriba a la derecha, lejos del zoom de Leaflet
   (arriba a la izquierda) para no competir con el. */
.load-heatmap-map-tools {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  /* Por encima de los controles de zoom de Leaflet (z-index 1000) y del panel de atribucion. */
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.load-heatmap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 0.2rem;
  background: var(--color-superficie, #fff);
  color: #041e42;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(22, 32, 43, 0.16);
}

.load-heatmap-toggle:hover {
  background: #fff;
  border-color: var(--color-primario, #041e42);
}

.load-heatmap-toggle input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.load-heatmap-toggle:focus-within {
  outline: 2px solid var(--color-primario, #041e42);
  outline-offset: 2px;
}

.load-heatmap-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(196, 198, 207, 0.5);
  border-radius: 0.2rem;
  background: var(--color-superficie, #fff);
  color: #041e42;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(22, 32, 43, 0.16);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.load-heatmap-fullscreen:hover {
  background: #fff;
  border-color: var(--color-primario, #041e42);
}

.load-heatmap-fullscreen:focus-visible {
  outline: 2px solid var(--color-primario, #041e42);
  outline-offset: 2px;
}

.load-heatmap-fullscreen .material-symbols-outlined {
  font-size: 1.05rem;
}

.load-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: rgba(4, 30, 66, 0.58);
}

.load-heatmap-legend__ramp {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe08a 0%, #b42318 100%);
}

/* Leyenda de los puntos de concentracion. Va bajo la rampa de calor y en una linea propia: el color
   del poligono responde "cuanta carga tiene el sector" y el punto "en que parte del sector esta". */
.load-heatmap-legend--puntos {
  margin-top: 0.35rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.load-heatmap-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  flex: none;
}

.load-heatmap-dot--dentro {
  background: #e8483a;
  border: 1px solid #7a1710;
}

.load-heatmap-dot--fuera {
  background: #3b82c4;
  border: 1px solid #1d4e89;
}

/* Direccion con coordenada cuyo sector todavia no se evaluo (tipicamente, recien editada la cartografia).
   Gris y no azul: pintarla como "fuera de sector" haria creer que falta dibujar un poligono ahi. */
.load-heatmap-dot--pendiente {
  background: #9ca3af;
  border: 1px solid #4b5563;
}

/* Resumen de la capa de coordenadas, bajo las leyendas: cuanta carga ubicable hay y cuanta queda afuera. */
.load-heatmap-resumen {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: rgba(4, 30, 66, 0.58);
}

/* Aviso de sectores por evaluar: ambar y no rojo, porque no es un error, es trabajo en curso del worker. */
.load-heatmap-aviso {
  border-color: rgba(180, 83, 9, 0.35);
  background: #fffbeb;
}

.load-heatmap-aviso .material-symbols-outlined {
  color: #b45309;
}

.load-heatmap-legend__nota {
  margin-left: auto;
  text-align: right;
}

/* La tabla acompana la altura del mapa para que ambos paneles terminen a la misma linea. */
.load-heatmap-table-panel {
  max-height: 46rem;
  overflow: auto;
}

/* La barra de participacion vive dentro de la celda: sin ancho fijo la tabla la colapsa a nada
   cuando el nombre del sector es largo. */
.load-heatmap-bar {
  width: 100%;
  min-width: 6rem;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(196, 198, 207, 0.28);
  overflow: hidden;
}

.load-heatmap-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}

@media (max-width: 1100px) {
  .load-heatmap-split {
    grid-template-columns: 1fr;
  }

  .load-heatmap-table-panel {
    max-height: none;
  }

  /* En una columna el mapa no necesita 44rem: ocuparia toda la pantalla y habria que hacer scroll
     para llegar a la tabla. */
  .load-heatmap-map {
    min-height: 28rem;
  }

  /* En pantalla completa sobre un ancho chico, el mapa arriba y la tabla debajo. */
  .load-heatmap-split--full {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr);
    overflow: hidden;
  }

  .load-heatmap-split--full .load-heatmap-map {
    min-height: 0;
  }
}

/* ── Recepcion de devoluciones (/app/dispatch/returns) ─────────────────────
   La fila en alerta marca el bulto incidentado que lleva mas de un dia sin bajar del vehiculo: o nunca
   volvio, o se recepciono sin pistolear. Es lo que la pantalla existe para hacer visible. */
.returns-receipt-page .fila-alerta > td {
  background: color-mix(in srgb, #dc2626 7%, transparent);
}

.returns-receipt-page .fila-alerta > td:first-child {
  box-shadow: inset 3px 0 0 0 #dc2626;
}

/* ── Reenvio masivo de webhooks (/app/webhook-logs) ────────────────────────
   La barra queda pegada arriba: la seleccion se arma bajando por una tabla de hasta 500 filas, y sin
   sticky el boton de reenviar queda a cientos de pixeles del ultimo check marcado. */
.webhook-logs-bulkbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: #1c1f26;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(28, 31, 38, 0.18);
}

.webhook-logs-bulkbar strong {
  display: block;
  font-size: 0.95rem;
}

.webhook-logs-bulkbar span {
  font-size: 0.78rem;
  color: #c9ccd2;
}

.webhook-logs-page .webhook-logs-check {
  width: 2.5rem;
  text-align: center;
}

.webhook-logs-page .webhook-logs-check input {
  cursor: pointer;
}

.webhook-logs-page .fila-seleccionada > td {
  background: color-mix(in srgb, #ffc400 16%, transparent);
}

/* La URL puede ser larguisima; se recorta y el titulo muestra la completa al pasar el mouse. */
.webhook-logs-url {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
}

.webhook-logs-tope {
  color: #9a6b00;
  font-weight: 600;
}

.webhook-logs-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.modal-ayuda--alerta {
  color: #b42318;
  background: color-mix(in srgb, #b42318 8%, transparent);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
}

.webhook-logs-sinpermiso {
  font-size: 0.78rem;
  color: #c9ccd2;
  font-style: italic;
}

/* ── Depuracion de bultos sin gestion (/app/package-cleanup) ───────────────
   La tira de 3 pasos esta arriba a proposito: el modulo borra datos sin vuelta atras, y el operador
   tiene que entender la secuencia (pendiente -> anulado -> eliminado) antes de tocar un plazo. */
.package-cleanup-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  /* Mismo fondo y borde que .tabla-operativa-panel: la tira es un panel mas de la pagina, no una
     tarjeta con vida propia. */
  padding: 1rem 1.15rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.package-cleanup-flow__step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 12rem;
}

.package-cleanup-flow__step strong {
  display: block;
  font-size: 0.85rem;
  color: #041e42;
}

.package-cleanup-flow__step small {
  color: rgba(4, 30, 66, 0.58);
  font-size: 0.73rem;
  line-height: 1.35;
}

.package-cleanup-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #ffc400;
  color: #1c1f26;
  font-weight: 800;
  font-size: 0.8rem;
  flex: 0 0 auto;
}

.package-cleanup-flow__step--peligro .package-cleanup-flow__num {
  background: #b42318;
  color: #ffffff;
}

.package-cleanup-flow__step--peligro strong {
  color: #b42318;
}

.package-cleanup-flow__arrow {
  color: rgba(4, 30, 66, 0.35);
  font-size: 1.1rem;
}

.package-cleanup-danger {
  color: #b42318;
  font-weight: 600;
}

@media (max-width: 900px) {
  .package-cleanup-flow__arrow {
    display: none;
  }
}

/* El texto de ayuda dentro de un switch: explica que hace la opcion en el estado actual, sin sacar al
   operador del formulario a buscar documentacion. */
.mantenedor-switch__ayuda {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(4, 30, 66, 0.58);
}

/* ============================================================
   Campos de formulario de los modulos nuevos (ago 2026)
   /app/package-cleanup · /app/customer-segments · /app/dispatch/returns · /app/load-heatmap

   Mismo estandar que .email-notifications-page y .pickup-manifests-page. Va aca y no repetido cuatro
   veces porque es literalmente el mismo bloque: NO hay estilo global para input/select, asi que un
   .filtros-panel__grupo que vive fuera de un .filtros-panel se queda con el look por defecto del
   navegador. Es lo que le pasaba a estos cuatro mantenedores.
   ============================================================ */
.package-cleanup-page .filtros-panel__grupo label,
.customer-segments-page .filtros-panel__grupo label,
.returns-receipt-page .filtros-panel__grupo label,
.load-heatmap-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.package-cleanup-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.package-cleanup-page .filtros-panel__grupo select,
.customer-segments-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.customer-segments-page .filtros-panel__grupo select,
.returns-receipt-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.returns-receipt-page .filtros-panel__grupo select,
.load-heatmap-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.load-heatmap-page .filtros-panel__grupo select {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.2rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.package-cleanup-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.package-cleanup-page .filtros-panel__grupo select:focus,
.customer-segments-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.customer-segments-page .filtros-panel__grupo select:focus,
.returns-receipt-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.returns-receipt-page .filtros-panel__grupo select:focus,
.load-heatmap-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.load-heatmap-page .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
  background: #fff;
}

.package-cleanup-page .filtros-panel__grupo input::placeholder,
.customer-segments-page .filtros-panel__grupo input::placeholder,
.returns-receipt-page .filtros-panel__grupo input::placeholder,
.load-heatmap-page .filtros-panel__grupo input::placeholder {
  color: rgba(4, 30, 66, 0.4);
}

.package-cleanup-page .mantenedor-switch input[type="checkbox"],
.customer-segments-page .mantenedor-switch input[type="checkbox"],
.returns-receipt-page .mantenedor-switch input[type="checkbox"],
.load-heatmap-page .mantenedor-switch input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
}

/* El texto de ayuda bajo cada campo: separado del control y sin competir con el label. */
.package-cleanup-page .campo-ayuda,
.customer-segments-page .campo-ayuda,
.returns-receipt-page .campo-ayuda,
.load-heatmap-page .campo-ayuda {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(4, 30, 66, 0.58);
}

/* Barra de acciones de un formulario que se edita EN LINEA (no en modal): separa los botones del
   ultimo campo y los alinea a la derecha, como el pie de un modal. Reemplaza los margin-top sueltos
   que estos mantenedores traian en atributos style. */
.mantenedor-acciones-inline {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196, 198, 207, 0.28);
  justify-content: flex-end;
}

/* El panel de edicion en linea respira igual que el cuerpo de un modal. */
.package-cleanup-page .tabla-operativa-panel .modal-seccion__head,
.customer-segments-page .tabla-operativa-panel .modal-seccion__head {
  margin-bottom: 1rem;
}

.package-cleanup-page .mantenedor-campos.modal-formulario-grid,
.customer-segments-page .mantenedor-campos.modal-formulario-grid {
  row-gap: 1.1rem;
}

/* El selector de color no debe estirarse a 3rem de alto como un textbox: es una muestra, no un campo
   de escritura. */
.customer-segments-page .filtros-panel__grupo input[type="color"] {
  min-height: 2.6rem;
  padding: 0.2rem;
  cursor: pointer;
}

/* Los switches se separan del bloque de campos que tienen encima. */
.package-cleanup-page .modal-switch-grid {
  margin-top: 1.1rem;
}

/* ============================================================
   Fondo de los mapas Leaflet (/app/sectors y /app/load-heatmap)

   Los tiles son el FONDO de los poligonos de sector, que van pintados y semitransparentes encima. El
   callejero de OpenStreetMap a todo color compite con ellos y ensucia la lectura del calor. Se apaga
   aca y no cambiando de proveedor: CARTO Voyager traia esta paleta de fabrica, pero cerro su nivel
   gratuito y ahora sus tiles devuelven un "API KEY REQUIRED" estampado sobre el mapa.

   Los valores estan calibrados para que las calles y los nombres sigan siendo legibles: con
   grayscale(1) el mapa se vuelve plano y deja de servir para ubicarse.
   ============================================================ */
.sdpgo-basemap-muted {
  filter: grayscale(0.62) saturate(0.7) brightness(1.06) contrast(0.94);
}

/* ============================================================
   Etiqueta fija sobre cada sector del mapa (/app/load-heatmap)

   Es un tooltip permanente de Leaflet, no un marcador: se ancla al centro del poligono y se reposiciona
   solo al hacer zoom o pan. Con 60 sectores, tener que pasar el mouse uno por uno para saber cuanta
   carga tiene cada cual anula el sentido de mirar un mapa.
   ============================================================ */
.leaflet-tooltip.sdpgo-sector-label {
  display: flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.12rem 0.34rem;
  border: none;
  border-radius: 3px;
  /* Fondo semitransparente: el color del poligono tiene que seguir leyendose por detras, porque es el
     que codifica la intensidad. */
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 2px rgba(22, 32, 43, 0.18);
  color: #041e42;
  font-size: 0.63rem;
  line-height: 1.25;
  white-space: nowrap;
  /* Las etiquetas no deben interceptar el clic: el clic es del poligono, que enfoca el sector. */
  pointer-events: none;
}

/* Leaflet dibuja una flechita en los tooltips; con direction:center sobra. */
.leaflet-tooltip.sdpgo-sector-label::before {
  display: none;
}

.sdpgo-sector-label .sm-lbl__n {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sdpgo-sector-label .sm-lbl__v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #7a2f14;
}

/* Al alejarse, fuera: 60 nombres encimados tapan justamente lo que se viene a mirar. */
.sdpgo-sin-etiquetas .leaflet-tooltip.sdpgo-sector-label {
  display: none;
}

/* ============================================================
   Etiquetas 4 x hoja (/app/label-sheet)
   Calibracion del troquel de la plancha autoadhesiva A4. Edita en linea (no en modal), asi que
   replica el estandar de campos de .email-notifications-page.
   ============================================================ */
.label-sheet-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.label-sheet-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.label-sheet-page .filtros-panel__grupo select {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.2rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Son medidas en milimetros: alineadas a la derecha y con cifras de ancho fijo se comparan de un
   vistazo entre campos. */
.label-sheet-page .filtros-panel__grupo input[type="number"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.label-sheet-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.label-sheet-page .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
  background: #fff;
}

.label-sheet-page .filtros-panel__grupo input::placeholder {
  color: rgba(4, 30, 66, 0.4);
}

.label-sheet-page .label-sheet-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
  margin-top: 1rem;
}

.label-sheet-page .label-sheet-subtitulo {
  margin: 1.25rem 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primario-fuerte);
}

.label-sheet-page .label-sheet-nota {
  margin: 0 0 0.6rem;
  max-width: 62ch;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
}

.label-sheet-page .label-sheet-aviso {
  margin-top: 1rem;
}

.label-sheet-page .label-sheet-instrucciones {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--color-secundario);
  background: rgba(160, 190, 230, 0.18);
  font-size: 0.8rem;
}

.label-sheet-page .label-sheet-instrucciones strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-primario-fuerte);
}

.label-sheet-page .label-sheet-instrucciones ul {
  margin: 0 0 0.5rem 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.label-sheet-page .label-sheet-instrucciones p {
  margin: 0;
  color: var(--color-texto-suave);
}

.label-sheet-page .label-sheet-acciones {
  justify-content: flex-end;
}

.label-sheet-page .label-sheet-vista {
  margin-top: 1rem;
}

/* El lienzo reserva el alto de la hoja YA reducida; la plancha (LabelSheetHtmlRenderer, estilos en
   css/labels.css) se dibuja en milimetros reales y se escala solo en pantalla, de modo que lo que se
   ve es exactamente lo que sale impreso. */
.label-sheet-page .label-sheet-lienzo {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 0.35rem;
}

.label-sheet-page .label-sheet-lienzo .hoja4-stack {
  display: block;
}

.label-sheet-page .label-sheet-lienzo .hoja4-hoja {
  transform: scale(var(--h4-zoom, 1));
  transform-origin: top left;
}

@media (max-width: 1100px) {
  .label-sheet-page .label-sheet-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  /* La hoja tiene que arrancar en el borde del papel: cualquier padding heredado de la vista
     desplaza la plancha completa y arruina justamente lo que se esta calibrando. */
  .label-sheet-page,
  .label-sheet-page .label-sheet-vista {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* En papel va a tamano real: la reduccion del lienzo es solo para verla en pantalla. */
  .label-sheet-page .label-sheet-lienzo {
    width: auto !important;
    height: auto !important;
    overflow: visible;
    margin: 0 !important;
  }

  .label-sheet-page .label-sheet-lienzo .hoja4-hoja {
    transform: none !important;
  }
}

/* ============================================================================
   Informe diario de operaciones (/app/daily-report)

   Pagina de solo consulta: mira la bitacora del servicio SDPGO.Reporting, que
   corre fuera de IIS. La vista previa es el HTML del correo tal como se envio,
   leido del disco — por eso va dentro de un iframe con sus propios estilos, que
   no deben mezclarse con los de la aplicacion.
   ============================================================================ */

.daily-report-page .daily-report-alerta {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid #b42318;
  border-radius: 0 8px 8px 0;
  background: #fef3f2;
  color: #7a271a;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* El informe trae su propio ancho de 640px y fondo propio: el marco solo le da
   sitio y un borde para que se lea como un documento y no como parte de la app. */
.daily-report-page .daily-report-vista {
  width: 100%;
  height: 70vh;
  margin: 12px 0 20px;
  border: 1px solid var(--borde, #e4e7eb);
  border-radius: 10px;
  background: #f5f7fa;
}

.daily-report-page .daily-report-sin-narrativa {
  color: #667085;
  font-style: italic;
}

/* El detalle puede traer un error de SMTP entero. Se recorta y el texto completo
   queda en el title, en vez de romper el ancho de la tabla. */
.daily-report-page .daily-report-detalle {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Reportes a medida (/app/reports/custom)
   Grilla a la izquierda, panel de campos a la derecha. Todo lo
   que se marca en el panel aparece como columna de inmediato.
   ============================================================ */
.custom-reports-page {
  gap: 1.1rem;
}

.custom-reports-header__acciones {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.custom-reports-header__acciones .boton-principal,
.custom-reports-header__acciones .boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.6rem;
}

.custom-reports-header__acciones .material-symbols-outlined {
  font-size: 1.05rem;
}

.custom-reports-saved {
  min-width: 19rem;
}

.custom-reports-saved label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.custom-reports-saved select {
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.5rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primario-fuerte);
  outline: none;
}

.custom-reports-saved select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.boton-secundario--alerta {
  color: #93000a;
  border-color: rgba(147, 0, 10, 0.3);
}

.boton-secundario--alerta:hover {
  background: rgba(255, 218, 214, 0.5);
}

.boton-principal--alerta {
  background: #93000a;
  border-color: #93000a;
}

/* Barra de consulta: ventana + rango + atajos + buscador + boton, en una sola fila. */
.custom-reports-toolbar {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.85fr) auto minmax(0, 2fr) auto;
}

.custom-reports-shortcuts {
  display: flex;
  gap: 0.3rem;
}

.custom-reports-shortcuts button {
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.52rem 0.62rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  white-space: nowrap;
  cursor: pointer;
}

.custom-reports-shortcuts button:hover {
  color: var(--color-primario-fuerte);
  border-color: rgba(4, 30, 66, 0.45);
}

/* Fila de filtros: chips + editor inline. */
.custom-reports-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(196, 198, 207, 0.18);
}

.custom-reports-filters__label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.25rem;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.custom-reports-filters__label .material-symbols-outlined {
  font-size: 1rem;
}

.custom-reports-filters__conteo {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--color-texto-suave);
}

.custom-reports-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(4, 30, 66, 0.22);
  background: rgba(4, 30, 66, 0.06);
  color: var(--color-primario-fuerte);
  font-size: 0.74rem;
  font-weight: 700;
}

.custom-reports-chip--activo {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.custom-reports-chip__texto {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0.38rem 0.6rem;
  cursor: pointer;
  max-width: 34rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-reports-chip__quitar {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-left: 1px solid rgba(4, 30, 66, 0.16);
  background: transparent;
  color: inherit;
  padding: 0 0.35rem;
  cursor: pointer;
  opacity: 0.7;
}

.custom-reports-chip__quitar:hover {
  opacity: 1;
  background: rgba(147, 0, 10, 0.08);
  color: #93000a;
}

.custom-reports-chip__quitar .material-symbols-outlined {
  font-size: 0.95rem;
}

.custom-reports-chip--agregar {
  align-items: center;
  gap: 0.25rem;
  border-style: dashed;
  background: transparent;
  color: var(--color-texto-suave);
  padding: 0.38rem 0.6rem;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.custom-reports-chip--agregar:hover {
  color: var(--color-primario-fuerte);
  border-color: var(--color-primario);
}

.custom-reports-chip--agregar .material-symbols-outlined {
  font-size: 1rem;
}

.custom-reports-filter-editor {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 0.7rem;
  align-items: end;
  margin-top: 0.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(4, 30, 66, 0.18);
  background: var(--color-superficie);
}

.custom-reports-filter-editor .filtros-panel__grupo label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.custom-reports-filter-editor input:not([type="checkbox"]),
.custom-reports-filter-editor select {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.56rem 0.72rem;
  font-size: 0.82rem;
  outline: none;
}

.custom-reports-filter-editor input:not([type="checkbox"]):focus,
.custom-reports-filter-editor select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.custom-reports-filter-editor__valores {
  grid-column: 3;
}

.custom-reports-filter-editor__buscar {
  margin-bottom: 0.35rem;
}

.custom-reports-choices {
  display: grid;
  gap: 0.1rem;
  max-height: 12rem;
  overflow: auto;
  border: 1px solid rgba(196, 198, 207, 0.28);
  padding: 0.3rem;
  background: var(--color-superficie);
}

.custom-reports-choice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.custom-reports-choice:hover {
  background: rgba(4, 30, 66, 0.05);
}

.custom-reports-choice--on {
  background: rgba(4, 30, 66, 0.08);
  font-weight: 700;
}

.custom-reports-choice input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primario);
}

.custom-reports-filter-editor__acciones {
  grid-column: 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* KPIs: seis cajas compactas del patron de Encomiendas. */
.custom-reports-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.custom-reports-kpis strong small {
  margin-left: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-texto-suave);
}

/* Cuerpo: grilla + panel lateral de campos. */
.custom-reports-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1.1rem;
  align-items: start;
}

.custom-reports-grid {
  min-width: 0;
}

.custom-reports-grid__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 0.6rem;
}

.custom-reports-grid__titulo h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.custom-reports-grid__titulo p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

.custom-reports-grid__titulo p strong {
  color: var(--color-primario-fuerte);
}

.custom-reports-aviso {
  display: inline-flex;
  padding: 0.2rem 0.5rem;
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.custom-reports-aviso--suave {
  background: rgba(4, 30, 66, 0.08);
  color: var(--color-primario-fuerte);
}

.custom-reports-grid__tools {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

.custom-reports-pagesize {
  min-width: 6.5rem;
}

/* Chips de columnas: se arrastran para reordenar. */
.custom-reports-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.5rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.18);
}

.custom-reports-columns__vacio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.custom-reports-column-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid rgba(196, 198, 207, 0.4);
  background: var(--color-superficie);
  padding: 0.22rem 0.3rem 0.22rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-texto);
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.custom-reports-column-chip:hover {
  border-color: rgba(4, 30, 66, 0.45);
}

.custom-reports-column-chip--arrastrando {
  opacity: 0.45;
}

.custom-reports-column-chip--sobre {
  border-color: var(--color-primario);
  box-shadow: -3px 0 0 var(--color-primario);
}

.custom-reports-column-chip__asa {
  font-size: 1rem;
  color: rgba(68, 71, 78, 0.55);
}

.custom-reports-column-chip__quitar {
  display: inline-flex;
  border: 0;
  background: transparent;
  padding: 0 0.1rem;
  color: rgba(68, 71, 78, 0.6);
  cursor: pointer;
}

.custom-reports-column-chip__quitar:hover {
  color: #93000a;
}

.custom-reports-column-chip__quitar .material-symbols-outlined {
  font-size: 0.95rem;
}

.custom-reports-columns__limpiar {
  margin-left: 0.4rem;
}

/* Resumen por campo (agrupacion) con barra de participacion. */
.custom-reports-summary {
  padding: 0.5rem 1.25rem 0.9rem;
  border-bottom: 1px solid rgba(196, 198, 207, 0.18);
  background: rgba(245, 247, 250, 0.55);
}

.custom-reports-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.4rem 0 0.5rem;
}

.custom-reports-summary__scroll {
  max-height: 16rem;
  overflow: auto;
  border: 1px solid rgba(196, 198, 207, 0.18);
  background: var(--color-superficie);
}

.custom-reports-summary__tabla {
  min-width: 48rem;
}

.custom-reports-summary__fila {
  cursor: pointer;
}

.custom-reports-summary__fila:hover td {
  background: rgba(4, 30, 66, 0.06);
}

.custom-reports-barra {
  display: inline-block;
  width: 4.5rem;
  height: 0.4rem;
  margin-right: 0.45rem;
  background: rgba(196, 198, 207, 0.3);
  vertical-align: middle;
  overflow: hidden;
}

.custom-reports-barra i {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  background: var(--color-secundario);
}

/* Grilla principal. */
.custom-reports-scroll {
  max-height: 38rem;
  overflow: auto;
}

.custom-reports-table th,
.custom-reports-table td {
  white-space: nowrap;
}

.custom-reports-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #dfe6ee;
}

.custom-reports-th {
  cursor: pointer;
  user-select: none;
}

.custom-reports-th:hover,
.custom-reports-th--ordenado {
  color: var(--color-primario-fuerte);
}

.custom-reports-th__flecha {
  margin-left: 0.15rem;
  font-size: 0.9rem;
  vertical-align: middle;
}

.custom-reports-th--num,
.custom-reports-td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.custom-reports-th--indice,
.custom-reports-td--indice {
  width: 2.5rem;
  text-align: right;
  font-size: 0.66rem;
  color: rgba(68, 71, 78, 0.55);
}

.custom-reports-td--texto {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-reports-table tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--color-superficie);
  border-top: 2px solid rgba(26, 54, 93, 0.16);
  font-variant-numeric: tabular-nums;
}

.custom-reports-girando {
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: middle;
  animation: custom-reports-spin 1s linear infinite;
}

@keyframes custom-reports-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Panel de campos (derecha): pegado al scroll, con su propia lista desplazable. */
.custom-reports-fields {
  position: sticky;
  top: 1rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100vh - 2rem);
  padding-bottom: 0;
  background: var(--color-superficie);
}

.custom-reports-fields__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
}

.custom-reports-fields__head h2 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.custom-reports-fields__buscar {
  padding: 0 1rem 0.6rem;
}

.custom-reports-fields__buscar input {
  width: 100%;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: var(--color-superficie);
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  outline: none;
}

.custom-reports-fields__buscar input:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

.custom-reports-fields__lista {
  overflow: auto;
  border-top: 1px solid rgba(196, 198, 207, 0.18);
}

.custom-reports-group {
  border-bottom: 1px solid rgba(196, 198, 207, 0.14);
}

.custom-reports-group__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--color-texto);
  cursor: pointer;
}

.custom-reports-group__head:hover {
  background: rgba(4, 30, 66, 0.04);
}

.custom-reports-group__icono {
  font-size: 1.05rem;
  color: var(--color-secundario);
}

.custom-reports-group__nombre {
  flex: 1;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.custom-reports-group__conteo {
  min-width: 1.35rem;
  padding: 0.1rem 0.4rem;
  background: var(--color-primario);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  text-align: center;
}

.custom-reports-group__chevron {
  font-size: 1.1rem;
  color: var(--color-texto-suave);
}

.custom-reports-group__campos {
  display: grid;
  padding: 0 0.5rem 0.5rem;
}

.custom-reports-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.5rem;
  border-left: 2px solid transparent;
  font-size: 0.78rem;
  cursor: pointer;
}

.custom-reports-field:hover {
  background: rgba(4, 30, 66, 0.05);
}

.custom-reports-field--on {
  background: rgba(4, 30, 66, 0.07);
  border-left-color: var(--color-primario);
  font-weight: 700;
}

.custom-reports-field input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-primario);
}

.custom-reports-field__texto {
  flex: 1;
}

.custom-reports-field__tipo {
  font-size: 0.95rem;
  color: rgba(68, 71, 78, 0.45);
}

/* Modales del modulo (guardar / eliminar): estandar de campos de los mantenedores. */
.modal-panel.custom-reports-page .filtros-panel__grupo label {
  color: rgba(4, 30, 66, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.modal-panel.custom-reports-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]),
.modal-panel.custom-reports-page .filtros-panel__grupo select {
  width: 100%;
  min-height: 3rem;
  box-sizing: border-box;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-radius: 0.2rem;
  background: var(--color-superficie);
  color: #041e42;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.modal-panel.custom-reports-page .filtros-panel__grupo input:not([type="checkbox"]):not([type="radio"]):focus,
.modal-panel.custom-reports-page .filtros-panel__grupo select:focus {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
  background: #fff;
}

.modal-panel.custom-reports-page .filtros-panel__grupo input::placeholder {
  color: rgba(4, 30, 66, 0.4);
}

.modal-panel.custom-reports-page .mantenedor-switch input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
}

.modal-panel.custom-reports-page .modal-switch-grid {
  grid-template-columns: 1fr;
  margin-top: 0.9rem;
}

.modal-panel.custom-reports-page .modal-ayuda {
  margin-top: 0.9rem;
}

/* Acceso desde la reporteria clasica. */
.reports-header-side {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 1280px) {
  .custom-reports-layout {
    grid-template-columns: 1fr;
  }

  .custom-reports-fields {
    position: static;
    max-height: 28rem;
  }

  .custom-reports-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-reports-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .custom-reports-filter-editor {
    grid-template-columns: 1fr;
  }

  .custom-reports-filter-editor__valores,
  .custom-reports-filter-editor__acciones {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .custom-reports-header__acciones {
    width: 100%;
  }

  .custom-reports-saved {
    min-width: 0;
    width: 100%;
  }

  .custom-reports-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Barra de progreso de consultas pesadas (Reporteria, Reportes a medida) ── */
.consulta-progreso {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.22);
  border-left: 3px solid var(--color-primario);
}

.consulta-progreso__cabecera {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.consulta-progreso__icono {
  font-size: 1.75rem;
  color: var(--color-primario);
}

.consulta-progreso__textos {
  flex: 1;
  min-width: 0;
}

.consulta-progreso__textos strong,
.consulta-progreso__textos p {
  display: block;
  margin: 0;
}

.consulta-progreso__textos p {
  color: var(--color-texto-suave);
  margin-top: 0.2rem;
  font-size: 0.9rem;
}

.consulta-progreso__cancelar {
  flex-shrink: 0;
}

.consulta-progreso__barra {
  position: relative;
  height: 10px;
  overflow: hidden;
  background: rgba(4, 30, 66, 0.12);
  border-radius: 999px;
}

.consulta-progreso__relleno {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primario) 0%, var(--color-primario-fuerte) 100%);
  background-image:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.22) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, var(--color-primario) 0%, var(--color-primario-fuerte) 100%);
  background-size: 28px 28px, 100% 100%;
  animation: consulta-progreso-rayas 1s linear infinite;
  transition: width 0.4s ease;
}

.consulta-progreso__relleno--indeterminado {
  width: 40% !important;
  animation: consulta-progreso-rayas 1s linear infinite, consulta-progreso-vaiven 1.6s ease-in-out infinite alternate;
}

.consulta-progreso__pie {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

.consulta-progreso__paso {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(4, 30, 66, 0.1);
  color: var(--color-primario);
  font-weight: 600;
  font-size: 0.8rem;
}

.consulta-progreso__aviso {
  margin: 0;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  background: rgba(214, 158, 46, 0.12);
  border-left: 3px solid #d69e2e;
}

.consulta-progreso--embebida {
  width: 100%;
  margin: 0;
}

.reports-error-inline {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: rgba(197, 48, 48, 0.08);
  border-left: 3px solid #c53030;
}

.reports-error-inline strong,
.reports-error-inline p {
  display: block;
  margin: 0;
}

.reports-error-inline p {
  margin-top: 0.2rem;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

@keyframes consulta-progreso-rayas {
  to {
    background-position: 28px 0, 0 0;
  }
}

@keyframes consulta-progreso-vaiven {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(170%);
  }
}

/* KPIs de Encomiendas mientras se calculan en segundo plano (la grilla ya esta pintada) */
.resumen-operativo--cargando article strong {
  color: var(--color-texto-suave);
  animation: resumen-operativo-pulso 1.2s ease-in-out infinite;
}

@keyframes resumen-operativo-pulso {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Filtros de Admisiones en dos filas sobre la grilla de 4 columnas + auto:
   fila 1 = Desde | Hasta | Estado | Hub | atajos; fila 2 = Realizado por | Buscar (3 col) | acciones.
   Sin el span 3 el buscador dejaba una columna vacia antes de los botones. */
.admissions-filtros .filtros-panel__grupo--buscar {
  grid-column: span 3;
}

@media (max-width: 1200px) {
  .admissions-filtros .filtros-panel__grupo--buscar {
    grid-column: auto;
  }
}

/* ── Historial de la cuenta en la ficha de usuario (/app/users) ── */
.cuenta-historial__resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cuenta-historial__resumen > div {
  padding: 0.6rem 0.8rem;
  background: rgba(4, 30, 66, 0.05);
  border-left: 2px solid rgba(4, 30, 66, 0.25);
}

.cuenta-historial__resumen span,
.cuenta-historial__resumen strong {
  display: block;
}

.cuenta-historial__resumen span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
}

.cuenta-historial__resumen strong {
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.cuenta-historial__resumen--alerta {
  background: rgba(197, 48, 48, 0.08);
  border-left-color: #c53030;
}

.cuenta-historial__tabla {
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

.cuenta-historial__detalle {
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}

/* Aviso de circuito caido (App.razor #blazor-error-ui). Oculto por defecto; blazor.web.js le pone
   display:block cuando el circuito muere o no logra reconectar. Barra fija abajo, por encima de todo. */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  padding: 0.85rem 3rem 0.85rem 1.25rem;
  background: var(--color-error-fondo);
  color: var(--color-error);
  border-top: 3px solid var(--color-error);
  box-shadow: 0 -8px 24px rgba(4, 30, 66, 0.18);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

#blazor-error-ui .material-symbols-outlined {
  vertical-align: middle;
  margin-right: 0.5rem;
}

#blazor-error-ui .reload {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--color-error);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

#blazor-error-ui .dismiss {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* Selector del ancho de zona, junto a los toggles del mapa de concentracion. */
.load-heatmap-toggle--select {
  gap: 0.35rem;
}

.load-heatmap-toggle--select select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0 0.1rem;
  cursor: pointer;
}

/* Leyenda de densidad, sobre el mapa de concentracion. Va ARRIBA y no al pie porque es la clave de
   lectura de lo que se esta mirando: al pie aparecia recien despues de haber mirado el mapa. */
.densidad-leyenda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(196, 198, 207, 0.35);
  border-radius: 8px;
  background: var(--color-superficie);
  font-size: 0.75rem;
  color: rgba(4, 30, 66, 0.72);
}

.densidad-leyenda__titulo {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: rgba(4, 30, 66, 0.55);
}

.densidad-leyenda__escala {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.densidad-leyenda__paso {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.densidad-leyenda__chip {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid #3b0764;
  flex: none;
}

/* Fuera de sector se marca con textura, no con otro color: el color ya codifica densidad. */
.densidad-leyenda__chip--fuera {
  background: repeating-linear-gradient(45deg, #ffffff 0 3px, #c3bcd6 3px 6px);
}

.densidad-leyenda__sep {
  color: rgba(4, 30, 66, 0.5);
}

/* ============================================================
   Indicadores SLA (/app/sla)
   Dashboard de paneles: tarjetas KPI, tablas pivote con semaforo
   que se abren nivel por nivel, y graficos SVG del servidor.
   Reutiliza los chips y el editor de filtros de reportes a medida.
   ============================================================ */
.sla-page {
  gap: 1rem;
}

.sla-toolbar {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto minmax(0, 2fr) auto;
  align-items: end;
}

.sla-toolbar__corto input {
  width: 5.5rem;
}

.sla-toolbar__resumen strong {
  display: block;
  font-size: 0.86rem;
  color: var(--color-primario-fuerte);
  padding-top: 0.45rem;
}

.sla-toolbar__resumen small {
  display: block;
  font-size: 0.7rem;
  color: var(--color-texto-suave);
}

.sla-toolbar__acciones {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.sla-toolbar__acciones .boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

/* Linea de resumen bajo los filtros: los dos numeros y como se calcularon. */
.sla-resumen-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.2rem;
  font-size: 0.8rem;
  color: var(--color-texto-suave);
}

.sla-resumen-linea strong {
  color: var(--color-primario-fuerte);
  font-weight: 800;
}

/* Colores del semaforo, unicos para toda la pagina. */
.sla-sem--verde { color: #16a34a; }
.sla-sem--ambar { color: #d97706; }
.sla-sem--rojo { color: #dc2626; }
.sla-sem--neutro { color: #94a3b8; }

.sla-sem-valor {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sla-sem-dot {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.12);
  background: currentColor;
  flex: none;
}

.sla-sem-dot.sla-sem--verde { background: #16a34a; }
.sla-sem-dot.sla-sem--ambar { background: #f59e0b; }
.sla-sem-dot.sla-sem--rojo { background: #dc2626; }
.sla-sem-dot.sla-sem--neutro { background: #cbd5e1; }

/* Grilla de paneles: 12 columnas; cada panel decide cuantas ocupa. */
.sla-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.sla-widget {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--color-superficie);
  border: 1px solid rgba(196, 198, 207, 0.28);
  min-width: 0;
}

.sla-widget--half { grid-column: span 6; }
.sla-widget--third { grid-column: span 4; }

.sla-widget__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.sla-widget__titulo {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.sla-widget__titulo > .material-symbols-outlined {
  font-size: 1.3rem;
  color: var(--color-primario);
  margin-top: 0.05rem;
}

.sla-widget__titulo h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primario-fuerte);
}

.sla-widget__titulo p {
  margin: 0.15rem 0 0;
  font-size: 0.74rem;
  color: var(--color-texto-suave);
}

.sla-widget__filtros {
  font-style: italic;
}

/* Herramientas del panel: aparecen al pasar el mouse para no ensuciar la lectura. */
.sla-widget__tools {
  display: flex;
  gap: 0.15rem;
  opacity: 0.35;
  transition: opacity 0.15s ease;
  flex: none;
}

.sla-widget:hover .sla-widget__tools {
  opacity: 1;
}

.sla-widget__tools button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-texto-suave);
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sla-widget__tools button:hover {
  color: var(--color-primario-fuerte);
  border-color: rgba(196, 198, 207, 0.4);
  background: rgba(255, 255, 255, 0.7);
}

.sla-widget__tools button.sla-widget__tool--alerta:hover {
  color: #93000a;
}

.sla-widget__tools .material-symbols-outlined {
  font-size: 1.05rem;
}

.sla-widget__nota {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
  font-style: italic;
}

/* Tarjetas KPI: el numero grande con su semaforo a la izquierda y la variacion abajo. */
.sla-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}

.sla-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  border-left-width: 5px;
  border-left-color: #cbd5e1;
  background: rgba(255, 255, 255, 0.7);
}

.sla-kpi.sla-sem--verde { border-left-color: #16a34a; color: inherit; }
.sla-kpi.sla-sem--ambar { border-left-color: #f59e0b; color: inherit; }
.sla-kpi.sla-sem--rojo { border-left-color: #dc2626; color: inherit; }
.sla-kpi.sla-sem--neutro { border-left-color: #94a3b8; color: inherit; }

.sla-kpi__label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.sla-kpi__valor {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primario-fuerte);
  font-variant-numeric: tabular-nums;
}

.sla-kpi.sla-sem--verde .sla-kpi__valor { color: #15803d; }
.sla-kpi.sla-sem--ambar .sla-kpi__valor { color: #b45309; }
.sla-kpi.sla-sem--rojo .sla-kpi__valor { color: #b91c1c; }

.sla-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--color-texto-suave);
}

.sla-kpi__delta .material-symbols-outlined {
  font-size: 0.95rem;
}

.sla-kpi__delta--bien { color: #15803d; }
.sla-kpi__delta--mal { color: #b91c1c; }

/* Tabla pivote: filas de grupo en negrita, hojas indentadas, semaforo al final. */
.sla-pivot-wrap,
.sla-datos-wrap {
  max-height: 34rem;
  overflow: auto;
}

.sla-pivot th,
.sla-datos th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-superficie);
}

.sla-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sla-num--ok { color: #15803d; }
.sla-num--mal { color: #b91c1c; }

.sla-pivot__sla {
  min-width: 6.5rem;
}

.sla-pivot__fila--grupo td {
  font-weight: 700;
  background: rgba(241, 245, 249, 0.6);
}

.sla-pivot__fila--nivel-0.sla-pivot__fila--grupo td {
  background: rgba(226, 232, 240, 0.55);
}

.sla-pivot__etiqueta {
  white-space: nowrap;
}

.sla-pivot__toggle {
  border: none;
  background: transparent;
  color: var(--color-primario);
  cursor: pointer;
  padding: 0;
  margin-right: 0.3rem;
  vertical-align: middle;
  display: inline-flex;
}

.sla-pivot__toggle .material-symbols-outlined {
  font-size: 1.05rem;
}

.sla-pivot__hoja {
  display: inline-block;
  width: 1.05rem;
  margin-right: 0.3rem;
}

.sla-pivot__total td {
  font-weight: 800;
  border-top: 2px solid rgba(4, 30, 66, 0.35);
  background: rgba(226, 232, 240, 0.7);
}

/* Graficos SVG: escalan con el ancho del panel. */
.sla-chart {
  width: 100%;
  overflow: hidden;
}

.sla-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Selector del tipo de panel en el editor. */
.sla-modal-panel {
  max-width: 60rem;
  width: min(60rem, 96vw);
}

.sla-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.4rem;
}

.sla-tipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.4rem;
  border: 1px solid rgba(196, 198, 207, 0.35);
  background: var(--color-superficie);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
  text-align: center;
}

.sla-tipo .material-symbols-outlined {
  font-size: 1.4rem;
}

.sla-tipo:hover {
  color: var(--color-primario-fuerte);
  border-color: rgba(4, 30, 66, 0.45);
}

.sla-tipo--activo {
  color: #ffffff;
  background: var(--color-primario);
  border-color: var(--color-primario);
}

.sla-panel-filtros {
  margin-top: 0.4rem;
}

/* Programaciones de envio. */
.sla-programaciones {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 60vh;
  overflow: auto;
}

.sla-programacion {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(196, 198, 207, 0.28);
  background: rgba(255, 255, 255, 0.7);
}

.sla-programacion--pausada {
  opacity: 0.7;
}

.sla-programacion__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  min-width: 0;
}

.sla-programacion__info strong {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--color-primario-fuerte);
}

.sla-programacion__error {
  color: #b91c1c;
  font-size: 0.74rem;
}

.sla-dias {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.sla-dia {
  border: 1px solid rgba(196, 198, 207, 0.35);
  background: var(--color-superficie);
  padding: 0.4rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.sla-dia--on {
  color: #ffffff;
  background: var(--color-primario);
  border-color: var(--color-primario);
}

@media (max-width: 1100px) {
  .sla-widget--half,
  .sla-widget--third {
    grid-column: span 12;
  }

  .sla-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Devolucion al hub desde el panel de anulacion: la casilla dice si la carga ya salio con un conductor y
   tiene que pasar por Recepcion de devoluciones al volver. */
.anulacion-retorno {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.anulacion-retorno input {
  margin-top: 0.2rem;
}

.anulacion-retorno strong,
.anulacion-retorno small {
  display: block;
}

.anulacion-retorno small {
  margin-top: 0.15rem;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
}

/* Confirmacion en la ficha de ruta despues de devolver o anular: la fila desaparece de la tabla, y sin
   este aviso no queda claro si se hizo o si fallo. */
.despacho-aviso-ok {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid #1f7a4d;
  border-radius: 6px;
  background: rgba(31, 122, 77, 0.08);
}

/* Marca en Recepcion de devoluciones de un bulto que vuelve por asignacion erronea, no por incidente. */
.retorno-chip {
  margin-left: 0.4rem;
  font-size: 0.68rem;
  vertical-align: middle;
}

/* Mantenedor de usuarios: clientes para los que el operador crea retiros inhouse. */
.usuario-inhouse__seleccion,
.usuario-inhouse__sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.usuario-inhouse__sugerencias {
  margin-top: 0.5rem;
}

.usuario-inhouse__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.usuario-inhouse__chip .material-symbols-outlined {
  font-size: 0.95rem;
}

.usuario-inhouse__grilla {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-texto-secundario);
}

/* Origen del retiro (componente PickupOriginChip). */
.estado-chip--origen-movil {
  background: rgba(42, 82, 152, 0.14);
  color: #2a5298;
}

.estado-chip--origen-inhouse {
  background: rgba(109, 40, 217, 0.12);
  color: #5b21b6;
}

.pickup-origin-chip__vacio {
  color: var(--color-texto-suave);
}

.pickup-origin-celda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.pickup-origin-celda small {
  color: var(--color-texto-secundario);
  font-size: 0.74rem;
}

/* Retiro inhouse (/app/pickups/inhouse/new): pistoleo en la bodega del cliente. */
.retiro-inhouse-bloqueo {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 44rem;
  border-left: 4px solid #b45309;
}

.retiro-inhouse-bloqueo > .material-symbols-outlined {
  font-size: 2rem;
  color: #b45309;
}

.retiro-inhouse-bloqueo h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.retiro-inhouse-bloqueo p {
  margin: 0;
  color: var(--color-texto-secundario);
}

.retiro-inhouse__cliente-fijo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(26, 54, 93, 0.18);
  border-radius: 0.5rem;
  background: rgba(42, 82, 152, 0.08);
}

.retiro-inhouse__cliente-fijo .material-symbols-outlined {
  color: var(--color-primario);
}

/* Resultado de la ultima lectura: grande, para leerlo de reojo con la caja en la mano. */
.retiro-inhouse__ultima {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 5px solid transparent;
  border-radius: 0.5rem;
}

.retiro-inhouse__ultima > .material-symbols-outlined {
  font-size: 2rem;
}

.retiro-inhouse__ultima strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.retiro-inhouse__ultima p {
  margin: 0.1rem 0 0;
  font-size: 0.85rem;
}

.retiro-inhouse__ultima--ok {
  border-left-color: #1f7a4d;
  background: rgba(31, 122, 77, 0.1);
  color: #14532d;
}

.retiro-inhouse__ultima--warn {
  border-left-color: #b45309;
  background: rgba(180, 83, 9, 0.1);
  color: #7c2d12;
}

.retiro-inhouse__ultima--error {
  border-left-color: #b91c1c;
  background: rgba(185, 28, 28, 0.1);
  color: #7f1d1d;
}

.retiro-inhouse__ultima--info {
  border-left-color: #2a5298;
  background: rgba(42, 82, 152, 0.1);
  color: #1e3a5f;
}

.retiro-inhouse__alerta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.4rem;
  background: rgba(185, 28, 28, 0.08);
  color: #7f1d1d;
  font-weight: 600;
  font-size: 0.85rem;
}

.retiro-inhouse__fila-bloqueada td {
  background: rgba(185, 28, 28, 0.06);
}

.retiro-inhouse__fila-bloqueada .estado-chip {
  margin-left: 0.4rem;
  font-size: 0.68rem;
  vertical-align: middle;
}

.retiro-inhouse__lecturas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 22rem;
  overflow-y: auto;
}

.retiro-inhouse__lectura {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  background: var(--color-superficie);
}

.retiro-inhouse__lectura div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.retiro-inhouse__lectura div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-texto-secundario);
}

.retiro-inhouse__lectura time {
  color: var(--color-texto-suave);
  font-variant-numeric: tabular-nums;
}

.retiro-inhouse__lectura--ok .material-symbols-outlined { color: #1f7a4d; }
.retiro-inhouse__lectura--warn .material-symbols-outlined { color: #b45309; }
.retiro-inhouse__lectura--error .material-symbols-outlined { color: #b91c1c; }
.retiro-inhouse__lectura--info .material-symbols-outlined { color: #2a5298; }

.retiro-inhouse__error-modal {
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.4rem;
  background: rgba(185, 28, 28, 0.08);
}

/* ============================================================
   Panel de facturacion (/app/finance)
   Mismo esqueleto que reportes a medida (barra de consulta,
   chips de filtro, KPIs, grilla con resumen y Excel) mas dos
   filas de indicadores y una grilla de graficos SVG del servidor.
   Paleta de graficos validada (contraste y daltonismo):
   ventas #2b74b8, cobrado #1f9e89, alerta #e28f2c, vencido #d63a45,
   contexto #b8bcc4, rampa ordinal #7fabc7 -> #275672.
   ============================================================ */
.finance-page {
  gap: 1rem;
}

.finance-filters__nota {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: 0.66rem;
  color: var(--color-texto-suave);
  cursor: help;
}

.finance-filters__nota .material-symbols-outlined {
  font-size: 0.95rem;
}

/* Bloques de indicadores: un titulo corto y la fila de seis cajas del patron de reportes. */
.finance-kpi-block {
  display: grid;
  gap: 0.45rem;
}

.finance-kpi-block__titulo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primario-fuerte);
}

.finance-kpi-block__titulo .material-symbols-outlined {
  font-size: 1rem;
  align-self: center;
}

.finance-kpi-block__titulo small {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-texto-suave);
}

.finance-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.finance-kpi {
  border-left: 4px solid rgba(4, 30, 66, 0.28);
}

.finance-kpi--principal { border-left-color: #2b74b8; }
.finance-kpi--ok { border-left-color: #1f9e89; }
.finance-kpi--warn { border-left-color: #e28f2c; }
.finance-kpi--bad { border-left-color: #d63a45; }

.finance-kpis strong {
  font-size: 1.32rem;
  white-space: nowrap;
}

.finance-kpis article > small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--color-texto-suave);
  line-height: 1.3;
}

.finance-kpi__delta--bien { color: #006300; }
.finance-kpi__delta--mal { color: #b3261e; }

/* Grilla de graficos: 12 columnas; el diario ocupa ocho, el resto se reparte en mitades. */
.finance-charts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.finance-card {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.9rem 1.1rem 0.8rem;
  transition: opacity 0.2s ease;
}

.finance-card--wide {
  grid-column: span 8;
}

.finance-card--wide + .finance-card {
  grid-column: span 4;
}

.finance-card--cargando {
  opacity: 0.55;
}

.finance-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.finance-card__head h2 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.finance-card__head p {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
}

.finance-card__toggle {
  white-space: nowrap;
}

.finance-card__body {
  flex: 1;
  min-width: 0;
}

.finance-card__vacio {
  margin: 2rem 0;
  text-align: center;
  font-size: 0.8rem;
}

.finance-card__tabla {
  width: 100%;
}

.finance-chart {
  width: 100%;
  overflow: visible;
}

.finance-chart svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

.finance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0 0 0.35rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}

.finance-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.finance-legend__swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.6rem;
  background: var(--swatch);
  border-radius: 2px;
}

.finance-legend__swatch--line {
  height: 2px;
  border-radius: 1px;
}

.finance-svg .finance-axis {
  font-size: 11px;
  fill: #898781;
}

.finance-svg .finance-axis--row {
  fill: var(--color-texto);
  font-weight: 600;
}

.finance-svg .finance-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-texto);
  font-variant-numeric: tabular-nums;
}

.finance-svg .finance-mark {
  cursor: default;
  outline: none;
  transition: opacity 0.12s ease;
}

.finance-svg .finance-mark--hover,
.finance-svg .finance-mark:focus-visible {
  opacity: 0.78;
  stroke: var(--color-primario-fuerte);
  stroke-width: 1.5;
}

.finance-svg .finance-dot.finance-mark--hover,
.finance-svg .finance-dot:focus-visible {
  opacity: 1;
  r: 5;
}

/* Tooltip flotante (finance-charts.js): valor primero, contexto despues. */
.finance-tooltip {
  position: fixed;
  z-index: 2000;
  display: grid;
  gap: 0.15rem;
  max-width: 18rem;
  padding: 0.5rem 0.65rem;
  background: #1c2434;
  color: #ffffff;
  border-radius: 0.35rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  font-size: 0.74rem;
  line-height: 1.3;
  pointer-events: none;
}

/* display: grid le gana al atributo hidden del navegador: se repone a mano. */
.finance-tooltip[hidden] {
  display: none;
}

.finance-tooltip strong {
  font-size: 0.8rem;
}

.finance-tooltip span {
  color: rgba(255, 255, 255, 0.82);
}

/* Grilla de facturas: filas clicables y saldos vencidos en rojo. */
.finance-layout {
  grid-template-columns: minmax(0, 1fr);
}

.finance-row {
  cursor: pointer;
}

.finance-row:hover td {
  background: rgba(4, 30, 66, 0.06);
}

.finance-row__accion {
  width: 2rem;
  color: var(--color-texto-suave);
}

.finance-row__accion .material-symbols-outlined {
  font-size: 1.1rem;
  vertical-align: middle;
}

.finance-overdue {
  color: #b3261e;
  font-weight: 700;
}

/* Detalle de factura: mas ancho que el modal estandar porque muestra montos y pagos lado a lado. */
.finance-modal {
  width: min(66rem, 100%);
}

.finance-modal__columna .operaciones-tabla {
  width: 100%;
}

.finance-modal__columna .operaciones-tabla td,
.finance-modal__columna .operaciones-tabla th {
  white-space: normal;
  overflow-wrap: anywhere;
}

.finance-modal__estado {
  margin-left: 0.6rem;
  vertical-align: middle;
}

.finance-modal__cliente {
  margin-top: 0.25rem;
}

.finance-modal__meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.75rem 0;
}

.finance-modal__meta strong {
  font-size: 0.98rem;
}

.finance-modal__meta strong small {
  margin-left: 0.25rem;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--color-texto-suave);
}

.finance-modal__cuerpo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.finance-modal__columna h3 {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-texto-suave);
}

.finance-modal__columna h3:first-child {
  margin-top: 0;
}

.finance-amounts td {
  padding: 0.35rem 0.5rem;
}

.finance-amounts__total td {
  border-top: 1px solid rgba(26, 54, 93, 0.16);
  font-weight: 800;
}

.finance-amounts__saldo td {
  font-weight: 800;
  background: rgba(245, 247, 250, 0.7);
}

.finance-pay-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-pay-form__notas {
  grid-column: span 2;
}

.finance-pay-form__acciones {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.6rem;
}

.finance-pay-form__acciones .boton-principal {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 1400px) {
  .finance-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .finance-card,
  .finance-card--wide,
  .finance-card--wide + .finance-card {
    grid-column: span 12;
  }

  .finance-modal__cuerpo,
  .finance-modal__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .finance-kpis,
  .finance-modal__cuerpo,
  .finance-modal__meta,
  .finance-pay-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-pay-form__notas {
    grid-column: span 1;
  }
}