/* ============================================================
   Echando Raíces — checkout, paso 1 "Datos personales"
   Añadido 2026-07-30, a partir de la propuesta aprobada por Victoria
   (propuesta-datos-personales_v3.html). Cero plantillas .tpl tocadas:
   todo el marcado (pestañas invitado/sesión, campos, checkboxes) es
   nativo de PrestaShop — aquí solo se restyla.

   Nota importante: la validación de la fecha de nacimiento (obligatoria
   + bloqueo si hay menos de 18 años) que se aplica aquí es SOLO del
   lado del cliente (ver custom-checkout-personal.js). Un cliente que
   desactive JavaScript o edite el HTML podría saltársela. La
   comprobación real, del lado del servidor, sigue pendiente — necesita
   un módulo propio (hook actionCustomerFormBuilderModifier /
   validación en el guardado del cliente), todavía no implementado.
   ============================================================ */
:root {
  --hr-color-acento: #581f7c;
  --hr-color-acento-claro: #c79ce2;
  --hr-color-texto-sobre-acento: #e6dacc;
  --hr-color-fondo-oscuro: #221200;
  --hr-color-texto-claro: #e6dacc;
  --hr-color-texto-oscuro: #221200;
  --hr-color-borde-oscuro: rgba(230, 218, 204, 0.25);
  --hr-color-error: #e57468;
  --hr-hover-bg: rgba(230, 218, 204, 0.08);
  --hr-radius-accion: 8px;
  --hr-radius-card: 10px;
}

/* ============================================================
   Fondo general de la página (mismo patrón que categoría/producto/
   carrito/home — ver custom-cart-page.css, custom-category-page.css,
   custom-product-page.css: cada uno trae su propia versión de esta
   regla porque el tema nativo pone "#wrapper { background: #f6f6f6 }"
   SIEMPRE, en cualquier página, y hay que anularlo página a página).

   Esta es la causa real de "sigue viéndose blanco" (2026-07-30): mi
   primer intento anuló el blanco del ".checkout-step" en sí mismo,
   pero por debajo, entre el <body> (oscuro) y ".checkout-step", está
   este "#wrapper" — SIEMPRE gris clarito/blanco, en todas las páginas,
   por eso existe ya el mismo parche en las otras 4 hojas de estilo.
   Nadie lo había puesto para el checkout todavía porque es la primera
   vez que se toca esta página. Con esto debería quedar resuelto de
   raíz para todo el paso 1 (y dejará ya listo el fondo general para
   cuando se rediseñen los pasos 2-4). */
body#checkout #wrapper,
body#checkout #main {
  background: var(--hr-color-fondo-oscuro);
  color: var(--hr-color-texto-claro);
}

/* ---- tarjeta que envuelve el formulario del paso actual ---- */
body#checkout #checkout-personal-information-step.checkout-step {
  background: transparent !important;
}
body#checkout #checkout-personal-information-step .content {
  border: 1px solid var(--hr-color-borde-oscuro);
  border-radius: var(--hr-radius-card);
  background: rgba(230, 218, 204, 0.03);
  padding: 28px !important;
  max-width: 620px;
  color: var(--hr-color-texto-claro);
}

/* ---- pestañas "Pedir como invitado" / "Iniciar sesión" ----
   Mismo tratamiento que las pestañas Descripción/Detalles/Valoraciones
   de la ficha de producto: línea inferior fina en todo el contenedor,
   pestaña activa en violeta claro + subrayado de 2px, hover en
   inactivas con el mismo violeta claro (sin fondo). El separador "|"
   nativo entre pestañas se oculta porque ya hay gap real entre ellas. */
