@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #0a3da8;
    --primary-soft: #1d4ed8;
    --accent: #f59e0b;
    --bg: #f4f7fc;
    --ink: #0f172a;
    --surface: #ffffff;
    --surface-soft: #f8fbff;
    --line: #dbe3ef;
    --shell-max: 1600px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: "Manrope", "Segoe UI Variable Text", "Aptos", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: .95rem;
    letter-spacing: .08px;
    line-height: 1.36;
}

.app-body {
    min-height: 100vh;
}

.app-shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

.app-sidebar {
    background: linear-gradient(180deg, #081a3a 0%, #102a58 40%, #163a74 100%);
    color: #fff;
    padding: .85rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    border-right: 1px solid rgba(255,255,255,.1);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: .62rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
}

.brand-block small {
    display: block;
    opacity: .8;
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: .5rem;
    object-fit: cover;
    background: #fff;
    padding: .2rem;
}

.menu-nav {
    overflow: auto;
    padding-right: .12rem;
}

.menu-nav::before {
    content: "MEN\00DA";
    display: block;
    margin: .1rem .2rem .55rem;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8fc0ff;
    font-weight: 600;
}

.menu-group {
    margin: .9rem 0 .3rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b7d5df;
}

.accordion-nav {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.menu-group-wrap {
    border-radius: .58rem;
    padding: .08rem 0 .16rem;
    margin-bottom: .24rem;
    border: 1px solid transparent;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.menu-group-wrap[open] {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.menu-group-summary {
    margin: .08rem 0 .08rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .075em;
    color: #d7e6ff;
    list-style: none;
    cursor: pointer;
    padding: .52rem .58rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    border-radius: .46rem;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, transform .18s ease;
}

.menu-group-summary::-webkit-details-marker {
    display: none;
}

.menu-group-summary::after {
    content: "";
    width: 12px;
    height: 12px;
    background: no-repeat center/12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23d9e7ff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
    transform: rotate(90deg);
    transition: transform .2s ease;
    opacity: .9;
}

.menu-group-summary::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .38rem;
    background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12));
    border: 1px solid rgba(255,255,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.menu-group-wrap:not([open]) > .menu-group-summary::after {
    transform: rotate(0deg);
}

.menu-group-wrap[open] > .menu-group-summary {
    background: rgba(255, 255, 255, .08);
    color: #f2f7ff;
}

.menu-group-summary:hover {
    background: rgba(255, 255, 255, .07);
}

.menu-link {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: .52rem .7rem;
    border-radius: .46rem;
    margin-bottom: .18rem;
    transition: background-color .2s ease;
    position: relative;
    padding-left: 2.28rem;
    font-weight: 700;
}

.menu-link::before {
    content: "";
    position: absolute;
    left: .58rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.22rem;
    height: 1.22rem;
    border-radius: .35rem;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.14));
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.menu-link:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

.menu-link.active {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.18);
}

.menu-link.sub {
    margin-left: .88rem;
    margin-right: .2rem;
    margin-bottom: .16rem;
    padding: .46rem .66rem .46rem .7rem;
    color: #e6f0ff;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
    border-left: 1px solid rgba(176, 211, 255, .14);
    border-radius: .32rem;
    background: transparent;
}

.menu-link.sub::before {
    display: none;
}

.menu-link.sub::after {
    display: none;
}

.menu-link.sub:hover {
    background: rgba(255,255,255,.09);
}

.menu-link.sub.active {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255,255,255,.2);
    border-left: 1px solid rgba(176, 211, 255, .28);
}

.menu-group-wrap[open] > .menu-link.sub {
    animation: submenu-item-in .2s ease both;
}

.menu-group-wrap[open] > .menu-link.sub:nth-of-type(2) { animation-delay: .02s; }
.menu-group-wrap[open] > .menu-link.sub:nth-of-type(3) { animation-delay: .04s; }
.menu-group-wrap[open] > .menu-link.sub:nth-of-type(4) { animation-delay: .06s; }
.menu-group-wrap[open] > .menu-link.sub:nth-of-type(5) { animation-delay: .08s; }
.menu-group-wrap[open] > .menu-link.sub:nth-of-type(6) { animation-delay: .10s; }
.menu-group-wrap[open] > .menu-link.sub:nth-of-type(7) { animation-delay: .12s; }
.menu-group-wrap[open] > .menu-link.sub:nth-of-type(8) { animation-delay: .14s; }

@keyframes submenu-item-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-link[data-icon="dashboard"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 13h8V3H3v10Zm10 8h8v-6h-8v6Zm0-8h8V3h-8v10ZM3 21h8v-6H3v6Z'/%3E%3C/svg%3E");
}

.menu-link[data-icon="personas"]::before,
.menu-link[data-icon="lider"]::before,
.menu-link[data-icon="red"]::before,
.menu-link[data-icon="celula"]::before,
.menu-link[data-icon="ninos"]::before,
.menu-link[data-icon="nido"]::before,
.menu-link[data-icon="herederos"]::before,
.menu-link[data-icon="marineros"]::before,
.menu-link[data-icon="teens"]::before,
.menu-link[data-icon="rocas"]::before,
.menu-link[data-icon="jovenes"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0ZM4 21a8 8 0 1 1 16 0'/%3E%3C/svg%3E");
}

.menu-link[data-icon="eventos"]::before,
.menu-link[data-icon="universidad"]::before,
.menu-link[data-icon="escuela"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}

.menu-link[data-icon="adoracion"]::before,
.menu-link[data-icon="adoracion-servicios"]::before,
.menu-link[data-icon="adoracion-equipos"]::before,
.menu-link[data-icon="adoracion-canciones"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 18V5l12-2v13M9 9l12-2M6 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm12-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.menu-link[data-icon="contribuciones"]::before,
.menu-link[data-icon="sobres"]::before,
.menu-link[data-icon="donaciones"]::before,
.menu-link[data-icon="contabilidad"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 7h18v10H3zM3 10h18M7 15h2'/%3E%3C/svg%3E");
}

.menu-link[data-icon="configuracion"]::before,
.menu-link[data-icon="seguridad"]::before,
.menu-link[data-icon="relaciones"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m12 15 3.5 2-.7-4.1L18 9.8l-4.1-.6L12 5.5l-1.9 3.7-4.1.6 3 3.1-.7 4.1L12 15Z'/%3E%3C/svg%3E");
}

.menu-link[data-icon="busqueda"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.menu-link[data-icon="asistencia"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 11.5 11 14l4-5M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}

.menu-link[data-icon="reportes"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 20V10m6 10V4m6 16v-7'/%3E%3C/svg%3E");
}

.menu-group-summary[data-icon="personas"]::before,
.menu-group-summary[data-icon="ninos"]::before,
.menu-group-summary[data-icon="relaciones"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0ZM4 21a8 8 0 1 1 16 0'/%3E%3C/svg%3E");
}

.menu-group-summary[data-icon="eventos"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 2v4M16 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
}

.menu-group-summary[data-icon="adoracion"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 18V5l12-2v13M9 9l12-2M6 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm12-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.menu-group-summary[data-icon="contribuciones"]::before,
.menu-group-summary[data-icon="contabilidad"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 7h18v10H3zM3 10h18M7 15h2'/%3E%3C/svg%3E");
}

.menu-group-summary[data-icon="configuracion"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m12 15 3.5 2-.7-4.1L18 9.8l-4.1-.6L12 5.5l-1.9 3.7-4.1.6 3 3.1-.7 4.1L12 15Z'/%3E%3C/svg%3E");
}

.logout-form {
    margin-top: auto;
}

.session-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .08) 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .62rem;
    padding: .56rem;
}

.session-user {
    font-weight: 700;
    line-height: 1.2;
    color: #f8fbff;
    margin-bottom: .12rem;
}

.session-state {
    color: #d7ebff;
    font-size: .82rem;
    margin-bottom: .45rem;
}

.session-btn {
    border-radius: 999px;
    font-weight: 600;
    padding: .42rem .8rem;
}

.session-btn-light {
    background: #ffffff;
    color: #0f2a63;
    border: 1px solid #ffffff;
}

.session-btn-light:hover {
    background: #eef4ff;
    color: #0f2a63;
}

.session-btn-danger {
    background: #de2a2a;
    color: #ffffff;
    border: 1px solid #de2a2a;
}

.session-btn-danger:hover {
    background: #bf1d1d;
    color: #ffffff;
}

.app-main {
    padding: 1rem 1.2rem 1.05rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 10% 8%, rgba(30, 58, 138, .04), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(14, 165, 233, .035), transparent 30%),
        var(--bg);
}

.app-content {
    width: 100%;
    max-width: var(--shell-max);
    margin: 0 auto;
}

.app-footer {
    margin-top: auto;
    padding: .9rem 0 .3rem;
    border-top: 1px solid #dce5f0;
    color: #475569;
    font-weight: 500;
    width: 100%;
    max-width: var(--shell-max);
    margin-left: auto;
    margin-right: auto;
}

.app-main h1,
.app-main h2,
.app-main h3,
.app-main h4 {
    font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI Semibold", sans-serif;
}

.page-header {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .35rem .1rem .75rem !important;
}

.page-header h1,
.page-header .h3 {
    margin-bottom: .15rem;
}

/* Menús/filtros en formato card global */
ul.nav.nav-pills,
.left-toolbar,
.perm-toolbar,
.children-filter-wrap,
.search-box,
.personas-tabs,
.adoracion-top-tabs,
.form-tabs,
.family-mode {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .92rem;
    padding: .5rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

ul.nav.nav-pills {
    gap: .3rem;
}

ul.nav.nav-pills .nav-link {
    border-radius: .7rem;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(155deg, #194657 0%, #2d7e95 55%, #f3b95f 100%);
}

.login-wrap {
    width: min(460px, 92vw);
}

.login-card {
    border-radius: 1rem;
    background: #fff;
    padding: 1.5rem;
}

.login-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        z-index: 10;
        max-height: 45vh;
    }
}

.personas-wrap {
    display: grid;
    grid-template-columns: minmax(480px, .97fr) minmax(620px, 1.2fr);
    gap: 1.05rem;
}

.panel-left,
.panel-right {
    min-width: 0;
}

.left-toolbar {
    display: flex;
    gap: .6rem;
    margin-bottom: .75rem;
}

.kpi-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.kpi-inline-pill {
    background: #eef4ff;
    color: #1e3a8a;
    border: 1px solid #c7d7fe;
    border-radius: 999px;
    padding: .18rem .6rem;
    font-size: .78rem;
}

.search-box {
    display: flex;
    gap: .4rem;
    flex: 1;
}

.list-card {
    border-radius: .8rem;
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(15,23,42,.035);
}

.person-row {
    display: block;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #e8eef6;
    padding: .85rem .9rem;
}

.person-row:last-child {
    border-bottom: 0;
}

.person-row.active {
    background: #1d6fca;
    color: #fff;
}

.person-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.person-name {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .01em;
}

.person-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    margin-top: .32rem;
    font-size: .82rem;
    color: #5b6c80;
}

.person-meta-line strong {
    color: #1f2f46;
    font-weight: 800;
}

