/* ════════════════════════════════════════════════════════════════════════════
   LA CONSULTA · Mi combinación (2026-11-04, prefijo sbcm-).
   Fiel a la pantalla derecha de docs/mockups/consulta-tres-pantallas-2026-10-15.png:
   título serif, la rueda de áreas (cubiertas en azul marino, el resto gris), Tus
   péptidos en tarjetas, Comparar en columnas, «Desde aquí» en tarjetas de color
   y el botón grande «Ver mi resultado». Celular primero (390 px sin scroll
   horizontal); en escritorio la rueda a la izquierda y lo demás a la derecha.
   Ningún texto aquí: todo lo hornea scripts/gen-consulta-combinacion.py.
   ════════════════════════════════════════════════════════════════════════════ */
.sbcm {
  --sbcm-papel: #F5F5F0; --sbcm-navy: #001450; --sbcm-azul: #2864A0; --sbcm-linea: #E0DDD3;
  --sbcm-card: #FFFFFF; --sbcm-tinta: #1B2540; --sbcm-gris: #5A6573; --sbcm-off: #E9EAEE; --sbcm-off-ico: #8A93A3;
  --sbcm-verde: #2E7D4F; --sbcm-verde-bg: #E6F2E9; --sbcm-ambar: #B86A12; --sbcm-ambar-bg: #FCEFD9; --sbcm-gris-c: #7A818C; --sbcm-gris-bg: #ECEDEF;
  --sbcm-serif: Georgia, 'Times New Roman', serif;
  background: var(--sbcm-papel); color: var(--sbcm-tinta);
  padding: 92px 16px 40px; font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.sbcm *, .sbcm *::before, .sbcm *::after { box-sizing: border-box; }
.sbcm [hidden] { display: none !important; }
.sbcm-wrap { max-width: 1120px; margin: 0 auto; }

.sbcm-miga a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--sbcm-azul); font-weight: 600; font-size: 14px;
  text-decoration: none; }
.sbcm-flecha { width: 18px; height: 18px; flex: none; }

.sbcm-cab { text-align: center; margin: 0 0 6px; }
.sbcm-h1 { font-family: var(--sbcm-serif); font-weight: 700; color: var(--sbcm-navy); font-size: clamp(32px, 9vw, 48px); line-height: 1.05; margin: 0; }
.sbcm-sub { margin: 6px 0 0; color: var(--sbcm-gris); font-size: 16px; }

