/* ============ TOKENS ============ */
:root{
  --tierra:#B3A490;
  --tierra-hondo:#8E8069;
  --crema:#FFF0B8;
  --cal:#F2EDE4;
  --corteza:#5B5245;
  --tinta:#22201B;

  --ground:var(--cal);
  --surface:#FAF7F1;
  --surface-2:#EDE7DC;
  --line:#DCD4C6;
  --line-fuerte:#C6BCA9;
  --text:var(--tinta);
  --text-2:#6B6255;
  --text-3:#8E8577;
  --accent:#8E7A46;
  --accent-soft:#FFF0B8;

  --libre:#6E7A5A;
  --lleno:#A8654B;
  --propio:#4F6B78;

  --shadow:0 1px 2px rgba(52,44,32,.05), 0 8px 24px -12px rgba(52,44,32,.18);
  --shadow-alto:0 2px 6px rgba(52,44,32,.08), 0 24px 48px -20px rgba(52,44,32,.30);

  --r:10px;
  --step--1:.8125rem;
  --step-0:.9375rem;
  --step-1:1.125rem;
  --step-2:1.5rem;
  --step-3:2rem;

  --display:"Petrona", Georgia, "Times New Roman", serif;
  --body:"Archivo", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1A1815; --surface:#232019; --surface-2:#2C2820;
    --line:#3A352C; --line-fuerte:#4C4638;
    --text:#EFEAE0; --text-2:#B8B0A1; --text-3:#8E8778;
    --accent:#FFF0B8; --accent-soft:#3A3428;
    --tierra:#B3A490; --tierra-hondo:#CBBDA5;
    --libre:#9AA983; --lleno:#D08D6E; --propio:#8FB3C4;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-alto:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#1A1815; --surface:#232019; --surface-2:#2C2820;
  --line:#3A352C; --line-fuerte:#4C4638;
  --text:#EFEAE0; --text-2:#B8B0A1; --text-3:#8E8778;
  --accent:#FFF0B8; --accent-soft:#3A3428;
  --tierra:#B3A490; --tierra-hondo:#CBBDA5;
  --libre:#9AA983; --lleno:#D08D6E; --propio:#8FB3C4;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-alto:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--body); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0; text-wrap:balance; line-height:1.14; letter-spacing:-.01em}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}

.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
.eyebrow{font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-weight:600}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:22px; height:58px}
.nav-logo{display:flex; align-items:center; gap:10px; flex-shrink:0; background:none; padding:0}
.nav-logo .mark{width:34px; height:34px; border-radius:50%; background:var(--tierra); display:grid; place-items:center; flex-shrink:0}
.nav-logo .mark img{width:20px; height:auto}
.nav-logo b{font-family:var(--display); font-size:1.0625rem; font-weight:600; letter-spacing:.01em}
.nav-links{display:flex; gap:20px; margin-left:auto; align-items:center}
.nav-links a{text-decoration:none; font-size:var(--step--1); color:var(--text-2); padding:4px 0; border-bottom:1.5px solid transparent; transition:color .18s, border-color .18s}
.nav-links a:hover{color:var(--text); border-color:var(--tierra)}
.nav-tools{display:flex; gap:8px; align-items:center; margin-left:auto}
.nav-links + .nav-tools{margin-left:18px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 17px; border-radius:999px; font-size:var(--step--1); font-weight:500;
  border:1px solid var(--line-fuerte); background:var(--surface); color:var(--text);
  transition:background .18s, border-color .18s, transform .12s; white-space:nowrap;
}
.btn:hover{background:var(--surface-2); border-color:var(--text-3)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--tierra); border-color:var(--tierra); color:#221F19; font-weight:600}
.btn-primary:hover{background:var(--tierra-hondo); border-color:var(--tierra-hondo); color:#1B1915}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text)}
.btn-sm{padding:5px 12px; font-size:.75rem}
.btn-peligro{color:var(--lleno); border-color:color-mix(in srgb, var(--lleno) 40%, transparent)}
.btn-peligro:hover{background:color-mix(in srgb, var(--lleno) 12%, transparent); border-color:var(--lleno)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:disabled:hover{background:var(--surface); border-color:var(--line-fuerte)}
.icon-btn{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--text-2); flex-shrink:0}
.icon-btn:hover{background:var(--surface-2); color:var(--text)}

/* ============ AVISOS / PROMOS ============ */
.avisos{display:flex; flex-direction:column}
.banda{
  display:flex; align-items:center; gap:14px; padding:11px 22px;
  font-size:var(--step--1); border-bottom:1px solid var(--line);
  background:var(--surface-2); color:var(--text);
}
.banda .bt{font-weight:700; letter-spacing:.04em; flex-shrink:0}
.banda .bx{flex:1; color:var(--text-2)}
.banda .cerrar{margin-left:auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--text-3); flex-shrink:0}
.banda .cerrar:hover{background:var(--ground); color:var(--text)}
.banda.promo{background:var(--accent-soft); border-bottom-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.banda.promo .bt{color:var(--accent)}
.banda.promo .bx{color:var(--text)}
.banda.alerta{background:color-mix(in srgb, var(--lleno) 12%, transparent); border-bottom-color:color-mix(in srgb, var(--lleno) 35%, transparent)}
.banda.alerta .bt{color:var(--lleno)}

/* ============ HERO ============ */
.hero-band{position:relative; overflow:hidden; border-radius:0 0 var(--r) var(--r); min-height:420px; display:flex; align-items:flex-end}
.hero-band img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%}
.hero-band::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,26,20,.10) 0%, rgba(30,26,20,.18) 45%, rgba(30,26,20,.72) 100%)}
.hero-copy{position:relative; z-index:2; padding:120px 22px 32px; max-width:1120px; margin:0 auto; width:100%}
.hero-copy h1{color:#FBF7EE; font-size:var(--step-2); font-weight:400; font-style:italic; letter-spacing:.02em; max-width:22ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px; color:rgba(251,247,238,.82); font-size:var(--step--1)}
.hero-meta span{display:inline-flex; align-items:center; gap:7px}
.dot-live{width:7px; height:7px; border-radius:50%; background:#9AA983; box-shadow:0 0 0 3px rgba(154,169,131,.28)}
.dot-off{width:7px; height:7px; border-radius:50%; background:#C08A6C; box-shadow:0 0 0 3px rgba(192,138,108,.25)}

/* ============ ONDA ============ */
.onda{display:block; width:100%; height:26px; color:var(--line-fuerte); overflow:visible; margin:26px 0 0}
.onda path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.onda-anim path{stroke-dasharray:760; stroke-dashoffset:760; animation:trazo 1.5s cubic-bezier(.55,.1,.3,1) .15s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .onda-anim path{animation:none; stroke-dashoffset:0}
  *{animation-duration:.001s !important; transition-duration:.001s !important}
}

/* ============ SECCIONES ============ */
.sec{padding:52px 0 8px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px}
.sec-head h2{font-size:var(--step-3); font-weight:400}
.sec-head p{color:var(--text-2); font-size:var(--step--1); max-width:52ch}

/* ============ AGENDA (mes) ============ */
.agenda-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r) var(--r) 0 0; background:var(--surface); border-bottom:none}
.agenda-bar .rango{font-family:var(--display); font-size:var(--step-1); font-weight:500; text-transform:capitalize}
.agenda-bar .hoy-tag{font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.agenda-nav{display:flex; gap:6px; margin-left:auto; align-items:center; flex-wrap:wrap}

.mes{border:1px solid var(--line); border-radius:0 0 var(--r) var(--r); background:var(--surface); overflow:hidden}
.mes-dow{display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); background:var(--surface-2)}
.mes-dow span{padding:8px 6px; font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:700; text-align:center}
.mes-dias{display:grid; grid-template-columns:repeat(7,1fr)}
.dia-c{
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  min-height:98px; padding:7px 7px 8px; display:flex; flex-direction:column; gap:5px;
  text-align:left; width:100%; background:none; transition:background .15s;
}
.dia-c:nth-child(7n+1){border-left:none}
.dia-c:hover{background:var(--surface-2)}
.dia-c .dn{font-family:var(--display); font-size:1.0625rem; font-weight:500; line-height:1; letter-spacing:.01em}
.dia-c.otro{opacity:.32}
.dia-c.hoy .dn{color:var(--accent); font-weight:700}
.dia-c.hoy{background:var(--accent-soft)}
.dia-c.sel{box-shadow:inset 0 0 0 2px var(--tierra)}
.dia-c .sin{font-size:.625rem; color:var(--text-3)}
.dia-c .agregar-dia{font-size:.625rem; color:var(--text-3)}
.dia-c:hover .agregar-dia{color:var(--accent)}

.chips-h{display:flex; flex-wrap:wrap; gap:3px}
.ch{
  display:inline-block;
  font-size:.625rem; font-weight:600; padding:2px 5px; border-radius:4px;
  border:1px solid var(--line-fuerte); color:var(--text-2); background:var(--ground);
  font-variant-numeric:tabular-nums; line-height:1.35; white-space:nowrap;
}
.ch.casi{border-color:var(--lleno); color:var(--lleno)}
.ch.lleno{background:var(--lleno); border-color:var(--lleno); color:#FFF6F0}
.ch.mia{background:var(--propio); border-color:var(--propio); color:#F2F8FA}
.ch.cancel{text-decoration:line-through; opacity:.5}

.dia-detalle{margin-top:20px}
.dia-detalle .eyebrow{margin-bottom:10px}
.lista-dia{display:flex; flex-direction:column; gap:8px}
.fila-clase{display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); text-align:left; width:100%}
.fila-clase .hora{font-family:var(--display); font-size:1.375rem; font-weight:500; min-width:62px}
.fila-clase .info{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0}
.fila-clase .profe{font-size:.6875rem; color:var(--text-3)}
.fila-clase .estado{font-size:.75rem; color:var(--text-2)}
.fila-clase.anotada{border-color:var(--propio); background:var(--accent-soft)}
.fila-clase.completa .estado{color:var(--lleno); font-weight:500}
.fila-clase.pasada{opacity:.5}
.fila-clase.cancelada .estado{color:var(--lleno); font-weight:600}
.fila-clase.cancelada .hora{text-decoration:line-through; opacity:.6}

.reformers{display:flex; gap:3px; flex-wrap:wrap}
.rf{width:15px; height:10px; border-radius:2.5px; border:1.25px solid var(--line-fuerte); background:transparent; position:relative; flex-shrink:0}
.rf::after{content:""; position:absolute; left:2px; right:2px; top:50%; height:1.25px; background:var(--line-fuerte); transform:translateY(-50%); border-radius:1px}
.rf.ocupado{background:var(--tierra); border-color:var(--tierra)}
.rf.ocupado::after{background:rgba(34,32,27,.42)}
.rf.mio{background:var(--propio); border-color:var(--propio)}
.rf.mio::after{background:rgba(255,255,255,.55)}

.leyenda{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px; font-size:.75rem; color:var(--text-3)}
.leyenda span{display:inline-flex; align-items:center; gap:7px}

/* ============ PLANES ============ */
.planes{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px}
.plan{border:1px solid var(--line); border-radius:var(--r); padding:20px 18px 18px; background:var(--surface); display:flex; flex-direction:column; gap:9px}
.plan.destacado{border-color:var(--tierra); box-shadow:var(--shadow)}
.plan .pn{font-family:var(--display); font-size:var(--step-1); font-weight:600; letter-spacing:.01em}
.plan .pc{font-size:var(--step--1); color:var(--text-2)}
.plan .pp{font-family:var(--display); font-size:var(--step-3); font-weight:400; margin-top:5px; letter-spacing:-.02em}
.plan .pp small{font-size:var(--step--1); font-family:var(--body); color:var(--text-3); letter-spacing:0}
.plan .badge{align-self:flex-start; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
.plan .btn{margin-top:auto}

/* ============ GALERIA / DATOS ============ */
.galeria{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px}
.galeria figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--surface-2)}
.galeria img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.galeria figure:hover img{transform:scale(1.035)}

.datos{display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:start}
.dl{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.dl > div{display:flex; gap:18px; padding:11px 0; border-bottom:1px solid var(--line); align-items:baseline}
.dl dt{flex:0 0 110px; font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:600}
.dl dd{margin:0; flex:1; font-size:var(--step-0)}
.horario-mini{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.horario-mini .hm-row{display:flex; justify-content:space-between; gap:16px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:var(--step--1)}
.horario-mini .hm-row:last-child{border-bottom:none}
.horario-mini .hm-row.cerrado{color:var(--text-3)}
.horario-mini .hm-head{background:var(--surface-2); font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:600}

.politica{margin-top:16px; padding:15px 17px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line); font-size:var(--step--1); color:var(--text-2)}
.politica b{color:var(--text); font-weight:600}

.foot{margin-top:56px; border-top:1px solid var(--line); padding:26px 0 40px}
.foot-in{display:flex; gap:20px; flex-wrap:wrap; align-items:center; justify-content:space-between}
.foot small{color:var(--text-3); font-size:.75rem}

/* ============ MODAL ============ */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(26,22,16,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:grid; place-items:center; padding:18px}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-alto); width:min(520px, 100%); max-height:88vh; overflow-y:auto}
.modal.ancho{width:min(860px, 100%)}
.modal-head{display:flex; align-items:flex-start; gap:14px; padding:20px 22px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2}
.modal-head h3{font-size:var(--step-2); font-weight:500; flex:1}
.modal-head .sub{font-size:var(--step--1); color:var(--text-2); margin-top:3px}
.modal-body{padding:18px 22px 22px; display:flex; flex-direction:column; gap:15px}
.modal-foot{display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; padding-top:4px}

