/* =============================================================================
   NUTRITUPP · cfg-06-venta.css — EL CONFIGURADOR, VENDIENDO
   -----------------------------------------------------------------------------
   Se carga LA ÚLTIMA. No edita planificador.css ni nueva-*.css: las anula donde
   hace falta y en ningún otro sitio.

   QUÉ HE MEDIDO ANTES DE ESCRIBIR NADA (Chromium, /pedidos, 1440 y 390 px)

     · Con la semana montada («Móntamelo tú»): 19 platos, 121,70 €, total
       115,62 €, ahorro 6,09 €. Pulso «Plan mensual» y el total SUBE a 121,70 €
       mientras la pantalla sigue diciendo «Descuento plan mensual (10%)». El
       botón que anuncia el mayor descuento es el que te cobra 6,08 € más.
     · #filaDto tiene el atributo hidden puesto y computa display:flex, porque
       .precio__fila {display:flex} gana al [hidden]{display:none} del navegador.
       O sea: la fila de descuento NO SE OCULTA NUNCA. La página abre en blanco
       diciendo «Descuento plan semanal (5%) −0,00 €».
     · Monto el MES entero: 76 platos, 430,02 €, ahorro 47,78 €. Un clic en
       «Plan semanal» y quedan 19 platos y 115,62 €. Sin preguntar, sin deshacer
       y ya escrito en localStorage: 314,40 € de carrito destruidos por un clic.
     · Jerarquía: #total 27,2 px; #ahorro 12,48 px y del MISMO negro (#161915)
       que el aviso legal de alérgenos, tercero en una pila de cuatro <p class=
       "aviso"> idénticos. Lo único que justifica el plan está maquetado como
       letra pequeña.
     · A 390 px: del calendario (896 px) al total (6.181 px) hay 5.285 px, seis
       pantallas y cuarto. El único elemento fixed de la página es #brindis.
     · --texto, --verde-osc, --teal-osc y --rojo NO ESTÁN DECLARADOS EN NINGÚN
       SITIO, y planificador.css los usa 40 veces. Y `body{--teal:var(--teal,…)}`
       es un ciclo, que por spec es inválido al computar: --teal también muere.
       Consecuencias medidas: la fila del descuento no es verde sino negra, el
       aviso «Plan montado» es blanco sobre crema (invisible), el pie es
       #cfe3e0 sobre transparente (invisible) y el chip de alérgeno pulsado es
       blanco sobre nada. La página no tiene jerarquía porque no tiene tinta.

   TÉCNICA ROBADA Y PORTADA A MANO (nada de React, nada de librerías)
     · nueva-03-planes.css — la barra a escala: qué parte pagas y qué parte no,
       y el trozo que no pagas es el único verde. Aquí es la misma idea pero
       alimentada por el CARRITO REAL, no por un precio de folleto.
     · Billing Upgrade Prompt (@preetsuthar17, 21st.dev) — el aviso de subida de
       plan se dispara por un MOTIVO («usage_limit»: te falta X para el límite),
       lleva el ahorro en dinero al lado del precio y el importe va dentro del
       propio botón. Allí es React + shadcn Card/Badge; aquí, un <p> y un
       <button> que pulsa el selector que ya existe.
     · HeroUI Meter (@hero_ui) — el progreso hacia un límite como <meter> con
       umbrales de color y salida formateada. Aquí, role="progressbar" con
       aria-valuenow y un relleno por variable CSS.
     · Feature Comparison (@7ovr, vía nueva-03) — una sola columna destacada.

   LA COLISIÓN DE .plan, RESUELTA
     .plan significa dos cosas: en /nueva es la tarjeta que se apila, en
     /pedidos son los botones del selector. TODO lo que hay aquí sobre el
     selector cuelga de `#planes .plan`, que es 1 id + 1 clase. Cualquier regla
     de nueva-03/05/06 sobre `.plan` a secas (1 clase) pierde por especificidad,
     se cargue antes o después. Así que si mañana alguien enlaza nueva-03 en
     pedidos.html, este fichero sigue en pie sin renombrar nada y sin tocar
     estado.plan ni PLANES[estado.plan], que son propiedades y no clases.
     Mis elementos propios llevan prefijo .cfgv- y no existen en /nueva.
   ========================================================================== */

