/* static/css/nidoiq-b2b.css */

:root {

  /* Brand & Layout Variables - Anti-Glare Palette */

  --primary-color: #0F4C81; /* Classic Blue */

  --primary-hover: #1D4ED8; /* Dark Royal Blue */

  

  --bg-color: #F3F4F6; /* Cool Gray - Reduces eye strain */

  --surface-color: #FFFFFF; /* Pure White for cards */

  

  --text-primary: #1E293B; /* Dark Slate - Softer than pure black */

  --text-secondary: #64748B; /* Medium Slate */

  

  --border-color: #E2E8F0;

  

  /* Semantic Status Colors */

  --status-success: #059669; /* Emerald Green */

  --status-warning: #D97706; /* Dark Amber */

  --status-danger: #DC2626; /* Crimson Red */

  --status-info: #0284C7; /* Sky Blue */

}



body {

  font-family: 'Inter', sans-serif;

  background-color: var(--bg-color);

  color: var(--text-primary);

  margin: 0;

  padding: 0;

}



/* Sidebar Layout */

.layout-wrapper {

  display: flex;

  min-height: 100vh;

}



.sidebar {

  width: 250px;

  background-color: var(--surface-color);

  border-right: 1px solid var(--border-color);

  display: flex;

  flex-direction: column;

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  z-index: 1000;

  box-shadow: 2px 0 8px rgba(0,0,0,0.02);

}



.sidebar-header {

  padding: 1.5rem;

  border-bottom: 1px solid var(--border-color);

  display: flex;

  align-items: center;

  justify-content: center;

}



.sidebar-header img {

  height: 45px;

  object-fit: contain;

}



.sidebar-nav {

  flex-grow: 1;

  padding: 1rem 0;

  overflow-y: auto;

}



.sidebar-nav-item {

  display: flex;

  align-items: center;

  padding: 0.75rem 1.5rem;

  color: var(--text-secondary);

  text-decoration: none;

  font-weight: 500;

  font-size: 0.95rem;

  transition: all 0.2s ease;

  border-left: 3px solid transparent;

}



.sidebar-nav-item:hover, .sidebar-nav-item.active {

  background-color: #F8FAFC;

  color: var(--primary-color);

  border-left-color: var(--primary-color);

}



.sidebar-footer {

  padding: 1rem;

  border-top: 1px solid var(--border-color);

}



/* Main Content */

.main-content {

  flex-grow: 1;

  margin-left: 250px;

  width: calc(100% - 250px);

  max-width: calc(100% - 250px);

  min-width: 0;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  box-sizing: border-box;

}



.top-navbar {

  height: 64px;

  background-color: var(--surface-color);

  border-bottom: 1px solid var(--border-color);

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding: 0 2rem;

  box-shadow: 0 1px 3px rgba(0,0,0,0.02);

  position: sticky;

  top: 0;

  z-index: 999;

}



.content-container {

  padding: 2rem;

  flex-grow: 1;

  background-color: var(--bg-color);

  width: 100%;

  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

  overflow-x: hidden;

}



/* --- Premium UI Components --- */



/* Cards */

