:root{
  --blue:#1877f2;
  --muted:#6b7280;
  --bg:#f5f7fb;
  --card:#ffffff;
  --ring:#e5e7eb;
}

body{ background:var(--bg); color:#1f2937; font-family: Arial, Helvetica, sans-serif; }
.container{ max-width:1200px; margin:20px auto; padding:0 16px; }

.top-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin:6px 0 16px;
}
.top-header h2{ margin:.2rem 0 .1rem; }
.subtitle{ color:var(--muted); margin:0; }
.h-right{ display:flex; align-items:center; gap:8px; }

.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:14px;
  padding:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  margin:12px 0 18px;
}

/* Filtros */
.filters .row{
  display:grid; grid-template-columns: auto auto 1fr auto auto; gap:14px; align-items:end;
}
.filters .mode{ display:flex; gap:12px; }
.filters .field-group{ display:flex; gap:10px; align-items:end; }
.filters .field, .filters .field-group .field{ display:flex; flex-direction:column; gap:6px; }
.filters .cta{ margin-left:auto; display:flex; gap:10px; }
.filters label{ font-size:.95rem; }
.hidden{ display:none !important; }

.btn{
  border:1px solid #d1d5db; background:#fff; padding:8px 14px; border-radius:10px; cursor:pointer;
  transition: box-shadow .2s, transform .04s;
}
.btn:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-ghost{ background:#eef2ff; color:#1e3a8a; border-color:#c7d2fe; }

/* Tabs */
.tabs{ display:flex; gap:8px; margin:8px 0 12px; }
.tab{ background:#fff; border:1px solid #e5e7eb; padding:8px 12px; border-radius:12px; cursor:pointer; }
.tab.active{ background:#eef4ff; border-color:#c7d2fe; }

/* Tab panels */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* DataTables look */
table.dataTable{ background:#fff; border-radius:12px; overflow:hidden; }
.dataTables_wrapper .dt-buttons{ margin-bottom:8px; }
table.dataTable tfoot th{ background:#fafafa; font-weight:700; }

/* Loader overlay */
.loading-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:9999;
}
.spinner{
  width:46px; height:46px; border-radius:50%;
  border:4px solid #fff; border-top-color: var(--blue);
  animation: spin .8s linear infinite;
  box-shadow:0 0 0 6px rgba(255,255,255,.2) inset;
}
.loading-text{ color:#fff; margin-top:10px; font-weight:700; letter-spacing:.3px; text-shadow:0 2px 6px rgba(0,0,0,.35); }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* Imprimible: estilo hoja carta */
@media print {
  body{ background:#fff; }
  .filters, .tabs, .dataTables_wrapper .dt-buttons, #loadingOverlay{ display:none !important; }
  .card{ border:none; box-shadow:none; }
  table{ font-size:12px; }
  @page{ size:letter; margin:10mm; }
}