/*

    Theme Name: ToroPlay
    Theme URI: https://torothemes.com/themes/toroplay
    Author: torothemes
    Author URI: https://torothemes.com/
    Description: Theme for movies
    Template:  toroplay
    Tags: design, content, toroplay child theme
    Version: 1.0.0
    Requires at least: 5.0
    Tested up to: 7.0
    Requires PHP: 7.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: toroplay

    This theme, like WordPress, is licensed under the GPL.
    Use it to make something cool, have fun, and share what you've learned with others.

*/

/**/



/* Poner 2 poster para moviles */
@media screen and (max-width: 34em) {
    .MovieList.Rows:not(.Episodes) > li {
       width: 50% !important;  /* O usa 'initial' si prefieres */
    }
}
/* Hover color enlaces */
a:hover {
    color: #fff;
}

/* */

/* CATEGORÍA POR AÑO */
.widget_years {
  position: relative;
  z-index: 0;
  margin-bottom: 1.25rem;
  padding: 0.25rem;
  max-height: 300px; /* Establece la altura máxima del widget */
}

.widget_years:hover {
  z-index: 1;
}

.widget_years:last-child {
  margin-bottom: 0;
}

.widget_years:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  border-radius: 10px;
  opacity: .1;
  z-index: -1;
}

.widget_years > .Title {
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 1rem;
  line-height: 19px;
  font-weight: 400;
  font-size: .875rem;
  color: #ffffff; /* Título en color gris oscuro */
  z-index: 1; /* Mantiene el título sobre el contenido */
  background: #2d3442; /* Asegura que el fondo sea blanco */
  padding-right: 3rem; /* Ajuste para el padding */
}

.widget_years > .Title:before,
.widget_years > .Title:after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
}

.widget_years > .Title:before {
  right: 0;
  height: 1px;
  opacity: .2;
  background-color: #ccc; /* Línea gris debajo del título */
}

.widget_years > .Title:after {
  height: 3px;
  width: 30px;
  background-color: #dd3333; /* Línea pequeña de separación */
}

.widget_years > .Title > span {
  font-weight: 200;
}

.widget_years > .YearList {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow-y: auto; /* Permite el scroll solo en los años */
  max-height: 228px; /* Altura del contenedor de los años */
  display: flex;
  flex-wrap: wrap; /* Permite que los años se ajusten en varias filas */
  margin-left: 6px;
}

@media (max-width: 768px) {
  .widget_years > .YearList {
    margin-left: 3px !important; /* Establece el margen izquierdo para pantallas pequeñas */
  }
}

.widget_years > .YearList li {
  margin-bottom: .5rem;
  margin-right: 1rem; /* Espaciado entre los años */
  position: relative;
  text-align: center;
  padding: 0 1rem;
  line-height: 30px;
  border-radius: 15px;
  font-size: .875rem;
  transition: .2s;
  height: 30px;
  background-color: #151d2c; /* Fondo claro */
  width: calc(25% - 1rem); /* 4 elementos por fila, ajustando el espacio */
}

.widget_years > .YearList li:last-child {
  margin-bottom: 0;
}

.widget_years > .YearList li a {
  position: absolute;
  left: 2px;
  top: 0;
  right: 0;
  text-align: center;
  padding-left: 0.5rem; /* Desplaza el texto un poco hacia la izquierda */
  padding-right: 3rem;
  font-size: .775rem;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #ffffff; /* Color de texto */
  display: flex;
}

@media (max-width: 768px) {
  .widget_years > .YearList li a {
    left: 2px; !important; /* Establece el margen izquierdo para pantallas pequeñas */
	
  }
}

.widget_years > .YearList li:hover {
  background-color: transparent; /* Elimina el cambio de fondo en el hover */
}

.widget_years > .YearList li:hover a {
  color: #ffffff; /* Mantiene el color blanco del texto al hacer hover */
}