/* ============================================================
   InocuidAuto - Pagina de entrada (login) | rediseno split-screen
   Hoja de estilos independiente. Cargar DESPUES de css/style.css.
   Namespace .lgn-*  ->  no afecta el resto de la plataforma.
   ============================================================ */

.lgn-body{
  --lgn-g:#00A651; --lgn-g-d:#00863f; --lgn-g-wash:#f2faf5;
  --lgn-ink:#111827; --lgn-ink2:#1f2937; --lgn-muted:#6b7280;
  --lgn-line:#e8eaee; --lgn-orange:#f97316; --lgn-white:#ffffff;
  margin:0; background:var(--lgn-white); color:var(--lgn-ink2);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.lgn-body *{ box-sizing:border-box; }

/* ---- Estructura split ---- */
.lgn-body .lgn-hero{
  display:grid; grid-template-columns:1fr minmax(420px,540px); min-height:480px;
  position:relative; z-index:1; box-shadow:0 12px 34px -18px rgba(11,47,30,.20);
}

/* ---- Panel de marca (izquierda) ---- */
.lgn-body .lgn-brand{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, #eaf7f0 0%, rgba(234,247,240,0) 55%),
    var(--lgn-g-wash);
  border-right:1px solid var(--lgn-line);
  padding:clamp(28px,5vw,64px);
  display:flex; flex-direction:column; justify-content:flex-start;
}
/* Ilustracion como banda a todo el ancho, pegada a los costados y al fondo del
   panel (margenes negativos que cancelan el padding). El overflow:hidden del
   panel la recorta al borde; la mascara funde su parte superior con el verde. */
.lgn-body .lgn-brand-art{
  margin:clamp(20px,3.5vh,44px) calc(-1 * clamp(28px,5vw,64px)) calc(-1 * clamp(28px,5vw,64px));
  height:clamp(210px,28vh,310px); flex:none;
  background:url('/GraphicSources/ffr.png') center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 30%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 30%);
  pointer-events:none;
}
.lgn-body .lgn-brand-head{ position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(18px,2.6vh,32px); }
.lgn-body .lgn-logo{ height:auto; width:min(300px,72%); display:block; }
.lgn-body .lgn-brand-mid{ max-width:520px; position:relative; z-index:1; }
.lgn-body .lgn-brand-note{ position:relative; z-index:1; font-size:13px; color:var(--lgn-muted); margin-top:20px; }
.lgn-body .lgn-brand-note strong{ color:var(--lgn-ink); font-weight:800; }
.lgn-body .lgn-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lgn-g-d); margin:0 0 16px;
}
.lgn-body .lgn-eyebrow::before{ content:""; width:22px; height:2px; background:var(--lgn-g); border-radius:2px; }
.lgn-body .lgn-title{
  font-size:clamp(28px,3.4vw,44px); line-height:1.08; font-weight:800;
  letter-spacing:-.02em; color:var(--lgn-ink); margin:0 0 18px;
}
.lgn-body .lgn-lead{ font-size:15px; line-height:1.6; color:var(--lgn-muted); margin:0 0 28px; }
.lgn-body .lgn-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lgn-body .lgn-points li{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--lgn-ink2); font-weight:500; }
.lgn-body .lgn-check{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:rgba(0,166,81,.12); color:var(--lgn-g-d);
  display:inline-flex; align-items:center; justify-content:center;
}
.lgn-body .lgn-check svg{ width:12px; height:12px; display:block; }
.lgn-body .lgn-brand-foot{ font-size:13px; color:var(--lgn-muted); position:relative; z-index:1; }
.lgn-body .lgn-brand-foot strong{ color:var(--lgn-ink); font-weight:800; }

