/* ============================================================
   login-staff.css — Acceso de personal
   ------------------------------------------------------------
   Pantalla partida: 75% imagen institucional, 25% formulario.

   La proporción es deliberada. El panel visual da presencia
   institucional y el formulario queda en una columna estrecha y
   sobria, que es donde el ojo entra directo a escribir.

   TEMA CLARO: usa los mismos tokens que el panel de trabajo
   (theme-sobrio.css) para que entrar al sistema y trabajar en él
   se vean como una sola aplicación. Se leen con var(...) y un
   valor de reserva, porque esta pantalla puede pintarse antes de
   que la hoja del tema haya cargado.

   La imagen de fondo la sube el superadmin desde Configuración →
   Identidad institucional. app.js la aplica escribiendo la
   variable --login-bg. Si no hay ninguna cargada, el degradado
   institucional queda a la vista y la pantalla se ve terminada
   igual: nunca aparece el hueco de una imagen rota.

   En móvil los dos bloques no caben lado a lado, así que el panel
   pasa a ser fondo tenue y el formulario ocupa la pantalla.

   Estos estilos vivían incrustados en index.html. Se extrajeron
   aquí para poder trabajarlos sin editar una línea de 50 KB.
   ============================================================ */

/* styles.css impone sobre esta pantalla un degradado verde muy
   oscuro con relleno de 40px, heredado del diseño anterior. Se
   neutraliza aquí (esta hoja carga después) para que el tema
   claro no asome en verde por los bordes. El !important es
   necesario: la regla original también lo lleva. */
#screen-staff-login,
#screen-staff-login.active {
  background: var(--bg-base, #eef2f7) !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.soc {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 75fr 25fr;   /* la proporción pedida */
  overflow: hidden;
  background: var(--bg-base, #eef2f7);
  color: var(--text-primary, #14181f);
}

/* ─── 1. PANEL VISUAL (75%) ──────────────────────────────── */
.soc-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px 52px;
  /* Respaldo visible mientras no se coloque la fotografía:
     azules claros de la paleta institucional. */
  background:
    radial-gradient(900px 620px at 12% 8%, rgba(47,128,237,.14), transparent 62%),
    radial-gradient(700px 520px at 88% 92%, rgba(14,165,233,.12), transparent 62%),
    linear-gradient(145deg, #f7fafd 0%, #e9f0fa 55%, #dfe9f6 100%);
}

/* La imagen va en su propia capa para poder atenuarla sin afectar
   al texto que se le superpone.
   La fija el superadmin desde Configuración: app.js escribe
   --login-bg en :root con la URL subida. Si no hay ninguna, el
   degradado institucional de .soc-visual queda a la vista y la
   pantalla se ve terminada igual. */
.soc-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--login-bg, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Velo claro: garantiza que el texto oscuro se lea sobre
   cualquier fotografía, sea clara u oscura. Sin él, una foto
   con zonas oscuras dejaría el título ilegible.
   Solo se pinta cuando hay imagen: sobre el degradado de
   respaldo, que ya es claro, dejaría el panel lavado. */
.soc-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(247,250,253,.93) 0%,
    rgba(247,250,253,.72) 42%,
    rgba(233,240,250,.86) 100%);
  opacity: 0;
  transition: opacity .25s;
  z-index: 1;
}
.soc.has-bg .soc-visual::after { opacity: 1; }

/* Controles administrables desde Identidad del Municipio. */
.soc.login-presentation-pending .soc-brand,
.soc.login-presentation-pending .soc-claim,
.soc.login-presentation-pending .soc-visual-foot {
  visibility: hidden !important;
  opacity: 0 !important;
}
.soc.login-presentation-pending.has-bg .soc-visual::after { opacity: 0 !important; }
.soc.login-institutional-off .soc-brand,
.soc.login-institutional-off .soc-claim,
.soc.login-institutional-off .soc-visual-foot { display: none !important; }
.soc.has-bg.login-overlay-off .soc-visual::after { opacity: 0 !important; }

.soc-visual > * { position: relative; z-index: 2; }

