/* ===== forms.css ===== */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    padding:18px 20px 20px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.field label{
    font-size:13px;
    font-weight:700;
    color:var(--text-soft);
}

.field input,
.field select,
.field textarea{
    padding:14px 15px;
    border-radius:16px;
}

.field textarea{
    min-height:120px;
    resize:vertical;
}

.field-full{
    grid-column:1 / -1;
}

.field-actions,
.modal-actions--flush{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:4px;
}

.theme-compact-form .field input,
.theme-compact-form .field select,
.form-grid--compact .field input,
.form-grid--compact .field select{
    min-height:48px;
}



/* =========================================
   UI-FIELD — Componente de campo reutilizable
   Usado fuera de modal: cards de distrito,
   formularios inline en páginas, etc.
========================================= */

.ui-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.ui-field > label{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    color:var(--text-soft);
    line-height:1.2;
}

.ui-field > input,
.ui-field > select,
.ui-field > textarea{
    width:100%;
    min-height:44px;
    padding:10px 14px;
    border-radius:14px;
    border:1px solid var(--stroke);
    background:rgba(255,255,255,.04);
    color:var(--text);
    font-size:14px;
    font-weight:500;
    line-height:1.4;
    outline:none;
    transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.ui-field > textarea{
    min-height:120px;
    resize:vertical;
    line-height:1.55;
    scrollbar-width:thin;
    scrollbar-color:rgba(91,170,224,.22) transparent;
}

.ui-field > textarea::-webkit-scrollbar{ width:6px; }
.ui-field > textarea::-webkit-scrollbar-track{ background:transparent; }
.ui-field > textarea::-webkit-scrollbar-thumb{ background:rgba(91,170,224,.22); border-radius:999px; }
.ui-field > textarea::-webkit-scrollbar-thumb:hover{ background:rgba(91,170,224,.40); }

body.light .ui-field > textarea{
    scrollbar-color:rgba(26,111,191,.28) transparent;
}

body.light .ui-field > textarea::-webkit-scrollbar-thumb{ background:rgba(26,111,191,.28); }
body.light .ui-field > textarea::-webkit-scrollbar-thumb:hover{ background:rgba(26,111,191,.48); }

.ui-field > input::placeholder,
.ui-field > textarea::placeholder{
    color:var(--text-muted);
    font-weight:400;
}

.ui-field > input:hover,
.ui-field > select:hover,
.ui-field > textarea:hover{
    border-color:rgba(91,170,224,.30);
    background:rgba(255,255,255,.055);
}

.ui-field > input:focus,
.ui-field > select:focus,
.ui-field > textarea:focus{
    border-color:rgba(91,170,224,.48);
    box-shadow:0 0 0 4px rgba(91,170,224,.10);
    background:rgba(255,255,255,.065);
}

/* Light mode */
body.light .ui-field > label{
    color:rgba(35,48,78,.78);
}

body.light .ui-field > input,
body.light .ui-field > select,
body.light .ui-field > textarea{
    background:#fff;
    border-color:rgba(20,30,60,.12);
    color:var(--text);
    box-shadow:0 1px 2px rgba(20,30,60,.04);
}

body.light .ui-field > input::placeholder,
body.light .ui-field > textarea::placeholder{
    color:rgba(35,48,78,.38);
}

body.light .ui-field > input:hover,
body.light .ui-field > select:hover,
body.light .ui-field > textarea:hover{
    border-color:rgba(20,30,60,.20);
    background:#fff;
}

body.light .ui-field > input:focus,
body.light .ui-field > select:focus,
body.light .ui-field > textarea:focus{
    border-color:rgba(26,111,191,.40);
    box-shadow:0 0 0 4px rgba(26,111,191,.08);
    background:#fff;
    outline:none;
}

/* =========================================
   UI-CHECK — Checkbox inline genérico
   Fuera de modal: cards, formularios de página
========================================= */

.ui-check{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:700;
    color:var(--text-soft);
    cursor:pointer;
    user-select:none;
    line-height:1.3;
}

.ui-check input[type="checkbox"]{
    width:16px;
    min-width:16px;
    height:16px;
    min-height:16px;
    padding:0;
    margin:0;
    border-radius:5px;
    border:1px solid rgba(91,170,224,.36);
    background:rgba(255,255,255,.04);
    accent-color:var(--cielo);
    cursor:pointer;
    transition:border-color var(--transition), background var(--transition);
}

.ui-check input[type="checkbox"]:focus-visible{
    outline:2px solid rgba(91,170,224,.72);
    outline-offset:2px;
}

body.light .ui-check{
    color:rgba(35,48,78,.78);
}

body.light .ui-check input[type="checkbox"]{
    border-color:rgba(20,30,60,.22);
    background:#fff;
}


/* =========================================
   FILTER CARDS
========================================= */

.filter-card{
    margin:18px 18px 14px 18px;
    padding:12px 16px 14px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    background:rgba(255,255,255,.03);
}

/* DEFAULT */
.filter-card-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px 12px;
    align-items:end;
}