.person-badges {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.status-pill,
.role-pill {
    border-radius: 999px;
    padding: .2rem .55rem;
    font-size: .72rem;
}

.status-pill {
    background: #edf2f7;
    color: #334e68;
}

.person-row.active .status-pill {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.person-row.active .person-meta-line {
    color: rgba(255, 255, 255, .92);
}

.person-row.active .person-meta-line strong {
    color: #ffffff;
}

.role-pill.server {
    background: #dbeafe;
    color: #1d4ed8;
}

.role-pill.leader {
    background: #ede9fe;
    color: #6d28d9;
}

.person-row.active .role-pill.server,
.person-row.active .role-pill.leader {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.person-row.active .status-pill.info-pill {
    background: #eaf3ff;
    color: #0b5ed7;
    border: 1px solid #9ec5fe;
}

.person-row.active .status-pill.status-miembro {
    background: #dcfce7;
    color: #166534;
}

.person-row.active .status-pill.status-visita {
    background: #dbeafe;
    color: #1d4ed8;
}

.person-row.active .status-pill.status-nino {
    background: #fef9c3;
    color: #a16207;
}

.person-row.active .status-pill.status-prospecto {
    background: #f3e8ff;
    color: #6b21a8;
}

.person-row.active .status-pill.status-contribuyente {
    background: #cffafe;
    color: #155e75;
}

.person-row.active .status-pill.status-difunto {
    background: #e2e8f0;
    color: #334155;
}

.person-row.active .role-pill.server {
    background: #dbeafe;
    color: #1d4ed8;
}

.person-row.active .role-pill.leader {
    background: #ede9fe;
    color: #6d28d9;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.detail-header h2 {
    font-size: 2rem;
    color: #5d6f82;
}

.personas-tabs {
    background: #fff;
    border: 1px solid #d2d8e1;
    border-radius: 999px;
    padding: .22rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: .9rem;
}

.personas-tabs .nav-link {
    text-align: center;
    border-radius: 999px;
    color: #1f4f83;
}

.personas-tabs .nav-link.active {
    background: #2f89e3;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

.info-card,
.family-card,
.tab-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .8rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15,23,42,.03);
}

.row-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #e5ebf2;
    padding: .75rem 1rem;
}

.row-line:last-child {
    border-bottom: 0;
}

.row-line small {
    display: block;
    color: #68778a;
}

.row-line p {
    margin: 0;
    font-size: 1.05rem;
    color: #4c5a6a;
}

.avatar-photo {
    width: 104px;
    height: 104px;
    border-radius: .75rem;
    object-fit: cover;
    border: 1px solid #d6dde7;
}

.family-card h3 {
    margin: 0;
    padding: .95rem 1rem;
    font-size: 1.95rem;
    color: #68778a;
}

.family-members {
    padding: .5rem 1rem 1rem;
}

.member-row {
    display: flex;
    justify-content: space-between;
    padding: .45rem 0;
    border-bottom: 1px solid #eceff4;
}

.member-row:last-child {
    border-bottom: 0;
}

.member-link {
    color: #0b4fca;
    text-decoration: none;
    font-weight: 600;
}

.member-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.role-toggle-form {
    margin-top: .55rem;
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid #e8edf5;
    padding: .7rem 1rem .95rem;
}

.role-toggle-form .status-pill {
    max-width: 100%;
    white-space: nowrap;
}

.tab-card {
    padding: .95rem;
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #5f7285;
}

.note-row {
    display: grid;
    grid-template-columns: 150px 1fr 170px;
    gap: .7rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    padding: .8rem;
    margin-bottom: .65rem;
    background: #fff;
}

.group-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.group-pill {
    border: 1px solid #d3dce6;
    border-radius: .55rem;
    padding: .6rem .8rem;
    display: flex;
    flex-direction: column;
    min-width: 220px;
}

.contribution-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: .65rem;
}

.contrib-row {
    display: grid;
    grid-template-columns: 130px 130px 130px 1fr;
    gap: .8rem;
    padding: .7rem .5rem;
    border-bottom: 1px solid #e6ecf3;
}

.form-tabs,
.family-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    border: 1px solid #d2d8e2;
    border-radius: 999px;
    padding: .2rem;
}

.btn-pill {
    border-radius: 999px;
    color: #0f5094;
    background: transparent;
}

.btn-pill.active {
    background: #0f65b7;
    color: #fff;
}

/* Botones de acción globales (estilo tipo alert) */
.btn {
    border-radius: .42rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .45rem .95rem;
    border-width: 1px;
    box-shadow: none;
    transition: transform .08s ease, filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.03);
}

.btn:active {
    transform: translateY(0);
}

.btn.rounded-pill,
.btn-pill {
    border-radius: .42rem !important;
}

.btn-primary,
.btn-outline-primary {
    background-color: #1677f2;
    border-color: #1677f2;
    color: #fff;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: #1166d6;
    border-color: #1166d6;
    color: #fff;
}

.btn-secondary,
.btn-outline-secondary {
    background-color: #d4d4d8;
    border-color: #d4d4d8;
    color: #111827;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: #c4c4ca;
    border-color: #c4c4ca;
    color: #111827;
}

.btn-success,
.btn-outline-success {
    background-color: #10b981;
    border-color: #10b981;
    color: #fff;
}

.btn-success:hover,
.btn-outline-success:hover {
    background-color: #0ea271;
    border-color: #0ea271;
    color: #fff;
}

.btn-warning,
.btn-outline-warning {
    background-color: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.btn-warning:hover,
.btn-outline-warning:hover {
    background-color: #de8e0a;
    border-color: #de8e0a;
    color: #fff;
}

.btn-danger,
.btn-outline-danger {
    background-color: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.btn-danger:hover,
.btn-outline-danger:hover {
    background-color: #dc3030;
    border-color: #dc3030;
    color: #fff;
}

@media (max-width: 1200px) {
    .personas-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .note-row {
        grid-template-columns: 1fr;
    }

    .contribution-filter {
        grid-template-columns: 1fr;
    }

    .contrib-row {
        grid-template-columns: 1fr 1fr;
    }
}

.login-split-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    background:
        radial-gradient(circle at 8% 10%, rgba(20, 184, 166, 0.12), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(245, 158, 11, 0.08), transparent 26%),
        #f8fafc;
}

.login-split-wrap.ministry {
    background:
        radial-gradient(circle at 9% 11%, rgba(30, 95, 116, 0.16), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(243, 185, 95, 0.12), transparent 26%),
        #f5f8fb;
}

.login-left-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

.login-pro-card {
    width: min(92%, 420px);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 20px;
    border: 1px solid #d8e1ee;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
    padding: 1.35rem 1.25rem;
}

.login-brand {
    font-weight: 800;
    color: #0f172a;
    letter-spacing: .4px;
    margin-bottom: .4rem;
    font-size: .8rem;
}

.login-pro-card h2 {
    font-weight: 800;
    margin-bottom: .2rem;
    color: #0f172a;
}

.login-muted {
    color: #64748b;
    margin-bottom: 0;
}

.login-badges {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
}

.login-badge {
    border: 1px solid #93c5fd;
    border-radius: 999px;
    padding: .25rem .65rem;
    color: #0f766e;
    font-size: .8rem;
    background: #eff6ff;
}

.login-footer-note {
    margin-top: 1rem;
    color: #334155;
    font-size: .9rem;
}

.login-right-pane {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.22), transparent 36%),
        radial-gradient(circle at 80% 14%, rgba(245, 158, 11, 0.2), transparent 34%),
        linear-gradient(140deg, #0b1322 0%, #1f2937 54%, #0f172a 100%);
}

.login-ministry-photo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 6, 23, 0.2), rgba(2, 6, 23, 0.55)),
        url('https://images.unsplash.com/photo-1438232992991-995b7058bbb3?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
    mix-blend-mode: luminosity;
    opacity: .88;
}

.login-right-overlay {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    color: #ffffff;
    background: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 14px;
    padding: 1rem;
}

.login-right-overlay h3 {
    margin: 0 0 .35rem;
    font-weight: 800;
}

.login-right-overlay p {
    margin: 0;
    color: #dbeafe;
}

@media (max-width: 992px) {
    .login-split-wrap {
        grid-template-columns: 1fr;
    }

    .login-right-pane {
        display: none;
    }
}

/* Final override: light SaaS shell aligned with the new references */
body.app-body {
    background: #f7f9fc !important;
}

.app-sidebar {
    background: #ffffff !important;
    color: #344054 !important;
    border-right: 1px solid #e6ecf5 !important;
    box-shadow: 8px 0 26px rgba(15, 23, 42, .04) !important;
}

.brand-block {
    border-bottom-color: #e6ecf5 !important;
}

.brand-block strong {
    color: #101828 !important;
}

.brand-block small {
    color: #667085 !important;
}

.brand-logo {
    background: #eef4ff !important;
    border: 1px solid #dbe7ff !important;
}

.menu-nav-flat .menu-category {
    color: #98a2b3 !important;
}

.menu-nav-flat .menu-link {
    color: #475467 !important;
    border-radius: 12px !important;
    font-weight: 650 !important;
}

.menu-nav-flat .menu-link::before {
    opacity: .78 !important;
    filter: none !important;
}

.menu-nav-flat .menu-link:hover {
    background: #f4f7ff !important;
    color: #344054 !important;
}

.menu-nav-flat .menu-link.active {
    background: #ede9fe !important;
    color: #4f46e5 !important;
    border-color: #ddd6fe !important;
    box-shadow: none !important;
}

.session-card {
    background: #f8fafc !important;
    border-color: #e6ecf5 !important;
}

.session-user {
    color: #344054 !important;
}

.session-state {
    color: #667085 !important;
}

.logout-form .btn-outline-light {
    border-color: #d0d5dd !important;
    background: #fff !important;
    color: #344054 !important;
}

.logout-form .btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

body.sidebar-collapsed .menu-nav-flat .menu-link.active {
    background: #ede9fe !important;
}

/* Final typography and topbar polish */
body,
body.app-body {
    font-family: "Plus Jakarta Sans", "Manrope", "Segoe UI Variable Text", "Segoe UI", sans-serif !important;
    font-size: .94rem;
    letter-spacing: -.01em;
}

.brand-block strong,
.page-header h1,
.app-main h1,
.kpi-card h2,
.child-row-name,
.person-name {
    letter-spacing: -.035em;
}

.brand-block {
    gap: .72rem !important;
}

.brand-logo {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .14) !important;
}

.brand-block strong {
    color: #182230 !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
}

.brand-block small {
    color: #475467 !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
}

.topbar-search {
    text-decoration: none;
}

.topbar-search input {
    font-family: inherit;
    color: #182230;
}

.topbar-search input::placeholder {
    color: #98a2b3;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.topbar-icon-btn::before {
    width: 18px;
    height: 18px;
    background-color: #475467;
    content: "";
    mask: var(--topbar-icon) center / contain no-repeat;
    -webkit-mask: var(--topbar-icon) center / contain no-repeat;
}

.topbar-icon-alert {
    --topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2c0 .5-.2 1-.6 1.4L4 17h5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0' stroke-linecap='round'/%3E%3C/svg%3E");
}

