/* ======================================================
   POPUP DE AUTENTICAÇÃO – ESTILOS (robusto c/ fallbacks)
   ====================================================== */

/* ---------- Tokens locais com fallbacks ---------- */
:root{
  --auth-grad-start: var(--brand-navy, #081a70);
  --auth-grad-end:   var(--brand-sky,  #00aeef);

  --auth-bg:         var(--cor-bg,       #f8f9fb);
  --auth-card-bg:    var(--cor-bg-alt,   #ffffff);
  --auth-text:       var(--cor-texto,    #212529);
  --auth-muted:      var(--cor-texto-sec,#495057);
  --auth-border:     var(--cor-borda,    #dee2e6);

  --auth-shadow-sm:  var(--sombra-sm, 0 2px 6px rgba(0,0,0,.08));
  --auth-shadow-md:  var(--sombra-md, 0 4px 12px rgba(0,0,0,.12));
  --auth-shadow-lg:  var(--sombra-lg, 0 8px 24px rgba(0,0,0,.14));

  --auth-radius-sm:  var(--radius-sm, .35rem);
  --auth-radius:     var(--radius,     .55rem);
  --auth-radius-lg:  var(--radius-lg,  .75rem);

  --auth-icon-left:  1rem;
  --auth-icon-size:  1.25rem;
  --auth-icon-gap:   0.75rem;
}

html{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body.modal-open{
  padding-right: 0 !important;
}

body.modal-open .top-bar,
body.modal-open .navigation-wrap,
body.modal-open .footer-mobile-nav{
  padding-right: 0 !important;
}

/* ======================================================
   Estrutura do modal (scoped para evitar conflitos)
====================================================== */
#authModal .modal-dialog{ margin: 1.25rem auto; }
#authModal .auth-modal-content{
  border:none;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  overflow:hidden;
  transform:scale(.9);
  opacity:0;
  transition:all .3s ease;
  max-width:450px;
  margin:0 auto;
  background:var(--auth-card-bg);
  color:var(--auth-text);
  position: relative;
}
#authModal .auth-modal-content.show{
  transform:scale(1);
  opacity:1;
}

/* Cabeçalho */
#authModal .auth-modal-header{
  background:linear-gradient(135deg,var(--auth-grad-start),var(--auth-grad-end));
  color:#fff;
  padding:2rem 2rem 1rem;
  text-align:center;
  border-bottom:none;
  position:relative;
}
#authModal .auth-modal-header::after{
  content:"";
  position:absolute;
  bottom:-10px; left:50%;
  transform:translateX(-50%);
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid var(--auth-grad-end);
}
#authModal .btn-close-white{ filter:invert(1); opacity:.8; }
#authModal .btn-close-white:hover{ opacity:1; }

/* Tabs */
#authModal .auth-tabs-container{ padding:1.5rem 2rem 0; background:var(--auth-bg); }
#authModal .auth-nav-tabs{
  border:none; background:#e9ecef; border-radius:15px; padding:.5rem;
}
#authModal .auth-nav-tabs .nav-link{
  border:none; border-radius:10px; color:var(--auth-muted);
  font-weight:600; padding:.75rem 1rem; position:relative; overflow:hidden;
  font-size:.95rem; transition:all .3s ease; background:transparent;
}
#authModal .auth-nav-tabs .nav-link::before{
  content:""; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition:left .5s;
}
#authModal .auth-nav-tabs .nav-link:hover::before{ left:100%; }
#authModal .auth-nav-tabs .nav-link.active{
  background:linear-gradient(135deg,var(--auth-grad-start),var(--auth-grad-end));
  color:#fff; box-shadow:0 4px 15px rgba(8,26,112,.25); transform:translateY(-2px);
}

/* Conteúdo/tab */
#authModal .auth-tab-content{ background:var(--auth-bg); }
#authModal .auth-form-container{
  padding:2rem; background:#fff; margin:0 2rem 2rem;
  border-radius:15px; box-shadow:var(--auth-shadow-sm);
  border:1px solid #f1f3f4; animation:fadeInUp .5s ease;
}
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
#authModal .auth-form-header h4{ color:#2c3e50; font-weight:700; margin-bottom:.5rem; }
#authModal .auth-form-header p{  color:var(--auth-muted); font-size:.95rem; }

