/* login.css · pantalla de entrada del Panel de Opinión y paso del segundo factor (two-factor se
   monta en el mismo #login con el mismo login_enqueue_scripts).
   Anatomía de la maqueta (docs/blog/prototipos/css/entrada.css): logotipo horizontal, tarjeta Blanco
   con hairline, titular en la voz Editorial pequeño, campos de Campo.astro (rótulo arriba en 14 Medium,
   contorno de 1,5 px en Verde, 44 de alto, foco en el contorno) y el botón píldora del DS relleno por
   ser la única acción. Siempre en claro: tokens.css solo remapea a oscuro dentro de body.wp-admin.
   Solo lee variables de tokens.css. */

*{ box-sizing:border-box; }

html, body.login{
  background:var(--sup-0);
}
body.login{
  color:var(--tinta);
  font-family:var(--f-sans);
  font-size:var(--t-body-sm);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
}
::selection{ background:color-mix(in srgb, var(--c-salvia) 45%, transparent); }

#login{
  width:100%;
  max-width:calc(var(--ancho-tarjeta-entrada) + 2 * var(--margen-panel));
  margin:auto;
  padding:var(--s-12) var(--margen-panel);
}

/* ── Logotipo horizontal del despacho (public/marca/logo/horizontal.svg), nunca bajo su mínimo ── */
#login h1{ margin:0 0 var(--s-8); }
#login h1 a{
  display:block;
  width:var(--logo-ancho-horizontal);
  max-width:100%;
  aspect-ratio:var(--logo-proporcion);
  height:auto;
  margin:0;
  padding:0;
  background:url(logotipo.svg) center left / contain no-repeat !important;
  font-size:0;
  text-indent:-9999em;
  overflow:hidden;
  outline-offset:var(--foco-offset);
}

/* ── La tarjeta: rótulo, aviso y formulario se leen como una sola hoja ── */
.ostos-login-rotulo,
#login_error,
#login .message,
#login .notice,
#loginform,
#lostpasswordform,
#resetpassform,
#registerform{
  background:var(--sup-1);
  border:var(--hairline-w) solid var(--hairline);
  border-radius:var(--r-0);
  box-shadow:none;
  margin:0;
}
.ostos-login-rotulo{
  border-bottom:0;
  padding:var(--s-8) var(--s-6) 0;
  font-family:var(--f-serif);
  font-size:var(--t-editorial-sm);
  font-weight:var(--w-regular);
  line-height:var(--lh-voz-editorial);
  color:var(--c-noche);
  text-transform:none;
  letter-spacing:0;
  text-align:left;
}
#login_error,
#login .message,
#login .notice{
  border-top:0;
  border-bottom:0;
  padding:var(--s-4) var(--s-6) 0;
  color:var(--tinta);
}
#loginform,
#lostpasswordform,
#resetpassform,
#registerform{
  border-top:0;
  padding:var(--s-6) var(--s-6) var(--s-8);
}

/* Error en línea con el patrón de ayuda en lista: un renglón por mensaje, la palabra clave en
   negrita y sin dos puntos (functions.php, login_errors), hairline entre renglones, en el rojo de
   servicio. El filete rojo a la izquierda es la única señal: sin caja de color. */
#login_error{
  font-size:var(--t-body-sm);
  line-height:var(--lh-body);
  color:var(--c-error);
}
#login_error > p,
#login_error ul,
#login .message > p{ margin:0; padding:0; list-style:none; }
#login_error .op-ayuda-renglon,
#login_error li{
  display:block;
  padding:var(--s-2) 0 var(--s-2) var(--s-3);
  border-left:var(--filete-w) solid var(--c-error);
}
#login_error .op-ayuda-renglon + .op-ayuda-renglon,
#login_error li + li{ border-top:var(--hairline-w) solid var(--hairline); }
#login_error strong{ color:var(--c-error); font-weight:var(--w-bold); margin-right:var(--s-1); }
#login .message{ font-size:var(--t-body-sm); color:var(--tinta-2); }

/* ── Campos (Campo.astro) ── */
#login form p,
#login form .user-pass-wrap{ margin:0 0 var(--s-4); }
#login label{
  display:block;
  margin:0 0 var(--s-2);
  font-size:var(--t-body-sm);
  font-weight:var(--w-medium);
  line-height:var(--lh-body);
  color:var(--tinta);
  text-transform:none;
  letter-spacing:0;
}
#login input[type=text],
#login input[type=password],
#login input[type=email],
#login input[type=tel],
#login input[type=number],
#login form .input{
  display:block;
  width:100%;
  height:var(--objetivo);
  min-height:var(--objetivo);
  margin:0;
  padding:0 var(--s-4);
  background:var(--sup-1);
  color:var(--tinta);
  border:var(--borde-w) solid var(--borde-campo);
  border-radius:var(--r-campo);
  box-shadow:none;
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
}
#login input::placeholder{ color:var(--tinta-2); opacity:1; }
/* Un solo anillo, sobre el propio contorno (offset negativo): nunca dos rectángulos */
#login input[type=text]:focus,
#login input[type=password]:focus,
#login input[type=email]:focus,
#login input[type=tel]:focus,
#login input[type=number]:focus,
#login form .input:focus{
  border-color:var(--tinta);
  box-shadow:none;
  outline:var(--foco-w) solid var(--foco-color);
  outline-offset:calc(-1 * var(--hairline-w));
}

