/* Cloe Coach — estilo «Dorsal» en mandarina sobre verdes (spec §9; maquetas movil.html y dorsal-naranja-syne.html).
   Todo el CSS va aquí: la CSP (default-src 'self') no admite <style> ni style="..." en las plantillas.
   Sobre mandarina el texto va siempre en negro (tinta). El mandarina oscuro solo sobre blanco (contraste 4,7:1).
   El único borde negro es el del dorsal: lo demás se separa por tonos (fondo verde, tarjetas blancas). */

/* ---------- Fuentes locales (scripts/descargar_fuentes.py) ---------- */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fuentes/syne-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fuentes/syne-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fuentes/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fuentes/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fuentes/inter-latin-700-normal.woff2") format("woff2");
}

/* ---------- Colores y medidas ---------- */
:root {
  --mandarina: #ff9a3c;
  --mandarina-osc: #b85a00;
  --tinta: #141414;
  --pino: #1b4332;        /* verde oscuro: botón principal, títulos, «Hecho» (mandarina encima: 5,2:1) */
  --pino-hondo: #102a1f;  /* botón principal al pasar el ratón */
  --brote: #d4e7da;       /* verde suave: botón secundario al pasar el ratón */
  --papel: #e8f1eb;       /* fondo de la página */
  --nube: #f6faf7;        /* blanco verdoso: menú inferior y filas dentro de tarjetas */
  --blanco: #ffffff;      /* tarjetas */
  --gris: #4a5e52;        /* texto secundario */
  --linea: #d3e3d8;       /* separadores */
  --linea-campo: #6b8775; /* borde de campos y opciones (3:1 sobre el fondo) */
  --linea-tarjeta: #7aa88a; /* verde: el borde fino de las tarjetas, para que destaquen sobre el fondo */
  --letra-titulo: "Syne", "Arial Black", system-ui, sans-serif;
  --letra-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --borde: 2px solid var(--tinta); /* solo el dorsal */
  --borde-campo: 1.5px solid var(--linea-campo);
  --radio: 14px;
  --hueco: 16px;
  --ancho: 40rem;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: 1rem;
  line-height: 1.45;
}
p, h1, h2, h3 { margin: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a, button, input, select, textarea, label { touch-action: manipulation; }

/* Contenido: deja libres las zonas seguras (muesca, esquinas y barra de inicio). */
.contenido {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-top: calc(var(--hueco) + env(safe-area-inset-top, 0px));
  padding-right: calc(var(--hueco) + env(safe-area-inset-right, 0px));
  padding-bottom: 24px;
  padding-left: calc(var(--hueco) + env(safe-area-inset-left, 0px));
}
.contenido:last-child { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } /* sin pestañas */
.contenido:focus { outline: none; } /* destino del enlace «Saltar al contenido» */

/* ---------- Letra ---------- */
.t1 {
  color: var(--pino);
  font-family: var(--letra-titulo);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  margin: 4px 0 10px;
  overflow-wrap: anywhere;
}
.t2 {
  color: var(--pino);
  font-family: var(--letra-titulo);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.t3 { color: var(--pino); font-weight: 700; font-size: 1rem; margin: 16px 0 4px; overflow-wrap: anywhere; }
.syne { font-family: var(--letra-titulo); font-weight: 800; }
.grande {
  font-family: var(--letra-titulo);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: .95;
  letter-spacing: -.01em;
}
.sub { color: var(--gris); font-size: .875rem; }
.alerta { color: var(--mandarina-osc); font-weight: 700; } /* solo sobre blanco */

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea-tarjeta);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-top: 12px;
}
.tarjeta > * + * { margin-top: 4px; }
.tarjeta.hoy { border-left: 8px solid var(--mandarina); }

