/* ============================================================================
   AGENDABOX — Piel "Gatita pastel" (estética danish-pastel, reutilizable).
   Paleta por variables CSS: para otro salón, solo se sobreescriben las --abx-*.
   Principio: "marco tierno, centro limpio" (color y motivos en bordes/encabezados;
   tarjetas y formularios sobre superficie clara para que se lean bien).
   ============================================================================ */
:root {
    --abx-pink: #f8bbd0;
    --abx-pink-deep: #f06aa0;
    --abx-cream: #fff7fa;
    --abx-gold: #e9b872;
    --abx-mint: #bfe3ce;
    --abx-lavender: #e3d5f5;
    --abx-butter: #fcefc7;
    --abx-text: #6b5560;
    --abx-heading: #4d3b45;
    --abx-radius: 20px;
    --abx-shadow: 0 8px 24px rgba(240, 106, 160, 0.12);
}

body {
    font-family: "Poppins", system-ui, -apple-system, sans-serif;
    color: var(--abx-text);
    background-color: var(--abx-cream);
}

h1, h2, h3, h4, h5, .display-4 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--abx-heading);
}

/* ---------- Botones tipo pastilla ---------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.5rem 1.4rem;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.btn-primary,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--abx-pink-deep), #ff9ec7);
    border: none;
    box-shadow: var(--abx-shadow);
}
.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.btn-outline-primary {
    color: var(--abx-pink-deep);
    border: 2px solid var(--abx-pink);
    background: #fff;
}
.btn-outline-primary:hover {
    background: var(--abx-pink);
    color: #fff;
    border-color: var(--abx-pink);
}

/* ---------- Tarjetas tipo sticker ---------- */
.card {
    border: none;
    border-radius: var(--abx-radius);
    box-shadow: var(--abx-shadow);
    overflow: hidden;
    background: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(240, 106, 160, 0.18);
}

/* ---------- Hero: gradiente pastel + gingham sutil + motivos ---------- */
.abx-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 320px at 50% -60%, var(--abx-lavender), transparent),
        linear-gradient(135deg, var(--abx-cream), var(--abx-pink));
}
.abx-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(240, 106, 160, 0.05) 0 14px, transparent 14px 28px),
        repeating-linear-gradient(90deg, rgba(240, 106, 160, 0.05) 0 14px, transparent 14px 28px);
    pointer-events: none;
}
.abx-hero > * {
    position: relative;
    z-index: 1;
}
.abx-motif {
    position: absolute;
    font-size: 2rem;
    opacity: 0.92;
    filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.85));
    pointer-events: none;
    z-index: 0;
}

/* ---------- Widget de reserva ---------- */
.abx-slot {
    border-radius: 999px !important;
    border: 1.5px solid var(--abx-pink) !important;
    color: var(--abx-pink-deep) !important;
    background: #fff !important;
}
.abx-slot.active,
.abx-slot:hover {
    background: var(--abx-pink-deep) !important;
    color: #fff !important;
    border-color: var(--abx-pink-deep) !important;
}
#abx-addons label {
    border-radius: 14px !important;
    border: 2px solid var(--abx-lavender) !important;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#abx-addons label:has(input:checked) {
    background: var(--abx-pink);
    color: #fff;
    border-color: var(--abx-pink-deep) !important;
}

/* ---------- Formularios ---------- */
.form-control,
.form-select {
    border-radius: 14px;
    border: 1.5px solid #f0d6e2;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--abx-pink-deep);
    box-shadow: 0 0 0 0.2rem rgba(240, 106, 160, 0.15);
}

/* ---------- Detalles ---------- */
a {
    color: var(--abx-pink-deep);
}
.badge.text-bg-success {
    background: var(--abx-mint) !important;
    color: #2e6b4b !important;
}
.text-muted {
    color: #a58a97 !important;
}