/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
  
  @font-face {
  font-family: 'teletexto';
  src: url('content/MODE7GX3.TTF') format('truetype');
  }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background-color: black;
  color: black;
  font-family: Verdana;
}

.seccion{
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/*-------------------------------------------------SECCIÓN IZQUIERDA -------------------------------------------------------------*/
.main{
  width: 1000px;
  height: 650px;
  background-color: black;
  border-radius: 30px;
  border: 3px solid white;
}

/*-------------------------------------------------CABEZAL-------------------------------------------------------------*/

.header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 20px;
}

.header p{
  font-family: 'teletexto', monospace;
  font-size: 16px;
  color: #15FF00;
}

.horario{
  display: flex;
  gap: 20px;
}

#reloj {
  font-family: 'teletexto', monospace;
  font-size: 25px;
  color: yellow;
}

#fecha {
  font-family: 'teletexto', monospace;
  font-size: 25px;
  color: white;
}

/*-------------------------------------------------TÍTULO-------------------------------------------------------------*/

.cabezero{
  background-color: #1500FF;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.cabezero img{
  height: 50%;
  align-self: baseline;
  margin: 10px 10px 0px 0px;
  transform: translateY(200px);
  animation: subir 0.8s ease-out forwards;
}

.edificio:nth-child(1) {
  animation-delay: 0s;
}

.edificio:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes subir {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.titulo{
  padding: 20px;
  font-family: 'teletexto', monospace;
  font-size: 29px;
  color: white;
}

.titulo h1{
  margin-top: 0;
  margin-bottom: -10px;
  animation: blink 6s steps(1) infinite;
}

@keyframes blink {
  0%   { opacity: 1; }
  10%  { opacity: 0; }
  20%  { opacity: 1; }

  /* PAUSA */
  20%  { opacity: 1; }
  80%  { opacity: 1; }

  /* vuelve a blink */
  90%  { opacity: 0; }
  100% { opacity: 1; }
}

/*-------------------------------------------------MENÚ-------------------------------------------------------------*/

.menu ul {
  color: red;
  font-family: 'teletexto', monospace;
  font-size: 25px;
  justify-content: space-between;
  list-style: none;
  display: flex;
  flex-direction: row;
  padding: 0 20px;
  margin: 10px 0 0 0;
}

.menu a {
  text-decoration: none;
  color: #FFF700;
}

.menu a:hover{
  color: red;
}

hr{
  border: medium none;
  border-top: 3px dashed white!important;
}

/*-------------------------------------------------CUERPO-------------------------------------------------------------*/

.cuerpo{
  display: flex;
  flex-direction: row;
}

.noticias {
  width: 280px;
  height: 390px;
  overflow-y: auto;
  padding: 5px;
  border-right: 8px solid red;
}

/* Scrollbar custom (Chrome, Edge, Safari) */
.noticias::-webkit-scrollbar {
  width: 10px;
}

.noticias::-webkit-scrollbar-track {
  background: black;
}

.noticias::-webkit-scrollbar-thumb {
  background: yellow;
}

/* Bloques */
.line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 0;
}

.number {
  flex-shrink: 0; /* el número no se encoge */
  font-size: 24px;
  margin-right: 10px;
  color: white;
}

.text {
  font-family: 'teletexto', monospace;
  max-width: 240px; 
  white-space: normal; /* permite saltos */
  word-break: break-all; /* rompe palabras largas tipo COMIDA */
  font-size: 18px;
  line-height: 0.9;
  margin: 0;
}

/* Colores */
.cyan {
  color: #00ffd5;
}

.magenta {
  color: #ff00ff;
}

/*-------------------------------------------------MAPA-------------------------------------------------------------*/

.mapa {
  /*background-color: blue;*/
  height: 400px;
  width: 700px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0px;

}

.info{
  /*background-color: purple;*/
  display: flex;
  flex-direction: column;
}

.info-text{
  /*width: 300px;*/
  display: flex;
  flex-direction: column;
  /*background-color: red;*/
}

.info p{
  font-family: 'teletexto', monospace;
  font-size: 14px;
  color: white;
  margin: 5px;
  margin-bottom: 0px;
  margin-right: 0px;
}

.mapa h1{
  font-size: 30px;
  background-color: blue;
  margin: 0 0px;
  color: yellow;
  font-family: 'teletexto', monospace;
}

ul{
  font-size: 14px;
  font-family: 'teletexto', monospace;
  color:#15FF00 ;
}

