/* === index.css === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-bg: #f5f6f8; 
  --color-surface: #ffffff; 
  --color-surface-hover: #f1f3f5;
  --color-primary: #e63946; 
  --color-text: #333333;
  --color-text-muted: #6c757d;
  --color-border: #e0e0e0;
  --font-family: 'Inter', sans-serif;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glassmorphism utility */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}



/* === App.css === */
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  background-color: #2c3338;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: all 0.2s ease;
}

.footer {
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Cart Modal Styles */
.cart-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

.cart-modal {
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.cart-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.cart-modal-header h3 {
  font-size: 1.25rem;
}

.close-btn {
  font-size: 2rem;
  color: var(--color-text-muted);
}

.close-btn:hover {
  color: white;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.empty-cart {
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 2rem;
}

/* Estado vacío de un tab de mes (PRO-379) */
.empty-month {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.empty-month-next {
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  background-color: #555c66;
  border: 1px solid #555c66;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.empty-month-next:hover {
  opacity: 0.9;
}

.cart-item {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.75rem;
  border-radius: 8px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}



.cart-item:hover {
  border-color: #d0d3d8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cart-item img {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Bloque de texto: ocupa el espacio disponible y empuja la X al extremo. */
.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-category {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 0.15rem;
}

.cart-item p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-form {
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cart-form h4 {
  margin-bottom: 0.5rem;
}

.cart-form input {
  padding: 0.85rem;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #ccc;
  color: #333333;
  font-family: inherit;
  font-size: 0.95rem;
}

.cart-form input::placeholder {
  color: #999;
}

.cart-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
}

/* Fechas opcionales de campaña en el formulario del carrito */
.cart-dates {
  position: relative;   /* referencia para el popover flotante del calendario */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-dates-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cart-dates-label {
  font-size: 0.85rem;
  color: #666;
  flex: 1 1 100%;      /* etiqueta en su propia línea, sin empujar los controles */
}

.cart-dates-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;      /* el resumen ocupa el ancho disponible de su fila */
  min-width: 0;        /* permite truncar el texto largo del rango */
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: #495057;
  font-size: 0.85rem;
  cursor: pointer;
}

.cart-dates-toggle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-dates-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cart-dates-toggle svg {
  width: 16px;
  height: 16px;
}

.cart-dates-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  color: #999;
  cursor: pointer;
}

.cart-dates-clear:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Popover flotante del calendario: NO ocupa espacio en el flujo, así el botón
   "Solicitar Cotización" siempre queda visible. Flota sobre el campo de fechas. */
/* DESKTOP: calendario inline dentro del form (como estaba antes, se veía bien).
   No flota; ocupa su espacio en el flujo del carrito. Oculto salvo .is-open. */
.cart-dates-popover {
  display: none;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem;
  background: #fff;
}

.cart-dates-popover.is-open {
  display: flex;
  flex-direction: column;
  /* En desktop el popover es inline dentro del form; acotamos su alto para que
     el calendario tenga scroll propio y NO empuje el botón "Listo"/enviar fuera
     del carrito (100vh). El cuerpo scrollea, cabecera y "Listo" quedan fijos. */
  max-height: 60vh;
}

/* Cuerpo del calendario scrollable en desktop; cabecera y "Listo" fijos. */
.cart-dates-popover-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Backdrop solo se usa en modo mobile (bottom sheet); en desktop nunca se ve. */
.cart-dates-backdrop {
  display: none;
}

.cart-dates-popover-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
}

.cart-dates-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
}

.cart-dates-popover-close:hover {
  color: var(--color-primary);
}

.cart-dates-done {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.55rem;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.cart-dates-done:hover {
  opacity: 0.9;
}

/* Calendario compacto dentro del popover */
.cart-dates-popover .calendar-grid {
  gap: 2px;
}

.cart-dates-popover .cal-day-cell,
.cart-dates-popover .cal-day-name {
  min-height: 26px;
  padding: 3px 0;
  font-size: 12px;
}

.cart-dates-popover .cal-nav {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.cart-dates-popover .calendar-carousel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-dates-popover .calendar-months {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-dates-popover .calendar-month-name {
  text-align: center;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.cart-dates-hint {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: #999;
  text-align: center;
}

/* Estados de selección del calendario de rango (reutiliza cal-day-cell) */
.cal-day-cell.past {
  color: #c7ccd1;
  cursor: not-allowed;
}

.cal-day-cell.selectable {
  cursor: pointer;
}

.cal-day-cell.selectable:hover {
  background-color: #eef1f5;
}

.cal-day-cell.in-range {
  background-color: #fde4e6;
  color: #721c24;
}

.cal-day-cell.selected {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

/* === Modo MOBILE: el calendario abre como hoja modal a pantalla completa
   (bottom sheet), con backdrop, scroll propio y botón "Listo" fijo abajo.
   Evita el recorte del popover flotante en pantallas chicas. === */
@media (max-width: 768px) {
  .cart-dates-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1300;
  }

  .cart-dates-popover.is-open {
    position: fixed;
    inset: auto 0 0 0;      /* pegado al fondo (bottom sheet) */
    top: auto;
    margin: 0;
    /* Altura acotada para que quepan cabecera + calendario (scroll) + "Listo".
       dvh contempla la barra dinámica del navegador móvil; vh es el fallback. */
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 16px 16px 0 0;
    /* padding inferior con safe-area para que "Listo" no quede pegado/cortado
       en dispositivos con barra de gestos. */
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1301;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  }

  .cart-dates-popover-head {
    flex: 0 0 auto;
    font-size: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
  }

  .cart-dates-popover-body {
    flex: 1 1 auto;
    min-height: 0;          /* permite que el body encoja y active el scroll */
    overflow-y: auto;       /* scroll del calendario en pantallas chicas */
    -webkit-overflow-scrolling: touch;
    padding-top: 0.75rem;
  }

  /* Celdas más cómodas al tacto en mobile. */
  .cart-dates-popover .cal-day-cell,
  .cart-dates-popover .cal-day-name {
    min-height: 34px;
    font-size: 13px;
  }

  .cart-dates-done {
    flex: 0 0 auto;         /* botón "Listo" siempre visible al fondo */
    margin-top: 0.75rem;
  }
}

.submit-cart-btn {
  background: var(--color-primary);
  color: white;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 0.5rem;
  transition: opacity 0.2s;
}

.submit-cart-btn:hover {
  opacity: 0.9;
}


/* === components/Header.css === */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(2rem + 50px);
  height: 70px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #262933; /* Dark header */
  color: white;
  border-bottom: none;
}

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

.header-right {
  justify-content: flex-end;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: 2rem;
  text-decoration: none;
}

/* Logo oficial de Visual Group (mismo del panel/correos) */
.logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.logo-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid var(--color-primary);
}

.logo-text {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.1;
  letter-spacing: 1px;
}

.header-nav {
  display: flex;
  gap: 1.5rem;
}

.nav-link {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary);
}

.icon-btn, .cart-btn {
  font-size: 1.25rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover, .cart-btn:hover {
  color: var(--color-text);
}

.cart-btn {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--color-primary);
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.user-profile img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.vendor-badge {
  background: rgba(230, 57, 70, 0.15);
  color: var(--color-primary);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}


/* === components/HeroBanner.css === */
.hero-container {
  height: 60vh;
  min-height: 400px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  /* clip-path animation replacing framer-motion */
  transition: clip-path 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 17, 21, 0.9) 0%, rgba(15, 17, 21, 0.2) 50%, rgba(15, 17, 21, 0.4) 100%);
  display: flex;
  align-items: flex-end;
  padding: 4rem;
  transition: background 0.4s ease;
}

.hero-overlay.active {
  background: linear-gradient(to top, rgba(230, 57, 70, 0.8) 0%, rgba(15, 17, 21, 0.1) 60%);
}

.hero-content {
  color: white;
  max-width: 600px;
  /* Emulate framer-motion slide up */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.hero-overlay.active .hero-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-content h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.hero-content p {
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.9;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}


/* === components/Directory.css === */
.directory-section {
  padding: 2rem 5rem 4rem 2rem; /* Added right and bottom padding to clear the button */
  max-width: 1440px;
  margin: 0 auto;
}

.directory-controls-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;

  /* Sticky behavior */
  position: sticky;
  top: 70px; /* Under the header */
  z-index: 50; /* Stay above cards */
  transition: all 0.2s ease;
  margin-top: -1rem; /* Better spacing when transitioning */
  /* Padding vertical reducido para dar cabida al conteo sin crecer la altura
     total del sticky respecto al diseño original. */
  padding: 0.4rem 0;
}

/* Fila principal de controles: filtros (izq) + toggle (der) */
.controls-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Conteo dinámico de sitios (debajo de los controles, dentro del sticky) */
.sites-count {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #9aa0a6; /* gris claro, discreto */
  font-weight: 500;
}
.sites-count strong {
  color: #6b7280; /* el número, un poco más marcado */
  font-weight: 700;
}
.sites-count.is-empty {
  color: #c0392b; /* leve alerta cuando no hay resultados */
}

/* Solo se aplica cuando hace contacto con el header y se pega */
.directory-controls-row.is-sticky {
  background: white;
  padding: 0.5rem 1rem;
  margin-left: -1rem; /* Compensate for the padding to keep content aligned */
  margin-right: -1rem;
  border-radius: 8px; /* Optional subtle corner */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Slight shadow to separate from cards */
  border-bottom: 1px solid #eee;
}

.filters-area {
  display: flex;
  align-items: center;
  position: relative;
}

.mobile-filter-btn {
  display: none; /* Hidden on desktop */
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  cursor: pointer;
  z-index: 10;
}
.mobile-filter-btn:active {
  background: var(--color-surface-hover);
}

.filter-pills {
  display: flex;
  gap: 0.5rem;
}

.filter-pill {
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  background-color: white;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  background-color: var(--color-surface-hover);
}

.filter-pill.active {
  background-color: #555c66; /* Match screenshot dark pill */
  color: white;
  border-color: #555c66;
}

.view-toggle {
  display: flex;
  background: white;
  border-radius: 25px;
  border: 1px solid var(--color-border);
  padding: 0.2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
  border: none;
  background: transparent;
}

.toggle-btn.active {
  background: #555c66;
  color: white;
}

/* Map Mode Styles */
.directory-layout.map-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.directory-layout.map-mode .directory-content {
  display: block;
  grid-column: 1;
}

.directory-layout.map-mode .sites-container {
  /* En modo mapa, la columna de fichas ocupa la mitad del ancho: forzar 2
     columnas para mantener 2 fichas + mapa (no depender de minmax que dejaba 1). */
  grid-template-columns: repeat(2, 1fr);
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 10px;
}

.directory-layout.map-mode .map-container-side {
  display: block;
  grid-column: 2;
  height: 80vh;
  position: sticky;
  top: 100px;
}

/* Grid Mode Styles */
.sites-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Site Card Styles exactly like screenshot */
.site-card {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.site-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-image-wrapper {
  position: relative;
  height: 220px;
  width: 100%;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card-image-wrapper:hover .card-image {
  transform: scale(1.05);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-image-wrapper:hover .card-overlay {
  opacity: 1;
}

.card-overlay span {
  color: white;
  font-weight: 600;
  border: 1px solid white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* PRO-341/PRO-347: badge de descuento como CINTA DIAGONAL (corner ribbon) en la
   esquina superior derecha, replicando el estilo del Directorio interno
   (redesigned-card__promotion-ribbon). Rojo de marca Visual Group (#dc3545), texto
   blanco "Hasta X%". Se recorta contra el overflow:hidden de .card-image-wrapper. */
.card-promo-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 110px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}

.card-promo-ribbon-text {
  position: absolute;
  display: block;
  width: 160px;
  background-color: #dc3545;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 7px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  /* Coloca y rota la franja 45° para cruzar la esquina superior derecha. */
  transform: rotate(45deg);
  top: 26px;
  right: -40px;
}

/* PRO-341: badge de descuento en el modal de detalles (abierto desde la card o
   desde el pin del mapa). Mismo rojo de marca, en línea junto al título/categoría. */
.details-promo-badge {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  margin-left: 0.5rem;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.card-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-title-row h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ID del sitio (PRO-295): solo texto, bold y en negro, como en la referencia.
   NO es clicable, por eso sin cursor pointer. */
.card-id {
  color: #333;
  font-weight: 700;
  cursor: default;
}

/* Link explícito "(Ver características)" que abre el modal de detalles (PRO-295).
   En rojo de marca como la referencia visual (sin el icono de manita). */
.card-details-link {
  text-decoration: none;
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
}

.card-details-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.card-location, .card-size {
  font-size: 0.9rem;
  color: #666; 
  margin: 0;
  line-height: 1.4;
}

.card-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge-available {
  display: inline-flex;
  align-items: center;
  background: #d4edda;
  color: #155724;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  /* Evita que "Disponible" se parta en dos líneas y descuadre el footer cuando
     el botón contiguo cambia de ancho ("+ Agregar" -> "✕ Remover"). */
  white-space: nowrap;
  line-height: 1.2;
}

.card-footer-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.btn-add-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* Ancho mínimo estable para que la card NO cambie de layout al alternar
     entre "+ Agregar" y "✕ Remover" (mismo tamaño en ambos estados). */
  min-width: 108px;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  background: white;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-add-cart:hover {
  background: var(--color-primary);
  color: white;
}

/* Ícono (feather svg) a tamaño fijo dentro de los botones del footer para que
   la altura de la fila no varíe entre "plus" y "x". */
.btn-add-cart svg,
.btn-calendar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* PRO-288: estado "agregado" — el botón muestra "✕ Remover" con relleno tenue
   del rojo de marca para indicar que el sitio ya está seleccionado. */
.btn-add-cart.is-added {
  background: rgba(220, 53, 69, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-add-cart.is-added:hover {
  background: var(--color-primary);
  color: white;
}

.btn-calendar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  border-radius: 4px;
  background: white;
  border: 1px solid #ccc;
  color: #555;
  transition: all 0.2s ease;
}

.btn-calendar:hover {
  background: #f4f5f7;
}


/* === components/MapComponent.css === */
.map-wrapper {
  height: 100%;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border);
}

.leaflet-container {
  background-color: var(--color-bg) !important;
}

/* Customizing Leaflet Popup for Dark Theme */
.leaflet-popup-content-wrapper {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden;
}

.leaflet-popup-tip {
  background: var(--color-surface) !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  width: 200px !important;
}

.custom-popup .popup-content {
  display: flex;
  flex-direction: column;
}

.popup-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.custom-popup h4 {
  font-size: 1rem;
  margin: 10px 10px 2px 10px;
  color: white;
}

.popup-type {
  font-size: 0.7rem;
  color: var(--color-primary);
  margin: 0 10px 5px 10px;
  text-transform: uppercase;
  font-weight: bold;
}

.custom-popup p {
  font-size: 0.8rem;
  margin: 0 10px 5px 10px;
  color: #adb5bd;
}

.btn-add-cart-popup {
  margin: 10px;
  background: rgba(230, 57, 70, 0.1);
  color: var(--color-primary);
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-add-cart-popup:hover {
  background: var(--color-primary);
  color: white;
}


/* === components/SiteDetailsModal.css === */
.site-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.site-modal-content {
  background: white;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  border-radius: 8px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}

.site-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

.site-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-ficha-tecnica {
  background: #f4f5f7;
  border: 1px solid #ddd;
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
}

.btn-close-modal {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.site-modal-body {
  padding: 1.5rem;
}

.modal-images {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  height: 250px;
  position: relative;
}

.modal-image-wrapper {
  flex: 1;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f5f7; /* Add a background in case image is contained */
}

.modal-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 2;
  cursor: pointer;
}

.img-nav:hover {
  background: #f4f5f7;
}

.img-nav.prev { left: 10px; }
.img-nav.next { right: 10px; }

.modal-specs {
  margin-bottom: 1.5rem;
}

.specs-title {
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.specs-desc {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1rem;
  font-weight: 500;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.spec-box {
  background: #f4f5f7;
  padding: 0.75rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.spec-label {
  font-size: 0.75rem;
  color: #777;
}

.spec-value {
  font-size: 0.9rem;
  color: #333;
  font-weight: 600;
}

.modal-availability {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.availability-badge {
  display: inline-block;
  background: #3b82f6;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.calendars-wrapper {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Reducimos escala en el modal para que quepan dos */
.calendars-wrapper .calendar-widget {
  max-width: 320px;
  padding: 0.5rem;
}

.modal-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.btn-add-modal {
  background: #dc3545;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-add-modal:hover {
  background: #c82333;
}

/* PRO-288: estado "agregado" en el modal — invierte a fondo claro con texto
   rojo para indicar que el sitio ya está en la selección. */
.btn-add-modal.is-added {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid #dc3545;
}

.btn-add-modal.is-added:hover {
  background: #dc3545;
  color: white;
}


/* === components/CalendarModal.css === */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cal-modal-content {
  background: white;
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}

.cal-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
}

.cal-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

.btn-close-cal {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #888;
}

.cal-modal-body {
  padding: 1.5rem;
}


/* === components/CalendarWidget.css === */
.calendar-widget {
  width: 100%;
  max-width: 350px;
  background: white;
  padding: 1rem;
  border-radius: 8px;
  font-family: var(--font-family);
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f4f5f7;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: #333;
  transition: background 0.2s ease;
}

.cal-nav:hover {
  background: #e2e4e8;
}

.cal-month {
  font-weight: 700;
  font-size: 1rem;
  color: #333;
}

.calendar-grid {
  /* Unificado con el calendario del panel (visual-group-front) */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  font-size: 12px;
  margin-bottom: 1rem;
}

.cal-day-name {
  font-weight: 600;
  color: #6c757d;
  padding: 4px 0;
}

.cal-day-cell {
  padding: 6px 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  color: #495057;
}

.cal-day-cell.empty {
  background: transparent;
}

.cal-day-cell.available {
  background-color: #dcefe8;
  color: #155724;
}

.cal-day-cell.occupied {
  background-color: #f6d7d7;
  color: #721c24;
}

.calendar-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #555;
  font-weight: 500;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color.available {
  background-color: #dcefe8;
}

.legend-color.occupied {
  background-color: #f6d7d7;
}


/* === components/Lightbox.css === */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2.5rem;
  color: white;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 2010;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  object-fit: contain;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: white;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.2s ease;
  z-index: 2010;
}

.lightbox-nav:hover {
  opacity: 1;
  background: rgba(230, 57, 70, 0.8); /* Primary red */
}

.lightbox-nav.prev {
  left: -80px;
}

.lightbox-nav.next {
  right: -80px;
}

.lightbox-indicators {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.3s ease;
}

.indicator.active {
  background: white;
}



/* === Card Scroll Animations (replaces framer-motion) === */
.site-card {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}

.site-card.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* === Mobile Responsiveness === */
@media (max-width: 768px) {
  /* Header: dar respiración vertical y horizontal en mobile */
  .header {
    padding: 0.75rem 1.25rem;
    height: auto;
    min-height: 60px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .header-nav {
    display: none; /* Ocultar menú en móviles por simplicidad o usar menú hamburguesa */
  }
  .header-left, .header-right {
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  /* PRO-347: input de código más compacto en mobile. */
  .agency-code-input-group input { width: 110px; font-size: 0.75rem; padding: 0.3rem 0.5rem; }
  .agency-code-input-group button { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
  .agency-code-feedback { font-size: 0.7rem; }
  .logo-container {
    margin-right: 0;
  }
  .logo-img {
    height: 30px;
  }
  .logo-text {
    font-size: 0.75rem;
  }
  
  /* Hero Banner: más bajo en mobile para ver antes el catálogo */
  .hero-container {
    height: 38vh;
    min-height: 260px;
  }
  /* En mobile las rebanadas diagonales no lucen bien: se anula el clip-path
     (aplicado por JS) y se muestra una sola imagen limpia (la de mayor z-index). */
  .hero-item {
    clip-path: none !important;
  }
  .hero-overlay {
    padding: 1.5rem;
  }
  .hero-content h2 {
    font-size: 1.5rem;
  }
  .hero-content p {
    font-size: 0.9rem;
  }
  
  /* Directory Section */
  .directory-section {
    padding: 1rem;
  }
  .directory-controls-row {
    flex-direction: column;
    width: 100%;
  }
  .controls-main-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .filters-area {
    width: auto;
    overflow: visible;
  }
  .mobile-filter-btn {
    display: flex;
  }
  .filter-pills {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55px;
    left: 0;
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 200;
    min-width: 180px;
    border: 1px solid var(--color-border);
  }
  .filter-pills.show-mobile {
    display: flex;
  }
  .filter-pill {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
  }
  /* Barra de filtros sticky en mobile: mantener la MISMA proporción/alineación
     que en estado normal (no encogerse ni desplazarse a la izquierda). Se anulan
     los márgenes negativos que en desktop compensaban un padding mayor. */
  .directory-controls-row.is-sticky {
    margin-left: 0;
    margin-right: 0;
    padding: 0.6rem 1rem;
    border-radius: 0;
  }

  
  /* Map vs Grid Mode */
  .directory-layout.map-mode {
    display: flex;
    flex-direction: column; 
  }
  .directory-layout.map-mode .directory-content {
    display: none; /* Hide grid completely when map is active on mobile */
  }
  .directory-layout.map-mode .map-container-side {
    position: relative;
    top: 0;
    height: 60vh; /* Takes most of the screen */
    width: 100%;
    margin-bottom: 1rem;
    z-index: 1;
    border-radius: 12px;
  }
  .directory-layout.map-mode .sites-container {
    max-height: none;
    overflow-y: visible;
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  
  /* Grid Mode only */
  .sites-container {
    grid-template-columns: 1fr;
  }
  
  /* Modals — reestructurar a una sola columna vertical (PRO-252) */
  .site-modal-content {
    width: 95%;
    max-width: none;
    max-height: 90vh;
    flex-direction: column;
  }
  /* En mobile se muestra UNA sola imagen a la vez (la 2da se oculta). */
  .modal-images {
    flex-direction: row;
    height: 240px;
  }
  .modal-image-wrapper {
    width: 100%;
    height: 100%;
  }
  /* Ocultar la segunda imagen: en mobile la navegación avanza de 1 en 1. */
  .modal-images .modal-image-wrapper:last-of-type {
    display: none;
  }
  /* Specs en una sola columna */
  .specs-grid {
    grid-template-columns: 1fr;
  }
  /* Calendarios de disponibilidad apilados */
  .calendars-wrapper {
    flex-direction: column;
  }
  .calendars-wrapper .calendar-widget {
    width: 100%;
  }
  /* Carrito a pantalla completa, formulario en columna */
  .cart-modal {
    width: 100%;
    max-width: none;
  }
  .cart-form {
    display: flex;
    flex-direction: column;
  }
  .lightbox-nav.prev {
    left: 10px;
  }
  .lightbox-nav.next {
    right: 10px;
  }
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 2rem;
  }
}

/* ============================================================
   HERO DINÁMICO DE PROMOCIONES (PRO-342 · Req 22–24)
   ------------------------------------------------------------
   Capa dedicada que se INYECTA por JS dentro de #heroContainer
   cuando hay banners de promociones activas. Cubre el área del
   Hero por encima de las rebanadas de destacados, sin alterar
   las reglas existentes del hero de destacados (scope-guard:
   solo clases nuevas). Un solo banner => fijo; varios => fade.
   ============================================================ */
.hero-promo-layer {
  position: absolute;
  inset: 0;
  z-index: 20; /* por encima de las .hero-item (z-index 1..10) */
  overflow: hidden;
}

.hero-promo-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* Diapositiva visible (banner fijo o slide activo del carrusel). */
.hero-promo-banner.active {
  opacity: 1;
}

/* Cuando el Hero está en modo promociones, se ocultan los overlays de
   categoría de los destacados que quedan por debajo, evitando ver textos
   ("Muros", "Landmarks", ...) sobre el banner de marketing. */
.hero-container.hero-promo-active .hero-overlay {
  opacity: 0;
}

/* ============================================================
   PRO-347: Revelado de precios por código de agencia (Landing)
   Estilos aditivos. No alteran reglas existentes (scope-guard).
   ============================================================ */

/* Precio en las cards del directorio.
   - Sitio en promoción: precio base tachado + precio con descuento destacado.
   - Sitio sin promoción: solo precio base. */
.card-price { margin-top: 0.3rem; font-size: 0.85rem; }
.card-price-original { text-decoration: line-through; color: #999; margin-right: 0.4rem; }
.card-price-discount { color: #dc3545; font-weight: 700; }
.card-price-base { color: #333; font-weight: 600; }
/* Código que originó el descuento, debajo del precio (solo sitios en promoción).
   inline-flex para alinear el texto con el ícono de observaciones a su costado. */
.card-price-code {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6c757d;
  letter-spacing: 0.3px;
}

/* PRO-351 (task 13.1/13.2): ícono de Observaciones de la promoción, junto al
   precio. Solo se renderiza en Modo Agencia (las observaciones viajan dentro del
   priceMap revelado). Rojo de marca Visual Group (#dc3545). El popover táctil se
   posiciona de forma relativa al ícono y cierra al tocar fuera (manejado en JS). */
.card-observations {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* La separación respecto al texto del código la da el `gap` de .card-price-code. */
  color: #dc3545;
  cursor: pointer;
  line-height: 1;
}
.card-observations i,
.card-observations svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.25;
}
/* Variante cuando no hay bloque de precio: el ícono viaja solo. */
.card-price--observations-only { display: flex; align-items: center; }

/* Popover táctil del texto de observaciones (texto plano, insertado por JS en el
   <body> con position:fixed para NO recortarse contra el overflow:hidden de la
   card). JS calcula top/left y la posición de la flecha (--arrow-x). */
.observations-popover {
  position: fixed;
  z-index: 3000; /* por encima de cards, sticky y mapa */
  min-width: 180px;
  max-width: 280px;
  background: #1f2733;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  letter-spacing: normal;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  white-space: pre-wrap; /* respeta saltos de línea del texto multilínea */
  word-break: break-word;
  cursor: default;
}
/* Flecha apuntando HACIA ABAJO (popover por encima del ícono — colocación por
   defecto). `--arrow-x` lo fija el JS alineándola con el centro del ícono. */
.observations-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2733;
}
/* Cuando el popover se coloca DEBAJO del ícono, la flecha apunta hacia arriba. */
.observations-popover--bottom::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #1f2733;
}

/* Precio en el modal de detalles (abierto desde la card o el pin del mapa). */
.details-price { margin-top: 0.75rem; font-size: 0.95rem; }
.details-price-original { text-decoration: line-through; color: #999; margin-right: 0.5rem; }
.details-price-discount { color: #dc3545; font-weight: 700; font-size: 1.05rem; }
.details-price-base { color: #222; font-weight: 600; }

/* Input manual de código de agencia (solo visible si la URL NO trajo ?codigo=).
   Vive en el header junto al carrito (tema oscuro del header). */
.agency-code-input-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.agency-code-input-group input {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  width: 160px;
}
.agency-code-input-group input::placeholder { color: rgba(255,255,255,0.5); }
.agency-code-input-group input:focus {
  outline: none;
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220,53,69,0.25);
}
.agency-code-input-group button {
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.agency-code-input-group button:hover { background: #c82333; }

/* Feedback de validación del código (vacío/validando/válido/inválido). */
.agency-code-feedback { font-size: 0.8rem; margin-left: 0.25rem; }
.agency-code-feedback.is-valid { color: #28a745; }
.agency-code-feedback.is-invalid { color: #dc3545; }

/* PRO-347: estado bloqueado tras exceder intentos de código inválido. */
.agency-code-feedback.is-blocked { color: #dc3545; font-weight: 600; }
.agency-code-input-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.agency-code-input-group button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Estado "validando": pequeño spinner junto al input. */
.agency-code-input-group.validating .agency-code-feedback::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.3rem;
  border: 2px solid #888;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: agencyCodeSpin 0.6s linear infinite;
}

@keyframes agencyCodeSpin {
  to { transform: rotate(360deg); }
}