/* index.css — minimal black + subtle animated background compatibility */

/* Variables */
:root{
  --bg-top: #07070a;
  --bg-mid: #0b0c10;
  --accent: #F3F9FF; /* PLATINUM (Branco Suave) - Aceno Principal */
  --muted: rgba(255,255,255,0.64);
  --muted-2: rgba(255,255,255,0.20);
  --line: rgba(255,255,255,0.10);

  --card-radius: 14px;
  --glass: 6px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --highlight: #2196F3; /* Azul Policial (para o efeito de focus) */
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font);
  color:var(--accent);
  /* Cor de fundo primária escura */
  background: var(--bg-mid); 
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}

/* ---------------------- NOVO: FUNDO RESPONSIVO (IMG) ---------------------- */

#bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra a tela mantendo a proporção */
    z-index: -3; /* Coloca bem atrás de tudo */
    opacity: 0.8; /* Mantém um pouco de cor, mas o overlay escurece o restante */
}

/* Overlay Escuro: Este é o segredo para escurecer AINDA MAIS a imagem e garantir a legibilidade */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cor preta com alta opacidade (muito escuro) */
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: -2;
}

/* Remove a sobreposição de 'subtle film grain' se houver, para simplificar o fundo */
body::before {
    content: none !important; 
}

/* ---------------------- FIM FUNDO ---------------------- */

/* Canvas sits below everything */
#bg-canvas{ position:fixed; inset:0; z-index:0; width:100vw; height:100vh; pointer-events:none; }

/* Center */
.center-wrap{ position:relative; z-index:3; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px; }

/* Card */
.login-card{
  width: min(460px, 94%);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-radius: var(--card-radius);
  padding: 34px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(var(--glass));
  display:flex; flex-direction:column; 
  gap:10px; 
}

/* --- ESTILO PC: LOGO E TÍTULO --- */

.logo-container {
    text-align: center; 
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.pc-logo {
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)); 
}

/* Título Impactante */
.login-title{
  margin:0 0 6px; 
  font-weight: 700; 
  letter-spacing: 3px; 
  font-size: 1.6rem; 
  color: var(--accent); 
  text-align: center;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

/* --- FIM ESTILO PC --- */


/* flashes */
.flashes{ list-style:none; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:8px; z-index:6; }
.flashes li{ padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.02); color:var(--muted); font-size:0.95rem; }

/* Form */
.login-form{ display:flex; flex-direction:column; gap:10px; }

/* Field */
.field{ position:relative; margin:6px 0; }
.field-inner{ display:flex; align-items:center; gap:12px; }
.icon{ width:26px; text-align:center; color:var(--muted); font-size:14px; opacity: 0.38; }

/* input */
.field input{
  width:100%; border:none; outline:none; background:transparent;
  color:var(--accent); 
  font-size:1rem; padding:10px 6px;
}
.field input::placeholder{ color: var(--muted-2); }

/* underline */
.underline{ display:block; height:1px; width:100%; background:transparent; border-bottom:1px solid var(--line); position:absolute; left:0; bottom:-4px; transition: border-color .16s ease, transform .16s ease; }
.field-inner:focus-within + .underline,
.field-inner:focus-within ~ .underline { border-bottom-color: var(--accent); }

/* row: checkbox + forgot */
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; margin-bottom:2px; }
.checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:0.95rem; }
.checkbox input{ width:11px; height:11px; accent-color: var(--accent); } 
.forgot{ color:var(--muted); text-decoration:none; font-size:0.92rem; }
.forgot:hover{ color:var(--accent); text-decoration:underline; }

/* outlined button (subtle, smaller) */
.btn-outline{
  margin-top:8px; height:44px; border-radius:8px;
  background:transparent; border:1px solid rgba(255,255,255,0.06);
  color:var(--accent); font-weight:700; letter-spacing:1.6px; font-size:0.95rem;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition: background-color .16s ease, color .16s ease, transform .12s;
  overflow:hidden; z-index:6;
}
.btn-outline:hover{ 
  background: rgba(255, 255, 255, 0.08); 
  color: #fff; 
  transform: translateY(-3px); 
  box-shadow: 0 10px 28px rgba(0,0,0,0.45); 
}

/* ripple helper */
.ripple{ position:absolute; border-radius:50%; transform:scale(0); background: rgba(255,255,255,0.06); pointer-events:none; }

/* small screens */
@media (max-width:420px){
  .login-card{ padding:20px; }
  .login-title{ font-size:1.3rem; letter-spacing:2px; }
  .btn-outline{ height:46px; }
  .pc-logo{ max-width: 90px; } 
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* visually-hidden */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

.checkbox span {
    font-size: 0.8rem;
    opacity: 0.75;
}