/* ============================================================
   Chillin Online · las tres pantallas de cuenta
   ------------------------------------------------------------
   DÓNDE SE PEGA: Ajustes del sitio → Código y analítica →
   código del pie del sitio, dentro de la misma etiqueta <style>
   que el resto.

   QUÉ ES ESTO: entrar (`/users/sign_in`), crear cuenta
   (`/users/sign_up`) y recuperar la contraseña
   (`/users/password/new`). Son las tres últimas pantallas
   públicas que seguían con el traje del tema, y son las que
   más se ven: por aquí pasa TODO el que vuelve a la academia.

   EL MARCO NO ESTÁ AQUÍ. El papel, el telón, la barra y el pie
   los pone `marco.css`, que desde el 30-ago-2026 lleva estas
   tres clases en su prefijo. Aquí solo vive lo de dentro: la
   plancha y el formulario.

   LAS TRES SON LA MISMA PANTALLA con distinto contenido, así
   que van juntas en un archivo y comparten prefijo. Thinkific
   les da tres marcados casi calcados (`sign-in__*`,
   `sign-up__*`, `password-reset__*`), y lo que de verdad
   cambia (la fila de nombre y apellido, la casilla de los
   términos) tiene su sección al final.

   DE DÓNDE VIENE LO QUE HAY QUE APAGAR, que es la mitad del
   archivo:

     · Los titulares van en **Yellowtail**, una caligráfica de
       27px que el tema usa para los encabezados de página.
       "Welcome!" en letra manuscrita sobre un formulario de
       acceso no se lee como la academia, se lee como una
       invitación de boda.
     · Los rótulos van en `#f5f5f5`, gris casi blanco, porque
       el tema pinta estas pantallas en azul marino. Sobre el
       papel hueso son invisibles.
     · El botón es negro con 4 de radio y borde de 2.
     · Las tres cajas de fuera (`__container`, `__wrapper`,
       `__form`) son una rejilla de doce columnas con sus
       `flex-basis` y sus rellenos, y aquí sobra entera: lo que
       hay dentro es UNA columna estrecha y centrada.

   LO QUE NO SE TOCA, a propósito:

     · El campo trampa (`.honeypot-field`) sigue escondido en
       1x1 como lo deja el tema. Es la red contra los robots que
       rellenan formularios: tocarlo es quitarla, y aquí se toca
       sin querer, porque es un `.form__group` más.
     · Los dos rótulos del divisor ("o entra con" y "o crea la
       cuenta con") vienen los DOS en el marcado y el tema
       esconde el que no toca. Por eso aquí se viste el de cada
       pantalla por su nombre y al otro no se le toca nada: una
       regla que los alcance a los dos pesa más que la del tema
       y saca los dos rótulos a la vez.
     · Los `name` de los campos, los `id` y el token del
       formulario son de Thinkific y por ahí pasa el alta de
       verdad. Aquí no se mueve ni un nodo de sitio: esto es
       estilo, y lo poco que hay que reescribir (los rótulos en
       inglés) lo hace `cuenta.js` con la red de siempre.
   ============================================================ */

/* La misma paleta que el marco, la clase y el portal. Se declara
   otra vez porque `marco.css` la cuelga de su propio prefijo y
   este archivo tiene que poder leerse solo. Los valores son los
   mismos, palabra por palabra: si cambia uno, cambia en todos. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page){
  --co-cuenta-ancho:440px;
  --co-cuenta-aire:38px;
}

/* La de crear cuenta es la única que lleva ocho campos y una fila
   de dos columnas: con 440 se lee estrecha y larguísima. */
body.sign-up-page{
  --co-cuenta-ancho:540px;
}

