/* Monitor de entregas: visão compacta em cards (public/js/45-monitor-compacto.js) */
.seletor-visao-rotas .btn { --bs-btn-color: #003366; --bs-btn-border-color: #003366; --bs-btn-hover-bg: #e6eef7; --bs-btn-hover-color: #003366;
  --bs-btn-hover-border-color: #003366; --bs-btn-active-bg: #003366; --bs-btn-active-border-color: #003366; }

/* cores por status (mesmas de VISUAL_STATUS_ROTA) */
.mc-st-CARREGAMENTO { --mc-cor: #f5b800; --mc-cor-fundo: #fff8e1; --mc-cor-texto: #7a5a00; }
.mc-st-EM_ROTA      { --mc-cor: #0284c7; --mc-cor-fundo: #e0f2fe; --mc-cor-texto: #075985; }
.mc-st-RETORNANDO   { --mc-cor: #0dcaf0; --mc-cor-fundo: #e0f9fd; --mc-cor-texto: #0b5563; }
.mc-st-ENCERRADA    { --mc-cor: #198754; --mc-cor-fundo: #e7f5ee; --mc-cor-texto: #0f5132; }

/* na visão em cards o container deixa de ser o grid de 2 colunas da visão detalhada (painel.css) */
#container-programacoes.mc-modo { display: block !important; }

/* atalhos de status (dentro da barra de filtros) */
.mc-atalhos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #eef2f6; }
.mc-atalho { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #dbe2ea; background: #fff; color: #334155;
  border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600; transition: background .15s, border-color .15s, box-shadow .15s; }
.mc-atalho b { font-variant-numeric: tabular-nums; color: #0f172a; }
.mc-atalho .mc-ponto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mc-cor); }
.mc-atalho:hover { border-color: #94a3b8; }
.mc-atalho.ativo { background: #003366; border-color: #003366; color: #fff; box-shadow: 0 2px 6px rgba(0, 51, 102, .25); }
.mc-atalho.ativo b { color: #fff; }

/* grade */
.mc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; padding-bottom: 2rem; }

.mc-card { position: relative; display: flex; flex-direction: column; gap: .75rem; background: #fff; border-radius: 12px;
  padding: 1rem 1.05rem .85rem; border: 1px solid #e5e9f0; border-top: 4px solid var(--mc-cor);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04); transition: box-shadow .2s, transform .2s; }
.mc-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .09); transform: translateY(-2px); }

/* cabeçalho: rota, programação, data e placa */
.mc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.mc-ident { min-width: 0; }
.mc-rota { font-size: 1.3rem; font-weight: 800; color: #0f172a; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; color: #64748b; margin-top: .15rem; }
.mc-sub b { color: #334155; }
.mc-sep { color: #cbd5e1; margin: 0 .1rem; }

/* placa no estilo Mercosul */
.mc-placa { flex-shrink: 0; font-family: 'Consolas', 'Roboto Mono', monospace; font-weight: 700; font-size: .95rem; letter-spacing: .08em;
  color: #111827; background: #fff; border: 1.5px solid #1f2937; border-top: 5px solid #1d4ed8; border-radius: 5px;
  padding: .05rem .5rem .1rem; white-space: nowrap; }

/* status da rota e do rastreador */
.mc-estados { display: flex; flex-wrap: wrap; gap: .4rem; }
.mc-status, .mc-gps { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .2rem .65rem; }
.mc-status { background: var(--mc-cor-fundo); color: var(--mc-cor-texto); text-transform: uppercase; letter-spacing: .02em; }
.mc-gps { background: #f1f5f9; color: #475569; gap: .4rem; }
.mc-gps .mc-ponto { width: .5rem; height: .5rem; border-radius: 50%; background: #94a3b8; }
.mc-gps-mov    { background: #e7f5ee; color: #146c43; }
.mc-gps-mov .mc-ponto { background: #198754; box-shadow: 0 0 0 0 rgba(25, 135, 84, .6); animation: mc-pulso 1.8s infinite; }
.mc-gps-parado { background: #fff4e0; color: #8a5300; }
.mc-gps-parado .mc-ponto { background: #f59e0b; }
.mc-gps-off    { background: #fdecee; color: #a52834; }
.mc-gps-off .mc-ponto { background: #dc3545; }
@keyframes mc-pulso { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .55); } 70% { box-shadow: 0 0 0 7px rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } }
@media (prefers-reduced-motion: reduce) { .mc-gps-mov .mc-ponto { animation: none; } .mc-card, .mc-card:hover { transition: none; transform: none; } }

/* onde está -> próxima cidade */
.mc-trajeto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; background: #f8fafc;
  border: 1px solid #eef2f6; border-radius: 10px; padding: .6rem .75rem; }
.mc-trecho { display: flex; flex-direction: column; min-width: 0; }
.mc-seta { color: #94a3b8; font-size: 1.1rem; }
.mc-rotulo { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-bottom: .1rem; }
.mc-cidade { font-size: 1.02rem; font-weight: 700; color: #0f172a; line-height: 1.2; overflow-wrap: anywhere; }
.mc-cidade small { font-weight: 600; color: #64748b; }
.mc-cidade-vazia { color: #94a3b8; font-weight: 600; font-size: .9rem; }
.mc-destaque { color: #075985; }
.mc-ok { color: #146c43; }
.mc-quando { font-size: .75rem; color: #64748b; margin-top: .1rem; }
.mc-tag-ultima { align-self: flex-start; margin-top: .2rem; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #075985; background: #e0f2fe; border-radius: 4px; padding: .05rem .4rem; }

/* progresso de entregas */
.mc-progresso-txt { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: #475569; margin-bottom: .3rem; }
.mc-progresso-txt b { color: #0f172a; font-variant-numeric: tabular-nums; }
.mc-pct { font-size: 1rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.mc-barra { height: .55rem; background: #e9eef4; border-radius: 999px; overflow: hidden; }
.mc-barra-valor { height: 100%; background: linear-gradient(90deg, #0284c7, #0ea5e9); border-radius: 999px; transition: width .4s ease; }
.mc-barra-valor.mc-completa { background: linear-gradient(90deg, #198754, #22c55e); }

/* equipe */
.mc-equipe { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mc-equipe > div { display: flex; flex-direction: column; min-width: 0; }
.mc-pessoa { font-size: .88rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rodapé: carga e acesso ao roteiro */
.mc-rodape { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid #eef2f6; padding-top: .6rem; margin-top: auto; }
.mc-carga { font-size: .8rem; color: #475569; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.mc-carga b { color: #0f172a; font-variant-numeric: tabular-nums; }
.mc-ver { flex-shrink: 0; border: 0; background: transparent; color: #003366; font-size: .8rem; font-weight: 700; border-radius: 6px; padding: .25rem .5rem; }
.mc-ver:hover { background: #e6eef7; }
.mc-ver:focus-visible, .mc-atalho:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

.mc-vazio { text-align: center; color: #64748b; background: #fff; border-radius: 12px; padding: 3rem 1rem; }
.mc-vazio i { font-size: 2.2rem; color: #cbd5e1; display: block; margin-bottom: .5rem; }

@media (max-width: 576px) {
  .mc-grade { grid-template-columns: 1fr; gap: .75rem; }
  .mc-trajeto { grid-template-columns: 1fr; }
  .mc-seta { transform: rotate(90deg); justify-self: start; margin-left: .35rem; }
}

/* =====================================================================
   MODO TV: tela cheia, tema escuro (menos reflexo e mais contraste à distância)
   ===================================================================== */
html.mc-tv-ativo { font-size: clamp(15px, .95vw, 28px); overflow: hidden; }
html.mc-tv-ativo body { overflow: hidden; }

.mc-tv { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; gap: .9rem; padding: 1rem 1.25rem .75rem;
  background: radial-gradient(1200px 600px at 10% -10%, #13284a 0%, transparent 60%), #0a1220; color: #e2e8f0; }
.mc-tv.mc-sem-cursor, .mc-tv.mc-sem-cursor * { cursor: none !important; }

.mc-tv-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0; }
.mc-tv-marca { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.mc-tv-marca img { height: 2.4rem; width: auto; }
.mc-tv-titulo { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; color: #f8fafc; line-height: 1.1; }
.mc-tv-conexao { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: #4ade80; }
.mc-tv-conexao .mc-ponto { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; animation: mc-pulso 1.8s infinite; }
.mc-tv-conexao.erro { color: #f87171; }
.mc-tv-conexao.erro .mc-ponto { background: #ef4444; animation: none; }

.mc-tv-contadores { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.mc-tv .mc-atalho { font-size: 1rem; padding: .45rem 1rem; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: #cbd5e1; cursor: default; }
.mc-tv .mc-atalho b { color: #fff; font-size: 1.15rem; margin-left: .15rem; }
.mc-tv .mc-atalho .mc-ponto { width: .7rem; height: .7rem; }

.mc-tv-direita { display: flex; align-items: center; gap: 1rem; }
.mc-tv-relogio { text-align: right; line-height: 1.05; }
#mc-tv-hora { font-size: 2.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #f8fafc; }
#mc-tv-data { font-size: .8rem; color: #94a3b8; text-transform: capitalize; }
.mc-tv-botoes { display: flex; gap: .35rem; }
.mc-tv-btn { border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #94a3b8; border-radius: 8px;
  width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.mc-tv-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.mc-tv-grade { flex: 1 1 auto; min-height: 0; display: grid; gap: 1rem; }

/* cards no escuro */
.mc-tv .mc-st-CARREGAMENTO { --mc-cor-fundo: rgba(245, 184, 0, .16); --mc-cor-texto: #fcd34d; }
.mc-tv .mc-st-EM_ROTA      { --mc-cor-fundo: rgba(14, 165, 233, .16); --mc-cor-texto: #7dd3fc; }
.mc-tv .mc-st-RETORNANDO   { --mc-cor-fundo: rgba(13, 202, 240, .14); --mc-cor-texto: #67e8f9; }
.mc-tv .mc-st-ENCERRADA    { --mc-cor-fundo: rgba(25, 135, 84, .18); --mc-cor-texto: #86efac; }
.mc-tv .mc-card { background: #111b2e; border-color: #1c2a42; border-top-width: 5px; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  min-height: 0; overflow: hidden; gap: .7rem; padding: 1rem 1.1rem .8rem; }
.mc-tv .mc-card:hover { transform: none; }
.mc-tv .mc-rota { color: #f8fafc; font-size: 1.6rem; }
.mc-tv .mc-sub, .mc-tv .mc-rotulo, .mc-tv .mc-quando, .mc-tv .mc-carga, .mc-tv .mc-progresso-txt { color: #94a3b8; }
.mc-tv .mc-sub b, .mc-tv .mc-carga b, .mc-tv .mc-progresso-txt b, .mc-tv .mc-pct { color: #f1f5f9; }
.mc-tv .mc-sep { color: #334155; }
.mc-tv .mc-placa { font-size: 1.05rem; }
.mc-tv .mc-status, .mc-tv .mc-gps { font-size: .85rem; padding: .25rem .75rem; }
.mc-tv .mc-gps         { background: rgba(148, 163, 184, .14); color: #cbd5e1; }
.mc-tv .mc-gps-mov     { background: rgba(34, 197, 94, .16); color: #86efac; }
.mc-tv .mc-gps-parado  { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.mc-tv .mc-gps-off     { background: rgba(239, 68, 68, .16); color: #fca5a5; }
.mc-tv .mc-trajeto { background: #0c1526; border-color: #1c2a42; padding: .75rem .85rem; }
.mc-tv .mc-cidade { color: #f8fafc; font-size: 1.3rem; }
.mc-tv .mc-cidade small { color: #94a3b8; }
.mc-tv .mc-cidade-vazia { color: #64748b; font-size: 1rem; }
.mc-tv .mc-destaque { color: #7dd3fc; }
.mc-tv .mc-ok { color: #86efac; }
.mc-tv .mc-seta { color: #475569; font-size: 1.3rem; }
.mc-tv .mc-tag-ultima { background: rgba(14, 165, 233, .18); color: #7dd3fc; }
.mc-tv .mc-pct { font-size: 1.25rem; }
.mc-tv .mc-barra { height: .7rem; background: #1e293b; }
.mc-tv .mc-pessoa { color: #e2e8f0; font-size: .95rem; }
.mc-tv .mc-rodape { border-top-color: #1c2a42; }

.mc-tv-vazio { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; background: transparent; color: #94a3b8; font-size: 1.2rem; }
.mc-tv-vazio i { color: #334155; font-size: 3.5rem; }

/* rodapé: total, páginas e tempo até trocar */
.mc-tv-rodape { position: relative; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .85rem; color: #94a3b8; padding-top: .35rem; min-height: 1.6rem; }
.mc-tv-filtro { margin-left: .5rem; color: #fcd34d; font-weight: 600; }
.mc-tv-paginas { display: inline-flex; align-items: center; gap: .4rem; }
.mc-tv-paginas > span:last-child { margin-left: .4rem; }
.mc-tv-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #334155; }
.mc-tv-dot.ativo { background: #e2e8f0; }
.mc-tv-timer { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #38bdf8; transform-origin: left; animation: mc-timer linear forwards; }
@keyframes mc-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mc-tv-timer { animation: none; display: none; } }

@media (max-width: 900px) {
  .mc-tv-topo { flex-wrap: wrap; }
  .mc-tv-contadores { order: 3; width: 100%; justify-content: flex-start; }
}