/* ========================================================== SMARTPANEL — LAYOUT FIXO PARA TV Arquivo: assets/css/layout-tv.css Carregue este arquivo DEPOIS de main.css. Requer: ========================================================== */ body.layout-tv { --tv-ticker-height: 38px; --tv-gap: 8px; --tv-padding: 8px; --tv-radius: 18px; width: 100%; height: 100%; overflow: hidden; cursor: none; } /* ========================================================== TICKER ========================================================== */ body.layout-tv .top-ticker { height: var(--tv-ticker-height); } body.layout-tv .top-ticker-track { font-size: 15px; /* * Valor maior = mais lento. * 90s deixa a leitura mais confortável na TV. */ animation-duration: 90s; } body.layout-tv .top-ticker-content { gap: 30px; padding-right: 30px; } /* ========================================================== GRID PRINCIPAL ========================================================== */ body.layout-tv .dashboard { width: 100vw; height: calc(100vh - var(--tv-ticker-height)); margin-top: var(--tv-ticker-height); padding: var(--tv-padding); display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 28fr) minmax(0, 16fr); grid-template-rows: minmax(0, 58fr) minmax(0, 42fr); gap: var(--tv-gap); } body.layout-tv .panel { border-radius: var(--tv-radius); } /* ========================================================== POSIÇÃO DOS PAINÉIS ========================================================== */ body.layout-tv .main-panel { grid-column: 1; grid-row: 1; padding: 10px 14px 9px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; } body.layout-tv .weather-panel { grid-column: 1; grid-row: 2; padding: 7px 9px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3px; } body.layout-tv .calendar-panel { grid-column: 2; grid-row: 1; padding: 9px 11px; } body.layout-tv .events-panel { grid-column: 2; grid-row: 2; padding: 8px 9px; } body.layout-tv .family-panel { grid-column: 3; grid-row: 1 / 3; min-height: 0; padding: 7px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } /* ========================================================== PAINEL PRINCIPAL ========================================================== */ body.layout-tv .weekday { font-size: 24px; line-height: 1; } body.layout-tv .date-area { min-height: 0; display: grid; grid-template-columns: minmax(130px, 1fr) minmax(300px, 1.45fr) minmax(130px, 1fr); align-items: start; gap: 10px; } body.layout-tv .sun-box { margin-top: 24px; font-size: 14px; } body.layout-tv .sun-icon { width: 42px; height: 42px; } body.layout-tv .sun-box strong { font-size: 26px; } body.layout-tv .date-center { min-height: 0; padding-top: 2px; justify-content: flex-start; } body.layout-tv .clock-time { margin-bottom: 5px; font-size: 34px; } body.layout-tv .day-number { font-size: 138px; line-height: 0.72; } body.layout-tv .month-name { margin-top: 10px; font-size: 38px; } body.layout-tv .main-devotional-row { width: 100%; display: grid; grid-template-columns: minmax(115px, 0.8fr) minmax(250px, 1.7fr) minmax(150px, 1fr); align-items: end; gap: 10px; } body.layout-tv .main-devotional-label { font-size: 12px; } body.layout-tv .main-rpsp strong { font-size: 18px; } body.layout-tv .bible-promise { max-width: 100%; margin: 0; font-size: 14px; line-height: 1.2; } body.layout-tv .main-lesson strong { font-size: 13px; } body.layout-tv .main-lesson > span:last-child { font-size: 11px; } /* ========================================================== CALENDÁRIO ========================================================== */ body.layout-tv .calendar-panel h2 { margin-bottom: 6px; font-size: 24px; } body.layout-tv .calendar-grid { grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 2px; font-size: 16px; } body.layout-tv .calendar-weekday, body.layout-tv .calendar-day { min-height: 0; padding: 2px 0; } body.layout-tv .calendar-day { isolation: isolate; } body.layout-tv .calendar-day-number { position: relative; z-index: 2; } body.layout-tv .calendar-event-indicator { top: -1px; right: -1px; z-index: 5; min-width: 14px; height: 14px; border-width: 1px; font-size: 7px; } /* ========================================================== EVENTOS ========================================================== */ body.layout-tv .events-panel h2 { margin-bottom: 5px; font-size: 16px; } body.layout-tv .events-list { gap: 4px; } body.layout-tv .event-card { min-height: 0; padding: 5px 7px; grid-template-columns: minmax(58px, 0.7fr) minmax(0, 2fr); gap: 6px; } body.layout-tv .event-date { font-size: 10px; } body.layout-tv .event-info strong { font-size: 12px; } body.layout-tv .event-info span { font-size: 9px; } /* ========================================================== CLIMA ========================================================== */ body.layout-tv .weather-summary { grid-template-columns: minmax(185px, 0.8fr) minmax(0, 1.2fr); gap: 8px; } body.layout-tv .weather-current { gap: 7px; } body.layout-tv .weather-icon { width: 42px; height: 42px; } body.layout-tv .weather-temp { font-size: 34px; } body.layout-tv .weather-desc { font-size: 12px; } body.layout-tv .weather-details { font-size: 10px; } body.layout-tv .weather-detail-icon { width: 15px; height: 15px; } body.layout-tv .weather-chart-svg { min-height: 70px; } body.layout-tv .weather-day-name { font-size: 8px; } body.layout-tv .weather-day-icon { width: 18px; height: 18px; } body.layout-tv .weather-day-temp { font-size: 9px; } /* ========================================================== ANIVERSÁRIOS ========================================================== */ body.layout-tv .family-panel h2 { margin-bottom: 5px; font-size: 17px; line-height: 1.05; } body.layout-tv .family-list { min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 5px; } body.layout-tv .family-card { min-height: 0; padding: 6px 7px; justify-content: center; border-radius: 10px; } body.layout-tv .family-name { font-size: 17px; } body.layout-tv .family-date { margin-top: 3px; font-size: 11px; } body.layout-tv .family-days { margin-top: 3px; font-size: 10px; } body.layout-tv .family-age { margin-top: 2px; font-size: 9px; } /* ========================================================== CORREÇÃO DO PAINEL PRINCIPAL NA TV ========================================================== */ body.layout-tv .main-panel { padding-left: 16px; padding-right: 16px; } /* Evita que a data central empurre as laterais */ body.layout-tv .date-area { width: 100%; min-width: 0; grid-template-columns: minmax(120px, 0.9fr) minmax(220px, 1.25fr) minmax(120px, 0.9fr); gap: 8px; } /* Permite que os três blocos encolham corretamente */ body.layout-tv .sun-box, body.layout-tv .date-center { min-width: 0; } /* Nascer do sol */ body.layout-tv .sunrise-box { padding-left: 8px; } /* Pôr do sol: afasta da borda direita */ body.layout-tv .sunset-box { padding-right: 18px; } /* Reduz ligeiramente a data para liberar as laterais */ body.layout-tv .day-number { font-size: 126px; } body.layout-tv .month-name { font-size: 36px; } /* ========================================================== CORREÇÃO DA FAIXA DEVOCIONAL ========================================================== */ body.layout-tv .main-devotional-row { width: 100%; min-width: 0; grid-template-columns: minmax(105px, 0.75fr) minmax(220px, 1.55fr) minmax(170px, 1fr); gap: 10px; } body.layout-tv .main-rpsp, body.layout-tv .bible-promise, body.layout-tv .main-lesson { min-width: 0; } /* Mantém a lição dentro do painel */ body.layout-tv .main-lesson { padding-right: 16px; text-align: right; overflow: hidden; } body.layout-tv .main-lesson strong, body.layout-tv .main-lesson > span:last-child { display: block; max-width: 100%; overflow-wrap: anywhere; word-break: normal; } body.layout-tv .main-lesson strong { font-size: 12px; } body.layout-tv .main-lesson > span:last-child { font-size: 10px; } /* Promessa central um pouco mais estreita */ body.layout-tv .bible-promise { padding: 0 8px; font-size: 13px; }