/* ==========================================================
   ZIKATMOS 2.0
   Interfaz universal
   ========================================================== */

.za-popover{
    position:fixed;
    top:56px;
    right:14px;
    z-index:951;

    width:min(320px, calc(100vw - 24px));

    background:rgba(20,20,20,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:14px;

    box-shadow:0 10px 28px rgba(0,0,0,.38);

    padding:14px;

    color:#fff;

    box-sizing:border-box;

    transform:scale(.96);
    opacity:0;

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.za-popover:not([hidden]){
    opacity:1;
    transform:scale(1);
}

.za-popover[hidden]{
    display:none;
}

.za-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
}

.za-header img{
    width:32px;
    height:32px;
    flex-shrink:0;
}

.za-status{

    display:flex;

    justify-content:center;

    margin-bottom:12px;

}

.za-master{

    border:none;

    border-radius:999px;

    padding:7px 20px;

    font-size:.75rem;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.za-master:hover{

    transform:scale(1.03);

}

.za-master.off{

    background:#444;

    color:#ddd;

}

.za-master.on{

    background:#81d742;

    color:#111;

}

.za-divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:12px 0;

}

.za-option{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:12px;

    transition:.20s;

}

.za-option:last-child{

    margin-bottom:0;

}

.za-left{

    display:flex;

    align-items:center;

    gap:10px;

}

.za-left i{

    width:18px;

    text-align:center;

    opacity:.85;

}

.za-option.disabled{

    opacity:.45;

}

.za-slider{

    margin-top:10px;

}

.za-slider-title{

    font-size:.75rem;

    margin-bottom:6px;

    opacity:.85;

}

.za-slider input{

    width:100%;

    accent-color:#81d742;

}

.za-slider input:disabled{

    opacity:.40;

    cursor:not-allowed;

}

.form-switch{

    position:relative;

    width:42px;

    height:22px;

    flex-shrink:0;

}

.form-switch input{

    display:none;

}

.form-switch span{

    position:absolute;

    inset:0;

    background:#555;

    border-radius:999px;

    cursor:pointer;

    transition:.25s;

}

.form-switch span:before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    left:2px;

    top:2px;

    background:#fff;

    border-radius:50%;

    transition:.25s;

}

.form-switch input:checked + span{

    background:#81d742;

}

.form-switch input:checked + span:before{

    transform:translateX(20px);

}

.za-voice-panel{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
    max-height .30s ease,
    opacity .30s ease,
    margin-top .30s ease;

}

.za-voice-panel.show{

    max-height:260px;

    opacity:1;

    margin-top:10px;

}

.za-master:focus,
.form-switch span:focus{

    outline:none;

}

@media (max-width:480px){

    .za-popover{

        width:calc(100vw - 20px);

        right:10px;

        left:10px;

    }

}
.za-icon-btn{

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    margin:0;

    border:none;
    background:transparent;

    color:rgba(255,255,255,.70);

    cursor:pointer;

    transition:color .2s ease, transform .2s ease;

}

.za-icon-btn:hover{

    color:#fff;

    transform:scale(1.08);

}

.za-icon-btn i{

    font-size:18px;

    line-height:1;

}

.za-icon-btn.reading{

    color:#8ddf3d;

}

.za-icon-btn:disabled{

    opacity:.35;

    cursor:default;

}

img.icon-zikatmos {
    width: 30px;
    height: 30px;
    filter: saturate(0);
}
img.icon-zikatmos:hover {
    filter: saturate(1);
}
button#zaButton {
    background: none;
    border: none;
    margin-left: 8px;
    cursor: pointer;
}

.slider-za {
    background: rgba(0, 0, 0, 0.7)!important;
    border: 1px solid rgba(255, 255, 255, 0.1)!important;
    margin-left: 0px!important;
    cursor: pointer;
}
.slider-za:hover {
    background: rgba(0, 212, 255, 0.2)!important;
    border-color: #00d4ff!important;
    color: #00d4ff!important;
    transform: scale(1.1)!important;
}
.slider-za svg{
    width:32px;
    height:32px;
    transition:.25s;
}

.sidebar-icon-btn {
border: 2px solid rgba(255, 255, 255, 0.3)!important;
}

.sidebar-icon-btn:hover {
    background: var(--zikpic-gradient)!important;
    border-color: var(--zikpic-green)!important;
    transform: scale(1.1)!important;
    color: white!important;
}