/* ==========================================================================
   FactuGen · Registro de usuario (usa css/tema.css)
   ========================================================================== */

/* Alias de variables antiguas: se calculan en body para seguir el modo claro/oscuro */
body {
    --body-bg: var(--fg-bg);
    --body-color: var(--fg-text);
    --card-bg: var(--fg-surface);
    --input-bg: var(--fg-surface);
    --input-color: var(--fg-text);
    --input-border: var(--fg-border-strong);
    --text-secondary: var(--fg-muted);
    --link-secondary-color: var(--fg-muted);
    --btn-dark-bg: var(--fg-accent);
    --btn-dark-hover: var(--fg-accent-hover);
    --btn-dark-text: var(--fg-accent-ink);
    --alert-danger-bg: var(--fg-danger-soft);
    --alert-danger-color: var(--fg-danger);
    --input-error-bg: var(--fg-danger-soft);
    --card-shadow-main: var(--fg-shadow);
    --card-shadow-hover: var(--fg-shadow);
    --eye-highlight: rgba(0, 0, 0, .12);
}
body.dark { --eye-highlight: rgba(255, 255, 255, .18); }

@keyframes bounceIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

body {
    margin: 0;
    padding-top: 20px;
    overflow-x: hidden;
}

/* El registro se abre dentro del login: su cabecera va oculta */
.header { display: none !important; }

.text-secondary, .form-text { color: var(--fg-muted) !important; }
.text-center a.text-decoration-none.text-secondary { color: var(--fg-muted) !important; }
.text-center a.text-secondary strong { color: var(--fg-accent) !important; text-decoration: none; }

/* === ALERTAS === */
.alert-danger {
    background-color: var(--fg-danger-soft);
    color: var(--fg-danger);
    border-color: transparent;
    border-radius: var(--fg-radius-sm);
    font-weight: 600;
}

/* === FORMULARIO === */
.card {
    border: 1px solid var(--fg-border);
    border-radius: 16px;
    box-shadow: var(--fg-shadow);
    padding: 25px;
    background: var(--fg-surface);
    opacity: 0;
    transition: background-color .3s, border-color .3s, opacity .1s;
}
.card:hover { box-shadow: var(--fg-shadow); }
.card.bounce-in { animation: bounceIn .45s ease-out forwards; }

/* Título de la pantalla: se abre dentro de la ventana flotante del login, donde no hay
   cabecera propia, así que sin esto el formulario empieza sin decir qué es */
.registro-heading { margin-bottom: 16px; }
.registro-heading h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--fg-text);
}
.registro-heading p { margin: 4px 0 0; color: var(--fg-muted); font-size: .92rem; }

.form-label { color: var(--fg-text); font-weight: 700; font-size: .85rem; }

.form-control {
    background: var(--fg-surface) !important;
    color: var(--fg-text) !important;
    border: 1px solid var(--fg-border-strong) !important;
    border-radius: var(--fg-radius-sm);
    font-family: var(--fg-sans);
    transition: border-color .2s, box-shadow .2s, background-color .3s, color .3s;
}
.form-control:focus {
    border-color: var(--fg-accent) !important;
    box-shadow: var(--fg-focus) !important;
}
.form-control::placeholder { color: var(--fg-muted); opacity: .8; }

