/* ===========================================
   SAT MANAGER - BASE STYLES
   =========================================== */

body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
}

/* Utilidades */
.text-muted { color: var(--text-secondary); font-size: var(--text-sm); }
.text-tertiary { color: var(--text-tertiary); }
.text-monospace { font-family: var(--font-mono); }
.no-upper { text-transform: none !important; }
.spacer { flex: 1; }

/* Scrollbar Global */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ===========================================
   PAGE TRANSITION — Fade-in suave al cambiar de página
   =========================================== */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-transition {
  animation: page-fade-in 0.25s ease-out;
}

/* Respetar prefers-reduced-motion (usuarios sensibles a animaciones) */
@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .card:hover,
  .btn:hover,
  .nav-item:hover,
  .stat-card:hover {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================
   FOCUS VISIBLE — Accesibilidad keyboard
   =========================================== */
*:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -1px;
}

a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===========================================
   MICRO-ANIMACIONES — Pulido visual
   =========================================== */

/* Tarjetas: elevación al hover */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Botones: efecto press */
.btn {
  transition: all 0.15s ease;
}
.btn:active {
  transform: scale(0.97);
}

/* Items del menú lateral: slide suave */
.nav-item {
  transition: all 0.15s ease;
  position: relative;
}
.nav-item:hover {
  background: var(--bg-elevated);
  padding-left: 14px;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--brand-primary);
  border-radius: 0 3px 3px 0;
}

/* Badges de peligro: pulso suave */
.badge-danger {
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }
}

/* Filas de tabla: highlight al hover */
tr:hover td {
  transition: background 0.15s ease;
}

/* Badges: transición suave */
.badge {
  transition: transform 0.15s ease;
}
.badge:hover {
  transform: scale(1.05);
}

/* Enlaces de tabla: subrayado animado */
.table-link {
  position: relative;
  text-decoration: none;
}
.table-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--brand-primary);
  transition: width 0.2s ease;
}
.table-link:hover::after {
  width: 100%;
}

/* Spinner global */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Skeleton pulse (para loaders) */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===========================================
   PRINT STYLES — Impresión limpia
   =========================================== */
@media print {
  .sidebar,
  .sidebar-overlay,
  .topbar,
  .breadcrumb,
  #barra-lote,
  .btn,
  .photo-menu,
  .cmdk-overlay,
  #btn-tema,
  .hamburger-btn,
  #toast-stack,
  #scrollTopBtn {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #000 !important;
    break-inside: avoid;
  }

  * {
    color: #000 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline;
  }

  .badge {
    background: #eee !important;
    color: #000 !important;
    border: 1px solid #999 !important;
  }

  tr, img {
    page-break-inside: avoid;
  }
}