/* ==========================================================================
   HERA — wp-login.php
   Acceso · Recuperar contraseña · Establecer contraseña · Alertas
   Se carga desde el módulo hera-core/login.php (login_enqueue_scripts)
   ========================================================================== */

/* ---------- Tipografías ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("/wp-content/uploads/2026/08/Newsreader-VariableFont_opszwght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/wp-content/uploads/2026/08/WorkSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
body.login {
  --hera-ink: #1E1B18;
  --hera-ink-2: #39332D;
  --hera-muted: #6E675F;
  --hera-label: #8C837A;
  --hera-line: #DDD6CC;
  --hera-line-soft: #E7E1D8;
  --hera-check: #C4BCB2;
  --hera-paper: #FBF9F6;
  --hera-field: #FFFDFA;
  --hera-accent: #9A5626;

  --hera-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --hera-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hera-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --hera-pad-x: clamp(32px, 4.5vw, 64px);
  --hera-photo: url("/wp-content/uploads/2026/10/wp-login.webp");
  --hera-icon: url("/wp-content/uploads/2026/09/hera-icon.svg");
}

/* ==========================================================================
   Estructura
   La columna izquierda es el propio <body> convertido en rejilla.
   #login pasa a display:contents para que sus hijos (logo, avisos,
   formulario, enlaces) y el selector de idioma compartan esa rejilla:
     fila 1  logo
     fila 2  espacio flexible
     3–11    contenido en el orden del DOM
     fila 12 espacio flexible
     fila 13 pie (volver · privacidad · idioma)
   ========================================================================== */
html {
  height: auto;
  background: #FBF9F6;
}

body.login {
  box-sizing: border-box;
  width: 50%;
  min-width: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 56px var(--hera-pad-x) 40px;
  background: var(--hera-paper);
  color: var(--hera-ink-2);
  font: 400 15px/1.6 var(--hera-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto minmax(40px, 1fr) repeat(9, auto) minmax(40px, 1fr) auto;
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
}

body.login *,
body.login *::before,
body.login *::after {
  box-sizing: border-box;
}

/* Foto: mitad derecha, fija */
body.login::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: #EDE5DA var(--hera-photo) center 30% / cover no-repeat;
  pointer-events: none;
}

body.login #login {
  display: contents;
}

/* Espaciadores que centran el bloque verticalmente */
body.login #login::before,
body.login #login::after {
  content: "";
  grid-column: 1 / -1;
}
body.login #login::before { grid-row: 2; }
body.login #login::after  { grid-row: 12; }

/* Todo el contenido ocupa la columna completa, con un ancho máximo */
body.login #login > * {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 400px;
  min-width: 0;
}

body.login div.clear,
body.login #login > br {
  display: none;
}

/* ---------- Enlaces ---------- */
body.login a {
  color: var(--hera-accent);
  text-decoration: none;
  transition: color .15s ease;
}
body.login a:hover {
  color: var(--hera-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.login a:focus {
  box-shadow: none;
  color: var(--hera-ink);
}
body.login a:focus-visible {
  outline: 2px solid var(--hera-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Logo — icono + HERA
   ========================================================================== */
body.login #login > h1 {
  grid-row: 1;
  justify-self: start;
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: 1;
}
body.login #login > h1 a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-indent: 0;
  background: none;
  font: 400 24px/1 var(--hera-serif);
  letter-spacing: .18em;
  color: var(--hera-ink);
  text-decoration: none;
}
body.login #login > h1 a::before {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  background: var(--hera-icon) center / contain no-repeat;
}
body.login #login > h1 a:hover {
  text-decoration: none;
  color: var(--hera-ink);
}

/* ==========================================================================
   Cabecera (título + subtítulo, la añade el módulo PHP)
   ========================================================================== */
body.login .hera-login-head {
  margin: 0 0 24px;
}
body.login .hera-login-head:has(.hera-login-sub) {
  margin-bottom: 32px;
}
body.login .hera-login-title {
  margin: 0;
  font: 300 40px/1.1 var(--hera-serif);
  letter-spacing: -.005em;
  color: var(--hera-ink);
  text-wrap: balance;
}
body.login .hera-login-sub {
  margin: 12px 0 0;
  font: 400 15px/1.6 var(--hera-sans);
  color: var(--hera-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Alertas
   #login_error · .message · .notice-{error|warning|info|success}
   ========================================================================== */
body.login #login > :where(#login_error, .message, .notice, .success) {
  --n-line: #E1D9CD;
  --n-bg:   #F4EEE6;
  --n-text: #39332D;
  --n-icon: #1E1B18;

  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--n-line);
  border-radius: 0;
  background: var(--n-bg);
  box-shadow: none;
  color: var(--n-text);
  font: 400 14px/1.55 var(--hera-sans);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* Avisos del login: bloque normal (el texto viene sin envolver) + icono absoluto */
body.login #login > :where(#login_error, .message, .notice, .success) {
	display: block;
	position: relative;
	padding-left: 50px;
}