/* ---------- El dorsal ---------- */
.dorsal {
  position: relative;
  background: var(--mandarina);
  color: var(--tinta);
  border: var(--borde);
  border-radius: 10px;
  padding: 14px 30px 16px;
  text-align: center;
}
/* Los dos agujeros del imperdible. */
.dorsal::before, .dorsal::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--papel);
  border: var(--borde);
}
.dorsal::before { left: 10px; }
.dorsal::after { right: 10px; }
.dorsal-nombre {
  font-family: var(--letra-titulo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dorsal-objetivo {
  font-family: var(--letra-titulo);
  font-weight: 800;
  font-size: clamp(2.75rem, 15vw, 4rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.dorsal-linea { font-size: .875rem; margin-top: 4px; }

/* ---------- Botones ---------- */
.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--pino);
  border-radius: 12px;
  background: var(--pino);
  color: var(--mandarina);
  font: 700 1rem/1.2 var(--letra-texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.boton:hover { background: var(--pino-hondo); border-color: var(--pino-hondo); }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: transparent; color: var(--pino); }
.boton.secundario:hover { background: var(--brote); border-color: var(--pino); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Formularios (un campo por línea) ---------- */
.campo { display: block; margin-top: 14px; }
.campo > .etiqueta { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="month"], input[type="search"], input[type="tel"], select, textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: var(--borde-campo);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--tinta);
  font: 400 1rem/1.3 var(--letra-texto); /* 16 px: el iPhone no hace zoom al escribir */
}
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--pino);
}
.casilla {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--blanco);
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  cursor: pointer;
}
.error {
  margin-top: 6px;
  padding-left: 8px;
  border-left: 4px solid var(--mandarina-osc);
  font-size: .875rem;
  font-weight: 700;
}

/* ---------- Etiquetas (Pendientes del administrador) ---------- */
.etq {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 700;
}
.etq.nar { background: var(--mandarina); color: var(--tinta); }
.etq.oscura { background: var(--pino); color: var(--mandarina); }

/* ---------- Página de aviso (mensaje.html) ---------- */
.mensaje { padding-top: 8vh; text-align: center; }
.emblema { display: block; width: 80px; height: 80px; margin: 0 auto 12px; }
.mensaje .tarjeta { text-align: left; }

/* ---------- Pestañas (menú inferior) ---------- */
.pestanas {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2px;
  background: var(--nube);
  border-top: 1px solid var(--linea);
  padding-top: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  padding-left: max(calc(4px + env(safe-area-inset-left, 0px)), calc((100% - var(--ancho)) / 2));
  padding-right: max(calc(4px + env(safe-area-inset-right, 0px)), calc((100% - var(--ancho)) / 2));
}
.pest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 56px;
  min-height: 48px;
  padding: 4px 8px;
  border-radius: 10px;
  color: var(--gris);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pest svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pest:hover { color: var(--pino); }
.pest.activa { background: var(--mandarina); color: var(--tinta); }
@media (max-width: 374px) {
  .pest { min-width: 48px; padding: 4px 5px; }
}

/* ---------- Foco visible (teclado) ---------- */
:focus-visible {
  outline: 3px solid var(--pino);
  outline-offset: 2px;
}
.boton:focus-visible { box-shadow: 0 0 0 2px var(--mandarina) inset; }
.saltar {
  position: absolute;
  top: -200px;
  left: calc(var(--hueco) + env(safe-area-inset-left, 0px));
  z-index: 20;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--pino);
  color: var(--mandarina);
  font-weight: 700;
  text-decoration: none;
}
.saltar:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .boton:active { transform: none; }
}

/* ---------- Enlaces de formulario y textos legales ---------- */
.enlace { display: block; margin-top: 16px; padding: 12px 0; text-align: center; font-weight: 600; }
.casilla a { font-weight: 600; }
.legal h2 { margin-top: 20px; }
.legal p { margin-top: 8px; }

/* ---------- Filtro de salud ---------- */
.salud-form .casilla { margin-top: 12px; }
.salud-form .casilla span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.salud-form .boton { margin-top: 20px; }
.tarjeta.aviso { border-left: 8px solid var(--mandarina-osc); }
.tarjeta.pago { border-left: 8px solid var(--mandarina); }
.tarjeta.pago .boton { margin-top: 8px; }
.tarjeta.pago .syne { margin: 16px 0 4px; }
.oculto { display: none !important; }

