:host {
  /* Paleta de Cores LineGestão */
  --brand-blue: #030FAA;       /* Azul Principal */
  --brand-blue-dark: #020865;  /* Azul Profundo (Gradiente) */
  --brand-pink: #E33DCF;       /* Rosa (Detalhes/Acentos) */
  --text-main: #1e293b;        /* Cinza Escuro (Texto) */
  --text-muted: #64748b;       /* Cinza Médio (Legendas) */
  --bg-input: #f8fafc;         /* Fundo dos inputs */
  --border-input: #e2e8f0;     /* Borda dos inputs */
}

/* ================================================= */
/* CONTAINER GLOBAL (TELA DIVIDIDA)                  */
/* ================================================= */
.login-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;           /* Ocupa 100% da altura da viewport */
  min-height: 600px;       /* Evita esmagamento em telas muito baixas */
  background: #fff;
  font-family: 'Inter', sans-serif;
  overflow: hidden;        /* Garante que nada gere scroll indesejado na tela principal */

  /* Responsivo: Vira coluna no mobile/tablet vertical */
  @media (max-width: 992px) {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;      /* Permite scroll no mobile */
  }
}

/* ================================================= */
/* LADO ESQUERDO (FORMULÁRIO)                        */
/* ================================================= */
.login-left {
  flex: 1;                 /* Ocupa o espaço necessário */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centraliza verticalmente */
  padding: 0 60px;
  background: white;
  position: relative;
  z-index: 5;

  /* Ajuste Notebook: Menos padding lateral */
  @media (max-width: 1366px) { padding: 0 40px; }
  
  /* Ajuste Mobile */
  @media (max-width: 576px) { padding: 32px 24px; }
}

/* Conteúdo Centralizado (Logo + Form) */
.left-content {
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}

/* Logo no topo do form */
.brand-header {
  margin-bottom: 32px;
  
  .brand-logo {
    display: flex; 
    align-items: center; 
    gap: 10px;
    font-size: 20px; 
    font-weight: 700; 
    color: var(--text-main);
    
    i { color: var(--brand-blue); font-size: 24px; }
  }
}

/* Títulos */
.welcome-title {
  font-size: 32px; 
  font-weight: 700; 
  color: var(--text-main); 
  margin-bottom: 8px; 
  letter-spacing: -0.5px;
  line-height: 1.2;

  @media (max-width: 1366px) { font-size: 28px; }
}

.welcome-subtitle {
  color: var(--text-muted); 
  margin-bottom: 32px; 
  font-size: 15px;
}

