/* =====================================================================
   Tela de login — Painel OCI JUCEPA
   ===================================================================== */
:root{
  --marinho:#14395e;
  --marinho-esc:#0d2946;
  --azul:#1f5f9e;
  --ciano:#25a5b8;
  --texto:#12263f;
  --cinza:#6b7c93;
  --borda:#dfe6ee;
  --erro:#c0392b;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--texto);
  background:
    radial-gradient(1200px 600px at 15% -10%, #1d4d7d 0%, transparent 60%),
    linear-gradient(140deg, var(--marinho) 0%, var(--marinho-esc) 55%, #08192b 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

.caixa{
  width:100%; max-width:420px;
  background:#fff;
  border-radius:16px;
  padding:34px 34px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}

/* Marca da JUCEPA centralizada, sem texto ao lado */
.marca{display:flex; justify-content:center; margin:4px 0 26px}
.marca img{
  width:210px; max-width:100%; height:auto; display:block;
}

h1{font-size:21px; margin:0 0 22px; text-align:center}

label{display:block; font-size:12.5px; font-weight:600; margin:0 0 6px}
input[type=text],input[type=password]{
  width:100%; padding:11px 13px; margin-bottom:16px;
  border:1.5px solid var(--borda); border-radius:9px;
  font-size:14.5px; font-family:inherit; color:var(--texto);
  background:#fbfcfe; transition:border-color .15s, box-shadow .15s;
}
input[type=text]:focus,input[type=password]:focus{
  outline:none; border-color:var(--ciano);
  box-shadow:0 0 0 3px rgba(37,165,184,.18);
}

.check{display:flex; align-items:center; gap:8px; font-weight:500; margin:2px 0 20px}
.check input{width:16px; height:16px; accent-color:var(--azul); margin:0}
.check span{font-size:12.5px; color:var(--cinza)}

button{
  width:100%; padding:12px; border:0; border-radius:9px;
  background:var(--marinho); color:#fff;
  font-size:15px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .15s, transform .05s;
}
button:hover{background:var(--azul)}
button:active{transform:translateY(1px)}
button[disabled]{background:var(--cinza); cursor:progress}

.erro{
  background:#fdecea; color:var(--erro);
  border:1px solid #f5c6c2; border-radius:8px;
  padding:10px 12px; font-size:12.5px; margin-bottom:16px; line-height:1.45;
}

footer{margin-top:22px; text-align:center}
footer span{font-size:11px; color:#9aa8b8}

@media (max-width:480px){ .caixa{padding:26px 22px 18px} }