/*
 * Componentes de botones y controles de seleccion
 * Sistema global experimental para unificar acciones del theme.
 * Fuente: variables oficiales definidas en assets/css/base.css y light.css
 */

:root{
    --btn-h-sm:36px;
    --btn-h-md:42px;
    --btn-h-lg:50px;
    --btn-radius-sm:12px;
    --btn-radius-md:14px;
    --btn-radius-lg:16px;
    --btn-gap:8px;
    --btn-focus:0 0 0 4px rgba(91,170,224,.16);
    --btn-shadow:0 12px 28px rgba(7,9,14,.28);
}

/* =========================================
   BOTON BASE
========================================= */

.btn,
a.btn,
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--btn-gap);
    width:auto;
    min-height:var(--btn-h-md);
    padding:0 16px;
    border:1px solid var(--stroke);
    border-radius:var(--btn-radius-md);
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-size:14px;
    line-height:1;
    font-weight:800;
    letter-spacing:.005em;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    user-select:none;
    box-shadow:none;
    transition:background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition), filter var(--transition), opacity var(--transition);
}

.btn:hover,
a.btn:hover,
button.btn:hover{
    background:rgba(255,255,255,.095);
    border-color:var(--stroke-strong);
    color:var(--text);
    transform:translateY(-1px);
}

.btn:focus-visible{
    outline:0;
    box-shadow:var(--btn-focus);
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"]{
    opacity:.52;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
    filter:grayscale(.12);
}

.btn .ui-icon,
.btn [class^="icon-"],
.btn [class*=" icon-"]{
    flex:0 0 auto;
    font-size:1.05em;
    line-height:1;
}

/* Jerarquia visual */
.btn-primary,
.btn.primary{
    color:#fff;
    border-color:rgba(91,170,224,.24);
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
    box-shadow:var(--btn-shadow);
}

.btn-primary:hover,
.btn.primary:hover{
    color:#fff;
    border-color:rgba(91,170,224,.34);
    filter:brightness(1.06);
}

.btn-secondary{
    color:var(--text);
    border-color:var(--stroke);
    background:rgba(255,255,255,.055);
}

.btn-secondary:hover{
    background:rgba(255,255,255,.10);
}

.btn-ghost,
.btn.ghost{
    color:var(--text-soft);
    border-color:transparent;
    background:transparent;
}

.btn-ghost:hover,
.btn.ghost:hover{
    color:var(--text);
    border-color:var(--stroke);
    background:rgba(255,255,255,.055);
}

.btn-danger{
    color:#ffd1c8;
    border-color:rgba(254,46,46,.26);
    background:rgba(254,46,46,.10);
}

.btn-danger:hover{
    color:#fff;
    border-color:rgba(254,46,46,.42);
    background:rgba(254,46,46,.17);
}

.btn-success{
    color:#dffef8;
    border-color:rgba(0,153,132,.30);
    background:rgba(0,153,132,.13);
}

.btn-success:hover{
    color:#fff;
    border-color:rgba(0,153,132,.46);
    background:rgba(0,153,132,.20);
}

.btn-warning{
    color:#fff1c8;
    border-color:rgba(244,181,25,.32);
    background:rgba(244,181,25,.12);
}

.btn-warning:hover{
    color:#fff;
    border-color:rgba(244,181,25,.48);
    background:rgba(244,181,25,.20);
}

/* Tamanos */
.btn-sm{
    min-height:var(--btn-h-sm);
    padding:0 12px;
    border-radius:var(--btn-radius-sm);
    font-size:13px;
    gap:7px;
}

.btn-md{
    min-height:var(--btn-h-md);
    padding:0 16px;
    border-radius:var(--btn-radius-md);
    font-size:14px;
}

.btn-lg{
    min-height:var(--btn-h-lg);
    padding:0 20px;
    border-radius:var(--btn-radius-lg);
    font-size:15px;
    gap:10px;
}

.btn-icon{
    width:var(--btn-h-md);
    min-width:var(--btn-h-md);
    padding:0;
}

.btn-icon.btn-sm{
    width:var(--btn-h-sm);
    min-width:var(--btn-h-sm);
}

.btn-icon.btn-lg{
    width:var(--btn-h-lg);
    min-width:var(--btn-h-lg);
}

.btn-block{
    width:100%;
}

.btn.is-active,
.btn[aria-pressed="true"]{
    color:#fff;
    border-color:rgba(91,170,224,.44);
    background:linear-gradient(135deg, rgba(26,111,191,.88), rgba(91,170,224,.52));
    box-shadow:0 0 0 4px rgba(91,170,224,.10);
}

