/* =========================================================
   Turnero Club NEXUS
   ========================================================= */

:root{
  --primary:#22769B;
  --secondary:#9CD875;
  --accent:#99415c;
  --warn:#EC5B29;

  --dark:#22415e;
  --dark-2:#23527e;
  --text:#1d1d1d;
  --muted:rgba(0,0,0,.62);

  --bg:#f4f6f9;
  --panel:#ffffff;
  --panel-2:#f7f8fb;

  --tc-topbar:#22415e;
  --tc-subnav:#9CD875;
  --tc-text:#0f172a;
  --tc-muted:rgba(15,23,42,.68);
  --tc-border:rgba(15,23,42,.10);
  --tc-shadow:0 18px 40px rgba(15,23,42,.18);

  --border:rgba(0,0,0,.10);
  --radius:18px;
  --radius-sm:14px;
  --radius-pill:999px;

  --shadow:0 10px 25px rgba(0,0,0,.10);
  --shadow-soft:0 6px 18px rgba(0,0,0,.08);

  --fs-page:28px;
  --fs-h2:22px;
  --fs-h3:18px;
  --fs-h4:16px;
  --fs-body:15px;
  --fs-small:12px;

  --btn-h:46px;
  --btn-h-sm:38px;
  --btn-h-lg:50px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:'Inter', sans-serif;
  font-size:var(--fs-body);
  line-height:1.45;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* =========================
   Tipografía
   ========================= */

h1,h2,h3,h4,h5,h6,
.pageTitle,
.page-title h1,
.card h3{
  font-family:'Plus Jakarta Sans', sans-serif;
  letter-spacing:-.02em;
  color:var(--tc-text);
}

h1,
.pageTitle,
.page-title h1{
  font-size:var(--fs-page);
  line-height:1.15;
  font-weight:700;
}

h2{
  font-size:var(--fs-h2);
  line-height:1.2;
  font-weight:700;
}

h3,
.card h3{
  font-size:var(--fs-h3);
  line-height:1.25;
  font-weight:700;
}

h4{
  font-size:var(--fs-h4);
  line-height:1.3;
  font-weight:700;
}

p,
.muted-dark,
.payment-section-subtitle,
.help{
  font-size:var(--fs-body);
  line-height:1.5;
}

.small,
.table th,
.profile-label,
.payment-meta-label,
.day-name,
.day-meta,
.month-meta{
  font-size:var(--fs-small);
  line-height:1.35;
}

/* =========================
   Layout base
   ========================= */

.container{
  max-width:1170px;
  margin:0 auto;
  padding:0 16px;
}

.content{
  padding:18px 0 70px;
}

.grid-2{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

@media (max-width: 920px){
  .grid-2{
    grid-template-columns:1fr;
  }
}

/* =========================
   Header / Topbar
   ========================= */

.topbar{
  position:sticky;
  top:0;
  z-index:50;
}

.topbar-inner{
  background:var(--tc-topbar);
  color:#fff;
  padding-bottom:32px;
}

.topbar-row{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-logo{
  display:block;
  height:68px;
  width:auto;
}

.brand-logo--mobile{
  display:none;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:var(--secondary);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  user-select:none;
}

.avatar-link{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.avatar-link.is-active{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background-color:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}

.icon-btn:hover{
  background:var(--dark);
  border-color:rgba(255,255,255,.30);
}

.icon-btn:active{
  transform:translateY(1px);
}

.icon-btn svg{
  width:20px;
  height:20px;
  fill:#fff;
}

.menu-toggle{
  display:none;
}

/* logout pill animado */
.Btn-logout{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition-duration:.3s;
  box-shadow:2px 2px 10px rgba(0,0,0,.2);
  background-color:var(--warn);
}

.sign{
  width:100%;
  transition-duration:.3s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sign svg{
  width:17px;
}

.sign svg path{
  fill:#fff;
}

.text{
  position:absolute;
  right:0;
  width:0;
  opacity:0;
  color:#fff;
  font-size:15px;
  font-weight:600;
  transition-duration:.3s;
  white-space:nowrap;
}

.Btn-logout:hover{
  width:132px;
  border-radius:40px;
}

.Btn-logout:hover .sign{
  width:30%;
  padding-left:20px;
}

.Btn-logout:hover .text{
  opacity:1;
  width:70%;
  padding-right:10px;
}

.Btn-logout:active{
  transform:translate(2px, 2px);
}

/* =========================
   Page title / subnav
   ========================= */

.page-title{
  border-bottom:1px solid var(--tc-border);
  padding:18px 0 34px;
}

.page-title-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.page-title h1{
  padding:10px 0 16px 24px;
  margin:0;
}

.pageTitle{
  padding-left:8px;
  margin:0;
}

@media (min-width: 901px){
  .page-title{
    display:none;
  }

  .topbar-inner{
    padding-bottom:20px;
  }

  .subnav{
    margin-top:-14px;
  }
}

.subnav{
  background:transparent;
  margin-top:-22px;
  padding-bottom:14px;
}

.subnav-float{
  background:#fff;
  border:1px solid var(--tc-border);
  border-radius:8px;
  box-shadow:var(--tc-shadow);
  padding:14px;
  display:flex;
  justify-content:flex-start;
  gap:60px;
}

.subnav-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:120px;
  padding:6px 0;
  text-decoration:none;
  color:rgba(15,23,42,.55);
}

.subnav-link i{
  font-size:18px;
  color:rgba(15,23,42,.45);
  transition:color .18s ease;
}

.subnav-link span{
  font-size:14px;
  font-weight:600;
  transition:color .18s ease;
}

.subnav-link:hover i,
.subnav-link:hover span,
.subnav-link.is-active i,
.subnav-link.is-active span{
  color:var(--primary);
}

/* mobile menu */
.mobile-menu{
  background:rgba(15,23,42,.22);
  backdrop-filter:blur(2px);
  position:fixed;
  inset:0;
  z-index:60;
  padding:84px 16px 16px;
}

.mobile-menu-card{
  background:#fff;
  border:1px solid var(--tc-border);
  border-radius:14px;
  box-shadow:var(--tc-shadow);
  padding:10px;
  max-width:520px;
}

.mm-link{
  display:block;
  padding:12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--tc-text);
  font-weight:600;
}

.mm-link:hover{
  background:rgba(62,118,153,.10);
}

.mm-sep{
  height:1px;
  background:var(--tc-border);
  margin:10px 6px;
}

.mm-logout{
  width:100%;
  min-height:46px;
  border:1px solid var(--warn);
  color:var(--warn);
  border-radius:32px;
  padding:12px;
  font-weight:700;
  cursor:pointer;
  background:#fff;
}

.mm-logout:hover{
  background-color:var(--warn);
  color:#fff;
}

@media (max-width: 900px){
  .brand-logo--desktop{display:none}
  .brand-logo--mobile{display:block;height:34px}

  .subnav{display:none}
  .menu-toggle{display:grid}
  #btnLogoutTop{display:none}

  .page-title{
    padding:16px 0;
  }

  .page-title h1,
  .pageTitle{
    font-size:24px;
  }
}

/* =========================
   Cards
   ========================= */

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:18px;
}

.card h3{
  margin:0 0 10px;
}

@media (max-width: 820px){
  .card{
    padding:16px;
    border-radius:16px;
  }
}

/* =========================
   Botones
   ========================= */

.btn,
.btn-primary,
.btn-secondary,
.btn-warn,
.payment-main-cta,
.payment-action-cancel,
.payment-action-confirm,
.btn-filter-close,
.btn-filter-apply{
  min-height:var(--btn-h);
  padding:0 20px;
  border-radius:32px;
  font-size:15px;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  transition:.2s ease;
  margin-top: 8px;
  margin-bottom: 4px;
}

.btn{
  border:1px solid rgba(0,0,0,.12);
  background:var(--panel-2);
  color:#1f2b33;
}

.btn-primary{
  color:#fff;
  background-color:var(--primary);
  border:none;
  position:relative;
  overflow:hidden;
}

.btn-primary::before,
.btn-primary::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:var(--dark-2);
  border-radius:50%;
  transform:translate(-150%, -150%);
  transition:transform .6s ease;
  z-index:-1;
}

.btn-primary::before{
  top:-40px;
  left:-40px;
}

.btn-primary::after{
  bottom:-40px;
  right:-40px;
}

.btn-primary:hover::before,
.btn-primary:hover::after{
  transform:translate(0,0) scale(2);
}

.btn-secondary{
  background:#fff;
  border:1px solid var(--primary);
  color:var(--primary);
  position:relative;
  overflow:hidden;
  z-index:1;
}

.btn-secondary::before{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  content:"";
  border-radius:50%;
  display:block;
  width:20em;
  height:20em;
  left:-5em;
  transition:box-shadow .5s ease-out;
  z-index:-1;
}

.btn-secondary:hover{
  color:#fff;
}

.btn-secondary:hover::before{
  box-shadow:inset 0 0 0 10em var(--primary);
}

.btn-warn{
  background:var(--warn);
  color:#fff;
  border:none;
}

.btn-sm{
  min-height:var(--btn-h-sm);
  padding:0 14px;
  font-size:14px;
}

.btn-lg{
  min-height:var(--btn-h-lg);
  padding:0 24px;
  font-size:16px;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width: 820px){
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-warn,
  .payment-main-cta,
  .payment-action-cancel,
  .payment-action-confirm,
  .btn-filter-close,
  .btn-filter-apply{
    width:100%;
  }

  .actions{
    flex-direction:column;
    align-items:stretch;
  }
}

/* cancelar / baja */
.btn-cancel{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

@media (max-width: 820px){
  .btn-cancel .btn-label{display:none}
  .btn-cancel{
    padding-left:14px;
    padding-right:14px;
  }
}

/* =========================
   Text helpers
   ========================= */

.muted-dark{color:var(--muted)}
.small{font-size:12px}
.empty{padding:10px 0}

/* =========================
   Tabla
   ========================= */

.table-wrap{
  overflow:auto;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:14px 10px;
  text-align:left;
}

.table td{
  font-size:14px;
  line-height:1.4;
}

.table th{
  color:rgba(0,0,0,.55);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* =========================
   Forms
   ========================= */

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.field.inline{
  min-width:220px;
}

.field span{
  font-size:12px;
  color:rgba(0,0,0,.55);
  font-weight:800;
}

.field input,
.field select{
  min-height:46px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  font-size:15px;
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}

.help{
  font-size:12px;
}

/* =========================
   Calendar
   ========================= */

.calendar-wrap{
  align-items:start;
}

.calendar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.calendar-head .icon-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:var(--tc-text);
  cursor:pointer;
  font-size:22px;
  font-weight:900;
  box-shadow:none;
}

.calendar-head .icon-btn:hover{
  filter:brightness(.98);
  background:var(--panel-2);
  border-color:rgba(0,0,0,.16);
}

.calendar-head-center{
  flex:1 1 auto;
  min-width:0;
}

.calendar-head-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}

.view-switch{
  display:flex;
  gap:10px;
  align-items:center;
}

.pill{
  min-height:34px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  padding:0 14px;
  background:var(--panel-2);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.pill.active{
  border-color:rgba(62,118,153,.35);
  background:rgba(62,118,153,.12);
}

.week-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
}

.day-cell{
  height:110px;
  border:1px solid rgba(0,0,0,.12);
  background:var(--panel-2);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.day-cell:hover{filter:brightness(.99)}

.day-cell.active{
  border-color:rgba(62,118,153,.35);
  background:rgba(62,118,153,.10);
}

.day-name{
  font-size:12px;
  color:rgba(0,0,0,.55);
  font-weight:800;
}

.day-date{
  font-size:13px;
  font-weight:800;
  margin-top:2px;
}

.day-meta,
.month-meta{
  font-size:12px;
  color:rgba(0,0,0,.55);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  margin-top:10px;
}

.badge.ok{
  border-color:rgba(158,202,117,.55);
  background:rgba(158,202,117,.18);
}

.badge.off{
  opacity:.7;
}

.calendar-scroll{
  overflow-x:hidden;
  width:100%;
}

.dow-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  border-bottom:none;
  border-radius:14px 14px 0 0;
  overflow:hidden;
  background:#fff;
}

.dow-grid .dow{
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:rgba(0,0,0,.55);
  padding:6px 0;
}

.dow{
  padding:10px 12px;
  font-size:13px;
  color:rgba(0,0,0,.72);
  border-right:1px solid rgba(0,0,0,.08);
}

.dow:last-child{
  border-right:none;
}

.month-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  width:100%;
  border:1px solid rgba(0,0,0,.10);
  border-top:none;
  border-radius:0 0 14px 14px;
  overflow:hidden;
  background:#fff;
  gap:0;
}

