* { box-sizing: border-box; }
body { background-color: #fff8f4; color: #24211e; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #e8ded7; border-radius: 4px; }

.img-zoom { transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); cursor: zoom-in; }
.img-zoom:hover { transform: scale(1.04); }

.pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(184,101,72,0.10); color: #b86548; border: 1px solid rgba(184,101,72,0.2); border-radius: 999px; padding: 3px 10px; font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

.gallery-grid-5 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.gallery-grid-4 { display: grid; gap: 16px; grid-template-columns: 1fr; }
.gallery-grid-3 { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 768px) { 
    .gallery-grid-5, .gallery-grid-4, .gallery-grid-3 {
        aspect-ratio: 2 / 1;
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    
    .gallery-grid-5 { grid-template-columns: repeat(4, 1fr); }
    .gallery-grid-5 .tall { grid-row: span 2; }
    .gallery-grid-5 .wide { grid-column: span 2; }

    .gallery-grid-4 { grid-template-columns: 1.5fr 1fr 1.5fr; }
    .gallery-grid-4 .left { grid-column: 1; grid-row: 1 / span 2; }
    .gallery-grid-4 .center-top { grid-column: 2; grid-row: 1; }
    .gallery-grid-4 .center-bottom { grid-column: 2; grid-row: 2; }
    .gallery-grid-4 .right { grid-column: 3; grid-row: 1 / span 2; }

    .gallery-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid-3 .tall { grid-row: span 2; }
}

#scroll-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #b86548, #e0a080); z-index: 999; }

.price-badge { background: linear-gradient(135deg, #b86548 0%, #964d35 100%); color: white; border-radius: 12px; padding: 6px 14px; display: inline-block; }

.admin-tab { cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.admin-tab.active { border-bottom-color: #b86548; color: #b86548; font-weight: 600; }

.admin-pane { display: none; }
.admin-pane.active { display: block; }

.img-preview-box { position: relative; border-radius: 0.5rem; overflow: hidden; border: 1px dashed #b86548; background: #faf2ed; cursor: pointer; transition: all 0.2s; }
.img-preview-box:hover { border-style: solid; }
.img-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-box .overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.img-preview-box:hover .overlay { opacity: 1; }

#global-loader { position: fixed; inset: 0; background: #fff8f4; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s; }

.cropper-container-wrapper { height: 60vh; background: #24211e; }

/* Flatpickr Custom Theme (Terracotta) */
.flatpickr-wrapper { width: 100% !important; display: flex !important; justify-content: center !important; }
.flatpickr-calendar { margin: 0 auto !important; font-family: 'Plus Jakarta Sans', sans-serif !important; border-radius: 1rem !important; border: 1px solid #e8ded7 !important; box-shadow: 0 10px 25px -5px rgba(36,33,30,0.1) !important; padding: 10px !important; width: 100% !important; max-width: 320px !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #b86548 !important; border-color: #b86548 !important; color: white !important; font-weight: 600;
}
.flatpickr-day:hover { background: #faf2ed !important; border-color: transparent !important; }
.flatpickr-months .flatpickr-month { color: #24211e !important; fill: #24211e !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600 !important; }
.flatpickr-weekday { color: #756a63 !important; font-weight: 600 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.1em; }
.flatpickr-day.flatpickr-disabled { color: #d1d5db !important; opacity: 0.5 !important; }
.flatpickr-day.flatpickr-disabled.is-blocked { color: #ef4444 !important; text-decoration: line-through; opacity: 0.6 !important; background: rgba(239, 68, 68, 0.05) !important; font-weight: 600; }

/* Ocultar barra de desplazamiento en los contenedores horizontales para que quede limpio */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Toggle switches for mosaics */
input[type="checkbox"]:checked ~ div.bg-gray-300 {
    background-color: #b86548 !important;
}
input[type="checkbox"]:checked ~ .dot {
    transform: translateX(100%) !important;
}