/* Páginas de cuenta (entrar, registro, contraseña). Mismos colores que la aplicación. */
:root {
    --fondo: #0f172a; --tarjeta: #1e293b; --borde: #334155; --texto: #e2e8f0; --suave: #94a3b8;
    --campo: #0f172a; --acento: #6366f1; --acento-hover: #4f46e5; --acento-texto: #ffffff;
    --ok-fondo: #052e1c; --ok-borde: #15803d; --ok-texto: #86efac;
    --mal-fondo: #3b0d12; --mal-borde: #b91c1c; --mal-texto: #fca5a5;
    --sombra: 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
}
:root[data-tema="light"] {
    --fondo: #f1f5f9; --tarjeta: #ffffff; --borde: #cbd5e1; --texto: #0f172a; --suave: #475569;
    --campo: #ffffff; --acento: #4f46e5; --acento-hover: #4338ca;
    --ok-fondo: #ecfdf5; --ok-borde: #16a34a; --ok-texto: #166534;
    --mal-fondo: #fef2f2; --mal-borde: #dc2626; --mal-texto: #991b1b;
    --sombra: 0 10px 30px rgba(15, 23, 42, .08);
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    min-height: 100vh; background: var(--fondo); color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cuenta {
    max-width: 420px; margin: 0 auto; padding: 40px 16px 32px;
    /* Centrado en la pantalla, como el login anterior; si no cabe, se desplaza normal */
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
}
.marca { text-align: center; margin-bottom: 22px; }
.marca a { display: inline-block; border-radius: 50%; }
.marca img { display: block; width: 120px; height: 120px; object-fit: contain; }
.marca h1 { font-size: 1.6rem; line-height: 1.2; margin: 14px 0 6px; }
.subtitulo { margin: 0; color: var(--suave); font-size: 1rem; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 24px; box-shadow: var(--sombra); }
.nota { color: var(--suave); font-size: .93rem; margin: 0 0 16px; }
.campo { display: block; margin-bottom: 8px; }
.campo > span:first-child { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
input[type=email], input[type=text], input[type=password] {
    width: 100%; padding: 11px 12px; font: inherit; color: var(--texto); background: var(--campo);
    border: 1px solid var(--borde); border-radius: 10px; outline: none;
}
input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 30%, transparent); }
.con-ojo { position: relative; display: block; }
.con-ojo input { padding-right: 46px; }
.ojo {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 36px;
    border: 0; background: transparent; color: var(--suave); cursor: pointer; border-radius: 8px; font-size: 1rem; opacity: .7;
}
.ojo.activo, .ojo:hover { opacity: 1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin: 4px 0 18px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acento); flex: none; }
.reglas { list-style: none; padding: 0; margin: -6px 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-size: .82rem; color: var(--suave); }
.reglas li::before { content: "○ "; }
.reglas li.ok { color: var(--ok-texto); }
.reglas li.ok::before { content: "✓ "; }
.boton {
    display: block; width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--acento); color: var(--acento-texto); font: inherit; font-weight: 700; text-align: center; text-decoration: none;
}
.boton:hover { background: var(--acento-hover); }
.boton:disabled { opacity: .6; cursor: progress; }
.boton-secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.boton-secundario:hover { background: color-mix(in srgb, var(--acento) 12%, transparent); }
.reenviar { margin-bottom: 18px; }
.enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 18px 0 0; font-size: .9rem; }
.enlaces a, .nota a { color: var(--acento); }
:root:not([data-tema="light"]) .enlaces a { color: #a5b4fc; }
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid; margin-bottom: 16px; font-size: .92rem; }
.alerta-texto { flex: 1; }
.alerta-success { background: var(--ok-fondo); border-color: var(--ok-borde); color: var(--ok-texto); }
.alerta-danger { background: var(--mal-fondo); border-color: var(--mal-borde); color: var(--mal-texto); }
.alerta-cerrar { border: 0; background: transparent; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
/* Botón de tema: el mismo que en la aplicación (sol en oscuro, luna en claro) */
.tema-boton {
    position: fixed; top: 12px; right: 12px; z-index: 10; display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border-radius: 8px; cursor: pointer;
    background: #1e293b; border: 1px solid #334155;
}
.tema-boton:hover { background: #334155; }
.tema-boton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema-sol { color: #fbbf24; }
.tema-luna { color: #6366f1; display: none; }
:root[data-tema="light"] .tema-boton { background: #ffffff; border-color: #cbd5e1; }
:root[data-tema="light"] .tema-boton:hover { background: #f1f5f9; }
:root[data-tema="light"] .tema-sol { display: none; }
:root[data-tema="light"] .tema-luna { display: block; }
@media (max-width: 380px) { .tarjeta { padding: 18px; } .reglas { grid-template-columns: 1fr; } .marca img { width: 96px; height: 96px; } }
form + .nota { margin: 14px 0 0; }

/* Enlaces legales al pie y páginas legales */
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 18px; font-size: .8rem; }
.pie-legal a { color: var(--suave); text-decoration: none; }
.pie-legal a:hover { color: var(--texto); text-decoration: underline; }
.check a { color: var(--acento); }
:root:not([data-tema="light"]) .check a { color: #a5b4fc; }
.legal { max-width: 780px; margin: 0 auto; padding: 32px 16px 40px; }
.legal-marca { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 18px; color: var(--texto); text-decoration: none; font-weight: 700; }
.legal-texto { line-height: 1.6; font-size: .95rem; }
.legal-texto h1 { font-size: 1.5rem; margin: 0 0 4px; }
.legal-texto h2 { font-size: 1.08rem; margin: 26px 0 8px; }
.legal-texto p, .legal-texto li { color: var(--texto); }
.legal-texto ul { padding-left: 20px; }
.legal-texto li { margin-bottom: 6px; }
.legal-texto a { color: var(--acento); }
:root:not([data-tema="light"]) .legal-texto a { color: #a5b4fc; }
.legal-fecha { color: var(--suave); font-size: .85rem; margin: 0 0 18px; }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 8px 0; }
.legal-tabla th, .legal-tabla td { border: 1px solid var(--borde); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-tabla th { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.legal-aviso { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--acento) 8%, transparent); }
@media (max-width: 560px) { .legal-tabla { font-size: .8rem; } .legal-tabla th, .legal-tabla td { padding: 6px; } }