/* =====================================================================
   Bridge v2 — Login split (arte à esquerda, formulário à direita)
   Aplicado só com <body class="login-v2">. Mantém o form/IDs originais.
   ===================================================================== */
@keyframes lg-pop   { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lg-blob  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-18px) scale(1.08); } }

body.login-v2 {
  background: #fff !important;
  min-height: 100vh; margin: 0; overflow: hidden;
  font-family: 'Inter', 'Roboto', system-ui, sans-serif !important;
  padding: 0;
}
body.login-v2 #app { width: 100%; height: 100vh; }
body.login-v2 main.py-4 { padding: 0 !important; height: 100vh; }

/* ---- Split em tela cheia (100% da viewport) ---- */
body.login-v2 .v2-login-shell {
  display: flex; width: 100vw; height: 100vh; max-width: none; min-height: 100vh;
  background: #fff; border-radius: 0; overflow: hidden; box-shadow: none;
  animation: lg-pop .55s cubic-bezier(.2,.8,.25,1) both;
}

/* ---- Painel de arte (esquerda): carrossel PH Magic em tela cheia ----
   Artes em modo cover (imersivo), ancoradas à ESQUERDA para preservar
   o logo da arte. Crossfade entre slides + Ken Burns sutil. */
body.login-v2 .v2-login-art {
  position: relative; flex: 1.08; overflow: hidden;
  background: #150a2e; /* tom da arte enquanto carrega */
}
body.login-v2 .v2-art-slides { position: absolute; inset: 0; z-index: 1; }
body.login-v2 .v2-art-bg {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: 26% center;
  opacity: 0; transition: opacity 1.1s ease;
}
body.login-v2 .v2-art-bg.on {
  opacity: 1;
  animation: lg-kb 26s ease-in-out infinite alternate;
}
@keyframes lg-kb { from { transform: scale(1); } to { transform: scale(1.05); } }
/* scrim: escurece topo (logo PH) e base (texto) sem apagar a arte */
body.login-v2 .v2-login-art::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    rgba(12,6,32,.42) 0%, rgba(12,6,32,0) 24%,
    rgba(12,6,32,0) 56%, rgba(8,4,24,.85) 100%);
}
/* blobs antigos fora — a arte já é o show */
body.login-v2 .v2-blob { display: none; }

body.login-v2 .v2-art-inner {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 38px;
}
body.login-v2 .v2-art-logo {
  width: 128px; height: auto; opacity: 1 !important;
  filter: drop-shadow(0 8px 22px rgba(10,30,80,.28));
  animation: lg-float 6s ease-in-out infinite;
}
body.login-v2 .v2-art-caption h3 {
  color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px;
  text-shadow: 0 2px 16px rgba(10,30,80,.28); text-align: left;
}
body.login-v2 .v2-art-caption p {
  color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.5; margin: 0 0 18px;
  text-shadow: 0 1px 10px rgba(10,30,80,.2); text-align: left;
}
body.login-v2 .v2-dots { display: flex; gap: 7px; }
body.login-v2 .v2-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); display: block; }
body.login-v2 .v2-dots i.on { width: 22px; border-radius: 999px; background: #fff; }

/* ---- Painel do formulário (direita) ---- */
body.login-v2 .v2-login-panel {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 46px 48px; background: #fff;
}
body.login-v2 .v2-login-form { width: 100%; max-width: 340px; }
body.login-v2 #formContent {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; text-align: left !important; width: 100%;
}
body.login-v2 #formContent h2,
body.login-v2 #formContent h2.header {
  font-size: 24px !important; font-weight: 800 !important; color: #1a2233 !important;
  text-align: left !important; margin: 0 0 6px !important; padding: 0 !important;
  border: 0 !important; letter-spacing: -.02em !important; text-transform: none !important;
}
body.login-v2 #formContent #erro {
  color: #5b6577 !important; font-size: 14px !important; margin: 0 0 26px !important; text-align: left !important;
}

/* campos com ícone */
body.login-v2 #form input#usuario,
body.login-v2 #form input#senha,
body.login-v2 #form input[type="text"],
body.login-v2 #form input[type="password"] {
  width: 100% !important; box-sizing: border-box;
  border: 1px solid #e7eaf1 !important; border-radius: 12px !important;
  padding: 14px 14px 14px 44px !important; margin: 0 0 14px !important;
  font-size: 14px !important; background-color: #fff !important; color: #1a2233 !important;
  text-align: left !important;
  background-repeat: no-repeat; background-position: 15px center; background-size: 18px;
  transition: border-color .15s, box-shadow .15s;
}
body.login-v2 #form input#usuario {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398a1b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}
body.login-v2 #form input#senha {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2398a1b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
}
body.login-v2 #form input::placeholder { color: #98a1b3 !important; }
body.login-v2 #form input:focus {
  border-color: #3b82f6 !important; box-shadow: 0 0 0 4px rgba(37,99,235,.15) !important; outline: 0 !important;
}

