body {
    background-color: #CAE9ED;
}

#bloquestop {
    background-color: #1F1F1F;
    color: #CAE9ED;   
}

#licencia .licencia {
    color: #1F1F1F;
}

#cajaprincipal, #footer {
    background-color: #1F1F1F;
    color: #CAE9ED;
}

#cajaprincipal a:link, #footer a:link {
    color: #CAE9ED;
}

#cajaprincipal a:visited, #footer a:visited {
    color: #CAE9ED;
}

#ygn {
    background-color: #1F1F1F;
}

h1, h2, h3, h4, ul, li, .infoblanca, .infoazul, .boton, .botonmicro, .botonmini,
#bloquesindex .bloque-derecha, #bloquesindex .bloque-izquierda,
.megamenu .bloque-lineal {
    font-family: IBMPlexMono !important;
}

ul, li, p, summary, .comentario, .cuando, .info {
    font-family: IBMPlexMono !important;
    color: #CAE9ED !important;
}

h1 {
    color: #1F1F1F;
    background-color: #CAE9ED;
    font-family: kodeMono-Medium !important;
}

h2 {
    background-color: unset;
    color: #CAE9ED;
    border-top: #CAE9ED 1px solid;
    border-bottom: #CAE9ED 1px solid;
}

h3 {
    color: #1F1F1F;
    background-color: #CAE9ED;
}

h4 {
    background-color: #1F1F1F !important;
    color: #CAE9ED !important;
    border-bottom: 1px dashed #CAE9ED !important;
}

#bloquesindex {
    background-color: unset;
}

#bloquesindex .bloque {
    font-family: "kodeMono-Medium" !important;
}

.menu-movil-contenedor {
    background-color: #1F1F1F !important;
}

#menu {
    z-index: 999;
}

#menu.menu-movil-activo .wrapper-menu {
    background-color: #1F1F1F;
}

#boton-menu-hamburguesa {
    color: #CAE9ED;
}

.bloquedatosedicion {
    width: 95%;
    padding: 10px;
    border: 1px dashed #CAE9ED;
    text-align: left;
    margin: 2.5rem auto;
    opacity: 0.9;
    border-radius: 6px;
    font-size: 15px;
    color: #CAE9ED;
}

.bloquedatosedicion .comentario {
    font-family: IBMPlexSerif;
    font-size: 1.5rem;
}

.megamenu {
    background-color: #1F1F1F;
}

#bloquesindex .bloque:hover, 
#bloquesindex .bloque-derecha:hover, 
#bloquesindex .bloque-izquierda:hover,
.megamenu .bloque-lineal:hover {
    background-color: #CAE9ED !important;
    color: #1F1F1F !important;
    text-decoration: none;
}

#tituloindex {
    background-color: #CAE9ED;
    color: #1F1F1F;
}

.infoblanca {
    background-color: unset;
    color: #CAE9ED !important;
    border: 1px dashed #CAE9ED;
}

.pretitulo {
    font-family: IBMPlexMono !important;
    color: #CAE9ED;
    border: 1px #CAE9ED solid;
}
.botonmenupanel {
    display: block;
    font-family: IBMPlexMono;
    font-size: 0.8rem;
    font-weight: bold;
    border: #CAE9ED solid 1px;
    border-radius: 0 1rem 1rem 0;
    padding: 0.5rem;
    margin: 1rem auto;
}

.botonmenupanelmarcado {
    display: block;
    font-family: IBMPlexMono;
    font-size: 0.8rem;
    font-weight: bold;
    border: #CAE9ED solid 1px;
    border-radius: 0 1rem 1rem 0;
    padding: 0.5rem;
    margin: 1rem auto;
    text-decoration: none;
    background-color: #CAE9ED;
    color: #1F1F1F !important;
}

.botonmenupanel:hover, .botonmenupanelmarcado:hover { 
    text-decoration: none;
    background-color: #CAE9ED;
    color: #1F1F1F !important;
}

