@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap');
/* =========================================================
   LOGISTIFY — Estilos personalizados
   ========================================================= */

/* ---------- Tipografía Lato (carga local) ---------- */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ---------- Variables CSS de marca ---------- */
:root {
  --color-dark:     #26282D;   /* Pantone 433 Dark — títulos y subtítulos */
  --color-carbon:   #37404A;   /* Pantone 432 Carbón — cuerpo de texto */
  --color-silver:   #7C878E;
  --color-cloud:    #E1DFDE;
  --color-cloud-light:    #e1dfde63;   /* Cool Gray 1 20% — fondo de recuadros */
  --color-yellow:   #F5B82E;
  --color-green:    #4CAF50;
  --color-red:      #E53935;
  --color-white:    #FFFFFF;
  --color-bg-light: #F5F5F5;
}

/* ---------- Base ---------- */
html, body {
  font-family: 'Lato', system-ui, -apple-system, sans-serif;
  color: var(--color-dark);
  font-size: 15px;
  line-height: 1.5;
  background: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--color-dark);
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* =========================================================
   HEADER / NAVBAR
   ========================================================= */
.site-header {
  background: var(--color-dark);
  position: relative;
  /* overflow: hidden eliminado — permite que la línea-punteada se extienda fuera del borde */
  z-index: 10;
}

.site-header .navbar {
  padding-top: 1.85rem;
  padding-bottom: 1.85rem;
  position: relative;
  z-index: 2;
}

.site-header .navbar-brand img {
  height: 38px;
  width: auto;
  display: block;
}

.site-header .nav-link {
  color: var(--color-white) !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem !important;
  transition: color 0.18s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--color-yellow) !important;
}

.site-header .social-link {
  color: var(--color-white);
  font-size: 17px;
  margin: 0 10px;
  transition: color 0.18s ease;
  display: inline-flex;
}
.site-header .social-link:hover {
  color: var(--color-yellow);
}

