/* PLANUM UI · estilo común del ecosistema (v1, 12/10/2026)
 *
 * Referencia: la entrada única (index.html). Aquí vive lo que TODOS los módulos deben compartir:
 * paleta, tipografías y el cuadro de acceso (tamaño, radio, bordes, campos y botón).
 *
 * Uso: cargarla DESPUÉS del <style> propio de cada página:
 *     <link rel="stylesheet" href="/planum-ui.css">
 * Solo toca la pantalla de acceso y dos variables; no cambia el interior de cada módulo
 * (APP y Twin conservan su tema claro/oscuro; el acceso siempre es oscuro de marca).
 *
 * Tipografías (cargar en <head> de cada página):
 *   Inter 400-900 · JetBrains Mono 400/700   (https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap)
 */
:root{
  --pl-bg:#0f172a;
  --pl-surface:#1e293b;
  --pl-border:#334155;
  --pl-border2:#475569;
  --pl-text:#f1f5f9;
  --pl-muted:#94a3b8;
  --pl-blue:#2563eb;
  --pl-blue2:#1d4ed8;
  --pl-green:#10b981;
  --pl-orange:#f97316;
  --pl-red:#ef4444;
  --pl-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pl-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* la ERP definía su propia mono (Space Mono): se unifica */
  --mono:var(--pl-mono);
}

/* ── fondo de la pantalla de acceso ───────────────────────────────── */
#login-screen,#loginScreen,.pl-login-screen{
  padding:24px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 30% 50%,rgba(37,99,235,.15) 0%,transparent 60%),
             radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.10) 0%,transparent 50%),
             var(--pl-bg);
}
/* el acceso es SIEMPRE oscuro de marca, aunque el módulo siga el tema del sistema:
   se fijan localmente las variables que usan APP y Twin */
#loginScreen,#loginOverlay{
  --bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#0f172a;--surface:#1e293b;
  --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-tertiary:#94a3b8;
  --border-light:#475569;--accent-primary:#2563eb;--accent-primary-dark:#1d4ed8;--accent-danger:#ef4444;
}

/* ── cuadro de acceso ─────────────────────────────────────────────── */
#login-screen .login-box,#loginScreen .login-box,#loginOverlay .login-box,.pl-login-screen .login-box{
  position:relative;z-index:1;width:100%;max-width:420px;
  background:var(--pl-surface);border:1px solid var(--pl-border2);border-radius:20px;
  padding:44px 40px;box-shadow:0 8px 32px rgba(0,0,0,.4);
  color:var(--pl-text);font-family:var(--pl-sans);
}
.login-logo-wrap{text-align:center;margin-bottom:8px}
.login-logo-wrap img,.login-box .login-logo-img{height:80px;width:auto;max-width:100%}
.login-box .login-sub{
  font-family:var(--pl-mono);font-size:9px;font-weight:400;letter-spacing:3px;line-height:1.5;
  color:var(--pl-muted);text-align:center;margin:0 0 28px;text-transform:uppercase;
}
.login-box .lfield,.login-box .form-group,.login-box .login-field{margin-bottom:16px}
.login-box .lfield label,.login-box .form-group label,.login-box .login-field label{
  display:block;font-family:var(--pl-sans);font-size:11px;font-weight:500;letter-spacing:.5px;
  color:var(--pl-muted);margin-bottom:6px;text-transform:none;
}
.login-box .lfield input,.login-box .form-group input,.login-box .login-field input,.login-box .login-input{
  width:100%;background:var(--pl-bg);border:1px solid var(--pl-border);border-radius:8px;
  padding:11px 14px;color:var(--pl-text);font-family:var(--pl-sans);font-size:13px;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.login-box .lfield input:focus,.login-box .form-group input:focus,.login-box .login-field input:focus,.login-box .login-input:focus{
  border-color:var(--pl-blue);box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.login-box .login-btn,.login-box .action-btn{
  display:block;width:100%;background:var(--pl-blue);color:#fff;border:none;border-radius:10px;
  padding:13px;margin-top:8px;font-family:var(--pl-sans);font-size:13px;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:background .2s,opacity .2s;
}
.login-box .login-btn:hover,.login-box .action-btn:hover{background:var(--pl-blue2)}
.login-box .login-btn:disabled,.login-box .action-btn:disabled{opacity:.6;cursor:default}
.login-box .login-err,.login-box .error-msg,.login-box .login-error{
  font-family:var(--pl-sans);font-size:12px;color:var(--pl-red);text-align:center;margin-top:10px;min-height:16px;
}
.login-box .login-foot{
  font-family:var(--pl-mono);font-size:9px;letter-spacing:1px;color:var(--pl-muted);text-align:center;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--pl-border);
}

@media (max-width:480px){
  #login-screen .login-box,#loginScreen .login-box,#loginOverlay .login-box,.pl-login-screen .login-box{padding:32px 24px}
}