/* Contraseña: el contorno es .wp-pwd (input y ojo dentro); el input interno va sin anillo */
#login .wp-pwd{
  position:relative;
  display:flex;
  align-items:center;
  height:var(--objetivo);
  background:var(--sup-1);
  border:var(--borde-w) solid var(--borde-campo);
  border-radius:var(--r-campo);
}
#login .wp-pwd:focus-within{
  border-color:var(--tinta);
  outline:var(--foco-w) solid var(--foco-color);
  outline-offset:calc(-1 * var(--hairline-w));
}
#login .wp-pwd input.password-input,
#login .wp-pwd input[type=password],
#login .wp-pwd input[type=text]{
  flex:1;
  min-width:0;
  height:100%;
  min-height:0;
  border:0;
  outline:none;
  box-shadow:none;
  background:transparent;
}
#login .wp-pwd input:focus{ outline:none; box-shadow:none; }
/* El ojo mide 44 × 44: sale el grosor del contorno por arriba, abajo y a la derecha, y su fondo de
   hover se recorta a la caja interior (background-clip) para no pisar el contorno del campo */
#login .wp-pwd .wp-hide-pw{
  position:static;
  flex:none;
  box-sizing:border-box;
  width:var(--objetivo);
  height:var(--objetivo);
  min-height:var(--objetivo);
  margin:calc(var(--borde-w) * -1) calc(var(--borde-w) * -1) calc(var(--borde-w) * -1) 0;
  padding:var(--borde-w) var(--borde-w) var(--borde-w) 0;
  border:0;
  border-radius:var(--r-0);
  background-color:transparent;
  background-clip:content-box;
  color:var(--tinta-2);
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#login .wp-pwd .wp-hide-pw:hover{ background-color:var(--sup-hover); color:var(--tinta); }
#login .wp-pwd .wp-hide-pw:focus,
#login .wp-pwd .wp-hide-pw:focus-visible{ outline:none; box-shadow:none; color:var(--tinta); background-color:var(--sup-hover); }
/* El ojo de Dashicons se sustituye por el glifo «ojo» del sprite (máscara), 16 px a 1,8 de tinta */
#login .wp-pwd .wp-hide-pw .dashicons{
  width:var(--icono-16);
  height:var(--icono-16);
  font-size:0;
  background-color:currentColor;
  -webkit-mask:url(iconos/ojo-16.svg) center / contain no-repeat;
  mask:url(iconos/ojo-16.svg) center / contain no-repeat;
}
#login .wp-pwd .wp-hide-pw .dashicons::before{ content:none; }
#login .wp-pwd .wp-hide-pw .dashicons-hidden{
  -webkit-mask-image:url(iconos/ojo-tachado-16.svg);
  mask-image:url(iconos/ojo-tachado-16.svg);
}

/* Casilla (Checkbox.astro): caja de 20, borde de 1,5 en Verde, radio de campo, relleno en tinta */
#login .forgetmenot{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-height:var(--objetivo);
  margin:0 0 var(--s-4);
  float:none;
}
#login .forgetmenot label{
  display:inline-flex;
  align-items:center;
  min-height:var(--objetivo);
  margin:0;
  font-weight:var(--w-regular);
  cursor:pointer;
}
#login input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  flex:none;
  width:var(--casilla);
  height:var(--casilla);
  margin:0;
  border:var(--borde-w) solid var(--borde-campo);
  border-radius:var(--r-campo);
  background:var(--sup-1);
  box-shadow:none;
  cursor:pointer;
}
#login input[type=checkbox]:checked{ background:var(--tinta); border-color:var(--tinta); }
#login input[type=checkbox]:checked::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(50% - var(--hairline-w));
  width:var(--marca-ancho);
  height:var(--marca-alto);
  margin:0;
  border:solid var(--c-marfil);
  border-width:0 var(--foco-w) var(--foco-w) 0;
  transform:translate(-50%, -50%) rotate(45deg);
}
#login input[type=checkbox]:focus-visible{ outline:var(--foco-w) solid var(--foco-color); outline-offset:var(--foco-offset); box-shadow:none; }
/* La ayuda flotante de «Recuérdame» viene de fábrica en tuteo y en párrafo: el rótulo ya dice lo que hace */
#login .forgetmenot .wp-tooltip{ display:none; }

