/* =========================================================================
   Mi cuenta (account.js) — cyberpunk forge panels, see careers.css.
   ========================================================================= */
.account-wrap { max-width: 760px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.acc-loading { color: var(--text-mute); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* <header> carries the site header style in styles.css; undo it here. */
.acc-head { display: block; margin: 0 0 1.25rem; padding: 0; background: none; border: 0; box-shadow: none; }
.acc-head::after, .acc-head::before { display: none; }
.acc-kicker {
    margin: 0;
    color: var(--accent-2);
    font: .75rem ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.acc-kicker::before { content: "> "; color: var(--accent); }
.acc-head h1 { margin: .2rem 0 .3rem; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.acc-sub { margin: 0; color: var(--text-dim); font-size: .9rem; }

.acc-card {
    margin: 0 0 1rem;
    padding: 1.1rem 1.25rem 1.2rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.acc-card h2 {
    margin: 0 0 .8rem;
    font-size: .95rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}
.acc-card h2::before { content: "// "; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-mute); }
.acc-card p { color: var(--text-dim); line-height: 1.5; }

.acc-form { display: grid; gap: .35rem; }
.acc-form label:not(.cb-opt) {
    margin-top: .4rem;
    font: .72rem ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-mute);
}
.acc-form input[type=email], .acc-form input[type=password], .acc-form input[type=text] {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.acc-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow); }
.acc-row { display: flex; gap: .5rem; align-items: center; }
.acc-row input { flex: 1; min-width: 0; }
.acc-row .btn-3d { flex: none; }
.acc-opt { text-transform: none; letter-spacing: 0; }
.acc-hint { margin: .2rem 0 0; font-size: .82rem; color: var(--text-mute) !important; }
.acc-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.acc-actions a.btn-3d { text-decoration: none; display: inline-block; }
.acc-link { color: var(--accent); font-size: .85rem; }

.acc-msg { margin: .5rem 0 0; font-size: .88rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.acc-msg.ok { color: var(--v-pass) !important; }
.acc-msg.ok::before { content: "✓ "; }
.acc-msg.err { color: var(--v-fail) !important; }
.acc-msg.err::before { content: "✗ "; }

.acc-split {
    display: flex; flex-wrap: wrap; gap: .6rem 1rem;
    align-items: center; justify-content: space-between;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.acc-split p { margin: 0; }

.acc-facts { margin: 0; display: grid; gap: .4rem; }
.acc-facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--border); }
.acc-facts dt { font: .75rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.acc-facts dd { margin: 0; color: var(--text); }
.acc-on, .acc-off {
    display: inline-block;
    padding: .05rem .4rem;
    border: 1px solid currentColor;
    border-radius: var(--r-sm);
    font: .72rem ui-monospace, Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.acc-on { color: var(--v-pass); }
.acc-off { color: var(--text-mute); }

.acc-log { margin-top: 1rem; }
.acc-log summary, #acc-del summary {
    cursor: pointer;
    font: .78rem ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.acc-log summary:hover, #acc-del summary:hover { color: var(--accent); }
.acc-log table { width: 100%; margin-top: .6rem; border-collapse: collapse; font-size: .85rem; display: block; overflow-x: auto; }
.acc-log th, .acc-log td { padding: .4rem .6rem; border: 1px solid var(--border); text-align: left; white-space: nowrap; }
.acc-log th { background: var(--surface-2); font: .72rem ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }

.acc-danger { border-left-color: var(--v-fail); }
.acc-danger h2 { color: var(--v-fail); }
#acc-del form { margin-top: .6rem; }
.btn-3d.danger { --b: var(--v-fail); }
.acc-bye { text-align: center; border-left-color: var(--accent-2); }
.acc-bye h1 { text-transform: uppercase; letter-spacing: .06em; }
.acc-bye .acc-actions { justify-content: center; }

/* The account entry in the header: the username behind a status dot. */
.nav-account { display: inline-flex; align-items: center; gap: .35rem; max-width: 14rem; }
.nav-account #session-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-ico { color: var(--accent-2); font-size: .75rem; text-shadow: 0 0 8px var(--accent-2); }

@media (max-width: 640px) {
    .acc-row { flex-direction: column; align-items: stretch; }
    .acc-card { padding: 1rem; }
}