.btn-login {
  background: var(--color-yellow);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: none;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.btn-login:hover {
  filter: brightness(1.06);
  color: var(--color-dark);
}

/* Decoración: pin amarillo + línea punteada — esquina superior derecha del header */
.header-deco {
  position: absolute;
  top: 0;
  right: 0;
  height: 140px;
  width: auto;
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
  transform: scaleY(-1);
  transform-origin: top right;
}

.navbar-toggler {
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.3rem 0.55rem;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* =========================================================
   HERO — Sección de rastreo (landing)
   ========================================================= */
.hero {
  position: relative;
  min-height: 480px;
background-image: linear-gradient(rgba(31, 42, 55, 0), rgba(31,42,55,0.55)), url('../img/content/hero-banner.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 4rem 1rem;
}

.hero__title {
  color: var(--color-white);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.75rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

.tracking-form {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.tracking-form .form-control {
  background: var(--color-white);
  border: none;
  padding: 0.85rem 1.15rem;
  font-size: 15px;
  border-radius: 6px 0 0 6px;
}
.tracking-form .form-control:focus {
  box-shadow: none;
  outline: 2px solid var(--color-yellow);
  outline-offset: -2px;
}

.tracking-form .btn-track {
  background: var(--color-dark);
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 1.6rem;
  border-radius: 0 6px 6px 0;
  border: none;
  transition: background 0.18s ease;
}
.tracking-form .btn-track:hover {
  background: var(--color-carbon);
  color: var(--color-white);
}

/* Bloque CTA corporativo */
.hero__corp-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.hero__corp-text {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}
.btn-corp {
  background: var(--color-yellow);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: none;
  transition: filter 0.18s ease;
  white-space: nowrap;
}
.btn-corp:hover {
  filter: brightness(1.08);
  color: var(--color-dark);
}
@media (max-width: 575.98px) {
  .hero__corp-wrap { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
  .hero { min-height: 380px; padding: 3rem 1rem; }
  .tracking-form .form-control,
  .tracking-form .btn-track { font-size: 14px; }
}

/* =========================================================
   SECCIÓN "MEJORA CONTINUA"
   ========================================================= */
.section-mejora {
  background: var(--color-cloud);
  padding: 5rem 0;
}

.section-mejora h2 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  max-width: 600px;
}

.section-mejora .intro {
  color: var(--color-carbon);
  font-size: 18px;
  max-width: 640px;
  margin-bottom: 3rem;
}

.feature {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.feature__pin {
  color: var(--color-yellow);
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}

.feature__title {
  color: var(--color-dark);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 0.35rem 0;
}

.feature__text {
  color: var(--color-carbon);
  font-size: 16px;
  margin: 0;
  line-height: 1.55;
}

/* =========================================================
   SECCIÓN "COBERTURA"
   ========================================================= */
.section-cobertura {
  background: var(--color-white);
  padding: 4rem 0 5rem;
}

.section-cobertura h2 {
  text-transform: uppercase;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-bottom: 10.5rem;
  line-height: 1.2;
}

.section-cobertura .lede {
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-carbon);
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
  font-size: 18px;
}

.section-cobertura .body-text {
  color: var(--color-carbon);
  font-size: 16px;
  max-width: 460px;
}

.section-cobertura .map-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-cobertura .map-wrap img {
  width: 100%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-dark);
  color: var(--color-white);
  padding: 3.5rem 0 1.5rem;
}

.site-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .footer-links li { margin-bottom: 0.65rem; }
.site-footer .footer-links a {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}
.site-footer .footer-links a:hover { color: var(--color-yellow); }

.site-footer .iso-seal {
  display: flex;
  justify-content: center;
}
.site-footer .iso-seal img {
  height: 80px;
  width: auto;
}

.site-footer .social-row {
  display: flex;
  gap: 0.85rem;
  justify-content: flex-end;
  align-items: center;
}
.site-footer .social-row a {
  color: var(--color-white);
  font-size: 22px;
  transition: color 0.18s ease;
}
.site-footer .social-row a:hover { color: var(--color-yellow); }

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  text-align: center;
}

@media (max-width: 767.98px) {
  .site-footer .social-row { justify-content: center; margin-top: 1rem; }
  .site-footer .footer-links { text-align: center; margin-bottom: 1.5rem; }
  .site-footer .iso-seal { margin-bottom: 1.5rem; }
}

/* =========================================================
   PÁGINA RASTREO — Barra de tracking persistente
   ========================================================= */
.tracking-bar {
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(31,42,55,0.08);
  padding: 1.1rem 0;
  position: relative;
  z-index: 5;
}
.tracking-bar .tracking-form .form-control {
  background: var(--color-white);
  border: 1px solid #e5e7eb;
}
.tracking-bar .tracking-form .btn-track {
  background: var(--color-dark);
  color: var(--color-white);
}

/* ---------- Encabezado guía/referencia ---------- */
.guia-header {
  padding: 2.25rem 0 1rem;
}
.guia-header .label {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: none;
  margin-right: 0.5rem;
}
.guia-header .valor-guia {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  
}
.guia-header .ref-valor {
  font-size: 25px;
  font-weight: 600;
  color: var(--color-carbon);
}

/* =========================================================
   TIMELINE — Pasos en forma de flecha/chevron
   ========================================================= */
.timeline {
  display: flex;
  width: 80%;
  margin: 1.5rem 0 3rem;
  align-items: stretch;
  gap: 3;
}

.timeline__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Superponer cada eslabón sobre el anterior para encadenarlos:
   la punta del chevron entra en la muesca del siguiente */
.timeline__step:not(:first-child) {
  margin-left: -22px;
}
/* Orden de solape: los pasos de la izquierda quedan por encima */
.timeline__step { z-index: 1; }
.timeline__step:nth-child(1) { z-index: 6; }
.timeline__step:nth-child(2) { z-index: 5; }
.timeline__step:nth-child(3) { z-index: 4; }
.timeline__step:nth-child(4) { z-index: 3; }
.timeline__step:nth-child(5) { z-index: 2; }
.timeline__step:nth-child(6) { z-index: 1; }

/* La flecha es un contenedor con clip-path en chevron */
.timeline__arrow {
  position: relative;
  width: 100%;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 0.5rem 1.5rem 0.5rem 0.5rem; */
  /* Forma de chevron apuntando a la derecha */
  clip-path: polygon(
    0 0,
    calc(100% - 26px) 0,
    100% 50%,
    calc(100% - 26px) 100%,
    0 100%,
    26px 50%
  );
  transition: background 0.25s ease;
}

/* Primer paso: sin muesca izquierda */
.timeline__step:first-child .timeline__arrow {
  clip-path: polygon(
    0 0,
    calc(100% - 26px) 0,
    100% 50%,
    calc(100% - 26px) 100%,
    0 100%
  );
}


.timeline__step:last-child .timeline__arrow {
  clip-path: polygon(
    0 0,
    calc(100% - 26px) 0,
    100% 50%,
    calc(100% - 26px) 100%,
    0 100%,
    26px 50%
  );
}

/* Icono dentro de la flecha — tamaño uniforme en todos los pasos */
.timeline__icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
}
.timeline__step:first-child .timeline__icon {
  margin-left: 0;
}
.timeline__icon img,
.timeline__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Label debajo */
.timeline__label {
  margin-top: 0.65rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-carbon);
  line-height: 1.2;
  padding: 0 0.25rem;
}

/* Estados visuales */
.timeline__step.step-completed .timeline__arrow {
  background: var(--color-dark);
}
.timeline__step.step-completed .timeline__icon {
  color: var(--color-white);
}

.timeline__step.step-active .timeline__arrow {
  background: var(--color-yellow);
}
.timeline__step.step-active .timeline__icon {
  color: var(--color-dark);
}

/* Paso "Entregado" activo: VERDE con icono blanco */
.timeline__step--entregado.step-active .timeline__arrow {
  background: var(--color-green);
}
.timeline__step--entregado.step-active .timeline__icon {
  color: var(--color-white);
}

.timeline__step.step-pending .timeline__arrow {
  background: var(--color-cloud);
}
.timeline__step.step-pending .timeline__icon {
  color: var(--color-silver);
}

.timeline__step.step-incident .timeline__arrow {
  background: var(--color-red);
}
.timeline__step.step-incident .timeline__icon {
  color: var(--color-white);
}

/* Monograma flotando sobre el paso activo */
.timeline__monogram {
position: absolute;
  top: -50px;
  left: 87%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  display: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  z-index: 100;
}
.timeline__step.step-active .timeline__monogram { display: block; }

/* Icono de incidencia (PNG con fondo negro -> filter para volverlo blanco) */
.timeline__icon--incidencia {
  filter: brightness(0) invert(1);
}

/* Responsive móvil: mantener la línea COMPLETA en horizontal,
   reduciendo tamaños para que quepa entera en pantalla */
@media (max-width: 575.98px) {
  .timeline {
    flex-direction: row;
    gap: 0;
    margin: 1rem 0 2rem;
  }
  .timeline__step:not(:first-child) {
    margin-left: -10px;
  }
  .timeline__arrow {
    min-height: 48px;
    clip-path: polygon(
      0 0,
      calc(100% - 12px) 0,
      100% 50%,
      calc(100% - 12px) 100%,
      0 100%,
      12px 50%
    );
  }
  .timeline__step:first-child .timeline__arrow {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  }
  .timeline__icon {
    width: 20px;
    height: 20px;
    margin-left: 8px;
  }
  .timeline__step:first-child .timeline__icon { margin-left: 0; }
  .timeline__label {
    font-size: 7.5px;
    margin-top: 0.4rem;
    padding: 0 1px;
    letter-spacing: 0;
  }
  .timeline__monogram {
    width: 44px;
    height: 44px;
    top: -28px;
    left: 60%;
  }
}

/* Tablet: reducir tamaño de iconos y solape */
@media (min-width: 576px) and (max-width: 991.98px) {
  .timeline__step:not(:first-child) { margin-left: -16px; }
  .timeline__icon { width: 32px; height: 32px; margin-left: 12px; }
  .timeline__label { font-size: 11px; }
  .timeline__arrow { min-height: 64px; }
}

/* =========================================================
   DETALLES DEL ENVÍO — Tarjeta de 3 columnas
   ========================================================= */
.detalles-section {
  margin: 2rem 0 3rem;
}

.detalle-card {
  background: var(--color-white);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detalle-card__head {
  background: var(--color-bg-light);
  padding: 0.75rem 1.15rem;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  text-transform: none;
  border-bottom: 1px solid #E5E7EB;
}

.detalle-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Columna izquierda: info principal */
.envio-info {
  padding: 0;
}
.envio-info .estatus-actual {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 1.25rem;
}
.envio-info .fecha-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.envio-info .fecha-grande {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark);
}
.envio-info .fecha-grande i { color: var(--color-yellow); font-size: 18px; }
.envio-info .hora {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-carbon);
}
.envio-info .hora i { color: var(--color-dark); }

