/* Sobrescribir cualquier centrado del tema */
.mediainfo-pills-wrapper, .mediainfo-pills-wrapper * { text-align: left !important; }
.mediainfo-box, .mediainfo-box * { text-align: left !important; }
.mediainfo-summary { text-align: left !important; }
.summary-column { text-align: left !important; }
.summary-item { text-align: left !important; }
.mediainfo-subtitles { text-align: left !important; }
.subtitles-list { text-align: left !important; }
.mediainfo-full { text-align: left !important; }

.mediainfo-pills-wrapper { display: grid; gap: 10px; margin: 20px 0; }
.mediainfo-pills-wrapper.columns-1 { grid-template-columns: 1fr; }
.mediainfo-pills-wrapper.columns-2 { grid-template-columns: repeat(2, 1fr); }
.mediainfo-pills-wrapper.columns-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) { .mediainfo-pills-wrapper { grid-template-columns: 1fr !important; } }

/* Contenedor de cada píldora - evitar expansión */
.mediainfo-pill-item {
    max-width: 100%;
    overflow: hidden;
}

/* Grupo de temporada (contenedor) */
.mediainfo-season-group {
    margin-bottom: 15px;
}

/* Badge de temporada arriba del grupo */
.mediainfo-season-badge {
    background: linear-gradient(135deg, #6a1b9a 0%, #4a148c 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 6px 6px 0 0;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 0;
    border: 1px solid #7b1fa2;
    border-bottom: none;
}

/* Píldoras dentro del grupo de temporada */
.mediainfo-pill-item.in-season-group {
    margin-bottom: 0;
}

.mediainfo-pill-item.in-season-group .mediainfo-pill {
    border-radius: 0;
    margin-top: 0;
    border-top: 1px solid #4a4a4a;
}

/* Primera píldora del grupo sin borde superior */
.mediainfo-season-group .mediainfo-pill-item.in-season-group:first-of-type .mediainfo-pill {
    border-top: none;
}

/* Última píldora del grupo con borde redondeado abajo */
.mediainfo-season-group .mediainfo-pill-item.in-season-group:last-child .mediainfo-pill {
    border-radius: 0 0 8px 8px;
}

/* Si la última píldora tiene serie-info, el borde redondeado va en serie-info */
.mediainfo-season-group .mediainfo-pill-item.in-season-group:last-child .mediainfo-serie-info {
    border-radius: 0 0 8px 8px;
}

.mediainfo-season-group .mediainfo-pill-item.in-season-group:last-child .mediainfo-pill:has(+ .mediainfo-serie-info) {
    border-radius: 0;
}

/* Ajustar la píldora cuando tiene badge de temporada (para items individuales) */
.mediainfo-season-badge + .mediainfo-pill {
    border-radius: 0 0 8px 8px;
    margin-top: 0;
}

/* Línea de información adicional para series */
.mediainfo-serie-info {
    background: linear-gradient(135deg, #2a4858 0%, #1e3a47 100%);
    padding: 8px 15px;
    border-radius: 0;
    margin-top: -5px;
    border: 1px solid #2d5a6e;
    border-top: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mediainfo-serie-info:hover {
    background: linear-gradient(135deg, #355a6e 0%, #294b5a 100%);
    border-color: #4fc3f7;
}

.serie-info-text {
    color: #81d4fa;
    font-size: 13px;
    font-weight: 600;
    display: block;
    text-align: center;
}

		.pill-toggle-icon {
			color: #81d4fa;
			font-size: 16px;
			transition: transform 0.3s ease;
			user-select: none;
			cursor: pointer;
			display: inline-block; /* Importante para que funcione el transform */
		}

		.pill-toggle-icon.active {
			transform: rotate(180deg);
		}

		.mediainfo-box-filename {
			cursor: pointer;
			user-select: none;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.filename-toggle-icon {
			width: 16px;
			height: 16px;
			flex-shrink: 0;
			color: #81d4fa; /* Color inicial (cerrado) */
			transition: color 0.3s ease;
		}

		.filename-toggle-icon.active {
			color: #ffffff; /* Color cuando está abierto */
		}

.mediainfo-pill { display: grid; grid-template-columns: 3fr 0.6fr 0.8fr 1.5fr 1fr auto; gap: 10px; align-items: center; padding: 12px 15px; background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.mediainfo-pill:hover { background: linear-gradient(135deg, #4a4a4a 0%, #3d3d3d 100%); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.mediainfo-pill span { color: #fff; font-size: 12px; }

/* Wrapper para badges */
.pill-badges {
    display: contents;
}

/* Título con truncado para textos largos */
.pill-title { 
    font-weight: 600; 
    font-size: 12px !important; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pill-quality { color: #4fc3f7 !important; font-weight: 700; text-align: center; }
.pill-format { color: #ffa726 !important; font-weight: 700; text-align: center; }
.pill-buttons { display: flex; gap: 8px; justify-content: center; }
.pill-btn { padding: 6px 14px; border-radius: 5px; text-decoration: none; font-weight: 700; font-size: 12px; transition: all 0.3s; display: inline-block; text-transform: uppercase; }
.pill-btn.vip { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #fff; }
.pill-btn.vip:hover { background: linear-gradient(135deg, #c0392b 0%, #a93226 100%); transform: scale(1.05); }
.pill-btn.free { background: linear-gradient(135deg, #27ae60 0%, #229954 100%); color: #fff; }
.pill-btn.free:hover { background: linear-gradient(135deg, #229954 0%, #1e8449 100%); transform: scale(1.05); }

/* Wrapper del tamaño con espacio reservado para el indicador */
.pill-size-wrapper {
    background: rgba(0,0,0,0.3);
    padding: 4px 10px;
    border-radius: 4px;
}

.pill-size {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.mediainfo-box { 
    margin-top: 10px; 
    background: #2d2d2d; 
    border: 1px solid #444; 
    border-radius: 8px; 
    padding: 20px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.mediainfo-box-filename { 
    color: rgb(64 135 165); 
    font-size: 14px; 
    font-weight: 600; 
    margin-bottom: 15px; 
    padding: 10px 15px; 
    background: #1a1a1a; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.3s; 
    border: 1px dashed #444; 
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

.mediainfo-box-filename:hover { background: #252525; border-color: #4fc3f7; color: #81d4fa; }

.mediainfo-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 15px; }

/* ===== RESPONSIVE PARA MÓVIL ===== */
@media (max-width: 768px) { 
			/* Grupo de temporada en móvil */
			.mediainfo-season-group {
				margin-bottom: 15px !important;
			}

			.mediainfo-pill-item.in-season-group {
				margin-bottom: 0 !important;
			}

			.mediainfo-pill-item.in-season-group .mediainfo-pill {
				border-radius: 0 !important;
				margin-top: 0 !important;
			}

			.mediainfo-pill-item.in-season-group .mediainfo-serie-info {
				border-radius: 0 !important;
				margin-top: 0 !important;
			}

			.mediainfo-season-group .mediainfo-pill-item.in-season-group:last-child .mediainfo-serie-info {
				border-radius: 0 0 8px 8px !important;
			}
    /* Grid de resumen en una columna */
    .mediainfo-summary { 
        grid-template-columns: 1fr; 
    }
    
    /* Rediseño completo de la píldora para móvil */
    .mediainfo-pill { 
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        text-align: center !important;
    }
    
    /* Título centrado y con wrap */
    .pill-title {
        font-size: 15px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.3;
    }
    
    /* Wrapper de badges como flexbox horizontal centrado */
    .pill-badges {
        display: flex !important;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    /* Badges con fondo */
    .pill-quality,
    .pill-format {
        padding: 5px 14px !important;
        border-radius: 6px;
        font-size: 12px !important;
    }
    
    .pill-quality {
        background: rgba(79, 195, 247, 0.15) !important;
        border: 1px solid #4fc3f7 !important;
    }
    
    .pill-format {
        background: rgba(255, 167, 38, 0.15) !important;
        border: 1px solid #ffa726 !important;
    }
    
    /* Botones */
    .pill-buttons { 
        justify-content: center !important;
    }
    
    .pill-btn {
        padding: 8px 20px !important;
        font-size: 11px !important;
    }
    
    /* Tamaño + indicador */
    .pill-size-wrapper {
        justify-content: center !important;
    }
    
    .pill-size {
        font-size: 14px !important;
    }
    
    /* Línea de información de serie en móvil */
    .mediainfo-serie-info {
        padding: 8px 10px !important;
        margin-top: 10px !important;
        border-radius: 6px !important;
        border: 1px solid #2d5a6e !important;
    }
    
    .serie-info-text {
        font-size: 11.5px !important;
        line-height: 1.4;
    }
    
    /* ===== EVITAR EXPANSIÓN DEL CUADRO DESPLEGABLE ===== */
    .mediainfo-pill-item {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    .mediainfo-box {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 12px 8px !important;
        box-sizing: border-box !important;
        margin: 10px 0 0 0 !important;
    }
    
    /* Filename con word-break */
    .mediainfo-box-filename {
        font-size: 12px !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
        padding: 8px !important;
        line-height: 1.4;
    }
    
    /* Columnas de resumen */
    .summary-column {
        padding: 10px !important;
    }
    
    .summary-column h4 {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }
    
    .summary-item {
        font-size: 10.5px !important;
        word-break: break-word;
        line-height: 1.5;
    }
    
    .summary-item strong {
        min-width: 65px !important;
        font-size: 10px !important;
    }
    
    /* MediaInfo completo */
    .mediainfo-full {
        font-size: 9px !important;
        padding: 10px 6px !important;
        line-height: 1.4 !important;
        max-height: 400px !important;
    }
    
    /* Subtítulos */
    .mediainfo-subtitles {
        padding: 10px !important;
    }
    
    .subtitle-item {
        font-size: 10.5px !important;
        line-height: 1.4;
    }
}

.summary-column { background: #1a1a1a; padding: 15px; border-radius: 6px; border: 1px solid #3a3a3a; }
.summary-column h4 { color: #4fc3f7; font-size: 14px; font-weight: 700; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 2px solid #3a3a3a; text-transform: uppercase; }
.summary-item { color: #e0e0e0; font-size: 12px; padding: 1px 0; line-height: 1.6; }
.summary-item strong { color: #9e9e9e; display: inline-block; }
.summary-item.audio-track { padding: 5px 0; margin: 0; }

.mediainfo-subtitles { margin-top: 15px; padding: 15px; background: #1a1a1a; border-radius: 6px; border: 1px solid #3a3a3a; }
.mediainfo-subtitles h4 { color: #9e9e9e; font-size: 12px; font-weight: 600; margin: 0 0 10px 0; }
.subtitles-list { color: #e0e0e0; font-size: 12px; }
.subtitle-item { display: block; padding: 5px 0; margin: 0; color: #e0e0e0; }

.mediainfo-full { background: #1a1a1a; color: #e0e0e0; padding: 20px; border-radius: 6px; font-size: 13px; line-height: 1.6; overflow-x: auto; overflow-y: auto; max-height: 500px; white-space: pre-wrap; word-wrap: break-word; margin: 15px 0 0 0; font-family: monospace; border: 1px solid #3a3a3a; }
.mediainfo-full::-webkit-scrollbar { width: 10px; height: 10px; }
.mediainfo-full::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 5px; }
.mediainfo-full::-webkit-scrollbar-thumb { background: #4fc3f7; border-radius: 5px; }
.mediainfo-full::-webkit-scrollbar-thumb:hover { background: #81d4fa; }

/* Capturas de pantalla */
.mediainfo-screenshots {
    margin-top: 20px;
    padding: 15px;
    background: #1a1a1a;
    border-radius: 6px;
    border: 1px solid #3a3a3a;
}

.mediainfo-screenshots h4 {
    color: #ffa726;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    text-align: left;
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.screenshots-grid img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 2px solid #3a3a3a;
    transition: all 0.3s;
    cursor: pointer;
}

.screenshots-grid img:hover {
    border-color: #4fc3f7;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
}

/* Lightbox para capturas de pantalla */
.mediainfo-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999;
    cursor: pointer;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mediainfo-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mediainfo-lightbox img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.mediainfo-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100000;
    transition: all 0.3s;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mediainfo-lightbox-close:hover {
    color: #4fc3f7;
    transform: scale(1.2);
}

.mediainfo-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    padding: 20px;
    transition: all 0.3s;
    user-select: none;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mediainfo-lightbox-nav:hover {
    color: #4fc3f7;
    transform: translateY(-50%) scale(1.2);
}

.mediainfo-lightbox-prev {
    left: 20px;
}

.mediainfo-lightbox-next {
    right: 20px;
}

.mediainfo-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 20px;
}

@media (max-width: 768px) {
    .screenshots-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px;
    }
    
    .mediainfo-lightbox-nav {
        font-size: 30px;
        padding: 10px;
    }
    
    .mediainfo-lightbox-close {
        font-size: 30px;
        top: 10px;
        right: 15px;
    }
}