/* =================== Tu CSS =================== */

    @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');

    html { scroll-behavior: smooth; }
    section { scroll-margin-top: 120px; }

    :root {
      --negro: #000000;
      --blanco: #ffffff;
      --dorado: #ffcc00;
      --golden-rose: #dda15e;
      --gris-suave: #bbbbbb;
    }

    * { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
    body { background-color:var(--negro); color:var(--blanco); }

    .container-card {
      background: #111;
      border: 1px solid var(--golden-rose);
      padding: 30px;
      border-radius: 20px;
      width: 95%;
      max-width: 900px;
      margin: 150px auto;
      box-shadow: 0 0 18px rgba(255,200,150,0.2);
    }

    .container-card h2 {
      color: var(--dorado);
      font-weight: 700;
      text-align: center;
      margin-bottom: 15px;
    }

    .note-star { color: #ff77c6; font-size: 0.9rem; margin-top: 4px; }
    .small-muted { color:#bbbbbb; font-size:0.85rem; }

    .badge-busy {
      background:#ff5555;
      padding:4px 8px;
      border-radius:6px;
    }

    .badge-free {
      background:#55aa55;
      padding:4px 8px;
      border-radius:6px;
    }

    /* Flatpickr marcadores */
    .fp-has-high-occupancy {
      background-color: rgba(255, 50, 50, 0.6) !important;
      color: white !important;
      border-radius: 6px;
    }
    .fp-has-low-occupancy {
      background-color: rgba(255, 200, 0, 0.3) !important;
      border-radius: 6px;
    }

    .form-control, .form-select {
      background: #1a1a1a;
      color: white;
      border: 1px solid var(--golden-rose);
    }

    .btn-primary {
      background: var(--golden-rose);
      border: none;
      color: black;
      font-weight: 700;
    }