/* Entreno — sistema visual: editorial plano, lujo silencioso, sin color de acento */

:root {
  --papel: #EFEAE0;
  --tinta: #211E19;
  --topo: #9C9384;
  --secundario: #6B6459;
  --filete: #DAD3C6;

  --romana: 'Newsreader', Georgia, 'Times New Roman', serif;
  --palo: 'Archivo', -apple-system, 'Helvetica Neue', sans-serif;

  --margen: 30px;
  --tactil: 52px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--palo);
  font-size: 17px;
  line-height: 1.5;
  /* nada de rebote elástico: rompe la sensación de página impresa */
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  /* respeta la isla dinámica y el indicador de inicio */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#lienzo { flex: 1 1 auto; overflow: hidden; position: relative; }

.pagina {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--margen);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.pagina[hidden] { display: none; }

/* ---- tipografía base ---- */

.rotulo {
  font-family: var(--palo);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--topo);
  margin: 0;
}
.rotulo.tinta { color: var(--tinta); letter-spacing: 0.3em; }

h1 {
  font-family: var(--romana);
  font-weight: 300;
  font-size: clamp(48px, 15vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 6px 0 0 0;
}
h1 em { font-style: italic; }

.entradilla {
  font-family: var(--romana);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
  color: var(--secundario);
  margin: 14px 0 0 0;
  max-width: 19em;
}

/* ---- filetes ---- */

.folio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  flex: 0 0 auto;
}
.reglaTinta { height: 1px; background: var(--tinta); margin-top: 12px; flex: 0 0 auto; }
.regla { height: 1px; background: var(--filete); margin-top: 28px; }

.cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; padding-bottom: 12px; }
.cuerpo > .rotulo { margin-top: 26px; }
.cuerpo > .regla + .rotulo { margin-top: 22px; }
.empuje { flex: 1 1 auto; min-height: 20px; }

/* ---- sumario ---- */

.sumario { list-style: none; margin: 10px 0 0 0; padding: 0; }

.sumario li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--tactil);
  border-bottom: 1px solid var(--filete);
  cursor: pointer;
}
.sumario li:active { opacity: 0.45; }

.sumario .numeral {
  font-family: var(--romana);
  font-size: 15px;
  font-weight: 300;
  color: var(--topo);
  width: 24px;
  flex: 0 0 24px;
}
.sumario .nombre { flex: 1 1 auto; font-size: 17px; font-weight: 400; }
.sumario .minutos {
  font-family: var(--romana);
  font-size: 24px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.sumario .unidad {
  font-size: 9px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--topo);
}
.sumario .galon { width: 13px; height: 13px; flex: 0 0 13px; stroke: var(--topo); }

/* ---- material y pasos ---- */

.lineaLlevar { display: flex; align-items: baseline; gap: 14px; margin: 24px 0 0 0; }
.lineaLlevar .material { font-size: 13px; color: var(--secundario); }

.pasos { margin-top: 20px; }
.pasos .rotulo { margin-bottom: 6px; }
.cifraPasos {
  font-family: var(--romana);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.cifraPasos em { font-style: italic; font-size: 15px; color: var(--topo); }

/* ---- barra inferior ---- */

.barra {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--tinta);
  padding: 0 var(--margen);
  background: var(--papel);
}
.pestana {
  flex: 1 1 0;
  height: 58px;
  border: 0;
  background: none;
  font-family: var(--palo);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--topo);
  cursor: pointer;
  padding: 0;
}
.pestana:first-child { text-align: left; }
.pestana:last-child { text-align: right; }
.pestana.activa { color: var(--tinta); font-weight: 500; }

/* ---- movimiento: la página se posa, no rebota ---- */

