/* Tu Potencial Femenino · páginas de episodios
   Complementa estilos.css de la maqueta. Usa solo sus colores, tipografías y componentes. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- listado de episodios ---------- */
.lista-episodios { padding-bottom: clamp(64px, 8vw, 112px); }
.buscador { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.buscador input {
  flex: 1 1 280px; padding: 14px 20px; border: 1.5px solid var(--negro); border-radius: 999px;
  background: var(--blanco); font: inherit; font-size: 16px; color: var(--negro);
}
.buscador input:focus { outline: 2px solid var(--amarillo); outline-offset: 2px; }
.buscador .contador { color: var(--gris); }
.filtros--episodios { align-items: center; }
.filtros .separador { width: 1px; height: 22px; background: var(--linea); margin: 0 6px; flex: none; }
.grilla-episodios { margin-top: clamp(32px, 4vw, 48px); row-gap: 48px; }
.ep-item > .tarjeta { height: 100%; }
.sin-resultados { color: var(--gris); padding: 32px 0; }

/* ---------- página de episodio ---------- */
.ep-cabeza { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); }
.ep-volver { display: inline-block; margin-bottom: clamp(24px, 3vw, 36px); text-decoration: none; }
.ep-volver:hover { text-decoration: underline; }
.ep-cabeza h1 { font-size: clamp(32px, 4vw, 54px); margin: 14px 0 10px; }
.ep-invitada { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); margin: 0 0 4px; }
.ep-descripcion { border-top: 1px solid var(--linea); }
.ep-descripcion .art-cuerpo { padding-top: clamp(32px, 5vw, 56px); font-size: 18px; }
.ep-descripcion .etiqueta { margin-bottom: 20px; }
.ep-descripcion .art-cuerpo { overflow-wrap: anywhere; }

/* ---------- revisión de categorías ---------- */
.revision { padding-bottom: 96px; }
.rev-barra { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 16px 0; border-top: 1.5px solid var(--negro); position: sticky; top: 72px; background: var(--paper); z-index: 10; }
.rev-check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.rev-check input { width: 18px; height: 18px; accent-color: var(--negro); }
.rev-estado { color: var(--gris); text-transform: none; letter-spacing: 0; }
#cambios { width: 100%; min-height: 120px; font-family: var(--f-mono); font-size: 13px; padding: 12px; border: 1.5px solid var(--negro); border-radius: 12px; margin-bottom: 16px; }
.rev-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.rev-tabla th { text-align: left; font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 10px 8px; border-bottom: 1.5px solid var(--negro); }
.rev-tabla td { padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.rev-tabla td:first-child { white-space: nowrap; color: var(--gris); }
.rev-tabla td a { font-weight: 600; text-decoration: none; }
.rev-tabla td a:hover { text-decoration: underline; }
.rev-inv { color: var(--gris); font-size: 14px; }
.rev-tabla select { font: inherit; font-size: 15px; padding: 7px 10px; border: 1.5px solid var(--negro); border-radius: 10px; background: var(--blanco); }
.rev-tabla tr.duda td { background: rgba(251, 230, 155, .55); }
.rev-tabla tr.cambiada td { background: rgba(105, 189, 163, .3); }

@media (max-width: 720px) {
  .filtros .separador { display: none; }
  .ep-cabeza .ultimo img { max-width: 100%; }
  .rev-tabla td:first-child { white-space: normal; }
  .rev-tabla select { max-width: 130px; }
}
@media (max-width: 720px) {
  .rev-tabla { table-layout: fixed; }
  .rev-tabla th:first-child { width: 58px; }
  .rev-tabla th:last-child { width: 132px; }
  .rev-tabla td { overflow-wrap: anywhere; }
}