/* ==========================================================================
   Carteleria digital - Buses Fernandez
   Hoja de estilos de las pantallas de exhibicion.
   Pensada para un monitor fijo: sin scroll, sin cursor, todo en vh/vw.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: var(--color-fondo, #071a2f);
  color: var(--color-texto, #fff);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sprite-clima { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Rejilla principal
   -------------------------------------------------------------------------- */

.marco {
  display: grid;
  width: 100vw;
  height: 100vh;
  gap: 0;
  grid-template-columns: var(--banner-ancho, 20%) 1fr;
  grid-template-rows: 1fr var(--huincha-alto, 20%);
  grid-template-areas:
    "banners mensajes"
    "banners huincha";
}

.pantalla--derecha .marco {
  grid-template-columns: 1fr var(--banner-ancho, 20%);
  grid-template-areas:
    "mensajes banners"
    "huincha  banners";
}

/* Variante: la huincha cruza de borde a borde */
.huincha-completa .marco {
  grid-template-areas:
    "banners mensajes"
    "huincha huincha";
}

.pantalla--derecha.huincha-completa .marco {
  grid-template-areas:
    "mensajes banners"
    "huincha  huincha";
}

/* Pantalla única sin columna de banners: el cuadro central ocupa todo el ancho.
   La columna ni siquiera se dibuja, así que la rejilla es de una sola columna. */
.pantalla--sin-banner .marco,
.pantalla--sin-banner.huincha-completa .marco {
  grid-template-columns: 1fr;
  grid-template-areas:
    "mensajes"
    "huincha";
}

.zona-banners  { grid-area: banners; }
.zona-mensajes { grid-area: mensajes; }
.huincha       { grid-area: huincha; }

/* --------------------------------------------------------------------------
   Columna de banners
   -------------------------------------------------------------------------- */

.zona-banners {
  position: relative;
  overflow: hidden;
  background: var(--color-banner-fondo, #04101f);
}

.pantalla--izquierda .zona-banners { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .09); }
.pantalla--derecha   .zona-banners { box-shadow: inset  1px 0 0 rgba(255, 255, 255, .09); }

.banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity .9s ease, transform 1.4s ease;
  will-change: opacity, transform;
}

.banner.es-activo {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.banner-vacio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vh;
  color: rgba(255, 255, 255, .22);
  font-size: 1.4vh;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 2vh;
}

.banner-vacio__icono { width: 5vh; height: 5vh; }

/* --------------------------------------------------------------------------
   Cuadro central de mensajes
   -------------------------------------------------------------------------- */

.zona-mensajes {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 4vh 4vw;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(0, 0, 0, .12) 100%);
}

.mensajes-pista {
  position: relative;
  flex: 1;
  min-width: 0;
}