/* Inputs (floating + ícone à esquerda) */
#authModal .form-floating{ position:relative; margin-bottom:1.5rem; transition:all .3s ease; }
#authModal .auth-input{
  border:2px solid var(--auth-border);
  border-radius:12px;
  padding:1.65rem 3.4rem .55rem calc(var(--auth-icon-left) + var(--auth-icon-size) + var(--auth-icon-gap));
  background:var(--auth-bg);
  font-size:1rem;
  height:64px;
  line-height:1.25;
  overflow:visible;
  transition:all .3s ease;
  color:var(--auth-text);
}
#authModal .auth-input:focus{
  border-color:var(--auth-grad-end);
  box-shadow:0 0 0 .2rem rgba(0,174,239,.18);
  background:#fff; transform:translateY(-2px);
}
#authModal .auth-input:not(:placeholder-shown){ background:#fff; }

#authModal .form-floating label{
  height:auto;
  left:0;
  line-height:1.1;
  max-width:calc(100% - 4rem);
  overflow:hidden;
  padding:.55rem 0 0 calc(var(--auth-icon-left) + var(--auth-icon-size) + var(--auth-icon-gap));
  text-overflow:ellipsis;
  transform:none !important;
  white-space:nowrap;
  color:var(--auth-muted); font-weight:500; font-size:.78rem;
}
#authModal .auth-input-icon{
  position:absolute; left:var(--auth-icon-left); top:50%;
  transform:translateY(-50%); font-size:var(--auth-icon-size);
  color:var(--auth-muted); z-index:2; pointer-events:none; transition:color .3s ease;
}
#authModal .auth-input:focus ~ .auth-input-icon,
#authModal .auth-input:not(:placeholder-shown) ~ .auth-input-icon{ color:var(--auth-grad-end); }

/* Botões */
#authModal .btn-auth-primary{
  background:linear-gradient(135deg,var(--auth-grad-start),var(--auth-grad-end));
  border:none; border-radius:12px; padding:1rem 2rem;
  font-weight:600; font-size:1.1rem; color:#fff;
  overflow:hidden; transition:all .3s ease; position:relative;
}
#authModal .btn-auth-primary::before{
  content:""; position:absolute; inset:0; left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .5s;
}
#authModal .btn-auth-primary:hover{
  transform:translateY(-3px); box-shadow:0 8px 24px rgba(8,26,112,.25); filter:brightness(1.03);
}
#authModal .btn-auth-primary:hover::before{ left:100%; }
#authModal .btn-auth-primary:active{ transform:translateY(-1px); }
#authModal .btn-auth-primary:disabled{ opacity:.7; transform:none; box-shadow:none; }

#authModal .auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: -.55rem 0 1.15rem;
}

#authModal .auth-remember-row {
  align-items: center;
  color: var(--auth-muted);
  display: flex;
  font-size: .92rem;
  gap: .5rem;
  margin: -.2rem 0 1rem;
}

#authModal .auth-remember-row .form-check-input {
  border-color: var(--auth-border);
  cursor: pointer;
  margin: 0;
}

#authModal .auth-remember-row .form-check-input:checked {
  background-color: var(--cor-prim, #2662aa);
  border-color: var(--cor-prim, #2662aa);
}

#authModal .auth-remember-row .form-check-label {
  cursor: pointer;
}

#authModal .auth-forgot-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--cor-prim, #2662aa);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 600;
  padding: 0;
  text-decoration: none;
}

#authModal .auth-forgot-link:hover,
#authModal .auth-forgot-link:focus-visible {
  color: var(--template-blue-hover, #285f9d);
  text-decoration: underline;
}

/* Alerts */
#authModal .alert{
  border:none; border-radius:12px; padding:1rem 1.5rem; font-weight:500; font-size:.95rem;
}
#authModal .alert-success{
  background:linear-gradient(135deg,var(--brand-green, #28a745), #229954); color:#fff;
}
#authModal .alert-danger{
  background:linear-gradient(135deg,#dc3545, #b02a37); color:#fff;
}
#authModal .alert .btn-close{ filter:invert(1); opacity:.8; }
#authModal .alert .btn-close:hover{ opacity:1; }

/* Shimmer top bar */
#authModal .auth-modal-content::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--auth-grad-start),var(--auth-grad-end),var(--auth-grad-start));
  background-size:200% 100%; animation:authShimmer 2s infinite; z-index:10;
}
@keyframes authShimmer{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }

/* Overlay */
.modal-backdrop{ background-color:rgba(0,0,0,.6); backdrop-filter:blur(5px); }

/* Transições tab */
#authModal .tab-pane{ transition:opacity .3s ease; }
#authModal .tab-pane:not(.active){ opacity:0; }
#authModal .tab-pane.active{ opacity:1; }