body#checkout #checkout-personal-information-step .nav.nav-inline {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--hr-color-borde-oscuro);
  margin: 0 0 24px !important;
  padding: 0;
}
body#checkout #checkout-personal-information-step .nav.nav-inline .nav-separator {
  display: none;
}
body#checkout #checkout-personal-information-step .nav.nav-inline .nav-link {
  color: rgba(230, 218, 204, 0.55) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 8px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px;
  background: transparent !important;
}
body#checkout #checkout-personal-information-step .nav.nav-inline .nav-link.active,
body#checkout #checkout-personal-information-step .nav.nav-inline .nav-link:hover,
body#checkout #checkout-personal-information-step .nav.nav-inline .nav-link:focus {
  color: var(--hr-color-acento-claro) !important;
  border-bottom: 2px solid var(--hr-color-acento-claro) !important;
}

/* ---- campos de texto ---- */
body#checkout #checkout-personal-information-step .form-control-label {
  color: var(--hr-color-texto-claro) !important;
  font-size: 13px;
  font-weight: 600;
  padding-top: 0;
}
body#checkout #checkout-personal-information-step .form-control {
  background: rgba(230, 218, 204, 0.05) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-accion) !important;
  color: var(--hr-color-texto-claro) !important;
  font-size: 14px;
  box-shadow: none !important;
  /* Victoria (2026-10-18, 4ª vuelta): encontrada la causa real del
     fondo blanco de autocompletado gracias a su captura del panel
     "Styles" — Chrome pinta ese campo con una regla INTERNA propia
     del navegador, "input:-internal-autofill-selected", que ningún
     CSS de autor puede seleccionar ni pisar (los pseudo-selectores
     con prefijo "-internal-" están bloqueados para páginas web a
     propósito). El "box-shadow" de más abajo (truco estándar para
     ":-webkit-autofill") sigue puesto porque ayuda en el estado
     normal de autocompletado, pero no alcanza a esta capa interna
     concreta. Lo que SÍ es controlable: esa regla interna de Chrome
     usa "light-dark(rgb(232,240,254), rgba(70,90,126,0.4))" para el
     color de fondo — es decir, Chrome ya trae un valor alternativo
     pensado para modo oscuro, y con qué color usar depende de la
     propiedad CSS estándar "color-scheme" (no es un hack: funciona
     también dentro de las reglas internas del propio navegador, por
     especificación). Con esto, el azul pálido pasa a un azul marino
     oscuro semitransparente — no es nuestro violeta/crema de marca
     exacto (Chrome no lo permite), pero encaja mucho mejor con el
     resto de campos oscuros que el azul claro de fábrica. */
  color-scheme: dark;
}
body#checkout #checkout-personal-information-step .form-control::placeholder {
  color: rgba(230, 218, 204, 0.35);
}
body#checkout #checkout-personal-information-step .form-control:focus {
  border-color: var(--hr-color-acento-claro) !important;
  background: rgba(230, 218, 204, 0.08) !important;
}
/* Victoria (2026-10-18, 2ª vuelta): seguía viendo el email en blanco
   pese al fix global de autocompletado (custom-checkout-shell.css,
   punto 18). Causa real: la regla de arriba pone "box-shadow: none
   !important" con 2 ids + 1 clase (#checkout + #checkout-personal-
   information-step + .form-control) — más específica que la regla
   global del autocompletado (1 id + 1 pseudo-clase), así que ganaba
   siempre y anulaba el box-shadow que tapa el fondo nativo del
   navegador. Se repite aquí el mismo fix con la misma especificidad
   que la regla de arriba, para que si compiten gane el valor correcto. */
body#checkout #checkout-personal-information-step .form-control:-webkit-autofill,
body#checkout #checkout-personal-information-step .form-control:-webkit-autofill:hover,
body#checkout #checkout-personal-information-step .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hr-color-texto-claro) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  caret-color: var(--hr-color-texto-claro);
  transition: background-color 9999s ease-in-out 0s;
}
/* Regla separada (no en la misma lista de selectores que la de arriba):
   si el navegador no reconoce ":autofill" (sin prefijo), una lista de
   selectores con un pseudo-elemento desconocido invalida la regla
   ENTERA, no solo ese selector suelto — así que va aparte, para que un
   fallo de soporte aquí no tumbe también la regla ":-webkit-autofill"
   de arriba. Mismo motivo que en el bloque de "Iniciar sesión" más
   abajo. */
