/* pared.css — lo que va escrito en las cosas de pared (la data del canal). Va encima del pixel art, inclinado con la pared,
   y también en la vista de cerca del panel. Fuente pixel: 8 px y múltiplos para que se vea nítida. Cada cosa de pared es .o-t-<tipo> (ver js/arte/pared.js). */
.o-t-tv, .o-t-screen { display: grid; align-content: center; justify-items: center; row-gap: 2px; text-align: center; color: #F5F7F2; font-family: var(--f-pixel) }
.o-t-tv small, .o-t-screen small { font-size: 8px; letter-spacing: .12em; color: #9FB4FF }
.o-t-tv b, .o-t-screen b { font-size: 32px; font-weight: 700; line-height: 1.15; text-shadow: 0 0 6px rgba(128,152,255,.6) }
.o-t-screen b { font-size: 24px }
.o-t-tv i, .o-t-screen i { font-style: normal; font-size: 8px; color: #F0C440; letter-spacing: .06em }
.o-t-board, .o-t-whiteboard, .o-t-cork, .o-t-moodboard, .o-t-calendar, .o-t-photos { font-family: var(--f-pixel); color: #1E2A36; padding: 4px 7px; display: grid; gap: 1px; align-content: start; line-height: 1.45 }
.o-t-board small, .o-t-whiteboard small, .o-t-cork small, .o-t-moodboard small, .o-t-calendar small, .o-t-photos small { font-size: 8px; letter-spacing: .04em; color: #2547D0; font-weight: 700 }
.o-t-board div, .o-t-whiteboard div, .o-t-cork div, .o-t-moodboard div, .o-t-calendar div { font-size: 8px }
.o-t-calendar div { background: #F6F6F2; padding: 0 2px; justify-self: start }
.o-t-board div.pub { color: #1E844A }
.o-t-cork, .o-t-moodboard { color: #2B1E10 } .o-t-cork small, .o-t-moodboard small { color: #2B1E10; background: #F4EFE6; padding: 1px 3px; justify-self: start }
.o-t-cork div, .o-t-moodboard div { background: #F4EFE6; padding: 1px 3px; justify-self: start }
.o-t-cork b { font-size: 16px; justify-self: start; background: #F4EFE6; padding: 1px 3px } .o-t-cork i { font-style: normal; font-size: 8px; justify-self: start; background: #F4EFE6; padding: 1px 3px }
.o-t-calendar { padding-top: 2px } .o-t-calendar small { color: #FFFFFF }
.o-t-photos small { color: #1E2A36; background: #F7F8F4; padding: 1px 3px; justify-self: start }
.o-t-board.o-oscuro { color: #DCE6F5 } .o-t-board.o-oscuro small { color: #8FC3FF } .o-t-board.o-oscuro div.pub { color: #52C483 }
.o-t-neon { font-family: var(--f-pixel); font-weight: 700; font-size: 9px; color: #FFD4E6; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 0 3px #FF4F9A, 0 0 8px #FF4F9A; display: grid; place-content: center }
.o-t-clock { font-family: var(--f-pixel); font-size: 8px; color: #1E2A36; display: grid; place-content: center }
.o-t-mirror { font-family: var(--f-pixel); font-size: 8px; color: #2B4A5A; display: grid; place-content: end center; padding-bottom: 6px }
.o-t-mirror i { font-style: normal }
.o-t-poster, .o-t-cuadro { font-family: var(--f-pixel); display: grid; place-content: center; text-align: center; white-space: normal }
.o-t-poster b { font-size: 16px; color: #FFFFFF; line-height: 1 } .o-t-cuadro b { font-size: 9px; color: #1E2A36 }
.o-t-kanban { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; padding: 1px 3px 0 4px; font-family: var(--f-pixel); color: #1E2A36 }
.o-t-kanban div { display: flex; justify-content: center; gap: 2px; white-space: nowrap; overflow: hidden; align-items: baseline; line-height: 1 }
.o-t-kanban small { font-size: 6px; letter-spacing: 0 } .o-t-kanban b { font-size: 8px }
.o-t-grafico { font-family: var(--f-pixel); color: #1E2A36; padding: 3px 7px; display: grid; gap: 1px; align-content: start }
.o-t-grafico small { font-size: 7px; letter-spacing: .08em; color: #2E6B4F } .o-t-grafico b { font-size: 10px }
.o-t-mediakit { font-family: var(--f-pixel); padding: 2px 6px 3px; display: grid; align-content: space-between }
.o-t-mediakit small { font-size: 7px; letter-spacing: .1em; color: #FFFFFF } .o-t-mediakit b { font-size: 7px; color: #1E2A36; justify-self: end }

/* Piezas que se repiten */
.o-barra { display: block; height: 3px; background: rgba(30,42,54,.18); margin: 1px 0 2px; overflow: hidden }
.o-barra i { display: block; height: 100%; background: #2547D0 }
.o-t-tv .o-barra, .o-t-screen .o-barra, .o-oscuro .o-barra { background: rgba(255,255,255,.16); width: 70% }
.o-t-tv .o-barra { justify-self: stretch; width: 76% } .o-oscuro .o-barra i { background: #8FC3FF }
.o-caja { display: inline-block; width: 5px; height: 5px; border: 1px solid currentColor; margin-right: 3px; vertical-align: 0 }
.o-caja.on { background: #1E844A; border-color: #1E844A }
.o-spark { width: 70%; height: 12px; display: block }
.o-sub { color: #9FB4FF !important }
.o-dias { display: flex; gap: 2px } .o-dias span { width: 9px; text-align: center; font-size: 7px; padding: 1px 0; background: #E4E8EA; color: #6B7280 }
.o-dias span.on { background: #1E844A; color: #fff } .o-dias span.no { background: #F3C9C4; color: #B5322A } .o-dias span.hoy { outline: 1px solid #2547D0 }
.o-t-board em, .o-t-whiteboard em { font-style: normal; display: inline-block; min-width: 14px; color: #2547D0 }
.o-t-cork b, .o-t-cork i { line-height: 1.1 }
.o-t-clock { position: relative }
.o-reloj { position: absolute; left: 50%; top: 50%; width: 0; height: 0 }
.o-reloj i { position: absolute; left: -1px; bottom: 0; width: 2px; background: #1E2430; transform-origin: 50% 100% }
.o-reloj i.h { height: 5px } .o-reloj i.m { height: 8px; width: 1px; left: -.5px }

/* La vista de cerca (arriba del panel) */
#of .o-cerca { position: relative; margin: 0 auto 2px; border-radius: 10px; background: radial-gradient(90% 90% at 50% 40%, #2A3038, #161A1F); padding: 0; flex: none }
#of .o-cerca canvas { display: block; image-rendering: pixelated }
#of .o-cerca .o-sala-txt { position: absolute }

/* Texto de una pantalla que es mueble (la de progreso del break room) */
.o-t-mueble { transform: translate(-50%, -50%); display: grid; justify-items: center; row-gap: 1px; text-align: center; color: #F5F7F2; font-family: var(--f-pixel); pointer-events: none; white-space: nowrap }
.o-t-mueble small { font-size: 6px; letter-spacing: .12em; color: #9FB4FF }
.o-t-mueble b { font-size: 16px; font-weight: 700; line-height: 1.05; text-shadow: 0 0 5px rgba(128,152,255,.6) }
.o-t-mueble i { font-style: normal; font-size: 6px; color: #F0C440; letter-spacing: .06em }

/* v6: lo que dicen los cuartos del Ala Journey */
.o-t-cuatrocientos .o-400 { display: grid; grid-template-columns: repeat(40, 3px); gap: 1px; padding: 2px; background: rgba(8,16,32,.55) }
/* las pantallas que son muebles, con su cara inclinada como la del mueble */
.o-t-mueble.o-cara-r { transform: translate(-50%, -50%) skewY(26.565deg) } .o-t-mueble.o-cara-l { transform: translate(-50%, -50%) skewY(-26.565deg) }
.o-t-cuatrocientos .o-400 i { width: 3px; height: 3px; background: #2B4A7A }
.o-t-cuatrocientos .o-400 i.on { background: #F0C440; box-shadow: 0 0 2px #F0C440 }
.o-t-cuatrocientos .o-400 i.no { background: #4A5568 }
.o-t-cuatrocientos .o-400 i.hoy { background: #FFFFFF }
.o-t-galeria .o-gal { display: grid; grid-template-columns: repeat(3, auto); gap: 2px 4px }
.o-t-galeria .o-gal span { font-size: 5px; color: #2B2F35; background: #F4F1EA; border: 1px solid #C9971E; padding: 1px 2px }
.o-t-galeria small { color: #2B2F35 } .o-t-galeria b, .o-t-galeria i { color: #2B2F35; text-shadow: none }
.o-t-dos-countdowns .o-dos { display: flex; gap: 14px }
.o-t-dos-countdowns .o-dos span { display: grid; justify-items: center }
.o-t-dos-countdowns small { color: #FFE4EC }
.o-t-cine small { color: #7A2630 } .o-t-cine b { color: #2B1F25; text-shadow: none } .o-t-cine i { color: #7A2630 }
.o-t-libro { row-gap: 0 } .o-t-libro b { font-size: 12px; line-height: 1 } .o-t-libro small { font-size: 7px; color: #FFF2B8 } .o-t-libro i { font-size: 7px }