.cuadromini, .cuadro, .cuadromedio, .cuadrogrande,
.cuadroexplora .titulo, .cuadroexplora .seccion {
    font-family: IBMPlexSerif;
}

.propiedadactiva {
    background-color: unset;
    font-family: KodeMono-Medium;
}

.cuadroexplora .seccion {
    font-size: 1.6em;
}

.cuadroexplora .bloque {
    background-color: unset;
    border: 1px dashed #CAE9ED;
}

.cuadroexplora .titulo, .cuadroexplora .seccion, .cuadroexplora .icono {
    color: #CAE9ED;
}

.selectorpropiedades .cuadrodatos {
    background-color: unset;
    font-family: KodeMono-Medium;
    font-size: 1.5rem;
    color: #CAE9ED !important;
    border: 1px dashed #CAE9ED;
}

.cuadrodatos, .cuadrodatosmini, .cuadrodatosgrande {
    color:#1F1F1F !important;
    background-color:#CAE9ED;
}

.cuadrodatos:hover, .cuadrodatosmini:hover, .cuadrodatosgrande:hover {
    color:#1F1F1F !important;
    background-color:#CAE9ED;
}

td {
    background-color: unset !important;
}

#cajacookies { 
    font-family: IBMPlexMono;
    background-color: #1F1F1F; 
    color: #CAE9ED;
} 

#contacto .estado {
    color: #CAE9ED;
}

#bannerDonacion p {
    color: #1F1F1F !important;
}

.label {
    display: block;
    font-size: 0.8rem;
    font-family: IBMPlexMono;
    color: #CAE9ED;
    margin-left: 1rem;
    margin-top: 1rem;
}

