@import url('https://fonts.cdnfonts.com/css/poppins');
@import url('https://fonts.cdnfonts.com/css/nunito');

body {
    position: relative;
    background: 
      url('/img/silueta.svg') no-repeat center,
      radial-gradient(#515BA5, #6B4897);
    background-size: auto; /* cubre siempre toda la ventana */
    min-height: 100vh;
    margin: 0;
    overflow-y: auto;
  }
  html,
  body {
    overscroll-behavior: none;
  }
:root {
  font-size: 16px;
}
.privacy {
    text-align: center;
    width: 100%;
  }
  
  /* Opcional: para que el enlace respete márgenes automáticos */
  .privacy a {
    display: inline-block;
    color: #000;
    text-decoration: underline;
  }
.login-box {
    position: relative;
    top: 25vh;               /* 25% de la altura de la ventana */
    left: 70vw;             /* 10% del ancho de la ventana */
    width: clamp(280px, 30vw, 350px);
    padding: 2rem;           /* 32px si 1rem = 16px */
    background: #EEECE2;
    border-radius: 1.375rem; /* 22px */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;           /* 10px */
  }

  .login-box-top-right {
    position: absolute;
    top: -6vh;
    right: -3vw;
    pointer-events: none;
  }
  
  .login-box-bottom-left {
    position: absolute;
    bottom: -6vh;
    left: -3vw;
    pointer-events: none;
  }

  .logo {
    position: absolute;
    top: 20vh;
    left: 36%;
    transform: translateX(-50%);
    width: clamp(200px, 20vw, 400px);
    pointer-events: none;
    z-index: 10;
  }
  
  .satelite {
    position: absolute;
    top: 20vh;
    right: 47vw;
    width: 9vh;
    pointer-events: none;
  }
  
  .graficas {
    position: absolute;
    top: 32vh;
    left: 14vw;
    width: 50vw;
    height: auto;
    pointer-events: none;
  }

  .esquineroSup {
    position: fixed;
    top: -5vw;
    right: -5vw;
    height: auto;
    pointer-events: none;
  }
  
  .esquineroInf {
    position: fixed;
    bottom: -5vw;
    left: -5vw;
    height: auto;
    pointer-events: none;
  }

.info {
    color: #fff;
    text-align: center;
    position: fixed;
    top: 630px;
    right: 180px;
}

.login-box h2 {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.fg-input {
    background: #FFFFFF;
    border: 1px solid #878686;
    border-radius: 113px;
    max-width: 100%;
    height: 41px;
    margin: -0.3rem auto 0;
    display: block;
    box-sizing: border-box;
}
.fg-input.error{
    border-color: #D61C2E;
}

.fg-input.success{
    border-color: #4CAF50!important
}

.login-box .title {

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 48px;
    text-align: center;
    color: #515BA5;
}

form .btn.btn-primary {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 95px;
    gap: 36px;
    width: 100%;
    height: 39px;
    background: #D61C4E;
    border: 1px solid #F3F2EC;
    border-radius: 50px;
    flex: none;
    order: 5;
    flex-grow: 0;
    text-transform: uppercase;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: #F3F2EC;
    text-align: center;



}

form .btn.btn-primary:hover {
    background: #ec275c;
}

a {
    color: unset;
}

.forgot-password {
    margin: -6px 0px 12px 0px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #000000;
    width: 100%;
    text-align: center;
    text-decoration-line: underline;
    cursor: pointer ;
}

.forgot-password span {
    text-align: center;
}

.user-icon i,
.user-icon {
    display: block;
    margin: 0 auto;
    font-size: 2.1rem;       /* 28px */
    color: #8340C4;
    background-color: #fff;
    padding: 0.54rem;         /* ~15px */
    border-radius: 50%;
}

.privacy-info {
    margin-top: 10px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    text-decoration-line: underline;
    color: #393834;
    cursor: pointer ;
}


.modal-header {
    background-color: #ec275c;
}

.modal-logo {
    height: 48px;
    /* width: 55px; */
}

.modal-body {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17.5px;
}

.modal-body h1 {
    font-size: 32px;
}

.fg-input-error {
    margin-top: 5px;
    background-color: #D61C4E;
    border: unset !important;
    color: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 5px;
}


.fg-input-error i {
    margin-right: 10px;
    color: #D61C4E;
    background: white;
    border-radius: 50%;
    font-size: 12px;

    padding: 3px 6px 3px 6px;

}

.fg-input-error span {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
}


/* 360×800 */
@media (max-width: 360px) {

  .logo,
  .satelite,
  .graficas {
    position: absolute !important;
  }
  html, body {
    height: 100%;
    min-height: 100%;
    overflow-y: auto !important;
  }
  body {
    margin: 0;
    width: 100%;

  }
  .user-icon i,
  .user-icon {
      display: none !important;
  }
  .logo {
    top: 21.5vh;       /* 210/800*100 */
    left: 52.5vw;       /* 45/360*100 */
    width: 80.56vw;     /* 290/360*100 */
  }
  .satelite {
    display: none;
  }
  body {
    background: radial-gradient(#515BA5, #6B4897);
    background-repeat: repeat;
  }
  .login-box {
    top: 31.5vh;        /* 300/800*100 */
    left: 9.72vw;       /* 35/360*100 */
    width: 83.33vw;     /* 300/360*100 */
    padding: 1.25rem;   /* 20px/16 */
    gap: 0.625rem;      /* 10px/16 */
  }
  .login-box-top-right,
  .login-box-bottom-left {
    display: none;
  }
  .graficas {
    top: 3vh;
    left: 12.5vw;
    width: 80.56vw;
    z-index: 2;
  }
  .esquineroSup {
    top: -13.75vh; 
    right: -30.56vw;
  }
  .esquineroInf {
    bottom: -13.75vh;   /* -110/800*100 */
    left: -30.56vw;     /* -110/360*100 */
  }
}

/* 440×956 */
@media (min-width: 361px) and (max-width: 440px) {
  .logo,
  .satelite,
  .graficas {
    position: absolute !important;
  }
  html, body {
    height: 100%;
    min-height: 100%;
    overflow: auto !important;
    overflow-y: auto !important;
  }
  body {
    margin: 0;
    width: 100%;

  }
  .user-icon i,
  .user-icon {
      display: none !important;
  }
    /* hide off-screen elements */
    .satelite,
    .login-box-top-right,
    .login-box-bottom-left {
        display: none;
    }

    /* simplified body background */
    body {
        background: radial-gradient(#515BA5, #6B4897) repeat;
    }

    /* logo positioning */
    .logo {
        top: 21vh;       /* 240/956*100 */
        left: 50%;     /* 90/440*100 */
        width: 61.36vw;    /* 270/440*100 */
         /* width: clamp(80px, 76vw, 80px); */
    }

    /* centered login box */
    .login-box {
        /* position: fixed; */
        top: 31.5vh;      /* 340/956*100 */
        left: 50%;
        transform: translateX(-50%);
        width: 72.73vw;    /* 320/440*100 */
        padding: 1.25rem;  /* 20px */
        gap: 0.625rem;     /* 10px */
    }

    /* input styling */
    .fg-input {
        background: #fff;
        border: 0.0625rem solid #878686;
        border-radius: 7.0625rem;
        width: 100%;
        height: 2.5625rem;
        margin-top: -0.3rem;
    }


    /* chart graphic */
    .graficas {
        position: fixed;
        top: 5vh;        /* 90/956*100 */
        left: 20.45vw;      /* 90/440*100 */
        width: 56.82vw;     /* 250/440*100 */
        /* width: clamp(80px, 76vw, 80px); */
        z-index: 2;
    }

    /* corner accents */
    .esquineroSup {
        top: -6.28vh;       /* -60/956*100 */
        right: -20.45vw;    /* -90/440*100 */
    }
    .esquineroInf {
        bottom: -6.28vh;    /* -60/956*100 */
        left: -15.91vw;     /* -70/440*100 */
    }
}

/* 768×1024 */
@media (min-width: 441px) and (max-width: 768px){

  .logo,
  .satelite,
  .graficas {
    position: absolute !important;
  }
  html, body {
    height: 100%;
    min-height: 100%;
    overflow-y: auto !important;
  }
  .logo {
    top: 21vh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(160px, 76vw, 160px);
  }
  body {
    background: radial-gradient(#515BA5, #6B4897) repeat;
  }
  .login-box {
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(280px, 76vw, 350px);
    padding: 1.875rem;
    gap: 0.9375rem;
  }
  .graficas {
    top: 0vh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(160px, 76vw, 160px);
    z-index: 2;
  }
  .satelite,
  .login-box-top-right,
  .login-box-bottom-left {
    display: none;
  }
  .fg-input {
    background: #fff;
    border: 0.0625rem solid #878686;
    border-radius: 7.0625rem;
    width: 100% !important;
    height: 2.5625rem;
    margin-top: -0.3rem;
  }
  .esquineroSup {
    top: -7.81vh;
    right: -10.42vw;
    z-index: -1;
  }
  .esquineroInf {
    bottom: -7.81vh;
    left: -10.42vw;
  }
}

/* 1024×768 */
@media (min-width: 769px) and (max-width: 1200px) {

  .logo,
  .satelite,
  .graficas {
    position: absolute !important;
  }
  html, body {
    height: 100%;
    min-height: 100%;
    overflow-y: auto !important;
  }
  .login-box {
    max-height: 90vh;
    /* overflow-y: auto; */
  }
  .logo {
    top: 26vh;       /* 200/768*100 */
    transform: translateX(-65%);
    left: 50%;      /* 130/1024*100 */
    width: 34vh;     /* 350/1024*100 */
  }
  .satelite {
    top: 26vh;       /* 210/768*100 */
    left: 68%;      /* 530/1024*100 */
    max-width: 5vh;     /* 350/1024*100 */
    transform: translateX(-50%);
  }
  body {
    background-position: 10vw -40vh; /* 80/1024, -450/768 */
    background-size: 110vw auto;       /* 870/1024 */
  }
  .login-box {
    top: 37vh;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    width: 44%;
  }
  .graficas {
    top: 3vh;       /* 290/768*100 */
    transform: translateX(-50%);
    left: 50%;       /* 30/1024*100 */
    max-width: 50vh;     /* 500/1024*100 */
    z-index: 2;
  }
  .esquineroSup,
  .esquineroInf {
    display: none;
  }
  .login-box-top-right {
    top: -5vh;       /* 160/815*100 */
    right: -4.5vw;     /* 170/1366*100 */
  }
  .login-box-bottom-left {
    bottom: -5vh;       /* 600/815*100 */
    left: -4.5vw;     /* 550/1366*100 */
  }
}

/* 1366×815 */
@media (min-width: 1201px) and (max-width: 1366px) {

  .logo {
    top: 26.99vh;       /* 220/815*100 */
    left: 23vw;      /* 180/1366*100 */
   width: 31vh;     /* 400/1366*100 */
  }
  body {
    background-position: 10vw -47vh; /* 120/1366, -500/815 */
    background-size: 105dvh;
  }
  .login-box {
    top: 25.77vh;       /* 210/815*100 */
    left: 58.56vw;      /* 800/1366*100 */
    padding: 1.875rem;  /* 30px/16 */
    gap: 0.9375rem;     /* 15px/16 */
  }
  .satelite {
    left: 40vw;      /* 640/1366*100 */
    top: 26vh;
    width: 11vh;      /* 240/815*100 */
  }
  .login-box-top-right {
    top: -5vh;       /* 160/815*100 */
    right: -4.5vw;     /* 170/1366*100 */
  }
  .login-box-bottom-left {
    bottom: -5vh;       /* 600/815*100 */
    left: -4.5vw;     /* 550/1366*100 */
  }
  .graficas {
    top: 40.49vh;       /* 330/815*100 */
    left: 6.59vw;       /* 90/1366*100 */
    width: 46.12vw;     /* 630/1366*100 */
    z-index: 2;
  }
  .esquineroSup {
    top: -11.04vh;      /* -90/815*100 */
    right: -6.59vw;     /* -90/1366*100 */
  }
  .esquineroInf {
    bottom: -11.04vh;   /* -90/815*100 */
    left: -6.59vw;      /* -90/1366*100 */
  }
}
/* Media query para pantallas de 1440px */
@media (min-width: 1367px) and (max-width: 1440px) {

  .logo {
    top: 26.5vh;      /* Ajustado para 1440px */
    left: 22vw;
    width: 28vw;
  }
  body {
    background-position: 9vw -46vh;
    background-size: 104dvh;
  }
  .login-box {
    top: 25vh;
    left: 58vw;
    width: 24vw;
    padding: 1.875rem;
    gap: 0.9375rem;
  }
  .satelite {
    left: 39vw;
    top: 25.5vh;
    width: 10.8vh;
  }
  .login-box-top-right {
    top: -5vh;       /* 160/815*100 */
    right: -4.5vw;     /* 170/1366*100 */
  }
  .login-box-bottom-left {
    bottom: -5vh;       /* 600/815*100 */
    left: -4.5vw;     /* 550/1366*100 */
  }
  .graficas {
    top: 40vh;
    left: 6.5vw;
    width: 45vw;
    z-index: 2;
  }
  .esquineroSup {
    top: -10.9vh;
    right: -6.5vw;
  }
  .esquineroInf {
    bottom: -10.9vh;
    left: -6.5vw;
  }
}

/* Media query para pantallas de 1600px */
@media (min-width: 1441px) and (max-width: 1600px) {

  .logo {
    top: 27vh;
    left: 22vw;
    width: 27vw;
  }
  body {
    background-position: 9.5vw -46.5vh;
    background-size: 103dvh;
  }
  .login-box {
    top: 25.5vh;
    left: 57.5vw;
    width: 23.5vw;
    padding: 1.875rem;
    gap: 0.9375rem;
  }
  .satelite {
    left: 38vw;
    top: 25vh;
    width: 10.5vh;
  }
  .graficas {
    top: 39.5vh;
    left: 6.4vw;
    width: 44vw;
    z-index: 2;
  }
  .esquineroSup {
    top: -10.8vh;
    right: -6.4vw;
  }
  .esquineroInf {
    bottom: -10.8vh;
    left: -6.4vw;
  }
}