/* Layout */
.container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.tv-hero { padding: 18px 0 8px; }
.tv-title { margin: 0 0 10px; font-size: clamp(22px,2.2vw,28px); font-weight: 800; }

/* Search */
.tv-search { display: flex; gap: 8px; }
.tv-search__input { flex: 1; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #e5e7eb; }
.tv-btn { height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background:#0A3570; color:#fff; font-weight:700; }

/* Chips */
.tv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.tv-chip { padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 999px; text-decoration:none; color:#0f172a; background:#fff; }
.tv-chip.is-active { background:#0A3570; border-color:#0A3570; color:#fff; }

/* Layout 2 col */
.tv-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; padding: 8px 0 28px; }
@media (max-width: 1024px){ .tv-layout { grid-template-columns: 1fr; } }

/* Sidebar */
.tv-side__block { background:#fff; border:1px solid #e9ecf1; border-radius:14px; padding:14px; margin-bottom:12px; }
.tv-side__title { margin:0 0 10px; font-weight:800; font-size:15px; }
.tv-side__list, .tv-side__sub { list-style:none; margin:0; padding-left:0; }
.tv-side__list a { display:block; padding:8px 10px; border-radius:10px; color:#0f172a; text-decoration:none; }
.tv-side__list a:hover { background:#f3f4f6; }
.tv-side__list a.is-current { background:#0A3570; color:#fff; }
.tv-side__sub { padding-left:10px; }
.tv-tags { display:flex; flex-wrap: wrap; gap:8px; }
.tv-tag { border:1px solid #e5e7eb; padding:5px 10px; border-radius:999px; text-decoration:none; color:#0f172a; }

/* Grid */
.tv-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; }
@media (max-width: 1024px){ .tv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .tv-grid { grid-template-columns: 1fr; } }

.tv-card { background:#fff; border:1px solid #e9ecf1; border-radius:14px; overflow:hidden; box-shadow:0 6px 20px rgba(16,24,40,.06); }
.tv-card__link { color:inherit; text-decoration:none; display:block; }
.tv-card__media { position:relative; aspect-ratio:16/9; background:#0f172a; }
.tv-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tv-card__play { position:absolute; bottom:8px; right:8px; background:rgba(10,53,112,.9); color:#fff; border-radius:999px; padding:.35rem .55rem; font-weight:800; }
.tv-card__body { padding:10px 12px 12px; }
.tv-card__title { margin:0 0 6px; font-size:16px; font-weight:800; line-height:1.25; }
.tv-card__meta { color:#667085; font-size:13px; display:flex; gap:6px; align-items:center; }
.dot { opacity:.5; }

/* Paginación */
.tv-pager { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.tv-pager a, .tv-pager span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:999px; border:1px solid #e6e8eb; background:#fff; font-weight:700; text-decoration:none; color:#0f172a; }
.tv-pager .current { background:#0A3570; border-color:#0A3570; color:#fff; }

/* Mobile paddings (que comentabas que faltaban) */
@media (max-width: 640px){
  .container { padding: 0 14px; }
  .tv-chip { padding: 6px 10px; }
}

/* GRID más denso en desktop */
@media (min-width: 1280px){
  .tv-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1536px){
  .tv-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* Mantener 16:9 y pulir hover */
.tv-card__media { position: relative; aspect-ratio: 16 / 9; background:#0f172a; }
.tv-card__play { bottom: 10px; right: 10px; padding: .32rem .54rem; }

/* Títulos a dos líneas, más compactos */
.tv-card__title{
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2 líneas */
  overflow: hidden;
  min-height: calc(1.25em * 2); /* reserva altura estable */
}

/* Meta más discreta y estrecha */
.tv-card__meta{ font-size: 12.5px; gap: 4px; }

/* Ajuste de paddings */
.tv-card__body{ padding: 9px 10px 10px; }

/* Hover sutil */
.tv-card{
  transition: transform .15s ease, box-shadow .15s ease;
}
.tv-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16,24,40,.12);
}

/* (Por si quieres forzar AÚN más bajo el thumbnail)
   Usa SOLO uno de estos, normalmente no hace falta con el grid denso: */
/* .tv-card__media { max-height: 180px; } */


/* —— NO estirar columnas frente a la sidebar —— */
.tv-main{               /* sea grid o flex */
  align-items: start;   /* grid: start | flex: flex-start */
}

/* El área de contenido no debe “llenar” el alto del contenedor */
.tv-content{
  align-self: start;
  height: auto;
  min-height: 0;
}

/* —— Grid sin estirar filas ni ítems —— */
.tv-grid{
  /* NO repartir el espacio libre vertical entre filas */
  align-content: start;   /* clave: evita estirar filas */
  /* NO estirar los ítems para llenar la fila */
  align-items: start;
  /* por si en algún lado quedó forzado a 1fr */
  grid-auto-rows: auto;
  /* y nunca trates de ocupar todo el alto del contenedor */
  height: auto;
}

/* Las cards deben medir lo que su contenido, no el contenedor */
.tv-card{
  height: auto !important;     /* mata cualquier height:100% heredado */
}

/* El media mantiene 16:9 sin influir en la altura del resto */
.tv-card__media{
  aspect-ratio: 16/9;
  height: auto;
}

/* (Opcional) si en algún punto usaste flex en la card: */
.tv-card{ display:block; }  /* evita “llenar” con flex */


/* ===== Layout general ===== */
.tv-main{
  display: grid;
  grid-template-columns: 280px 1fr; /* sidebar + contenido */
  gap: 24px;
  align-items: start;
}

/* Sidebar sticky y con scroll propio */
.tv-sidebar{
  position: sticky;
  top: 92px;                   /* ajusta según alto del header */
  align-self: start;
  max-height: calc(100vh - 0px);
  overflow: auto;
  padding-right: 8px;
}
.tv-sidebar::-webkit-scrollbar{ width: 6px; }
.tv-sidebar::-webkit-scrollbar-thumb{ background: #cbd5e1; border-radius: 6px; }

/* Stack en móviles */
@media (max-width: 1024px){
  .tv-main{ grid-template-columns: 1fr; }
  .tv-sidebar{ position: static; max-height: none; overflow: visible; }
}

/* ===== Grid de videos ===== */
.tv-grid{
  display: grid;
  gap: 16px;
  align-content: start;  /* no estirar filas */
  align-items: start;    /* no estirar items */
  margin-bottom: 24px;   /* aire para que no choque con la paginación */
}

/* 1 → 2 → 3 → 4 columnas (cards más grandes) */
.tv-grid{ grid-template-columns: 1fr; }                          /* <640 */
@media (min-width: 640px){  .tv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px){ .tv-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px){ .tv-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ===== Cards ===== */
.tv-card{ 
  display: block;
  height: auto !important;  /* nada de height:100% heredado */
  min-width: 0;             /* evita overflow del título */
}
.tv-card__media{
  aspect-ratio: 16/9;
  height: auto;
}
.tv-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 2 líneas como YouTube */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-card__meta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Paginación ===== */
.tv-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 28px;  /* separada del grid */
}


.tv-cat-label, .tv-cat-select { display:none; }
@media (max-width:1024px){
  .tv-sidebar{ display:none; }
  .tv-cat-label, .tv-cat-select{ display:block; }
}
#tv-grid{ scroll-margin-top: 88px; } /* ajusta a la altura del header */