/* =========================================================
   TV Corporativa - Tema APAEB (bege natural, verde e laranja ISO)
   Carregado DEPOIS do player.css. Para voltar ao visual
   original basta remover a linha <link> do player.html.
   ========================================================= */

:root {
  --bg-color: #efede8;
  --primary-color: #228b00;
  --panel-bg: transparent;
  --panel-border: #e0dedb;
  --text-main: #2a2a28;
  --text-muted: #6b6a64;
  --accent-color: #f5844a;
  --accent-gold: #228b00;
  --apaeb-green: #228b00;
  --apaeb-green-2: #009040;
  --apaeb-orange: #f5844a;
  --apaeb-frame: #e0dedb;
  --apaeb-card: rgba(255, 255, 255, 0.72);
  --font-apaeb: 'Montserrat', 'Poppins', 'Segoe UI', Roboto, sans-serif;
  --header-height: 112px;
}

body, html {
  background: #efede8;
  color: #2a2a28;
  font-family: var(--font-apaeb);
}

#playerRoot { background: #efede8; }

/* ---------- Cabecalho: logo + aba verde (como o menu do site) ---------- */
.company-header {
  background: #efede8;
  backdrop-filter: none;
  border-bottom: 1px solid #d8d5cf;
  box-shadow: none;
  padding: 0 0 0 28px;
  align-items: stretch;
}

.company-brand::before {
  content: '';
  display: block;
  width: 400px;
  height: 100%;
  background: url('/img/apaeb-logo.png') left center / contain no-repeat;
}

.company-titles { display: none; }
.company-logo { display: none !important; }

.company-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 28px 10px 0;
}

/* a "aba" verde pendurada no topo, igual ao menu ativo do site */
.screen-badge {
  background: #228b00;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 26px 22px 18px;
  font-family: var(--font-apaeb);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: -1px;
}

.screen-credit { color: #8a8981; font-size: 0.7rem; }

/* ---------- Zonas ---------- */
.tv-zone { padding: 10px; overflow: visible; }

/* ---------- Midia principal: moldura cinza como no site ---------- */
.zone-media-wrapper {
  background: #e4e1dc;
  border: 10px solid #e0dedb;
  border-radius: 4px;
  box-shadow: 0 10px 28px -14px rgba(60, 50, 30, 0.35);
}

.media-item { transition: opacity 0.62s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; }

img.media-item {
  animation: tvKenBurns 18s ease-out forwards;
  transform-origin: 50% 50%;
}

@keyframes tvKenBurns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-0.7%, -0.5%, 0); }
}

#mediaPlaceholder { color: #8a8981 !important; }

.carousel-nav-btn {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #d8d5cf;
  color: #228b00;
}

.carousel-bottom-bar {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #d8d5cf;
  border-radius: 999px;
}

.carousel-dot { background: #c9c6bf; height: 6px; border-radius: 999px; }
.carousel-dot.active { background: #228b00; box-shadow: none; }
.carousel-pause-btn { color: #228b00; }

/* ---------- Coluna lateral ---------- */
.zone-sidebar-wrapper {
  background: transparent;
  backdrop-filter: none;
  border: none;
  padding: 0;
  gap: 14px;
}

.zone-sidebar-horizontal { border: none; }

.widget-card {
  background: var(--apaeb-card);
  backdrop-filter: none;
  border: 1px solid #e0dedb;
  border-top: 4px solid #228b00;
  border-radius: 6px;
  box-shadow: 0 8px 22px -14px rgba(60, 50, 30, 0.45);
  padding: 18px 22px;
  color: #2a2a28;
}

/* Relogio */
.clock-time {
  font-family: var(--font-apaeb);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: #2a2a28;
  text-shadow: none;
}

.clock-date {
  color: #228b00;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* Clima */
.weather-temp { color: #2a2a28; font-weight: 700; }
.weather-city { color: #2a2a28; font-weight: 700; }
.weather-cond { color: #55544e; }
.weather-feels { color: #77766f; }

/* Comunicados */
.widget-title {
  color: #228b00;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding-left: 12px;
  position: relative;
}

.widget-title::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 4px;
  background: #f5844a;
}

.announcement-body { color: #2a2a28; font-weight: 500; }
.announcement-img-wrapper { background: #e4e1dc; border-radius: 4px; }
.announcement-fixed-img { border-radius: 4px; }

/* Senhas (clinicas) - versao clara */
.widget-queue {
  background: #ffffff;
  border: 1px solid #e0dedb;
  border-top: 4px solid #f5844a;
}

.queue-badge { background: #f5844a; color: #fff; }
.queue-ticket-num { color: #228b00; text-shadow: none; font-weight: 800; }
.queue-location { color: #2a2a28; }
.queue-service-tag { color: #228b00; }
.queue-patient { color: #2a2a28; }
.queue-history-box { border-top: 1px solid #e0dedb; }
.queue-history-title { color: #77766f; }
.queue-history-item { background: #efede8; border: none; border-radius: 4px; }
.qh-num { color: #228b00; }
.qh-loc { color: #55544e; }

/* Zona de comunicados em tela cheia (o original forca cantos retos inline) */
.zone-announcements .widget-card {
  border-radius: 6px !important;
  padding: 22px 26px !important;
}

/* ---------- Rodape de noticias ---------- */
.zone-ticker-wrapper {
  background: #ffffff;
  border: 1px solid #e0dedb;
  border-bottom: 4px solid #228b00;
  border-radius: 4px;
  box-shadow: 0 8px 22px -14px rgba(60, 50, 30, 0.45);
}

.ticker-label {
  background: #f5844a;
  color: #ffffff;
  font-family: var(--font-apaeb);
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 0 26px;
  box-shadow: none;
}

.ticker-content { color: #2a2a28; font-weight: 500; }
.ticker-separator { color: #228b00; }

/* ---------- Botoes flutuantes ---------- */
.floating-action-btn,
.audio-toggle-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #2a2a28;
  border: 1px solid #d8d5cf;
  border-radius: 999px;
  font-family: var(--font-apaeb);
}

.audio-toggle-btn.unmuted { color: #228b00; }

/* ---------- Elementos que nao devem aparecer na TV ---------- */
.company-meta,
.floating-screen-meta,
.screen-badge,
.screen-credit,
#audioUnmuteBtn {
  display: none !important;
}