/* ==========================================================
   Rubén · Clases Online y Presencial
   Hoja de estilos única
   ========================================================== */

:root{
  --tinta:#16233a;
  --tinta-2:#41506b;
  --tinta-3:#6c7a93;
  --papel:#fbfaf7;
  --superficie:#ffffff;
  --superficie-2:#f4f2ed;
  --borde:#e3ded3;
  --borde-fuerte:#cfc7b6;
  --ambar:#b8761f;
  --ambar-claro:#f7ecd8;
  --verde:#2f7d76;
  --verde-claro:#e6f2f0;
  --rojo:#a8322f;
  --rojo-claro:#fbe9e8;

  --libre-bg:#e9f4ec;    --libre-bd:#b7d8c3;  --libre-tx:#286b46;
  --res-bg:#fdf2dc;      --res-bd:#e6cd9a;    --res-tx:#8a6113;
  --adj-bg:#e3edfb;      --adj-bd:#b3cbef;    --adj-tx:#1c4a90;
  --per-bg:#efecf5;      --per-bd:#cec8dd;    --per-tx:#544d78;
  --blo-bg:#f0efec;      --blo-bd:#d7d3cb;    --blo-tx:#78736a;
  --pas-bg:#f7f6f4;      --pas-bd:#e8e5df;    --pas-tx:#a8a49c;

  --r:10px; --r-s:7px; --r-l:16px;
  --sombra:0 1px 2px rgba(22,35,58,.05), 0 6px 18px -8px rgba(22,35,58,.15);
  --sombra-alta:0 8px 40px -12px rgba(22,35,58,.32);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--ambar); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0 0 .5em}
