@charset "utf-8";
/* CSS Document */

html, body {
  margin: 0;
  padding: 0;
}

/* Desktop/Tablet base */
body {
  /* Background image is defined using programming in index.js */
  background-image: url("../images/background_tower_3a.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow-x: hidden;     /* ✅ mejor que overflow: hidden */
  overflow-y: hidden;     /* desktop: no scroll */
}

/* ================================
   Tipografías por tamaño general
   ================================ */

/* >= 1601px */
@media (min-width: 1601px) {
  :root { font-size: 14px; }
}

/* <= 1600px */
@media (max-width: 1600px) {
  :root { font-size: 12px; }
}

/* ================================
   Desktop / Laptop (>= 992px)
   ================================ */
@media (min-width: 992px) {

  #login_dialog {
    justify-content: flex-end !important;
  }

  /* ✅ tu separación del borde derecho */
  #authenticationwindow {
    margin-right: 10vw !important;
  }

  /* ✅ limitar tamaños en desktop */
  #miupi_logo_desktop{
    width: 100%;
    max-width: 280px;  /* ajusta a gusto (280–360) */
    height: auto;
    display: block;
    margin: 0 auto;
  }

  #miupi_footer_desktop{
    width: 100%;
    max-width: 250px;  /* ajusta a gusto (380–520) */
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* ================================
   MÓVIL (<= 575.98px)
   ================================ */
@media (max-width: 575.98px) {

  :root { font-size: 13px; }

  /* Fondo móvil con el gallo */
  body {
    background-color: #f8f9fa !important;
    background-image: url("../images/gallo_rojo_200.png") !important;
    background-repeat: no-repeat !important;
    background-position: center 150px !important; /* ajusta 70px–160px a gusto */
    background-size: min(520px, 92vw) !important; /* que se note */
    overflow-y: auto !important;
  }

  /* No forzar alturas raras; evita “brincos” en Chrome */
  #login_dialog {
    min-height: auto !important;
    height: auto !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 16px !important;
  }
  

  /* ✅ Transparencia tipo “glass” SOLO para la tarjeta del móvil */
  .card.shadow-sm.border-0 {
    background: rgba(255, 255, 255, 0.50) !important; /* 0.65–0.85 */
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
    border-radius: 18px !important;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Inputs sobre glass: bien legibles */
  .card .form-control,
  .card .input-group-text {
    background-color: rgba(255, 255, 255, 0.92) !important;
  }

  /* Títulos grandes (los que ya pusiste en el HTML móvil) */
  .mobile-title-1 {
    font-size: 1.55rem;
    line-height: 1.15;
  }
  .mobile-title-2 {
    font-size: 1.10rem;
    line-height: 1.25;
  }

  /* “Provea su correo…” alineado a la izquierda (ya lo tienes en HTML) */
  .mobile-helper {
    font-size: 1rem;
    line-height: 1.35;
    text-align: left;
    margin-bottom: 0.75rem;
  }

  /* Labels un poco más grandes para móvil */
  .form-label {
    font-size: 1rem;
  }

  /* Evita scroll horizontal */
  html, body {
    overflow-x: hidden !important;
  }


  /* Contenedor general debajo del navbar sticky-top */
.mobile-login-page{
  /* “alto real” del viewport en móvil */
  min-height: calc(100dvh - 56px); /* 56px = alto típico navbar bootstrap */
  display: flex;
  flex-direction: column;
}

/* Área principal: centra verticalmente el contenido */
.mobile-login-main{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  /* separaciones para que no quede demasiado perfecto */
  padding: 1.25rem 0;

  /* IMPORTANTE: deja espacio calculado automaticamente para el footer fijo */
  padding-bottom: calc(var(--mobile-footer-h, 90px) + 16px);
}

/* Footer fijo abajo */
.mobile-login-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.10);

  z-index: 1020;

  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* Logo pequeño (columna izquierda) */
.mobile-login-footer .footer-logo img{
  height: 28px;       /* prueba 24–34 */
  width: auto;
  display: block;
}

/* Texto (columna derecha) */
.mobile-login-footer .footer-copy{
  line-height: 1.15;
}


}