/* ── Bricolage Grotesque ──────────────────────────────────────────────────── */
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BarlowCondensed-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BarlowCondensed-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BarlowCondensed-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BarlowCondensed-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('/assets/fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Bungee'; src:url('/assets/fonts/Bungee-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Libre Baskerville'; src:url('/assets/fonts/LibreBaskerville-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Libre Baskerville'; src:url('/assets/fonts/LibreBaskerville-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ══════════════════════════════════════════════════════════════════════════
   ShepherdOS Design System — Clean Light / Indigo Primary
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colors */
  --bg-page:        #f8fafc;
  --bg-card:        #ffffff;
  --bg-sidebar:     #ffffff;
  --bg-header:      #ffffff;
  --border:         #e5e7eb;
  --text-primary:   #0f172a;
  --text-muted:     #6b7280;
  --primary:        #4f46e5;
  --primary-hover:  #4338ca;
  --primary-light:  #eef2ff;
  --primary-ring:   rgba(79,70,229,0.2);
  --destructive:    #ef4444;
  --warning:        #f59e0b;

  /* Alias de compatibilidad con app.css (namespace color-X).
     app.css usa variables con prefijo color; este tema usa prefijos bg y text.
     Sin estos alias, modales y tarjetas que solo estiliza app.css salen
     transparentes en el tema shepherdos (sobre todo en modo oscuro). */
  --color-surface:      var(--bg-card);
  --color-surface-alt:  var(--bg-page);
  --color-bg:           var(--bg-page);
  --color-text:         var(--text-primary);
  --color-muted:        var(--text-muted);
  --color-divider:      var(--border);
  --color-rule:         var(--border);
  --color-primary:      var(--primary);
  --color-primary-dark: var(--primary-hover);
  --color-primary-pale: var(--primary-light);
  --color-white:        #ffffff;
  --color-danger:       var(--destructive);

  /* Radius */
  --radius:         12px;
  --radius-sm:      8px;
  --radius-xs:      6px;
  --radius-badge:   999px;

  /* Shadows */
  --shadow:         0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08);

  /* Typography */
  --font-display: 'Bungee', sans-serif;
  --font-ui:      'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --font-body:    'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* KPI */
  --kpi-number-size:   2rem;
  --kpi-number-weight: 700;

  /* Bars */
  --bar-height:  8px;
  --radius-bar:  4px;
  --bar-track:   #f1f5f9;

  /* Badges */
  --badge-padding: 3px 10px;

  /* Table */
  --table-header-bg:   #f8fafc;
  --table-header-text: #6b7280;
  --table-row-alt:     #fafafa;

  /* Hero */
  --bg-hero:   linear-gradient(135deg, #4f46e5 0%, #0891b2 100%);
  --hero-text: #ffffff;
  --hero-sub:  rgba(255,255,255,0.75);
  --hero-icon: rgba(255,255,255,0.4);

  /* KPI icon backgrounds */
  --icon-bg-1: #4f46e5;
  --icon-bg-2: #0891b2;
  --icon-bg-3: #d97706;
  --icon-bg-4: #9333ea;
  --icon-radius: var(--radius-sm);

  /* Card */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
  --border-card:  1px solid var(--border);
  --radius-card:  var(--radius);

  /* Charts */
  --chart-1: #4f46e5;
  --chart-2: #0891b2;
  --chart-3: #d97706;
  --chart-4: #9333ea;
  --chart-5: #ef4444;

  /* Legacy compat */
  --accent:             var(--primary);
  --accent-2:           var(--primary-hover);
  --foreground:         var(--text-primary);
  --muted-foreground:   var(--text-muted);
  --background:         var(--bg-page);
  --card:               var(--bg-card);
  --card-foreground:    var(--text-primary);
  --sidebar:            var(--bg-sidebar);
  --sidebar-border:     var(--border);
  --sidebar-foreground: var(--text-primary);
  --primary-foreground: #ffffff;
  --secondary:          #0891b2;
  --secondary-foreground: #ffffff;
  --muted:              #f1f5f9;
  --ring:               var(--primary-ring);
  --input:              var(--border);
  --popover:            #ffffff;
  --popover-foreground: var(--text-primary);
}

/* ══ RESET ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background:  var(--bg-page);
  color:       var(--text-primary);
  font-family: var(--font-ui);
  font-size:   14px;
  line-height: 1.5;
  margin:      0;
  -webkit-font-smoothing: antialiased;
}

/* ══ APP SHELL ════════════════════════════════════════════════════════════ */
.app-shell {
  display:    flex;
  width:      100%;
  min-height: 100vh;
}

.main-panel {
  flex:       1;
  width:      0;
  min-width:  0;
  overflow-x: hidden;
  display:    flex;
  flex-direction: column;
}

/* ══ TOPBAR ═══════════════════════════════════════════════════════════════ */
.topbar {
  height:        56px;
  background:    var(--bg-header);
  border-bottom: 1px solid var(--border);
  display:       flex;
  align-items:   center;
  padding:       0 20px;
  gap:           16px;
  position:      sticky;
  top:           0;
  z-index:       100;
  flex-shrink:   0;
}

/* ══ MAIN CONTENT AREA ════════════════════════════════════════════════════ */
main.page, .page {
  flex:       1;
  padding:    24px;
  background: var(--bg-page);
}

/* ══ SIDEBAR ══════════════════════════════════════════════════════════════ */
#app-sidebar {
  width:        220px;
  flex-shrink:  0;
  background:   var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display:      flex;
  flex-direction: column;
  min-height:   100vh;
  position:     sticky;
  top:          0;
  align-self:   flex-start;
  height:       100vh;
}

/* ══ SECTION HEAD ═════════════════════════════════════════════════════════ */
.section-head {
  display:       flex;
  align-items:   baseline;
  gap:           10px;
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--font-display);
  font-size:   1.4rem;
  font-weight: 400;
  color:       var(--text-primary);
  margin:      0;
  line-height: 1.2;
}

.section-badge {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--text-muted);
}

