/* puerta.css — One UI en la PUERTA DE ENTRADA (ola 2, frente S3): ingreso (hoja), registro guiado, Ayuda, Legal y restablecer contraseña.
   Alcance: solo páginas con <body class="puerta"> (index.html y las sueltas). La app de Mi cuenta usa body.app (componentes.css, «ONE UI · Fundación»); acá se repiten sus MEDIDAS con los mismos tokens
   (botón 52/48/44, campo 56 radio 16, hoja radio 28, píldoras) para que la primera pantalla y la app se sientan la misma. Solo tokens: sin colores sueltos. */

body.puerta { --surface-campo: var(--card2); }

/* ── Botones: principal (.btn-valor 52), secundario (.btn-ghost 48), terciario (.btn-texto 44). Solo dentro de las hojas, el registro y las páginas sueltas (el hero de la landing conserva el suyo). ── */
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); position: relative; min-height: var(--alto-boton); padding: 0 var(--sp-5); border-radius: var(--radio-full);
  font-size: var(--fs-cuerpo); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; margin-top: 0;
  transition: transform var(--t-presion) var(--ease), filter var(--t-presion) var(--ease), background-color var(--t-presion) var(--ease), opacity var(--t-toque) var(--ease); }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn-ghost { min-height: var(--alto-boton-sec); }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn-sm { min-height: var(--alto-boton-ter); padding: 0 var(--sp-4); font-size: var(--t-14); align-self: auto; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn-block { width: 100%; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn:hover { transform: none; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn:active:not(:disabled):not(.cargando) { transform: scale(.98); filter: brightness(.92); }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn-ghost:active:not(:disabled) { background: var(--overlay-medium); filter: none; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn:disabled { opacity: .45; cursor: not-allowed; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn:focus-visible, body.puerta .btn-texto:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn.cargando { color: transparent; pointer-events: none; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn.cargando > * { visibility: hidden; }
body.puerta :is(.ob, .oli-modal, .pu-pag) .btn.cargando::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid var(--btn-giro, currentColor); border-right-color: transparent; animation: oliGiro var(--t-giro) linear infinite; }
body.puerta .btn-valor { --btn-giro: var(--oli-900); }
/* el terciario: texto con ícono, 44 px, sin borde; en estas páginas también reemplaza a los enlaces sueltos */
body.puerta .btn-texto { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--alto-boton-ter); padding: 0 var(--sp-4); border: 0; border-radius: var(--radio-full); background: transparent; color: var(--text-primary);
  font: inherit; font-size: var(--t-14); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--t-presion) var(--ease), transform var(--t-presion) var(--ease); }
body.puerta .btn-texto:active:not(:disabled) { transform: scale(.98); background: var(--overlay-medium); }
@media (hover: hover) and (pointer: fine) { body.puerta .btn-texto:hover:not(:disabled) { background: var(--overlay-medium); } }
body.puerta .btn-texto:disabled { opacity: .45; cursor: not-allowed; }
body.puerta .btn-texto .ic { width: 20px; height: 20px; }

/* ── Campos rellenos: 56 px, radio 16, sin borde en reposo, anillo al enfocar, error con ícono ── */
body.puerta :is(.field, .campo, .ob-field, .oli-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  width: 100%; min-height: var(--alto-campo); padding: 0 var(--sp-4); border: 0; border-radius: var(--radio-campo); background: var(--surface-campo); color: var(--text-primary); font-size: 16px; margin: 0;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t-toque) var(--ease); }
body.puerta .oli-modal input:not([type="checkbox"]):not([type="radio"]) { margin: var(--sp-2) 0 0; }
body.puerta :is(.field, .campo, .ob-field) :is(input, select):focus-visible, body.puerta .oli-modal input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--text-value); }
body.puerta :is(.field, .campo, .ob-field, .oli-modal) :is(input, select)[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error-fg); }
body.puerta :is(.field, .campo, .ob-field) { margin: 0 0 var(--sp-3); }
body.puerta :is(.field, .campo, .ob-field) > label { display: block; margin: 0 0 var(--sp-2) var(--sp-1); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 600; color: var(--text-secondary); }
body.puerta .pw-wrap input { padding-right: 56px; }
body.puerta .pw-toggle { right: 6px; width: 44px; height: 44px; border-radius: 50%; color: var(--text-secondary); }
body.puerta .pw-toggle:hover { color: var(--text-primary); }
body.puerta .pw-toggle:focus-visible { outline: var(--focus-outline); outline-offset: 0; }
body.puerta :is(.campo-ayuda, .campo-error, .pu-err, .oli-modal .err) { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-2) 0 0 var(--sp-1); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); }
body.puerta .campo-ayuda { color: var(--text-secondary); }
body.puerta :is(.campo-error, .pu-err, .oli-modal .err) { color: var(--error-fg); }
body.puerta :is(.campo-error, .pu-err, .oli-modal .err):empty { display: none; }
body.puerta :is(.campo-ayuda, .campo-error:not(:empty), .pu-err:not(:empty), .oli-modal .err:not(:empty))::before { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; font-size: var(--t-11); font-weight: 800; line-height: 1; }
body.puerta .campo-ayuda::before { content: "i"; background: var(--info-bg); color: var(--info-fg); }
body.puerta :is(.campo-error:not(:empty), .pu-err:not(:empty), .oli-modal .err:not(:empty))::before { content: "!"; background: var(--error-fg); color: var(--surface-card); }
/* casilla de Términos: 24 px y toda la fila se toca (44 mínimo) */
body.puerta .consent { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--alto-boton-ter); margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); color: var(--text-secondary); cursor: pointer; }
body.puerta .consent input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--text-value); }
body.puerta .consent a { display: inline; padding: 0; color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── Hoja de ingreso (celular: sube desde abajo con manija; escritorio: diálogo centrado) ── */
body.puerta .oli-modal { border-radius: var(--radio-hoja); }
@media (max-width: 599px) { body.puerta .oli-modal { border-radius: var(--radio-hoja) var(--radio-hoja) 0 0; padding-top: var(--sp-6); } body.puerta .oli-modal::before { top: var(--sp-2); width: 36px; height: 4px; margin-left: -18px; } }
body.puerta .oli-modal h3 { font-size: var(--fs-seccion); line-height: var(--lh-seccion); margin: 0 0 var(--sp-1); }
body.puerta .oli-modal .muted { font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); }
.pu-olvide { display: flex; justify-content: flex-end; margin: calc(var(--sp-1) * -1) 0 var(--sp-2); }
.pu-acciones { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.pu-acciones .btn-texto { width: 100%; }
body.puerta #modalBox :is(.switch, .pu-acciones) a, body.puerta #modalBox button.btn-texto { text-decoration: none; }

/* ── Registro guiado: hoja a pantalla casi completa en el celular, diálogo en escritorio ── */
body.puerta .ob { padding: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; animation: hojaFade var(--t-cambio) ease both; }
body.puerta .ob-hoja { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; height: calc(100% - max(16px, env(safe-area-inset-top))); max-height: 100%; background: var(--surface-card); color: var(--text-primary);
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0; box-shadow: var(--elev-2); animation: obSube var(--t-hoja) var(--ease) both; overflow: hidden; }
@keyframes obSube { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (min-width: 600px) { body.puerta .ob { align-items: center; padding: var(--sp-5); } body.puerta .ob-hoja { height: auto; max-height: min(780px, 100%); border-radius: var(--radio-hoja); } }
body.puerta .ob-hoja::before { content: ""; position: absolute; top: var(--sp-2); left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: var(--radio-full); background: var(--border-default); }
body.puerta .ob-top { display: grid; grid-template-columns: var(--touch) 1fr var(--touch); align-items: center; padding: var(--sp-4) var(--sp-3) 0; gap: var(--sp-2); }
body.puerta .ob-logo { height: 24px; justify-self: center; }
body.puerta .ob-close, body.puerta .ob-back { display: grid; place-items: center; width: var(--touch); height: var(--touch); padding: 0; border: 0; border-radius: 50%; background: var(--overlay-medium); color: var(--text-primary); cursor: pointer;
  transition: background-color var(--t-presion) var(--ease), transform var(--t-presion) var(--ease); }
body.puerta .ob-back[hidden] { display: block; visibility: hidden; }
body.puerta .ob-close:active, body.puerta .ob-back:active { transform: scale(.94); background: var(--overlay-strong); }
body.puerta .ob-close:focus-visible, body.puerta .ob-back:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
body.puerta .ob-close .ic, body.puerta .ob-back .ic { width: 22px; height: 22px; }
body.puerta .ob-prog { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) 0; }
body.puerta .ob-prog-n { margin: 0; font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); font-weight: 700; color: var(--text-secondary); }
body.puerta .ob-dots { display: flex; gap: var(--sp-2); justify-content: stretch; margin: 0; }
body.puerta .ob-dots i { flex: 1; width: auto; height: 4px; border-radius: var(--radio-full); background: var(--overlay-medium); }
body.puerta .ob-dots i.on { background: var(--text-value); width: auto; }
body.puerta .ob-body { flex: 1; min-height: 0; display: block; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-5); }
body.puerta .ob-step { max-width: none; margin: 0; padding: var(--sp-4) 0 var(--sp-5); }
body.puerta .ob-step h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-seccion); line-height: var(--lh-seccion); font-weight: 700; }
body.puerta .ob-sub { margin: 0 0 var(--sp-4); font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); color: var(--text-secondary); }
body.puerta .ob-field .ob-sub { margin: var(--sp-2) 0 0 var(--sp-1); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); }
/* acción fija abajo: el botón principal siempre al alcance del pulgar, sobre el borde seguro */
body.puerta .ob-acc { flex: none; display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5) max(var(--sp-4), env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--surface-card) 78%, transparent); }
body.puerta .ob-acc:empty { display: none; }
body.puerta .ob-acc .btn-texto { justify-self: center; }
body.puerta .ob-socio { margin: var(--sp-1) 0 var(--sp-2); border-radius: var(--radio-campo); background: var(--surface-campo); }
body.puerta .ob-socio > summary { padding: 0 var(--sp-4); font-size: var(--fs-cuerpo); }
body.puerta .ob-socio > .ob-field, body.puerta .ob-socio > .campo { padding: 0 var(--sp-3); }
body.puerta .ob-socio > .ob-sub { padding: 0 var(--sp-4) var(--sp-3); }
body.puerta .ob-confirma { border: 0; border-radius: var(--radio-campo); background: var(--info-bg); }
body.puerta .ob-listo .cn { margin-bottom: var(--sp-4); }
body.puerta .ob-ig-cta { margin: var(--sp-3) 0 0; }
@media (prefers-reduced-motion: reduce) { body.puerta .ob, body.puerta .ob-hoja { animation: none; } }

