/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#0f1117;color:#e2e4e9;line-height:1.5;min-height:100vh;overflow-x:hidden}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
a{color:#60a5fa;text-decoration:none}

/* ===== LAYOUT ===== */
.container{width:100%;max-width:960px;margin:0 auto;padding:0 12px}

/* ===== HEADER ===== */
.site-header{background:linear-gradient(135deg,#1a1c25 0%,#12131a 100%);border-bottom:1px solid #23263a;padding:16px 0;text-align:center;position:sticky;top:0;z-index:100}
.site-header h1{font-size:1.35rem;color:#f0f0f4}
.site-header .subtitle{font-size:.8rem;color:#8b8fa3;margin-top:2px}

/* ===== MONTH TABS ===== */
.month-tabs{display:flex;gap:8px;padding:12px 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.month-tabs::-webkit-scrollbar{display:none}
.month-tab{flex-shrink:0;padding:8px 16px;border-radius:8px;background:#1e2030;border:1px solid #2a2d42;color:#c5c8d6;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;position:relative;white-space:nowrap}
.month-tab.active{background:#2563eb;border-color:#3b82f6;color:#fff}
.month-tab .badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:10px;font-size:.65rem;font-weight:700;background:#22c55e;color:#fff;vertical-align:middle}

/* ===== SELECTION BANNER ===== */
.selection-banner{display:none;background:#1e2030;border:1px solid #3b82f6;border-radius:10px;padding:10px 14px;margin:10px 0;font-size:.82rem;align-items:center;gap:8px;flex-wrap:wrap}
.selection-banner.visible{display:flex}
.selection-banner .sel-label{color:#8b8fa3;font-weight:600}
.selection-banner .sel-value{color:#f0f0f4;font-weight:700}
.selection-banner .sel-gender-k{color:#f472b6}
.selection-banner .sel-gender-e{color:#60a5fa}
.btn-wa-top{margin-left:auto;flex-shrink:0}

/* ===== GRID WRAPPER ===== */
.grid-wrapper{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #23263a;border-radius:10px;margin:8px 0 20px;background:#161822}
.grid-wrapper::-webkit-scrollbar{height:6px}
.grid-wrapper::-webkit-scrollbar-track{background:#161822}
.grid-wrapper::-webkit-scrollbar-thumb{background:#2a2d42;border-radius:3px}

/* ===== GRID TABLE ===== */
.avail-table{border-collapse:separate;border-spacing:0;min-width:max-content}
.avail-table th,.avail-table td{padding:0;text-align:center;vertical-align:middle}

/* header row */
.avail-table thead th{position:sticky;top:0;z-index:3;background:#1a1c28;padding:6px 4px;font-size:.7rem;color:#8b8fa3;font-weight:600;border-bottom:1px solid #23263a;min-width:82px;white-space:nowrap}
.avail-table thead th.corner{position:sticky;left:0;z-index:5;min-width:56px;background:#1a1c28}
.avail-table thead th .day-name{display:block;font-size:.62rem;color:#5b5f73;text-transform:uppercase}
.avail-table thead th.today-col{color:#60a5fa}
.avail-table thead th.today-col .day-name{color:#3b82f6}

/* sticky time column */
.avail-table td.time-cell{position:sticky;left:0;z-index:2;background:#161822;min-width:56px;padding:4px 6px;font-size:.72rem;font-weight:700;color:#8b8fa3;border-right:1px solid #1e2030;white-space:nowrap}

/* data cells */
.avail-table td.data-cell{padding:3px 2px;border-bottom:1px solid #1b1d2a;border-right:1px solid #1b1d2a;min-width:82px;height:40px}
.avail-table tr:last-child td{border-bottom:none}

/* pills */
.cell-pills{display:flex;gap:3px;justify-content:center;align-items:center;flex-wrap:nowrap}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:6px;font-size:.65rem;font-weight:700;cursor:pointer;transition:all .15s;border:2px solid transparent;line-height:1.2;white-space:nowrap}
.pill-f{background:rgba(244,114,182,.15);color:#f472b6}
.pill-m{background:rgba(96,165,250,.15);color:#60a5fa}
.pill:hover{transform:scale(1.08)}
.pill.selected{border-color:#facc15;box-shadow:0 0 8px rgba(250,204,21,.35);transform:scale(1.1)}
.cell-empty{font-size:.6rem;color:#3a3d50}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;border-radius:10px;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-whatsapp{background:#25d366;color:#fff}
.btn-whatsapp:hover{background:#1fb855;transform:translateY(-1px)}
.btn-whatsapp svg{width:18px;height:18px;fill:currentColor}
.btn-submit{background:#2563eb;color:#fff;width:100%}
.btn-submit:hover{background:#1d4ed8}

/* ===== FORM SECTION ===== */
.form-section{background:#1a1c28;border:1px solid #23263a;border-radius:12px;padding:20px 16px;margin:0 0 24px}
.form-section h2{font-size:1.1rem;margin-bottom:4px;color:#f0f0f4}
.form-section .form-desc{font-size:.78rem;color:#8b8fa3;margin-bottom:16px}
.form-grid{display:grid;gap:12px}
.form-group label{display:block;font-size:.75rem;font-weight:600;color:#8b8fa3;margin-bottom:4px}
.form-group input,.form-group select{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #2a2d42;background:#12131a;color:#e2e4e9;font-size:.88rem;outline:none;transition:border .2s}
.form-group input:focus,.form-group select:focus{border-color:#3b82f6}
.form-group input::placeholder{color:#4a4d60}
.form-group select{appearance:none;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='%238b8fa3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-error{border-color:#ef4444 !important}
.error-text{color:#ef4444;font-size:.7rem;margin-top:2px;display:none}
.error-text.visible{display:block}
.success-msg{color:#22c55e;font-size:.85rem;font-weight:600;margin-top:10px;display:none}
.success-msg.visible{display:block}

/* ===== FOOTER ===== */
.site-footer{text-align:center;padding:20px 12px 32px;font-size:.7rem;color:#5b5f73;border-top:1px solid #1e2030;margin-top:8px}
.site-footer .disclaimer{max-width:480px;margin:0 auto;line-height:1.6}

/* ===== RESPONSIVE ===== */
@media(min-width:640px){
  html{font-size:15px}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full-span{grid-column:1/-1}
  .avail-table thead th{min-width:96px}
  .avail-table td.data-cell{min-width:96px}
  .pill{padding:3px 9px;font-size:.7rem}
}
@media(min-width:960px){
  .container{padding:0 24px}
}

/* ===== LOADING ===== */
.loading{text-align:center;padding:40px 0;color:#5b5f73;font-size:.85rem}
.loading .spinner{display:inline-block;width:24px;height:24px;border:3px solid #2a2d42;border-top-color:#3b82f6;border-radius:50%;animation:spin .6s linear infinite;margin-bottom:8px}
@keyframes spin{to{transform:rotate(360deg)}}