.card {

  background-color: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: 8px; /* Slightly rounder */

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.card:hover {

  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;

}



.card-header {

  border-bottom: 1px solid var(--border-color);

  background-color: var(--surface-color);

  border-radius: 8px 8px 0 0 !important;

  padding: 1.25rem 1.5rem;

}



/* Buttons */

.btn {

  border-radius: 6px;

  font-weight: 500;

  padding: 0.5rem 1rem;

  transition: all 0.2s ease;

}



.btn-primary {

  background-color: var(--primary-color);

  border-color: var(--primary-color);

  color: white;

  box-shadow: 0 2px 4px rgba(15, 76, 129, 0.2);

}



.btn-primary:hover {

  background-color: var(--primary-hover);

  border-color: var(--primary-hover);

  transform: translateY(-1px);

  box-shadow: 0 4px 6px rgba(15, 76, 129, 0.3);

}



/* Big Accessible Buttons (For Housekeeping) */

.btn-massive {

  padding: 1.5rem;

  font-size: 1.25rem;

  font-weight: 600;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  border-radius: 12px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}



.btn-status-limpia {

  background-color: var(--status-success);

  color: white;

  border: none;

}

.btn-status-limpia:hover { background-color: #047857; color: white; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3); }



.btn-status-sucia {

  background-color: var(--status-danger);

  color: white;

  border: none;

}

.btn-status-sucia:hover { background-color: #B91C1C; color: white; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3); }





/* HTMX Loading Indicator */

.htmx-indicator {

    opacity: 0;

    transition: opacity 200ms ease-in;

}

.htmx-request .htmx-indicator {

    opacity: 1;

}

.htmx-request.htmx-indicator {

    opacity: 1;

}



/* Tape Chart overrides */

.vis-timeline {

  border: 1px solid var(--border-color);

  border-radius: 8px;

  font-family: 'Inter', sans-serif;

  background-color: var(--surface-color);

}



.vis-item {

  border-radius: 4px;

  font-size: 0.85rem;

  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  font-weight: 500;

}



.reserva-item { background-color: var(--status-info); border-color: #0369A1; color: white; }

.bloqueo-item { background-color: var(--status-warning); border-color: #B45309; color: white; }



/* Mobile Responsiveness */

@media (max-width: 768px) {

  .sidebar {

    transform: translateX(-100%);

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    width: 280px;

    box-shadow: 4px 0 24px rgba(0,0,0,0.15);

  }

  .sidebar.show {

    transform: translateX(0);

  }

  .main-content {

    margin-left: 0;

    width: 100%;

    max-width: 100%;

  }

  .top-navbar {

    padding: 0 1rem;

    justify-content: space-between;

  }

  .content-container {

    padding: 1rem;

  }

  /* Mobile Typography adjustments */

  h2 { font-size: 1.5rem; }

}



/* Animaciones de Alerta / Pulsación */

@keyframes pulse {

  0%, 100% {

    opacity: 1;

    transform: scale(1);

  }

  50% {

    opacity: 0.6;

    transform: scale(1.05);

  }

}



.animate-pulse {

  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  display: inline-block;

}



/* --- Public Marketplace & Guest Experience Styles --- */

.hero-section {

  background: linear-gradient(135deg, #0B192C 0%, #0F3D3E 55%, #114B5F 100%);

  position: relative;

  padding: 65px 0 45px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  color: #ffffff;

}



.hero-section::before {

  content: "";

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  background: radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.15), transparent 70%),

              rgba(11, 25, 44, 0.72);

  pointer-events: none;

  z-index: 1;

}



.hero-section > .container {

  position: relative;

  z-index: 2;

}



.gradient-text {

  background: linear-gradient(120deg, #10B981 0%, #34D399 50%, #F59E0B 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.search-hero-box {

  border-radius: 50px !important;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;

  border: 1px solid rgba(255, 255, 255, 0.25) !important;

  transition: all 0.25s ease;

  background: #ffffff !important;

}



.search-hero-box:focus-within {

  box-shadow: 0 20px 45px rgba(16, 185, 129, 0.25) !important;

  border-color: #10B981 !important;

}



.filter-chip-hero {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 18px;

  border-radius: 50px;

  background: rgba(16, 185, 129, 0.18);

  border: 1.5px solid #10B981;

  color: #34D399 !important;

  font-size: 0.88rem;

  font-weight: 600;

  text-decoration: none !important;

  transition: all 0.25s ease;

  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);

}



.filter-chip-hero:hover, .filter-chip-hero.active {

  background: #10B981;

  color: #0B192C !important;

  border-color: #10B981;

  transform: translateY(-2px);

  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);

}



.filter-chip-dark {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 7px 16px;

  border-radius: 50px;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #E2E8F0;

  font-size: 0.86rem;

  font-weight: 500;

  text-decoration: none !important;

  transition: all 0.2s ease;

  backdrop-filter: blur(4px);

}



.filter-chip-dark:hover {

  background: rgba(255, 255, 255, 0.22);

  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.4);

  transform: translateY(-1px);

}



.filter-chip-dark.active {

  background: #10B981;

  color: #0B192C !important;

  border-color: #10B981;

  font-weight: 600;

}



.filter-chip {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 7px 16px;

  border-radius: 50px;

  background: #ffffff;

  border: 1px solid #E2E8F0;

  color: #475569;

  font-size: 0.86rem;

  font-weight: 500;

  text-decoration: none !important;

  transition: all 0.2s ease;

  box-shadow: 0 2px 4px rgba(0,0,0,0.02);

}



.filter-chip:hover {

  background: #F1F5F9;

  color: #0F4C81;

  border-color: #CBD5E1;

  transform: translateY(-1px);

}



.filter-chip.active {

  background: #0F4C81;

  color: #ffffff !important;

  border-color: #0F4C81;

}



/* Force links in cards to NEVER have ugly browser default blue underlines */

.property-card-link {

  text-decoration: none !important;

  color: inherit !important;

  display: block;

}



.property-card-link:hover,

.property-card-link:focus,

.property-card-link:visited {

  text-decoration: none !important;

  color: inherit !important;

}



.property-card-link * {

  text-decoration: none !important;

}



.luxury-property-card {

  border: 1px solid #E2E8F0;

  border-radius: 20px;

  background: #ffffff;

  overflow: hidden;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  height: 100%;

  display: flex;

  flex-direction: column;

}



.luxury-property-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 20px 35px -5px rgba(15, 76, 129, 0.14), 0 10px 15px -5px rgba(0, 0, 0, 0.04);

  border-color: rgba(15, 76, 129, 0.3);

}



.property-img-wrapper {

  position: relative;

  height: 240px;

  width: 100%;

  overflow: hidden;

  background: #e2e8f0;

}



.property-img-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}