/* INPUTS E LABELS */
.form-group {
  margin-bottom: 18px;
  
  label { 
    display: block;
    font-size: 13px; 
    font-weight: 600; 
    color: var(--text-main); 
    margin-bottom: 6px; 
  }

  input {
    width: 100%; 
    height: 48px; /* Altura confortável */
    padding: 0 16px; 
    border-radius: 10px;
    border: 1px solid var(--border-input); 
    background: var(--bg-input);
    color: var(--text-main); 
    font-size: 14px; 
    outline: none; 
    transition: all 0.2s;

    /* Ajuste Notebook: levemente menor */
    @media (max-width: 1366px) { height: 44px; }

    &::placeholder { color: #cbd5e1; }

    &:focus { 
      background: #fff; 
      border-color: var(--brand-blue); 
      box-shadow: 0 0 0 3px rgba(3, 15, 170, 0.1); 
    }
    
    &.error { 
      border-color: #ef4444; 
      background: #fef2f2; 
    }
  }
}

/* Wrapper para input de senha com ícone */
.input-wrapper {
  position: relative;
  
  input { padding-right: 40px; }
  
  .toggle-pass {
    position: absolute; 
    right: 12px; 
    top: 50%; 
    transform: translateY(-50%);
    background: none; 
    border: none; 
    color: #94a3b8; 
    cursor: pointer;
    font-size: 16px;
    
    &:hover { color: var(--text-main); }
  }
}

.error-msg { 
  color: #ef4444; 
  font-size: 11px; 
  margin-top: 4px; 
  font-weight: 500;
}

/* AÇÕES (Checkbox + Esqueci Senha) */
.form-actions {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 24px; 
  font-size: 13px;
}

.custom-checkbox {
  display: flex; 
  align-items: center; 
  gap: 8px; 
  cursor: pointer; 
  color: var(--text-muted); 
  user-select: none;

  input { display: none; }
  
  .checkmark {
    width: 16px; 
    height: 16px; 
    border: 1px solid var(--border-input); 
    border-radius: 4px; 
    position: relative;
    transition: all 0.2s;
  }
  
  input:checked ~ .checkmark {
    background: var(--brand-blue); 
    border-color: var(--brand-blue);
    
    &::after {
      content: ''; 
      position: absolute; 
      left: 4px; top: 1px; 
      width: 5px; height: 9px;
      border: solid white; 
      border-width: 0 2px 2px 0; 
      transform: rotate(45deg);
    }
  }
}

.forgot-link { 
  color: var(--brand-blue); 
  text-decoration: none; 
  font-weight: 600; 
  font-size: 13px;
  
  &:hover { text-decoration: underline; }
}

/* BOTÃO PRINCIPAL */
.btn-primary-login {
  width: 100%; 
  height: 48px;
  background: var(--brand-blue); 
  color: white; 
  border: none; 
  border-radius: 10px;
  font-size: 15px; 
  font-weight: 600; 
  cursor: pointer; 
  transition: all 0.2s;
  
  &:hover:not(:disabled) { 
    background: var(--brand-blue-dark); 
    transform: translateY(-1px); 
    box-shadow: 0 4px 12px rgba(3, 15, 170, 0.25);
  }
  
  &:disabled { 
    background: #94a3b8; 
    cursor: not-allowed; 
  }
}

/* FOOTER INTERNO */
.left-footer {
  margin-top: 40px;
  font-size: 11px; 
  color: var(--text-muted); 
  display: flex; 
  justify-content: space-between;
  
  a { 
    color: var(--text-main); 
    text-decoration: none; 
    &:hover { text-decoration: underline; }
  }
}

/* Alerta de erro da API */
.api-alert {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fef2f2;
  color: #ef4444;
  font-size: 12px;
  display: flex; 
  align-items: center; 
  gap: 8px;
  border: 1px solid #fecaca;
}

/* ================================================= */
/* LADO DIREITO (VISUAL / MOCKUP)                    */
/* ================================================= */
.login-right {
  flex: 1.3;       /* Ligeiramente maior que o form */
  padding: 16px;   /* Borda branca ao redor do bloco azul */
  background: #fff;
  display: flex;
  overflow: hidden;

  /* Some no tablet/mobile */
  @media (max-width: 992px) { display: none; }
}

.right-content {
  width: 100%; 
  height: 100%;
  border-radius: 24px;
  position: relative;
  overflow: hidden; /* Corta o mockup que sair da área */
  
  /* Gradiente Azul LineGestão */
  background: radial-gradient(circle at 20% 20%, #2a39ff 0%, var(--brand-blue) 60%, var(--brand-blue-dark) 100%);
  
  display: flex; 
  flex-direction: column; 
  padding: 56px; 
  color: white;

  /* Ajuste Notebook: Menos padding */
  @media (max-width: 1366px) { padding: 40px; }
}

.text-area {
  position: relative; 
  z-index: 2; 
  margin-bottom: 20px;
}

.hero-title {
  font-size: 36px; 
  font-weight: 700; 
  line-height: 1.2; 
  margin-bottom: 16px;
  
  @media (max-width: 1366px) { font-size: 28px; }
}

.hero-desc {
  font-size: 16px; 
  opacity: 0.85; 
  max-width: 450px; 
  line-height: 1.5;
  
  @media (max-width: 1366px) { font-size: 14px; }
}

/* ================================================= */
/* MOCKUP SISTEMA (CSS PURO)                         */
/* ================================================= */
.dashboard-mockup {
  position: absolute;
  /* Posicionamento estratégico para não cortar feio */
  bottom: -30px; 
  right: -30px;
  
  width: 85%;         /* Largura relativa */
  max-width: 700px;   /* Trava máxima */
  aspect-ratio: 16/10; /* Mantém proporção de tela wide */
  
  background: #F1F5F9; /* Cinza claro (fundo do sistema) */
  border-top-left-radius: 24px;
  box-shadow: -20px -20px 60px rgba(0,0,0,0.35); /* Sombra forte para dar profundidade */
  
  display: flex; 
  flex-direction: column; 
  padding: 24px; 
  z-index: 1;

  /* 🔥 CORREÇÃO CRÍTICA PARA NOTEBOOKS 🔥 */
  /* Se a tela for baixa ou estreita, diminui o mockup automaticamente */
  @media (max-height: 800px), (max-width: 1366px) {
    width: 80%;
    right: -20px;
    bottom: -20px;
    padding: 16px;
  }
}

/* Barra do Topo (Mock) */
.mock-top-bar {
  display: flex; 
  align-items: center; 
  gap: 12px; 
  margin-bottom: 20px;
  
  .dots span { 
    display: inline-block; 
    width: 8px; height: 8px; 
    border-radius: 50%; 
    background: #cbd5e1; 
    margin-right: 6px; 
  }
  .mock-search { 
    flex: 1; height: 32px; 
    background: white; 
    border-radius: 8px; 
    border: 1px solid #e2e8f0; 
  }
  .mock-profile { 
    width: 32px; height: 32px; 
    background: #cbd5e1; 
    border-radius: 50%; 
  }
}

/* Grid Interno (Mock) */
.mock-grid {
  display: grid; 
  grid-template-columns: 1.2fr 1fr; /* Coluna esquerda levemente maior */
  grid-template-rows: auto 1fr; 
  gap: 16px; 
  height: 100%;
}

/* Cards Genéricos (Mock) */
.mock-card {
  background: white; 
  border-radius: 16px; 
  padding: 16px; 
  display: flex; 
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);

  /* Card Destaque (Azul) */
  &.highlight {
    background: var(--brand-blue); 
    color: white;
    
    span { font-size: 11px; opacity: 0.8; margin-bottom: 4px; display: block; }
    h3 { font-size: 24px; margin: 0 0 8px 0; font-weight: 700; }
    .badge-mock { 
      font-size: 10px; 
      background: rgba(255,255,255,0.2); 
      padding: 4px 10px; 
      border-radius: 20px; 
      width: fit-content; 
      display: flex; align-items: center; gap: 4px;
    }
  }

  /* Card Gráfico */
  &.chart-card {
    grid-row: span 2; /* Ocupa altura toda */
    
    span { font-size: 12px; font-weight: 600; color: #1e293b; margin-bottom: 16px; display: block;}
    
    .fake-bars {
      display: flex; 
      align-items: flex-end; 
      justify-content: space-between; 
      height: 70%;
      padding: 0 8px;
      
      .bar { 
        width: 12px; 
        background: #e2e8f0; 
        border-radius: 10px; 
        
        /* A barra rosa ativa */
        &.active { 
          background: var(--brand-pink); 
          box-shadow: 0 4px 10px rgba(227, 61, 207, 0.3);
        } 
      }
    }
  }

  /* Card Tabela */
  &.table-card {
    gap: 10px; 
    padding-top: 12px;
    
    .table-row {
      display: flex; align-items: center; gap: 10px; height: 28px;
      
      &.head { background: #f1f5f9; border-radius: 6px; height: 24px; width: 100%; margin-bottom: 4px; }
      
      .avatar { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; }
      .line { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; }
      .status { width: 8px; height: 8px; border-radius: 50%; }
      .status.ok { background: #10b981; } 
      .status.warn { background: #f59e0b; }
    }
  }
}

/* Card Flutuante (Badges) */
.float-card {
  position: absolute; 
  top: 35%; 
  left: -40px;
  
  background: white; 
  padding: 12px 20px; 
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12); /* Sombra suave */
  
  display: flex; 
  align-items: center; 
  gap: 12px; 
  z-index: 10;
  animation: float 5s ease-in-out infinite;

  /* Ajuste no notebook */
  @media (max-width: 1366px) { left: -24px; padding: 10px 16px; }

  .icon-circle {
    width: 40px; height: 40px; 
    background: rgba(227, 61, 207, 0.1); /* Rosa suave */
    color: var(--brand-pink); 
    border-radius: 10px; 
    display: grid; place-items: center; 
    font-size: 18px;
    
    @media (max-width: 1366px) { width: 36px; height: 36px; font-size: 16px; }
  }
  
  strong { display: block; font-size: 14px; color: #1e293b; font-weight: 700; }
  small { font-size: 11px; color: #64748b; }
}

/* Animações Utilitárias */
@keyframes float { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-10px); } 
}

@keyframes spin { 
  to { transform: rotate(360deg); } 
}

@keyframes fadeInUp { 
  to { opacity: 1; transform: translateY(0); } 
}

.spinner { 
  width: 20px; height: 20px; 
  border: 2px solid rgba(255,255,255,0.3); 
  border-top-color: white; 
  border-radius: 50%; 
  animation: spin 0.8s linear infinite; 
  margin: 0 auto; 
}

.fade-in-up { 
  animation: fadeInUp 0.6s ease-out forwards; 
  opacity: 0; 
  transform: translateY(20px); 
}