body#checkout #checkout-personal-information-step .form-control:autofill {
  -webkit-text-fill-color: var(--hr-color-texto-claro) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  caret-color: var(--hr-color-texto-claro);
}
body#checkout #checkout-personal-information-step .form-control-comment,
body#checkout #checkout-personal-information-step .form-control-comment.form-text {
  color: rgba(230, 218, 204, 0.5) !important;
  font-size: 12px;
}
body#checkout #checkout-personal-information-step .form-group {
  margin-bottom: 18px !important;
}

/* ---- Tratamiento: radios nativos como píldoras ----
   "Masculino"/"Femenino" (texto real cambiado por JS, ver
   custom-checkout-personal.js) en vez de Sr./Sra. Sin margen propio en
   el input: el desplazamiento hacia la derecha que se veía en la
   maqueta era el margen por defecto del navegador en los radios. */
/* Corrección: el nativo trae "body#checkout section.checkout-step
   #customer-form .radio-inline { padding: 0 }" — 2 ids + 2 clases,
   misma cuenta de ids que nuestra regla pero una clase más, así que
   ganaba en el padding pese a que el resto (display/border) sí se
   aplicaba. !important para que no dependa de la carrera de
   especificidad. */
body#checkout #checkout-personal-information-step .radio-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-accion) !important;
  padding: 9px 16px !important;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: rgba(230, 218, 204, 0.75);
  /* Victoria (2026-10-18): al menos 8px entre "Masculino" y
     "Femenino" cuando caen en líneas distintas (ancho estrecho) —
     antes 0, las dos píldoras quedaban pegadas. */
  margin: 0 10px 8px 0 !important;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body#checkout #checkout-personal-information-step .radio-inline:has(input:checked) {
  border-color: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-claro) !important;
  background: rgba(199, 156, 226, 0.08) !important;
}
/* El reveal del input nativo + accent-color de este radio ("Tratamiento")
   ya lo cubre la regla compartida "body#checkout .custom-radio
   input[type=radio]" en custom-checkout-shell.css (misma que
   dirección/pago) — quitada la que había aquí duplicada, para no
   tener dos sitios definiendo lo mismo (Victoria, 2026-10-18:
   "sé consistente, usa siempre los mismos"). */

/* ---- "Crear una cuenta": link desplegable en vez de bloque siempre
   visible (ver JS). Oculto por defecto hasta que el JS abra
   ".hr-account-open" en el contenedor. ---- */
body#checkout #checkout-personal-information-step .field-password-policy {
  display: none;
  border-left: 2px solid var(--hr-color-borde-oscuro);
  padding-left: 16px;
  margin: -4px 0 18px 2px;
}
body#checkout #checkout-personal-information-step.hr-account-open .field-password-policy {
  display: block;
}
body#checkout #checkout-personal-information-step .form-informations {
  display: none;
}
.hr-account-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--hr-color-acento-claro);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  margin: -6px 0 18px;
}
.hr-account-link .hr-plus {
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.15s ease;
}
.hr-account-link.is-open .hr-plus {
  transform: rotate(45deg);
}

/* ---- fecha de nacimiento: ahora obligatoria ----
   Se oculta el "Opcional" nativo y se añade nuestro propio texto de
   ayuda/error mediante JS (misma familia visual que el resto de
   avisos: rojo #e57468, contraste comprobado ~5,7:1 sobre este fondo). */
