/* ================= RESET GLOBAL ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

        body {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE 10+ */
            user-select: none;
          }
      
      
      
          body { -webkit-touch-callout: none !important; }
          a { -webkit-user-select: none !important; }
          
          html {
              -webkit-user-select: none;
              -webkit-touch-callout: none;
          }
          
          .disable-select {
              -webkit-touch-callout: none; /* iOS Safari */
              -webkit-user-select: none;   /* Chrome/Safari/Opera */
              -khtml-user-select: none;    /* Konqueror */
              -moz-user-select: none;      /* Firefox */
              -ms-user-select: none;       /* Internet Explorer/Edge */
              -chrome-user-select: none;   /* google*/
              user-select: none;           /* Non-prefixed version, currently supported by any browser but < IE9 */
          }
             
      
      
      
          a:hover { cursor: pointer; } 
          
          
          
               a:link, a:visited, a:active {
                  text-decoration:none;
              }
              
              
       a:link, a:visited, a:active {
                  text-decoration:none;
                  cursor:pointer; 
              }
              
              
              
       
            a {
          color: inherit; /* Hereda el color del texto del contenedor padre */
          text-decoration: none; /* Elimina el subrayado */
          cursor:pointer; 
      }
             
      
      
      .no-text-select {
          user-select: none; /* Desactiva la selección de texto */
          cursor: default; /* Cursor de flecha predeterminada */
              }
              
              /* Extra: Desactiva resaltado visual en navegadores táctiles */
      .no-text-select::selection {
          background: none; /* Elimina el color de resaltado */
      }
      
      /* Compatibilidad adicional para navegadores antiguos */
      .no-text-select {
          -webkit-user-select: none; /* Safari/Chrome */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* IE/Edge */
          user-select: none; /* Estándar */
      }
      
      
                    
      
      
          .no-tooltip {
          pointer-events: none; /* Deshabilita los eventos del mouse en el enlace */
          color: blue; /* Color del enlace */
          text-decoration: underline; /* Subrayado del enlace */
          cursor: pointer; /* Cursor de mano para indicar que es un enlace */
      }
          
      
      
              
              
              
                    /* Personalizar la barra de desplazamiento (opcional) */
      html::-webkit-scrollbar {
          display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
      }    
         
      
        /* Personalizar la barra de desplazamiento (opcional) */
         body::-webkit-scrollbar {
          display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
      }    
      

              /* Reset general */
              * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
              }


html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  background: #000;
  color: #000;
}

/* Evitar azul y subrayado en links */
a {
  color: #000;
  text-decoration: none;
}
a:visited,
a:hover,
a:active {
  color: #000;
  text-decoration: none;
}

/* Invert global para imágenes si lo necesitas */
img {
  filter: invert(1);
}

/* ================= VIDEO FONDO ================= */
.video-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(1.2);
}

/* Overlay suave */
.video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,180,255,0.15), rgba(0,0,0,0.6));
}

/* ================= CONTENEDOR CENTRAL ================= */
.page-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
 z-index: 2;
}

/* ================= CARD GLASS ================= */
.login-container {
  width: min(420px, 90vw);
  min-height: 520px;
  padding: 35px 30px;
  border-radius: 22px;

  background: rgba(200, 230, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 0 40px rgba(0,180,255,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.25);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;

  overflow: hidden;
 z-index: 3;
}

/* ================= FORM ================= */
.login-container form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

label {
  font-size: 0.85rem;
  opacity: 0.9;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  outline: none;

  background: rgba(255,255,255,0.6);
  color: #000;
  font-size: 0.9rem;
}

input::placeholder {
  color: rgba(0,0,0,0.6);
}

/* Checkbox */
input[type="checkbox"] {
  accent-color: #4cc9ff;
}

/* Botón */
button {
  margin-top: 10px;
  padding: 14px;
  border-radius: 16px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, rgba(0,180,255,0.8), rgba(0,120,255,0.8));
  color: #000;
  font-weight: 600;
  letter-spacing: 0.5px;

  box-shadow: 0 0 20px rgba(0,180,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0,180,255,0.9);
}

/* ================= LINKS ================= */
.extra-links {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.9;
}

/* ================= MEDIA QUERIES ================= */

/* MÓVILES */
@media (max-width: 768px) {
  .login-container {
    width: 92vw;
    padding: 28px 22px;
  }
}

/* TABLETS */
@media (min-width: 769px) and (max-width: 1024px) {
  .login-container {
    width: 420px;
  }
}

/* DESKTOP GRANDE */
@media (min-width: 1025px) {
  .login-container {
    width: 420px;
  }
}






/* LANDSCAPE */
/* ================= LANDSCAPE REAL ================= */


.landscape .login-container {
  width: min(420px, 90vw);   /* NO 100% */
 /* max-height: 88vh;          /* ← CLAVE */
  max-height: calc(100vh - 48px); /* respeta padding top/bottom */
  min-height: unset;         /* ← CLAVE */
  padding: 24px 22px;
}
.landscape .login-container form {
  flex: 1;
  overflow-y: auto;
  min-height: 0;     /* MUY IMPORTANTE */
  gap: 14px;
  justify-content: flex-start;
}
.landscape .login-container form::-webkit-scrollbar {
  width: 5px;
}

.landscape .login-container form::-webkit-scrollbar-thumb {
  background: rgba(0,180,255,.5);
  border-radius: 10px;
}