/* Estilos específicos para la página de temas */

#temas-screen {
    padding: 0;
    margin: 0;
}

/* Contenedor de temas - igual que #persons-container */
#temas-container {
    display: -webkit-flex;
    display: flex;
    margin-left: 6%;
    width: calc(100% - 6% - 4%);
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.5rem 1.5%;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

/* Fondo para botones de temas (sin imagen) */
.tema-bg {
    background-color: #ffffff;
    opacity: 1;
}

/* Ajuste del texto interior para temas */
#temas-container .button-interior {
    font-size: 0.85rem;
    line-height: 1.3;
    padding: 0rem 0rem 0rem 10%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #444444;
    top: 42%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 90%;
    box-sizing: border-box;
}

/* No cambiar color de letra en hover */
#temas-container .button-container:hover .button-interior {
    color: #444444;
}

/* Efecto hover: expandir el botón */
#temas-container .button-container {
    transition: transform 0.3s ease;
}

#temas-container .button-container:hover {
    transform: scale(1.05);
}

#temas-container .button-container:hover .buton-selector {
    opacity: 1;
}