/* Identidad visual alineada con familiae.es */
:root {
    --fam-azul: #88B7E8;
    --fam-azul-oscuro: #4F86C6;
    --fam-azul-suave: #EEF5FD;
    --fam-amarillo: #F3CE3C;
    --fam-gris: #8B8D94;
    --fam-texto: #2F3136;
    --fam-borde: #E6EAF0;
    --fam-fondo: #F6F8FB;
    --fam-sombra: 0 1px 2px rgba(31, 45, 61, .04), 0 4px 16px rgba(31, 45, 61, .06);
}

html, body {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    color: var(--fam-texto);
    background: var(--fam-fondo);
}

a, .btn-link {
    color: var(--fam-azul-oscuro);
}

/* ---------- Logotipo ---------- */
.fam-logo {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    line-height: 1;
    text-decoration: none !important;
}

.fam-logo__img {
    height: 54px;
    width: auto;
    display: block;
}

.fam-logo__sub {
    font-family: 'Raleway', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3em;
    color: var(--fam-gris);
    padding-left: .85rem;
    border-left: 1px solid var(--fam-borde);
    line-height: 2.2;
}

/* Versión grande (inicio de sesión): logotipo encima y subtítulo debajo */
.fam-logo--grande {
    flex-direction: column;
    gap: .9rem;
}

    .fam-logo--grande .fam-logo__img { height: 120px; }

    .fam-logo--grande .fam-logo__sub {
        font-size: .8rem;
        letter-spacing: .38em;
        border-left: 0;
        padding-left: 0;
        line-height: 1;
    }

@media (max-width: 600px) {
    .fam-logo:not(.fam-logo--grande) .fam-logo__sub { display: none; }
}

/* ---------- Barra superior y menú ---------- */
.fam-appbar {
    border-bottom: 1px solid var(--fam-borde);
}

    .fam-appbar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg, var(--fam-azul) 0 70%, var(--fam-amarillo) 70% 100%);
        opacity: .7;
    }

.fam-usuario {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--fam-texto);
}

    .fam-usuario:hover { background: var(--fam-azul-suave); }

.fam-avatar {
    background: var(--fam-amarillo) !important;
    color: var(--fam-texto) !important;
    font-weight: 700;
}

.fam-drawer {
    border-right: 1px solid var(--fam-borde);
}

.fam-nav {
    padding: .5rem .75rem 1.5rem;
}

.fam-nav__titulo {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #A9ABB2;
    padding: 1.1rem .75rem .4rem;
}

.fam-nav .mud-nav-link {
    border-radius: 8px;
    margin: 2px 0;
    font-weight: 600;
    font-size: .93rem;
}

    .fam-nav .mud-nav-link.active {
        background: var(--fam-azul-suave);
        box-shadow: inset 3px 0 0 var(--fam-azul-oscuro);
    }

/* ---------- Contenido ---------- */
.fam-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

    .fam-cabecera h1 {
        position: relative;
        margin: 0;
        padding-bottom: .55rem;
    }

        .fam-cabecera h1::after {
            /* Subrayado azul como en los titulares de familiae.es */
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 56px;
            height: 3px;
            border-radius: 2px;
            background: var(--fam-azul);
        }

.fam-cabecera__sub {
    color: var(--fam-gris);
    margin-top: .35rem;
}

.fam-card {
    background: #fff;
    border: 1px solid var(--fam-borde);
    border-radius: 12px;
    box-shadow: var(--fam-sombra);
}

.fam-kpi {
    padding: 1.25rem 1.35rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
}

.fam-kpi__icono {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--fam-azul-suave);
    color: var(--fam-azul-oscuro);
    flex: none;
}