.luxury-property-card:hover .property-img-wrapper img {

  transform: scale(1.06);

}



.property-badge-top-left {

  position: absolute;

  top: 14px;

  left: 14px;

  z-index: 2;

}



.property-badge-top-right {

  position: absolute;

  top: 14px;

  right: 14px;

  z-index: 2;

}



.badge-glass {

  background: rgba(15, 23, 42, 0.75) !important;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

}





/* --- BOTÓN FLOTANTE OFICIAL DE WHATSAPP (HILO CONDUCTOR NIDOIQ) --- */

.whatsapp-floating-btn {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 1050;

  background-color: #25D366;

  color: #ffffff !important;

  border-radius: 50px;

  padding: 12px 20px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none !important;

  font-weight: 600;

  font-size: 0.95rem;

  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.whatsapp-floating-btn i {

  font-size: 1.4rem;

  line-height: 1;

}



.whatsapp-floating-btn:hover {

  background-color: #20BA5A;

  color: #ffffff !important;

  transform: translateY(-3px) scale(1.03);

  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.55);

}



@media (max-width: 768px) {

  .whatsapp-floating-btn {

    bottom: 20px;

    right: 18px;

    padding: 12px 14px;

    border-radius: 50%;

  }

  .whatsapp-floating-btn .whatsapp-btn-text {

    display: none !important;

  }

}





/* --- High Conversion CRO additions --- */

.property-btn-cta {

  transition: all 0.25s ease;

  background-color: #0F4C81;

  border-color: #0F4C81;

}



.luxury-property-card:hover .property-btn-cta {

  background-color: #10B981 !important;

  border-color: #10B981 !important;

  color: #ffffff !important;

  transform: translateX(2px);

  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);

}



.b2b-acquisition-card {

  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);

  border: 1px solid rgba(16, 185, 129, 0.3);

  border-radius: 24px;

  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);

  position: relative;

  overflow: hidden;

}



