/*==================================================
  PANEL DE PERSONALIZACIÓN
==================================================*/

.theme-button{

    position:fixed;

    top:25px;
    right:25px;

    width:55px;
    height:55px;

    border:none;

    border-radius:50%;

    background:var(--color-principal);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

    transition:.30s;

}

.theme-button:hover{

    transform:rotate(90deg) scale(1.08);

}

.theme-panel{

    position:fixed;

    top:0;
    right:-340px;

    width:340px;

    height:100vh;

    background:#111827;

    color:#fff;

    padding:25px;

    transition:.35s;

    z-index:9998;

    overflow:auto;

    box-shadow:-10px 0 30px rgba(0,0,0,.35);

}

.theme-panel.active{

    right:0;

}

.theme-panel h2{

    margin-bottom:20px;

}

.theme-panel h3{

    margin:20px 0 15px;

    font-size:16px;

}

.theme-panel hr{

    border:none;

    height:1px;

    background:#2b3648;

    margin:20px 0;

}

.theme-colors{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

}

.color-option{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.25s;

}

.color-option:hover{

    transform:scale(1.15);

}

.theme-switch{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

    cursor:pointer;

    font-size:15px;

}

.theme-switch input{

    transform:scale(1.3);

}