/* ==============================================================================
   LĪMBŌ — PALETA DEFINITIVA SELECCIONADA POR EL CLIENTE:
   FONDO CANVAS LĪMBŌ (#FAF7F2 / #DFD6C4) & CALL TO ACTION EN COLOR PAZ (#C0A084)
   
   Basado en la directriz oficial del cliente y el Manual de Marca Līmbō (Página 30):
   1. FONDO DE LA PÁGINA (Canvas):
      Tono cálido característico Līmbō: Marfil suave (#FAF7F2), complementado con
      estructuras y bordes en tono Līmbō Sand Stone (#DFD6C4 / Pantone 7527 C).
      Atmósfera acogedora, serena y de alto diseño.
      
   2. CALL TO ACTION (CTAs):
      Color Paz (#C0A084 / Pantone Warm Almond Blush / Sand) para todas las
      llamadas a la acción (botones de reserva, búsqueda, filtros, checkout y acciones).
      Micro-interacción refinada con degradado cálido de autor y hover envolvente.
      
   3. TIPOGRAFÍA Y CONTRASTE AAA:
      Tono Calidéz (#2F2519) para textos de lectura y Raíz (#6D5940) para metadatos.
   ============================================================================== */

:root {
    --limbo-sand: #DFD6C4;          /* Color oficial Līmbō (Pantone 7527 C) */
    --limbo-sand-border: #CBBFA5;   /* Borde Līmbō contrastado */
    --limbo-cream: #FAF7F2;         /* Fondo oficial de la página / Canvas */
    
    /* Call to Action: Color Paz */
    --limbo-paz: #C0A084;           /* Tono Paz oficial (Pantone Warm Almond Blush) */
    --limbo-paz-hover: #AF8C6F;     /* Hover profundo para botones */
    --limbo-paz-active: #9E7B5E;    /* Estado activo / presionado */
    --limbo-paz-light: rgba(192, 160, 132, 0.18); /* Badges / chips sutiles */
    --limbo-paz-border: rgba(192, 160, 132, 0.55);
    
    /* Contraste y Lectura */
    --limbo-calidez: #2F2519;       /* Café oscuro Calidéz para títulos y lectura */
    --limbo-raiz: #6D5940;          /* Acentos cálidos y subtítulos */
    --limbo-hogar: #5E401D;         /* Terracota oscuro complementario */
}