/* Pantalla ordenador */
@media screen and (min-width: 970px) and (max-width: 1199px) {

    .login {
        width: 35%;
        margin: 0 auto;
    }

    .menu {
        float: left;
        width: 25%;
        padding: 1rem;
    }

    .central {
        float: left;
        width: 65%;
        padding: 1rem;
        margin-top: 3rem;
    }

    .hint {
        display: block;
        font-size: 0.8rem;
        color: #D7E2E2;
        margin-left: 1rem;
        margin-top: 0.5rem;
    }

    .hint:before { 
        font: var(--fa-font-regular);
        display: inline-block;
        content: "\f05a";
        margin-right: 0.2rem;
    }

    .selectmenu {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 0 1rem 1rem 0;
        padding: 0.5rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .selectmenu:hover { 
        text-decoration: none;
        background-color: #CAE9ED;
        color: #fff !important;
    }

    .boton { 
        font-size: 1.5rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .botonmini { 
        font-size: 1rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.3rem;
    }

    .botonmicro{ 
        font-size: 0.6rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.1rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .boton:hover, .botonmini:hover { 
        background-color: #1F1F1F;
        text-decoration: none;
        color: #CAE9ED;
    }

    .botoneraedicion {
        float: right;
    }

    .botoneraedicion button {
        margin-left: 0.5rem;
    }

    .cuadromini {
        max-width: 95%;
        min-width: 25%;
        font-size: 0.8rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
       
    .cuadro {
        max-width: 95%;
        min-width: 50%;
        font-size: 1rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .cuadromedio {
        max-width: 95%;
        min-width: 50%;
        font-size: 1.5rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
    
    .cuadrogrande {
        max-width: 95%;
        min-width: 50%;
        font-size: 2rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .mceLayout {
        width: 90% !important;
    }

    .divportadajuego {
        float: left;
        width: 4rem;
        height: 4rem;
        overflow:hidden;  
        margin: 0 0.5rem 0 0.2rem;
        border-radius: 6px;       
    }

    .portada_edicion {
        border: 0px;
        border-radius: 6px;
        min-height: 4rem;
        max-width: 4rem;
        margin-right: 5px;
    }
    
    .portada_edicion_h {
        border: 0px;
        border-radius: 6px;
        height: 4rem;
        min-width: 4rem;
        margin-left: -56px;
    }

}

/* Pantalla móviles */
@media screen and (max-width: 480px) {

    #tituloindex {
        text-align: center;
    }

    #boxcabecera {
        margin-bottom: -2rem;
    }

    .login {
        width: 100%;
        margin: 0 auto;
    }

    .menu {
        float: left;
        width: 100%;
    }

    .central {
        float: left;
        width: 100%;
    }

    .hint {
        display: block;
        font-size: 0.8rem;
        color: #D7E2E2;
        margin-left: 1rem;
    }

    .hint:before { 
        font: var(--fa-font-regular);
        display: inline-block;
        content: "\f05a";
        margin-right: 0.2rem;
    }

    .selectmenu {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 0 1rem 1rem 0;
        padding: 0.5rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .selectmenu:hover { 
        text-decoration: none;
        background-color: #CAE9ED;
        color: #fff !important;
    }

    .bloquedatosedicion {
        text-align: center;
    }

    .boton { 
        font-size: 1.5rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .botonmini { 
        font-size: 1rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.3rem;
    }

    .botonmicro{ 
        font-size: 0.6rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.1rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .boton:hover, .botonmini:hover { 
        background-color: #B6D7E6;
        text-decoration: none;
        color: #000;
    }

    .botoneraedicion {
        width: 100%;
        margin-top: 1.5rem;
    }

    .botoneraedicion .botonmini {
        margin-left: 2rem;
    }

    .cuadromini {
        max-width: 95%;
        min-width: 25%;
        font-size: 0.7rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
       
    .cuadro {
        max-width: 95%;
        min-width: 50%;
        font-size: 0.9rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .cuadromedio {
        max-width: 95%;
        min-width: 50%;
        font-size: 1.3rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
    
    .cuadrogrande {
        max-width: 95%;
        min-width: 50%;
        font-size: 1.8rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    table.mceLayout, textarea.tinyMCE {
        width: 100% !important;
    }

    .selectorpropiedades {
        text-align: center;
        margin-bottom: 2rem;
        margin-top: 2rem;
    }

    .divportadajuego {
        width: 8rem;
        height: 8rem;
        overflow:hidden;  
        margin: 0 auto;
        border-radius: 6px;       
    }

    .portada_edicion {
        border: 0px;
        border-radius: 6px;
        min-height: 8rem;
        max-width: 8rem;
        margin-right: 5px;
    }
    
    .portada_edicion_h {
        border: 0px;
        border-radius: 6px;
        height: 8rem;
        min-width: 8rem;
        margin-left: -56px;
    }


}

/* Pantalla tablets */
@media screen and (min-width: 481px) and (max-width: 969px) {

    .login {
        width: 45%;
        margin: 0 auto;
    }

    .menu {
        float: left;
        width: 25%;
        padding: 1rem;
    }

    .central {
        float: left;
        width: 65%;
        padding: 1rem;
    }

    .hint {
        display: block;
        font-size: 0.8rem;
        color: #D7E2E2;
        margin-left: 1rem;
    }

    .hint:before { 
        font: var(--fa-font-regular);
        display: inline-block;
        content: "\f05a";
        margin-right: 0.2rem;
    }

    .selectmenu {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 0 1rem 1rem 0;
        padding: 0.5rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .selectmenu:hover { 
        text-decoration: none;
        background-color: #CAE9ED;
        color: #fff !important;
    }

    .boton { 
        font-size: 1.5rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .botonmini { 
        font-size: 1rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.3rem;
    }

    .botonmicro{ 
        font-size: 0.6rem;
        font-weight: bold;
        color: #1F1F1F;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.1rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .boton:hover, .botonmini:hover { 
        background-color: #B6D7E6;
        text-decoration: none;
        color: #000;
    }

    .botoneraedicion {
        float: right;
    }

    .botoneraedicion button {
        margin-left: 0.5rem;
    }

    .cuadromini {
        max-width: 95%;
        min-width: 25%;
        font-size: 0.8rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
       
    .cuadro {
        max-width: 95%;
        min-width: 50%;
        font-size: 1rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .cuadromedio {
        max-width: 95%;
        min-width: 50%;
        font-size: 1.5rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
    
    .cuadrogrande {
        max-width: 95%;
        min-width: 50%;
        font-size: 2rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .mceLayout {
        width: 80% !important;
    }

    .divportadajuego {
        float: left;
        width: 4rem;
        height: 4rem;
        overflow:hidden;  
        margin: 0 0.5rem 0 0.2rem;
        border-radius: 6px;       
    }

    .portada_edicion {
        border: 0px;
        border-radius: 6px;
        min-height: 4rem;
        max-width: 4rem;
        margin-right: 5px;
    }
    
    .portada_edicion_h {
        border: 0px;
        border-radius: 6px;
        height: 4rem;
        min-width: 4rem;
        margin-left: -56px;
    }


}


/* Pantalla full width */
@media screen and (min-width: 1200px) {

    .login {
        width: 35%;
        margin: 0 auto;
    }

    .menu {
        float: left;
        width: 25%;
        padding: 1.5rem;
    }

    .central {
        float: left;
        width: 65%;
        padding: 2rem;
    }

    .hint {
        display: block;
        font-size: 0.8rem;
        color: #D7E2E2;
        margin-left: 1rem;
    }

    .hint:before { 
        font: var(--fa-font-regular);
        display: inline-block;
        content: "\f05a";
        margin-right: 0.2rem;
    }



    .selectmenu {
        display: block;
        font-size: 1rem;
        font-weight: bold;
        color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 0 1rem 1rem 0;
        padding: 0.5rem;
        -webkit-appearance: none;
        appearance: none;
    }

    .selectmenu:hover { 
        text-decoration: none;
        background-color: #CAE9ED;
        color: #fff !important;
    }

    .boton { 
        font-size: 1.5rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .botonmini { 
        font-size: 1rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.3rem;
    }

    .botonmicro{ 
        font-size: 0.6rem;
        font-weight: bold;
        color: #1F1F1F !important;
        background-color: #CAE9ED;
        border: #CAE9ED solid 1px;
        border-radius: 6px;
        padding: 0.1rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .boton:hover, .botonmini:hover { 
        background-color: #B6D7E6;
        text-decoration: none;
        color: #000;
    }

    .botoneraedicion {
        float: right;
    }

    .botoneraedicion button {
        margin-left: 0.5rem;
    }

    .cuadromini {
        max-width: 95%;
        min-width: 25%;
        font-size: 0.8rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
       
    .cuadro {
        max-width: 95%;
        min-width: 50%;
        font-size: 1rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .cuadromedio {
        max-width: 95%;
        min-width: 50%;
        font-size: 1.5rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }
    
    .cuadrogrande {
        max-width: 95%;
        min-width: 50%;
        font-size: 2rem;
        color: #000000;
        border: #CAE9ED solid 1px;
        border-radius: 8px;
        padding: 6px 6px 4px 8px;
        margin-bottom: 5px;
    }

    .mceLayout {
        width: 80% !important;
    }

    .selectorpropiedades {
        float: right;
        text-align: center;
        margin-right: 2rem;
        margin-top: 2rem;
    }

    .divportadajuego {
        float: left;
        width: 4rem;
        height: 4rem;
        overflow:hidden;  
        margin: 0 0.5rem 0 0.2rem;
        border-radius: 6px;       
    }

    .portada_edicion {
        border: 0px;
        border-radius: 6px;
        min-height: 4rem;
        max-width: 4rem;
        margin-right: 5px;
    }
    
    .portada_edicion_h {
        border: 0px;
        border-radius: 6px;
        height: 4rem;
        min-width: 4rem;
        margin-left: -56px;
    }

}

.login input {
    text-align: center;
}

input, select, textarea, .select2-search__field {
    background-color: #2c2c2c !important;
    color: #CAE9ED !important;
}

.anadir {
    background-color: green;
}

.borrar {
    background-color: rgb(255, 145, 145);
}

.borrar:hover {
    background-color: darkred;
    color: white;
}

.imagenesflex {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

.bloquedatosedicion .titulo {
    font-size: 1.5rem;
    color: #CAE9ED;
}

.parpadea{
    animation:blinkingText 1.5s infinite;
}
    @keyframes blinkingText{
        0%{     color: #CAE9ED;    }
        49%{    color: #CAE9ED; }
        60%{    color: transparent; }
        99%{    color: transparent;  }
        100%{   color: #CAE9ED;    }
    }


/* Personaliza el dropdown (menú desplegable) */
.select2-dropdown, .select2-results__option, .select2-selection__rendered, .select2-selection__placeholder {
    color: #1F1F1F !important;
	font-size: 1.2rem;
}



/* Cambia el color de fondo y el color de texto de la opción seleccionada */
.select2-results__option--highlighted[aria-selected] {
    background-color: #1F1F1F !important;
    color: #CAE9ED !important; 
}

::-webkit-scrollbar {
    width: 1em;
  }
   
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
   
::-webkit-scrollbar-thumb {
    background-color: #1F1F1F;
    outline: 1px solid #1F1F1F;
    border-radius: 5px;
  }

.galleta {
    color: #CAE9ED !important;
}



/* --- Estilos base (Escritorio) --- */

.toggle-switch-label {
    /* Mantén tus estilos de etiqueta aquí */
    display: flex; 
    align-items: center;
    cursor: pointer;
    font-size: 1em; 
    gap: 15px; /* Aumentado el espacio para el checkbox más grande */
    position: relative; 
}

/* Aplicar el escalado al checkbox nativo */
.toggle-switch-input {
    /* Por defecto en escritorio es visible (opacity: 1) */
    opacity: 1; 
    width: auto;
    height: auto;
    position: static;
    
    /* Aumentar el tamaño del checkbox nativo */
    transform: scale(1.5); /* Esto lo hace 1.5 veces más grande */
    margin: 0; /* Opcional: ajustar el margen si el escalado desplaza otros elementos */
}

/* En ESCRITORIO, el elemento visual del interruptor debe estar OCULTO */
.toggle-switch-visual,
.toggle-switch-visual::before {
    display: none;
}


/* --- Estilos específicos para MÓVILES (Media Query) --- */
@media (max-width: 768px) { /* Por ejemplo, pantallas de tablet y menos */

    /* --- Estilos por defecto para el contenedor principal --- */
.toggle-switch-label {
    display: flex;
    align-items: center; /* Centrar verticalmente */
    cursor: pointer;
    font-size: 1.1em; /* Opcional: Aumentar la fuente base */
    gap: 10px; /* Espacio entre el interruptor y el texto */
    user-select: none;
}

/* Ocultar el checkbox nativo */
.toggle-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute; /* Importante para que no ocupe espacio, pero sea accesible */
}

    /* Estilos del texto */
    .toggle-switch-text {
        order: 2; /* Pone el texto a la derecha del interruptor */
        padding-right: 10px;
    }

    /* 1. Contenedor visual del interruptor (la "pista") */
    .toggle-switch-visual {
        order: 1; /* Pone el interruptor a la izquierda del texto */
        position: relative;
        display: inline-block;
        width: 60px; /* Ancho total del interruptor */
        height: 34px; /* Altura total del interruptor */
        background-color: #666; /* Color cuando está DESACTIVADO */
        border-radius: 34px;
        transition: background-color 0.4s;
        flex-shrink: 0; /* Asegura que no se haga más pequeño */
    }

    /* 2. El "tirador" o bolita del interruptor */
    .toggle-switch-visual::before {
        content: "";
        position: absolute;
        height: 26px; /* Altura del tirador */
        width: 26px; /* Ancho del tirador */
        left: 4px; /* Posición inicial */
        bottom: 4px; /* Posición inicial */
        background-color: #1F1F1F;
        border-radius: 50%;
        transition: transform 0.4s; /* Para la animación de movimiento */
    }

    /* --- ESTADO ACTIVO (CHECKED) --- */
    
    /* 3. Cuando el checkbox está checked, cambiar el color de la pista */
    .toggle-switch-input:checked + .toggle-switch-visual {
        background-color: #CAE9ED; /* Un color más de "apoyo" o activo */
    }

    /* 4. Cuando el checkbox está checked, mover el tirador a la derecha */
    .toggle-switch-input:checked + .toggle-switch-visual::before {
        /* 60px (ancho) - 26px (tirador) - 8px (4px left + 4px right) = 26px de movimiento */
        transform: translateX(26px); 
    }
}

#iniciarsesion {
    box-shadow: #CAE9ED59 0 .0 1rem 0;
    padding: 1rem;
    border-radius: 1rem;
}




    .linkedin-mensaje { padding:15px; margin:15px 0; border-radius:4px; }
    .linkedin-error { background:#fee; color:#c33; border:1px solid #fcc; }
    .linkedin-exito { background:#efe; color:#3c3; border:1px solid #cfc; }
    .linkedin-textarea { width:100%; height:200px; padding:10px; border:1px solid #ddd; border-radius:4px; font-family:monospace; margin:10px 0; }
    .linkedin-boton { padding:10px 20px; margin:10px 5px 10px 0; border:none; border-radius:4px; cursor:pointer; font-size:14px; }
    .linkedin-boton-primario { background:#0077b5; color:#fff; }
    .linkedin-boton-primario:hover { background:#005a87; }
    .linkedin-registro { border:1px solid #ddd; padding:15px; margin:15px 0; border-radius:4px; }
    .linkedin-registro-empresa { font-weight:bold; color:#0077b5; font-size:1.1em; }
    .linkedin-label { display:block; margin-top:15px; margin-bottom:5px; font-weight:bold; color:#333; }
    .linkedin-input, .linkedin-select { width:100%; padding:8px; border:1px solid #ddd; border-radius:4px; margin-bottom:10px; }
    .linkedin-checkbox-group { margin:10px 0; }
    .linkedin-info { padding:10px; background:#f0f0f0; border-left:3px solid #0077b5; margin:15px 0; border-radius:2px; }

.registroLinkedIn {
    border: 2px dashed #0077b5;
    padding: 16px;
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

    .registroLinkedIn.excluido .empresaNombre::before {
    content: "✗ ";
    color: #dc3545;
    font-weight: bold;
}

.registroLinkedIn.incluido .empresaNombre::before {
    content: "✓ ";
    color: #28a745;
    font-weight: bold;
}

.boton-incluir {
    padding: 8px 16px;
    font-size: 1em;
    font-weight: bold;
    border-radius: 6px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 110px;
}

.boton-incluir.accion-excluir {
    background-color: #dc3545;
    border-color: #c82333;
    color: white;
}

.boton-incluir.accion-excluir:hover {
    background-color: #c82333;
    transform: scale(1.05);
}

.boton-incluir.accion-incluir {
    background-color: #28a745;
    border-color: #218838;
    color: white;
}

.boton-incluir.accion-incluir:hover {
    background-color: #218838;
    transform: scale(1.05);
}

#mosaicogeneros .icono, #mosaicogeneros .genero, #mosaicogeneros .subgenero {
    color: unset !important;
}

#mosaicogeneros .td {
    border-color: unset !important;
}