/* ============================================================
   Barra Alta — capa de aplicación
   Se carga después de base.css, que trae los tokens, la barra
   superior, el pie y las utilidades de la landing.
   ============================================================ */

/* El bloque oscuro salió de la landing con la calculadora, pero el
   portal lo sigue usando en las cabeceras de sección. */
:root{--iron:#12151C}

/* ── contenedores de página ───────────────────────────────── */
.pagina{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,96px)}
.angosto{width:100%;max-width:520px;margin-inline:auto}
.medio{width:100%;max-width:900px;margin-inline:auto}

.tarjeta{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-m);
  padding:clamp(26px,4vw,38px)}
.tarjeta--plana{box-shadow:var(--shadow-s)}

.titulo-pagina{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.95;font-size:clamp(2.2rem,5vw,3.3rem);letter-spacing:-.012em}
.sub-pagina{color:var(--ink-2);margin-top:14px;font-size:1.02rem;max-width:52ch}

/* ── formularios ──────────────────────────────────────────── */
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.campo label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
.campo input,.campo select,.campo textarea{
  background:var(--paper);border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-mono);font-size:1rem;padding:13px 14px;border-radius:2px;
  width:100%;transition:border-color .2s,background .2s}
.campo textarea{font-family:var(--font-body);font-size:.95rem;resize:vertical;min-height:92px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--plate-red);background:var(--card);outline:none}
.campo input[aria-invalid="true"]{border-color:var(--plate-red);background:#FDF3F5}
.campo .pista{font-family:var(--font-mono);font-size:.68rem;color:var(--steel-dim);line-height:1.6}
.par{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.par{grid-template-columns:1fr}}

.casilla{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;
  padding:15px 16px;background:var(--paper);border:1px solid var(--line);margin-bottom:20px}
.casilla input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--plate-red)}
.casilla span{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.casilla a{color:var(--plate-red-ink)}

/* ── avisos ───────────────────────────────────────────────── */
.aviso-caja{padding:13px 16px;border:1px solid var(--line);margin-bottom:20px;
  font-size:.94rem;line-height:1.55;border-left-width:3px;border-left-style:solid}
.aviso-caja.error{border-left-color:var(--plate-red);background:#FDF3F5;color:#8E0A20;
  border-color:rgba(200,16,46,.28)}
.aviso-caja.ok{border-left-color:var(--plate-green);background:#F1F9F4;color:#0C5A34;
  border-color:rgba(18,128,74,.25)}
.aviso-caja.info{border-left-color:var(--plate-blue);background:#F2F7FD;color:#0E4478;
  border-color:rgba(18,85,158,.22)}
.aviso-caja.pendiente{border-left-color:var(--plate-yellow);background:#FFFBF0;color:#6B4E05;
  border-color:rgba(240,181,0,.3)}

/* ── pasos del alta ───────────────────────────────────────── */
.pasos-alta{display:flex;margin-bottom:clamp(24px,4vw,36px);border:1px solid var(--line);background:var(--card)}
.pasos-alta span{flex:1;display:flex;align-items:center;gap:9px;padding:12px 14px;
  border-left:1px solid var(--line-soft);font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--steel-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pasos-alta span:first-child{border-left:0}
.pasos-alta b{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#C7CCD6;color:#fff;font-size:.62rem;font-weight:600}
.pasos-alta .on{color:var(--ink);background:var(--paper-2)}
.pasos-alta .on b{background:var(--plate-red)}
.pasos-alta .hecho b{background:var(--plate-green)}

/* ── resumen del plan elegido ─────────────────────────────── */
.plan-elegido{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--c,var(--plate-red));margin-bottom:24px}
.plan-elegido .disco{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:6px solid var(--c,var(--plate-red));background:var(--card);
  font-family:var(--font-mono);font-size:.56rem;font-weight:600;color:var(--ci,var(--plate-red-ink))}
.plan-elegido .nom{font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  text-transform:uppercase;line-height:1}
.plan-elegido .precio{font-family:var(--font-mono);font-size:.86rem;color:var(--steel);
  font-variant-numeric:tabular-nums;margin-top:4px}
.plan-elegido .cambiar{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim);text-decoration:underline}
.plan-elegido .cambiar:hover{color:var(--plate-red)}

/* ── datos de transferencia ───────────────────────────────── */
.transferencia{border:1px solid var(--line);background:var(--card)}
.transferencia dl{margin:0}
.transferencia div{display:flex;justify-content:space-between;gap:18px;padding:13px 20px;
  border-bottom:1px solid var(--line-soft)}
.transferencia div:last-child{border-bottom:0}
.transferencia dt{margin:0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel-dim)}
.transferencia dd{margin:0;font-family:var(--font-mono);font-size:.92rem;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums;word-break:break-word}
.transferencia dd.destacado{font-weight:600;color:var(--plate-red)}

/* ── panel ────────────────────────────────────────────────── */
.panel-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(26px,4vw,40px)}
.saludo{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.6vw,3rem);
  text-transform:uppercase;line-height:.95}
.saludo em{font-style:normal;color:var(--plate-red)}

.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.ficha{background:var(--card);padding:17px 19px}
.ficha dt{margin:0 0 7px;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-dim)}
.ficha dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.7rem;line-height:1;
  font-variant-numeric:tabular-nums}
.ficha dd small{display:block;font:400 .78rem/1.45 var(--font-body);color:var(--steel);
  margin-top:6px;letter-spacing:0}