.desliza {
  opacity: 0;
  transform: translateY(10px);
}
.pagina.entrando .desliza {
  animation: posarse 460ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes posarse {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .desliza { opacity: 1; transform: none; }
  .pagina.entrando .desliza { animation: none; }
}


/* ================= CAPA DE DETALLE ================= */

.detalle {
  position: absolute; inset: 0; z-index: 5;
  background: var(--papel);
  display: flex; flex-direction: column;
  padding: 0 var(--margen);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.detalle[hidden] { display: none; }

.volver {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: none; padding: 0; cursor: pointer;
  min-height: var(--tactil); margin-left: -2px;
}
.volver .flecha { width: 15px; height: 15px; stroke: var(--tinta); flex: 0 0 15px; }
.volver:active { opacity: 0.45; }

/* ================= PORTADA DE RECETA ================= */

.portada {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 30px 0 26px 0;
  border-bottom: 1px solid var(--filete);
}
.portada .numeralGrande {
  font-family: var(--romana); font-weight: 200;
  font-size: clamp(76px, 26vw, 108px); line-height: 0.86;
  letter-spacing: -0.02em; margin: 10px 0 0 0;
}
.portada .rasgos {
  font-family: var(--romana); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.4; color: var(--secundario);
  margin-top: 14px; max-width: 17em;
}

/* ================= FILAS CON DOS LÍNEAS ================= */

.sumario .doble { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sumario .doble .nombre { font-size: 17px; }
.sumario .doble .sub { font-size: 12px; color: var(--secundario); }

.sumario.ingredientes li { min-height: 64px; gap: 14px; }

.mini {
  width: 44px; height: 44px; flex: 0 0 44px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--filete);
}
.mini.vacia { background: var(--filete); opacity: 0.5; }

/* ================= COMENSALES ================= */

.comensales {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 0 0;
}
.comensales .mando { display: flex; align-items: center; gap: 22px; }
.comensales .paso {
  width: var(--tactil); height: var(--tactil);
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--romana); font-size: 30px; font-weight: 300;
  color: var(--tinta); line-height: 1;
}
.comensales .paso:active { opacity: 0.4; }
.comensales .cifra {
  font-family: var(--romana); font-size: 34px; font-weight: 300;
  min-width: 30px; text-align: center; font-variant-numeric: tabular-nums;
}

/* ================= TEXTOS DE RECETA ================= */

.preparacion { font-size: 15px; line-height: 1.6; color: var(--secundario); margin: 10px 0 0 0; }
.notaOpcion { font-family: var(--romana); font-style: italic; font-size: 16px; color: var(--secundario); margin: 14px 0 0 0; }
.aviso {
  font-size: 13px; line-height: 1.55; color: var(--secundario);
  border-left: 2px solid var(--tinta); padding-left: 14px; margin: 18px 0 0 0;
}

.fotoProducto { margin-top: 22px; background: #fff; border: 1px solid var(--filete); }
.fotoProducto img { display: block; width: 100%; height: auto; }

.datosProducto { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 22px; }
.datosProducto .dato { display: flex; flex-direction: column; gap: 7px; }
.datosProducto .valor { font-family: var(--romana); font-size: 24px; font-weight: 300; }

/* ================= LISTA DE LA COMPRA ================= */

.rotulo.pasillo { margin-top: 28px; }
.sumario.compra li { min-height: 58px; gap: 14px; }
.casilla {
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 1px solid var(--topo);
}
.itemCompra.puesto .casilla { background: var(--tinta); border-color: var(--tinta); }
.itemCompra.puesto .nombre { color: var(--topo); text-decoration: line-through; }
.itemCompra.puesto .mini { opacity: 0.35; }

/* la capa de detalle también se posa por bloques */
.detalle.entrando .desliza,
.puerta.entrando .desliza { animation: posarse 460ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .detalle.entrando .desliza,
  .puerta.entrando .desliza { animation: none; }
}


/* ================= MACROS ================= */

.macros { padding-top: 22px; }
.macroPrincipal { display: flex; align-items: baseline; justify-content: space-between; }
.cifraKcal {
  font-family: var(--romana); font-weight: 300;
  font-size: 52px; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.macroDesglose {
  display: flex; gap: 30px; margin-top: 16px;
  border-top: 1px solid var(--filete); padding-top: 14px;
}
.macroDesglose .macro { display: flex; flex-direction: column; gap: 5px; }
.macroDesglose .valor {
  font-family: var(--romana); font-size: 26px; font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.kcalFila {
  font-family: var(--romana); font-size: 20px; font-weight: 300;
  color: var(--secundario); font-variant-numeric: tabular-nums;
  flex: 0 0 auto; min-width: 34px; text-align: right;
}

.porCien { font-size: 13px; color: var(--secundario); margin: 18px 0 0 0; line-height: 1.6; }
.procedencia { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--filete); }
.detalleFuente { font-size: 12px; line-height: 1.55; color: var(--topo); margin: 8px 0 0 0; }

/* ================= ACCIONES ================= */

.accionPrincipal {
  background: var(--tinta); color: var(--papel);
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 26px; cursor: pointer; position: relative;
}
.accionPrincipal:active { opacity: 0.75; }
.accionPrincipal.hecha { background: none; color: var(--tinta); border: 1px solid var(--tinta); }
.accionPrincipal input { position: absolute; opacity: 0; pointer-events: none; }

.accionSecundaria {
  border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta);
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 22px; cursor: pointer;
}
.accionSecundaria:active { opacity: 0.45; }

.tilde { width: 15px; height: 15px; stroke: var(--tinta); }
.sumario li.elegida .nombre { font-weight: 500; }

/* ================= TOTAL DEL DÍA ================= */

.totalDia { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tinta); }

/* ================= DIARIO ================= */

.tresCifras { display: flex; gap: 30px; margin-top: 24px; }
.tresCifras .dato { display: flex; flex-direction: column; gap: 6px; }
.valorGrande { font-family: var(--romana); font-size: 34px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.pct { font-family: var(--palo); font-size: 12px; font-weight: 500; color: var(--topo); margin-left: 3px; }

/* ---------- Calendario del diario ---------- */
.calendarioDiario { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.semanaFila { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 6px; align-items: center; }
.semanaFila .numSemana {
  font-family: var(--romana); font-size: 13px; color: var(--topo);
  text-align: right; padding-right: 2px; font-variant-numeric: tabular-nums;
}
.semanaFila .dia {
  aspect-ratio: 1; border: 1px solid var(--filete); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  font-family: var(--romana); font-size: 12px; font-weight: 300; color: var(--topo);
  background: none; font-variant-numeric: tabular-nums;
}
.semanaFila .dia.hecho { background: var(--tinta); border-color: var(--tinta); color: var(--papel); cursor: pointer; }
.semanaFila .dia.hecho:active { opacity: .55; }
.semanaFila .dia.futuro { opacity: 0.3; }
.semanaFila .dia.hoy { border-color: var(--tinta); }
.semanaFila.cabecera .dia, .semanaFila.cabecera .numSemana {
  border: 0; aspect-ratio: auto; font-family: var(--palo); font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--topo);
}

.grafica { display: block; margin-top: 18px; max-width: 100%; }
.etiquetaGrafica { font-family: var(--romana); font-size: 13px; fill: var(--tinta); }

/* ================= SERIES ================= */

.tablaSeries { margin-top: 12px; }
.cabeceraSeries, .filaSerie {
  display: grid; grid-template-columns: 26px 1fr 1fr 40px; align-items: center; gap: 8px;
}
.cabeceraSeries {
  padding-bottom: 10px; border-bottom: 1px solid var(--tinta);
  font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--topo);
}
.cabeceraSeries span:nth-child(2), .cabeceraSeries span:nth-child(3) { text-align: center; }
.filaSerie { border-bottom: 1px solid var(--filete); min-height: 62px; }
.filaSerie.hecha .cifra { color: var(--topo); }
.numSerie { font-family: var(--romana); font-size: 15px; color: var(--topo); }

.mando { display: flex; align-items: center; justify-content: center; gap: 4px; }
.paso {
  min-width: 42px; height: 46px; border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--romana); font-size: 26px; font-weight: 300; color: var(--tinta); line-height: 1;
}
.paso:active { opacity: 0.4; }
.cifra {
  font-family: var(--romana); font-size: 26px; font-weight: 300;
  min-width: 46px; text-align: center; font-variant-numeric: tabular-nums;
}
.casillaSerie {
  width: 30px; height: 30px; border: 1px solid var(--topo); background: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  justify-self: end;
}
.casillaSerie.puesta { border-color: var(--tinta); }
.masSeries { margin-top: 10px; }
.masSeries .paso { font-family: var(--palo); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; min-width: auto; }

