.auth-container {
  min-height: 100vh;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 28rem;
}

.auth-header {
  margin-bottom: 2rem;
  text-align: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: 1rem;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: #000000;
}

.auth-subtitle {
  color: #666666;
  margin-top: 0.5rem;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-footer {
  margin-top: 1.5rem;
  text-align: center;
}

.auth-footer p {
  font-size: 0.875rem;
  color: #666666;
}

.demo-info {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}

.demo-title {
  font-size: 0.75rem;
  color: #666666;
  margin-bottom: 0.5rem;
}

.demo-text {
  font-size: 0.75rem;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.demo-text:last-child {
  margin-bottom: 0;
}

.loading {
  opacity: 0.7;
  pointer-events: none;
}

.success-container {
  text-align: center;
}

.success-icon {
  width: 4rem;
  height: 4rem;
  background-color: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: #16a34a;
}

.success-icon svg {
  width: 2rem;
  height: 2rem;
}

.success-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #000000;
}

.success-description {
  color: #666666;
  margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
  .auth-container {
    padding: 0.5rem;
  }

  .form-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

.label{display:block;margin-bottom:6px;font-size:.875rem;font-weight:500;color:#374151}


.form .form-group{ margin-bottom:14px; }

.auth-card .input,
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"]{
  width:100%;
  height:44px;                 
  padding:10px 14px;
  font-size:14px;
  line-height:1.4;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.auth-card .input:focus{
  border-color:#000;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

.input-group{
  position:relative;
  width:100%;
}

.input-group .input{
  padding-right:44px;       
  height:44px;                
}

.input-button {
  position: absolute;
  inset-inline-end: .5rem;     
  inset-block-start: 50%;      
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #000;               
  transition: color 0.2s ease;
}
.input-button:hover {
  color: #333;              
}

.input-button .icon {
  width: 24px !important;
  height: 24px !important;
  stroke: #000 !important;
  stroke-width: 2.5 !important;
  opacity: 1 !important;
}


/* Evita “estouro” visual com autofill do Chrome */
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  -webkit-text-fill-color:#0f172a;
  transition: background-color 5000s ease-in-out 0s;
}

/* Força o ícone a ficar visível dentro do botão */
.input-button {
  color: #000 !important;                /* currentColor = preto */
}

.input-button .icon {
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
  stroke: #000 !important;               /* ignora heranças fracas */
  stroke-width: 2.25 !important;         /* mais grosso */
  fill: none !important;
  vector-effect: non-scaling-stroke;     /* stroke nítido */
}

/* Se algum framework estiver colorindo os paths, força herdar o stroke acima */
.input-button .icon path,
.input-button .icon circle,
.input-button .icon line,
.input-button .icon polyline {
  stroke: inherit !important;
  fill: none !important;
  opacity: 1 !important;
}

/* === Fix definitivo do olho (login) === */

/* Garante espaço suficiente no input para o botão maior */
.input-group .input {
  padding-right: 56px !important; /* antes 44px; evita sobreposição */
}

/* Botão do olho: remove padding herdado e aumenta hit-area */
.input-button {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;               /* sobrescreve o padding do global.css */
  color: #0f172a !important;           /* cor do traço do ícone via currentColor */
}

/* Tamanho real do ícone (SVG) — GRANDE e nítido */
#eyeIcon,
.input-button .icon {
  width: 14px !important;              /* ajuste fino: 26px (pode ir a 28/30 se quiser maior) */
  height: 14px !important;
  display: block !important;
}

/* Traço forte e visível, sem fill */
#eyeIcon path,
#eyeIcon circle,
.input-button .icon path,
.input-button .icon circle {
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
  opacity: 1 !important;
}