/* Aviso urgente a pantalla completa (TV y vista previa). 1em = 1 % del ancho (lo fija el JS). */
.av-capa {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 15;
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-justify-content: center; justify-content: center;
    text-align: center;
    padding: 3%;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    font-family: 'Segoe UI', 'Montserrat', Roboto, Arial, sans-serif;
    -webkit-animation: av-entra .4s ease; animation: av-entra .4s ease;
}
.av-emergencia { background: #b91c1c; }
.av-advertencia { background: #f59e0b; color: #1a1200; }
.av-info { background: #1d4ed8; }

/* marco que "late" para llamar la atención */
.av-capa::before {
    content: '';
    position: absolute;
    top: 1.4em; right: 1.4em; bottom: 1.4em; left: 1.4em;
    border: .5em solid currentColor;
    border-radius: 1.2em;
    opacity: .45;
    -webkit-animation: av-late 1.6s ease-in-out infinite; animation: av-late 1.6s ease-in-out infinite;
}
.av-info::before { -webkit-animation: none; animation: none; opacity: .25; }

.av-marco { position: relative; max-width: 92%; }
.av-icono { width: 11em; height: 11em; margin: 0 auto 1.6em; }
.av-etiqueta { font-size: 2.2em; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; opacity: .9; margin-bottom: .8em; }
.av-titulo { margin: 0 0 .5em; font-size: 7em; line-height: 1.05; font-weight: 800; text-transform: uppercase; overflow-wrap: break-word; word-wrap: break-word; color: inherit; }
.av-mensaje { margin: 0 auto; max-width: 90%; font-size: 3.4em; line-height: 1.3; white-space: pre-line; overflow-wrap: break-word; word-wrap: break-word; }

@-webkit-keyframes av-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-entra { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes av-late { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
@keyframes av-late { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
    .av-capa, .av-capa::before { -webkit-animation: none; animation: none; }
    .av-capa::before { opacity: .45; }
}