/* Estilos de integración con la API.
 * Complementan a styles.css (reutilizan SUS tokens y componentes) y añaden solo
 * lo que el prototipo no traía: login, tabla de datos, paginación, barra de
 * herramientas, estados de carga/error y drawer de detalle.
 * Tokens reales del prototipo: --bg --surface --surface-2 --border
 * --border-strong --ink --ink-2 --ink-3 --primary --primary-d --primary-soft
 * --ok/-bg --warn/-bg --err/-bg --info/-bg --reserve/-bg --transit/-bg
 * --diff/-bg --neutral/-bg --radius --radius-sm --shadow-sm/-md/-lg. */

/* ---------- Login ---------- */
.ig-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 100% -10%, var(--primary-soft), transparent 60%),
    var(--bg);
}
.ig-login__card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-lg);
}
.ig-login__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ig-login__mark {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: #fff; background: var(--primary);
}
.ig-login__title { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.1; color: var(--ink); }
.ig-login__sub { font-size: 12px; color: var(--ink-3); }
.ig-login form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.ig-login__hint { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 12px; }
.ig-login__error {
  background: var(--err-bg); border: 1px solid var(--err); color: var(--err);
  border-radius: 9px; padding: 9px 12px; font-size: 13px;
}

/* ---------- Barra de herramientas ---------- */
.ig-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.ig-toolbar__search { position: relative; flex: 1 1 260px; min-width: 200px; }
.ig-toolbar__search input {
  width: 100%; height: 38px; padding: 0 12px 0 36px;
  border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font: inherit;
}
.ig-toolbar__search input:focus { outline: none; border-color: var(--primary-l); box-shadow: 0 0 0 3px var(--primary-soft); }
.ig-toolbar__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.ig-toolbar__spacer { flex: 1; }

/* ---------- Tabla de datos ---------- */
.ig-tablewrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);
}
.ig-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
.ig-table th, .ig-table td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ig-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); font-weight: 600; background: var(--surface-2);
}
.ig-table tbody tr:last-child td { border-bottom: none; }
.ig-table tbody tr:hover { background: var(--primary-tint); }
.ig-table td.num, .ig-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ig-row-btn { cursor: pointer; }
.ig-mono { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* ---------- Paginación ---------- */
.ig-pagination {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  padding: 12px 4px; font-size: 13px; color: var(--ink-3);
}
.ig-pagination__info { margin-right: auto; }
.ig-pagination__pages { font-variant-numeric: tabular-nums; }

/* ---------- Estados ---------- */
.ig-state { display: grid; place-items: center; padding: 48px 24px; text-align: center; color: var(--ink-3); }
.ig-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: ig-spin 0.8s linear infinite;
}
@keyframes ig-spin { to { transform: rotate(360deg); } }
.ig-state__error { color: var(--err); }

/* ---------- Píldoras de estado ---------- */
.ig-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.ig-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ig-pill--ok { color: var(--ok); background: var(--ok-bg); }
.ig-pill--warn { color: var(--warn); background: var(--warn-bg); }
.ig-pill--err { color: var(--err); background: var(--err-bg); }
.ig-pill--info { color: var(--info); background: var(--info-bg); }
.ig-pill--neutral { color: var(--neutral); background: var(--neutral-bg); }
.ig-pill--reserve { color: var(--reserve); background: var(--reserve-bg); }
.ig-pill--transit { color: var(--transit); background: var(--transit-bg); }
.ig-pill--diff { color: var(--diff); background: var(--diff-bg); }

/* ---------- Drawer / detalle ---------- */
.ig-drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 28, 34, 0.34); display: flex; justify-content: flex-end; z-index: 60; }
.ig-drawer {
  width: min(560px, 100%); height: 100%;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.ig-drawer__head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.ig-drawer__body { padding: 18px 20px; overflow: auto; flex: 1; }
.ig-drawer__foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Utilidades ---------- */
.ig-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ig-grid-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 18px; }
.ig-muted { color: var(--ink-3); }
.ig-right { margin-left: auto; }
.ig-mt { margin-top: 14px; }
.ig-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; color: var(--ink); }
.ig-kv dt { color: var(--ink-3); }

/* ---------- Search Select (async, single + múltiple) ---------- */
.ss { position: relative; min-width: 200px; }
.ss--block { width: 100%; }
.ss__control {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 38px; padding: 5px 8px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); cursor: text;
}
.ss__control:focus-within { border-color: var(--primary-l); box-shadow: 0 0 0 3px var(--primary-soft); }
.ss__chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--primary-soft); color: var(--primary-d);
  border-radius: 6px; padding: 2px 4px 2px 8px; font-size: 12px; font-weight: 600;
}
.ss__chip button { border: none; background: none; cursor: pointer; color: inherit; display: flex; padding: 1px; border-radius: 4px; }
.ss__chip button:hover { background: rgba(0, 0, 0, 0.08); }
.ss__input { flex: 1; min-width: 70px; border: none; outline: none; background: none; font: inherit; color: var(--ink); }
.ss__single { color: var(--ink); font-size: 13.5px; }
.ss__clear { border: none; background: none; cursor: pointer; color: var(--ink-3); display: flex; padding: 2px; }
.ss__clear:hover { color: var(--ink); }
.ss__menu {
  position: absolute; z-index: 90; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: var(--shadow-lg); max-height: 280px; overflow: auto; padding: 4px;
}
.ss__opt { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--ink); }
.ss__opt:hover, .ss__opt--active { background: var(--primary-tint); }
.ss__opt--sel { color: var(--primary-d); font-weight: 600; }
.ss__msg { padding: 10px; color: var(--ink-3); font-size: 13px; text-align: center; }

/* ---------- Editor de líneas (formularios de creación) ---------- */
.ig-form { max-width: 920px; }
.ig-form__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.ig-lines { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.ig-line { display: grid; gap: 10px; align-items: end; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ig-line:last-child { border-bottom: none; }
.ig-line__rm { display: flex; align-items: center; height: 38px; }
.ig-formfoot { display: flex; gap: 10px; align-items: center; margin-top: 18px; }