/* Ventana «Precios y tarifas»: el presupuesto siempre por encima de las tarjetas y colores de la paleta.
   Cada grupo tiene su tono (cielo, mantequilla, musgo, crema); el rojizo marca lo seleccionado. */
#prices .grp { --tono: var(--cielo); }
#prices .grp:nth-of-type(4n+2) { --tono: var(--mantequilla); }
#prices .grp:nth-of-type(4n+3) { --tono: var(--musgo); }
#prices .grp:nth-of-type(4n+4) { --tono: var(--crema); }
#prices .grp-t { background: var(--tono) !important; color: var(--cacao) !important; }
#prices .grp-t em { color: color-mix(in srgb, var(--cacao) 72%, transparent) !important; }
#prices .grp-c { background: linear-gradient(160deg, rgba(255, 255, 255, .92), color-mix(in srgb, var(--tono) 30%, rgba(255, 255, 255, .8))) !important; }
#prices .sc > summary { background: color-mix(in srgb, var(--tono) 52%, #fff) !important; }
#prices .sc > summary em { color: var(--rojizo) !important; }
#prices .sc .res-i { background: rgba(255, 255, 255, .88) !important; }
#prices .pg-l { color: var(--rojizo); }
/* Botón de añadir: círculo suave en rojizo, sin borde; relleno rojizo con tick al seleccionar. */
#prices .res-i .add { border: 0 !important; background: color-mix(in srgb, var(--rojizo) 11%, #fff) !important; color: var(--rojizo) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; transition: background .2s, transform .15s; }
#prices .res-i .add:active { transform: scale(.94); }
#prices .res-i .add[aria-pressed="true"] { background: linear-gradient(160deg, var(--rojizo), #8E4430) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -10px rgba(165, 80, 58, .8) !important; }
#prices .res-r .amt b { color: var(--cacao); }
/* Barra del presupuesto: por encima de las tarjetas (antes quedaba detrás), en cristal oscuro y con el botón claro. */
#prices .pbar { z-index: 40; bottom: calc(-110px + env(safe-area-inset-bottom, 0px)); /* el contenedor tiene 120 px de relleno inferior */ background: linear-gradient(160deg, rgba(81, 50, 41, .97), rgba(81, 50, 41, .9)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 20px 44px -16px rgba(40, 28, 22, .7); }
#prices .pbar .btn-pill-dark { background: linear-gradient(160deg, #fff, rgba(255, 255, 255, .78)) !important; color: var(--cacao) !important; }
#prices .pbar small { color: var(--mantequilla); }