/* Widgets sobre la cartelera (TV y vista previa). 1em = 1 % del ancho de la pantalla (lo fija el JS). */
.cw-capa {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
    color: #fff;
    font-family: 'Segoe UI', 'Montserrat', Roboto, Arial, sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* panel reloj + clima */
.cw-panel {
    position: absolute;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    padding: .9em 1.6em;
    background: rgba(10, 15, 30, .66);
    border-radius: 1.2em;
    box-shadow: 0 .4em 1.6em rgba(0, 0, 0, .35);
}
.cw-pos-top-right    { top: 1.8em; right: 1.8em; }
.cw-pos-top-left     { top: 1.8em; left: 1.8em; }
.cw-pos-bottom-right { bottom: 1.8em; right: 1.8em; }
.cw-pos-bottom-left  { bottom: 1.8em; left: 1.8em; }
.cw-pos-bottom-right.cw-sobre-cinta, .cw-pos-bottom-left.cw-sobre-cinta { bottom: 6.6em; }
.cw-pos-top-right.cw-bajo-cinta, .cw-pos-top-left.cw-bajo-cinta { top: 6.6em; }

.cw-reloj { text-align: center; }
.cw-hora { font-size: 4.4em; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.cw-fecha { margin-top: .35em; font-size: 1.5em; line-height: 1.1; opacity: .92; white-space: nowrap; }

.cw-divisor { width: 1px; align-self: stretch; margin: 0 1.4em; background: rgba(255, 255, 255, .28); }

.cw-clima { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.cw-ico { display: block; width: 4.6em; height: 4.6em; margin-right: .6em; color: #ffd84d; }
.cw-temp { font-size: 3.6em; font-weight: 700; line-height: 1; white-space: nowrap; }
.cw-desc { margin-top: .3em; font-size: 1.5em; line-height: 1.1; white-space: nowrap; opacity: .95; }
.cw-ciudad { margin-top: .15em; font-size: 1.25em; line-height: 1.1; opacity: .75; white-space: nowrap; }

/* cintillo */
.cw-cinta {
    position: absolute; left: 0; right: 0;
    display: -webkit-flex; display: flex;
    height: 4.6em;
    background: rgba(10, 15, 30, .88);
}
.cw-cinta-bottom { bottom: 0; }
.cw-cinta-top { top: 0; }
.cw-etiqueta {
    -webkit-flex: none; flex: none;
    display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;
    padding: 0 1.8em;
    background: #f8cc25; color: #111; text-shadow: none;
    font-size: 1.7em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cw-marco { -webkit-flex: 1; flex: 1; position: relative; overflow: hidden; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.cw-pista {
    display: -webkit-flex; display: flex;
    width: -webkit-max-content; width: max-content;
    white-space: nowrap;
    font-size: 2.1em; line-height: 1;
    will-change: transform;
    -webkit-animation: cw-cinta 60s linear infinite; animation: cw-cinta 60s linear infinite;
}
.cw-copia { display: block; white-space: nowrap; padding-right: 0; }

@-webkit-keyframes cw-cinta { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-50%, 0, 0); } }
@keyframes cw-cinta { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) { .cw-pista { -webkit-animation-duration: 240s !important; animation-duration: 240s !important; } }