/* =============================================================================
   NUTRITUPP · cfg-02-calendario.css — EL CALENDARIO
   -----------------------------------------------------------------------------
   Se carga LA ÚLTIMA. No edita planificador.css: lo pisa donde toca.

   LA PREGUNTA DE ESTA CAPA
   ¿Un calendario de 28 días es la forma correcta de comprar comida?
   No. Medido en el navegador, hoy:
       escritorio 1440   el mes son 1.614 px de rejilla (1,6 pantallas)
       móvil 390         el mes son 4.345 px de rejilla (5,15 pantallas)
                         y 20.624 px de documento entero
   Y ese rollo son cuatro semanas que se parecen mucho, porque la gente come lo
   mismo varios días: el propio rellenar() de planificador.js cicla 12 platos
   principales sobre 28 días, así que la S3 sale casi igual que la S1.

   La semana SÍ es la forma correcta: es la unidad en la que la gente planifica
   y compra. El mes no son 28 decisiones; es una semana y una regla de repetición.
   De ahí las tres decisiones de esta hoja:

     1. QUITAR LAS CAJAS. El calendario deja de ser una tarjeta blanca con
        sombra llena de tarjetas blancas con sombra y pasa a ser UNA HOJA
        RAYADA: un plano de papel claro sobre la crema, con filetes. Es el
        idioma de /nueva («no tiene ni una caja») y además deja libre el único
        bloque oscuro de la página para quien lo necesite de verdad: la carta.

     2. EL MES SE LEE POR SEMANAS.
        · Escritorio: rejilla 7×4 densa. Se quita el precio por plato dentro
          del día (el total vive en el panel) y la celda pasa de 392 a ~150 px.
          El mes entero cabe de un vistazo.
        · Móvil: cuatro semanas que se pasan de lado, una por pantalla, con
          scroll-snap nativo y un trozo de la siguiente asomando. Sin JS.

     3. ARREGLAR LO QUE HOY ES ILEGIBLE. Medido a 124 px de columna, que es el
        ancho POR DEFECTO en escritorio: la ✕ de quitar cae encima del nombre
        del plato en las 28 tarjetas, el «€» se descuelga a su propia línea y
        la cabecera del día se parte en cuatro trozos. No es un caso límite,
        es todas las celdas.

   Lo que NO hace esta hoja: no toca la carta, ni el panel, ni los planes, ni
   el diálogo de elegir plato. Solo .calendario, #rejilla, .dia, .hueco y .ficha.
   ========================================================================== */

/* =============================================================================
   0 · TOKENS
   Todo lo que declara esta hoja va prefijado --cal-*. Con diez capas escribiendo
   en :root, el nombre de un token es un recurso compartido.
   Los valores de respaldo son los de /nueva (nueva-05-luz.css): si esa capa
   llega a /pedidos, esto hereda; si no llega, se ve exactamente igual.
   ========================================================================== */

