/* ---------- Tokens / Variables de marca (mismos que el frontend) ---------- */
:root {
  /* base */
  --black: #000;
  --white: #fff;
  --bg: #000;                 /* fondo principal */
  --surface: #0d0d0d;         /* paneles / tarjetas */
  --border: #242424;

  /* texto */
  --text: #f5f5f5;
  --text-secondary: #aaa;     /* textos grises claros */
  --text-muted: #bbb;         /* cabeceras de tabla, metadatos */
  --text-tertiary: #888;      /* footer y textos secundarios */
  --text-faint: #eee;         /* estados vacíos / placeholders */

  /* marca */
  --accent: #e91e63;          /* rosa principal */
  --accent-strong: #c2185b;   /* hover/active del rosa */
  --danger: #f44336;          /* errores / acciones destructivas */

  /* superficies auxiliares */
  --surface-contrast: #1a1a1a;/* hover tabs inactivas */
  --panel-inset: #111;        /* thead fondo */
  --card-img-bg: var(--black);

  /* transparencias / sombras / vidrios */
  --glass-80: rgba(255, 255, 255, 0.8);
  --overlay-65: rgba(0, 0, 0, .65);
  --overlay-70: rgba(0, 0, 0, .70);
  --shadow-weak: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.25);
  --shadow-strong: rgba(0, 0, 0, .45);

  --radius: 12px;

  /* token dinámico para el logo del login (se setea desde PHP con wp_add_inline_style) */
  --login-logo: url('../views/logo.png');
}

/* ---------- Reset mínimo ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ---------- Lienzo de la pantalla de login ---------- */
body.login {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

/* Contenedor central */
body.login #login {
  width: min(420px, calc(100% - 2rem));
  padding: 2rem 0;
}

/* ---------- Logo ---------- */
body.login #login h1 { margin: 3rem 0 2rem; }
body.login #login h1 a {
  background-image: var(--login-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 220px auto;
  width: 100%;
  height: 120px;
  display: block;
  margin: 0 auto;
  transition: transform .2s ease;
  filter: drop-shadow(0 6px 20px var(--shadow-strong));
}
body.login #login h1 a:hover { transform: scale(1.03); }

/* ---------- Tarjeta / formulario ---------- */
body.login form#loginform,
body.login form#lostpasswordform,
body.login form#registerform {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: 0 10px 40px var(--shadow-strong);
  padding: 20px 22px;
}

/* Etiquetas */
body.login form .label,
body.login form label {
  color: var(--text);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  text-align: left;
}

/* Inputs */
body.login form input[type="text"],
body.login form input[type="password"],
body.login form input[type="email"] {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.login form input[type="text"]::placeholder,
body.login form input[type="password"]::placeholder,
body.login form input[type="email"]::placeholder {
  color: var(--text-tertiary);
}
body.login form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Mostrar/ocultar password */
body.login .wp-pwd .button.button-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
body.login .wp-pwd .button.button-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Checkbox “Recuérdame” */
body.login input[type="checkbox"] {
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}
body.login input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
body.login input[type="checkbox"]:checked::before {
  /* Check rosado (SVG inline) */
  content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23e91e63%27/%3E%3C/svg%3E");
  transform: translate(1px, -1px);
}

/* Enlaces (olvidé mi contraseña, volver al sitio…) */
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
  color: var(--accent);
  text-decoration: none;
  border-radius: 8px;
  padding: 4px 2px;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* Botón primario (Acceder / Reset / Registrar) */
body.login .button-primary,
body.login .wp-core-ui .button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: none;
  text-shadow: none;
  transition: transform .1s ease, background .2s ease, border-color .2s ease;
}
body.login .button-primary:hover,
body.login .wp-core-ui .button-primary:hover,
body.login .button-primary:focus,
body.login .wp-core-ui .button-primary:focus {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--white);
}
body.login .button-primary:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
body.login .button-primary:active {
  transform: translateY(1px);
}

/* Botón secundario (toggle pwd, etc.) */
body.login .button,
body.login .button-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-shadow: none;
  box-shadow: none;
}
body.login .button:hover,
body.login .button-secondary:hover,
body.login .button:focus,
body.login .button-secondary:focus {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Mensajes del core (error, message, notice) */
body.login #login_error,
body.login .message,
body.login .success {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 14px;
  box-shadow: 0 10px 30px var(--shadow-strong);
}
body.login #login_error {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--text);
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
}
body.login .message,
body.login .success {
  background: var(--surface-contrast);
  color: var(--text);
}

/* Switcher de idioma */
body.login .language-switcher {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  margin-top: 1rem;
}
body.login .language-switcher select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ReCaptcha / elementos de terceros */
body.login .grecaptcha-badge { filter: grayscale(1) contrast(1.2); }

/* Accesibilidad / focus global */
body.login a:focus,
body.login button:focus,
body.login input:focus,
body.login select:focus,
body.login textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: var(--accent);
}

/* Footer pequeño del login */
body.login #backtoblog,
body.login .privacy-policy-page-link {
  text-align: center;
}
body.login #backtoblog { margin-top: 1rem; }
body.login .privacy-policy-page-link { margin-top: .5rem; }

/* Scrollbar (webkit) */
body.login ::-webkit-scrollbar { width: 8px; height: 8px; }
body.login ::-webkit-scrollbar-track { background: var(--surface); }
body.login ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
body.login ::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }