/* ========================================================================
   TELA DE LOGIN — paridade visual com Carglass.Portal.Broker
   Fonte estrutural: C:\DSV\Carglass.Portal.Broker\...\wwwroot\css\login-redesign.css
   Adaptado para os tokens deste projeto (tokens.css) e ao escopo funcional
   real desta aplica\u00e7\u00e3o (Portal Companhia, sem cadastro/corretor).
   Depende de: tokens.css, components.css (carregados antes deste arquivo).
   ======================================================================== */
/* Reset local: esta página é standalone (Layout = null) e não carrega o
   bootstrap.css que fornece box-sizing:border-box no restante do site.
   Sem isso, bordas/paddings somam-se à largura/altura declaradas e o
   layout passa a exceder 100vh, gerando rolagem vertical indesejada. */
* { box-sizing: border-box; }
body.portal-login-body {
  margin: 0;
  min-width: 320px;
  background: var(--color-background-light);
  font-family: var(--font-family);
  color: var(--color-text-primary);
}

.portal-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 52%) 1fr;
}

/* --- Painel de identidade (showcase) --- */
.portal-login-showcase {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: linear-gradient(115deg, rgba(11, 22, 43, .9), rgba(19, 34, 58, .62)),
              url('../../img/lateral-esquerdo.jpg') center / cover no-repeat;
}

.portal-login-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 16, 35, .8) 0%, rgba(10, 20, 40, .3) 72%, rgba(225, 37, 27, .22) 100%);
}

.portal-login-ribbon {
  position: absolute;
  transform: skewX(-29deg);
  background: var(--color-primary);
  opacity: .94;
}

.ribbon-one { width: 115px; height: 118vh; top: -12%; right: 16%; }
.ribbon-two { width: 34px; height: 112vh; top: -6%; right: 7%; background: rgba(255, 255, 255, .3); }

.portal-login-showcase-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 56px clamp(42px, 7vw, 112px);
  color: #fff;
}

.portal-login-white-logo {
  width: 142px;
  height: auto;
  object-fit: contain;
  object-position: left;
  filter: brightness(0) invert(1);
}

.portal-login-copy {
  margin: auto 0 34px;
  max-width: 565px;
}

.portal-login-kicker,
.portal-login-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .15em;
  font-weight: 800;
}

.portal-login-kicker {
  color: #ffd1d3;
  margin-bottom: 18px;
}

.portal-login-copy h1 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.14;
  letter-spacing: -.045em;
  font-weight: 800;
}

.portal-login-copy p {
  margin: 0;
  max-width: 490px;
  color: rgba(255, 255, 255, .89);
  font-size: 17px;
  line-height: 1.65;
}

.portal-login-highlights {
  display: flex;
  gap: 25px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .94);
}

.portal-login-highlights i {
  color: #fff;
  margin-right: 6px;
}

/* --- Painel de acesso (formul\u00e1rio) --- */
.portal-login-access {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 76px 42px 98px;
  background: var(--color-background-light);
}

.portal-login-card {
  width: min(100%, 450px);
  padding: 15px;
}

.portal-login-access--form-long {
  padding-top: 42px;
  padding-bottom: 72px;
}

.portal-login-card--form-long .portal-login-mobile-logo {
  margin-bottom: 24px;
}

.portal-login-card--form-long .portal-login-heading {
  margin-bottom: 24px;
}

.portal-login-card--form-long .portal-field {
  margin-bottom: 16px;
}

.portal-login-card--form-long .portal-login-register {
  margin: 22px 0 18px;
}

.portal-login-card--form-long .portal-login-security {
  margin-top: 0;
}

.portal-login-mobile-logo {
  display: block;
  width: 135px;
  margin-bottom: 50px;
}

.portal-login-mobile-logo img {
  max-width: 100%;
}

.portal-login-heading {
  margin-bottom: 35px;
}

.portal-login-eyebrow {
  color: var(--color-primary);
  margin-bottom: 10px;
}

.portal-login-heading h2 {
  margin: 0 0 11px;
  font-size: 32px;
  letter-spacing: -.04em;
  font-weight: 800;
  color: var(--color-text-primary);
}

.portal-login-heading p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.portal-field {
  margin-bottom: 24px;
}

.portal-field label {
  margin-bottom: 9px;
  display: block;
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 13px;
}

.portal-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.portal-field-label a,
.portal-login-options a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.portal-field-label a:hover,
.portal-login-options a:hover {
  color: var(--color-primary-bold-600);
  text-decoration: underline;
}

.portal-input-wrap {
  height: 54px;
  border: 1px solid #d9deea;
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.portal-input-wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(225, 37, 27, .1);
}