.cronometro {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta);
  padding: 14px 0; margin-top: 24px;
}
.cronometro .tiempo {
  font-family: var(--romana); font-size: 40px; font-weight: 300;
  font-variant-numeric: tabular-nums; flex: 1 1 auto; text-align: right;
}

/* ================= CAMPOS ================= */

.campos { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--filete); }
.campo input {
  font-family: var(--romana); font-size: 26px; font-weight: 300; color: var(--tinta);
  border: 0; border-bottom: 2px solid var(--tinta); background: none;
  padding: 4px 0; width: 100%; border-radius: 0;
}
.campo input:focus { outline: none; border-bottom-color: var(--tinta); }
.notaCampo { font-size: 12px; color: var(--topo); line-height: 1.5; }

.ajustes { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filete); }
.ajuste input {
  font-family: var(--romana); font-size: 22px; font-weight: 300; color: var(--tinta);
  border: 0; border-bottom: 2px solid var(--tinta); background: none;
  padding: 2px 0; width: 40%; text-align: right; border-radius: 0;
}
.ajuste input:focus { outline: none; }

.pesoBloque, .grasaBloque { margin-top: 6px; cursor: pointer; }
.enlaceFoto { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta); }

/* ================= PUERTA ================= */

.puerta {
  position: absolute; inset: 0; z-index: 20;
  background: var(--papel);
  display: flex; flex-direction: column;
  padding: 0 var(--margen);
  overflow-y: auto;
}
.puerta[hidden] { display: none; }
.cuerpoPuerta { display: flex; flex-direction: column; flex: 1 1 auto; padding: 60px 0 30px 0; }
.cuerpoPuerta h1 { margin-top: 18px; font-size: clamp(38px, 12vw, 52px); }
.cuerpoPuerta .entradilla { max-width: 17em; }

