/* =========================================================
   PÁGINA "PLATAFORMAS"
   Reutiliza las variables y clases base de catalog.css
   (header, sidebar, .post-card, etc.) — este archivo solo
   define lo específico de esta página: la cuadrícula de logos
   y el encabezado de resultados por plataforma.
   ========================================================= */

.platforms-intro-section {
    margin-bottom: 10px;
}

.platforms-intro-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin: -6px 0 22px 14px;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 14px;
}

.platform-card {
    background: linear-gradient(165deg, var(--bg-card) 0%, #0f1829 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-premium);
    position: relative;
    overflow: hidden;
}

/* Línea superior decorativa, sutil — separa visualmente el set de
   tarjetas del resto de secciones sin depender solo del fondo. */
.platform-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
    opacity: 0;
    transition: var(--transition-smooth);
}

.platform-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.55), 0 0 22px var(--accent-glow);
    transform: translateY(-4px);
}

.platform-card:hover::before {
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

/* Plataformas con contenido reciente quedan distinguidas en el
   grid incluso sin hover: borde y resplandor verde tenues y
   permanentes, no solo el badge en la esquina. Al pasar el mouse
   se intensifica un poco más. */
.platform-card.has-new-content {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: var(--shadow-premium), 0 0 0 1px rgba(16, 185, 129, 0.08) inset;
}

.platform-card.has-new-content:hover {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.55), 0 0 24px rgba(16, 185, 129, 0.3);
}

.platform-card-logo-wrap {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-card-logo {
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
    border-radius: 8px;
}

.platform-card-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.2px;
}

/* =========================================================
   STATS POR TIPO (número grande + etiqueta) — reemplaza el
   texto corrido "N Películas · N Series" por columnas en bloque,
   con más jerarquía y aire entre cada tipo.
   ========================================================= */
.platform-card-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.platform-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
}

/* Separador vertical fino entre stats cuando hay más de uno —
   discreto, solo visible si hay un stat antes. */
.platform-stat + .platform-stat {
    border-left: 1px solid var(--border-color);
    padding-left: 10px;
}

.platform-stat-number {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.platform-stat-label {
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.platform-stat.count-movie .platform-stat-number {
    color: var(--accent-hover);
}

.platform-stat.count-series .platform-stat-number {
    color: #c084fc;
}

.platform-stat.count-collection .platform-stat-number {
    color: var(--accent-gold);
}

/* Conteo total cuando no se pudo desglosar por tipo (caso borde) —
   "color llamativo" para que el número resalte de un vistazo, igual
   al dorado que ya usa el sitio para rating/VIP. */
.platform-count-total {
    color: var(--accent-gold);
    font-weight: 800;
    font-size: 12px;
}

/* =========================================================
   VARIANTE COMPACTA INLINE (header de la vista de resultados,
   ej. "5 Películas · 1 Serie" junto al logo de la plataforma) —
   las tarjetas usan .platform-stat en bloque arriba; este header
   angosto usa texto en línea en su lugar.
   ========================================================= */
.platform-count-item {
    font-weight: 800;
}

.platform-count-item.count-movie {
    color: var(--accent-hover);
}

.platform-count-item.count-series {
    color: #c084fc;
}

.platform-count-item.count-collection {
    color: var(--accent-gold);
}

.platform-count-sep {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 9px;
    margin: 0 2px;
}

/* Cápsula de "agregado recientemente" — antes era texto plano
   gris, ahora una píldora con ícono y fondo verde translúcido
   (mismo lenguaje que el badge "Contenido nuevo"), para que se lea
   como una nota positiva en vez de metadata genérica. */
.platform-recent-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #6ee7b7;
    text-align: center;
}

.platform-recent-pill i {
    font-size: 8.5px;
    color: var(--success-color);
    flex-shrink: 0;
}

/* Badge "Contenido nuevo": esquina superior, mismo lenguaje visual
   que .premiere-tag (catalog.css) pero en verde para no confundirse
   con "Estreno" (rojo) ni "En emisión" (azul). */
.platform-new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    color: #ffffff;
    font-size: 7.5px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 2;
}

/* Estado de carga (skeleton) mientras se obtienen las plataformas */
.platform-card-skeleton {
    cursor: default;
}

.platform-card-skeleton .platform-card-logo-wrap,
.platform-card-skeleton .platform-card-name {
    background: linear-gradient(90deg, var(--bg-input) 25%, #2a3a52 37%, var(--bg-input) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 8px;
}

.platform-card-skeleton .platform-card-logo-wrap {
    width: 100%;
    height: 64px;
}

.platform-card-skeleton .platform-card-name {
    width: 70%;
    height: 12px;
}

/* Estado vacío: aún no hay ningún post publicado con plataforma asociada */
.platforms-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: var(--text-secondary);
}

.platforms-empty-state .empty-icon {
    font-size: 38px;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* =========================================================
   VISTA DE RESULTADOS POR PLATAFORMA
   ========================================================= */
.platform-results-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.back-to-platforms-btn {
    align-self: flex-start;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.back-to-platforms-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.platform-results-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.platform-results-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--bg-input);
    padding: 6px;
}

.platform-results-title h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.results-count-text {
    color: var(--text-secondary);
    font-size: 13px;
}

/* =========================================================
   "DÓNDE VER" — RESUMEN DE TMDB

   Visualmente más simple que .platform-card a propósito: esto NO
   es clickeable (no navega a ningún lado, es puramente
   informativo), así que sin cursor:pointer, sin hover de
   "entrar a la categoría", y con tarjetas más compactas — la
   atención visual principal sigue siendo "Explora por Plataforma"
   arriba, que sí es el catálogo curado y navegable.
   ========================================================= */
.where-to-watch-section {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
}

.where-to-watch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.where-to-watch-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.where-to-watch-card-logo-wrap {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.where-to-watch-card-logo {
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0.9;
}

.where-to-watch-card-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
}

.where-to-watch-card-count {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* =========================================================
   HEADER DE "EXPLORA POR PLATAFORMA" CON BOTÓN DE REGRESO

   .section-title trae su propio margin-bottom (catalog.css) pensado
   para cuando vive solo, apilado sobre el párrafo siguiente — acá
   convive al lado del botón dentro de un flex, así que se anula
   ese margin propio y el espaciado lo controla el header completo.
   ========================================================= */
.platforms-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.platforms-section-header .section-title {
    margin-bottom: 0;
}

/* Mismas clases que ya existen en post-public.css para el botón
   "Regresar al inicio" del grid de resultados filtrados — se
   repiten acá porque platforms.html no carga ese archivo CSS. */
.pp-filter-action-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.pp-filter-action-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.pp-filter-action-btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.pp-filter-action-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}