/* assets/css/public.css - páginas públicas del sistema: registro, renovación, retorno de pago */

:root{
    --tema:#8b5cf6; --fondo:#0b0b0f; --panel:#16161d; --borde:#26262f;
    --texto:#f2f2f5; --texto-tenue:#a0a0ac; --ok:#34d399; --peligro:#f87171;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:'Inter',system-ui,-apple-system,sans-serif}
a{color:inherit}

.pagina-formulario{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.tarjeta-formulario{
    background:var(--panel);border:1px solid var(--borde);border-radius:20px;
    padding:38px 34px;max-width:440px;width:100%
}
.tarjeta-formulario.tarjeta-centrada{text-align:center}
.marca{font-weight:800;font-size:1.3rem;text-decoration:none;display:inline-block;margin-bottom:18px;color:var(--tema)}
.tarjeta-formulario h1{font-size:1.5rem;margin:0 0 8px}
.tarjeta-formulario .subt{color:var(--texto-tenue);font-size:.94rem;margin:0 0 22px;line-height:1.5}
.tarjeta-formulario .preview-username{color:var(--tema);font-weight:600}

.tarjeta-formulario form{display:flex;flex-direction:column;gap:16px}
.tarjeta-formulario label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--texto-tenue)}
.tarjeta-formulario input{
    padding:12px 14px;border-radius:10px;border:1px solid var(--borde);
    background:#0c0c11;color:var(--texto);font-size:1rem
}
.tarjeta-formulario small{color:var(--texto-tenue);font-size:.78rem;margin-top:-10px}

.btn-principal{
    background:var(--tema);color:#fff;border:0;padding:14px 22px;border-radius:12px;
    font-weight:700;font-size:1rem;cursor:pointer;margin-top:6px
}
.btn-principal:hover{filter:brightness(1.1)}
.btn-link{text-decoration:none;display:inline-block;text-align:center}

.legal{font-size:.78rem;color:var(--texto-tenue);text-align:center;margin-top:4px}
.ayuda{text-align:center;color:var(--texto-tenue);font-size:.88rem;margin-top:22px}
.ayuda a{color:var(--tema);text-decoration:none;font-weight:600}

.alerta{padding:12px 14px;border-radius:10px;margin-bottom:18px;font-size:.9rem}
.alerta-error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:var(--peligro)}
.alerta-ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--ok)}

.estado-ok h1{color:var(--ok)}
.estado-error h1{color:var(--peligro)}