/* Identidad institucional, arriba del panel */
.soc-brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.soc-emblem {
  width: 74px;
  height: 74px;
  flex: none;
  border-radius: 20px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6eaf1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(20,24,31,.08));
}
.soc-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.soc-org-country {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--primary, #2f80ed);
  font-weight: 700;
}
.soc-org-name {
  margin: 0 0 4px;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--text-primary, #14181f);
}
.soc-org-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary, #5b6676);
}

/* Mensaje central del panel */
.soc-claim { max-width: 640px; }
/* Es el nombre del producto, no una frase: se trata como marca.
   Tamaño grande y letra espaciada, que es lo que sostiene bien
   un rótulo corto en mayúsculas. */
.soc-claim h2 {
  margin: 0 0 14px;
  font-size: 60px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--text-primary, #14181f);
  letter-spacing: 1px;
}
.soc-claim p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary, #5b6676);
  max-width: 540px;
}

/* Pie del panel: aviso legal y sellos */
.soc-visual-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.soc-legal {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 660px;
  padding: 14px 17px;
  border-radius: var(--r-md, 12px);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border, #e6eaf1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-secondary, #5b6676);
}
.soc-legal i { color: var(--warning, #f59e0b); margin-top: 2px; flex-shrink: 0; }

.soc-seals {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.soc-seals span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e6eaf1);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #5b6676);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(20,24,31,.06));
}
.soc-seals i { color: var(--primary, #2f80ed); font-size: 10px; }

/* ─── 2. COLUMNA DE ACCESO (25%) ─────────────────────────── */
.soc-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 40px 34px;
  overflow-y: auto;
  background: var(--bg-surface, #fff);
  border-left: 1px solid var(--border, #e6eaf1);
  box-shadow: -18px 0 44px rgba(20,24,31,.07);
}

.soc-main-head { margin-bottom: 2px; }
.soc-badge-shield {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  background: linear-gradient(150deg, var(--primary-light, #5b9cf5), var(--primary, #2f80ed));
  color: #fff;
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(47,128,237,.28);
}
.soc-title {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary, #14181f);
  letter-spacing: -.3px;
}
.soc-subtitle {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary, #5b6676);
}

/* Aviso del segundo factor */
.soc-2fa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm, 8px);
  background: rgba(47,128,237,.07);
  border: 1px solid rgba(47,128,237,.20);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary, #5b6676);
}
.soc-2fa i { color: var(--primary, #2f80ed); margin-top: 2px; flex-shrink: 0; }
.soc-2fa strong { color: var(--text-primary, #14181f); }

/* Campos */
.soc-field { display: flex; flex-direction: column; gap: 7px; }
.soc-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary, #5b6676);
}
.soc-input {
  position: relative;
  display: flex;
  align-items: center;
}
.soc-input > i:first-child {
  position: absolute;
  left: 13px;
  color: var(--text-muted, #9aa4b2);
  font-size: 13px;
  pointer-events: none;
}
.soc-input input {
  width: 100%;
  padding: 13px 14px 13px 38px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border, #e6eaf1);
  background: var(--bg-muted, #f4f6fa);
  color: var(--text-primary, #14181f);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.soc-input input::placeholder { color: var(--text-muted, #9aa4b2); }
.soc-input input:focus {
  outline: none;
  border-color: var(--primary, #2f80ed);
  background: var(--bg-card, #fff);
  box-shadow: 0 0 0 3px rgba(47,128,237,.14);
}
/* El autorrelleno de Chrome impone su propio fondo amarillo:
   se neutraliza para no romper el tema claro. */
.soc-input input:-webkit-autofill,
.soc-input input:-webkit-autofill:hover,
.soc-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary, #14181f);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--text-primary, #14181f);
}
.soc-eye {
  position: absolute;
  right: 13px;
  color: var(--text-muted, #9aa4b2);
  cursor: pointer;
  font-size: 13px;
  transition: color .15s;
}
.soc-eye:hover { color: var(--primary, #2f80ed); }

/* Error de credenciales */
.soc-error {
  display: none;
  padding: 11px 13px;
  border-radius: var(--r-sm, 8px);
  background: rgba(220,38,38,.07);
  border: 1px solid rgba(220,38,38,.24);
  color: #b91c1c;
  font-size: 12.5px;
  line-height: 1.45;
}
.soc-error.show, .soc-error:not(:empty) { display: block; }

.soc-btn {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: var(--r-sm, 8px);
  background: linear-gradient(135deg, var(--primary-light, #5b9cf5), var(--primary-dark, #1f66c9));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 6px 18px rgba(47,128,237,.26);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.soc-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(47,128,237,.34);
}
.soc-btn:active { transform: translateY(1px); }
.soc-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ─── 3. TELEMETRÍA DE LA CONEXIÓN ───────────────────────── */
/* Se muestra en la columna del formulario: el usuario debe verla
   antes de escribir, no después. Es disuasión, no decoración. */
.soc-monitor {
  margin-top: 4px;
  padding: 14px 15px;
  border-radius: var(--r-md, 12px);
  background: var(--bg-muted, #f4f6fa);
  border: 1px solid var(--border, #e6eaf1);
}
.soc-monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border, #e6eaf1);
}
.soc-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--success, #16a34a);
}
.soc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success, #16a34a);
  box-shadow: 0 0 0 0 rgba(22,163,74,.5);
  animation: socPulse 2s infinite;
}
@keyframes socPulse {
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.soc-clock {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary, #2f80ed);
  font-variant-numeric: tabular-nums;
}

.soc-data { display: flex; flex-direction: column; gap: 7px; }
.soc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}
.soc-k {
  color: var(--text-muted, #9aa4b2);
  font-weight: 700;
  letter-spacing: .4px;
  flex-shrink: 0;
}
.soc-v {
  color: var(--text-primary, #14181f);
  font-weight: 600;
  text-align: right;
  word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.soc-ip { color: var(--primary-dark, #1f66c9); font-weight: 800; }

.soc-monitor-warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e6eaf1);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-muted, #9aa4b2);
}
.soc-monitor-warn i { color: var(--warning, #f59e0b); margin-top: 2px; flex-shrink: 0; }

.soc-foot {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted, #9aa4b2);
}
.soc-foot i { color: var(--warning, #f59e0b); margin-right: 4px; }
.soc-foot span { display: block; margin-top: 4px; opacity: .8; }

/* ─── 4. ADAPTACIÓN A PANTALLAS ──────────────────────────── */

/* Portátiles y tabletas horizontales: la columna de acceso no
   debe estrecharse tanto que los campos queden apretados. */
@media (max-width: 1400px) {
  .soc { grid-template-columns: 1fr 370px; }
  .soc-claim h2 { font-size: 50px; }
  .soc-visual { padding: 38px 42px; }
}

@media (max-width: 1100px) {
  .soc { grid-template-columns: 1fr 340px; }
  .soc-claim h2 { font-size: 40px; }
  .soc-org-name { font-size: 21px; }
}

/* Móvil: los dos bloques no caben en fila. El panel visual pasa a
   ser fondo tenue y el formulario ocupa toda la pantalla. */
@media (max-width: 860px) {
  .soc {
    display: block;
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: var(--bg-base, #eef2f7);
  }
  .soc-visual {
    position: fixed;
    inset: 0;
    padding: 0;
    z-index: 0;
  }
  /* Se conserva solo como ambiente: el texto del panel estorbaría
     detrás del formulario. */
  .soc-visual > * { display: none; }
  .soc-visual::before { opacity: .22; }
  .soc-visual::after {
    background: linear-gradient(180deg, rgba(238,242,247,.92), rgba(233,240,250,.96));
  }

  .soc-main {
    position: relative;
    z-index: 1;
    min-height: 100%;
    justify-content: flex-start;
    padding: 32px 22px calc(32px + env(safe-area-inset-bottom));
    background: transparent;
    border-left: 0;
    box-shadow: none;
    max-width: 460px;
    margin: 0 auto;
  }
  /* Las tarjetas necesitan fondo propio: el de la columna es
     transparente para dejar ver la imagen de ambiente. */
  .soc-monitor { background: var(--bg-card, #fff); }
}

@media (max-width: 380px) {
  .soc-main { padding: 24px 16px; }
  .soc-title { font-size: 18px; }
}

/* Pantallas muy altas: el formulario no debe quedar perdido. */
@media (min-height: 1000px) and (min-width: 861px) {
  .soc-main { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .soc-live-dot { animation: none; }
  .soc-btn { transition: none; }
}