/* ---- Panel del formulario (derecha) ---- */
.lgn-body .lgn-panel{ background:var(--lgn-white); display:flex; flex-direction:column; min-width:0; }
.lgn-body .lgn-nav{
  display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap;
  padding:22px clamp(20px,4vw,44px) 0;
}
.lgn-body .lgn-nav-link{
  position:relative; font-size:13px; font-weight:600; color:var(--lgn-muted);
  text-decoration:none; padding:8px 12px; border-radius:9px;
  transition:color .15s, background .15s;
}
.lgn-body .lgn-nav-link:hover{ color:var(--lgn-ink); background:#f6f7f9; }
.lgn-body .lgn-badge{
  position:absolute; top:-3px; right:-3px;
  background:var(--lgn-orange); color:#fff; font-size:9px; font-weight:800;
  letter-spacing:.04em; line-height:1; padding:2px 5px; border-radius:8px;
}
.lgn-body .lgn-nav-cta{
  font-size:13px; font-weight:700; color:var(--lgn-g-d); text-decoration:none;
  padding:8px 16px; margin-left:4px; border:1.5px solid rgba(0,166,81,.35); border-radius:999px;
  transition:background .15s, border-color .15s;
}
.lgn-body .lgn-nav-cta:hover{ background:var(--lgn-g-wash); border-color:var(--lgn-g); }

.lgn-body .lgn-form-wrap{ flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(24px,5vw,48px); }
.lgn-body .lgn-form{ width:100%; max-width:380px; }
.lgn-body .lgn-form-title{ font-size:26px; font-weight:800; letter-spacing:-.01em; color:var(--lgn-ink); margin:0 0 6px; }
.lgn-body .lgn-form-sub{ font-size:14px; color:var(--lgn-muted); margin:0 0 26px; line-height:1.5; }

/* Campos (override de estilos globales .form-control / .btn) */
.lgn-body .lgn-form .form-content{ display:block; }
.lgn-body .lgn-form .lgn-field{ margin:0 0 16px; display:flex; flex-direction:column; }
.lgn-body .lgn-form .lgn-label{ font-size:13px; font-weight:700; color:var(--lgn-ink2); margin:0 0 7px; }
.lgn-body .lgn-form input.lgn-input{
  width:100%; height:46px; padding:0 14px; font-size:14px; font-family:inherit;
  color:var(--lgn-ink); background:#fff;
  border:1.5px solid var(--lgn-line); border-radius:999px; box-shadow:none; outline:none;
  transition:border-color .14s, box-shadow .14s, background .14s;
}
.lgn-body .lgn-form input.lgn-input::placeholder{ color:#aab1bd; }
.lgn-body .lgn-form input.lgn-input:focus{
  border-color:rgba(0,166,81,.55); background:#fff;
  box-shadow:0 0 0 3px rgba(0,166,81,.14);
}
.lgn-body .lgn-form input.lgn-input:-webkit-autofill,
.lgn-body .lgn-form input.lgn-input:-webkit-autofill:hover,
.lgn-body .lgn-form input.lgn-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lgn-ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
          box-shadow:0 0 0 1000px #fff inset;
  border:1.5px solid var(--lgn-line);
}
.lgn-body .lgn-form .error-message{
  display:block; color:#e5484d; font-size:12px; font-weight:600; margin-top:6px;
}
.lgn-body .lgn-form .actionMessageDisplayer{
  display:block; background:#fff5f5; border:1px solid #f6caca; color:#c53434;
  font-size:13px; line-height:1.45; padding:10px 12px; border-radius:10px; margin-bottom:14px;
}

.lgn-body .lgn-forgot{ text-align:right; margin:-4px 0 20px; }
.lgn-body .lgn-link{ color:var(--lgn-g-d); font-size:13px; font-weight:600; text-decoration:none; }
.lgn-body .lgn-link:hover{ text-decoration:underline; }

.lgn-body .lgn-form input.lgn-submit{
  -webkit-appearance:none; appearance:none;
  width:100%; height:48px; border:none; border-radius:999px; cursor:pointer;
  background:var(--lgn-g); color:#fff; font-family:inherit;
  font-size:15px; font-weight:800; letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(0,166,81,.24);
  transition:background .14s, box-shadow .14s, transform .08s;
}
.lgn-body .lgn-form input.lgn-submit:hover{ background:var(--lgn-g-d); box-shadow:0 8px 20px rgba(0,166,81,.30); }
.lgn-body .lgn-form input.lgn-submit:active{ transform:translateY(1px); }

.lgn-body .lgn-register{ margin:20px 0 0; font-size:13.5px; color:var(--lgn-muted); text-align:center; }
.lgn-body .lgn-register .lgn-link{ font-size:13.5px; }

/* Pie del panel del formulario */
.lgn-body .lgn-panel-foot{ padding:14px clamp(20px,4vw,44px) 24px; text-align:center; }
.lgn-body .lgn-secure{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--lgn-muted); line-height:1.4; }
.lgn-body .lgn-secure svg{ width:14px; height:14px; color:var(--lgn-g-d); flex:none; }

