/* ============================================================
   iPostExpress — Diseño de autenticación V3 (login / olvido / registro)
   Mismo acabado profesional de ACTUAL.html, SIN video de fondo.
   ============================================================ */

/* Oculta por completo los videos de fondo y sus overlays */
video#video-background, video.video-background, #video-overlay, .video-background, .video-overlay{
  display:none !important;
}

/* Base del documento */
html,body{height:auto;min-height:100%}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  color:#16211F;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(144,26,61,.10), transparent 60%),
    radial-gradient(1000px 500px at -10% 110%, rgba(14,74,82,.12), transparent 60%),
    linear-gradient(160deg,#FAFBFB 0%,#EFF3F2 100%);
  background-attachment:fixed;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;
  padding:40px 20px;
  overflow-x:hidden;
}
body{background-color:#FAFBFB !important}

/* Contenedor / tarjeta principal */
.container{
  background:#fff !important;
  border:1px solid #DCE4E2 !important;
  border-radius:20px !important;
  box-shadow:0 15px 45px rgba(14,74,82,.12) !important;
  padding:36px 40px !important;
  margin:0 auto !important;
  max-width:520px !important;
  width:100% !important;
  position:relative;
  overflow:hidden;
}
.container::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:linear-gradient(90deg,#901A3D 0%,#901A3D 55%,#0E4A52 55%);
  border-radius:20px 20px 0 0;
}

/* Bloque de marca (logo) */
.container .text-center, .container > div[style*="text-align:center"]{
  margin-bottom:22px !important;
}

/* Encabezado de formulario */
.container .header{text-align:center;margin-bottom:24px}
.container .header h1{
  font-family:'Archivo','Segoe UI',system-ui,sans-serif;
  font-weight:900;letter-spacing:-.02em;font-size:1.7rem;
  color:#082E33;line-height:1.1;margin-bottom:8px;
}
.container .header p{color:#5C6866;font-size:.95rem;margin:0}
.container .header h1::after{
  content:"";display:block;width:52px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#901A3D,#0E4A52);margin:14px auto 0;
}

/* Campos de formulario */
.input-group, .form-group, .mb-3 form > div{
  margin-bottom:16px;
}
.input-group label, .form-group label, form label, .col-12 label{
  display:block;font-size:.8rem;font-weight:600;color:#0E4A52;margin-bottom:6px;
}
.input-group input, form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="tel"], form input[type="number"], form select, form textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #DCE4E2 !important;
  border-radius:10px !important;
  font-size:.93rem !important;
  color:#16211F !important;
  background:#FAFBFB !important;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
/* Al usar .form-control (Bootstrap), se respeta su comportamiento de foco/click y solo se tematiza */
.form-control,
.input-group input, form input[type="text"], form input[type="email"], form input[type="password"],
form input[type="tel"], form input[type="number"], form select, form textarea{
  box-shadow:none;
}
.input-group input:focus, .form-control:focus, form input:focus, form select:focus, form textarea:focus{
  border-color:#901A3D !important;
  box-shadow:0 0 0 .2rem rgba(144,26,61,.12) !important;
  background:#fff !important;
}
.input-group{position:relative}
/* Iconos decorativos FUERA del input (a la izquierda, estilo input-group):
   caja ".ipx-field" con icono + campo, sin superponerse ni bloquear el clic */
.ipx-field{display:flex;align-items:stretch;width:100%}
.ipx-field .ipx-icon{
  display:grid;place-items:center;flex-shrink:0;width:46px;
  background:var(--niebla,#EFF3F2);
  border:1px solid #DCE4E2;border-right:none;
  border-radius:10px 0 0 10px;
  color:var(--petroleo,#0E4A52);
  pointer-events:none;
}
.ipx-field .form-control,
.ipx-field input{
  border-radius:0 10px 10px 0 !important;
  border-left:none !important;
  flex:1;
  min-width:0;
}
.ipx-field .form-control:focus,
.ipx-field input:focus{
  border-left:none !important;
}
/* Toggle de contraseña: se mantiene clicable en el borde derecho */
.ipx-field .password-toggle, .password-wrapper .toggle-password{
  pointer-events:auto;z-index:3;background:transparent;border:none;color:#5C6866;cursor:pointer;
}
/* Icono append (ojo mostrar contraseña) dentro de .ipx-field */
.ipx-append{
  display:grid;place-items:center;width:42px;flex-shrink:0;
  color:#5C6866;cursor:pointer;pointer-events:auto;
}
/* Compatibilidad si un icono decorativo queda sobre el campo en algún layout */
.input-group .input-icon,
.input-group i:not(.password-toggle){
  pointer-events:none;
}

/* Botón principal */
.btn-submit, button[type="submit"], .btn-primary, .btn-submit-step, .next-btn, #submitBtn{
  width:100%;
  background:#901A3D !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  padding:12px 16px !important;
  font-family:'Archivo','Segoe UI',sans-serif !important;
  font-weight:800 !important;
  font-size:1rem !important;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s;
  margin-top:6px;
}
.btn-submit:hover, button[type="submit"]:hover, .btn-primary:hover, .btn-submit-step:hover{
  background:#6B122C !important;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(144,26,61,.30);
}

/* Enlaces de autenticación */
.container a:not(.btn){
  color:#0E4A52;font-weight:600;
}
.container a:not(.btn):hover{color:#901A3D;text-decoration:underline}
.remember-forgot,.register-link,.forgot-password{
  margin-top:14px;font-size:.87rem;color:#5C6866;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.register-link{justify-content:center;text-align:center}

/* Mensajes de alerta */
.alert-message{
  padding:12px 14px;border-radius:10px;font-size:.88rem;font-weight:600;
  margin-bottom:14px;display:flex;gap:10px;align-items:flex-start;
}
.error-message{background:rgba(192,57,43,.10);color:#a93226;border:1px solid rgba(192,57,43,.2)}
.success-message{background:rgba(37,211,102,.12);color:#1f9d55;border:1px solid rgba(37,211,102,.25)}
.encryption-warning{background:rgba(245,200,66,.16);color:#9a7514;border:1px solid rgba(245,200,66,.35);border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:.85rem}

/* Código de verificación (olvido) */
.verification-code-input, input#recovery_code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:1.3rem !important;letter-spacing:.35em;text-align:center;
}

/* Utilidades de texto */
.text-muted-custom{color:#5C6866;font-size:.8rem}

/* Responsivo */
@media(max-width:560px){
  .container{padding:28px 22px !important;margin:12px auto !important}
  .container .header h1{font-size:1.4rem}
}

/* Garantizar igual ancho de inputs + etiqueta arriba en todo el formulario */
.container .input-group,
.container .form-group,
.container .col-12,
.container .col-md-6,
.container .col-sm-6{
  width:100% !important;
  max-width:100% !important;
}
/* Etiqueta siempre arriba, campo debajo (ancho completo de su columna) */
.container .input-group label,
.container .form-group label,
.container form label,
.container .col-12 label{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  margin-bottom:6px !important;
}
.container .ipx-field{width:100% !important;max-width:100% !important}

/* En móviles: apilar todo en una sola columna a ancho máximo de pantalla */
@media(max-width:767px){
  .container .row{display:block !important}
  .container .col-md-6,
  .container .col-sm-6,
  .container .col-12{width:100% !important;flex:none !important;max-width:100% !important;padding-left:0 !important;padding-right:0 !important;margin-bottom:0}
  .container .input-group{margin-bottom:16px}
}
/* Tipografías (ya cargadas en <head>, se complementa aquí) */