/* ============================================================
   DANGOFE · «Pagué desde otro banco» (2026-10-20, chat de Diseño) · hoja ENTREGABLE · prefijo otb-
   Va con otro-banco.js en el portal (agenda.css: --tinta, --tenue, --azul, --linea, --vidrio-fuerte; la pieza lleva .g, el cristal
   del portal) y en consulta.html (dentro de .cita: --cita-*). Claro y Noche siguen a esos tokens. SIN sombras exteriores:
   solo anillos planos de foco (0 0 0 3px). Tres versiones por data-otb-v: A · Casilla · B · Interruptor · C · Dos opciones.
   ============================================================ */
.otb { --otb-tinta: var(--tinta, var(--cita-tinta, #0a1633)); --otb-tenue: var(--tenue, var(--cita-tenue, #5b6880)); --otb-azul: var(--vidrio-azul, var(--azul, var(--cita-azul, #03269b))); --otb-azul-txt: var(--azul-txt, var(--azul, var(--cita-azul-txt, #03269b))); --otb-linea: var(--linea, var(--cita-linea, rgba(10, 22, 51, .1))); --otb-pista: rgba(120, 130, 160, .4); --otb-muelle: var(--muelle, var(--cita-muelle, cubic-bezier(.34, 1.45, .64, 1)));
  position: relative; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 20px; color: var(--otb-tinta); text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-family: inherit; }
.otb:not(.g) { background: var(--vidrio-fuerte, rgba(255, 255, 255, .82)); border: 1px solid var(--otb-linea); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
/* dentro de la tarjeta del cliente (consulta.html) mandan los tokens de .cita, claro y Noche */
.cita .otb { --otb-tinta: var(--cita-tinta); --otb-tenue: var(--cita-tenue); --otb-azul: var(--cita-vidrio-azul); --otb-azul-txt: var(--cita-azul-txt); --otb-linea: var(--cita-linea); --otb-muelle: var(--cita-muelle); background: var(--cita-vidrio-f, rgba(255, 255, 255, .82)); border: 1px solid var(--cita-linea); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.cita .otb::before { display: none; }
.pant[data-tono="medianoche"] .otb, .pant[data-tono="negro"] .otb, .cita--noche .otb { --otb-pista: rgba(255, 255, 255, .32); }
.otb *, .otb *::before, .otb *::after { box-sizing: border-box; }
.otb input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.otb__txt { min-width: 0; flex: 1; }
.otb__txt b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.otb__txt small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--otb-tenue); margin-top: 3px; }
/* A · Casilla */
.otb__caja { flex: none; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--otb-pista); display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease, transform .4s var(--otb-muelle); }
.otb input:checked ~ .otb__caja { background: var(--otb-azul); border-color: transparent; }
.otb input:checked ~ .otb__caja::after { content: ''; width: 7px; height: 13px; margin-top: -3px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.otb:active .otb__caja { transform: scale(.92); }
.otb input:focus-visible ~ .otb__caja { box-shadow: 0 0 0 3px rgba(53, 146, 207, .4); }
.otb input:checked ~ .otb__txt b { color: var(--otb-azul-txt); }
/* B · Interruptor */
.otb__sw { flex: none; position: relative; width: 48px; height: 29px; border-radius: 999px; background: var(--otb-pista); transition: background-color .2s ease; }
.otb__sw i { position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; transition: transform .35s var(--otb-muelle); }
.otb input:checked ~ .otb__sw { background: var(--otb-azul); }
.otb input:checked ~ .otb__sw i { transform: translateX(19px); }
.otb input:focus-visible ~ .otb__sw { box-shadow: 0 0 0 3px rgba(53, 146, 207, .4); }
/* C · Dos opciones */
.otb--C { flex-direction: column; align-items: stretch; gap: 9px; cursor: default; }
.otb__preg { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--otb-azul-txt); }
.otb__ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.otb__op { appearance: none; min-height: 46px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid var(--otb-linea); background: transparent; color: var(--otb-tinta); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, transform .4s var(--otb-muelle); }
.otb__op:active { transform: scale(.97); }
.otb__op.is-on { background: var(--otb-azul); border-color: transparent; color: #fff; }
.otb__op:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(53, 146, 207, .4); }
.otb__nota { font-size: 12.5px; line-height: 1.3; color: var(--otb-tenue); }
.otb__oculto { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* dentro de la hoja de cobro del técnico (portal-cobro.css: tokens --pcb-*, claro y Noche) */
.pcb-hoja .otb { --otb-tinta: var(--pcb-tinta); --otb-tenue: var(--pcb-tenue); --otb-azul: var(--pcb-pri); --otb-azul-txt: var(--pcb-azul-txt); --otb-linea: var(--pcb-linea); margin-top: 10px; border-radius: 16px; background: var(--pcb-campo); border: 1px solid var(--pcb-linea); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.pcb-hoja .otb::before { display: none; }
@media (prefers-reduced-motion: reduce) { .otb__caja, .otb__sw i, .otb__op { transition: none; } }