/* © Fernando Martínez Marín · VEOVIRTUAL® · veovirtual.com */

/* Lectura en voz alta */
html.vv-leer .vv-leer-btn {
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
width:38px;
height:38px;
min-width:38px;
margin:0 0 0 .4em;
padding:0;
border:2px solid var(--vv-oscuro,#10233a);
border-radius:50%;
background-color:#ffffff;
color:var(--vv-oscuro,#10233a);
font-size:16px;
line-height:1;
letter-spacing:0;
text-transform:none;
vertical-align:middle;
box-shadow:0 2px 8px rgba(0,0,0,.18);
cursor:pointer;
position:relative;
top:-.06em;
transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
html.vv-leer .vv-leer-btn svg {
width:20px;
height:20px;
}
html.vv-leer .vv-leer-btn:hover {
transform:scale(1.06);
background-color:#eef4fb;
}
html.vv-leer .vv-leer-btn.is-leyendo {
background-color:var(--vv-oscuro,#10233a);
color:#ffffff;
}
html.vv-leer .vv-leer-btn:focus-visible,
html.vv-leer .vv-leer-barra button:focus-visible,
html.vv-leer .vv-leer-barra select:focus-visible {
outline:3px solid var(--vv-acento,#005eb4);
outline-offset:2px;
box-shadow:0 0 0 6px #ffffff;
}
html.vv-leer .vv-leer-actual {
outline:3px solid var(--vv-acento,#005eb4);
outline-offset:6px;
border-radius:4px;
}
::highlight(vv-leer) {
background-color:#ffe066;
color:#111111;
}

html.vv-leer .vv-leer-barra {
position:fixed;
left:50%;
bottom:calc(var(--vv-barra-alto,0px) + var(--vv-leer-cookies,0px) + 16px);
z-index:100002;
box-sizing:border-box;
width:max-content;
max-width:calc(100vw - 32px);
transform:translateX(-50%);
padding:6px;
border-radius:18px;
background-color:var(--vv-oscuro,#10233a);
color:#ffffff;
font-family:var(--vv-fuente-textos,system-ui,sans-serif);
font-size:15px;
line-height:1.3;
box-shadow:0 14px 40px rgba(0,0,0,.28);
}
html.vv-leer .vv-leer-barra * {
box-sizing:border-box;
}
html.vv-leer .vv-leer-barra__fila {
display:flex;
align-items:center;
gap:4px;
}
html.vv-leer .vv-leer-barra__ico {
display:inline-flex;
flex:none;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background-color:rgba(255,255,255,.14);
}
html.vv-leer .vv-leer-barra__estado {
flex:1 1 auto;
min-width:0;
max-width:260px;
margin:0 8px 0 4px;
overflow:hidden;
color:#ffffff;
font-size:15px;
font-weight:700;
white-space:nowrap;
text-overflow:ellipsis;
}
html.vv-leer .vv-leer-barra__inicio,
html.vv-leer .vv-leer-barra__mandos {
display:flex;
align-items:center;
gap:4px;
}
html.vv-leer .vv-leer-barra.is-parado .vv-leer-barra__mandos,
html.vv-leer .vv-leer-barra:not(.is-parado) .vv-leer-barra__inicio {
display:none;
}
html.vv-leer .vv-leer-b {
display:inline-flex;
flex:none;
align-items:center;
justify-content:center;
gap:6px;
min-width:44px;
height:44px;
margin:0;
padding:0;
border:0;
border-radius:999px;
background-color:transparent;
color:#ffffff;
font-family:inherit;
font-size:15px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:background-color .2s ease;
}
html.vv-leer .vv-leer-b[hidden] {
display:none;
}
html.vv-leer .vv-leer-b:hover {
background-color:rgba(255,255,255,.16);
}
html.vv-leer .vv-leer-b--txt {
padding:0 16px 0 12px;
background-color:#ffffff;
color:var(--vv-oscuro,#10233a);
}
html.vv-leer .vv-leer-b--txt:hover {
background-color:#e6eef8;
}
html.vv-leer .vv-leer-b--txt + .vv-leer-b--txt {
background-color:rgba(255,255,255,.14);
color:#ffffff;
}
html.vv-leer .vv-leer-b[aria-expanded="true"] {
background-color:rgba(255,255,255,.22);
}
html.vv-leer .vv-leer-b svg {
width:22px;
height:22px;
}
html.vv-leer .vv-leer-ajustes {
position:absolute;
right:0;
bottom:calc(100% + 8px);
width:300px;
max-width:calc(100vw - 32px);
padding:16px;
border-radius:16px;
background-color:#ffffff;
color:var(--vv-texto,#173653);
box-shadow:0 14px 40px rgba(0,0,0,.24);
}
html.vv-leer .vv-leer-ajustes[hidden] {
display:none;
}
html.vv-leer .vv-leer-ajustes__t {
display:block;
margin:0 0 6px;
color:var(--vv-texto,#173653);
font-size:14px;
font-weight:800;
}
html.vv-leer .vv-leer-ajustes__voz {
display:block;
width:100%;
min-height:44px;
margin:0 0 14px;
padding:6px 10px;
border:2px solid #c9d9e8;
border-radius:10px;
background-color:#ffffff;
color:var(--vv-texto,#173653);
font-family:inherit;
font-size:15px;
}
html.vv-leer .vv-leer-ajustes__vel {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:6px;
}
html.vv-leer .vv-leer-ajustes__vel button {
min-height:44px;
margin:0;
padding:0;
border:2px solid #c9d9e8;
border-radius:10px;
background-color:#ffffff;
color:var(--vv-texto,#173653);
font-family:inherit;
font-size:15px;
font-weight:800;
cursor:pointer;
}
html.vv-leer .vv-leer-ajustes__vel button[aria-pressed="true"] {
border-color:var(--vv-oscuro,#10233a);
background-color:var(--vv-oscuro,#10233a);
color:#ffffff;
}
html.vv-leer .vv-leer-ajustes__aviso {
margin:14px 0 0;
padding:10px 12px;
border-radius:10px;
background-color:#fff4d6;
color:#5a4300;
font-size:14px;
line-height:1.4;
}
@media only screen and (max-width:767px) {
html.vv-leer .vv-leer-barra {
left:8px;
right:8px;
bottom:calc(var(--vv-barra-alto,0px) + var(--vv-leer-cookies,0px) + 8px);
width:auto;
max-width:none;
transform:none;
}
html.vv-leer .vv-leer-barra__ico {
display:none;
}
html.vv-leer .vv-leer-barra__estado {
max-width:none;
margin-left:8px;
font-size:14px;
}
html.vv-leer .vv-leer-barra .vv-leer-barra__estado {
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
}
html.vv-leer .vv-leer-barra__mandos {
flex:1 1 auto;
justify-content:space-around;
}
html.vv-leer .vv-leer-barra__inicio {
flex:1 1 auto;
min-width:0;
}
html.vv-leer .vv-leer-b--txt {
flex:1 1 auto;
min-width:0;
padding:0 12px;
}
html.vv-leer .vv-leer-b--txt span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
html.vv-leer .vv-leer-ajustes {
right:0;
left:0;
width:auto;
max-width:none;
}
}
@media (prefers-reduced-motion:reduce) {
html.vv-leer .vv-leer-btn,
html.vv-leer .vv-leer-b {
transition:none;
}
html.vv-leer .vv-leer-btn:hover {
transform:none;
}
}
@media (forced-colors:active) {
html.vv-leer .vv-leer-btn,
html.vv-leer .vv-leer-b,
html.vv-leer .vv-leer-barra {
border:2px solid ButtonText;
}
::highlight(vv-leer) {
background-color:Highlight;
color:HighlightText;
}
}
@media print {
html.vv-leer .vv-leer-btn,
html.vv-leer .vv-leer-barra {
display:none;
}
}