/* Responsivo */
@media (max-width: 768px){
  #authModal .auth-modal-header{ padding:1.5rem 1.5rem 1rem; }
  #authModal .auth-tabs-container{ padding:1rem 1.5rem 0; }
  #authModal .auth-form-container{ margin:0 1.5rem 1.5rem; padding:1.5rem; }
  #authModal .auth-nav-tabs .nav-link{ padding:.6rem .8rem; font-size:.9rem; }
  #authModal .auth-input{
    padding:1.55rem 3.2rem .5rem calc(var(--auth-icon-left) + var(--auth-icon-size) + var(--auth-icon-gap));
    height:62px;
  }
  #authModal .form-floating label{
    padding-left:calc(var(--auth-icon-left) + var(--auth-icon-size) + var(--auth-icon-gap));
    padding-top:.5rem;
    font-size:.76rem;
  }
  #authModal .auth-input-icon{ left:.9rem; font-size:1rem; }
}

@media (min-width: 576px) {
  #authModal .modal-dialog {
    margin: 1.75rem auto;          /* igual ao Bootstrap por cima de 576px */
  }
}

/* Versao limpa alinhada com a pagina normal de login */
#authModal .auth-modal-content {
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
  max-width: 520px;
  overflow: visible;
}

#authModal .auth-modal-content::before {
  display: none;
}

#authModal .auth-modal-header {
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  position: static;
}

#authModal .auth-modal-header::after,
#authModal .auth-modal-header .modal-title {
  display: none;
}

#authModal .auth-modal-header .btn-close {
  filter: none;
  opacity: .75;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 5;
}

#authModal .auth-modal-header .btn-close:hover {
  opacity: 1;
}

#authModal .auth-tabs-container {
  background: #fff;
  padding: 5.1rem 2.5rem 0;
  position: relative;
}

#authModal .auth-tabs-container::before {
  background: url('../img/geral/logo.png') center / contain no-repeat;
  content: "";
  display: block;
  height: 58px;
  left: 50%;
  position: absolute;
  top: 1.55rem;
  transform: translateX(-50%);
  width: 58px;
}

#authModal .auth-nav-tabs {
  background: #f8f9fb;
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  padding: .25rem;
}

#authModal .auth-nav-tabs .nav-link {
  border-radius: 6px;
  padding: .62rem 1rem;
}

#authModal .auth-nav-tabs .nav-link::before {
  display: none;
}

#authModal .auth-nav-tabs .nav-link.active {
  background: #2662aa;
  box-shadow: 0 4px 12px rgba(38,98,170,.22);
  color: #fff;
  transform: none;
}

#authModal .auth-tab-content {
  background: #fff;
  border-radius: 0 0 12px 12px;
}

#authModal .auth-form-container {
  background: #fff;
  border: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: none;
  margin: 0;
  padding: 1.55rem 2.5rem 2.5rem;
}

#authModal .auth-form-header {
  text-align: center;
}

#authModal .auth-form-header h4 {
  color: #2c3e50;
  font-size: clamp(1.65rem, 1.25rem + 1.1vw, 2.2rem);
  font-weight: 700;
}

#authModal .auth-form-header p {
  color: var(--auth-muted);
  font-size: 1rem;
}

#authModal .auth-input {
  background: #fff;
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  height: 56px;
  padding: 1rem 3.4rem 1rem 1rem !important;
}

#authModal .auth-input:focus {
  border-color: #2662aa;
  box-shadow: 0 0 0 .2rem rgba(38,98,170,.14);
  transform: none;
}

#authModal .form-floating label {
  padding: 1rem !important;
}

#authModal .auth-input-icon {
  display: none;
}

#authModal .btn-auth-primary {
  background: #2f6fb6;
  border: 1px solid #2f6fb6;
  border-radius: 6px;
  font-size: 1rem;
  padding: .72rem 1.1rem;
}

#authModal .btn-auth-primary:hover {
  background: #2662aa;
  border-color: #2662aa;
  box-shadow: 0 6px 18px rgba(38,98,170,.18);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  #authModal .auth-tabs-container {
    padding: 4.8rem 1.5rem 0;
  }

  #authModal .auth-form-container {
    padding: 1.4rem 1.5rem 1.8rem;
  }
}

/* Popup igual ao card normal de login */
#authModal.auth-clean-modal .modal-dialog {
  max-width: 620px;
}

#authModal.auth-clean-modal .auth-modal-content {
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  box-shadow: var(--auth-shadow-sm);
  max-width: 460px;
}