/* =============================================================================
   0 · LA TINTA QUE FALTABA
   No invento colores: alias hacia los tokens que el sistema SÍ declara, para
   que si otro agente cambia --tinta o --teal, esto le siga. Los literales son
   solo el respaldo del var().
   El puente por :root es obligatorio: en `body` no se puede escribir
   `--teal: var(--teal)` porque es el ciclo que ya rompió la página.
   ========================================================================== */

:root {
  --cfgv-teal:  var(--teal, #145961);
  --cfgv-linea: var(--linea, #DCD2C4);
}

body {
  /* el gris de texto del sistema, que es como se llama de verdad */
  --texto: var(--tinta, #556354);
  --teal: var(--cfgv-teal);
  --linea: var(--cfgv-linea);
  --teal-osc: var(--teal-hondo, #073439);
  /* verde que pasa AA sobre crema: #74B74E da 2,3:1 y no vale para texto.
     #3a7026 da 6,6:1 sobre #EFEBE1. Es el mismo de nueva-05 (--luz-verde-hondo). */
  --verde-osc: #3a7026;
  /* el rojo que había en los rgba() de planificador.css (#CE3939) da 4,14:1
     sobre crema y NO pasa AA. Éste da 5,5:1 sobre crema y 6,5:1 en blanco. */
  --rojo: #B3261E;

  --cfgv-radio: 18px;
  --cfgv-curva: cubic-bezier(.22, 1, .36, 1);
}

/* Grano de papel de /nueva, en una sola copia y solo donde hay tinta oscura:
   sobre el teal el degradado plano se bandea, y 380 bytes lo arreglan. */
:root {
  --cfgv-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

/* =============================================================================
   1 · EL BUG QUE COBRA DE MÁS
   Una línea. La fila del descuento vuelve a poder ocultarse.
   Sin esto la página abre anunciando un descuento de −0,00 € y, en el plan
   mensual sin los 20 días, anuncia un 10% que no está aplicando.
   ========================================================================== */

.precio__fila[hidden],
.precio__fila--dto[hidden] { display: none; }

/* =============================================================================
   2 · EL SELECTOR DE PLAN — LA ESCALERA DEL AHORRO
   Deja de ser tres cajas blancas iguales con un porcentaje. Es una escalera:
   el suelto es LA REGLA (transparente, un filete), la semana el escalón
   (crema honda) y el mes el destino (el único bloque oscuro de la página,
   como en /nueva). El % se traduce a euros del carrito que ya tienes.
   ========================================================================== */

#planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(24px, 3vw, 38px);
  align-items: stretch;
}

#planes .plan {
  --sobre: var(--titulo, #161915);
  --suave: var(--texto);
  --pista: rgba(22, 25, 21, .12);
  --pagado: var(--cfgv-teal);

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 2px;
  padding: clamp(14px, 1.2vw, 18px) clamp(16px, 1.6vw, 22px) clamp(13px, 1.2vw, 17px);
  border: 1px solid transparent;
  border-radius: var(--cfgv-radio);
  background: var(--crema-honda, #E5DCD0);
  color: var(--sobre);
  box-shadow: none;
  transition: background .22s var(--cfgv-curva),
              box-shadow .22s var(--cfgv-curva),
              transform .22s var(--cfgv-curva);
}
/* la caja blanca con sombra y el salto al pasar por encima: fuera. En /nueva
   no hay ni una caja blanca ni un solo translateY de hover. */
#planes .plan:hover { transform: none; border-color: transparent; }

/* 2.1 · la regla: el pedido suelto no es una oferta, es contra qué se compara */
#planes .plan[data-plan="suelto"] {
  background: transparent;
  border-color: var(--cfgv-linea);
}

/* 2.2 · el destino: el mes es el único bloque oscuro, igual que en /nueva */
#planes .plan[data-plan="mensual"] {
  --sobre: #ffffff;
  --suave: #b9cbc7;              /* 8,0:1 sobre el teal */
  /* El carril baja y la parte pagada sube. Medido sobre el teal: con el carril
     al 20 % y lo pagado al 55 %, la barra daba 2,19:1 contra su propio carril
     —por debajo del 3:1 que necesita algo que porta información— y en pantalla
     se leía como una mancha oscura sin forma. Ahora, 4,4:1. */
  --pista: rgba(255, 255, 255, .12);
  --pagado: rgba(255, 255, 255, .78);
  background: var(--cfgv-teal);
  box-shadow: 0 18px 40px -28px rgba(7, 52, 57, .85);
}
#planes .plan[data-plan="mensual"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--cfgv-grano);
  background-size: 140px 140px;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}

/* 2.3 · el elegido. No basta con el color: lleva un rótulo, porque el estado
   no puede depender solo de un tono (y aria-pressed ya lo dice a la voz). */
#planes .plan[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--cfgv-teal);
  border-color: transparent;
}
#planes .plan[data-plan="mensual"][aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--crema, #EFEBE1),
              0 18px 40px -28px rgba(7, 52, 57, .85);
}
#planes .plan[aria-pressed="true"]::after {
  content: "Tu plan";
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--suave);
}