.stickers{
  justify-content: space-between;
  border-top: 3px dashed white;
  /*background-color: blue;*/
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.4px;
}

.calcar{
  padding-top: 50px;
  padding-left: 30px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: baseline;
  /*background-color: purple;*/
  border-left: 3px dashed white;
}

#calcar {
  width: auto;
  height: 100%;   
}

/* Colores iniciales y transición */
#barrio-1  { fill: #e74c3c; transition: fill 0.3s; width: auto; }
#barrio-2  { fill: #3498db; transition: fill 0.3s; }
#barrio-3  { fill: #2ecc71; transition: fill 0.3s; }
#barrio-4  { fill: #f1c40f; transition: fill 0.3s; }
#barrio-5  { fill: #9b59b6; transition: fill 0.3s; }
#barrio-6  { fill: #1abc9c; transition: fill 0.3s; }
#barrio-7  { fill: #e67e22; transition: fill 0.3s; }
#barrio-8  { fill: #34495e; transition: fill 0.3s; }
#barrio-9  { fill: #95a5a6; transition: fill 0.3s; }
#barrio-10 { fill: #d35400; transition: fill 0.3s; }

/* Hover: colores más oscuros y cursor pointer */
#barrio-1:hover  { fill: #c0392b; cursor: pointer; width: 10px; }
#barrio-2:hover  { fill: #2980b9; cursor: pointer; }
#barrio-3:hover  { fill: #27ae60; cursor: pointer; }
#barrio-4:hover  { fill: #f39c12; cursor: pointer; }
#barrio-5:hover  { fill: #8e44ad; cursor: pointer; }
#barrio-6:hover  { fill: #16a085; cursor: pointer; }
#barrio-7:hover  { fill: #d35400; cursor: pointer; }
#barrio-8:hover  { fill: #2c3e50; cursor: pointer; }
#barrio-9:hover  { fill: #7f8c8d; cursor: pointer; }
#barrio-10:hover { fill: #b03a2e; cursor: pointer; }


/*-------------------------------------------------SECCIÓN DERECHA-------------------------------------------------------------*/

.second{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.music{
  width: 300px;
  height: 200px;
  /*background-color: #ff00ff;*/
  border-radius: 30px;
  border: 3px solid white;
  overflow: hidden;
}


.teletext-player {
  width: 100%;
  height: 100%;
  font-family: 'teletexto', monospace;
  text-transform: uppercase;
  color: blue;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tt-header {
  background: blue;
  color: white;
  padding: 8px 25px;
  font-size: 12px;
  font-weight: bold;
}

.tt-body {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* scrolling title */
.tt-title-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.tt-title {
  display: inline-block;
  font-size: 24px;
  animation: scroll 10s linear infinite;
}

/* barra interactiva */
.tt-bar {
  width: 100%;
  height: 8px;
  border: 2px solid #ff00ff;
  cursor: pointer;
  position: relative;
}


.tt-progress {
  height: 100%;
  width: 0%;
  background: #ff00ff;
}


/* controls */
.tt-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tt-controls button {
  background: black;
  color: #15FF00;
  border: 2px solid #15FF00;
  font-family: inherit;
  font-size: 11px;
  padding: 4px 6px;
  cursor: pointer;
  width: 70px;
}

.tt-controls button:hover {
  background: whitesmoke;
  border: 2px solid white ;
  color: #000;
}

/* scanlines */
.scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: flicker 0.15s infinite;
}


@keyframes scroll {
  0% { transform: translateX(10%); }
  90% { transform: translateX(-100%); }
}

@keyframes flicker {
  0% { opacity: 0.15; }
  50% { opacity: 0.2; }
  100% { opacity: 0.15; }
}


.chat{
  width: 300px;
  height: 440px;
  background-color: black;
  border-radius: 30px;
  border: 3px solid white;
  padding: 20px;
  overflow-y: scroll;
  box-shadow: 0 0 20px #111 inset;
}


/* mensajes dentro del chat */
.message {
  margin-bottom: 10px;
  animation: fadeIn 0.5s ease;
  color: white;
  font-family: monospace;
}

.message .date {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 10px;
}

form input, form textarea, form button {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  color: white;
  padding: 10px;
  margin-top: 5px;
  font-family: monospace;
}

form button {
  cursor: pointer;
  transition: all 0.2s;
}

form button:hover {
  background: #222;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}