body#checkout #checkout-personal-information-step .form-group.hr-birthday-row > .form-control-comment.hr-native-optional {
  display: none;
}
.hr-field-hint {
  font-size: 12px;
  color: rgba(230, 218, 204, 0.5);
  margin-top: 6px;
  line-height: 1.4;
}
.hr-field-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hr-color-error);
  margin-top: 6px;
  font-weight: 600;
}
.hr-field-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.hr-has-error .form-control {
  border-color: var(--hr-color-error) !important;
  background: rgba(229, 116, 104, 0.08) !important;
}
.hr-has-error .hr-field-error { display: flex; }
.hr-has-error .hr-field-hint { display: none; }

/* ---- checkboxes (optin, condiciones, newsletter, privacidad) ----
   32px de separación entre cada bloque casilla+texto, y también antes
   del botón "Continuar" — fijo, no depende de si hay o no texto de
   ayuda/error debajo. */
body#checkout #checkout-personal-information-step .custom-checkbox {
  display: block;
}
body#checkout #checkout-personal-information-step .form-group:has(.custom-checkbox) {
  margin-bottom: 32px !important;
}
/* Victoria (2026-10-18): el texto de los checkboxes se encogía a un
   ancho angosto con mucho hueco vacío a la derecha — venían dentro
   de una columna Bootstrap ".col-md-6" (pensada para campos en
   pareja, como Nombre/Apellidos), que no pinta nada aquí porque
   cada checkbox ocupa su fila entera y solo. Se pasa esa columna a
   ancho completo (manteniendo el padding-left de 24px ya existente
   en el label, que es el que alinea el texto con el icono). */
body#checkout #checkout-personal-information-step .form-group:has(.custom-checkbox) .js-input-column {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
body#checkout #checkout-personal-information-step .custom-checkbox label {
  color: rgba(230, 218, 204, 0.8) !important;
  font-size: 13px;
  line-height: 1.45;
}
body#checkout #checkout-personal-information-step .custom-checkbox label a {
  color: var(--hr-color-acento-claro) !important;
}
/* La casilla obligatoria (condiciones/psgdpr) en texto claro, no
   apagado, para que se note que es la única realmente obligatoria. */
body#checkout #checkout-personal-information-step .form-group:has(#psgdpr) .custom-checkbox label,
body#checkout #checkout-personal-information-step .form-group:has([name="psgdpr"]) .custom-checkbox label {
  color: var(--hr-color-texto-claro) !important;
}
.hr-checkbox-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--hr-color-error);
  font-weight: 600;
  margin: 6px 0 0 2px;
}
.hr-checkbox-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.hr-has-error.hr-checkbox-error { display: flex; }

/* ---- botón continuar ---- */
body#checkout #checkout-personal-information-step .form-footer .btn-primary {
  background: var(--hr-color-acento-claro) !important;
  color: var(--hr-color-texto-oscuro) !important;
  border: none !important;
  font-weight: 600;
  padding: 14px !important;
  float: none !important;
  width: 100%;
  margin-top: 0;
}
body#checkout #checkout-personal-information-step .form-footer .btn-primary:hover,
body#checkout #checkout-personal-information-step .form-footer .btn-primary:focus {
  background: var(--hr-color-acento) !important;
  color: var(--hr-color-texto-sobre-acento) !important;
}

/* ============================================================
   "Iniciar sesión" (pestaña del paso 1) — sin tocar hasta ahora,
   fondo nativo blanco de fábrica en email/contraseña (además del
   autocompletado del navegador, ver punto aparte en
   custom-checkout-shell.css). Añadido 2026-10-18.
   ============================================================ */
