/* Ajustes propios sobre el tema. Se carga DESPUES de iberluffa-base.css para no tocar
   ese archivo, que llega tal cual del tema y se compara pixel a pixel con la web actual.
   Aqui solo van desviaciones pedidas expresamente por el cliente. */

/* Cabecera del popup legal.
   El tema pintaba un circulo con degradado en la esquina inferior derecha; como la
   cabecera lleva overflow:hidden, ese circulo se cortaba y dejaba una mancha clara con el
   borde recto justo detras del titulo. Se sustituye por un velo diagonal suave que no
   tiene bordes que cortar, y se le da un poco mas de aire al titulo. */
.lgp-head::before {
  right: auto;
  bottom: auto;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(115deg, rgba(162, 191, 106, 0.18) 0%, rgba(162, 191, 106, 0) 62%);
}

.lgp-head {
  padding: 26px 68px 22px 28px;
}

/* La linea de la antetitulo iba pegada al texto; un pelin mas de separacion la asienta. */
.lgp-eyebrow {
  margin-bottom: 9px;
  opacity: 0.92;
}

/* El aspa quedaba muy tenue sobre el verde. */
.lgp-close {
  background: rgba(244, 233, 211, 0.14);
  border: 1px solid rgba(244, 233, 211, 0.22);
}

.lgp-close:hover {
  background: rgba(244, 233, 211, 0.26);
}

/* Filo de separacion entre la cabecera y el cuerpo, que antes se juntaban a hueso. */
.lgp-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(162, 191, 106, 0.55), rgba(162, 191, 106, 0));
}

@media (max-width: 768px) {
  .lgp-head {
    padding: 22px 60px 18px 22px;
  }
}

/* Anillo de foco.
   Dawn lo pinta con un halo BLANCO de 3px mas una sombra oscura difusa. Sobre los fondos
   crema de la tienda queda un recuadro blanco muy feo, sobre todo en el buscador de pais
   del formulario de contacto. Se sustituye por un anillo del verde de marca: sigue siendo
   perfectamente visible al navegar con teclado, que es para lo que sirve. */
:root {
  --focused-base-outline: 2px solid rgba(39, 64, 1, 0.55);
  --focused-base-outline-offset: 2px;
  --focused-base-box-shadow: 0 0 0 3px rgba(162, 191, 106, 0.45);
}

/* Selector de idioma: los estados de hover y activo de cada opcion se tocaban entre si.
   Se separan para que cada uno se lea como una pieza propia. */
.lang-menu {
  padding: 8px;
}

.lang-opt + .lang-opt {
  margin-top: 6px;
}

.lang-opt {
  padding: 9px 11px;
}

/* ══════════════════════════════════════════════════════════════════════════════════
   PANEL DE ACCESO
   El tema traia el boton "Continuar con Shop" (el acceso de Shopify) y un unico campo de
   correo. Ahora el panel accede con correo y contrasena, ofrece Google y crea la cuenta sin
   salir de la pagina, asi que hacen falta piezas nuevas. Todas heredan el lenguaje del
   tema: pastillas, verde de marca, tipografias y el mismo tratamiento de los campos.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* Las tres vistas del panel se turnan con el atributo hidden, que tiene que ganar a los
   display de las clases del tema (.up-form es flex). */
.user-panel [hidden] {
  display: none;
}

/* El alta pide mas campos que el acceso, asi que en pantallas bajas el contenido se desplaza
   por dentro. Se desplaza SOLO esta zona y no el panel entero: asi el logotipo, las pestanas
   y la flechita que apunta al icono de usuario siguen en su sitio.
   El margen negativo con el mismo relleno deja aire para el halo de foco de los campos, que
   si no lo recortaria el borde de la zona desplazable. */
.up-auth {
  max-height: calc(100vh - var(--hh) - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px;
  margin: 0 -4px;
}

/* Aviso de error. Misma caja que el .up-alert del tema pero en rojo, que es el color con el
   que ya se marcan los campos mal rellenados. */
.up-fallo {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.32);
  border-radius: 12px;
  padding: 10px 13px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  color: #c0392b;
}

/* Acceso con Google: lo pinta su propia libreria, asi que aqui solo se le reserva el sitio
   (sin reserva, el panel pega un salto cuando termina de cargar). */
