:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --ink:#0e1726;
  --muted:#64748b;
  --brand:#00303d; /* verde oscuro corporativo */
  --accent:#d1fc00; /* lima corporativa */
  --ring: rgba(0, 141, 169, .25);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --card:#0f172a;
    --ink:#e2e8f0;
    --muted:#94a3b8;
    --ring: rgba(209, 252, 0, .25);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #e6f7ff 0%, transparent 40%),
              radial-gradient(900px 500px at 110% 10%, #f0ffe0 0%, transparent 35%),
              var(--bg);
  color:var(--ink);
}

.page{min-height:100%; display:flex; flex-direction:column; align-items:center; gap:24px; padding:24px}
.brand{margin-top:8px}
.brand__logo{height:44px}

.card{
  width:100%; max-width: 640px; background:var(--card);
  border-radius:24px; padding:32px 28px;
  box-shadow: 0 20px 40px rgba(2, 8, 23, .06), 0 2px 8px rgba(2, 8, 23, .05);
}

.title{margin:0 0 6px; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem); color:var(--brand); letter-spacing:-.02em}
.subtitle{margin:0 0 18px; color:var(--muted)}

.alert{background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; padding:10px 12px; border-radius:12px; margin-bottom:12px}

.form{display:flex; flex-direction:column; gap:18px}
.grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:8px}
.field.full{grid-column:1 / -1}
.label{font-weight:600; font-size:.92rem; color:var(--ink)}

.input{
  appearance:none; width:100%;
  border:1px solid #e5e7eb; background:#fff; color:var(--ink);
  border-radius:14px; padding:12px 14px; font-size:1rem; line-height:1.2;
  transition: border-color .2s, box-shadow .2s, transform .02s;
}
.input::placeholder{color:#9aa4b2}
.input:focus{outline:none; border-color:#7dd3fc; box-shadow: 0 0 0 6px var(--ring)}
.input:active{transform: translateY(0.5px)}

.btn{
  --padY: 12px; --padX: 18px; --radius:14px; --shadow: 0 10px 20px rgba(2,8,23,.08);
  appearance:none; border:0; border-radius: var(--radius); padding: var(--padY) var(--padX);
  font-weight:700; cursor:pointer; box-shadow: var(--shadow);
}
.btn--primary{
  background: linear-gradient(180deg, var(--accent), #bce800);
  color:#0a0a0a;
}
.btn--primary:hover{filter: brightness(0.97)}
.btn--primary:active{transform: translateY(1px)}

.admin-link{display:inline-block; margin-top:6px; color:var(--brand); text-decoration:none; font-weight:600}
.admin-link:hover{text-decoration:underline}

.footer{opacity:.7; font-size:.85rem; margin-top:auto}

/* Responsive */
@media (max-width: 720px){
  .card{padding:24px 18px; border-radius:20px}
  .grid{grid-template-columns:1fr}
}