/* FIXs Style */
header { position: static; }

    /* Header Lectura*/
.header { position: fixed; width: 100%; height: 48px; padding: 8px 12px; top: -56px; left: 0; overflow: hidden; background-color: #fff; border-bottom: 1px solid #bbb; z-index: 999; -webkit-transition: all .5s; transition: all .5s ease; }
.sticky { top: 0 !important;  }
.header .logo-sticky { display: inline-block; width: 120px }
.header .logo-sticky img { width: 100%; height: auto; max-width: 120px; margin-left: 6px; }
@media only screen and (max-width: 767px) {
.header.sticky { box-shadow: 0 4px 15px rgba(255,255,255,.3); }
.header .logo-sticky { width: 112px }
.header .logo-sticky img { max-width: 112px; }
}

    /* Opciones Mobile*/
@media only screen and (max-width: 767px) {
.header a.op-toggle { display:inline-block; position:relative; width:56px; height:26px; margin-right:14px; padding: 8px; }
    .header .op-toggle, .header .op-toggle:active, .header .op-toggle:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.header a.op-toggle span { display:block; position:absolute; right: 0; width:16px; height:1.5px; background:#80878c; border-radius:2px; transition:.25s ease-in-out; }
.header a.op-toggle span:nth-child(2){top: 50%;opacity:1;} .header a.op-toggle span:nth-child(3){top: 50%;transform:rotate(90deg);}
    .op-open { height: 120px; top: 0 !important; }
    .header a.btn-open span:nth-child(2){top: 50%;transform:rotate(180deg);opacity:0;} .header a.btn-open span:nth-child(3){top: 50%;transform:rotate(180deg);}
.ico-read { display: block; width: 100%; height: auto; max-width: 24px; margin: -6px 4px 0 0; }
}

    /* Container */
@media only screen and (min-width: 992px){
.container-lectura { display: inline-block; }
.op-article { width: 240px; float: right; margin-right: 24px; height: auto; display: flex; justify-content: space-around; align-items: center; }
.mod-switch { display: flex; align-items: center; & span {font-family: 'DM Sans', sans-serif; font-size: 12px; color: #787880; text-align: right; letter-spacing: .02em; line-height: 1.4;} }
    .mod-switch span:hover { cursor: default !important;}
    .mod-switch.switch:hover, .mod-switch.slider:hover { cursor: pointer !important;}

.temp { display: block; background-color: #80878c; font-size: 14px; font-weight: 600; padding: 5px 20px; border-radius: 24px; color: white; }    
}

@media only screen and (max-width: 767px){
    /* Container */
.container-lectura {opacity: 0; visibility: hidden; transform: translateY(-8px); transition:all .25s ease; pointer-events: none; }
.container-lectura.show-op {opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;}
.op-article {width: 100%; height: auto; display: flex; justify-content: end; align-items: center; padding: 20px 16px;}
.mod-switch { display: flex; align-items: center; & span {font-family: 'DM Sans', sans-serif; font-size: 13px; color: #787880; text-align: right; letter-spacing: .02em;} }
    .mod-switch:hover { cursor: default !important; }

.temp { display: block; background-color: #80878c; font-size: 15px; font-weight: 600; padding: 8px 16px; border-radius: 24px; color: white; }
}

    /* Switch Modo Lectura */
.switch { position: relative; display: inline-block; width: 32px; height: 16px; margin-left: 12px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #bbb; -webkit-transition: .3s; transition: .3s; border-radius: 8px; }
.slider:before { position: absolute; content: ""; height: 12px; width: 18px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 8px; }
input:checked + .slider { background-color: #5ad36c; }
input:checked + .slider:before { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); }
@media only screen and (min-width: 992px){
    .slider:active::before { -webkit-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); }
    input:checked + .slider:active::before { -webkit-transform: translateX(7px); -ms-transform: translateX(7px); transform: translateX(7px); }
}
@media only screen and (max-width: 767px){
.switch { width: 40px; height: 20px; }
.slider { background-color: #bbb; border-radius: 12px; }
.slider:before { height: 16px; width: 24px; border-radius: 12px; }
input:checked + .slider { background-color: #5ad36c; }
input:checked + .slider:before { -webkit-transform: translateX(12px); -ms-transform: translateX(12px); transform: translateX(12px); }
.tag-read-mode { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
}