/* App-only additions on top of the approved design system (app.css).
   El ingreso (.login-*) vive ahora en app.css, junto al resto de la marca. */
.hidden { display: none !important; }

.login-error {
  background: var(--bad-soft);
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 12.5px;
}

.cargando { color: var(--ink-faint); font-size: 13px; padding: 30px 0; }
.vacio { color: var(--ink-faint); font-size: 13px; padding: 20px 0; text-align: center; }
.error-box {
  background: var(--bad-soft);
  border: 1px solid var(--bad);
  color: var(--bad);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
}
/* Barra de sincronización: fija abajo y a lo ancho, porque el aviso anterior (un texto
   pequeño en la barra superior) pasaba desapercibido y llevó a pulsar dos veces. */
.barra-sync {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 12px 22px;
  font-size: 13px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 18px rgba(46, 33, 24, 0.10);
  background: var(--surface);
  color: var(--ink);
}
.barra-sync.trabajando { background: var(--siigo-soft); color: var(--siigo); border-top-color: var(--siigo); }
.barra-sync.ok   { background: var(--good-soft); color: var(--good); border-top-color: var(--good); }
.barra-sync.mal  { background: var(--bad-soft);  color: var(--bad);  border-top-color: var(--bad); }
.barra-sync.aviso{ background: var(--warn-soft); color: var(--warn); border-top-color: var(--warn); }
.barra-sync .fino { font-weight: 400; opacity: 0.85; }
.barra-sync .cerrar { margin-left: auto; color: inherit; font-weight: 600; }
.barra-sync .giro {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  display: inline-block; animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .barra-sync .giro { animation: none; } }

/* La píldora de sync mientras trabaja: sin clics repetidos. */
.sync.ocupado { opacity: 0.6; pointer-events: none; }

.side .foot .btn.ghost { color: var(--sidebar-soft); font-size: 12px; text-align: left; }
.side .foot .btn.ghost:hover { color: var(--sidebar-ink); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--ground); }
.toolbar .search input { width: 100%; }