#authModal.auth-clean-modal .auth-modal-header {
  height: 0;
  min-height: 0;
  padding: 0;
}

#authModal.auth-clean-modal .auth-modal-header .modal-title {
  display: none;
}

#authModal.auth-clean-modal .auth-modal-header .btn-close {
  filter: none;
  opacity: .78;
  position: absolute;
  right: 1.35rem;
  top: 1.35rem;
  z-index: 5;
}

#authModal.auth-clean-modal .auth-modal-header .btn-close:hover {
  opacity: 1;
}

#authModal.auth-clean-modal .auth-tabs-container {
  background: #fff;
  min-height: 96px;
  padding: 0;
}

#authModal.auth-clean-modal .auth-tabs-container::before {
  background: url('../img/geral/logo.png') center / contain no-repeat;
  content: "";
  display: block;
  height: 58px;
  left: 50%;
  position: absolute;
  top: 2rem;
  transform: translateX(-50%);
  width: 58px;
}

#authModal.auth-clean-modal .auth-nav-tabs {
  display: none;
}

#authModal.auth-clean-modal .auth-form-container {
  padding: 0 2.5rem 2.5rem;
}

#authModal.auth-clean-modal .auth-form-header h4 {
  color: #2c3e50;
  font-size: calc(1.325rem + .9vw);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: .5rem;
}

#authModal.auth-clean-modal .auth-form-header p {
  color: var(--cor-texto-sec, #495057);
  font-size: .92rem;
  margin-bottom: 2rem !important;
}

@media (min-width: 1200px) {
  #authModal.auth-clean-modal .auth-form-header h4 {
    font-size: 2rem;
  }
}

#authModal.auth-clean-modal .form-floating {
  margin-bottom: 1.25rem;
}

#authModal.auth-clean-modal .auth-input {
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  font-size: 1rem;
  height: 58px;
  padding: 1rem 3.2rem 1rem 1rem !important;
}

#authModal.auth-clean-modal .form-floating > .auth-input:focus,
#authModal.auth-clean-modal .form-floating > .auth-input:not(:placeholder-shown) {
  padding-top: 1.625rem !important;
  padding-bottom: .625rem !important;
}

#authModal.auth-clean-modal .auth-input:focus {
  border-color: #2662aa;
  box-shadow: 0 0 0 .2rem rgba(38,98,170,.14);
  transform: none;
}

#authModal.auth-clean-modal .form-floating label {
  font-size: 1rem;
  padding: 1rem !important;
}

#authModal.auth-clean-modal .form-floating > .auth-input:focus ~ label,
#authModal.auth-clean-modal .form-floating > .auth-input:not(:placeholder-shown) ~ label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem) !important;
}

#authModal.auth-clean-modal .auth-input-icon {
  display: none;
}

#authModal.auth-clean-modal .auth-forgot-row {
  margin: -.2rem 0 1.5rem;
}

#authModal.auth-clean-modal .auth-remember-row {
  margin: -.15rem 0 1rem;
}

#authModal.auth-clean-modal .btn-auth-primary {
  background: #2f6fb6;
  border: 1px solid #2f6fb6;
  border-radius: 6px;
  box-shadow: none;
  font-size: 1rem;
  padding: .72rem 1.1rem;
}

#authModal.auth-clean-modal .btn-auth-primary::before {
  display: none;
}

#authModal.auth-clean-modal .btn-auth-primary:hover {
  background: #2f6fb6;
  border-color: #2f6fb6;
  box-shadow: none;
  transform: none;
}

#authModal.auth-clean-modal .auth-switch-row {
  align-items: center;
  color: var(--auth-muted);
  display: flex;
  gap: .55rem;
  justify-content: center;
  margin-top: .85rem;
  text-align: center;
}

#authModal.auth-clean-modal .auth-switch-link {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--cor-prim, #2662aa);
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  padding: 0;
  white-space: nowrap;
}

#authModal.auth-clean-modal .auth-switch-row span {
  white-space: nowrap;
}

#authModal.auth-clean-modal .auth-switch-link:hover,
#authModal.auth-clean-modal .auth-switch-link:focus-visible {
  color: var(--template-blue-hover, #285f9d);
  text-decoration: underline;
}

@media (max-width: 768px) {
  #authModal.auth-clean-modal .auth-form-container {
    padding: 0 1.5rem 1.8rem;
  }
}

@media (max-width: 420px) {
  #authModal.auth-clean-modal .auth-switch-row {
    flex-direction: column;
    gap: .25rem;
  }
}