/* ------------------------------------------------------------
   1 · EL LIENZO

   El `main` deja de ser una caja con relleno y pasa a ser el
   sitio donde la plancha se centra. Vertical incluido: estas
   pantallas tienen poco dentro y pegadas al techo se leen como
   una página a medio cargar.

   `100dvh` Y NO `100vh`: en el móvil, `vh` cuenta con la barra
   del navegador escondida, así que la pantalla mide de más y la
   plancha queda descentrada hacia abajo mientras la barra está
   a la vista. `dvh` es el alto que de verdad hay.

   EL `flex:0 0 auto` ES LO QUE SOSTIENE TODA LA SECCIÓN, y costó
   una revisión entera con la franja negra comiéndose el
   formulario. El `<body>` del tema NO es un bloque: es una
   COLUMNA FLEX de alto fijo (`height:100vh`, con su propio
   desplazamiento dentro), y la barra, el `main` y el pie son sus
   tres items. Un item de flex se encoge por defecto, así que el
   `main` recibía el hueco que sobraba (449 px en una ventana de
   700) mientras la plancha del registro medía 887: se desbordaba
   por abajo y **el pie se le montaba encima, cortando el
   formulario a media altura**. Con `flex:0 0 auto` el `main` mide
   lo que mide su contenido y el pie va detrás, siempre.

   Y EL `min-height` NO ERA EL CULPABLE PERO TAMPOCO AYUDABA: da
   justo el hueco disponible, así que coincidía con el alto al que
   el flex ya lo estaba encogiendo y no se notaba que faltara.
   Sigue aquí porque hace el trabajo contrario, el de cuando SOBRA
   sitio: con la de entrar, que es corta, evita que el pie suba a
   media pantalla.

   EL AIRE VA EN `clamp()` y no en un número fijo: entre una
   ventana de 620 y una de 1100 hay medio formulario de
   diferencia, y 48 px de margen que se leen como aire en la
   grande son un desperdicio en la pequeña. El de abajo es MAYOR
   que el de arriba a propósito: debajo está la franja negra del
   pie, y una plancha clara pegada a una banda oscura se lee como
   un corte.
   ------------------------------------------------------------ */

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) main{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
  min-height:calc(100dvh - 56px - 108px);   /* la barra y el pie */
  padding:clamp(26px, 5vh, 52px) 20px clamp(44px, 9vh, 84px);
  background:transparent;
}

/* LAS TRES CAJAS DEL TEMA, a bloque simple. Son la rejilla de
   doce columnas: traen `flex-basis`, `max-width` en porcentaje y
   rellenos laterales de 1rem que se suman a los del `main`. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
  .sign-in__container,.sign-in__wrapper,
  .sign-up__container,.sign-up__wrapper,
  .password-reset__container,.password-reset__wrapper){
  display:block;
  position:static;
  width:100%;
  max-width:var(--co-cuenta-ancho);
  flex:none;
  margin:0 auto;
  padding:0;
  background:transparent;
}

/* EL CENTRADO VERTICAL VA CON `margin:auto` Y NO CON
   `align-items:center`, que es la trampa clásica del flex: cuando lo
   de dentro es MÁS ALTO que el hueco, `center` lo reparte a los dos
   lados y la mitad de arriba se sale por el techo, donde no se puede
   desplazar. Se vio en la de crear cuenta, que con sus ocho campos
   pasa del alto de la pantalla y salía con el titular ya cortado.
   Con `margin` automático, el navegador centra si sobra sitio y se
   pega arriba si falta. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
  .sign-in__container,.sign-up__container,.password-reset__container){
  margin-top:auto;
  margin-bottom:auto;
}

/* La caja de dentro del tema trae también su porcentaje. Aquí ya
   está el ancho puesto por la de fuera, así que se llena entera. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
  .sign-in__form,.sign-up__form,.password-reset__form){
  position:static;
  width:100%;
  max-width:100%;
  flex:none;
}

/* AQUÍ NO VA UNA REGLA PARA EL RELLENO DE `.password-reset`, y
   conviene dejarlo escrito porque parece que falta: `.password-reset`
   NO es una caja de dentro, es el PROPIO `main`. Una regla que le
   ponga el relleno a cero pesa dos clases y se lleva por delante la
   de arriba, que pesa una: la plancha se quedaba pegada a la barra,
   sin el aire de arriba, y solo en esta pantalla. El `padding:2rem`
   que el tema le da ya pierde contra la regla del `main`, que empata
   en clases y gana en elementos. */

