/* GENERADO por tools/fluid.py desde src/css/responsive.css — no editar aquí */
/* HOTBET V2.7 — capa responsive.
 * 1) Nada puede ensanchar la página más que la pantalla.
 * 2) Vista de evento pensada para móvil.
 * 3) Imágenes y piezas con tamaño según el espacio real (container queries)
 *    y con tope por alto visible (teléfonos bajos, horizontal). */

/* ---------- 1. Sin desborde horizontal ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@supports not (overflow: clip) { html { overflow-x: hidden; } }   /* iOS < 16: en iOS no alcanza con body */
#main, .page, .sb, .sb__main, .evd, .mkts, .mkt, .lg, .ev, .bs, .panel, .trow, .tk, .modal__sheet { min-width: 0; }
/* Grillas: una columna nunca crece por su contenido. */
.dep-quick, .bs-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tev__odds, .ev__odds.odds-3, .rc-nums, .tk__foot, .stats, .timer { min-width: 0; }
.tev__odds { grid-auto-columns: minmax(0, 1fr); }
.odd, .odd small, .odd b { min-width: 0; }
/* Textos del backend largos: se cortan, no empujan. */
.ev__teams em, .lg__head b, .bs-item__ev, .srch__txt b, .tev__head b, .tk__ev, .tk__pick { overflow-wrap: anywhere; }

/* ---------- 2. Vista de evento ---------- */
.mkts { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--u) * 340)), 1fr)); align-items: start; }
.mkt { padding: 0; overflow: hidden; }
.mkt__name { display: flex; align-items: center; gap: calc(var(--u) * 8); margin: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.mkt__name::-webkit-details-marker { display: none; }
.mkt__name span { flex: 1; min-width: 0; font-weight: 800; color: var(--text); }
.mkt__name small { color: var(--muted); font-weight: 700; font-size: max(10px, calc(var(--u) * 11)); }
.mkt__name .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--muted); transition: transform .2s var(--ease); }
.mkt[open] .mkt__name .ic { transform: rotate(180deg); }
.mkt__sels { display: grid; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 12) calc(var(--u) * 12); }
/* 2 opciones: nombre a la izquierda, cuota a la derecha */
.mkt__sels.lay-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mkt__sels.lay-row .odd { flex-direction: row; justify-content: space-between; gap: calc(var(--u) * 8); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 12); }
.mkt__sels.lay-row .odd small { text-align: left; white-space: normal; line-height: 1.2; font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 3 opciones: nombre arriba (máx. 2 líneas), cuota abajo */
.mkt__sels.lay-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkt__sels.lay-3 .odd { height: auto; min-height: calc(var(--u) * 58); padding: calc(var(--u) * 6) calc(var(--u) * 6); gap: calc(var(--u) * 3); }
.mkt__sels.lay-3 .odd small { white-space: normal; text-align: center; line-height: 1.15; font-size: max(10px, calc(var(--u) * 11));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Marcador exacto y similares: grilla compacta */
.mkt__sels.lay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mkt__sels.lay-grid .odd { height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 4); }
.mkt__sels.lay-grid .odd small { font-size: max(10px, calc(var(--u) * 12)); color: var(--text-2); }
/* Grupos fijos y mini barra del partido */
.evd-groups { position: sticky; top: var(--topbar-h); z-index: 6; padding: calc(var(--u) * 8) 0; margin: calc(var(--u) * -8) 0; background: var(--bg); }
.evd-mini { position: sticky; top: var(--topbar-h); z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 10);
    height: 0; padding: 0 calc(var(--u) * 14); overflow: hidden; border-radius: calc(var(--u) * 12); background: var(--surface); border: 1px solid transparent;
    font-size: max(10px, calc(var(--u) * 13)); opacity: 0; transition: height .18s var(--ease), opacity .18s, padding .18s; }