/* 2.4 · tipografía del selector, en el idioma de /nueva */
#planes .plan__nombre {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  letter-spacing: -.022em;
  line-height: 1.05;
  color: var(--sobre);
  order: 2;
}
#planes .plan__desc {
  color: var(--suave);
  font-size: .88rem;
  line-height: 1.45;
  margin-top: 4px;
  max-width: 30ch;
  order: 3;
}
/* El <br> que hay en el marcado entre .plan__desc y .plan__dto sobra en cuanto
   esto es una rejilla: dejaría una fila fantasma. */
#planes .plan br { display: none; }

/* el porcentaje deja de ser el protagonista: es un rótulo, y el euro manda */
#planes .plan__dto {
  order: 1;
  justify-self: start;
  margin: 0 0 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--verde, #74B74E);
  /* blanco sobre #74B74E da 2,4:1. El teal hondo da 5,5:1. */
  color: var(--teal-hondo, #073439);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
#planes .plan__dto--vacio {
  background: transparent;
  border: 1px solid var(--cfgv-linea);
  color: var(--suave);
  font-weight: 700;
}

/* =============================================================================
   3 · LO QUE AÑADE EL JS DENTRO DE CADA PLAN
   La medida (barra a escala) y una línea que habla en euros del carrito real.
   Sin JS no aparece nada y el selector sigue siendo un selector: lo de arriba
   se sostiene solo.
   ========================================================================== */

.cfgv-medida {
  order: 4;
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--suave) 28%, transparent);
}

.cfgv-pista {
  display: flex;
  gap: 3px;
  height: 9px;
  border-radius: 999px;
  background: var(--pista);
  overflow: hidden;
}
.cfgv-pagado,
.cfgv-ahorrado { display: block; height: 100%; border-radius: 999px; }
/* el estado de reposo ya es verdad: si el JS no llegara, la barra dice
   «lo pagas todo», que es lo que pasa sin descuento */
.cfgv-pagado   { background: var(--pagado);            width: var(--cfgv-paga, 100%); }
/* El trozo verde es LO QUE TE AHORRAS: es el argumento entero de la escalera de
   planes, y medía 12 px en el semanal con 1,72:1 contra su carril — o sea que
   no se veía. Con un mínimo de ancho y el verde oscuro de marca se distingue
   sin dejar de ser verde. */
