/* ══════════════════════════════════════════════════════════════════
   HIPAY — SISTEMA DE DISEÑO PREMIUM v3
   Fuente única de verdad para TODA la app (7 páginas comparten este archivo).
   Filosofía: profundidad real con sombras suaves y color sólido — CERO
   degradados en botones, insignias, tarjetas o iconos. El degradado
   queda reservado únicamente para fondos ambientales muy sutiles.
   ══════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;
  /* ── Marca: violeta eléctrico + coral cálido (reemplaza el verde) ── */
  --brand-primary:#5b3df0;
  --brand-primary-mid:#7c5cff;
  --brand-primary-light:#efeaff;
  --brand-secondary:#0ea5c4;
  --brand-accent:#ff6b4a;
  --brand-accent-light:#ffe9e2;

  --grad-brand: linear-gradient(135deg, #7c5cff 0%, #5b3df0 60%, #4527c9 100%);
  --grad-accent: linear-gradient(135deg, #ff8a65 0%, #ff6b4a 70%, #ea4f30 100%);
  --grad-app-bg: radial-gradient(1200px 600px at 100% -10%, #efeaff 0%, transparent 60%),
                 radial-gradient(900px 500px at -10% 110%, #e2f7fb 0%, transparent 55%);

  --bg-app:#f6f5fb;
  --bg-sidebar:#fdfcff;
  --bg-sidebar-hover:var(--brand-primary-light);
  --bg-topbar:#ffffff;
  --bg-card:#ffffff;
  --bg-input:#ffffff;
  --bg-hover:#f4f2fb;

  --text-primary:#1c1830;
  --text-secondary:#6b6584;
  --text-sidebar:#6b6584;
  --text-sidebar-active:#1c1830;
  --text-muted:#9691ac;

  --sidebar-border:rgba(28,24,48,.08);
  --sidebar-scroll:rgba(28,24,48,.15);

  --border:#e9e6f5;
  --border-strong:#d8d3ec;
  --border-focus:#5b3df0;

  --c-success:#0f9d6e;      --c-success-bg:#e4f8ef;   --c-success-line:#a9ecce;
  --c-danger:#e0453b;       --c-danger-bg:#fde9e7;    --c-danger-line:#f5b8b0;
  --c-warning:#d97a06;      --c-warning-bg:#fef1de;   --c-warning-line:#f5cf98;
  --c-info:#0e7fd9;         --c-info-bg:#e4f2fd;      --c-info-line:#a9d8f7;
  --c-violet:#7c3ff0;       --c-violet-bg:#f0e9fe;    --c-violet-line:#cfb6fb;
  --c-neutral:#6b6584;      --c-neutral-bg:#eeecf7;   --c-neutral-line:#d8d3ec;
  --c-gold:#b5860a;         --c-gold-bg:#fdf3d9;      --c-gold-line:#f0deA0;

  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:26px; --radius-pill:999px;

  --shadow-1: 0 1px 2px rgba(28,24,48,.06);
  --shadow-card: 0 1px 2px rgba(28,24,48,.04), 0 4px 14px -4px rgba(28,24,48,.10);
  --shadow-card-hover: 0 2px 4px rgba(28,24,48,.05), 0 10px 26px -6px rgba(28,24,48,.16);
  --shadow-pop: 0 12px 32px -8px rgba(28,24,48,.22), 0 4px 10px -4px rgba(28,24,48,.12);
  --shadow-sidebar: 2px 0 18px -6px rgba(28,24,48,.10);
  --shadow-inset: inset 0 1px 2px rgba(28,24,48,.05);
  --shadow-btn: 0 1px 2px rgba(28,24,48,.06), 0 2px 8px -2px rgba(91,61,240,.28);

  --font:'Inter',system-ui,-apple-system,sans-serif;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px;
  /* alias de compatibilidad con nombres usados en páginas antiguas */
  --font-size-base:14px; --font-size-sm:12.5px; --font-size-lg:16px; --font-size-xl:20px; --font-size-2xl:28px;

  --sidebar-w:248px;
  --topbar-h:64px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --transition:160ms var(--ease);
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg-app:#0d1420; --bg-sidebar:#0a101a; --bg-sidebar-hover:#1c2940;
  --bg-topbar:#101828; --bg-card:#131e2f; --bg-input:#131e2f; --bg-hover:#1a2740;
  --border:#233248; --border-strong:#2f4260;
  --text-primary:#eef2f9; --text-secondary:#9aa8c0; --text-muted:#647089;
  --text-sidebar:rgba(238,242,249,.68); --text-sidebar-active:#ffffff;
  --sidebar-border:#1c2940; --sidebar-scroll:rgba(255,255,255,.12);
  --brand-primary-light:#1f2246; --brand-accent-light:#332019;
  --grad-app-bg: radial-gradient(1200px 600px at 100% -10%, #1d1a2c 0%, transparent 60%),
                 radial-gradient(900px 500px at -10% 110%, #142235 0%, transparent 55%);
  --c-success-bg:#0e2a20; --c-danger-bg:#331615; --c-warning-bg:#332006; --c-info-bg:#0f2236; --c-violet-bg:#281a42; --c-neutral-bg:#211a3d; --c-gold-bg:#2a2109;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px -4px rgba(0,0,0,.5);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,.35), 0 12px 30px -6px rgba(0,0,0,.6);
  --shadow-pop: 0 16px 40px -8px rgba(0,0,0,.65), 0 4px 14px -4px rgba(0,0,0,.4);
  --shadow-sidebar: 2px 0 20px -4px rgba(0,0,0,.5);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.3);
  --shadow-btn: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px -2px rgba(124,92,255,.4);
}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex-shrink:0}
.icon-sm{width:14px;height:14px}
.icon-md{width:18px;height:18px}
.icon-lg{width:24px;height:24px}

html,body{overflow-x:hidden;max-width:100%}
.no-scroll-x{overflow-x:hidden!important}
table{table-layout:auto}
.scroll-y-only{overflow-y:auto;overflow-x:hidden}
img,svg{max-width:100%}
* {scrollbar-width:none!important}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
*::-webkit-scrollbar-thumb{background:transparent!important}
*::-webkit-scrollbar-track{background:transparent!important}
*::-webkit-scrollbar-corner{background:transparent!important}

.insignia{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px 4px 8px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.1px;line-height:1.5;
  border:none;white-space:nowrap;
}
.insignia .icon{width:13px;height:13px}
.insignia-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

.insignia-success{background:var(--c-success-bg);color:var(--c-success)}
.insignia-danger{background:var(--c-danger-bg);color:var(--c-danger)}
.insignia-warning{background:var(--c-warning-bg);color:var(--c-warning)}
.insignia-info{background:var(--c-info-bg);color:var(--c-info)}
.insignia-violet{background:var(--c-violet-bg);color:var(--c-violet)}
.insignia-neutral{background:var(--c-neutral-bg);color:var(--c-neutral)}
.insignia-gold{background:var(--c-gold-bg);color:var(--c-gold)}

.insignia-solid{border:none;color:#fff;box-shadow:none}
.insignia-solid.insignia-success{background:#0f9d6e}
.insignia-solid.insignia-danger{background:#e0453b}
.insignia-solid.insignia-warning{background:#d97a06}
.insignia-solid.insignia-info{background:#0e7fd9}
.insignia-solid.insignia-violet{background:var(--brand-primary)}
.insignia-solid.insignia-gold{background:#b5860a}
.insignia-solid.insignia-neutral{background:#6b6584}

.status-badge,.badge,.mkt-channel-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:700;border:1.5px solid transparent;white-space:nowrap;
}
.status-badge.active,.status-badge.approved,.status-badge.paid,.badge-green{background:var(--c-success-bg);color:var(--c-success);border-color:var(--c-success-line)}
.status-badge.rejected,.status-badge.blocked,.status-badge.expired,.status-badge.failed,.badge-red{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger-line)}
.status-badge.pending,.status-badge.suspended,.badge-gray{background:var(--c-warning-bg);color:var(--c-warning);border-color:var(--c-warning-line)}
.status-badge.inactive,.status-badge.refunded{background:var(--c-neutral-bg);color:var(--c-neutral);border-color:var(--c-neutral-line)}
.badge-blue,.mkt-channel-badge.email{background:var(--c-info-bg);color:var(--c-info);border-color:var(--c-info-line)}
.badge-purple{background:var(--c-violet-bg);color:var(--c-violet);border-color:var(--c-violet-line)}
.mkt-channel-badge.whatsapp{background:var(--c-success-bg);color:var(--c-success);border-color:var(--c-success-line)}
.badge::before{display:none}

.card-premium,.section-card,.kpi-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:box-shadow .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease);
}
.card-premium:hover,.kpi-card:hover{border-color:var(--brand-primary-mid);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}

.kpi-card{position:relative;overflow:hidden;padding:18px 18px 16px}

.btn-primary{
  background:var(--brand-primary);
  color:#fff;border:none;box-shadow:var(--shadow-btn);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 2px 4px rgba(28,24,48,.08), 0 6px 16px -3px rgba(91,61,240,.4)}
.btn-primary:active{transform:translateY(0);filter:brightness(.96)}
.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-strong);box-shadow:var(--shadow-1)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--brand-primary);box-shadow:var(--shadow-card)}
.btn-danger{background:#e0453b;color:#fff;border:none;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px -2px rgba(224,69,59,.35)}
.btn-link{background:none;border:none;color:var(--brand-primary);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px}

.dt-icon-btn,.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
  cursor:pointer;transition:all .15s var(--ease);box-shadow:var(--shadow-1);
}
.dt-icon-btn:hover,.icon-btn:hover{background:var(--brand-primary-light);color:var(--brand-primary);border-color:var(--brand-primary);box-shadow:var(--shadow-card)}
.dt-icon-btn.danger:hover,.icon-btn.danger:hover{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger-line)}

.form-input,input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{
  font-weight:600!important; font-size:14.5px!important; box-shadow:var(--shadow-inset)!important;
}
.form-input:focus,input:focus{box-shadow:0 0 0 3px var(--brand-primary-light)!important}

.icon-badge{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--brand-primary);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 6px 16px -4px rgba(91,61,240,.35);
}
.icon-badge .icon{width:24px;height:24px}
.icon-badge.sm{width:38px;height:38px;border-radius:12px}
.icon-badge.sm .icon{width:18px;height:18px}
.icon-badge.tone-info{background:#0e7fd9;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 6px 16px -4px rgba(14,127,217,.35)}
.icon-badge.tone-success{background:#0f9d6e;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 6px 16px -4px rgba(15,157,110,.35)}
.icon-badge.tone-danger{background:#e0453b;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 6px 16px -4px rgba(224,69,59,.35)}
.icon-badge.tone-gold{background:#b5860a;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 6px 16px -4px rgba(181,134,10,.35)}
.icon-badge.tone-violet{background:#6d28d9;box-shadow:0 2px 4px rgba(0,0,0,.08), 0 6px 16px -4px rgba(109,40,217,.35)}
.icon-badge.tone-accent{background:var(--brand-accent)}

.plan-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 13px 5px 9px;
  border-radius:var(--radius-pill);font-weight:800;font-size:12px;letter-spacing:.2px;
  background:#f5d883;color:#8a5f00;border:none;box-shadow:0 1px 2px rgba(0,0,0,.08), 0 3px 8px -2px rgba(181,134,10,.3);
}
.plan-chip .icon{width:14px;height:14px}

.empty-state-row td, .empty-state{
  text-align:center;padding:34px 20px;color:var(--text-muted);font-size:13px;
}

#toast-container,.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--radius-md);
  background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-pop);
  font-size:13px;font-weight:600;color:var(--text-primary);min-width:220px;
  animation:toast-in .22s var(--ease);
}
.toast.success{border-color:var(--c-success);background:var(--c-success-bg)}
.toast.error{border-color:var(--c-danger);background:var(--c-danger-bg)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* (Antes había aquí una regla que anulaba TODAS las sombras del sistema con
   box-shadow:none!important — esa era la causa de que nada se viera con
   profundidad real sin importar qué sombra se definiera arriba. Se eliminó.) */