body.login #login > :where(#login_error, .message, .notice, .success)::before {
	position: absolute;
	top: 14px;
	left: 16px;
	margin: 0;
}

/* Wordfence mete el texto en párrafos: sin márgenes extra */
body.login #login > :where(#login_error, .message, .notice, .success) p {
	margin: 0;
}

/* El enlace «¿Has olvidado tu contraseña?» va en línea con el texto */
body.login #login > :where(#login_error, .message, .notice, .success) a {
	display: inline;
	white-space: normal;
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
}

/* Icono redondo */
body.login #login > :where(#login_error, .message, .notice, .success)::before {
  content: "i";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--n-icon);
  color: #FFFDFA;
  font: italic 400 13px/20px var(--hera-serif);
  text-align: center;
}

body.login #login > :where(#login_error, .message, .notice, .success) > * {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.login #login > :where(#login_error, .message, .notice, .success) strong {
  font-weight: 600;
}
body.login #login > :where(#login_error, .message, .notice, .success) a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.login #login .login-error-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Las reglas base usan :where() para no ganar en especificidad a las variantes */

/* Error */
body.login #login > :is(#login_error, .notice-error) {
  --n-line: #E6BFB3;
  --n-bg:   #F8E6E0;
  --n-text: #7A2E21;
  --n-icon: #9E3B2A;
}
/* Aviso */
body.login #login > .notice-warning {
  --n-line: #E4C9AC;
  --n-bg:   #F6E4D4;
  --n-text: #6B4A2C;
  --n-icon: #9A5626;
}
body.login #login > :is(#login_error, .notice-error, .notice-warning)::before {
  content: "!";
  font: 600 12px/20px var(--hera-sans);
}
/* Éxito (incluye «Se ha restablecido tu contraseña», que WordPress marca
   como .reset-pass igual que la instrucción del formulario: se distingue
   porque en esa pantalla ya no hay #resetpassform) */
body.login #login > :is(.notice-success, .success),
body.login:not(:has(#resetpassform)) #login > .message.reset-pass {
  --n-line: #CBD5C6;
  --n-bg:   #EDF0EA;
  --n-text: #3F4E3C;
  --n-icon: #5B6E58;
}
body.login #login > :is(.notice-success, .success)::before,
body.login:not(:has(#resetpassform)) #login > .message.reset-pass::before {
  content: "✓";
  font: 600 11px/20px var(--hera-sans);
}

/* ==========================================================================
   Formularios
   ========================================================================== */
body.login #login form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 400;
}
body.login #login form p,
body.login #login form > div {
  margin: 0;
  padding: 0;
}
body.login #login form br {
  display: none;
}

/* Etiquetas */
body.login #login form label {
  display: block;
  margin: 0 0 8px;
  font: 500 12px/1.3 var(--hera-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hera-label);
}

/* Campos */
body.login #login form :is(.input, input[type="text"], input[type="email"], input[type="password"]) {
  display: block;
  width: 100%;
  height: 50px;
  min-height: 50px;
  max-height: none;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--hera-line);
  border-radius: 0;
  background: var(--hera-field);
  box-shadow: none;
  color: var(--hera-ink-2);
  font: 400 15px/1 var(--hera-sans);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.login #login form :is(.input, input[type="text"], input[type="email"], input[type="password"]):hover {
  border-color: var(--hera-check);
}
body.login #login form :is(.input, input[type="text"], input[type="email"], input[type="password"]):focus {
  border-color: var(--hera-ink);
  box-shadow: 0 0 0 .5px var(--hera-ink);
  outline: none;
}
body.login #login form input:-webkit-autofill {
  -webkit-text-fill-color: var(--hera-ink-2);
  box-shadow: inset 0 0 0 1000px var(--hera-field);
}
body.login #login form input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--hera-field), 0 0 0 .5px var(--hera-ink);
}

/* Contraseña + botón Mostrar/Ocultar */
body.login #login .wp-pwd {
  position: relative;
  margin: 0;
}
body.login #login .wp-pwd .input.password-input,
body.login #login .wp-pwd input[type="password"],
body.login #login .wp-pwd input[type="text"] {
  padding-right: 92px;
}
body.login #login #pass1 {
  font-family: var(--hera-mono);
}

