/* Vistas de cuenta: login, registro, "Mi perfil" y reset de contraseña (php/views/login.php,
   register.php, userProfile.php, passwordReset.php). Sigue design/BRAND_PROFILE.md: fondo con el mismo
   degradado oscuro, paneles "de ficha" con borde fino, kicker con barra de acento, Arial.
   Los colores de proximidad de fecha (sección 2.1 del perfil) NO se usan acá: los mensajes de
   error/éxito se distinguen con el acento de marca y el texto principal, no con rojo/verde de fechas. */
:root{
    --fp-background-top:#000000;
    --fp-background-mid:#0c0c0c;
    --fp-background-bottom:#191919;
    --fp-panel-background:#161616;
    --fp-panel-border:#2a2a2a;
    --fp-accent-red:#e0202c;
    --fp-text-main:#EDEDED;
    --fp-text-muted:#9a9a9a;
    --fp-text-dim:#6f6f6f;
}
*{
    box-sizing:border-box;
}
/* Degradado en <html> (no en <body>), mismo motivo que en css/fighterProfile.css. */
html{
    background:linear-gradient(to bottom, var(--fp-background-top), var(--fp-background-mid), var(--fp-background-bottom));
    min-height:100%;
}
body{
    color:var(--fp-text-main);
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.5;
    margin:0;
    padding:0;
}
a{
    color:var(--fp-text-main);
}
a:hover,
a:focus-visible{
    color:var(--fp-accent-red);
}

/* ---------- estructura ---------- */
.account-page{
    margin:0 auto;
    max-width:30rem;
    padding:1rem 1rem 3rem;
}
.account-header{
    display:flex;
    justify-content:center;
    padding:.5rem 0 1.5rem;
}
.account-header img{
    height:auto;
    width:5.5rem;
}
.account-title{
    font-size:1.75rem;
    letter-spacing:.02em;
    margin:0 0 1.25rem;
    text-transform:uppercase;
}

/* Kicker: barra vertical de acento + versalitas (mismo patrón que #fighter-kicker / .team-group-title). */
.account-kicker{
    border-left:solid 4px var(--fp-accent-red);
    color:var(--fp-text-muted);
    font-size:.75rem;
    font-weight:bold;
    letter-spacing:.12em;
    margin:0 0 1rem;
    padding-left:.6rem;
    text-transform:uppercase;
}

/* Panel "de ficha" con un corte sutil en la esquina inferior derecha (lenguaje de los clip-path de la card). */
.account-panel{
    background:var(--fp-panel-background);
    border:solid 1px var(--fp-panel-border);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.1rem), calc(100% - 1.1rem) 100%, 0 100%);
    margin-bottom:1.25rem;
    padding:1.25rem 1.25rem 1.5rem;
}
.account-panel p{
    color:var(--fp-text-muted);
    margin:0 0 .75rem;
}

/* ---------- formularios ---------- */
.account-field{
    margin-bottom:1rem;
}
.account-field label{
    color:var(--fp-text-muted);
    display:block;
    font-size:.85rem;
    margin-bottom:.35rem;
}
.account-field input{
    background:var(--fp-background-mid);
    border:solid 1px var(--fp-panel-border);
    border-radius:2px;
    color:var(--fp-text-main);
    font-family:inherit;
    font-size:1rem;
    padding:.65rem .75rem;
    width:100%;
}
.account-field input:focus{
    border-color:var(--fp-text-muted);
    outline:solid 2px var(--fp-accent-red);
    outline-offset:1px;
}
.account-help{
    color:var(--fp-text-dim);
    display:block;
    font-size:.8rem;
    margin-top:.3rem;
}
.account-button{
    background:var(--fp-accent-red);
    border:none;
    border-radius:2px;
    color:#ffffff;
    cursor:pointer;
    font-family:inherit;
    font-size:.9rem;
    font-weight:bold;
    letter-spacing:.08em;
    margin-top:.5rem;
    padding:.8rem 1.2rem;
    text-transform:uppercase;
    width:100%;
}
.account-button:hover,
.account-button:focus-visible{
    filter:brightness(1.12);
}
.account-button.secondary{
    background:transparent;
    border:solid 1px var(--fp-panel-border);
    color:var(--fp-text-main);
}
.account-button.secondary:hover,
.account-button.secondary:focus-visible{
    border-color:var(--fp-accent-red);
    filter:none;
}

/* Honeypot del registro: fuera de pantalla (no display:none, que algunos bots detectan). */
.account-honeypot{
    height:1px;
    left:-10000px;
    overflow:hidden;
    position:absolute;
    width:1px;
}

/* ---------- mensajes ---------- */
.account-message{
    background:var(--fp-panel-background);
    border:solid 1px var(--fp-panel-border);
    border-left:solid 4px var(--fp-text-main);
    margin-bottom:1.25rem;
    padding:.75rem 1rem;
}
.account-message.error{
    border-left-color:var(--fp-accent-red);
}

/* ---------- links y datos ---------- */
.account-links{
    display:flex;
    flex-wrap:wrap;
    font-size:.9rem;
    gap:.5rem 1.25rem;
    justify-content:center;
    margin-top:1.5rem;
}
.account-data{
    display:grid;
    gap:.35rem 1rem;
    grid-template-columns:auto 1fr;
    margin:0 0 1rem;
}
.account-data dt{
    color:var(--fp-text-dim);
    font-size:.85rem;
}
.account-data dd{
    margin:0;
    overflow-wrap:anywhere;
}
.account-pending{
    color:var(--fp-text-muted);
    font-size:.8rem;
}
/* Link con aspecto de botón (ej. "Ir al panel de carga" en userProfile.php). */
.account-button-link{
    display:block;
    text-align:center;
    text-decoration:none;
}