/* Banda informativa (TV y vista previa del panel). Todo se mide en "em" = 1% del lado corto. */
.mxband {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; box-sizing: border-box;
  color: #fff; border-top: .7em solid #FF1A72; overflow: hidden;
  font-family: "Red Hat Display", "Source Sans Pro", Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mxband * { box-sizing: border-box; }

/* Horizontal: una fila */
.mxband.h { align-items: center; padding: 0 3em; }
.mxband.h > * { flex: none; }
.mx-brand { display: flex; align-items: center; white-space: nowrap; font-size: 4.6em; line-height: 1; letter-spacing: -.01em; }
.mx-brand img { height: 1.7em; width: auto; display: block; }
.mx-brand-light { font-weight: 300; }
.mx-brand-bold { font-weight: 800; }
.mx-sep { width: .25em; align-self: stretch; margin: 2.2em 3em; background: rgba(255, 255, 255, .25); }
.mxband.h .mx-msg { flex: 1 1 auto; min-width: 0; }
/* Mensajes largos: hasta dos líneas antes de cortar */
.mxband.h .mx-msg-text { font-size: 3.3em; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mx-msg { overflow: hidden; }
.mx-msg-text { font-size: 3.6em; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.mx-msg-text.in { -webkit-animation: mxIn .7s ease forwards; animation: mxIn .7s ease forwards; }
@-webkit-keyframes mxIn { from { opacity: 0; -webkit-transform: translateY(40%); } to { opacity: 1; -webkit-transform: none; } }
@keyframes mxIn { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }

.mx-fx { display: flex; align-items: center; margin-left: 3em; background: rgba(255, 255, 255, .1); border-radius: 1.6em; padding: .9em 1.2em .9em .9em; }
.mx-fx-label { font-size: 2.1em; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .45em .8em; border-radius: .6em; white-space: nowrap; }
.mx-fx-vals { display: flex; margin-left: 1.4em; }
.mx-fx-pair { display: flex; flex-direction: column; line-height: 1.05; margin-left: 1.6em; }
.mx-fx-pair:first-child { margin-left: 0; }
.mx-fx-k { font-size: 1.9em; opacity: .75; }
.mx-fx-v { font-size: 4.2em; font-weight: 800; letter-spacing: -.02em; }

.mx-clock { margin-left: 3em; text-align: right; line-height: 1.1; white-space: nowrap; }
.mx-time { font-size: 4.4em; font-weight: 800; letter-spacing: -.02em; }
.mx-date { font-size: 2em; opacity: .8; }

/* Vertical: tres filas */
.mxband.v { flex-direction: column; justify-content: space-between; padding: 2.2em 4em 2.4em; }
.mx-row { display: flex; align-items: center; justify-content: space-between; }
.mxband.v .mx-brand { font-size: 5.6em; }
.mxband.v .mx-msg { flex: 1; display: flex; align-items: center; min-height: 0; padding: 1.2em 0; }
.mxband.v .mx-msg-text { font-size: 4.2em; line-height: 1.15; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mxband.v .mx-time { font-size: 5em; }
.mxband.v .mx-date { font-size: 2.4em; }
.mxband.v .mx-fx { margin-left: 0; width: 100%; justify-content: space-between; }
.mxband.v .mx-fx-label { font-size: 2.6em; }
.mxband.v .mx-fx-k { font-size: 2.4em; }
.mxband.v .mx-fx-v { font-size: 4.6em; }