/* ============================
   PALETA FAMILYROOT (OPCIÓN A)
   ============================ */
:root {
    --fr-bg: #FFF8EE;
    --fr-accent: #F7D7C4;
    --fr-terra: #D9A282;
    --fr-olive: #A7B49E;
    --fr-text: #4A3F35;
    --fr-text-muted: #6F6F6F;
}

/* ============================
   TIPOGRAFÍA Y BASE
   ============================ */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: var(--fr-bg);
    color: var(--fr-text);
    font-family: "Segoe UI", Roboto, sans-serif;
}

/* ============================
   FOCUS STATES (más suaves)
   ============================ */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem var(--fr-accent);
    border-color: var(--fr-terra);
}

/* ============================
   HERO (banner superior)
   ============================ */
.hero-section {
    background: url('/img/family-bg.jpg') no-repeat center center;
    background-size: cover;
    min-height: 350px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 4rem 2rem;
}

/* ============================
   BOTONES FAMILYROOT
   ============================ */
.btn-fr {
    background-color: var(--fr-terra);
    color: white;
    border: none;
    transition: 0.2s ease;
}

    .btn-fr:hover {
        background-color: #c48f6f;
        color: white;
    }

/* ============================
   SECCIONES SUAVES
   ============================ */
.section-soft {
    background-color: var(--fr-accent);
    border-radius: 12px;
    padding: 2rem;
}

/* ============================
   PLACEHOLDERS
   ============================ */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--fr-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================
   LOGIN FAMILYROOT
   ============================ */

.login-wrapper {
    min-height: calc(100vh - 160px); /* ajusta según tu navbar/footer */
}
.login-card {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 2.2rem;
    width: 100%;
    max-width: 380px;
    border: 1px solid var(--fr-accent);
}

    .login-card h2 {
        color: var(--fr-terra);
        font-weight: 700;
    }

    .login-card .form-label {
        color: var(--fr-text);
        font-weight: 500;
    }

    .login-card .form-control {
        border-radius: 8px;
        border: 1px solid var(--fr-olive);
    }

        .login-card .form-control:focus {
            border-color: var(--fr-terra);
            box-shadow: 0 0 0 0.15rem var(--fr-accent);
        }