/**
 * essencial-access.css
 *
 * Editorial neutral CSS for the access family:
 *   login / registration / password-email / password-new
 *
 * Direction "Vestíbulo privado": asymmetric split with abstract brand
 * panel (left) + editorial form panel (right). Collapses to a slim
 * brand band above the form on ≤991px.
 *
 * Universe-agnostic. Uses only neutral tokens from essencial-core.css.
 *
 * Fase 2 — login canary. Register / recovery / reset share these rules
 * and will add their own deltas in later phases.
 */

/* ============================================================
   Page shell — cancel the theme's default constraints on #main
   and hide the breadcrumb for the access family.
   ============================================================ */
.page-authentication-1 #main,
.page-registration-1 #main,
.page-password #main {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.page-authentication-1 .breadcrumb,
.page-registration-1 .breadcrumb,
.page-password .breadcrumb {
  display: none !important;
}

.page-authentication-1 #wrapper,
.page-registration-1 #wrapper,
.page-password #wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

/* Hide the PS default page-header if it leaks through */
.page-authentication-1 .page-header,
.page-registration-1 .page-header,
.page-password .page-header {
  display: none;
}

/* ============================================================
   Layout grid
   ============================================================ */
.access-page {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h, 100px));
  min-height: calc(100dvh - var(--header-h, 100px));
  background: var(--color-surface, #FAF8F5);
  position: relative;
  overflow-x: hidden;
}

