/* ════════════════════════════════════════════════════════════════════════
   LA PÁGINA DE CREAR CUENTA

   Página aparte, no una sección más de la landing. Quien llega aquí ya
   decidió: lo último que necesita es seguir viendo argumentos de venta
   mientras escribe su contraseña.
   ════════════════════════════════════════════════════════════════════════ */

/* El gris de apoyo sale de `estilos.css` (`--tinta-texto`, 5,75:1 sobre la
   tarjeta). Antes era `var(--gris, #64748b)` y `--gris` no existe en la
   landing —es del panel—, así que mandaba el respaldo: 4,43:1, justo por
   debajo del 4,5:1 de WCAG AA, en el texto de ayuda de TODO el registro.
   Un respaldo que nadie comprueba acaba siendo el valor de verdad. */

.pagina-registro { background: var(--tinta); min-height: 100svh; }

.reg-barra {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 16px;
  max-width: 820px; margin: 0 auto;
}
.reg-marca { display: flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 700; color: inherit; }
.reg-volver { color: var(--tinta-texto); text-decoration: none; font-size: .9rem; }
.reg-volver:hover { color: inherit; }

.reg-centro { max-width: 560px; margin: 0 auto; padding: 8px 20px 60px; }

/* Dónde está y cuánto falta. Sin esto, cada paso parece el penúltimo. */
.reg-pasos {
  display: flex; gap: 6px; list-style: none; margin: 0 0 22px; padding: 0;
  font-size: .72rem; color: var(--tinta-texto);
}
.reg-pasos li { flex: 1; display: flex; align-items: center; gap: 6px;
  padding-top: 10px; border-top: 3px solid var(--borde);
  transition: border-color .3s, color .3s; }
.reg-pasos li span {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--borde); color: var(--tinta-texto);
  font-weight: 700; font-size: .66rem; flex-shrink: 0;
}
.reg-pasos li.actual, .reg-pasos li.hecho { border-top-color: var(--acento); color: var(--papel-texto); }
.reg-pasos li.actual span, .reg-pasos li.hecho span { background: var(--acento); color: var(--sobre-acento); }
/* En estrecho, el rótulo del paso activo no cabe junto a su círculo: «Su
   negocio» partía en dos líneas y descuadraba la fila entera, mientras los
   otros tres se quedaban en un número suelto sin explicar. Se ocultan TODOS
   los rótulos y el nombre del paso va debajo, en una línea, con su posición:
   «Paso 1 de 4 · Su negocio» dice más que cuatro círculos. */
@media (max-width: 560px) {
  .reg-pasos li { font-size: 0; gap: 0; }
  .reg-pasos li span { font-size: .66rem; }
}

.reg-tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px;
  padding: 30px 26px;
}
@media (max-width: 520px) { .reg-tarjeta { padding: 24px 18px; border-radius: 14px; } }

.reg-paso h1 { font-family: var(--display, Georgia, serif); font-size: 1.5rem;
  margin: 0 0 6px; line-height: 1.25; }
.reg-sub { color: var(--tinta-texto); font-size: .92rem; margin: 0 0 24px; }

.reg-paso .campo { display: block; margin-bottom: 18px; }
.reg-paso .campo > span { display: block; font-size: .78rem; font-weight: 600;
  margin-bottom: 7px; }
.reg-paso .campo em { font-style: normal; color: var(--tinta-texto); font-weight: 400; }
.reg-paso .campo input, .reg-paso .campo select {
  width: 100%; padding: 13px 14px; border-radius: 11px;
  border: 1px solid var(--borde); background: var(--superficie); font-family: inherit;
  /* 16 px o iOS amplía la página al tocar el campo. */
  font-size: 16px; color: inherit;
}
@media (pointer: fine) { .reg-paso .campo input, .reg-paso .campo select { font-size: .95rem; } }
.reg-paso .campo input:focus, .reg-paso .campo select:focus {
  outline: 2px solid rgb(37 99 235 / .35); outline-offset: 1px; border-color: var(--acento); }
.reg-paso .campo small { display: block; color: var(--tinta-texto);
  font-size: .78rem; margin-top: 6px; line-height: 1.45; }