/* ------------------------------------------------------------
   2 · LA PLANCHA

   La misma pieza del portal y del recorrido de venta: blanca,
   con las esquinas del sistema y las dos sombras (la corta la
   pega al papel, la larga y abierta se lee como aire por
   debajo). Aquí es lo único que hay en pantalla, así que es
   ella la que tiene que sostenerla.
   ------------------------------------------------------------ */

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
  .sign-in__form,.sign-up__form,.password-reset__form){
  box-sizing:border-box;
  padding:var(--co-cuenta-aire) 34px 32px;
  border-radius:var(--co-plancha-radio);
  background:#fff;
  box-shadow:var(--co-plancha);
}

/* ------------------------------------------------------------
   3 · EL TITULAR

   Fuera la caligráfica. Va en la letra de la casa, con el peso y
   el espaciado de todos los titulares de la academia, y CENTRADO:
   la plancha es estrecha y un titular pegado a la izquierda le
   descuadra el eje a un formulario que sí está centrado.
   ------------------------------------------------------------ */

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
  .page__heading,.password-reset__heading){
  margin:0 0 6px;
  font-family:var(--co-sans);
  font-size:25px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.2;
  color:var(--co-tinta);
  text-align:center;
}

/* EL RENGLÓN DE DEBAJO DEL TITULAR. En la de la contraseña ya
   viene escrito por el tema (`<p>` suelto dentro del formulario);
   en las otras dos lo pone `cuenta.js`. Los dos se visten igual
   para que las tres pantallas empiecen con el mismo gesto. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
  .password-reset__form form > p,.co-cuenta-entradilla){
  margin:0 0 24px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--co-tinta-3);
  text-align:center;
}

/* ------------------------------------------------------------
   4 · LOS CAMPOS

   El tema monta cada grupo como una fila de la rejilla. Aquí son
   bloques apilados, y el rótulo va ENCIMA del campo y no dentro:
   el rótulo flotante se pierde en cuanto el navegador rellena el
   campo solo, que es lo que hace en una pantalla de acceso.

   EL PLACEHOLDER SOBRA y lo quita `cuenta.js`: Thinkific lo
   escribe igual que el rótulo, así que la misma palabra salía dos
   veces, una encima de la otra.
   ------------------------------------------------------------ */