.cfgv-ahorrado {
  background: var(--verde-osc, #3a7026);
  width: var(--cfgv-ahorra, 0%);
}
/* El ancho mínimo SOLO donde hay descuento. Lo puse con
   `:not([style*="width: 0"])` y no valía: el ancho llega por la variable
   --cfgv-ahorra, no por un `width` en línea, así que la regla se aplicaba
   también al pedido suelto — que NO tiene descuento — y le pintaba 18 px de
   barra verde de ahorro. Una barra invisible es un problema; una barra que
   miente es otro. */
#planes .plan:not([data-plan="suelto"]) .cfgv-ahorrado { min-width: 18px; }

/* Sobre la tarjeta oscura, el verde de marca sobre un carril casi negro se
   queda en 2,42:1. Un verde claro sube a 6:1 y sigue siendo el verde de casa. */
#planes .plan[data-plan="mensual"] .cfgv-ahorrado { background: #a8dd85; }
.cfgv-pista--anima .cfgv-pagado,
.cfgv-pista--anima .cfgv-ahorrado { transition: width .5s var(--cfgv-curva); }

/* La barra enseña la PROMESA del plan (su 5% o su 10%); el tono dice si ya
   está ganada. Si enseñara la realidad, el plan del mes con siete días saldría
   con la barra entera pagada y parecería peor que el semanal, que es lo
   contrario de la verdad. Ganado = verde macizo; pendiente = verde apagado y
   con el filete a rayas, que se lee como «esto todavía no es tuyo». */
.cfgv-medida[data-ganado="no"] .cfgv-ahorrado {
  opacity: .40;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 5px);
}
.cfgv-medida[data-ganado="nada"] .cfgv-pista { opacity: .55; }

.cfgv-cuenta {
  display: block;
  margin-top: 9px;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
}
.cfgv-cuenta b {
  color: var(--sobre);
  font-weight: 800;
}
/* el cuadradito verde ata la frase al trozo verde de la barra */
.cfgv-cuenta--ahorro::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--verde, #74B74E);
}

/* El precio compuesto de /nueva: entero grande, céntimos y € en volado.
   Aquí lo escribe mi JS en MIS nodos; no reescribo ni un nodo de texto suyo,
   que es lo que garantiza que diez agentes no se pisen. */