body.login #login .button.wp-hide-pw {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: 50px;
  min-height: 0;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--hera-label);
  transition: color .15s ease;
}
body.login #login .button.wp-hide-pw:hover {
  color: var(--hera-ink);
  background: none;
}
body.login #login .button.wp-hide-pw:focus {
  box-shadow: none;
  outline: none;
}
body.login #login .button.wp-hide-pw:focus-visible {
  outline: 2px solid var(--hera-accent);
  outline-offset: -4px;
}
body.login #login .button.wp-hide-pw .dashicons {
  position: static;
  top: auto;
  width: auto;
  height: auto;
  font: 400 12px/1 var(--hera-sans);
}
body.login #login .button.wp-hide-pw .dashicons::before {
  content: "Mostrar";
  font: inherit;
  width: auto;
  height: auto;
}
body.login #login .button.wp-hide-pw .dashicons-hidden::before {
  content: "Ocultar";
}

/* Indicador de seguridad: 4 segmentos + texto */
body.login #login #pass-strength-result {
  --s-fill: 0%;
  --s-color: var(--hera-line-soft);

  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 13px 0 0;
  border: 0;
  background: none;
  color: var(--hera-label);
  font: 500 13px/1 var(--hera-sans);
  text-align: left;
}
body.login #login #pass-strength-result::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 4px);
  height: 3px;
  background: linear-gradient(90deg, var(--s-color) var(--s-fill), var(--hera-line-soft) var(--s-fill));
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 4px), transparent 0) 0 0 / 25% 100% repeat-x;
          mask: linear-gradient(90deg, #000 calc(100% - 4px), transparent 0) 0 0 / 25% 100% repeat-x;
}
body.login #login #pass-strength-result.short  { --s-fill: 25%;  --s-color: #9E3B2A; color: #7A2E21; }
body.login #login #pass-strength-result.bad    { --s-fill: 50%;  --s-color: #9A5626; color: #6B4A2C; }
body.login #login #pass-strength-result.good   { --s-fill: 75%;  --s-color: #A8834A; color: #6B4A2C; }
body.login #login #pass-strength-result.strong { --s-fill: 100%; --s-color: #5B6E58; color: #3F4E3C; }

/* Confirmar contraseña débil */
body.login #login .pw-weak {
  margin-top: 14px;
}
body.login #login .pw-weak input[type="checkbox"] {
  display: inline-block;
  margin-right: 9px;
  vertical-align: -3px;
}

/* Texto de ayuda */
body.login #login .description.indicator-hint,
body.login #login .indicator-hint {
  margin: 0;
  font: 400 13px/1.6 var(--hera-sans);
  color: var(--hera-label);
  text-wrap: pretty;
}

/* Recuérdame / casillas */
body.login #login form .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
body.login #login form :is(.forgetmenot, .pw-weak) label {
  display: inline;
  margin: 0;
  font: 400 14px/1.3 var(--hera-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--hera-muted);
  cursor: pointer;
}

body.login #login input[type="checkbox"] {
  -webkit-appearance: none;
          appearance: none;
  flex: none;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hera-check);
  border-radius: 0;
  background: var(--hera-field);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
body.login #login input[type="checkbox"]:hover {
  border-color: var(--hera-ink);
}
body.login #login input[type="checkbox"]:checked {
  border-color: var(--hera-ink);
  background: var(--hera-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.4 3.3L11 1.5' fill='none' stroke='%23FBF9F6' stroke-width='1.8'/%3E%3C/svg%3E") center / 10px no-repeat;
}
body.login #login input[type="checkbox"]:checked::before {
  content: none;
}
body.login #login input[type="checkbox"]:focus {
  box-shadow: none;
  outline: none;
}
body.login #login input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--hera-accent);
  outline-offset: 2px;
}

/* Botones */
body.login #login form p.submit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 6px 0 0;
  padding: 0;
}
body.login #login form #wp-submit {
  float: none;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--hera-ink);
  box-shadow: none;
  text-shadow: none;
  color: var(--hera-paper);
  font: 500 15px/1 var(--hera-sans);
  white-space: normal;
  cursor: pointer;
  transition: background-color .15s ease;
}
body.login #login form #wp-submit:hover {
  background: var(--hera-ink-2);
}
body.login #login form #wp-submit:focus {
  box-shadow: none;
  outline: none;
}
body.login #login form #wp-submit:focus-visible {
  outline: 2px solid var(--hera-ink);
  outline-offset: 3px;
}
body.login #login form #wp-submit:disabled {
  opacity: .5;
  cursor: default;
}

/* «Generar contraseña» como enlace de texto */
body.login #login form .button.wp-generate-pw {
  align-self: flex-end;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--hera-label);
  font: 400 13px/1.3 var(--hera-sans);
  cursor: pointer;
}
body.login #login form .button.wp-generate-pw:hover {
  color: var(--hera-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.login #login form .button.wp-generate-pw:focus {
  box-shadow: none;
}