/* EL CAMPO TRAMPA SE QUEDA FUERA (`:not(.honeypot-field)`), y esto
   costó una revisión: el trampa es un `.form__group` más, y esta
   regla le quitaba el `position:absolute` y el tamaño de 1x1 con que
   el tema lo esconde. Salía a la vista, debajo de las condiciones,
   como una raya suelta. Es la red contra los robots que rellenan
   formularios: un humano no lo ve y no lo rellena, y el que lo
   rellena no entra. Dejarlo visible es quitarla. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__group:not(.honeypot-field){
  display:block;
  position:static;
  width:100%;
  max-width:100%;
  flex:none;
  margin:0 0 16px;
  padding:0;
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__group:not(.honeypot-field):before,
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__group:not(.honeypot-field):after{content:none}

/* Y la red por si algún día se escribe otra regla que lo alcance:
   aquí queda dicho, con nombre y apellidos, que ese grupo se esconde. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__group.honeypot-field{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__label{
  display:block;
  margin:0 0 7px;
  font-family:var(--co-sans);
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--co-tinta-2);
}

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__control{
  box-sizing:border-box;
  display:block;
  width:100%;
  height:46px;
  margin:0;
  padding:0 14px;
  border:1px solid var(--co-linea-2);
  border-radius:var(--co-radio);
  background:#fff;
  font-family:var(--co-sans);
  /* 16 EXACTOS Y NO 15: por debajo de 16, el Safari del iPhone
     hace zoom él solo al enfocar un campo y deja la pantalla
     torcida, sin forma de volver salvo pellizcando. */
  font-size:16px;
  line-height:44px;
  color:var(--co-tinta);
  box-shadow:var(--co-sombra);
  transition:border-color .18s var(--co-curva),box-shadow .18s var(--co-curva);
  -webkit-appearance:none;
  appearance:none;
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__control::placeholder{
  color:var(--co-tinta-3);
  opacity:.7;
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__control:hover{
  border-color:var(--co-tinta-3);
}

/* EL FOCO SE VE, y se ve en verde. El anillo va por fuera del
   borde con una sombra y no con `outline`, que en Safari se
   dibuja cuadrado sobre una caja redondeada. Y no se quita el
   `outline` sin poner nada a cambio: quien navega con el
   teclado se quedaría sin saber dónde está. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__control:focus{
  outline:none;
  border-color:var(--co-verde);
  box-shadow:0 0 0 3px rgba(15,122,82,.15);
}

/* El campo que Thinkific marca con error, en el rojo del tema. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__control.input--error{
  border-color:#e75725;
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__control.input--error:focus{
  box-shadow:0 0 0 3px rgba(231,87,37,.16);
}

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__error-msg{
  display:block;
  margin:7px 0 0;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:#c8431a;
}
/* La red: el tema esconde los avisos con `.hidden`, y si algún
   día dejara de hacerlo saldrían los cuatro a la vez, en rojo,
   con la pantalla recién abierta y sin que nadie haya fallado. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__error-msg.hidden{display:none}

/* ------------------------------------------------------------
   5 · RECORDARME Y LA CONTRASEÑA OLVIDADA

   Van en el mismo renglón, uno a cada lado: son las dos cosas
   pequeñas de la pantalla y apiladas ocupaban dos líneas para
   decir muy poco.
   ------------------------------------------------------------ */

body.sign-in-page .form__group.form__remember-me{
  display:flex;
  align-items:center;
  gap:8px;
  margin:-2px 0 22px;
}
body.sign-in-page .form__remember-me .form__label{
  margin:0;
  font-size:13.5px;
  font-weight:500;
  color:var(--co-tinta-2);
  cursor:pointer;
}

/* LA CASILLA, dibujada. La del navegador sale azul de sistema y
   con el tamaño que le dé la gana según la plataforma; esta mide
   lo mismo en todas y se pinta del verde de la casa. El `after`
   es la marca. */
body:is(.sign-in-page,.sign-up-page) input.form__label--checkbox{
  box-sizing:border-box;
  position:relative;
  flex:none;
  width:18px;
  height:18px;
  margin:0;
  border:1px solid var(--co-linea-2);
  border-radius:5px;
  background:#fff;
  cursor:pointer;
  transition:background .16s var(--co-curva),border-color .16s var(--co-curva);
  -webkit-appearance:none;
  appearance:none;
}
body:is(.sign-in-page,.sign-up-page) input.form__label--checkbox:hover{
  border-color:var(--co-tinta-3);
}
body:is(.sign-in-page,.sign-up-page) input.form__label--checkbox:checked{
  border-color:var(--co-verde);
  background:var(--co-verde);
}
body:is(.sign-in-page,.sign-up-page) input.form__label--checkbox:checked:after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
body:is(.sign-in-page,.sign-up-page) input.form__label--checkbox:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,122,82,.18);
}
/* LO QUE SE PULSA, 44. La casilla dibuja 18 y eso es menos de la
   mitad de lo que pide un dedo. La capa va por debajo, invisible,
   y no mueve nada de sitio. */
body:is(.sign-in-page,.sign-up-page) input.form__label--checkbox:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
}

/* "¿Olvidaste tu contraseña?" se va al otro extremo del renglón. */
body.sign-in-page .form__forgot-password{
  margin-left:auto;
  font-size:13.5px;
  line-height:1.3;
  color:var(--co-verde);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .16s var(--co-curva);
}
body.sign-in-page .form__forgot-password:hover{
  color:var(--co-verde-oscuro);
  border-bottom-color:currentColor;
}

/* ------------------------------------------------------------
   6 · EL BOTÓN

   El mismo verde y la misma píldora que el botón que manda en la
   portada y que "Entrar" de la barra. De ancho completo, porque
   es la única acción de la pantalla y no hay nada con lo que
   competir por el renglón.

   SE VISTE EL `button` Y EL `input[type=submit]`: la de entrar y
   la de crear cuenta traen un `<button>` con el recaptcha colgado,
   y la de la contraseña un `<input type="submit">` a secas.
   ------------------------------------------------------------ */

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__button-group{
  display:block;
  width:100%;
  max-width:100%;
  flex:none;
  margin:0;
  padding:6px 0 0;
}