.cfgv-eur {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.cfgv-eur__cent {
  font-size: .62em;
  vertical-align: .42em;
  margin-left: .03em;
  letter-spacing: -.01em;
}
.cfgv-eur__mon {
  font-size: .56em;
  font-weight: 700;
  vertical-align: .48em;
  margin-left: .14em;
  opacity: .76;
}

/* =============================================================================
   4 · EL AVISO DE SUBIDA DE PLAN
   Billing Upgrade Prompt portado: se dispara por un motivo, dice el dinero y
   lleva el importe dentro del botón. Va justo debajo del selector, que es
   donde está la decisión, y no en la columna de la derecha.
   ========================================================================== */

.cfgv-subir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  flex-wrap: wrap;
  margin: -14px 0 clamp(24px, 3vw, 34px);
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--verde, #74B74E) 45%, var(--cfgv-linea));
  border-radius: 14px;
  background: color-mix(in srgb, var(--verde, #74B74E) 9%, transparent);
}
.cfgv-subir[hidden] { display: none; }
.cfgv-subir__texto {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--texto);
  max-width: 62ch;
}
.cfgv-subir__texto b { color: var(--titulo, #161915); font-weight: 800; }
.cfgv-subir__btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cfgv-teal);
  color: #fff;                     /* 7,98:1 */
  cursor: pointer;
  transition: background .18s var(--cfgv-curva);
}
.cfgv-subir__btn:hover { background: var(--teal-hondo, #073439); }

/* =============================================================================
   5 · LA TARJETA DEL PEDIDO — QUE EL AHORRO DEJE DE SER LETRA PEQUEÑA
   Medido: #ahorro salía a 12,48 px y en el mismo negro que el aviso legal,
   tercero en una pila de cuatro párrafos idénticos.
   ========================================================================== */

/* el total, del tamaño de una cifra y no de un subtítulo */
.precio__total strong {
  font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.5rem);
  letter-spacing: -.035em;
  line-height: 1;
}
.precio__fila { color: var(--texto); }
/* ahora sí es verde: --verde-osc estaba muerto */
.precio__fila--dto { color: var(--verde-osc); font-weight: 700; }

/* 5.1 · el ahorro sube de rango: sale de la pila de avisos. Va justo debajo
   del botón, que es donde ya lo pone el marcado; lo que cambia es que deja de
   parecer una nota al pie. */
#ahorro {
  margin-top: 12px;
  padding: 11px 13px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--verde, #74B74E) 14%, transparent);
  color: var(--verde-osc);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
#ahorro[hidden] { display: none; }

/* 5.2 · «te faltan N días» deja de ser una regañina amarilla y se convierte en
   un progreso hacia un premio, con el premio en euros. El relleno lo escribe
   el JS en --cfgv-progreso; el texto lo sigue escribiendo planificador.js y
   yo no lo toco. */
#faltaDescuento {
  position: relative;
  margin-top: 12px;
  padding: 12px 13px 14px;
  border: 1px solid color-mix(in srgb, var(--cfgv-teal) 24%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cfgv-teal) 7%, transparent);
  color: var(--titulo, #161915);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.4;
}
#faltaDescuento[hidden] { display: none; }

.cfgv-meter {
  display: block;
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(22, 25, 21, .12);
  overflow: hidden;
}
.cfgv-meter__relleno {
  display: block;
  height: 100%;
  width: var(--cfgv-progreso, 0%);
  border-radius: 999px;
  background: var(--cfgv-teal);
  transition: width .45s var(--cfgv-curva);
}
.cfgv-meter__pie {
  display: block;
  margin-top: 7px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.cfgv-meter__pie b { color: var(--verde-osc); font-weight: 800; }

/* 5.3 · y lo legal baja al tamaño de lo legal, que es donde tiene que estar:
   se lee, pero no compite con el precio. */
#avisoEstimado,
.tarjeta .aviso:not(#ahorro):not(#faltaDescuento) {
  color: var(--texto);
  font-size: .76rem;
  line-height: 1.5;
}

/* =============================================================================
   6 · LA BARRA DE VENTA EN MÓVIL
   Medido a 390 px: 5.285 px entre el calendario y el total, y nada fijo salvo
   el aviso. El precio y el botón dejan de estar a seis pantallas.
   Sale solo por debajo de 1040 px, que es justo donde .panel deja de ser
   sticky y el total desaparece de la vista.
   ========================================================================== */

.cfgv-barra { display: none; }

/* De 761 px PARA ARRIBA, sin tope: el botón de pagar va siempre flotante
   también en escritorio (pedido expreso). Antes moría en 1040 y en pantalla
   grande el total vivía solo en el panel: te ibas a la carta y el botón
   desaparecía. Por debajo de 760 sigue mandando la barra móvil de cfg-03
   (.cfg-barra): el relevo por rangos evita las DOS barras apiladas que hubo
   — medido: ambas a top 851, y los toques se los quedaba la de encima. */
@media (min-width: 761px) {
  .cfgv-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--crema, #EFEBE1);
    border-top: 1px solid var(--cfgv-linea);
    box-shadow: 0 -10px 30px -24px rgba(22, 25, 21, .8);
    /* entra desde abajo cuando hay algo que cobrar */
    transform: translateY(0);
    transition: transform .3s var(--cfgv-curva);
  }
  /* [hidden] no la borra de golpe: se desliza. La visibilidad se apaga AL
     TERMINAR el viaje, que es lo que la saca también del árbol accesible: una
     barra fuera de pantalla que el lector de pantalla sigue leyendo es peor
     que no tenerla. */
  .cfgv-barra[hidden] {
    display: flex;
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .3s var(--cfgv-curva), visibility 0s .3s;
  }
  /* el aviso flotante se sube encima de la barra en vez de quedar debajo */
  .brindis { bottom: calc(24px + var(--cfgv-barra-alto, 68px)); }
  /* y el pie deja de quedar tapado por la barra */
  body { padding-bottom: var(--cfgv-barra-alto, 68px); }
}

.cfgv-barra__cifra { display: grid; gap: 1px; min-width: 0; }
.cfgv-barra__total {
  font-size: 1.6rem;
  color: var(--titulo, #161915);
}
.cfgv-barra__nota {
  font-size: .78rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfgv-barra__nota b { color: var(--verde-osc); font-weight: 800; }
.cfgv-barra__btn {
  flex: 0 0 auto;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  /* 48 px de alto: el mínimo que se puede pulsar con el pulgar sin apuntar */
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--verde-osc);
  color: #fff;                     /* 6,6:1 */
  cursor: pointer;
}
.cfgv-barra__btn:hover { background: var(--teal-hondo, #073439); }

/* =============================================================================
   7 · EL CLIENTE QUE VUELVE
   Dos tiras, mismo tratamiento: un aviso con dos salidas y ninguna caja
   blanca. Una recupera el plan de la última vez; la otra deshace el borrado
   de días al bajar de plan.
   ========================================================================== */

.cfgv-tira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--cfgv-linea);
  background: var(--crema-honda, #E5DCD0);
}
.cfgv-tira[hidden] { display: none; }
.cfgv-tira--rescate {
  border-color: color-mix(in srgb, var(--rojo) 40%, var(--cfgv-linea));
  background: color-mix(in srgb, var(--rojo) 7%, transparent);
}
.cfgv-tira__texto {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--texto);
}
.cfgv-tira__texto b { color: var(--titulo, #161915); font-weight: 800; }
.cfgv-tira__botones { display: flex; gap: 8px; flex-wrap: wrap; }
.cfgv-tira__si,
.cfgv-tira__no {
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid var(--cfgv-teal);
  background: transparent;
  color: var(--cfgv-teal);
}
.cfgv-tira__si { background: var(--cfgv-teal); color: #fff; border-color: var(--cfgv-teal); }
.cfgv-tira__si:hover { background: var(--teal-hondo, #073439); }
.cfgv-tira__no { border-color: transparent; color: var(--texto); }
.cfgv-tira__no:hover { color: var(--titulo, #161915); text-decoration: underline; }

/* =============================================================================
   8 · PANTALLAS PEQUEÑAS
   El selector medía 407 px de alto a 390: era la primera pantalla entera para
   elegir un plan que todavía no significa nada. Se compacta a una fila por
   plan, con la cuenta en euros, que es lo único que hay que leer ahí.
   ========================================================================== */

@media (max-width: 860px) {
  #planes { grid-template-columns: 1fr; gap: 8px; }
  #planes .plan { padding: 13px 15px; }
  #planes .plan__desc { display: none; }
  #planes .plan__dto { position: absolute; top: 13px; right: 14px; margin: 0; }
  #planes .plan[aria-pressed="true"]::after {
    top: auto;
    bottom: 12px;
    right: 15px;
  }
  .cfgv-medida { margin-top: 10px; padding-top: 9px; }
  .cfgv-cuenta { font-size: .8rem; }
  .cfgv-subir { margin-top: -8px; padding: 12px 14px; }
  .cfgv-subir__btn { width: 100%; }
}

@media (max-width: 420px) {
  .cfgv-barra { padding-inline: 12px; }
  .cfgv-barra__total { font-size: 1.35rem; }
  .cfgv-barra__btn { padding: 0 15px; font-size: .94rem; }
}

/* =============================================================================
   9 · FOCO Y MOVIMIENTO
   El anillo del sistema es verde #74B74E sobre crema: 2,3:1, no se ve. Sobre
   mis piezas se usa el verde hondo, y sobre el plan del mes, crema.
   ========================================================================== */

.cfgv-subir__btn:focus-visible,
.cfgv-barra__btn:focus-visible,
.cfgv-tira__si:focus-visible,
.cfgv-tira__no:focus-visible,
#planes .plan:focus-visible {
  outline: 3px solid var(--verde-osc);
  outline-offset: 2px;
}
#planes .plan[data-plan="mensual"]:focus-visible {
  outline-color: var(--crema, #EFEBE1);
}

@media (prefers-reduced-motion: reduce) {
  .cfgv-pista--anima .cfgv-pagado,
  .cfgv-pista--anima .cfgv-ahorrado,
  .cfgv-meter__relleno,
  .cfgv-barra { transition: none; }
}