/* ══════════════════════════════════════════════════════════
   login.css — Pantalla de login única de Amun (Taller, IVA, Personal y Portal).
   Antes vivía copiada en admin.css, personal.css y portal.css. El HTML lo arma js/login-ui.js a partir de los
   atributos data-* de <div id="login-screen"> (ver ahí). Requiere amun-tokens.css (--red, --bg-page…).

   Como el encabezado de las páginas, el login es oscuro a propósito en los dos temas (color de marca): por eso
   fija sus propias variables de tinta/superficie y no depende de claro/oscuro.

   Variables por módulo (en #login-screen, o con data-acento):
     --login-acento        botón, borde superior y foco de los campos      (rojo de Amun, en todos los módulos)
     --login-acento-hover  botón al pasar el mouse
     --login-acento-borde  borde fino de la tarjeta
     --login-fondo         fondo de la pantalla
     --login-trama         color de la trama de rombos del fondo
   ══════════════════════════════════════════════════════════ */
#login-screen {
  --fg-rgb: 255,255,255;
  --white: #fff;
  --surface: #1e1e1e;
  --border: #2e2e2e;
  --login-acento: var(--red);
  --login-acento-hover: var(--red-dark);
  --login-acento-borde: color-mix(in srgb, var(--red) 25%, transparent);
  --login-fondo: linear-gradient(160deg,#0f0000 0%,#1e0505 50%,#111 100%);
  --login-trama: color-mix(in srgb, var(--red) 6%, transparent);
  color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--login-fondo); padding: 2rem; position: relative; overflow: hidden;
}
#login-screen *, #login-screen *::before, #login-screen *::after { box-sizing: border-box; }
#login-screen::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; background-size: 24px 24px;
  background-image: linear-gradient(45deg,var(--login-trama) 25%,transparent 25%), linear-gradient(-45deg,var(--login-trama) 25%,transparent 25%);
}

.login-box {
  position: relative; width: 100%; max-width: 380px; padding: 2.5rem 2rem;
  background: rgba(var(--fg-rgb),0.04); border: 1px solid var(--login-acento-borde);
  border-top: 3px solid var(--login-acento); border-radius: 4px;
}

/* Marca: logo de Amun (amun-logo.svg) o, si data-logo trae un emoji, una insignia redonda del módulo. */
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 2rem; }
.login-logo > svg { height: 52px; width: auto; flex: none; }
.logo-badge { width: 38px; height: 38px; background: var(--login-acento); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
.logo-text strong { display: block; font-family: 'Oswald', sans-serif; font-size: 1.1rem; letter-spacing: 0.1em; }
.logo-text span { font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(var(--fg-rgb),0.4); text-transform: uppercase; }

.login-box h2 { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.3rem; margin: 0 0 0.3rem; text-transform: uppercase; }
.login-texto { font-size: 0.85rem; color: rgba(var(--fg-rgb),0.4); margin: 0 0 1.8rem; }
.login-group { margin-bottom: 1rem; }
.login-group label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(var(--fg-rgb),0.5); text-transform: uppercase; font-family: 'Oswald', sans-serif; margin-bottom: 0.4rem; }
.login-group input { width: 100%; background: rgba(var(--fg-rgb),0.05); border: 1px solid rgba(var(--fg-rgb),0.1); border-radius: 3px; color: var(--white); padding: 0.75rem 1rem; font-family: 'Source Sans 3', sans-serif; font-size: 1rem; outline: none; transition: border-color 0.2s; }
.login-group input:focus { border-color: var(--login-acento); }
.login-group input::placeholder { color: rgba(var(--fg-rgb),0.2); }
.login-error { background: color-mix(in srgb, var(--red) 15%, transparent); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); border-radius: 3px; padding: 0.6rem 0.8rem; color: var(--red-light); font-size: 0.85rem; margin-bottom: 1rem; display: none; }
.login-error.show { display: block; }
.btn-login { width: 100%; background: var(--login-acento); color: #fff; border: none; padding: 0.85rem; font-family: 'Oswald', sans-serif; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 3px; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; }
.btn-login:hover { background: var(--login-acento-hover); }
.btn-login:disabled { opacity: .6; cursor: default; }

/* Cuenta con sesión pero sin permiso para el módulo (hoy, IVA): reemplaza al formulario. */
#sin-acceso p { margin-bottom: 1.2rem; }
.sin-acceso-volver { display: block; text-align: center; margin-top: 1rem; color: rgba(var(--fg-rgb),0.6); font-size: 0.85rem; text-decoration: none; }
.sin-acceso-volver:hover { color: var(--red-light); }