:root {
  --cl-blue: #004363;
  --cl-yellow: #eac124;
  --cl-white: #ffffff;
  --cl-black: #111111;
  --cl-page: #f5f7f9;
  --cl-border: #dbe2e8;
}

body {
  background: var(--cl-page);
  color: #1d2733;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-header {
  background: var(--cl-blue);
  color: var(--cl-white);
}

.app-header a,
.app-header .btn-link {
  color: var(--cl-white);
}

.brand-mark {
  font-weight: 700;
  letter-spacing: .01em;
}

.nav-pill {
  border-radius: 999px;
  padding: .35rem .7rem;
  text-decoration: none;
}

.nav-pill:hover,
.nav-pill:focus,
.nav-pill.active {
  background: rgba(255, 255, 255, .18);
  color: var(--cl-white);
}

.page-shell {
  max-width: 1120px;
}

.btn-primary {
  --bs-btn-bg: var(--cl-blue);
  --bs-btn-border-color: var(--cl-blue);
  --bs-btn-hover-bg: #00324a;
  --bs-btn-hover-border-color: #00324a;
}

.btn-warning {
  --bs-btn-bg: var(--cl-yellow);
  --bs-btn-border-color: var(--cl-yellow);
  --bs-btn-color: #1b1b1b;
  --bs-btn-hover-bg: #d5ad17;
  --bs-btn-hover-border-color: #d5ad17;
}

.status-badge {
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.15;
  padding: .28rem .55rem;
  white-space: nowrap;
}

.status-info {
  background: #e7f1ff;
  border-color: #9dc5ff;
  color: #084298;
}

.status-warning {
  background: #fff3cd;
  border-color: #ffda6a;
  color: #664d03;
}

.status-success {
  background: #d1e7dd;
  border-color: #8cc3a3;
  color: #0f5132;
}

.status-danger {
  background: #f8d7da;
  border-color: #f1aeb5;
  color: #842029;
}

.status-muted {
  background: #eef0f2;
  border-color: #c9ced4;
  color: #495057;
}

.metric {
  border-left: 4px solid var(--cl-blue);
}

.detail-label {
  color: #657180;
  display: block;
  font-size: .8rem;
  margin-bottom: .2rem;
}

.responsive-card-list {
  display: grid;
  gap: .75rem;
}

.signature-box {
  background: var(--cl-white);
  border: 2px dashed #8392a5;
  border-radius: .75rem;
  height: 260px;
  position: relative;
  touch-action: none;
}

.signature-box::before {
  color: #7b8794;
  content: "Firme dentro del recuadro";
  font-size: .95rem;
  left: 1rem;
  pointer-events: none;
  position: absolute;
  top: .75rem;
}

#signature-canvas {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.touch-action {
  min-height: 44px;
}

.technical-details summary {
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .desktop-table {
    display: none;
  }

  .mobile-full {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .mobile-list {
    display: none;
  }
}