.btn.is-loading{
    position:relative;
    color:transparent !important;
    pointer-events:none;
}

.btn.is-loading::after{
    content:"";
    width:16px;
    height:16px;
    position:absolute;
    inset:0;
    margin:auto;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.34);
    border-top-color:#fff;
    animation:ui-btn-spin .72s linear infinite;
}

@keyframes ui-btn-spin{to{transform:rotate(360deg);}}

/* =========================================
   CONTEXTOS DE ACCION
========================================= */

.ui-section-actions,
.ui-table-actions,
.ui-form-actions,
.ui-filter-actions,
.ui-calendar-nav,
.ui-toolbar-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.ui-section-actions{
    justify-content:flex-end;
}

.ui-section-actions .btn{
    min-height:var(--btn-h-lg);
    padding-inline:18px;
}

.ui-table-actions{
    gap:8px;
    justify-content:flex-end;
}

.ui-table-actions .btn{
    min-height:var(--btn-h-sm);
    padding-inline:12px;
    border-radius:var(--btn-radius-sm);
    font-size:13px;
}

.ui-form-actions{
    justify-content:flex-end;
    padding-top:4px;
}

.ui-filter-actions{
    gap:8px;
    justify-content:flex-end;
}

.ui-filter-actions .btn{
    min-height:40px;
    padding-inline:14px;
    border-radius:13px;
}

.ui-calendar-nav{
    gap:8px;
    justify-content:center;
}

.ui-calendar-nav .btn{
    min-height:38px;
    padding-inline:13px;
    border-radius:13px;
}

.ui-button-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.ui-button-stack{
    display:grid;
    gap:10px;
}

/* =========================================
   ENLACES DE ACCION
========================================= */

.ui-action-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--text-soft);
    font-size:13px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:color var(--transition), opacity var(--transition), transform var(--transition);
}

.ui-action-link:hover{
    color:var(--text);
    transform:translateY(-1px);
}

