/* ==========================================================
   LOGIN REQ 2026
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

   html,
   body {
       margin: 0;
       padding: 0;
   
       width: 100%;
       height: 100%;
   
       overflow: hidden;
   }
   
   body.login-portal-body {
       margin: 0;
       padding: 0;
   
       width: 100%;
       height: 100vh;
   
       overflow: hidden;
   }
   
   body.login-portal-body *,
   body.login-portal-body *:before,
   body.login-portal-body *:after {
       box-sizing: border-box;
   }
   
   
   /* ==========================================================
      CONTENEDOR GENERAL
      ========================================================== */
   
   .req-login-page {
       width: 100%;
       height: 100vh;
   
       margin: 0;
       padding: 0;
   
       display: flex;
       flex-direction: column;
   
       overflow: hidden;
   
       font-family: Arial, Helvetica, sans-serif;
       color: #222;
   
       background:
           radial-gradient(
               circle at 38% 43%,
               rgba(190, 215, 235, 0.35),
               rgba(255, 255, 255, 0) 32%
           ),
           radial-gradient(
               circle at 67% 36%,
               rgba(210, 225, 238, 0.32),
               rgba(255, 255, 255, 0) 30%
           ),
           linear-gradient(
               180deg,
               #ffffff 0%,
               #f3f8fb 100%
           );
   }
   
   
   /* ==========================================================
      HEADER
      ========================================================== */
   
   .req-login-header {
       width: 100%;
       height: 110px;
   
       flex: 0 0 110px;
   
       background: rgba(255, 255, 255, 0.96);
   
       border-bottom: 1px solid #dedede;
   
       box-shadow:
           0 4px 12px rgba(0, 0, 0, 0.10);
   
       padding: 8px 20px;
   }
   
   
   /* ==========================================================
      NAVBAR
      ========================================================== */
   
      .req-login-navbar {
        position: relative;
    
        width: 100%;
        height: 100%;
    
        margin: 0;
    
        display: flex;
        align-items: center;
    }
   
   
   /* ==========================================================
      MARCA IZQUIERDA
      ========================================================== */
   
      .req-login-brand {
        position: relative;
        z-index: 2;
    
        display: flex;
        align-items: center;
        justify-content: flex-start;
    
        flex-shrink: 0;
    }
   
   
    .req-login-logo-box {
        width: 150px;
        height: 90px;
    
        margin-right: 14px;
    
        display: flex;
        align-items: center;
        justify-content: center;
    
        border-bottom: 2px solid #c72720;
    }
   
   
   .req-login-logo {
       display: block;
   
       max-width: 145px;
       max-height: 82px;
   
       width: auto;
       height: auto;
   }
   
   
   .req-login-title {
    display: flex;
    align-items: flex-start;

    gap: 6px;

    color: #999;
    }
   
   
   .req-login-title-main {
       font-size: 40px;
       font-weight: bold;
   
       line-height: 1;
   }
   
   
   .req-login-title-version {
    position: relative;

    top: -6px;

    font-size: 14px;
    }
   
   
   
   /* ==========================================================
      TÍTULO CENTRAL DEL NAVBAR
   
      Usamos posición absoluta para que quede centrado respecto
      de TODO el navbar y no respecto del espacio libre.
      ========================================================== */
   
   .req-login-navbar-copy {
       position: absolute;
   
       left: 50%;
       top: 50%;
   
       width: 460px;
       max-width: 46%;
   
       transform: translate(-50%, -50%);
   
       text-align: center;
   }
   
   
   .req-login-navbar-title {
       margin: 0 0 5px;
   
       color: #963d37;
   
       font-size: 24px;
       font-weight: normal;
   
       line-height: 28px;
   }
   
   
   .req-login-navbar-subtitle {
       color: #333;
   
       font-size: 13px;
       font-weight: bold;
   
       line-height: 17px;
   }
   
   
   /* ==========================================================
      CONTENIDO PRINCIPAL
      ========================================================== */
   
   .req-login-main {
       position: relative;
   
       width: 100%;
   
       flex: 1 1 auto;
       min-height: 0;
   
       padding: 24px 16px 0;
   
       display: flex;
       flex-direction: column;
       align-items: center;
   
       overflow: visible;
   }
   
   
   /* ==========================================================
      BIENVENIDA
      ========================================================== */
   
   .req-login-welcome {
       width: 340px;
       max-width: calc(100% - 32px);
   
       flex: 0 0 auto;
   
       margin: 0 auto 22px;
       padding: 12px 20px;
   
       background: rgba(255, 255, 255, 0.90);
   
       border: 1px solid rgba(170, 50, 50, 0.15);
   
       border-radius: 12px;
   
       text-align: center;
   
       box-shadow:
           0 5px 20px rgba(0, 0, 0, 0.08),
           0 0 25px rgba(150, 20, 20, 0.10);
   }
   
   
   .req-login-welcome h1 {
       margin: 0;
   
       font-family: Arial, Helvetica, sans-serif;
   
       font-size: 27px;
       font-weight: normal;
   
       line-height: 32px;
   
       color: #9d403b;
   }
   
   
   /* ==========================================================
      LOGIN
      ========================================================== */
   
      .req-login-card {
        width: 340px;
        max-width: calc(100% - 32px);
    
        flex: 0 0 auto;
    
        margin: 0 auto 28px;
        padding: 18px 18px 16px;
    
        background: rgba(255, 255, 255, 0.94);
    
        border: 1px solid #ddd;
    
        border-radius: 12px;
    
        box-shadow:
            0 16px 26px rgba(0, 0, 0, 0.18);
    
        overflow: hidden;
    }
   
   
   /* Evita que estilos viejos del proyecto alteren el form */
   
   .req-login-card form {
       display: block;
   
       width: 100%;
   
       margin: 0;
       padding: 0;
   }
   
   .req-login-field {
    width: 100%;

    margin: 0 0 13px;
    padding: 0;

    overflow: hidden;
}
   
   
   .req-login-field label {
       display: block;
   
       width: 100%;
   
       margin: 0 0 5px;
   
       text-align: center;
   
       font-size: 13px;
       font-weight: bold;
   }
   
   
   .req-login-input {
    display: block;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 36px;

    margin: 0 !important;
    padding: 7px 10px !important;

    border: 2px solid #b67d79;
    border-radius: 7px;

    background: #fff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    outline: none;

    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;

    -webkit-appearance: none;
    appearance: none;
}