/* ── Botón (Boton.astro): píldora, 1,5 px, 14 px en versales a 0,167em, 44 de alto ── */
#login .submit{ margin:var(--s-2) 0 0; padding:0; }
.login .button,
.login .button-primary,
.login .button-secondary,
.login input[type=submit]{
  float:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:var(--objetivo);
  min-height:var(--objetivo);
  padding:0 var(--s-8);
  border:var(--borde-w) solid var(--borde);
  border-radius:var(--r-pildora);
  background:transparent;
  color:var(--tinta);
  box-shadow:none;
  text-shadow:none;
  font-family:var(--f-sans);
  font-size:var(--t-label);
  font-weight:var(--w-medium);
  line-height:var(--lh-label);
  text-transform:uppercase;
  letter-spacing:var(--track-caps-lg);
  cursor:pointer;
  transition:background-color var(--dur-rapida) var(--ease-editorial), color var(--dur-rapida) var(--ease-editorial), border-color var(--dur-rapida) var(--ease-editorial);
}
.login .button:hover,
.login .button-secondary:hover{ background:var(--tinta); color:var(--c-marfil); border-color:var(--tinta); }
.login .button.button-primary,
.login input[type=submit].button-primary{
  background:var(--c-verde);
  border-color:var(--c-verde);
  color:var(--c-marfil);
}
.login .button.button-primary:hover,
.login .button.button-primary:focus{ background:var(--c-noche); border-color:var(--c-noche); color:var(--c-marfil); box-shadow:none; }
.login .button:focus-visible,
.login input[type=submit]:focus-visible{ outline:var(--foco-w) solid var(--foco-color); outline-offset:var(--foco-offset); box-shadow:none; }

/* ── Enlaces (Enlace.astro): tinta, sin subrayado, subrayado de 1 px solo en hover ── */
#login #nav{
  margin:var(--s-4) 0 0;
  padding:0;
  text-align:left;
}
#login #nav a,
#login a{
  display:inline-flex;
  align-items:center;
  min-height:var(--objetivo);
  color:var(--tinta);
  font-size:var(--t-body-sm);
  font-weight:var(--w-medium);
  text-decoration:none;
  text-underline-offset:0.18em;
  text-decoration-thickness:var(--hairline-w);
}
#login #nav a:hover,
#login a:hover{ color:var(--tinta); text-decoration:underline; }
#login a:focus-visible{ outline:var(--foco-w) solid var(--foco-color); outline-offset:var(--foco-offset); box-shadow:none; }
#login h1 a,
#login h1 a:hover{ display:block; min-height:0; }
/* «Volver al sitio» no aplica: este WordPress no tiene sitio público */
#backtoblog,
.language-switcher{ display:none; }
.privacy-policy-page-link{ display:none; }

/* ── Segundo factor (two-factor): mismo lenguaje, código grande con cifras tabulares ── */
#login .two-factor-prompt{
  margin:0 0 var(--s-4);
  font-size:var(--t-body-sm);
  color:var(--tinta-2);
}
#login #authcode,
#login .input.authcode{
  font-size:var(--t-sub);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--track-caps-lg);
  text-align:left;
}
#login .backup-methods-wrap{ margin:var(--s-4) 0 0; padding:0; }
#login .backup-methods-wrap p{ margin:0; font-size:var(--t-body-sm); color:var(--tinta-2); }
#login .backup-methods-wrap ul{ margin:0; padding:0; list-style:none; }
#login .backup-methods-wrap li{ border-top:var(--hairline-w) solid var(--hairline); }
#login .backup-methods-wrap li:first-child{ border-top:0; }
#login .two-factor-email-resend input{ margin-top:var(--s-2); }

@media (max-width:767px){
  #login{ padding:var(--s-8) var(--margen-panel); }
  #login h1{ margin-bottom:var(--s-6); }
}

@media (prefers-reduced-motion:reduce){
  .login .button, .login input[type=submit]{ transition:none; }
}

@media (forced-colors:active){
  #loginform, .ostos-login-rotulo, #login_error, #login .message{ border:var(--hairline-w) solid CanvasText; }
  #login .wp-pwd .wp-hide-pw .dashicons{ background-color:ButtonText; }
}

/* «¿Olvidó su contraseña?» lleva a otra pantalla: flecha horizontal que avanza en hover */
#login #nav a::after{
  content:"";
  flex:none;
  width:var(--icono-16);
  height:var(--icono-16);
  margin-left:var(--s-2);
  background-color:currentColor;
  -webkit-mask:url(iconos/flecha-derecha-16.svg) center / contain no-repeat;
  mask:url(iconos/flecha-derecha-16.svg) center / contain no-repeat;
  transition:transform var(--dur-rapida) var(--ease-editorial);
}
#login #nav a:hover::after{ transform:translateX(var(--s-1)); }