/* MODIFICADORES DE COLUMNAS */
.filter-card-grid.dos-cols{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.filter-card-grid.tres-cols{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.filter-card-grid.cuatro-cols{
    grid-template-columns:repeat(4, minmax(0, 1fr));
}

.filter-card-grid.cinco-cols{
    grid-template-columns:repeat(5, minmax(0, 1fr));
}

/* AJUSTES VISUALES */
.filter-card .field{
    gap:6px;
    min-width:0;
}

.filter-card .field label{
    font-size:12px;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--text-muted);
}

.filter-card .field input,
.filter-card .field select{
    min-height:40px;
    padding:10px 13px;
    border-radius:14px;
    font-size:14px;
    background:rgba(255,255,255,.04);
}

.filter-card .field input::placeholder{
    color:var(--text-muted);
}

.filter-card--compact .field input,
.filter-card--compact .field select{
    min-height:40px;
}

/* DISTRIBUCIÓN BUSCAR / ACCIONES SEGÚN COLUMNAS */

/* 2 columnas */
.filter-card-grid.dos-cols .field-search{
    grid-column:1;
}

.filter-card-grid.dos-cols .filter-card-actions{
    grid-column:2;
}

/* 3 columnas */
.filter-card-grid.tres-cols .field-search{
    grid-column:1 / span 2;
}

.filter-card-grid.tres-cols .filter-card-actions{
    grid-column:3;
}

/* 4 columnas */
.filter-card-grid.cuatro-cols .field-search{
    grid-column:1 / span 3;
}

.filter-card-grid.cuatro-cols .filter-card-actions{
    grid-column:4;
}

/* 5 columnas */
.filter-card-grid.cinco-cols .field-search{
    grid-column:1 / span 4;
}

.filter-card-grid.cinco-cols .filter-card-actions{
    grid-column:5;
}

/* ACCIONES */
.filter-card .filter-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:end;
    margin:0;
    padding:0;
    border:0;
}

.filter-card .filter-card-actions .btn{
    width:100%;
    min-height:40px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.filter-card .filter-card-actions .btn:first-child{
    justify-self:start;
}

.filter-card .filter-card-actions .btn:last-child{
    justify-self:end;
}

.filter-actions-label{
    display:none;
}

/* =========================================
   LIGHT MODE - FILTER CARDS
========================================= */

body.light .filter-card{
    border-color:rgba(20,30,60,.08);
    background:rgba(20,30,60,.03);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}

body.light .filter-card .field label{
    color:rgba(35,48,78,.72);
}

body.light .filter-card .field input,
body.light .filter-card .field select{
    background:#fff;
    border:1px solid rgba(20,30,60,.10);
    color:var(--text);
    box-shadow:none;
}

body.light .filter-card .field input::placeholder{
    color:rgba(35,48,78,.42);
}

body.light .filter-card .field input:hover,
body.light .filter-card .field select:hover{
    border-color:rgba(20,30,60,.16);
    background:#fff;
}

body.light .filter-card .field input:focus,
body.light .filter-card .field select:focus{
    border-color:rgba(91,170,224,.42);
    box-shadow:0 0 0 3px rgba(91,170,224,.10);
    background:#fff;
    outline:none;
}

body.light .filter-card .filter-card-actions .btn.btn-secondary{
    background:rgba(20,30,60,.04);
    color:rgba(35,48,78,.82);
    border-color:rgba(20,30,60,.10);
}

body.light .filter-card .filter-card-actions .btn.btn-secondary:hover{
    background:rgba(20,30,60,.08);
    color:var(--text);
    border-color:rgba(20,30,60,.16);
}

body.light .filter-card .filter-card-actions .btn.btn-primary{
    box-shadow:none;
}

/* =========================================
   RESPONSIVE FILTERS
========================================= */

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

    .filter-card-grid.cinco-cols .field-search{
        grid-column:1 / span 3;
    }

    .filter-card-grid.cinco-cols .filter-card-actions{
        grid-column:4;
    }
}