body#checkout #login-form .form-control {
  background: rgba(230, 218, 204, 0.05) !important;
  border: 1px solid var(--hr-color-borde-oscuro) !important;
  border-radius: var(--hr-radius-accion) !important;
  color: var(--hr-color-texto-claro) !important;
  font-size: 14px;
  box-shadow: none !important;
  /* Ver comentario del bloque equivalente del formulario de invitado,
     más arriba: "color-scheme: dark" para que la regla interna de
     Chrome del autocompletado use su variante oscura en vez de la
     clara. */
  color-scheme: dark;
}
body#checkout #login-form .form-control::placeholder {
  color: rgba(230, 218, 204, 0.35);
}
body#checkout #login-form .form-control:focus {
  border-color: var(--hr-color-acento-claro) !important;
  background: rgba(230, 218, 204, 0.08) !important;
}
/* Mismo motivo que el bloque equivalente de arriba (formulario de
   invitado): "box-shadow: none !important" en la regla de ".form-
   control" de este mismo bloque tiene más especificidad que el fix
   global de autocompletado y lo anulaba — por eso Victoria lo seguía
   viendo en blanco aunque borrara la caché varias veces: no era caché,
   era esta regla ganando la pelea de especificidad CSS. */
body#checkout #login-form .form-control:-webkit-autofill,
body#checkout #login-form .form-control:-webkit-autofill:hover,
body#checkout #login-form .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hr-color-texto-claro) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  caret-color: var(--hr-color-texto-claro);
  transition: background-color 9999s ease-in-out 0s;
}
/* Ver comentario del bloque equivalente del formulario de invitado,
   más arriba: regla separada a propósito para no arriesgar la de
   ":-webkit-autofill" si el navegador no soporta ":autofill". */
body#checkout #login-form .form-control:autofill {
  -webkit-text-fill-color: var(--hr-color-texto-claro) !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  box-shadow: 0 0 0px 1000px rgba(230, 218, 204, 0.05) inset !important;
  caret-color: var(--hr-color-texto-claro);
}
body#checkout #login-form .form-control-label {
  color: var(--hr-color-texto-claro) !important;
  font-size: 13px;
  font-weight: 600;
}

/* Botón "Mostrar"/"Ocultar" contraseña: traía el botón gris sólido
   de fábrica (".btn" nativo). Victoria pidió que fuera texto plano,
   como las acciones terciarias "Modificar"/"Eliminar" de las
   tarjetas de dirección — mismo color/tamaño que esas. Afecta a los
   dos sitios donde aparece este control (login y "Crear cuenta" del
   formulario de invitado), no solo aquí. */
body#checkout #checkout-personal-information-step .input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
body#checkout #checkout-personal-information-step [data-action="show-password"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(230, 218, 204, 0.55) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
}
body#checkout #checkout-personal-information-step [data-action="show-password"]:hover {
  color: var(--hr-color-acento-claro) !important;
}

/* "¿Olvidó su contraseña?": el tema nativo lo empuja a la derecha
   con un margin-left heredado (~230px en este ancho de formulario,
   nada que ver con el contenido) — se resetea. Victoria (2026-10-18,
   3ª vuelta): mejor alineado a la izquierda, a la altura de donde
   empiezan los inputs, no centrado (se había probado centrado en la
   vuelta anterior). Y 32px de margen respecto al botón "Continuar"
   de debajo (antes 0: el enlace y el botón quedaban pegados). */
body#checkout #login-form .forgot-password {
  width: 100% !important;
  /* Alineado con el INICIO de los inputs (no con las etiquetas
     "Email"/"Contraseña", que van en su propia columna a la
     izquierda) — la fila de campos usa una rejilla Bootstrap
     "col-md-3" (etiqueta) + "col-md-6" (input). Un 25% se queda corto
     (7,5px) porque ".forgot-password" no está dentro del mismo ".row"
     que esos campos y su contenedor tiene un ancho de referencia
     ligeramente distinto — medido en vivo: el input empieza a 146,75px
     del borde de este bloque. Como la tarjeta del paso ya es de ancho
     fijo (max-width 620px, ver ".content" más arriba, no responsive),
     se fija el mismo valor en px en vez de en %, para que coincida
     exactamente en vez de aproximarlo. */
  margin: 0 0 32px 147px !important;
  text-align: left !important;
}
body#checkout #login-form .form-footer {
  margin-top: 0 !important;
}