/* botão entrar */
body.login-v2 #entrar,
body.login-v2 .button_link {
  display: block !important; width: 100% !important;
  background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff !important;
  border: 0 !important; border-radius: 12px !important; padding: 14px !important;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em;
  margin: 8px 0 0 !important; cursor: pointer; text-transform: none !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.38) !important;
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
body.login-v2 #entrar:hover,
body.login-v2 .button_link:hover { box-shadow: 0 16px 32px rgba(37,99,235,.5) !important; filter: brightness(1.03); }
body.login-v2 #entrar:active,
body.login-v2 .button_link:active { transform: scale(.98); }

/* nota legal curta */
body.login-v2 .v2-legal { margin: 22px 0 0 !important; font-size: 10.5px; line-height: 1.5; color: #98a1b3; text-align: left; }

/* limpa <br> antigos que possam sobrar */
body.login-v2 #formContent br { display: none; }

/* ---- SweetAlert2 premium no login (toasts + modais) ---- */
body.login-v2 .swal2-container.swal2-backdrop-show {
  background: rgba(15,23,42,.55) !important;
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  backdrop-filter: blur(5px) saturate(120%);
}
/* toasts NÃO têm véu de fundo (senão vira uma faixa cinza na tela) */
body.login-v2 .swal2-container:has(.swal2-popup.swal2-toast) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.login-v2 .swal2-popup {
  border-radius: 22px !important;
  padding: 30px 28px 26px !important;
  font-family: 'Inter', 'Roboto', system-ui, sans-serif !important;
  box-shadow: 0 40px 90px rgba(10,15,30,.4) !important;
}
body.login-v2 .swal2-title {
  font-size: 20px !important; font-weight: 800 !important;
  letter-spacing: -.01em; color: #1a2233 !important;
}
body.login-v2 .swal2-html-container { font-size: 14px !important; line-height: 1.6 !important; color: #5b6577 !important; }
body.login-v2 .swal2-icon { transform: scale(.86); margin-top: 4px !important; }
body.login-v2 .swal2-icon.swal2-success { border-color: #86e3ac !important; color: #16a34a !important; }
body.login-v2 .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #16a34a !important; }
body.login-v2 .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(22,163,74,.3) !important; }
body.login-v2 .swal2-icon.swal2-error { border-color: #f4a9ab !important; color: #e5484d !important; }
body.login-v2 .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: #e5484d !important; }
body.login-v2 .swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, #4f8bff, #2563eb) !important;
  border-radius: 12px !important; border: 0 !important;
  padding: 12px 28px !important; font-weight: 700 !important; font-size: 14px !important;
  box-shadow: 0 10px 22px -6px rgba(37,99,235,.5) !important;
}
body.login-v2 .swal2-timer-progress-bar { background: linear-gradient(90deg, #4f8bff, #2563eb) !important; height: 3px; }
body.login-v2 .swal2-popup.swal2-toast {
  border-radius: 16px !important;
  padding: 14px 18px !important;
  box-shadow: 0 18px 44px -10px rgba(15,23,42,.28), 0 0 0 1px #e7eaf1 !important;
}
body.login-v2 .swal2-popup.swal2-toast .swal2-title {
  font-size: 14px !important; font-weight: 700 !important; margin: 0 0 1px !important;
}
body.login-v2 .swal2-popup.swal2-toast .swal2-html-container {
  font-size: 12.5px !important; color: #98a1b3 !important; margin: 0 !important;
}
body.login-v2 .swal2-popup.swal2-toast .swal2-icon { transform: scale(.72); margin: 0 !important; }

/* ---- Responsivo: empilha e esconde a arte ---- */
@media (max-width: 820px) {
  body.login-v2 .v2-login-shell { flex-direction: column; }
  body.login-v2 .v2-login-art { flex: none; height: 32vh; min-height: 190px; }
  body.login-v2 .v2-art-inner { padding: 22px 24px; }
  body.login-v2 .v2-art-logo { width: 96px; }
  body.login-v2 .v2-login-panel { flex: 1; padding: 34px 26px 38px; align-items: flex-start; }
}