.topbar-icon-inbox {
    --topbar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M4 6h16v12H4z' stroke-linejoin='round'/%3E%3Cpath d='M4 8l8 6 8-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.topbar-icon-btn:hover {
    background: #eef4ff;
    border-color: #c7d7fe;
}

.topbar-icon-btn:hover::before {
    background-color: #2563eb;
}

/* KPI cards: SaaS metric tile with icon */
.kpi-card {
    position: relative !important;
    min-height: 104px !important;
    padding: 1.05rem 4.55rem 1rem 1.15rem !important;
    border: 1px solid #edf1f7 !important;
    border-top: 1px solid #edf1f7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
    overflow: hidden;
}

.kpi-card::after {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: var(--kpi-icon-color, #6d5dfc);
    background-image: var(--kpi-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px;
    box-shadow: none;
    content: "";
}

.kpi-card small {
    display: block;
    margin-bottom: .5rem;
    max-width: calc(100% - .25rem);
    color: #667085 !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
    white-space: normal;
}

.kpi-card h2 {
    margin: 0 0 .22rem !important;
    color: #101828 !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    line-height: 1.05;
}

.kpi-card p,
.kpi-card .kpi-meta {
    color: #667085 !important;
    font-size: .84rem !important;
}

.kpi-card:nth-child(5n + 1) {
    --kpi-icon-color: #ede9fe;
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236d5dfc' stroke-width='2'%3E%3Cpath d='M16 11a4 4 0 1 0-8 0v2a4 4 0 1 0 8 0v-2Z'/%3E%3Cpath d='M6 21c1.2-2.4 3.2-3.6 6-3.6s4.8 1.2 6 3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.kpi-card:nth-child(5n + 2) {
    --kpi-icon-color: #d1fae5;
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981' stroke-width='2'%3E%3Cpath d='M12 3v18M17 7.5c0-1.9-2.2-3-5-3s-5 1.1-5 3 2.2 3 5 3 5 1.1 5 3-2.2 3-5 3-5-1.1-5-3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.kpi-card:nth-child(5n + 3) {
    --kpi-icon-color: #fef3c7;
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b' stroke-width='2'%3E%3Cpath d='M9 12l2 2 4-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

.kpi-card:nth-child(5n + 4) {
    --kpi-icon-color: #dbeafe;
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h8M8 13h5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.kpi-card:nth-child(5n) {
    --kpi-icon-color: #f3e8ff;
    --kpi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c3aed' stroke-width='2'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19H2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bg-kpi-blue,
.bg-kpi-violet,
.bg-kpi-teal,
.bg-kpi-amber,
.bg-kpi-green,
.bg-kpi-sky,
.bg-kpi-rose {
    border-top-color: #edf1f7 !important;
    background: #fff !important;
}

/* Context tabs: icon catalog for module navigation */
.module-context-tabs {
    margin-bottom: 1.15rem !important;
}

.context-tab-icon.tab-lider,
.context-tab-icon.tab-personas,
.context-tab-icon.tab-red,
.context-tab-icon.tab-celula,
.context-tab-icon.tab-calendario,
.context-tab-icon.tab-general,
.context-tab-icon.tab-universidad,
.context-tab-icon.tab-escuela,
.context-tab-icon.tab-servicios,
.context-tab-icon.tab-equipos,
.context-tab-icon.tab-canciones,
.context-tab-icon.tab-configuracion,
.context-tab-icon.tab-sobres,
.context-tab-icon.tab-donaciones,
.context-tab-icon.tab-asistencia,
.context-tab-icon.tab-contabilidad,
.context-tab-icon.tab-registros,
.context-tab-icon.tab-reportes,
.context-tab-icon.tab-log,
.context-tab-icon.tab-seguridad {
    width: 17px;
    height: 17px;
    background-color: currentColor;
    mask: var(--tab-icon) center / contain no-repeat;
    -webkit-mask: var(--tab-icon) center / contain no-repeat;
}

.context-tab-icon.tab-personas {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M16 11a4 4 0 1 0-8 0 4 4 0 0 0 8 0Z'/%3E%3Cpath d='M4 21c1.4-3.5 4.1-5 8-5s6.6 1.5 8 5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-lider {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM5 21c1.2-3.2 3.5-5 7-5s5.8 1.8 7 5' stroke-linecap='round'/%3E%3Cpath d='M17 4l1 2 2 .5-1.5 1.5.4 2-1.9-1-1.8 1 .3-2L14 6.5l2-.5 1-2Z'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-red {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M8.5 10.5l7-3M8.5 13.5l7 3'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-celula {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-5v-5H10v5H5a1 1 0 0 1-1-1v-8Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-calendario {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M4 10h16' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-general {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-universidad {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M4 10l8-5 8 5-8 5-8-5Z'/%3E%3Cpath d='M7 12v5c2.8 2 7.2 2 10 0v-5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-escuela {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M6 4h11a2 2 0 0 1 2 2v14H8a3 3 0 0 1-3-3V5a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M8 17h11M9 8h6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-servicios {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3v18M8 7h8M7 21h10' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-equipos {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M7 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM17 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM4 21c.7-3 2.2-5 5-5M20 21c-.7-3-2.2-5-5-5M12 21c.5-2.6 2-4 4-4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-canciones {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M9 18V5l10-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-configuracion {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.4 1a7 7 0 0 0-1.8-1L14.4 3h-4l-.3 3.1a7 7 0 0 0-1.8 1l-2.4-1-2 3.4 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.4-1a7 7 0 0 0 1.8 1l.3 3.1h4l.3-3.1a7 7 0 0 0 1.8-1l2.4 1 2-3.4-2-1.5c.1-.3.1-.7.1-1Z'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-sobres {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Crect x='4' y='6' width='16' height='12' rx='2'/%3E%3Cpath d='M4 8l8 6 8-6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-donaciones {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s-7-4.3-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.7-7 10-7 10Z'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-asistencia {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M9 12l2 2 4-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-contabilidad {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M6 3h12v18H6zM9 7h6M9 11h2M13 11h2M9 15h2M13 15h2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-registros {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M7 4h10a2 2 0 0 1 2 2v14H5V6a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-reportes {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M5 19V5M5 19h14M9 16V9M13 16V6M17 16v-4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-log {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M6 4h12v16H6zM9 8h6M9 12h6M9 16h3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.tab-seguridad {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3l7 3v5c0 4.5-2.7 8-7 10-4.3-2-7-5.5-7-10V6l7-3Z'/%3E%3Cpath d='M9 12l2 2 4-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tw-filter-card {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .8rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
}

.tw-search-form,
.tw-inline-export {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .7rem;
}

.tw-field {
    min-width: min(420px, 100%);
}

.tw-field label {
    display: block;
    margin-bottom: .35rem;
    color: #344054;
    font-size: .84rem;
    font-weight: 700;
}

.tw-action-btn {
    min-height: 42px;
    border-radius: 11px !important;
    font-weight: 750 !important;
}

.study-card-grid,
.relation-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .85rem;
}

.study-card,
.relation-card {
    padding: 1rem;
    background: #fff;
    border: 1px solid #e1eaf5;
    border-radius: 16px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045);
}

.study-card-head,
.relation-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .65rem;
}

.study-code,
.study-cp,
.relation-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #eef4ff;
    border: 1px solid #c7d7fe;
    color: #175cd3;
    font-size: .75rem;
    font-weight: 750;
}

.study-card h6,
.relation-person {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.study-card dl,
.relation-grid-data {
    display: grid;
    gap: .55rem;
    margin: 0;
}

.study-card dl div,
.relation-grid-data div {
    padding: .65rem;
    background: #f8fbff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
}

.study-card dt,
.relation-grid-data small {
    display: block;
    color: #667085;
    font-size: .72rem;
    font-weight: 700;
}

.study-card dd,
.relation-grid-data strong {
    margin: .15rem 0 0;
    color: #101828;
    font-size: .88rem;
    font-weight: 750;
}

.relation-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .9rem;
}

.relation-map-frame {
    width: 100%;
    min-height: 520px;
    border: 1px solid #d8e0ef;
    border-radius: 16px;
}

.list-card.compact {
    padding: .35rem;
    background: #f8fbff;
}

.person-row.compact {
    margin: .28rem 0;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    background: #fff;
    padding: .7rem .75rem;
}

.person-row.compact.active {
    background: #0d63b6;
    border-color: #0d63b6;
}

.status-pill.status-miembro {
    background: #dcfce7;
    color: #166534;
}

.status-pill.status-visita {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-pill.status-nino {
    background: #fef9c3;
    color: #a16207;
}

.status-pill.status-prospecto {
    background: #f3e8ff;
    color: #6b21a8;
}

.status-pill.status-contribuyente {
    background: #cffafe;
    color: #155e75;
}

.status-pill.status-difunto {
    background: #e2e8f0;
    color: #334155;
}

.compact-grid {
    grid-template-columns: 1fr;
}

.compact-card {
    padding-bottom: .6rem;
}

.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e7edf4;
}

.avatar-photo.small {
    width: 74px;
    height: 74px;
}

.mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: .35rem .8rem;
    padding: .8rem 1rem;
}

.mini-grid div {
    border: 1px solid #e9eef5;
    border-radius: .45rem;
    padding: .45rem .55rem;
    background: #fbfdff;
}

.mini-grid small {
    display: block;
    color: #607287;
}

.mini-grid p {
    margin: 0;
    font-size: .95rem;
}

@media (max-width: 900px) {
    .mini-grid {
        grid-template-columns: 1fr;
    }
}

.module-card-soft {
    border-radius: .95rem;
    border: 1px solid var(--line) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.035) !important;
}

.module-table {
    margin-bottom: 0;
}

.module-table > :not(caption) > * > * {
    padding: .78rem .65rem;
    vertical-align: middle;
}

.module-table thead th {
    border-bottom: 1px solid #d7e1ef;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.module-table tbody tr:hover {
    background: #f8fbff;
}

.dashboard-wrap {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.kpi-grid {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.kpi-card {
    border-radius: 1rem;
    color: #17324d;
    padding: 1rem 1rem .9rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    border: 1px solid rgba(148, 163, 184, .22);
    font-family: "Segoe UI", "Inter", "Arial", sans-serif;
}

.kpi-card small {
    opacity: .9;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .08em;
    font-weight: 700;
}

.kpi-card h2 {
    margin: .45rem 0 .2rem;
    font-size: 1.7rem;
    font-weight: 700;
}

.kpi-card p {
    margin: 0;
    opacity: .88;
    font-weight: 500;
}

.bg-kpi-blue { background: linear-gradient(140deg, #dbeafe, #bfdbfe); }
.bg-kpi-violet { background: linear-gradient(140deg, #ede9fe, #ddd6fe); }
.bg-kpi-teal { background: linear-gradient(140deg, #ccfbf1, #a7f3d0); }
.bg-kpi-amber { background: linear-gradient(140deg, #fef3c7, #fde68a); }
.bg-kpi-green { background: linear-gradient(140deg, #dcfce7, #bbf7d0); }
.bg-kpi-sky { background: linear-gradient(140deg, #e0f2fe, #bae6fd); }
.bg-kpi-rose { background: linear-gradient(140deg, #ffe4e6, #fecdd3); }

.dashboard-grid {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.module-card {
    background: #fff;
    border: 1px solid #dce4f0;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
}

.module-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8rem;
}

.module-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.dot-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
}

.donut-wrap {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: .9rem;
    align-items: center;
}

.donut {
    --pct: 0;
    width: 120px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(#2563eb calc(var(--pct) * 1%), #e2e8f0 0);
    display: grid;
    place-items: center;
}

.donut span {
    width: 74px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #1e3a8a;
}

.bars {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.bar-row {
    display: grid;
    grid-template-columns: 120px 1fr 34px;
    gap: .55rem;
    align-items: center;
    font-size: .88rem;
}

.bar-track {
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.bar-track.warm {
    background: #ffedd5;
}

.bar-fill.warm {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.list-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.list-item {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: .65rem;
    padding: .55rem .65rem;
    background: #f8fbff;
}

.list-item small {
    display: block;
    color: #64748b;
}

@media (max-width: 1100px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 900px) {
    .dashboard-grid,
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .donut-wrap {
        grid-template-columns: 1fr;
    }
}

.children-kpi-grid {
    grid-template-columns: repeat(7, minmax(150px, 1fr));
}

/* ===== Refinamiento visual: menú limpio (sin cambiar paleta) ===== */
.app-sidebar {
    padding: .95rem .75rem;
}

.menu-nav {
    padding-right: .2rem;
}

.menu-group-wrap {
    padding: .14rem 0 .2rem;
    margin-bottom: .16rem;
    border-radius: .72rem;
}

.menu-group-wrap[open] {
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.menu-group-summary {
    font-size: .7rem;
    letter-spacing: .085em;
    padding: .5rem .64rem;
    border-radius: .56rem;
    min-height: 34px;
}

.menu-group-summary::before {
    width: 1.08rem;
    height: 1.08rem;
    border-radius: .32rem;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .2);
    box-shadow: none;
}

.menu-group-summary::after {
    width: 11px;
    height: 11px;
    background-size: 11px 11px;
}

.menu-link {
    border-radius: .56rem;
    padding: .5rem .74rem;
    padding-left: 2.08rem;
    margin-bottom: .12rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: .01em;
    min-height: 34px;
}

.menu-link::before {
    left: .55rem;
    width: 1.03rem;
    height: 1.03rem;
    border-radius: .3rem;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .2);
    box-shadow: none;
}

.menu-link.sub {
    margin-left: 1.15rem;
    margin-right: .18rem;
    margin-bottom: .08rem;
    padding: .43rem .62rem;
    border-left: 1px solid rgba(176, 211, 255, .2);
    border-radius: .48rem;
    font-weight: 600;
    font-size: .9rem;
}

.menu-link.sub.active {
    border-left-color: rgba(176, 211, 255, .34);
    border-color: rgba(255, 255, 255, .16);
}

.menu-group-wrap[open] > .menu-link.sub {
    animation: none;
}

/* ===== Refinamiento visual: dashboard/cards más fluido ===== */
.page-header {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: .35rem .1rem .75rem !important;
}

.dashboard-wrap {
    gap: 1rem;
}

.kpi-grid {
    gap: .95rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.kpi-card {
    border-radius: 1.08rem;
    padding: 1.06rem 1.06rem .95rem;
    border: 1px solid rgba(148, 163, 184, .24);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .055);
    transition: transform .16s ease, box-shadow .18s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, .08);
}

.kpi-card h2 {
    font-size: 1.62rem;
    margin: .38rem 0 .16rem;
    line-height: 1.05;
}

.kpi-card p {
    font-size: .9rem;
    line-height: 1.3;
}

.dashboard-grid {
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.module-card {
    border-radius: 1.08rem;
    border: 1px solid #d8e3f0;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
    padding: 1.05rem 1.08rem;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.module-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(15, 23, 42, .07);
    border-color: #c9d8ea;
}

.module-card-header {
    margin-bottom: .9rem;
}

.module-card-header h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.donut-wrap {
    gap: 1rem;
}

.donut {
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .28);
}

.donut span {
    box-shadow: inset 0 0 0 1px #e2e8f0;
}

.bar-row {
    grid-template-columns: 132px 1fr 42px;
    gap: .62rem;
    font-size: .9rem;
}

.bar-track {
    height: 11px;
}

.list-stack {
    gap: .58rem;
}

.list-item {
    border-radius: .75rem;
    border-color: #dde7f3;
    padding: .62rem .72rem;
    background: #f8fbff;
    transition: background-color .15s ease, border-color .15s ease;
}

.list-item:hover {
    background: #f2f7ff;
    border-color: #cfddf0;
}

.perm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.perm-chip {
    border: 1px solid #c7d2fe;
    color: #1e40af;
    background: #eef2ff;
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
}

.perm-chip.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.perm-card {
    border-radius: 1rem;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
}

.perm-card .card-header {
    border-bottom: 1px solid #e6ebf4;
}

.perm-card .module-table td:first-child {
    min-width: 200px;
}

.children-filter-wrap {
    display: grid;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
}

.children-filter-wrap .btn {
    font-size: .78rem;
    padding: .35rem .35rem;
}

.label-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

.kid-label {
    border: 2px dashed #1e3a8a;
    border-radius: .7rem;
    padding: .8rem;
    text-align: center;
    background: #fff;
}

.kid-label-head {
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: .35rem;
}

.family-members.drag-zone {
    border: 1px dashed #bfdbfe;
    border-radius: .6rem;
    background: #f8fbff;
}

.family-member-item {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    align-items: center;
    padding: .5rem .55rem;
    border-bottom: 1px solid #eceff4;
    cursor: move;
}

.family-member-item:last-child {
    border-bottom: 0;
}

.family-member-item.dragging {
    opacity: .6;
    background: #dbeafe;
}

@media print {
    body * {
        visibility: hidden;
    }

    #labelPrintArea,
    #labelPrintArea * {
        visibility: visible;
    }

    #labelPrintArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

.adoracion-top-tabs {
    background: #fff;
    border: 1px solid #d9e2ee;
    border-radius: 999px;
    padding: .25rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
}

.adoracion-top-tabs a {
    text-decoration: none;
    text-align: center;
    border-radius: 999px;
    padding: .45rem .55rem;
    color: #1d4f97;
    font-weight: 600;
}

.adoracion-top-tabs a.active {
    background: #2563eb;
    color: #fff;
}

.contrib-tabs {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    max-width: 520px;
}

.adoracion-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
}

.adoracion-left .card-body {
    padding: .8rem;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-height: 470px;
    overflow: auto;
}

.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .65rem;
    border: 1px solid #d6ddeb;
    border-radius: .7rem;
    padding: .62rem .72rem;
    text-decoration: none;
    color: #0f172a;
    background: #fff;
}

.service-item small {
    display: block;
    color: #64748b;
}

.service-item.active {
    background: #eaf2ff;
    border-color: #8bb2f8;
}

.songs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: .8rem;
}

.song-card {
    border: 1px solid #d9e2f0;
    border-radius: .8rem;
    padding: .75rem .85rem;
    background: #fff;
}

.song-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.song-card p {
    margin: .5rem 0 .7rem;
    color: #334155;
}

@media (max-width: 1100px) {
    .adoracion-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .adoracion-top-tabs {
        grid-template-columns: 1fr 1fr;
        border-radius: .8rem;
    }

    .songs-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== UI refinado: dashboards suaves + sesión limpia ===== */
.kpi-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #94a3b8 !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
    padding: 1rem 1rem .92rem !important;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06) !important;
}

.kpi-card small {
    color: #64748b;
    opacity: 1;
}

.kpi-card h2 {
    color: #0b1f3a;
}

.kpi-card p {
    color: #475569;
}

.bg-kpi-blue {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    border-top-color: #2563eb !important;
}

.bg-kpi-violet {
    background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%) !important;
    border-top-color: #7c3aed !important;
}

.bg-kpi-teal {
    background: linear-gradient(180deg, #ffffff 0%, #f7fefd 100%) !important;
    border-top-color: #0f766e !important;
}

.bg-kpi-amber {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%) !important;
    border-top-color: #d97706 !important;
}

.bg-kpi-green {
    background: linear-gradient(180deg, #ffffff 0%, #f8fdf9 100%) !important;
    border-top-color: #16a34a !important;
}

.bg-kpi-sky {
    background: linear-gradient(180deg, #ffffff 0%, #f8fcff 100%) !important;
    border-top-color: #0284c7 !important;
}

.bg-kpi-rose {
    background: linear-gradient(180deg, #ffffff 0%, #fff9fb 100%) !important;
    border-top-color: #e11d48 !important;
}

.session-card {
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: .72rem !important;
    padding: .5rem .52rem !important;
    backdrop-filter: blur(2px);
}

.session-user {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: .08rem;
}

.session-state {
    font-size: .74rem;
    color: #dbeafe;
    margin-bottom: .32rem;
}

.session-btn {
    border-radius: .48rem !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    line-height: 1.1;
    padding: .36rem .62rem !important;
    min-height: 32px;
}

.session-btn-light {
    background: #ffffff !important;
    color: #0f2a63 !important;
    border: 1px solid #dbe7ff !important;
}

.session-btn-light:hover {
    background: #f8fbff !important;
    color: #0f2a63 !important;
}

.session-btn-danger {
    background: #ef4444 !important;
    color: #ffffff !important;
    border: 1px solid #ef4444 !important;
}

.session-btn-danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* ===== Sidebar estilo Hospital (aplicado a Ministerium) ===== */
.app-shell {
    grid-template-columns: 286px 1fr;
}

.app-sidebar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0a1f3f 0%, #0f305f 55%, #155092 100%) !important;
    border-right: 1px solid rgba(148, 163, 184, .16);
    box-shadow: 10px 0 26px rgba(5, 18, 45, .32);
    padding: .9rem .72rem .75rem;
}

.app-sidebar::before {
    content: none;
}

.app-sidebar > * {
    position: relative;
    z-index: 1;
}

.brand-block {
    border-radius: .78rem;
    border: 1px solid rgba(176, 203, 243, .22);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
    padding: .55rem .55rem;
}

.brand-block strong {
    font-size: 1rem;
    letter-spacing: .01em;
    font-weight: 600;
}

.brand-block small {
    color: #d6e4ff;
    font-size: .78rem;
}

.brand-logo {
    width: 42px;
    height: 42px;
    border-radius: .62rem;
    border: 1px solid rgba(191, 219, 254, .32);
    box-shadow: none;
}

.menu-nav {
    padding-right: .1rem;
}

.menu-nav::before {
    margin: .26rem .24rem .6rem;
    color: #98b8ea;
    font-size: .68rem;
    letter-spacing: .14em;
    font-weight: 600;
}

.menu-group-wrap {
    border-radius: .72rem;
    padding: .04rem 0 .08rem;
    margin-bottom: .16rem;
    border: 0;
}

.menu-group-wrap[open] {
    background: rgba(255, 255, 255, .06);
    border: 0;
    box-shadow: none;
}

.menu-group-summary {
    min-height: 36px;
    border-radius: .62rem;
    padding: .44rem .56rem;
    font-size: .86rem;
    letter-spacing: .01em;
    text-transform: none;
    color: #deebff;
    font-weight: 500;
    background: transparent;
}

.menu-group-summary:hover {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.menu-group-wrap[open] > .menu-group-summary {
    background: rgba(255, 255, 255, .12);
}

.menu-group-summary::before,
.menu-link::before {
    border-radius: .45rem;
    border: 1px solid rgba(191, 219, 254, .28);
    background: rgba(255, 255, 255, .09);
}

.menu-link {
    min-height: 34px;
    border-radius: .58rem;
    margin-bottom: .08rem;
    padding: .44rem .62rem .44rem 2.02rem;
    color: #e8f1ff;
    font-size: .92rem;
    font-weight: 450;
    letter-spacing: .005em;
}

.menu-link:hover {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.menu-link.active {
    background: rgba(167, 198, 246, .28) !important;
    border: 1px solid rgba(196, 220, 255, .32);
    color: #ffffff !important;
    box-shadow: none;
    font-weight: 500;
}

.menu-link.sub {
    margin-left: .94rem;
    margin-right: .26rem;
    padding: .38rem .56rem;
    border-left: 0;
    border-radius: .5rem;
    background: transparent;
    color: #cfe1ff;
    font-size: .89rem;
    font-weight: 450;
}

.menu-link.sub:hover {
    background: rgba(255, 255, 255, .11);
    color: #fff;
}

.menu-link.sub.active {
    background: rgba(167, 198, 246, .3) !important;
    border-color: rgba(196, 220, 255, .34);
    color: #fff !important;
}

.logout-form {
    margin-top: .2rem;
}

.session-card {
    border-radius: .78rem !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(176, 203, 243, .22) !important;
    box-shadow: none;
    padding: .52rem !important;
}

.session-user {
    font-size: .66rem;
    font-weight: 500;
    line-height: 1.05;
    color: #eff5ff;
}

.session-state {
    font-size: .66rem;
    color: #d6e4ff;
}

.session-btn {
    border-radius: .5rem !important;
    font-size: .76rem !important;
    min-height: 29px;
    padding: .3rem .5rem !important;
    font-weight: 500 !important;
}

/* ===== Cards KPI globales (más limpias y suaves) ===== */
.kpi-grid {
    gap: .88rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.children-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.kpi-card {
    position: relative;
    border-radius: 1rem;
    border: 1px solid #d9e3ef !important;
    border-top: 4px solid #3b82f6 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    color: #172033;
    padding: 1rem 1rem .9rem;
}

.kpi-card small {
    color: #64748b;
    font-size: .73rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
}

.kpi-card h2 {
    margin: .35rem 0 .12rem;
    font-size: 1.62rem;
    line-height: 1.06;
    color: #0f172a;
}

.kpi-card p {
    color: #475569;
    font-size: .9rem;
}

.bg-kpi-blue { border-top-color: #2563eb !important; background: linear-gradient(180deg, #fff, #f8fbff) !important; }
.bg-kpi-violet { border-top-color: #7c3aed !important; background: linear-gradient(180deg, #fff, #fbf9ff) !important; }
.bg-kpi-teal { border-top-color: #0d9488 !important; background: linear-gradient(180deg, #fff, #f7fdfd) !important; }
.bg-kpi-amber { border-top-color: #f59e0b !important; background: linear-gradient(180deg, #fff, #fffcf4) !important; }
.bg-kpi-green { border-top-color: #16a34a !important; background: linear-gradient(180deg, #fff, #f7fdf8) !important; }
.bg-kpi-sky { border-top-color: #0284c7 !important; background: linear-gradient(180deg, #fff, #f7fbff) !important; }
.bg-kpi-rose { border-top-color: #e11d48 !important; background: linear-gradient(180deg, #fff, #fff8fa) !important; }

.dashboard-grid .module-card,
.module-card-soft {
    border-radius: 1rem !important;
    border: 1px solid #dde6f1 !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .045) !important;
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        max-height: 56vh;
    }
}

/* ===== Ajuste final: menú fijo por categorías + badges edad/ID ===== */
.menu-nav-flat {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.menu-nav-flat .menu-category {
    margin: .7rem .25rem .2rem;
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #9bb9e8;
    font-weight: 600;
}

.menu-nav-flat .menu-link {
    padding: .46rem .64rem .46rem 2rem;
    margin-bottom: .06rem;
    border-radius: .56rem;
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: .005em;
    color: #e6efff;
}

.menu-nav-flat .menu-link::before {
    width: .98rem;
    height: .98rem;
    border-radius: .36rem;
    left: .56rem;
}

.menu-nav-flat .menu-link.active {
    background: rgba(168, 198, 246, .27) !important;
    border: 1px solid rgba(198, 219, 255, .3);
    font-weight: 500;
}

.menu-nav-flat .menu-link:hover {
    background: rgba(255, 255, 255, .12);
}

.session-user {
    font-size: .72rem !important;
    font-weight: 500 !important;
}

.person-name {
    font-weight: 800 !important;
}

.info-pill {
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
    font-weight: 700;
}

.person-row.active .info-pill {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

/* Evita pérdida de contraste en filas activas (especialmente Niños) */
.person-row.compact.active .info-pill {
    background: #e0ecff !important;
    color: #1e3a8a !important;
    border-color: #9fbfff !important;
    opacity: 1 !important;
}

.confirm-dialog {
    border: 0;
    border-radius: 10px;
}

.confirm-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid #bfd2df;
    color: #7aa2b8;
    font-size: 42px;
    line-height: 68px;
}

.confirm-title {
    color: #2f3f53;
    font-weight: 600;
}

.confirm-message {
    color: #4a5a70;
    font-size: 1.1rem;
    font-weight: 500;
}

/* ===== Seguridad (usuarios/permisos) ===== */
.security-table thead th {
    background: #edf3fb;
    color: #153a66;
    font-weight: 700;
}

.security-table tbody tr:hover {
    background: #f8fbff;
}

.security-permissions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.security-perm-module {
    border: 1px solid #d8e4f3;
    border-radius: .95rem;
    background: #fff;
    padding: .85rem .85rem .7rem;
    box-shadow: 0 8px 16px rgba(15, 23, 42, .035);
}

.security-perm-module-head {
    border-bottom: 1px solid #e7edf7;
    padding-bottom: .45rem;
    margin-bottom: .35rem;
}

.security-perm-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .26rem 0;
}

.security-perm-item .form-check-input {
    margin-top: 0;
}

@media (max-width: 992px) {
    .security-permissions-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Botones de exportación Excel/PDF ===== */
.btn-export-excel,
.btn-export-pdf {
    position: relative;
    overflow: hidden;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.btn-export-excel::before,
.btn-export-pdf::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-102%);
    transition: transform .22s ease;
    z-index: 0;
}

.btn-export-excel::before {
    background: #16a34a;
}

.btn-export-pdf::before {
    background: #dc2626;
}

.btn-export-excel:hover::before,
.btn-export-pdf:hover::before {
    transform: translateX(0);
}

.btn-export-excel > *,
.btn-export-pdf > * {
    position: relative;
    z-index: 1;
}

.btn-export-excel:hover {
    color: #fff !important;
    border-color: #15803d !important;
}

.btn-export-pdf:hover {
    color: #fff !important;
    border-color: #b91c1c !important;
}

/* ===== Paginación unificada (Anterior | página actual | Siguiente) ===== */
.pager-modern {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.pager-btn {
    min-width: 82px;
    border-radius: .45rem !important;
    border: 1px solid #d1d5db !important;
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    font-weight: 500;
    padding: .34rem .75rem !important;
    text-decoration: none;
}

.pager-btn:hover:not(.disabled) {
    background: #e5e7eb !important;
    color: #4b5563 !important;
}

.pager-btn.disabled,
.pager-btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: .75;
}

.pager-current {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .2);
}

/* ===== SaaS dashboard refresh ===== */
:root {
    --saas-bg: #f6f8fc;
    --saas-ink: #101828;
    --saas-muted: #667085;
    --saas-line: #e6ecf5;
    --saas-card: #ffffff;
    --saas-primary: #2563eb;
    --saas-purple: #6d5dfc;
    --saas-sidebar: #ffffff;
    --saas-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}

body.app-body {
    background:
        radial-gradient(circle at 72% 8%, rgba(219, 234, 254, .72), transparent 28rem),
        radial-gradient(circle at 32% 96%, rgba(237, 233, 254, .6), transparent 24rem),
        var(--saas-bg) !important;
    color: var(--saas-ink);
}

.app-shell {
    grid-template-columns: 264px minmax(0, 1fr) !important;
    transition: grid-template-columns .22s ease;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--saas-sidebar) !important;
    color: #344054 !important;
    border-right: 1px solid var(--saas-line) !important;
    box-shadow: 8px 0 26px rgba(15, 23, 42, .04) !important;
    padding: 1.05rem .85rem !important;
    gap: .8rem !important;
}

.brand-block {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: .35rem .45rem .9rem !important;
    border-bottom: 1px solid var(--saas-line) !important;
}

.brand-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #eef4ff !important;
    border: 1px solid #dbe7ff;
}

.brand-block strong {
    display: block;
    color: #101828;
    font-size: .98rem;
    font-weight: 800;
}

.brand-block small {
    color: var(--saas-muted);
    opacity: 1 !important;
    font-size: .74rem;
}

.sidebar-collapse-btn,
.topbar-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--saas-line);
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.sidebar-collapse-btn {
    position: absolute;
    right: -17px;
    top: 72px;
    z-index: 5;
}

.sidebar-collapse-btn span,
.topbar-menu-btn span {
    width: 14px;
    height: 2px;
    border-radius: 99px;
    background: #667085;
}

.menu-nav {
    padding: .15rem .08rem .75rem !important;
}

.menu-nav::before {
    content: none !important;
}

.menu-nav-flat .menu-category {
    margin: 1.05rem .45rem .45rem !important;
    color: #98a2b3 !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    font-weight: 800 !important;
}

.menu-nav-flat .menu-link,
.menu-link {
    color: #475467 !important;
    font-size: .88rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    border-radius: 10px !important;
    margin: .08rem 0 !important;
    padding: .68rem .72rem .68rem 2.5rem !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.menu-nav-flat .menu-link::before,
.menu-link::before {
    width: 1.32rem !important;
    height: 1.32rem !important;
    left: .7rem !important;
    border-radius: 8px !important;
    background-color: #f2f4f7 !important;
    border: 1px solid #eaecf0 !important;
    box-shadow: none !important;
    opacity: .92;
}

.menu-nav-flat .menu-link:hover,
.menu-link:hover {
    background: #f4f7ff !important;
    color: #1d4ed8 !important;
}

.menu-nav-flat .menu-link.active,
.menu-link.active {
    background: #eef4ff !important;
    color: #1d4ed8 !important;
    border-color: #d6e4ff !important;
    box-shadow: inset 3px 0 0 var(--saas-primary) !important;
}

.logout-form {
    margin-top: auto;
}

.session-card {
    background: #f8fafc !important;
    border: 1px solid var(--saas-line) !important;
    border-radius: 12px !important;
    color: #344054 !important;
    padding: .75rem !important;
}

.session-user {
    color: #101828 !important;
    font-size: .72rem !important;
    line-height: 1.15;
    word-break: break-word;
}

.session-state {
    color: var(--saas-muted) !important;
    font-size: .68rem !important;
}

.session-btn {
    border-radius: 8px !important;
    min-height: 32px !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
}

.app-main {
    background: transparent !important;
    min-width: 0;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(240px, 560px) 1fr;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.65rem;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--saas-line);
}

.topbar-search {
    height: 42px;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: .65rem;
    padding: 0 .8rem;
    border-radius: 999px;
    border: 1px solid var(--saas-line);
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}

.topbar-search input {
    border: 0;
    outline: 0;
    min-width: 0;
    font-size: .86rem;
    color: #344054;
}

.topbar-search-icon {
    width: 16px;
    height: 16px;
    border: 2px solid #98a2b3;
    border-radius: 50%;
    position: relative;
}

.topbar-search-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 2px;
    right: -5px;
    bottom: -2px;
    background: #98a2b3;
    transform: rotate(45deg);
    border-radius: 99px;
}

.topbar-search kbd {
    background: #f2f4f7;
    color: #667085;
    border: 1px solid #eaecf0;
    font-size: .68rem;
    border-radius: 6px;
}

.topbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .65rem;
}

.topbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--saas-line);
    background: #fff;
    color: #475467;
    font-weight: 800;
}

.topbar-user {
    display: grid;
    line-height: 1.1;
    color: #101828;
    font-size: .82rem;
    font-weight: 800;
}

a.topbar-user-link {
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s;
}

a.topbar-user-link:hover {
    background: #f1f5f9;
    color: #101828;
}

.topbar-user small {
    color: var(--saas-muted);
    font-size: .7rem;
    font-weight: 500;
}

.app-content {
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 1.75rem 1.9rem 3rem !important;
}

.page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1.15rem !important;
}

.page-header h1,
.app-main h1 {
    font-weight: 800 !important;
    color: #101828 !important;
    letter-spacing: 0 !important;
}

.page-header p,
.text-muted {
    color: #667085 !important;
}

.kpi-grid {
    gap: 1rem !important;
}

.kpi-card,
.module-card,
.info-card,
.family-card,
.list-card,
.tab-card,
.card,
.children-toolbar-shell,
.compact-card {
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--saas-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--saas-shadow) !important;
}

.kpi-card {
    min-height: 104px;
    padding: 1rem !important;
    border-top-width: 4px !important;
}

.kpi-card small {
    color: #667085 !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
}

.kpi-card h2 {
    color: #101828 !important;
    font-size: 1.55rem !important;
    margin-top: .4rem !important;
}

.btn {
    border-radius: 8px !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.btn-primary,
.btn-outline-primary:hover {
    background: linear-gradient(180deg, #3478f6, #2563eb) !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

.btn-outline-primary {
    background: #fff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}

.btn-secondary,
.btn-outline-secondary {
    background: #f2f4f7 !important;
    border-color: #e5e7eb !important;
    color: #344054 !important;
}

.btn-success {
    background: #12b981 !important;
    border-color: #12b981 !important;
}

.btn-warning {
    background: #facc15 !important;
    border-color: #facc15 !important;
}

.btn-danger,
.btn-outline-danger:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

.btn-outline-danger {
    background: #fff !important;
    color: #ef4444 !important;
    border-color: #fecaca !important;
}

.context-tabs {
    display: flex;
    align-items: center;
    gap: .55rem;
    overflow-x: auto;
    padding: .35rem;
    border: 1px solid var(--saas-line);
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 24px rgba(15,23,42,.045);
}

.context-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 38px;
    padding: .45rem .85rem;
    border-radius: 10px;
    color: #475467;
    text-decoration: none;
    font-weight: 750;
    white-space: nowrap;
    border: 1px solid transparent;
}

.context-tab:hover {
    color: #2563eb;
    background: #f4f7ff;
}

.context-tab.active {
    color: #2563eb;
    background: #eef4ff;
    border-color: #d6e4ff;
}

.context-tab-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
}

.person-row.compact,
.child-row-card {
    border-radius: 10px !important;
    border: 1px solid #dbe7f5 !important;
    background: #fff !important;
    margin: .4rem !important;
}

.person-row.compact.active,
.child-row-card.active {
    background: #eef6ff !important;
    color: #102a43 !important;
    border-color: #bfdcff !important;
}

.person-row.compact.active .child-row-name,
.person-row.compact.active .person-name {
    color: #102a43 !important;
}

.children-toolbar-shell {
    padding: .7rem !important;
}

.left-toolbar,
.children-toolbar {
    gap: .65rem !important;
}

body.sidebar-collapsed .app-shell {
    grid-template-columns: 84px minmax(0, 1fr) !important;
}

body.sidebar-collapsed .app-sidebar {
    padding-inline: .65rem !important;
}

body.sidebar-collapsed .brand-block {
    justify-content: center;
    padding-inline: .2rem !important;
}

body.sidebar-collapsed .brand-block div,
body.sidebar-collapsed .menu-category,
body.sidebar-collapsed .session-card,
body.sidebar-collapsed .menu-link {
    font-size: 0 !important;
}

body.sidebar-collapsed .menu-link {
    width: 44px;
    height: 44px;
    margin-inline: auto !important;
    padding: 0 !important;
}

body.sidebar-collapsed .menu-link::before {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

body.sidebar-collapsed .sidebar-collapse-btn {
    right: -17px;
}

@media (max-width: 980px) {
    .app-shell,
    body.sidebar-collapsed .app-shell {
        grid-template-columns: 1fr !important;
    }

    .app-sidebar {
        position: relative;
        height: auto;
        max-height: none !important;
    }

    .sidebar-collapse-btn,
    .topbar-search kbd,
    .topbar-user {
        display: none !important;
    }

    .app-topbar {
        grid-template-columns: auto 1fr auto;
        padding: .75rem 1rem;
    }

    .app-content {
        padding: 1rem !important;
    }
}

/* ===== SaaS Dashboard Refresh ===== */
:root {
    --saas-bg: #f5f7fb;
    --saas-surface: #ffffff;
    --saas-border: #e5eaf3;
    --saas-text: #0f172a;
    --saas-muted: #64748b;
    --saas-primary: #2563eb;
    --saas-primary-2: #4f46e5;
    --saas-success: #10b981;
    --saas-warning: #f59e0b;
    --saas-danger: #ef4444;
    --saas-shadow: 0 14px 35px rgba(15, 23, 42, .07);
}

body.app-body {
    background:
        radial-gradient(circle at 86% 8%, rgba(56, 189, 248, .14), transparent 32%),
        radial-gradient(circle at 42% 100%, rgba(124, 58, 237, .08), transparent 28%),
        linear-gradient(180deg, #f8fbff, #f2f5fa 62%, #f7f9fc) !important;
    color: var(--saas-text);
    font-family: "Manrope", "Segoe UI Variable Text", "Segoe UI", sans-serif !important;
}

.app-shell {
    grid-template-columns: 268px minmax(0, 1fr) !important;
    transition: grid-template-columns .22s ease;
}

body.sidebar-collapsed .app-shell {
    grid-template-columns: 86px minmax(0, 1fr) !important;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1rem .8rem !important;
    gap: .85rem !important;
    overflow: hidden;
    background: linear-gradient(180deg, #0f2b58 0%, #155a9d 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 8px 0 28px rgba(15, 23, 42, .08);
}

.brand-block {
    padding: .35rem .45rem .85rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 0 !important;
}

.brand-block strong {
    font-size: 1.04rem !important;
    font-weight: 700 !important;
}

.brand-block small {
    color: #dbeafe !important;
    font-size: .74rem !important;
    opacity: .9 !important;
}

.brand-logo {
    width: 42px !important;
    height: 42px !important;
    padding: .32rem !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.sidebar-collapse-btn,
.topbar-menu-btn {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    cursor: pointer;
}

.sidebar-collapse-btn {
    position: absolute;
    top: 68px;
    right: -19px;
    z-index: 20;
}

.sidebar-collapse-btn span,
.topbar-menu-btn span {
    width: 15px;
    height: 2px;
    border-radius: 999px;
    background: #334155;
}

.menu-nav,
.menu-nav-flat {
    padding-right: 0 !important;
}

.menu-nav::before {
    display: none !important;
}

.menu-nav-flat {
    gap: .12rem !important;
    overflow: auto;
}

.menu-nav-flat .menu-category {
    margin: 1rem .45rem .45rem !important;
    color: #bfdbfe !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
}

.menu-nav-flat .menu-link {
    min-height: 42px;
    padding: .64rem .72rem .64rem 2.55rem !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #eaf3ff !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
}

.menu-nav-flat .menu-link::before {
    left: .78rem !important;
    width: 18px !important;
    height: 18px !important;
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: .92;
}

.menu-nav-flat .menu-link:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.menu-nav-flat .menu-link.active {
    border-color: rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

body.sidebar-collapsed .brand-block {
    justify-content: center;
    padding-inline: 0 !important;
}

body.sidebar-collapsed .brand-block div,
body.sidebar-collapsed .menu-category,
body.sidebar-collapsed .menu-link {
    font-size: 0 !important;
}

body.sidebar-collapsed .menu-nav-flat .menu-link {
    width: 46px;
    height: 46px;
    margin: .1rem auto .38rem !important;
    padding: 0 !important;
    border-radius: 14px !important;
}

body.sidebar-collapsed .menu-nav-flat .menu-link::before {
    left: 50% !important;
    width: 20px !important;
    height: 20px !important;
    transform: translate(-50%, -50%) !important;
}

.session-card {
    padding: .72rem !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .1) !important;
}

.session-user {
    overflow: hidden;
    font-size: .72rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis;
}

.session-state {
    color: #dbeafe !important;
    font-size: .68rem !important;
}

body.sidebar-collapsed .session-card {
    padding: .5rem !important;
    text-align: center;
}

body.sidebar-collapsed .session-user,
body.sidebar-collapsed .session-state,
body.sidebar-collapsed .session-card .btn {
    display: none !important;
}

.app-main {
    min-width: 0;
    background: transparent !important;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    display: flex;
    height: 64px;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.75rem;
    border-bottom: 1px solid rgba(226, 232, 240, .85);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(14px);
}

.topbar-search {
    display: flex;
    max-width: 520px;
    height: 40px;
    flex: 1;
    align-items: center;
    gap: .65rem;
    padding: 0 .8rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.topbar-search-icon {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
}

.topbar-search-icon::after {
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 7px;
    height: 2px;
    border-radius: 999px;
    background: #94a3b8;
    content: "";
    transform: rotate(45deg);
}

.topbar-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    font-size: .9rem;
}

.topbar-search kbd {
    padding: .12rem .4rem;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    font-size: .68rem;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-left: auto;
}

.topbar-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #475569;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

.topbar-user {
    display: grid;
    line-height: 1.1;
}

.topbar-user span {
    font-size: .84rem;
    font-weight: 700;
}

.topbar-user small {
    color: #64748b;
    font-size: .72rem;
}

.app-content {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 1.6rem 1.75rem 2.5rem !important;
}

.page-header {
    margin-bottom: 1.25rem !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-header h1,
.app-main h1 {
    color: #0f172a !important;
    font-size: 1.55rem !important;
    font-weight: 750 !important;
}

.page-header p {
    color: #64748b !important;
    font-size: .9rem !important;
}

.kpi-grid {
    gap: 1rem !important;
}

.kpi-card {
    min-height: 86px;
    padding: 1.05rem 1rem !important;
    border: 1px solid var(--saas-border) !important;
    border-top: 4px solid var(--saas-primary) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
    color: #0f172a !important;
}

.kpi-card small {
    color: #52627a !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
}

.kpi-card h2 {
    color: #0f172a !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
}

.bg-kpi-blue { border-top-color: #2563eb !important; background: linear-gradient(180deg, #fff, #f8fbff) !important; }
.bg-kpi-violet { border-top-color: #7c3aed !important; background: linear-gradient(180deg, #fff, #fbf8ff) !important; }
.bg-kpi-teal { border-top-color: #0d9488 !important; background: linear-gradient(180deg, #fff, #f6fffd) !important; }
.bg-kpi-amber { border-top-color: #f59e0b !important; background: linear-gradient(180deg, #fff, #fffaf1) !important; }
.bg-kpi-green { border-top-color: #16a34a !important; background: linear-gradient(180deg, #fff, #f7fff9) !important; }
.bg-kpi-sky { border-top-color: #0284c7 !important; background: linear-gradient(180deg, #fff, #f7fbff) !important; }
.bg-kpi-rose { border-top-color: #e11d48 !important; background: linear-gradient(180deg, #fff, #fff8fa) !important; }

.card,
.info-card,
.list-card,
.tab-card,
.family-card,
.module-card,
.compact-card {
    border: 1px solid var(--saas-border) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055) !important;
}

.btn {
    padding: .56rem .95rem !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.btn-sm {
    padding: .38rem .7rem !important;
    border-radius: 9px !important;
}

.btn-primary,
.btn-outline-primary:hover {
    border-color: #2563eb !important;
    background: #2563eb !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: #bfdbfe !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

.btn-secondary,
.btn-outline-secondary:hover {
    border-color: #e5e7eb !important;
    background: #e5e7eb !important;
    color: #111827 !important;
}

.btn-success,
.btn-outline-success:hover {
    border-color: #10b981 !important;
    background: #10b981 !important;
    color: #fff !important;
}

.btn-warning,
.btn-outline-warning:hover {
    border-color: #f59e0b !important;
    background: #f59e0b !important;
    color: #111827 !important;
}

.btn-danger,
.btn-outline-danger:hover {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important;
}

.context-tabs {
    display: flex;
    align-items: center;
    gap: .55rem;
    overflow-x: auto;
    padding: .55rem;
    border: 1px solid var(--saas-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

.context-tab {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: .48rem;
    padding: .56rem .88rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #475569;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.context-tab:hover {
    background: #f8fafc;
    color: #2563eb;
}

.context-tab.active {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4f46e5;
}

.context-tab-icon {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 0;
    background-color: currentColor;
    mask: var(--tab-icon) center / contain no-repeat;
    -webkit-mask: var(--tab-icon) center / contain no-repeat;
    opacity: .75;
}

.context-tab-icon.area-todos {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M4 5h16M4 12h16M4 19h16' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.area-nido {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s-7-4.4-7-10a7 7 0 1 1 14 0c0 5.6-7 10-7 10Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.context-tab-icon.area-herederos {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3l2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 16.9l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9L12 3Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.context-tab-icon.area-marineros {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3v13M6 10h12M5 16c2 3 5 4 7 4s5-1 7-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 16h8l-4 4-4-4Z'/%3E%3C/svg%3E");
}

.context-tab-icon.area-teens {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M16 11a4 4 0 1 0-8 0v2a4 4 0 1 0 8 0v-2Z'/%3E%3Cpath d='M7 21c1.3-2 3-3 5-3s3.7 1 5 3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.context-tab-icon.area-rocas {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M5 17l4-10 4 7 2-4 4 7H5Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.context-tab-icon.area-jovenes {
    --tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath d='M7 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM17 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM2 21c.8-3.2 2.6-5 5-5s4.2 1.8 5 5M12 21c.7-2.4 2.4-4 5-4 2.2 0 3.8 1.2 5 4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.children-toolbar-shell,
.left-toolbar,
.children-toolbar {
    border-radius: 14px !important;
}

.personas-wrap {
    gap: 1rem !important;
}

.person-row,
.child-row-card {
    border: 1px solid #dbe7f5 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.person-row.active,
.child-row-card.active {
    border-color: #9ec5ff !important;
    background: #eef6ff !important;
    color: #0f172a !important;
}

.person-row.active .person-name,
.child-row-card.active .child-row-name,
.person-row.active a {
    color: #0f172a !important;
}

.status-pill,
.role-pill {
    border-radius: 999px !important;
    font-weight: 750 !important;
}

@media (max-width: 992px) {
    .app-shell,
    body.sidebar-collapsed .app-shell {
        grid-template-columns: 1fr !important;
    }

    .app-sidebar {
        position: relative;
        height: auto;
        max-height: none !important;
    }

    .sidebar-collapse-btn {
        display: none;
    }

    .app-topbar {
        padding: .75rem 1rem;
    }

    .topbar-search kbd,
    .topbar-user {
        display: none;
    }

    .app-content {
        padding: 1rem !important;
    }
}

/* Final UX refinements: children dashboard, profile modal and photo actions */
html, body, input, select, textarea, button {
    font-family: "Plus Jakarta Sans", "Manrope", "Segoe UI Variable Text", "Segoe UI", sans-serif !important;
}

.brand-logo {
    object-fit: contain !important;
    background: #eef5ff;
    padding: 4px;
}

.children-dashboard-mode .list-card.compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: .75rem !important;
}

.children-dashboard-mode .list-card.compact > .p-4 {
    grid-column: 1 / -1;
}

.children-dashboard-mode .child-row-card {
    min-height: 96px;
    padding: .9rem !important;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    column-gap: .75rem;
    align-items: start;
}

.children-dashboard-mode .child-row-card .child-row-name {
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.children-dashboard-mode .child-row-card .child-row-actions-line {
    grid-column: 1;
    align-self: start;
    margin-top: .45rem;
}

.children-dashboard-mode .child-row-card .child-row-badges {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: end;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    max-width: 220px;
}

.children-dashboard-mode .child-view-btn {
    padding: .34rem .65rem !important;
    font-size: .73rem !important;
}

.child-profile-card {
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    overflow: hidden;
}

.child-profile-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid #e5edf7;
    background: #f4f8fd;
}

.child-profile-photo {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    border: 1px solid #d6e3f3;
    object-fit: cover;
    background: #fff;
}

.child-profile-kicker {
    display: inline-flex;
    margin-bottom: .2rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.child-profile-title h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.child-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .55rem;
}

.child-profile-badges span {
    border: 1px solid #bfd6ff;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    padding: .18rem .55rem;
    font-size: .76rem;
    font-weight: 750;
}

.child-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding: 1rem;
}

.child-profile-grid > div {
    min-height: 64px;
    border: 1px solid #e1eaf5;
    border-radius: 13px;
    background: #fff;
    padding: .65rem .75rem;
}

.child-profile-grid small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 650;
    margin-bottom: .2rem;
}

.child-profile-grid strong {
    color: #0f172a;
    font-size: .9rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.child-profile-wide {
    grid-column: span 3;
}

.photo-choice-group {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    border: 1px dashed #c8d8eb;
    border-radius: 12px;
    background: #f8fbff;
    padding: .6rem;
}

.photo-choice-name {
    font-size: .82rem;
}

@media (max-width: 900px) {
    .children-dashboard-mode .list-card.compact,
    .child-profile-grid {
        grid-template-columns: 1fr;
    }

    .child-profile-wide {
        grid-column: auto;
    }

    .children-dashboard-mode .child-row-card {
        grid-template-columns: 1fr;
    }

    .children-dashboard-mode .child-row-card .child-row-badges {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        align-self: auto;
        margin-top: .55rem;
    }
}

/* Brand polish override */
.brand-block strong {
    color: #f8fafc !important;
    font-family: "Plus Jakarta Sans", "Manrope", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
}

.brand-block small {
    color: rgba(241,245,249,.86) !important;
    font-family: "Plus Jakarta Sans", "Manrope", sans-serif !important;
    font-weight: 500 !important;
}

/* Clean KPI cards override: white SaaS cards without color bars */
.kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.kpi-card,
.kpi-card[class*="bg-kpi-"] {
    position: relative !important;
    min-height: 112px !important;
    padding: 1rem 1.05rem !important;
    border: 1px solid #e6edf5 !important;
    border-top: 1px solid #e6edf5 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
    color: #0f172a !important;
    overflow: hidden !important;
}

.kpi-card::before,
.kpi-card::after {
    content: none !important;
    display: none !important;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .075) !important;
}

.kpi-card small,
.kpi-card .kpi-label {
    display: block !important;
    max-width: calc(100% - 54px) !important;
    color: #667085 !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    white-space: normal !important;
}

.kpi-card h2,
.kpi-card .kpi-value {
    margin: .48rem 0 .18rem !important;
    color: #101828 !important;
    font-size: 1.55rem !important;
    font-weight: 780 !important;
    letter-spacing: -.035em !important;
    line-height: 1.05 !important;
}

.kpi-card p,
.kpi-card .kpi-subtitle,
.kpi-card .text-muted {
    margin: 0 !important;
    max-width: calc(100% - 42px) !important;
    color: #667085 !important;
    font-size: .82rem !important;
    line-height: 1.28 !important;
}

.kpi-card .kpi-icon,
.kpi-card > i,
.kpi-card svg,
.kpi-card .card-icon {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    padding: 8px !important;
    background: #f2f6fb !important;
    color: #2563eb !important;
    box-shadow: none !important;
}

.kpi-card:nth-child(6n+1) .kpi-icon,
.kpi-card:nth-child(6n+1) > i,
.kpi-card:nth-child(6n+1) svg,
.kpi-card:nth-child(6n+1) .card-icon { background: #eef4ff !important; color: #2563eb !important; }
.kpi-card:nth-child(6n+2) .kpi-icon,
.kpi-card:nth-child(6n+2) > i,
.kpi-card:nth-child(6n+2) svg,
.kpi-card:nth-child(6n+2) .card-icon { background: #eefdf5 !important; color: #12b76a !important; }
.kpi-card:nth-child(6n+3) .kpi-icon,
.kpi-card:nth-child(6n+3) > i,
.kpi-card:nth-child(6n+3) svg,
.kpi-card:nth-child(6n+3) .card-icon { background: #fffaeb !important; color: #f79009 !important; }
.kpi-card:nth-child(6n+4) .kpi-icon,
.kpi-card:nth-child(6n+4) > i,
.kpi-card:nth-child(6n+4) svg,
.kpi-card:nth-child(6n+4) .card-icon { background: #f4f3ff !important; color: #7a5af8 !important; }
.kpi-card:nth-child(6n+5) .kpi-icon,
.kpi-card:nth-child(6n+5) > i,
.kpi-card:nth-child(6n+5) svg,
.kpi-card:nth-child(6n+5) .card-icon { background: #ecfeff !important; color: #06aed4 !important; }
.kpi-card:nth-child(6n+6) .kpi-icon,
.kpi-card:nth-child(6n+6) > i,
.kpi-card:nth-child(6n+6) svg,
.kpi-card:nth-child(6n+6) .card-icon { background: #fff1f3 !important; color: #f04438 !important; }

.kpi-card.bg-kpi-blue,
.kpi-card.bg-kpi-violet,
.kpi-card.bg-kpi-teal,
.kpi-card.bg-kpi-amber,
.kpi-card.bg-kpi-green,
.kpi-card.bg-kpi-sky,
.kpi-card.bg-kpi-rose {
    border-color: #e6edf5 !important;
}

@media (min-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .module-kpi-grid,
    .children-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Session card and collapsed sidebar final polish */
.session-card {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 14px !important;
    padding: .72rem !important;
}

.session-user {
    color: #ffffff !important;
    font-size: .72rem !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
}

.session-state {
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
    gap: .3rem;
    margin: .36rem 0 .58rem !important;
    border: 1px solid rgba(52, 211, 153, .35);
    border-radius: 999px;
    background: rgba(16, 185, 129, .14);
    color: #bbf7d0 !important;
    padding: .12rem .48rem;
    font-size: .64rem !important;
    font-weight: 750 !important;
}

.session-btn-light {
    border-color: #f59e0b !important;
    background: #f59e0b !important;
    color: #111827 !important;
}

.session-btn-danger {
    border-color: #ef4444 !important;
    background: #ef4444 !important;
    color: #fff !important;
}

body.sidebar-collapsed .brand-block {
    justify-content: center !important;
    gap: 0 !important;
}

body.sidebar-collapsed .brand-block > div {
    display: none !important;
}

body.sidebar-collapsed .brand-logo {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
}

/* Clean profile modal used by Lider / Red / Celula fichas */
.entity-profile-card {
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.entity-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #e6edf5;
}

.entity-profile-hero span {
    display: inline-flex;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.entity-profile-hero h3 {
    margin: .25rem 0 0;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 800;
}

.entity-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem 1.25rem 1.25rem;
}

.entity-profile-grid > div {
    border: 1px solid #e6edf5;
    border-radius: 13px;
    background: rgba(255, 255, 255, .78);
    padding: .75rem .85rem;
}

.entity-profile-grid small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: .2rem;
}

.entity-profile-grid strong {
    color: #0f172a;
    font-size: .95rem;
    font-weight: 750;
}

.entity-profile-wide {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .entity-profile-grid {
        grid-template-columns: 1fr;
    }
}

/* Children dashboard cards: compact SaaS metrics with soft colored icons */
.children-kpi-compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: .85rem !important;
}

.children-kpi-secondary {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: .85rem !important;
}

.child-stat-card.kpi-card {
    min-height: 96px !important;
    padding: .9rem 1rem !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
}

.child-stat-card .kpi-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: .92rem !important;
    font-weight: 800;
}

.child-stat-card .kpi-trend {
    margin-top: .32rem !important;
    color: #12b76a !important;
    font-size: .74rem !important;
    font-weight: 750 !important;
    max-width: 100% !important;
}

.child-icon-blue { background: #eef4ff !important; color: #2563eb !important; }
.child-icon-green { background: #ecfdf3 !important; color: #12b76a !important; }
.child-icon-amber { background: #fffaeb !important; color: #f79009 !important; }
.child-icon-purple { background: #f4f3ff !important; color: #7a5af8 !important; }
.child-icon-teal { background: #ecfeff !important; color: #06aed4 !important; }
.child-icon-sky { background: #eff8ff !important; color: #0ba5ec !important; }
.child-icon-rose { background: #fff1f3 !important; color: #f04438 !important; }

.kpi-card .kpi-trend {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: .3rem !important;
    font-size: .74rem !important;
    font-weight: 750 !important;
}

.kpi-card .kpi-trend .trend-value {
    font-weight: 850;
}

.kpi-card .kpi-trend.positive .trend-value {
    color: #12b76a !important;
}

.kpi-card .kpi-trend.negative .trend-value {
    color: #ef4444 !important;
}

.kpi-card .kpi-trend .trend-label {
    color: #0f172a !important;
    font-weight: 700;
}

.envelope-return-grid,
.assignment-lot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
}

.envelope-return-card,
.assignment-lot-card {
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.envelope-return-card h3,
.assignment-lot-card h3 {
    font-size: 1rem;
    margin: .1rem 0 0;
    color: #0f172a;
}

.assignment-lot-card p {
    margin: .15rem 0 0;
    color: #53657f;
    font-size: .83rem;
}

.return-amount {
    color: #0f766e;
    font-size: 1.05rem;
}

.return-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.return-meta-grid span {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.return-meta-grid small {
    color: #64748b;
    font-weight: 700;
}

.return-meta-grid strong {
    color: #0f172a;
    font-size: .86rem;
    overflow-wrap: anywhere;
}

.camera-preview {
    width: 100%;
    min-height: 280px;
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    background: #0f172a;
    object-fit: cover;
}

@media (min-width: 1200px) {
    .children-kpi-compact {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* ── soft-card: card con estilo visual similar a las casas de estudio ── */
.soft-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    transition: box-shadow .15s;
}
.soft-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.soft-card h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; }

/* field-group: label gris pequeño + valor en bold */
.field-group { display: flex; flex-direction: column; gap: 1px; }
.field-group label { font-size: .72rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .03em; margin: 0; }
.field-group span { font-size: .875rem; font-weight: 600; color: #1e293b; }

/* cards-grid: grid responsivo de cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Sidebar deslizable + layout fluido
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Shell: una sola columna */
    .app-shell {
        grid-template-columns: 1fr !important;
        position: relative;
    }

    /* Sidebar: oculta fuera de pantalla por defecto */
    .app-sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 260px !important;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        max-height: 100vh !important;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }

    /* Sidebar abierta */
    .app-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Overlay oscuro al abrir sidebar */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1040;
    }
    .sidebar-overlay.active { display: block; }

    /* Main: ocupa todo el ancho */
    .app-main {
        margin-left: 0 !important;
        width: 100%;
    }

    /* Topbar: más compacta */
    .app-topbar {
        padding: 0 12px;
        height: 52px;
    }

    .topbar-search { display: none; }

    /* Botón hamburger visible */
    .topbar-menu-btn { display: inline-flex !important; }

    /* Contenido */
    .app-content {
        padding: 16px 12px !important;
    }

    /* Page heading compacto */
    .page-heading {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .page-heading > div:last-child {
        width: 100%;
    }
    .page-heading .btn, .page-heading button {
        font-size: .82rem;
        padding: 6px 12px;
    }

    /* KPI grid: 2 columnas en mobile */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Cards grid: 1 columna */
    .cards-grid, .responsive-grid {
        grid-template-columns: 1fr !important;
    }

    /* Context tabs: scroll horizontal */
    .context-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .context-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Modales: full screen en mobile */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .modal-xl, .modal-lg { max-width: calc(100vw - 16px) !important; }

    /* Tablas: scroll horizontal */
    .table-responsive, .data-card .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Filtros: apilados */
    .filter-card, .d-flex.gap-2.align-items-center {
        flex-wrap: wrap;
    }

    /* Datos generales forms */
    .row.g-3 > [class*="col-md"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Botones de acción en cards */
    .soft-card .d-flex.gap-2.flex-wrap {
        flex-wrap: wrap;
    }

    /* Topbar user */
    .topbar-user span { font-size: .75rem; }
    .topbar-user small { display: none; }
}

@media (max-width: 480px) {
    /* KPI grid: 1 columna en pantallas muy pequeñas */
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .kpi-card h2 { font-size: 1.4rem; }

    /* Ocultar algunas columnas de tabla */
    .hide-mobile { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHADCN LAYER — tokens + componentes visuales (estética SaaS moderna)
   Additivo y no destructivo. Moderníza clases compartidas → aplica a todos
   los módulos a la vez. No cambia layout ni rompe formularios.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    /* Tokens semánticos estilo shadcn/ui (adaptados a la paleta actual) */
    --background: #f6f8fc;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --primary-ui: #4f46e5;
    --primary-foreground: #ffffff;
    --secondary-ui: #f1f5f9;
    --secondary-foreground: #0f172a;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --accent-ui: #eef2ff;
    --accent-foreground: #3730a3;
    --destructive: #e11d48;
    --destructive-foreground: #ffffff;
    --border-ui: #e2e8f0;
    --input-ui: #e2e8f0;
    --ring: #4f46e5;
    --radius: 0.75rem;

    /* Intenciones de estado (badges) */
    --st-success-bg: #ecfdf5;   --st-success-fg: #047857;   --st-success-bd: #a7f3d0;
    --st-warning-bg: #fffbeb;   --st-warning-fg: #b45309;   --st-warning-bd: #fde68a;
    --st-destructive-bg: #fff1f2; --st-destructive-fg: #be123c; --st-destructive-bd: #fecdd3;
    --st-info-bg: #f0f9ff;      --st-info-fg: #0369a1;      --st-info-bd: #bae6fd;
    --st-process-bg: #eef2ff;   --st-process-fg: #4338ca;   --st-process-bd: #c7d2fe;
    --st-neutral-bg: #f8fafc;   --st-neutral-fg: #475569;   --st-neutral-bd: #e2e8f0;
}

/* ── Badge centralizado (StatusBadge tag helper) ─────────────────────── */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: .38em;
    padding: .28em .7em;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}
.ui-badge-dot { width: .5em; height: .5em; border-radius: 999px; background: currentColor; opacity: .9; flex: 0 0 auto; }
.ui-badge-success     { background: var(--st-success-bg);     color: var(--st-success-fg);     border-color: var(--st-success-bd); }
.ui-badge-warning     { background: var(--st-warning-bg);     color: var(--st-warning-fg);     border-color: var(--st-warning-bd); }
.ui-badge-destructive { background: var(--st-destructive-bg); color: var(--st-destructive-fg); border-color: var(--st-destructive-bd); }
.ui-badge-info        { background: var(--st-info-bg);        color: var(--st-info-fg);        border-color: var(--st-info-bd); }
.ui-badge-process     { background: var(--st-process-bg);     color: var(--st-process-fg);     border-color: var(--st-process-bd); }
.ui-badge-neutral     { background: var(--st-neutral-bg);     color: var(--st-neutral-fg);     border-color: var(--st-neutral-bd); }

/* ── Modernización de badges Bootstrap heredados (consistencia global) ── */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: .34em .68em;
}

/* ── Cards: rounded-xl + border slate + shadow sutil + hover lift ─────── */
.data-card,
.soft-card,
.module-card-soft,
.kpi-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-ui) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05) !important;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.soft-card:hover,
.module-card-soft:hover {
    box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 34px rgba(15, 23, 42, .09) !important;
    border-color: #cbd5e1 !important;
}

/* ── Botones: radio, foco y transición estilo shadcn ─────────────────── */
.btn {
    border-radius: .6rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ring);
}
.btn:active { transform: translateY(.5px); }
.btn-primary {
    background-color: var(--primary-ui);
    border-color: var(--primary-ui);
}
.btn-primary:hover { background-color: #4338ca; border-color: #4338ca; }
.btn-outline-primary { color: var(--primary-ui); border-color: #c7d2fe; }
.btn-outline-primary:hover { background-color: var(--primary-ui); border-color: var(--primary-ui); }
.btn-sm { border-radius: .5rem; }

/* ── Inputs / selects: foco con ring shadcn ──────────────────────────── */
.form-control,
.form-select {
    border-radius: .6rem;
    border-color: var(--input-ui);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}

/* ── Tablas: encabezado limpio + hover de fila ───────────────────────── */
.table > thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted-foreground);
    font-weight: 600;
    border-bottom: 1px solid var(--border-ui);
}
.table > tbody > tr { transition: background-color .12s ease; }
.table-hover > tbody > tr:hover,
.module-table > tbody > tr:hover { background-color: var(--muted); }

/* ── Modales / diálogos: rounded-2xl + sombra suave ──────────────────── */
.modal-content {
    border-radius: 1rem;
    border: 1px solid var(--border-ui);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
.modal-header, .modal-footer { border-color: var(--border-ui); }

/* ── Chips de pestañas (context-tabs): pill shadcn ───────────────────── */
.context-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ring); }

/* ── Alertas: bordes suaves consistentes ─────────────────────────────── */
.alert { border-radius: .75rem; border-width: 1px; }

/* ═══════════════════════════════════════════════════════════════════════
   RADIX BADGES — forma cuadrada (rounded-md) + colores de área unificados
   ═══════════════════════════════════════════════════════════════════════ */
/* Radios más cuadrados (estilo Radix UI) en todos los badges */
.ui-badge,
.badge,
.role-pill,
.status-pill,
.area-pill {
    border-radius: 5px !important;
}
.ui-badge { padding: .26em .58em; letter-spacing: 0; }
.ui-badge-dot { display: none; }   /* Radix no usa punto */

/* ── Badge de área (categoría de niños) — mismos colores en Niños y Miembros ── */
.area-pill {
    display: inline-flex;
    align-items: center;
    padding: .26em .6em !important;
    font-size: .72rem;
    font-weight: 600 !important;
    line-height: 1.1;
    border: 1px solid transparent;
    white-space: nowrap;
}
.area-pill.area-nido      { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.area-pill.area-herederos { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.area-pill.area-marineros { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.area-pill.area-teens     { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.area-pill.area-rocas     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.area-pill.area-jovenes   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }

/* ── Toggles de rol (Servidor/Líder/Verificador) — soft, pequeños, Radix ── */
.role-toggle {
    border-radius: 5px !important;
    font-weight: 600;
    font-size: .74rem;
    padding: .28em .66em;
    line-height: 1.1;
    border: 1px solid var(--border-ui);
    background: #f8fafc;
    color: #64748b;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.role-toggle:hover { background: #f1f5f9; color: #475569; }
.role-toggle.on-server      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.role-toggle.on-server:hover { background: #d1fae5; }
.role-toggle.on-leader      { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.role-toggle.on-leader:hover { background: #dbeafe; }
.role-toggle.on-verificador      { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.role-toggle.on-verificador:hover { background: #fef3c7; }

/* role-toggle también usable como enlace (Devocional) */
.role-toggle {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR REDESIGN — dark slate SaaS, iconos limpios (Radix), logo sin fondo
   Solo diseño. No cambia estructura ni lógica del menú.
   ═══════════════════════════════════════════════════════════════════════ */
.app-sidebar {
    background: linear-gradient(180deg, #1c2836 0%, #16202b 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
}

/* Marca / logo */
.brand-block {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
.brand-glyph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; color: #e2e8f0; flex: 0 0 auto;
}
.brand-glyph svg { width: 26px; height: 26px; }
.brand-logo {
    background: transparent !important;
    padding: 0 !important;
    width: 38px !important; height: 38px !important;
    object-fit: contain !important;
}

/* Encabezados de categoría */
.menu-category {
    color: #64748b !important;
    font-size: .66rem !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: .1rem .7rem !important;
    margin-top: .6rem !important;
}

/* Enlaces del menú */
.menu-link {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
}
.menu-link:hover { background: rgba(255,255,255,.055) !important; color: #fff !important; }
.menu-link.active {
    background: rgba(45,212,191,.13) !important;
    color: #5eead4 !important;
    border: 1px solid transparent !important;
    box-shadow: inset 3px 0 0 #2dd4bf;
}

/* Iconos limpios: quitar el "chip" pero CONSERVAR el glifo (background-image) */
.menu-link::before,
.menu-group-summary::before {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    opacity: .82;
    width: 1.15rem !important; height: 1.15rem !important;
}
.menu-link:hover::before,
.menu-link.active::before { opacity: 1; }

/* Arreglo de iconos incorrectos (estrellas) y nuevos de recursos */
.menu-link[data-icon="relaciones"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") !important;
}
.menu-link[data-icon="configuracion"]::before,
.menu-group-summary[data-icon="configuracion"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.82 1.17V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-2.82-1.17l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8.4l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 2.82 1.17l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E") !important;
}
.menu-link[data-icon="biblia"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z'/%3E%3C/svg%3E") !important;
}
.menu-link[data-icon="devocional"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") !important;
}

/* Bloque de sesión — soft/Radix */
.session-card {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: .75rem !important;
}
.session-state {
    display: inline-flex !important; align-items: center; width: fit-content;
    background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important;
    border-radius: 5px !important; padding: .18rem .5rem !important;
    font-size: .7rem !important; font-weight: 600 !important;
    margin: .3rem 0 .55rem !important; gap: .3rem;
}
.session-btn { border-radius: 6px !important; font-weight: 600 !important; }
.session-btn-light {
    background: #f8fafc !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important;
}
.session-btn-light:hover { background: #eef2f7 !important; }
.session-btn-danger {
    background: #fff1f2 !important; color: #be123c !important; border: 1px solid #fecdd3 !important;
}
.session-btn-danger:hover { background: #ffe4e6 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   RADIX SOFT BUTTONS — todos los botones del sistema (variant="soft")
   Fondo claro + texto saturado + borde tenue. Solo diseño; conserva clases,
   handlers y submits. Aplica a solid y outline de todos los módulos.
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Indigo (primary) */
.btn-primary, .btn-outline-primary {
    background: #eef2ff !important; color: #4338ca !important; border-color: #e0e7ff !important;
}
.btn-primary:hover, .btn-outline-primary:hover {
    background: #e0e7ff !important; color: #3730a3 !important; border-color: #c7d2fe !important;
}

/* Green (success) */
.btn-success, .btn-outline-success {
    background: #ecfdf5 !important; color: #047857 !important; border-color: #d1fae5 !important;
}
.btn-success:hover, .btn-outline-success:hover {
    background: #d1fae5 !important; color: #065f46 !important; border-color: #a7f3d0 !important;
}

/* Amber/Orange (warning) */
.btn-warning, .btn-outline-warning {
    background: #fff7ed !important; color: #c2410c !important; border-color: #fed7aa !important;
}
.btn-warning:hover, .btn-outline-warning:hover {
    background: #ffedd5 !important; color: #9a3412 !important; border-color: #fdba74 !important;
}

/* Crimson/Red (danger) */
.btn-danger, .btn-outline-danger {
    background: #fff1f2 !important; color: #be123c !important; border-color: #fecdd3 !important;
}
.btn-danger:hover, .btn-outline-danger:hover {
    background: #ffe4e6 !important; color: #9f1239 !important; border-color: #fda4af !important;
}

/* Cyan (info) */
.btn-info, .btn-outline-info {
    background: #ecfeff !important; color: #0e7490 !important; border-color: #cffafe !important;
}
.btn-info:hover, .btn-outline-info:hover {
    background: #cffafe !important; color: #155e75 !important; border-color: #a5f3fc !important;
}

/* Slate (secondary / dark / light) */
.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-dark, .btn-light {
    background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-dark:hover, .btn-light:hover {
    background: #e2e8f0 !important; color: #334155 !important; border-color: #cbd5e1 !important;
}

/* Estado disabled coherente */
.btn.disabled, .btn:disabled { opacity: .5; }

/* ── Botones de sesión (sidebar) en Radix soft ─────────────────────────── */
.session-btn { border-radius: 6px !important; }
.session-btn-light {
    background: #f8fafc !important; color: #1e293b !important; border: 1px solid #e2e8f0 !important;
}
.session-btn-light:hover { background: #eef2f7 !important; color: #1e293b !important; }
.session-btn-danger {
    background: #fff1f2 !important; color: #be123c !important; border: 1px solid #fecdd3 !important;
}
.session-btn-danger:hover { background: #ffe4e6 !important; color: #9f1239 !important; }

/* ── Refuerzo Radix soft (mayor especificidad, mata gradientes solid) ───── */
.btn.btn-primary, .btn.btn-outline-primary {
    background: #eef2ff !important; background-image: none !important; color: #4338ca !important; border-color: #e0e7ff !important;
}
.btn.btn-primary:hover, .btn.btn-outline-primary:hover {
    background: #e0e7ff !important; background-image: none !important; color: #3730a3 !important; border-color: #c7d2fe !important;
}
.btn.btn-success, .btn.btn-outline-success {
    background: #ecfdf5 !important; background-image: none !important; color: #047857 !important; border-color: #d1fae5 !important;
}
.btn.btn-warning, .btn.btn-outline-warning {
    background: #fff7ed !important; background-image: none !important; color: #c2410c !important; border-color: #fed7aa !important;
}
.btn.btn-danger, .btn.btn-outline-danger {
    background: #fff1f2 !important; background-image: none !important; color: #be123c !important; border-color: #fecdd3 !important;
}
.btn.btn-info, .btn.btn-outline-info {
    background: #ecfeff !important; background-image: none !important; color: #0e7490 !important; border-color: #cffafe !important;
}
.btn.btn-secondary, .btn.btn-outline-secondary, .btn.btn-outline-dark, .btn.btn-dark {
    background: #f1f5f9 !important; background-image: none !important; color: #475569 !important; border-color: #e2e8f0 !important;
}

/* Indicador de página activa — soft indigo consistente */
.pager-current {
    background: #eef2ff !important;
    color: #4338ca !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   STAT CARDS — estilo dashboard (blancas, cuadradas, sombra, icono, tendencia)
   ═══════════════════════════════════════════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat-card {
    background: #fff;
    border: 1px solid var(--border-ui);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 26px rgba(15,23,42,.06);
    padding: 18px 20px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.stat-card:hover { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 16px 36px rgba(15,23,42,.1); transform: translateY(-1px); }
.stat-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.stat-title { color: var(--muted-foreground); font-size: .82rem; font-weight: 600; }
.stat-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.stat-icon svg { width: 19px; height: 19px; }
.stat-num { font-size: 1.95rem; font-weight: 800; letter-spacing: -.01em; color: #0f172a; line-height: 1.05; }
.stat-trend { margin-top: 10px; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.stat-trend .lbl { color: #94a3b8; font-weight: 500; }
.stat-trend.up { color: #059669; }
.stat-trend.down { color: #e11d48; }
.stat-trend.flat { color: #64748b; }
.stat-icon.i-blue   { background: #eef2ff; color: #4338ca; }
.stat-icon.i-violet { background: #f5f3ff; color: #6d28d9; }
.stat-icon.i-teal   { background: #ecfeff; color: #0e7490; }
.stat-icon.i-amber  { background: #fff7ed; color: #c2410c; }
.stat-icon.i-green  { background: #ecfdf5; color: #047857; }
/* Donut de progreso (sin librería) */
.stat-donut-wrap { display: flex; align-items: center; gap: 16px; }
.stat-donut {
    width: 92px; height: 92px; border-radius: 999px; flex: 0 0 auto;
    background: conic-gradient(#2dd4bf calc(var(--pct) * 1%), #e9edf3 0);
    display: grid; place-items: center;
}
.stat-donut::before { content: ""; width: 66px; height: 66px; border-radius: 999px; background: #fff; grid-area: 1 / 1; }
.stat-donut b { grid-area: 1 / 1; font-weight: 800; color: #0f172a; font-size: 1.05rem; }