/* Controlfy · Variantes — CSS neutro. El tema solo define las variables --cf-v-*; nada más.
   --cf-v-fondo · --cf-v-superficie · --cf-v-linea · --cf-v-marco · --cf-v-texto · --cf-v-texto-suave · --cf-v-tenue
   --cf-v-acento · --cf-v-acento-texto · --cf-v-fuente · --cf-v-fuente-titulo */
:root{--cf-v-fondo:#fff;--cf-v-superficie:#f5f5f7;--cf-v-linea:#e2e2e6;--cf-v-marco:#f0f0f2;--cf-v-texto:#111114;--cf-v-texto-suave:#4a4a52;--cf-v-tenue:#7a7a84;--cf-v-acento:#111114;--cf-v-acento-texto:#fff}
body.cf-v-bloqueo{overflow:hidden}
.cf-hoja-velo { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); animation: cfHojaV .2s ease-out; }
.cf-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; max-height: 88dvh; display: flex; flex-direction: column; background: var(--cf-v-fondo); border-top: 1px solid var(--cf-v-linea); color: var(--cf-v-texto); animation: cfHojaH .25s ease-out; }
.cf-hoja, .cf-hoja * { box-sizing: border-box; }
.cf-hoja-asa { flex: none; width: 100%; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; } .cf-hoja-asa::before { content: ""; width: 44px; height: 4px; background: var(--cf-v-tenue); display: block; }
.cf-hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 18px; }
.cf-hoja-cab { display: flex; gap: 14px; align-items: center; } .cf-hoja-foto { flex: none; width: 84px; height: 84px; border: 1px solid var(--cf-v-linea); overflow: hidden; } .cf-hoja-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; display: block; }
  .cf-hoja-foto img[data-cf-fondo="placa"] { background: #f2f2f4; }
.cf-hoja-n { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .cf-hoja-n b { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cf-hoja-p { font-family: var(--cf-v-fuente-titulo,inherit); font-stretch: 118%; font-weight: 800; font-size: 20px; } .cf-hoja-p del { font: 400 12px var(--cf-v-fuente,inherit); color: var(--cf-v-tenue); margin-right: 8px; }
.cf-hoja-g { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .cf-hoja-g legend { padding: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-v-texto-suave); } .cf-hoja-g legend b { color: var(--cf-v-texto); margin-left: 6px; letter-spacing: 0; text-transform: none; }
.cf-hoja-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-hoja-sel { width: 100%; min-height: 52px; padding: 0 40px 0 16px; background: var(--cf-v-superficie); border: 1px solid var(--cf-v-tenue); border-radius: 0; color: var(--cf-v-texto); font-size: 16px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.cf-hoja-sel:focus { border-color: var(--cf-v-acento); outline: 0; }
.cf-hoja-op { position: relative; min-height: 48px; min-width: 56px; padding: 0 16px; background: var(--cf-v-superficie); border: 1px solid var(--cf-v-tenue); border-radius: 0; color: var(--cf-v-texto); font: 600 14px/1.2 var(--cf-v-fuente,inherit); cursor: pointer; overflow: hidden; }
.cf-hoja-op[aria-pressed="true"] { border: 2px solid var(--cf-v-acento); padding: 0 15px; background: color-mix(in srgb, var(--cf-v-acento) 10%, var(--cf-v-superficie)); }
.cf-hoja-op.is-ag { color: var(--cf-v-tenue); } .cf-hoja-op.is-ag::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--cf-v-tenue) 50%, transparent calc(50% + 1px)); }
.cf-hoja-cant { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cf-hoja-cant > span { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cf-v-texto-suave); }
.cf-hoja-q { display: inline-grid; grid-template-columns: 48px 56px 48px; height: 48px; border: 1px solid var(--cf-v-tenue); } .cf-hoja-q button { background: none; border: 0; color: var(--cf-v-texto); font-size: 20px; cursor: pointer; } .cf-hoja-q input { width: 100%; height: 100%; padding: 0; text-align: center; background: none; border: 0; border-left: 1px solid var(--cf-v-linea); border-right: 1px solid var(--cf-v-linea); border-radius: 0; color: var(--cf-v-texto); font-size: 16px; font-weight: 700; -moz-appearance: textfield; appearance: textfield; } .cf-hoja-q input::-webkit-outer-spin-button, .cf-hoja-q input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf-hoja-ver { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; color: var(--cf-v-texto-suave); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.cf-hoja-pie { flex: none; padding: 12px 20px calc(12px + max(env(safe-area-inset-bottom), 22px)); border-top: 1px solid var(--cf-v-linea); background: var(--cf-v-fondo); }
.cf-hoja-btn { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--cf-v-acento); color: var(--cf-v-acento-texto); border: 1px solid var(--cf-v-acento); border-radius: 0; font-family: var(--cf-v-fuente-titulo,inherit); font-stretch: 118%; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .cf-hoja-btn:disabled { opacity: .45; cursor: not-allowed; }
.cf-hoja-err { margin: 0; font-size: 13px; font-weight: 600; color: var(--cf-v-acento); }
.cf-hoja :focus-visible { outline: 2px solid var(--cf-v-acento); outline-offset: 2px; }
@media (min-width: 641px) { .cf-hoja { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); } @keyframes cfHojaH { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } }
@media (min-width: 1025px) { .cf-hoja { bottom: 50%; transform: translate(-50%, 50%); max-height: 80vh; border: 1px solid var(--cf-v-linea); } @keyframes cfHojaH { from { opacity: 0; } to { opacity: 1; } } }
@keyframes cfHojaH { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes cfHojaV { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cf-hoja, .cf-hoja-velo { animation: none; } }

.cf-card-muestras{display:flex;align-items:center;gap:6px;margin-top:6px}
.cf-card-muestras i{width:14px;height:14px;border-radius:50%;border:1px solid var(--cf-v-linea);display:block}
.cf-card-muestras b{font-size:12px;font-weight:600;color:var(--cf-v-tenue)}
.cf-hoja-g legend{font-family:var(--cf-v-fuente-titulo,inherit);font-stretch:100%;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--cf-v-tenue)}
.cf-hoja-ops{gap:8px}
/* presentación: segmentos rectangulares 44 × mín. 72 */
.cf-hoja-op{min-height:44px;min-width:72px;padding:0 14px;background:transparent;border:1px solid var(--cf-v-linea);color:var(--cf-v-texto);font:600 14px/1.2 var(--cf-v-fuente,inherit)}
.cf-hoja-op:hover{border-color:var(--cf-v-texto-suave)}
.cf-hoja-op[aria-pressed="true"]{border:2px solid var(--cf-v-texto);padding:0 13px;background:var(--cf-v-superficie)}
.cf-hoja-op.is-ag{opacity:.45;color:var(--cf-v-tenue)}
.cf-hoja-op.is-ag::before{background:linear-gradient(to top right,transparent calc(50% - .5px),var(--cf-v-tenue) 50%,transparent calc(50% + .5px))}
/* sabor: lista con muestra + nombre + disponibilidad */
.cf-hoja-lista{flex-direction:column;gap:0;border:1px solid var(--cf-v-linea)}
.cf-hoja-fila{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px;border:0;border-bottom:1px solid var(--cf-v-linea);text-align:left;overflow:visible}
.cf-hoja-fila:last-child{border-bottom:0}
.cf-hoja-fila[aria-pressed="true"]{border:0;border-bottom:1px solid var(--cf-v-linea);padding:0 14px;background:var(--cf-v-superficie);box-shadow:inset 2px 0 0 var(--cf-v-texto)}
.cf-hoja-m{width:16px;height:16px;border-radius:50%;border:1px solid var(--cf-v-linea);background:var(--cf-v-linea);display:block}
.cf-hoja-fn{font-weight:600}
.cf-hoja-fd{font-style:normal;font-size:12px;color:var(--cf-v-tenue)}
.cf-hoja-fila.is-ag::before{display:none}
.cf-hoja-fila.is-ag .cf-hoja-fn{text-decoration:line-through}
.cf-hoja-btn{background:var(--cf-v-acento);border-color:var(--cf-v-acento);color:var(--cf-v-acento-texto);font-family:var(--cf-v-fuente-titulo,inherit);font-stretch:100%;font-size:13px;letter-spacing:.08em;min-height:48px}
.cf-hoja-btn:disabled{background:var(--cf-v-linea);border-color:var(--cf-v-linea);color:var(--cf-v-tenue)}

/* ── Listado V5, ronda 1 de Estudio ── */
.cf-tn-ocultar,.cf-tn-vista{display:none!important}
.cf-tn-subs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding-bottom:2px}
.cf-tn-subs::-webkit-scrollbar{display:none}
.cf-tn-subs a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--cf-v-linea);color:var(--cf-v-texto-suave);font-size:13px;text-decoration:none;white-space:nowrap}
.cf-tn-subs a:hover{border-color:var(--cf-v-texto-suave);color:var(--cf-v-texto)}
.cf-card-muestras{gap:4px;margin-top:8px;flex-wrap:wrap}
.cf-card-m{position:relative;width:24px;height:24px;padding:0;margin:0;background:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cf-card-m i{width:14px;height:14px;border-radius:50%;border:1px solid var(--cf-v-linea);display:block;transition:transform .2s}
.cf-card-m:hover i{transform:scale(1.15)}
.cf-card-m::after{content:"";position:absolute;inset:1px;border-radius:50%;border:1.5px solid transparent;transition:border-color .2s}
.cf-card-m[aria-pressed="true"]::after{border-color:var(--cf-v-texto)}
.cf-card-m.is-ag{opacity:.35}
.cf-card-m.is-ag i{background-image:linear-gradient(to top right,transparent calc(50% - .5px),var(--cf-v-tenue) 50%,transparent calc(50% + .5px))}
.cf-card-m:focus-visible,.cf-card-po:focus-visible,.cf-card-ps:focus-visible{outline:2px solid var(--cf-v-texto);outline-offset:2px}
.cf-card-pops{display:flex;gap:4px;flex:1 1 auto;min-width:0}
.cf-card-po,.cf-card-ps{min-height:48px;padding:0 12px;background:var(--cf-v-fondo);color:var(--cf-v-texto);border:1px solid var(--cf-v-texto);border-radius:0;font:700 12px/1 var(--cf-v-fuente-titulo,inherit);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.cf-card-po{flex:1 1 0;min-width:0;white-space:nowrap}
.cf-card-po[aria-pressed="true"]{background:var(--cf-v-texto);color:var(--cf-v-fondo)}
.cf-card-po.is-ag{opacity:.4;text-decoration:line-through}
.cf-card-ps{flex:1 1 auto;appearance:none;-webkit-appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.cf-card-add.is-cargando,.quick-add-variable.is-cargando{opacity:.7;cursor:progress}

/* ══ Tarjeta viva · pulido: muestras, popover de sabores, barra de compra ══ */
.cf-card-m{width:28px;height:28px}
.cf-card-m i{width:18px;height:18px;border:1px solid color-mix(in srgb,var(--cf-v-texto) 22%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cf-v-fondo) 35%,transparent)}
.cf-card-m::after{inset:0;border-width:2px}
.cf-card-mas{height:28px;padding:0 10px;margin-left:2px;background:transparent;border:1px solid var(--cf-v-linea);border-radius:0;color:var(--cf-v-texto-suave);font:700 11px/1 var(--cf-v-fuente-titulo,inherit);letter-spacing:.08em;cursor:pointer;transition:border-color .2s,color .2s}
.cf-card-mas:hover,.cf-card-mas[aria-expanded="true"]{border-color:var(--cf-v-texto);color:var(--cf-v-texto)}
.cf-card-sab{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;background:color-mix(in srgb,var(--cf-v-fondo) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px;animation:cfSab .25s ease-out}
@keyframes cfSab{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-card-sab-t{font:700 11px/1 var(--cf-v-fuente-titulo,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--cf-v-tenue);padding-bottom:12px;border-bottom:1px solid var(--cf-v-linea)}
.cf-card-sab-l{flex:1;overflow-y:auto;overscroll-behavior:contain;margin-top:4px;scrollbar-width:thin}
.cf-card-sab-o{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 4px;background:none;border:0;border-bottom:1px solid var(--cf-v-linea);color:var(--cf-v-texto);font:600 14px/1.2 var(--cf-v-fuente,inherit);text-align:left;cursor:pointer}
.cf-card-sab-o i{width:18px;height:18px;border-radius:50%;border:1px solid color-mix(in srgb,var(--cf-v-texto) 22%,transparent);background:var(--cf-v-linea)}
.cf-card-sab-o:hover{background:var(--cf-v-superficie)}
.cf-card-sab-o[aria-selected="true"]{box-shadow:inset 2px 0 0 var(--cf-v-texto);padding-left:10px}
.cf-card-sab-o.is-ag{opacity:.4}.cf-card-sab-o.is-ag span{text-decoration:line-through}
/* barra: caja translúcida, selector fino y botón con peso */

/* ── Hoja: resumen vivo, buscador de sabores; barra sin tamaño a todo el ancho ── */
.cf-hoja-r{font-size:12px;letter-spacing:.04em;color:var(--cf-v-tenue);text-transform:uppercase}
.cf-hoja-r.is-on{color:var(--cf-v-texto);font-weight:700}
.cf-hoja-bus{width:100%;min-height:44px;margin-bottom:8px;padding:0 14px;background:var(--cf-v-superficie);border:1px solid var(--cf-v-linea);border-radius:0;color:var(--cf-v-texto);font-size:16px}
.cf-hoja-bus:focus{outline:2px solid var(--cf-v-texto);outline-offset:1px}
.cf-hoja-fila[hidden]{display:none}