/* Sin fuentes externas, sin CDN, sin dependencias: todo lo que corre acá
   tiene que poder auditarse leyendo estos archivos. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: transparent; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 16px;
}
.card {
  width: 100%; max-width: 360px; background: #1B2028; color: #EAE7DF;
  border: 1px solid #2C333D; border-radius: 16px; padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
h3 { margin: 0 0 4px; font-size: 16px; }
.sub { font-size: 12.5px; color: #8991A0; line-height: 1.5; margin-bottom: 16px; }
.field { margin-bottom: 12px; }
label { display: block; font-size: 11.5px; color: #8991A0; margin-bottom: 4px; }
input[type="password"] {
  width: 100%; background: #232935; border: 1px solid #2C333D; color: #EAE7DF;
  border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit;
}
input[type="password"]:focus { outline: 2px solid #C9A24C; outline-offset: 1px; }
.row { display: flex; gap: 8px; margin-top: 4px; }
button {
  font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 8px;
  padding: 9px 14px; border: none; cursor: pointer;
}
.btn-primary { background: #C9A24C; color: #14171C; flex: 1; }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: transparent; color: #8991A0; border: 1px solid #2C333D; }
.error { color: #FF8A75; font-size: 12.5px; margin-top: 10px; }
.fortaleza { font-size: 11.5px; margin-top: 5px; }
.fortaleza.debil { color: #FF8A75; }
.fortaleza.ok { color: #C9A24C; }
.fortaleza.fuerte { color: #5FA88A; }
.candado { text-align: center; font-size: 24px; margin-bottom: 6px; }
.huella { font-family: ui-monospace, monospace; font-size: 11px; color: #8991A0; word-break: break-all; margin-top: 10px; }