:root {
  /* Marca Compás Drive (opción A "Confianza", 2026-10): azul marino + turquesa.
     El turquesa lleva texto azul marino encima, nunca blanco (contraste). */
  --rutero-primario: #134074;
  --rutero-primario-rgb: 19, 64, 116;
  --rutero-primario-oscuro: #0B2545;
  --rutero-primario-oscuro-rgb: 11, 37, 69;
  --rutero-primario-claro: #3E7CB1;
  --rutero-acento: #13C4A3;
  --rutero-acento-rgb: 19, 196, 163;
  --rutero-acento-oscuro: #0FA88B;
  --rutero-acento-texto: #0B2545;
  /* Advertencias (badges "En revisión", alertas) siguen en ámbar: el
     turquesa de marca no comunica "atención". */
  --rutero-advertencia: #F59E0B;
  --rutero-advertencia-rgb: 245, 158, 11;
  --rutero-fuente-titulos: 'Sora', system-ui, sans-serif;
  --rutero-exito: #15803D;
  --rutero-error: #DC2626;

  /* Neutrales */
  --rutero-fondo: #F8FAFC;
  --rutero-superficie: #FFFFFF;
  --rutero-texto: #0F172A;
  --rutero-texto-secundario: #64748B;
  --rutero-borde: #E2E8F0;

  /* Escala de forma y elevación */
  --rutero-radio-sm: .625rem;
  --rutero-radio: .875rem;
  --rutero-radio-lg: 1.125rem;
  --rutero-sombra-sm: 0 1px 4px rgba(15, 23, 42, .05);
  --rutero-sombra: 0 2px 16px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --rutero-sombra-lg: 0 12px 32px rgba(15, 23, 42, .12);
  --rutero-transicion: .25s ease;

  /* Overrides de variables raíz de Bootstrap 5.3 (cascada automática a componentes) */
  --bs-primary: var(--rutero-primario);
  --bs-primary-rgb: var(--rutero-primario-rgb);
  --bs-secondary: var(--rutero-texto-secundario);
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-color: var(--rutero-texto-secundario);
  --bs-secondary-color-rgb: 100, 116, 139;
  --bs-success: var(--rutero-exito);
  --bs-success-rgb: 21, 128, 61;
  --bs-danger: var(--rutero-error);
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: var(--rutero-advertencia);
  --bs-warning-rgb: var(--rutero-advertencia-rgb);
  --bs-body-bg: var(--rutero-fondo);
  --bs-body-color: var(--rutero-texto);
  --bs-border-color: var(--rutero-borde);
  --bs-border-radius-sm: var(--rutero-radio-sm);
  --bs-border-radius: var(--rutero-radio);
  --bs-border-radius-lg: var(--rutero-radio-lg);
  --bs-border-radius-xl: 1.5rem;
  --bs-box-shadow: var(--rutero-sombra);
  --bs-box-shadow-sm: var(--rutero-sombra-sm);
  --bs-box-shadow-lg: var(--rutero-sombra-lg);
  --bs-link-color-rgb: var(--rutero-primario-rgb);
  --bs-link-hover-color-rgb: var(--rutero-primario-oscuro-rgb);
  --bs-focus-ring-color: rgba(var(--rutero-primario-rgb), .25);
}

body {
  background-color: var(--rutero-fondo);
}

.btn {
  font-weight: 600;
}
.btn, .card-solicitud, .badge-estado, .nav-link, .bottom-nav-movil .nav-item-movil {
  transition: background-color var(--rutero-transicion), border-color var(--rutero-transicion),
    box-shadow var(--rutero-transicion), color var(--rutero-transicion), transform var(--rutero-transicion);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--rutero-primario);
  --bs-btn-border-color: var(--rutero-primario);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rutero-primario-oscuro);
  --bs-btn-hover-border-color: var(--rutero-primario-oscuro);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rutero-primario-oscuro);
  --bs-btn-active-border-color: var(--rutero-primario-oscuro);
  --bs-btn-disabled-bg: var(--rutero-primario);
  --bs-btn-disabled-border-color: var(--rutero-primario);
  --bs-btn-focus-shadow-rgb: var(--rutero-primario-rgb);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rutero-primario-claro);
  box-shadow: 0 0 0 .2rem rgba(var(--rutero-primario-rgb), .15);
}

.form-check-input:checked {
  background-color: var(--rutero-primario);
  border-color: var(--rutero-primario);
}
.form-check-input:focus {
  border-color: var(--rutero-primario-claro);
  box-shadow: 0 0 0 .2rem rgba(var(--rutero-primario-rgb), .15);
}

.accordion-button:not(.collapsed) {
  color: var(--rutero-primario-oscuro);
  background-color: rgba(var(--rutero-primario-rgb), .08);
}
.accordion-button:focus {
  border-color: var(--rutero-primario-claro);
  box-shadow: 0 0 0 .2rem rgba(var(--rutero-primario-rgb), .15);
}