.fam-kpi--amarillo .fam-kpi__icono { background: #FDF6DA; color: #B68D00; }
.fam-kpi--positivo .fam-kpi__icono { background: #E7F4EE; color: #3E8B6B; }
.fam-kpi--negativo .fam-kpi__icono { background: #FBEAEA; color: #C0392B; }
.fam-kpi--negativo .fam-kpi__valor { color: #C0392B; }

.fam-lineas td { vertical-align: middle; }
.fam-num input { text-align: right; }

.fam-totales__fila,
.fam-totales__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem 0;
    border-bottom: 1px solid var(--fam-borde);
}

.fam-totales__total {
    border-bottom: 0;
    margin-top: .5rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    background: var(--fam-azul-suave);
    font-size: 1.15rem;
}

    .fam-totales__total strong { color: var(--fam-azul-oscuro); font-size: 1.35rem; }

.fam-grafico {
    padding: 1.25rem 1.25rem .5rem;
    height: 100%;
}

    .fam-grafico h2 {
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0 0 .25rem;
    }

    .fam-grafico .fam-grafico__sub {
        color: var(--fam-gris);
        font-size: .82rem;
        margin-bottom: .75rem;
    }

.fam-kpi__valor {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.fam-kpi__etiqueta {
    color: var(--fam-gris);
    font-size: .85rem;
}

.mud-table.fam-card,
.fam-card .mud-table {
    box-shadow: none;
}

.mud-table-head .mud-table-cell {
    font-weight: 700;
    color: var(--fam-gris);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---------- Agenda semanal ---------- */
.agenda {
    --hora-alto: 64px;
    overflow-x: auto;
}

.agenda__rejilla {
    display: grid;
    grid-template-columns: 60px repeat(var(--dias), minmax(130px, 1fr));
    min-width: 760px;
}

.agenda__cab {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid var(--fam-borde);
    padding: .65rem .5rem;
    text-align: center;
    font-size: .8rem;
    color: var(--fam-gris);
    text-transform: capitalize;
}

    .agenda__cab strong {
        display: block;
        font-size: 1.25rem;
        color: var(--fam-texto);
    }

    .agenda__cab--hoy strong {
        display: grid;
        margin: 0 auto;
        place-items: center;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
        background: var(--fam-azul-oscuro);
        color: #fff;
    }

.agenda__horas,
.agenda__dia {
    margin-top: 12px;
    margin-bottom: 12px;
}

.agenda__horas {
    position: relative;
}

.agenda__hora {
    height: var(--hora-alto);
    font-size: .72rem;
    color: #A9ABB2;
    text-align: right;
    padding-right: .5rem;
    transform: translateY(-.5em);
}

.agenda__dia {
    position: relative;
    border-left: 1px solid var(--fam-borde);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hora-alto) - 1px), #EEF1F5 calc(var(--hora-alto) - 1px), #EEF1F5 var(--hora-alto));
    cursor: copy;
}

.agenda__dia--hoy {
    background-color: #FBFDFF;
}

.agenda__cita {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 8px;
    padding: .3rem .5rem;
    font-size: .76rem;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
    background: color-mix(in srgb, var(--color) 16%, white);
    border-left: 4px solid var(--color);
    color: var(--fam-texto);
    transition: box-shadow .15s, transform .15s;
}

    .agenda__cita:hover {
        box-shadow: 0 4px 14px rgba(31, 45, 61, .14);
        transform: translateY(-1px);
        z-index: 1;
    }

    .agenda__cita strong {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.agenda__cita--cancelada {
    opacity: .5;
    text-decoration: line-through;
}

.agenda__ahora {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #E25C5C;
    z-index: 1;
    pointer-events: none;
}

    .agenda__ahora::before {
        content: "";
        position: absolute;
        left: -5px;
        top: -4px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #E25C5C;
    }

.fam-leyenda {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
}

    .fam-leyenda i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--color);
    }

/* ---------- Páginas de cuenta (login, contraseña...) ---------- */
.account-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background:
        radial-gradient(circle at 12% 18%, rgba(243, 206, 60, .22) 0, transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(136, 183, 232, .30) 0, transparent 40%),
        var(--fam-fondo);
}

.account-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.account-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--fam-borde);
    border-radius: 16px;
    box-shadow: var(--fam-sombra);
    padding: 2.25rem 2rem;
}

.account-card:has(.fam-manage) {
    max-width: 960px;
}

.account-pie {
    margin-top: 1.5rem;
    font-size: .8rem;
    color: var(--fam-gris);
    text-align: center;
}

.account-page .btn-primary {
    background: var(--fam-azul-oscuro);
    border-color: var(--fam-azul-oscuro);
    font-family: 'Comfortaa', 'Raleway', sans-serif;
    font-weight: 700;
    border-radius: 999px;
}

    .account-page .btn-primary:hover,
    .account-page .btn-primary:focus {
        background: #3F74B2;
        border-color: #3F74B2;
    }

.account-page .form-control {
    border-radius: 10px;
    border-color: var(--fam-borde);
}

.account-page .btn:focus,
.account-page .form-control:focus,
.account-page .form-check-input:focus {
    border-color: var(--fam-azul);
    box-shadow: 0 0 0 .25rem rgba(136, 183, 232, .35);
}

.account-page h1 {
    font-weight: 700;
}

.account-page .nav-pills .nav-link.active {
    background: var(--fam-azul-oscuro);
}