/**********************************************************/
/***** reset.css v2.0 (Eric Meyer's original version) *****/
/**********************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/******************/
/***** Styles *****/
/******************/

@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes highlight {0% {color: inherit;} 50% {color: #bf4040;} 100% {color: inherit;}}

/**** Layout *****/
html {box-sizing: border-box; scroll-behavior: smooth;}
*, *:before, *:after {box-sizing: inherit;}
body {font-family: 'Fira Sans Condensed', sans-serif; font-size: 16px; color: white; background-color: black;}

/**** Commons *****/
a {text-decoration: none; color: yellow;}
a:hover {border-bottom: 1px solid yellow;}
i {font-style: italic;}
strong {font-weight: bold;}
button, input[type=submit] {padding: 0.5em; text-transform: uppercase; font-family: 'Fira Sans Condensed', sans-serif; font-weight: bold; color: white; background-color: rgba(0, 0, 0, 0.5); border-radius: 1em; box-shadow: 1px 1px black; cursor: pointer;}
button:hover, input[type=submit]:hover {color: black; background-color: #bf4040;}
button:disabled, button[disabled], button:disabled:hover, button[disabled]:hover {color: #666666; background-color: #cccccc; cursor: no-drop;}
sup {font-size: 0.75em; vertical-align: super;}
.texto {text-align: left;}
.centrado {text-align: center;}
.numero, .fecha {text-align: right; white-space: nowrap;}
.aviso {margin: 1em 0; text-align: center; font-size: 0.7em; text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black; font-style: italic; color: #f2d652;}

/***** Main *****/
main {height: 100vh;}
h2 {margin-top: 1em; text-align: center; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: bold; color: white;}
section {width: calc(100% - 2em); max-width: 800px; margin: 1em auto;}
section p {text-shadow: -1px -1px 1px black, 1px -1px 1px black, -1px 1px 1px black, 1px 1px 1px black;}
.accion {margin: 1em 0; text-align: center; text-shadow: none;}
.accion a {display: inline-block; margin: 0.5em auto; padding: 0.5em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.75); border-radius: 1em; cursor: pointer;}
.accion a:hover {color: black; background-color: #bf4040;}
.narrador {margin: 1em 0; text-align: center; font-style: italic; color: silver;}
.pantalla {padding: 1em; font-size: clamp(1rem, 3.5vw, 2rem);}
.media {margin: 1em 0; text-align: center;}
.media video {width: 100%; max-width: 720px;}
/* Progreso */
.progreso-contenedor {display: inline-block; width: 100px; border: 1px solid #bf4040;}
#progreso-barra {display: block; height: 100%; background-color: #bf4040; text-align: center;}
.progreso-porcentaje {display: block; width: 100%;}

/***** Navigation *****/
nav {position: sticky; top: 0; display: flex; justify-content: space-between; font-size: clamp(0.9rem, 1.5vw, 1.5rem); color: white; background-color: rgba(0, 0, 0, 0.5);}
nav h1 {padding: 1em;}
nav ul {display: flex; align-items: center; padding: 1em;}
nav ul li {display: inline; margin-left: 1em;}
.logo {height: 1em; vertical-align: middle; margin-right: 0.5em;}

/* Policía */
.policia {font-family: 'MS Sans Serif', sans-serif;}
.iconos {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
.icono {display: none; padding: 1em; width: 200px; text-align: center;}
.icono img {cursor: pointer;}
.icono span {display: block;}
.ventana {display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; height: 75%; color: black; background-color: white; overflow: scroll; border: 2px solid black; border-radius: 5px; box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.75); user-select: none;}
.ventana p {position: sticky; top: 0; display: flex; justify-content: space-between; align-items: flex-start; color: white; background-color: black;}
.ventana ul {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.ventana ul li {display: inline-block; width: 100px; margin: 1em; text-align: center;}
.ventana ul li img {cursor: pointer;}
.ventana ul li span {display: block; font-size: 0.75em;}
.ventana video {display: block; width: 100%; max-width: 720px; margin: 0 auto; padding: 1em;}
.ventana img {display: block; margin: 0 auto; padding: 1em;}
.documento {display: block; max-width: 100%; margin: 0 auto;}
.ventana-titulo {padding: 1em; line-height: 2em;}
.boton-cerrar {font-size: 2em; padding: 0.5em; cursor: pointer;}
.boton-cerrar:hover, .boton-cerrar:focus {color: #bf4040;}
.explorado img {filter: gray; -webkit-filter: grayscale(1); filter: grayscale(1);}

/* Ayuda */
.ayuda {display: none; position: fixed; z-index: 99; left: 25%; top: 25%; width: 50%; height: 50%; overflow: auto; font-size: 1.5em; color: white; background-color: rgba(0 ,0, 0, 0.75); border-radius: 1em; animation: fadeIn 0.5s ease-in;}
.ayuda-titulo {padding: 1em; text-align: right;}
.ayuda-cerrar {cursor: pointer;}
.ayuda-cerrar:hover, .ayuda-cerrar:focus {color: #bf4040;}
#ayuda-mensaje {padding: 1em; text-align: center;}

/***** El plantel *****/
.entradilla, .agradecimientos {width: 75%; margin: 1em auto; text-align: center;}
/* Tabla */
.plantel {width: 100%; max-width: 800px; margin: 1em auto;}
.plantel td {padding: 1em 0.5em 0.5em 0.5em;}
.parte {text-transform: uppercase; text-align: center; font-size: 1.5em; font-weight: bold; font-style: italic;}
.cargo {text-align: right; font-style: italic;}
.nombre {font-weight: bold;}

/***** Los espectadores *****/
form {width: 100%; max-width: 800px; margin: 1em auto; padding: 1em; border: 2px solid white; border-radius: 1em;}
form p {margin: 0.5em 0;}
form label {float: left; width: 100px; text-align: right; margin-right: 0.5em;}
form input {font-family: 'Fira Sans Condensed', sans-serif; font-size: 1em; color: white; background-color: transparent; border-top: none; border-right: none; border-left: none;}
/* Tabla */
.espectadores {width: 100%; max-width: 500px; margin: 1em auto;}
.espectadores thead th {padding: 0.5em; font-weight: bold; color: white;}

/******************/
/***** Iconos *****/
/******************/

.icon {display: inline-flex; width: 1.25em; justify-content: center; align-items: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
@font-face {font-family: "iconosvcom"; src: url("../../assets/fonts/juventud.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block;}
[class^="icon-"], [class*=" icon-"] {text-transform: none; line-height: normal; font-family: "iconosvcom" !important; font-weight: normal; font-style: normal; font-variant: normal;}

.icon-bullhorn:before {content: "\f026";}
.icon-trophy:before {content: "\f03d";}
.icon-aid:before {content: "\f2b3";}
.icon-money:before {content: "\f229";}
.icon-x:before {content: "\f03e";}
.icon-adjust:before {content: "\f000";}
.icon-android:before {content: "\f001";}
.icon-apple:before {content: "\f002";}
.icon-briefcase:before {content: "\f004";}
.icon-calendar:before {content: "\f005";}
.icon-cancel:before {content: "\f006";}
.icon-chrome:before {content: "\f007";}
.icon-clock:before {content: "\f008";}
.icon-desktop:before {content: "\f009";}
.icon-doc-text:before {content: "\f00a";}
.icon-down:before {content: "\f00b";}
.icon-edge:before {content: "\f00c";}
.icon-eye:before {content: "\f00d";}
.icon-eye-off:before {content: "\f00e";}
.icon-facebook:before {content: "\f00f";}
.icon-fax:before {content: "\f010";}
.icon-file:before {content: "\f011";}
.icon-file-audio:before {content: "\f012";}
.icon-file-image:before {content: "\f013";}
.icon-file-pdf:before {content: "\f014";}
.icon-file-video:before {content: "\f015";}
.icon-firefox:before {content: "\f016";}
.icon-flickr:before {content: "\f017";}
.icon-floppy:before {content: "\f018";}
.icon-folder:before {content: "\f019";}
.icon-github:before {content: "\f01a";}
.icon-graduation-cap:before {content: "\f01b";}
.icon-home:before {content: "\f01d";}
.icon-instagram:before {content: "\f01e";}
.icon-left:before {content: "\f01f";}
.icon-link:before {content: "\f020";}
.icon-link-ext:before {content: "\f021";}
.icon-linkedin:before {content: "\f022";}
.icon-linux:before {content: "\f023";}
.icon-pinterest:before {content: "\f025";}
.icon-mail:before {content: "\f027";}
.icon-mapmarker:before {content: "\f028";}
.icon-menu:before {content: "\f029";}
.icon-minus:before {content: "\f02a";}
.icon-mobile:before {content: "\f02b";}
.icon-newspaper:before {content: "\f02c";}
.icon-off:before {content: "\f02d";}
.icon-ok:before {content: "\f02e";}
.icon-opera:before {content: "\f02f";}
.icon-pencil:before {content: "\f030";}
.icon-phone:before {content: "\f031";}
.icon-pin:before {content: "\f032";}
.icon-plus:before {content: "\f033";}
.icon-print:before {content: "\f034";}
.icon-right:before {content: "\f035";}
.icon-rss:before {content: "\f036";}
.icon-safari:before {content: "\f037";}
.icon-search:before {content: "\f038";}
.icon-send:before {content: "\f039";}
.icon-spotify:before {content: "\f03a";}
.icon-tiktok:before {content: "\f03b";}
.icon-trash:before {content: "\f03c";}
.icon-undo:before {content: "\f03f";}
.icon-up:before {content: "\f040";}
.icon-videocam:before {content: "\f041";}
.icon-volume-high:before {content: "\f042";}
.icon-volume-off:before {content: "\f043";}
.icon-whatsapp:before {content: "\f045";}
.icon-windows:before {content: "\f047";}
.icon-world:before {content: "\f048";}
.icon-youtube:before {content: "\f049";}
.icon-zoom-in:before {content: "\f04a";}
.icon-zoom-out:before {content: "\f04b";}