/* ============================================================
   Login SIGEC (identidad visual 2026)
   Panel izquierdo medianoche liso (≈55%) con el mensaje de marca y un único anillo decorativo;
   panel derecho blanco con el formulario (máx. 380px). En < 992px el panel de marca pasa arriba.
   ============================================================ */
.login-body{ margin:0; min-height:100vh; background:#fff; }
.corp{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); font-family:var(--sg-fuente-texto); color:var(--sg-pizarra); }

/* ---------- Panel de marca ---------- */
.corp-hero{ background:var(--sg-medianoche); color:#fff; padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; position:relative; overflow:hidden; }
.corp-hero > *{ position:relative; z-index:1; }
.corp-marca{ display:flex; align-items:center; }
.corp-logo{ max-height:64px; max-width:280px; object-fit:contain; background:#fff; padding:8px 14px; border-radius:14px; }
.corp-hero-cuerpo{ display:flex; flex-direction:column; gap:18px; max-width:480px; }
.corp-antetitulo{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sg-ambar); }
.corp-titulo{ font-family:var(--sg-fuente-titulos); font-weight:700; font-size:40px; line-height:1.12; margin:0; letter-spacing:-.02em; text-wrap:balance; color:#fff; }
.corp-texto{ font-size:16px; line-height:1.65; margin:0; color:#C3CDE3; }
.corp-pie{ display:flex; gap:10px 28px; font-size:13px; color:#A9B8D6; flex-wrap:wrap; }
.corp-pie span{ white-space:nowrap; display:flex; align-items:center; gap:6px; }
.corp-anillo{ position:absolute !important; right:-120px; bottom:-120px; width:360px; height:360px; border-radius:50%; border:56px solid rgba(21,101,255,.18); z-index:0 !important; pointer-events:none; }

/* ---------- Formulario ---------- */
.corp-panel{ background:#fff; display:flex; align-items:center; justify-content:center; padding:48px 32px; }
.corp-card{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:22px; }
.corp-chip-empresa{ display:inline-flex; align-self:flex-start; align-items:center; gap:10px; background:var(--sg-fondo); border:1px solid var(--sg-linea); border-radius:10px; padding:8px 14px 8px 8px; }
.corp-chip-textos{ display:flex; flex-direction:column; line-height:1.25; }
.corp-chip-etq{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-texto-sec); }
.corp-chip-nombre{ font-size:14.5px; font-weight:600; color:var(--sg-medianoche); white-space:nowrap; max-width:300px; overflow:hidden; text-overflow:ellipsis; }
.corp-card-titulo{ font-family:var(--sg-fuente-titulos); font-weight:700; font-size:26px; margin:0 0 6px; color:var(--sg-medianoche); }
.corp-card-sub{ font-size:14px; color:var(--sg-texto-sec); margin:0; }
.corp-form{ display:flex; flex-direction:column; gap:22px; }
.corp-label{ display:block; margin:0 0 7px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sg-texto-sec); }
.corp-campo{ display:flex; align-items:center; gap:8px; height:46px; padding:0 14px; background:#fff; border:1.5px solid var(--sg-borde-campo); border-radius:var(--sg-radio); transition:border-color .15s, box-shadow .15s; }
.corp-campo:focus-within{ border-color:var(--sg-azul); box-shadow:0 0 0 4px rgba(21,101,255,.15); }
.corp-campo input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--sg-pizarra); }
.corp-campo input::placeholder{ color:var(--sg-gris-punto); }
.corp-ojo{ border:0; background:transparent; color:var(--sg-texto-sec); padding:6px; cursor:pointer; line-height:1; }
.corp-ojo:hover{ color:var(--sg-azul); }
.corp-boton{ height:48px; border:0; border-radius:var(--sg-radio); cursor:pointer; background:var(--sg-azul); color:#fff; font:inherit; font-size:15px; font-weight:600; white-space:nowrap;
  display:flex; align-items:center; justify-content:space-between; padding:0 18px; transition:background .15s; }
.corp-boton:hover{ background:var(--sg-azul-700); }
.corp-boton:focus-visible{ outline:2px solid var(--sg-azul); outline-offset:2px; }

/* ---------- Pantallas medianas y celulares: el panel de marca pasa arriba ---------- */
@media (max-width: 991.98px){
  .corp{ grid-template-columns:1fr; }
  .corp-hero{ padding:28px 24px; gap:18px; }
  .corp-texto, .corp-pie, .corp-anillo{ display:none; }
  .corp-titulo{ font-size:26px; }
  .corp-hero-cuerpo{ gap:10px; }
  .corp-panel{ padding:32px 20px 48px; align-items:flex-start; }
}