/* ── Páginas sueltas (Ayuda, Legal, restablecer): cabecera común con «volver» redondo de 48 px ── */
.pu-volver { display: inline-grid; place-items: center; flex: none; width: var(--touch); height: var(--touch); border-radius: 50%; background: color-mix(in srgb, var(--oli-00) 14%, transparent); color: var(--oli-00); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-presion) var(--ease), transform var(--t-presion) var(--ease); }
.pu-volver:active { transform: scale(.94); background: color-mix(in srgb, var(--oli-00) 24%, transparent); }
.pu-volver:focus-visible { outline: 2px solid var(--oli-00); outline-offset: 2px; }
.pu-volver .ic, .pu-volver svg { width: 24px; height: 24px; }
.pu-cab { display: flex; align-items: center; gap: var(--sp-3); max-width: 1080px; margin: 0 auto var(--sp-3); }
.pu-cab-t { margin: 0; font-size: var(--fs-seccion); line-height: var(--lh-seccion); font-weight: 700; }
.pu-pag .tarjeta { margin-bottom: var(--sp-3); }
body.puerta .pw-wrap input { padding-right: 56px !important; }
.pu-acciones .switch { margin: 0; }
body.puerta .modal-aviso { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border: 0; border-radius: var(--radio-campo); background: var(--info-bg); color: var(--text-primary); font-size: var(--fs-apoyo); line-height: var(--lh-apoyo); }
body.puerta .ob { z-index: var(--z-modal); }   /* por encima del aviso de cookies y de la barra de entorno: el botón principal nunca queda tapado */
.pu-cab-nav { gap: var(--sp-3); }
.pu-cab-nav .brand { margin: 0; }
/* «Activá tu cuenta» (la agrega club-activar.js) se ve como los otros terciarios del ingreso */
body.puerta #clubActivarRow { margin: 0; }
body.puerta #modalBox #clubActivarLink { display: flex; justify-content: center; align-items: center; min-height: var(--alto-boton-ter); padding: var(--sp-2) var(--sp-4); border-radius: var(--radio-full); font-size: var(--t-14); font-weight: 600; line-height: 1.3; text-align: center; color: var(--text-primary); }
body.puerta #modalBox #clubActivarLink:active { background: var(--overlay-medium); }