@media (max-width: 940px){
    .filter-card-grid.dos-cols,
    .filter-card-grid.tres-cols,
    .filter-card-grid.cuatro-cols,
    .filter-card-grid.cinco-cols{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .filter-card-grid.dos-cols .field-search,
    .filter-card-grid.tres-cols .field-search,
    .filter-card-grid.cuatro-cols .field-search,
    .filter-card-grid.cinco-cols .field-search{
        grid-column:1;
    }

    .filter-card-grid.dos-cols .filter-card-actions,
    .filter-card-grid.tres-cols .filter-card-actions,
    .filter-card-grid.cuatro-cols .filter-card-actions,
    .filter-card-grid.cinco-cols .filter-card-actions{
        grid-column:2;
    }
}

@media (max-width: 560px){
    .filter-card{
        margin:0 14px 14px;
        padding:12px;
        border-radius:16px;
    }

    .filter-card-grid.dos-cols,
    .filter-card-grid.tres-cols,
    .filter-card-grid.cuatro-cols,
    .filter-card-grid.cinco-cols{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .filter-card-grid.dos-cols .field-search,
    .filter-card-grid.tres-cols .field-search,
    .filter-card-grid.cuatro-cols .field-search,
    .filter-card-grid.cinco-cols .field-search{
        grid-column:1;
    }

    .filter-card-grid.dos-cols .filter-card-actions,
    .filter-card-grid.tres-cols .filter-card-actions,
    .filter-card-grid.cuatro-cols .filter-card-actions,
    .filter-card-grid.cinco-cols .filter-card-actions{
        grid-column:2;
    }
}


/* =========================================
   TABLE INLINE INPUTS (EDITABLE TABLES)
========================================= */

.table-input{
    background:transparent !important;
    border:0 !important;
    padding:6px 4px !important;
    border-radius:0 !important;
    min-height:auto !important;
    font-size:14px;
    color:var(--text);
    box-shadow:none !important;
    width:100%;
}

.table-input:hover{
    background:transparent !important;
}

.table-input:focus{
    outline:none;
    background:rgba(255,255,255,.035) !important;
}

/* selects */
.table-input select,
select.table-input{
    background:transparent !important;
    border:0 !important;
    padding:6px 2px;
}

/* placeholder */
.table-input::placeholder{
    color:var(--text-muted);
}

/* light mode */
body.light .table-input{
    background:transparent !important;
    border:0 !important;
    color:var(--text);
}

body.light .table-input:hover{
    background:rgba(20,30,60,.04);
}

body.light .table-input:focus{
    background:rgba(20,30,60,.06);
}

/* =========================================
   THEME SELECTION CONTROLS
   Reusable switches, tags and colored choices
========================================= */

.ui-binary-switch{
    display:inline-grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:6px;
    width:max-content;
    max-width:100%;
    padding:5px;
    border:1px solid var(--stroke-strong, rgba(91,170,224,.28));
    border-radius:12px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    cursor:pointer;
    user-select:none;
}

.ui-binary-switch input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ui-binary-option{
    --switch-color:var(--info);
    min-height:26px;
    min-width:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:4px 10px;
    border:1px solid transparent;
    border-radius:8px;
    color:var(--text-soft);
    font-size:12px;
    line-height:1;
    font-weight:900;
    transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.ui-binary-option .ui-dot{
    width:7px;
    height:7px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--switch-color) 70%, #fff 8%);
    background:color-mix(in srgb, var(--switch-color) 32%, transparent);
}

.ui-binary-option.is-yes{--switch-color:var(--success);}
.ui-binary-option.is-no{--switch-color:var(--warning);}
.ui-binary-option.is-active{
    color:#fff;
    border-color:color-mix(in srgb, var(--switch-color) 72%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--switch-color) 84%, #0b1730), color-mix(in srgb, var(--switch-color) 46%, transparent));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--switch-color) 14%, transparent);
}
.ui-binary-option.is-active .ui-dot{
    background:#fff;
    border-color:rgba(255,255,255,.86);
}

.ui-choice-switch{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ui-choice-item{
    --choice-color:var(--info);
    position:relative;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
    user-select:none;
}

.ui-choice-item input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ui-choice-item span,
.ui-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    min-width:38px;
    padding:6px 13px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--choice-color) 44%, transparent);
    background:color-mix(in srgb, var(--choice-color) 12%, transparent);
    color:color-mix(in srgb, var(--choice-color) 54%, #ffffff);
    font-size:13px;
    font-weight:900;
    line-height:1;
    transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ui-choice-item:hover span{
    border-color:color-mix(in srgb, var(--choice-color) 72%, transparent);
    background:color-mix(in srgb, var(--choice-color) 18%, transparent);
}

.ui-choice-item input:checked + span{
    color:#fff;
    border-color:color-mix(in srgb, var(--choice-color) 84%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--choice-color) 88%, #0b1730), color-mix(in srgb, var(--choice-color) 46%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--choice-color) 16%, transparent);
}

.ui-choice-item input:focus-visible + span{
    outline:2px solid color-mix(in srgb, var(--choice-color) 82%, #ffffff);
    outline-offset:3px;
}

.ui-district-picker{
    padding-top:2px;
}

.is-district-1{--choice-color:#199bdc;--status-color:#199bdc;}
.is-district-2{--choice-color:#009984;--status-color:#009984;}
.is-district-3{--choice-color:#f4b519;--status-color:#f4b519;}
.is-district-4{--choice-color:#ef4444;--status-color:#ef4444;}
.is-district-5{--choice-color:#7c3aed;--status-color:#7c3aed;}
.is-district-6{--choice-color:#06b6d4;--status-color:#06b6d4;}
.is-district-7{--choice-color:#ec4899;--status-color:#ec4899;}

.ui-status-pill[class*="is-district-"]{
    --choice-color:var(--status-color);
    min-width:30px;
    min-height:28px;
    padding:5px 11px;
}

body.light .ui-binary-switch{
    background:rgba(13,30,48,.05);
    border-color:rgba(13,30,48,.14);
}
body.light .ui-binary-option{
    color:#51627a;
}
body.light .ui-choice-item span,
body.light .ui-status-pill{
    color:color-mix(in srgb, var(--choice-color) 66%, #243247);
    background:color-mix(in srgb, var(--choice-color) 10%, #ffffff);
}
body.light .ui-choice-item input:checked + span,
body.light .ui-binary-option.is-active{
    color:#fff;
}

/* =========================================
   GENERIC CHECK / RADIO / TAG CONTROLS
   Usar en todos los módulos del theme.
========================================= */

.ui-check-list,
.ui-radio-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
}

.ui-check-list label,
.ui-radio-list label{
    --check-color:var(--info, #19aadb);
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:28px;
    color:var(--text-soft);
    font-size:14px;
    font-weight:850;
    line-height:1.25;
    cursor:pointer;
    user-select:none;
}

.ui-modal .ui-check-list input[type="checkbox"],
.ui-modal .ui-radio-list input[type="radio"],
.ui-check-list input[type="checkbox"],
.ui-radio-list input[type="radio"]{
    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-check-list label span,
.ui-radio-list label span{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.ui-check-list label span::before,
.ui-radio-list label span::before{
    content:"";
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.42);
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), rgba(255,255,255,.05));
    box-shadow:inset 0 1px 2px rgba(255,255,255,.12), 0 0 0 3px rgba(148,163,184,.05);
    transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ui-check-list label span::before{
    border-radius:7px;
}

.ui-check-list input:checked + span::before,
.ui-radio-list input:checked + span::before{
    border-color:color-mix(in srgb, var(--check-color) 88%, transparent);
    background:
        radial-gradient(circle at 50% 50%, #fff 0 28%, transparent 31%),
        linear-gradient(135deg, color-mix(in srgb, var(--check-color) 92%, #0b1730), color-mix(in srgb, var(--check-color) 52%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--check-color) 16%, transparent);
}

.ui-check-list input:checked + span,
.ui-radio-list input:checked + span{
    color:var(--text);
}

.ui-check-list input:focus-visible + span::before,
.ui-radio-list input:focus-visible + span::before{
    outline:2px solid color-mix(in srgb, var(--check-color) 82%, #ffffff);
    outline-offset:3px;
}

.ui-tag-select{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ui-tag-option{
    --tag-color:var(--info, #19aadb);
    position:relative;
    display:inline-flex;
    cursor:pointer;
    user-select:none;
}

.ui-modal .ui-tag-option input[type="checkbox"],
.ui-tag-option input[type="checkbox"]{
    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-tag-option span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:32px;
    padding:7px 12px;
    border:1px solid color-mix(in srgb, var(--tag-color) 34%, rgba(148,163,184,.26));
    border-radius:999px;
    background:color-mix(in srgb, var(--tag-color) 10%, rgba(255,255,255,.04));
    color:var(--text-soft);
    font-size:12px;
    font-weight:900;
    line-height:1;
    transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ui-tag-option:hover span{
    border-color:color-mix(in srgb, var(--tag-color) 64%, transparent);
    background:color-mix(in srgb, var(--tag-color) 15%, rgba(255,255,255,.05));
}

.ui-tag-option input:checked + span{
    color:#fff;
    border-color:color-mix(in srgb, var(--tag-color) 82%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--tag-color) 88%, #0b1730), color-mix(in srgb, var(--tag-color) 46%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--tag-color) 14%, transparent);
}

.ui-tag-option input:focus-visible + span{
    outline:2px solid color-mix(in srgb, var(--tag-color) 82%, #ffffff);
    outline-offset:3px;
}

.ui-tag-option.is-blue{--tag-color:#19aadb;}
.ui-tag-option.is-green{--tag-color:#16a34a;}
.ui-tag-option.is-orange{--tag-color:#f59e0b;}
.ui-tag-option.is-purple{--tag-color:#8b5cf6;}
.ui-tag-option.is-pink{--tag-color:#ec4899;}
.ui-tag-option.is-red{--tag-color:#ef4444;}
.ui-tag-option.is-cyan{--tag-color:#06b6d4;}

body.light .ui-check-list label,
body.light .ui-radio-list label,
body.light .ui-tag-option span{
    color:rgba(35,48,78,.78);
}

body.light .ui-check-list input:checked + span,
body.light .ui-radio-list input:checked + span,
body.light .ui-tag-option input:checked + span{
    color:#fff;
}

/* =========================================
   SEGMENTED SWITCHES
   Radio-based switches for mutually exclusive options.
   Generic theme component: use in any module.
========================================= */
.ui-segmented{
    display:inline-grid;
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    gap:5px;
    width:max-content;
    max-width:100%;
    align-items:center;
    padding:4px;
    border:1px solid rgba(91,170,224,.30);
    border-radius:12px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.ui-segment-item{
    --segment-color:var(--info, #19aadb);
    position:relative;
    display:inline-flex;
    min-width:0;
    cursor:pointer;
    user-select:none;
}

.ui-segment-item input[type="radio"],
.ui-modal .ui-segment-item input[type="radio"]{
    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-segment-item span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:26px;
    min-width:54px;
    padding:5px 11px;
    border:1px solid transparent;
    border-radius:8px;
    color:var(--text-soft);
    font-size:12px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
    transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.ui-segment-item span i{
    width:7px;
    height:7px;
    border-radius:999px;
    border:1px solid color-mix(in srgb, var(--segment-color) 72%, #fff 8%);
    background:color-mix(in srgb, var(--segment-color) 24%, transparent);
    flex:0 0 7px;
}

.ui-segment-item:hover span{
    background:color-mix(in srgb, var(--segment-color) 11%, transparent);
    border-color:color-mix(in srgb, var(--segment-color) 30%, transparent);
}

.ui-segment-item input:checked + span{
    color:#fff;
    border-color:color-mix(in srgb, var(--segment-color) 76%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--segment-color) 86%, #0b1730), color-mix(in srgb, var(--segment-color) 48%, transparent));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--segment-color) 16%, transparent);
}

.ui-segment-item input:checked + span i{
    background:#fff;
    border-color:rgba(255,255,255,.88);
}

.ui-segment-item input:focus-visible + span{
    outline:2px solid color-mix(in srgb, var(--segment-color) 82%, #ffffff);
    outline-offset:3px;
}

.ui-segment-item.is-blue{--segment-color:#19aadb;}
.ui-segment-item.is-pink{--segment-color:#d946ef;}
.ui-segment-item.is-green{--segment-color:#16a34a;}
.ui-segment-item.is-orange{--segment-color:#f59e0b;}
.ui-segment-item.is-purple{--segment-color:#8b5cf6;}
.ui-segment-item.is-red{--segment-color:#ef4444;}
.ui-segment-item.is-cyan{--segment-color:#06b6d4;}

body.light .ui-segmented{
    background:rgba(13,30,48,.05);
    border-color:rgba(13,30,48,.14);
}
body.light .ui-segment-item span{
    color:#51627a;
}
body.light .ui-segment-item input:checked + span{
    color:#fff;
}


/* =========================================
   VALIDACION INLINE REUTILIZABLE
========================================= */

.ui-validate-strip{
    display:grid;
    grid-template-columns:1.05fr 1fr 1fr 1.2fr auto;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid rgba(148,163,184,.12);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    margin-bottom:14px;
}

.ui-validate-strip p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
}

.ui-validate-msg{
    min-height:56px;
    border:1px dashed rgba(148,163,184,.25);
    border-radius:14px;
    padding:12px 14px;
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
    display:flex;
    align-items:center;
}

.ui-validate-msg.is-ok{color:#7cf2b2;}
.ui-validate-msg.is-warn{color:#ffcf7a;}

body.light .ui-validate-strip{
    background:rgba(255,255,255,.68);
    border-color:rgba(13,72,130,.14);
}

body.light .ui-validate-msg{
    color:var(--text-soft);
    border-color:rgba(13,72,130,.18);
}

body.light .ui-validate-msg.is-ok{color:#047857;}
body.light .ui-validate-msg.is-warn{color:#92400e;}

@media (max-width:1100px){
    .ui-validate-strip{grid-template-columns:1fr 1fr;}
    .ui-validate-strip > button{grid-column:2;justify-self:end;}
}

@media (max-width:900px){
    .ui-validate-strip{grid-template-columns:1fr;}
    .ui-validate-strip > button{grid-column:auto;width:100%;}
}


/* =========================================================
   Sección oficial: Switch activo/inactivo oficial para modales
   ========================================================= */
.ui-modal .ui-binary-switch,
.modal-card .ui-binary-switch{
    border-radius:14px;
    padding:4px;
    gap:4px;
    border-color:var(--ui-line, rgba(96,165,250,.28));
    background:rgba(255,255,255,.045);
}
.ui-modal .ui-binary-option,
.modal-card .ui-binary-option{
    min-height:30px;
    min-width:74px;
    border-radius:10px;
    padding:0 12px;
    font-size:13px;
    line-height:1;
}
.ui-modal .ui-binary-option.is-yes,
.modal-card .ui-binary-option.is-yes{--switch-color:var(--ui-green, var(--success));}
.ui-modal .ui-binary-option.is-no,
.modal-card .ui-binary-option.is-no{--switch-color:var(--ui-orange, var(--warning));}
.ui-modal .ui-binary-option .ui-dot,
.modal-card .ui-binary-option .ui-dot{width:7px;height:7px;}


/* =========================================================
   Sección oficial: Controles genéricos consistentes
   ========================================================= */
/* Los tag options se usan con checkbox o radio; ambos deben ocultar el input nativo. */
.ui-modal .ui-tag-option input[type="radio"],
.ui-tag-option input[type="radio"]{
    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;
}

/* El switch binario debe verse igual que los switches segmentados del theme. */
.ui-binary-switch{
    display:inline-grid;
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    grid-template-columns:none;
    gap:5px;
    width:max-content;
    max-width:100%;
    align-items:center;
    padding:4px;
    border:1px solid rgba(91,170,224,.30);
    border-radius:12px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.ui-binary-option{
    min-height:26px;
    min-width:54px;
    padding:5px 11px;
    border-radius:8px;
    font-size:12px;
    font-weight:950;
    gap:7px;
}
.ui-binary-option .ui-dot{
    width:7px;
    height:7px;
    flex:0 0 7px;
}

/* Variante genérica para botones radio de color, no ligada a grupos. */
.ui-color-radio-select{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
}
.ui-color-radio-select .ui-tag-option span{
    min-height:32px;
    padding:7px 14px;
    border-radius:999px;
}
.ui-color-radio-select .ui-tag-option span::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:999px;
    background:currentColor;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--tag-color) 18%, transparent);
}
.ui-tag-option.is-gray{--tag-color:#64748b;}


/* =========================================================
   Sección oficial: Estado activo/inactivo usa exactamente el switch Si/No
   ========================================================= */
.ui-binary-switch,
.ui-modal .ui-binary-switch,
.modal-card .ui-binary-switch{
    display:inline-flex;
    align-items:center;
    grid-template-columns:none;
    grid-auto-flow:initial;
    grid-auto-columns:initial;
    gap:6px;
    width:max-content;
    max-width:100%;
    padding:5px;
    border:1px solid var(--ui-line);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    box-shadow:none;
    cursor:pointer;
    user-select:none;
}
.ui-binary-switch 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-binary-option,
.ui-modal .ui-binary-option,
.modal-card .ui-binary-option{
    --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;
    transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ui-binary-option .ui-dot,
.ui-modal .ui-binary-option .ui-dot,
.modal-card .ui-binary-option .ui-dot{
    width:13px;
    height:13px;
    flex:0 0 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-binary-option.is-yes,
.ui-modal .ui-binary-option.is-yes,
.modal-card .ui-binary-option.is-yes{--switch-color:var(--ui-green);}
.ui-binary-option.is-no,
.ui-modal .ui-binary-option.is-no,
.modal-card .ui-binary-option.is-no{--switch-color:var(--ui-orange);}
.ui-binary-option.is-active,
.ui-binary-switch input:checked + .ui-binary-option,
body.light .ui-binary-option.is-active,
body.light .ui-binary-switch input:checked + .ui-binary-option{
    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-binary-option.is-active .ui-dot,
.ui-binary-switch input:checked + .ui-binary-option .ui-dot{
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.18);
}
body.light .ui-binary-switch{
    border-color:rgba(13,30,48,.14);
    background:rgba(13,30,48,.05);
}
body.light .ui-binary-option{
    color:#51627a;
    border-color:rgba(10,14,22,.10);
    background:rgba(255,255,255,.65);
}


/* =========================================================
   Sección oficial: Radio de color activo/hover oficial
   ========================================================= */
.ui-color-radio-select .ui-tag-option span{
    min-height:32px;
    padding:7px 14px;
    border-radius:999px;
    border-color:color-mix(in srgb, var(--tag-color) 46%, rgba(148,163,184,.28));
    background:color-mix(in srgb, var(--tag-color) 10%, rgba(255,255,255,.04));
    color:var(--text-soft);
}
.ui-color-radio-select .ui-tag-option:hover span{
    color:#fff;
    border-color:color-mix(in srgb, var(--tag-color) 78%, #ffffff);
    background:color-mix(in srgb, var(--tag-color) 18%, rgba(255,255,255,.06));
    box-shadow:0 10px 20px color-mix(in srgb, var(--tag-color) 14%, transparent);
}
.ui-color-radio-select .ui-tag-option input:checked + span{
    color:#fff;
    border-color:color-mix(in srgb, var(--tag-color) 92%, #ffffff);
    background:linear-gradient(135deg, color-mix(in srgb, var(--tag-color) 88%, #0b1730), color-mix(in srgb, var(--tag-color) 48%, transparent));
    box-shadow:0 0 0 3px color-mix(in srgb, var(--tag-color) 20%, transparent), 0 12px 24px color-mix(in srgb, var(--tag-color) 18%, transparent);
}
.ui-color-radio-select .ui-tag-option input:checked + span::before{
    background:#fff;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--tag-color) 30%, transparent);
}