.reg-codigo { text-align: center; letter-spacing: .5em; font-size: 24px !important;
  font-weight: 700; font-variant-numeric: tabular-nums; }

.reg-botones { display: flex; gap: 10px; margin-top: 26px; }
.reg-botones .btn { flex: 1; }
.btn-bloque { width: 100%; margin-top: 26px; }
.btn[disabled] { opacity: .6; cursor: default; }

.reg-planes { display: grid; gap: 10px; margin-bottom: 22px; }
.reg-plan {
  text-align: left; padding: 15px 17px; border-radius: 13px; cursor: pointer;
  border: 2px solid var(--borde); background: var(--superficie); font: inherit; color: inherit;
  display: grid; gap: 3px; transition: border-color .18s, background .18s;
}
.reg-plan:hover { border-color: rgb(37 99 235 / .5); }
.reg-plan.elegido { border-color: var(--acento); background: rgb(37 99 235 / .05); }
.reg-plan strong { font-size: 1rem; }
.reg-precio { font-size: 1.22rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-limite { font-size: .82rem; color: var(--tinta-texto); }

/* El aviso solo ocupa espacio cuando dice algo. */
.aviso { display: none; }
.aviso.visible {
  display: block; padding: 12px 15px; border-radius: 11px; margin-bottom: 20px;
  /* Del acento, no de un azul escrito a mano: con la marca en verde, el
     aviso se quedaba azul y parecía de otra página. */
  font-size: .9rem; background: rgb(var(--acento-rgb) / .1); color: var(--acento-hondo);
}
.aviso.visible.mal { background: rgb(190 36 36 / .1); color: #b91c1c; }

.btn-enlace { display: block; margin: 16px auto 0; background: none; border: none;
  color: var(--tinta-texto); font: inherit; font-size: .88rem; cursor: pointer;
  text-decoration: underline; }

.reg-pie { text-align: center; color: var(--tinta-texto); font-size: .9rem; margin-top: 22px; }

/* El tope de profesionales extra, bajo el límite del plan. Secundario en peso
   pero presente: decide la elección de quien trabaja con uno o dos más. */
.reg-extra {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  line-height: 1.35;
  color: rgb(var(--acento-rgb) / .9);
}
.reg-plan.elegido .reg-extra { color: rgb(var(--acento-rgb)); }

/* ── Tema oscuro ─────────────────────────────────────────────────────
   Quien se registra lo hace muchas veces de noche y desde el teléfono. Si
   su sistema está en oscuro, una página blanca a pantalla completa deslumbra
   — y la primera impresión del producto es esa.

   Por defecto sigue al SISTEMA; si la persona elige, su elección manda y se
   recuerda. Lo pone `registro.js` con la clase `.oscuro`, no una media query:
   con la media query, elegir «claro» teniendo el sistema en oscuro no habría
   servido de nada. Se redefinen los tripletes y lo derivado sigue solo.

   Misma llave de almacenamiento que el panel, para que pasar del registro al
   panel no cambie de tema por el camino.

   Solo alcanza a `/registro`: la portada lleva ilustraciones pensadas en
   claro —las burbujas de WhatsApp, las hojas de agenda— y pasarlas a oscuro
   es otro trabajo, no un cambio de variables. */
.pagina-registro.oscuro {
    /* Grises neutros, como el panel: eran azul marino y con el acento verde
       la página se veía azul con botones verdes. */
    --fondo-rgb:      12  12  12;
    --superficie-rgb: 23  23  23;
    --borde-rgb:      52  52  52;
    --texto-rgb:      240 240 240;
    --texto-2-rgb:    160 160 160;
    /* El verde de marca sobre fondo oscuro se apaga: se aclara conservando
       el tono, igual que `--acento-texto` en la web de cada negocio. */
    --acento-rgb:     74  222 128;
    --acento-hondo-rgb: 34 197 94;

    --tinta:        rgb(var(--fondo-rgb));
    --tinta-2:      rgb(var(--superficie-rgb));
    --tinta-3:      rgb(var(--borde-rgb));
    --tinta-texto:  rgb(var(--texto-2-rgb));
    --papel:        rgb(var(--superficie-rgb));
    --papel-2:      rgb(var(--borde-rgb));
    --papel-texto:  rgb(var(--texto-rgb));
    --papel-gris:   rgb(var(--texto-2-rgb));
    --superficie:   rgb(var(--superficie-rgb));
    --borde:        rgb(var(--borde-rgb));
    --gris:         rgb(var(--texto-2-rgb));
    --acento:       rgb(var(--acento-rgb));
    --oro:          rgb(var(--acento-rgb));
    --oro-hondo:    rgb(var(--acento-hondo-rgb));
    --oro-filete:   linear-gradient(135deg, rgb(var(--acento-rgb)), rgb(var(--acento-hondo-rgb)));
    /* Sobre el azul claro del tema oscuro, el texto blanco no se lee: va el
       fondo oscuro, que es lo que contrasta con ÉL. */
    --sobre-acento: rgb(var(--fondo-rgb));

    /* El verde de TEXTO se invierte: en claro va el oscurecido, en oscuro el
       vivo, que es el que contrasta contra la superficie oscura (4,74:1).
       Sin esto, `.aviso.si` y la pista del código quedaban verde oscuro
       sobre fondo oscuro — invisibles, y sin que nada avisara. */
    --verde-texto-rgb: var(--verde-rgb);
    --verde-texto:  rgb(var(--verde-rgb));

    color-scheme: dark;   /* los campos de fecha y los selectores del sistema */
    background: var(--tinta);
    color: var(--papel-texto);
  }

  /* El logo es un `<img>`: ahí el SVG está aislado y no hereda variables.
     Se aclara en bloque, que para una marca monocroma basta. */
  .pagina-registro.oscuro .reg-marca img { filter: invert(1) hue-rotate(180deg); }

/* El nombre del paso, solo donde los rótulos de la fila no caben. */
.reg-paso-nombre { display: none; }
@media (max-width: 560px) {
  .reg-paso-nombre {
    display: block; margin: -14px 0 20px;
    font-family: var(--libro); font-size: .72rem; letter-spacing: .04em;
    color: var(--tinta-texto);
  }
  .reg-paso-nombre b { color: var(--papel-texto); font-weight: 600; }
}

/* La cabecera del registro: el tema a la izquierda de «Volver». */
.reg-acciones { display: flex; align-items: center; gap: 4px; }
.reg-tema {
  display: grid; place-items: center;
  width: 44px; height: 44px;           /* zona táctil completa */
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--tinta-texto); border-radius: 999px;
  transition: color .16s, background .16s;
}
.reg-tema svg { width: 19px; height: 19px; }
.reg-tema:hover { color: var(--papel-texto); background: rgb(var(--texto-2-rgb) / .1); }

/* El código promocional, confirmado. Es un estado de ÉXITO —«este código le
   da el mes»— y por eso cambia de tono, no solo de texto: la diferencia entre
   las dos frases es fácil de pasar por alto mientras se escribe.
   El verde de la landing (#059669) es el tono oscuro, no el vivo: aquí es
   texto pequeño y el vivo no pasaría AA. Se mide con scripts/auditar-ui.js. */
.reg-paso .campo small.pista-ok { color: var(--verde-texto); font-weight: 600; }

/* ── La autorización para medir nuestra publicidad ───────────────────
   La casilla NO se agranda: se hace táctil la etiqueta entera, que es lo
   que la gente intenta tocar. Mínimo 44 px de alto. */
.reg-casilla {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  min-height: 44px; padding: 11px 0; margin-top: 6px;
  font-size: .88rem; line-height: 1.5; color: var(--papel-texto);
}
.reg-casilla input[type="checkbox"] {
  flex: none; width: 19px; height: 19px; margin-top: 2px; cursor: pointer;
  accent-color: var(--oro);
}
.reg-casilla a { color: var(--oro-hondo); text-underline-offset: 2px; }
.reg-casilla-pista {
  margin: 0 0 4px 30px; font-size: .8rem; color: var(--papel-gris);
}