/* ============================================================
   DietaMarket — Design System
   Basado en CasierApp (ALL_WORKING backup).
   Mobile-first, 375px base.
   ============================================================ */

/* ── Reset & Variables ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colores del sistema */
  --dm-bg:        #f8fafc;
  --dm-surface:   #ffffff;
  --dm-border:    #e2e8f0;
  --dm-text:      #0f172a;
  --dm-text-muted:#64748b;
  --dm-shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --dm-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04);
  --dm-radius:    12px;
  --dm-radius-sm: 8px;
  --dm-radius-lg: 16px;

  /* Colores por dieta */
  --dieta-deportista: #e11d48;
  --dieta-hipocalorica: #0ea5e9;
  --dieta-keto: #a855f7;
  --dieta-vegana: #22c55e;
  --dieta-mediterranea: #f97316;

  /* Tab bar */
  --tab-height: 64px;
  --tab-bg:     #ffffff;
  --tab-active: #0ea5e9;

  /* Tipografía */
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 16px;
}

html { font-size: var(--font-size-base); }

body {
  font-family:      var(--font-main);
  background-color: var(--dm-bg);
  color:            var(--dm-text);
  min-height:       100vh;
  padding-bottom:   calc(var(--tab-height) + 16px);
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ──────────────────────────────────────────────── */
.dm-container {
  max-width: 640px;
  margin:    0 auto;
  padding:   0 16px;
}

/* ── Header ──────────────────────────────────────────────── */
.dm-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  background:       var(--dm-surface);
  border-bottom:    1px solid var(--dm-border);
  padding:          12px 16px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  box-shadow:       var(--dm-shadow);
}