.letraPequena { font-size: 12px; line-height: 1.55; color: var(--topo); margin: 16px 0 0 0; }

/* ================= ALTA ================= */

.opciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.opcion {
  flex: 1 1 auto; min-height: var(--tactil); padding: 0 18px;
  border: 1px solid var(--filete); background: none; cursor: pointer;
  font-family: var(--palo); font-size: 13px; font-weight: 500; color: var(--secundario);
  border-radius: 0;
}
.opcion.elegida { border-color: var(--tinta); color: var(--tinta); font-weight: 600; }
.opcion:active { opacity: 0.5; }

.casillas { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.casillaGrande {
  display: flex; align-items: center; gap: 16px; text-align: left;
  min-height: 62px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--filete);
  background: none; cursor: pointer;
  font-family: var(--palo); font-size: 15px; color: var(--tinta); line-height: 1.45;
}
.casillaGrande .marca {
  width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid var(--topo);
}
.casillaGrande.puesta .marca { background: var(--tinta); border-color: var(--tinta); }
.casillaGrande:active { opacity: 0.5; }

.accionPrincipal.inerte { background: var(--filete); color: var(--topo); pointer-events: none; }

.ajustada { font-style: italic; color: var(--tinta); }

/* ---------- Menú semanal ---------- */
.navSemana { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.botonPlano { background: none; border: 0; font-family: var(--palo); font-size: 13px;
  color: var(--secundario); padding: 10px 0; cursor: pointer; letter-spacing: .01em; }
.botonPlano.centrado { display: block; margin: 14px auto 0; }
.botonAncho { display: block; width: 100%; min-height: var(--tactil); background: var(--tinta);
  color: var(--papel); border: 0; border-radius: 2px; font-family: var(--palo); font-size: 14px;
  font-weight: 500; letter-spacing: .02em; cursor: pointer; margin-bottom: 4px; }
.sumario li.hoyEnSemana .numeral { background: var(--tinta); color: var(--papel);
  border-radius: 50%; width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; }
.sumario li.elegida .nombre { font-weight: 600; }
.nombre em { font-style: italic; color: var(--topo); font-weight: 400; }

/* ---------- Lista de la compra ---------- */
.listaCompra { list-style: none; margin: 0 0 24px; padding: 0; }
.filaCompra { display: grid; grid-template-columns: 17px 42px 1fr auto;
  align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--filete); }