body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__button-group :is(button,input[type="submit"]).button-primary{
  box-sizing:border-box;
  display:block;
  width:100%;
  height:48px;
  margin:0;
  padding:0 18px;
  border:0;
  border-radius:99px;
  background:var(--co-verde);
  font-family:var(--co-sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:.005em;
  color:#fff;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(11,94,63,.2), 0 8px 18px rgba(11,94,63,.22);
  transition:background .18s var(--co-curva),transform .18s var(--co-curva),box-shadow .18s var(--co-curva);
  -webkit-appearance:none;
  appearance:none;
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__button-group :is(button,input[type="submit"]).button-primary:hover{
  background:var(--co-verde-oscuro);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(11,94,63,.24), 0 12px 24px rgba(11,94,63,.26);
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__button-group :is(button,input[type="submit"]).button-primary:active{
  transform:translateY(0);
}
/* El tema le pinta el foco en negro con un borde de 2, que sobre
   el verde se lee como si el botón hubiera cambiado de color. */
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__button-group :is(button,input[type="submit"]).button-primary:focus{
  border-color:transparent;
  background:var(--co-verde-oscuro);
  color:#fff;
}
body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__button-group :is(button,input[type="submit"]).button-primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,122,82,.28), 0 8px 18px rgba(11,94,63,.22);
}

/* ------------------------------------------------------------
   7 · LOS CUATRO ACCESOS DE FUERA

   LinkedIn, Facebook, Google y Apple. El tema los pinta cada uno
   del color de su marca, y cuatro rectángulos de cuatro colores
   debajo del botón verde son cinco acciones peleándose por la
   misma pantalla. Aquí son cuatro cuadrados blancos iguales con
   su icono: se leen como lo que son, la puerta de al lado.

   EL DIVISOR QUE SOBRA NO SE TOCA: el tema ya esconde el de
   "sign up" en la pantalla de entrar y el de "sign in" en la de
   crear cuenta. Aquí solo se viste el que queda.
   ------------------------------------------------------------ */

body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-logins{
  margin:26px 0 0;
  padding:0;
}

/* SE VISTE EL DIVISOR DE CADA PANTALLA, NO LOS DOS.

   Los dos rótulos vienen SIEMPRE en el marcado ("Or sign in with" y
   "Or sign up with") y el tema esconde el que no toca con
   `.sign-in .remote-sign-up__divider{display:none}`. La primera
   versión de esto los vestía a los dos con un `:is()`, que pesa más
   que la regla del tema, y salían los dos rótulos uno encima del
   otro. Pelear la especificidad para volver a esconderlo es la
   solución que se rompe a la siguiente: se nombra el par que va en
   cada pantalla y al otro no se le toca nada. */
body.sign-in-page .remote-sign-in__divider,
body.sign-up-page .remote-sign-up__divider{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0 0 18px;
  padding:0;
  font-family:var(--co-sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--co-tinta-3);
  opacity:1;
  text-align:center;
}
/* Las dos rayas del divisor. El tema las dibuja con un `:before`
   colocado en absoluto y centrado con `translate`; aquí son dos
   trozos del renglón y se estiran solos. */
body.sign-in-page .remote-sign-in__divider:before,
body.sign-in-page .remote-sign-in__divider:after,
body.sign-up-page .remote-sign-up__divider:before,
body.sign-up-page .remote-sign-up__divider:after{
  content:"";
  flex:1 1 auto;
  position:static;
  width:auto;
  height:1px;
  transform:none;
  background:var(--co-linea);
}
/* EL RÓTULO, SIN SU PLANCHA. El tema le pone al `span` el azul
   marino de la pantalla vieja (`#000a19`) para tapar la raya que le
   pasa por detrás. Aquí la raya no pasa por detrás (son dos trozos
   del renglón), así que ese fondo solo era un rectángulo oscuro en
   medio de la plancha blanca. */
body.sign-in-page .remote-sign-in__divider > span,
body.sign-up-page .remote-sign-up__divider > span{
  flex:0 0 auto;
  padding:0;
  background:transparent;
}

body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-list{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-list-item{
  display:block;
  margin:0;
}
body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-list-item > a.button{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 46 de ancho por 46 de alto: por encima de los 44 del dedo, y
     los cuatro caben en el ancho de la plancha del móvil. */
  width:46px;
  height:46px;
  margin:0;
  padding:0;
  border:1px solid var(--co-linea-2);
  border-radius:14px;
  background:#fff;
  color:var(--co-tinta);
  box-shadow:var(--co-sombra);
  transition:border-color .18s var(--co-curva),transform .18s var(--co-curva),box-shadow .18s var(--co-curva);
}
body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-list-item > a.button:hover{
  border-color:var(--co-tinta-3);
  transform:translateY(-1px);
  box-shadow:var(--co-sombra-alta);
}
body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-list-item > a.button:focus-visible{
  outline:none;
  border-color:var(--co-verde);
  box-shadow:0 0 0 3px rgba(15,122,82,.16);
}
body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-list-item > a.button .toga-icon{
  font-size:19px;
  line-height:1;
}

/* ------------------------------------------------------------
   8 · EL RENGLÓN DE DEBAJO DE LA PLANCHA

   "Crear una cuenta" en la de entrar, "Ya tengo cuenta" en la de
   crear. Va FUERA de la plancha, centrado, porque no es parte del
   formulario: es la puerta de la otra pantalla.
   ------------------------------------------------------------ */

body:is(.sign-in-page,.sign-up-page) :is(.sign-in__sign-up,.sign-up__sign-in){
  position:static;
  width:100%;
  max-width:100%;
  flex:none;
  margin:20px 0 0;
  padding:0;
  font-size:14px;
  color:var(--co-tinta-3);
  text-align:center;
}
body:is(.sign-in-page,.sign-up-page) :is(.sign-in__sign-up,.sign-up__sign-in) a{
  font-size:14px;
  font-weight:600;
  color:var(--co-verde);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .16s var(--co-curva);
}
body:is(.sign-in-page,.sign-up-page) :is(.sign-in__sign-up,.sign-up__sign-in) a:hover{
  color:var(--co-verde-oscuro);
  border-bottom-color:currentColor;
}

/* EL BOTÓN "ENTRAR" DE LA BARRA, en la pantalla de entrar. Lleva a
   donde ya estás. En las otras dos se queda, que ahí sí lleva a otro
   sitio.

   SE ESCRIBE EL CAMINO ENTERO (`.header__nav > ul > li`) y no la
   clase a secas: `marco.css` pone los renglones de la barra en fila
   con ese mismo camino, que pesa dos clases y tres elementos, y una
   regla de dos clases y un elemento pierde aunque venga después. Es
   la misma cuenta de siempre: empatan las clases, deciden los
   elementos. */
body.sign-in-page .header__nav > ul > li.header__nav-sign-in{display:none}

/* ------------------------------------------------------------
   9 · LO QUE SOLO TIENE LA DE CREAR CUENTA

   Dos cosas: la fila de nombre y apellido (que Thinkific mete en
   UN grupo con dos `input__group` dentro) y la casilla de los
   términos.
   ------------------------------------------------------------ */

/* NOMBRE Y APELLIDO, EN DOS COLUMNAS. El tema los apila poniéndole
   `margin-top:1rem` al segundo, y son dos campos cortos: apilados
   estiran el formulario una fila entera para nada. */
body.sign-up-page .form__group:has(.input__group){
  display:flex;
  gap:14px;
}
body.sign-up-page .form__group .input__group{
  flex:1 1 0;
  min-width:0;
}
body.sign-up-page .form__group .input__group:last-child{
  margin-top:0;
}

/* LA CASILLA DE LOS TÉRMINOS. Va en su propio renglón, con el
   texto al lado y no debajo, y la casilla alineada con la PRIMERA
   línea del texto: centrada se descuelga en cuanto el texto pasa
   a dos renglones, que es lo que hace a 390. */
body.sign-up-page .form__group:has(> div > input[name="user[terms]"]){
  margin-top:22px;
}
body.sign-up-page .form__group > div:has(> input[name="user[terms]"]){
  display:flex;
  align-items:flex-start;
  gap:9px;
}
body.sign-up-page input[name="user[terms]"] + label{
  margin:0;
  font-size:13px;
  font-weight:400;
  line-height:1.5;
  color:var(--co-tinta-2);
  cursor:pointer;
}
body.sign-up-page input[name="user[terms]"]{
  margin-top:2px;
}
body.sign-up-page input[name="user[terms]"] + label a{
  color:var(--co-verde);
  text-decoration:none;
  border-bottom:1px solid rgba(15,122,82,.32);
}
body.sign-up-page input[name="user[terms]"] + label a:hover{
  color:var(--co-verde-oscuro);
  border-bottom-color:currentColor;
}

/* ------------------------------------------------------------
   9 bis · LA VENTANA BAJA

   Esto NO es el móvil: es un portátil de 13 pulgadas con la
   ventana a media pantalla, que es donde de verdad se mira una
   página de acceso. Ahí no falta ancho, falta ALTO, y la
   plancha de entrar (unos 560) se sale de un hueco de 530 por
   muy poco.

   Se aprieta el aire, no el contenido: menos relleno en la
   plancha, menos hueco entre campos, y el titular un punto más
   pequeño. Los campos se quedan en 46 y la casilla en sus 44 de
   área pulsable, que es lo que no se puede tocar.

   Va por `max-height` y no por `max-width` a propósito: una
   pantalla ancha y baja tiene este problema y una estrecha y
   alta no, y mezclarlas en la misma consulta es lo que hace que
   luego el móvil salga apretado sin motivo.
   ------------------------------------------------------------ */

@media (max-height:760px) and (min-width:601px){
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page){
    --co-cuenta-aire:26px;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .page__heading,.password-reset__heading){
    font-size:22px;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .password-reset__form form > p,.co-cuenta-entradilla){
    margin-bottom:18px;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) .form__group:not(.honeypot-field){
    margin-bottom:12px;
  }
  body.sign-in-page .form__group.form__remember-me{
    margin:-2px 0 16px;
  }
  body:is(.sign-in-page,.sign-up-page) .remote-sign-in__vendor-logins{
    margin-top:20px;
  }
  body:is(.sign-in-page,.sign-up-page) :is(.remote-sign-in__divider,.remote-sign-up__divider){
    margin-bottom:14px;
  }
  body:is(.sign-in-page,.sign-up-page) :is(.sign-in__sign-up,.sign-up__sign-in){
    margin-top:16px;
  }
}

/* ------------------------------------------------------------
   10 · EL MÓVIL

   A 390 la plancha deja de flotar y se pega a los bordes: con 20
   de margen a cada lado y las esquinas grandes, el formulario se
   queda en 310 de ancho y los campos parecen de juguete. Se queda
   en plancha, pero más ancha, con menos radio y menos aire.
   ------------------------------------------------------------ */

@media (max-width:600px){
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page){
    --co-cuenta-aire:28px;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) main{
    /* Arriba y no centrado: a 667 de alto, con el teclado del
       teléfono abierto, un formulario centrado se va debajo del
       teclado y hay que buscarlo desplazando. El `min-height` a
       cero lo dice de otra forma: aquí no hay sitio de sobra que
       repartir, así que la plancha empieza donde empieza. */
    min-height:0;
    padding:22px 14px 40px;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .sign-in__container,.sign-up__container,.password-reset__container){
    margin-top:0;
    margin-bottom:0;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .sign-in__form,.sign-up__form,.password-reset__form){
    padding:var(--co-cuenta-aire) 20px 24px;
    border-radius:20px;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .page__heading,.password-reset__heading){
    font-size:22px;
  }
  /* Nombre y apellido vuelven a apilarse: en dos columnas a 390
     cada campo se queda en 140 y no cabe un apellido. */
  body.sign-up-page .form__group:has(.input__group){
    display:block;
  }
  body.sign-up-page .form__group .input__group:last-child{
    margin-top:16px;
  }
}

/* ------------------------------------------------------------
   11 · QUIEN PIDE MENOS MOVIMIENTO NO RECIBE NINGUNO

   Lo que se ve sigue siendo exactamente lo mismo: lo único que se
   va es el viaje.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .form__control,
    .form__button-group button.button-primary,
    .form__button-group input[type="submit"].button-primary,
    .remote-sign-in__vendor-list-item > a.button,
    input.form__label--checkbox){
    transition:none;
  }
  body:is(.sign-in-page,.sign-up-page,.password-reset-request-page) :is(
    .form__button-group button.button-primary:hover,
    .form__button-group input[type="submit"].button-primary:hover,
    .remote-sign-in__vendor-list-item > a.button:hover){
    transform:none;
  }
}