:root {
  --cal-papel:   var(--luz-alta, #f7f2ec);   /* la hoja donde da la luz */
  --cal-hueco:   var(--crema-honda, #e5dcd0); /* el día sin nada: es un agujero */
  --cal-filete:  var(--linea-honda, #d2c6b4);
  --cal-filete-fino: var(--linea, #dcd2c4);
  --cal-tinta:   var(--tinta, #556354);
  --cal-titulo:  var(--titulo, #161915);
  --cal-marca:   var(--teal, #145961);
  --cal-verde:   var(--verde, #74b74e);
  --cal-verde-hondo: var(--luz-verde-hondo, #3a7026);
  --cal-ambar:   #b4762a;
  --cal-rojo:    var(--rojo, #ce3939);

  /* el muelle de /nueva, muestreado; si nueva-01-tipo está, se usa el suyo */
  --cal-curva:   var(--barrido, cubic-bezier(.76, 0, .24, 1));
  --cal-radio:   6px;    /* casi cero: /nueva no redondea */
}

/* =============================================================================
   1 · LA HOJA
   Fuera la tarjeta blanca y fuera la sombra. El calendario es papel sobre papel.
   ========================================================================== */

.calendario {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 8px;
  /* MEDIDO: sin esto, el pager horizontal de móvil ENSANCHA LA PÁGINA.
     .calendario es celda de .tablero, que en móvil es `1fr` = minmax(auto,1fr):
     su mínimo automático es el min-content de lo que lleva dentro, y el
     min-content de una rejilla con columnas al 100% es su contenido entero.
     Resultado medido antes de esta línea: window.innerWidth 390 -> 456 y el
     documento entero desalineado. min-width:0 corta esa propagación. */
  min-width: 0;
}

.calendario__cabecera {
  align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cal-filete);
}

/* El rótulo del calendario en la voz de /nueva: versalita, no titular. */
.calendario__titulo {
  font-family: var(--tipo, Manrope, system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cal-marca);
  line-height: 1.2;
}

/* Los dos botones de la cabecera dejan de ser cajas: son texto con filete. */
.calendario .acciones .boton {
  background: none;
  border: 0;
  border-bottom: 1.5px solid var(--cal-filete);
  border-radius: 0;
  padding: 3px 2px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cal-marca);
  transition: border-color .18s var(--cal-curva), color .18s var(--cal-curva);
}
.calendario .acciones .boton:hover { background: none; border-bottom-color: var(--cal-marca); }
.calendario .acciones .boton--fantasma { color: var(--cal-tinta); border-bottom-color: transparent; }
.calendario .acciones .boton--fantasma:hover { background: none; color: var(--cal-rojo); border-bottom-color: var(--cal-rojo); }

/* «Repetir esta semana» lo inyecta cfg-02-calendario.js y sólo existe en el
   plan mensual. Es LA acción de esa vista —convierte 28 decisiones en una— así
   que es la única de la cabecera que va sólida. */
.calendario .acciones .boton--repetir {
  background: var(--cal-marca);
  border: 0;
  border-radius: 999px;
  color: #fff;
  padding: 7px 15px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.calendario .acciones .boton--repetir:hover { background: var(--teal-hondo, #073439); }
.calendario .acciones .boton--repetir:disabled {
  background: none;
  color: var(--cal-tinta);
  opacity: .55;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1.5px var(--cal-filete);
}
.calendario .acciones .boton--repetir[hidden] { display: none; }

/* =============================================================================
   2 · LA REJILLA
   gap: 0 y filetes. Con separación entre celdas no se puede rayar una hoja;
   con filetes continuos, 28 celdas se leen como una tabla y no como 28 cajas.
   ========================================================================== */

.rejilla-dias {
  gap: 0;
  background: var(--cal-papel);
  border: 1px solid var(--cal-filete);
  border-radius: var(--cal-radio);
  overflow: hidden;   /* recorta las esquinas de las celdas de los extremos */
}

.dia {
  background: none;
  border: 0;
  border-right: 1px solid var(--cal-filete-fino);
  border-bottom: 1px solid var(--cal-filete-fino);
  border-radius: 0;
  min-height: 0;
  padding: 9px 10px 8px;
  gap: 5px;
}
/* Sin filete a la derecha en la última columna ni abajo en la última fila:
   el borde del contenedor ya está ahí y dos líneas juntas se ven gordas. */
.rejilla-dias .dia:nth-child(7n) { border-right: 0; }
.rejilla-dias[data-vista="semana"] .dia { border-bottom: 0; }
.rejilla-dias[data-vista="mes"] .dia:nth-child(n+22) { border-bottom: 0; }

/* El día sin nada es un agujero en el plan, y tiene que verse como tal:
   es lo que separa «llevo 12 días» de «me faltan 8 para el 10%».
   :has() va en una regla sola: no es un selector indulgente y si el navegador
   no lo entiende se cae la regla entera, no la lista. */
.dia:not(:has(.hueco.lleno)) { background: var(--cal-hueco); }

/* =============================================================================
   3 · LA CABECERA DEL DÍA
   A 124 px de columna, «LUN · S1» y «893 KCAL» en la misma línea se parten en
   cuatro trozos. Van apiladas: rótulo arriba, cifra abajo. La cifra es el dato
   que se escanea, así que es la que manda.
   ========================================================================== */

.dia__nombre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-family: var(--tipo, Manrope, system-ui, sans-serif);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--cal-tinta);
  white-space: nowrap;
  margin-bottom: 2px;
}
.dia__kcal {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
  line-height: 1;
  color: var(--cal-titulo);
  min-height: 1em;          /* el día vacío no encoge la cabecera */
}
.dia__kcal[data-estado="ok"]     { color: var(--cal-verde-hondo); }
.dia__kcal[data-estado="corto"]  { color: var(--cal-ambar); }
.dia__kcal[data-estado="pasado"] { color: var(--cal-rojo); }

/* =============================================================================
   4 · LA FICHA
   -----------------------------------------------------------------------------
   Tres arreglos medidos y una jerarquía.

   (a) LA ✕ ENCIMA DEL NOMBRE. .ficha__quitar es absoluta a 2 px del borde y
       .ficha__nombre no reserva sitio: a 124 px de columna la ✕ cae sobre las
       últimas letras de TODOS los platos («Salmón Omega3✕», «Judías Verdes✕
       Rehogadas»). Se reserva el hueco y de paso el objetivo táctil sube de
       18×18 a 28×28 px, que es lo que pide la 2.5.8 de WCAG 2.2 (mínimo 24).
   (b) EL «€» DESCOLGADO. «416 kcal · 11,95 €» no cabe en 108 px y el símbolo
       cae a su propia línea en casi todas. nowrap y un punto menos de cuerpo.
   (c) LA JERARQUÍA. Idea tomada del Priority Pyramid Calendar (@ruixen.ui):
       dentro de un día, lo importante ocupa más y grita más. El principal es
       el plato; las dos guarniciones son el acompañamiento y se leen como tal.
   ========================================================================== */

.hueco.lleno {
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
  flex: 0 0 auto;
}

.ficha {
  background: none;
  border: 0;
  border-left: 3px solid var(--cal-verde);
  border-radius: 0;
  padding: 1px 28px 1px 8px;   /* 28 a la derecha: el hueco de la ✕ */
  gap: 1px;
  min-height: 0;
}
.ficha[data-tipo="guarnicion"] { border-left-width: 2px; border-left-color: var(--cal-ambar); }
.ficha[data-tipo="plato"]      { border-left-color: var(--cal-marca); }
.ficha[data-tipo="extra"]      { border-left-color: var(--cal-filete); }

.ficha__nombre {
  font-family: var(--tipo, Manrope, system-ui, sans-serif);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--cal-titulo);
}
.ficha[data-tipo="guarnicion"] .ficha__nombre,
.ficha[data-tipo="extra"] .ficha__nombre {
  font-weight: 500;
  font-size: .76rem;
  color: var(--cal-tinta);
}

.ficha__dato {
  font-size: .68rem;
  letter-spacing: -.01em;
  white-space: nowrap;          /* (b) el € no se descuelga */
  color: var(--cal-tinta);
}

/* La foto del plato, en tira bajo el nombre. DEBAJO del nombre y no encima,
   por la ✕: vive en la esquina superior derecha, y sobre una foto un aspa
   puede caer en un trozo claro y desaparecer. Sobre el papel siempre se ve. */
.ficha__foto {
  display: block;
  margin: 3px 0 4px;
}
.ficha__foto img {
  display: block;
  width: 100%;
  height: 54px;
  object-fit: cover;
  border-radius: 7px;
  /* La ficha entera es arrastrable para mover el plato de día: si la imagen
     atrapa el gesto, el navegador arrastra LA FOTO (su comportamiento de
     serie) y el plato se queda donde estaba. */
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.ficha__quitar {
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: var(--cal-radio);
  color: var(--cal-tinta);
  /* .75 y no .38: la ✕ es un control, y la 1.4.11 pide 3:1 contra el fondo.
     Medido sobre --cal-papel: a .38 sale 1,7:1 (falla), a .75 sale 3,39:1. */
  opacity: .75;
  transition: opacity .16s var(--cal-curva), background .16s var(--cal-curva);
}
/* :focus y :focus-visible, los dos. Si sólo se pone :focus-visible y el
   navegador decide que ese foco no «merece» anillo, el botón se queda con
   opacidad 0 CON EL FOCO DENTRO: un control enfocado e invisible. Medido:
   enfocando por script, la opacidad computada era 0. */
.ficha:hover .ficha__quitar,
.ficha__quitar:focus,
.ficha__quitar:focus-visible { opacity: 1; }
.ficha__quitar:hover { background: #f7e4e4; color: var(--cal-rojo); opacity: 1; }
/* En el mes son 76 aspas a la vez: con ratón desaparecen hasta que hace falta.
   TRUEQUE DECLARADO: un control que en reposo no se ve no cumple la 1.4.11.
   Se acepta SÓLO donde hay ratón fino, porque ahí (a) pasar por encima es
   gratis, (b) el foco de teclado la enciende al 100% —sigue en el orden de
   tabulación, no se esconde con display:none— y (c) el ruido de 76 iconos en
   la vista donde uno está CONTANDO DÍAS es peor que el trueque. En táctil y en
   la vista semana la ✕ está siempre visible y pasa el 3:1. */
@media (hover: hover) and (pointer: fine) {
  .rejilla-dias[data-vista="mes"] .ficha__quitar { opacity: 0; }
  .rejilla-dias[data-vista="mes"] .ficha:hover .ficha__quitar,
  .rejilla-dias[data-vista="mes"] .ficha__quitar:focus,
  .rejilla-dias[data-vista="mes"] .ficha__quitar:focus-visible { opacity: 1; }
}
.ficha__alerta { right: 30px; top: 3px; }

/* =============================================================================
   5 · EL HUECO VACÍO
   Deja de ser una caja de puntos que compite con las fichas y pasa a ser una
   línea de invitación. En el día vacío ocupa el centro; en el día con platos
   es un remate discreto al final.
   ========================================================================== */

.hueco:not(.lleno) {
  flex: 0 0 auto;
  border: 0;
  border-top: 1px dashed var(--cal-filete);
  border-radius: 0;
  background: none;
  min-height: 30px;
  justify-content: flex-start;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--cal-marca);
  padding: 6px 2px 2px;
  margin-top: auto;             /* se pega al fondo de la celda */
  transition: color .16s var(--cal-curva), border-color .16s var(--cal-curva);
}
.hueco:not(.lleno):hover,
.hueco:not(.lleno).encima {
  background: none;
  border-top-color: var(--cal-verde);
  border-style: dashed;
  color: var(--cal-verde-hondo);
}
/* En el día vacío la invitación es el contenido, no un remate. */
.dia:not(:has(.hueco.lleno)) .hueco:not(.lleno) {
  border-top: 0;
  margin-top: 0;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cal-tinta);
}
/* Soltar un plato: la celda entera se enciende, no solo el hueco. */
.dia.encima { background: #e9f2e2; }

/* =============================================================================
   6 · VISTA SEMANA · ESCRITORIO
   Siete columnas. Aquí sí se enseña kcal y precio por plato: son siete platos,
   no veintiocho, y es cuando el precio decide.
   ========================================================================== */

.rejilla-dias[data-vista="semana"] .dia { min-height: 190px; }

/* =============================================================================
   7 · VISTA MES · ESCRITORIO
   La rejilla 7×4 se queda —es la única forma de ver los 28 días de compromiso
   a la vez— pero la celda adelgaza: fuera el precio y las kcal por plato, que
   dentro de un mes son ruido. La cifra del día ya está en la cabecera y el
   dinero está en el panel. Medido: de 392 px de celda a ~150.
   ========================================================================== */

.rejilla-dias[data-vista="mes"] .dia { min-height: 132px; padding: 8px 9px 6px; }
.rejilla-dias[data-vista="mes"] .ficha__dato { display: none; }

/* LA BOTONERA DEL DÍA, A DIETA EN EL MES.
   Medido en el mes lleno: cada día eran ~110 px de comida y ~140 de botones —
   «+ añadir», «montar el mío» y «+ cena» por veinte días son SESENTA botones
   punteados, y la rejilla pesaba más de botonera que de platos. En el mes se
   quedan en una línea de texto plano, sin borde y a 24 px (el mínimo táctil
   de la 2.5.8); el borde y el aire los recuperan en la semana, que es donde
   se trabaja un día concreto. La cena ya puesta (fondo teal) no se toca:
   un estado no es un botón. */
.rejilla-dias[data-vista="mes"] .dia__mio,
.rejilla-dias[data-vista="mes"] .dia__cena {
  min-height: 24px;
  margin-top: 1px;
  padding: 2px 6px;
  border-color: transparent;
  font-size: .68rem;
}
.rejilla-dias[data-vista="mes"] .dia:hover .dia__mio,
.rejilla-dias[data-vista="mes"] .dia:hover .dia__cena,
.rejilla-dias[data-vista="mes"] .dia:focus-within .dia__mio,
.rejilla-dias[data-vista="mes"] .dia:focus-within .dia__cena { border-color: var(--linea); }
.rejilla-dias[data-vista="mes"] .dia__cena[data-puesta="si"] { border-color: var(--teal); }

/* El hueco hereda de la base un justify-content:center pensado para centrar
   el «Elegir plato» del día vacío. Con la ficha a línea de texto eso centraba
   CADA ficha por su cuenta: cuanto más corto el nombre, más adentro su barra
   y su dado — «Arroz Blanco» bailaba 10 px respecto a «Judías Verdes».
   MEDIDO: fotos a 19, 30 y 19 px del borde del día. En el mes, todo a la
   izquierda, que es donde el ojo ancla la columna. */
.rejilla-dias[data-vista="mes"] .hueco.lleno { justify-content: flex-start; }

/* Y las fichas, a línea de texto: fuera la cajita. En el mes hay hasta 60 a
   la vez y sesenta cajitas con borde son ruido; la barra de color del lado
   izquierdo (verde principal, ámbar guarnición) es lo único que informa y se
   queda. La caja entera vuelve en la semana, donde cada plato es tocable. */
.rejilla-dias[data-vista="mes"] .ficha {
  padding-top: 0;
  padding-bottom: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* En el mes la foto SÍ va, pero en miniatura: la tira de 54 px de la semana
   por veinte días serían tres pantallas solo de fotos, y quitarlas del todo
   dejaba el mes sin comida (pedido expreso: «en mensual, fotos más pequeñas
   para que quepan»). Un dado de 22 px al lado del nombre: se ve QUÉ es sin
   robar altura. La ficha pasa a fila para que foto y nombre convivan. */
.rejilla-dias[data-vista="mes"] .ficha {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* flex-start EXPRESO: la base es columna con justify-content:center (centra
     en vertical), y al girarla a fila ese centro pasa a ser HORIZONTAL — cada
     ficha centraba su contenido y «Arroz Blanco» bailaba 11 px respecto a
     «Judías Verdes». El eje cambia de significado con la dirección. */
  justify-content: flex-start;
  gap: 6px;
}
.rejilla-dias[data-vista="mes"] .ficha__foto {
  display: block;
  margin: 0;
  flex: none;
  order: -1;   /* la foto delante del nombre, aunque en el HTML vaya detrás */
}
.rejilla-dias[data-vista="mes"] .ficha__foto img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.rejilla-dias[data-vista="mes"] .ficha__nombre { min-width: 0; }
.rejilla-dias[data-vista="mes"] .ficha__nombre { font-size: .72rem; line-height: 1.15; }
.rejilla-dias[data-vista="mes"] .ficha[data-tipo="guarnicion"] .ficha__nombre,
.rejilla-dias[data-vista="mes"] .ficha[data-tipo="extra"] .ficha__nombre { font-size: .69rem; }
.rejilla-dias[data-vista="mes"] .dia__kcal { font-size: .92rem; }
/* Veintiocho «+ añadir» en teal son veintiocho llamadas a la vez. En el mes se
   quedan en gris y sólo se encienden en el día por el que se pasa. */
.rejilla-dias[data-vista="mes"] .hueco:not(.lleno) {
  min-height: 24px;
  font-size: .7rem;
  padding-top: 5px;
  /* Color, no opacidad: --cal-tinta da 5,8:1 sobre el papel; el mismo tono a
     opacidad .75 se queda en 3,39:1 y esto es TEXTO, que pide 4,5. */
  color: var(--cal-tinta);
}
.rejilla-dias[data-vista="mes"] .dia:hover .hueco:not(.lleno),
.rejilla-dias[data-vista="mes"] .hueco:not(.lleno):focus-visible {
  color: var(--cal-marca);
}

/* --- La repetición, dicha ------------------------------------------------
   La marca la pone cfg-02-calendario.js comparando el día con el mismo día de
   la semana anterior. Repetir NO es un defecto: es lo normal y es justo lo que
   hace comprable el mes. Se dice en pequeño para que lo que salte a la vista
   sean los días que SÍ cambian. */
.dia[data-cal-igual]::after {
  content: "= " attr(data-cal-igual);
  position: absolute;
  top: 9px;
  right: 9px;
  font-family: var(--tipo, Manrope, system-ui, sans-serif);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cal-tinta);   /* sin opacidad: es texto y tiene que pasar AA */
  pointer-events: none;
}
.dia { position: relative; }

/* =============================================================================
   8 · MÓVIL
   ========================================================================== */

@media (max-width: 760px) {

  /* --- La semana: un día por fila -------------------------------------
     Hoy son dos columnas de 150 px. En 150 px «Pechuga de Pollo Fit» se parte
     en dos líneas y la ✕ cae encima; y como la altura de fila la marca el día
     más lleno, el sábado con un plato deja un vacío del tamaño del viernes.
     Un día por fila: el nombre a la izquierda, los platos a la derecha, cada
     plato en una línea. Medido: de 1.216 px a ~800.
     ------------------------------------------------------------------- */
  .rejilla-dias[data-vista="semana"],
  .rejilla-dias[data-vista="mes"] { grid-template-columns: minmax(0, 1fr); }

  .dia {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: start;
    /* En el pager las filas son COMUNES a las cuatro semanas (así los lunes
       quedan alineados al deslizar), de modo que el sábado con un plato hereda
       la altura del sábado con tres. Sin align-content:start, el reparto por
       defecto estira las filas del día y el «+ añadir» se va al fondo del
       hueco. Con start, el sobrante se queda abajo y todo sigue junto. */
    align-content: start;
    column-gap: 10px;
    row-gap: 4px;
    padding: 10px 12px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--cal-filete-fino);
  }
  .rejilla-dias .dia:nth-child(7n) { border-right: 0; }
  .rejilla-dias[data-vista="semana"] .dia:last-child { border-bottom: 0; }
  .rejilla-dias[data-vista="semana"] .dia { min-height: 0; }

  .dia__nombre { grid-column: 1; margin-bottom: 0; }
  .dia__nombre > span:first-child { font-size: .6rem; }
  .dia__kcal { font-size: .95rem; }

  .hueco { grid-column: 2; }

  /* Cada plato en una línea: nombre a la izquierda, dato a la derecha.
     center y no baseline: la fila del primer plato la estira la cabecera del
     día (dos líneas, 36 px) y con baseline el texto se pegaba arriba dejando
     un hueco de 23 px justo debajo del principal. Medido. */
  .ficha {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 30px 3px 9px;
  }
  .ficha__nombre { flex: 1 1 auto; }
  .ficha__dato { flex: 0 0 auto; }
  .ficha__quitar { top: 50%; transform: translateY(-50%); }

  .hueco:not(.lleno) { min-height: 34px; padding: 7px 2px 3px; margin-top: 0; }
  .dia:not(:has(.hueco.lleno)) .hueco:not(.lleno) {
    min-height: 34px;
    justify-content: flex-start;
    text-align: left;
    border-top: 0;
  }

  /* --- El mes: cuatro semanas que se pasan de lado ---------------------
     grid-auto-flow: column con 7 filas reparte los días 0-6 en la primera
     columna, 7-13 en la segunda… es decir, UNA COLUMNA POR SEMANA, sin tocar
     el HTML: el índice del día ya lleva dentro la semana (d/7) y el día de la
     semana (d%7).
     Encima, scroll-snap nativo: se pasa con el dedo, con las flechas del
     teclado y tabulando (el navegador arrastra el foco). Cero JavaScript.
     El trozo que asoma de la semana siguiente es el «peek» del Snap Carousel
     de @ddoemonn: allí es padding + máscara sobre un track de motion; aquí es
     grid-auto-columns: calc(100% - 34px) y el scroller nativo.
     Medido: de 4.345 px de rejilla a ~830.
     ------------------------------------------------------------------- */
  .rejilla-dias[data-vista="mes"] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, auto);
    grid-auto-columns: calc(100% - 34px);
    grid-template-columns: none;
    column-gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: none;          /* cada semana lleva su propio papel */
    border: 0;
    border-radius: 0;
  }
  .rejilla-dias[data-vista="mes"]::-webkit-scrollbar { display: none; }

  /* Cada semana es una hoja: fondo y filete propios, para que se vea dónde
     empieza y dónde acaba. Como sólo puedo pintar celdas, la hoja se compone
     con los bordes de la primera y la última de cada columna. */
  .rejilla-dias[data-vista="mes"] .dia {
    background: var(--cal-papel);
    border-left: 1px solid var(--cal-filete);
    border-right: 1px solid var(--cal-filete);
    border-bottom: 1px solid var(--cal-filete-fino);
  }
  .rejilla-dias[data-vista="mes"] .dia:not(:has(.hueco.lleno)) { background: var(--cal-hueco); }
  .rejilla-dias[data-vista="mes"] .dia:nth-child(7n+1) {
    scroll-snap-align: start;
    border-top: 1px solid var(--cal-filete);
    border-radius: var(--cal-radio) var(--cal-radio) 0 0;
    padding-top: 0;
  }
  .rejilla-dias[data-vista="mes"] .dia:nth-child(7n) {
    border-bottom: 1px solid var(--cal-filete);
    border-radius: 0 0 var(--cal-radio) var(--cal-radio);
  }

  /* El rótulo de la semana. counter() sobre :nth-child(7n+1), que en un grid
     de columnas es siempre la celda de arriba de cada hoja. Sin JS y sin un
     solo elemento nuevo en el HTML. */
  .rejilla-dias[data-vista="mes"] { counter-reset: cal-semana; }
  .rejilla-dias[data-vista="mes"] .dia:nth-child(7n+1) { counter-increment: cal-semana; }
  .rejilla-dias[data-vista="mes"] .dia:nth-child(7n+1)::before {
    content: "Semana " counter(cal-semana) " de 4";
    grid-column: 1 / -1;
    margin: 0 -12px 8px;
    padding: 9px 12px 8px;
    background: var(--cal-marca);
    color: #fff;
    font-family: var(--tipo, Manrope, system-ui, sans-serif);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: var(--cal-radio) var(--cal-radio) 0 0;
  }
  /* La marca de repetición no cabe en la esquina de una fila: va al lado. */
  .dia[data-cal-igual]::after { position: static; grid-column: 1; margin-top: 2px; }
}

/* En pantallas muy estrechas el nombre del día se come el ancho útil. */
@media (max-width: 400px) {
  .dia { grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 8px; padding: 10px; }
  .ficha { padding-right: 28px; }
}

/* =============================================================================
   9 · FOCO, MOVIMIENTO Y PAPEL
   ========================================================================== */

/* El hueco es lo que se pulsa: su foco tiene que verse dentro de una celda
   sin caja. Anillo completo, no un filete. */
.hueco:focus-visible {
  outline: 3px solid var(--cal-verde-hondo);
  outline-offset: -2px;
  border-radius: var(--cal-radio);
  color: var(--cal-verde-hondo);
}
.ficha__quitar:focus-visible { outline: 3px solid var(--cal-verde-hondo); outline-offset: -1px; }

/* El pager horizontal se mueve solo cuando el usuario acepta movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .rejilla-dias[data-vista="mes"] { scroll-behavior: smooth; }
}

/* Un plan de comidas de verdad acaba pegado a la nevera. Que salga por la
   impresora sin cortarse por la mitad cuesta ocho líneas. */
@media print {
  .calendario { break-inside: auto; }
  .rejilla-dias[data-vista="mes"] {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  .dia { break-inside: avoid; }
  .ficha__quitar, .hueco:not(.lleno) { display: none !important; }
}