.mensaje {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

.mensaje.es-activo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Variantes de transicion */
.transicion--deslizar .mensaje           { transform: translateY(6vh); }
.transicion--deslizar .mensaje.es-saliente { transform: translateY(-6vh); }
.transicion--escala   .mensaje           { transform: scale(.94); }
.transicion--escala   .mensaje.es-saliente { transform: scale(1.06); }

.mensaje__cuerpo {
  width: 100%;
  max-height: 100%;
}

/* --------------------------------------------------------------------------
   Fotografias y videos en el cuadro central
   -------------------------------------------------------------------------- */

.mensaje__medio {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1.2vh;
  background: rgba(0, 0, 0, .35);
}

.mensaje__medio img,
.mensaje__medio video {
  display: block;
  width: 100%;
  height: 100%;
}

/* Titulo sobrepuesto: degradado para que se lea sobre cualquier foto. */
.mensaje__rotulo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 2.2vh 2.5vw 5vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.mensaje__rotulo span {
  display: block;
  font-size: 3.6vh;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-shadow: 0 .2vh 1vh rgba(0, 0, 0, .6);
}

.alineado-centro  .mensaje__rotulo { text-align: center; }
.alineado-derecha .mensaje__rotulo { text-align: right; }

/* Con una foto o un video en pantalla se achica el margen para aprovechar
   el cuadro. La clase la pone pantalla.js: `:has()` no existe en los
   navegadores viejos de algunos televisores. */
body.medio-activo .zona-mensajes {
  padding: 1.5vh 1.5vw;
  transition: padding .5s ease;
}

.alineado-izquierda .mensaje__cuerpo { text-align: left; }
.alineado-centro    .mensaje__cuerpo { text-align: center; }
.alineado-derecha   .mensaje__cuerpo { text-align: right; }

.mensaje__titulo {
  margin: 0 0 .5em;
  font-size: .48em;              /* relativo al tamano calculado del bloque */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--color-secundario, #1b84ff);
  text-transform: uppercase;
}

.mensaje__texto {
  margin: 0;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.005em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Estilos por tipo de mensaje */
.estilo-destacado .mensaje__cuerpo {
  border-left: .5vh solid var(--color-secundario, #1b84ff);
  padding-left: 2.5vw;
}

.estilo-destacado.alineado-centro .mensaje__cuerpo {
  border-left: 0;
  border-top: .5vh solid var(--color-secundario, #1b84ff);
  padding: 3vh 0 0;
}

.estilo-aviso .mensaje__texto  { color: #ffd54a; }
.estilo-aviso .mensaje__titulo { color: #ffb300; }
.estilo-exito .mensaje__texto  { color: #6ee7a8; }
.estilo-exito .mensaje__titulo { color: #34d399; }

/* Barra de avance y puntos */
.progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .5vh;
  background: rgba(255, 255, 255, .08);
}

.progreso__barra {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primario, #005fb0), var(--color-secundario, #1b84ff));
  box-shadow: 0 0 1.5vh rgba(27, 132, 255, .55);
}

.puntos {
  position: absolute;
  bottom: 2vh;
  left: 0;
  right: 0;
  display: flex;
  gap: .9vh;
  justify-content: center;
}

.punto {
  width: .9vh;
  height: .9vh;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .4s ease, width .4s ease;
}

.punto.es-activo {
  width: 3vh;
  border-radius: .45vh;
  background: var(--color-secundario, #1b84ff);
}

/* --------------------------------------------------------------------------
   Huincha inferior: hora, clima y contacto
   -------------------------------------------------------------------------- */

/* La huincha es sólo el contenedor: adentro se turnan el bloque de información
   y las imágenes. Por eso la rejilla vive en .huincha__info y no aquí. */
.huincha {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-huincha, #04101f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* Columnas proporcionales, no 'auto': con 'auto' un bloque de contenido largo
   (una dirección, por ejemplo) le robaba el ancho al clima y le recortaba las
   etiquetas. Asi cada bloque tiene su cuota y solo se acorta lo suyo. */
.huincha__info {
  display: grid;
  grid-template-columns: minmax(0, 20%) minmax(0, 44%) minmax(0, 36%);
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 2.5vw;
  opacity: 1;
  /* Entra con retraso: primero termina de irse la imagen. */
  transition: opacity .35s ease .3s;
}

/* Mientras se ve una imagen, la información se apaga. Se va de inmediato,
   sin retraso, para no quedar superpuesta con la imagen: si las dos se
   funden a la vez durante medio segundo, se leen los dos textos encima y
   parece un error. Primero sale una, después entra la otra. */
.huincha-con-imagen .huincha__info {
  opacity: 0;
  transition: opacity .3s ease 0s;
}

.huincha__banners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.huincha-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease 0s;
}

.huincha-banner.es-activo {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease .3s;
}

/* min-width:0 y overflow:hidden evitan que un bloque invada al vecino
   cuando su contenido es mas ancho que la columna que le toco. */
.huincha__bloque {
  display: flex;
  align-items: center;
  gap: 1.2vw;
  min-width: 0;
  overflow: hidden;
  padding: 0 1.2vw;
}

.huincha__bloque + .huincha__bloque { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }

.bloque-reloj    { padding-left: 0; }
.bloque-contacto { padding-right: 0; justify-content: flex-end; text-align: right; }
.bloque-clima    { justify-content: center; }

/* ---- Reloj ---- */

.marca__logo {
  max-height: 9vh;
  max-width: 12vw;
  object-fit: contain;
}

.reloj__hora {
  display: flex;
  align-items: baseline;
  gap: .35vw;
  font-size: 7.5vh;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.reloj__seg {
  font-size: .42em;
  font-weight: 500;
  color: var(--color-secundario, #1b84ff);
  font-variant-numeric: tabular-nums;
}

.reloj__fecha {
  margin-top: .6vh;
  font-size: 2vh;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}

/* Solo la primera letra en mayuscula: "jueves, 10 de septiembre".
   'capitalize' pondria "Jueves, 10 De Septiembre". */
.reloj__fecha::first-letter { text-transform: uppercase; }

/* ---- Clima ---- */

.bloque-clima {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.clima__principal {
  display: flex;
  align-items: center;
  gap: 1vw;
  min-width: 0;
  flex: 0 0 auto;
}

.clima__icono {
  width: 8vh;
  height: 8vh;
  color: var(--color-secundario, #1b84ff);
  flex-shrink: 0;
}

.clima__temp {
  font-size: 6vh;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.clima__desc {
  margin-top: .4vh;
  font-size: 2vh;
  font-weight: 600;
  line-height: 1.2;
}

.clima__lugar {
  font-size: 1.7vh;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.clima__detalle {
  display: grid;
  grid-template-columns: minmax(0, auto);
  justify-content: start;
  align-content: center;
  gap: .5vh;
  min-width: 0;
  overflow: hidden;
  transition: opacity .45s ease;
}

.clima__detalle.esta-cambiando { opacity: 0; }

.dato {
  display: flex;
  align-items: baseline;
  gap: .4vw;
  min-width: 0;
  font-size: 1.8vh;
  line-height: 1.35;
}

.dato__etiqueta {
  color: rgba(255, 255, 255, .5);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dato__valor {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.clima-obsoleto .clima__lugar::after {
  content: " · sin actualizar";
  color: #ffb300;
}

/* ---- Contacto ---- */

.bloque-contacto {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .8vh;
}

.contacto__empresa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.contacto__nombre {
  font-size: 3vh;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-secundario, #1b84ff);
  white-space: nowrap;
}

.contacto__lema {
  font-size: 1.7vh;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

/* Los datos rotan apilados en una misma celda de rejilla: asi el contenedor
   mide lo que el dato mas ancho y no recorta el texto, cosa que si pasaba
   cuando los items iban en position:absolute. */
.contacto__datos {
  display: grid;
  align-items: center;
  justify-items: end;
  min-height: 5vh;
  max-width: 100%;
}

.contacto__item {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .8vw;
  max-width: 100%;
  opacity: 0;
  transform: translateY(1.2vh);
  transition: opacity .5s ease, transform .5s ease;
}

.contacto__item.es-activo {
  opacity: 1;
  transform: none;
}

.contacto__icono {
  width: 3vh;
  height: 3vh;
  flex-shrink: 0;
  color: var(--color-secundario, #1b84ff);
}

.contacto__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  line-height: 1.15;
}

.contacto__etiqueta {
  font-size: 1.4vh;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
}

/* Un teléfono nunca parte en dos; una dirección larga sí puede hacerlo. */
.contacto__valor {
  font-size: 2.6vh;
  font-weight: 700;
  overflow-wrap: break-word;
}

.contacto__vacio {
  font-size: 1.7vh;
  color: rgba(255, 255, 255, .3);
}

/* --------------------------------------------------------------------------
   Aviso de conexion perdida
   -------------------------------------------------------------------------- */

.aviso-conexion {
  position: fixed;
  top: 1.5vh;
  right: 1.5vw;
  z-index: 50;
  padding: .8vh 1.4vw;
  border-radius: 999px;
  background: rgba(220, 38, 38, .92);
  color: #fff;
  font-size: 1.6vh;
  font-weight: 600;
  letter-spacing: .03em;
  box-shadow: 0 .5vh 2vh rgba(0, 0, 0, .4);
  animation: pulso 2.4s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* --------------------------------------------------------------------------
   Velo para entrar en pantalla completa
   El navegador exige un gesto del usuario; en el televisor, la tecla OK.
   -------------------------------------------------------------------------- */

.velo-completa {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 10, 20, .82);
  backdrop-filter: blur(3px);
  cursor: pointer;
  animation: aparecer .5s ease;
}

.velo-completa[hidden] { display: none; }

.velo-completa__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vh;
  padding: 5vh 6vw;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 2vh;
  background: rgba(255, 255, 255, .06);
  text-align: center;
}

.velo-completa__caja svg {
  width: 9vh;
  height: 9vh;
  color: var(--color-secundario, #1b84ff);
}

.velo-completa__caja strong {
  font-size: 3.4vh;
  font-weight: 700;
  line-height: 1.2;
}

.velo-completa__caja span {
  font-size: 2.2vh;
  color: rgba(255, 255, 255, .6);
}

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

/* --------------------------------------------------------------------------
   Ajustes para pantallas verticales (retrato)
   -------------------------------------------------------------------------- */

@media (max-aspect-ratio: 3/4) {
  .huincha__info { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .huincha__bloque + .huincha__bloque {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .bloque-contacto { align-items: center; text-align: center; }
  .contacto__item  { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .banner, .mensaje, .contacto__item { transition-duration: .01ms; }
}