/* ==========================================================================
   Enlaces bajo el formulario (#nav)
   font-size:0 oculta los separadores «|» que imprime WordPress
   ========================================================================== */
body.login #login #nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hera-line-soft);
  font-size: 0;
  line-height: 0;
}
body.login #login #nav > * {
  font: 400 14px/1.3 var(--hera-sans);
  color: var(--hera-muted);
}
body.login #login #nav a {
  color: var(--hera-accent);
}
body.login #login #nav a:hover {
  color: var(--hera-ink);
}
body.login:is(.login-action-lostpassword, .login-action-retrievepassword, .login-action-rp, .login-action-resetpass) #nav > a:first-child::before {
  content: "← ";
}

/* ==========================================================================
   Pie: volver · privacidad · idioma
   ========================================================================== */
body.login #login > #backtoblog,
body.login #login > .privacy-policy-page-link,
body.login .language-switcher {
  grid-row: 13;
  align-self: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
body.login #login > #backtoblog                { grid-column: 1; }
body.login #login > .privacy-policy-page-link  { grid-column: 2; }
body.login .language-switcher                  { grid-column: 3; justify-self: end; }

body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  font: 400 13px/1.3 var(--hera-sans);
  color: var(--hera-label);
  white-space: nowrap;
}
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
  color: var(--hera-ink);
}

body.login .language-switcher #language-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
}
body.login .language-switcher label {
  margin: 0 -8px 0 0; /* la etiqueta solo contiene texto oculto: anula el hueco */
}
body.login .language-switcher label .dashicons {
  display: none;
}
body.login .language-switcher select {
  -webkit-appearance: none;
          appearance: none;
  height: 36px;
  min-height: 36px;
  min-width: 150px;
  margin: 0;
  padding: 0 34px 0 12px;
  border: 1px solid var(--hera-line);
  border-radius: 0;
  background: var(--hera-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238C837A'/%3E%3C/svg%3E") right 12px center / 8px 5px no-repeat;
  box-shadow: none;
  color: var(--hera-ink-2);
  font: 400 13px/1 var(--hera-sans);
  cursor: pointer;
}
body.login .language-switcher select:focus {
  border-color: var(--hera-ink);
  box-shadow: 0 0 0 .5px var(--hera-ink);
  outline: none;
}
body.login .language-switcher .button {
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--hera-ink);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--hera-ink);
  font: 500 13px/1 var(--hera-sans);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
body.login .language-switcher .button:hover {
  background: var(--hera-ink);
  color: var(--hera-paper);
}
body.login .language-switcher .button:focus {
  box-shadow: none;
}
body.login .language-switcher .button:focus-visible {
  outline: 2px solid var(--hera-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Modal de re-acceso del escritorio (sesión caducada)
   ========================================================================== */
body.login.interim-login {
  display: block;
  width: auto;
  min-height: 0;
  padding: 32px 24px;
}
body.login.interim-login::before {
  display: none;
}
body.login.interim-login #login > * {
  max-width: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  body.login {
    padding-top: 44px;
    padding-bottom: 32px;
  }
  body.login .hera-login-title {
    font-size: 36px;
  }
}

/* Una columna: la foto pasa a ser una franja superior */
@media (max-width: 860px) {
  body.login {
    --hera-banner: clamp(170px, 30vh, 260px);

    width: 100%;
    padding: calc(var(--hera-banner) + 28px) 24px 28px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(28px, 1fr) repeat(9, auto) minmax(32px, 1fr) auto auto;
    column-gap: 20px;
  }

  body.login::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--hera-banner);
    background:
      linear-gradient(to bottom, rgba(251, 249, 246, 0) 55%, var(--hera-paper) 100%),
      #EDE5DA var(--hera-photo) center 22% / cover no-repeat;
  }

  body.login #login > * {
    max-width: 480px;
  }

  body.login .hera-login-title {
    font-size: 34px;
  }

  /* 16px evita el zoom automático de iOS al enfocar */
  body.login #login form :is(.input, input[type="text"], input[type="email"], input[type="password"]),
  body.login .language-switcher select {
    font-size: 16px;
  }

  body.login #login > .privacy-policy-page-link {
    justify-self: end;
  }
  body.login .language-switcher {
    grid-row: 14;
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 20px;
  }
}

@media (max-width: 400px) {
  body.login {
    padding-left: 20px;
    padding-right: 20px;
  }
  body.login .hera-login-title {
    font-size: 30px;
  }
  body.login #login #nav {
    flex-direction: column;
  }
  body.login .language-switcher,
  body.login .language-switcher #language-switcher {
    width: 100%;
  }
  body.login .language-switcher select {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.login *,
  body.login *::before {
    transition: none !important;
    animation: none !important;
  }
}