.section-label {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--text-muted);
  margin-bottom:  12px;
}

/* ══ TOOLBAR ══════════════════════════════════════════════════════════════ */
.toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
  gap:             12px;
  flex-wrap:       wrap;
}

.toolbar-left  { flex: 1 1 auto; min-width: 0; }
.toolbar-right { flex: 0 0 auto; }

/* ══ CALENDAR FILTERS ═════════════════════════════════════════════════════ */
.calendar-filters {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px;
  align-items: center;
  margin-top:  12px;
}

/* ══ CARDS ════════════════════════════════════════════════════════════════ */
.card, .dashboard-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       20px;
  box-shadow:    var(--shadow);
}

.card-kicker {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--text-muted);
  margin-bottom:  4px;
}

.card-title {
  font-size:     16px;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 16px;
}

.note {
  font-size: 13px;
  color:     var(--text-muted);
  margin:    0;
}

/* ══ BUTTONS ══════════════════════════════════════════════════════════════ */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--primary);
  color:         #ffffff;
  border:        none;
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-size:     14px;
  font-weight:   600;
  padding:       9px 18px;
  cursor:        pointer;
  text-decoration: none;
  transition:    background 0.15s, opacity 0.15s;
  white-space:   nowrap;
}

.btn:hover { background: var(--primary-hover); text-decoration: none; color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }

.btn-light, .btn-outline {
  background:    #ffffff;
  color:         var(--text-primary);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-size:     14px;
  font-weight:   500;
  padding:       9px 18px;
  cursor:        pointer;
  text-decoration: none;
  transition:    background 0.15s;
  white-space:   nowrap;
}

