/* ===============================
   LOGIN — WLogin (GX17 / Bootstrap v3)
   Pegar en HalcivarTeme.css
================================= */

:root{
  --brand:#00a7c6;
  --brand2:#0b3b70;
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --radius:18px;
  --shadow:0 18px 50px rgba(2,6,23,.12);
}

/* Fondo y centrado */
body.Form{
  /*background:var(--bg) !important;*/
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Centra el contenido del login (tu pantalla ya usa align outer/inner) */
#CONTENT_MPAGE{
  padding:28px 12px !important;
}

/* Tarjeta del login (MAINTABLE/TABLE1) */
#wlogin #MAINTABLE,
#MAINTABLE{
  background:transparent;
}

.Login{
  max-width:520px;
  margin:0 auto;
  background:var(--card);
  border:1px solid rgba(226,232,240,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 22px 18px;
}

/* Logo */
.Login #IMAGE1{
  height:56px;
  width:auto;
  margin:8px auto 16px;
  display:block;
}

/* Labels a la izquierda (Bootstrap col-sm-3) */
.AttributeLabel{
  color:var(--muted) !important;
  font-weight:800 !important;
}

/* Inputs */
.Attribute{
  height:44px !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
  /*padding:0 12px !important;*/
  background:#fff !important;
  box-shadow:none !important;
}

.Attribute:focus{
  border-color:rgba(0,167,198,.55) !important;
  box-shadow:0 0 0 4px rgba(0,167,198,.18) !important;
  outline:none !important;
}

/* Tu clave está como TEXTAREA; la convertimos visualmente en “input” */
#vUSUCLAVE{
  height:44px !important;
  min-height:44px !important;
  resize:none !important;
  padding:10px 12px !important;
  overflow:hidden;
}

/* Espaciado entre filas */
.Login .row{
  margin-bottom:12px;
}
.Login .row:last-child{
  margin-bottom:0;
}

/* Mensaje de error (readonly) */
#span_vMENSAJE:empty{ display:none; }
#span_vMENSAJE{
  display:block;
  max-width:520px;
  margin:8px auto 0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(220,38,38,.10);
  border:1px solid rgba(220,38,38,.25);
  color:#991b1b;
  font-weight:700;
}

/* Botón Ingresar */
#INGRESAR.Button{
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid var(--brand);
  background:var(--brand) !important;
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

#INGRESAR:hover,
#INGRESAR:focus{
  background:var(--brand2);
  border-color:var(--brand2);
  outline:none;
}

/* Ajustes responsive: labels arriba en pantallas pequeñas */
@media (max-width:767px){
  .Login{
    padding:18px 16px 14px;
  }
  .gx-form-group .col-sm-3,
  .gx-form-group .col-sm-9{
    width:100% !important;
    float:none !important;
  }
  .gx-form-group .col-sm-3{
    padding-bottom:6px;
  }
}


.NoSoyRobot{
	display:none;
}


/* =========================================================
   MOBILE FIX — SOLO LOGIN (winicio.aspx)
   Evita overflow y centra el card correctamente
========================================================= */

form[action*="winicio.aspx"]{
  overflow-x: hidden; /* corta cualquier desborde lateral */
}

/* Card: nunca puede ser más ancho que la pantalla */
@media (max-width: 767px){

  /* Quita gutters de Bootstrap SOLO dentro del login */
  form[action*="winicio.aspx"] .Login .row,
  form[action*="winicio.aspx"] .Login [class*="col-"]{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Card full */
  form[action*="winicio.aspx"] .Login{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 14px 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  /* Logo responsive (no se sale) */
  form[action*="winicio.aspx"] .Login #IMAGE1{
    max-width: 100% !important;
    height: auto !important;
    max-height: 52px !important;
    display: block !important;
    margin: 6px auto 12px !important;
  }

  /* Título más compacto */
  form[action*="winicio.aspx"] .Login .Title{
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 8px 0 10px !important;
    padding: 0 !important;
  }

  /* Inputs y botón táctil */
  form[action*="winicio.aspx"] .Login .Attribute{
    height: 46px !important;
    border-radius: 12px !important;
  }
  form[action*="winicio.aspx"] .Login #INGRESAR.Button{
    height: 46px !important;
    border-radius: 12px !important;
  }

  /* Link alineado al centro (en tu HTML está data-align=right) */
  form[action*="winicio.aspx"] .Login #TABLE3 [data-align="right"]{
    text-align: center !important;
  }
  form[action*="winicio.aspx"] .Login a.Hyperlink{
    display: inline-block;
    margin-top: 10px;
  }
}

/* Opcional: si quieres el card centrado vertical en mobile también */
@media (max-width: 767px){
  form[action*="winicio.aspx"] #MAINTABLE_MPAGE{
    min-height: 100vh !important;
  }
  form[action*="winicio.aspx"] #MAINTABLE_MPAGE > .row{
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  form[action*="winicio.aspx"] #CONTENT_MPAGE{
    padding: 0 14px !important;
  }
}

/* =========================================================
   FIX INPUTS MOBILE — SOLO LOGIN (winicio.aspx)
   Devuelve padding interno y evita “aplastado”
========================================================= */

@media (max-width: 767px){

  /* 1) NO mates padding de TODAS las columnas, solo controla las rows */
  form[action*="winicio.aspx"] .Login [class*="col-"]{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* 2) El form-group ocupa bien y con separación */
  form[action*="winicio.aspx"] .Login .gx-form-group{
    margin: 0 0 14px 0 !important;
  }

  /* 3) Etiqueta bien alineada */
  form[action*="winicio.aspx"] .Login .AttributeLabel{
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
  }

  /* 4) Contenedor del input: sin padding extra raro */
  form[action*="winicio.aspx"] .Login .gx-attribute{
    padding: 0 !important;   /* el padding lo da la col */
  }

  /* 5) Input perfecto: box-sizing y ancho real */
  form[action*="winicio.aspx"] .Login input.Attribute{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 46px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
  }

  /* 6) Focus más limpio (sin “doble borde”) */
  form[action*="winicio.aspx"] .Login input.Attribute:focus{
    outline: none !important;
    border-color: rgba(0,167,198,.65) !important;
    box-shadow: 0 0 0 3px rgba(0,167,198,.18) !important;
  }
}