/* ============================================================================
   TELA DE LOGIN — identidade Sperandio Agro Inversiones
   Coluna esquerda: formulário (sempre claro). Coluna direita: painel da marca
   (sempre escuro, só a partir de lg).
   ============================================================================ */
:root {
  --login-verde: #2f7d1f;
  --login-verde-escuro: #1d5313;
  --login-verde-claro: #8cc63f;
  --login-tinta: #0f2a0b;
}

/* ── Coluna do formulário ── */
.login-form-col {
  border-top: 4px solid var(--login-verde);
}
/* Logomarca (Variáveis de Sistema): grande, sem distorcer */
.login-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 420px);
  max-height: 210px;
  margin: 0 auto;
}

.login-form-col .form-label {
  color: #334155 !important;
}

/* Inputs claros mesmo com o sistema no tema escuro */
.login-form-col .form-control,
.login-form-col .form-select,
.login-form-col .input-group-text {
  background-color: #ffffff !important;
  color: #1e293b !important;
  border-color: #dbe0e5 !important;
}
.login-form-col .form-control:focus,
.login-form-col .form-select:focus {
  border-color: var(--login-verde) !important;
  box-shadow: 0 0 0 .2rem rgba(47, 125, 31, .15) !important;
}
.login-form-col .form-control::placeholder {
  color: #9aa4b2 !important;
  opacity: 1;
}
.login-form-col .input-group-text .link-secondary {
  color: #64748b !important;
}

/* Seletor de país (DDI) claro mesmo com o sistema no tema escuro:
   - color-scheme: o menu nativo do <select> segue o esquema de cores do
     elemento; sem isso ele abre escuro (a página inteira está em "dark").
   - Seta: o Tabler pinta a seta de branco em área clara dentro do tema escuro
     (body[data-bs-theme=dark] [data-bs-theme=light] .form-select) — some no
     campo branco. Aqui ela é desenhada em cinza.
   - Opções: vencem a regra global de opções escuras (classes-proprias.css). */
.login-form-col {
  color-scheme: light;
}
.login-form-col .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
}
.login-form-col[data-bs-theme=light] select option,
.login-form-col[data-bs-theme=light] .form-select option {
  background-color: #ffffff !important;
  color: #1e293b !important;
}
.login-form-col[data-bs-theme=light] select option:checked {
  background-color: #e8f3dd !important;
  color: #1d5313 !important;
}

.btn-login {
  background: linear-gradient(135deg, var(--login-verde) 0%, var(--login-verde-escuro) 100%);
  border: 0;
  color: #fff;
  font-weight: 600;
  padding-top: .65rem;
  padding-bottom: .65rem;
  box-shadow: 0 6px 16px rgba(29, 83, 19, .25);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-login:hover,
.btn-login:focus {
  color: #fff;
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(29, 83, 19, .32);
}
.btn-login:active { transform: translateY(1px); }

.login-lema {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #94a3b8;
}
.login-lema span { color: var(--login-verde-claro); margin: 0 .35rem; }

/* ── Painel da marca (coluna direita): fundo verde-escuro com luzes, grade e
   ruído (sempre escuro, independe do tema) ── */
.login-aside {
  position: relative;
  overflow: hidden;
  background-color: #06140a;
}
/* Textura de ruído para acabamento fosco */
.login-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: .05;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* Grade sutil, lembrando as linhas de plantio */
.login-aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 1;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}
/* Luzes verdes da marca, flutuando devagar */
.login-luz-1,
.login-luz-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  animation: login-flutuar 12s ease-in-out infinite alternate;
}
.login-luz-1 {
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(140, 198, 63, .18) 0%, transparent 70%);
  top: -15%;
  right: -10%;
}
.login-luz-2 {
  width: 35vw;
  height: 35vw;
  background: radial-gradient(circle, rgba(47, 125, 31, .22) 0%, transparent 70%);
  bottom: -15%;
  left: -10%;
  animation-delay: -6s;
}
@keyframes login-flutuar {
  0%   { transform: translate(0, 0) scale(1); opacity: .5; }
  100% { transform: translate(-3%, 3%) scale(1.1); opacity: 1; }
}
.aside-content {
  position: relative;
  z-index: 4; /* acima do ruído, luzes e grade */
}
.login-aside-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--login-verde-claro);
}
.login-aside-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--login-verde-claro);
}

/* Efeito de digitação */
.typed-text-wrapper {
  color: var(--login-verde-claro);
  text-shadow: 0 0 20px rgba(140, 198, 63, .3);
}
.typing-cursor {
  display: inline-block;
  width: 4px;
  height: 1em;
  margin-left: 5px;
  vertical-align: middle;
  background-color: var(--login-verde-claro);
  animation: login-piscar 1s step-end infinite;
}
@keyframes login-piscar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-cursor,
  .login-luz-1,
  .login-luz-2 { animation: none; }
}