@charset 'UTF-8';

/* BOTON IR AL DIRECTO  + INFO*/
[class*='pfaudio'] .mainElem ._directo { display: block; cursor: pointer;}
[class*='pfaudio'] .mainElem ._directo {place-self: self-start;opacity: 0.4;transition: opacity,background 0.3s;display: inline-block;height: 3.4rem;border: 0.1rem solid #302c2b;border-radius: 0.4rem;}
[class*='pfaudio'] .mainElem ._directo .rtve-icons { width: 13rem;text-align: center;font-size: 1.6rem;line-height: 2.4rem;padding: 0.4rem 1.8rem;}
[class*='pfaudio'] .mainElem ._directo .rtve-icons:before {content: '';width: 0.7rem;height: 0.7rem;display: inline-block;margin-right: 0.7rem;border-radius: 100%;background: #E30613;vertical-align: middle;}
[class*='pfaudio'] .mainElem ._directo:hover {opacity: 1;background: #302c2b;}
[class*='pfaudio'] .mainElem ._directo:hover .rtve-icons {color: #fff;}
[class*='pfaudio'] .mainElem ._directo.active .rtve-icons:before {display: none;}
[class*='pfaudio'] .mainElem ._directo {margin-top:1rem;}


/*** ESTILOS DESPLEGABLE DIRECTOS DE CADA TERRITORIAL ***/
.directoBox {margin-top: 1rem;}
.directoBox [role="listbox"] {display:flex;flex-flow:column wrap;height:auto;max-height:30rem;padding:0;}
.directoBox, .directoBox * {outline: 0 none;}
.directoBox [role="listbox"] > li {margin: 0 5rem;;padding: 0.4rem;align-items: center;cursor: pointer;margin-left:0}
.directoBox [role="listbox"] > li:hover {opacity:.8;}
.directoBox [role="listbox"] > li > a:before {width: 1.2rem;height: 1.2rem;margin: 0.3rem;content: '';display: inline-block;float: left;background-color: rgba(171,169,169,0.70);border-radius: 100%;border: 0.2rem solid transparent;}
.directoBox strong[role="option"] {font-size: 1.6rem;line-height: 2.25rem;padding: 0 0.8rem;color: #111;text-transform: capitalize;font-weight: 400;display: inline-block;}

.directoBox [role="listbox"] > .active {pointer-events: none;}
.directoBox [role="listbox"] > .active  > a:before {background: #c41818;border: 0.2rem solid #c4c3c3;}
.directoBox [role="listbox"] > li > a:hover::before {background: #c41818;border: 0.2rem solid #c4c3c3;}

/********** ESTILOS DEL TAB PFPROGRAMA AUDIO - TERRITORIALES *********/
/* 
COLORES 
naranja active : #fe7900
naranja hover: #fbb97f
gris mapa: #bcbcbc
*/
/*.ccttLinks {display: flex;align-items: center; justify-content: space-between;}*/
.ccttLinks {display: grid;grid-template-columns: 50% 50%;align-items: center;}
.ccttBox {}
.ccttBox [role="listbox"] {display:flex;flex-flow:column wrap;height:auto;max-height:30rem;padding:0;}
.ccttBox, .ccttBox * {outline: 0 none;}
.ccttBox [role="listbox"] > li {margin: 0.5rem 5rem;;padding: 0.4rem;align-items: center;cursor: pointer;margin-left:0}
.ccttBox [role="listbox"] > li:hover {opacity:.8;}
.ccttBox [role="listbox"] > li > a:before {width: 1.2rem;height: 1.2rem;margin: 0.3rem;content: '';display: inline-block;float: left;background-color: rgba(171,169,169,0.70);border-radius: 100%;border: 0.2rem solid transparent;}
.ccttBox strong[role="option"] {font-size: 1.6rem;line-height: 2.25rem;padding: 0 0.8rem;color: #111;text-transform: capitalize;font-weight: 400;display: inline-block;}

.ccttBox [role="listbox"] > .active {pointer-events: none;}
.ccttBox [role="listbox"] > .active > a:before {background: #fe7900;border: 0.2rem solid #c4c3c3;}
.ccttBox [role="listbox"] > li > a:hover::before {background: #fe7900;border: 0.2rem solid #c4c3c3;}


/**** MAPA TERRITORIOS ****/
.ccttMapa {margin-right: 5rem;text-align: center;}
.ccttMapa svg {width: 50rem;}
.ccttMapa svg .st0.active, .ccttMapa svg .st1.active, .ccttMapa svg .st2.active {fill: #fe7900;}
.ccttMapa svg .active {pointer-events: none;}
.ccttMapa svg > g:not(.active) > path:hover + path {stroke-width: 1.2; fill:#fbb97f;cursor: pointer;}
.ccttMapa svg > g[data-cctt="baleares"]:hover {stroke-width: 1.2; fill:#fbb97f;cursor: pointer;}
.ccttMapa svg > g:not(.active) > path[data-cctt="canarias"]:hover {stroke-width: 1.2; fill:#fbb97f;cursor: pointer;}
.ccttMapa svg > *:not(.active):not(.st3):hover {stroke-width: 1.2; fill:#fbb97f;cursor: pointer;}

@media (max-width: 1300px) {
  .ccttLinks {display: block;}
}