/* ---------- Cuestionario de alta ---------- */
.cuestionario-form .paso { margin-top: 20px; }
.cuestionario-form .grupo { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.cuestionario-form .grupo > .etiqueta { display: block; padding: 0; font-weight: 600; }
.cuestionario-form .casilla span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cuestionario-form .pasos-botones { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.cuestionario-form .dia-fila { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 8px; align-items: center; }
.cuestionario-form .dia-fila .casilla { margin-top: 8px; }
.cuestionario-form .dia-fila input[type="number"] { margin-top: 8px; }
.cuestionario-form .dia-fila .error { grid-column: 1 / -1; margin-top: 4px; }
.cuestionario-form .marca-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cuestionario-form .prueba { margin-top: 16px; }
.cuestionario-form .paso h2[tabindex="-1"]:focus { outline: none; }
.cuestionario-form .propuesta { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cuestionario-form .propuesta p { margin: 0; }

/* ---------- Mi cuenta ---------- */
.tarjeta .enlace { margin-top: 8px; padding: 14px 0; min-height: 48px; text-align: left; }
.borrar summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.borrar summary::-webkit-details-marker { display: none; }
.borrar details[open] > summary { margin-bottom: 12px; }
.borrar .boton { margin-top: 16px; }
.contenido > form > .boton { margin-top: 12px; }

/* ---------- Panel del administrador ---------- */
.lista { list-style: none; margin: 16px 0 0; padding: 0; }
.lista li + li { margin-top: 8px; }
.fila { display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 12px 16px; text-decoration: none;
        background: var(--blanco); border-radius: 12px; overflow-wrap: anywhere; transition: background-color .15s ease; }
.fila:hover { background: var(--nube); }
.buscador .boton, .contenido > .boton { margin-top: 12px; }
.pendiente .boton { margin-top: 12px; }
.datos { list-style: none; margin: 8px 0 0; padding: 0; }
.datos li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linea); }
.datos li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
dl.datos dt { margin-top: 10px; font-weight: 600; }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Editor de semanas del administrador ---------- */
.enlace-inline { display: inline-block; padding: 12px 0; font-weight: 600; text-decoration: underline; }
.sesion { padding-top: 10px; border-top: 1px solid var(--linea); }
.sesion > * + * { margin-top: 8px; }
.sesion .boton, .plegable .boton { margin-top: 8px; }
.plegable summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable[open] > summary { margin-bottom: 12px; }
.sesion-form textarea { min-height: 120px; }
.sesion-form .sub { margin-top: 4px; }
.lista .fila > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lista .fila .etq { margin-bottom: 0; }

/* ---------- Hoy, Entreno y «¿Cómo te ha ido?» ---------- */
.sesion-hoy { margin-top: 10px; }
.sesion-hoy > * + * { margin-top: 4px; }
.tarjeta .fila { margin-top: 8px; background: var(--nube); }
.tarjeta .fila:hover { background: var(--brote); }
.tarjeta .t2 .etq { margin: 0 0 0 6px; vertical-align: middle; }
.fila .etq { margin: 0 0 0 6px; }
.semanas { display: flex; flex-direction: column; gap: 0; margin-top: 12px; }

.valoracion { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.valoracion legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-weight: 600; }
.valoracion .op { position: relative; display: block; min-width: 0; }
.valoracion .op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.valoracion .op-n, .valoracion .op-t { display: block; text-align: center; pointer-events: none; }
.valoracion .op-n { padding-top: 8px; font-family: var(--letra-titulo); font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.valoracion .op-t { padding: 0 2px 8px; font-size: .75rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.valoracion .op { min-height: 64px; background: var(--blanco); border: var(--borde-campo); border-radius: 12px; }
.valoracion input:checked + .op-n, .valoracion input:checked + .op-n + .op-t { background: var(--mandarina); }   /* sin :has() */
.valoracion .op:has(input:checked) { background: var(--mandarina); color: var(--tinta); }
.valoracion .op:has(input:focus-visible) { outline: 3px solid var(--pino); outline-offset: 2px; }

dialog.hoja {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: var(--ancho);
  max-height: 90vh;
  max-height: 90dvh;
  margin: 0 auto;
  padding: 16px var(--hueco) calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--blanco);
  color: var(--tinta);
  border: 0;
  border-radius: 20px 20px 0 0;
  animation: hoja-sube .2s ease-out;
}
dialog.hoja:not([open]) { display: none; }
dialog.hoja::backdrop { background: rgba(16, 42, 31, .55); }
dialog.hoja .boton:first-of-type { margin-top: 12px; }
@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  dialog.hoja { animation: none; }
}

/* ---------- El administrador viendo el panel de un cliente ---------- */
.viendo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  margin-bottom: 14px;
  padding: 4px 16px;
  border-radius: 12px;
  background: var(--pino);
  color: var(--blanco);
  font-size: .875rem;
}
.viendo p { min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }
.viendo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mandarina); font-weight: 700; }