/* === BOTÓN PRINCIPAL === */
.btn-dark-custom {
    border-radius: var(--fg-radius-sm);
    font-weight: 800;
    padding: .62rem 1rem;
    background: var(--fg-accent) !important;
    border: 1px solid var(--fg-accent) !important;
    color: var(--fg-accent-ink) !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-dark-custom:hover,
.btn-dark-custom:focus {
    background: var(--fg-accent-hover) !important;
    border-color: var(--fg-accent-hover) !important;
    color: var(--fg-accent-ink) !important;
}
.btn-dark-custom:active {
    background: var(--fg-accent-hover) !important;
    border-color: var(--fg-accent-hover) !important;
    color: var(--fg-accent-ink) !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}
.btn-dark-custom:focus-visible { outline: none; box-shadow: var(--fg-focus) !important; }
.btn-dark-custom:disabled {
    background: var(--fg-surface-2) !important;
    border-color: var(--fg-border) !important;
    color: var(--fg-muted) !important;
    opacity: 1;
    pointer-events: none;
}

/* === VALIDACIÓN === */
.input-error {
    border-color: var(--fg-danger) !important;
    background: var(--fg-danger-soft) !important;
}
.status-pill {
    display: inline-block;
    margin-top: 6px;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .78rem;
}
.status-pill-ok { background: var(--fg-ok-soft); color: var(--fg-ok); }
.status-pill-error { background: var(--fg-danger-soft); color: var(--fg-danger); }

/* === PIE === */
footer {
    text-align: center;
    font-size: .85rem;
    color: var(--fg-muted);
    padding: 20px 0 28px;
}
footer a { color: var(--fg-muted); text-decoration: none; }
footer a:hover { color: var(--fg-text); }

/* === OJO DE LA CONTRASEÑA: incrustado dentro del propio campo, no pegado al lado como si
   fueran dos piezas (así no se ve ninguna línea de separación) === */
.fg-password-field { position: relative; }
.fg-password-field .form-control { padding-right: 2.75rem !important; }
.fg-password-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 2.15rem;
    height: 2.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--fg-muted);
    transition: color .2s;
    z-index: 3;
}
.fg-password-eye:focus,
.fg-password-eye:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
.fg-password-eye:active {
    background-image: radial-gradient(circle, var(--eye-highlight) 20%, transparent 60%);
    background-repeat: no-repeat;
    background-position: center;
}
.fg-password-eye:hover { color: var(--fg-text); }
.fg-password-eye:active i { transform: scale(.9); transition: transform .1s ease; color: var(--fg-text); }

/* ---------- Mismo aspecto que el login ----------
   El registro usa ahora la estructura y la hoja del login (login.css, que se carga antes).
   Aquí solo lo propio: los campos en píldora como los del login y la lista de requisitos
   de la contraseña, que se va marcando mientras se escribe. */
#registroForm .form-control { border-radius: 999px !important; padding-left: 1.1rem; }

.pass-reqs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: .78rem;
    color: var(--fg-muted);
}
.pass-reqs li { display: flex; align-items: center; gap: 6px; }
.pass-reqs li::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 999px;
    border: 1.5px solid var(--fg-border-strong);
    transition: background-color .15s, border-color .15s;
}
.pass-reqs li.ok { color: var(--fg-ok); font-weight: 600; }
.pass-reqs li.ok::before {
    border-color: var(--fg-ok);
    background: var(--fg-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5.3-5.3L12.8 4.8z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
@media (max-width: 420px) { .pass-reqs { grid-template-columns: 1fr; } }

/* Sin recuadro interior: en el login el formulario va suelto dentro de su columna. */
#registroForm.card { border: none; box-shadow: none; padding: 0; background: transparent; }

/* ---------- Casilla de aceptación de las condiciones ----------
   Texto pequeño y enlaces en el rojo de marca: tiene que leerse como una condición del
   alta, no como letra pequeña escondida. */
#registroForm .fg-acepta {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 18px;
    font-size: 0.82rem;
    line-height: 1.45;
}
#registroForm .fg-acepta .form-check-input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    border-radius: 5px !important;
    cursor: pointer;
}
#registroForm .fg-acepta .form-check-input:checked {
    background-color: var(--fg-accent, #d32f2f);
    border-color: var(--fg-accent, #d32f2f);
}
#registroForm .fg-acepta .form-check-label { cursor: pointer; opacity: 0.85; }
#registroForm .fg-acepta a { color: var(--fg-accent, #d32f2f); font-weight: 600; text-decoration: none; }
#registroForm .fg-acepta a:hover { text-decoration: underline; }