/* --- TV UFOP — Programação (estilos essenciais) --- */
#tvufop-epg {
  --tv-header-bg: #800020; /* vinho/bordô */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#1b1b1b;
}
#tvufop-epg .wrap{max-width:1080px;margin:0 auto;padding:12px;}
#tvufop-epg .toolbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:var(--tv-header-bg);color:#fff;border-radius:10px;padding:10px 12px;
}
#tvufop-epg .toolbar .title{font-weight:700;font-size:18px;}
#tvufop-epg .datebox{margin-left:auto;display:flex;gap:8px;align-items:center;}
#tvufop-epg .date{font-weight:600;}
#tvufop-epg .btn{border:0;border-radius:8px;padding:6px 10px;background:#e8e8e8;cursor:pointer}
#tvufop-epg .btn:hover{background:#dcdcdc}
#tvufop-epg .btn.ghost{background:transparent;color:#fff;border:1px solid #ffffff33}
#tvufop-epg .btn.primary{background:#fff;color:#111}
#tvufop-epg .search{display:flex}
#tvufop-epg .search input{border:0;border-radius:8px;padding:7px 10px;min-width:200px; width: clamp(160px, 50vw, 320px);}
#tvufop-epg .status{display:none;margin:10px 0;padding:9px 10px;border-radius:8px;background:#fff3cd;border:1px solid #ffe69c}

#tvufop-epg .scroller{max-height:70vh;overflow:auto;padding-right:6px;margin-top:8px; scroll-behavior:smooth;}

#tvufop-epg .hour-sep{
  position:sticky;top:0;background:#f6f6f6;border:1px solid #eee;border-left:3px solid #111;
  border-radius:8px;margin:10px 0 6px;padding:4px 8px;font-weight:700;width:max-content
}

#tvufop-epg .card{
  display:flex;gap:12px;align-items:center;border:1px solid #e9e9e9;border-radius:12px;
  padding:10px 12px;margin:6px 0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.03); cursor:pointer
}
#tvufop-epg .card:hover{background:#fafafa}
#tvufop-epg .card.now{border-color:#cfe6ff;background:#f1f8ff}

#tvufop-epg .when{
  min-width: clamp(56px, 7.5vw, 88px);
  width: auto;
  font-variant-numeric: tabular-nums;
}
#tvufop-epg .when .end{opacity:.7;margin-left:8px}

#tvufop-epg .info{flex:1 1 auto; min-width:0}
#tvufop-epg .card .title{font-weight:600}              /* título dos cartões */
#tvufop-epg .meta{opacity:.7;font-size:.9em;margin-top:2px}
#tvufop-epg .badge-now{margin-left:8px;font-size:.75em;background:#0075ff;color:#fff;border-radius:999px;padding:2px 7px;vertical-align:middle}

#tvufop-epg dialog{border:0;border-radius:14px;max-width:760px;width:calc(100% - 24px)}
#tvufop-epg .modal{display:block;padding:16px}
#tvufop-epg .m-title{font-weight:700;font-size:18px}
#tvufop-epg .times{opacity:.8;margin:4px 0 8px}

/* Mobile: exatamente DUAS linhas no cabeçalho */
@media (max-width: 560px){
  #tvufop-epg .toolbar{
    display: grid;
    grid-template-columns: 1fr auto;      /* linha 1: [Título][Data+setas] */
    grid-template-rows: auto auto;        /* linha 2: [Busca ][Agora]      */
    grid-template-areas:
      "title datebox"
      "search now";
    gap: 8px 12px;
    align-items: center;
    justify-items: stretch;
    text-align: initial;
  }

  #tvufop-epg .toolbar .title{
    grid-area: title;
    text-align: left;        /* pode trocar para center se preferir */
  }

  #tvufop-epg .datebox{
    grid-area: datebox;
    margin-left: 0;
    justify-content: flex-end;  /* data e setas à direita na 1ª linha */
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }

  #tvufop-epg .search{
    grid-area: search;
    width: 100%;
  }
  #tvufop-epg .search input{
    width: 100%;
    min-width: 0;            /* permite encolher sem quebrar */
  }

  #tvufop-epg .btn.primary[data-role="nowBtn"]{
    grid-area: now;
    justify-self: end;       /* botão “Agora” à direita na 2ª linha */
  }
}
/* Thumb e layout interno do modal */
#tvufop-epg .m-row{
  display:flex; gap:16px; align-items:flex-start;
}
#tvufop-epg .m-thumb{
  flex:0 0 auto;
  width: clamp(140px, 26vw, 220px);
  aspect-ratio: 89 / 50;         /* mesma proporção ~445x250 */
  object-fit: cover;
  border-radius:10px;
  border:1px solid #eee;
  background:#f3f3f3;
}
#tvufop-epg .m-col{flex:1 1 auto; min-width:0}
#tvufop-epg .desc{margin-top:8px; line-height:1.35}

/* Em telas muito estreitas, empilha */
@media (max-width:460px){
  #tvufop-epg .m-row{flex-direction:column; align-items:stretch}
  #tvufop-epg .m-thumb{width:100%; aspect-ratio: 89 / 50;}
}