.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-weight:600}
.field input, .field select, .field textarea{font:inherit; font-size:var(--step-0); color:var(--text); background:var(--ground); border:1px solid var(--line-fuerte); border-radius:8px; padding:9px 11px; width:100%}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.field textarea{resize:vertical; min-height:64px}
.field .ayuda{font-size:.6875rem; color:var(--text-3); line-height:1.4}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:var(--step--1); color:var(--text-2); line-height:1.45}
.check input{width:17px; height:17px; margin:2px 0 0; flex-shrink:0; accent-color:var(--tierra)}

.socia-lista{max-height:230px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; background:var(--ground)}
.socia-op{display:flex; align-items:center; gap:11px; padding:9px 12px; width:100%; text-align:left; border-bottom:1px solid var(--line)}
.socia-op:last-child{border-bottom:none}
.socia-op:hover{background:var(--surface-2)}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--tierra); color:#221F19; display:grid; place-items:center; font-size:.75rem; font-weight:700; flex-shrink:0; font-family:var(--body)}
.avatar.chico{width:22px; height:22px; font-size:.5625rem}
.socia-op .nm{flex:1; font-size:var(--step-0); line-height:1.3}
.socia-op .nm small{display:block; color:var(--text-3); font-size:.6875rem}

.pill{font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid var(--line-fuerte); color:var(--text-2); white-space:nowrap; display:inline-block}
.pill.ok{color:var(--libre); border-color:color-mix(in srgb, var(--libre) 45%, transparent); background:color-mix(in srgb, var(--libre) 10%, transparent)}
.pill.alerta{color:var(--lleno); border-color:color-mix(in srgb, var(--lleno) 45%, transparent); background:color-mix(in srgb, var(--lleno) 10%, transparent)}
.pill.info{color:var(--propio); border-color:color-mix(in srgb, var(--propio) 45%, transparent); background:color-mix(in srgb, var(--propio) 10%, transparent)}

