/* ============================================================================
   GuíaMaster — estilos propios

   El tema claro/oscuro lo maneja Bootstrap 5.3 con data-bs-theme en <html>.
   Aquí solo se define lo que Bootstrap no cubre, y siempre con variables para
   que ambos temas funcionen sin duplicar reglas.
   ============================================================================ */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

main {
  flex: 1 0 auto;
}

/* Fondo ligeramente distinto al de las tarjetas, para que se despeguen */
[data-bs-theme="light"] body { background-color: #f8fafc; }
[data-bs-theme="dark"]  body { background-color: #0f1720; }

/* ---------------------------------------------------------------------------
   Separadores
   --------------------------------------------------------------------------- */
.border-end-md {
  border-right: 1px solid var(--bs-border-color);
}

@media (max-width: 767.98px) {
  .border-end-md {
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/* Este va sobre el panel oscuro de reventa, que es oscuro en ambos temas */
.border-end-lg {
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 991.98px) {
  .border-end-lg {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   Tarjetas de tarifas
   --------------------------------------------------------------------------- */
.rate-card {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.rate-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
  border-color: var(--bs-secondary-border-subtle);
}

/* Tarifa seleccionada: ámbar en ambos temas, con la intensidad ajustada */
.rate-card.active-rate {
  border-color: #f59e0b !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

[data-bs-theme="light"] .rate-card.active-rate { background-color: #fffbeb !important; }
[data-bs-theme="dark"]  .rate-card.active-rate { background-color: #2a2213 !important; }

/* La más barata de su paquetería. Verde, para que no compita visualmente con
   el ámbar de "seleccionada": son dos cosas distintas y una tarjeta puede ser
   las dos a la vez. El borde izquierdo grueso sobrevive aunque se seleccione,
   porque active-rate solo cambia el borde completo y el fondo. */
.rate-card.mejor-paqueteria {
  border-left: 4px solid #16a34a !important;
}

[data-bs-theme="light"] .rate-card.mejor-paqueteria { background-color: #f0fdf4; }
[data-bs-theme="dark"]  .rate-card.mejor-paqueteria { background-color: #10241a; }

/* Si además está seleccionada, manda el ámbar en el fondo pero se conserva la
   franja verde: así se ve que es la elegida Y la más barata de su paquetería. */
[data-bs-theme="light"] .rate-card.mejor-paqueteria.active-rate { background-color: #fffbeb !important; }
[data-bs-theme="dark"]  .rate-card.mejor-paqueteria.active-rate { background-color: #2a2213 !important; }

/* Quien prefiere menos movimiento no debería sufrir las transiciones */
@media (prefers-reduced-motion: reduce) {
  .rate-card,
  .rate-card:hover {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Colores de marca de las paqueterías.
   Son los oficiales, así que no cambian con el tema.
   --------------------------------------------------------------------------- */
.badge.bg-warning.border-warning {
  background-color: #ffcc00 !important;
  color: #d40511 !important;
}

.badge.bg-primary.border-primary {
  background-color: #4d148c !important;
  color: #ff6600 !important;
}

/* ---------------------------------------------------------------------------
   Mapa
   --------------------------------------------------------------------------- */
#leafletMap {
  z-index: 1;
}

/* Los mosaicos de OpenStreetMap son claros. En modo oscuro se les baja el
   brillo y se invierten un poco para que no deslumbren junto al resto. */
[data-bs-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.75) contrast(1.05) saturate(0.85) hue-rotate(180deg) invert(1);
}

[data-bs-theme="dark"] .leaflet-container {
  background: #1a2029;
}

/* Los marcadores y las líneas NO deben invertirse: se revierte el filtro */
[data-bs-theme="dark"] .leaflet-marker-pane,
[data-bs-theme="dark"] .leaflet-popup-pane,
[data-bs-theme="dark"] .leaflet-overlay-pane {
  filter: none;
}

/* ---------------------------------------------------------------------------
   Resumen de importes: oscuro por diseño en ambos temas
   --------------------------------------------------------------------------- */
#resaleBanner {
  position: static;
  bottom: auto;
  z-index: auto;
  backdrop-filter: blur(10px);
}

/* Solo fijar los importes en pantallas de escritorio con ratón.
   En dispositivos táctiles se desplaza normalmente, incluso si Safari
   solicita la versión de escritorio o el teléfono está en horizontal. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  #resaleBanner {
    position: sticky;
    bottom: 1.5rem;
    z-index: 1020;
  }
}

/* ---------------------------------------------------------------------------
   Sugerencias del autocompletado de cliente.
   Van sobre el panel oscuro, así que necesitan su propio contraste.
   --------------------------------------------------------------------------- */
#clienteSugerencias .list-group-item {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

#clienteSugerencias .list-group-item:hover {
  background-color: var(--bs-secondary-bg);
}

/* ---------------------------------------------------------------------------
   Marca — Conecta Express

   Los dos colores salen del logo: el azul del círculo y el naranja de
   "XPRESS". Se declaran como variables para que el día que cambie el logo
   haya un solo lugar que tocar.

   Sobre el naranja: #FF5903 contra fondo blanco da 3.14:1 de contraste. Eso
   NO alcanza para texto normal (se pide 4.5:1), pero sí para texto grande en
   negritas (3:1), que es justo como se usa aquí. Si algún día quieres poner
   este naranja en texto chico sobre claro, oscurécelo primero o no se va a
   leer bien.
   --------------------------------------------------------------------------- */
:root {
  --marca-azul: #000F2E;
  --marca-naranja: #FF5903;
}

.marca-nombre {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* "Conecta" sigue al tema: azul de la marca en claro, casi blanco en oscuro.
   Si se dejara fijo en azul marino, en modo oscuro desaparecería contra el
   fondo. */
[data-bs-theme="light"] .marca-nombre .marca-conecta { color: var(--marca-azul); }
[data-bs-theme="dark"]  .marca-nombre .marca-conecta { color: #F1F3F5; }

/* El naranja se mantiene igual en ambos temas: es el color de la marca y
   contrasta bien contra claro y oscuro. */
.marca-nombre .marca-express { color: var(--marca-naranja); }

/* Navegación de empleados: lateral en escritorio, desplegable en móvil. */
.employee-sidebar { --bs-offcanvas-width: 250px; }
@media (min-width: 992px) {
  .employee-sidebar { position: fixed; left: 0; top: var(--employee-header-height, 59px); bottom: 0; width: 230px; overflow-y: auto; border-right: 1px solid var(--bs-border-color); background: var(--bs-body-bg) !important; z-index: 1010; }
  .employee-main { margin-left: 230px; min-width: 0; }
}

@media (min-width: 992px) {
  .employee-menu-collapsed .employee-sidebar { width: 76px; }
  .employee-menu-collapsed .employee-main { margin-left: 76px; }
  .employee-menu-collapsed .employee-menu-label { display: none; }
  .employee-menu-collapsed .employee-sidebar .nav-link { text-align: center; padding-inline: 0; }
  .employee-menu-collapsed .employee-sidebar .nav-link i { margin-right: 0 !important; }
}