.envio-info .lbl {
  display: block;
  color: var(--color-dark);   
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 0.15rem;
}
.envio-info .val {
  color: var(--color-carbon);
  font-size: 16px;
  margin-bottom: 0.9rem;
}

/* Evidencias */
.evidencias-carousel {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.evidencias-carousel .carousel,
.evidencias-carousel .carousel-inner {
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg-light);
}
.evidencias-carousel .carousel-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.evidencias-carousel .carousel-control-prev-icon,
.evidencias-carousel .carousel-control-next-icon {
  filter: invert(1) drop-shadow(0 0 3px rgba(0,0,0,0.6));
}
.evidencias-carousel .carousel-indicators [data-bs-target] {
  background-color: var(--color-yellow);
}

.evidencias-empty {
  background: var(--color-bg-light);
  border: 1px dashed #d0d3d8;
  border-radius: 6px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-silver);
  font-size: 13px;
  font-style: italic;
}

.btn-download {
  margin-top: 0.9rem;
  background: var(--color-carbon);
  color: var(--color-white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  transition: filter 0.18s ease, background 0.18s ease;
}
.btn-download:hover {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-download:disabled {
  background: var(--color-cloud);
  color: var(--color-silver);
  cursor: not-allowed;
  opacity: 1;
}

/* Firma electrónica */
.firma-box {
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: var(--color-white);
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin-bottom: 1rem;
}
.firma-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.firma-empty {
  background: var(--color-bg-light);
  border: 1px dashed #d0d3d8;
  border-radius: 6px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-silver);
  font-size: 13px;
  font-style: italic;
  margin-bottom: 1rem;
}
.recibido-por {
  font-size: 14px;
  color: var(--color-dark);
}
.recibido-por .lbl {
  font-weight: 700;
}

/* =========================================================
   SECCIONES TABLA — Rastreo del envío + Detalle pedido
   ========================================================= */
.section-title {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  margin-bottom: 1.5rem;
  text-transform: none;
}

.rastreo-table {
  width: 100%;
  font-size: 16px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-cloud-light);
  border-radius: 8px;
  overflow: hidden;
}
.rastreo-table thead th {
  background: var(--color-cloud);
  color: var(--color-dark);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid #cfcdcb;
}
.rastreo-table tbody td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #d3d1d0;
  color: var(--color-carbon);
  vertical-align: middle;
}
.rastreo-table tbody tr:last-child td { border-bottom: none; }
.rastreo-table .event-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-silver);
  margin-right: 0.65rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.rastreo-table tr.is-current .event-dot { background: var(--color-yellow); }