.ui-action-link.is-danger{color:#f8b9ae;}
.ui-action-link.is-danger:hover{color:#ffd3cc;}
.ui-action-link.is-primary{color:var(--info);}
.ui-action-link.is-primary:hover{color:#dff6ff;}

/* =========================================
   CHECKBOX Y RADIO BASE
========================================= */

.ui-checkbox,
.ui-radio{
    position:relative;
    display:inline-flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
    color:var(--text-soft);
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    cursor:pointer;
    user-select:none;
}

.ui-checkbox input,
.ui-radio input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ui-checkbox-control,
.ui-radio-control{
    flex:0 0 auto;
    width:19px;
    height:19px;
    margin-top:0;
    border:1px solid var(--stroke-strong);
    background:rgba(255,255,255,.04);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.ui-checkbox-control{border-radius:6px;}
.ui-radio-control{border-radius:999px;}

.ui-checkbox:hover .ui-checkbox-control,
.ui-radio:hover .ui-radio-control{
    border-color:rgba(91,170,224,.48);
    background:rgba(255,255,255,.07);
}

.ui-checkbox input:checked + .ui-checkbox-control,
.ui-radio input:checked + .ui-radio-control{
    border-color:rgba(91,170,224,.70);
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
    box-shadow:0 0 0 4px rgba(91,170,224,.12);
}

.ui-checkbox input:focus-visible + .ui-checkbox-control,
.ui-radio input:focus-visible + .ui-radio-control{
    outline:0;
    box-shadow:var(--btn-focus);
}

.ui-checkbox input:checked + .ui-checkbox-control::after{
    content:"";
    position:absolute;
    width:9px;
    height:5px;
    margin:5px 0 0 4px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg);
}

.ui-radio input:checked + .ui-radio-control::after{
    content:"";
    display:block;
    width:7px;
    height:7px;
    margin:5px;
    border-radius:999px;
    background:#fff;
}

.ui-checkbox-text,
.ui-radio-text{
    min-width:0;
}

/* =========================================
   CHOICES TIPO PILL
========================================= */

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

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

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

.ui-choice span,
.ui-choice-pill span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:34px;
    padding:0 13px;
    border:1px solid color-mix(in srgb, var(--choice-color) 42%, transparent);
    border-radius:999px;
    background:color-mix(in srgb, var(--choice-color) 12%, transparent);
    color:color-mix(in srgb, var(--choice-color) 55%, #fff);
    font-size:13px;
    font-weight:900;
    line-height:1;
    transition:background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

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

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

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

.is-choice-blue{--choice-color:var(--info);}
.is-choice-green{--choice-color:var(--success);}
.is-choice-yellow{--choice-color:var(--warning);}
.is-choice-red{--choice-color:var(--danger);}
.is-choice-purple{--choice-color:#7c3aed;}
.is-choice-pink{--choice-color:#ec4899;}
.is-choice-muted{--choice-color:var(--text-muted);}

/* =========================================
   SWITCH BINARIO / TOGGLE
========================================= */

.ui-toggle{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--text-soft);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    user-select:none;
}

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

.ui-toggle-track{
    position:relative;
    width:48px;
    height:28px;
    flex:0 0 auto;
    border:1px solid var(--stroke-strong);
    border-radius:999px;
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    transition:background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.ui-toggle-track::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:18px;
    height:18px;
    border-radius:999px;
    background:var(--text-soft);
    transition:transform var(--transition), background var(--transition);
}

.ui-toggle input:checked + .ui-toggle-track{
    border-color:rgba(0,153,132,.42);
    background:linear-gradient(135deg, rgba(0,153,132,.82), rgba(91,170,224,.50));
    box-shadow:0 0 0 4px rgba(0,153,132,.12);
}

.ui-toggle input:checked + .ui-toggle-track::after{
    transform:translateX(20px);
    background:#fff;
}

.ui-toggle input:focus-visible + .ui-toggle-track{
    box-shadow:var(--btn-focus);
}

/* =========================================
   SEGMENTED CONTROL / VIEW SWITCH
========================================= */

.ui-segmented,
.ui-switch,
.ui-view-switch{
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:max-content;
    max-width:100%;
    padding:5px;
    border:1px solid var(--stroke);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.ui-segmented .btn,
.ui-switch button,
.ui-view-switch button{
    min-height:34px;
    padding:0 12px;
    border-radius:11px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text-soft);
    box-shadow:none;
    font-size:13px;
    font-weight:900;
}

.ui-segmented .btn:hover,
.ui-switch button:hover,
.ui-view-switch button:hover{
    color:var(--text);
    background:rgba(255,255,255,.055);
    transform:none;
}

.ui-segmented .btn.is-active,
.ui-switch button.is-active,
.ui-view-switch button.is-active{
    color:#fff;
    border-color:rgba(91,170,224,.35);
    background:linear-gradient(135deg, rgba(26,111,191,.88), rgba(91,170,224,.46));
    box-shadow:0 8px 18px rgba(7,9,14,.22);
}

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

@media (max-width:768px){
    .ui-section-actions,
    .ui-form-actions,
    .ui-filter-actions,
    .ui-calendar-nav,
    .ui-toolbar-actions{
        width:100%;
        justify-content:stretch;
    }

    .ui-section-actions .btn,
    .ui-form-actions .btn,
    .ui-filter-actions .btn{
        flex:1 1 auto;
    }

    .ui-table-actions{
        justify-content:flex-start;
    }
}

/* =========================================
   LIGHT MODE
========================================= */

body.light .btn,
body.light a.btn,
body.light button.btn{
    background:#e4e8ed;
    border-color:rgba(20,30,60,.08);
    color:var(--text);
    box-shadow:none;
}

body.light .btn:hover{
    background:#dce2e8;
    border-color:rgba(20,30,60,.14);
}

body.light .btn-primary,
body.light .btn.primary,
body.light .btn.is-active,
body.light .btn[aria-pressed="true"]{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
    box-shadow:0 10px 22px rgba(26,111,191,.12);
}

body.light .btn-ghost,
body.light .btn.ghost{
    background:transparent;
    color:var(--text-soft);
}

body.light .btn-ghost:hover,
body.light .btn.ghost:hover{
    background:rgba(20,30,60,.055);
    color:var(--text);
}

body.light .btn-danger{
    color:#9d2f24;
    border-color:rgba(254,46,46,.18);
    background:rgba(254,46,46,.08);
}

body.light .btn-danger:hover{
    color:#7c2119;
    border-color:rgba(254,46,46,.28);
    background:rgba(254,46,46,.12);
}

body.light .btn-success{
    color:#086b60;
    border-color:rgba(0,153,132,.18);
    background:rgba(0,153,132,.08);
}

body.light .btn-warning{
    color:#785516;
    border-color:rgba(244,181,25,.22);
    background:rgba(244,181,25,.12);
}

body.light .ui-action-link{color:var(--text-soft);}
body.light .ui-action-link:hover{color:var(--text);}

body.light .ui-checkbox-control,
body.light .ui-radio-control,
body.light .ui-toggle-track,
body.light .ui-segmented,
body.light .ui-switch,
body.light .ui-view-switch{
    background:rgba(13,30,48,.045);
    border-color:rgba(13,30,48,.14);
    box-shadow:none;
}

body.light .ui-segmented .btn,
body.light .ui-switch button,
body.light .ui-view-switch button{
    background:transparent;
    color:var(--text-soft);
}

body.light .ui-segmented .btn.is-active,
body.light .ui-switch button.is-active,
body.light .ui-view-switch button.is-active{
    color:#fff;
    background:linear-gradient(135deg, var(--brand-pink), var(--brand-purple));
}

/* =========================================
   VARIANTES OFICIALES CONSERVADAS DEL THEME
   Radios, checkboxes y switches cromaticos.
========================================= */

:root{
    --ui-blue:#5BAAE0;
    --ui-teal:#14b8a6;
    --ui-green:#16a34a;
    --ui-orange:#f59e0b;
    --ui-purple:#8b5cf6;
    --ui-pink:#ec4899;
    --ui-red:#ef4444;
    --ui-cyan:#06b6d4;
    --ui-gray:#64748b;
}

/* Alias: el componente oficial de chips conserva compatibilidad con .ui-tag-option. */
.ui-tag-select,
.ui-choice-group{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.ui-tag-option,
.ui-choice,
.ui-choice-pill{
    --tag-color:var(--choice-color, var(--ui-blue));
    --choice-color:var(--tag-color, var(--ui-blue));
}

.ui-tag-option input[type="radio"],
.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:7px;
    min-height:34px;
    padding:0 13px;
    border:1px solid color-mix(in srgb, var(--tag-color) 42%, transparent);
    border-radius:999px;
    background:color-mix(in srgb, var(--tag-color) 12%, transparent);
    color:color-mix(in srgb, var(--tag-color) 55%, #fff);
    font-size:13px;
    font-weight:900;
    line-height:1;
    transition:background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.ui-tag-option:hover span{
    border-color:color-mix(in srgb, var(--tag-color) 72%, transparent);
    background:color-mix(in srgb, var(--tag-color) 18%, transparent);
    transform:translateY(-1px);
}

.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) 86%, #0b1730), color-mix(in srgb, var(--tag-color) 44%, 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%, #fff);
    outline-offset:3px;
}

/* Colores de radio/checkbox tipo pill ya usados en modales y formularios. */
.ui-tag-option.is-blue,.is-choice-blue{--tag-color:var(--ui-blue);--choice-color:var(--ui-blue);}
.ui-tag-option.is-green,.is-choice-green{--tag-color:var(--ui-green);--choice-color:var(--ui-green);}
.ui-tag-option.is-orange,.is-choice-orange{--tag-color:var(--ui-orange);--choice-color:var(--ui-orange);}
.ui-tag-option.is-purple,.is-choice-purple{--tag-color:var(--ui-purple);--choice-color:var(--ui-purple);}
.ui-tag-option.is-pink,.is-choice-pink{--tag-color:var(--ui-pink);--choice-color:var(--ui-pink);}
.ui-tag-option.is-red,.is-choice-red{--tag-color:var(--ui-red);--choice-color:var(--ui-red);}
.ui-tag-option.is-cyan,.is-choice-cyan{--tag-color:var(--ui-cyan);--choice-color:var(--ui-cyan);}
.ui-tag-option.is-gray,.is-choice-gray,.is-choice-muted{--tag-color:var(--ui-gray);--choice-color:var(--ui-gray);}

/* Checkbox/radio clasico con color por variante. */
.ui-checkbox,
.ui-radio{
    --control-color:var(--ui-blue);
}
.ui-checkbox.is-blue,.ui-radio.is-blue{--control-color:var(--ui-blue);}
.ui-checkbox.is-green,.ui-radio.is-green{--control-color:var(--ui-green);}
.ui-checkbox.is-orange,.ui-radio.is-orange{--control-color:var(--ui-orange);}
.ui-checkbox.is-purple,.ui-radio.is-purple{--control-color:var(--ui-purple);}
.ui-checkbox.is-pink,.ui-radio.is-pink{--control-color:var(--ui-pink);}
.ui-checkbox.is-red,.ui-radio.is-red{--control-color:var(--ui-red);}
.ui-checkbox.is-cyan,.ui-radio.is-cyan{--control-color:var(--ui-cyan);}
.ui-checkbox.is-gray,.ui-radio.is-gray{--control-color:var(--ui-gray);}
.ui-checkbox.is-woman,.ui-radio.is-woman{--control-color:var(--ui-pink);}
.ui-checkbox.is-man,.ui-radio.is-man{--control-color:var(--ui-blue);}
.ui-checkbox.is-active,.ui-radio.is-active{--control-color:var(--ui-green);}
.ui-checkbox.is-inactive,.ui-radio.is-inactive{--control-color:var(--ui-orange);}

.ui-checkbox:hover .ui-checkbox-control,
.ui-radio:hover .ui-radio-control{
    border-color:color-mix(in srgb, var(--control-color) 62%, transparent);
}

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

/* Botones chicos de modal: componente oficial, no por modulo. */
.btn-xs,
.ui-modal .btn-xs,
.ui-modal .btn.btn-sm{
    min-height:30px;
    padding-inline:10px;
    border-radius:10px;
    font-size:12px;
    gap:6px;
}

.btn-icon.btn-xs,
.ui-modal .btn-icon.btn-xs{
    width:30px;
    min-width:30px;
    padding:0;
}

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

/* Switches cromaticos oficiales: genero, estado y vista. */
.ui-switch,
.ui-view-switch{
    border-radius:14px;
    padding:4px;
    gap:4px;
}

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

.ui-switch label,
.ui-switch .ui-switch-item,
.ui-view-switch label,
.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 label::before,
.ui-switch .ui-switch-item::before,
.ui-view-switch label::before,
.ui-view-switch .ui-switch-item::before{
    content:"";
    width:12px;
    height:12px;
    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-woman{--switch-color:var(--ui-pink);}
.ui-switch.is-gender .is-man,
.ui-switch .is-man{--switch-color:var(--ui-blue);}
.ui-switch.is-status .is-active,
.ui-switch.is-yesno .is-yes,
.ui-switch .is-green,
.ui-switch .is-yes{--switch-color:var(--ui-green);}
.ui-switch.is-status .is-inactive,
.ui-switch.is-yesno .is-no,
.ui-switch .is-orange,
.ui-switch .is-no{--switch-color:var(--ui-orange);}
.ui-view-switch .is-blocks,
.ui-switch .is-blocks{--switch-color:var(--ui-green);}
.ui-view-switch .is-list,
.ui-switch .is-list{--switch-color:var(--ui-blue);}
.ui-view-switch .is-calendar,
.ui-switch .is-calendar{--switch-color:var(--ui-purple);}

/* Switch binario tipo toggle con colores semanticos. */
.ui-toggle.is-active-toggle{--toggle-on:var(--ui-green);}
.ui-toggle.is-inactive-toggle{--toggle-on:var(--ui-orange);}
.ui-toggle.is-woman{--toggle-on:var(--ui-pink);}
.ui-toggle.is-man{--toggle-on:var(--ui-blue);}
.ui-toggle.is-calendar{--toggle-on:var(--ui-purple);}
.ui-toggle.is-list{--toggle-on:var(--ui-blue);}
.ui-toggle.is-blocks{--toggle-on:var(--ui-green);}

.ui-toggle input:checked + .ui-toggle-track{
    border-color:color-mix(in srgb, var(--toggle-on, var(--ui-green)) 48%, transparent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--toggle-on, var(--ui-green)) 86%, #0b1730), color-mix(in srgb, var(--toggle-on, var(--ui-green)) 50%, transparent));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--toggle-on, var(--ui-green)) 14%, transparent);
}

body.light .ui-tag-option span,
body.light .ui-choice span,
body.light .ui-choice-pill span{
    color:color-mix(in srgb, var(--tag-color, var(--choice-color, var(--ui-blue))) 65%, #243047);
    background:color-mix(in srgb, var(--tag-color, var(--choice-color, var(--ui-blue))) 8%, #fff);
}

body.light .ui-tag-option input:checked + span,
body.light .ui-choice input:checked + span,
body.light .ui-choice-pill input:checked + span,
body.light .ui-switch input:checked + span,
body.light .ui-view-switch input:checked + span{
    color:#fff;
}

/* Layout exclusivo del catalogo visual. */
.componentes-botones-page .componentes-botones-narrow{
    max-width:360px;
    margin-top:12px;
}

.componentes-demo-contextos{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
}

.componentes-demo-contextos > div{
    padding:14px;
    border:1px solid var(--stroke);
    border-radius:16px;
    background:rgba(255,255,255,.035);
}

body.light .componentes-demo-contextos > div{
    background:rgba(13,30,48,.035);
    border-color:rgba(13,30,48,.10);
}