/* ---------- El administrador en el ordenador: menú a la izquierda y contenido a todo el ancho ---------- */
.marca { display: none; }
@media (min-width: 960px) {
  body.admin {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-areas: "menu contenido";
    align-items: start;
  }
  body.admin .contenido {
    grid-area: contenido;
    max-width: 1440px;
    margin: 0;
    padding: 32px 40px 48px;
  }
  body.admin .pestanas {
    grid-area: menu;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 24px 16px;
    border-top: 0;
    border-right: 1px solid var(--linea);
    overflow-y: auto;
  }
  body.admin .marca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 20px;
    padding: 4px;
    color: var(--pino);
    font-family: var(--letra-titulo);
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
  }
  body.admin .pest {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: .9375rem;
  }
}

/* ---------- Inicio del administrador: cifras, dos columnas y tablas ---------- */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cifra { background: var(--blanco); border-radius: var(--radio); padding: 16px 18px; }
.cifra-n { color: var(--pino); font-family: var(--letra-titulo); font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.cifra-t { margin-top: 4px; color: var(--gris); font-size: .875rem; }
.dos-columnas { display: grid; gap: 24px; margin-top: 28px; }
.tabla-caja { margin-top: 12px; overflow-x: auto; background: var(--blanco); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 12px 16px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.tabla th { color: var(--gris); font-size: .8125rem; font-weight: 600; border-bottom: 1px solid var(--linea); }
.tabla tbody tr + tr td { border-top: 1px solid var(--linea); }
.tabla a { color: var(--pino); font-weight: 700; }
.tabla-semana td:nth-child(-n+2) { white-space: nowrap; }
@media (min-width: 960px) {
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cifra-n { font-size: 2.125rem; }
  .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }
}

/* ---------- Lista de clientes: tabla en el ordenador, tarjetas en el móvil ---------- */
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.encabezado .t1 { margin-bottom: 0; }
.encabezado .boton { flex: 1 1 100%; }
.tabla-tarjetas tr { position: relative; }
.fila-enlace::after { content: ""; position: absolute; inset: 0; }
.tabla-tarjetas tbody tr:hover { background: var(--nube); }
@media (max-width: 959px) {
  .tabla-tarjetas { overflow: visible; background: transparent; }
  .tabla-tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-tarjetas tr { display: block; margin-top: 8px; padding: 12px 16px; background: var(--blanco); border-radius: 12px; }
  .tabla-tarjetas td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
  .tabla-tarjetas td:first-child { display: block; padding-bottom: 8px; }
  .tabla-tarjetas td[data-titulo]::before { content: attr(data-titulo); color: var(--gris); font-size: .875rem; }
  .tabla-tarjetas .tabla tbody tr + tr td { border-top: 0; }
}
@media (min-width: 960px) {
  .encabezado .boton { flex: 0 0 auto; width: auto; margin-top: 0; padding-inline: 24px; }
  .buscador { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0 16px; align-items: end; }
  .buscador .boton { width: auto; min-width: 140px; margin-top: 0; }
}

/* ---------- Ficha del cliente: cabecera con pestañas y dos columnas ---------- */
.ficha-cabecera .t1 { margin-bottom: 6px; }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etq.suave { margin-bottom: 0; background: var(--brote); color: var(--pino); }
.subpestanas { display: flex; gap: 4px; margin-top: 16px; overflow-x: auto; border-bottom: 1px solid var(--linea); }
.subpestanas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  color: var(--gris);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.subpestanas a:hover { color: var(--pino); }
.subpestanas a[aria-current="page"] { color: var(--pino); border-bottom-color: var(--mandarina); }
.ficha-grid { display: grid; gap: 0 24px; margin-top: 4px; }
@media (min-width: 960px) {
  .ficha-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Entreno de un cliente: barra de semanas, calendario de 7 días y panel ---------- */
.semana-barra {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin-top: 20px;
}
.semana-barra .boton { width: auto; margin-top: 0; padding-inline: 14px; }
.semana-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; }
.semana-titulo .etq { margin-bottom: 0; }
.calendario { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.dia { min-width: 0; padding: 12px; background: var(--blanco); border-top: 4px solid transparent; border-radius: var(--radio); }
.dia.hoy { border-top-color: var(--mandarina); }
.dia-nombre { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--gris); font-size: .875rem; font-weight: 600; }
.dia-numero { color: var(--pino); font-family: var(--letra-titulo); font-weight: 800; font-size: 1.375rem; line-height: 1; }
.entreno-panel h3.t2 { margin-top: 20px; }
.sesion-tarjeta { margin-top: 8px; padding: 10px 12px; background: var(--nube); border: 1.5px solid transparent; border-radius: 10px; }
.sesion-tarjeta.activa { border-color: var(--pino); }
.sesion-tarjeta > * + * { margin-top: 2px; }
.sesion-titulo { font-weight: 700; overflow-wrap: anywhere; }
.sesion-texto {
  display: -webkit-box;
  overflow: hidden;
  font-size: .875rem;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.sesion-tarjeta .enlace-inline { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
.dia-anadir {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 8px;
  border: 1.5px dashed var(--linea-campo);
  border-radius: 10px;
  color: var(--pino);
  font-weight: 600;
  text-decoration: none;
}
.dia-anadir:hover { background: var(--brote); }
.dia-antes { margin-top: 8px; font-size: .75rem; }
.entreno-panel { margin-top: 8px; scroll-margin-top: 16px; }
.entreno-panel > * { break-inside: avoid; }
.lista .fila.actual { box-shadow: inset 0 0 0 1.5px var(--pino); }
@media (max-width: 599px) {
  .semana-barra { grid-template-columns: 1fr 1fr; }
  .semana-titulo { grid-row: 1; grid-column: 1 / -1; }
}
@media (min-width: 600px) {
  .calendario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .calendario { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .entreno-panel { columns: 2 320px; column-gap: 16px; }
}
@media (min-width: 1200px) {
  .calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---------- Progreso de un cliente: gráfica de barras (SVG) y comentarios ---------- */
.progreso-grid { display: grid; gap: 0 24px; }
.grafica { display: block; width: 100%; height: auto; margin-top: 8px; }
.grafica-base { stroke: var(--linea); stroke-width: 1; }
.barra-planificadas { fill: var(--brote); }
.barra-hechas { fill: var(--pino); }
.grafica text { fill: var(--gris); font-family: var(--letra-texto); font-size: 12px; font-weight: 600; }
.grafica .grafica-cifra { fill: var(--pino); }
.leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--gris); font-size: .875rem; }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.muestra.hechas { background: var(--pino); }
.muestra.planificadas { background: var(--brote); margin-left: 8px; }
@media (min-width: 960px) {
  .progreso-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

/* ---------- Toques cómodos en el móvil (48 px) en las pantallas del administrador ---------- */
@media (max-width: 959px) {
  .sesion-tarjeta .enlace-inline { display: flex; min-height: 48px; }
  .dia-anadir { min-height: 48px; }
  .subpestanas a { min-height: 48px; }
}

/* ---------- Bloques de 14 días: las dos semanas del bloque ---------- */
.semana-del-bloque { margin-top: 18px; color: var(--gris); font-size: .875rem; font-weight: 700; }
.semana-del-bloque + .calendario { margin-top: 6px; }
h2.semana-del-bloque { font-family: var(--letra-texto); }

/* ---------- Vídeos de YouTube: el icono, con 48 px para el dedo ---------- */
.con-video { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.youtube { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 48px; min-height: 48px; border-radius: 12px; }
.tabla .youtube { margin-left: -10px; }
.icono-youtube { display: block; }

/* ---------- Gimnasio: ejercicios en la sesión y en el formulario del panel ---------- */
.tabla.ejercicios td:nth-child(n+2) { white-space: nowrap; }
.ejercicios-form { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.ejercicios-form .tabla { min-width: 640px; }
.ejercicios-form .tabla th, .ejercicios-form .tabla td { padding: 4px 6px; }
.ejercicios-form input { min-height: 40px; padding: 6px 8px; border-radius: 8px; }
@media (max-width: 959px) {
  .ejercicios-form input { min-height: 48px; }
}

.programa-del-bloque { flex-basis: 100%; }

.ejercicios-form .tabla { min-width: 760px; }
.ejercicios-form td:first-child input { min-width: 170px; }

/* ---------- Recetas (panel) ---------- */
.receta-form .grupo { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.receta-form .grupo > .etiqueta { display: block; padding: 0; font-weight: 600; }
@media (min-width: 960px) {
  .buscador.buscador-tres { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
.receta-form .dos-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ingredientes-form { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.ingredientes-form > .etiqueta { display: block; padding: 0; font-weight: 600; margin-bottom: 8px; }
.ingredientes-form .tabla { min-width: 560px; }
.ingredientes-form .tabla td { padding: 4px; }
.ingredientes-form input, .ingredientes-form select { margin: 0; }
.encabezado-botones { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.encabezado-botones .boton { flex: 1 1 auto; }
@media (min-width: 960px) {
  .encabezado-botones { flex: 0 0 auto; }
  .encabezado-botones .boton { flex: 0 0 auto; width: auto; margin-top: 0; padding-inline: 24px; }
}
/* ---------- Menú del bloque (panel) ---------- */
.menu-fijo { display: grid; gap: 4px 16px; margin-top: 8px; }
.menu-fijo > div { min-width: 0; }
.menu-fijo .etiqueta { display: block; margin-top: 12px; font-weight: 600; }
.menu-fijo select { margin-top: 6px; }
.cocina { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 16px; }
.menu-semana { min-width: 760px; table-layout: fixed; }
.menu-semana thead th:first-child { width: 120px; }
.menu-semana th[scope="row"] { white-space: nowrap; color: var(--tinta); font-size: .9375rem; }
.menu-semana td { padding: 6px; }
.menu-semana select { margin: 0; }
.menu-semana tr.hoy th[scope="row"] { box-shadow: inset 4px 0 0 var(--mandarina); }
.con-alergeno select, td.con-alergeno .plato-nombre { border-color: var(--mandarina-osc); }
.menu-fijo .con-alergeno, td.con-alergeno { background: #fff4e8; }
@media (min-width: 640px) {
  .menu-fijo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .menu-fijo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------- Comida (cliente) ---------- */
.dias-menu { margin-top: 12px; }
.dias-semana { margin: 12px 0 6px; color: var(--gris); font-size: .8125rem; font-weight: 600; }
.dias-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.dias-fila a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px;
  border-radius: 10px; background: var(--blanco); color: var(--tinta); text-decoration: none; line-height: 1.1; }
.dias-fila .dia-letra { font-size: .75rem; color: var(--gris); }
.dias-fila .dia-num { font-weight: 700; }
.dias-fila a.es-hoy { box-shadow: inset 0 -4px 0 var(--mandarina); }
.dias-fila a[aria-current="true"] { background: var(--pino); color: var(--blanco); }
.dias-fila a[aria-current="true"] .dia-letra { color: var(--brote); }
.dia-elegido { margin-top: 20px; }
.comida-momento .fila.plato { align-items: flex-start; gap: 12px; }
.plato-etiqueta { display: block; color: var(--gris); font-size: .8125rem; font-weight: 600; }
.pasos { margin: 8px 0 0; padding-left: 1.4em; }
.pasos li + li { margin-top: 8px; }
.receta-apartado { margin-top: 18px; }
.ingredientes li span + span { flex: 0 0 auto; text-align: right; }
/* ---------- La compra (cliente) ---------- */
.semanas-compra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.semanas-compra .boton { margin-top: 0; }
.semanas-compra .boton[aria-current="true"] { background: var(--pino); border-color: var(--pino); color: var(--mandarina); }
.carro { margin: 16px 0 4px; color: var(--pino); font-weight: 700; }
.compartir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; }
.compartir [data-compartir-estado] { flex-basis: 100%; margin: 0; }
.extra { display: flex; gap: 8px; align-items: center; }
.extra form:first-child { flex: 1; }
.anadir-extra { margin-top: 12px; }
.pasillo { scroll-margin-top: 16px; }
.pasillo form { margin: 0; }
.producto { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  margin: 6px 0 0; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--nube); color: var(--tinta);
  font: inherit; text-align: left; cursor: pointer; }
.producto-cantidad { color: var(--gris); white-space: nowrap; }
.producto[aria-pressed="true"], .producto.marcado { background: var(--brote); }
.producto[aria-pressed="true"] .producto-nombre, .producto.marcado .producto-nombre { color: var(--gris); text-decoration: line-through; }

/* «Apúntate»: el campo trampa para robots, fuera de la vista (y de los lectores de pantalla). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }