/* ===== compositions.css ===== */
/* =========================================
   COMPOSITIONS.CSS
   Composiciónes reutilizables del theme base.
   No contiene estilos exclusivos de modal ni estilos de módulos eliminados.
   ========================================= */

:root{
    --ui-container: 1180px;
    --ui-gap: 18px;
    --ui-gap-sm: 12px;
    --ui-gap-lg: 24px;
    --ui-control-h: 42px;
    --ui-control-radius: var(--radius-sm);
    --ui-card-radius: var(--radius-lg);
}

/* ---------- Layout reusable ---------- */
.ui-section,
.module-section{
    display:flex;
    flex-direction:column;
    gap:var(--ui-gap);
    min-width:0;
}

.ui-stack{ display:flex; flex-direction:column; gap:var(--ui-gap); min-width:0; }
.ui-stack-sm{ display:flex; flex-direction:column; gap:var(--ui-gap-sm); min-width:0; }
.ui-row{ display:flex; align-items:center; gap:var(--ui-gap-sm); flex-wrap:wrap; min-width:0; }
.ui-row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--ui-gap-sm); flex-wrap:wrap; min-width:0; }
.ui-cluster{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.ui-grid,
.module-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:var(--ui-gap);
    min-width:0;
}

.ui-col-12{ grid-column:span 12; }
.ui-col-8{ grid-column:span 8; }
.ui-col-6{ grid-column:span 6; }
.ui-col-4{ grid-column:span 4; }
.ui-col-3{ grid-column:span 3; }

/* ---------- Cards / panels ---------- */


.ui-card{ padding:20px; }
.ui-card-soft{ background:rgba(255,255,255,.04); box-shadow:none; }
.ui-card-flat{ background:rgba(255,255,255,.03); box-shadow:none; }

.ui-card-head,
.module-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.ui-kicker,
.module-kicker{
    margin:0 0 6px;
    color:var(--text-soft);
    font-size:12px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.ui-title,
.module-title{
    margin:0;
    color:var(--text);
    font-size:clamp(20px, 2vw, 28px);
    line-height:1.05;
    letter-spacing:-.03em;
}

.ui-subtitle,
.module-subtitle{
    margin:6px 0 0;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.5;
}

/* ---------- Metrics ---------- */


.ui-stat,
.metric-card{
    position:relative;
    overflow:hidden;
}

.ui-stat-value{
    display:block;
    font-size:clamp(28px, 2.2vw, 36px);
    font-weight:850;
    line-height:1;
    letter-spacing:-.04em;
}

.ui-stat-label{ margin-top:6px; color:var(--text-soft); font-size:14px; }
.ui-stat-note{ margin-top:12px; color:var(--text-muted); font-size:12px; }

/* ---------- Toolbars / filters ---------- */


.ui-toolbar .field,
.module-toolbar .field{ min-width:0; }



/* ---------- Forms ---------- */


.ui-form-grid > *,
.module-form-grid > *{ grid-column:span 6; }
.ui-form-grid .is-full,
.module-form-grid .is-full{ grid-column:1 / -1; }





.ui-help,
.field-error{ color:var(--text-muted); font-size:12px; line-height:1.4; }
.field-error{ color:#ffb4a9; }

/* ---------- Option pills ---------- */










/* ---------- Empty states ---------- */
.ui-empty,
.empty-state{
    display:grid;
    place-items:center;
    min-height:160px;
    padding:28px;
    border:1px dashed var(--stroke-strong);
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.03);
    color:var(--text-soft);
    text-align:center;
}

/* ---------- Demo / docs page ---------- */
.theme-showcase{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.theme-showcase-hero{
    padding:24px;
    border:1px solid var(--stroke);
    border-radius:28px;
    background:
        radial-gradient(500px 180px at 10% 0%, rgba(91,170,224,.18), transparent 70%),
        linear-gradient(135deg, rgba(26,111,191,.26), rgba(255,255,255,.04));
    box-shadow:var(--shadow-1);
}

.theme-showcase-code{
    display:block;
    overflow:auto;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:rgba(0,0,0,.18);
    color:var(--text-soft);
    font-size:12px;
    line-height:1.6;
}

.theme-color-swatch{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-soft);
    font-size:13px;
    font-weight:750;
}

.theme-color-swatch i{
    width:36px;
    height:36px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:var(--shadow-1);
}

.theme-map-placeholder{
    min-height:260px;
    display:grid;
    place-items:center;
    border-radius:22px;
    border:1px solid var(--stroke);
    background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(circle at 52% 46%, rgba(91,170,224,.32), transparent 5%),
        radial-gradient(circle at 38% 58%, rgba(0,153,132,.30), transparent 5%),
        rgba(255,255,255,.035);
    background-size:36px 36px, 36px 36px, auto, auto, auto;
    color:var(--text-soft);
    font-weight:800;
}

.theme-calendar-demo{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:8px;
}

.theme-calendar-demo span{
    min-height:74px;
    padding:10px;
    border-radius:16px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);
    color:var(--text-soft);
    font-size:13px;
}

.theme-calendar-demo .is-today{
    color:#fff;
    border-color:rgba(91,170,224,.38);
    background:linear-gradient(135deg, rgba(26,111,191,.38), rgba(91,170,224,.16));
}

@media (max-width: 1100px){
    
    .ui-col-8,
    .ui-col-6,
    .ui-col-4,
    .ui-col-3{ grid-column:span 12; }
}