h1{font-size:2rem; letter-spacing:-.01em}
h2{font-size:1.45rem}
h3{font-size:1.12rem}
p{margin:0 0 1em}
small{font-size:.82rem}
[hidden]{display:none !important}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.cabecera-in{
  max-width:1180px; margin:0 auto; padding:11px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.marca{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.marca:hover{text-decoration:none}
.marca-ico{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(145deg,var(--tinta),#2b3c5c);
  color:#fff; display:grid; place-items:center;
  font-family:var(--serif); font-size:19px; font-weight:600;
  box-shadow:var(--sombra);
}
.marca-tx strong{display:block; font-family:var(--serif); font-size:1.02rem; line-height:1.15}
.marca-tx span{display:block; font-size:.72rem; color:var(--tinta-3); letter-spacing:.05em; text-transform:uppercase}

.nav{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
.nav a{
  padding:6px 11px; border-radius:99px; font-size:.86rem; font-weight:500;
  color:var(--tinta-2); text-decoration:none; white-space:nowrap;
}
.nav a:hover{background:var(--superficie-2); text-decoration:none}
.nav a.activo{background:var(--tinta); color:#fff}
.nav a.admin{color:var(--ambar)}
.nav a.admin.activo{background:var(--ambar); color:#fff}

.sesion{display:flex; align-items:center; gap:9px; font-size:.85rem}
.sesion .quien{color:var(--tinta-3)}
.sesion .quien b{color:var(--tinta)}

/* ---------- Estructura ---------- */
.envoltorio{max-width:1180px; margin:0 auto; padding:26px 20px 70px}
.pie{
  border-top:1px solid var(--borde); margin-top:40px;
  padding:24px 20px 40px; text-align:center; color:var(--tinta-3); font-size:.83rem;
}

/* ---------- Componentes ---------- */
.tarjeta{
  background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r-l); padding:22px; box-shadow:var(--sombra);
}
.tarjeta + .tarjeta{margin-top:18px}
.rejilla{display:grid; gap:16px}
@media(min-width:720px){ .rejilla.dos{grid-template-columns:1fr 1fr} .rejilla.tres{grid-template-columns:repeat(3,1fr)} }

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 17px; border-radius:99px; border:1px solid transparent;
  background:var(--tinta); color:#fff; font:inherit; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:.14s ease; text-decoration:none; line-height:1.3;
}
.boton:hover{transform:translateY(-1px); box-shadow:var(--sombra); text-decoration:none; color:#fff}
.boton:active{transform:none}
.boton[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.boton.sec{background:var(--superficie); color:var(--tinta); border-color:var(--borde-fuerte)}
.boton.sec:hover{background:var(--superficie-2); color:var(--tinta)}
.boton.amb{background:var(--ambar)}
.boton.ver{background:var(--verde)}
.boton.pel{background:var(--superficie); color:var(--rojo); border-color:#e6c3c1}
.boton.pel:hover{background:var(--rojo-claro); color:var(--rojo)}
.boton.mini{padding:5px 11px; font-size:.79rem}
.boton.ancho{width:100%}

label.campo{display:block; margin-bottom:13px}
label.campo > span{display:block; font-size:.79rem; font-weight:600; color:var(--tinta-2); margin-bottom:5px; letter-spacing:.01em}
input[type=text],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=email],select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--borde-fuerte); border-radius:var(--r-s);
  background:var(--superficie); color:var(--tinta); font:inherit; font-size:.92rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ambar); outline-offset:1px; border-color:var(--ambar)}
textarea{resize:vertical; min-height:88px}
.check{display:flex; align-items:flex-start; gap:9px; font-size:.88rem; cursor:pointer; margin-bottom:12px}
.check input{margin-top:3px; flex:0 0 auto; accent-color:var(--ambar); width:16px; height:16px}

.etiqueta{
  display:inline-block; padding:2px 9px; border-radius:99px;
  font-size:.71rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border:1px solid;
}
.et-libre{background:var(--libre-bg); border-color:var(--libre-bd); color:var(--libre-tx)}
.et-reservado{background:var(--res-bg); border-color:var(--res-bd); color:var(--res-tx)}
.et-adjudicada{background:var(--adj-bg); border-color:var(--adj-bd); color:var(--adj-tx)}
.et-personal{background:var(--per-bg); border-color:var(--per-bd); color:var(--per-tx)}
.et-bloqueado{background:var(--blo-bg); border-color:var(--blo-bd); color:var(--blo-tx)}
.et-neutra{background:var(--superficie-2); border-color:var(--borde); color:var(--tinta-2)}

.aviso{
  border:1px solid var(--borde); border-left:3px solid var(--ambar);
  background:var(--ambar-claro); border-radius:var(--r-s);
  padding:12px 15px; margin:0 0 16px; font-size:.9rem;
}
.aviso.ok{background:var(--verde-claro); border-left-color:var(--verde)}
.aviso.mal{background:var(--rojo-claro); border-left-color:var(--rojo)}
.aviso p:last-child{margin-bottom:0}

.vacio{
  text-align:center; padding:34px 20px; color:var(--tinta-3);
  border:1px dashed var(--borde-fuerte); border-radius:var(--r); background:var(--superficie-2);
  font-size:.9rem;
}

.titulo-seccion{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.titulo-seccion h1{margin:0}
.subtitulo{color:var(--tinta-3); margin:0 0 22px; font-size:.98rem; max-width:70ch}

table.tabla{width:100%; border-collapse:collapse; font-size:.88rem}
table.tabla th{
  text-align:left; padding:8px 10px; border-bottom:2px solid var(--borde);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-3);
}
table.tabla td{padding:9px 10px; border-bottom:1px solid var(--borde); vertical-align:middle}
table.tabla tr:last-child td{border-bottom:none}
.desliza{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- Portada ---------- */
.hero{
  background:linear-gradient(150deg,#16233a,#26374f 55%,#33465f);
  color:#fff; border-radius:var(--r-l); padding:44px 34px; margin-bottom:24px;
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
  border-radius:50%; background:radial-gradient(circle,rgba(184,118,31,.5),transparent 68%);
}
.hero h1{color:#fff; font-size:2.3rem; margin-bottom:.3em; position:relative}
.hero p{color:#d5dced; max-width:58ch; position:relative; margin-bottom:0}
.hero .lema{font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:#c69852; margin-bottom:12px; position:relative}
.hero-acc{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; position:relative}
.hero-acc .boton{background:#fff; color:var(--tinta)}
.hero-acc .boton.hueco{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.hero-acc .boton.hueco:hover{background:rgba(255,255,255,.12); color:#fff}

.atajo{
  display:block; background:var(--superficie); border:1px solid var(--borde);
  border-radius:var(--r); padding:18px; text-decoration:none; color:inherit;
  transition:.16s ease; height:100%;
}
.atajo:hover{text-decoration:none; border-color:var(--borde-fuerte); transform:translateY(-2px); box-shadow:var(--sombra)}
.atajo .ico{font-size:1.5rem; display:block; margin-bottom:7px}
.atajo h3{margin-bottom:.25em}
.atajo p{color:var(--tinta-3); font-size:.87rem; margin:0}

/* ---------- Calendario ---------- */
.cal-barra{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r);
  padding:11px 14px; margin-bottom:14px;
}
.cal-mes{font-family:var(--serif); font-size:1.15rem; font-weight:600; min-width:150px; text-transform:capitalize}
.cal-nav{display:flex; gap:5px}
.icobtn{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--borde-fuerte);
  background:var(--superficie); cursor:pointer; font-size:15px; color:var(--tinta);
  display:grid; place-items:center; line-height:1;
}
.icobtn:hover{background:var(--superficie-2)}
.icobtn[disabled]{opacity:.35; cursor:not-allowed}

.leyenda{display:flex; gap:7px; flex-wrap:wrap; margin-left:auto}

.cal-rejilla{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px}
.cal-cab{
  text-align:center; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3); padding:5px 0;
}
.dia{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-s);
  min-height:82px; min-width:0; padding:7px 6px; cursor:pointer; text-align:left;
  font:inherit; color:inherit; display:flex; flex-direction:column; gap:5px;
  transition:.12s ease; overflow:hidden;
}
.dia:hover{border-color:var(--tinta); box-shadow:var(--sombra)}
.dia.fuera{background:transparent; border-color:transparent; cursor:default; pointer-events:none}
.dia.sel{border-color:var(--tinta); box-shadow:0 0 0 2px var(--tinta)}
.dia.pasado{background:var(--pas-bg); color:var(--pas-tx); cursor:default}
.dia .num{font-weight:700; font-size:.94rem}
.dia .num.hoy{
  background:var(--ambar); color:#fff; border-radius:50%;
  width:22px; height:22px; display:grid; place-items:center; font-size:.8rem;
}
.dia .resumen{font-size:.68rem; line-height:1.3; color:var(--tinta-3); margin-top:auto; overflow-wrap:anywhere}
.puntos{display:flex; gap:3px; flex-wrap:wrap}
.punto{width:7px; height:7px; border-radius:50%; border:1px solid}
.p-libre{background:var(--libre-bd); border-color:var(--libre-tx)}
.p-reservado{background:var(--res-bd); border-color:var(--res-tx)}
.p-adjudicada{background:var(--adj-bd); border-color:var(--adj-tx)}
.p-personal{background:var(--per-bd); border-color:var(--per-tx)}
.p-bloqueado{background:var(--blo-bd); border-color:var(--blo-tx)}

/* Franjas del día */
.franjas{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:6px}
.franja{
  border:1px solid; border-radius:var(--r-s); padding:7px 9px; font-size:.8rem;
  font:inherit; font-size:.8rem; text-align:left; cursor:default; line-height:1.35;
}
.franja b{display:block; font-size:.86rem; font-variant-numeric:tabular-nums}
.franja em{display:block; font-style:normal; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; font-weight:600; opacity:.85}
.f-libre{background:var(--libre-bg); border-color:var(--libre-bd); color:var(--libre-tx); cursor:pointer}
.f-libre:hover{background:#daecdf; box-shadow:var(--sombra)}
.f-reservado{background:var(--res-bg); border-color:var(--res-bd); color:var(--res-tx)}
.f-adjudicada{background:var(--adj-bg); border-color:var(--adj-bd); color:var(--adj-tx)}
.f-personal{background:var(--per-bg); border-color:var(--per-bd); color:var(--per-tx)}
.f-bloqueado{background:var(--blo-bg); border-color:var(--blo-bd); color:var(--blo-tx)}
.f-pasado{background:var(--pas-bg); border-color:var(--pas-bd); color:var(--pas-tx)}

.bloque-horario{margin-bottom:18px}
[data-dia]{scroll-margin-top:78px}
.bloque-horario > h4{
  font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tinta-3); margin:0 0 7px; padding-bottom:5px; border-bottom:1px solid var(--borde);
}

/* ---------- Modal ---------- */
.telon{
  position:fixed; inset:0; background:rgba(15,22,35,.55); backdrop-filter:blur(3px);
  z-index:100; display:flex; align-items:flex-start; justify-content:center;
  padding:28px 16px; overflow-y:auto;
}
.modal{
  background:var(--superficie); border-radius:var(--r-l); width:100%; max-width:520px;
  box-shadow:var(--sombra-alta); overflow:hidden; margin:auto 0;
}
.modal-cab{
  padding:18px 22px; border-bottom:1px solid var(--borde);
  display:flex; align-items:flex-start; gap:12px; background:var(--superficie-2);
}
.modal-cab h3{margin:0; flex:1}
.modal-cab small{display:block; color:var(--tinta-3); font-weight:400; margin-top:2px}
.modal-cue{padding:22px}
.modal-pie{padding:15px 22px; border-top:1px solid var(--borde); display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; background:var(--superficie-2)}
.cerrar{
  border:none; background:transparent; font-size:23px; line-height:1; cursor:pointer;
  color:var(--tinta-3); padding:0 3px;
}
.cerrar:hover{color:var(--tinta)}

.pestanas{display:flex; gap:4px; border-bottom:1px solid var(--borde); margin-bottom:18px; flex-wrap:wrap}
.pestanas button{
  border:none; background:transparent; padding:9px 14px; cursor:pointer; font:inherit;
  font-size:.88rem; font-weight:600; color:var(--tinta-3); border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.pestanas button.activa{color:var(--tinta); border-bottom-color:var(--ambar)}
.pestanas button:hover{color:var(--tinta)}

.opciones{display:flex; gap:8px; flex-wrap:wrap}
.opcion{
  flex:1 1 118px; border:1px solid var(--borde-fuerte); border-radius:var(--r-s);
  padding:11px; cursor:pointer; background:var(--superficie); text-align:center; transition:.12s;
}
.opcion:hover{border-color:var(--tinta)}
.opcion input{position:absolute; opacity:0; pointer-events:none}
.opcion.marcada{border-color:var(--tinta); background:var(--superficie-2); box-shadow:inset 0 0 0 1px var(--tinta)}
.opcion.desact{opacity:.4; cursor:not-allowed}
.opcion b{display:block; font-size:.92rem}
.opcion span{display:block; font-size:.78rem; color:var(--tinta-3)}

/* ---------- Precios ---------- */
.precio-tarjeta{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--r-l);
  padding:24px; text-align:center; box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.precio-tarjeta.destaca{border-color:var(--ambar); border-width:2px; position:relative}
.precio-tarjeta .cinta{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--ambar); color:#fff; font-size:.68rem; font-weight:700;
  padding:3px 12px; border-radius:99px; text-transform:uppercase; letter-spacing:.06em;
}
.precio-tarjeta .cifra{font-family:var(--serif); font-size:2.5rem; font-weight:600; line-height:1; margin:8px 0 3px}
.precio-tarjeta .cifra small{font-size:.95rem; color:var(--tinta-3); font-family:var(--sans)}
.precio-tarjeta .detalle{color:var(--tinta-3); font-size:.86rem; margin-top:auto; padding-top:10px}
.precio-tarjeta h3{margin-bottom:0}

/* ---------- Foro ---------- */
.hilo{border:1px solid var(--borde); border-radius:var(--r); padding:16px 18px; background:var(--superficie); margin-bottom:12px}
.hilo-cab{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px}
.avatar{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:.76rem; font-weight:700; background:var(--superficie-2); color:var(--tinta-2);
  border:1px solid var(--borde);
}
.avatar.anon{background:var(--per-bg); color:var(--per-tx); border-color:var(--per-bd)}
.hilo-cab .autor{font-weight:600; font-size:.9rem}
.hilo-cab .cuando{color:var(--tinta-3); font-size:.78rem}
.hilo-cuerpo{white-space:pre-wrap; font-size:.93rem; margin-bottom:10px}
.respuestas{border-left:2px solid var(--borde); margin:12px 0 0 14px; padding-left:14px}
.respuesta{margin-bottom:10px}
.respuesta:last-child{margin-bottom:0}
.hilo-acc{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ---------- Particulares / admin ---------- */
.saludo{
  background:linear-gradient(150deg,#16233a,#2c3f5c); color:#fff;
  border-radius:var(--r-l); padding:26px 28px; margin-bottom:20px;
}
.saludo h1{color:#fff; margin-bottom:.35em}
.saludo p{color:#cdd6e6; margin:0; max-width:62ch}
.pago{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--borde); border-left:3px solid var(--ambar);
  background:var(--ambar-claro); border-radius:var(--r); padding:14px 18px; margin-bottom:18px;
}
.pago .cantidad{font-family:var(--serif); font-size:1.7rem; font-weight:600; line-height:1}
.pago .cantidad.cero{color:var(--verde)}

.persona{
  border:1px solid var(--borde); border-radius:var(--r); padding:14px 16px;
  background:var(--superficie); margin-bottom:10px;
}
.persona-cab{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:4px}
.persona-cab b{font-size:.98rem}
.persona-datos{font-size:.83rem; color:var(--tinta-3)}

.mensaje-caja{
  border:1px solid var(--borde); border-left:3px solid var(--verde); background:var(--verde-claro);
  border-radius:var(--r-s); padding:12px 15px; margin-bottom:10px; font-size:.9rem;
}
.mensaje-caja .cuando{display:block; font-size:.74rem; color:var(--tinta-3); margin-top:6px}

.lista-simple{list-style:none; margin:0; padding:0}
.lista-simple li{
  padding:11px 0; border-bottom:1px solid var(--borde);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:.9rem;
}
.lista-simple li:last-child{border-bottom:none}
.lista-simple .crece{flex:1; min-width:160px}

.credenciales{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85rem;
  background:var(--superficie-2); border:1px solid var(--borde); border-radius:var(--r-s);
  padding:2px 7px; display:inline-block;
}

/* ---------- Utilidades ---------- */
.fila{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.fila.fin{justify-content:flex-end}
.crecer{flex:1}
.mt{margin-top:16px}
.mb{margin-bottom:16px}
.mb-0{margin-bottom:0}
.tenue{color:var(--tinta-3)}
.centro{text-align:center}
.numerico{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:820px){
  .marca-tx span{display:none}
  .nav a{padding:6px 9px; font-size:.82rem}
}

@media(max-width:640px){
  .envoltorio{padding:18px 14px 60px}
  .hero{padding:30px 22px}
  .hero h1{font-size:1.7rem}
  h1{font-size:1.6rem}
  .cabecera-in{padding:10px 14px; gap:10px}
  .nav{width:100%; margin-left:0; order:3; overflow-x:auto; padding-bottom:2px}
  .sesion{margin-left:auto}
  .leyenda{margin-left:0; width:100%}
  .dia{min-height:64px; padding:5px 4px; gap:3px}
  .dia .num{font-size:.85rem}
  .dia .resumen{font-size:.6rem; line-height:1.2}
  .punto{width:5px; height:5px}
  .cal-rejilla{gap:3px}
  .cal-cab{font-size:.6rem}
  .franjas{grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:4px}
  .franja{padding:6px 7px}
  .franja em{font-size:.62rem}
  .precio-tarjeta{padding:18px}
  .modal-cue{padding:18px}
}