.lista-capitulos, #capitulos-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.capitulo-item {
    margin:0px !important;
    display: flex;
    flex-direction: column;
    background-color: #f2f4f5;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.imagen img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.info-cap {
    color: white !important;
    display: grid;
    padding: 2px;
    text-align: center;
    gap: 2px;
    background: rgb(0 0 0 / 21%);
    margin-top: -40px;
    backdrop-filter: blur(26px);
}

.titulo-cap {
    font-size: 14px;
    color: white;
    margin-bottom: -8px;
}

.fecha-cap {
    font-size: 12px;
    color: white;
}

.cargar-mas-capitulos {
    padding: 10px 20px;
    color: #122b46;
    border: none;
    border-radius: 6px;
    text-transform: capitalize;
    transition: background 0.3s;
    cursor: pointer;
    font-size:14px;
    font-weight: 400;
    display: block;
    margin: 20px auto;
    border: solid 1px #e7e9ec;
    background:transparent;
}
.cargar-mas-capitulos:hover {
  background:#f2f4f5;
  color:#007cff;
  border: solid 1px #e7e9ec;
}

.svg-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f4f5;
    width: 100%;
    height: 100%;
    min-height: 128px;
    border-radius: 6px;
}

.svg-placeholder svg {
    width: 48px;
    height: 48px;
    stroke: #ccc;
}
.capitulo-item .imagen svg {
    display: block;
    margin: 0 auto;
    opacity: 0.5;
}

.cargar-mas-capitulos.cargando {
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
}

.capitulo-item .imagen {
    transition: filter 0.3s ease;
    background: transparent;
}
/* Estilos para el blur */
.capitulo-item .imagen img.blurred {
    filter: blur(18px);
    transition: filter 0.3s ease;
}
/* Estilo para el botón cuando está activo */
.btn-toggle-blur.active {
    background-color: #f0f0f0;
    border-color: #ddd;
}

.cargar-mas-capitulos[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.loading-capitulos {
    text-align: center;
    padding: 10px;
    color: #666;
}

.filtros-capitulos {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Primer elemento (2fr equivalente) */
.filtros-capitulos > :first-child {
    flex: 2;  /* Ocupa 2 partes del espacio disponible */
    min-width: 0; /* Permite que el contenido largo se recorte */
}

/* Botones (1fr equivalente cada uno) */
.filtros-capitulos > button {
    flex: 1;  /* Ocupa 1 parte del espacio */
    white-space: nowrap; /* Evita saltos de línea en botones */
}
@media (max-width: 600px) {
    .filtros-capitulos {
        flex-wrap: wrap; /* Permite que los elementos se apilen */
    }
    
    /* Primer elemento - 100% ancho */
    .filtros-capitulos > :first-child {
        flex: 0 0 100%; /* Ocupa toda la fila */
        text-align: center;
    }
    
    /* Botones - 50% cada uno (con cálculo del gap incluido) */
    .filtros-capitulos > button {
        flex: 0 0 calc(50% - 5px); /* 50% menos la mitad del gap */
    }
}

a.ultimo-capitulo-link {
    width:100%;
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 400;
    border: solid 1px #e7e9ec;
    background:transparent;
    color: #1E2132;
    font-size: 14px;
}
a.ultimo-capitulo-link:hover {
  background:#f2f4f5;
  color:#007cff;
  border: solid 1px #e7e9ec;
}
button.btn-toggle-blur {
    width:100%;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 400;
    border: solid 1px #e7e9ec;
    background:transparent;
    color: #4d5c6d;
}
button.btn-invertir-orden {
    width:100%;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 400;
    border: solid 1px #e7e9ec;
    background:transparent;
    color: #4d5c6d;
}
.filtros-capitulos > button:hover {
  background:#f2f4f5;
  color:#007cff;
  border: solid 1px #e7e9ec;
}
.filtros-capitulos > button:active {
  background:#f2f4f5;
  color:#007cff;
  border: solid 1px #e7e9ec;
}
.filtros-capitulos > button:focus {
  background:#f2f4f5;
  color:#007cff;
  border: solid 1px #e7e9ec;
}