.req-login-card input[type="text"],
.req-login-card input[type="password"],
.req-login-card input[type="email"] {
    display: block;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
}
   
   
   .req-login-input:focus {
       border-color: #970e09;
   
       box-shadow:
           0 0 4px rgba(151, 14, 9, 0.35);
   }
   
   
   .req-login-actions {
       width: 100%;
   
       margin: 0;
       padding: 0;
   }
   
   
   .req-login-submit {
    display: block;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 36px;

    margin: 4px 0 0 !important;
    padding: 8px 15px;

    border: 1px solid #760000;

    border-radius: 6px;

    cursor: pointer;

    color: #fff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;

    background:
        linear-gradient(
            to bottom,
            #bd1711 0%,
            #900400 100%
        );

    text-shadow:
        0 1px rgba(0, 0, 0, 0.25);
}
   
   
   .req-login-submit:hover {
       background: #8c0502;
   }
   
   
   .req-login-error {
       width: 100%;
   
       margin: 14px 0 0;
       padding: 8px;
   
       border: 1px solid #d58c89;
   
       border-radius: 5px;
   
       background: #fbeaea;
   
       color: #8b0e0a;
   
       font-size: 12px;
   }
   
   
   /* ==========================================================
      TARJETAS
   
      Se empujan hacia el final del área clara y se superponen
      parcialmente con el footer rojo.
      ========================================================== */
   
   .req-login-features {
       position: relative;
       z-index: 5;
   
       width: calc(100% - 32px);
       max-width: 840px;
   
       flex: 0 0 auto;
   
       margin: auto auto -48px;
   
       display: flex;
   
       justify-content: center;
       align-items: stretch;
   
       gap: 10px;
   }
   
   
   .req-login-feature {
       width: calc((100% - 20px) / 3);
       min-width: 0;
       min-height: 155px;
   
       padding: 18px 20px;
   
       text-align: center;
   
       background: rgba(255, 255, 255, 0.82);
   
       border: 1px solid rgba(170, 90, 90, 0.35);
   
       border-radius: 10px;
   
       box-shadow:
           0 6px 20px rgba(0, 0, 0, 0.10);
   }
   
   
   .req-login-feature-icon {
       height: 48px;
   
       margin-bottom: 10px;
   
       color: #555;
   
       font-size: 42px;
   }
   
   
   .req-login-feature h2 {
       margin: 0 0 12px;
   
       color: #111;
   
       font-family: Arial, Helvetica, sans-serif;
   
       font-size: 18px;
   
       line-height: 21px;
   }
   
   
   .req-login-feature p {
       margin: 0;
   
       color: #333;
   
       font-size: 13px;
   
       line-height: 19px;
   }
   
   
   /* ==========================================================
      FOOTER
   
      Tiene su propio fondo rojo. De esta forma no dependemos
      de porcentajes del background general.
      ========================================================== */
   
   .req-login-footer {
       position: relative;
       z-index: 1;
   
       width: 100%;
       min-height: 118px;
   
       flex: 0 0 118px;
   
       margin: 0;
   
       padding:
           58px
           20px
           10px;
   
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
   
       color: #fff;
   
       background:
           linear-gradient(
               180deg,
               #970000 0%,
               #690000 100%
           );
   }
   
   
   .req-login-footer-info {
       width: 100%;
       max-width: 1100px;
   
       margin: 0 auto;
   
       padding-bottom: 5px;
   
       border-bottom:
           1px solid rgba(255, 255, 255, 0.24);
   
       text-align: center;
   
       font-size: 12px;
   
       line-height: 18px;
   }
   
   
   .req-login-footer-info span {
       display: inline-block;
   }
   
   
   .req-login-footer-separator {
       margin: 0 6px;
   
       opacity: 0.55;
   }
   
   
   .req-login-footer-info a {
       color: #fff;
   
       text-decoration: underline;
   }
   
   
   .req-whatsapp {
       margin-right: 4px;
   
       color: #fff;
   
       font-size: 15px;
   }
   
   
   .req-login-footer-links {
       width: 100%;
       max-width: 1100px;
   
       margin: 5px auto 0;
   
       text-align: center;
   
       font-size: 11px;
   
       line-height: 15px;
   
       opacity: 0.88;
   }
   
   
   /* ==========================================================
      PANTALLAS CON POCA ALTURA
      ========================================================== */
   
   @media screen and (max-height: 760px) and (min-width: 701px) {
   
       .req-login-header {
           height: 96px;
   
           flex-basis: 96px;
       }
   
   
       .req-login-navbar {
           min-height: 80px;
       }
   
   
       .req-login-logo-box {
           height: 78px;
       }
   
   
       .req-login-logo {
           max-height: 70px;
       }
   
   
       .req-login-main {
           padding-top: 16px;
       }
   
   
       .req-login-welcome {
           margin-bottom: 14px;
   
           padding-top: 8px;
           padding-bottom: 8px;
       }
   
   
       .req-login-welcome h1 {
           font-size: 24px;
       }
   
   
       .req-login-card {
           margin-bottom: 18px;
   
           padding: 14px 18px;
       }
   
   
       .req-login-field {
           margin-bottom: 9px;
       }
   
   
       .req-login-feature {
           min-height: 135px;
   
           padding-top: 13px;
           padding-bottom: 13px;
       }
   
   
       .req-login-feature-icon {
           height: 39px;
   
           margin-bottom: 7px;
   
           font-size: 36px;
       }
   
   
       .req-login-feature h2 {
           margin-bottom: 7px;
       }
   
   }
   
   
   /* ==========================================================
      TABLET
      ========================================================== */
   
   @media screen and (max-width: 900px) {
   
       html,
       body,
       body.login-portal-body {
           height: auto;
           min-height: 100%;
   
           overflow-x: hidden;
           overflow-y: auto;
       }
   
   
       .req-login-page {
           height: auto;
           min-height: 100vh;
   
           overflow: visible;
       }
   
   
       .req-login-header {
           height: auto;
           min-height: 100px;
   
           flex-basis: auto;
   
           padding-left: 20px;
           padding-right: 20px;
       }
   
   
       .req-login-navbar-copy {
        position: absolute;
    
        left: 50%;
        top: 50%;
    
        width: 500px;
        max-width: 52%;
    
        transform: translate(-50%, -50%);
    
        text-align: center;
    }
   
   
       .req-login-navbar-title {
           font-size: 20px;
       }
   
   
       .req-login-navbar-subtitle {
           font-size: 12px;
       }
   
   
       .req-login-main {
           min-height: auto;
   
           overflow: visible;
       }
   
   
       .req-login-features {
           margin-top: 35px;
           margin-bottom: -40px;
   
           flex-wrap: wrap;
   
           gap: 12px;
       }
   
   
       .req-login-feature {
           width: 100%;
           max-width: 420px;
       }
   
   
       .req-login-footer {
           min-height: 0;
   
           flex-basis: auto;
   
           padding-top: 55px;
       }
   
   }
   
   
   /* ==========================================================
      MOBILE
      ========================================================== */
   
   @media screen and (max-width: 600px) {
   
       .req-login-header {
           padding: 8px 15px;
       }
   
   
       .req-login-navbar {
           flex-direction: column;
   
           align-items: center;
   
           gap: 10px;
       }
   
   
       .req-login-brand {
           width: 100%;
   
           justify-content: center;
       }
   
   
       .req-login-logo-box {
        width: 110px;
        height: 75px;
    
        margin-right: 10px;
    }
   
   
       .req-login-logo {
           max-width: 105px;
           max-height: 68px;
       }
   
   
       .req-login-title-main {
           font-size: 30px;
       }
   
   
       .req-login-title-company {
           font-size: 15px;
       }
   
   
       .req-login-navbar-copy {
           width: 100%;
   
           margin-left: 0;
           padding: 0 0 8px;
   
           text-align: center;
       }
   
   
       .req-login-navbar-title {
           margin-bottom: 3px;
   
           font-size: 18px;
       }
   
   
       .req-login-navbar-subtitle {
           font-size: 11px;
       }
   
   
       .req-login-main {
           padding-top: 20px;
       }
   
   
       .req-login-welcome {
           width: calc(100% - 30px);
   
           margin-bottom: 20px;
       }
   
   
       .req-login-welcome h1 {
           font-size: 22px;
       }
   
   
       .req-login-card {
           width: calc(100% - 30px);
   
           margin-bottom: 10px;
       }
   
   
       .req-login-features {
           width: calc(100% - 30px);
   
           margin-top: 25px;
           margin-bottom: -30px;
       }
   
   
       .req-login-footer {
           padding:
               45px
               15px
               10px;
       }
   
   
       .req-login-footer-separator {
           display: none;
       }
   
   
       .req-login-footer-info span {
           display: block;
   
           margin-bottom: 3px;
       }
   
   }