.btn-outline-primary {
  --bs-btn-color: var(--rutero-primario);
  --bs-btn-border-color: var(--rutero-primario);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--rutero-primario);
  --bs-btn-hover-border-color: var(--rutero-primario);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--rutero-primario-oscuro);
  --bs-btn-active-border-color: var(--rutero-primario-oscuro);
  --bs-btn-focus-shadow-rgb: var(--rutero-primario-rgb);
}

.bg-primario { background-color: var(--rutero-primario) !important; }
.bg-acento { background-color: var(--rutero-acento) !important; }

.navbar.bg-primario {
  background-color: var(--rutero-primario-oscuro) !important;
  box-shadow: var(--rutero-sombra-lg);
  padding-block: .65rem;
}
.navbar.bg-primario .navbar-brand {
  font-family: var(--rutero-fuente-titulos);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.navbar.bg-primario .navbar-brand img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
}
.navbar-link-sutil {
  opacity: .88;
  transition: opacity var(--rutero-transicion);
}
.navbar-link-sutil:hover,
.navbar-link-sutil:focus {
  opacity: 1;
}

.card-solicitud {
  border: none;
  border-radius: var(--rutero-radio-lg);
  background-color: var(--rutero-superficie);
  color: var(--rutero-texto);
  box-shadow: var(--rutero-sombra);
}
a:hover > .card-solicitud,
a:focus > .card-solicitud {
  box-shadow: var(--rutero-sombra-lg);
  transform: translateY(-1px);
}

.badge-estado {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .42em .85em;
  border-radius: 999px;
}

.chat-burbuja-otro {
  background-color: var(--rutero-fondo);
  border: 1px solid var(--rutero-borde);
  color: var(--rutero-texto);
}

.btn-acento {
  background-color: var(--rutero-acento);
  border-color: var(--rutero-acento);
  color: var(--rutero-acento-texto);
  font-weight: 700;
}
.btn-acento:hover,
.btn-acento:focus,
.btn-acento:active {
  background-color: var(--rutero-acento-oscuro) !important;
  border-color: var(--rutero-acento-oscuro) !important;
  color: var(--rutero-acento-texto) !important;
}
.marca-drive { color: var(--rutero-acento); }

.card-solicitud .table thead th {
  color: var(--rutero-texto-secundario);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  border-bottom-width: 1px;
}

.rol-selector .form-check {
  border: 1px solid var(--rutero-borde);
  border-radius: var(--rutero-radio);
  padding: .85rem 1rem .85rem 2.5rem;
  margin-bottom: .6rem;
  transition: border-color var(--rutero-transicion), background-color var(--rutero-transicion);
}
.rol-selector .form-check-input:checked ~ .form-check-label {
  font-weight: 600;
  color: var(--rutero-primario);
}
.rol-selector .form-check:has(.form-check-input:checked) {
  border-color: var(--rutero-primario);
  background-color: rgba(var(--rutero-primario-rgb), .05);
}

.nav-pills .nav-link.active {
  background-color: var(--rutero-primario);
}
.nav-pills .nav-link:not(.active) {
  color: var(--rutero-primario);
}