.b2b-acquisition-card::before {

  content: "";

  position: absolute;

  top: -40%;

  right: -20%;

  width: 450px;

  height: 450px;

  background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, transparent 70%);

  pointer-events: none;

}



@media (min-width: 992px) {

  .booking-widget {

    position: sticky;

    top: 90px;

    border-radius: 20px;

    box-shadow: 0 16px 40px rgba(15, 76, 129, 0.12);

    border: 1px solid #E2E8F0;

  }

}



/* ==========================================================================
   BRAND LOCKUP & VIDEO SHOWCASE (Navbar, Sidebar B2B, Hero, Login, Footer)
   ========================================================================== */
.nidoiq-video-showcase {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  background: #06101E;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.25);
  border: 1.5px solid rgba(16, 185, 129, 0.35);
}

.nidoiq-video-showcase video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  object-position: center 44%;
  pointer-events: none;
  display: block;
}

.nidoiq-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.nidoiq-logo-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: #06101E;
  border: 1.5px solid #10B981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nidoiq-logo-badge video {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.35);
  object-fit: cover !important;
  object-position: center 35% !important;
  display: block;
  pointer-events: none;
}

.nidoiq-logo-badge img {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.02);
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

.nidoiq-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.nidoiq-wordmark {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0B192C;
}

.nidoiq-wordmark-accent {
  color: #0D9488;
}

.nidoiq-brand-tagline {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #64748B;
  display: block;
  margin-top: 2px;
  line-height: 1;
}


/* Dynamic Rotating Word in Hero H1 */
.dynamic-word-fade {
  display: inline-block;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 140px;
  text-align: center;
  will-change: opacity, transform;
}

.dynamic-word-fade.fade-out {
  opacity: 0;
  transform: translateY(-8px);
}

.dynamic-word-fade.fade-in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 576px) {
  .dynamic-word-fade {
    min-width: auto;
  }
}

/* Horizontal Scroll Utilities for Mobile (Chips & Tabs) */
.tab-scroll-mobile {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding-bottom: 6px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.tab-scroll-mobile::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.tab-scroll-mobile > * {
  flex-shrink: 0;
}

/* Sticky Booking Bar for Mobile */
.mobile-sticky-booking-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 0.75rem 1.25rem;
  z-index: 1040;
}

@media (max-width: 991.98px) {
  body.has-mobile-booking-bar {
    padding-bottom: 75px;
  }
  body.has-mobile-booking-bar .whatsapp-floating-btn {
    bottom: 85px !important;
  }
}

/* ==========================================================================
   BLINDAJE RESPONSIVO DE LETREROS, BADGES Y PÍLDORAS (MOBILE & TABLET)
   ========================================================================== */
/* 1. Evitar que cualquier elemento fuerce zoom-out o scroll horizontal en móvil */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
/* 2. Permitir que los badges y píldoras largas hagan salto de línea limpio */
.badge,
.legal-badge-pill,
.hero-trust-pill {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    line-height: 1.4;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
/* 3. Ajuste proporcional en celulares y tablets pequeñas (<= 768px) */
@media (max-width: 768px) {
    .b2b-acquisition-card .badge.rounded-pill,
    .hero-section .rounded-pill,
    .legal-badge-pill,
    .badge.rounded-pill {
        font-size: 0.72rem !important;
        padding: 0.45rem 0.85rem !important;
        border-radius: 16px !important; /* Evita bordes deformes cuando pasa a 2 líneas */
        max-width: 100% !important;
        letter-spacing: 0.3px !important;
    }
}
/* ==========================================================================
   CORRECCIÓN DE PESTAÑAS ANIDADAS EN FORMULARIOS (.tab-content .tab-pane)
   ========================================================================== */
.tab-content .tab-pane:not(.active) {
    display: none !important;
}

.tab-content .tab-pane.active {
    display: block !important;
}