.btn-light:hover, .btn-outline:hover { background: #f8fafc; }

.btn-inline {
  font-size: 13px;
  padding:   7px 14px;
}

.btn-small {
  font-size: 12px;
  padding:   5px 12px;
}

/* ══ INPUTS ═══════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control {
  background:    #ffffff;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-family:   var(--font-ui);
  font-size:     14px;
  padding:       8px 12px;
  width:         100%;
  transition:    border-color 0.15s, box-shadow 0.15s;
  outline:       none;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px var(--primary-ring);
}

.form-label {
  font-size:     13px;
  font-weight:   600;
  color:         var(--text-primary);
  display:       block;
  margin-bottom: 5px;
}

.form-group { margin-bottom: 16px; }
.form-group-full { grid-column: 1 / -1; }

.form-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   14px;
}

.form-check {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  cursor:      pointer;
}

/* ══ TABLES ═══════════════════════════════════════════════════════════════ */
.table {
  width:           100%;
  border-collapse: collapse;
}

.table th {
  background:     var(--table-header-bg);
  color:          var(--text-muted);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding:        10px 14px;
  text-align:     left;
  border-bottom:  1px solid var(--border);
  white-space:    nowrap;
}

.table td {
  padding:       12px 14px;
  font-size:     14px;
  color:         var(--text-primary);
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }
.table tr:hover td      { background: #fafafa; }

/* ══ BADGES ═══════════════════════════════════════════════════════════════ */
.badge, .status-badge {
  display:        inline-block;
  padding:        var(--badge-padding);
  border-radius:  var(--radius-badge);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space:    nowrap;
}

.badge-outline  { background: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border); }
.badge-fill     { background: var(--primary); color: #ffffff; }

.badge-visitor      { background: #f1f5f9; color: #374151; }
.badge-newbeliever  { background: #dcfce7; color: #166534; }
.badge-discipleship { background: #ede9fe; color: #6d28d9; }
.badge-server       { background: #fef3c7; color: #92400e; }
.badge-leader       { background: #dbeafe; color: #1e40af; }
.badge-pastor       { background: #fee2e2; color: #991b1b; }

/* ══ ALERTS ═══════════════════════════════════════════════════════════════ */
.alert {
  background:    #fef2f2;
  border:        1px solid #fecaca;
  border-radius: var(--radius-sm);
  color:         #991b1b;
  padding:       10px 14px;
  font-size:     14px;
  margin-bottom: 16px;
}

.alert-success {
  background:    #f0fdf4;
  border-color:  #bbf7d0;
  color:         #166534;
}

/* ══ MODAL ════════════════════════════════════════════════════════════════ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
}

.modal.is-open { display: flex; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(2px);
}

.modal-dialog {
  position:      relative;
  z-index:       1;
  background:    #ffffff;
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    0 20px 48px rgba(0,0,0,0.12);
  width:         100%;
  max-width:     640px;
}

.modal-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  padding:         20px 24px 16px;
  border-bottom:   1px solid var(--border);
}

.modal-kicker {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          var(--primary);
  margin-bottom:  2px;
}

.modal-title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--text-primary);
  margin:      0;
}

.modal-body { padding: 20px 24px; }

.modal-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
  margin-top:      20px;
  padding-top:     16px;
  border-top:      1px solid var(--border);
}

.modal-close {
  background:  transparent;
  border:      none;
  color:       var(--text-muted);
  font-size:   22px;
  cursor:      pointer;
  padding:     0 4px;
  line-height: 1;
  transition:  color 0.15s;
}

.modal-close:hover { color: var(--text-primary); }

/* ══ HERO BANNER ══════════════════════════════════════════════════════════ */
.hero-banner {
  background:      var(--bg-hero);
  border-radius:   var(--radius);
  padding:         32px 36px;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   24px;
  color:           #ffffff;
}

.hero-left  { flex: 1 1 auto; min-width: 0; }
.hero-right { flex: 0 0 auto; padding-left: 24px; color: var(--hero-icon); }

.hero-label {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color:          rgba(255,255,255,0.7);
  margin-bottom:  6px;
}

.hero-title {
  font-size:   1.6rem;
  font-weight: 800;
  color:       var(--hero-text);
  font-family: var(--font-display);
  margin-bottom: 4px;
  line-height: 1.2;
}

.hero-sub {
  font-size: 0.9rem;
  color:     var(--hero-sub);
}

/* ══ KPI CARDS ════════════════════════════════════════════════════════════ */
.kpi-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
  margin-bottom:         24px;
}

@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-icon {
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #ffffff;
  flex-shrink:     0;
}

.kpi-icon      { background: var(--icon-bg-1); }
.kpi-icon.c2   { background: var(--icon-bg-2); }
.kpi-icon.c3   { background: var(--icon-bg-3); }
.kpi-icon.c4   { background: var(--icon-bg-4); }

.kpi-label {
  font-size:   13px;
  color:       var(--text-muted);
  margin:      0 0 4px;
  line-height: 1.3;
}

.kpi-number {
  font-size:   var(--kpi-number-size);
  font-weight: var(--kpi-number-weight);
  color:       var(--text-primary);
  line-height: 1;
  min-height:  1em;
  display:     flex;
  align-items: center;
}

.kpi-sub {
  font-size:  12px;
  color:      var(--text-muted);
  margin-top: 6px;
}

.kpi-alert { color: #dc2626 !important; }

/* ══ SHIMMER ══════════════════════════════════════════════════════════════ */
@keyframes db-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.db-skel {
  display:          inline-block;
  border-radius:    4px;
  background:       linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size:  1200px 100%;
  animation:        db-shimmer 1.6s infinite linear;
}

/* ══ SPIRIT BARS ══════════════════════════════════════════════════════════ */
.spirit-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 12px;
}

.spirit-row:last-child { margin-bottom: 0; }

.spirit-name {
  width:       120px;
  font-size:   13px;
  color:       var(--text-primary);
  flex-shrink: 0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spirit-track {
  flex:          1;
  height:        var(--bar-height);
  border-radius: var(--radius-bar);
  background:    var(--bar-track);
  overflow:      hidden;
}

.spirit-fill {
  height:        var(--bar-height);
  border-radius: var(--radius-bar);
  min-width:     3%;
  transition:    width .5s ease;
}

.spirit-count {
  width:      50px;
  text-align: right;
  font-size:  12px;
  color:      var(--text-muted);
  flex-shrink: 0;
}

/* ══ MAIN GRID (dashboard) ════════════════════════════════════════════════ */
.main-grid {
  display:               grid;
  grid-template-columns: 65fr 35fr;
  gap:                   16px;
  width:                 100%;
}

@media (max-width: 768px) { .main-grid { grid-template-columns: 1fr; } }

.main-grid > * > .dashboard-card,
.main-grid > * > .card { margin-bottom: 16px; }
.main-grid > * > .dashboard-card:last-child,
.main-grid > * > .card:last-child { margin-bottom: 0; }

/* ══ DB STATES ════════════════════════════════════════════════════════════ */
.db-empty {
  font-size: 13px;
  color:     var(--text-muted);
  padding:   10px 0;
  margin:    0;
}

.db-error {
  font-size: 13px;
  color:     #dc2626;
  padding:   10px 0;
}

.db-view-all {
  display:        block;
  margin-top:     14px;
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--primary);
  font-weight:    700;
  text-decoration: none;
}

.db-view-all:hover { color: var(--primary-hover); }

.db-member-link {
  color:           var(--text-primary);
  font-weight:     600;
  text-decoration: none;
}

.db-member-link:hover { color: var(--primary); }

/* ══ FOLLOW-UP ITEMS ══════════════════════════════════════════════════════ */
.followup-item {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         10px 0;
  border-bottom:   1px solid var(--bar-track);
  gap:             10px;
}

.followup-item:last-child { border-bottom: none; }

.followup-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.followup-type {
  font-size:      11px;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-top:     2px;
}

.followup-overdue { color: #dc2626; font-weight: 700; }

/* ══ EVENT ITEMS ══════════════════════════════════════════════════════════ */
.event-item {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  padding:         10px 0;
  border-bottom:   1px solid var(--bar-track);
  gap:             10px;
}

.event-item:last-child { border-bottom: none; }
.event-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.event-date  { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ══ RECORDS TABLE (dashboard) ════════════════════════════════════════════ */
table.records-table {
  width:           100%;
  border-collapse: collapse;
}

table.records-table th {
  background:     var(--table-header-bg);
  color:          var(--text-muted);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding:        8px 12px;
  text-align:     left;
  border-bottom:  1px solid var(--border);
}

table.records-table td {
  padding:       10px 12px;
  font-size:     13px;
  border-bottom: 1px solid #f1f5f9;
  color:         var(--text-primary);
  vertical-align: middle;
}

table.records-table tr:last-child td  { border-bottom: none; }

/* ══ HEADINGS ═════════════════════════════════════════════════════════════ */
h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); margin: 0 0 8px; }
h4, h5, h6 { font-family: var(--font-ui); color: var(--text-primary); margin: 0 0 6px; }

/* ══ LINKS ════════════════════════════════════════════════════════════════ */
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: var(--font-mono); font-size: 0.85em; background: #f1f5f9; padding: 2px 5px; border-radius: 4px; }

/* ══ MISC ═════════════════════════════════════════════════════════════════ */
select.form-control option { background: #ffffff; color: var(--text-primary); }

.status-badge {
  display:        inline-block;
  padding:        3px 10px;
  border-radius:  var(--radius-badge);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  background:     var(--primary);
  color:          #ffffff;
  white-space:    nowrap;
}

/* ══ MOBILE ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #app-sidebar {
    position:  fixed !important;
    top:       0;
    left:      0;
    bottom:    0;
    z-index:   999;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    height:    100vh !important;
  }

  #app-sidebar.open { transform: translateX(0); }
  .main-panel { width: 100%; }

  .form-grid { grid-template-columns: 1fr; }
  .modal     { padding: 16px; }
}

/* ── Marca índigo en sidebar y topbar ──────────────────────────────
   sidebar.php y topbar.php traen el verde fijo para todos los temas;
   estas reglas lo sustituyen solo en el tema ShepherdOS. */
body.theme-shepherdos .topbar-search-input:focus { border-color: var(--primary); }
body.theme-shepherdos .sb-item.is-active { color: var(--primary); }
body.theme-shepherdos .sb-badge-super { background: var(--primary); }
body.theme-shepherdos .topbar-avatar,
body.theme-shepherdos .sb-brand-placeholder,
body.theme-shepherdos .user-avatar-sm {
  background: linear-gradient(135deg, #4f46e5, #0891b2);
}