/* ─── 0. Fondo de la Página (Canvas Līmbō Cálido) ───────────────────────────── */
body,
body.bg-limbo-cream,
.bg-limbo-cream,
main#app-content,
div.min-h-screen.bg-\[\#FAF7F2\],
div.min-h-screen[class*="bg-[#FAF7F2]"] {
    background-color: #FAF7F2 !important;
    color: #2F2519 !important;
}

/* Tarjetas y Contenedores Elevados sobre el Canvas Līmbō */
.property-card,
.card-property,
[data-property-id] {
    background-color: #FFFFFF !important;
    border-color: #DFD6C4 !important;
    box-shadow: 0 4px 20px rgba(47, 37, 25, 0.05) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.property-card:hover,
.card-property:hover,
[data-property-id]:hover {
    border-color: #C0A084 !important;
    box-shadow: 0 12px 30px rgba(47, 37, 25, 0.10) !important;
}

/* Footer con Fondo Līmbō Cream y Borde Sand */
footer#global-footer,
footer.bg-\[\#FAF7F2\],
footer[class*="bg-[#FAF7F2]"] {
    background-color: #FAF7F2 !important;
    border-top: 1px solid #DFD6C4 !important;
}

/* ─── 1. Call to Action Principales (.btn-gold -> Color Paz #C0A084) ────────── */
.btn-gold,
button.btn-gold,
a.btn-gold,
#detail-reserve-btn,
#guesty-direct-pay-btn,
#mobile-sticky-reserve-btn,
#pay-btn,
#buy-exp-btn,
#quote-exp-btn,
.owner-btn-primary,
button[data-reserve-btn],
.action-btn-primary {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(192, 160, 132, 0.6) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 4px 16px rgba(175, 140, 111, 0.35) !important;
    text-shadow: 0 1px 2px rgba(47, 37, 25, 0.20) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-gold *,
button.btn-gold *,
a.btn-gold *,
#detail-reserve-btn *,
#guesty-direct-pay-btn *,
#mobile-sticky-reserve-btn *,
#pay-btn *,
#buy-exp-btn *,
#quote-exp-btn *,
.owner-btn-primary * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.btn-gold:hover,
button.btn-gold:hover,
a.btn-gold:hover,
#detail-reserve-btn:hover,
#guesty-direct-pay-btn:hover,
#mobile-sticky-reserve-btn:hover,
#pay-btn:hover,
#buy-exp-btn:hover,
#quote-exp-btn:hover,
.owner-btn-primary:hover {
    background: linear-gradient(135deg, #AF8C6F 0%, #9E7B5E 100%) !important;
    background-color: #AF8C6F !important;
    color: #FFFFFF !important;
    border-color: #9E7B5E !important;
    box-shadow: 0 6px 20px rgba(158, 123, 94, 0.45) !important;
    transform: translateY(-1px) !important;
}

.btn-gold:active,
button.btn-gold:active,
a.btn-gold:active,
#detail-reserve-btn:active,
#guesty-direct-pay-btn:active,
#mobile-sticky-reserve-btn:active,
#pay-btn:active {
    transform: translateY(0px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(158, 123, 94, 0.30) !important;
}

/* ─── 2. Botón de Búsqueda (#pill-search-btn) en Color Paz (#C0A084) ────────── */
#pill-search-btn,
button#pill-search-btn,
#search-pill #pill-search-btn {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(192, 160, 132, 0.6) !important;
    box-shadow: 0 4px 14px rgba(175, 140, 111, 0.38) !important;
    transition: all 0.25s ease !important;
}

#pill-search-btn *,
button#pill-search-btn *,
#search-pill #pill-search-btn * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

#pill-search-btn:hover,
button#pill-search-btn:hover,
#search-pill #pill-search-btn:hover {
    background: linear-gradient(135deg, #AF8C6F 0%, #9E7B5E 100%) !important;
    background-color: #AF8C6F !important;
    box-shadow: 0 6px 18px rgba(158, 123, 94, 0.48) !important;
    transform: scale(1.06) !important;
}

/* ─── 3. Botón "Aplicar Búsqueda" y Filtros (#popover-apply-btn, #apply-filters-btn) ─ */
#popover-apply-btn,
button#popover-apply-btn,
#apply-filters-btn,
button#apply-filters-btn {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(192, 160, 132, 0.6) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(175, 140, 111, 0.32) !important;
}

#popover-apply-btn *,
button#popover-apply-btn *,
#apply-filters-btn * {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

#popover-apply-btn:hover,
button#popover-apply-btn:hover,
#apply-filters-btn:hover {
    background: linear-gradient(135deg, #AF8C6F 0%, #9E7B5E 100%) !important;
    background-color: #AF8C6F !important;
    border-color: #9E7B5E !important;
    box-shadow: 0 6px 18px rgba(158, 123, 94, 0.45) !important;
}

/* ─── 4. Logo Oficial Līmbō en el Nav & Footer: Isotipo en Fondo Color Paz ─────────── */
[class*="from-[#5F5720]"][class*="to-[#7A7029]"],
[class*="from-[#C0A084]"][class*="to-[#AF8C6F]"],
.bg-gradient-to-br.from-\[\#5F5720\],
.bg-gradient-to-br.from-\[\#C0A084\] {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    background-color: #C0A084 !important;
    border: 1px solid rgba(192, 160, 132, 0.6) !important;
    box-shadow: 0 4px 14px rgba(175, 140, 111, 0.32) !important;
}

[class*="from-[#5F5720]"][class*="to-[#7A7029]"] img,
[class*="from-[#C0A084]"][class*="to-[#AF8C6F]"] img,
.bg-gradient-to-br.from-\[\#5F5720\] img,
.bg-gradient-to-br.from-\[\#C0A084\] img {
    filter: brightness(0) invert(1) !important;
}

/* ─── 5. Reemplazo Global de Elementos Verdes (#5F5720) por Paz & Līmbō ───────── */
/* Elementos de fondo sólido que eran verdes pasan a tono Paz para llamada visual */
.bg-\[\#5F5720\],
button.bg-\[\#5F5720\],
a.bg-\[\#5F5720\] {
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
}

.bg-\[\#5F5720\] i,
.bg-\[\#5F5720\] svg,
.bg-\[\#5F5720\] span {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
}

.hover\:bg-\[\#5F5720\]:hover,
.hover\:bg-\[\#4D4719\]:hover {
    background-color: #AF8C6F !important;
    color: #FFFFFF !important;
}

/* Fondos suaves / chips / badges con tinte Paz (10-30%) */
.bg-\[\#5F5720\]\/5,
[class*="bg-[#5F5720]/5"],
.bg-\[\#5F5720\]\/10,
[class*="bg-[#5F5720]/10"],
.bg-\[\#5F5720\]\/15,
[class*="bg-[#5F5720]/15"],
.bg-\[\#5F5720\]\/20,
[class*="bg-[#5F5720]/20"],
.bg-\[\#5F5720\]\/30,
[class*="bg-[#5F5720]/30"] {
    background-color: rgba(192, 160, 132, 0.16) !important;
    border-color: rgba(192, 160, 132, 0.45) !important;
    color: #5E401D !important;
}

/* ─── 6. Bordes y Rings en Color Paz / Līmbō Sand ───────────────────────────── */
.border-\[\#5F5720\],
[class*="border-[#5F5720]"],
.ring-\[\#5F5720\] {
    border-color: #C0A084 !important;
    --tw-ring-color: #C0A084 !important;
}

.hover\:border-\[\#5F5720\]:hover,
[class*="hover:border-[#5F5720]"]:hover,
.focus\:border-\[\#5F5720\]:focus,
[class*="focus:border-[#5F5720]"]:focus {
    border-color: #AF8C6F !important;
}

/* ─── 7. Textos e Iconos de Acento (Tono Cálido Raíz #6D5940 y Paz #C0A084) ──── */
.text-\[\#5F5720\],
[class*="text-[#5F5720]"],
.text-limbo-gold {
    color: #6D5940 !important;
}

.hover\:text-\[\#5F5720\]:hover,
[class*="hover:text-[#5F5720]"]:hover {
    color: #C0A084 !important;
}

i[data-lucide].text-\[\#5F5720\],
svg.text-\[\#5F5720\] {
    color: #6D5940 !important;
    stroke: #6D5940 !important;
}

/* Iconos de estrellas y rating: dorado ambarino cálido */
.property-card [class*="text-limbo-gold"],
.property-card div:has(span:first-child:contains("★")) {
    color: #C0A084 !important;
    font-weight: 800 !important;
}

/* ─── 8. Barra de Búsqueda (#search-pill) y Popover (#search-popover) ────────── */
#search-pill {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #DFD6C4 !important;
    box-shadow: 0 10px 30px rgba(47, 37, 25, 0.12) !important;
}

#search-pill .search-pill-segment span:first-child {
    color: #6D5940 !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#search-pill #pill-dest-label,
#search-pill #pill-dates-label,
#search-pill #pill-guests-label,
#search-pill .search-pill-segment span:last-child {
    color: #2F2519 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Panel Popover del Buscador */
#search-popover {
    background-color: #FFFFFF !important;
    border: 1.5px solid #DFD6C4 !important;
    box-shadow: 0 20px 50px rgba(47, 37, 25, 0.18) !important;
    color: #2F2519 !important;
}

#search-popover label span {
    color: #2F2519 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Botones de Zonas en el Popover */
#search-popover .popover-zone-btn {
    background-color: #FAF7F2 !important;
    color: #2F2519 !important;
    border: 1.5px solid #DFD6C4 !important;
    font-weight: 600 !important;
}

#search-popover .popover-zone-btn:hover {
    border-color: #C0A084 !important;
    background-color: #FFFFFF !important;
}

#search-popover .popover-zone-btn.bg-\[\#5F5720\],
#search-popover .popover-zone-btn[class*="bg-[#5F5720]"] {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
    border-color: #C0A084 !important;
    font-weight: 700 !important;
}

/* Fechas y Contadores en Popover */
#search-popover input[type="date"] {
    background-color: #FAF7F2 !important;
    color: #2F2519 !important;
    border: 1.5px solid #DFD6C4 !important;
    font-weight: 600 !important;
}

#search-popover input[type="date"]:focus {
    border-color: #C0A084 !important;
}

#search-popover #popover-guest-minus:hover,
#search-popover #popover-guest-plus:hover {
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
    border-color: #C0A084 !important;
}

/* Chips móviles de zona */
.mobile-zone-chip.active,
.mobile-zone-chip.ring-\[\#5F5720\] {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    color: #FFFFFF !important;
    border-color: #C0A084 !important;
    font-weight: 700 !important;
}

/* ─── 9. Avatar de Usuario y Menú Móvil ───────────────────────────────────────── */
#user-menu-pill div:first-child,
#user-avatar-initials,
#mobile-user-avatar-initials {
    background-color: #C0A084 !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(192, 160, 132, 0.6) !important;
}

/* ─── 10. Checkboxes, Text Selection & Scrollbar ────────────────────────────── */
input[type="checkbox"].accent-\[\#5F5720\],
.accent-\[\#5F5720\] {
    accent-color: #C0A084 !important;
}

::selection {
    background: #C0A084 !important;
    color: #FFFFFF !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #C0A084 !important;
}

/* ─── 11. Protección de Contraste para Secciones Oscuras (Banner Propietarios) ─ */
section.bg-\[\#1C160E\],
div.bg-\[\#1C160E\],
[class*="from-[#1C160E]"],
[class*="bg-gradient-to-r"][class*="from-[#1C160E]"] {
    color: #FAF7F2 !important;
}

section.bg-\[\#1C160E\] h1,
section.bg-\[\#1C160E\] h2,
[class*="from-[#1C160E]"] h1,
[class*="from-[#1C160E]"] h2 {
    color: #FFFFFF !important;
}

section.bg-\[\#1C160E\] p,
[class*="from-[#1C160E]"] p {
    color: #DFD6C4 !important;
}

section.bg-\[\#1C160E\] .btn-gold,
div.bg-\[\#1C160E\] .btn-gold {
    background: linear-gradient(135deg, #C0A084 0%, #AF8C6F 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.40) !important;
}

/* ─── 12. Barra Lateral Sticky de Reserva & Costos en Detalle de Propiedad ───── */
#property-booking-column {
    height: 100% !important;
    align-self: stretch !important;
}

#booking-sidebar-container {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 96px !important;
    z-index: 25 !important;
}

/* ─── 13. Pins de Mapa y Gestos Táctiles ─────────────────────────────────────── */
.price-pin.active,
.price-pin:hover {
    background: #C0A084 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.map-touch-badge {
    background: rgba(47, 37, 25, 0.94) !important;
    border-color: rgba(192, 160, 132, 0.45) !important;
}

/* ─── 14. Tipografía de Autor: Acentos en Degradado Paz & Līmbō ─────────────── */
.gradient-text-gold,
.gradient-text-copper,
h1 .gradient-text-gold,
h1 .gradient-text-copper,
.owner-title .gradient-text-copper {
    background: linear-gradient(135deg, #5E401D 0%, #C0A084 50%, #845B2B 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
    font-weight: 800 !important;
    filter: none !important;
}