:root {
  --bg: #f4f7fb;
  --bg-grad-1: #f7fbff;
  --bg-grad-2: #eef3fa;
  --bg-grad-3: #f7fafc;
  --panel: #ffffff;
  --ink: #152238;
  --muted: #5a6b85;
  --brand: #0f5fa8;
  --accent: #ef6c00;
  --ok: #1f7a1f;
  --warn: #af7d00;
  --danger: #b3261e;
  --border: #d7e0ea;
  --btn-light-bg: #e9f0f7;
  --btn-light-ink: #123;
  --kpi-bg: #eef6ff;
  --kpi-border: #d2e3f6;
}
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-grad-1: #0b1220;
  --bg-grad-2: #0f1a2f;
  --bg-grad-3: #111a2a;
  --panel: #0f1727;
  --ink: #e6edf7;
  --muted: #a6b4cc;
  --brand: #4ea1ff;
  --accent: #ff9a3d;
  --ok: #35b46e;
  --warn: #f0b429;
  --danger: #ff6b6b;
  --border: #24344f;
  --btn-light-bg: #1c2b43;
  --btn-light-ink: #d9e6fb;
  --kpi-bg: #10233f;
  --kpi-border: #27466f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; color: var(--ink); background: linear-gradient(165deg, var(--bg-grad-1), var(--bg-grad-2) 45%, var(--bg-grad-3)); }
.wrap { width: min(1150px, 94vw); margin: 0 auto; }
.topbar { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand { color: var(--brand); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.userbox { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 0.92rem; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin: 16px 0; box-shadow: 0 8px 24px rgba(8, 34, 67, .06); }
.card h2, .card h3 { margin: 0 0 12px; }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
label { font-size: .85rem; color: var(--muted); display: block; margin-bottom: 5px; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font: inherit; background: var(--panel); color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
.btn { border: 0; border-radius: 8px; padding: 10px 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-light { background: var(--btn-light-bg); color: var(--btn-light-ink); }
.btn-danger { background: var(--danger); color: #fff; }
.icon-btn { padding: 7px 9px; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; border-bottom: 1px solid var(--border); padding: 9px 6px; vertical-align: top; font-size: .92rem; }
.table th { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; }
.col-fecha { width: 140px; min-width: 140px; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-item .doc-actions { display: inline-flex; gap: 6px; align-items: center; }
.alert { border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.alert-success { background: #e9f8ec; color: #0e4f1b; border: 1px solid #c5e8ce; }
.alert-error { background: #fdeceb; color: #7b1f1a; border: 1px solid #f5c9c6; }
.kpi { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 10px; }
.kpi .item { background: var(--kpi-bg); border: 1px solid var(--kpi-border); border-radius: 10px; padding: 10px; }
.kpi .label { color: var(--muted); font-size: .8rem; }
.kpi .value { font-size: 1.25rem; font-weight: 700; }
.small { font-size: .85rem; color: var(--muted); }
.preview-modal { position: fixed; inset: 0; z-index: 9999; }
.preview-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 18, 30, .72); }
.preview-modal-dialog { position: relative; width: min(980px, 96vw); margin: 2vh auto; background: var(--panel); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; color: var(--ink); }
.preview-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.preview-modal-body { height: min(82vh, 820px); padding: 12px; background: #0d1117; }
.preview-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview-frame { width: 100%; height: 100%; border: 0; background: var(--panel); }
@media print {
  .topbar, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}