.evd-mini.is-on { height: calc(var(--u) * 44); opacity: 1; border-color: var(--line); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0, 0, 0, .35); }
.evd-mini.is-on ~ .evd-groups { top: calc(var(--topbar-h) + calc(var(--u) * 50)); }
.evd-mini b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evd-mini b:first-child { text-align: right; }
.evd-mini span { font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; }
.bbx { top: calc(var(--topbar-h) + calc(var(--u) * 56)); }
.is-standalone .evd-groups, .is-standalone .evd-mini { top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
@media (max-width: 991px) {
    .evd__head { padding: calc(var(--u) * 12) calc(var(--u) * 10); }
    .evd__league { margin-bottom: calc(var(--u) * 8); font-size: max(10px, calc(var(--u) * 12)); }
    .evd__team .crest { width: calc(var(--u) * 38); height: calc(var(--u) * 38); font-size: max(10px, calc(var(--u) * 16)); }
    .evd__team b { font-size: max(10px, calc(var(--u) * 14)); line-height: 1.2; }
    .evd__time, .evd__score { font-size: max(10px, calc(var(--u) * 22)); }
    .evd__mid { min-width: calc(var(--u) * 70); }
    .mkts { gap: calc(var(--u) * 8); }
}

/* ---------- 3. Tamaños según el espacio real ---------- */
.row, .grid-section, .sb__main, .page--home { container-type: inline-size; }

/* Tablet: más columnas según el espacio. En teléfonos la composición es fija
 * (3 tarjetas y el comienzo de la 4ª) y la escala la da la unidad fluida. */
@container (min-width: 768px) and (max-width: 991px) { .rail { --cols: 5.6; } .row--wide .rail, .rail--tiles { --cols: 2.8; } .rail--wide { --cols: 2.8; } }
@container (min-width: 768px) and (max-width: 991px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Tablet: banners y tarjetas con tope por alto visible. */
@media (min-width: 768px) and (max-width: 991px) {
    .hero__main { max-height: min(46svh, calc(var(--u) * 420)); }
    .hero__main .hero__slide img { object-fit: cover; }
    .promo-card img { max-height: 22svh; object-fit: cover; }
    .tcard__hero, .tmini__img { max-height: 30svh; }
    .thero { min-height: 0; max-height: 34svh; }
    .page--catalog .hero__main { max-height: 28svh; }
}

/* Horizontal en teléfono: banners bajos y más columnas. Solo si la pantalla es ancha de verdad
   (≥ 560 px): con el teclado abierto la ventana queda baja pero angosta y NO es horizontal. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
    .hero__main { max-height: 52svh; }
    .rail { --cols: 6.5 !important; }
    .row--top .rail { --cols: 4.2 !important; }
    .row--wide .rail, .rail--tiles, .rail--wide { --cols: 3.2 !important; }
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .hero--split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .promo-card img { max-height: 28svh; }
    .tcard__hero, .tmini__img, .thero { max-height: 45svh; }
    .modal__sheet { max-height: 96svh; }
    .sb__slip { display: none; }
}

/* ---------- 5. Escala tipográfica por elemento (valores en type-1win.css) ---------- */
body { font-size: var(--fs-md); }
.page-title, .sb-title { font-size: var(--fs-display); }
.acct-head__name, .level__now h2, .thero__txt h1, .doc__title { font-size: var(--fs-2xl); }
.auth__title, .sheet-state h3, .dep-ok h3, .rc h3, .money__val, .avail b, .evd__time, .evd__score { font-size: var(--fs-xl); }
.row__title, .sheet__title, .tcard__title, .bonus__amount, .tcard__prize, .bs-total b, .bs-win b { font-size: var(--fs-lg); }
.game__title, .ev__teams, .bs-item__ev, .tev__head b, .mkt__name span, .chip, .sb-tab, .side-link { font-size: var(--fs-sm); }
.game__vendor, .lg__head, .muted, .auth__sub, .page-sub, .bs-item__top, .ev__when small { font-size: var(--fs-xs); }
.page-sub, .auth__sub { font-size: var(--fs-sm); }
.odd b { font-size: var(--fs-md); }
.odd small { font-size: var(--fs-xs); }

/* ---------- 6. Horizontal en teléfono: imágenes más bajas (solo pantallas anchas: no con el teclado abierto) ---------- */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
    .hero__main { max-height: 52svh; }
    .rail { --cols: 7; }
    .game__media, .rail__more { aspect-ratio: 7 / 6; }
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 7. Registro compacto: el botón siempre visible ---------- */
.auth--reg .auth__band { padding: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 24); }
.auth--reg .auth__logo { max-height: calc(var(--u) * 30); }
.auth--reg .auth__claim { margin-top: calc(var(--u) * 6); font-size: var(--fs-md); }
.auth--reg .auth__claim br { display: none; }
.auth--reg .auth__body { gap: calc(var(--u) * 10); padding-top: calc(var(--u) * 18); }
.auth--reg .auth__title { margin: 0; }
.auth--reg .auth__sub { margin-top: calc(var(--u) * -6); }
.reg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.reg-fields > .ff, .reg-fields > .reg-phone, .reg-fields > .reg-promo, .reg-fields > .reg-terms { grid-column: 1 / -1; }
.reg-fields > .ff.half { grid-column: auto; }
.reg-phone { display: grid; grid-template-columns: calc(var(--u) * 118) minmax(0, 1fr); gap: calc(var(--u) * 10); }
/* Campo con etiqueta flotante */
.ff { position: relative; display: block; min-width: 0; }
.ff input, .ff select { display: block; width: 100%; min-width: 0; height: calc(var(--u) * 54); padding: calc(var(--u) * 22) calc(var(--u) * 14) calc(var(--u) * 6); border-radius: calc(var(--u) * 12);
    border: 1px solid var(--input-border); background: var(--input-bg); color: #131313; font: 600 calc(var(--u) * 16) var(--font-body); outline: none;
    -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.ff select { padding-right: calc(var(--u) * 32); text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right calc(var(--u) * 10) center; background-size: calc(var(--u) * 16); }
.ff input:focus, .ff select:focus { border-color: var(--primary); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(var(--primary-rgb), .15); }
.ff__label { position: absolute; left: calc(var(--u) * 15); top: 50%; transform: translateY(-50%); max-width: calc(100% - calc(var(--u) * 30));
    color: #767676; font-size: max(10px, calc(var(--u) * 15)); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top .15s, font-size .15s, transform .15s; }
.ff input:focus ~ .ff__label, .ff input:not(:placeholder-shown) ~ .ff__label, .ff--select .ff__label {
    top: calc(var(--u) * 8); transform: none; font-size: max(10px, calc(var(--u) * 11)); font-weight: 700; color: #5c5c5c; }
.ff input:focus ~ .ff__label { color: var(--primary); }
.ff input[type="date"] { color: #131313; }
.ff .field__eye { position: absolute; right: calc(var(--u) * 6); top: 50%; transform: translateY(-50%); z-index: 1; }
.ff input[name="clave"] { padding-right: calc(var(--u) * 48); }
/* 18+: casilla propia (no el cuadro negro de iOS) */
.reg-terms { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: #F4F4F6; font-size: var(--fs-sm); color: #3a3a3a; cursor: pointer; }
.reg-terms span { flex: 1; }
.check { -webkit-appearance: none; appearance: none; flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin: 0; border-radius: calc(var(--u) * 7); border: calc(var(--u) * 2) solid #C4C4C8; background: #fff; cursor: pointer; }
.check:checked { border-color: var(--primary); background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / calc(var(--u) * 16) no-repeat; }
.check:focus-visible { outline: calc(var(--u) * 2) solid var(--primary); outline-offset: calc(var(--u) * 2); }
.reg-promo__btn { font-size: var(--fs-sm); }
/* Pie fijo: "Registrarse" + "¿Ya tienes cuenta?" siempre a la vista */
.auth__cta { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: calc(var(--u) * 8); margin: 0 calc(var(--u) * -24) calc(var(--u) * -26); padding: calc(var(--u) * 12) calc(var(--u) * 24) calc(calc(var(--u) * 14) + var(--safe-bottom));
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 22%); }
.auth__cta .btn { height: calc(var(--u) * 52); border-radius: calc(var(--u) * 14); font-size: max(10px, calc(var(--u) * 16)); font-weight: 800; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 20) rgba(var(--primary-rgb), .3); }
.auth__cta .auth__alt { margin: 0; }
@media (max-height: 760px) {
    .auth--reg .auth__band { padding: calc(var(--u) * 10) calc(var(--u) * 20) calc(var(--u) * 20); }
    .auth--reg .auth__claim { display: none; }
    .auth--reg .auth__sub { display: none; }
}

/* ================= V2.8 ================= */

/* ---------- Recuperar contraseña ---------- */
.auth__back { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 14); background: rgba(255, 255, 255, .12); color: #fff; }
.auth--rec .auth__band { padding-left: calc(var(--u) * 64); }
.rec-steps { margin: calc(var(--u) * -4) 0 calc(var(--u) * 2); }
.rec-form { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.rec-methods { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.rec-m { display: flex; align-items: center; gap: calc(var(--u) * 12); width: 100%; padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: #F4F4F6; border: calc(var(--u) * 1.5) solid transparent; text-align: left; color: #131313; }
.rec-m:hover:not(:disabled) { border-color: var(--primary); }
.rec-m:disabled { opacity: .5; }
.rec-m > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rec-m small { color: #6E6E73; overflow-wrap: anywhere; }
.rec-m > .ic { color: #9a9a9a; }
.rec-m__ico { width: calc(var(--u) * 42); height: calc(var(--u) * 42); flex: none; display: grid; place-items: center; border-radius: calc(var(--u) * 12); background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.otp input { width: 100%; min-width: 0; height: calc(var(--u) * 56); border-radius: calc(var(--u) * 12); border: calc(var(--u) * 1.5) solid var(--input-border); background: var(--input-bg); text-align: center;
    font: 800 calc(var(--u) * 24) var(--font-body); color: #131313; outline: none; caret-color: var(--primary); }
.otp input:focus { border-color: var(--primary); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(var(--primary-rgb), .15); }
.rec-resend { align-self: center; font-size: var(--fs-sm); }
.rec-resend:disabled { color: #8a8a8a; }
.rec-q { margin: 0; padding: calc(var(--u) * 12); border: 0; border-radius: calc(var(--u) * 14); background: #F4F4F6; }
.rec-q legend { float: left; width: 100%; margin-bottom: calc(var(--u) * 8); font-weight: 800; color: #131313; }
.rec-op { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 12); margin-top: calc(var(--u) * 6); border-radius: calc(var(--u) * 10); background: #fff; border: calc(var(--u) * 1.5) solid transparent; color: #131313; cursor: pointer; }
.rec-op input { accent-color: var(--primary); width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.rec-op:has(input:checked) { border-color: var(--primary); }
.pw-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); }
.pw-meter i { height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #E4E4E8; }
.pw-meter[data-score="1"] i:nth-child(1) { background: var(--danger); }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--gold); }
.pw-meter[data-score="3"] i { background: var(--ok); }
.auth--rec .sheet-state { color: #3a3a3a; }

/* ---------- Instalar la app ---------- */
.inst-bar { position: fixed; z-index: 55; left: calc(var(--u) * 10); right: calc(var(--u) * 10); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + calc(var(--u) * 10));
    display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 16);
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(0, 0, 0, .45);
    transform: translateY(calc(var(--u) * 20)); opacity: 0; transition: transform .25s var(--ease), opacity .25s; }
.inst-bar.is-in { transform: none; opacity: 1; }
.inst-bar__icon, .inst__icon { flex: none; display: grid; place-items: center; background: var(--primary); color: #fff; }
.inst-bar__icon { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 11); }
.inst-bar__icon svg { width: calc(var(--u) * 22); height: calc(var(--u) * 24); }
.inst-bar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.inst-bar__txt small { color: var(--muted); font-size: var(--fs-xs); }
.inst-bar__x { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
@media (min-width: 992px) { .inst-bar { left: auto; right: calc(var(--u) * 20); bottom: calc(var(--u) * 20); width: calc(var(--u) * 380); } }
.inst { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 14); text-align: center; padding: calc(var(--u) * 6) 0; }
.inst__icon { width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: calc(var(--u) * 18); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(var(--primary-rgb), .35); }
.inst__icon svg { width: calc(var(--u) * 38); height: calc(var(--u) * 42); }
.inst__lead { margin: 0; color: var(--text-2); }
.inst__steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 10); text-align: left; }
.inst__steps li { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: var(--surface-2); }
.inst__n { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 900; }
.inst__glyph { display: inline-grid; place-items: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); vertical-align: middle; border-radius: calc(var(--u) * 6); background: var(--surface-3); color: #4A9DFF; }
.inst__glyph svg, .inst__glyph .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.side-link--install .ic { color: var(--primary); }

/* ---------- Pantalla previa al juego ---------- */
.sheet--game { width: min(calc(var(--u) * 460), 100%); overflow: hidden; background: #111; }
.sheet--game .sheet__head { position: absolute; left: 0; right: 0; top: 0; z-index: 3; background: transparent; border: 0; }
.sheet--game .sheet__head::before { display: none; }
.sheet--game .sheet__body { padding: 0; }
.gp { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 64) calc(var(--u) * 20) calc(calc(var(--u) * 20) + var(--safe-bottom)); gap: calc(var(--u) * 6); text-align: center;
    background: radial-gradient(120% 70% at 50% 0%, rgba(var(--primary-rgb), .35), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px calc(var(--u) * 28)), repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px calc(var(--u) * 28)), #111; }
.gp__tools { position: absolute; top: calc(var(--u) * 14); left: calc(var(--u) * 14); display: flex; gap: calc(var(--u) * 8); z-index: 4; }
.gp__tool { background: rgba(255, 255, 255, .1); color: #fff; }
.gp__tool.is-on { color: var(--primary); background: rgba(var(--primary-rgb), .18); }
.gp__art { position: relative; width: min(46vw, calc(var(--u) * 210)); aspect-ratio: 3 / 4; border-radius: calc(var(--u) * 18); overflow: hidden; background: var(--surface-2);
    box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); margin-bottom: calc(var(--u) * 10); }
.gp__art img { width: 100%; height: 100%; object-fit: cover; }
.gp__title { margin: calc(var(--u) * 4) 0 0; font-size: var(--fs-xl); font-weight: 900; line-height: 1.15; }
.gp__vendor { margin: 0 0 calc(var(--u) * 10); color: var(--muted); font-size: var(--fs-sm); }
.gp__panel { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 18); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.gp__row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); width: 100%; min-height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: var(--surface-2); color: var(--text); font-weight: 600; cursor: pointer; }
.gp__cur { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-weight: 800; }
.gp__cur i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-style: normal; font-size: max(10px, calc(var(--u) * 11)); }
.gp__cur .ic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--muted); }
.gp__play { height: calc(var(--u) * 56); border-radius: calc(var(--u) * 14); font-size: max(10px, calc(var(--u) * 18)); font-weight: 900; margin-top: calc(var(--u) * 4); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(var(--primary-rgb), .4); }
.switch-ios { -webkit-appearance: none; appearance: none; position: relative; width: calc(var(--u) * 50); height: calc(var(--u) * 30); margin: 0; border-radius: calc(var(--u) * 15); background: var(--surface-3); cursor: pointer; transition: background-color .2s; flex: none; }
.switch-ios::after { content: ""; position: absolute; top: calc(var(--u) * 3); left: calc(var(--u) * 3); width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, .3); transition: transform .2s var(--ease); }
.switch-ios:checked { background: var(--primary); }
.switch-ios:checked::after { transform: translateX(calc(var(--u) * 20)); }
@media (max-height: 700px) { .gp__art { width: min(34vw, calc(var(--u) * 150)); } .gp { padding-top: calc(var(--u) * 56); } }

/* Franja del registro / inicio de sesión: más aire y la ✕ proporcionada */
.auth__band { padding-top: calc(var(--u) * 18); }
.auth--reg .auth__band { padding: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 24); }
.auth__close { top: calc(var(--u) * 16); right: calc(var(--u) * 16); width: calc(var(--u) * 34); height: calc(var(--u) * 34); min-width: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.auth__close .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
@media (max-height: 760px) { .auth--reg .auth__band { padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 22); } }
.rec-op__k { flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); display: grid; place-items: center; border-radius: 50%; background: #EEEEF1; color: #55555C; font-style: normal; font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; }
.rec-op:has(input:checked) .rec-op__k { background: var(--primary); color: var(--on-primary); }
/* Recuperación: el logo deja lugar a "volver" solo cuando está visible; mismo tamaño que la ✕ */
.auth--rec .auth__band { padding-left: calc(var(--u) * 20); }
.auth--rec .auth__band:has(.auth__back:not([hidden])) { padding-left: calc(var(--u) * 62); }
.auth__back { top: calc(var(--u) * 16); left: calc(var(--u) * 16); width: calc(var(--u) * 34); height: calc(var(--u) * 34); min-width: 0; border-radius: 50%; }
.auth__back .ic { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
/* Las opciones van sobre tarjeta blanca: círculos de selección claros en ambos modos */
.rec-q, .rec-op { color-scheme: light; }