.filaCompra .doble { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filaCompra .nombre { line-height: 1.25; }
.filaCompra .sub { font-size: 11.5px; color: var(--topo); }
/* La cifra y su unidad van apiladas: en un móvil estrecho, ponerlas en dos
   columnas dejaba el nombre partido en cuatro líneas. */
.cantidadCompra { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.filaCompra .casilla { width: 15px; height: 15px; border: 1px solid var(--topo); border-radius: 2px; }
.filaCompra.puesto { opacity: .38; }
.filaCompra.puesto .casilla { background: var(--tinta); border-color: var(--tinta); }
.filaCompra.puesto .nombre { text-decoration: line-through; }
.miniCompra { width: 46px; height: 46px; object-fit: contain; background: #fff;
  border-radius: 2px; cursor: zoom-in; }
.miniCompra.vacia { background: var(--filete); }
.cifraCompra { font-family: var(--romana); font-size: 20px; line-height: 1; }
.unidadCompra { font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--topo); white-space: nowrap; }

/* ---------- Visor de fotos ---------- */
.visor { position: fixed; inset: 0; background: rgba(33,30,25,.82); display: none;
  align-items: center; justify-content: center; z-index: 60; padding: 24px; }
.visor.visible { display: flex; }
.visor .marco { background: #fff; border-radius: 3px; padding: 14px; max-width: min(440px, 88vw);
  position: relative; }
.visor img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.visor .pieVisor { margin: 12px 2px 2px; font-family: var(--palo); font-size: 13px; color: var(--tinta); }
.cerrarVisor { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: var(--papel); color: var(--tinta);
  font-size: 21px; line-height: 1; cursor: pointer; }

/* ---------- Aviso flotante ---------- */
.nota { position: fixed; left: 50%; transform: translateX(-50%) translateY(14px);
  bottom: calc(78px + env(safe-area-inset-bottom)); background: var(--tinta); color: var(--papel);
  font-family: var(--palo); font-size: 13px; padding: 11px 18px; border-radius: 2px;
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 70;
  max-width: 84vw; text-align: center; }
.nota.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.resumenAsistente { list-style: none; margin: 4px 0 0; padding: 0; }
.resumenAsistente li { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filete); }
.resumenAsistente .nombre { font-family: var(--romana); font-size: 17px; text-align: right; }
.selector { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.selector .rotulo { margin-right: 2px; }
.opcionSelector { background: none; border: 1px solid var(--filete); border-radius: 2px;
  font-family: var(--palo); font-size: 13px; color: var(--secundario);
  padding: 9px 14px; cursor: pointer; }
.opcionSelector.activa { border-color: var(--tinta); color: var(--tinta); font-weight: 500; }

/* ---------- Tira de días ---------- */
.tiraDias { display: flex; gap: 6px; margin: 0 0 20px; }
.chipDia { flex: 1; position: relative; background: none; border: 1px solid var(--filete);
  border-radius: 2px; font-family: var(--palo); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--topo); padding: 11px 0 14px; cursor: pointer; }