/* la rueda */
.sbcm-rueda { position: relative; margin: 4px auto 18px; max-width: 460px; }
.sbcm-rueda-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sbcm-seg-p { fill: var(--sbcm-off); stroke: #fff; stroke-width: 1; }
.sbcm-seg-ico { color: var(--sbcm-off-ico); }
.sbcm-seg-lbl { font-size: 14px; fill: var(--sbcm-gris); font-family: inherit; }
.sbcm-seg.es-on .sbcm-seg-p { fill: var(--sbcm-navy); }
.sbcm-seg.es-on .sbcm-seg-ico { color: #fff; }
.sbcm-seg.es-on .sbcm-seg-lbl { fill: var(--sbcm-navy); font-weight: 700; }
.sbcm-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32%; text-align: center; margin: 0;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.sbcm-centro b { font-family: var(--sbcm-serif); color: var(--sbcm-navy); font-size: clamp(15px, 4.6vw, 22px); line-height: 1.1; overflow-wrap: anywhere; }
.sbcm-centro span { color: var(--sbcm-gris); font-size: clamp(11px, 3.2vw, 14px); line-height: 1.2; }

/* secciones */
.sbcm-sec { margin: 0 0 22px; }
.sbcm-sec-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sbcm-h2 { font-family: var(--sbcm-serif); font-weight: 700; color: var(--sbcm-navy); font-size: 20px; margin: 0; }
.sbcm-editar { font: inherit; font-size: 14px; font-weight: 600; color: var(--sbcm-azul); background: none; border: 0; min-height: 44px; padding: 0 4px;
  cursor: pointer; }
.sbcm-editar[aria-pressed="true"] { color: var(--sbcm-navy); text-decoration: underline; }

.sbcm-vacio { background: var(--sbcm-card); border: 1.5px dashed var(--sbcm-linea); border-radius: 16px; padding: 22px 18px; text-align: center; margin-bottom: 22px; }
.sbcm-vacio p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.sbcm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 12px;
  font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid var(--sbcm-navy); }
.sbcm-btn-sec { background: var(--sbcm-card); color: var(--sbcm-navy); }

/* Tus péptidos */
.sbcm-tus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sbcm-tu { position: relative; background: var(--sbcm-card); border: 1px solid var(--sbcm-linea); border-radius: 16px; box-shadow: 0 2px 10px rgba(0,20,80,.05); }
.sbcm-tu-a { display: flex; align-items: flex-start; gap: 8px; padding: 12px 30px 12px 10px; min-height: 84px; color: var(--sbcm-navy); text-decoration: none; }
.sbcm-tu-a img { width: 34px; height: 48px; object-fit: contain; flex: none; }
.sbcm-tu-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbcm-tu-t b { font-size: 15.5px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.sbcm-tu-t small { color: var(--sbcm-gris); font-size: 13px; }
.sbcm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sbcm-chip { font-size: 11px; color: var(--sbcm-navy); background: #EEF3F9; border-radius: 999px; padding: 3px 9px; }
.sbcm-tu-ok { position: absolute; top: 10px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--sbcm-navy); }
.sbcm-tu-ok::after { content: ''; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sbcm-quitar { display: none; position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  color: #A0302A; cursor: pointer; place-items: center; }
.sbcm-quitar svg { width: 20px; height: 20px; }
.sbcm.es-editando .sbcm-quitar { display: grid; }
.sbcm.es-editando .sbcm-tu-ok { display: none; }
.sbcm.es-editando .sbcm-tu { border-style: dashed; }

/* Comparar: columnas (scroll propio si hay más de las que caben) */
.sbcm-comp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(108px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x proximity; }
.sbcm-col { background: var(--sbcm-card); border: 1px solid var(--sbcm-linea); border-radius: 14px; padding: 10px; display: flex; flex-direction: column;
  gap: 8px; scroll-snap-align: start; }
.sbcm-col-n { color: var(--sbcm-navy); font-size: 15px; font-weight: 700; }
.sbcm-col-fila { display: flex; flex-direction: column; gap: 3px; }
.sbcm-col-l { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--sbcm-gris); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.sbcm-col-v { font-size: 13.5px; color: var(--sbcm-tinta); }
.sbcm-ev { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 9px; font-size: 12px; width: max-content; max-width: 100%;
  background: var(--sbcm-g-bg); color: var(--sbcm-tinta); }
.sbcm-ev i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; color: var(--sbcm-g); }
.sbcm-g-alta { --sbcm-g: var(--sbcm-verde); --sbcm-g-bg: var(--sbcm-verde-bg); }
.sbcm-g-media { --sbcm-g: var(--sbcm-ambar); --sbcm-g-bg: var(--sbcm-ambar-bg); }
.sbcm-g-preliminar { --sbcm-g: var(--sbcm-gris-c); --sbcm-g-bg: var(--sbcm-gris-bg); }

/* Cómo van juntos */
.sbcm-juntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sbcm-par { border-radius: 14px; padding: 12px 14px; background: var(--sbcm-card); border: 1px solid var(--sbcm-linea); border-left: 4px solid var(--sbcm-pc); }
.sbcm-par-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.sbcm-par-cab b { color: var(--sbcm-navy); font-size: 14.5px; }
.sbcm-par-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--sbcm-pc); flex: none; }
.sbcm-par-chip { font-size: 12px; font-weight: 600; color: var(--sbcm-pc); background: var(--sbcm-pbg); border-radius: 999px; padding: 3px 9px; }
.sbcm-par p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.sbcm-c-verde { --sbcm-pc: var(--sbcm-verde); --sbcm-pbg: var(--sbcm-verde-bg); }
.sbcm-c-ambar { --sbcm-pc: var(--sbcm-ambar); --sbcm-pbg: var(--sbcm-ambar-bg); }
.sbcm-c-gris { --sbcm-pc: var(--sbcm-gris-c); --sbcm-pbg: var(--sbcm-gris-bg); }

/* Desde aquí puedes ir hacia: tarjetas del color del área */
.sbcm-desde { list-style: none; margin: 0; padding: 0 0 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px;
  overflow-x: auto; scroll-snap-type: x proximity; }
.sbcm-desde > li { scroll-snap-align: start; }
.sbcm-ir { --sbcm-c: var(--sbcm-azul); display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--sbcm-linea);
  background: color-mix(in srgb, var(--sbcm-c) 9%, #fff); overflow: hidden; }
.sbcm-ir-a { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 6px; min-height: 44px; color: var(--sbcm-tinta); text-decoration: none; flex: 1; }
.sbcm-ir-cab b { display: block; color: var(--sbcm-c); font-size: 15px; font-weight: 700; }
.sbcm-ir-cab small { display: block; color: var(--sbcm-c); font-size: 12.5px; opacity: .85; }
.sbcm-ir-t { font-size: 12.5px; line-height: 1.4; }
.sbcm-agregar { margin: 4px 10px 10px; min-height: 44px; padding: 4px 8px; line-height: 1.2; border-radius: 10px; border: 1px solid var(--sbcm-c); background: #fff; color: var(--sbcm-c);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sbcm-agregar:disabled { opacity: .45; cursor: not-allowed; }
@media (min-width: 600px) { .sbcm-desde { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

/* el botón grande */
.sbcm-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin: 6px 0 22px; border-radius: 999px;
  background: var(--sbcm-navy); color: #fff; font-family: var(--sbcm-serif); font-size: 19px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,20,80,.18); }
.sbcm-cta:hover { background: #0A2266; }
.sbcm-cta .sbcm-flecha { width: 22px; height: 22px; }

.sbcm-ruo { text-align: center; font-size: 12px; color: var(--sbcm-gris); margin: 10px 0 0; }
.sbcm a:focus-visible, .sbcm button:focus-visible { outline: 3px solid rgba(40,100,160,.35); outline-offset: 2px; }

@media (min-width: 768px) { .sbcm { padding-top: 104px; } }
@media (min-width: 1024px) {
  .sbcm-cols { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .sbcm-izq { position: sticky; top: 110px; }
  .sbcm-cab { text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .sbcm-seg-p, .sbcm-seg-ico, .sbcm-seg-lbl { transition: fill .35s ease, color .35s ease; }
  .sbcm-tu, .sbcm-col, .sbcm-ir, .sbcm-par { animation: sbcm-entra .3s ease both; }
  .sbcm-cta { transition: background-color .2s ease, transform .2s ease; }
  .sbcm-cta:hover { transform: translateY(-1px); }
}
@keyframes sbcm-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }