:root {
  --color-primary: #1E40AF;
  --color-primary-hover: #1E3A8A;
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text: #0F172A;
  --color-text-muted: #475569;
  --color-text-subtle: #94A3B8;
  --color-cta: #F59E0B;

  --color-success-bg: #DCFCE7;
  --color-success-fg: #166534;
  --color-danger-bg:  #FEE2E2;
  --color-danger-fg:  #991B1B;
  --color-warn-bg:    #FEF3C7;
  --color-warn-fg:    #92400E;

  --radius-sm: .375rem;
  --radius-md: .5rem;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06);
}

html, body {
  font-family: 'Fira Sans', system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
}

h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

code, .mono {
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, monospace;
  font-size: .85em;
}

/* === Header === */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: .75rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
}
.app-brand { font-weight: 700; font-size: 1rem; color: var(--color-text); letter-spacing: -0.01em; text-decoration: none; }
.app-brand .accent { color: var(--color-primary); }

/* === Sync pill === */
.sync-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--color-success-bg); color: var(--color-success-fg);
  font-size: .75rem; font-weight: 500;
  border: 1px solid rgba(22,101,52,.15);
}
.sync-pill.stale   { background: var(--color-warn-bg); color: var(--color-warn-fg); border-color: rgba(146,64,14,.15); }
.sync-pill.error   { background: var(--color-danger-bg); color: var(--color-danger-fg); border-color: rgba(153,27,27,.15); }
.sync-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* === Tabs === */
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
}
.nav-tabs .nav-link {
  color: var(--color-text-muted);
  border: none; border-bottom: 2px solid transparent;
  padding: .5rem .85rem; font-weight: 500;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav-tabs .nav-link.active {
  color: var(--color-primary); background: transparent;
  border-bottom-color: var(--color-primary);
}
.nav-tabs .nav-link:hover:not(.active) { color: var(--color-text); border-bottom-color: var(--color-border); }
.nav-tabs .nav-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* === Filter bar === */
.filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.filter-bar .form-label {
  font-size: .7rem; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem;
}
.filter-bar .form-select, .filter-bar .form-control { font-size: .875rem; padding: .375rem .55rem; }
.filter-bar .form-control:focus, .filter-bar .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .15rem rgba(30,64,175,.15);
}

/* === Buttons === */
.btn-primary {
  background: var(--color-primary); border-color: var(--color-primary);
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-link-subtle {
  color: var(--color-text-muted); background: transparent; border: none;
  font-size: .85rem; padding: .375rem .5rem;
  cursor: pointer;
  transition: color 150ms ease;
}
.btn-link-subtle:hover { color: var(--color-primary); text-decoration: underline; }
.btn-cta { background: var(--color-cta); border-color: var(--color-cta); color: #1F2937; font-weight: 600; transition: background-color 150ms ease, border-color 150ms ease; }
.btn-cta:hover { background: #D97706; border-color: #D97706; color: #1F2937; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* === Upload card === */
.upload-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
}

/* === Table === */
.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
  margin-bottom: .5rem;
  box-shadow: var(--shadow-sm);
}
.table-toolbar .pagination { gap: 2px; }
.results-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--color-text-muted);
  margin: 0 .25rem .5rem;
  gap: .5rem;
  flex-wrap: wrap;
}
table.table-acuses {
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: 1rem; overflow: hidden;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.table-acuses thead th {
  font-size: .7rem; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  background: #F1F5F9; border-bottom: 1px solid var(--color-border);
  padding: .55rem .75rem; white-space: nowrap;
  text-align: left;
}
table.table-acuses tbody td {
  padding: .5rem .75rem; vertical-align: middle;
  border-top: 1px solid var(--color-border); font-size: .85rem;
}
table.table-acuses tbody tr:first-child td { border-top: none; }
table.table-acuses tbody tr { transition: background-color 150ms ease; }
table.table-acuses tbody tr:hover { background: #EFF6FF; }
table.table-acuses tbody tr.row-selected { background: #DBEAFE; }
table.table-acuses td.mono, table.table-acuses td .mono { font-family: 'Fira Code', monospace; font-size: .82rem; }

th.sortable {
  cursor: pointer; user-select: none; position: relative;
  transition: background-color 150ms ease;
}
th.sortable:hover { background: #E2E8F0; }
.sort-ind { display: inline-block; margin-left: .25rem; opacity: .6; font-size: .7rem; }
th.sortable.active .sort-ind { opacity: 1; color: var(--color-primary); }

/* === Status badge === */
.badge-status {
  display: inline-flex; align-items: center;
  font-family: 'Fira Code', monospace;
  font-size: .75rem; font-weight: 600;
  padding: .2rem .5rem; border-radius: var(--radius-sm);
  min-width: 32px; justify-content: center;
}
.badge-status.ok   { background: var(--color-success-bg); color: var(--color-success-fg); }
.badge-status.err  { background: var(--color-danger-bg);  color: var(--color-danger-fg); }
.badge-status.warn { background: var(--color-warn-bg);    color: var(--color-warn-fg); }

/* === Row actions (icon buttons) === */
.row-actions { display: inline-flex; gap: .25rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text-muted);
  transition: all 150ms ease; cursor: pointer;
}
.icon-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: #EFF6FF; }
.icon-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.icon-btn svg { width: 14px; height: 14px; }

/* === Detail panel === */
.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.detail-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
}
.detail-folio { font-family: 'Fira Code', monospace; font-size: 1.25rem; font-weight: 600; color: var(--color-text); word-break: break-all; }
.detail-body { padding: 1rem 1.25rem; }
.detail-section {
  padding: .75rem 0;
  border-top: 1px solid var(--color-border);
}
.detail-section:first-of-type { border-top: none; padding-top: 0; }
.detail-section h6 {
  font-size: .7rem; font-weight: 600; color: var(--color-text-subtle);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem;
}
.detail-field { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: .5rem; padding: .25rem 0; font-size: .85rem; align-items: center; }
.detail-field-label { color: var(--color-text-muted); }
.detail-field-value { color: var(--color-text); font-weight: 500; word-break: break-all; text-align: right; }
.detail-field-value.mono { font-family: 'Fira Code', monospace; font-weight: 400; }

.detail-alert {
  margin: .75rem 0;
  padding: .65rem .85rem; border-radius: var(--radius-sm);
  font-size: .85rem; border-left: 3px solid;
}
.detail-alert.error   { background: var(--color-danger-bg); color: var(--color-danger-fg); border-left-color: var(--color-danger-fg); }
.detail-alert.warn    { background: var(--color-warn-bg);   color: var(--color-warn-fg);   border-left-color: var(--color-warn-fg); }

/* === Pagination === */
.pagination .page-link {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  font-size: .8rem;
  padding: .35rem .65rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.pagination .page-item.active .page-link {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.pagination .page-link:hover { color: var(--color-primary); background: #EFF6FF; }

/* === Sync card (Acuses Nuevos tab) === */
.sync-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.sync-stat { display: flex; flex-direction: column; gap: .15rem; }
.sync-stat-label { font-size: .7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sync-stat-value { font-size: 1rem; font-weight: 600; color: var(--color-text); }

/* === Skeleton loading === */
.skeleton-row td { height: 32px; }
.skeleton-pulse {
  display: inline-block; height: 12px; background: linear-gradient(90deg,#E2E8F0 0%,#F1F5F9 50%,#E2E8F0 100%);
  background-size: 200% 100%; animation: pulse 1.5s ease-in-out infinite; border-radius: 4px;
}
.skeleton-pulse.w-50 { width: 50%; } .skeleton-pulse.w-70 { width: 70%; } .skeleton-pulse.w-30 { width: 30%; }
@keyframes pulse { 0%,100% { background-position: 200% 0; } 50% { background-position: -200% 0; } }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}