/* ============================================
   SELAHYAH - ESTILOS GLOBALES
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --color-primary: #bda37d;
    --color-primary-light: #f5f0e8;
    --color-primary-dark: #a88d6a;
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-light: #fee2e2;
    --color-text: #292929;
    --color-text-secondary: #888896;
    --color-text-muted: #b0b0b8;
    --color-card: #faf7f3;
    --color-white: #ffffff;
    --color-border: #e8e4df;
    --color-shadow: #f8f6f2;
    --radius: 14px;
    --radius-sm: 10px;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: var(--color-white);
    color: var(--color-text);
}

/* ─── CAJAS CON FONDO ─── */
.caja-resaltada { background-color: var(--color-card); }

/* ─── COLOR PRINCIPAL ─── */
.color-principal { color: var(--color-primary) !important; }
.color-iconos { color: #c9b187; }

/* ─── CALENDARIO: DÍAS ─── */
.calendar-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    position: relative;
}
.calendar-day:hover:not(.day-blocked):not(.day-past):not(.day-festivo) { background-color: var(--color-primary-light); }
.day-today { border: 2px solid var(--color-primary); color: var(--color-primary-dark); font-weight: 800; }
.day-blocked { background-color: var(--color-danger-light); color: var(--color-danger); cursor: not-allowed; text-decoration: line-through; }
.day-past { color: var(--color-text-muted); cursor: not-allowed; background-color: #f9fafb; }
.day-festivo {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0 !important;
    text-decoration: none !important;
}
.day-festivo:hover { background-color: #bfdbfe !important; }

/* ─── SELECCIÓN ─── */
.day-selected, .range-start, .range-end, .range-single { background-color: var(--color-primary) !important; color: white !important; border: none !important; font-weight: 800; text-decoration: none !important; }
.day-in-range { background-color: var(--color-primary-light) !important; border-radius: 0; color: var(--color-primary-dark); font-weight: 700; }
.range-start { border-radius: 50% 0 0 50% !important; }
.range-end { border-radius: 0 50% 50% 0 !important; }
.range-single { border-radius: 50% !important; }

/* ─── SELECTORES ─── */
.calendar-selector, .huesped-select {
    appearance: none; -webkit-appearance: none;
    background-color: var(--color-white); border: 1.5px solid var(--color-border);
    padding: 7px 28px 7px 12px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.72rem;
    color: var(--color-text); cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9b187' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    width: 100%; font-family: inherit;
}
.calendar-selector:hover, .huesped-select:hover { border-color: var(--color-primary); }
.calendar-selector:focus, .huesped-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(189,163,125,0.15); }

/* ─── LEYENDA ─── */
.leyenda-item { display: flex; align-items: center; gap: 6px; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.leyenda-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.leyenda-dot-libre { background: #f1f5f9; border: 1.5px solid var(--color-border); }
.leyenda-dot-ocupado { background: var(--color-danger-light); border: 1.5px solid #fca5a5; }
.leyenda-dot-seleccion { background: var(--color-primary); border: 2px solid var(--color-primary-dark); }

/* ─── BOTÓN HOY ─── */
.btn-hoy { background: var(--color-text); color: white; border: none; padding: 8px 18px; border-radius: 50px; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; font-family: inherit; }
.btn-hoy:hover { background: #3d3d3d; color: white; }

/* ─── PRECIO ─── */
.precio-numero { font-size: 2rem; font-weight: 800; color: var(--color-text); line-height: 1; }
.precio-noche { display: block; font-size: 0.68rem; font-weight: 500; color: var(--color-text-secondary); margin-top: 2px; }

/* ─── TOAST ─── */
#toast.show { transform: translate(-50%, 0) !important; }
#toast.error { background: var(--color-danger); color: white; }
#toast.success { background: var(--color-text); color: white; }

/* ─── BOTÓN PRINCIPAL ─── */
.btn-principal {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 2px 8px rgba(189,163,125,0.25);
}
.btn-principal:hover { background-color: var(--color-primary-dark); color: white; box-shadow: 0 4px 12px rgba(189,163,125,0.35); }
.btn-principal:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }