/* ============================================================
   NexoERP — custom.css
   Componentes de interfaz (CSS plano, compatible con Tailwind
   runtime CDN) + animaciones y scrollbars.
   ============================================================ */

body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* ---------- Tarjetas ---------- */
.nexo-card {
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  padding: 1rem;
}

/* ---------- Botones ---------- */
.btn-primario, .btn-secundario, .btn-peligro {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.625rem;
  padding: 0.5rem 0.9rem;
  transition: all .15s ease;
  cursor: pointer;
  white-space: nowrap;
  min-height: 38px;
}
.btn-primario { background: #2563eb; color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, .35); }
.btn-primario:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37, 99, 235, .35); }
.btn-primario:disabled, .btn-secundario:disabled, .btn-peligro:disabled { opacity: .55; cursor: not-allowed; }
.btn-secundario { background: #fff; color: #334155; border: 1px solid #e2e8f0; }
.btn-secundario:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-peligro { background: #e11d48; color: #fff; }
.btn-peligro:hover { background: #be123c; }

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 0.5rem;
  color: #64748b; transition: all .15s ease;
}
.btn-icono:hover { background: #f1f5f9; color: #2563eb; }

/* ---------- Formularios ---------- */
.input-texto {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #0f172a;
  background: #fff;
  min-height: 38px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-texto::placeholder { color: #94a3b8; }
.input-texto:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
select.input-texto { appearance: auto; }

.label-forma {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.375rem;
  text-transform: none;
  letter-spacing: .01em;
}

/* ---------- Scrollbars ---------- */
.nexo-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.nexo-scroll::-webkit-scrollbar-track { background: transparent; }
.nexo-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.nexo-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.nexo-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ---------- Animaciones ---------- */
@keyframes slideUp { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.animate-slide-up { animation: slideUp .22s cubic-bezier(.2, .8, .3, 1); }
.animate-slide-left { animation: slideLeft .25s cubic-bezier(.2, .8, .3, 1); }
.animate-slide-right { animation: slideRight .22s cubic-bezier(.2, .8, .3, 1); }
.animate-fade-in { animation: fadeIn .25s ease; }

/* ---------- Utilidades tablas ---------- */
table { border-collapse: collapse; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- Impresión ---------- */
@media print {
  aside, header, footer, .btn-primario, .btn-secundario, .btn-peligro { display: none !important; }
  .lg\:pl-64 { padding-left: 0 !important; }
}

/* ---------- Adenda: Boleta de venta (ticket 80 mm) ---------- */
.boleta-print {
  background: #fff;
  color: #000;
  font-family: 'Courier New', ui-monospace, monospace;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
}

/* Al imprimir, sale ÚNICAMENTE la boleta visible en pantalla. */
@media print {
  body * { visibility: hidden !important; }
  .boleta-print, .boleta-print * { visibility: visible !important; }
  .boleta-print {
    position: absolute;
    left: 0; top: 0;
    width: 80mm;
    max-width: 80mm;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  @page { margin: 6mm; }
}