/* style.css (Versión final con horizontal intacto y vertical corregido) */

@font-face {
  font-family: 'Gotham Black';
  src: url('./fonts/Gotham-Black.otf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  background: black;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#lienzo-maestro {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out; 
  transform-origin: center center;
  z-index: 1;
}

#visor {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

.modulo {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
}

.borde {
  border: 4px solid white;
  padding: 0;
  background: transparent;
}

.oculto {
  display: none;
}

.titulo {
  font-family: 'Gotham Black', sans-serif;
  font-size: 70px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);

  position: absolute;
  top: 20px;
  left: 1170px;
  z-index: 4;

  transform: rotate(90deg);
  transform-origin: top left;
}


#fotos,
#video-live {
  position: absolute;
  top: 12px;
  left: 1080px;
  width: 1055px !important;
  overflow: hidden;

  transform: rotate(90deg);
  transform-origin: top left;
}


#fotos img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#video-live {
  z-index: 2;
}

#video-live video, #video-live #stream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#banners {
  position: absolute;
  top: 12px;
  bottom: 20px;
  left: 345px;
  width: 1055px;
  height: 200px;

  transform: rotate(90deg);
  transform-origin: top left;
}


#banners img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

:root { 
  --iframe-peticiones-h: 182px;
  --iframe-djtext-h: 80px;
  --iframe-djlogo-h: 80px;
}

#columna-derecha {
  position: absolute;
  top: 0;
  right: 45px;
  width: 650px;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  z-index: 1;
  padding: 20px 0;
  border-left: 4px solid white;
  border-right: 4px solid white;
}

#columna-derecha, #columna-derecha * { box-sizing: border-box; max-width: 100%; }
#columna-derecha p, #columna-derecha ul { margin: 0; }
#columna-derecha ul { padding-left: 18px; }

#bloque-hora-clima {
  position: absolute;
  top: 608px;
  left: 630px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 20px;

  transform: rotate(90deg);
  transform-origin: top left;
}

#reloj {
  font-family: 'Gotham Black', sans-serif;
  font-size: 2.2rem;
  color: #fff;
  white-space: nowrap;
  z-index: 10;
  margin-left: 45px;
}
#clima {
  width: 420px;
  height: 70px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin-left: -10px;
}
#clima .weatherwidget-io {
  display: block;
  width: 80% !important;
  height: 700px;
  transform: translateY(-20px);
  opacity: 0.9;
  filter: brightness(1.3);
}

#info-central {
  position: absolute;
  top: 590px;
  left: 370px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  transform: rotate(90deg);
  transform-origin: top left;
}

#info-central img {
  max-width: 90%;
  height: auto;
  margin: 10px auto;
  display: block;
}

.slot {
  width:100%;
  display:block;
}

.slot-logo {
  position: absolute;
  top: 220px;   /* ajusta a tu gusto */
  left: 1550px;  /* ajusta a tu gusto */
  width: 1000px; /* ajusta tamaño */
  height: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 9999;              /* encima de todo */
  transform: rotate(90deg);   /* rotado 90 grados a la derecha */
  transform-origin: top left; /* pivote de rotación */
}

.slot-logo img {
  width: 100%;
  height: auto;
  display: block;
}




.slot-qr, #iframe-peticiones, #dj-label, #iframe-djtext, #iframe-djlogo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.slot-qr {
  position: absolute;
  top: 10px;
  left: 655px;
  padding: 0 12px;
  z-index: 5;

  transform: rotate(90deg);
  transform-origin: top left;
}
.slot-qr img#qr {
  width: 100%;
  height: auto;
  display: block;
}

#iframe-peticiones {
  position: absolute;
  top: 30px;
  left: 430px;
  height: var(--iframe-peticiones-h);

  transform: rotate(90deg);
  transform-origin: top left;
}

#dj-label {
  position: absolute;
  top: -180px;
  left: 255px;
  padding: 0 12px;
  font-family: 'Gotham Black', sans-serif;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  font-size: 2.2rem;
  text-align: center;

  transform: rotate(90deg);
  transform-origin: top left;
}

#iframe-djtext {
  position: absolute;
  top: 18px;
  left: 210px;
  height: var(--iframe-djtext-h);

  transform: rotate(90deg);
  transform-origin: top left;
}

#iframe-djlogo {
  position: absolute;
  top: -134px;
  left: 110px;
  padding: 0 12px;
  height: var(--iframe-djlogo-h);

  transform: rotate(90deg);
  transform-origin: top left;
}


#iframe-peticiones iframe, #iframe-djlogo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#iframe-djtext iframe {
  width: 135%;
  height: 135%;
  border: 0;
  display: block;
  transform: scale(0.65);
  transform-origin: top left;
}

#logonite {
  position: absolute;
  top: 855px;
  left: 80px;
  width: 200px;
  height: auto;
  z-index: 3;
  display: block;

  transform: rotate(90deg);
  transform-origin: top left;
}


/* ======================================================= */
/* ===== MODO VERTICAL: VISIÓN FINAL Y CORRECTA ===== */
/* ======================================================= */

.modo-vertical #lienzo-maestro {
  transform: rotate(90deg) scale(calc(1080 / 1920));
}

/* 1. La antigua "columna derecha" se convierte en la BARRA VERTICAL IZQUIERDA */
.modo-vertical #columna-derecha {
  top: 0;
  left: 0; /* A la izquierda */
  right: auto;
  width: 510px; /* Mantiene su ancho original */
  height: 1920px; /* Ocupa todo el nuevo "alto" */
  border: none;
  border-right: 4px solid white;
  /* Re-activamos el flex para que apile su contenido interno de arriba a abajo */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 40px 20px;
}

/* 2. Los elementos de dentro de la columna dejan de ser absolutos para apilarse */
.modo-vertical #bloque-hora-clima,
.modo-vertical #info-central,
.modo-vertical .slot-qr,
.modo-vertical #iframe-peticiones,
.modo-vertical #dj-label,
.modo-vertical #iframe-djtext,
.modo-vertical #iframe-djlogo {
  position: static; /* <-- LA CLAVE: se apilan de arriba a abajo */
  transform: none;
  width: 100%;
  padding: 0;
}
.modo-vertical #info-central{
    position: static;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.modo-vertical .slot-logo,
.modo-vertical .slot-qr,
.modo-vertical #iframe-peticiones,
.modo-vertical #dj-label,
.modo-vertical #iframe-djtext,
.modo-vertical #iframe-djlogo {
    position: static;
    transform: none;
}


/* 3. El bloque de Hora y Clima se ajusta */
.modo-vertical #bloque-hora-clima {
  justify-content: center; /* Centramos su contenido (reloj y clima) */
}

/* 4. El contenido principal ocupa el espacio restante, A LA DERECHA */
.modo-vertical #fotos,
.modo-vertical #video-live {
  top: 0;
  left: 514px; /* A la derecha de la nueva columna de 510px + borde de 4px */
  width: calc(1920px - 514px); /* Ancho restante */
  height: 864px; /* 1080px (alto original) - 216px (banners) = 864px */
}

/* 5. Los banners van debajo de las fotos en el mismo espacio */
.modo-vertical #banners {
  top: auto;
  bottom: 0;
  left: 514px;
  width: calc(1920px - 514px);
  height: 216px; 
}

/* 6. El título se mueve para encabezar la sección de fotos */
.modo-vertical #titulo {
  top: 20px;
  left: 514px;
  width: calc(1920px - 514px);
  text-align: center;
}