.rastreo-table tr.is-delivered .event-dot { background: var(--color-green); }
.rastreo-table tr.is-incident .event-dot { background: var(--color-red); }
.rastreo-table .fecha-cell {
  display: flex;
  align-items: center;
  color: var(--color-dark);
  white-space: nowrap;
}
.rastreo-table .estatus-cell {

  color: var(--color-dark);
}

/* Detalle del pedido */
.detalle-pedido-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
  align-items: start;
  margin-bottom: 50px;
}
/* En monitor grande, el bloque de 2 columnas ocupa solo el 50% del ancho */
@media (min-width: 992px) {
  .detalle-pedido-grid {
    width: 50%;
  }
}
.detalle-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
@media (max-width: 767.98px) {
  .detalle-pedido-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* Detalle pedido — estructura con label en fondo gris y valor debajo sin fondo
 */
.field-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
}
.field-row .field-label {
  background: var(--color-cloud);   /* Fondo gris claro solo en el label */
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  padding: 0.55rem 1rem;
  text-transform: none;             /* Sin uppercase*/
  letter-spacing: 0;
  border-bottom: 1px solid #E5E7EB;
}
.field-row .field-value {
  font-size: 16px;
  color: var(--color-dark);
  padding: 0.55rem 1rem;
  background: var(--color-white);
  word-break: break-word;
  min-height: 2.2rem;
}
.field-row .field-value.is-empty {
  color: var(--color-silver);
  font-style: italic;
}

