/* Smart EZ — Login futurista (somente /erp/login.html)
   Estilização visual sem alterar textos, IDs, formulários ou fluxos de autenticação. */
:root {
  --sez-login-orange: #ff6a00;
  --sez-login-orange-2: #ff8a27;
  --sez-login-violet: #6865ff;
  --sez-login-motion: 420ms cubic-bezier(.2,.75,.25,1);
}

body {
  isolation: isolate;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: #080b15;
  transition: background-color var(--sez-login-motion), color var(--sez-login-motion);
}
.bg-pattern {
  pointer-events: none;
  opacity: .98;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(255,106,0,.18), transparent 47%),
    radial-gradient(ellipse at 76% 4%, rgba(90,91,255,.19), transparent 42%),
    radial-gradient(ellipse at 66% 94%, rgba(30,190,255,.09), transparent 43%);
  background-size: 150% 150%;
  animation: sezAmbient 18s ease-in-out infinite alternate;
}
.grid-lines {
  pointer-events: none;
  opacity: .68;
  background-image:
    linear-gradient(rgba(149,170,220,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(149,170,220,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 84%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 84%);
}
.login-brand {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(16,20,39,.24), rgba(22,28,51,.08));
}
.login-brand::before {
  content: "";
  position: absolute;
  width: min(48vw, 590px);
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%; top: 48%;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(135,145,255,.11);
  box-shadow: 0 0 0 44px rgba(110,112,255,.025), 0 0 0 96px rgba(110,112,255,.018), inset 0 0 80px rgba(255,106,0,.04);
  pointer-events: none;
  animation: sezOrbit 24s linear infinite;
}
.brand-content { position: relative; z-index: 1; }
.dp-new-login-logo {
  filter: drop-shadow(0 15px 34px rgba(255,106,0,.13));
  animation: sezLogoIn 850ms cubic-bezier(.2,.75,.25,1) both;
}
.brand-features { gap: 13px; }
.brand-feature {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(167,181,228,.13);
  box-shadow: 0 8px 28px rgba(0,0,0,.06);
  backdrop-filter: blur(14px);
  transition: transform var(--sez-login-motion), border-color var(--sez-login-motion), background var(--sez-login-motion), box-shadow var(--sez-login-motion);
  animation: sezFeatureIn 650ms both;
}
.brand-feature:nth-child(2) { animation-delay: 90ms; }
.brand-feature:nth-child(3) { animation-delay: 180ms; }
.brand-feature::after {
  content: ""; position: absolute; inset: 0 auto 0 -75%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-18deg); transition: left 650ms ease; pointer-events: none;
}
.brand-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255,138,39,.42);
  background: rgba(255,255,255,.07);
  box-shadow: 0 14px 34px rgba(0,0,0,.15), 0 0 24px rgba(255,106,0,.055);
}
.brand-feature:hover::after { left: 135%; }
.brand-feature i { box-shadow: 0 6px 18px rgba(255,106,0,.10); }
.login-panel {
  isolation: isolate;
  overflow: hidden;
  background: rgba(10,14,27,.82);
  border-left: 1px solid rgba(151,165,213,.14);
  box-shadow: -24px 0 70px rgba(0,0,0,.12);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  animation: sezPanelIn 650ms cubic-bezier(.2,.75,.25,1) both;
}
.login-panel::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,138,39,.55), rgba(110,112,255,.4), transparent);
  pointer-events: none;
}
.login-header h2 { letter-spacing: -.7px; }
.form-input {
  border-color: rgba(143,158,205,.22);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color var(--sez-login-motion), box-shadow var(--sez-login-motion), background-color var(--sez-login-motion), transform var(--sez-login-motion);
}
.form-input:hover { border-color: rgba(255,138,39,.4); }
.form-input:focus { transform: translateY(-1px); }
.btn-login {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(110deg, #ff6a00 0%, #ff7920 48%, #ff9637 100%);
  box-shadow: 0 10px 25px rgba(255,106,0,.20), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform var(--sez-login-motion), box-shadow var(--sez-login-motion), filter var(--sez-login-motion);
}
.btn-login::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 -80%; width: 38%;
  transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transition: left 720ms ease;
}
.btn-login:hover { transform: translateY(-2px); filter: saturate(1.06); box-shadow: 0 14px 32px rgba(255,106,0,.29), 0 0 0 1px rgba(255,165,91,.16); }
.btn-login:hover::before { left: 145%; }
.btn-login:active { transform: translateY(0) scale(.995); }
.forgot-link, .qr-cancel { transition: color var(--sez-login-motion), text-shadow var(--sez-login-motion); }
.forgot-link:hover { text-shadow: 0 0 18px rgba(255,106,0,.26); }
.qr-divider { gap: 14px; margin: 22px 0 15px; letter-spacing: .04em; }
.qr-divider::before, .qr-divider::after { transition: background-color var(--sez-login-motion); }
.btn-qr-login {
  min-height: 48px;
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  border-color: rgba(142,157,204,.24);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: color var(--sez-login-motion), border-color var(--sez-login-motion), background var(--sez-login-motion), transform var(--sez-login-motion), box-shadow var(--sez-login-motion);
}
.btn-qr-login i { color: var(--sez-login-orange); }
.btn-qr-login:hover { transform: translateY(-1px); border-color: rgba(255,106,0,.7); box-shadow: 0 8px 22px rgba(255,106,0,.08); }
.qr-login-panel { border-radius: 16px; backdrop-filter: blur(16px); animation: sezPanelIn 300ms ease both; }
.qr-login-panel h3 { font-weight: 750; }
.qr-code-area { box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* Claro: contraste explícito para o atalho e para todo o fluxo do QR Code. */
html[data-theme="light"] body {
  background: #f3f6fc;
  color: #172033;
}
html[data-theme="light"] .bg-pattern {
  opacity: .72;
  background:
    radial-gradient(ellipse at 14% 16%, rgba(255,106,0,.115), transparent 48%),
    radial-gradient(ellipse at 79% 8%, rgba(91,91,255,.105), transparent 44%),
    radial-gradient(ellipse at 65% 95%, rgba(24,171,222,.065), transparent 45%);
}
html[data-theme="light"] .grid-lines {
  opacity: .5;
  background-image: linear-gradient(rgba(55,70,105,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(55,70,105,.055) 1px, transparent 1px);
}
html[data-theme="light"] .login-brand {
  background: linear-gradient(135deg, rgba(255,255,255,.50), rgba(246,248,253,.25));
}
html[data-theme="light"] .login-panel {
  background: rgba(255,255,255,.91);
  border-left-color: rgba(101,117,151,.16);
  box-shadow: -20px 0 65px rgba(31,47,82,.07);
}
html[data-theme="light"] .login-header h2 { color: #111827; }
html[data-theme="light"] .login-header p { color: #667085; }
html[data-theme="light"] .form-label { color: #526078; }
html[data-theme="light"] .form-input {
  color: #182236;
  background: rgba(239,243,251,.86);
  border-color: #d7deeb;
  box-shadow: inset 0 1px 2px rgba(23,32,51,.025);
}
html[data-theme="light"] .form-input::placeholder { color: #8994a8; }
html[data-theme="light"] .input-wrap i { color: #71809a; }
html[data-theme="light"] .remember-check span { color: #667085; }
html[data-theme="light"] .qr-divider { color: #667085; }
html[data-theme="light"] .qr-divider::before,
html[data-theme="light"] .qr-divider::after { background: #d6deeb; }
html[data-theme="light"] body .login-panel .btn-qr-login {
  color: #24324b !important;
  background: linear-gradient(135deg, #fff 0%, #f1f5fc 100%) !important;
  border: 1px solid #cbd6e7 !important;
  box-shadow: 0 5px 16px rgba(38,55,87,.055), inset 0 1px 0 #fff !important;
}
html[data-theme="light"] body .login-panel .btn-qr-login i { color: #ff6a00 !important; }
html[data-theme="light"] body .login-panel .btn-qr-login:hover {
  color: #101a2d !important;
  border-color: #ff9c51 !important;
  background: #fffaf5 !important;
  box-shadow: 0 8px 22px rgba(255,106,0,.11) !important;
}
html[data-theme="light"] .qr-login-panel {
  color: #1c2940;
  background: rgba(255,255,255,.97);
  border-color: rgba(255,106,0,.30);
  box-shadow: 0 14px 38px rgba(31,47,82,.08);
}
html[data-theme="light"] .qr-login-panel h3 { color: #182236; }
html[data-theme="light"] .qr-login-panel > p,
html[data-theme="light"] .qr-login-status { color: #5b6880; }
html[data-theme="light"] .qr-loading { color: #46546b; }
html[data-theme="light"] .qr-cancel { color: #c94e00; }
html[data-theme="light"] .login-footer { color: #7d8799; }

/* A marca Smart EZ fica visível também no layout móvel; os textos existentes são preservados. */
@media (max-width: 960px) {
  body { flex-direction: column; align-items: stretch; overflow-x: hidden; }
  body .login-brand {
    display: flex !important;
    order: 0;
    width: 100%;
    min-height: auto;
    flex: 0 0 auto;
    justify-content: center;
    padding: 22px 20px 4px;
    background: transparent;
  }
  .login-brand::before { width: 270px; top: 55%; opacity: .58; }
  .brand-content { width: 100%; max-width: 430px; }
  .dp-new-login-logo {
    display: block;
    width: min(224px, 66vw) !important;
    max-width: 100%;
    margin: 0 auto 4px !important;
  }
  .brand-content > p, .brand-features { display: none !important; }
  body .login-panel {
    order: 1;
    width: 100%;
    min-height: 0;
    height: auto;
    flex: 1 0 auto;
    justify-content: flex-start;
    padding: 22px clamp(20px, 6.5vw, 34px) max(24px, env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-top: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
  }
  .login-header { margin-bottom: 28px; }
  .login-header h2 { font-size: clamp(23px, 6vw, 28px); }
  .login-panel::before { display: none; }
  .form-group { margin-bottom: 18px; }
}
@media (max-width: 480px) {
  body .login-brand { padding-top: 18px; }
  .dp-new-login-logo { width: min(194px, 58vw) !important; }
  body .login-panel { padding-top: 18px; }
  .login-header { margin-bottom: 24px; }
  .form-options { margin-bottom: 22px; }
  .qr-login-panel { padding: 14px; }
}
@media (max-width: 960px) and (max-height: 620px) {
  body .login-brand { padding-top: 8px; }
  .dp-new-login-logo { width: min(150px, 42vw) !important; margin-bottom: 0 !important; }
  body .login-panel { padding-top: 10px; }
  .login-header { margin-bottom: 16px; }
  .form-group { margin-bottom: 12px; }
  .form-options { margin-bottom: 14px; }
  .qr-divider { margin: 14px 0 10px; }
}
@keyframes sezAmbient { from { background-position: 0% 10%; } to { background-position: 100% 90%; } }
@keyframes sezOrbit { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes sezLogoIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sezFeatureIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sezPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .bg-pattern, .login-brand::before, .dp-new-login-logo, .brand-feature, .login-panel, .qr-login-panel { animation: none !important; }
  .brand-feature, .form-input, .btn-login, .btn-qr-login { transition: none !important; }
  .btn-login::before, .brand-feature::after { display: none !important; }
}