.vacio{padding:34px 26px;text-align:center;border:1px dashed var(--line);background:var(--card)}
.vacio p{color:var(--steel);max-width:44ch;margin-inline:auto}

/* ── enlaces de apoyo ─────────────────────────────────────── */
.enlace-fino{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel);text-decoration:none}
.enlace-fino:hover{color:var(--plate-red)}
.centrado{text-align:center}
.pie-form{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.92rem;color:var(--steel)}
.pie-form a{color:var(--plate-red-ink);font-weight:500}

/* ============================================================
   PANEL — secciones de entrenamiento y alimentación
   ============================================================ */

.plan-estado{text-align:right}
.plan-estado__k{margin:0;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-dim)}
.plan-estado__v{margin:7px 0 0;display:flex;align-items:center;justify-content:flex-end;gap:9px;
  font-weight:700;font-size:1.16rem;line-height:1.2;color:var(--ink)}
.plan-estado__v i{width:7px;height:7px;border-radius:50%;background:var(--plate-green);
  flex:none;font-style:normal}
.plan-estado__f{margin:6px 0 0;font-family:var(--font-mono);font-size:.75rem;color:var(--steel);
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:600px){
  .plan-estado{text-align:left}
  .plan-estado__v{justify-content:flex-start}
}

.seccion{margin-bottom:clamp(34px,5vw,56px)}
.seccion:last-of-type{margin-bottom:0}
.seccion__cab{margin-bottom:20px}
.seccion__cab h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  line-height:.95;font-size:clamp(1.9rem,4vw,2.7rem);margin-top:12px}
.seccion__cab p{color:var(--ink-2);margin-top:10px;max-width:56ch;font-size:.98rem}

