:root {
  --app-primary: #1f3a5f;
  --app-primary-2: #2c5282;
  --app-bg: #f4f6f9;
  --sidebar-width: 260px;
}
body { background: var(--app-bg); font-size: .95rem; }
.bg-primary-dark { background: var(--app-primary) !important; }
.skip-link { position: absolute; z-index: 2000; left: .5rem; top: .5rem; background: #fff; padding: .5rem 1rem; }
.app-header { min-height: 56px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.app-header .navbar-brand { max-width: 50vw; }
.app-shell { display: flex; min-height: calc(100vh - 56px); }
.app-sidebar { width: var(--sidebar-width); background: #fff; border-right: 1px solid #e3e7ee; flex-shrink: 0; }
@media (min-width: 992px) {
  .app-sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
  body.sidebar-collapsed .app-sidebar { width: 64px; }
  body.sidebar-collapsed .app-sidebar .nav-link span,
  body.sidebar-collapsed .app-sidebar .menu-title { display: none; }
  body.sidebar-collapsed .app-sidebar .collapse:not(.show) { display: block; }
}
.app-main { flex: 1; min-width: 0; padding: 1.25rem; }
@media (max-width: 575.98px) { .app-main { padding: .75rem; } }
.menu-section { border-bottom: 1px solid #f0f2f5; }
.menu-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; padding: .6rem 1rem; }
.menu-title .bi { transition: transform .15s; }
.menu-title.collapsed .bi { transform: rotate(-90deg); }
.app-sidebar .nav-link { color: #344054; padding: .45rem 1rem; border-left: 3px solid transparent; white-space: nowrap; }
.app-sidebar .nav-link:hover { background: #f2f5f9; }
.app-sidebar .nav-link.active { background: #e8eef7; color: var(--app-primary); border-left-color: var(--app-primary); font-weight: 600; }
.card { border: 1px solid #e3e7ee; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kpi { border-left: 4px solid var(--app-primary-2); }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kpi.kpi-danger { border-left-color: #dc3545; }
.kpi.kpi-warning { border-left-color: #f0ad4e; }
.kpi.kpi-success { border-left-color: #198754; }
.kpi.kpi-info { border-left-color: #0dcaf0; }
.json-block { max-height: 320px; overflow: auto; background: #f8f9fa; padding: .5rem; border-radius: .25rem; }
.btn, .form-control, .form-select { min-height: 38px; }
.btn-sm { min-height: 32px; }
:focus-visible { outline: 3px solid #86b7fe; outline-offset: 2px; }
.timeline { list-style: none; padding-left: 1rem; border-left: 2px solid #dee2e6; }
.timeline li { position: relative; padding: .25rem 0 .75rem .75rem; }
.timeline li::before { content: ""; position: absolute; left: -1.42rem; top: .55rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--app-primary-2); }
.timeline li.voided::before { background: #adb5bd; }
.clock-display { font-size: clamp(2.5rem, 10vw, 4.5rem); font-variant-numeric: tabular-nums; font-weight: 700; }
.clock-btn { min-height: 72px; font-size: 1.25rem; }

/* Tablas → tarjetas en teléfonos */
@media (max-width: 767.98px) {
  table.responsive-cards thead { display: none; }
  table.responsive-cards, table.responsive-cards tbody, table.responsive-cards tr, table.responsive-cards td { display: block; width: 100%; }
  table.responsive-cards tr { margin-bottom: .75rem; border: 1px solid #e3e7ee; border-radius: .5rem; background: #fff; padding: .25rem .5rem; }
  table.responsive-cards td { border: none; padding: .25rem 0; text-align: left !important; }
  table.responsive-cards td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; color: #6c757d; text-transform: uppercase; }
  .filters .collapse:not(.show) { display: none !important; }
}
@media print {
  .app-header, .app-sidebar, .btn, form.filters, footer { display: none !important; }
  .app-main { padding: 0; }
}