/* ============================================================
   FIT WORKS DISPLAY — TV App CSS
   Otimizado para Android TV (1920×1080), visualização de 2-3m
   ============================================================ */

/* ===== BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  cursor: none !important;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tv-body { background: #000; }

/* ===== TELA PRINCIPAL ===== */
.tv-screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #000;
}

/* ===== BOOT SCREEN ===== */
.tv-boot {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a3a6b 0%, #0d2347 100%);
  gap: 40px;
}

.tv-boot-brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.boot-fit     { color: #e02020; font-weight: 900; font-size: 6vh; letter-spacing: -1px; }
.boot-works   { color: #fff;    font-weight: 900; font-size: 6vh; letter-spacing: -1px; }
.boot-display { color: rgba(255,255,255,.4); font-weight: 300; font-size: 2.2vh;
                margin-left: 12px; text-transform: uppercase; letter-spacing: 3px; }

.boot-spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: #e02020;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== MODO 1: 70/30 ===== */
.layout-70-30 {
  display: flex;
  width: 100%;
  height: 100%;
}

.video-zone {
  flex: 0 0 70%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.video-zone iframe,
.video-zone video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

.video-zone .video-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #1a1a1a; font-size: 6vw;
  background: #050505;
}

/* Painel de comunicado (lado direito) */
.comunicado-zone {
  flex: 0 0 30%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 5px solid transparent;
}

.com-header {
  padding: 3vh 2.5vw 2.5vh;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  flex-shrink: 0;
  min-height: 14vh;
}

.com-logo {
  max-height: 8vh;
  max-width: 6vw;
  object-fit: contain;
  flex-shrink: 0;
}

.com-logo-placeholder {
  width: 7vh; height: 7vh;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5vh; font-weight: 900; color: #fff;
  flex-shrink: 0;
}

.com-cond-name {
  font-size: 2.4vh;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  word-break: break-word;
}

.com-title {
  font-size: 3vh;
  font-weight: 800;
  text-align: center;
  padding: 2.5vh 2vw 1.5vh;
  color: #111;
  flex-shrink: 0;
  line-height: 1.2;
  min-height: 10vh;
  display: flex; align-items: center; justify-content: center;
}

.com-body {
  flex: 1;
  overflow: hidden;
  padding: 0 2vw;
  font-size: 2.1vh;
  line-height: 1.7;
  color: #2a2a2a;
}

.com-body h1,h2,h3 { font-size: 2.6vh; margin-bottom: 1vh; }
.com-body p         { margin-bottom: 1vh; }
.com-body ul, .com-body ol { margin-left: 2vw; margin-bottom: 1vh; }

.com-footer {
  padding: 1.8vh 2vw 2.5vh;
  font-size: 1.9vh;
  color: #555;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
  line-height: 1.6;
}

/* ===== MODO 2: COMUNICADOS TELA CHEIA ===== */
.layout-com-full {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  animation: fadeIn .5s ease;
}

.com-full-header {
  padding: 4vh 5vw 3vh;
  display: flex;
  align-items: center;
  gap: 3vw;
  flex-shrink: 0;
  min-height: 18vh;
}

.com-logo-full {
  max-height: 11vh;
  max-width: 9vw;
  object-fit: contain;
  flex-shrink: 0;
}

.com-logo-placeholder-full {
  width: 10vh; height: 10vh;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 5vh; font-weight: 900; color: #fff;
  flex-shrink: 0;
}

.com-full-cond-name {
  font-size: 4.5vh;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.com-full-title {
  font-size: 5.5vh;
  font-weight: 900;
  text-align: center;
  padding: 3.5vh 8vw 2.5vh;
  color: #111;
  flex-shrink: 0;
  line-height: 1.15;
}

.com-full-body {
  flex: 1;
  overflow: hidden;
  padding: 0 8vw;
  font-size: 3vh;
  line-height: 1.75;
  color: #1a1a1a;
}

.com-full-body h1,h2 { font-size: 3.8vh; margin-bottom: 1.5vh; }
.com-full-body p      { margin-bottom: 1.5vh; }
.com-full-body ul, .com-full-body ol { margin-left: 3vw; margin-bottom: 1.5vh; }

.com-full-footer {
  padding: 2.5vh 8vw 4vh;
  font-size: 2.6vh;
  color: #444;
  border-top: 2px solid #e0e0e0;
  flex-shrink: 0;
  line-height: 1.5;
}

/* ===== MODO 3: VÍDEOS TELA CHEIA ===== */
.layout-video-full {
  width: 100%; height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.layout-video-full iframe,
.layout-video-full video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}

/* ===== OVERLAYS ===== */
.tv-clock {
  position: fixed;
  top: 2.5vh; right: 2vw;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 3.2vh;
  font-weight: 700;
  padding: 1vh 2vw;
  border-radius: 100px;
  letter-spacing: 2px;
  z-index: 100;
  backdrop-filter: blur(4px);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  transition: opacity .3s;
}

.tv-progress {
  position: fixed;
  bottom: 0; left: 0;
  height: 7px;
  background: var(--prog-color, #e02020);
  transition: width .8s linear;
  z-index: 100;
  border-radius: 0 4px 4px 0;
}

.tv-indicator {
  position: fixed;
  bottom: 1.8vh; right: 2vw;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.85);
  font-size: 2vh;
  padding: .6vh 1.4vw;
  border-radius: 100px;
  z-index: 100;
  letter-spacing: 1px;
}

.tv-offline-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(224,32,32,.92);
  color: #fff;
  font-size: 2.2vh;
  font-weight: 700;
  text-align: center;
  padding: 1vh 0;
  z-index: 200;
  letter-spacing: 3px;
  backdrop-filter: blur(4px);
}

/* ===== PLACEHOLDER (sem conteúdo) ===== */
.tv-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
}

.tv-placeholder-logo {
  max-height: 20vh;
  max-width: 30vw;
  object-fit: contain;
  opacity: .9;
}

.tv-placeholder-name {
  color: rgba(255,255,255,.85);
  font-size: 5vh;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
}

.tv-placeholder-sub {
  color: rgba(255,255,255,.45);
  font-size: 2.4vh;
  letter-spacing: 2px;
}

/* ===== ANIMAÇÕES ===== */
@keyframes fadeIn  { from { opacity: 0; }            to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; }            to { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.anim-fade-in  { animation: fadeIn  .5s ease forwards; }
.anim-fade-out { animation: fadeOut .4s ease forwards; }
.anim-slide-up { animation: slideUp .6s ease forwards; }

/* ===== HIDDEN ===== */
.hidden { display: none !important; }