.month-cell{
  height:120px;
  min-width:0;
  border-right:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08);
  border-radius:0;
  background:#fff;
  padding:8px 8px 6px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.month-cell:nth-child(7n){
  border-right:none;
}

.month-cell:hover{
  background:rgba(0,0,0,.02);
}

.month-cell.dim{
  background:rgba(0,0,0,.015);
  opacity:.65;
}

.month-cell.active{
  outline:2px solid rgba(62,118,153,.35);
  outline-offset:-2px;
}

.month-num{
  font-weight:800;
  font-size:13px;
  color:rgba(0,0,0,.75);
  text-align:right;
  margin-bottom:6px;
}

.events{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
}

.event-pill{
  width:100%;
  max-width:100%;
  border-radius:4px;
  padding:8px 10px;
  font-weight:800;
  color:#fff;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.event-pill.padel,   .event-pill.act-color-2{background:#9CD875;color:#143140}
.event-pill.gym,     .event-pill.act-color-1{background:#22769B;color:#fff}
.event-pill.pilates, .event-pill.act-color-3{background:#4fc3f7;color:#083042}
.event-pill.crossfit,.event-pill.act-color-4{background:#20c997;color:#083042}
.event-pill.act-color-5{background:#ff7043;color:#fff}
.event-pill.act-color-6{background:#9c27b0;color:#fff}
.event-pill.act-color-7{background:#26a69a;color:#fff}
.event-pill.act-color-8{background:#f06292;color:#fff}
.event-pill.other{background:#6c757d}

.more-pill{
  background:rgba(0,0,0,.06);
  color:rgba(0,0,0,.68);
  border:1px solid rgba(0,0,0,.10);
}

/* right panel chips */
.day-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px;
}

.chip{
  min-height:34px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:0 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}

.chip.active{
  border-color:rgba(62,118,153,.35);
  background:rgba(62,118,153,.10);
}

.slots{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.slot-card{
  border:1px solid rgba(0,0,0,.12);
  background:var(--panel-2);
  border-radius:14px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.slot-title{font-weight:800}
.slot-sub,
.slot-cap{font-size:14px}
.slot-meta{font-size:12px;color:rgba(0,0,0,.55);margin-top:4px}

.slot-actions{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-width:140px;
}

/* =========================
   MIS TURNOS
   ========================= */

.turns{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.turn-card{
  border:1px solid rgba(0,0,0,.10);
  background:var(--panel);
  border-radius:16px;
  padding:18px;
}

.turn-main{
  min-width:0;
}

.turn-title{
  font-size:18px;
  line-height:1.25;
  font-weight:800;
  color:var(--tc-text);
}

.turn-meta{
  margin-top:6px;
  font-size:14px;
  line-height:1.45;
  color:rgba(0,0,0,.58);
}
/* Serie */
.series-card{
  display:block;
  padding:16px 18px;
}

.series-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.series-copy{
  flex:1 1 auto;
  min-width:0;
}

.series-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:10px;
}

.series-badge.is-single{
  background:rgba(34,118,155,.10);
  color:var(--primary);
}

.series-badge.is-recurring{
  background:rgba(156,216,117,.18);
  color:#4d7f2f;
}

.series-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Detalle expandido */
.series-detail-panel{
  width:100%;
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:var(--panel-2);
}

.series-detail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.series-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fff;
}

.series-row-copy{
  flex:1 1 auto;
  min-width:0;
}

.series-row-title{
  font-size:16px;
  line-height:1.25;
  font-weight:800;
  color:var(--tc-text);
}

.series-row-time{
  margin-top:4px;
  font-size:14px;
  color:rgba(0,0,0,.58);
}

.series-row-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* Mobile */
@media (max-width: 820px){
  .series-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .series-actions{
    width:100%;
    flex-wrap:wrap;
  }

  .series-actions .btn{
    width:100%;
  }

  .series-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .series-row-actions{
    width:100%;
  }

  .series-row-actions .btn{
    width:100%;
  }
}

/* activity legend */
.activity-legend{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-left:1px solid rgba(15,23,42,.10);
  min-height:110px;
}

.legend-badge{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:0 14px;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 20px rgba(15,23,42,.08);
  cursor:pointer;
  user-select:none;
  font-size:13px;
}

.legend-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

.legend-badge.is-active{
  outline:3px solid rgba(255,255,255,.35);
}

.legend-badge.padel,   .legend-badge.act-color-2{background:#9CD875}
.legend-badge.gym,     .legend-badge.act-color-1{background:#22769B}
.legend-badge.pilates, .legend-badge.act-color-3{background:#56cfe1}
.legend-badge.crossfit,.legend-badge.act-color-4{background:#2bb3ad}
.legend-badge.act-color-5{background:#ff7043}
.legend-badge.act-color-6{background:#9c27b0}
.legend-badge.act-color-7{background:#26a69a}
.legend-badge.act-color-8{background:#f06292}
.legend-badge.other{background:#6b7280}

.filters-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:16px;
  align-items:start;
}

.filters-toggle{
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid var(--tc-border);
  background:#fff;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  color:var(--tc-text);
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}

.filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.filters-head h3{
  margin:0;
}

.filters-mobile-actions{
  display:none;
  gap:10px;
  flex-wrap:wrap;
}

.btn-filter-close,
.btn-filter-apply{
  justify-content:center;
}


.my-turns-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.my-turns-head h2{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:var(--primary);
}

.filters-step-copy h2{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:var(--primary);
}

.dashboard-h2 {
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.2px;
  color:var(--primary);
}

.my-turns-head h3{
  margin:0;
}

.my-turns-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
}

.my-turns-filter label{
  font-size:12px;
  font-weight:800;
  color:rgba(0,0,0,.55);
}

.my-turns-filter select{
  min-height:42px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  font-size:14px;
}

@media (max-width: 820px){
  .my-turns-head{
    align-items:stretch;
  }

  .my-turns-filter{
    width:100%;
    min-width:100%;
  }
}

/* =========================
   Login / auth
   ========================= */

.auth-card{
  max-width:420px;
  margin:40px auto;
  padding:18px;
  background:var(--panel);
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

.auth-card--wide{
  max-width:640px;
}

.auth-card h1{
  margin:0 0 6px;
}

.hint{
  margin-top:12px;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

.btn-back-profile{
  display:inline-flex;
  margin-bottom:18px;
}

.btn-save-password{
  margin-top:16px;
}

/* =========================
   Modal / toast / swal
   ========================= */

#reserveModal{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}

#reserveModal[hidden]{
  display: none !important;
}

.modal-backdrop.open{
  display:flex;
}

.modal{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

.toasts{
  position:fixed;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:90;
}

.toast{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow-soft);
  width:min(360px, calc(100vw - 28px));
}

.toast.ok{border-color:rgba(158,202,117,.75)}
.toast.bad{border-color:rgba(218,101,60,.75)}
.toast-title{font-weight:800}
.toast-text{font-size:12px;color:rgba(0,0,0,.55);margin-top:3px}

.swal-popup-custom{
  border-radius:18px !important;
  box-shadow:0 18px 40px rgba(15,23,42,.18) !important;
}

.swal-btn-primary,
.swal-btn-secondary{
  border-radius:32px !important;
  padding:16px 24px;
  font-weight:600;
  font-size:16px;
}

.swal-btn-primary{
  background:var(--warn);
  color:#fff;
  border:none;
}

.swal-btn-primary:hover{
  opacity:.9;
}

.swal-btn-secondary{
  border:1px solid var(--warn);
  color:var(--warn);
  background:#fff;
  margin-right:16px;
}

.swal-btn-secondary:hover{
  background:var(--warn);
  color:#fff;
}

.swal2-icon.swal2-warning{
  border-color:#EC5B29 !important;
  color:#EC5B29 !important;
}

.swal-popup-reserve{
  border-radius: 24px;
  padding: 28px 28px 22px;
}

.swal-reserve-body{
  text-align:left;
}

.swal-reserve-slot{
  margin-bottom:16px;
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#f8fafc;
}

.swal-reserve-slot-title{
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  color:#0f172a;
}

.swal-reserve-slot-meta{
  margin-top:4px;
  font-size:14px;
  color:rgba(0,0,0,.62);
}

.swal-reserve-option{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0;
  cursor:pointer;
}

.swal-reserve-option input{
  margin-top:4px;
  accent-color: var(--primary);
}

.swal-reserve-option-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.swal-reserve-option-copy strong{
  font-size:16px;
  line-height:1.3;
  color:#0f172a;
}

.swal-reserve-option-copy span{
  font-size:14px;
  line-height:1.45;
  color:rgba(0,0,0,.62);
}
/* =========================
   Perfil
   ========================= */

.profile-layout{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

.profile-sidebar{
  position:relative;
}

.profile-sidebar-inner{
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.back-app-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  width:100%;
}

.profile-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.profile-nav-link{
  text-decoration:none;
  color:#1f2937;
  font-weight:600;
  border-radius:12px;
  padding:12px 14px;
  transition:.2s ease;
}

.profile-nav-link:hover,
.profile-nav-link.is-active{
  background:#22769b33;
  color:var(--primary);
}

.profile-main{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.profile-section{
  scroll-margin-top:140px;
}

.profile-actions-top{
  margin-top:14px;
}

.profile-subsection--spaced{
  margin-top:24px;
}

.profile-billing-actions{
  margin-top:18px;
}

.profile-user-box{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.profile-photo{
  width:92px;
  height:92px;
  border-radius:999px;
  background-color:var(--secondary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:800;
  flex-shrink:0;
}

.profile-user-data{
  flex:1;
  min-width:240px;
}

.profile-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.profile-label{
  font-size:13px;
  color:#6b7280;
}

.profile-subsection h4{
  margin:0 0 12px 0;
  font-size:18px;
}

.billing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.billing-item{
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
  background:#fafafa;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.settings-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.settings-item{
  width:100%;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:16px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
}

.settings-item:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.danger-outline{
  border-color:rgba(220, 38, 38, 0.25);
  color:#b91c1c;
}

/* =========================
   Pagos / abonos
   ========================= */

.payment-section{
  padding:20px;
}

.payment-section-head{
  margin-bottom:12px;
}

.payment-section-head h3{
  margin:0 0 4px 0;
}

.payment-section-subtitle{
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.45;
}

.payment-table-wrap{
  display:block;
  padding-bottom:16px;
}

.payment-table{
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.payment-table thead th{
  background:#f8fafc;
}

.payment-table tbody tr:hover{
  background:#fbfdff;
}

.payment-cards{
  display:none;
  flex-direction:column;
  gap:12px;
}

.payment-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:16px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.payment-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.payment-card-title{
  font-size:18px;
  font-weight:800;
  margin:0;
}

.payment-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
}

.payment-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.payment-meta-label{
  font-size:11px;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:800;
}

.payment-meta-value{
  font-size:15px;
  font-weight:700;
  color:#0f172a;
}

.payment-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.payment-status.is-active{
  background:rgba(156,216,117,.18);
  color:#30501b;
  border:1px solid rgba(156,216,117,.45);
}

.payment-status.is-pending{
  background:rgba(34,118,155,.10);
  color:#1d4d63;
  border:1px solid rgba(34,118,155,.22);
}

.payment-discount{
  color:#1f7a3f;
  font-weight:800;
}

.payment-muted{
  color:#64748b;
}

.payment-edit-col{
  width:120px;
}

.payment-select{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  margin-top:14px;
}

.payment-edit-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e5e7eb;
}

.payment-edit-actions[hidden]{
  display:none !important;
}

.payment-edit-col[hidden]{
  display:none !important;
}

.payment-action-cancel,
.payment-action-confirm{
  min-width:190px;
}

.payment-action-confirm::before,
.payment-action-confirm::after{
  display:none;
}

/* CTA débito */
.payment-hero{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:22px;
  margin-top:18px;
  margin-bottom:18px;
  background:
    linear-gradient(135deg, rgba(34,118,155,.92) 0%, rgba(156,216,117,.88) 100%),
    url("static/images/background-nexus.png") center/cover no-repeat;
  color:#fff;
  box-shadow:0 12px 32px rgba(15,23,42,.12);
}

.payment-section.has-active-debits .payment-hero{
  background:
    linear-gradient(135deg, #7bbe4f 0%, rgba(34,118,155,.88) 100%),
    url("static/images/background-nexus.png") center/cover no-repeat;
}

.payment-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.payment-hero > *{
  position:relative;
  z-index:1;
}

.payment-hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

.payment-hero-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  margin-top:14px;
}

.payment-hero-copy{
  max-width:620px;
}

.payment-hero-copy h4{
  margin:0 0 8px 0;
  font-size:18px;
  font-weight:800;
  color:#fff;
}

.payment-hero-copy p{
  margin:0;
  color:rgba(255,255,255,.95);
  font-size:15px;
  line-height:1.5;
}

.payment-hero-copy strong{
  color:#fff;
}

.payment-hero-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.payment-main-cta{
  min-width:250px;
  min-height:48px;
  padding:0 22px;
  font-size:15px;
  font-weight:700;
  background:#fff;
  color:var(--primary);
  border:none;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  white-space:nowrap;
}

.payment-main-cta::before,
.payment-main-cta::after{
  display:none;
}

.payment-main-cta:hover{
  background:#f8fbff;
  color:var(--dark);
}

/* tarjeta */
.debit-card-page{
  max-width:760px;
  margin:0 auto;
}

.debit-card-header p{
  color:#475569;
  line-height:1.5;
}

.debit-selected-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:18px 0 22px;
}

.debit-selected-item{
  border:1px solid #e5e7eb;
  background:#fafafa;
  border-radius:14px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.debit-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.debit-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.debit-form-actions{
  margin-top:8px;
}

/* =========================
   Responsive general
   ========================= */

@media (max-width: 980px){
  .profile-layout{
    grid-template-columns:1fr;
  }

  .profile-sidebar-inner{
    position:static;
  }

  .billing-grid{
    grid-template-columns:1fr;
  }

  .payment-hero{
    padding:20px 18px;
  }
}

@media (max-width: 920px){
  .activity-legend{
    border-left:none;
    border-top:1px solid rgba(15,23,42,.10);
    margin-top:12px;
    min-height:auto;
  }

  .legend-badge{
    width:auto;
    flex:0 0 auto;
  }
}

@media (max-width: 820px){
  .topbar,
  .topbar-inner{
    position:relative !important;
  }

  .topbar-inner{
    padding-bottom:6px;
  }

  .page-title{
    position:relative !important;
    margin-top:0;
    padding-top:18px;
    padding-bottom:8px;
  }

  .pageTitle{
    font-size:24px;
  }

  .filters-toggle{
    display:inline-flex;
    margin-bottom:12px;
  }

  .filters-card{
    display:none;
  }

  .filters-card.is-open{
    display:block;
  }

  .filters-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .filters-mobile-actions{
    display:flex;
    width:100%;
  }

  .btn-filter-close,
  .btn-filter-apply{
    flex:1 1 0;
  }

  .filters-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .filters{
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:stretch;
  }

  .field.inline{
    min-width:0;
    width:100%;
  }

  .filters .field,
  .filters select{
    width:100%;
  }

  .filters-right{
    border-left:none;
    padding-left:0;
    border-top:1px solid rgba(15,23,42,.10);
    padding-top:12px;
  }

  #activityLegend{
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
  }

  .legend-badge{
    flex:1 1 calc(50% - 10px);
    justify-content:center;
    max-width:100%;
  }

  .calendar-wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .calendar-head{
    align-items:flex-start;
    gap:12px;
  }

  .calendar-head-top{
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap;
  }

  .calendar-head-top > div:first-child{
    min-width:0;
  }

  .view-switch{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
  }

  #calTitle{
    line-height:1.1;
    margin-bottom:2px;
  }

  #calSub{
    line-height:1.1;
    white-space:nowrap;
  }

  .month-grid{
    grid-template-columns:repeat(7, minmax(44px, 1fr));
  }

  .month-cell{
    height:88px;
    padding:6px 4px;
  }

  .month-num{
    font-size:12px;
    margin-bottom:4px;
  }

  .event-pill{
    font-size:9px;
    padding:5px 6px;
    border-radius:4px;
  }

  .dow{
    font-size:11px;
    padding:8px 4px;
  }

  .slot-card{
    flex-direction:column;
    gap:10px;
  }

  .slot-right{
    width:100%;
  }

  .payment-table-wrap{
    display:none;
  }

  .payment-cards{
    display:flex;
  }

  .payment-card-grid{
    grid-template-columns:1fr;
  }

  .payment-card-title{
    font-size:18px;
  }

  .payment-hero{
    padding:18px 16px;
    border-radius:18px;
  }

  .payment-hero-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .payment-hero-copy{
    max-width:100%;
  }

  .payment-hero-copy h4{
    font-size:16px;
  }

  .payment-hero-copy p{
    font-size:14px;
  }

  .payment-hero-actions{
    justify-content:flex-start;
    width:100%;
  }

  .payment-main-cta{
    min-width:0;
    width:100%;
  }

  .payment-edit-actions{
    flex-direction:column-reverse;
    gap:10px;
  }

  .payment-action-cancel,
  .payment-action-confirm{
    width:100%;
  }

  .debit-form-grid{
    grid-template-columns:1fr;
  }

  .swal-btn-warn .btn-label{
    display:none;
  }

  .swal-btn-warn{
    padding:10px 14px;
  }
}

/* =========================
   Login / Index
   ========================= */

.auth-card-login{
  max-width: 460px;
  margin: 42px auto 0;
  padding: 24px;
}

.auth-head{
  margin-bottom: 18px;
}

.auth-head h1{
  margin: 0 0 8px 0;
}

.auth-subtitle{
  margin: 0;
  color: #64748b;
}

.auth-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-submit{
  margin-top: 4px;
}

.auth-help{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.auth-help p{
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #64748b;
}

.auth-help p:last-child{
  margin-bottom: 0;
}

.auth-help strong{
  color: var(--tc-text);
}

.auth-help a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}

.auth-help a:hover{
  text-decoration: underline;
}

@media (max-width: 820px){
  .auth-card-login{
    margin-top: 24px;
    padding: 18px;
  }
}

/* =========================================
   RESERVAR — CAMBIO 1
   Filtros protagonistas
   ========================================= */

.filters-card{
  border: 1px solid rgba(62,118,153,.16);
  box-shadow: 0 16px 36px rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(62,118,153,.04) 0%, #ffffff 100%);
}

.filters-step{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}


.filters-step-main{
  flex:1 1 auto;
  min-width:0;
}

.filters-collapse-btn{
  flex:0 0 auto;
  white-space:nowrap;
  margin-top:0;
}

.filters-step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  height:56px;
  padding:0 14px;
  border-radius:999px;
  background: rgba(62,118,153,.14);
  color: var(--text);
  font-size:26px;
  font-weight:900;
  letter-spacing:.3px;
  flex: 0 0 auto;
}

.filters-step-copy h3{
  margin:0 0 6px;
  font-size:24px;
  line-height:1.15;
}

.filters-step-copy p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color: rgba(0,0,0,.68);
  max-width: 760px;
}

.fields-prominent{
  gap:16px;
}

.fields-prominent .field.inline{
  min-width: 240px;
  flex:1 1 240px;
}

.fields-prominent .field span{
  font-size:12px;
  font-weight:900;
  color: rgba(0,0,0,.58);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.fields-prominent select{
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  font-size:15px;
  font-weight:700;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

.fields-prominent select:focus{
  border-color: rgba(62,118,153,.45);
  box-shadow: 0 0 0 4px rgba(62,118,153,.10);
}

.filters-inline-help{
  margin-top:14px;
}

.filters-inline-help .help{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color: rgba(0,0,0,.62);
}

.filters-side-title{
  margin-bottom:10px;
  font-size:12px;
  font-weight:900;
  text-transform: uppercase;
  letter-spacing: .45px;
  color: rgba(0,0,0,.58);
}

.calendar-intro{
  margin: 14px 0 0;
  font-size:14px;
  line-height:1.5;
  color: rgba(0,0,0,.68);
}

.reserve-step-card{
  padding:18px;
}

.reserve-step-header{
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--tc-border);
}

.reserve-step-card .calendar-wrap{
  margin-top:0;
}

.reserve-step-card .calendar-wrap > .card{
  margin-top:0;
}

/* Desktop: que el bloque respire mejor */
@media (min-width: 821px){
  .filters-card{
    padding: 22px;
  }
}

/* Mobile */
@media (max-width: 820px){
  .filters-card{
    padding:16px;
    margin-top:10px !important;
  }
 
  .filters-step{
    flex-direction:column;
    align-items:flex-start;
  }

  .filters-collapse-btn{
    align-self:flex-end;
    width:auto;
  }

  .filters-step-badge{
    min-width:auto;
    height:32px;
    padding:0 12px;
  }

  .filters-step-copy h3{
    font-size:21px;
  }

  .filters-step-copy p{
    font-size:13px;
  }

  .fields-prominent{
    gap:14px;
  }

  .fields-prominent .field.inline{
    min-width:100%;
    flex: 1 1 100%;
  }

  .fields-prominent select{
    min-height:50px;
    font-size:15px;
  }

  .calendar-intro{
    font-size:13px;
    margin-top:12px;
  }
}

@media (max-width: 820px){
  .reserve-step-card{
    padding:16px;
  }

  .reserve-step-header{
    margin-bottom:14px;
    padding-bottom:14px;
  }
}


/* =========================================
   RESERVAR — CAMBIO 2
   Calendario mensual mobile más limpio
   ========================================= */

.events{
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
}

.event-pill{
  border-radius: 8px;
  padding: 7px 8px;
  font-weight: 800;
  color:#fff;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.event-pill.compact{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 24px;
  padding: 5px 6px;
  font-size: 10px;
}

.event-pill.compact .event-time{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.more-pill{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);
  border: 1px solid rgba(0,0,0,.10);
  text-align:center;
}

/* Mobile mensual */
@media (max-width: 820px){
  .calendar-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .dow-grid,
  .month-grid{
    min-width: 640px;
  }

  .dow{
    padding: 8px 4px;
    font-size: 11px;
    text-align: center;
  }

  .month-cell{
    height: 86px;
    min-height: 86px;
    padding: 6px 6px 5px;
  }

  .month-num{
    font-size: 12px;
    margin-bottom: 4px;
  }

  .events{
    gap: 4px;
  }

  .event-pill{
    padding: 5px 6px;
    font-size: 10px;
    border-radius: 7px;
  }

  .event-pill.compact{
    min-height: 22px;
    padding: 4px 6px;
    font-size: 10px;
  }

  .more-pill{
    font-size: 9px;
    padding: 4px 6px;
  }
}

/* =========================================
   RESERVAR — FIX REAL MOBILE MES
   Pegar al final de styles.css
   ========================================= */

.calendar-wrap,
.calendar-wrap > .card,
.calendar-scroll,
#slotsList,
.slots,
.slot-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.calendar-wrap > .card {
  overflow: hidden;
}

.calendar-scroll {
  overflow-x: hidden;
}

.month-grid,
.dow-grid {
  width: 100%;
}

.events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.event-pill {
  border-radius: 7px;
  padding: 6px 8px;
  font-weight: 800;
  color: #fff;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-pill.compact {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 4px 6px;
  font-size: 10px;
}

.event-pill.compact .event-time {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.more-pill {
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.72);
  border: 1px solid rgba(0,0,0,.10);
  text-align: center;
}

@media (max-width: 820px) {
  .calendar-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .calendar-wrap > .card {
    width: 100%;
    max-width: 100%;
  }

  .calendar-scroll {
    overflow-x: hidden;
    padding-bottom: 0;
  }

  .dow-grid,
  .month-grid,
  .week-grid {
    min-width: 0 !important;
    width: 100% !important;
  }

  .dow-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .dow {
    padding: 8px 2px;
    font-size: 11px;
    text-align: center;
  }

  .month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
  }

  .month-cell {
    min-width: 0;
    height: 76px;
    min-height: 76px;
    padding: 4px 4px 3px;
  }

  .month-num {
    font-size: 11px;
    margin-bottom: 3px;
  }

  .events {
    gap: 3px;
  }

  .event-pill {
    padding: 4px 4px;
    font-size: 9px;
    border-radius: 6px;
  }

  .event-pill.compact {
    min-height: 18px;
    padding: 3px 4px;
    font-size: 9px;
  }

  .more-pill {
    font-size: 9px;
    padding: 3px 4px;
  }

  .slot-card,
  .slots .slot-card {
    width: 100%;
    max-width: 100%;
  }

  .slot-right,
  .slot-main,
  .slot-actions {
    width: 100%;
    max-width: 100%;
  }

  .btn-primary,
  .slot-card .btn-primary {
    width: 100%;
    max-width: 100%;
  }
}

/* =========================================
   RESERVAR — CAMBIO 3
   Filtros colapsables + navegación mobile
   ========================================= */

.filters-step{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.filters-step-main{
  display:flex;
  align-items:flex-start;
  gap:16px;
  flex:1 1 auto;
}

.filters-collapse-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;

  background:#fff;
  color:var(--primary);

  border:1.5px solid rgba(34,118,155,.35);

  font-size:14px;
  font-weight:700;

  cursor:pointer;
  transition:all .2s ease;
}

.filters-collapse-btn:hover{
  background:rgba(34,118,155,.06);
  border-color:var(--primary);
}

.filters-summary{
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}

.filters-summary-text{
  font-size:13px;
  line-height:1.45;
  color: rgba(0,0,0,.7);
  font-weight:600;
}

.filters-toggle{
  display:none;
}

#filterInstructor:disabled,
#filterLocation:disabled{
  background:#f3f4f6;
  color:#9ca3af;
  cursor:not-allowed;
  opacity:1;
}

.mobile-back-fab{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  background:var(--primary);
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:0 10px 28px rgba(15,23,42,.22);
}

.mobile-back-fab i{
  font-size:16px;
}

@media (max-width: 820px){
  .filters-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
  }

  .filters-card:not(.is-open) .filters-body{
    display:none;
  }

  .filters-card:not(.is-open) .filters-step-copy p,
  .filters-card:not(.is-open) .filters-right{
    display:none;
  }

  .filters-card:not(.is-open) .filters-step{
    margin-bottom:10px;
    padding-bottom:0;
    border-bottom:none;
  }

  .filters-card:not(.is-open) .filters-step-copy h3{
    font-size:18px;
    margin-bottom:0;
  }

  .filters-card:not(.is-open) .filters-summary{
    display:block;
  }

  .filters-card.is-open .filters-summary{
    display:none;
  }

  .filters-step{
    flex-direction:column;
    align-items:stretch;
  }

  .filters-step-main{
    flex-direction:column;
    gap:10px;
  }

  .filters-collapse-btn{
    align-self:flex-start;
  }

  .mobile-back-fab{
    bottom:20px;
    right:14px;
  }
}

@media (min-width: 821px){
  .mobile-back-fab{
    display:none !important;
  }

  .filters-summary{
    display:none !important;
  }
}

/* =========================================
   FAB filtros
   ========================================= */

.filters-fab{
  position: fixed;
  right: 16px;
  bottom: 86px; /* más cerca del botón de subir */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--secondary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  box-shadow: 0 10px 28px rgba(15,23,42,.25);
  cursor: pointer;
}

.filters-fab i{
  font-size: 20px;
}

@media (max-width: 820px){
  .mobile-back-fab{
    right: 14px;
    bottom: 20px;
  }

  .filters-fab{
    right: 14px;
    bottom: 78px;
  }
}

@media (min-width:821px){
  .filters-fab{
    display:none !important;
  }
}

/* =========================================
   SEMANA mobile más clara
   ========================================= */

.day-cell{
  position: relative;
}

.day-meta{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
}

.day-meta.ok{
  color: rgba(15,23,42,.78);
}

.day-meta.off{
  color: rgba(0,0,0,.45);
}

.day-dot{
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  margin-top: auto;
  border: 1px solid rgba(0,0,0,.10);
  background: #f3f4f6;
  align-self: flex-start;
}

.day-dot.has-one{
  background: rgba(62,118,153,.16);
  border-color: rgba(62,118,153,.28);
}

.day-dot.has-many{
  background: rgba(158,202,117,.24);
  border-color: rgba(158,202,117,.45);
}

.day-dot.is-empty{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}

.day-cell.has-one{
  background: rgba(62,118,153,.05);
}

.day-cell.has-many{
  background: rgba(158,202,117,.08);
}

.day-cell.is-empty{
  background: var(--panel-2);
}

/* ===== FIX FINAL SEMANA / MES MOBILE ===== */

.week-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
}

.week-grid.is-mobile-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
}

.week-grid.is-hidden{
  display:none !important;
}

@media (max-width: 820px){
  .week-grid.is-mobile-scroll .day-cell{
    flex:0 0 112px;
    min-width:112px;
    min-height:168px;
    height:168px;
    padding:14px 12px;
    border-radius:18px;
    scroll-snap-align:start;
  }

  .week-grid.is-mobile-scroll .day-name{
    font-size:12px;
    text-transform:lowercase;
  }

  .week-grid.is-mobile-scroll .day-date{
    font-size:14px;
    margin-top:4px;
  }

  .week-grid.is-mobile-scroll .day-meta{
    margin-top:14px;
    font-size:12px;
  }

  .week-grid.is-mobile-scroll .day-dots{
    margin-top:14px;
    gap:7px;
  }

  .week-grid.is-mobile-scroll .day-dot-mini{
    width:11px;
    height:11px;
  }
}
/* =========================================
   SEMANA — disponibilidad con mini puntos
   ========================================= */

.day-cell{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.day-meta{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.day-meta.ok{
  color: rgba(15,23,42,.84);
}

.day-meta.off{
  color: rgba(0,0,0,.45);
}

.day-cell.is-empty{
  background: var(--panel-2);
  border-color: rgba(0,0,0,.10);
}

.day-cell.has-one{
  background: rgba(62,118,153,.05);
  border-color: rgba(62,118,153,.18);
}

.day-cell.has-many{
  background: rgba(158,202,117,.08);
  border-color: rgba(158,202,117,.28);
}

.day-cell.active{
  border-color: rgba(62,118,153,.40);
  background: rgba(62,118,153,.10);
}

.day-dots{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 12px;
}

.day-dot-mini{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display:inline-block;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  flex: 0 0 auto;
}

.day-dot-mini.is-empty{
  background: rgba(0,0,0,.12);
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* Colores por actividad */
.day-dot-mini.padel,   .day-dot-mini.act-color-2{background:#9eca75}
.day-dot-mini.pilates, .day-dot-mini.act-color-3{background:#55c0d9}
.day-dot-mini.gym,     .day-dot-mini.act-color-1{background:#2d84ad}
.day-dot-mini.crossfit,.day-dot-mini.act-color-4{background:#39b8b6}
.day-dot-mini.act-color-5{background:#ff7043}
.day-dot-mini.act-color-6{background:#9c27b0}
.day-dot-mini.act-color-7{background:#26a69a}
.day-dot-mini.act-color-8{background:#f06292}

/* si todavía queda el badge viejo en otra vista, lo apagamos solo en semana */
#weekGrid .badge{
  display:none !important;
}

@media (max-width: 820px){
  .week-grid{
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }

  .week-grid.is-mobile-scroll{
    display:flex;
  }

  #weekGrid .day-cell{
    flex: 0 0 112px;
    min-width: 112px;
    min-height: 168px;
    height: 168px;
    padding: 14px 12px;
    border-radius: 18px;
    scroll-snap-align: start;
  }

  #weekGrid .day-name{
    font-size: 12px;
    text-transform: lowercase;
  }

  #weekGrid .day-date{
    font-size: 14px;
    margin-top: 4px;
  }

  #weekGrid .day-meta{
    margin-top: 14px;
    font-size: 12px;
  }

  #weekGrid .day-dots{
    margin-top: 14px;
    gap: 7px;
  }

  #weekGrid .day-dot-mini{
    width: 11px;
    height: 11px;
  }
}

/* =========================================
   MODAL RESERVA RECURRENTE
   ========================================= */

#reserveModal{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}

.modal-card.reserve-modal{
  position: relative;
  width: min(100%, 520px);
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(15,23,42,.24);
}

.modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.reserve-modal-head{
  margin-bottom: 18px;
}

.reserve-modal-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(62,118,153,.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

.reserve-modal-head h3{
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.1;
}

.reserve-modal-text{
  margin: 0;
  color: rgba(0,0,0,.68);
  line-height: 1.5;
}

.reserve-modal-slot{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: #f8fafc;
  margin-bottom: 16px;
}

.reserve-modal-slot strong{
  font-size: 14px;
}

.reserve-modal-slot span{
  color: rgba(0,0,0,.72);
  line-height: 1.45;
}

.reserve-modal-options{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reserve-option{
  display: block;
  cursor: pointer;
}

.reserve-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reserve-option-ui{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.reserve-option input:checked + .reserve-option-ui{
  border-color: rgba(62,118,153,.35);
  background: rgba(62,118,153,.06);
  box-shadow: 0 0 0 4px rgba(62,118,153,.08);
}

.reserve-option-title{
  font-weight: 900;
  color: var(--text);
}

.reserve-option-desc{
  font-size: 14px;
  color: rgba(0,0,0,.64);
  line-height: 1.45;
}

.reserve-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-secondary{
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 820px){
  .modal-backdrop{
    align-items: flex-end;
    padding: 12px;
  }

  .modal-card.reserve-modal{
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 18px 18px;
    padding: 22px 18px 18px;
  }

  .reserve-modal-head h3{
    font-size: 24px;
    padding-right: 34px;
  }

  .reserve-modal-actions{
    flex-direction: column-reverse;
  }

  .reserve-modal-actions .btn-primary,
  .reserve-modal-actions .btn-secondary{
    width: 100%;
  }
}

#reserveModal[hidden]{
  display: none !important;
}