.portal-input-wrap > i {
  width: 48px;
  text-align: center;
  color: #8994a8;
  font-size: 16px;
}

.portal-input-wrap input {
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0 14px 0 0;
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-primary);
  background: transparent !important;
}

.portal-input-wrap input::placeholder {
  color: #9ba5b6;
}

.portal-password-toggle {
  width: 48px;
  height: 100%;
  border: 0;
  color: #68748a;
  background: transparent;
  cursor: pointer;
}

.portal-login-options {
  display: flex;
  justify-content: flex-end;
  margin: -7px 0 28px;
}

.portal-login-recaptcha {
  margin: 0 0 24px;
}

.portal-login-submit {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 9px;
  background: var(--color-primary);
  color: #fff;
  font: 700 15px var(--font-family);
  cursor: pointer;
  box-shadow: 0 11px 22px rgba(225, 37, 27, .2);
  transition: transform var(--transition-normal), background var(--transition-normal);
}

.portal-login-submit:hover {
  background: var(--color-primary-bold-600);
  transform: translateY(-1px);
}

.portal-login-submit .indicator-label i {
  margin-left: 9px;
}

.portal-login-submit[data-cg-indicator="on"] .indicator-label {
  display: none;
}

.portal-login-submit:not([data-cg-indicator="on"]) .indicator-progress {
  display: none;
}

.portal-login-register {
  margin: 31px 0 24px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.portal-login-register a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}

.portal-login-register a:hover {
  color: var(--color-primary-bold-600);
  text-decoration: underline;
}

.portal-login-security {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #8893a5;
  font-size: 11px;
  text-align: center;
  margin-top: 24px;
}

.portal-login-security i {
  color: var(--color-success);
  font-size: 13px;
}

.portal-login-footer {
  position: absolute;
  bottom: 32px;
  color: #8b95a7;
  font-size: 11px;
  text-align: center;
}

.portal-login-footer span {
  display: inline-block;
  height: 13px;
  width: 1px;
  vertical-align: middle;
  margin: 0 10px;
  background: #d4d9e2;
}

@media (max-width: 900px) {
  .portal-login { grid-template-columns: 1fr; }
  .portal-login-showcase { min-height: 265px; }
  .portal-login-showcase-content { min-height: 265px; padding: 32px 38px; }
  .portal-login-white-logo { width: 118px; }
  .portal-login-copy { margin: auto 0 0; }
  .portal-login-copy h1 { font-size: 28px; }
  .portal-login-copy p,
  .portal-login-highlights { display: none; }
  .ribbon-one { right: 23%; }
  .portal-login-access { min-height: auto; padding: 48px 30px 32px; flex-direction: column; }
  .portal-login-card { width: min(100%, 450px); }
  .portal-login-mobile-logo { display: none; }
  .portal-login-footer { position: static; margin-top: 42px; }
}

@media (max-width: 480px) {
  .portal-login-showcase { min-height: 220px; }
  .portal-login-showcase-content { min-height: 220px; padding: 28px 24px; }
  .portal-login-copy h1 { font-size: 24px; }
  .portal-login-access { padding: 37px 21px 26px; }
  .portal-login-card { padding: 0; }
  .portal-login-heading h2 { font-size: 28px; }
  .portal-field-label { align-items: center; gap: 12px; }
  .portal-field-label a { text-align: right; }
  .portal-login-footer span { display: none; }
  .portal-login-footer strong { display: block; margin-top: 4px; }
}

/* --- Loader de página (mesma linguagem visual já usada no restante do site) ---
   #divLoader é mostrado/ocultado via jQuery em Login.js (removeClass/addClass
   "hidden" durante o ExecuteLogin AJAX) — não é resquício, é usado ativamente.
   A regra .hidden precisa vir DEPOIS de .load-page: como ambos são seletores
   de classe única (mesma especificidade), a ordem de declaração decide o
   empate, e .load-page (display:grid) estava vencendo .hidden (display:none),
   deixando o overlay sempre visível por cima da tela. */
.load-page {
  display: grid;
  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 999999999;
}

.hidden { display: none; }

.load-page-box-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.load-page-loader {
  animation: cg-login-spin 1.5s linear infinite;
}

.load-page-loader-text {
  margin: 10px 0 0 0;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: var(--font-family);
  font-size: 18px;
}

@keyframes cg-login-spin {
  0% { transform: rotate(0deg) scale(.5, .5); }
  50% { transform: rotate(180deg) scale(1, 1); }
  100% { transform: rotate(360deg) scale(.5, .5); }
}