/* ==========================================================================
   login-custom.css  ·  IGS Reporting
   --------------------------------------------------------------------------
   Hoja de estilos de la vista de login.
   Debe cargarse DESPUÉS de:
       assets/css1/bootstrap.min.css
       plugins/dist/css/AdminLTE.min.css
       assets/css/style.css

   NOTA IMPORTANTE:
   El HTML de esta vista es un fragmento incluido (sin <html>/<head>/<body>)
   que trae un bloque <style> en línea al principio. Ese bloque ya define:
       body { position:absolute; top:0; left:0; right:0; bottom:0;
              width:100%; height:100%; background-attachment:fixed;
              background-size:100% 100%; overflow:hidden; }
       h1   { position:absolute; top:30px; height:100px;
              font-family:'Erica One'; font-size:80px;
              animation: bounce infinite; }

   Aquí sólo corregimos lo necesario (fondo deformado, logo flotante/animado,
   <br> de relleno, tipografía azul de Bootstrap, etc.) sin tocar selectores
   globales fuera de `body` y del contenedor `.middle-box`.

   ATENCIÓN: no se usa `position: relative` en la tarjeta a propósito, ya que
   el `h1.logo-name` es absoluto y se posicionaría respecto a ella en lugar
   del viewport.
   ========================================================================== */


/* ==========================================================================
   1. FONDO DE PANTALLA COMPLETA
   Se aplica a html y body para cubrir también el área de scroll en móvil.
   `cover` sustituye al `background-size: 100% 100%` del <style> en línea,
   que producía deformación de la imagen.
   ========================================================================== */
html,
body {
    background-image: url("../img/fondo-login.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #1b1b1b; /* color de respaldo si la imagen no carga */
}


/* ==========================================================================
   2. TARJETA BLANCA SEMITRANSPARENTE
   Envuelve el logo + formulario dentro de .middle-box.
   Se usa el selector hijo directo `> div` para afectar sólo al panel
   interior y no a los divs anidados del formulario.
   ========================================================================== */
.middle-box > div {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 32px 28px 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}


/* ==========================================================================
   3. LOGO
   Se neutraliza el h1.logo-name absoluto y su animación `bounce` definidos
   en el <style> en línea, y se hace la imagen responsive.
   ========================================================================== */
.middle-box h1.logo-name {
    position: static;
    height: auto;
    margin: 0 auto 18px;
    animation: none;
    text-shadow: none;
    line-height: 0; /* evita el espacio fantasma bajo la imagen */
}

.middle-box h1.logo-name img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}


/* ==========================================================================
   4. SALTOS DE LÍNEA DE RELLENO
   El HTML usa varios <br> entre el logo y el formulario; se ocultan.
   ========================================================================== */
.middle-box br {
    display: none;
}


/* ==========================================================================
   5. TEXTOS
   Se fuerza el color con !important para anular `.text-primary` (azul)
   que aplica Bootstrap sobre los títulos.
   ========================================================================== */
.middle-box h2 {
    color: #2e2e2e !important; /* gris grafito */
}

.middle-box p {
    color: #6b6b6b !important; /* gris medio */
}


/* ==========================================================================
   6. CAMPOS DEL FORMULARIO
   ========================================================================== */
.middle-box .form-control {
    height: 44px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: none;
}

.middle-box .form-control:focus {
    border-color: #F58220;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.18);
    outline: none;
}


/* ==========================================================================
   7. BOTÓN PRINCIPAL (btn-warning reestilizado con el naranja corporativo)
   ========================================================================== */
.middle-box .btn-warning {
    background-color: #F58220;
    border-color: #F58220;
    height: 46px;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}

.middle-box .btn-warning:hover,
.middle-box .btn-warning:focus,
.middle-box .btn-warning:active {
    background-color: #d96f12;
    border-color: #d96f12;
    box-shadow: none;
}


/* ==========================================================================
   8. MENSAJES DE ERROR
   ========================================================================== */
.middle-box .alert-danger {
    border-radius: 8px;
    font-size: 13px;
    text-align: left;
}


/* ==========================================================================
   9. MÓVIL (<= 480px)
   Se reduce el padding y se permite scroll vertical porque el <style> en
   línea fija `overflow: hidden` en body y la tarjeta puede no caber.
   ========================================================================== */
@media (max-width: 480px) {
    .middle-box {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 40px;
    }

    .middle-box > div {
        padding: 22px 18px 26px;
        border-radius: 14px;
    }

    body {
        overflow-y: auto !important;
    }
}


/* ==========================================================================
   10. TABLET / iOS
   En iOS, `background-attachment: fixed` se rompe; se degrada a scroll.
   ========================================================================== */
@media (max-width: 991px) {
    html,
    body {
        background-attachment: scroll;
    }
}

/* ===== Ajustes: fondo más suave + logo y formulario más compactos ===== */
/* 1. Fondo menos brillante: velo blanco sobre la misma imagen */html,body {  background-image:    linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30)),    url("../img/fondo-login.jpg");}
/* 2. Logo más pequeño */.middle-box .logo-name img {  width: 100%;  max-width: 165px;  height: auto;}
/* 3. Tarjeta y formulario más compactos */.middle-box > div {  max-width: 340px;  margin: 0 auto;  padding: 26px 28px 20px;}
.middle-box h2 { font-size: 20px; margin-bottom: 6px; }.middle-box p  { font-size: 13px; margin-bottom: 14px; }
.middle-box .form-control {  height: 38px;  font-size: 13px;  padding: 6px 12px;}
.middle-box .btn-warning {  height: 40px;  font-size: 14px;}
.middle-box .alert-danger {  font-size: 12px;  padding: 8px 12px;  margin-bottom: 12px;}


/* ===== Fondo sobre <html>: cubre toda la ventana en login, PIN y demás vistas ===== */html {  min-height: 100%;  background-color: #efeeeb;  background-image:    linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30)),    url("../img/fondo-login.jpg");  background-repeat: no-repeat, no-repeat;  background-position: center center, center center;  background-size: cover, cover;  background-attachment: fixed, fixed;}
/* El body ya no pinta fondo: así no importa dónde empiece */body,body.login-page {  margin: 0 !important;  background: transparent !important;}
/* El velo ahora va en <html>, quitamos el del body para no duplicarlo */body.login-page::before {  display: none;}


/* ===== Quitar la franja gris de las vistas de acceso (login y PIN) ===== */.wrapper,.container,.container-fluid,.row,.col-md-12 {  background: transparent !important;  box-shadow: none !important;}
/* por si el wrapper trae padding que empuja el contenido hacia abajo */.wrapper {  padding-top: 0 !important;  margin-top: 0 !important;  min-height: 100vh;}

/* ===== Ocultar el header de la plantilla en las vistas de acceso ===== */header,.main-header {  display: none !important;}