.dm-header__logo {
  font-size:   1.125rem;
  font-weight: 700;
  color:       var(--dm-text);
  text-decoration: none;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.dm-header__logo i   { color: #0ea5e9; }

/* FIX v16.8 / v16.9: icon.png diseñado para fondo oscuro.
   Se aplica a TODOS los contextos donde dm_icon_img() aparece sobre fondo claro:
   header principal, login, register, renovar-licencia, licencia-success.
   brightness(0) normaliza a negro → hue-rotate+saturate mapea al azul marca #0ea5e9. */
.dm-header__logo img,
.auth-logo-inner  img,
.ren-logo-inner   img,
.suc-logo         img {
  filter: brightness(0) saturate(100%)
          invert(57%) sepia(80%) saturate(500%)
          hue-rotate(163deg) brightness(103%);
}

.dm-header__actions { display: flex; gap: 8px; }

.dm-btn-icon {
  width:            40px;
  height:           40px;
  border-radius:    50%;
  border:           none;
  background:       transparent;
  color:            var(--dm-text-muted);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  font-size:        1rem;
  transition:       background .15s, color .15s;
  text-decoration:  none;
}
.dm-btn-icon:hover { background: var(--dm-bg); color: var(--dm-text); }

/* ── Diet Cards ──────────────────────────────────────────── */
.dietas-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
  padding:               16px 0;
}

@media (min-width: 480px) {
  .dietas-grid { grid-template-columns: 1fr 1fr; }
}

.dieta-card {
  background:    var(--dm-surface);
  border-radius: var(--dm-radius);
  border:        2px solid transparent;
  box-shadow:    var(--dm-shadow);
  cursor:        pointer;
  overflow:      hidden;
  transition:    transform .15s ease, box-shadow .15s ease, border-color .15s;
  text-decoration: none;
  display:       block;
  color:         inherit;
}

.dieta-card:hover,
.dieta-card:active {
  transform:   translateY(-2px);
  box-shadow:  var(--dm-shadow-md);
}

.dieta-card--active    { border-color: var(--dieta-color, #0ea5e9); }
.dieta-card__stripe    { height: 6px; background: var(--dieta-color, #64748b); }

.dieta-card__body {
  padding:     16px;
  display:     flex;
  align-items: flex-start;
  gap:         12px;
}

.dieta-card__icon {
  width:            44px;
  height:           44px;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        1.1rem;
  color:            #fff;
  flex-shrink:      0;
  background:       var(--dieta-color, #64748b);
}

.dieta-card__info     { flex: 1; min-width: 0; }
.dieta-card__nombre   { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.dieta-card__desc     { font-size: .78rem; color: var(--dm-text-muted); margin-top: 3px; line-height: 1.4; }

.dieta-card__footer {
  padding:         8px 16px 12px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.dieta-card__badge {
  font-size:     .7rem;
  font-weight:   600;
  padding:       3px 8px;
  border-radius: 999px;
  background:    color-mix(in srgb, var(--dieta-color, #64748b) 12%, transparent);
  color:         var(--dieta-color, #64748b);
}

.dieta-card__arrow { color: var(--dm-text-muted); font-size: .85rem; }

/* ── Tiers ───────────────────────────────────────────────── */
.tier-tabs {
  display: flex;
  gap:     8px;
  margin:  16px 0;
}

.tier-tab {
  flex:            1;
  padding:         10px 8px;
  border-radius:   var(--dm-radius-sm);
  border:          2px solid var(--dm-border);
  background:      var(--dm-surface);
  cursor:          pointer;
  text-align:      center;
  font-size:       .8rem;
  font-weight:     600;
  transition:      border-color .15s, background .15s;
}

.tier-tab--economico.tier-tab--active  { border-color:#22c55e; background:color-mix(in srgb,#22c55e 10%,#fff); color:#15803d; }
.tier-tab--intermedio.tier-tab--active { border-color:#0ea5e9; background:color-mix(in srgb,#0ea5e9 10%,#fff); color:#0369a1; }
.tier-tab--premium.tier-tab--active    { border-color:#f59e0b; background:color-mix(in srgb,#f59e0b 10%,#fff); color:#b45309; }

/* ── Horizonte Selector ──────────────────────────────────── */
.horizonte-chips {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
  margin:    12px 0;
}

.horizonte-chip {
  padding:       6px 14px;
  border-radius: 999px;
  border:        1.5px solid var(--dm-border);
  background:    var(--dm-surface);
  font-size:     .8rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    all .15s;
  color:         var(--dm-text-muted);
}

.horizonte-chip--active {
  border-color: #0ea5e9;
  background:   #0ea5e9;
  color:        #fff;
}

/* ── Section title ───────────────────────────────────────── */
.dm-section-title {
  font-size:    1rem;
  font-weight:  700;
  margin:       20px 0 12px;
  display:      flex;
  align-items:  center;
  gap:          8px;
}

.dm-section-title i { color: var(--dm-text-muted); }

/* ── Product list item ───────────────────────────────────── */
.producto-item {
  background:    var(--dm-surface);
  border-radius: var(--dm-radius-sm);
  padding:       12px 14px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  border:        1px solid var(--dm-border);
  margin-bottom: 8px;
}

.producto-item__icon {
  width:           36px;
  height:          36px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .9rem;
  background:      var(--dm-bg);
  flex-shrink:     0;
}

.producto-item__info   { flex: 1; min-width: 0; }
.producto-item__nombre { font-weight: 600; font-size: .88rem; }
.producto-item__detalle{ font-size: .75rem; color: var(--dm-text-muted); margin-top: 2px; }
.producto-item__precio { font-weight: 700; font-size: .9rem; white-space: nowrap; }

/* ── Selectable items — tarjeta completa activa/inactiva ─────── */
.producto-item--selectable {
  cursor:      pointer;
  transition:  background .2s, border-color .2s, color .2s, opacity .2s, transform .12s;
  user-select: none;
}

/* SELECCIONADO: tarjeta rellena con el color de la dieta */
.producto-item--selectable.selected {
  background:   var(--dieta-color, #0ea5e9);
  border-color: var(--dieta-color, #0ea5e9);
}
.producto-item--selectable.selected .producto-item__nombre {
  color:       #fff;
  font-weight: 700;
}
.producto-item--selectable.selected .producto-item__detalle {
  color: rgba(255,255,255,.72);
}
.producto-item--selectable.selected .producto-item__icon {
  background: rgba(255,255,255,.22);
  color:      #fff;
}
.producto-item--selectable.selected .producto-item__precio-val {
  color:       #fff;
  font-weight: 800;
}
.producto-item--selectable.selected .producto-item__sin-precio {
  color:     rgba(255,255,255,.65);
  font-size: .75rem;
}

/* NO SELECCIONADO: se funde con el fondo de la página */
.producto-item--selectable:not(.selected) {
  background:   var(--dm-bg);
  border-color: transparent;
  opacity:      0.45;
}
/* Hover en no seleccionado: hint de que se puede activar */
.producto-item--selectable:not(.selected):hover {
  opacity:      0.75;
  border-color: var(--dieta-color, #0ea5e9);
  transform:    translateY(-1px);
}

/* Contador de productos por momento */
.dm-momento-count {
  margin-left:   auto;
  font-size:     .72rem;
  font-weight:   600;
  background:    var(--dm-bg);
  color:         var(--dm-text-muted);
  border-radius: 999px;
  padding:       2px 8px;
  border:        1px solid var(--dm-border);
}

/* Boton pequeño (para tarjetas de mis-planes) */
.dm-btn--sm {
  padding:   6px 12px;
  font-size: .78rem;
  min-height: 34px;
}

/* ── Filtro por momento del día ─────────────────────────────── */
.dm-filtro-chips {
  display:    flex;
  gap:        6px;
  flex-wrap:  wrap;
  margin:     4px 0 16px;
  padding:    2px 0;
}

.dm-filtro-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 12px;
  border-radius: 999px;
  border:        1.5px solid var(--dm-border);
  background:    var(--dm-surface);
  color:         var(--dm-text-muted);
  font-size:     .78rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s, color .15s, border-color .15s, transform .1s;
  white-space:   nowrap;
}
.dm-filtro-chip:hover {
  border-color: var(--mc, var(--dm-text-muted));
  color:        var(--mc, var(--dm-text));
  transform:    translateY(-1px);
}
.dm-filtro-chip__count {
  background:    rgba(0,0,0,.12);
  border-radius: 999px;
  padding:       1px 6px;
  font-size:     .7rem;
}
.dm-filtro-chip--active .dm-filtro-chip__count {
  background: rgba(255,255,255,.25);
}

/* ── Secciones por momento del día ───────────────────────────── */
.dm-momento-section {
  margin-bottom: 8px;
}

.dm-momento-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         9px 14px;
  border-radius:   var(--dm-radius-sm);
  background:      color-mix(in srgb, var(--mc, #94a3b8) 12%, #fff);
  border-left:     4px solid var(--mc, #94a3b8);
  margin:          14px 0 6px;
  cursor:          pointer;
  user-select:     none;
}
.dm-momento-header:hover { opacity: .88; }

.dm-momento-header__icon {
  width:           32px;
  height:          32px;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--mc, #94a3b8);
  color:           #fff;
  font-size:       .9rem;
  flex-shrink:     0;
}

.dm-momento-header__label {
  font-weight:  700;
  font-size:    .95rem;
  color:        var(--mc, #334155);
  flex:         1;
}

.dm-momento-header__count {
  font-size:     .72rem;
  font-weight:   600;
  color:         var(--mc, #64748b);
  background:    color-mix(in srgb, var(--mc, #94a3b8) 15%, #fff);
  border-radius: 999px;
  padding:       2px 8px;
  border:        1px solid color-mix(in srgb, var(--mc, #94a3b8) 30%, transparent);
}

.dm-momento-header__sel {
  font-size:   .68rem;
  font-weight: 600;
  color:       var(--mc, #94a3b8);
  opacity:     .7;
  white-space: nowrap;
}

.dm-momento-header__toggle {
  margin-left:  auto;
  font-size:    .75rem;
  color:        var(--mc, #94a3b8);
  opacity:      .7;
  transition:   transform .2s ease;
  flex-shrink:  0;
}

/* Sección colapsada */
.dm-momento-section--collapsed .dm-momento-items {
  display: none;
}
.dm-momento-section--collapsed .dm-momento-header__toggle {
  transform: rotate(-90deg);
}
.dm-momento-section--collapsed .dm-momento-header {
  opacity: .7;
}

/* ── Nav lateral flotante (momentos) ────────────────────────── */
.dm-sidenav {
  position:       fixed;
  right:          8px;
  top:            50%;
  transform:      translateY(-50%);
  z-index:        99;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding:        10px 7px;
  background:     rgba(255,255,255,.9);
  border-radius:  999px;
  box-shadow:     0 2px 10px rgba(0,0,0,.14);
  transition:     opacity .2s;
}
.dm-sidenav:empty { display: none; }

.dm-sidenav__dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  display:       block;
  text-decoration: none;
  opacity:       .35;
  transition:    opacity .15s, transform .15s, box-shadow .15s;
  flex-shrink:   0;
  cursor:        pointer;
  border:        none;
}
.dm-sidenav__dot:hover {
  opacity:   .8;
  transform: scale(1.35);
}
.dm-sidenav__dot--active {
  opacity:    1;
  transform:  scale(1.2);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--dot-color, #64748b);
}

.dm-momento-items {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Primer y último ítem con bordes redondeados en bloque */
.dm-momento-items .producto-item:first-child {
  border-radius: var(--dm-radius-sm) var(--dm-radius-sm) 0 0;
}
.dm-momento-items .producto-item:last-child {
  border-radius: 0 0 var(--dm-radius-sm) var(--dm-radius-sm);
  border-bottom: 1px solid var(--dm-border);
}
.dm-momento-items .producto-item:only-child {
  border-radius: var(--dm-radius-sm);
}
.dm-momento-items .producto-item {
  border-bottom: none;
  border-radius: 0;
  margin-bottom: 0;
  border:        1px solid var(--dm-border);
  border-top:    none;
}
.dm-momento-items .producto-item:first-child {
  border-top: 1px solid var(--dm-border);
}

/* ── Ahorro banner ─────────────────────────────────────────── */
.dm-ahorro-banner {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 14px;
  border-radius:   var(--dm-radius-sm);
  font-size:       .82rem;
  font-weight:     500;
  margin:          0 0 12px;
  animation:       fadeInUp .2s ease;
}
.dm-ahorro-banner i { font-size: 1.1rem; flex-shrink: 0; }
.dm-ahorro-banner strong { font-weight: 800; }
.dm-ahorro-banner--green { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.dm-ahorro-banner--blue  { background:#f0f9ff; color:#0369a1; border:1px solid #bae6fd; }
.dm-ahorro-banner--amber { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }

.dm-ahorro-link {
  background:    none;
  border:        none;
  padding:       0;
  font:          inherit;
  font-weight:   700;
  cursor:        pointer;
  text-decoration: underline;
  color:         inherit;
}
.dm-ahorro-link:hover { opacity: .75; }

/* ── Nutrición strip ─────────────────────────────────────────── */
.dm-nutricion-strip {
  background:    var(--dm-surface);
  border-radius: var(--dm-radius);
  border:        1px solid var(--dm-border);
  padding:       14px 14px 10px;
  margin:        12px 0;
  animation:     fadeInUp .2s ease;
}
.dm-nutricion-strip__title {
  font-size:    .78rem;
  font-weight:  700;
  color:        var(--dm-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
  display:      flex;
  align-items:  center;
  gap:          6px;
}
.dm-nutricion-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   8px;
}
@media (max-width: 380px) {
  .dm-nutricion-grid { grid-template-columns: repeat(2, 1fr); }
}
.dm-macro-chip {
  background:    var(--dm-bg);
  border-radius: 8px;
  padding:       8px 8px 6px;
  display:       flex;
  flex-direction: column;
  gap:           3px;
}
.dm-macro-chip__header {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.dm-macro-chip__header i { font-size: .75rem; }
.dm-macro-chip__label {
  font-size:  .68rem;
  color:      var(--dm-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.dm-macro-chip__value {
  font-size:   .88rem;
  font-weight: 800;
  color:       var(--dm-text);
  line-height: 1.1;
}
.dm-macro-bar {
  height:        4px;
  background:    var(--dm-border);
  border-radius: 999px;
  overflow:      hidden;
  margin-top:    2px;
}
.dm-macro-bar__fill {
  height:        100%;
  border-radius: 999px;
  transition:    width .4s ease;
}
.dm-macro-pct {
  font-size: .63rem;
  color:     var(--dm-text-muted);
}

/* ── Total box ───────────────────────────────────────────── */
.dm-total-box {
  background:    var(--dm-surface);
  border-radius: var(--dm-radius);
  border:        2px solid var(--dm-border);
  padding:       16px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin:        16px 0;
  box-shadow:    var(--dm-shadow);
}

.dm-total-box__label   { font-size: .85rem; color: var(--dm-text-muted); }
.dm-total-box__amount  { font-size: 1.5rem; font-weight: 800; }

/* ── Alert / Flash ───────────────────────────────────────── */
.dm-alert {
  border-radius: var(--dm-radius-sm);
  padding:       12px 14px;
  font-size:     .85rem;
  margin:        12px 0;
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
}

.dm-alert--success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.dm-alert--error   { background:#fff1f2; color:#be123c; border:1px solid #fecdd3; }
.dm-alert--warning { background:#fffbeb; color:#b45309; border:1px solid #fde68a; }
.dm-alert--info    { background:#f0f9ff; color:#0369a1; border:1px solid #bae6fd; }

/* ── Button ──────────────────────────────────────────────── */
.dm-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 20px;
  border-radius:   var(--dm-radius-sm);
  border:          none;
  font-size:       .9rem;
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
  transition:      opacity .15s, transform .1s;
  min-height:      48px;  /* accesibilidad táctil */
}

.dm-btn:active    { transform: scale(.98); }
.dm-btn--primary  { background: #0ea5e9; color: #fff; }
.dm-btn--primary:hover  { opacity: .9; color: #fff; }
.dm-btn--outline  { background: transparent; border: 1.5px solid var(--dm-border); color: var(--dm-text); }
.dm-btn--outline:hover  { background: var(--dm-bg); }
.dm-btn--full     { width: 100%; }

.dm-btn--deportista   { background: var(--dieta-deportista);  color:#fff; }
.dm-btn--hipocalorica { background: var(--dieta-hipocalorica);color:#fff; }
.dm-btn--keto         { background: var(--dieta-keto);        color:#fff; }
.dm-btn--vegana       { background: var(--dieta-vegana);      color:#fff; }
.dm-btn--mediterranea { background: var(--dieta-mediterranea);color:#fff; }

.dm-btn--whatsapp  { background: #25D366; color:#fff; }
.dm-btn--whatsapp:hover  { background: #1ebe57; color:#fff; }
.dm-btn--share     { background: var(--dm-surface); border:1.5px solid var(--dm-border); color:var(--dm-text); }
.dm-btn--share:hover { background: var(--dm-bg); }

/* Boton Imprimir — reemplaza Compartir, uso distinto a WhatsApp */
.dm-btn--imprimir  { background: var(--dm-surface); border:1.5px solid var(--dm-border); color:var(--dm-text); }
.dm-btn--imprimir:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ── Bloque info unificado (total + nutrición) ─────────────────────── */
.dm-info-bloque {
  background:    var(--dm-surface);
  border-radius: var(--dm-radius);
  border:        1px solid var(--dm-border);
  padding:       12px 14px;
  margin:        12px 0;
  animation:     fadeInUp .2s ease;
}

.dm-info-bloque__header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             8px;
  margin-bottom:   10px;
}

.dm-info-bloque__meta {
  font-size:  .78rem;
  color:      var(--dm-text-muted);
  font-weight: 500;
}

.dm-info-bloque__total {
  font-size:   1.35rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Grid de macros dentro del bloque — etiquetas cortas */
.dm-info-nutri {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   6px;
  border-top:            1px solid var(--dm-border);
  padding-top:           10px;
}
@media (max-width: 380px) {
  .dm-info-nutri { grid-template-columns: repeat(2, 1fr); }
}

/* CTA bar — dos botones en una sola fila */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     8px;
}
.cta-grid .dm-btn { min-height: 48px; font-size: .88rem; padding: 10px 12px; }

@keyframes fadeInUp {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Loading skeleton ────────────────────────────────────── */
.dm-skeleton {
  background:      linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation:       skeleton-wave 1.4s infinite;
  border-radius:   var(--dm-radius-sm);
}

@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Bottom navigation ───────────────────────────────────── */
.dm-nav {
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  height:           var(--tab-height);
  background:       var(--tab-bg);
  border-top:       1px solid var(--dm-border);
  display:          flex;
  z-index:          200;
  box-shadow:       0 -2px 8px rgba(0,0,0,.06);
}

.dm-nav__item {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              3px;
  text-decoration:  none;
  color:            var(--dm-text-muted);
  font-size:        .65rem;
  font-weight:      600;
  min-height:       48px;  /* área táctil */
  transition:       color .15s;
  cursor:           pointer;
}

.dm-nav__item i       { font-size: 1.1rem; }
.dm-nav__item--active { color: var(--tab-active); }
.dm-nav__item:hover   { color: var(--tab-active); }

/* ── Page header ─────────────────────────────────────────── */
.dm-page-header {
  padding:    20px 0 12px;
}

.dm-page-header__title    { font-size: 1.25rem; font-weight: 800; }
.dm-page-header__subtitle { font-size: .85rem; color: var(--dm-text-muted); margin-top: 4px; }

/* ── Spinner ─────────────────────────────────────────────── */
.dm-spinner {
  width:  36px; height: 36px;
  border: 3px solid var(--dm-border);
  border-top-color: #0ea5e9;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 32px auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────── */
.dm-empty {
  text-align: center;
  padding:    48px 16px;
  color:      var(--dm-text-muted);
}

.dm-empty i      { font-size: 2.5rem; margin-bottom: 12px; display: block; }
.dm-empty p      { font-size: .9rem; }
.dm-empty strong { color: var(--dm-text); }

/* ── Utilities ───────────────────────────────────────────── */
.text-muted   { color: var(--dm-text-muted); }
.text-sm      { font-size: .85rem; }
.text-xs      { font-size: .75rem; }
.fw-bold      { font-weight: 700; }
.mt-1         { margin-top: 4px; }
.mt-2         { margin-top: 8px; }
.mt-3         { margin-top: 12px; }
.mt-4         { margin-top: 16px; }
.mb-3         { margin-bottom: 12px; }
.mb-4         { margin-bottom: 16px; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-2        { gap: 8px; }
.gap-3        { gap: 12px; }
.hidden       { display: none !important; }