.badge.bg-warning { color: #1b1b1b; }

.vehiculo-chip {
  background-color: rgba(var(--rutero-primario-rgb), .08);
  color: var(--rutero-primario-oscuro);
  border-radius: var(--rutero-radio);
  padding: .5rem .85rem;
  font-size: .85rem;
  font-weight: 500;
}

/* Aviso de pedido nuevo a pantalla completa, modelo DiDi (assets/js/app.js ->
   mostrarSiguienteNotificacionSolicitud): mapa con la ruta arriba y tarjeta
   oscura abajo. Es oscura en los dos temas a propósito: tiene que resaltar
   sobre cualquier pantalla, como el aviso de DiDi. */
.notificacion-solicitud-overlay {
  --pedido-fondo: #161C26;
  --pedido-cabecera: #2A3342;
  --pedido-linea: rgba(255, 255, 255, .1);
  --pedido-texto: #F1F5F9;
  --pedido-suave: #AAB4C3;
  --pedido-origen: #13C4A3;
  --pedido-destino: #F97316;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #E5E9EF;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.pedido-mapa { position: absolute; inset: 0; z-index: 0; }
.pedido-rechazar {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 28, 38, .92);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .6rem 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.pedido-tarjeta {
  position: relative;
  z-index: 2;
  width: calc(100% - 20px);
  max-width: 480px;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--pedido-fondo);
  color: var(--pedido-texto);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .35);
  animation: notificacion-subir .25s ease-out;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
}
@keyframes notificacion-subir {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.pedido-cabecera { background: var(--pedido-cabecera); padding: 1rem 1.25rem .9rem; }
/* Envío: cabecera ámbar con la etiqueta "ENVÍO" y una caja, para que el
   conductor sepa al instante que lleva un paquete y no una persona. */
.pedido-tipo-mensajeria { --pedido-cabecera: #7A4A06; }
.pedido-tipo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #F59E0B;
  color: #1F1300;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 6px;
  padding: .2rem .6rem;
  margin-right: .4rem;
  font-size: .95rem;
}
.badge-servicio-viaje { background: var(--rutero-primario); color: #fff; }
.badge-servicio-mensajeria { background: #F59E0B; color: #1F1300; }
.badge-servicio-carga { background: #475569; color: #fff; }
.pedido-modalidad {
  display: inline-block;
  background: rgba(255, 255, 255, .1);
  border-radius: 6px;
  padding: .2rem .6rem;
  font-weight: 700;
  font-size: .95rem;
}
.pedido-precio {
  font-family: var(--rutero-fuente-titulos);
  font-weight: 800;
  font-size: clamp(2.4rem, 11vw, 3.1rem);
  line-height: 1.05;
  margin: .5rem 0 0;
  font-variant-numeric: tabular-nums;
}
.pedido-detalle { color: var(--pedido-suave); font-size: 1.05rem; margin: .25rem 0 0; }
.pedido-tiempo { height: 5px; background: rgba(255, 255, 255, .08); }
.pedido-tiempo-barra { height: 100%; width: 100%; background: var(--pedido-origen); transition: width .1s linear; }
.pedido-cuerpo { padding: .25rem 1.25rem 1.1rem; }
.pedido-fila {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.1rem;
  margin: 0;
  padding: .8rem 0;
  border-bottom: 1px solid var(--pedido-linea);
}
.pedido-fila i { color: var(--pedido-suave); }
.pedido-cargo { color: #FBBF24; font-weight: 600; }
.pedido-cargo i { color: #FBBF24; }
.pedido-ruta { display: grid; gap: .7rem; padding: .9rem 0 1rem; }
.pedido-punto { display: flex; gap: .7rem; align-items: flex-start; }
.pedido-icono, .pedido-pin {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .75rem;
  flex: none;
  margin-top: .2rem;
}
.pedido-icono-origen { background: var(--pedido-origen); }
.pedido-icono-destino { background: var(--pedido-destino); }
.pedido-pin { width: 34px; height: 34px; font-size: 1.05rem; margin: 0; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.pedido-pin.pedido-icono-origen { background: #13C4A3; }
.pedido-pin.pedido-icono-destino { background: #F97316; }
.pedido-punto-tiempo { font-weight: 700; font-size: 1.15rem; margin: 0; }
.pedido-punto-dir { color: var(--pedido-suave); font-size: 1rem; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pedido-aceptar {
  width: 100%;
  background: var(--rutero-acento);
  color: var(--rutero-acento-texto);
  font-weight: 800;
  font-size: 1.3rem;
  padding: .85rem;
  border-radius: 16px;
  border: 0;
}
.pedido-aceptar:hover, .pedido-aceptar:focus-visible { background: var(--rutero-acento-oscuro); color: var(--rutero-acento-texto); }
.pedido-contraofertas { display: grid; grid-template-columns: repeat(3, 1fr) 60px; gap: .5rem; margin-top: .6rem; }
.pedido-monto {
  background: #343D4C;
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1.05rem;
  padding: .7rem .25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pedido-monto:hover, .pedido-monto:focus-visible { background: #424C5D; color: #fff; }
.pedido-monto-lapiz { display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .pedido-tarjeta { animation: none; } }

.banner-nueva-version {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  background: var(--rutero-primario);
  color: #fff;
  padding: .55rem 2.25rem .55rem 1rem;
  font-size: .85rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .18);
}
.banner-nueva-version.d-none { display: none; }

/* Instalar la app (includes/footer.php): banner abajo en celular, encima de
   la barra de navegación inferior. */
.banner-instalar {
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 1035;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--rutero-superficie);
  color: var(--rutero-texto);
  border-radius: var(--rutero-radio-lg);
  box-shadow: var(--rutero-sombra-lg);
  padding: .7rem 2.2rem .7rem .7rem;
  max-width: 520px;
  margin: 0 auto;
}
.banner-instalar.d-none { display: none; }
/* QR personal del conductor (mi_qr.php): la imagen se dibuja en un canvas
   grande para que se vea nítida al descargarla, y se muestra más pequeña. */
.mi-qr-imagen { width: 100%; max-width: 320px; height: auto; border-radius: var(--rutero-radio); border: 1px solid var(--rutero-borde); display: block; }
.invitacion-conductor .avatar-inicial, .invitacion-conductor img.rounded-circle { box-shadow: 0 0 0 4px rgba(var(--rutero-acento-rgb), .35); }
/* Aviso cuando un formulario viejo se recargó (includes/csrf.php). */
.aviso-sesion-renovada {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  max-width: calc(100% - 32px);
  background: var(--rutero-primario-oscuro);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 999px;
  box-shadow: var(--rutero-sombra-lg);
  font-size: .9rem;
  animation: aviso-sesion 5s forwards;
}
@keyframes aviso-sesion { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.banner-instalar img { border-radius: 12px; flex: none; }
.banner-instalar-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; font-size: .8rem; color: var(--rutero-texto-secundario); }
.banner-instalar-texto strong { color: var(--rutero-texto); font-size: .9rem; }
.banner-instalar .btn-instalar-app { flex: none; }
.banner-instalar-cerrar {
  position: absolute;
  top: .25rem; right: .35rem;
  background: none; border: 0;
  color: var(--rutero-texto-secundario);
  font-size: 1.3rem; line-height: 1;
  padding: .2rem .4rem;
}
@media (max-width: 991.98px) {
  body:has(.bottom-nav-movil) .banner-instalar { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}
.pasos-instalar { padding-left: 1.2rem; display: grid; gap: .6rem; margin: 0; }
.pasos-instalar li { padding-left: .25rem; }
.btn-cerrar-version {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem .5rem;
}

.bottom-nav-movil {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--rutero-superficie);
  border-top: 1px solid var(--rutero-borde);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, .08);
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav-movil .nav-item-movil {
  flex: 1;
  text-align: center;
  padding: .5rem 0 .4rem;
  color: var(--rutero-texto-secundario);
  text-decoration: none;
  font-size: .68rem;
}
.bottom-nav-movil .nav-item-movil i {
  display: block;
  font-size: 1.25rem;
  margin-bottom: .15rem;
}
.bottom-nav-movil .nav-item-movil.active {
  color: var(--rutero-primario);
  font-weight: 600;
}
.bottom-nav-movil .nav-item-movil.active i {
  background: rgba(var(--rutero-primario-rgb), .12);
  border-radius: 999px;
  padding: .15rem .65rem;
}
@media (min-width: 992px) {
  .bottom-nav-movil { display: none; }
}
@media (max-width: 991.98px) {
  main.con-bottom-nav { padding-bottom: 4.75rem; }
}

.admin-nav-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--rutero-superficie);
  border: 1px solid var(--rutero-borde);
  border-radius: 999px;
  padding: .35rem;
}
.admin-nav-scroll::-webkit-scrollbar {
  height: 4px;
}
.admin-nav-scroll .nav-pills {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}
.admin-nav-scroll .nav-link {
  white-space: nowrap;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
}
.admin-nav-scroll .nav-link:not(.active) {
  color: var(--rutero-texto-secundario);
}
.admin-nav-scroll .nav-link.active {
  color: #fff;
}

/* Map First: el mapa domina la pantalla en las vistas de viaje; el resto de la
   información se presenta como paneles que "flotan" sobre él, siempre en flujo
   normal del documento (nunca position:fixed) para no chocar con .bottom-nav-movil. */
.mapa-hero {
  width: 100%;
  min-height: 320px;
  border-radius: var(--rutero-radio-lg);
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .mapa-first-breakout {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .mapa-first-breakout .mapa-hero {
    min-height: 52dvh;
    border-radius: 0;
  }
  .panel-flotante,
  .panel-flotante-stack > .card-solicitud:first-child {
    margin-top: -20px;
    position: relative;
    z-index: 2;
    border-radius: var(--rutero-radio-lg) var(--rutero-radio-lg) 0 0 !important;
    box-shadow: var(--rutero-sombra-lg);
  }
  .panel-flotante-superficie {
    margin-top: -20px;
    position: relative;
    z-index: 2;
    background: var(--rutero-fondo);
    border-radius: var(--rutero-radio-lg) var(--rutero-radio-lg) 0 0;
    box-shadow: var(--rutero-sombra-lg);
    padding: 1rem 1rem 0;
  }
}

/* Modo oscuro: activado con [data-bs-theme="dark"] en <html> (ver includes/header.php
   y assets/js/app.js). Solo se invierten los neutrales; marca y colores semánticos se
   mantienen iguales en ambos temas, así que todos los componentes que ya usan los
   tokens --rutero-* se adaptan solos sin reglas adicionales. */
:root[data-bs-theme="dark"] {
  --rutero-fondo: #0F172A;
  --rutero-superficie: #1E293B;
  --rutero-texto: #F1F5F9;
  --rutero-texto-secundario: #94A3B8;
  --rutero-borde: #334155;
  --rutero-sombra-sm: 0 1px 4px rgba(0, 0, 0, .3);
  --rutero-sombra: 0 2px 16px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --rutero-sombra-lg: 0 12px 32px rgba(0, 0, 0, .5);

  --bs-body-bg: var(--rutero-fondo);
  --bs-body-color: var(--rutero-texto);
  --bs-border-color: var(--rutero-borde);
  --bs-secondary-color: var(--rutero-texto-secundario);
  --bs-secondary-color-rgb: 148, 163, 184;
  --bs-box-shadow: var(--rutero-sombra);
  --bs-box-shadow-sm: var(--rutero-sombra-sm);
  --bs-box-shadow-lg: var(--rutero-sombra-lg);
  /* El azul marino de marca no se lee como enlace sobre fondo oscuro */
  --bs-link-color-rgb: 125, 180, 235;
  --bs-link-hover-color-rgb: 165, 205, 245;
}
:root[data-bs-theme="dark"] .vehiculo-chip {
  background-color: rgba(125, 180, 235, .16);
  color: #CFE3F7;
}

/* Avatar sin foto de perfil (avatarUsuario() en includes/solicitudes.php) */
.avatar-inicial {
  background-color: var(--rutero-primario);
  color: #fff;
}

/* Boton de menu del proveedor sobre el mapa (vistas/panel_proveedor.php) */
.btn-menu-mapa {
  top: 10px;
  left: 10px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

/* Etiqueta de tarifa dinamica sobre las zonas del mapa del proveedor */
.etiqueta-demanda {
  background: #fff;
  color: #111;
  border-radius: 14px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%);
}

/* Bienvenida (index.php sin sesión) — Compás Drive, opción A "Confianza".
   Celular: mapa arriba y panel debajo; escritorio: dos columnas. */
.landing {
  display: grid;
  gap: 1.5rem;
  padding-block: 1rem 2rem;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .landing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    padding-block: 3rem;
  }
  .landing-panel { order: -1; }
}
.landing-hero {
  position: relative;
  border-radius: 1.5rem;
  background: var(--rutero-primario-oscuro);
  padding: .75rem;
  box-shadow: var(--rutero-sombra-lg);
}
.landing-mapa {
  display: block;
  width: 100%;
  height: 240px;
  border-radius: 1.1rem;
  background: #13315C;
}
@media (min-width: 992px) {
  .landing-mapa { height: 420px; }
}
.landing-chip-estado {
  position: absolute;
  left: 1.6rem;
  top: 1.6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: .9rem;
  background: #fff;
  color: var(--rutero-primario-oscuro);
  font-weight: 700;
  font-size: .85rem;
  box-shadow: var(--rutero-sombra);
}
.landing-titulo {
  font-family: var(--rutero-fuente-titulos);
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--rutero-primario-oscuro);
  margin-bottom: .75rem;
}
.landing-subtitulo {
  font-size: 1.05rem;
  color: var(--rutero-texto-secundario);
  margin-bottom: 1.25rem;
}
.landing-servicios {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.landing-servicios span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: rgba(var(--rutero-primario-rgb), .09);
  color: var(--rutero-primario-oscuro);
  font-weight: 700;
  font-size: .85rem;
}
.landing-acciones {
  display: grid;
  gap: .65rem;
  max-width: 420px;
}
.landing-acciones .btn { padding-block: .85rem; border-radius: .9rem; font-weight: 700; }
.landing-btn-secundario { border-width: 2px; }
.landing-enlace-conductor {
  text-align: center;
  font-weight: 700;
  padding: .5rem 0;
  text-decoration: none;
}
.landing-confianza {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  margin-top: 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--rutero-texto-secundario);
}
.landing-confianza i { color: #0E8F78; }
:root[data-bs-theme="dark"] .landing-titulo { color: var(--rutero-texto); }
:root[data-bs-theme="dark"] .landing-servicios span { background: rgba(125, 180, 235, .14); color: #CFE3F7; }
:root[data-bs-theme="dark"] .landing-btn-secundario { color: #CFE3F7; border-color: #CFE3F7; }
:root[data-bs-theme="dark"] .landing-confianza i { color: var(--rutero-acento); }

/* Bootstrap Icons no trae motocicleta (bi-scooter es una patineta): ícono
   propio dibujado como máscara, así hereda el color del texto igual que un
   .bi normal. Trazo basado en "motorbike" de Tabler Icons (licencia MIT). */
.bi-moto::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='16' r='3'/%3E%3Ccircle cx='19' cy='16' r='3'/%3E%3Cpath d='M7.5 14h5l4-4H6m1.5 4 4-4'/%3E%3Cpath d='M13 6h2l1.5 3 2 4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='16' r='3'/%3E%3Ccircle cx='19' cy='16' r='3'/%3E%3Cpath d='M7.5 14h5l4-4H6m1.5 4 4-4'/%3E%3Cpath d='M13 6h2l1.5 3 2 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Mapa de calor del proveedor (assets/js/mapa.js, COLORES_NIVEL_DEMANDA):
   avisos de hora pico / lluvia sobre el mapa y leyenda de colores debajo. */
.avisos-tarifa-mapa {
  top: 10px;
  left: 64px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
}
.aviso-tarifa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: var(--rutero-sombra);
}
.aviso-tarifa-pico { background: #DC2626; color: #fff; }
.aviso-tarifa-lluvia { background: #134074; color: #fff; }
.leyenda-mapa-calor {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  align-items: center;
}
.leyenda-mapa-calor > span { display: inline-flex; align-items: center; gap: .35rem; }
.muestra-hex {
  display: inline-block;
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.muestra-hex-0 { background: #3E7CB1; opacity: .55; }
.muestra-hex-1 { background: #EAB308; }
.muestra-hex-2 { background: #F97316; }
.muestra-hex-3 { background: #DC2626; }
/* Pasajero: tarifa por encima de lo normal (assets/js/mapa.js, actualizarTarifaSugerida) */
.aviso-tarifa-alta {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  border-radius: var(--rutero-radio);
  background: rgba(var(--rutero-advertencia-rgb), .14);
  color: var(--rutero-texto);
  font-size: .85rem;
}
.aviso-tarifa-alta > i { color: #B45309; font-size: 1.1rem; }

/* permisos.php: pantalla "Antes de empezar" */
.icono-permiso {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--rutero-primario-rgb), .1);
  color: var(--rutero-primario);
  font-size: 1.3rem;
}
:root[data-bs-theme="dark"] .icono-permiso { background: rgba(125, 180, 235, .16); color: #CFE3F7; }

/* ===== Pantalla del conductor estilo app (vistas/panel_proveedor.php) =====
   Mapa a pantalla completa, barra flotante arriba (menú, ganancias de hoy,
   capas) y una hoja abajo con lo único que importa ahora: el estado y los
   pedidos. En celular se ocultan la barra superior, la inferior y el pie. */
.conductor-app {
  position: relative;
  height: calc(100dvh - 56px - 3rem);
  min-height: 520px;
  border-radius: var(--rutero-radio-lg);
  overflow: hidden;
  box-shadow: var(--rutero-sombra);
  isolation: isolate;
}
.conductor-mapa { position: absolute; inset: 0; z-index: 0; }
.conductor-barra-superior {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.conductor-barra-superior > * { pointer-events: auto; }
.conductor-boton-redondo {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--rutero-superficie);
  color: var(--rutero-texto);
  box-shadow: var(--rutero-sombra-lg);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  flex: none;
}
.conductor-ganancias {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding: .45rem 1.25rem;
  border-radius: 999px;
  background: var(--rutero-primario-oscuro);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--rutero-sombra-lg);
}
.conductor-ganancias:hover { color: #fff; }
.conductor-ganancias-etiqueta { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.conductor-ganancias-monto { font-family: var(--rutero-fuente-titulos); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.conductor-avisos {
  position: absolute;
  top: 70px; left: 12px; right: 12px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.conductor-avisos > * { pointer-events: auto; }
#avisos-tarifa-mapa { align-self: center; justify-content: center; }
.conductor-leyenda {
  background: var(--rutero-superficie);
  border-radius: var(--rutero-radio);
  box-shadow: var(--rutero-sombra-lg);
  padding: .75rem 1rem;
  display: grid;
  gap: .35rem;
  font-size: .82rem;
  max-width: 260px;
}
.conductor-leyenda > span { display: flex; align-items: center; gap: .5rem; }

.conductor-hoja {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  max-height: 62%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--rutero-superficie);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, .14);
  padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.conductor-hoja-agarre {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--rutero-borde);
  margin: 0 auto .25rem;
  flex: none;
}
.conductor-estado-titulo { font-family: var(--rutero-fuente-titulos); font-weight: 700; font-size: 1.15rem; margin-bottom: .1rem; }
.conductor-estado-texto { color: var(--rutero-texto-secundario); font-size: .9rem; margin-bottom: 0; }
.conductor-boton-conectar {
  background: var(--rutero-acento);
  color: var(--rutero-acento-texto);
  font-weight: 800;
  font-size: 1.15rem;
  padding: .95rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(var(--rutero-acento-rgb), .35);
}
.conductor-boton-conectar:hover, .conductor-boton-conectar:focus-visible { background: var(--rutero-acento-oscuro); color: var(--rutero-acento-texto); }
.conductor-boton-desconectar {
  border: 1px solid var(--rutero-borde);
  border-radius: 999px;
  color: var(--rutero-texto-secundario);
  padding: .35rem .9rem;
  white-space: nowrap;
}
.conductor-pulso {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--rutero-acento);
  flex: none;
  box-shadow: 0 0 0 0 rgba(var(--rutero-acento-rgb), .6);
  animation: conductor-pulso 1.8s infinite;
}
@keyframes conductor-pulso {
  70% { box-shadow: 0 0 0 12px rgba(var(--rutero-acento-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--rutero-acento-rgb), 0); }
}
.conductor-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border-radius: var(--rutero-radio);
  background: rgba(var(--rutero-primario-rgb), .07);
  color: var(--rutero-texto);
  font-size: .85rem;
  text-decoration: none;
}
.conductor-chip-alerta { background: rgba(var(--rutero-advertencia-rgb), .14); }
.conductor-lista .card-solicitud { box-shadow: none; border: 1px solid var(--rutero-borde); }
.conductor-lista > .mb-3:last-child { margin-bottom: 0 !important; }
.conductor-lista-vacia { color: var(--rutero-texto-secundario); text-align: center; font-size: .9rem; padding: .75rem 0; margin: 0; }
.conductor-viaje-activo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--rutero-radio);
  background: var(--rutero-primario);
  color: #fff;
  text-decoration: none;
}
.conductor-viaje-activo:hover { color: #fff; background: var(--rutero-primario-oscuro); }
.conductor-viaje-activo-estado { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.conductor-viaje-activo-ir { font-weight: 700; white-space: nowrap; }
.min-w-0 { min-width: 0; }

.conductor-menu { width: min(340px, 86vw) !important; }
.conductor-servicios { font-size: .78rem; font-weight: 600; color: var(--rutero-acento-oscuro); }
.conductor-interruptor {
  border: 1px solid var(--rutero-borde);
  border-radius: var(--rutero-radio);
  padding: .75rem .9rem;
}
.conductor-interruptor > .form-check > i { font-size: 1.25rem; color: var(--rutero-texto-secundario); }
.conductor-interruptor .form-check-input { width: 2.6em; height: 1.4em; flex: none; cursor: pointer; }
.conductor-menu-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  text-align: center;
  padding: .75rem 0;
  border-top: 1px solid var(--rutero-borde);
  border-bottom: 1px solid var(--rutero-borde);
}
.conductor-menu-cifra { font-family: var(--rutero-fuente-titulos); font-weight: 700; font-size: 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.conductor-menu-cifra-etiqueta { font-size: .7rem; color: var(--rutero-texto-secundario); margin: 0; line-height: 1.2; }
.conductor-menu-lista .list-group-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem .25rem;
  border-color: var(--rutero-borde);
  background: transparent;
}
.conductor-menu-lista .list-group-item i { font-size: 1.15rem; color: var(--rutero-texto-secundario); width: 1.25rem; text-align: center; }

/* Alarma de pedidos obligatoria: el navegador no deja sonar nada hasta que el
   conductor toca la pantalla, así que al estar en línea se pide ese toque con
   una pantalla que no se puede saltar (assets/js/app.js). */
.alarma-obligatoria {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(var(--rutero-primario-oscuro-rgb), .94);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  gap: 1rem;
  cursor: pointer;
}
.alarma-obligatoria-icono {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--rutero-acento);
  color: var(--rutero-acento-texto);
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  animation: conductor-pulso 1.8s infinite;
}
.alarma-obligatoria h2 { font-family: var(--rutero-fuente-titulos); font-weight: 800; font-size: 1.5rem; margin: 0; text-wrap: balance; }
.alarma-obligatoria p { max-width: 32ch; opacity: .85; margin: 0; }
.alarma-obligatoria .btn { min-width: 260px; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .conductor-pulso, .alarma-obligatoria-icono { animation: none; }
}

@media (max-width: 991.98px) {
  body.modo-app > .navbar,
  body.modo-app .bottom-nav-movil,
  body.modo-app > footer { display: none !important; }
  body.modo-app > main { padding: 0 !important; max-width: none; }
  body.modo-app .conductor-app {
    position: fixed;
    inset: 0;
    height: auto;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.modo-app .conductor-barra-superior { top: calc(12px + env(safe-area-inset-top, 0px)); }
  body.modo-app .conductor-avisos { top: calc(70px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 992px) {
  .conductor-hoja {
    left: 16px; right: auto; bottom: 16px;
    width: 400px;
    max-height: calc(100% - 100px);
    border-radius: var(--rutero-radio-lg);
  }
  .conductor-hoja-agarre { display: none; }
}

/* ===== Pantalla del pasajero (vistas/panel_pasajero.php) =====
   Misma base que la del conductor (.conductor-app/.conductor-hoja): mapa a
   pantalla completa y una hoja abajo con un solo paso a la vez. */
.pasajero-hoja { max-height: 72%; }
.pasajero-hoja form { display: contents; }
.pasajero-hoja .paso-solicitud:not(.d-none) { display: flex; flex-direction: column; gap: .85rem; }
.pasajero-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pasajero-servicio {
  border: 1px solid var(--rutero-borde);
  background: var(--rutero-superficie);
  color: var(--rutero-texto);
  border-radius: var(--rutero-radio);
  padding: .55rem .25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font-size: .82rem;
  font-weight: 600;
}
.pasajero-servicio i { font-size: 1.35rem; color: var(--rutero-primario); }
.pasajero-servicio.active { border-color: var(--rutero-acento); background: rgba(var(--rutero-acento-rgb), .12); }
.pasajero-buscar {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: rgba(var(--rutero-primario-rgb), .07);
  color: var(--rutero-texto);
  font-family: var(--rutero-fuente-titulos);
  font-weight: 700;
  font-size: 1.2rem;
  padding: 1rem 1.1rem;
  text-align: left;
}
.pasajero-buscar i { font-size: 1.2rem; color: var(--rutero-texto); }
.pasajero-lugares { display: flex; flex-direction: column; }
.pasajero-lugar {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px solid var(--rutero-borde);
  background: transparent;
  color: var(--rutero-texto);
  text-decoration: none;
  text-align: left;
  width: 100%;
}
.pasajero-lugar:last-child { border-bottom: 0; }
.pasajero-lugar-icono {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(var(--rutero-primario-rgb), .08);
  color: var(--rutero-texto-secundario);
  display: grid;
  place-items: center;
  flex: none;
}
.pasajero-lugar-titulo { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasajero-lugar-dir { display: block; font-size: .82rem; color: var(--rutero-texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasajero-paso-cabecera { display: flex; align-items: center; gap: .75rem; }
.pasajero-atras { width: 38px; height: 38px; font-size: 1.1rem; box-shadow: none; border: 1px solid var(--rutero-borde); }
.pasajero-ruta {
  border: 1px solid var(--rutero-borde);
  border-radius: 14px;
  overflow: hidden;
}
.pasajero-campo {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 0 .5rem 0 .85rem;
  border-bottom: 1px solid var(--rutero-borde);
  position: relative;
}
.pasajero-ruta > .pasajero-campo:last-child, #contenedor-paradas:empty + .pasajero-campo { border-bottom: 0; }
.pasajero-campo .form-control { border: 0; box-shadow: none; padding: .85rem .5rem; background: transparent; }
.pasajero-campo-boton { color: var(--rutero-texto-secundario); flex: none; }
.pasajero-punto-origen { color: var(--rutero-acento); font-size: .6rem; }
.pasajero-punto-destino { color: #F97316; font-size: .6rem; }
.pasajero-punto-parada { color: var(--rutero-texto-secundario); font-size: .6rem; }
#contenedor-paradas .pasajero-campo:last-child { border-bottom: 1px solid var(--rutero-borde); }
.pasajero-vehiculos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pasajero-vehiculos-dos { grid-template-columns: repeat(2, 1fr); }
.pasajero-vehiculos-cuatro { grid-template-columns: repeat(4, 1fr); }
/* Código de entrega del envío (solicitud.php, lado del cliente). */
.codigo-entrega {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  background: var(--rutero-primario);
  color: #fff;
  border-radius: var(--rutero-radio-lg);
  padding: 1rem 1.25rem;
}
.codigo-entrega-numero { font-family: var(--rutero-fuente-titulos); font-weight: 800; font-size: 2rem; letter-spacing: .4em; line-height: 1; }
.pasajero-vehiculo small { font-size: .68rem; font-weight: 500; color: var(--rutero-texto-secundario); }
.tarifa-desglose { list-style: none; padding: 0; margin: .25rem 0 0; color: var(--rutero-texto-secundario); font-size: .8rem; }
.pasajero-vehiculo {
  border: 1px solid var(--rutero-borde);
  border-radius: var(--rutero-radio);
  padding: .6rem .25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.pasajero-vehiculo i { font-size: 1.5rem; color: var(--rutero-primario); }
.btn-check:checked + .pasajero-vehiculo { border-color: var(--rutero-acento); background: rgba(var(--rutero-acento-rgb), .12); }
.btn-check:focus-visible + .pasajero-vehiculo { outline: 2px solid var(--rutero-acento); outline-offset: 2px; }
.pasajero-modalidades { display: flex; flex-direction: column; gap: .5rem; }
.pasajero-modalidad {
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid var(--rutero-borde);
  border-radius: var(--rutero-radio);
  padding: .75rem .9rem;
  cursor: pointer;
}
.pasajero-modalidad:has(input:checked) { border-color: var(--rutero-acento); background: rgba(var(--rutero-acento-rgb), .08); }
.pasajero-modalidad-precio { font-family: var(--rutero-fuente-titulos); font-weight: 800; font-size: 1.15rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-bs-theme="dark"] .pasajero-servicio i,
:root[data-bs-theme="dark"] .pasajero-vehiculo i { color: #7DB4EB; }