/* ============================================================
   Two Bites · Configurador reutilizable (carta + wework)
   Estilo plano/simétrico, auto-contenido, ámbito .tb-config
   ============================================================ */
.tb-config { --cfg-red: var(--red, #8b1a1a); --cfg-black: var(--black, #18181a); --cfg-gray: var(--gray, #6b6b6b); --cfg-border: #e6e6e1; }
.tb-config *, .tb-config *::before, .tb-config *::after { box-sizing: border-box; }

.tb-config .cfg-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; text-align: left; }
@media (max-width: 880px) { .tb-config .cfg-grid { grid-template-columns: 1fr; } }

.tb-config .cfg-block { background: #fff; border: 1px solid var(--cfg-border); border-radius: 12px; padding: 24px 26px; margin-bottom: 14px; }
.tb-config .cfg-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cfg-red); margin-bottom: 12px; }
.tb-config .cfg-title { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--cfg-black); margin-bottom: 4px; }
.tb-config .cfg-sub { font-size: 13px; line-height: 19px; color: var(--cfg-gray); margin-bottom: 18px; }

/* Personas */
.tb-config .cfg-personas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.tb-config .cfg-num { font-size: 46px; line-height: 1; font-weight: 700; color: var(--cfg-red); font-variant-numeric: tabular-nums; }
.tb-config .cfg-num-label { font-size: 16px; color: var(--cfg-gray); margin-left: 8px; }
.tb-config .cfg-steppers { display: flex; gap: 8px; }
.tb-config .cfg-step { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid #e0e0e0; background: #fff; font-family: inherit; font-size: 22px; line-height: 1; color: var(--cfg-black); cursor: pointer; transition: border-color .2s ease, color .2s ease; display: flex; align-items: center; justify-content: center; }
.tb-config .cfg-step:hover { border-color: var(--cfg-red); color: var(--cfg-red); }

.tb-config .cfg-range { width: 100%; height: 6px; border-radius: 980px; outline: none; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--cfg-red) 0%, var(--cfg-red) var(--cfg-fill, 20%), #e0e0e0 var(--cfg-fill, 20%), #e0e0e0 100%); }
.tb-config .cfg-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--cfg-red); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tb-config .cfg-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--cfg-red); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tb-config .cfg-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: #999; margin-top: 8px; }

/* Opciones en cuadrícula uniforme */
.tb-config .cfg-optgrid { display: grid; gap: 8px; }
.tb-config .cfg-optgrid.cfg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.tb-config .cfg-optgrid.cfg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.tb-config .cfg-opt { position: relative; display: block; cursor: pointer; }
.tb-config .cfg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tb-config .cfg-opt-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; padding: 12px 10px; text-align: center; border: 1.5px solid var(--cfg-border); border-radius: 10px; background: #fff; transition: border-color .2s ease, background .2s ease; }
.tb-config .cfg-opt-t { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--cfg-black); }
.tb-config .cfg-opt-h { font-size: 11px; font-weight: 400; line-height: 1.3; color: #999; }
.tb-config .cfg-opt:hover .cfg-opt-in { border-color: var(--cfg-gray); }
.tb-config .cfg-opt input:checked + .cfg-opt-in { border-color: var(--cfg-red); background: #fdf6f5; }
.tb-config .cfg-opt input:checked + .cfg-opt-in .cfg-opt-t { color: var(--cfg-red); }
.tb-config .cfg-opt input:focus-visible + .cfg-opt-in { outline: 2px solid var(--cfg-red); outline-offset: 2px; }
@media (max-width: 400px) { .tb-config .cfg-opt-in { min-height: 54px; } }

.tb-config .cfg-block.cfg-hidden { display: none; }

/* Resumen */
/* Nunca más alta que la pantalla: si no cabe, se desplaza por dentro
   para que los botones sigan siendo alcanzables */
.tb-config .cfg-summary { background: #141416; border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 14px; padding: 28px 26px; position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; }
.tb-config .cfg-s-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.tb-config .cfg-s-title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 20px; color: #fff; }
.tb-config .cfg-lines { display: flex; flex-direction: column; margin-bottom: 4px; }
.tb-config .cfg-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.85); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 11px 0; }
.tb-config .cfg-line:first-child { padding-top: 0; }
.tb-config .cfg-line .cfg-qty { color: #fff; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-config .cfg-units { font-size: 12px; color: rgba(255,255,255,0.55); margin: 14px 0 16px; }

.tb-config .cfg-mix { margin-bottom: 16px; }
.tb-config .cfg-mix.cfg-hidden { display: none; }
.tb-config .cfg-mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.12); }
.tb-config .cfg-seg { height: 100%; transition: width .5s ease; }
.tb-config .cfg-seg-c { background: rgba(255,255,255,0.4); }
.tb-config .cfg-seg-p { background: var(--cfg-red); }
.tb-config .cfg-mixleg { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 7px; }
.tb-config .cfg-leg-c::before { content: "● "; color: rgba(255,255,255,0.55); }
.tb-config .cfg-leg-p::before { content: "● "; color: var(--cfg-red); }

.tb-config .cfg-warning { font-size: 12px; line-height: 18px; background: rgba(139,26,26,0.25); border: 1px solid rgba(139,26,26,0.6); border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; }
.tb-config .cfg-warning.cfg-hidden { display: none; }

.tb-config .cfg-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; border-top: 1px dashed rgba(255,255,255,0.18); padding-top: 16px; margin-top: 4px; }
.tb-config .cfg-total-row.cfg-hidden { display: none; }
.tb-config .cfg-total-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.tb-config .cfg-total { font-size: 34px; line-height: 1; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-config .cfg-total .cfg-cur { font-size: 18px; font-weight: 500; margin-left: 3px; }
.tb-config .cfg-total .cfg-dash { font-size: 22px; font-weight: 500; opacity: 0.7; margin: 0 2px; }
.tb-config .cfg-was { font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: line-through; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.tb-config .cfg-was.cfg-hidden { display: none; }
.tb-config .cfg-note { font-size: 11px; color: rgba(255,255,255,0.45); margin: 6px 0 20px; }

.tb-config .cfg-btn { display: block; width: 100%; text-align: center; padding: 14px 28px; font-size: 15px; font-weight: 500; font-family: inherit; text-decoration: none; border-radius: 980px; border: 1px solid var(--cfg-red); background: var(--cfg-red); color: #fff; cursor: pointer; transition: background .25s ease, border-color .25s ease; }
.tb-config .cfg-btn:hover { background: #6f1414; border-color: #6f1414; }
@media (max-width: 880px) { .tb-config .cfg-summary { position: static; } }
/* En pantallas bajas no se queda fija: acompaña al scroll con normalidad */
/* En pantallas bajas (portátiles) el resumen sigue acompañando el scroll:
   se compacta y, si aun así no cabe, hace scroll interno con barra fina. */
@media (max-height: 820px) {
  .tb-config .cfg-summary { top: 80px; max-height: calc(100vh - 96px); padding: 22px 22px; }
}
.tb-config .cfg-summary::-webkit-scrollbar { width: 5px; }
.tb-config .cfg-summary::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.tb-config .cfg-summary::-webkit-scrollbar-track { background: transparent; }

/* Vía secundaria bajo el botón principal: discreta, no compite con él. */
.tb-config .cfg-alt {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tb-config .cfg-alt:hover { color: #fff; }