@media (max-width: 720px){
    .ui-grid,
    .module-grid{ grid-template-columns:1fr; }
    .ui-col-12,
    .ui-col-8,
    .ui-col-6,
    .ui-col-4,
    .ui-col-3{ grid-column:1; }
    
    
    
    .ui-form-grid > *,
    .module-form-grid > *,
    .theme-calendar-demo{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* =========================================
   UI EXTENSIONS - Modales, topbar, tablas compactas,
   indicadores, mapa, calendario y multifichas.
   Reusar en todos los módulos antes de crear CSS propio.
========================================= */
:root{
    --ui-blue:#1f8fe5;
    --ui-cyan:#19aadb;
    --ui-teal:#02b8b2;
    --ui-green:#18b66a;
    --ui-orange:#f59e0b;
    --ui-red:#e83f5b;
    --ui-purple:#8b5cf6;
    --ui-surface:#101d35;
    --ui-surface-2:#172540;
    --ui-surface-3:#1e2c49;
    --ui-line:rgba(91,139,190,.28);
    --ui-line-strong:rgba(96,165,250,.42);
    --ui-muted:#9ca9bd;
}

/* Base UI compositions continue below. Removed legacy duplicated topbar/table/calendar rules. */

/* =========================================
   Sección oficial: Modales, switches y headers
   Objetivo: controles consistentes en modales compactos,
   etiquetas sin separaciones excesivas y variantes reutilizables.
========================================= */
:root{
    --ui-modal-control-h:40px;
    --ui-modal-control-px:14px;
    --ui-modal-control-py:10px;
    --ui-label-gap:7px;
    --ui-field-gap:8px;
    --ui-field-block-gap:12px;
    --ui-head-bg:linear-gradient(180deg, rgba(25,39,69,.74), rgba(18,31,56,.42));
    --ui-head-line:rgba(111,154,202,.22);
    --ui-pink:#d83bb9;
}

/* Encabezado marcado para cards normales */
.ui-card > .ui-card-head:first-child,
.module-card > .module-card-head:first-child,
.filter-card > .ui-card-head:first-child,
.calendar-card > .ui-card-head:first-child{
    margin:-20px -20px 18px;
    padding:16px 20px;
    border-bottom:1px solid var(--ui-head-line);
    border-radius:var(--ui-card-radius) var(--ui-card-radius) 0 0;
    background:var(--ui-head-bg);
}
.ui-card-head.is-plain,
.module-card-head.is-plain{
    margin-bottom:16px;
    padding:0;
    border-bottom:0;
    border-radius:0;
    background:transparent;
}

/* Switch base reutilizable */
.ui-switch,
.ui-view-switch{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px;
    border:1px solid var(--ui-line);
    border-radius:18px;
    background:rgba(255,255,255,.045);
}
.ui-switch button,
.ui-switch label,
.ui-switch .ui-switch-item,
.ui-view-switch button,
.ui-view-switch .ui-switch-item{
    --switch-color:var(--ui-blue);
    position:relative;
    min-width:82px;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border:1px solid rgba(148,163,184,.20);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    color:var(--text-soft);
    font-size:13px;
    font-weight:950;
    line-height:1;
    cursor:pointer;
}
.ui-switch button:before,
.ui-switch label:before,
.ui-switch .ui-switch-item:before,
.ui-view-switch button:before,
.ui-view-switch .ui-switch-item:before{
    content:"";
    width:13px;
    height:13px;
    border-radius:99px;
    border:2px solid color-mix(in srgb, var(--switch-color) 62%, #fff 10%);
    background:color-mix(in srgb, var(--switch-color) 18%, transparent);
}
.ui-switch .is-active,
.ui-switch input:checked + span,
.ui-view-switch .is-active,
.ui-view-switch input:checked + span{
    color:#fff;
    border-color:color-mix(in srgb, var(--switch-color) 70%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--switch-color) 82%, #0b1730), color-mix(in srgb, var(--switch-color) 42%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--switch-color) 16%, transparent);
}
.ui-switch .is-active:before,
.ui-switch input:checked + span:before,
.ui-view-switch .is-active:before,
.ui-view-switch input:checked + span:before{
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.18);
}
.ui-switch.is-gender .is-woman,
.ui-switch .is-pink{--switch-color:var(--ui-pink);}
.ui-switch.is-gender .is-man,
.ui-switch .is-blue{--switch-color:var(--ui-blue);}
.ui-switch.is-yesno .is-yes,
.ui-switch .is-green{--switch-color:var(--ui-green);}
.ui-switch.is-yesno .is-no,
.ui-switch .is-orange{--switch-color:var(--ui-orange);}
.ui-switch.is-membership .is-consejo,
.ui-switch .is-consejo{--switch-color:#a855f7;}
.ui-switch.is-membership .is-lider,
.ui-switch .is-lider{--switch-color:#22c55e;}
.ui-switch.is-membership .is-miembro,
.ui-switch .is-miembro{--switch-color:#0ea5e9;}
.ui-switch.is-membership .is-simpatizante,
.ui-switch .is-simpatizante{--switch-color:#f97316;}
.ui-switch.is-membership{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    border-radius:18px;
}
.ui-switch.is-membership label{
    min-width:0;
    width:100%;
}
.ui-switch.is-membership label span{
    width:100%;
}
@media(max-width:560px){
    .ui-switch.is-membership{grid-template-columns:1fr 1fr;}
}

.ui-view-switch .is-blocks{--switch-color:var(--ui-blue);}
.ui-view-switch .is-list{--switch-color:var(--ui-teal);}
.ui-view-switch .is-calendar{--switch-color:var(--ui-purple);}










.ui-color-buttons{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ui-color-button{
    --btn-color:var(--ui-blue);
    min-height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--btn-color) 68%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 82%, #0b1730), color-mix(in srgb, var(--btn-color) 42%, transparent));
    color:#fff;
    font-size:13px;
    font-weight:950;
    line-height:1;
    box-shadow:0 10px 22px color-mix(in srgb, var(--btn-color) 18%, transparent);
}
.ui-color-button:before{
    content:"";
    width:12px;
    height:12px;
    border-radius:99px;
    border:2px solid rgba(255,255,255,.38);
    background:rgba(255,255,255,.12);
}
.ui-color-button.is-blue{--btn-color:var(--ui-blue);}
.ui-color-button.is-green{--btn-color:var(--ui-green);}
.ui-color-button.is-orange{--btn-color:var(--ui-orange);}
.ui-color-button.is-red{--btn-color:var(--ui-red);}
.ui-color-button.is-purple{--btn-color:var(--ui-purple);}
.ui-color-button.is-muted{--btn-color:#334155;}

@media(max-width:720px){
    .ui-card > .ui-card-head:first-child,
    .module-card > .module-card-head:first-child,
    .filter-card > .ui-card-head:first-child,
    .calendar-card > .ui-card-head:first-child{
        margin:-16px -16px 16px;
        padding:14px 16px;
    }
    .ui-switch,
    .ui-view-switch{width:100%;}
    .ui-switch button,
    .ui-switch label,
    .ui-switch .ui-switch-item,
    .ui-view-switch button,
    .ui-view-switch .ui-switch-item{flex:1; min-width:0;}
}

/* =========================================================
   Sección oficial: Switches compactos, calendario y KPI variants
   ========================================================= */
.ui-switch,
.ui-view-switch{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    flex:0 0 auto;
    grid-template-columns:none;
}
.ui-switch button,
.ui-switch label,
.ui-switch .ui-switch-item,
.ui-view-switch button,
.ui-view-switch .ui-switch-item{
    flex:0 0 auto;
    white-space:nowrap;
}
.ui-switch.is-fluid,
.ui-view-switch.is-fluid{
    width:100%;
}
.ui-switch.is-fluid button,
.ui-view-switch.is-fluid button,
.ui-switch.is-fluid .ui-switch-item,
.ui-view-switch.is-fluid .ui-switch-item{
    flex:1 1 0;
}
.ui-switch .is-woman{--switch-color:var(--ui-pink);}
.ui-switch .is-man{--switch-color:var(--ui-blue);}
.ui-switch .is-yes{--switch-color:var(--ui-green);}
.ui-switch .is-no{--switch-color:var(--ui-orange);}
.ui-view-switch .ui-icon{width:15px; height:15px; display:inline-block; color:currentColor; opacity:.95;}
.ui-view-switch .ui-icon svg{display:block; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;}
.ui-view-switch .ui-icon-calendar svg rect:first-child{fill:none;}

.ui-status-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;}
.ui-status-pill{
    --status-color:var(--ui-blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--status-color) 65%, transparent);
    background:color-mix(in srgb, var(--status-color) 24%, rgba(255,255,255,.05));
    color:#fff;
    font-weight:950;
    font-size:13px;
    line-height:1;
}
.ui-status-pill.is-woman{--status-color:var(--ui-pink);}
.ui-status-pill.is-man{--status-color:var(--ui-blue);}
.ui-status-pill.is-yes{--status-color:var(--ui-green);}
.ui-status-pill.is-no{--status-color:var(--ui-orange);}
.ui-status-pill.is-muted{--status-color:#64748b; color:var(--text-soft);}

.ui-calendar-toolbar{display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
.ui-calendar-nav{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--ui-line);
    background:rgba(255,255,255,.065);
    color:#fff;
    font-weight:950;
    line-height:1;
}
.ui-calendar-nav.is-current{background:linear-gradient(135deg, rgba(31,143,229,.86), rgba(91,170,224,.54)); border-color:rgba(91,170,224,.65);}
.ui-calendar-weekdays{display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:4px; margin-bottom:4px; overflow:auto;}
.ui-calendar-weekday{
    min-width:120px;
    padding:10px 12px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:10px;
    background:rgba(255,255,255,.035);
    color:var(--text-muted);
    font-size:11px;
    font-weight:950;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-align:center;
}

.ui-kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.ui-kpi{
    --kpi-color:var(--ui-blue);
    min-height:110px;
    padding:18px;
    border-radius:18px;
    border:1px solid color-mix(in srgb, var(--kpi-color) 50%, rgba(148,163,184,.22));
    background:linear-gradient(135deg, color-mix(in srgb, var(--kpi-color) 22%, rgba(255,255,255,.04)), rgba(255,255,255,.025));
    box-shadow:inset 4px 0 0 color-mix(in srgb, var(--kpi-color) 78%, transparent);
}
.ui-kpi-label{display:block; color:var(--text-soft); font-size:13px; font-weight:900; margin-bottom:8px;}
.ui-kpi-value{display:block; color:#fff; font-size:30px; font-weight:950; letter-spacing:-.04em; line-height:1;}
.ui-kpi-note{display:block; color:var(--text-muted); font-size:12px; margin-top:8px;}
.ui-kpi.is-green{--kpi-color:var(--ui-green);}.ui-kpi.is-orange{--kpi-color:var(--ui-orange);}.ui-kpi.is-red{--kpi-color:var(--ui-red);}.ui-kpi.is-purple{--kpi-color:var(--ui-purple);}.ui-kpi.is-teal{--kpi-color:var(--ui-teal);}.ui-kpi.is-muted{--kpi-color:#64748b;}
.ui-kpi.is-compact{min-height:auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px;}
.ui-kpi.is-compact .ui-kpi-label{margin:0}.ui-kpi.is-compact .ui-kpi-value{font-size:22px;}

@media(max-width:900px){.ui-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.ui-calendar-weekdays{grid-template-columns:repeat(7,120px);}}
@media(max-width:620px){.ui-switch:not(.is-fluid),.ui-view-switch:not(.is-fluid){width:max-content;}.ui-kpi-grid{grid-template-columns:1fr;}}

/* =========================================================
   Sección oficial: KPIs base, sociedades y view switch compacto
   ========================================================= */
.ui-view-switch{
    border-radius:14px;
    padding:4px;
    gap:4px;
}
.ui-view-switch button,
.ui-view-switch .ui-switch-item{
    min-width:auto;
    min-height:34px;
    padding:0 12px;
    border-radius:10px;
}
.ui-view-switch button:before,
.ui-view-switch .ui-switch-item:before{
    display:none;
}
.ui-view-switch .is-active,
.ui-view-switch input:checked + span{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 3px color-mix(in srgb, var(--switch-color) 14%, transparent);
}
.ui-view-switch .ui-icon,
.ui-view-switch .ui-icon svg{
    width:16px;
    height:16px;
}

/* KPI principal y simple: variantes muy usadas en módulos */
.ui-kpi-grid.is-base{
    grid-template-columns:repeat(2,minmax(260px,1fr));
}
.ui-kpi-main,
.ui-kpi-simple{
    --kpi-color:var(--ui-blue);
    position:relative;
    min-height:156px;
    padding:28px 22px 20px;
    border-radius:22px;
    border:1px solid color-mix(in srgb, var(--kpi-color) 42%, rgba(148,163,184,.20));
    background:radial-gradient(circle at 0 0, color-mix(in srgb, var(--kpi-color) 30%, transparent), transparent 55%), linear-gradient(135deg, rgba(12,28,58,.94), rgba(13,26,52,.86));
    box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
    overflow:hidden;
}
.ui-kpi-main:after{
    content:"";
    position:absolute;
    inset:auto -20% -45% 35%;
    height:90px;
    background:radial-gradient(circle, color-mix(in srgb, var(--kpi-color) 22%, transparent), transparent 65%);
    pointer-events:none;
}
.ui-kpi-simple{
    min-height:128px;
    padding:22px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--kpi-color) 14%, rgba(255,255,255,.035)), rgba(255,255,255,.025));
}
.ui-kpi-main .ui-kpi-label,
.ui-kpi-simple .ui-kpi-label{
    margin:0 0 22px;
    color:var(--text-soft);
    font-size:13px;
    font-weight:950;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.ui-kpi-main .ui-kpi-value,
.ui-kpi-simple .ui-kpi-value{
    color:#fff;
    font-size:36px;
    font-weight:950;
    letter-spacing:-.05em;
    line-height:.95;
}
.ui-kpi-main .ui-kpi-note,
.ui-kpi-simple .ui-kpi-note{
    max-width:280px;
    margin-top:8px;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.18;
}
.ui-kpi-chip{
    position:absolute;
    top:20px;
    right:20px;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 13px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--kpi-color) 64%, transparent);
    background:color-mix(in srgb, var(--kpi-color) 27%, rgba(255,255,255,.06));
    color:#dff7ff;
    font-size:13px;
    font-weight:950;
    line-height:1;
}
.ui-kpi-main.is-teal,.ui-kpi-simple.is-teal{--kpi-color:var(--ui-teal);}
.ui-kpi-main.is-green,.ui-kpi-simple.is-green{--kpi-color:var(--ui-green);}
.ui-kpi-main.is-orange,.ui-kpi-simple.is-orange{--kpi-color:var(--ui-orange);}
.ui-kpi-main.is-purple,.ui-kpi-simple.is-purple{--kpi-color:var(--ui-purple);}
.ui-kpi-main.is-red,.ui-kpi-simple.is-red{--kpi-color:var(--ui-red);}
.ui-kpi-main.is-muted,.ui-kpi-simple.is-muted{--kpi-color:#64748b;}

/* Sociedades: 10 colores reutilizables para calendario, etiquetas y switches */
.ui-society-1,.ui-switch .is-society-1,.ui-color-button.is-society-1,.ui-status-pill.is-society-1,.ui-event.is-society-1{--switch-color:#22c55e;--btn-color:#22c55e;--status-color:#22c55e;--event-color:#22c55e;--kpi-color:#22c55e;}
.ui-society-2,.ui-switch .is-society-2,.ui-color-button.is-society-2,.ui-status-pill.is-society-2,.ui-event.is-society-2{--switch-color:#38bdf8;--btn-color:#38bdf8;--status-color:#38bdf8;--event-color:#38bdf8;--kpi-color:#38bdf8;}
.ui-society-3,.ui-switch .is-society-3,.ui-color-button.is-society-3,.ui-status-pill.is-society-3,.ui-event.is-society-3{--switch-color:#f59e0b;--btn-color:#f59e0b;--status-color:#f59e0b;--event-color:#f59e0b;--kpi-color:#f59e0b;}
.ui-society-4,.ui-switch .is-society-4,.ui-color-button.is-society-4,.ui-status-pill.is-society-4,.ui-event.is-society-4{--switch-color:#ef4444;--btn-color:#ef4444;--status-color:#ef4444;--event-color:#ef4444;--kpi-color:#ef4444;}
.ui-society-5,.ui-switch .is-society-5,.ui-color-button.is-society-5,.ui-status-pill.is-society-5,.ui-event.is-society-5{--switch-color:#8b5cf6;--btn-color:#8b5cf6;--status-color:#8b5cf6;--event-color:#8b5cf6;--kpi-color:#8b5cf6;}
.ui-society-6,.ui-switch .is-society-6,.ui-color-button.is-society-6,.ui-status-pill.is-society-6,.ui-event.is-society-6{--switch-color:#ec4899;--btn-color:#ec4899;--status-color:#ec4899;--event-color:#ec4899;--kpi-color:#ec4899;}
.ui-society-7,.ui-switch .is-society-7,.ui-color-button.is-society-7,.ui-status-pill.is-society-7,.ui-event.is-society-7{--switch-color:#14b8a6;--btn-color:#14b8a6;--status-color:#14b8a6;--event-color:#14b8a6;--kpi-color:#14b8a6;}
.ui-society-8,.ui-switch .is-society-8,.ui-color-button.is-society-8,.ui-status-pill.is-society-8,.ui-event.is-society-8{--switch-color:#a3e635;--btn-color:#a3e635;--status-color:#a3e635;--event-color:#a3e635;--kpi-color:#a3e635;}
.ui-society-9,.ui-switch .is-society-9,.ui-color-button.is-society-9,.ui-status-pill.is-society-9,.ui-event.is-society-9{--switch-color:#fb7185;--btn-color:#fb7185;--status-color:#fb7185;--event-color:#fb7185;--kpi-color:#fb7185;}
.ui-society-10,.ui-switch .is-society-10,.ui-color-button.is-society-10,.ui-status-pill.is-society-10,.ui-event.is-society-10{--switch-color:#94a3b8;--btn-color:#94a3b8;--status-color:#94a3b8;--event-color:#94a3b8;--kpi-color:#94a3b8;}
.ui-society-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.ui-switch.is-societies{flex-wrap:wrap; border-radius:16px;}
.ui-switch.is-societies button{min-width:92px; border-radius:10px;}

@media(max-width:900px){.ui-kpi-grid.is-base{grid-template-columns:1fr;}}
.ui-event[class*="is-society-"]{--event:var(--event-color);}

/* =========================================================
   Sección oficial: Indicadores, switches cuadrados, tablas y departamentos
   ========================================================= */

/* Indicadores: renglones mas controlados para textos de dos líneas */
.ui-indicator{
    min-height:96px;
    padding:14px 16px 14px 18px;
}
.ui-indicator-title{
    margin-bottom:7px;
    line-height:1.15;
}
.ui-indicator-value{
    font-size:17px;
    line-height:1.12;
    letter-spacing:-.015em;
}
.ui-indicator-value br{
    display:block;
    content:"";
    margin:0;
}

/* Switches: forma mas cuadrada y consistente con el switch de vistas */
.ui-switch{
    border-radius:14px;
    padding:4px;
    gap:4px;
}

.ui-switch button:before,
.ui-switch label:before,
.ui-switch .ui-switch-item:before{
    width:12px;
    height:12px;
}
.ui-switch.is-societies button{
    min-width:auto;
    border-radius:10px;
}

/* Tabla: area interna alineada con titulo, buscador y columnas ocultas */
.ui-table-card{
    --table-pad-x:20px;
}
.ui-table-card .ui-modal-body{
    padding:22px var(--table-pad-x) 12px;
}
.ui-table-card .ui-table-scroll{
    margin:0 var(--table-pad-x) var(--table-pad-x);
    border:1px solid rgba(96,165,250,.15);
    border-radius:16px;
    background:rgba(8,19,40,.24);
}
.ui-table-card .ui-table{
    min-width:760px;
}
.ui-table-card .ui-table th:first-child,
.ui-table-card .ui-table td:first-child{
    padding-left:18px;
}
.ui-table-card .ui-table th:last-child,
.ui-table-card .ui-table td:last-child{
    padding-right:18px;
}
.ui-hidden-columns{
    width:100%;
}

/* Departamentos: 10 colores distintos a sociedades */
.ui-dept-1,.ui-switch .is-dept-1,.ui-color-button.is-dept-1,.ui-status-pill.is-dept-1,.ui-event.is-dept-1{--switch-color:#06b6d4;--btn-color:#06b6d4;--status-color:#06b6d4;--event-color:#06b6d4;--kpi-color:#06b6d4;}
.ui-dept-2,.ui-switch .is-dept-2,.ui-color-button.is-dept-2,.ui-status-pill.is-dept-2,.ui-event.is-dept-2{--switch-color:#6366f1;--btn-color:#6366f1;--status-color:#6366f1;--event-color:#6366f1;--kpi-color:#6366f1;}
.ui-dept-3,.ui-switch .is-dept-3,.ui-color-button.is-dept-3,.ui-status-pill.is-dept-3,.ui-event.is-dept-3{--switch-color:#d946ef;--btn-color:#d946ef;--status-color:#d946ef;--event-color:#d946ef;--kpi-color:#d946ef;}
.ui-dept-4,.ui-switch .is-dept-4,.ui-color-button.is-dept-4,.ui-status-pill.is-dept-4,.ui-event.is-dept-4{--switch-color:#f97316;--btn-color:#f97316;--status-color:#f97316;--event-color:#f97316;--kpi-color:#f97316;}
.ui-dept-5,.ui-switch .is-dept-5,.ui-color-button.is-dept-5,.ui-status-pill.is-dept-5,.ui-event.is-dept-5{--switch-color:#84cc16;--btn-color:#84cc16;--status-color:#84cc16;--event-color:#84cc16;--kpi-color:#84cc16;}
.ui-dept-6,.ui-switch .is-dept-6,.ui-color-button.is-dept-6,.ui-status-pill.is-dept-6,.ui-event.is-dept-6{--switch-color:#0ea5e9;--btn-color:#0ea5e9;--status-color:#0ea5e9;--event-color:#0ea5e9;--kpi-color:#0ea5e9;}
.ui-dept-7,.ui-switch .is-dept-7,.ui-color-button.is-dept-7,.ui-status-pill.is-dept-7,.ui-event.is-dept-7{--switch-color:#eab308;--btn-color:#eab308;--status-color:#eab308;--event-color:#eab308;--kpi-color:#eab308;}
.ui-dept-8,.ui-switch .is-dept-8,.ui-color-button.is-dept-8,.ui-status-pill.is-dept-8,.ui-event.is-dept-8{--switch-color:#10b981;--btn-color:#10b981;--status-color:#10b981;--event-color:#10b981;--kpi-color:#10b981;}
.ui-dept-9,.ui-switch .is-dept-9,.ui-color-button.is-dept-9,.ui-status-pill.is-dept-9,.ui-event.is-dept-9{--switch-color:#f43f5e;--btn-color:#f43f5e;--status-color:#f43f5e;--event-color:#f43f5e;--kpi-color:#f43f5e;}
.ui-dept-10,.ui-switch .is-dept-10,.ui-color-button.is-dept-10,.ui-status-pill.is-dept-10,.ui-event.is-dept-10{--switch-color:#a855f7;--btn-color:#a855f7;--status-color:#a855f7;--event-color:#a855f7;--kpi-color:#a855f7;}
.ui-dept-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.ui-switch.is-departments{flex-wrap:wrap; border-radius:14px;}
.ui-switch.is-departments button{min-width:auto; border-radius:10px;}

/* Censo: sociedades Femenil = Mujer, Varonil = Hombre */
.ui-society-4,.ui-switch .is-society-4,.ui-color-button.is-society-4,.ui-status-pill.is-society-4,.ui-event.is-society-4{--switch-color:var(--ui-pink);--btn-color:var(--ui-pink);--status-color:var(--ui-pink);--event-color:var(--ui-pink);--kpi-color:var(--ui-pink);}
.ui-society-5,.ui-switch .is-society-5,.ui-color-button.is-society-5,.ui-status-pill.is-society-5,.ui-event.is-society-5{--switch-color:var(--ui-blue);--btn-color:var(--ui-blue);--status-color:var(--ui-blue);--event-color:var(--ui-blue);--kpi-color:var(--ui-blue);}

@media(max-width:620px){
    .ui-table-card{--table-pad-x:14px;}
}















/* =========================================================
   Sección oficial: Estado transparente, switches cuadrados y cards
   ========================================================= */

/* Cards con encabezado: las esquinas se recortan dentro del radio real */
.ui-card,
.module-card,
.filter-card,
.calendar-card,
.ui-table-card,
.metric-card{
    overflow:hidden;
}

/* Switches principales: misma geometria cuadrada/redondeada del switch de vistas */
.ui-switch,
.ui-view-switch{
    border-radius:14px;
    padding:4px;
    gap:4px;
}
.ui-switch button,
.ui-switch label,
.ui-switch .ui-switch-item,
.ui-view-switch button,
.ui-view-switch .ui-switch-item{
    min-height:34px;
    border-radius:10px;
    padding:0 12px;
}

/* Los switch de grupos/sociedades/departamentos conservan la misma forma */
.ui-switch.is-gender button,
.ui-switch.is-gender label,
.ui-switch.is-gender .ui-switch-item,
.ui-switch.is-yesno button,
.ui-switch.is-yesno label,
.ui-switch.is-yesno .ui-switch-item,
.ui-switch.is-societies button,
.ui-switch.is-departments button{
    border-radius:10px;
}

/* Indicadores de estado: transparentes por defecto, sin relleno pesado */
.ui-status-pill{
    background:color-mix(in srgb, var(--status-color) 10%, transparent);
    color:color-mix(in srgb, var(--status-color) 78%, #ffffff);
    border-color:color-mix(in srgb, var(--status-color) 64%, transparent);
    box-shadow:none;
}
.ui-status-pill.is-muted{
    color:var(--text-soft);
    background:rgba(148,163,184,.08);
    border-color:rgba(148,163,184,.28);
}

/* =========================================
   Standard module table section
   Patrón base para módulos con head, filtros, columnas y tabla.
   Debe usarse desde page.php como referencia visual global.
========================================= */
.ui-module-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.ui-table-filters{
    margin:18px var(--table-pad-x, 20px) 14px;
    padding:14px 16px;
    border:1px solid var(--ui-line);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(31,48,79,.68), rgba(19,34,61,.52));
}

.ui-table-filter-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    align-items:end;
}

.ui-table-filter-grid.dos-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.ui-table-filter-grid.tres-cols{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ui-table-filter-grid.cuatro-cols{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ui-table-filter-grid.cinco-cols{ grid-template-columns:repeat(5, minmax(0, 1fr)); }

.ui-table-filters .ui-field{
    gap:6px;
}

.ui-table-filters .ui-field label{
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
}

.ui-table-filters .ui-field input,
.ui-table-filters .ui-field select{
    width:100%;
    min-height:42px;
    padding:9px 14px;
    border-radius:14px;
    border:1px solid var(--ui-line);
    background:rgba(7,16,35,.48);
    color:var(--text);
    font-weight:750;
    outline:none;
}

.ui-table-card > .ui-hidden-columns{
    margin:0 var(--table-pad-x, 20px) 14px;
}

.ui-hidden-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.ui-column-toggle{
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(56,189,248,.32);
    background:rgba(14,165,233,.12);
    color:#bdeafe;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

@media (max-width: 1100px){
    .ui-table-filter-grid.cinco-cols{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px){
    .ui-module-head{ grid-template-columns:1fr; }
    .ui-module-actions{ justify-content:flex-start; }
    .ui-table-filter-grid,
    .ui-table-filter-grid.dos-cols,
    .ui-table-filter-grid.tres-cols,
    .ui-table-filter-grid.cuatro-cols,
    .ui-table-filter-grid.cinco-cols{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px){
    .ui-table-filter-grid,
    .ui-table-filter-grid.dos-cols,
    .ui-table-filter-grid.tres-cols,
    .ui-table-filter-grid.cuatro-cols,
    .ui-table-filter-grid.cinco-cols{ grid-template-columns:1fr; }
    .ui-hidden-actions{ justify-content:flex-start; }
}


/* =========================================================
   Sección oficial: Composición oficial de secciones con tabla
   ---------------------------------------------------------
   Estructura obligatoria:
   .ui-table-card
     .ui-module-head      -> título/subtítulo, buscador y acciones
     .ui-module-body      -> filtros, columnas ocultas y tabla

   Regla: el padding vive en .ui-module-body. Los bloques internos no
   agregan margenes laterales propios. La tabla no lleva card, borde ni
   background; solo líneas de filas. No crear estilos de tabla por módulo.
   ========================================================= */
.ui-table-card{
    --table-pad-x:22px;
    --table-pad-y:16px;
    overflow:hidden;
    border:1px solid var(--ui-line);
    border-radius:22px;
    background:rgba(12,27,53,.70);
}

.ui-module-head{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(240px,420px) auto;
    align-items:center;
    gap:14px;
    padding:18px var(--table-pad-x);
    border-bottom:1px solid var(--ui-line);
    border-radius:22px 22px 0 0;
    background:linear-gradient(180deg, rgba(24,40,70,.52), rgba(18,31,56,.26));
}

.ui-module-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:clamp(18px,2vw,24px);
    min-width:0;
}

.ui-module-body > *{
    margin:0;
}

.ui-table-filters{
    margin:0;
    padding:14px 16px;
    border:1px solid var(--ui-line);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(31,48,79,.68), rgba(19,34,61,.52));
}

.ui-table-card > .ui-table-filters,
.ui-table-card > .ui-hidden-columns,
.ui-table-card > .ui-table-scroll{
    margin-left:var(--table-pad-x);
    margin-right:var(--table-pad-x);
}

.ui-table-card > .ui-table-filters:first-child,
.ui-table-card > .ui-hidden-columns:first-child,
.ui-table-card > .ui-table-scroll:first-child{
    margin-top:var(--table-pad-y);
}

.ui-table-card > .ui-table-scroll:last-child,
.ui-table-card > .ui-hidden-columns:last-child,
.ui-table-card > .ui-table-filters:last-child{
    margin-bottom:var(--table-pad-x);
}

.ui-module-body .ui-table-filters,
.ui-module-body .ui-hidden-columns,
.ui-module-body .ui-table-scroll{
    margin:0;
}

.ui-hidden-columns{
    width:100%;
    padding:14px 16px;
    border:1px dashed rgba(134,153,181,.35);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.ui-table-card .ui-table-scroll{
    overflow:auto;
    border:0;
    border-radius:0;
    background:transparent;
}

.ui-table-card .ui-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    background:transparent;
}

.ui-table-card .ui-table th,
.ui-table-card .ui-table td{
    border-bottom:1px solid rgba(96,165,250,.15);
    background:transparent;
}

.ui-table-card .ui-table tr:hover td{
    background:rgba(255,255,255,.025);
}

.ui-table-card .ui-table th:first-child,
.ui-table-card .ui-table td:first-child{
    padding-left:0;
}

.ui-table-card .ui-table th:last-child,
.ui-table-card .ui-table td:last-child{
    padding-right:0;
}

.ui-table-card .ui-table th,
.ui-table-card .ui-table td{
    padding-left:12px;
    padding-right:12px;
}

.ui-table-card .ui-table.is-compact th,
.ui-table-card .ui-table.is-compact td{
    padding-top:13px;
    padding-bottom:13px;
}

@media (max-width: 900px){
    .ui-module-head{ grid-template-columns:1fr; }
    .ui-module-actions{ justify-content:flex-start; }
}

@media (max-width: 620px){
    .ui-table-card{
        --table-pad-x:14px;
        --table-pad-y:14px;
    }
    .ui-module-head{ padding:16px var(--table-pad-x); }
}


/* Estados genéricos reutilizables por módulos AJAX */
.ui-table tbody.is-loading{ opacity:.55; }
.ui-table tr.is-saving{ opacity:.65; }
.ui-table tr.is-saving select{ cursor:wait; }
.ui-table select:disabled{ opacity:.58; cursor:not-allowed; }
.ui-table tr.is-inactive td:first-child{ opacity:.72; }
.ui-table select{
    width:100%;
    min-height:38px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid var(--ui-line);
    background:rgba(255,255,255,.04);
    color:var(--text);
    outline:none;
}
html.modal-is-open{ overflow:hidden; }


/* =========================================================
   Sección oficial: Secciones oficiales y tablas construidas con DIV
   ---------------------------------------------------------
   Regla del theme:
   - Todas las secciones tipo módulo usan .ui-table-card.
   - .ui-module-head contiene título/subtítulo, buscador y acciones.
   - .ui-module-body contiene filtros, columnas ocultas y tabla.
   - El padding lateral vive SOLO en .ui-module-body.
   - Las tablas se construyen con DIV, no con <table>, <th> ni <td>.
   ========================================================= */
.ui-table-card{
    --table-pad-x:22px;
    --table-pad-y:16px;
    overflow:hidden;
    border:1px solid var(--ui-line);
    border-radius:22px;
    background:rgba(12,27,53,.70);
}

.ui-module-head{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(260px,420px) auto;
    align-items:center;
    gap:14px;
    padding:18px var(--table-pad-x);
    border-bottom:1px solid var(--ui-line);
    background:linear-gradient(180deg, rgba(24,40,70,.52), rgba(18,31,56,.26));
}

.ui-module-title{margin:0;color:var(--text);font-size:clamp(18px,1.8vw,24px);line-height:1.08;letter-spacing:-.03em;}
.ui-module-subtitle{margin:4px 0 0;color:var(--text-soft);font-size:13px;line-height:1.35;}

.ui-module-body{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    padding:var(--table-pad-y) var(--table-pad-x) var(--table-pad-x);
}
.ui-module-body > *{margin:0;}

.ui-module-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.ui-module-head .ui-search{width:100%;min-width:0;}

.ui-table-filters{
    margin:0 !important;
    padding:14px 16px;
    border:1px solid var(--ui-line);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(31,48,79,.68), rgba(19,34,61,.52));
}

.ui-table-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end;}
.ui-table-filter-grid.dos-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
.ui-table-filter-grid.tres-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
.ui-table-filter-grid.cuatro-cols{grid-template-columns:repeat(4,minmax(0,1fr));}
.ui-table-filter-grid.cinco-cols{grid-template-columns:repeat(5,minmax(0,1fr));}

.ui-table-filters .ui-field{gap:6px;}
.ui-table-filters .ui-field label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.ui-table-filters .ui-field input,.ui-table-filters .ui-field select{width:100%;min-height:42px;padding:9px 14px;border-radius:14px;border:1px solid var(--ui-line);background:rgba(7,16,35,.48);color:var(--text);font-weight:750;outline:none;}

.ui-hidden-columns{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    border:1px dashed rgba(134,153,181,.35);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}
.ui-hidden-title{margin:0 0 4px;color:var(--text);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.ui-hidden-help{margin:0;color:var(--text-muted);font-size:12px;line-height:1.35;}
.ui-hidden-status{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(56,189,248,.32);background:rgba(14,165,233,.12);color:#bdeafe;font-size:12px;font-weight:900;white-space:nowrap;}
.ui-hidden-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.ui-column-toggle{min-height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(56,189,248,.32);background:rgba(14,165,233,.12);color:#bdeafe;font-size:12px;font-weight:900;cursor:pointer;}

.ui-table-card .ui-table-scroll{
    width:100%;
    overflow:auto;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
}

/* =========================================================
   Tabla oficial con DIV: base visual compartida por módulos
   ========================================================= */
.ui-div-table{
    --ui-table-row-gap:12px;
    --ui-table-row-x:0;
    --ui-table-row-y:14px;
    --ui-table-head-y:12px;
    --ui-table-line:rgba(96,165,250,.15);
    --ui-table-hover:rgba(255,255,255,.025);
    width:100%;
    min-width:760px;
    background:transparent;
}
.ui-div-table .ui-div-row{
    display:grid;
    gap:var(--ui-table-row-gap);
    align-items:center;
    border-bottom:1px solid var(--ui-table-line);
}
.ui-div-table .ui-div-thead .ui-div-row{
    padding:var(--ui-table-head-y) var(--ui-table-row-x);
}
.ui-div-table .ui-div-tbody .ui-div-row{
    padding:var(--ui-table-row-y) var(--ui-table-row-x);
    transition:background var(--transition),border-color var(--transition);
}
.ui-div-table .ui-div-tbody .ui-div-row:hover{
    background:var(--ui-table-hover);
}
.ui-div-table .ui-div-cell{
    min-width:0;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.4;
    word-break:break-word;
}
.ui-div-table .ui-div-cell strong{
    display:block;
    color:var(--text);
    font-weight:850;
}
.ui-div-table .ui-div-cell small{
    display:block;
    margin-top:3px;
    color:var(--text-muted);
    line-height:1.35;
}
.ui-div-table .ui-div-thead .ui-div-cell{
    color:var(--text-muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
}
.ui-div-table .ui-div-row-empty{
    display:block;
    border-bottom:1px solid var(--ui-table-line);
}
.ui-div-table .ui-div-cell-empty{
    padding:18px 0;
    color:var(--text);
    font-weight:800;
}
.ui-div-table .ui-div-cell[data-label="Acciones"],
.ui-div-table .ui-div-cell[data-label="Editar"],
.ui-div-table .ui-div-cell[data-label="Guardado"]{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.ui-table-actions,
.table-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}
.ui-table-actions,.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}

.ui-div-table-registros .ui-div-row{grid-template-columns:1.5fr .95fr 1.1fr .65fr .95fr 1fr 1.1fr .9fr;}
.ui-div-table-summary{min-width:0;}
.ui-div-table-summary .ui-div-row{grid-template-columns:1fr auto;}

.ui-div-table select{width:100%;min-height:38px;padding:8px 12px;border-radius:12px;border:1px solid var(--ui-line);background:rgba(255,255,255,.04);color:var(--text);outline:none;}
.ui-div-table .ui-div-row.is-saving{opacity:.65;}
.ui-div-table .ui-div-row.is-saving select{cursor:wait;}
.ui-div-table .ui-div-row.is-inactive .ui-div-cell:first-child{opacity:.72;}
.ui-div-tbody.is-loading{opacity:.55;}

.ui-modal-backdrop.is-demo{position:relative;inset:auto;display:block;min-height:0;padding:18px;border:1px dashed rgba(134,153,181,.35);border-radius:18px;background:rgba(255,255,255,.025);}
.ui-modal-backdrop.is-demo .ui-modal{margin:0 auto;}

@media (max-width:1100px){
    .ui-table-filter-grid.cinco-cols{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
    .ui-module-head{grid-template-columns:1fr;}
    .ui-module-actions{justify-content:flex-start;}
    .ui-table-filter-grid,.ui-table-filter-grid.dos-cols,.ui-table-filter-grid.tres-cols,.ui-table-filter-grid.cuatro-cols,.ui-table-filter-grid.cinco-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
    .ui-hidden-columns{align-items:flex-start;flex-direction:column;}
    .ui-hidden-actions{justify-content:flex-start;}
    .ui-div-table{min-width:100%;}
    .ui-div-table .ui-div-thead{display:none;}
    .ui-div-table .ui-div-tbody{display:flex;flex-direction:column;gap:12px;}
    .ui-div-table .ui-div-tbody .ui-div-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.04);}
    .ui-div-table .ui-div-cell{display:flex;flex-direction:column;gap:4px;font-size:13px;}
    .ui-div-table .ui-div-cell::before{content:attr(data-label);display:block;color:var(--text-muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;}
    .ui-div-table .ui-div-cell[data-label="Acciones"],
    .ui-div-table .ui-div-cell[data-label="Editar"],
    .ui-div-table .ui-div-cell[data-label="Guardado"]{justify-content:flex-start;align-items:flex-start;}
    .ui-table-actions,.table-actions{justify-content:flex-start;}
}
@media (max-width:620px){
    .ui-table-card{--table-pad-x:14px;--table-pad-y:14px;}
    .ui-module-head{padding:16px var(--table-pad-x);}
    .ui-table-filter-grid,.ui-table-filter-grid.dos-cols,.ui-table-filter-grid.tres-cols,.ui-table-filter-grid.cuatro-cols,.ui-table-filter-grid.cinco-cols{grid-template-columns:1fr;}
    .ui-div-table .ui-div-tbody .ui-div-row{grid-template-columns:1fr;}
}

/* =========================================================
   Sección oficial: Cards internas, calendario y composición limpia
   ---------------------------------------------------------
   - Las cards dentro de una sección NO usan cabeza de sección.
   - La cabeza marcada pertenece solo a .ui-module-head.
   - El calendario mantiene radios uniformes sin cortes en extremos.
   ========================================================= */
.ui-module-body .ui-card,
.ui-module-body .ui-content-card{
    padding:18px;
    border-radius:20px;
    border:1px solid var(--ui-line);
    background:linear-gradient(135deg, rgba(31,47,79,.72), rgba(20,34,59,.58));
    box-shadow:none;
    overflow:hidden;
}

.ui-module-body .ui-card > .ui-card-head:first-child,
.ui-module-body .module-card > .module-card-head:first-child,
.ui-card-inline-head{
    margin:0 0 14px;
    padding:0 0 14px;
    border:0;
    border-bottom:1px solid var(--ui-line);
    border-radius:0;
    background:transparent;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.ui-module-body .ui-card > .ui-card-head:first-child::before,
.ui-module-body .module-card > .module-card-head:first-child::before,
.ui-card-inline-head::before{
    content:none;
}

.ui-module-body .ui-card .ui-title,
.ui-card-inline-head .ui-title{
    margin:0;
    color:var(--text);
}

.ui-calendar-weekdays,
.calendar-weekdays,
.ui-calendar,
.calendar-grid{
    gap:6px;
    padding:0;
    overflow:visible;
}

.ui-calendar-weekday,
.calendar-weekdays span,
.ui-day,
.calendar-day{
    border-radius:10px;
    overflow:hidden;
    clip-path:none;
}

.ui-day,
.calendar-day{
    min-width:0;
    box-sizing:border-box;
}

.ui-day.is-today,
.calendar-day.is-today{
    box-shadow:inset 0 0 0 1px rgba(225,29,116,.18);
}

@media (max-width:900px){
    .ui-calendar-weekdays,
    .calendar-weekdays,
    .ui-calendar,
    .calendar-grid{
        overflow:auto;
        padding-bottom:4px;
    }
}


/* =========================================================
   Sección oficial: Buscador, status pills, multifichas y KPIs neutros
   ---------------------------------------------------------
   Componentes globales reutilizables. No pertenecen a un módulo.
   ========================================================= */
.ui-search{
    width:100%;
    min-height:38px;
    padding:9px 14px 9px 42px;
    border-radius:14px;
    border:1px solid rgba(96,165,250,.24);
    background-color:rgba(10,22,43,.58);
    background-repeat:no-repeat;
    background-position:14px 50%;
    background-size:17px 17px;
    color:var(--text);
    font-weight:750;
    outline:none;
    transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ui-search::placeholder{color:rgba(188,202,222,.68);font-weight:650;}
.ui-search:hover{border-color:rgba(56,189,248,.36);background-color:rgba(12,27,53,.72);}
.ui-search:focus{border-color:rgba(56,189,248,.68);box-shadow:0 0 0 3px rgba(56,189,248,.13);background-color:rgba(10,22,43,.84);}

.status-pill,
.ui-status-pill{
    --status-color:var(--ui-blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:28px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--status-color) 58%, transparent);
    background:color-mix(in srgb, var(--status-color) 12%, transparent);
    color:color-mix(in srgb, var(--status-color) 78%, #ffffff);
    font-size:12px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
    box-shadow:none;
}
.status-pill:before,
.ui-status-pill:before{
    content:"";
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:999px;
    background:currentColor;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--status-color) 16%, transparent);
}
.status-pill.is-active,.ui-status-pill.is-active,.status-pill.is-success,.ui-status-pill.is-success{--status-color:var(--ui-green);}
.status-pill.is-inactive,.ui-status-pill.is-inactive,.status-pill.is-warning,.ui-status-pill.is-warning{--status-color:var(--ui-orange);}
.status-pill.is-danger,.ui-status-pill.is-danger{--status-color:var(--ui-red);}
.status-pill.is-info,.ui-status-pill.is-info{--status-color:var(--ui-blue);}
.status-pill.is-pink,.ui-status-pill.is-pink{--status-color:var(--ui-pink);}
.status-pill.is-muted,.ui-status-pill.is-muted,.status-pill.is-empty,.ui-status-pill.is-empty{--status-color:#64748b;color:var(--text-soft);background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.28);}
.status-pill.is-platform,.ui-status-pill.is-platform{--status-color:var(--ui-red);}
.status-pill.is-church,.ui-status-pill.is-church{--status-color:var(--ui-green);}
.status-pill.is-yes,.ui-status-pill.is-yes{--status-color:var(--ui-green);}
.status-pill.is-no,.ui-status-pill.is-no{--status-color:var(--ui-orange);}
.status-pill.is-consejo,.ui-status-pill.is-consejo{--status-color:#a855f7;}
.status-pill.is-lider,.ui-status-pill.is-lider{--status-color:#22c55e;}
.status-pill.is-miembro,.ui-status-pill.is-miembro{--status-color:#0ea5e9;}
.status-pill.is-simpatizante,.ui-status-pill.is-simpatizante{--status-color:#f97316;}
.status-pill.is-woman,.ui-status-pill.is-woman{--status-color:var(--ui-pink);}
.status-pill.is-man,.ui-status-pill.is-man{--status-color:var(--ui-blue);}

.ui-indicator-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(132px,1fr));
    gap:10px;
}
.ui-indicator{
    --indicator-color:var(--ui-blue);
    min-height:64px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid color-mix(in srgb, var(--indicator-color) 72%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--indicator-color) 18%, rgba(13,28,54,.92)), rgba(255,255,255,.025));
    box-shadow:inset 3px 0 0 color-mix(in srgb, var(--indicator-color) 68%, transparent);
}
.ui-indicator-title{
    display:block;
    margin:0 0 6px;
    color:#dbeafe;
    font-size:12px;
    font-weight:950;
    line-height:1.05;
}
.ui-indicator-value{
    display:block;
    color:#fff;
    font-size:12px;
    font-weight:950;
    line-height:1.22;
    letter-spacing:-.01em;
}
.ui-indicator-value br{display:block;content:"";margin:0;}
.ui-indicator.is-green{--indicator-color:var(--ui-green);}
.ui-indicator.is-orange{--indicator-color:var(--ui-orange);}
.ui-indicator.is-red{--indicator-color:var(--ui-red);}
.ui-indicator.is-purple{--indicator-color:var(--ui-purple);}
.ui-indicator.is-teal{--indicator-color:var(--ui-teal);}
.ui-indicator.is-muted{--indicator-color:#64748b;}

.ui-map-tag{
    --tag-color:var(--ui-blue);
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:20px;
    padding:0 9px;
    border:1px solid color-mix(in srgb, var(--tag-color) 64%, transparent);
    border-radius:999px;
    background:color-mix(in srgb, var(--tag-color) 14%, transparent);
    color:color-mix(in srgb, var(--tag-color) 78%, #fff);
    font-size:11px;
    font-weight:950;
    line-height:1;
}
.ui-map-tag:before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor;}
.ui-map-tag.is-blue{--tag-color:var(--ui-blue);}.ui-map-tag.is-green{--tag-color:var(--ui-green);}.ui-map-tag.is-orange{--tag-color:var(--ui-orange);}.ui-map-tag.is-red{--tag-color:var(--ui-red);}.ui-map-tag.is-purple{--tag-color:var(--ui-purple);}.ui-map-tag.is-muted{--tag-color:#64748b;color:var(--text-soft);}

.ui-record-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 28px;
    padding-top:2px;
}
.ui-record-grid span{
    min-width:0;
    color:var(--text);
    font-size:12px;
    line-height:1.28;
    white-space:normal;
}
.ui-record-grid span:empty,
.ui-record-grid .is-muted{color:var(--text-muted);}

.ui-kpi-grid.is-neutral{grid-template-columns:repeat(4,minmax(0,1fr));}
.ui-kpi-neutral,
.ui-kpi-neutral-secondary{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(96,165,250,.22);
    background:linear-gradient(135deg, rgba(10,14,22,.92), rgba(8,11,18,.82));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ui-kpi-neutral{
    min-height:150px;
    padding:24px 20px 18px;
    border-radius:22px;
}
.ui-kpi-neutral-secondary{
    min-height:132px;
    padding:20px;
    border-radius:20px;
}
.ui-kpi-neutral .ui-kpi-chip,
.ui-kpi-neutral-secondary .ui-kpi-chip{
    position:absolute;
    top:18px;
    right:18px;
    min-height:30px;
    border-color:rgba(148,163,184,.28);
    background:rgba(148,163,184,.13);
    color:#d8e3f4;
}
.ui-kpi-neutral .ui-kpi-label,
.ui-kpi-neutral-secondary .ui-kpi-label{
    display:block;
    margin:0 0 20px;
    color:var(--text-soft);
    font-size:12px;
    font-weight:950;
    line-height:1.1;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.ui-kpi-neutral .ui-kpi-value,
.ui-kpi-neutral-secondary .ui-kpi-value{
    display:block;
    color:#fff;
    font-size:30px;
    font-weight:950;
    letter-spacing:-.045em;
    line-height:.98;
}
.ui-kpi-neutral .ui-kpi-note,
.ui-kpi-neutral-secondary .ui-kpi-note{
    display:block;
    max-width:270px;
    margin-top:7px;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.18;
}
.ui-kpi-neutral-secondary .ui-kpi-value{font-size:28px;}

@media(max-width:1100px){.ui-indicator-grid,.ui-kpi-grid.is-neutral{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:900px){.ui-indicator-grid,.ui-kpi-grid.is-neutral{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.ui-indicator-grid,.ui-kpi-grid.is-neutral,.ui-record-grid{grid-template-columns:1fr;}}


/* =========================================================
   Sección oficial: Buscadores, status y acciones de tabla
   ========================================================= */
.ui-search{
    min-height:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
}
.ui-module-head .ui-search,
.ui-card-head .ui-search{
    min-height:42px;
    height:42px;
}

/* En tablas los status no llevan bullet para ahorrar espacio horizontal. */
.ui-table .status-pill::before,
.ui-table .ui-status-pill::before,
.ui-div-table .status-pill::before,
.ui-div-table .ui-status-pill::before{
    display:none;
}
.ui-table .status-pill,
.ui-table .ui-status-pill,
.ui-div-table .status-pill,
.ui-div-table .ui-status-pill{
    gap:0;
    padding-inline:12px;
}

/* Botón destructivo reutilizable en tablas. */
.ui-table-actions .btn-danger,
.table-actions .btn-danger{
    color:#ffe1db;
    border-color:rgba(239,68,68,.40);
    background:rgba(239,68,68,.16);
}
.ui-table-actions .btn-danger:hover,
.table-actions .btn-danger:hover{
    border-color:rgba(239,68,68,.58);
    background:rgba(239,68,68,.24);
}

/* Badges de pastorales usados dentro de tablas de censo. */
.censo-table-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}
.censo-table-tags .ui-status-pill{
    min-height:26px;
    font-size:12px;
}
.ui-color-button.is-gray{--btn-color:#64748b;}
.status-pill.is-blue,.ui-status-pill.is-blue{--status-color:var(--ui-blue);}
.status-pill.is-green,.ui-status-pill.is-green{--status-color:var(--ui-green);}
.status-pill.is-orange,.ui-status-pill.is-orange{--status-color:var(--ui-orange);}
.status-pill.is-purple,.ui-status-pill.is-purple{--status-color:var(--ui-purple);}
.status-pill.is-gray,.ui-status-pill.is-gray{--status-color:#64748b;}


/* =========================================================
   Sección oficial: Switch unico del theme
   =========================================================
   Todo switch binario debe renderizar igual que los ejemplos oficiales
   de page.php. Activo/Inactivo reutiliza la variante is-yesno; solo cambia
   el texto, no la forma, espaciado, borde, radio ni bullets.
*/
.ui-switch label{
    min-width:0;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    box-shadow:none;
}
.ui-switch label:before{display:none;}
.ui-switch label > input{
    position:absolute;
    width:1px !important;
    min-width:1px !important;
    height:1px !important;
    min-height:1px !important;
    padding:0 !important;
    margin:0 !important;
    opacity:0;
    pointer-events:none;
}
.ui-switch label > span{
    --switch-color:var(--ui-blue);
    position:relative;
    min-width:82px;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border:1px solid rgba(148,163,184,.20);
    border-radius:10px;
    background:rgba(255,255,255,.045);
    color:var(--text-soft);
    font-size:13px;
    font-weight:950;
    line-height:1;
    cursor:pointer;
}
.ui-switch label > span:before{
    content:"";
    width:13px;
    height:13px;
    border-radius:99px;
    border:2px solid color-mix(in srgb, var(--switch-color) 62%, #fff 10%);
    background:color-mix(in srgb, var(--switch-color) 18%, transparent);
}
.ui-switch input:checked + span,
.ui-switch label > span.is-active{
    color:#fff;
    border-color:color-mix(in srgb, var(--switch-color) 70%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--switch-color) 82%, #0b1730), color-mix(in srgb, var(--switch-color) 42%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--switch-color) 16%, transparent);
}
.ui-switch input:checked + span:before,
.ui-switch label > span.is-active:before{
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.18);
}
.ui-switch.is-gender label > .is-woman{--switch-color:var(--ui-pink);}
.ui-switch.is-gender label > .is-man{--switch-color:var(--ui-blue);}
.ui-switch.is-yesno label > .is-yes{--switch-color:var(--ui-green);}
.ui-switch.is-yesno label > .is-no{--switch-color:var(--ui-orange);}
.ui-switch .js-status-switch-proxy:checked + span{color:var(--text-soft);background:rgba(255,255,255,.045);box-shadow:none;}
.ui-switch .js-status-switch-proxy:checked + span:before{border-color:color-mix(in srgb, var(--switch-color) 62%, #fff 10%);background:color-mix(in srgb, var(--switch-color) 18%, transparent);}
.ui-switch.is-inactive label > .is-no,
.ui-switch[data-state="inactive"] label > .is-no,
.ui-switch[data-state="inactiva"] label > .is-no{
    color:#fff;
    border-color:color-mix(in srgb, var(--switch-color) 70%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--switch-color) 82%, #0b1730), color-mix(in srgb, var(--switch-color) 42%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--switch-color) 16%, transparent);
}
.ui-switch.is-inactive label > .is-no:before,
.ui-switch[data-state="inactive"] label > .is-no:before,
.ui-switch[data-state="inactiva"] label > .is-no:before{
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.18);
}


/* =========================================================
   Sección oficial: Switch binario unico y compacto
   =========================================================
   Las variantes binarias del theme usan una sola geometria: el switch de
   page.php. Activo/Inactivo, Activa/Inactiva, Si/No y Mujer/Hombre solo
   cambian texto y variables de color; nunca deben estirarse para llenar el
   grid del modal.
*/
.ui-switch:not(.is-fluid){
    width:max-content !important;
    max-width:100%;
    flex:0 0 auto !important;
    justify-content:flex-start;
    align-self:flex-start;
    border-radius:14px;
    padding:4px;
    gap:4px;
}
.ui-field > .ui-switch:not(.is-fluid){
    width:max-content !important;
}
.ui-switch button,
.ui-switch label > span,
.ui-switch .ui-switch-item{
    min-width:82px;
    min-height:34px;
    flex:0 0 auto !important;
    border-radius:10px !important;
    padding:0 12px;
}
.ui-switch label{
    flex:0 0 auto !important;
}
.ui-switch.is-yesno .is-yes,
.ui-switch.is-yesno label > .is-yes{--switch-color:var(--ui-green);}
.ui-switch.is-yesno .is-no,
.ui-switch.is-yesno label > .is-no{--switch-color:var(--ui-orange);}
.ui-switch.is-gender .is-woman,
.ui-switch.is-gender label > .is-woman{--switch-color:var(--ui-pink);}
.ui-switch.is-gender .is-man,
.ui-switch.is-gender label > .is-man{--switch-color:var(--ui-blue);}
.ui-switch.is-fluid{width:100% !important;}
.ui-switch.is-fluid button,
.ui-switch.is-fluid label > span,
.ui-switch.is-fluid .ui-switch-item{flex:1 1 0 !important;}
@media(max-width:720px){
    .ui-switch:not(.is-fluid){width:max-content !important;}
    .ui-switch:not(.is-fluid) button,
    .ui-switch:not(.is-fluid) label,
    .ui-switch:not(.is-fluid) label > span,
    .ui-switch:not(.is-fluid) .ui-switch-item{flex:0 0 auto !important; min-width:82px;}
}


/* =========================================================
   Sección oficial: Estados e indicadores globales oficiales
   ========================================================= */
:root{
    --ui-group-1:var(--ui-blue);
    --ui-group-2:var(--ui-green);
    --ui-group-3:var(--ui-orange);
    --ui-group-4:var(--ui-red);
    --ui-group-5:var(--ui-purple);
    --ui-group-6:#06b6d4;
    --ui-group-7:#ec4899;
    --ui-group-8:#84cc16;
    --ui-group-9:#f97316;
    --ui-group-10:#64748b;
    --ui-muted-group:#64748b;
}

/* Estado global sin bullet: se usa en tablas, chips de género, bautizado,
   sociedades, departamentos y cualquier estado general. */
.status-pill,
.ui-status-pill{
    --status-color:var(--ui-blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:28px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--status-color) 58%, transparent);
    background:color-mix(in srgb, var(--status-color) 13%, transparent);
    color:color-mix(in srgb, var(--status-color) 82%, #ffffff);
    font-size:12px;
    font-weight:950;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    box-shadow:none;
}
.status-pill::before,
.ui-status-pill::before,
.ui-table .ui-status-pill::before,
.ui-div-table .ui-status-pill::before,
.ui-table .status-pill::before,
.ui-div-table .status-pill::before{
    content:none !important;
    display:none !important;
}
.status-pill.is-muted,
.ui-status-pill.is-muted,
.status-pill.is-empty,
.ui-status-pill.is-empty{
    --status-color:var(--ui-muted-group);
    color:color-mix(in srgb, var(--ui-muted-group) 72%, #ffffff);
    background:rgba(100,116,139,.14);
    border-color:rgba(148,163,184,.42);
}

/* Indicadores con bullet: solo para grupos/mapa. Texto blanco, mismo tamaño
   tipográfico que los estados sin bullet. */
.ui-map-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ui-map-tag{
    --tag-color:var(--ui-group-1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:20px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--tag-color) 66%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--tag-color) 70%, #0b1730), color-mix(in srgb, var(--tag-color) 34%, transparent));
    color:#fff;
    font-size:12px;
    font-weight:950;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    box-shadow:0 8px 18px color-mix(in srgb, var(--tag-color) 14%, transparent);
}
.ui-map-tag::before{
    content:"";
    display:block;
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--tag-color) 42%, transparent);
}
.ui-map-tag.is-blue,.ui-map-tag.is-group-1{--tag-color:var(--ui-group-1);}
.ui-map-tag.is-green,.ui-map-tag.is-group-2{--tag-color:var(--ui-group-2);}
.ui-map-tag.is-orange,.ui-map-tag.is-group-3{--tag-color:var(--ui-group-3);}
.ui-map-tag.is-red,.ui-map-tag.is-group-4{--tag-color:var(--ui-group-4);}
.ui-map-tag.is-purple,.ui-map-tag.is-group-5{--tag-color:var(--ui-group-5);}
.ui-map-tag.is-group-6{--tag-color:var(--ui-group-6);}
.ui-map-tag.is-group-7{--tag-color:var(--ui-group-7);}
.ui-map-tag.is-group-8{--tag-color:var(--ui-group-8);}
.ui-map-tag.is-group-9{--tag-color:var(--ui-group-9);}
.ui-map-tag.is-group-10,
.ui-map-tag.is-muted{--tag-color:var(--ui-group-10);}

/* Botones/radio de color oficiales para grupos. No se estiran, el activo debe
   ser evidente y Todos es blanco. */
.ui-color-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ui-color-button{
    --btn-color:var(--ui-group-1);
    min-height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--btn-color) 64%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 70%, #0b1730), color-mix(in srgb, var(--btn-color) 34%, transparent));
    color:#fff;
    font-size:12px;
    font-weight:950;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 8px 18px color-mix(in srgb, var(--btn-color) 12%, transparent);
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}
.ui-color-button::before{
    content:"";
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.15);
    box-shadow:none;
}
.ui-color-button:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--btn-color) 88%, #ffffff);
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 82%, #0b1730), color-mix(in srgb, var(--btn-color) 42%, transparent));
    box-shadow:0 12px 24px color-mix(in srgb, var(--btn-color) 22%, transparent);
}
.ui-color-button.is-active,
.ui-color-button[aria-selected="true"]{
    border-color:color-mix(in srgb, var(--btn-color) 95%, #ffffff);
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 94%, #0b1730), color-mix(in srgb, var(--btn-color) 52%, transparent));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-color) 20%, transparent), 0 12px 26px color-mix(in srgb, var(--btn-color) 24%, transparent);
}
.ui-color-button.is-active::before,
.ui-color-button[aria-selected="true"]::before{
    background:#fff;
    border-color:rgba(255,255,255,.86);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-color) 28%, transparent);
}
.ui-color-button.is-all{
    --btn-color:#e5edf7;
    color:#fff;
    border-color:rgba(226,232,240,.54);
    background:rgba(226,232,240,.12);
}
.ui-color-button.is-all:hover,
.ui-color-button.is-all.is-active,
.ui-color-button.is-all[aria-selected="true"]{
    color:#fff;
    border-color:rgba(255,255,255,.78);
    background:linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.10));
    box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 12px 24px rgba(10,14,22,.16);
}
.ui-color-button.is-blue,.ui-color-button.is-group-1{--btn-color:var(--ui-group-1);}
.ui-color-button.is-green,.ui-color-button.is-group-2{--btn-color:var(--ui-group-2);}
.ui-color-button.is-orange,.ui-color-button.is-group-3{--btn-color:var(--ui-group-3);}
.ui-color-button.is-red,.ui-color-button.is-group-4{--btn-color:var(--ui-group-4);}
.ui-color-button.is-purple,.ui-color-button.is-group-5{--btn-color:var(--ui-group-5);}
.ui-color-button.is-group-6{--btn-color:var(--ui-group-6);}
.ui-color-button.is-group-7{--btn-color:var(--ui-group-7);}
.ui-color-button.is-group-8{--btn-color:var(--ui-group-8);}
.ui-color-button.is-group-9{--btn-color:var(--ui-group-9);}
.ui-color-button.is-group-10,
.ui-color-button.is-muted,
.ui-color-button.is-gray{--btn-color:var(--ui-group-10);}

/* Compatibilidad: cualquier estado de grupo como status-pill conserva tamaño
   pero sin bullet por regla global. */
.ui-status-pill.is-group-1,.status-pill.is-group-1{--status-color:var(--ui-group-1);}
.ui-status-pill.is-group-2,.status-pill.is-group-2{--status-color:var(--ui-group-2);}
.ui-status-pill.is-group-3,.status-pill.is-group-3{--status-color:var(--ui-group-3);}
.ui-status-pill.is-group-4,.status-pill.is-group-4{--status-color:var(--ui-group-4);}
.ui-status-pill.is-group-5,.status-pill.is-group-5{--status-color:var(--ui-group-5);}
.ui-status-pill.is-group-6,.status-pill.is-group-6{--status-color:var(--ui-group-6);}
.ui-status-pill.is-group-7,.status-pill.is-group-7{--status-color:var(--ui-group-7);}
.ui-status-pill.is-group-8,.status-pill.is-group-8{--status-color:var(--ui-group-8);}
.ui-status-pill.is-group-9,.status-pill.is-group-9{--status-color:var(--ui-group-9);}
.ui-status-pill.is-group-10,.status-pill.is-group-10{--status-color:var(--ui-group-10);}

/* Tablas: padding limpio en primera y última columna para que el hover no se vea cortado. */
.ui-div-table .ui-div-row > .ui-div-cell:first-child{padding-left:18px;}
.ui-div-table .ui-div-row > .ui-div-cell:last-child{padding-right:18px;}
.ui-div-table .ui-div-tbody .ui-div-row:hover > .ui-div-cell:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;}
.ui-div-table .ui-div-tbody .ui-div-row:hover > .ui-div-cell:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px;}

/* KPIs sin color: solo existe este diseño neutral oficial. */
.ui-kpi-grid.is-neutral{align-items:stretch;}
.ui-kpi-neutral,
.ui-kpi-neutral-secondary{
    position:relative;
    overflow:hidden;
    min-height:156px;
    padding:26px 22px 20px;
    border-radius:20px;
    border:1px solid rgba(91,170,224,.42);
    background:linear-gradient(135deg, rgba(91,170,224,.15), rgba(19,35,65,.82) 48%, rgba(15,30,58,.94));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 14px 28px rgba(0,0,0,.14);
}
.ui-kpi-neutral::after,
.ui-kpi-neutral-secondary::after{
    content:"";
    position:absolute;
    inset:auto -24px -36px auto;
    width:130px;
    height:130px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(91,170,224,.20), transparent 64%);
    pointer-events:none;
}
.ui-kpi-neutral .ui-kpi-chip,
.ui-kpi-neutral-secondary .ui-kpi-chip{
    position:absolute;
    top:18px;
    right:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid rgba(56,189,248,.72);
    background:rgba(14,116,144,.34);
    color:#e0f2fe;
    font-size:12px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
}
.ui-kpi-neutral .ui-kpi-label,
.ui-kpi-neutral-secondary .ui-kpi-label{
    display:block;
    max-width:calc(100% - 82px);
    margin:0 0 20px;
    color:var(--text-soft);
    font-size:12px;
    font-weight:950;
    letter-spacing:.16em;
    line-height:1.15;
    text-transform:uppercase;
}
.ui-kpi-neutral .ui-kpi-value,
.ui-kpi-neutral-secondary .ui-kpi-value{
    display:block;
    margin:0 0 8px;
    color:#fff;
    font-size:36px;
    font-weight:950;
    line-height:.95;
    letter-spacing:-.04em;
}
.ui-kpi-neutral-secondary .ui-kpi-value{font-size:36px;}
.ui-kpi-neutral .ui-kpi-note,
.ui-kpi-neutral-secondary .ui-kpi-note{
    display:block;
    max-width:260px;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.25;
}


/* =========================================================
   Sección oficial: Estados, radio-colores y checkbox oficiales
   ========================================================= */
:root{
    --ui-group-10:#7c3aed;
    --ui-muted-group:#475569;
}

/* Los indicadores de estado comparten escala global. La variante con bullet
   usa el mismo alto, tipografia, margen y padding que la variante sin bullet. */
.status-pill,
.ui-status-pill,
.ui-map-tag{
    min-height:28px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:950 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
}
.ui-map-tags,
.ui-status-row,
.ui-society-row{
    gap:8px !important;
    row-gap:10px !important;
}
.ui-map-tag{
    color:#fff !important;
    border-color:color-mix(in srgb, var(--tag-color) 68%, transparent) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--tag-color) 76%, #0b1730), color-mix(in srgb, var(--tag-color) 38%, #14213b)) !important;
    box-shadow:0 10px 22px color-mix(in srgb, var(--tag-color) 18%, transparent) !important;
}
.ui-map-tag::before{
    width:8px !important;
    height:8px !important;
    flex-basis:8px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 0 0 2px color-mix(in srgb, var(--tag-color) 48%, transparent) !important;
}
.ui-map-tag.is-group-10{--tag-color:var(--ui-group-10) !important;}
.ui-map-tag.is-muted,
.ui-map-tag.is-gray,
.ui-map-tag.is-no-group,
.ui-map-tag.is-sin-grupo{--tag-color:var(--ui-muted-group) !important;}

/* Radio-buttons de color oficiales. Todos = blanco, Grupo 10 = violeta,
   Sin grupo = gris oscuro. El activo se marca con aro, sombra e indicador lleno. */
.ui-color-button{
    min-height:30px !important;
    padding:0 14px !important;
    gap:8px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:950 !important;
    color:#fff !important;
    border-color:color-mix(in srgb, var(--btn-color) 62%, transparent) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 72%, #0b1730), color-mix(in srgb, var(--btn-color) 36%, #14213b)) !important;
}
.ui-color-button::before{
    width:10px !important;
    height:10px !important;
    flex:0 0 10px !important;
    border:2px solid rgba(255,255,255,.44) !important;
    background:rgba(255,255,255,.12) !important;
}
.ui-color-button:hover{
    transform:translateY(-1px) !important;
    border-color:color-mix(in srgb, var(--btn-color) 90%, #ffffff) !important;
    box-shadow:0 12px 24px color-mix(in srgb, var(--btn-color) 22%, transparent) !important;
}
.ui-color-button.is-active,
.ui-color-button[aria-pressed="true"],
.ui-color-button[aria-selected="true"]{
    border-color:color-mix(in srgb, var(--btn-color) 96%, #ffffff) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 92%, #0b1730), color-mix(in srgb, var(--btn-color) 54%, #14213b)) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-color) 22%, transparent), 0 14px 28px color-mix(in srgb, var(--btn-color) 26%, transparent) !important;
}
.ui-color-button.is-active::before,
.ui-color-button[aria-pressed="true"]::before,
.ui-color-button[aria-selected="true"]::before{
    background:#fff !important;
    border-color:rgba(255,255,255,.94) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-color) 30%, transparent) !important;
}
.ui-color-button.is-all{
    --btn-color:#f8fafc !important;
    color:#f8fafc !important;
    border-color:rgba(248,250,252,.70) !important;
    background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important;
}
.ui-color-button.is-all::before{border-color:rgba(255,255,255,.82) !important;background:rgba(255,255,255,.20) !important;}
.ui-color-button.is-all.is-active::before,
.ui-color-button.is-all[aria-selected="true"]::before,
.ui-color-button.is-all[aria-pressed="true"]::before{background:#fff !important;}
.ui-color-button.is-group-10{--btn-color:var(--ui-group-10) !important;}
.ui-color-button.is-muted,
.ui-color-button.is-gray,
.ui-color-button.is-no-group,
.ui-color-button.is-sin-grupo{--btn-color:var(--ui-muted-group) !important;}

/* Checkbox oficial: cuadro a la izquierda, redondeado, mas grande que el texto
   y con degradado compatible con los colores del theme. */
.ui-check-demo,
.ui-check-list,
.ui-role-checks{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:14px 22px !important;
}
.ui-check-pill,
.ui-role-check,
label.ui-check-pill{
    --check-color:var(--ui-purple);
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:14px !important;
    font-weight:850 !important;
    line-height:1.15 !important;
    cursor:pointer !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.ui-check-pill input,
.ui-role-check input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
}
.ui-check-pill span,
.ui-role-check span{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:34px !important;
    color:inherit !important;
}
.ui-check-pill span::before,
.ui-role-check span::before{
    content:"" !important;
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
    border-radius:7px !important;
    border:1px solid color-mix(in srgb, var(--check-color) 72%, rgba(255,255,255,.22)) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--check-color) 30%, #17233f), color-mix(in srgb, var(--check-color) 12%, #0b1327)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px color-mix(in srgb, var(--check-color) 14%, transparent) !important;
    transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.ui-check-pill span::after,
.ui-role-check span::after{
    content:"" !important;
    position:absolute !important;
    left:7px !important;
    top:50% !important;
    width:8px !important;
    height:4px !important;
    border-left:2px solid #fff !important;
    border-bottom:2px solid #fff !important;
    transform:translateY(-58%) rotate(-45deg) scale(.35) !important;
    opacity:0 !important;
    transition:opacity .18s ease, transform .18s ease !important;
}
.ui-check-pill:hover span::before,
.ui-role-check:hover span::before{
    transform:translateY(-1px) !important;
    border-color:color-mix(in srgb, var(--check-color) 92%, #ffffff) !important;
}
.ui-check-pill input:checked + span::before,
.ui-role-check input:checked + span::before{
    background:linear-gradient(135deg, color-mix(in srgb, var(--check-color) 96%, #111827), color-mix(in srgb, var(--check-color) 58%, #111827)) !important;
    border-color:color-mix(in srgb, var(--check-color) 95%, #ffffff) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--check-color) 20%, transparent), 0 10px 22px color-mix(in srgb, var(--check-color) 28%, transparent) !important;
}
.ui-check-pill input:checked + span::after,
.ui-role-check input:checked + span::after{
    opacity:1 !important;
    transform:translateY(-58%) rotate(-45deg) scale(1) !important;
}
.ui-check-pill.is-administrador,.ui-role-check.is-administrador{--check-color:var(--ui-purple);}
.ui-check-pill.is-consejo,.ui-role-check.is-consejo{--check-color:var(--ui-orange);}
.ui-check-pill.is-pastor,.ui-role-check.is-pastor{--check-color:var(--ui-blue);}
.ui-check-pill.is-secretario,.ui-role-check.is-secretario{--check-color:var(--ui-green);}


/* =========================================================
   Sección oficial: Ajustes globales solicitados
   ========================================================= */
:root{
    --ui-group-10:#4f46e5;
    --ui-muted-group:#475569;
}

/* KPIs sin color: ui-kpi-main queda obsoleto y se renderiza igual que
   el KPI principal oficial de page.php. */
.ui-kpi-main,
.ui-kpi-simple{
    position:relative !important;
    overflow:hidden !important;
    min-height:156px !important;
    padding:26px 22px 20px !important;
    border-radius:20px !important;
    border:1px solid rgba(91,170,224,.42) !important;
    background:linear-gradient(135deg, rgba(91,170,224,.15), rgba(19,35,65,.82) 48%, rgba(15,30,58,.94)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 14px 28px rgba(0,0,0,.14) !important;
}
.ui-kpi-main::after,
.ui-kpi-simple::after{
    content:"" !important;
    position:absolute !important;
    inset:auto -24px -36px auto !important;
    width:130px !important;
    height:130px !important;
    border-radius:999px !important;
    background:radial-gradient(circle, rgba(91,170,224,.20), transparent 64%) !important;
    pointer-events:none !important;
}
.ui-kpi-main .ui-kpi-chip,
.ui-kpi-simple .ui-kpi-chip{
    position:absolute !important;
    top:18px !important;
    right:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:28px !important;
    padding:0 16px !important;
    border-radius:999px !important;
    border:1px solid rgba(56,189,248,.72) !important;
    background:rgba(14,116,144,.34) !important;
    color:#e0f2fe !important;
    font-size:12px !important;
    font-weight:950 !important;
    line-height:1 !important;
    white-space:nowrap !important;
}
.ui-kpi-main .ui-kpi-label,
.ui-kpi-simple .ui-kpi-label{
    display:block !important;
    max-width:calc(100% - 82px) !important;
    margin:0 0 20px !important;
    color:var(--text-soft) !important;
    font-size:12px !important;
    font-weight:950 !important;
    letter-spacing:.16em !important;
    line-height:1.15 !important;
    text-transform:uppercase !important;
}
.ui-kpi-main .ui-kpi-value,
.ui-kpi-simple .ui-kpi-value{
    display:block !important;
    margin:0 0 8px !important;
    color:#fff !important;
    font-size:36px !important;
    font-weight:950 !important;
    line-height:.95 !important;
    letter-spacing:-.04em !important;
}
.ui-kpi-main .ui-kpi-note,
.ui-kpi-simple .ui-kpi-note{
    display:block !important;
    max-width:260px !important;
    color:var(--text-soft) !important;
    font-size:14px !important;
    line-height:1.25 !important;
}

/* Radio botones de color: pasivo tipo contorno, activo lleno y evidente. */
.ui-color-button{
    color:color-mix(in srgb, var(--btn-color) 72%, #ffffff) !important;
    border-color:color-mix(in srgb, var(--btn-color) 66%, rgba(148,163,184,.20)) !important;
    background:color-mix(in srgb, var(--btn-color) 13%, rgba(15,30,58,.72)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.ui-color-button::before{
    border-color:color-mix(in srgb, var(--btn-color) 70%, #ffffff) !important;
    background:color-mix(in srgb, var(--btn-color) 18%, transparent) !important;
}
.ui-color-button:hover{
    color:#fff !important;
    background:color-mix(in srgb, var(--btn-color) 22%, rgba(15,30,58,.72)) !important;
    box-shadow:0 10px 20px color-mix(in srgb, var(--btn-color) 12%, transparent) !important;
}
.ui-color-button.is-active,
.ui-color-button[aria-pressed="true"],
.ui-color-button[aria-selected="true"]{
    color:#fff !important;
    border-color:color-mix(in srgb, var(--btn-color) 94%, #ffffff) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--btn-color) 88%, #102341), color-mix(in srgb, var(--btn-color) 52%, #17233f)) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-color) 20%, transparent), 0 14px 26px color-mix(in srgb, var(--btn-color) 24%, transparent) !important;
}
.ui-color-button.is-active::before,
.ui-color-button[aria-pressed="true"]::before,
.ui-color-button[aria-selected="true"]::before{
    background:#fff !important;
    border-color:rgba(255,255,255,.96) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-color) 28%, transparent) !important;
}
.ui-color-button.is-all{
    --btn-color:#ffffff !important;
    color:#ffffff !important;
    border-color:rgba(255,255,255,.68) !important;
    background:rgba(255,255,255,.10) !important;
}
.ui-color-button.is-all:hover,
.ui-color-button.is-all.is-active,
.ui-color-button.is-all[aria-pressed="true"],
.ui-color-button.is-all[aria-selected="true"]{
    color:#0f172a !important;
    border-color:rgba(255,255,255,.92) !important;
    background:linear-gradient(135deg,#ffffff,#e2e8f0) !important;
}
.ui-color-button.is-all.is-active::before,
.ui-color-button.is-all[aria-pressed="true"]::before,
.ui-color-button.is-all[aria-selected="true"]::before{
    background:#0f172a !important;
    border-color:#0f172a !important;
    box-shadow:0 0 0 3px rgba(255,255,255,.42) !important;
}
.ui-color-button.is-group-10{--btn-color:var(--ui-group-10) !important;}
.ui-color-button.is-muted,
.ui-color-button.is-gray,
.ui-color-button.is-no-group,
.ui-color-button.is-sin-grupo{--btn-color:var(--ui-muted-group) !important;}

/* Indicadores con bullet: mismo tamaño real que los estados sin bullet. */
.ui-map-tag{
    min-height:28px !important;
    padding:0 12px !important;
    font-size:12px !important;
    line-height:1 !important;
}
.ui-map-tag::before{width:8px !important;height:8px !important;flex:0 0 8px !important;}
.ui-map-tag.is-group-10{--tag-color:var(--ui-group-10) !important;}
.ui-map-tag.is-muted,
.ui-map-tag.is-gray,
.ui-map-tag.is-no-group,
.ui-map-tag.is-sin-grupo{--tag-color:var(--ui-muted-group) !important;}

/* Mini KPIs / indicadores: más separación entre líneas y títulos con color. */
.ui-indicator{padding:12px 14px 13px !important;}
.ui-indicator-title{
    color:color-mix(in srgb, var(--indicator-color) 76%, #ffffff) !important;
    margin-bottom:8px !important;
}
.ui-indicator-value{
    line-height:1.28 !important;
}
.ui-indicator-value br{
    display:block !important;
    content:"" !important;
    margin:0 0 5px !important;
}
.ui-indicator-value br::after{content:"";display:block;margin-bottom:5px;}

/* Checkbox oficial definitivo: evita que usuarios.css vuelva a mostrar inputs nativos.
   El cuadro va a la izquierda, es mayor que el texto y usa degradado. */
.ui-check-demo,
.ui-check-list,
.ui-role-checks,
.usuarios-role-checks{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:14px 24px !important;
}
.ui-check-pill,
.ui-role-check,
.usuarios-role-checks .ui-check-pill,
.ui-check-demo .ui-check-pill,
label.ui-check-pill{
    --check-color:var(--ui-purple);
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text-soft) !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    cursor:pointer !important;
}
.ui-check-pill input[type="checkbox"],
.ui-role-check input[type="checkbox"],
.usuarios-role-checks .ui-check-pill input[type="checkbox"],
.ui-check-demo .ui-check-pill input[type="checkbox"]{
    position:absolute !important;
    inline-size:1px !important;
    block-size:1px !important;
    min-width:1px !important;
    min-height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
    appearance:none !important;
    margin:0 !important;
    padding:0 !important;
}
.ui-check-pill span,
.ui-role-check span,
.usuarios-role-checks .ui-check-pill span,
.ui-check-demo .ui-check-pill span{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:11px !important;
    min-height:34px !important;
    color:inherit !important;
}
.ui-check-pill span::before,
.ui-role-check span::before,
.usuarios-role-checks .ui-check-pill span::before,
.ui-check-demo .ui-check-pill span::before{
    content:"" !important;
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    border-radius:8px !important;
    border:1px solid color-mix(in srgb, var(--check-color) 72%, rgba(255,255,255,.26)) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--check-color) 34%, #17233f), color-mix(in srgb, var(--check-color) 12%, #0b1327)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px color-mix(in srgb, var(--check-color) 13%, transparent) !important;
    transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.ui-check-pill span::after,
.ui-role-check span::after,
.usuarios-role-checks .ui-check-pill span::after,
.ui-check-demo .ui-check-pill span::after{
    content:"" !important;
    position:absolute !important;
    left:8px !important;
    top:50% !important;
    width:7px !important;
    height:11px !important;
    border-right:2px solid #fff !important;
    border-bottom:2px solid #fff !important;
    transform:translateY(-60%) rotate(42deg) scale(.35) !important;
    opacity:0 !important;
    transition:opacity .18s ease, transform .18s ease !important;
}
.ui-check-pill:hover span::before,
.ui-role-check:hover span::before,
.usuarios-role-checks .ui-check-pill:hover span::before,
.ui-check-demo .ui-check-pill:hover span::before{
    transform:translateY(-1px) !important;
    border-color:color-mix(in srgb, var(--check-color) 92%, #ffffff) !important;
}
.ui-check-pill input:checked + span,
.ui-role-check input:checked + span,
.usuarios-role-checks .ui-check-pill input:checked + span,
.ui-check-demo .ui-check-pill input:checked + span{color:#fff !important;}
.ui-check-pill input:checked + span::before,
.ui-role-check input:checked + span::before,
.usuarios-role-checks .ui-check-pill input:checked + span::before,
.ui-check-demo .ui-check-pill input:checked + span::before{
    background:linear-gradient(135deg, color-mix(in srgb, var(--check-color) 96%, #111827), color-mix(in srgb, var(--check-color) 58%, #111827)) !important;
    border-color:color-mix(in srgb, var(--check-color) 95%, #ffffff) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--check-color) 18%, transparent), 0 10px 22px color-mix(in srgb, var(--check-color) 24%, transparent) !important;
}
.ui-check-pill input:checked + span::after,
.ui-role-check input:checked + span::after,
.usuarios-role-checks .ui-check-pill input:checked + span::after,
.ui-check-demo .ui-check-pill input:checked + span::after{
    opacity:1 !important;
    transform:translateY(-60%) rotate(42deg) scale(1) !important;
}
.ui-check-pill.is-administrador,.ui-role-check.is-administrador,.usuarios-role-checks .ui-check-pill:nth-child(1),.ui-check-demo .ui-check-pill:nth-child(1){--check-color:var(--ui-purple) !important;}
.ui-check-pill.is-consejo,.ui-role-check.is-consejo,.usuarios-role-checks .ui-check-pill:nth-child(2),.ui-check-demo .ui-check-pill:nth-child(2){--check-color:var(--ui-orange) !important;}
.ui-check-pill.is-pastor,.ui-role-check.is-pastor,.usuarios-role-checks .ui-check-pill:nth-child(3),.ui-check-demo .ui-check-pill:nth-child(3){--check-color:var(--ui-blue) !important;}
.ui-check-pill.is-secretario,.ui-role-check.is-secretario,.usuarios-role-checks .ui-check-pill:nth-child(4),.ui-check-demo .ui-check-pill:nth-child(4){--check-color:var(--ui-green) !important;}
.ui-view-switch .ui-icon{font-size:15px;}
.ui-view-switch .ui-icon:before{display:block;}

/* UI global: switches sin bullet
   Quita el circulo decorativo de los switches de texto.
   Los switches que usan clases de icono conservan su pseudo-elemento :before. */
.ui-switch button:not([class*="icon-"]):before,
.ui-switch label > span:not([class*="icon-"]):before,
.ui-switch .ui-switch-item:not([class*="icon-"]):before,
.ui-view-switch button:not([class*="icon-"]):before,
.ui-view-switch .ui-switch-item:not([class*="icon-"]):before{
    display:none !important;
    content:none !important;
}

.ui-switch button,
.ui-switch label > span,
.ui-switch .ui-switch-item,
.ui-view-switch button,
.ui-view-switch .ui-switch-item{
    gap:0;
}

.ui-switch button[class*="icon-"],
.ui-switch label > span[class*="icon-"],
.ui-switch .ui-switch-item[class*="icon-"],
.ui-view-switch button[class*="icon-"],
.ui-view-switch .ui-switch-item[class*="icon-"]{
    gap:8px;
}

/* Ajuste global: todos los inputs .ui-search muestran lupa sin requerir markup adicional. */
.ui-search{
    padding-left:42px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239db5d4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:14px 50% !important;
    background-size:17px 17px !important;
}
body.light .ui-search{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2351627a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   UI mini check: selector compacto coloreado reutilizable
   ========================================================= */
.ui-mini-check{
    --check-color:var(--ui-blue);
    position:relative;
    display:inline-flex;
    align-items:center;
    min-width:0;
    margin:0;
    cursor:pointer;
    color:var(--text-soft);
    font-weight:900;
    font-size:13px;
    line-height:1.15;
}
.ui-mini-check input{
    position:absolute;
    width:1px;
    height:1px;
    min-width:1px;
    min-height:1px;
    opacity:0;
    pointer-events:none;
    appearance:none;
}
.ui-mini-check span{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:28px;
    padding:3px 9px 3px 0;
    border-radius:999px;
    border:1px solid transparent;
    transition:color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.ui-mini-check span::before{
    content:"";
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:6px;
    border:1px solid color-mix(in srgb, var(--check-color) 78%, rgba(255,255,255,.22));
    background:linear-gradient(135deg, color-mix(in srgb, var(--check-color) 28%, #17233f), color-mix(in srgb, var(--check-color) 10%, #0b1327));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 7px 14px color-mix(in srgb, var(--check-color) 12%, transparent);
    transition:background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ui-mini-check span::after{
    content:"";
    position:absolute;
    left:16px;
    top:50%;
    width:5px;
    height:8px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:translate(-50%,-62%) rotate(42deg) scale(.3);
    opacity:0;
    transition:opacity var(--transition), transform var(--transition);
}
.ui-mini-check:hover span::before{
    transform:translateY(-1px);
    border-color:color-mix(in srgb, var(--check-color) 94%, #ffffff);
}
.ui-mini-check input:checked + span{
    color:#fff;
    padding-left:7px;
    border-color:color-mix(in srgb, var(--check-color) 50%, transparent);
    border-radius:8px;
    background:color-mix(in srgb, var(--check-color) 16%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--check-color) 8%, transparent);
}
.ui-mini-check input:checked + span::before{
    background:linear-gradient(135deg, color-mix(in srgb, var(--check-color) 96%, #111827), color-mix(in srgb, var(--check-color) 62%, #111827));
    border-color:color-mix(in srgb, var(--check-color) 96%, #ffffff);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--check-color) 20%, transparent), 0 8px 16px color-mix(in srgb, var(--check-color) 25%, transparent);
}
.ui-mini-check input:checked + span::after{
    opacity:1;
    transform:translate(-50%,-62%) rotate(42deg) scale(1);
}
.ui-mini-check.is-society-1{--check-color:#22c55e;} .ui-mini-check.is-society-2{--check-color:#38bdf8;} .ui-mini-check.is-society-3{--check-color:#f59e0b;} .ui-mini-check.is-society-4{--check-color:var(--ui-pink);} .ui-mini-check.is-society-5{--check-color:var(--ui-blue);} .ui-mini-check.is-society-6{--check-color:#ec4899;} .ui-mini-check.is-society-7{--check-color:#14b8a6;} .ui-mini-check.is-society-8{--check-color:#a3e635;} .ui-mini-check.is-society-9{--check-color:#fb7185;} .ui-mini-check.is-society-10{--check-color:#94a3b8;}
.ui-mini-check.is-dept-1{--check-color:#06b6d4;} .ui-mini-check.is-dept-2{--check-color:#6366f1;} .ui-mini-check.is-dept-3{--check-color:#d946ef;} .ui-mini-check.is-dept-4{--check-color:#f97316;} .ui-mini-check.is-dept-5{--check-color:#84cc16;} .ui-mini-check.is-dept-6{--check-color:#0ea5e9;} .ui-mini-check.is-dept-7{--check-color:#eab308;} .ui-mini-check.is-dept-8{--check-color:#10b981;} .ui-mini-check.is-dept-9{--check-color:#f43f5e;} .ui-mini-check.is-dept-10{--check-color:#a855f7;}
.ui-mini-check.is-group-1{--check-color:var(--ui-group-1);} .ui-mini-check.is-group-2{--check-color:var(--ui-group-2);} .ui-mini-check.is-group-3{--check-color:var(--ui-group-3);} .ui-mini-check.is-group-4{--check-color:var(--ui-group-4);} .ui-mini-check.is-group-5{--check-color:var(--ui-group-5);} .ui-mini-check.is-group-6{--check-color:var(--ui-group-6);} .ui-mini-check.is-group-7{--check-color:var(--ui-group-7);} .ui-mini-check.is-group-8{--check-color:var(--ui-group-8);} .ui-mini-check.is-group-9{--check-color:var(--ui-group-9);} .ui-mini-check.is-group-10{--check-color:var(--ui-group-10);}

/* Switches globales para organigrama */
.ui-switch .is-director,
.ui-switch.is-org-role .is-director,
.ui-switch .is-pastor,
.ui-switch.is-org-pastor .is-pastor{--switch-color:var(--ui-blue,#3b82f6);}
.ui-switch .is-apoyo,
.ui-switch.is-org-role .is-apoyo{--switch-color:var(--ui-green,#22c55e);}
.ui-switch .is-adjunto,
.ui-switch.is-org-pastor .is-adjunto{--switch-color:var(--ui-orange,#f97316);}