/* =============================================================================
   NUTRITUPP · cfg-03-movil.css — EL CONFIGURADOR EN UN TELÉFONO
   -----------------------------------------------------------------------------
   Se carga LA ÚLTIMA. No edita ninguna hoja ajena: solo pisa lo suyo, y todo
   vive dentro de @media, así que el escritorio sale de aquí exactamente igual
   que entró.

   MEDIDO A 390×844 (Playwright, iPhone 14 Pro), no supuesto:

     · Página con la semana montada .......... 17.495 px de alto
     · De los cuales, el catálogo ............ 13.851 px  (79 %)
     · «Confirmar plan» ...................... a 3.107 px del inicio (3,7 pantallas)
     · Del último día del calendario al total .. 996 px de nada
     · Plan mensual: la rejilla sola ......... 4.345 px  (página: 20.624 px)
     · Diálogo de añadir plato con el teclado
       virtual abierto (390×400) ............ 169 px de lista = 2 platos visibles
     · Botón de quitar un plato .............. 18×18 px
     · Alérgenos 47×32 · objetivos 52×35 · filtros 76×38 · acciones 67×36

   Tres decisiones, no quince:

     1. EL PRECIO DEJA DE ESTAR AL FINAL. Barra fija abajo con los platos, el
        total y el botón de cerrar. Y con la frase que vende el plan: cuántos
        días faltan para el descuento, o cuánto se ahorra ya. Es la única forma
        de que un descuento por compromiso se vea mientras uno se compromete.
     2. EL MES CABE EN UNA PANTALLA. La rejilla mensual pasa de rollo de
        4.345 px a un carrusel de cuatro semanas con scroll-snap, desvanecido
        en los bordes y puntos de semana. Técnica de peek + máscara robada al
        Snap Carousel de @ddoemonn (21st.dev): allí es Motion + un hook de 200
        líneas; aquí, mask-image y scroll-snap.
     3. EL CATÁLOGO SE PLIEGA. 13.851 px de tarjetas que ya no son el camino de
        compra —el <dialog> del hueco lo sustituyó— pasan a estar detrás de un
        botón. La página baja de 17.495 a ~3.700 px y 31 fotos lazy dejan de
        pedirse.

   Y una cuarta que no es una decisión sino una obligación: 44 px de toque en
   todo lo que se pulsa.

   COLISIÓN .plan: en /pedidos .plan son los botones del selector; en /nueva es
   la tarjeta grande. Esta hoja NUNCA escribe `.plan` a secas: siempre
   `#planes .plan`. Lo mío se llama .cfg-*.
   ========================================================================== */

/* =============================================================================
   0 · LO PROPIO
   ========================================================================== */