.up-google {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.up-nota {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(39, 64, 1, 0.62);
  text-align: center;
}

/* Sin boton de Google tampoco hay separador, asi que el aviso se separa el mismo aire que
   daba aquel del primer campo. */
.up-social .up-nota {
  margin-bottom: 14px;
}

.up-apagado {
  margin-top: 14px;
}

/* Contrasena con boton de ver/ocultar dentro del propio campo. */
.up-pass {
  position: relative;
  display: flex;
}

.up-pass input {
  flex: 1;
  padding-right: 44px;
}

.up-ojo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--v);
  opacity: 0.55;
  transition: opacity 0.18s ease-out;
}

.up-ojo:hover {
  opacity: 1;
}

.up-ojo svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Con la contrasena a la vista se ensena el ojo tachado. */
.up-ojo .up-ojo-off,
.up-ojo.on svg {
  display: none;
}

.up-ojo.on .up-ojo-off {
  display: block;
}

/* "Recordarme" va pegada al boton de acceder, no separada como la casilla legal. */
.up-recordar {
  margin-top: 2px;
}

/* Aceptacion de los legales al crear la cuenta: la casilla del tema mas su aviso de error,
   que el .up-err solo ensena dentro de un campo. */
.up-legales .up-check {
  margin-top: 4px;
}

.user-panel-tabs .up-legales.err .up-err {
  display: block;
}

.user-panel-tabs .up-legales.err .up-check input {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

/* Cambio entre acceder y crear cuenta: un boton con aspecto de enlace, como el pie legal. */
.up-cambio {
  font-size: 11.5px;
  color: rgba(39, 64, 1, 0.62);
  text-align: center;
  margin-top: 12px;
}

.up-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--v);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.up-link:hover {
  color: var(--save);
}

/* Sesion iniciada. La pestana deja de pedir datos y pasa a ser el menu de la cuenta: quien
   esta dentro ve con que cuenta y desde donde entrar a cada pantalla del panel. */
.up-sesion-ficha {
  text-align: center;
  padding: 2px 2px 16px;
  border-bottom: 1px solid rgba(39, 64, 1, 0.1);
}

.up-sesion-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(162, 191, 106, 0.22);
  color: var(--v);
}

.up-sesion-ico svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.up-sesion-nombre {
  font-size: 15px;
  font-weight: 800;
  color: var(--v);
  letter-spacing: -0.01em;
  word-break: break-word;
}

.up-sesion-mail {
  font-size: 12px;
  color: rgba(39, 64, 1, 0.62);
  margin-top: 3px;
  word-break: break-all;
}

/* Menu del panel. Misma pieza que el menu lateral de la cuenta (.ct-menu-a): fila con icono
   de trazo, nombre en versalitas y flechita que se adelanta al pasar por encima. */
.up-sesion-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.up-sesion-a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--v);
  transition: background 0.22s var(--ease);
}

.up-sesion-a svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El nombre ocupa el hueco libre, asi que la flecha queda pegada al borde derecho aunque los
   textos midan distinto en cada idioma. */
.up-sesion-a span {
  flex: 1;
  min-width: 0;
}

.up-sesion-ir {
  opacity: 0.35;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.up-sesion-a:hover {
  background: rgba(162, 191, 106, 0.24);
}

.up-sesion-a:hover .up-sesion-ir {
  opacity: 0.7;
  transform: translateX(2px);
}

/* Salir no es un sitio mas del menu: se separa con su propio filo para no pulsarlo de paso. */
.up-sesion-pie {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(39, 64, 1, 0.1);
}

/* Salir es la accion secundaria: contorno, sin peso visual de pastilla verde. */
.up-salir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid rgba(39, 64, 1, 0.18);
  color: var(--v);
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.up-salir svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.up-salir:hover {
  background: rgba(39, 64, 1, 0.05);
  border-color: rgba(39, 64, 1, 0.3);
}

/* Boton apagado: cuando falta la configuracion de la API o mientras se espera respuesta. */
.up-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.up-submit:disabled::before {
  transform: translateX(-101%);
}

@media (max-width: 768px) {
  /* En movil el panel es una hoja inferior que crece hacia arriba: el tope lo pone la
     pantalla, no la cabecera. */
  .up-auth {
    max-height: 62vh;
  }
}

/* El enlace de crear cuenta encabeza el formulario de acceso, asi que necesita separarse
   del subtitulo y del primer campo en vez de rematar el bloque. */
.up-cambio.up-cambio-alto {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(39, 64, 1, 0.1);
}