/* Variante sin encabezado (columna info del envío en rastreo.html) */
.detalle-card--no-head .detalle-card__body {
  padding-top: 1.5rem;
}
/* .rastreo-page { padding-bottom: 3rem; } */

@media (max-width: 991.98px) {
  .detalle-card { margin-bottom: 1rem; }
}


/* =========================================================
   DASHBOARD — Reporte de seguimiento
   (página dashboard.php)
   ========================================================= */

/* ---------- Encabezado del reporte ---------- */
.dashboard-page .report-head {
  padding: 2rem 0 0.5rem;
}
.report-title {
  font-size: 30px;
  font-weight: 900;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  margin-bottom: 0.75rem;
}
.client-badge {
  display: inline-block;
  background: var(--color-green);
  color: var(--color-white);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  padding: 0.35rem 1.5rem;
  border-radius: 4px;
}
.report-user {
  text-align: right;
  font-size: 13px;
  color: var(--color-carbon);
  line-height: 1.4;
}
/* Placeholder del logo de cliente (vendrá vía API) */
.client-logo-ph {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-cloud);
  color: var(--color-silver);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  margin-left: auto;
  border: 1px solid #cfcdcb;
}

/* ---------- Tarjetas de panel del dashboard ---------- */
.dash-card {
  background: var(--color-white);
  border: 1px solid #e8e6e5;
  border-radius: 10px;
  padding: 1.25rem;
  height: 100%;
}

/* ---------- Fila superior: 4 componentes con wrap ----------
   En pantalla grande caben los 4 en fila. Al reducir el ancho,
   van cayendo en columna uno por uno (flex-wrap). */
.dash-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;
}
.dash-top-item { min-width: 0; }
/* Gráficos: más anchos. Leyenda y filtros: más angostos (como pediste) */
.dash-top-item--chart   { flex: 1 1 300px; }
.dash-top-item--legend  { flex: 1 1 230px; max-width: 300px; }
.dash-top-item--filters { flex: 1 1 240px; max-width: 320px; }
/* En pantallas medianas/chicas, cada item ocupa el 100% (uno por columna) */
@media (max-width: 991.98px) {
  .dash-top-item,
  .dash-top-item--chart,
  .dash-top-item--legend,
  .dash-top-item--filters {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.dash-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-align: center;
  margin-bottom: 1rem;
}

/* ---------- Leyenda de estatus (tarjeta central de totales) ---------- */
.status-legend {
  font-size: 14px;
}
.status-legend .legend-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-dark);
  color: var(--color-white);
  font-weight: 700;
  padding: 0.5rem 0.85rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.status-legend .legend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
}
.status-legend .legend-row .legend-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-carbon);
}
.status-legend .legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.status-legend .legend-val { font-weight: 700; color: var(--color-dark); }
.legend-incident-link {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--color-carbon);
  margin-top: 0.5rem;
  text-decoration: underline;
  cursor: pointer;
}
.legend-incident-link .bi { color: var(--color-red); }

/* ---------- Panel de filtros ---------- */
.filtros-panel {
  background: var(--color-cloud);
  border-radius: 10px;
  padding: 1.1rem;
}
.filtros-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.filtros-panel__head .ttl {
  background: var(--color-dark);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
  padding: 0.3rem 0.9rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.filtros-panel__clear {
  font-size: 12px;
  color: var(--color-carbon);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}
.filtro-item { border-bottom: 1px solid #d3d1d0; }
.filtro-item:last-child { border-bottom: none; }
.filtro-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0.55rem 0.25rem;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  cursor: pointer;
  text-align: left;
}
.filtro-toggle .chev { transition: transform 0.2s ease; font-size: 12px; }
.filtro-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.filtro-body {
  padding: 0 0.25rem 0.6rem 1rem;
  font-size: 13px;
}
.filtro-body label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  color: var(--color-carbon);
  cursor: pointer;
}