/* ── días de la rutina ────────────────────────────────────── */
.dias{border-top:1px solid var(--line)}
.dia-r{border:1px solid var(--line);border-top:0;background:var(--card)}
.dia-r:first-child{border-top:1px solid var(--line)}
.dia-r > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  padding:16px 18px;transition:background .2s}
.dia-r > summary::-webkit-details-marker{display:none}
.dia-r > summary:hover{background:var(--paper)}
.dia-r__letra{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:2px;
  background:var(--iron,#12151C);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.dia-r[open] .dia-r__letra{background:var(--plate-red)}
.dia-r__nom{font-weight:700;font-size:1.06rem;color:var(--ink);line-height:1.25}
.dia-r__meta{margin-left:auto;display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);font-size:.7rem;color:var(--steel-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dia-r__flecha{width:9px;height:9px;flex:none;border-right:1.5px solid var(--steel-dim);
  border-bottom:1.5px solid var(--steel-dim);transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease,ease)}
.dia-r[open] .dia-r__flecha{transform:rotate(225deg) translateY(-2px);border-color:var(--plate-red)}
@media (max-width:560px){.dia-r__meta span.ocultable{display:none}}

.tabla-ej{width:100%;border-collapse:collapse;border-top:1px solid var(--line-soft)}
.tabla-ej th{text-align:left;font-family:var(--font-mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-dim);font-weight:500;padding:11px 18px;
  background:var(--paper-2);border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tabla-ej td{padding:13px 18px;border-bottom:1px solid var(--line-soft);font-size:.94rem;vertical-align:top}
.tabla-ej tr:last-child td{border-bottom:0}
.tabla-ej td.n{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  color:var(--ink-2);white-space:nowrap}
.tabla-ej .orden{font-family:var(--font-mono);font-size:.75rem;color:var(--steel-dim);width:1%}
.tabla-ej .nota-ej{display:block;font-size:.83rem;color:var(--steel);margin-top:3px;line-height:1.45}
.tabla-cont{overflow-x:auto}
.tabla-ej{min-width:520px}


/* ── alimentación ─────────────────────────────────────────── */
.kcal-caja{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;padding:24px 26px;
  background:var(--iron,#12151C);color:#EDEFF3}
.kcal-caja .cifra{font-family:var(--font-display);font-weight:900;line-height:.82;
  font-size:clamp(3.2rem,8vw,5rem);color:#fff;font-variant-numeric:tabular-nums}
.kcal-caja .unidad{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:#FF4560;padding-bottom:.4em}
.kcal-caja .glosa{font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:#A2AABA;
  margin-left:auto;text-align:right;max-width:30ch}
@media (max-width:560px){.kcal-caja .glosa{margin-left:0;text-align:left}}

.barra-macros{display:flex;height:14px;overflow:hidden;background:var(--line)}
.barra-macros span{display:block;height:100%}

.macros{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:0}
.macro{background:var(--card);padding:18px 20px;border-top:3px solid var(--c)}
.macro__nom{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ci,var(--steel));font-weight:600}
.macro__g{font-family:var(--font-display);font-weight:800;font-size:2.3rem;line-height:1;
  margin-top:9px;font-variant-numeric:tabular-nums}
.macro__g small{font-family:var(--font-mono);font-size:.9rem;font-weight:400;color:var(--steel);margin-left:3px}
.macro__det{margin-top:9px;font-family:var(--font-mono);font-size:.72rem;color:var(--steel);
  font-variant-numeric:tabular-nums;line-height:1.65}

.extra-nutri{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);
  border-top:0;margin-bottom:0}
.extra-nutri div{flex:1;min-width:170px;background:var(--card);padding:15px 20px}
.extra-nutri dt{margin:0 0 5px;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-dim)}
.extra-nutri dd{margin:0;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── botón de editar cuenta, junto al nombre ──────────────── */
.saludo-fila{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-lapiz{width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);border-radius:2px;
  color:var(--steel);text-decoration:none;
  transition:border-color .2s,color .2s,background .2s,transform .15s,box-shadow .2s}
.btn-lapiz:hover{border-color:var(--plate-red);color:var(--plate-red);
  transform:translateY(-1px);box-shadow:var(--shadow-s)}
.btn-lapiz svg{width:17px;height:17px;display:block}

/* ── registros: calendario del mes ────────────────────────── */
.cal--mes{background:var(--card);border:1px solid var(--line);padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--shadow-s);margin-bottom:clamp(20px,3vw,30px)}
.cal--mes .cal__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cal--mes .cal__mes{font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  text-transform:uppercase;line-height:1}
.cal--mes .cal__b{width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:2px;
  text-decoration:none;font-size:1rem;transition:border-color .2s,color .2s}
.cal--mes .cal__b:hover{border-color:var(--plate-red);color:var(--plate-red)}
.cal--mes .cal__b.inactivo{opacity:.3;pointer-events:none}
.cal--mes .cal__dow,.cal--mes .cal__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal--mes .cal__dow span{text-align:center;font-family:var(--font-mono);font-size:.66rem;
  color:var(--steel-dim);padding-bottom:8px}

.cal--mes .dia{min-height:56px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;border:1px solid transparent;border-radius:2px;
  font-family:var(--font-mono);font-size:.9rem;color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,color .15s}
.cal--mes a.dia:hover{background:var(--paper);border-color:var(--line)}
.cal--mes span.dia{color:#C2C7D1}
.cal--mes .dia.es-hoy{border-color:var(--line);font-weight:600}
.cal--mes .dia.sel{background:var(--plate-red);border-color:var(--plate-red);color:#fff}
.cal--mes .dia.oculto{visibility:hidden;min-height:0}
.marcas{display:flex;gap:3px;height:5px}
.marcas i,.cal__pie i{width:5px;height:5px;border-radius:50%;display:block;font-style:normal}
.m-comida{background:var(--plate-blue)}
.m-entreno{background:var(--plate-red)}
.dia.sel .m-comida,.dia.sel .m-entreno{background:#fff}
.cal__pie{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.cal__pie span{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:.68rem;color:var(--steel-dim)}

/* ── el día elegido ───────────────────────────────────────── */
.dia-detalle{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-m);
  padding:clamp(20px,3vw,30px)}
.dia-detalle__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dia-detalle__cab h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.1rem);
  text-transform:uppercase;line-height:1}
.kcal-tag{display:inline-block;background:var(--plate-red);color:#fff;padding:9px 15px;
  border-radius:2px;font-family:var(--font-mono);font-size:.9rem;font-weight:600;
  letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Sin datos no hay nada que destacar: el rojo se guarda para la cifra. */
.kcal-tag.vacia{background:var(--paper-2);color:var(--steel-dim);font-weight:400}

.bloque-dia{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.bloque-dia__t{margin:0 0 16px;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
@media (max-width:520px){.tres{grid-template-columns:1fr}}

/* ── elegir el día de rutina con un punto ─────────────────── */
.entreno-op{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.op{display:flex;align-items:center;gap:13px;padding:14px 16px;cursor:pointer;
  border:1px solid var(--line);border-bottom:0;background:var(--card);
  transition:background .18s,border-color .18s}
.op-grupo:last-child .op,.op--nada:last-child{border-bottom:1px solid var(--line)}
.op-grupo:last-child:not(.abierto) .op{border-bottom:1px solid var(--line)}
.op:hover{background:var(--paper)}
.op input[type=radio]{width:18px;height:18px;flex:none;margin:0;accent-color:var(--plate-red);cursor:pointer}
.op__letra{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:2px;
  background:var(--iron);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem}
.op__txt{font-weight:600;font-size:1rem;color:var(--ink);line-height:1.25}
.op__meta{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:.68rem;color:var(--steel-dim);white-space:nowrap}
@media (max-width:520px){.op__meta span:not(.hecho-tag){display:none}}

.op--nada{border-bottom:0}
.op--nada .op__txt{font-weight:500;color:var(--ink-2)}

/* el elegido se marca en rojo y su tabla queda pegada debajo */
.op-grupo.abierto > .op{background:#FDF3F5;border-color:rgba(200,16,46,.32)}
.op-grupo.abierto > .op .op__letra{background:var(--plate-red)}
.op-grupo.abierto > .op__tabla{border-color:rgba(200,16,46,.32)}
.op__tabla{border:1px solid var(--line);border-bottom:0}
.op-grupo:last-child .op__tabla{border-bottom:1px solid var(--line)}
.op__tabla .tabla-ej{border-top:0}

/* sin JavaScript se ven todas las tablas: verboso, pero utilizable */
.js-op .op-grupo:not(.abierto) > .op__tabla{display:none}
.tabla-ej td.celda-input{padding:7px 10px}
.tabla-ej td.celda-input input{width:100%;min-width:78px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);font-family:var(--font-mono);font-size:.94rem;
  padding:8px 10px;border-radius:2px;font-variant-numeric:tabular-nums}
.tabla-ej td.celda-input input:focus{outline:none;border-color:var(--plate-red);background:var(--card)}
.tabla-ej td.celda-input.estrecha input{min-width:62px}

/* ── bloque del peso ──────────────────────────────────────── */
.bloque-dia--ultimo{border-bottom:0;padding-bottom:4px}
.op__tabla--peso{padding:16px}
.op-grupo[data-peso].abierto > .op__tabla--peso{background:#FDF9FA}

/* ── gráficos del progreso mensual ────────────────────────── */
.graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;
  margin-bottom:16px}
.grafico{margin:0;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);
  padding:16px 16px 8px}
.grafico figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px;margin-bottom:6px}
.grafico__t{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink)}
.grafico__d{font-family:var(--font-mono);font-size:.72rem;color:var(--steel);
  font-variant-numeric:tabular-nums}
.grafico__d.baja{color:var(--plate-green-ink)}
.grafico__d.sube{color:var(--plate-red-ink)}
.g-svg{display:block;width:100%;height:auto;overflow:visible}

/* rejilla y ejes recesivos: una sombra por debajo de la superficie */
.g-rej{stroke:var(--line-soft);stroke-width:1}
.g-eje{font-family:var(--font-mono);font-size:8.5px;fill:var(--steel-dim)}
.g-eje--y{text-anchor:end}
.g-eje--x{text-anchor:middle}

.g-linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-punto{stroke:var(--card);stroke-width:2}       /* anillo del color del fondo */
.g-punta{font-family:var(--font-mono);font-size:10px;font-weight:600}

.g-barra rect{transition:opacity .15s}
.graficos:hover .g-barra:not(:hover) rect{opacity:.55}
.g-punto:hover{r:4.6}

/* la referencia va punteada porque es un umbral, no rejilla */
.g-obj{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.g-obj-txt{font-family:var(--font-mono);font-size:8.5px;fill:var(--steel);text-anchor:end}

.grafico--dato{display:flex;flex-direction:column}
.grafico__solo{margin:14px 0 16px;font-family:var(--font-mono);color:var(--steel);font-size:.8rem}
.grafico__solo b{font-family:var(--font-display);font-size:2.4rem;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-right:4px}
.grafico__solo span{display:block;margin-top:8px;font-size:.72rem;color:var(--steel-dim);line-height:1.6}


/* ── cotización del pack ──────────────────────────────────── */
.cotiza{border:1px solid var(--line);background:var(--paper)}
.cotiza__fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);font-size:.94rem;color:var(--ink-2)}
.cotiza__fila b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink);
  font-weight:500;white-space:nowrap}
.cotiza__fila--dto{color:var(--plate-green-ink)}
.cotiza__fila--dto b{color:var(--plate-green-ink);font-weight:600}
.cotiza__fila--total{border-bottom:0;background:var(--card);padding-block:15px}
.cotiza__fila--total span{font-weight:600;color:var(--ink)}
.cotiza__fila--total b{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1}
.tachado{text-decoration:line-through;text-decoration-color:var(--steel-dim);color:var(--steel)!important}
.cotiza__pie{margin:0;padding:11px 16px;border-top:1px solid var(--line-soft);background:var(--card);
  font-family:var(--font-mono);font-size:.7rem;color:var(--steel-dim);line-height:1.6}
.cotiza__pie b{color:var(--ink);font-weight:600}

/* ============================================================
   PANEL DEL PROFE
   ============================================================ */
.ancho{width:100%;max-width:1180px;margin-inline:auto}

/* ── lista de clientes ── */
.tabla-clientes{width:100%;min-width:820px;border-collapse:collapse;border:1px solid var(--line);
  background:var(--card);box-shadow:var(--shadow-s)}
.tabla-clientes th[scope=col]{text-align:left;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--steel);font-weight:500;
  padding:12px 16px;background:var(--paper-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tabla-clientes td,.tabla-clientes th[scope=row]{padding:14px 16px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;text-align:left;font-weight:400}
.tabla-clientes tr:last-child td,.tabla-clientes tr:last-child th{border-bottom:0}
.tabla-clientes tbody tr{transition:background .2s}
.tabla-clientes tbody tr:hover{background:#F7F8FB}
.tabla-clientes td.n{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Lo que requiere acción se marca en el borde, no con fondo rojo */
.fila-pendiente th[scope=row]{box-shadow:inset 3px 0 0 var(--plate-red)}

.cli-nom{display:block;font-weight:600;font-size:.98rem;color:var(--ink);text-decoration:none}
.cli-nom:hover{color:var(--plate-red)}
.cli-mail{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--steel-dim);margin-top:3px}
.cli-mail.alerta,.alerta{color:var(--plate-red);font-weight:600}

.pastilla{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;
  padding:4px 9px;border-radius:2px;margin:0 4px 4px 0;white-space:nowrap;
  border:1px solid var(--p,var(--line));color:var(--p,var(--steel));background:var(--card)}
.pastilla.verde{border-color:rgba(18,128,74,.35);color:var(--plate-green-ink);background:#F1F9F4}
.pastilla.ambar{border-color:rgba(240,181,0,.45);color:var(--plate-yellow-ink);background:#FFFBF0}
.pastilla.gris{border-color:var(--line);color:var(--steel-dim);background:var(--paper)}
.acciones{text-align:right;white-space:nowrap}
.btn--fino{padding:8px 13px;font-size:.67rem}

/* ── ficha del cliente ── */
.datos-cliente{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:clamp(28px,4vw,42px)}
.datos-cliente div{background:var(--card);padding:15px 18px}
.datos-cliente dt{margin:0 0 6px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-dim)}
.datos-cliente dd{margin:0;font-size:.93rem;color:var(--ink);word-break:break-word}
.datos-cliente dd a{color:var(--plate-blue-ink)}

.cab-con-accion{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.sube{color:var(--plate-green-ink);font-weight:600}
.baja{color:var(--plate-red);font-weight:600}

/* ── cuadre de la pauta ── */

/* ── editor de rutina ── */
.dia-edit{border:1px solid var(--line);background:var(--card);margin-bottom:16px;box-shadow:var(--shadow-s)}
.dia-edit__cab{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--line-soft);
  background:var(--paper-2)}
.dia-edit__nom{flex:1;min-width:120px;background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-family:var(--font-body);font-weight:600;font-size:1rem;padding:9px 12px;border-radius:2px}
.dia-edit__nom:focus{outline:none;border-color:var(--plate-red)}
.dia-edit__pie{padding:12px 16px;border-top:1px solid var(--line-soft)}

.tabla-edit{min-width:760px}
.tabla-edit td{padding:6px 8px}
.tabla-edit td input{width:100%;min-width:90px;background:var(--paper);border:1px solid var(--line);
  color:var(--ink);font-family:var(--font-mono);font-size:.88rem;padding:8px 10px;border-radius:2px}
.tabla-edit td input:focus{outline:none;border-color:var(--plate-red);background:var(--card)}
.tabla-edit td.estrecha input{min-width:66px}
.quitar{width:28px;height:28px;border:1px solid var(--line);background:var(--card);color:var(--steel-dim);
  border-radius:2px;cursor:pointer;font-size:1rem;line-height:1;transition:.15s}
.quitar:hover{border-color:var(--plate-red);color:var(--plate-red);background:#FDF3F5}

/* ============================================================
   BARRA NEGRA EN LA SESIÓN DE PROFE
   No es decoración: distingue de un vistazo si estás administrando
   o mirando el sitio como un cliente cualquiera.
   Va aquí y no en base.css porque ese archivo se regenera desde
   index.html y perdería estos estilos.
   ============================================================ */
.nav--profe{background:var(--iron);border-bottom-color:#262B36}
.nav--profe.scrolled{background:#0A0D12;box-shadow:0 8px 26px -16px rgba(0,0,0,.85)}

.nav--profe .brand__mark{color:#fff}
.nav--profe .brand__sub{color:#8D95A6}

.nav--profe .nav__links a{color:#A2AABA}
.nav--profe .nav__links a:hover,
.nav--profe .nav__links a.activo{color:#fff}
.nav--profe .nav__links a::after{background:#FF4560}

.nav--profe .nav__sep{background:#333A47}

/* 3:1 es el mínimo para que el borde de un control se perciba. */
.nav--profe .btn--linea{border-color:#697384;color:#EDEFF3;background:transparent}
.nav--profe .btn--linea:hover{border-color:#FF4560;color:#FF4560;background:#1B1F29}
.nav--profe .btn--linea:focus-visible{outline-color:#FF4560}

/* ============================================================
   AGENDA DE EVALUACIONES — rejilla semanal
   ============================================================ */
.rejilla{min-width:900px;display:grid;grid-template-columns:74px repeat(7,minmax(0,1fr));
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-s)}
.rc{border-left:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:5px;min-height:62px}
.rc.hcol{border-left:0;background:var(--paper-2);display:flex;align-items:flex-start;
  justify-content:flex-end;padding:9px 10px 0 0;font-family:var(--font-mono);font-size:.72rem;
  color:var(--steel-dim);font-variant-numeric:tabular-nums;min-height:0}
.rc.head{background:var(--paper-2);border-bottom:1px solid var(--line);min-height:0;padding:9px 10px}
.rc.head.hoy{background:#FDEEF1}
.rc.head b{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-dim);font-weight:500}
.rc.head span{font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1.1}
.rc.head.hoy span{color:var(--plate-red)}
/* Rayado diagonal = cerrado. Se lee como "aquí no va nada" sin texto. */
.rc.cerrado{background:repeating-linear-gradient(-45deg,transparent,transparent 6px,#F4F5F8 6px,#F4F5F8 12px)}

.cita{display:block;width:100%;height:100%;min-height:52px;text-decoration:none;
  border-left:3px solid var(--plate-blue);background:#EEF4FB;padding:8px 10px;border-radius:2px;
  transition:filter .15s}
.cita:hover{filter:brightness(.96)}
.cita b{display:block;font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cita span{display:block;font-family:var(--font-mono);font-size:.66rem;color:var(--steel);
  margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cita.bloqueo{border-left-color:var(--steel-dim);background:#EFF1F4}
.cita.bloqueo b{color:var(--steel)}

/* El botón de bloquear solo aparece al pasar por encima: si estuviera
   siempre visible, la rejilla se vería llena de ruido. */
.rc.libre form{height:100%}
.bloquear{width:100%;height:100%;min-height:52px;border:1px dashed transparent;background:none;
  cursor:pointer;font-family:var(--font-mono);font-size:.66rem;color:transparent;
  border-radius:2px;transition:border-color .15s,color .15s,background .15s}
.rc.libre:hover .bloquear{border-color:var(--line);color:var(--steel-dim);background:var(--paper)}
.bloquear:focus-visible{border-color:var(--plate-red);color:var(--plate-red);outline:none}

/* ── ficha de una cita ── */
.ficha-cita{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-m);
  margin-bottom:22px}
.ficha-cita__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px;background:var(--iron);color:#EDEFF3}
.ficha-cita__cab h2{font-family:var(--font-display);font-weight:800;font-size:1.6rem;
  text-transform:uppercase;line-height:1}
.ficha-cita__cab p{margin:6px 0 0;font-family:var(--font-mono);font-size:.85rem;color:#FF6B7F;
  font-variant-numeric:tabular-nums}
.ficha-cita__cab .enlace-fino{color:#8D95A6;flex:none}
.ficha-cita__cab .enlace-fino:hover{color:#fff}
.ficha-cita .datos-cliente{border-top:0}
.nota-cita{margin:0;padding:14px 24px;background:var(--paper);border-top:1px solid var(--line-soft);
  border-left:3px solid var(--plate-yellow);font-size:.93rem;color:var(--ink-2);white-space:pre-wrap}
.ficha-cita__pie{padding:18px 24px;border-top:1px solid var(--line-soft)}

/* ============================================================
   TABLERO DEL PROFE — lista de tareas
   Cada fila es algo que hacer, con su destino. Se lee de arriba
   abajo y se va vaciando, no es una tabla para consultar.
   ============================================================ */
.lista-tareas{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-s)}
.tarea{display:flex;align-items:center;gap:14px;padding:15px 18px;text-decoration:none;
  border-bottom:1px solid var(--line-soft);transition:background .18s}
.tarea:last-child{border-bottom:0}
.tarea:hover{background:var(--paper)}

/* La marca de color dice de qué tipo es la tarea sin gastar una palabra */
.tarea__marca{width:4px;align-self:stretch;min-height:34px;flex:none;background:var(--m,var(--line));
  border-radius:2px}
.tarea--urgente{background:#FDF7F8}
.tarea--urgente:hover{background:#FDF3F5}

.tarea__hora{flex:none;min-width:52px;font-family:var(--font-mono);font-size:.86rem;font-weight:600;
  color:var(--plate-red);font-variant-numeric:tabular-nums;line-height:1.4}
.tarea__txt{flex:1;min-width:0}
.tarea__txt b{display:block;font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.3}
.tarea__txt span{display:block;margin-top:4px;font-size:.86rem;color:var(--steel);line-height:1.45}
.tarea__txt strong{color:var(--plate-red);font-weight:600}
.tarea__ir{flex:none;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-dim);white-space:nowrap;transition:color .18s}
.tarea:hover .tarea__ir{color:var(--plate-red)}
@media (max-width:560px){.tarea__ir{display:none}}

/* ══════════════════════════════════════════════════════════════
   BIBLIOTECA DE EJERCICIOS
   La media es de Gym visual y viene a 180×180: las tarjetas se
   diseñan a ese tamaño, nunca se escala hacia arriba.
   ══════════════════════════════════════════════════════════════ */

.bib-buscar{display:flex;gap:10px;margin:0 0 20px;flex-wrap:wrap}
.bib-buscar__campo{flex:1 1 320px;display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);padding:0 14px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.bib-buscar__campo:focus-within{border-color:var(--plate-red);
  box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.bib-buscar__campo svg{width:17px;height:17px;flex:none;color:var(--steel-dim)}
.bib-buscar__campo input{flex:1;border:0;background:none;padding:13px 0;
  font:400 .95rem/1.4 var(--font-cuerpo);color:var(--ink);min-width:0}
.bib-buscar__campo input:focus{outline:none}
.bib-buscar__campo input::placeholder{color:var(--steel-dim)}

.bib-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:7px 13px;
  background:var(--card);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.76rem;color:var(--ink-2);
  text-decoration:none;transition:all .18s var(--ease)}
.chip span{font-size:.68rem;color:var(--steel-dim);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--steel-dim);color:var(--ink)}
.chip--on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip--on span{color:rgba(255,255,255,.6)}

.bib-selects{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:0 0 22px;
  padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.bib-sel{display:flex;flex-direction:column;gap:5px}
.bib-sel span{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-dim)}
.bib-sel select{padding:9px 12px;border:1px solid var(--line);background:var(--card);
  font:400 .86rem/1.2 var(--font-cuerpo);color:var(--ink);min-width:190px}
.bib-cuenta{margin:0 0 3px auto;font-family:var(--font-mono);font-size:.8rem;color:var(--steel)}
.bib-cuenta b{color:var(--ink);font-variant-numeric:tabular-nums}

.bib-grilla{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.ejc{display:flex;flex-direction:column;height:100%;background:var(--card);
  border:1px solid var(--line);text-decoration:none;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.ejc:hover,.ejc:focus-visible{transform:translateY(-3px);border-color:var(--steel-dim);
  box-shadow:var(--shadow-m)}
.ejc__img{display:block;background:#fff;border-bottom:1px solid var(--line-soft);
  aspect-ratio:1/1;display:grid;place-items:center}
.ejc__img img{width:180px;height:180px;max-width:100%;height:auto;object-fit:contain}
.ejc__cuerpo{display:flex;flex-direction:column;gap:4px;padding:13px 14px 15px;flex:1}
.ejc__nom{font-family:var(--font-titulo);font-weight:700;font-size:.95rem;line-height:1.25;
  color:var(--ink)}
.ejc__en{font-family:var(--font-mono);font-size:.68rem;color:var(--steel-dim);
  line-height:1.35}
.ejc__meta{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;gap:6px;
  font-family:var(--font-mono);font-size:.68rem;color:var(--steel)}
.ejc__meta i{font-style:normal;color:var(--plate-red);font-weight:600}
.ejc__meta i::after{content:" ·";color:var(--steel-dim)}

.bib-paginas{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:26px 0 0;font-size:.8rem;color:var(--steel)}
.bib-credito{margin:30px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.7rem;color:var(--steel-dim)}
.bib-credito a{color:var(--steel)}
.bib-volver{margin:0 0 16px;font-family:var(--font-mono);font-size:.78rem}

/* ── Ficha de un ejercicio ──────────────────────────────────── */
.ejf{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;margin:0 0 8px}
.ejf__media{flex:none;background:#fff;border:1px solid var(--line);padding:14px;
  box-shadow:var(--shadow-s)}
.ejf__media img{display:block;width:180px;height:180px}
.ejf__credito{margin:9px 0 0;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel-dim);text-align:center}
.ejf__cab{flex:1 1 300px;min-width:0}
.ejf__nom{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1.05;
  margin:0;color:var(--ink)}
.ejf__en{margin:7px 0 0;font-family:var(--font-mono);font-size:.78rem;color:var(--steel-dim)}
/* Los bordes van en cada celda, no de fondo del contenedor: con cuatro
   datos y tres columnas, el hueco que sobra se veía como un recuadro
   gris vacío. */
.ejf__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;margin:20px 0 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ejf__datos>div{background:var(--card);padding:12px 14px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.ejf__datos dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-dim)}
.ejf__datos dd{margin:5px 0 0;font-weight:600;font-size:.92rem;color:var(--ink)}

.ejf__pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.ejf__pasos li{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.ejf__pasos li:last-child{border-bottom:0}
.ejf__n{flex:none;width:27px;height:27px;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:.74rem;
  font-weight:600}
.ejf__pasos p{margin:2px 0 0;line-height:1.6;color:var(--ink-2)}

@media (max-width:640px){
  .bib-grilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .ejf__nom{font-size:1.6rem}
  .bib-cuenta{margin-left:0}
}

/* ══════════════════════════════════════════════════════════════
   NAV EN MÓVIL — solo dentro del portal
   base.css esconde los enlaces bajo 980 px. En la landing da igual
   (son anclas de la misma página), pero acá son la única forma de
   moverse, y el cliente anota su día desde el teléfono. Así que
   bajan a una segunda fila, a lo ancho.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  .nav__in{flex-wrap:wrap;row-gap:0}
  .nav__links{display:flex;order:3;flex-basis:100%;margin:0;gap:0;
    border-top:1px solid var(--line);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{flex:1 0 auto;padding:13px 18px;text-align:center;white-space:nowrap;
    font-size:.74rem}
  .nav__links a::after{left:18px;right:calc(100% - 18px)}
  .nav__links a:hover::after,
  .nav__links a.activo::after{right:18px}
  .nav__acc{margin-left:auto}
}
.nav--profe .nav__links{border-top-color:rgba(255,255,255,.14)}

/* ══════════════════════════════════════════════════════════════
   EJERCICIO DENTRO DE LA RUTINA
   La miniatura entra en la celda del nombre, no en una columna
   nueva: así en el teléfono la tabla no crece a lo ancho.
   ══════════════════════════════════════════════════════════════ */
.ej-fila{display:flex;align-items:flex-start;gap:12px}
.ej-fila__txt{display:flex;flex-direction:column;gap:2px;min-width:0}

.ej-mini{position:relative;flex:none;width:56px;height:56px;display:block;
  background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.ej-mini img{width:100%;height:100%;object-fit:contain;display:block}
.ej-mini--vacia{background:var(--paper-2);border-style:dashed}
a.ej-mini:hover,a.ej-mini:focus-visible{border-color:var(--plate-red);transform:scale(1.04)}

/* El triangulito avisa de que la miniatura se puede abrir y se anima */
.ej-mini__lupa{position:absolute;right:3px;bottom:3px;width:16px;height:16px;
  display:grid;place-items:center;background:rgba(13,16,23,.82);color:#fff;
  border-radius:2px;transition:background .18s var(--ease)}
.ej-mini__lupa svg{width:9px;height:9px;margin-left:1px}
a.ej-mini:hover .ej-mini__lupa{background:var(--plate-red)}

.ej-nombre{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
a.ej-nombre:hover{color:var(--plate-red)}
.ej-comose{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--steel-dim);transition:color .18s var(--ease)}
.ej-fila:hover .ej-comose{color:var(--plate-red)}

@media (max-width:560px){
  .ej-mini{width:46px;height:46px}
  .ej-fila{gap:9px}
  .ej-comose{display:none}
  /* La tabla ya se desplaza a lo ancho: mejor que el nombre respire y
     se arrastre para ver los números, que leer cuatro líneas de una
     palabra por renglón. */
  .tabla-ej td:nth-child(2),
  .tabla-ej th:nth-child(2){min-width:215px}
}

/* ══════════════════════════════════════════════════════════════
   SELECTOR DE LA BIBLIOTECA (editor de rutina)
   Es un <dialog>: va al top layer, así que el overflow-x de
   .tabla-cont no lo recorta y el Escape y el foco salen gratis.
   ══════════════════════════════════════════════════════════════ */
/* display:flex de autor le gana a la regla del navegador
   dialog:not([open]){display:none}, así que el diálogo cerrado se dibujaba
   dentro de la página. Solo se despliega cuando está abierto. */
/* Va atado a dialog a propósito: el calendario de registros marca el día
   elegido con la misma clase (.dia.sel) y sin esto heredaba el ancho de
   980px de esta ventana, lo que reventaba la grilla del mes. */
dialog.sel{width:min(980px,94vw);max-height:88vh;padding:0;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-l);
  display:none;flex-direction:column;overflow:hidden}
dialog.sel[open]{display:flex}
dialog.sel::backdrop{background:rgba(13,16,23,.55)}
dialog.sel[open]{animation:selEntra .18s var(--ease)}
@keyframes selEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.sel[open]{animation:none}}

.sel__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 20px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.sel__t{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  line-height:1.1;color:var(--ink)}
.sel__donde{margin:5px 0 0;font-family:var(--font-mono);font-size:.72rem;color:var(--steel)}
.sel__x{border:0;background:none;font-size:1.7rem;line-height:1;color:var(--steel-dim);
  cursor:pointer;padding:0 4px;transition:color .18s var(--ease)}
.sel__x:hover{color:var(--plate-red)}

.sel__filtros{padding:14px 20px 0;background:var(--card);border-bottom:1px solid var(--line)}
.sel__filtros .bib-buscar__campo{margin-bottom:12px}
.sel__selects{margin-bottom:0;padding-bottom:14px;border-bottom:0}

.sel__cuerpo{flex:1;overflow-y:auto;padding:16px 20px;background:var(--paper)}
.sel__vacio{margin:0}
.sel__mas{display:flex;justify-content:center;margin-top:16px}

.sel__pie{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;background:var(--card);border-top:1px solid var(--line)}

/* La tarjeta del selector es un <button>, no un <a>: elige, no navega. */
.ejc--sel{width:100%;text-align:left;border:1px solid var(--line);background:var(--card);
  cursor:pointer;font:inherit;color:inherit;padding:0}
.ejc--sel:focus-visible{outline:2px solid var(--plate-red);outline-offset:2px}

/* La miniatura del editor abre el selector: es un botón, no un enlace. */
button.ej-mini{cursor:pointer;padding:0;color:var(--steel-dim)}
button.ej-mini:focus-visible{outline:2px solid var(--plate-red);outline-offset:2px}
button.ej-mini.ej-mini--vacia .ej-mini__lupa{background:var(--steel-dim)}
button.ej-mini:hover .ej-mini__lupa{background:var(--plate-red)}
.ej-mini__lupa svg{width:10px;height:10px;margin:0}

/* En el editor la fila vive dentro de una celda estrecha */
.tabla-edit .ej-fila{align-items:center;gap:10px}
.tabla-edit .ej-fila input[type="text"]{min-width:150px}

@media (max-width:640px){
  dialog.sel{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0}
  .sel__cab,.sel__filtros,.sel__cuerpo,.sel__pie{padding-left:14px;padding-right:14px}
  .sel__pie{flex-wrap:wrap}
}

/* ── Cargas repartidas por día de entrenamiento ──────────────── */
/* Sin el background y el uppercase que .tabla-ej th le pone a las
   cabeceras de columna: esta es una cabecera de grupo, no de columna, y
   el gris solo cubria las cuatro primeras celdas. */
.carga-dia th{text-align:left;font-family:var(--font-titulo);font-weight:700;
  font-size:1.02rem;letter-spacing:0;text-transform:none;color:var(--ink);
  background:none;white-space:normal;padding:0 18px 7px;
  border-bottom:2px solid var(--ink)}
.carga-dia th .dia-r__letra{margin-right:9px;vertical-align:middle}
.carga-dia td{font-family:var(--font-mono);font-size:.7rem;color:var(--steel-dim);
  padding:0 18px 7px;border-bottom:2px solid var(--ink);vertical-align:bottom;
  text-align:right;white-space:nowrap}
.tabla-cargas tbody + tbody .carga-dia th,
.tabla-cargas tbody + tbody .carga-dia td{padding-top:30px}
@media (max-width:560px){
  /* La tabla ya se arrastra a lo ancho: que el nombre no se parta en
     una palabra por renglón. */
  .tabla-cargas td:first-child{min-width:190px}
}

/* ══════════════════════════════════════════════════════════════
   PROPUESTA DE PAUTA
   La calculadora propone; el profe decide. Por eso la caja se ve
   como una sugerencia y el botón solo rellena el formulario.
   ══════════════════════════════════════════════════════════════ */
.calc-datos{margin-top:20px}
.calc-datos summary{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none}
.calc-datos summary::-webkit-details-marker{display:none}
.calc-datos summary::after{content:"▾";margin-left:auto;color:var(--steel-dim);
  transition:transform .2s var(--ease)}
.calc-datos[open] summary::after{transform:rotate(180deg)}
.calc-datos__t{font-family:var(--font-titulo);font-weight:700;font-size:1rem;color:var(--ink)}
.calc-datos__r{font-family:var(--font-mono);font-size:.75rem;color:var(--steel)}

.prop{margin-top:18px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--plate-green);padding:20px 22px;box-shadow:var(--shadow-s)}
.prop__cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.prop__obj{margin:0;font-family:var(--font-mono);font-size:.76rem;color:var(--plate-red);font-weight:600}
.prop__cifras{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin:14px 0 0}
.prop__kcal b{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.prop__kcal span{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--steel)}
.prop__macros{display:flex;flex-wrap:wrap;gap:20px;margin:0}
.prop__macros dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel-dim)}
.prop__macros dd{margin:3px 0 0;font-weight:700;font-size:1.1rem;color:var(--ink);
  font-variant-numeric:tabular-nums}

.prop__cuenta{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.72rem;line-height:1.7;color:var(--steel)}
.prop__cuenta b{color:var(--ink)}
.prop__nota{margin:9px 0 0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.prop__aviso{margin:11px 0 0;padding:10px 13px;background:var(--paper-2);
  border-left:3px solid var(--plate-yellow);font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.prop .btn{margin-top:18px}
.btn--hecho{background:var(--plate-green);border-color:var(--plate-green)}
.prop__pie{margin:13px 0 0;font-size:.8rem;line-height:1.55;color:var(--steel)}