/* ---- Seccion de politica ---- */
.lgn-body .lgn-policy{
  max-width:none; width:auto; margin:0;
  padding:clamp(44px,6vw,76px) clamp(24px,5vw,48px); text-align:center;
  background:url('/GraphicSources/bgopo.png') center center / cover no-repeat;
}
.lgn-body .lgn-policy .our-quality-standards-title{
  font-size:clamp(17px,2vw,22px); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lgn-g-d); margin:0 0 26px; padding-bottom:18px; position:relative;
}
.lgn-body .lgn-policy .our-quality-standards-title::after{
  content:""; display:block; width:52px; height:3px; border-radius:2px;
  background:var(--lgn-g); margin:16px auto 0;
}
.lgn-body .lgn-policy .video-tutorial-section{
  max-width:1040px; margin:0 auto; text-align:center;
  background:#ffffff; border:1px solid var(--lgn-line); border-radius:18px;
  padding:clamp(30px,4vw,48px);
  font-size:16px; line-height:1.85; color:var(--lgn-ink2);
  box-shadow:0 14px 38px rgba(11,47,30,.12);
}
.lgn-body .lgn-policy .hide-show-button-parent{ display:none; }

/* ---- Footer ---- */
.lgn-body .lgn-foot{
  background:#0b2f1e; color:#cdece0; padding:22px 24px;
}
.lgn-body .lgn-foot .container{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; margin:0; padding:0; max-width:none;
}
.lgn-body .lgn-foot .footer-logo-image{ margin:0; padding:0; line-height:0; }
.lgn-body .lgn-foot .footer-logo-img{ display:block; height:40px; width:auto; margin:0; }
.lgn-body .lgn-foot .copyright-text{ margin:0; padding:0; font-size:12px; color:#8fbfa6; letter-spacing:.02em; }

/* ---- Responsive ---- */
@media (max-width:900px){
  .lgn-body .lgn-hero{ grid-template-columns:1fr; min-height:auto; }
  .lgn-body .lgn-brand{ border-right:none; border-bottom:1px solid var(--lgn-line); padding:28px 24px; gap:18px; }
  .lgn-body .lgn-brand-art{ display:none; }
  .lgn-body .lgn-lead,
  .lgn-body .lgn-points,
  .lgn-body .lgn-brand-note,
  .lgn-body .lgn-brand-foot{ display:none; }
  .lgn-body .lgn-logo{ width:210px; }
  .lgn-body .lgn-title{ font-size:24px; margin-bottom:0; }
  .lgn-body .lgn-nav{ justify-content:center; padding-top:16px; }
  .lgn-body .lgn-form-wrap{ padding:28px 20px 44px; }
}
@media (max-width:420px){
  .lgn-body .lgn-nav-link{ padding:6px 8px; font-size:12px; }
  .lgn-body .lgn-nav-cta{ padding:7px 12px; }
}

/* ---- Entrada suave + accesibilidad ---- */
.lgn-body .lgn-brand-mid,
.lgn-body .lgn-form{ animation:lgn-rise .5s cubic-bezier(.22,1,.36,1) both; }
.lgn-body .lgn-form{ animation-delay:.06s; }
@keyframes lgn-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.lgn-body a:focus-visible,
.lgn-body input:focus-visible{ outline:2px solid var(--lgn-g); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .lgn-body *{ animation:none !important; transition:none !important; }
}

/* Neutraliza contenedores heredados para que el split ocupe todo el ancho */
.lgn-body .sectionScrolling{ margin:0; padding:0; max-width:none; width:auto; }