/* Hairline vertical dorada between the two panels */
.access-page::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 45.05%;                    /* 0.82 / (0.82 + 1) */
  width: 1px;
  background: color-mix(in srgb, var(--essencial-primary, #b8960c) 28%, transparent);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 991px) {
  .access-page {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .access-page::before {
    display: none;
  }
}

/* ============================================================
   Left panel — brand composition
   ============================================================ */
.access-page__brand {
  background: var(--color-surface-raised, #F5F0E8);
  padding: clamp(48px, 6vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (max-width: 991px) {
  .access-page__brand {
    padding: 24px 24px 18px;
    min-height: 0;
  }
}

.access-brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 360px;
}

@media (max-width: 991px) {
  .access-brand { gap: 6px; }
}

.access-brand__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--color-heading, #1a1a1a);
  transition: opacity 200ms ease-out;
}
.access-brand__mark:hover,
.access-brand__mark:focus-visible { opacity: 0.7; outline: none; }

.access-brand__wordmark {
  font-family: var(--essencial-font-heading, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: 0.12em;
  color: var(--color-heading, #1a1a1a);
  line-height: 1;
}

.access-brand__byline {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted, #9A928A);
  margin-top: 2px;
}

.access-brand__sep {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--essencial-primary, #b8960c);
  opacity: 0.8;
}

.access-brand__tagline {
  font-family: var(--essencial-font-heading, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text, #4A4540);
  margin: 0;
}
.access-brand__tagline span {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted, #9A928A);
}

@media (max-width: 991px) {
  .access-brand__sep,
  .access-brand__tagline { display: none; }
}

/* ============================================================
   Right panel — editorial form
   ============================================================ */
.access-page__panel {
  padding: clamp(48px, 6vw, 88px) clamp(24px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-surface, #FAF8F5);
}

@media (max-width: 991px) {
  .access-page__panel {
    padding: 40px 24px max(56px, env(safe-area-inset-bottom) + 40px);
    min-height: calc(100dvh - 88px - var(--header-h, 100px));
  }
}

.access-page__head,
.access-page__body,
.access-page__foot {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Header of the form panel ----- */
.access-page__head { margin-bottom: 28px; }

.access-page__eyebrow {
  display: block;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted, #9A928A);
  margin: 0 0 20px;
}

.access-page__title {
  font-family: var(--essencial-font-heading, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.05;
  color: var(--color-heading, #1a1a1a);
  margin: 0 0 18px;
  letter-spacing: 0.005em;
}

.access-page__sep {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--essencial-primary, #b8960c);
  opacity: 0.8;
  margin: 0 0 16px;
}

@media (max-width: 991px) {
  .access-page__sep { width: 36px; }
}

.access-page__subtitle {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text, #4A4540);
  margin: 0;
}

/* ============================================================
   Form — flat editorial (no Bootstrap grid)
   ============================================================ */
.access-page__body { margin-bottom: 20px; }

.access-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
}

.access-form__errors {
  background: color-mix(in srgb, var(--color-danger, #C45C5C) 8%, transparent);
  border-left: 2px solid var(--color-danger, #C45C5C);
  padding: 12px 14px;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-heading, #1a1a1a);
}
.access-form__errors ul { margin: 0; padding: 0 0 0 16px; }
.access-form__errors li + li { margin-top: 4px; }

/* ----- Field block ----- */
.access-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-field__label {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted, #9A928A);
  margin: 0;
}

.access-field__input-wrap { position: relative; }

.access-field__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 16px;                 /* prevents iOS zoom on focus */
  line-height: 1.4;
  color: var(--color-heading, #1a1a1a);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border, #E5DED6);
  border-radius: 0;
  padding: 14px 44px 12px 0;
  transition: border-color 200ms ease-out;
}
.access-field__input:focus {
  outline: none;
  border-bottom-color: var(--essencial-primary, #b8960c);
}
.access-field__input::placeholder {
  color: var(--color-muted, #9A928A);
  opacity: 0.5;
}
.access-field--error .access-field__input {
  border-bottom-color: var(--color-danger, #C45C5C);
}

/* Select del Tratamiento (id_gender) — mismo hairline que los inputs + flecha custom */
select.access-field__select {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239A928A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
}
/* "Prefiero no decirlo" (value vacío) en tono placeholder cuando está seleccionado */
select.access-field__select:has(option[value=""]:checked) {
  color: var(--color-muted, #9A928A);
}

.access-field__error {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-danger, #C45C5C);
  margin: 0;
}

/* ----- Password toggle ----- */
.access-field__toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted, #9A928A);
  cursor: pointer;
  transition: color 200ms ease-out;
}
.access-field__toggle:hover,
.access-field__toggle:focus-visible {
  color: var(--color-heading, #1a1a1a);
  outline: none;
}
.access-field__toggle svg { display: block; pointer-events: none; }
.access-field__toggle .ei-eye-off { display: none; }
.access-field__toggle[aria-pressed="true"] .ei-eye { display: none; }
.access-field__toggle[aria-pressed="true"] .ei-eye-off { display: block; }

/* ----- Remember / secondary row ----- */
.access-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: -4px;
}

.access-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 13px;
  color: var(--color-text, #4A4540);
  user-select: none;
}
.access-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border, #E5DED6);
  background: transparent;
  border-radius: 0;
  position: relative;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 200ms ease-out, background 200ms ease-out;
}
.access-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--essencial-primary, #b8960c);
  outline-offset: 2px;
}
.access-check input[type="checkbox"]:checked {
  background: var(--essencial-primary, #b8960c);
  border-color: var(--essencial-primary, #b8960c);
}
.access-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* ----- Primary CTA ----- */
.access-form__submit {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 52px;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  background: var(--essencial-secondary, #1a1a1a);
  border: 1px solid var(--essencial-secondary, #1a1a1a);
  border-radius: 0;
  cursor: pointer;
  transition: background 220ms ease-out, border-color 220ms ease-out, color 220ms ease-out;
  margin-top: 6px;
}
.access-form__submit:hover,
.access-form__submit:focus-visible {
  background: var(--essencial-primary, #b8960c);
  border-color: var(--essencial-primary, #b8960c);
  outline: none;
}
.access-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 991px) {
  .access-form__submit { height: 56px; }
}

/* ============================================================
   Foot — cross-navigation
   ============================================================ */
.access-page__foot {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-light, #EDE8E2);
}

.access-page__crossnav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.access-page__crossnav a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 13px;
  color: var(--color-heading, #1a1a1a);
  text-decoration: none;
  transition: color 200ms ease-out;
  position: relative;
  width: fit-content;
}
.access-page__crossnav a small {
  color: var(--color-muted, #9A928A);
  font-size: 13px;
}
.access-page__crossnav a span {
  position: relative;
}
.access-page__crossnav a span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--essencial-primary, #b8960c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease-out;
}
.access-page__crossnav a:hover,
.access-page__crossnav a:focus-visible {
  color: var(--essencial-primary, #b8960c);
  outline: none;
}
.access-page__crossnav a:hover span::after,
.access-page__crossnav a:focus-visible span::after {
  transform: scaleX(1);
}

/* ============================================================
   Register — specific rules
   ============================================================ */

/* Firstname + lastname in two columns on ≥640px, stacked below */
.access-form__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 640px) {
  .access-form__pair { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Required asterisk on labels */
.access-field__star {
  color: var(--color-muted, #9A928A);
  font-style: normal;
  font-weight: 400;
  margin-left: 2px;
}

/* Password strength indicator — 3 hairline bars */
.access-strength {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.access-strength__bar {
  flex: 1 1 0;
  height: 2px;
  background: var(--color-border, #E5DED6);
  transition: background 260ms ease-out;
}
.access-strength[data-score="1"] .access-strength__bar.is-on { background: color-mix(in srgb, var(--color-warning, #CC8A2E) 75%, transparent); }
.access-strength[data-score="2"] .access-strength__bar.is-on { background: var(--essencial-primary, #b8960c); }
.access-strength[data-score="3"] .access-strength__bar.is-on { background: var(--color-success, #4A9B6F); }

@media (prefers-reduced-motion: reduce) {
  .access-strength__bar { transition: none; }
}

/* Progressive disclosure button */
.access-reveal {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border-light, #EDE8E2);
  border-bottom: 1px solid var(--color-border-light, #EDE8E2);
  padding: 14px 0;
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted, #9A928A);
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out;
  margin-top: 4px;
}
.access-reveal:hover,
.access-reveal:focus-visible {
  color: var(--color-heading, #1a1a1a);
  border-color: var(--color-border, #E5DED6);
  outline: none;
}
.access-reveal__icon {
  flex-shrink: 0;
  transition: transform 260ms ease-out;
}
.access-reveal[aria-expanded="true"] .access-reveal__icon {
  transform: rotate(180deg);
}
.access-reveal[aria-expanded="true"] {
  color: var(--color-heading, #1a1a1a);
  border-bottom-color: transparent;
}

.access-extra {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 22px;
}
.access-extra[hidden] { display: none; }

/* Consent block (GDPR, privacy, newsletter) */
.access-form__consent {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light, #EDE8E2);
}
.access-form__consent .access-check {
  align-items: flex-start;
  line-height: 1.45;
  font-size: 12.5px;
}
.access-form__consent .access-check input[type="checkbox"] {
  margin-top: 2px;
}
.access-check__star {
  color: var(--color-muted, #9A928A);
  font-style: normal;
  margin-left: 2px;
}
.access-check--error > span {
  color: var(--color-danger, #C45C5C);
}

/* PS consent labels embed <br><em>legal note</em> — treat the <em>
   as a muted subtext, not italics, for editorial calm. */
.access-form__consent .access-check > span em {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-muted, #9A928A);
  font-style: normal;
}

/* Hook slot (3rd-party modules injecting extra markup) */
.access-form__hook {
  margin-top: 4px;
}
.access-form__hook .form-group,
.access-form__hook .form-control {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
}

/* ============================================================
   Confirmation state — recovery success ("Revisa tu email")
   ============================================================ */
.access-confirm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.access-confirm__body {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text, #4A4540);
  margin: 0;
}
.access-confirm__sep {
  border: 0;
  width: 36px;
  height: 1px;
  background: var(--color-border, #E5DED6);
  margin: 4px 0;
}
.access-confirm__note {
  font-family: var(--essencial-font-body, 'Jost', sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted, #9A928A);
  margin: 0;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .access-page__crossnav a span::after,
  .access-field__input,
  .access-form__submit,
  .access-check input[type="checkbox"],
  .access-brand__mark,
  .access-field__toggle {
    transition: none !important;
  }
}