/* ---------- TIMELINE MINI (2ª versión, para tablas) ----------
   Reutiliza la estética del timeline grande pero compacto e inline.
   Se usa en columnas "Proceso" de Campañas y Detalle de envíos. */
.timeline-mini {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  min-width: 230px;
}
.timeline-mini__step {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-mini__step:not(:first-child) { margin-left: -8px; }
.timeline-mini__step:nth-child(1) { z-index: 6; }
.timeline-mini__step:nth-child(2) { z-index: 5; }
.timeline-mini__step:nth-child(3) { z-index: 4; }
.timeline-mini__step:nth-child(4) { z-index: 3; }
.timeline-mini__step:nth-child(5) { z-index: 2; }
.timeline-mini__arrow {
  width: 100%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.timeline-mini__step:first-child .timeline-mini__arrow {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
/* Estados de color del mini-timeline (misma lógica que el timeline grande):
   - completed: pasos ya superados -> oscuro
   - delivered: paso "entregado" alcanzado -> verde
   - current:   paso actual (en progreso) -> amarillo
   - pending:   pasos futuros -> gris cloud */
.timeline-mini__step.is-completed .timeline-mini__arrow { background: var(--color-dark); }
.timeline-mini__step.is-delivered .timeline-mini__arrow { background: var(--color-green); }
.timeline-mini__step.is-current   .timeline-mini__arrow { background: var(--color-yellow); }
.timeline-mini__step.is-pending   .timeline-mini__arrow { background: var(--color-cloud); }
/* Icono: blanco sobre fondos oscuro/verde, gris sobre pendiente, oscuro sobre amarillo */
.timeline-mini__step.is-pending .timeline-mini__icon img { filter: none; opacity: 0.55; }
.timeline-mini__step.is-current .timeline-mini__icon img { filter: brightness(0); }
.timeline-mini__icon {
  width: 18px;
  height: 18px;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-mini__step:first-child .timeline-mini__icon { margin-left: 0; }
.timeline-mini__icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.timeline-mini__num {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-carbon);
  margin-top: 2px;
}

/* ---------- Tablas del dashboard (Campañas / Detalle) ---------- */
.dash-section { margin-top: 2.5rem; }
/* Campañas 2026 ocupa el 75% del ancho en pantalla grande */
@media (min-width: 992px) {
  .dash-section--campanas { width: 75%; }
}
.dash-section__title {
  font-size: 28px;
  font-weight: 900;
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  margin-bottom: 1rem;
}
/* Headers de tabla — !important para ganarle al CSS de DataTables Bootstrap5 */
table.dash-table thead th,
.dash-table thead th {
  background: var(--color-dark) !important;
  color: var(--color-white) !important;
  font-weight: 700;
  font-size: 13px;
  border: none !important;
  vertical-align: middle;
  white-space: nowrap;
}
.dash-table thead th:first-child { border-top-left-radius: 6px; }
.dash-table thead th:last-child { border-top-right-radius: 6px; }
.dash-table tbody td {
  font-size: 13px;
  color: var(--color-carbon);
  vertical-align: middle;
  border-bottom: 1px solid #e8e6e5;
}

/* Botones export (estado deshabilitado/gris como en el PDF) */
.btn-export {
  background: var(--color-cloud);
  color: var(--color-silver);
  border: none;
  font-size: 13px;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-export:enabled { background: var(--color-carbon); color: var(--color-white); cursor: pointer; }
.btn-export:enabled:hover { background: var(--color-dark); }

/* ---------- Modal Incidencias ---------- */
.incidencias-table thead th {
  background: var(--color-red);
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  border: none;
}
.incidencias-table tbody td {
  font-size: 13px;
  color: var(--color-carbon);
  border-bottom: 1px solid #f0d9d8;
}
.modal-title-underline {
  font-size: 26px;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ---------- Responsive dashboard ---------- */
@media (max-width: 991.98px) {
  .filtros-panel { margin-top: 1rem; }
  .report-user { text-align: left; margin-top: 1rem; }
  .client-logo-ph { margin-left: 0; }
}