.chipDia.activa { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.puntoDia { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: transparent; }
.puntoDia.lleno { background: var(--topo); }
.chipDia.activa .puntoDia.lleno { background: var(--papel); }
.enlaceAviso { background: none; border: 0; padding: 0; font-family: var(--palo);
  font-size: inherit; color: var(--tinta); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.enlaceFoto.pendiente { color: var(--topo); text-decoration: none; }
.fichaSalud { padding: 14px 0 2px; }
.fichaSalud .nombre { font-family: var(--romana); font-size: 19px; }
.pasosSalud { list-style: none; margin: 4px 0 20px; padding: 0; }
.pasosSalud li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 9px 0;
  align-items: start; }
.pasosSalud .cifra { font-family: var(--romana); font-size: 17px; color: var(--topo); }
.pasosSalud .texto { line-height: 1.5; }
.direccionSalud { background: rgba(33,30,25,.045); border-radius: 2px; padding: 14px; margin: 4px 0 8px; }
.direccionSalud code { display: block; font-size: 11.5px; line-height: 1.5; word-break: break-all;
  font-family: ui-monospace, Menlo, monospace; color: var(--secundario); }
.direccionSalud .botonPlano { padding: 10px 0 2px; }
.parrafo { line-height: 1.6; margin: 0 0 12px; }

/* ---------- Bodegón de la receta ---------- */
.bodegon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; }
.bodegon figure { margin: 0; }
.bodegon img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff;
  border-radius: 2px; display: block; cursor: zoom-in; }
.bodegon figcaption { margin-top: 6px; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--topo); line-height: 1.3; }
.porQue { font-family: var(--romana); font-style: italic; font-size: 17px; line-height: 1.5;
  color: var(--secundario); margin: 0 0 16px; }
.marcaCompartida { font-size: 12px; color: var(--topo); margin: 0 0 14px;
  padding-left: 13px; position: relative; }
.marcaCompartida::before { content: ''; position: absolute; left: 0; top: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--topo); }

/* ---------- Filas de plato, con foto ---------- */
.filaPlato { display: grid; grid-template-columns: 52px 1fr auto; gap: 13px; align-items: center; }
.miniPlato { width: 52px; height: 52px; object-fit: contain; background: #fff;
  border-radius: 2px; display: block; }
.miniPlato.vacia { background: var(--filete); }
.filaPlato .doble { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filaPlato .rotulo { font-size: 10px; }
.filaPlato .nombre { line-height: 1.3; }
.filaPlato .sub { font-size: 11.5px; color: var(--topo); }
.botonPlano.cambiar { font-size: 12px; padding: 8px 2px 8px 10px; white-space: nowrap; }

/* ---------- Mario Trainer ---------- */
.calentamiento { margin: 2px 0 6px; }
.subCal { font-family: var(--romana); font-style: italic; font-size: 17px; margin: 14px 0 4px; color: var(--tinta); }
.grupoCal { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--topo); margin: 10px 0 2px; }
.listaCal { list-style: none; margin: 0; padding: 0; }
.itemCal { display: grid; grid-template-columns: 15px 58px 1fr auto auto; gap: 9px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--filete); cursor: pointer; }
/* La lámina del movimiento: se toca y se abre en grande, como las fotos
   de los platos. Los movimientos sin lámina dejan el hueco, para que las
   filas de una misma lista queden alineadas. */
