/* acceso.css — White UI limpio */

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --line2:#eef2f7;
  --shadow: 0 20px 50px rgba(2, 8, 23, 0.10);
  --radius: 18px;

  --btn:#0f172a;
  --btn-ink:#ffffff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; background:var(--bg); color:var(--ink); }
body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; }

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:18px;
}

.card{
  width:min(680px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.head{
  padding:16px 16px 14px;
  border-bottom:1px solid var(--line2);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:64px;
  height:64px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.titles .t1{ font-weight:900; font-size:16px; }
.titles .t2{
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 18px rgba(2,8,23,.03);
  font-weight:800;
  font-size:13px;
  color:var(--ink);
}
.pill .dot{
  width:10px;height:10px;border-radius:999px;
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}
.pill.online .dot{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.body{ padding:18px 16px 16px; }
h1{ margin:0; font-size:20px; font-weight:950; }
.muted{ color:var(--muted); }
.body p{ margin:8px 0 0; }

.form{ margin-top:14px; display:grid; gap:12px; }

.field{ display:flex; flex-direction:column; gap:7px; }
.label{
  font-size:12px;
  font-weight:900;
  color:#334155;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pass{
  display:flex;
  gap:10px;
  align-items:center;
}
.pass input{
  flex:1;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 14px;
  font-size:14px;
  outline:none;
  background:#fff;
  color:var(--ink);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.pass input:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 5px rgba(148,163,184,.18);
  transform:translateY(-1px);
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:12px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:850;
  font-size:14px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  user-select:none;
}
.btn:hover{
  background:#f8fafc;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(2,8,23,.06);
}
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary{
  background:var(--btn);
  border-color:var(--btn);
  color:var(--btn-ink);
}
.btn-primary:hover{ background:#0b1220; border-color:#0b1220; }
.btn-ghost{ background:#fff; }
.btn-sm{ padding:10px 12px; font-size:13px; }

.msg{
  min-height:22px;
  font-size:13px;
  font-weight:800;
  color:#0f172a;
}
.msg.ok{ color:#16a34a; }
.msg.err{ color:#ef4444; }

.note{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.note-title{ font-weight:950; }

.foot{
  padding:14px 16px;
  border-top:1px solid var(--line2);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width:520px){
  .logo{ width:56px; height:56px; }
  .pass{ flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }
}