.aviso{padding:11px 14px; border-radius:8px; font-size:var(--step--1); line-height:1.5; border:1px solid var(--line-fuerte); background:var(--surface-2); color:var(--text-2)}
.aviso.alerta{border-color:color-mix(in srgb, var(--lleno) 40%, transparent); background:color-mix(in srgb, var(--lleno) 9%, transparent); color:var(--text)}
.aviso.ok{border-color:color-mix(in srgb, var(--libre) 40%, transparent); background:color-mix(in srgb, var(--libre) 9%, transparent); color:var(--text)}
.aviso b{color:var(--text)}

.cupo-vista{display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r); background:var(--ground)}
.cupo-vista .reformers{gap:4px}
.cupo-vista .rf{width:19px; height:13px}
.cupo-vista .txt{font-size:var(--step--1); color:var(--text-2)}
.cupo-vista .txt b{font-family:var(--display); font-size:var(--step-1); color:var(--text); display:block; font-weight:500}

/* ============ PANEL ============ */
.panel-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
.panel-tabs button{padding:9px 15px; font-size:var(--step--1); color:var(--text-2); white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500}
.panel-tabs button[aria-selected="true"]{color:var(--text); border-color:var(--tierra)}
.panel-tabs .cnt{display:inline-block; margin-left:6px; font-size:.625rem; font-weight:700; background:var(--lleno); color:#fff; border-radius:999px; padding:1px 6px; vertical-align:1px}

.tabla{width:100%; border-collapse:collapse; font-size:var(--step--1)}
.tabla th{text-align:left; font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:700; padding:9px 11px; border-bottom:1px solid var(--line-fuerte); white-space:nowrap}
.tabla td{padding:10px 11px; border-bottom:1px solid var(--line); vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr:hover{background:var(--surface-2)}
.tabla .r{text-align:right}
.tabla-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}

.medidor{display:flex; align-items:center; gap:9px; min-width:130px}
.medidor .barra{flex:1; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; min-width:52px}
.medidor .barra i{display:block; height:100%; background:var(--tierra); border-radius:3px}
.medidor .barra i.lleno{background:var(--lleno)}
.medidor .cifra{font-size:.75rem; color:var(--text-2); white-space:nowrap}

.panel-dias{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:14px}
.panel-dia h4{font-size:var(--step--1); text-transform:uppercase; letter-spacing:.13em; color:var(--text-3); font-weight:700; font-family:var(--body); margin-bottom:9px}
.panel-dia .stack{display:flex; flex-direction:column; gap:9px}
.panel-clase{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:13px 15px; display:flex; flex-direction:column; gap:9px}
.panel-clase.completa{border-color:color-mix(in srgb, var(--lleno) 40%, transparent)}
.panel-clase.cancelada{opacity:.6; border-style:dashed}
.panel-clase .pc-head{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.panel-clase .pc-head .h{font-family:var(--display); font-size:var(--step-1); font-weight:500}
.panel-clase .pc-head .pf{font-size:.6875rem; color:var(--text-3)}
.panel-clase .pc-head .c{font-size:.75rem; color:var(--text-3); margin-left:auto}
.pc-acciones{display:flex; gap:6px; flex-wrap:wrap}

.asistentes{display:flex; flex-direction:column; gap:3px}
.asis{display:flex; align-items:center; gap:8px; font-size:var(--step--1); padding:3px 0}
.asis .nb{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.asis .marcas{display:flex; gap:3px; flex-shrink:0}
.asis .mk{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; font-size:12px; border:1px solid var(--line); color:var(--text-3); background:var(--ground)}
.asis .mk:hover{border-color:var(--text-3); color:var(--text)}
.asis .mk.on-si{background:color-mix(in srgb, var(--libre) 20%, transparent); border-color:var(--libre); color:var(--libre)}
.asis .mk.on-no{background:color-mix(in srgb, var(--lleno) 18%, transparent); border-color:var(--lleno); color:var(--lleno)}
.asis .x{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:var(--text-3); font-size:13px; flex-shrink:0}
.asis .x:hover{background:var(--surface-2); color:var(--lleno)}
.asis .motivo{font-size:.6875rem; color:var(--lleno); font-style:italic}

/* ============ CAJA ============ */
.caja-tot{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:16px}
.tot{border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; background:var(--surface); display:flex; flex-direction:column; gap:3px}
.tot .tl{font-size:.625rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:700}
.tot .tv{font-family:var(--display); font-size:1.75rem; font-weight:500; letter-spacing:-.02em; line-height:1.15}
.tot.ingreso .tv{color:var(--libre)}
.tot.egreso .tv{color:var(--lleno)}
.tot.saldo{border-color:var(--tierra)}
.tot .td{font-size:.6875rem; color:var(--text-3)}
.monto-pos{color:var(--libre); font-weight:600}
.monto-neg{color:var(--lleno); font-weight:600}

/* ============ MI CUENTA ============ */
.cuenta-cab{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:18px}
.cuenta-cab .avatar{width:52px; height:52px; font-size:1.0625rem}
.cuenta-cab .qn{flex:1; min-width:180px}
.cuenta-cab .qn h3{font-size:var(--step-2); font-weight:500}
.cuenta-cab .qn .sb{font-size:var(--step--1); color:var(--text-2)}
.creditos{display:flex; align-items:center; gap:14px; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.creditos .cn{font-family:var(--display); font-size:2.25rem; font-weight:400; line-height:1; letter-spacing:-.02em}
.creditos .cd{font-size:var(--step--1); color:var(--text-2)}
.creditos .cd b{color:var(--text); display:block; font-weight:600}
.mis-reservas{display:flex; flex-direction:column; gap:8px}
.mr{display:flex; align-items:center; gap:14px; padding:12px 15px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.mr .f{font-family:var(--display); font-size:var(--step-1); font-weight:500; min-width:120px}
.mr .d{flex:1; font-size:var(--step--1); color:var(--text-2)}

.vacio{padding:32px 22px; text-align:center; color:var(--text-3); font-size:var(--step--1); border:1px dashed var(--line-fuerte); border-radius:var(--r)}
.vacio b{display:block; font-family:var(--display); font-size:var(--step-1); color:var(--text-2); font-weight:500; margin-bottom:5px}
.vacio .btn{margin-top:12px}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; background:var(--tinta); color:#F6F1E6; padding:11px 19px; border-radius:999px; font-size:var(--step--1); box-shadow:var(--shadow-alto); max-width:calc(100vw - 36px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .toast{background:#EFEAE0; color:#22201B}}
:root[data-theme="dark"] .toast{background:#EFEAE0; color:#22201B}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .datos{grid-template-columns:1fr; gap:24px}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--step-3:1.75rem; --step-2:1.375rem}
  .nav-links{display:none}
  .agenda-bar{border-radius:var(--r) var(--r) 0 0}
  .mes-dow span{font-size:.5rem; letter-spacing:.06em; padding:7px 2px}
  .dia-c{min-height:66px; padding:5px 4px; gap:3px}
  .dia-c .dn{font-size:.875rem}
  .ch{font-size:.5625rem; padding:1px 3px; border-radius:3px}
  .fila-clase{gap:10px; padding:11px 12px}
  .fila-clase .hora{font-size:1.125rem; min-width:52px}
  .grid-2{grid-template-columns:1fr}
  .hero-copy{padding:80px 22px 24px}
  .sec{padding:40px 0 6px}
  .banda{padding:10px 16px; flex-wrap:wrap; gap:8px}
}

/* ============ ACCESO (login) ============ */
.acceso{max-width:430px; margin:0 auto; padding:12px 0 40px}
.acceso .caja{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.acceso .marca{display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:4px}
.acceso .marca .mark{width:42px; height:42px; border-radius:50%; background:var(--tierra); display:grid; place-items:center}
.acceso .marca .mark img{width:25px}
.acceso .marca b{font-family:var(--display); font-size:1.25rem; font-weight:600}
.acceso h2{font-size:var(--step-2); font-weight:500; text-align:center}
.acceso .sub{font-size:var(--step--1); color:var(--text-2); text-align:center; margin-bottom:4px}
.acceso .cambiar{font-size:var(--step--1); color:var(--text-2); text-align:center}
.acceso .cambiar button{text-decoration:underline; color:var(--text); font-weight:500}
.acceso .error{font-size:var(--step--1); color:var(--lleno); text-align:center}
.tabs-acceso{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:6px}
.tabs-acceso button{flex:1; padding:9px 8px; font-size:var(--step--1); color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px; font-weight:500}
.tabs-acceso button[aria-selected="true"]{color:var(--text); border-color:var(--tierra)}
.usuario-chip{display:flex; align-items:center; gap:7px; font-size:var(--step--1); color:var(--text-2)}
.usuario-chip .avatar{width:26px; height:26px; font-size:.625rem}


/* ============ GESTOR DE FOTOS ============ */
.fotos-sec{display:flex; flex-direction:column; gap:24px}
.fotos-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px}
.foto-card{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface); display:flex; flex-direction:column;
}
.foto-card .lienzo{
  position:relative; aspect-ratio:3/4; background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden;
}
.foto-card.portada .lienzo{aspect-ratio:16/9}
.foto-card .lienzo img{width:100%; height:100%; object-fit:cover}
.foto-card .lienzo .pos{
  position:absolute; top:7px; left:7px; font-size:.625rem; font-weight:700;
  background:rgba(26,22,16,.72); color:#F6F1E6; padding:2px 7px; border-radius:999px;
}
.foto-card .pie{padding:9px 11px; display:flex; flex-direction:column; gap:7px}
.foto-card .peso{font-size:.625rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.foto-card .acciones{display:flex; gap:5px; flex-wrap:wrap}
.foto-card .acciones .btn{flex:1; min-width:0}
.foto-vacia{
  border:1px dashed var(--line-fuerte); border-radius:var(--r); background:var(--surface-2);
  display:grid; place-items:center; aspect-ratio:3/4; color:var(--text-3);
  font-size:var(--step--1); text-align:center; padding:16px; gap:8px;
}
.dropzone{
  border:1.5px dashed var(--line-fuerte); border-radius:var(--r); background:var(--surface-2);
  padding:26px 20px; text-align:center; color:var(--text-2); font-size:var(--step--1);
  display:flex; flex-direction:column; align-items:center; gap:10px; transition:border-color .15s, background .15s;
}
.dropzone.encima{border-color:var(--tierra); background:var(--accent-soft)}
.dropzone b{font-family:var(--display); font-size:var(--step-1); color:var(--text); font-weight:500}
.barra-subida{height:4px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin-top:8px}
.barra-subida i{display:block; height:100%; background:var(--tierra); border-radius:3px; transition:width .2s}

/* ============ NOVEDADES ============ */
#btnCampana{position:relative}
#btnCampana .camp{font-size:15px; line-height:1}
#btnCampana .badge-n{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--lleno); color:#FFF6F0;
  font-size:.5625rem; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--ground); font-variant-numeric:tabular-nums;
}
.nov-lista{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto}
.nov{
  display:flex; align-items:flex-start; gap:11px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ground);
}
.nov .ico{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; flex-shrink:0; font-weight:700;
}
.nov.alta .ico{background:color-mix(in srgb, var(--libre) 18%, transparent); color:var(--libre)}
.nov.baja .ico{background:color-mix(in srgb, var(--lleno) 18%, transparent); color:var(--lleno)}
.nov .cuerpo{flex:1; min-width:0}
.nov .quien{font-weight:600; font-size:var(--step-0)}
.nov .que{font-size:var(--step--1); color:var(--text-2)}
.nov .cuando{font-size:.625rem; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ============ MAPA ============ */
.mapa{
  margin-top:20px; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--surface-2); line-height:0;
}
.mapa iframe{width:100%; height:340px; border:0; display:block}
.mapa .sin-mapa{
  padding:34px 22px; text-align:center; color:var(--text-3);
  font-size:var(--step--1); line-height:1.6;
}
#btnComoLlegar{text-decoration:none; flex-shrink:0}
@media (max-width:760px){
  .mapa iframe{height:260px}
}

/* ============ BOTON FLOTANTE DE WHATSAPP ============ */
.wsp-flotante{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0; border-radius:999px;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 4px 16px rgba(18,140,70,.34), 0 2px 5px rgba(0,0,0,.14);
  transition:width .24s cubic-bezier(.2,.7,.3,1), padding .24s cubic-bezier(.2,.7,.3,1),
             transform .16s, box-shadow .16s;
}
/* La animacion NO va en la clase base: el boton arranca oculto y una
   animacion con fill-mode both se queda clavada en el fotograma inicial,
   dejandolo invisible. Se agrega desde el JS recien cuando se muestra. */
.wsp-flotante.entra{animation:wspEntra .42s cubic-bezier(.2,1.3,.4,1) both}
.wsp-flotante svg{width:29px; height:29px; fill:currentColor; flex-shrink:0}
.wsp-texto{
  font-family:var(--body); font-size:var(--step--1); font-weight:600;
  white-space:nowrap; max-width:0; opacity:0; overflow:hidden;
  transition:max-width .24s, opacity .18s, margin-left .24s;
}
.wsp-flotante:hover, .wsp-flotante:focus-visible{
  width:auto; padding:0 20px; transform:translateY(-2px);
  box-shadow:0 7px 22px rgba(18,140,70,.42), 0 2px 6px rgba(0,0,0,.16);
}
.wsp-flotante:hover .wsp-texto, .wsp-flotante:focus-visible .wsp-texto{
  max-width:140px; opacity:1; margin-left:10px;
}
.wsp-flotante:active{transform:translateY(0)}
@keyframes wspEntra{
  from{opacity:0; transform:scale(.6) translateY(14px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .wsp-flotante.entra{animation:none}
}
@media (max-width:760px){
  .wsp-flotante{right:14px; bottom:14px; width:52px; height:52px}
  .wsp-flotante:hover{width:52px; padding:0}
  .wsp-texto{display:none}
  /* que el aviso no quede tapado por el boton */
  .toast{bottom:82px}
}