:root {
  --cfg-alto-barra: 4.5rem;         /* la barra de compra */
  --cfg-suelo: env(safe-area-inset-bottom, 0px);
  --cfg-verde-hondo: #3a7026;       /* el verde que SÍ puede llevar texto blanco
                                       (6,0:1). El #74B74E de marca da 2,4:1 y
                                       en un CTA eso no es un matiz. */
  --cfg-ambar-fondo: #fbf3e2;
  --cfg-ambar-tinta: #8a5a12;
  --cfg-radio: 12px;
  /* Desvanecido de borde: dice «hay más hacia el lado» sin una sola flecha. */
  --cfg-desvane: linear-gradient(to right,
      transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
  --cfg-curva: cubic-bezier(.22, .61, .36, 1);
}

/* Lo que esta capa inventa NO existe en escritorio. Se apaga aquí arriba, una
   sola vez, para que ningún @media se lo deje encendido por olvido: un <button>
   es inline-block por defecto y se colaba en el escritorio. */
.cfg-barra,
.cfg-semanas,
.cfg-plegar { display: none; }

/* =============================================================================
   1 · TOQUE — 44 px o no se toca
   Fuera de @media porque un portátil táctil también tiene dedos.
   ========================================================================== */

@media (pointer: coarse) {

  #objetivos button,
  #alergenos button,
  #filtros button,
  .elegir__filtros button,
  .acciones .boton {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* El aspa de quitar un plato medía 18×18. Se deja igual de discreta y se le
     cuelga un área de 44×46 que no se ve.
     El reparto es asimétrico a propósito: crece hacia DENTRO de su ficha (abajo
     e izquierda), no hacia fuera. Con inset simétrico el área se metía en la
     ficha vecina y —comprobado con elementFromPoint— la vecina, que va después
     en el DOM, se pintaba encima y se comía los últimos 11 px. */
  .ficha__quitar {
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    font-size: 17px;
    display: grid;
    place-items: center;
  }
  .ficha__quitar::after {
    content: "";
    position: absolute;
    inset: -10px -3px -14px -19px;
  }

  .elegir__cerrar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: -8px -8px 0 0;
  }

  .cierre__volver { min-height: 44px; padding: 4px 16px; }

  /* El botón del sistema depende de :hover para llenarse. En un dedo no hay
     hover: el CTA se quedaba como un círculo verde de 46 px pegado a la
     izquierda de una caja transparente de 314. Aquí nace lleno. */
  .btn:not(:disabled) .btn__circulo { width: 100%; }
  .btn:not(:disabled) .btn__texto { color: #fff; }
  .btn--verde:not(:disabled) .btn__circulo { background: var(--cfg-verde-hondo); }
  .btn:not(:disabled) .btn__flecha { color: #fff; }
}

/* =============================================================================
   2 · DE AQUÍ ABAJO, SOLO EL TELÉFONO
   ========================================================================== */

@media (max-width: 760px) {

  /* --- Ritmo: se recupera media pantalla antes de llegar al calendario ---- */
  .envoltorio { padding-inline: 16px; }
  .cabecera { padding: 18px 0 14px; }
  .cabecera p { margin-top: 10px; }

  /* --- Selector de plan -------------------------------------------------
     Medido: 407 px para tres tarjetas. Y el nombre y la descripción son dos
     <span> en línea, así que a ancho completo se leían pegados:
     «Pedido suelto Sin compromiso. Pides cuando te apetece.»
     ---------------------------------------------------------------------- */
  .planes { gap: 8px; margin: 16px 0 22px; }

  #planes .plan {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px 14px;
    border-radius: var(--cfg-radio);
  }
  #planes .plan .plan__nombre {
    grid-column: 1;
    font-size: 1.02rem;
    line-height: 1.2;
  }
  #planes .plan .plan__desc {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    font-size: .84rem;
    line-height: 1.35;
  }
  /* El <br> que separa nombre de insignia sobra cuando esto es una rejilla */
  #planes .plan br { display: none; }
  #planes .plan .plan__dto {
    /* position: static es la línea que hacía falta. Esta regla ya colocaba la
       insignia en la rejilla —columna 2, dos filas— pero cfg-06-venta.css:599
       la deja en `position: absolute; top: 13px; right: 14px`, y como aquí no
       se tocaba la propiedad, el absoluto sobrevivía: la colocación en rejilla
       no servía de nada y la insignia se sentaba encima del texto.

       Medido a 390 px, cinco solapes en las tres tarjetas:
         suelto  144×15 px sobre "El precio contra el que se compara…"
         semanal  58×13 px sobre "Desde 5 días planificados…"
         mensual  72×9  px sobre "Desde 20 días planificados…"

       Una regla que se anula sola es peor que no tenerla: parece que el
       problema está resuelto. */
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    align-self: center;
    font-size: .95rem;
    padding: 7px 12px;
  }
  /* Y la marca de "TU PLAN", que iba anclada a la esquina que acabamos de
     liberar, pasa a su propia fila. */
  #planes .plan .cfgv-cuenta { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  #planes .plan[aria-pressed="true"] {
    border-color: var(--teal, #145961);
    box-shadow: 0 0 0 1px var(--teal, #145961) inset;
  }

  /* --- Cabecera del calendario -----------------------------------------
     «Móntamelo tú» llena siete días de un toque: en un teléfono es el atajo
     que decide si alguien termina el plan o lo abandona. Deja de ser un
     botón secundario de 121×36.
     ---------------------------------------------------------------------- */
  .calendario { padding: 14px 12px 16px; border-radius: var(--cfg-radio); }
  .calendario__cabecera {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 12px;
  }
  .calendario__titulo { font-size: 1.1rem; align-self: center; }
  .acciones { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  #rellenar {
    background: var(--teal, #145961);
    border-color: var(--teal, #145961);
    color: #fff;
    font-size: .95rem;
  }
  #vaciar { padding-inline: 16px; }

  /* --- El día pasa de columna a RENGLÓN ---------------------------------
     A 390 px la rejilla iba a dos columnas de 150 px: un día ocupaba 293 px
     de alto y una semana 1.216. Como renglón, el día son ~92 px y la semana
     entra en una pantalla.
     ---------------------------------------------------------------------- */
  /* min-width: 0 en toda la cadena. Sin esto, el carrusel del mes (que sí
     desborda a propósito) empuja a .calendario —que es un item de rejilla con
     min-width:auto— y la página entera se ensancha a 530 px: el navegador móvil
     responde alejando el zoom y todo encoge. Medido. */
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .tablero > * { min-width: 0; }
  .calendario { min-width: 0; }
  .rejilla-dias { min-width: 0; }

  .rejilla-dias[data-vista="semana"],
  .rejilla-dias[data-vista="mes"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* planificador.css deja .dia en flex-direction: column. Sin volverlo a row,
     flex-wrap reparte los platos en COLUMNAS y el día crece a 381 px: peor que
     antes. Medido. */
  .dia {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    padding: 8px 9px 9px;
    min-height: 0;
    border-radius: 10px;
  }
  .dia__nombre {
    flex: 0 0 100%;
    font-size: .7rem;
    line-height: 1.3;
  }
  .dia__kcal { font-size: .74rem; }

  /* Cada plato del día es una pastilla que comparte el renglón. 84 px de base:
     los tres de un día (principal + dos guarniciones, que es como monta su
     carta) caben en una línea de 316 px junto al «+». El cuarto baja solo. */
  /* DOS FICHAS POR RENGLÓN COMO MUCHO.

     La base era 72 px, y con eso los tres platos de un día más el «+» entraban
     todos en el mismo renglón: 88 px por ficha. En 88 px no cabe ni el nombre
     ni «240 kcal · 11,95 €», así que se cortaban los dos.

     Con 110 el tercero ya no cabe y baja solo, y los dos de arriba se reparten
     el renglón entero: 162 px cada uno en vez de 88. El día crece un renglón
     cuando lleva tres platos, y ese es el precio: prefiero un calendario un
     poco más alto que uno donde pone «Salm Omel». */
  .hueco.lleno {
    flex: 1 1 110px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  /* EN COLUMNA, y esta es la declaración que faltaba.

     cfg-02-calendario.css:460 pone las fichas en fila —«nombre a la izquierda,
     dato a la derecha»— y está bien pensado PARA UNA FICHA A TODO EL ANCHO.
     Pero aquí las fichas van en columnas de 88 a 136 px, y ahí no caben el
     nombre y «416 kcal · 11,95 €» uno al lado del otro. Como el dato lleva
     `white-space: nowrap` y `flex: 0 0 auto`, no cede ni un píxel: el que se
     encogía era el nombre.

     MEDIDO: la caja del nombre quedaba en 24 px teniendo 22 de relleno para el
     aspa. Dos píxeles de texto. «Salmón Omega3» salía como «Salm Omel».

     No basta con reordenar aquí: hay que anular también el `align-items:
     center` y el `justify-content: space-between` de esa regla, o en columna
     centran y separan por lo alto. */
  .hueco.lleno .ficha {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6px 8px;
    gap: 1px;
    border-radius: 8px;
    min-height: 46px;
  }
  /* En una ficha de ~162 px la tira de 54 quedaba más alta que ancha de
     proporción: 46 px respeta el 222×164 de origen sin desperdiciar alto. */
  .hueco.lleno .ficha__foto img { height: 46px; border-radius: 6px; }
  /* EN EL MES, NO: ahí mandan los dados de 22 px de cfg-02. Esta regla y la
     del mes empatan a especificidad y esta hoja carga después, así que sin
     esta excepción el móvil enseñaba la tira de 46 en la vista mensual —
     lo cazó el guardián del mes, no un ojo. */
  .rejilla-dias[data-vista="mes"] .hueco.lleno .ficha {
    flex-direction: row;
    align-items: center;
  }
  .rejilla-dias[data-vista="mes"] .hueco.lleno .ficha__foto img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }
  /* El hueco del aspa se le quita al NOMBRE, no a la ficha entera: así la línea
     de kcal y precio aprovecha los 83 px completos. Con padding en la ficha, el
     aspa se comía la última letra de «Pechuga», «Ensalada» y «Vegetales». */
  .ficha__nombre {
    padding-right: 22px;
    font-size: .76rem;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ficha__dato { font-size: .67rem; }
  .ficha__alerta { right: 22px; }

  /* El hueco vacío: si el día está vacío ocupa el renglón entero y lo dice;
     si ya hay platos, se encoge a un «+» de 46 px y no roba sitio. */
  .dia .hueco:not(.lleno) {
    flex: 0 0 46px;
    min-height: 46px;
    align-self: stretch;
    font-size: 0;
    border-radius: 8px;
  }
  .dia .hueco:not(.lleno)::before {
    content: "+";
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 600;
    color: var(--teal, #145961);
  }
  .dia:not(:has(.hueco.lleno)) .hueco:not(.lleno) {
    flex: 1 1 100%;
    font-size: .8rem;
    min-height: 46px;
  }
  .dia:not(:has(.hueco.lleno)) .hueco:not(.lleno)::before { content: none; }

  /* --- EL MES, EN CUATRO SEMANAS ----------------------------------------
     grid-auto-flow: column con siete filas reparte los 28 días en cuatro
     columnas: cada columna ES una semana. Cada columna mide el ancho útil
     menos un pico, para que asome la siguiente. Y scroll-snap para que pare
     donde tiene que parar.
     ---------------------------------------------------------------------- */
  .rejilla-dias[data-vista="mes"] {
    grid-template-columns: none;
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 26px);
    gap: 8px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
    padding-bottom: 2px;
    /* El desvanecido del Snap Carousel: el borde no corta, se apaga */
    -webkit-mask-image: var(--cfg-desvane);
    mask-image: var(--cfg-desvane);
  }
  .rejilla-dias[data-vista="mes"]::-webkit-scrollbar { display: none; }
  .rejilla-dias[data-vista="mes"] > .dia { scroll-snap-align: start; }

  /* Puntos de semana (los pinta cfg-03-movil.js). Barras, no círculos: la
     activa se estira, como en el Snap Carousel. */
  .cfg-semanas {
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
  }
  .rejilla-dias[data-vista="mes"] + .cfg-semanas { display: flex; }
  .cfg-semanas__punto {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    min-width: 44px;
    min-height: 44px;           /* 44 px de toque sin engordar el dibujo */
    padding: 0 4px;
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 0;
  }
  .cfg-semanas__punto::before {
    content: "";
    display: block;
    width: 16px;
    height: 5px;
    border-radius: 3px;
    background: var(--linea, #dcd2c4);
    transition: width .32s var(--cfg-curva), background .32s var(--cfg-curva);
  }
  .cfg-semanas__punto[aria-current="true"]::before {
    width: 30px;
    background: var(--teal, #145961);
  }

  /* --- Panel: menos caja, más dato --------------------------------------- */
  .tablero { gap: 16px; }
  .panel { gap: 12px; }
  .tarjeta { padding: 14px; border-radius: var(--cfg-radio); }
  .objetivo { gap: 8px; }
  .alergenos { gap: 8px; }
  .cifra__valor { font-size: 2rem; }

  /* Con la barra de abajo puesta, el botón del panel es el segundo camino,
     no el primero: se queda, pero no compite. */
  .cfg-con-barra #confirmar { min-width: 0; }

  /* --- DIÁLOGO DE AÑADIR PLATO ------------------------------------------
     Medido con el teclado virtual abierto (390×400, que es lo que queda de un
     iPhone cuando el teclado sube): la lista se reducía a 169 px —dos platos—
     y la tira de filtros se cortaba por la mitad de las letras. El cromo de
     la cabecera se comía 287 px de 844.
     ---------------------------------------------------------------------- */
  .elegir {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;          /* dvh, no vh: con la barra del navegador sale bien */
    border-radius: 18px 18px 0 0;
    margin: auto 0 0;
  }
  .elegir__caja { outline: none; }
  /* Asidero: dice «esto se cierra tirando hacia abajo» y separa del pulgar */
  .elegir__caja::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--linea, #dcd2c4);
    margin: 8px auto 2px;
  }
  .elegir__cabecera { padding: 6px 16px 8px; align-items: center; }
  .elegir__titulo { font-size: 1.05rem; }
  .elegir__dia { font-size: .84rem; }
  .elegir__buscar { padding: 0 16px 8px; }
  .elegir__buscar input { padding: 12px 14px; }  /* 16 px de fuente: iOS no hace zoom */
  .elegir__filtros {
    padding: 0 16px 10px;
    -webkit-mask-image: var(--cfg-desvane);
    mask-image: var(--cfg-desvane);
  }
  .elegir__lista {
    padding: 4px 10px calc(14px + var(--cfg-suelo));
    scroll-padding-block: 8px;
  }
  .opcion { padding: 9px 8px; }
  .opcion__mas { width: 34px; height: 34px; }

  /* Si la pantalla se queda sin alto (teclado abierto), lo primero que sobra
     son los filtros: el buscador ya filtra, y así la lista recupera 51 px. */
  @media (max-height: 560px) {
    .elegir { max-height: 96dvh; }
    .elegir__filtros { display: none; }
    .elegir__caja::before { margin-top: 6px; }
    .elegir__cabecera { padding-bottom: 4px; }
  }

  /* --- Cierre de la venta ------------------------------------------------ */
  .cierre { width: calc(100vw - 20px); max-height: 92dvh; overflow-y: auto; }
  .cierre__caja { padding: 20px 18px calc(18px + var(--cfg-suelo)); gap: 10px; }
  .cierre__titulo { font-size: 1.3rem; }
  .cierre__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cierre__acciones .btn-simple { min-height: 46px; }
  #cierreEnviar { grid-column: 1 / -1; }

  /* --- CATÁLOGO PLEGADO --------------------------------------------------
     79 % de la página para algo que ya no es el camino de compra.
     ---------------------------------------------------------------------- */
  .catalogo { margin: 26px 0 30px; }
  .catalogo h2 { font-size: 1.3rem; }

  .cfg-plegar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--teal, #145961);
    background: var(--papel, #fff);
    border: 1.5px solid var(--linea, #dcd2c4);
    border-radius: var(--cfg-radio);
    cursor: pointer;
    text-align: left;
  }
  .cfg-plegar__pista { color: var(--texto, #556354); font-weight: 400; font-size: .88rem; }
  /* La muestra de la carta: cuatro platos solapados delante del texto. El
     texto es quien crece (flex en el span de en medio via el hueco del
     space-between); las minis y la flecha van fijas. */
  .cfg-plegar__minis { display: inline-flex; flex: 0 0 auto; }
  .cfg-plegar__mini {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgb(7 52 57 / .18);
  }
  .cfg-plegar__mini + .cfg-plegar__mini { margin-left: -10px; }
  .cfg-plegar > span:not(.cfg-plegar__minis):not(.cfg-plegar__flecha) { flex: 1 1 auto; }
  .cfg-plegar__flecha {
    flex: 0 0 auto;
    width: 12px; height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -2px;
    transition: rotate .28s var(--cfg-curva), translate .28s var(--cfg-curva);
  }
  .cfg-plegar[aria-expanded="true"] .cfg-plegar__flecha { rotate: -135deg; translate: 0 2px; }

  .catalogo[data-cfg-plegado="si"] #filtros,
  .catalogo[data-cfg-plegado="si"] #platos { display: none; }

  .platos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .plato__cuerpo { padding: 9px 10px 11px; gap: 4px; }
  .plato__nombre { font-size: .85rem; }
  .plato__desc { font-size: .74rem; }
  .plato__alerg { font-size: .7rem; }

  /* --- Avisos: que no floten sobre la barra ------------------------------ */
  /* --cfg-alto-barra lo mide cfg-03-movil.js con un ResizeObserver: la barra
     mide 72 px pelada y 100 con la frase del descuento, y el aviso flotante no
     puede caer encima. El valor ya incluye el área segura del iPhone. */
  /* El desplazamiento es en píxeles, no en porcentaje: quien esconde el aviso
     es la opacidad (planificador.css:642). Con `160%` sobre un aviso vacío de
     22 px se quedaba plantado en mitad de la pantalla. */
  .brindis {
    bottom: calc(var(--cfg-alto-barra) + 12px);
    left: 12px;
    right: 12px;
    max-width: none;
    transform: translateY(10px);
    text-align: center;
  }
  .brindis.visible { transform: translateY(0); }

  .cfg-con-barra body { padding-bottom: var(--cfg-alto-barra); }
}

/* =============================================================================
   3 · LA BARRA DE COMPRA
   ========================================================================== */

@media (max-width: 760px) {
  .cfg-barra {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background: var(--papel, #fff);
    border-top: 1px solid var(--linea, #dcd2c4);
    box-shadow: 0 -2px 6px rgba(7, 52, 57, .05), 0 -14px 34px -20px rgba(7, 52, 57, .32);
    padding: 0 12px calc(10px + var(--cfg-suelo));
    transform: translateY(110%);
    transition: transform .34s var(--cfg-curva);
  }
  .cfg-barra[data-visible="si"] { transform: translateY(0); }
  /* Con un diálogo abierto la barra sobra: el diálogo ya es el foco */
  body:has(dialog[open]) .cfg-barra { transform: translateY(110%); }

  /* La frase que vende el plan. Ámbar cuando falta compromiso, verde cuando
     ya está ganado. No inventa nada: repite lo que el panel ya dice. */
  .cfg-barra__nudge {
    margin: 0 -12px 8px;
    padding: 7px 14px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    background: var(--cfg-ambar-fondo);
    color: var(--cfg-ambar-tinta);
  }
  .cfg-barra__nudge[data-tono="gana"] {
    background: #e8f3e0;
    color: #2f5c1c;
  }
  .cfg-barra__nudge[hidden] { display: none; }

  .cfg-barra__fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
  }
  .cfg-barra__nudge:not([hidden]) + .cfg-barra__fila { padding-top: 0; }

  .cfg-barra__resumen {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 0;
    border: 0;
    background: none;
    padding: 0 4px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
  }
  .cfg-barra__platos {
    font-size: .74rem;
    color: var(--texto, #556354);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
  }
  .cfg-barra__total {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--titulo, #161915);
    font-variant-numeric: tabular-nums;
  }
  .cfg-barra__antes {
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto, #556354);
    text-decoration: line-through;
    margin-left: 7px;
    vertical-align: 2px;
  }

  .cfg-barra__cta {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--cfg-verde-hondo);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s var(--cfg-curva), transform .12s var(--cfg-curva);
  }
  .cfg-barra__cta:active { transform: scale(.97); }
  .cfg-barra__cta:disabled { background: var(--linea-fina, #ece6dc); color: var(--texto, #556354); cursor: not-allowed; }
}

/* =============================================================================
   4 · ACCESIBILIDAD
   ========================================================================== */

/* El foco tiene que verse también sobre las superficies nuevas */
.cfg-barra__cta:focus-visible,
.cfg-barra__resumen:focus-visible,
.cfg-semanas__punto:focus-visible,
.cfg-plegar:focus-visible {
  outline: 3px solid var(--verde, #74b74e);
  outline-offset: 2px;
}

/* Solo para lectores de pantalla: el «Semana 2 de 4» que anuncia el carrusel */
.cfg-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cfg-barra,
  .cfg-barra__cta,
  .cfg-semanas__punto::before,
  .cfg-plegar__flecha { transition: none !important; }
  .rejilla-dias[data-vista="mes"] { scroll-behavior: auto !important; }
}