/* EZZA · Estilo de cuentas (paleta Manga: negro y blanco, rojo solo en detalles) */
:root {
  --ink: #0a0a0a; --ink-2: #151515; --field: #101010; --line: #2e2e2e;
  --paper: #ffffff; --muted: #9a9a9a; --red: #ff2b2b; --good: #5ad08f;
  --logo: "Negrita Pro", "Archivo Black", "Arial Black", Impact, sans-serif;
  --display: "DM Serif Display", Georgia, serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--ink); color: var(--paper); font: 16px/1.6 var(--body); display: flex; flex-direction: column; }
a { color: var(--paper); }
.top { padding: 18px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.brand { font-family: var(--logo); font-size: 1.6rem; text-decoration: none; letter-spacing: .02em; }
main { flex: 1; display: grid; place-items: center; padding: 48px 16px; }
.card { width: min(420px, 100%); background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 10px; padding: 28px 26px; display: grid; gap: 18px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tabs button { border: 0; border-radius: 999px; padding: 9px; background: transparent; color: var(--muted); font: 600 .95rem var(--body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); }
h1 { font: 400 2rem/1.1 var(--display); margin: 0; }
.lead { margin: 0; color: var(--muted); font-size: .95rem; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"] { width: 100%; background: var(--field); color: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px; font: 500 1rem var(--body); }
input:focus { outline: none; border-color: var(--paper); }
input[aria-invalid="true"] { border-color: var(--red); }
.pass { position: relative; }
.pass button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--muted); font: 600 .8rem var(--body); cursor: pointer; padding: 6px; }
.hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.check input { accent-color: var(--red); width: 16px; height: 16px; }
.legal-check { align-items: flex-start; font-size: .9rem; line-height: 1.45; color: #cfcfcf; }
.legal-check input { flex: none; margin-top: 3px; }
.legal-check a { color: #fff; text-decoration: underline; }
.btn { border: 0; border-radius: 999px; padding: 13px 22px; background: var(--paper); color: var(--ink); font: 700 1rem var(--body); cursor: pointer; }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.ghost { background: transparent; color: var(--paper); border: 1.5px solid var(--line); }
.msg { padding: 11px 14px; border-radius: 8px; font-size: .9rem; border: 1px solid var(--line); }
.msg[data-k="err"] { border-color: var(--red); color: #ffb3b3; }
.msg[data-k="ok"] { border-color: var(--good); color: #c6f3da; }
.switch { text-align: center; color: var(--muted); font-size: .9rem; margin: 0; }
.switch button { background: none; border: 0; color: var(--paper); font: 700 .9rem var(--body); text-decoration: underline; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Perfil */
.profile { width: min(560px, 100%); }
.profile dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.profile dt { color: var(--muted); font-size: .85rem; }
.profile dd { margin: 0; font-weight: 600; word-break: break-word; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
[hidden] { display: none !important; }