.laminaCal { width: 58px; height: 58px; border-radius: 2px; display: block; }
img.laminaCal { object-fit: cover; background: var(--papel, #F4F1EA); }
.laminaCal.vacia { background: none; }
.itemCal .casilla { width: 15px; height: 15px; border: 1px solid var(--topo); border-radius: 2px; }
.itemCal.hecho { opacity: .4; }
.itemCal.hecho .casilla { background: var(--tinta); border-color: var(--tinta); }
.itemCal.hecho .nombre { text-decoration: line-through; }
.repsCal { font-family: var(--romana); font-size: 16px; color: var(--secundario); white-space: nowrap; }
.enlaceVideo { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.objetivo { background: rgba(33,30,25,.045); border-radius: 2px; padding: 14px 16px; margin: 4px 0 16px; }
.objetivo .aviso { margin: 8px 0 0; }
.cifraObjetivo { font-family: var(--romana); font-size: 22px; line-height: 1.25; margin: 4px 0 0; }
.filaVideo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.botonVideo { font-size: 13px; color: var(--tinta); text-underline-offset: 3px; }
.listaVolcado { list-style: none; margin: 0 0 20px; padding: 0; }
.listaVolcado li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--filete); align-items: start; }
.listaVolcado .celdaVolcado { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--topo); padding-top: 2px; }
.listaVolcado .doble { display: flex; flex-direction: column; gap: 2px; }
.listaVolcado .sub { font-size: 11.5px; color: var(--topo); }
.listaVolcado li.conflicto .nombre { text-decoration: line-through; color: var(--topo); }
.marcaPisar { display: flex; gap: 10px; align-items: center; font-size: 13px; margin: 6px 0 16px; }
.enlaceBoton { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* La tabla de series medía 366 px en una pantalla con 315 útiles y la
   casilla de marcar se salía por la derecha. Se estrecha solo aquí; los
   botones siguen teniendo 46 px de alto, que es lo que cuenta para el dedo. */
.cabeceraSeries, .filaSerie { grid-template-columns: 18px 1fr 1fr 34px; gap: 6px; }
.filaSerie .mando { gap: 2px; }
.filaSerie .paso { min-width: 32px; }
.filaSerie .cifra { min-width: 42px; font-size: 24px; }
/* La cifra de la serie se puede escribir: es un campo con aspecto de
   cifra, y el filete de debajo avisa de que se toca. Con letra de más de
   16 px el iPhone no amplía la pantalla al enfocarla. */
.filaSerie input.cifra {
  width: 58px; min-width: 0; padding: 3px 0 2px; margin: 0;
  border: 0; border-bottom: 1px solid var(--filete); border-radius: 0;
  background: none; color: var(--tinta); -webkit-appearance: none; appearance: none;
}
.filaSerie input.cifra:focus { outline: none; border-bottom-color: var(--tinta); }
.filaSerie.hecha input.cifra { color: var(--topo); }
.filaSerie .casillaSerie { width: 32px; height: 32px; }
.equivalencia { font-size: 13.5px; line-height: 1.55; color: var(--secundario); margin: 0 0 10px; }
.equivalencia strong { color: var(--tinta); font-weight: 500; }
.objetivoDia { font-size: 12px; color: var(--topo); margin: 10px 0 0; }

/* ---------- Fotos por día ---------- */
.diaFotos { margin-top: 18px; }
.diaFotos .filaFechas { margin: 0 2px 8px; }
.tiraFotos { display: flex; gap: 8px; }
.cajaMini {
  margin: 0; flex: 1 1 0; aspect-ratio: 3 / 4; background: var(--filete);
  border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.cajaMini .rotulo { font-size: 8px; text-align: center; padding: 4px; }
img.miniFoto { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
img.miniFoto:active { opacity: .6; }

/* ---------- Comparar dos fotos ---------- */
.comparador {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--tinta); border-radius: 2px; margin-top: 14px; touch-action: pan-y;
  cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.comparador .fotoComp {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
}
.comparador .capaVieja { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.comparador .tirador {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--papel);
  box-shadow: 0 0 8px rgba(0, 0, 0, .45); pointer-events: none;
}
.comparador .asa {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 2px solid var(--papel); border-radius: 50%; background: rgba(33, 30, 25, .35);
}
.cargandoComp {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--papel); font-size: 13px; text-align: center; padding: 20px; margin: 0;
}
.filaFechas { display: flex; justify-content: space-between; margin: 8px 2px 4px; }
.campos input[type="range"] { width: 100%; accent-color: var(--tinta); }

/* ---------- Calentamiento plegable ---------- */
.cabeceraPlegable {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: 14px 0 10px; cursor: pointer; text-align: left;
}
.cabeceraPlegable .rotulo { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--topo); }
.cabeceraPlegable .signoPlegar {
  font-family: var(--romana); font-size: 24px; font-weight: 300; line-height: 1; color: var(--tinta);
}
.cabeceraPlegable:active { opacity: .5; }

/* ---------- El descanso, flotando por encima de todo ---------- */
.burbujaDescanso {
  position: fixed; right: 16px; bottom: 74px; z-index: 75;
  display: flex; align-items: center; gap: 12px;
  background: var(--tinta); color: var(--papel);
  padding: 10px 12px 10px 16px; border-radius: 3px;
  box-shadow: 0 6px 24px rgba(33, 30, 25, .28);
}
.burbujaDescanso .rotulo { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.burbujaDescanso .tiempo {
  font-family: var(--romana); font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums;
}
.burbujaDescanso .paso { color: var(--papel); min-width: 28px; height: 28px; font-size: 20px; }

/* ---------- Avisos con botón de aceptar ---------- */
.modalAviso {
  position: fixed; inset: 0; background: rgba(33, 30, 25, .82); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modalAviso .marco {
  background: var(--papel); border-radius: 3px; padding: 22px 20px 18px;
  max-width: min(420px, 90vw); max-height: 80vh; overflow-y: auto;
}
.modalAviso .rotulo { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--topo); }
.modalAviso .cifraObjetivo { margin: 6px 0 10px; }
.modalAviso .cuerpoAviso { margin: 10px 0 18px; }
.modalAviso .cuerpoTexto { font-size: 14.5px; line-height: 1.6; color: var(--secundario); margin: 0 0 8px; }
.listaAviso { list-style: none; margin: 0; padding: 0; }
.listaAviso li { padding: 10px 0; border-bottom: 1px solid var(--filete); }
.listaAviso li:last-child { border-bottom: 0; }
.listaAviso .nombre { display: block; font-size: 16px; margin-bottom: 3px; }
.listaAviso .sub { font-size: 13.5px; line-height: 1.55; color: var(--secundario); }

/* ---------- Seis pestañas ---------- */
/* Con seis, a ancho fijo, «Ejercicios» no cabía en un iPhone. Cada
   pestaña mide lo que su palabra y el hueco se reparte entre ellas. */
.barra { padding: 0 16px; justify-content: space-between; }
.pestana { flex: 0 0 auto; letter-spacing: .13em; padding: 0 1px; }

/* ---------- Ejercicios ---------- */
.itemCal.soloLectura { cursor: default; }
.itemCal .punto { width: 5px; height: 5px; border-radius: 50%; background: var(--topo); justify-self: center; }
.marcaSube { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
  margin-top: 3px; font-weight: 500; }
.sumario li .doble .rotulo { font-size: 10px; }
.botonPlano[disabled] { opacity: .3; cursor: default; }

/* ---------- Reproductor de vídeo ---------- */
.reproductor { position: fixed; inset: 0; background: rgba(15,13,11,.9); display: none;
  align-items: center; justify-content: center; z-index: 65; padding: 20px; }
.reproductor.visible { display: flex; }
.reproductor .marcoVideo { position: relative; width: min(88vw, 44vh); }
.reproductor.horizontal .marcoVideo { width: min(92vw, 640px); }
.pantallaVideo { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000;
  border-radius: 3px; overflow: hidden; }
.reproductor.horizontal .pantallaVideo { aspect-ratio: 16 / 9; }
.pantallaVideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tapaSalida { position: absolute; top: 0; right: 0; width: 64px; height: 64px; }
.reproductor .pieVisor { color: var(--papel); margin: 12px 2px 0; font-size: 13px; }
.reproductor .cerrarVisor { top: -14px; right: -14px; z-index: 2; }
button.botonVideo { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ---------- Reproductor propio ---------- */
.pantallaVideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cargandoVideo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: rgba(239,234,224,.8); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.mandos { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 40%);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.mandos.visibles { opacity: 1; pointer-events: auto; }
.botonPlay { width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(239,234,224,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--papel); display: flex; align-items: center; justify-content: center; }
.botonPlay svg { width: 30px; height: 30px; }
.pieMandos { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.barraVideo { height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.barraVideo::before { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: rgba(239,234,224,.3); border-radius: 2px; }
.barraVideo { position: relative; }
.rellenoVideo { position: relative; height: 3px; background: var(--papel); border-radius: 2px; width: 0; }
.filaMandos { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.tiempoVideo { color: var(--papel); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.botonGrande { background: none; border: 0; color: var(--papel); width: 34px; height: 34px; padding: 6px; cursor: pointer; }
.botonGrande svg { width: 100%; height: 100%; }

/* ---------- El volcado escrito para copiarlo ---------- */
.listadoVolcado {
  white-space: pre-wrap; word-break: break-word; margin: 16px 0 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.6;
  color: var(--secundario); background: rgba(33, 30, 25, .045);
  padding: 14px 12px; border-radius: 2px;
}