/* =====================================================================
   PayPymes ERP V7 — paypymes.css
   Design System SaaS Premium 2026 (Stripe · Linear · Vercel · Notion)
   Compatible con Bootstrap 5.3. Todas las clases con prefijo .pp-*
   Variables --pp-*. Sin colores hex hardcodeados fuera de variables.
   ===================================================================== */

/* ──────────────────────────────────────────────────────────────
   1. RESET + TIPOGRAFÍA
   ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

* { box-sizing: border-box; }

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv01","cv11";
  letter-spacing: -0.005em;
}

body {
  font-family: 'Inter', 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--pp-bg);
  color: var(--pp-text);
  min-height: 100vh;
  margin: 0;
  transition: background .25s ease, color .25s ease;
}

::selection { background: rgba(var(--pp-primary-rgb), .22); color: inherit; }

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.5); background-clip: padding-box; }

/* ──────────────────────────────────────────────────────────────
   2. TOKENS DE DISEÑO
   ────────────────────────────────────────────────────────────── */
:root {
  /* Colores base — gradiente "azul" por defecto */
  --pp-primary: #4F46E5;
  --pp-primary-rgb: 79, 70, 229;
  --pp-secondary: #7C3AED;
  --pp-secondary-rgb: 124, 58, 237;

  /* Marca */
  --pp-success: #10B981;
  --pp-success-rgb: 16, 185, 129;
  --pp-warning: #F59E0B;
  --pp-warning-rgb: 245, 158, 11;
  --pp-danger:  #EF4444;
  --pp-danger-rgb: 239, 68, 68;
  --pp-info:    #3B82F6;
  --pp-info-rgb: 59, 130, 246;

  /* Light mode */
  --pp-bg:        #F6F7FB;
  --pp-bg-2:      #EEF1F8;
  --pp-card:      #FFFFFF;
  --pp-card-2:    #F9FAFC;
  --pp-text:      #0F172A;
  --pp-text-2:    #1E293B;
  --pp-text-muted:#64748B;
  --pp-border:    #E5E7EB;
  --pp-border-2:  #EEF2F7;

  --pp-sidebar-bg:    #0B0A1E;
  --pp-sidebar-text:  rgba(255,255,255,.78);
  --pp-sidebar-muted: rgba(148,163,184,.55);
  --pp-topbar-bg:     rgba(255,255,255,.72);
  --pp-topbar-border: rgba(15,23,42,.08);

  /* Radius */
  --pp-r-xs: 6px;
  --pp-r-sm: 10px;
  --pp-r-md: 14px;
  --pp-r-lg: 18px;
  --pp-r-xl: 24px;
  --pp-r-pill: 999px;

  /* Sombras */
  --pp-sh-xs: 0 1px 2px rgba(15,23,42,.04);
  --pp-sh-sm: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --pp-sh-md: 0 8px 24px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
  --pp-sh-lg: 0 24px 48px -16px rgba(15,23,42,.20), 0 8px 16px -8px rgba(15,23,42,.08);
  --pp-sh-xl: 0 40px 80px -20px rgba(15,23,42,.25), 0 16px 32px -16px rgba(15,23,42,.12);
  --pp-sh-brand: 0 8px 28px -6px rgba(var(--pp-primary-rgb), .45);

  /* Ring */
  --pp-ring: 0 0 0 4px rgba(var(--pp-primary-rgb), .14);

  /* Transiciones */
  --pp-ease: cubic-bezier(.22,1,.36,1);
  --pp-ease-snappy: cubic-bezier(.16,1,.3,1);
  --pp-dur-fast: 140ms;
  --pp-dur: 220ms;
  --pp-dur-slow: 380ms;

  /* Glass */
  --pp-glass-bg: rgba(255,255,255,.72);
  --pp-glass-border: rgba(15,23,42,.06);
  --pp-glass-blur: saturate(180%) blur(18px);

  /* Tipografía */
  --pp-font: 'Inter', 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pp-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Gradiente principal (cambia con data-pp-grad) */
  --pp-grad: linear-gradient(135deg, var(--pp-primary), var(--pp-secondary));
  --pp-grad-soft: linear-gradient(135deg,
                  rgba(var(--pp-primary-rgb),.12),
                  rgba(var(--pp-secondary-rgb),.08));

  /* Layout */
  --pp-sidebar-w: 260px;
  --pp-sidebar-w-compact: 76px;
  --pp-topbar-h: 64px;
}

/* ──────────────────────────────────────────────────────────────
   3. GRADIENTES POR ATRIBUTO
   ────────────────────────────────────────────────────────────── */
[data-pp-grad="azul"]    { --pp-primary: #4F46E5; --pp-primary-rgb:79,70,229;   --pp-secondary: #7C3AED; --pp-secondary-rgb:124,58,237; }
[data-pp-grad="purple"]  { --pp-primary: #8B5CF6; --pp-primary-rgb:139,92,246;  --pp-secondary: #EC4899; --pp-secondary-rgb:236,72,153; }
[data-pp-grad="naranja"] { --pp-primary: #F97316; --pp-primary-rgb:249,115,22;  --pp-secondary: #EAB308; --pp-secondary-rgb:234,179,8;  }
[data-pp-grad="verde"]   { --pp-primary: #10B981; --pp-primary-rgb:16,185,129;  --pp-secondary: #059669; --pp-secondary-rgb:5,150,105;  }
[data-pp-grad="rojo"]    { --pp-primary: #EF4444; --pp-primary-rgb:239,68,68;   --pp-secondary: #DC2626; --pp-secondary-rgb:220,38,38;  }
[data-pp-grad="negro"]   { --pp-primary: #1F2937; --pp-primary-rgb:31,41,55;    --pp-secondary: #4B5563; --pp-secondary-rgb:75,85,99;   }
[data-pp-grad="rosa"]    { --pp-primary: #EC4899; --pp-primary-rgb:236,72,153;  --pp-secondary: #F472B6; --pp-secondary-rgb:244,114,182; }
[data-pp-grad="cian"]    { --pp-primary: #06B6D4; --pp-primary-rgb:6,182,212;   --pp-secondary: #0EA5E9; --pp-secondary-rgb:14,165,233; }

/* ──────────────────────────────────────────────────────────────
   4. DARK MODE
   ────────────────────────────────────────────────────────────── */
[data-pp-dark="1"], .pp-dark {
  --pp-bg:        #0B0A14;
  --pp-bg-2:      #11101D;
  --pp-card:      #161525;
  --pp-card-2:    #1B1A2C;
  --pp-text:      #E8E6FF;
  --pp-text-2:    #C7C5FF;
  --pp-text-muted:#9CA3AF;
  --pp-border:    rgba(255,255,255,.08);
  --pp-border-2:  rgba(255,255,255,.05);

  --pp-sidebar-bg:    #060512;
  --pp-topbar-bg:     rgba(22,21,37,.65);
  --pp-topbar-border: rgba(255,255,255,.06);

  --pp-glass-bg: rgba(22,21,37,.65);
  --pp-glass-border: rgba(255,255,255,.06);

  --pp-sh-md: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --pp-sh-lg: 0 24px 48px -16px rgba(0,0,0,.65), 0 8px 16px -8px rgba(0,0,0,.4);
}

/* ──────────────────────────────────────────────────────────────
   5. LAYOUT GLOBAL — Flexbox con `order` para posición sidebar
   ────────────────────────────────────────────────────────────── */
.pp-app {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  width: 100%;
}

/* Posicionamiento por `order` (más confiable que row-reverse) */
.pp-sidebar { order: 1; }
.pp-main    { order: 2; }
.pp-app[data-pp-pos="right"] .pp-sidebar { order: 2; }
.pp-app[data-pp-pos="right"] .pp-main    { order: 1; }

.pp-sidebar {
  width: var(--pp-sidebar-w);
  flex-shrink: 0;
  transition: width var(--pp-dur) var(--pp-ease);
}
.pp-app[data-pp-sidebar-size="compacta"] .pp-sidebar { width: var(--pp-sidebar-w-compact); }

.pp-app[data-pp-pos="right"] .pp-sidebar { border-right: none; border-left: 1px solid rgba(255,255,255,.06); }

.pp-main {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  width: 100%;
}
.pp-content { flex: 1; padding: 28px clamp(16px, 3vw, 36px); width: 100%; }

/* ──────────────────────────────────────────────────────────────
   6. SIDEBAR
   ────────────────────────────────────────────────────────────── */
.pp-sidebar {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--pp-primary-rgb),.22) 0%, transparent 55%),
    radial-gradient(80% 40% at 100% 100%, rgba(var(--pp-secondary-rgb),.18) 0%, transparent 60%),
    var(--pp-sidebar-bg);
  color: var(--pp-sidebar-text);
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 50;
  transition: width var(--pp-dur) var(--pp-ease);
}

/* Sidebar con gradiente custom desde modal (sobreescribe el default) */
.pp-app[data-pp-sidebar-custom="1"] .pp-sidebar {
  background:
    linear-gradient(180deg, var(--pp-sidebar-c1, #0B0A1E) 0%, var(--pp-sidebar-c2, #1E1B4B) 100%);
}

/* Glass sidebar style */
.pp-app[data-pp-sidebar-style="glass"] .pp-sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(11,10,30,.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.pp-sidebar-header {
  padding: 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  min-height: 142px;
  overflow: visible;
}
.pp-sidebar-header::after {
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(var(--pp-primary-rgb),.5), transparent);
}
.pp-sidebar-logo-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 100%;
  text-decoration: none;
  padding: 8px;
  border-radius: var(--pp-r-md);
  transition: background var(--pp-dur) var(--pp-ease);
  position: relative;
  z-index: 1;
}
/* Glow ambiental detrás del logo */
.pp-sidebar-logo-link::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 50% 50%,
      rgba(var(--pp-primary-rgb),.45) 0%,
      rgba(var(--pp-secondary-rgb),.28) 35%,
      rgba(var(--pp-primary-rgb),.10) 60%,
      transparent 80%);
  filter: blur(18px);
  opacity: .85;
  pointer-events: none;
  animation: pp-logo-pulse 4s ease-in-out infinite;
}
@keyframes pp-logo-pulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}
.pp-sidebar-logo-link:hover { background: rgba(255,255,255,.04); }
.pp-sidebar-logo-link:hover::before { opacity: 1; }

.pp-sidebar-logo-img {
  max-width: 100%;
  max-height: 95px;              /* +30% vs 73px anterior */
  width: auto; height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 8px  rgba(var(--pp-primary-rgb),.45))
    drop-shadow(0 4px 14px rgba(var(--pp-secondary-rgb),.35))
    drop-shadow(0 8px 20px rgba(0,0,0,.35));
  transition: transform var(--pp-dur) var(--pp-ease), filter var(--pp-dur) var(--pp-ease);
}
.pp-sidebar-logo-link:hover .pp-sidebar-logo-img {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 12px rgba(var(--pp-primary-rgb),.65))
    drop-shadow(0 6px 18px rgba(var(--pp-secondary-rgb),.45))
    drop-shadow(0 10px 24px rgba(0,0,0,.4));
}

.pp-sidebar-logo-text {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, #C7C5FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.pp-app[data-pp-sidebar-size="compacta"] .pp-sidebar-logo-img { max-height: 60px; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-sidebar-header { min-height: 88px; padding: 14px 4px; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-sidebar-logo-text { display: none; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-label,
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-item-text,
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-badge,
.pp-app[data-pp-sidebar-size="compacta"] .pp-sidebar-user-info { display: none; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-item { justify-content: center; padding: 12px; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-item i { margin: 0; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-sidebar-user { justify-content: center; padding: 14px 8px; }

.pp-sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 10px 20px;
  /* Ocultar scrollbar visualmente — sigue funcionando con rueda/touch */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;          /* IE/Edge legacy */
}
.pp-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari */
.pp-nav-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 18px 12px 6px;
  color: var(--pp-sidebar-muted);
}
.pp-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--pp-r-sm);
  color: var(--pp-sidebar-text);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  margin: 2px 0;
  transition:
    background var(--pp-dur) var(--pp-ease),
    color var(--pp-dur) var(--pp-ease),
    box-shadow var(--pp-dur) var(--pp-ease),
    transform var(--pp-dur-fast) var(--pp-ease);
  position: relative;
}
.pp-nav-item i { width: 18px; text-align: center; font-size: 15px; transition: transform var(--pp-dur) var(--pp-ease); }
.pp-nav-item:hover { background: rgba(255,255,255,.045); color: #fff; }
.pp-nav-item:hover i { transform: scale(1.1); color: #C4B5FD; }
.pp-nav-item.active {
  background: linear-gradient(135deg, rgba(var(--pp-primary-rgb),.32), rgba(var(--pp-secondary-rgb),.18));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px -10px rgba(var(--pp-primary-rgb),.55);
}
.pp-nav-item.active::before {
  content:""; position:absolute; left:-10px; top:25%; bottom:25%;
  width: 3px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #A78BFA, #6366F1);
  box-shadow: 0 0 12px rgba(167,139,250,.6);
}
.pp-nav-badge {
  margin-left: auto;
  background: linear-gradient(135deg, var(--pp-danger), #DC2626);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--pp-r-pill);
  box-shadow: 0 4px 12px -2px rgba(239,68,68,.5);
}

.pp-sidebar-user {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  display: flex; align-items: center; gap: 10px;
}
.pp-avatar {
  width: 38px; height: 38px;
  border-radius: var(--pp-r-sm);
  background: var(--pp-grad);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: var(--pp-sh-brand), inset 0 1px 0 rgba(255,255,255,.18);
  flex-shrink: 0;
  overflow: hidden;
}
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-sidebar-user-info { flex: 1; min-width: 0; }
.pp-sidebar-user-info .name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sidebar-user-info .role { font-size: 11px; color: var(--pp-sidebar-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ──────────────────────────────────────────────────────────────
   7. TOPBAR
   ────────────────────────────────────────────────────────────── */
.pp-topbar {
  height: var(--pp-topbar-h);
  background: var(--pp-topbar-bg);
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border-bottom: 1px solid var(--pp-topbar-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 28px);
  position: sticky; top: 0; z-index: 40;
}
.pp-app[data-pp-topbar-style="solid"] .pp-topbar {
  background: var(--pp-card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.pp-topbar-left, .pp-topbar-right { display: flex; align-items: center; gap: 10px; }

.pp-page-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--pp-text);
}
.pp-page-title i {
  font-size: 18px;
  background: var(--pp-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pp-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(241,245,249,.6);
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-r-md);
  transition: all var(--pp-dur) var(--pp-ease);
  min-width: 220px;
}
[data-pp-dark="1"] .pp-search { background: rgba(255,255,255,.04); }
.pp-search:focus-within {
  border-color: rgba(var(--pp-primary-rgb),.5);
  box-shadow: var(--pp-ring);
  background: var(--pp-card);
}
.pp-search i { color: var(--pp-text-muted); font-size: 14px; }
.pp-search input {
  border: none; background: none; outline: none;
  font-family: var(--pp-font); font-size: 13.5px;
  color: var(--pp-text); width: 100%;
}

.pp-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--pp-r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--pp-text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 15px;
  transition: all var(--pp-dur) var(--pp-ease);
}
.pp-icon-btn:hover {
  background: rgba(var(--pp-primary-rgb),.08);
  border-color: rgba(var(--pp-primary-rgb),.18);
  color: var(--pp-primary);
  transform: translateY(-1px);
}
.pp-icon-btn .pp-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pp-danger);
  box-shadow: 0 0 0 2px var(--pp-card);
}
.pp-icon-btn .pp-count {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, var(--pp-danger), #DC2626);
  color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: var(--pp-r-pill);
  padding: 0 5px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--pp-card);
}

/* ──────────────────────────────────────────────────────────────
   8. DROPDOWNS
   ────────────────────────────────────────────────────────────── */
.pp-dd-wrap { position: relative; }
.pp-dd {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 280px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-sh-xl);
  z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all var(--pp-dur) var(--pp-ease);
  overflow: hidden;
}
.pp-dd.show { opacity: 1; visibility: visible; transform: translateY(0); }
.pp-dd-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--pp-border);
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: space-between;
}
.pp-dd-body { max-height: 60vh; overflow-y: auto; }
.pp-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  font-size: 13.5px; color: var(--pp-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pp-dur) var(--pp-ease);
  border: none; background: none; width: 100%; text-align: left;
}
.pp-dd-item:hover { background: rgba(var(--pp-primary-rgb),.06); }
.pp-dd-item i { width: 18px; color: var(--pp-text-muted); }
.pp-dd-item.danger { color: var(--pp-danger); }
.pp-dd-item.danger i { color: var(--pp-danger); }
.pp-dd-divider { height: 1px; background: var(--pp-border); margin: 6px 0; }

/* ──────────────────────────────────────────────────────────────
   9. CARDS
   ────────────────────────────────────────────────────────────── */
.pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r-lg);
  box-shadow: var(--pp-sh-sm);
  overflow: hidden;
  transition: box-shadow var(--pp-dur) var(--pp-ease);
}
.pp-card:hover { box-shadow: var(--pp-sh-md); }
.pp-card-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--pp-border);
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between;
}
.pp-card-body { padding: 22px; }
.pp-card-footer { padding: 14px 22px; border-top: 1px solid var(--pp-border); background: var(--pp-card-2); }

/* Glass card */
.pp-card.pp-glass {
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border-color: var(--pp-glass-border);
}

/* ──────────────────────────────────────────────────────────────
   10. KPIs
   ────────────────────────────────────────────────────────────── */
.pp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.pp-kpi {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r-lg);
  padding: 20px;
  box-shadow: var(--pp-sh-sm);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--pp-dur) var(--pp-ease), box-shadow var(--pp-dur) var(--pp-ease);
}
.pp-kpi::before {
  content:""; position:absolute; right:-30px; top:-30px;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--pp-grad);
  opacity: .08; filter: blur(8px);
  transition: transform var(--pp-dur-slow) var(--pp-ease);
  z-index: -1;
}
.pp-kpi::after {
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background: var(--pp-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--pp-dur-slow) var(--pp-ease);
}
.pp-kpi:hover { transform: translateY(-4px); box-shadow: var(--pp-sh-lg); }
.pp-kpi:hover::before { transform: scale(1.25) rotate(20deg); }
.pp-kpi:hover::after { transform: scaleX(1); }

.pp-kpi .icon {
  width: 46px; height: 46px;
  border-radius: var(--pp-r-md);
  display: grid; place-items: center;
  color: #fff; font-size: 18px;
  margin-bottom: 12px;
  background: var(--pp-grad);
  box-shadow: var(--pp-sh-brand), inset 0 1px 0 rgba(255,255,255,.2);
  position: relative; overflow: hidden;
}
.pp-kpi .icon::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.3), transparent 55%);
}
.pp-kpi.success .icon { background: linear-gradient(135deg, #34D399, #059669); }
.pp-kpi.warning .icon { background: linear-gradient(135deg, #FBBF24, #D97706); }
.pp-kpi.danger  .icon { background: linear-gradient(135deg, #F87171, #DC2626); }
.pp-kpi.info    .icon { background: linear-gradient(135deg, #60A5FA, #2563EB); }

.pp-kpi .label {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--pp-text-muted);
}
.pp-kpi .value {
  font-family: var(--pp-font-mono);
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--pp-text);
  margin-top: 4px; line-height: 1.1;
}
.pp-kpi .trend {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--pp-r-pill);
}
.pp-kpi .trend.up   { background: rgba(var(--pp-success-rgb),.1); color: #047857; }
.pp-kpi .trend.down { background: rgba(var(--pp-danger-rgb),.1);  color: #B91C1C; }
.pp-kpi .trend.flat { background: rgba(var(--pp-text-muted),.08); color: var(--pp-text-muted); }

/* ──────────────────────────────────────────────────────────────
   11. BOTONES
   ────────────────────────────────────────────────────────────── */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--pp-r-sm);
  font-family: var(--pp-font);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--pp-dur) var(--pp-ease);
  box-shadow: var(--pp-sh-xs);
  position: relative; overflow: hidden;
  color: var(--pp-text);
  background: var(--pp-card);
  border-color: var(--pp-border);
  white-space: nowrap;
}
.pp-btn:hover { transform: translateY(-1px); box-shadow: var(--pp-sh-sm); }
.pp-btn:active { transform: translateY(0); }
.pp-btn:focus-visible { outline: none; box-shadow: var(--pp-ring); }

.pp-btn-primary {
  background: var(--pp-grad);
  color: #fff; border-color: transparent;
  box-shadow: var(--pp-sh-brand), inset 0 1px 0 rgba(255,255,255,.18);
}
.pp-btn-primary:hover { box-shadow: 0 14px 28px -8px rgba(var(--pp-primary-rgb),.55), inset 0 1px 0 rgba(255,255,255,.22); color: #fff; }
.pp-btn-success { background: linear-gradient(135deg, #34D399, #059669); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -6px rgba(var(--pp-success-rgb),.45), inset 0 1px 0 rgba(255,255,255,.18); }
.pp-btn-warning { background: linear-gradient(135deg, #FBBF24, #D97706); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -6px rgba(var(--pp-warning-rgb),.45), inset 0 1px 0 rgba(255,255,255,.18); }
.pp-btn-danger  { background: linear-gradient(135deg, #F87171, #DC2626); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -6px rgba(var(--pp-danger-rgb),.45), inset 0 1px 0 rgba(255,255,255,.18); }
.pp-btn-info    { background: linear-gradient(135deg, #60A5FA, #2563EB); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -6px rgba(var(--pp-info-rgb),.45), inset 0 1px 0 rgba(255,255,255,.18); }

.pp-btn-ghost {
  background: transparent;
  border-color: var(--pp-border);
  box-shadow: none;
}
.pp-btn-ghost:hover {
  background: rgba(var(--pp-primary-rgb),.06);
  border-color: rgba(var(--pp-primary-rgb),.25);
  color: var(--pp-primary);
}
.pp-btn-outline {
  background: transparent;
  border: 1.5px solid rgba(var(--pp-primary-rgb),.5);
  color: var(--pp-primary);
  box-shadow: none;
}
.pp-btn-outline:hover { background: var(--pp-grad); color: #fff; border-color: transparent; }

.pp-btn-sm { padding: 7px 12px; font-size: 13px; border-radius: var(--pp-r-xs); }
.pp-btn-lg { padding: 14px 26px; font-size: 16px; }
.pp-btn-icon { width: 40px; height: 40px; padding: 0; }
.pp-btn-block { width: 100%; }

/* ──────────────────────────────────────────────────────────────
   pp-row-actions: contenedor flex para botones de acción en filas
   de tabla. Acomoda 3-6 botones lado a lado con gap consistente,
   permitiendo wrap a una segunda fila si no caben (en vez del
   apilado vertical desordenado que da el text-end por defecto).
   ────────────────────────────────────────────────────────────── */
.pp-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    max-width: 100%;
}
.pp-row-actions > .pp-btn-sm {
    padding: 6px 9px;
    flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────────
   12. FORMS
   ────────────────────────────────────────────────────────────── */
.pp-form-group { margin-bottom: 16px; }
.pp-label {
  display: block;
  font-size: 12.5px; font-weight: 600;
  color: var(--pp-text);
  margin-bottom: 7px;
  letter-spacing: -0.005em;
}
.pp-input, .pp-select, .pp-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--pp-border);
  border-radius: var(--pp-r-sm);
  font-family: var(--pp-font);
  font-size: 14px;
  color: var(--pp-text);
  background: var(--pp-card);
  transition: all var(--pp-dur) var(--pp-ease);
  outline: none;
  box-shadow: var(--pp-sh-xs);
}
.pp-input:hover, .pp-select:hover, .pp-textarea:hover {
  border-color: rgba(var(--pp-primary-rgb),.35);
}
.pp-input:focus, .pp-select:focus, .pp-textarea:focus {
  border-color: var(--pp-primary);
  box-shadow: var(--pp-ring);
}
.pp-input-group { position: relative; }
.pp-input-group .pp-input { padding-left: 42px; }
.pp-input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--pp-text-muted); font-size: 15px;
}
.pp-hint { font-size: 12px; color: var(--pp-text-muted); margin-top: 5px; }

.pp-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* ──────────────────────────────────────────────────────────────
   13. TABLAS (con scroll horizontal en móvil)
   ────────────────────────────────────────────────────────────── */
.pp-table-wrap {
  border-radius: var(--pp-r-md);
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--pp-border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pp-table-wrap::-webkit-scrollbar { height: 8px; }
.pp-table-wrap::-webkit-scrollbar-thumb { background: rgba(100,116,139,.4); border-radius: 999px; }
.pp-table-wrap::-webkit-scrollbar-track { background: transparent; }
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--pp-card);
}
@media (max-width: 768px) {
  .pp-table { min-width: 640px; }  /* fuerza scroll horizontal cuando no cabe */
}
.pp-table thead th {
  background: linear-gradient(180deg, var(--pp-bg-2) 0%, var(--pp-bg) 100%);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pp-text-muted);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--pp-border);
  white-space: nowrap;
}
.pp-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--pp-border-2);
  vertical-align: middle;
}
.pp-table tbody tr { transition: background var(--pp-dur) var(--pp-ease); }
.pp-table tbody tr:hover { background: rgba(var(--pp-primary-rgb),.035); }
.pp-table tbody tr:last-child td { border-bottom: none; }

/* ──────────────────────────────────────────────────────────────
   14. BADGES
   ────────────────────────────────────────────────────────────── */
.pp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--pp-r-pill);
  font-size: 11.5px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}
.pp-badge::before {
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .85;
}
.pp-badge-primary { background: rgba(var(--pp-primary-rgb),.1); color: var(--pp-primary); }
.pp-badge-success { background: rgba(var(--pp-success-rgb),.1); color: #047857; }
.pp-badge-warning { background: rgba(var(--pp-warning-rgb),.1); color: #92400E; }
.pp-badge-danger  { background: rgba(var(--pp-danger-rgb),.1);  color: #B91C1C; }
.pp-badge-info    { background: rgba(var(--pp-info-rgb),.1);    color: #1D4ED8; }
.pp-badge-gray    { background: rgba(100,116,139,.1); color: #475569; }

/* ──────────────────────────────────────────────────────────────
   15. CHART CARD / SECTION
   ────────────────────────────────────────────────────────────── */
.pp-chart-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r-lg);
  padding: 22px;
  box-shadow: var(--pp-sh-sm);
}
.pp-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px; gap: 12px;
}
.pp-chart-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
}
.pp-chart-title i {
  background: var(--pp-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-chart-sub { font-size: 12px; color: var(--pp-text-muted); margin-top: 2px; }
.pp-chart-value {
  font-family: var(--pp-font-mono);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 4px;
}
.pp-chart-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--pp-r-pill);
  font-size: 11px; font-weight: 600;
  background: rgba(var(--pp-success-rgb),.1); color: #047857;
}
.pp-chart-pill.down { background: rgba(var(--pp-danger-rgb),.1); color: #B91C1C; }

.pp-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 18px; gap: 12px;
}
.pp-section-header h2 {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.pp-section-header h2 i { color: var(--pp-primary); }

/* ──────────────────────────────────────────────────────────────
   16. QUICK ACTIONS
   ────────────────────────────────────────────────────────────── */
.pp-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.pp-quick-item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r-md);
  text-decoration: none;
  color: var(--pp-text);
  box-shadow: var(--pp-sh-xs);
  transition: all var(--pp-dur) var(--pp-ease);
  position: relative; overflow: hidden;
}
.pp-quick-item::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--pp-grad);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--pp-dur) var(--pp-ease);
}
.pp-quick-item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--pp-primary-rgb),.3);
  box-shadow: var(--pp-sh-md);
}
.pp-quick-item:hover::before { transform: scaleY(1); }
.pp-quick-icon {
  width: 38px; height: 38px;
  border-radius: var(--pp-r-sm);
  background: rgba(var(--pp-primary-rgb),.08);
  color: var(--pp-primary);
  display: grid; place-items: center;
  font-size: 16px;
  transition: all var(--pp-dur) var(--pp-ease);
  flex-shrink: 0;
}
.pp-quick-item:hover .pp-quick-icon {
  background: var(--pp-grad); color: #fff; transform: scale(1.05);
}
.pp-quick-label { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.pp-quick-hint  { font-size: 11.5px; color: var(--pp-text-muted); margin-top: 2px; }

/* ──────────────────────────────────────────────────────────────
   17. HERO
   ────────────────────────────────────────────────────────────── */
.pp-hero {
  position: relative;
  overflow: hidden;
  border: none;
  background: var(--pp-grad-soft);
  border-radius: var(--pp-r-lg);
  padding: 24px 26px;
  box-shadow: var(--pp-sh-sm);
  margin-bottom: 24px;
}
.pp-hero::before, .pp-hero::after {
  content:""; position:absolute; border-radius: 50%;
  filter: blur(24px); pointer-events: none;
}
.pp-hero::before { right:-40px; top:-40px; width:180px; height:180px; background: var(--pp-grad); opacity: .18; }
.pp-hero::after  { right:80px; bottom:-30px; width:120px; height:120px; background: linear-gradient(135deg, #A78BFA, #22D3EE); opacity: .18; }
.pp-hero-content { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pp-hero-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--pp-primary);
  margin-bottom: 6px;
}
.pp-hero-title {
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0;
}
.pp-hero-sub { margin: 6px 0 0; color: var(--pp-text-muted); font-size: 14px; }
.pp-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ──────────────────────────────────────────────────────────────
   18. ACTIVITY ITEM
   ────────────────────────────────────────────────────────────── */
.pp-activity-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pp-border-2);
}
.pp-activity-item:last-child { border-bottom: none; }
.pp-activity-dot {
  width: 34px; height: 34px;
  border-radius: var(--pp-r-sm);
  display: grid; place-items: center;
  color: #fff; font-size: 13px;
  flex-shrink: 0;
}
.pp-activity-body { flex: 1; min-width: 0; }
.pp-activity-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.pp-activity-meta { font-size: 11.5px; color: var(--pp-text-muted); margin-top: 2px; }

/* ──────────────────────────────────────────────────────────────
   19. MODAL
   ────────────────────────────────────────────────────────────── */
.pp-modal-bd {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  /* place-items: start center → modal pegado arriba, deja espacio abajo
     para que los dropdowns nativos del navegador abran hacia abajo sin
     cubrir el modal. */
  display: grid;
  place-items: start center;
  padding: 24px 20px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.pp-modal-bd.show { opacity: 1; visibility: visible; }
.pp-modal {
  background: var(--pp-card);
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-r-xl);
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--pp-sh-xl);
  transform: scale(.95) translateY(20px);
  transition: transform var(--pp-dur-slow) var(--pp-ease-snappy);
}
.pp-modal-bd.show .pp-modal { transform: scale(1) translateY(0); }
.pp-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--pp-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.015em;
}
.pp-modal-body { padding: 22px 24px; }
.pp-modal-footer { padding: 14px 24px; border-top: 1px solid var(--pp-border); display: flex; justify-content: flex-end; gap: 10px; }
.pp-modal-close {
  width: 32px; height: 32px;
  border-radius: var(--pp-r-xs);
  background: var(--pp-card-2);
  border: 1px solid var(--pp-border);
  display: grid; place-items: center;
  cursor: pointer; color: var(--pp-text-muted);
  transition: all var(--pp-dur) var(--pp-ease);
}
.pp-modal-close:hover { background: var(--pp-danger); border-color: var(--pp-danger); color: #fff; }

/* ──────────────────────────────────────────────────────────────
   20. TOAST
   ────────────────────────────────────────────────────────────── */
#pp-toasts {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.pp-toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: var(--pp-r-md);
  min-width: 280px; max-width: 380px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-sh-lg);
  font-size: 14px; font-weight: 500;
  pointer-events: auto;
  animation: pp-toast-in .35s var(--pp-ease-snappy) both;
}
.pp-toast.success { border-color: rgba(var(--pp-success-rgb),.3); }
.pp-toast.danger  { border-color: rgba(var(--pp-danger-rgb),.3); }
.pp-toast.warning { border-color: rgba(var(--pp-warning-rgb),.3); }
.pp-toast.info    { border-color: rgba(var(--pp-info-rgb),.3); }
.pp-toast .icon {
  width: 32px; height: 32px;
  border-radius: var(--pp-r-sm);
  display: grid; place-items: center;
  color: #fff; font-size: 14px;
  flex-shrink: 0;
}
.pp-toast.success .icon { background: linear-gradient(135deg, #34D399, #059669); }
.pp-toast.danger .icon  { background: linear-gradient(135deg, #F87171, #DC2626); }
.pp-toast.warning .icon { background: linear-gradient(135deg, #FBBF24, #D97706); }
.pp-toast.info .icon    { background: linear-gradient(135deg, #60A5FA, #2563EB); }

@keyframes pp-toast-in {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pp-toast-out {
  to { opacity: 0; transform: translateX(60px); }
}
.pp-toast.out { animation: pp-toast-out .25s var(--pp-ease) forwards; }

/* ──────────────────────────────────────────────────────────────
   21. SKELETON / LOADING
   ────────────────────────────────────────────────────────────── */
.pp-skeleton {
  background:
    linear-gradient(90deg,
      var(--pp-bg-2) 0%,
      color-mix(in srgb, var(--pp-bg-2), white 8%) 50%,
      var(--pp-bg-2) 100%);
  background-size: 200% 100%;
  animation: pp-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--pp-r-sm);
}
@keyframes pp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────
   22. ANIMACIONES
   ────────────────────────────────────────────────────────────── */
@keyframes pp-fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes pp-fadeIn { from { opacity:0; } to { opacity:1; } }
.pp-animate-in { animation: pp-fadeUp .45s var(--pp-ease) both; }

/* ──────────────────────────────────────────────────────────────
   23. UTILIDADES
   ────────────────────────────────────────────────────────────── */
.pp-grad-text {
  background: var(--pp-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-text-muted { color: var(--pp-text-muted); }
.pp-text-primary { color: var(--pp-primary); }
.pp-text-success { color: var(--pp-success); }
.pp-text-warning { color: var(--pp-warning); }
.pp-text-danger { color: var(--pp-danger); }
.pp-mono { font-family: var(--pp-font-mono); }
.pp-fw-700 { font-weight: 700; }
.pp-fw-800 { font-weight: 800; }
.pp-mb-0 { margin-bottom: 0 !important; }
.pp-mb-1 { margin-bottom: 8px; }
.pp-mb-2 { margin-bottom: 16px; }
.pp-mb-3 { margin-bottom: 24px; }
.pp-mt-1 { margin-top: 8px; }
.pp-mt-2 { margin-top: 16px; }
.pp-mt-3 { margin-top: 24px; }
.pp-gap-1 { gap: 8px; }
.pp-gap-2 { gap: 16px; }
.pp-d-flex { display: flex; }
.pp-d-grid { display: grid; }
.pp-align-center { align-items: center; }
.pp-justify-between { justify-content: space-between; }
.pp-flex-1 { flex: 1; }
.pp-w-100 { width: 100%; }
.pp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.pp-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ──────────────────────────────────────────────────────────────
   24. MENÚ MÓVIL INFERIOR
   ────────────────────────────────────────────────────────────── */
.pp-mobile-nav {
  display: none;
  position: fixed;
  bottom: 12px; left: 12px; right: 12px;
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-r-xl);
  padding: 8px;
  box-shadow: var(--pp-sh-lg);
  z-index: 80;
  justify-content: space-around;
  align-items: center;
  gap: 4px;
}
.pp-mobile-nav a {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 8px 4px;
  border-radius: var(--pp-r-sm);
  color: var(--pp-text-muted);
  text-decoration: none;
  font-size: 10px; font-weight: 600;
  transition: all var(--pp-dur) var(--pp-ease);
}
.pp-mobile-nav a i { font-size: 16px; }
.pp-mobile-nav a.active {
  background: var(--pp-grad);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(var(--pp-primary-rgb),.5);
}

/* ──────────────────────────────────────────────────────────────
   24b. PRELOAD / SPLASH SCREEN
   • Modo navegador: solo icon-72 girando centrado
   • Modo PWA standalone (móvil): icon-72 + nombre app centrados
   ────────────────────────────────────────────────────────────── */
.pp-preload {
  position: fixed; inset: 0; z-index: 99999;
  background: #FFFFFF;                          /* Light por defecto */
  color: #0F172A;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease, visibility .35s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
/* Dark mode (cuando body tiene .pp-dark) */
body.pp-dark .pp-preload {
  background: #0B0A14;
  color: #fff;
}
/* Si no hay sesión (auth pages) usar preferencia del OS */
@media (prefers-color-scheme: dark) {
  body:not(.pp-dark):not(.pp-light) .pp-preload {
    background: #0B0A14;
    color: #fff;
  }
}
.pp-preload-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  text-align: center;
}
.pp-preload-logo {
  width: 72px; height: 72px;
  object-fit: contain;
  animation: pp-preload-rot 1.6s linear infinite;
  will-change: transform;
}
@keyframes pp-preload-rot { to { transform: rotate(360deg); } }

/* Nombre oculto por defecto (modo navegador). Hereda color del padre */
.pp-preload-name {
  display: none;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: inherit;
}

/* Mostrar nombre cuando es PWA standalone (móvil/desktop con app instalada) */
@media all and (display-mode: standalone),
       all and (display-mode: minimal-ui),
       all and (display-mode: fullscreen) {
  .pp-preload-name { display: block; }
}
/* iOS Safari standalone (no soporta el media query estándar) */
html.pp-standalone .pp-preload-name { display: block; }

.pp-preload.pp-fade-out {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────
   25. RESPONSIVE
   ────────────────────────────────────────────────────────────── */
/* Overlay para sidebar móvil — siempre fixed, fuera del flujo */
.pp-overlay {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(15,23,42,.4);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: all var(--pp-dur) var(--pp-ease);
  display: none;
}

@media (max-width: 992px) {
  .pp-app { flex-direction: column; }
  .pp-app .pp-sidebar {
    position: fixed; left: 0; top: 0;
    width: var(--pp-sidebar-w); height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--pp-dur) var(--pp-ease);
    z-index: 90;
  }
  .pp-app[data-pp-pos="right"] .pp-sidebar { left: auto; right: 0; transform: translateX(100%); }
  .pp-app.pp-sidebar-open .pp-sidebar { transform: translateX(0); }
  .pp-overlay { display: block; }
  .pp-app.pp-sidebar-open .pp-overlay { opacity: 1; visibility: visible; }
  .pp-mobile-nav { display: flex; }
  .pp-content { padding: 16px; padding-bottom: 90px; }
  .pp-search { display: none; }
  .pp-kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Grids dashboard colapsan a 1 columna */
  .pp-grid-2, .pp-grid-3, .pp-grid-4, .pp-dash-row { grid-template-columns: 1fr !important; gap: 14px; }
  /* Hero más compacto */
  .pp-hero { padding: 18px 18px; }
  .pp-hero-title { font-size: 20px; }
  .pp-hero-content { flex-direction: column; align-items: stretch; gap: 14px; }
  .pp-hero-actions { width: 100%; }
  .pp-hero-actions .pp-btn { flex: 1; }
  /* Cards más compactas */
  .pp-card-header { padding: 14px 16px; font-size: 14px; flex-wrap: wrap; gap: 8px; }
  .pp-card-body { padding: 16px; }
  /* KPI más compacto */
  .pp-kpi { padding: 16px; }
  .pp-kpi .value { font-size: 22px; }
  .pp-kpi .icon { width: 40px; height: 40px; font-size: 16px; margin-bottom: 10px; }
  /* Chart card */
  .pp-chart-card { padding: 16px; }
  .pp-chart-value { font-size: 22px; }
  /* Quick actions más compactas */
  .pp-quick { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .pp-quick-item { padding: 12px 14px; }
  /* Section header */
  .pp-section-header h2 { font-size: 16px; }
  /* Topbar */
  .pp-topbar { padding: 0 12px; height: 58px; }
  .pp-page-title { font-size: 14px; }
  .pp-topbar-right { gap: 4px; }
  .pp-icon-btn { width: 36px; height: 36px; font-size: 13px; }
  /* Dropdowns más anchos en móvil */
  .pp-dd { min-width: 280px; max-width: calc(100vw - 24px); right: 0; }
  .pp-dd-profile { min-width: 290px; }
  /* Modal full width */
  .pp-modal { max-height: 92vh; }
  .pp-modal-header { padding: 16px 18px; font-size: 15px; }
  .pp-modal-body { padding: 18px; }
  .pp-modal-footer { padding: 12px 18px; flex-direction: column-reverse; gap: 8px; }
  .pp-modal-footer .pp-btn { width: 100%; }
  /* Form rows */
  .pp-form-row { grid-template-columns: 1fr; gap: 0; }
  /* Tabs scroll horizontal */
  .pp-tabs { padding: 0 4px; }
  .pp-tab { padding: 10px 14px; font-size: 13px; }
  /* Stat trends en KPIs */
  .pp-kpi .trend { font-size: 10.5px; padding: 2px 7px; }
}
@media (max-width: 480px) {
  .pp-kpis { grid-template-columns: 1fr; }
  .pp-content { padding: 12px; padding-bottom: 90px; }
  .pp-hero { padding: 16px 14px; }
  .pp-hero-title { font-size: 18px; }
  .pp-hero-eyebrow { font-size: 10px; }
  .pp-hero-sub { font-size: 13px; }
  .pp-card-header { padding: 12px 14px; }
  .pp-card-body { padding: 14px; }
  .pp-modal-icon { width: 56px; height: 56px; font-size: 20px; }
  .pp-dd-profile-head { padding: 14px; }
  .pp-info-row { padding: 11px 14px; font-size: 13px; flex-wrap: wrap; }
  /* Sidebar móvil más compacta */
  .pp-app .pp-sidebar { width: 280px; }
}

/* ──────────────────────────────────────────────────────────────
   26. LOGIN / AUTH PAGES
   ────────────────────────────────────────────────────────────── */
.pp-auth {
  /* 100vh en Chrome Android incluye la URL bar → contenido se corta al scroll.
     100dvh (dynamic viewport height) se ajusta automáticamente. Fallback a vh
     para browsers viejos. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--pp-bg);
  /* Evita scroll horizontal en mobile (overflow-x: hidden + ancho fijo) */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
/* Garantiza que html/body no permitan deslizar horizontalmente en las páginas
   de auth (login, recuperar, pin). Solo aplica cuando el body contiene .pp-auth. */
html:has(.pp-auth), body:has(.pp-auth) {
  overflow-x: hidden;
  max-width: 100%;
}
.pp-auth-art {
  position: relative;
  background:
    radial-gradient(80% 60% at 20% 30%, rgba(var(--pp-primary-rgb),.55), transparent 60%),
    radial-gradient(60% 60% at 80% 70%, rgba(var(--pp-secondary-rgb),.45), transparent 60%),
    #0B0A1E;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px;
  color: #fff;
}
.pp-auth-art::before {
  content:""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.pp-auth-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.pp-auth-brand .pp-logo-mark { width: 48px; height: 48px; font-size: 20px; }
.pp-auth-brand .name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
/* Logo en imagen (cuando reemplaza al icono+texto del brand) — mismo footprint
   visual que el pp-logo-mark + name: alto compacto, ancho proporcional, sin
   filtros para que se vea tal cual el PNG/SVG cargado. */
.pp-auth-brand .pp-auth-logo-brand {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}
.pp-auth-pitch { position: relative; z-index: 1; }
.pp-auth-pitch h1 {
  font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 16px; color: #fff;
}
.pp-auth-pitch p { color: rgba(255,255,255,.75); font-size: 15px; line-height: 1.6; max-width: 420px; }
.pp-auth-features { position: relative; z-index: 1; display: grid; gap: 8px; }
.pp-auth-feat {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.85);
}
.pp-auth-feat i {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  font-size: 11px;
  color: #C4B5FD;
}

.pp-auth-form {
  display: grid; place-items: center;
  padding: 24px;
}
.pp-auth-card {
  width: 100%; max-width: 420px;
  padding: 36px 32px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-r-xl);
  box-shadow: var(--pp-sh-lg);
}
.pp-auth-card h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.pp-auth-card .sub { color: var(--pp-text-muted); font-size: 14px; margin-bottom: 24px; }

@media (max-width: 992px) {
  .pp-auth { grid-template-columns: 1fr; }
  .pp-auth-art { display: none; }
}

/* ──────────────────────────────────────────────────────────────
   Login premium en mobile (celulares y tablets verticales)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Fondo con gradiente sutil para que no se vea blanco plano detrás del card */
  .pp-auth {
    background:
      radial-gradient(circle at top, rgba(var(--pp-primary-rgb), .08), transparent 60%),
      radial-gradient(circle at bottom, rgba(var(--pp-secondary-rgb), .06), transparent 60%),
      var(--pp-bg);
    /* Fix overflow horizontal en Android: el grid de 1 columna no debe
       generar ancho extra. */
    grid-template-columns: 1fr;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .pp-auth-form {
    /* Alinear el card arriba (no centrado vertical) → no queda flotando en
       el medio con whitespace arriba y abajo. Padding generoso + safe area. */
    place-items: start center;
    align-content: start;
    /* Sin safe-area horizontal: en Android sin notch da 0px y no rompe nada,
       pero si el browser interpreta env() raro suma extra → causa scroll. */
    padding: max(env(safe-area-inset-top), 32px) 16px max(env(safe-area-inset-bottom), 24px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .pp-auth-card {
    /* Permite que el card ocupe el ancho disponible sin chocar con bordes */
    width: 100%;
    max-width: 100%;
    padding: 26px 20px;
    border-radius: 20px;
    box-sizing: border-box;
    /* Sombra más sutil en mobile para que se integre mejor con el bg */
    box-shadow: 0 12px 40px -8px rgba(var(--pp-primary-rgb), .12),
                0 4px 12px rgba(0,0,0,.04);
  }
  .pp-auth-card h2 { font-size: 22px; }
  .pp-auth-card .sub { font-size: 13.5px; margin-bottom: 18px; }

  /* Logo de empresa más compacto en mobile (el +40% que tiene el login.php
     se aplicaba para desktop — en celular queda gigante). */
  .pp-auth-logo-empresa { max-height: 90px; max-width: 100%; height: auto; }
  .pp-auth-logo-brand   { max-height: 64px; max-width: 100%; height: auto; }
  .pp-auth-logo-empresa-wrap { margin-bottom: 14px; max-width: 100%; }

  /* Botón submit con más altura para ser tap-friendly (44px min Apple HIG) */
  .pp-auth-card .pp-btn { padding: 14px 16px; font-size: 15px; width: 100%; box-sizing: border-box; }

  /* "Recordar mi correo" y "¿Olvidaste...?" con un cachito más de gap */
  .pp-auth-card form > div[style*="display:flex"] { gap: 12px; flex-wrap: wrap; }

  /* Defensa universal: nada dentro de .pp-auth puede ser más ancho que su padre */
  .pp-auth *,
  .pp-auth *::before,
  .pp-auth *::after {
    max-width: 100%;
    box-sizing: border-box;
  }
  .pp-auth img,
  .pp-auth svg,
  .pp-auth video,
  .pp-auth canvas { max-width: 100%; height: auto; }
}

/* ──────────────────────────────────────────────────────────────
   Anti-zoom de inputs en mobile.
   iOS Safari / Chrome Android viejos hacen zoom al enfocar un input
   si font-size < 16px. El viewport del login ya tiene user-scalable=no,
   pero algunos browsers ignoran ese hint y zoomean igual. Esto cubre
   el caso edge: forzamos 16px en pantallas pequeñas.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pp-input,
  input.pp-input,
  textarea.pp-input,
  select.pp-input {
    font-size: 16px;
  }
  .pp-otp-input {
    font-size: 22px;  /* OTP queda legible y no dispara zoom */
  }
}

/* ──────────────────────────────────────────────────────────────
   27b. SIDEBAR — Modo agrupado (acordeón)
   ────────────────────────────────────────────────────────────── */
.pp-nav-group { margin: 2px 0; }

/* Cuando es flat (desplegado) los items se muestran siempre */
.pp-nav-group-items--flat { display: block; }
.pp-nav-group-items--flat .pp-nav-item { display: flex; }

/* Acordeón cuando hay toggle (modo agrupado) */
.pp-nav-group-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-radius: var(--pp-r-sm);
  color: var(--pp-sidebar-text);
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
  transition: background var(--pp-dur) var(--pp-ease), color var(--pp-dur) var(--pp-ease);
}
.pp-nav-group-toggle:hover { background: rgba(255,255,255,.04); color: #fff; }
.pp-nav-group-icon { width: 18px; text-align: center; font-size: 15px; color: rgba(196,181,253,.85); }
.pp-nav-group-name { flex: 1; min-width: 0; }
.pp-nav-group-arrow {
  font-size: 11px;
  color: var(--pp-sidebar-muted);
  transition: transform var(--pp-dur) var(--pp-ease);
}
/* Cuando el grupo está abierto NO iluminamos el toggle (solo se ilumina el
   item activo adentro). Antes ponía un gradiente que hacía parecer "activo"
   al grupo entero. Lo único que cambia visualmente al abrir es la flecha. */
.pp-nav-group.pp-nav-group-open .pp-nav-group-arrow { transform: rotate(180deg); }

/* Container con animación max-height (sólo en modo agrupado) */
.pp-app[data-pp-menu-mode="agrupado"] .pp-nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--pp-dur-slow) var(--pp-ease);
  padding-left: 12px;   /* indentación visual de items */
}
.pp-app[data-pp-menu-mode="agrupado"] .pp-nav-group.pp-nav-group-open .pp-nav-group-items {
  max-height: 1500px;   /* generoso */
  margin-bottom: 6px;
}

/* Cuando sidebar compacta + agrupado, ocultar texto del toggle pero dejar el icon */
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-group-name,
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-group-arrow { display: none; }
.pp-app[data-pp-sidebar-size="compacta"] .pp-nav-group-toggle { justify-content: center; }

/* ──────────────────────────────────────────────────────────────
   27d. OTP / PIN BOXES (reusable, siempre en una línea)
   Usamos CSS Grid con N columnas auto-fit. Los inputs se ajustan
   al ancho disponible sin saltar de línea, en mobile y desktop.
   ────────────────────────────────────────────────────────────── */
.pp-otp-grid {
  display: grid;
  grid-auto-flow: column;          /* siempre una sola fila */
  grid-auto-columns: minmax(0, 1fr); /* todas las casillas mismo ancho */
  gap: 8px;
  margin: 6px 0;
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.pp-otp-input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.15;          /* mantiene proporción al achicarse */
  max-height: 66px;
  border-radius: 12px;
  background: rgba(var(--pp-primary-rgb),.04);
  border: 1.5px solid var(--pp-border);
  color: var(--pp-text);
  font-family: var(--pp-font-mono);
  font-size: clamp(18px, 5vw, 26px); /* tipografía fluida */
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: all .2s var(--pp-ease);
  -webkit-text-security: disc;
  padding: 0;
}
.pp-otp-input::-webkit-outer-spin-button,
.pp-otp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-otp-input:focus {
  border-color: var(--pp-primary);
  background: var(--pp-card);
  box-shadow: 0 0 0 4px rgba(var(--pp-primary-rgb),.15);
  transform: translateY(-1px);
}
.pp-otp-input.filled {
  border-color: rgba(var(--pp-primary-rgb),.55);
  background: rgba(var(--pp-primary-rgb),.10);
  color: var(--pp-primary);
}
.pp-otp-input.error {
  border-color: var(--pp-danger);
  background: rgba(var(--pp-danger-rgb),.10);
  color: var(--pp-danger);
  animation: pp-otp-shake .35s ease;
}
@keyframes pp-otp-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}
[data-pp-dark="1"] .pp-otp-input,
.pp-dark .pp-otp-input { background: rgba(255,255,255,.04); color: var(--pp-text); }
[data-pp-dark="1"] .pp-otp-input.filled,
.pp-dark .pp-otp-input.filled { background: rgba(var(--pp-primary-rgb),.18); color: #C7D2FE; }

/* Toggle ojo en input password */
.pp-pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--pp-text-muted); cursor: pointer;
  padding: 8px 10px; font-size: 14px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.pp-pwd-toggle:hover { color: var(--pp-text); background: rgba(var(--pp-primary-rgb),.06); }
.pp-input-group .pp-input.pp-pwd { padding-right: 44px; }

/* ──────────────────────────────────────────────────────────────
   27e. STATE CARD (tarjeta de estado: éxito / gris / advertencia)
   ────────────────────────────────────────────────────────────── */
.pp-state-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1.5px solid;
  margin-bottom: 16px;
}
.pp-state-card.success { background: rgba(var(--pp-success-rgb),.06); border-color: rgba(var(--pp-success-rgb),.35); }
.pp-state-card.gray    { background: var(--pp-bg-2); border-color: var(--pp-border); }
.pp-state-card.warning { background: rgba(var(--pp-warning-rgb),.06); border-color: rgba(var(--pp-warning-rgb),.35); }
.pp-state-card .icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #fff; font-size: 16px;
  flex-shrink: 0;
}
.pp-state-card.success .icon { background: linear-gradient(135deg, #34D399, #059669); box-shadow: 0 6px 16px -4px rgba(16,185,129,.4); }
.pp-state-card.gray    .icon { background: linear-gradient(135deg, #94A3B8, #64748B); }
.pp-state-card.warning .icon { background: linear-gradient(135deg, #FBBF24, #D97706); box-shadow: 0 6px 16px -4px rgba(245,158,11,.4); }
.pp-state-card .body { flex: 1; min-width: 0; }
.pp-state-card .title { font-size: 14.5px; font-weight: 700; letter-spacing: -0.005em; margin: 0 0 4px; color: var(--pp-text); }
.pp-state-card .desc  { font-size: 13px; color: var(--pp-text-muted); margin: 0; line-height: 1.45; }
[data-pp-dark="1"] .pp-state-card.gray { background: rgba(255,255,255,.03); }

/* Modal icon (círculo grande arriba en modales sin header) */
.pp-modal-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 4px auto 12px;
  color: #fff; font-size: 22px;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.25);
}
.pp-modal-icon.primary { background: var(--pp-grad); box-shadow: 0 12px 28px -8px rgba(var(--pp-primary-rgb),.5); }
.pp-modal-icon.danger  { background: linear-gradient(135deg, #F87171, #DC2626); box-shadow: 0 12px 28px -8px rgba(239,68,68,.5); }
.pp-modal-icon.success { background: linear-gradient(135deg, #34D399, #059669); box-shadow: 0 12px 28px -8px rgba(16,185,129,.5); }
.pp-modal-icon.info    { background: linear-gradient(135deg, #60A5FA, #2563EB); box-shadow: 0 12px 28px -8px rgba(37,99,235,.5); }
.pp-modal-icon.warning { background: linear-gradient(135deg, #FBBF24, #F59E0B); box-shadow: 0 12px 28px -8px rgba(245,158,11,.5); }

/* ──────────────────────────────────────────────────────────────
   27c. TABS PREMIUM
   ────────────────────────────────────────────────────────────── */
.pp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--pp-border);
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pp-tabs::-webkit-scrollbar { display: none; }

.pp-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  color: var(--pp-text-muted);
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--pp-dur) var(--pp-ease);
}
.pp-tab i { font-size: 14px; }
.pp-tab::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--pp-grad);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--pp-dur) var(--pp-ease);
}
.pp-tab:hover { color: var(--pp-text); }
.pp-tab.active { color: var(--pp-primary); }
.pp-tab.active::after { transform: scaleX(1); }

.pp-tab-panel { display: none; animation: pp-fadeUp .4s var(--pp-ease) both; }
.pp-tab-panel.active { display: block; }

[data-pp-dark="1"] .pp-tabs { border-bottom-color: var(--pp-border); }
[data-pp-dark="1"] .pp-tab { color: var(--pp-text-muted); }
[data-pp-dark="1"] .pp-tab:hover { color: var(--pp-text); }
[data-pp-dark="1"] .pp-tab.active { color: #C7D2FE; }

/* ──────────────────────────────────────────────────────────────
   28. SELECTORES DE TEMA (modales)
   ────────────────────────────────────────────────────────────── */
.pp-grad-swatch {
  position: relative;
  outline: none;
}
.pp-grad-swatch:hover { transform: scale(1.06); }
.pp-grad-swatch.pp-grad-swatch-active {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--pp-primary-rgb),.18), var(--pp-sh-md);
}
.pp-grad-swatch.pp-grad-swatch-active::after {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 18px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
}

/* Pick (botones de selección "Izquierda/Derecha/Normal/Compacta") */
.pp-pick {
  padding: 16px 8px;
  border-radius: 12px;
  border: 1.5px solid var(--pp-border);
  background: var(--pp-card);
  color: var(--pp-text);
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600;
  transition: all var(--pp-dur) var(--pp-ease);
  outline: none;
}
.pp-pick i { font-size: 18px; color: var(--pp-text-muted); transition: color var(--pp-dur) var(--pp-ease); }
.pp-pick:hover {
  border-color: rgba(var(--pp-primary-rgb),.4);
  transform: translateY(-1px);
  box-shadow: var(--pp-sh-xs);
}
.pp-pick.pp-pick-active {
  border-color: var(--pp-primary);
  background: rgba(var(--pp-primary-rgb),.08);
  color: var(--pp-primary);
  box-shadow: var(--pp-ring);
}
.pp-pick.pp-pick-active i { color: var(--pp-primary); }

/* Botones Modo Claro / Oscuro (modal Tema) */
.pp-modo-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--pp-border);
  background: var(--pp-card);
  color: var(--pp-text);
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--pp-dur) var(--pp-ease);
}
.pp-modo-btn i { font-size: 16px; transition: transform var(--pp-dur) var(--pp-ease); }
.pp-modo-btn:hover { border-color: rgba(var(--pp-primary-rgb),.4); transform: translateY(-1px); }
.pp-modo-btn:hover i { transform: scale(1.15); }

/* "Claro" activo: fondo claro con borde primario */
#ppModoClaro.pp-modo-active {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-color: #F59E0B;
  color: #92400E;
  box-shadow: 0 8px 20px -6px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
#ppModoClaro.pp-modo-active i { color: #D97706; }

/* "Oscuro" activo: fondo oscuro con glow */
#ppModoOscuro.pp-modo-active {
  background: linear-gradient(135deg, #1E1B4B, #312E81);
  border-color: #6366F1;
  color: #E0E7FF;
  box-shadow: 0 8px 20px -6px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
#ppModoOscuro.pp-modo-active i { color: #C7D2FE; }

[data-pp-dark="1"] .pp-modo-btn { background: var(--pp-card-2); border-color: var(--pp-border); color: var(--pp-text); }

/* Swatches de sidebar gradient (8 opciones de fondo del menú) */
.pp-side-grad-swatch {
  position: relative;
  outline: none;
}
.pp-side-grad-swatch:hover { transform: scale(1.04); }
.pp-side-grad-swatch.pp-side-grad-active {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--pp-primary-rgb),.18), var(--pp-sh-md);
}
.pp-side-grad-swatch.pp-side-grad-active::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: var(--pp-primary);
  display: grid; place-items: center;
  font-size: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ─── Botón Bloquear sesión (estilo igual al resto de iconos del topbar) ─── */
.pp-icon-btn.pp-lock-btn {
  text-decoration: none;
}

/* ─── Botón avatar del topbar ─── */
.pp-icon-btn.pp-avatar-btn {
  background: var(--pp-grad) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 13px;
  box-shadow: var(--pp-sh-brand), inset 0 1px 0 rgba(255,255,255,.18);
}
.pp-icon-btn.pp-avatar-btn:hover { transform: translateY(-1px) scale(1.04); }

/* ─── Dropdown del perfil premium ─── */
.pp-dd-profile {
  min-width: 320px;
  padding: 0 !important;
}
.pp-dd-profile-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px;
  background: linear-gradient(135deg,
    rgba(var(--pp-primary-rgb),.10),
    rgba(var(--pp-secondary-rgb),.06));
  border-bottom: 1px solid var(--pp-border);
}
.pp-dd-profile-name {
  font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--pp-text);
}
.pp-dd-profile-email {
  font-size: 12px; color: var(--pp-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.pp-avatar.pp-avatar-lg { width: 50px; height: 50px; font-size: 18px; flex-shrink: 0; }

.pp-dd-section { padding: 6px; }
.pp-dd-section + .pp-dd-section { border-top: 1px solid var(--pp-border-2); }
.pp-dd-section-label {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--pp-text-muted);
  padding: 8px 12px 4px;
}
.pp-dd-profile .pp-dd-item {
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.pp-dd-item-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(var(--pp-primary-rgb),.1);
  color: var(--pp-primary);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform var(--pp-dur) var(--pp-ease), background var(--pp-dur) var(--pp-ease);
}
.pp-dd-profile .pp-dd-item:hover .pp-dd-item-icon {
  transform: scale(1.08);
  background: rgba(var(--pp-primary-rgb),.18);
}
.pp-dd-item-icon-danger {
  background: rgba(var(--pp-danger-rgb),.12) !important;
  color: var(--pp-danger) !important;
}
.pp-dd-profile .pp-dd-item.danger:hover .pp-dd-item-icon {
  background: rgba(var(--pp-danger-rgb),.22) !important;
}
.pp-dd-item-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--pp-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--pp-dur) var(--pp-ease);
}
.pp-dd-profile .pp-dd-item:hover .pp-dd-item-arrow { opacity: 1; transform: translateX(0); }

/* ──────────────────────────────────────────────────────────────
   29. DARK MODE — overrides TOTAL (todas las superficies)
   ────────────────────────────────────────────────────────────── */
[data-pp-dark="1"] body { background: var(--pp-bg) !important; color: var(--pp-text) !important; }
[data-pp-dark="1"] .pp-main { background: var(--pp-bg) !important; }
[data-pp-dark="1"] .pp-content { background: var(--pp-bg) !important; }
[data-pp-dark="1"] .pp-topbar {
  background: rgba(11,10,20,.78) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
[data-pp-dark="1"] .pp-page-title { color: var(--pp-text) !important; }
[data-pp-dark="1"] .pp-hero {
  background:
    linear-gradient(135deg, rgba(var(--pp-primary-rgb),.18), rgba(var(--pp-secondary-rgb),.10)),
    var(--pp-card);
}
[data-pp-dark="1"] .pp-card,
[data-pp-dark="1"] .pp-kpi,
[data-pp-dark="1"] .pp-chart-card,
[data-pp-dark="1"] .pp-quick-item {
  background: var(--pp-card);
  border-color: var(--pp-border);
  color: var(--pp-text);
}
[data-pp-dark="1"] .pp-table { background: var(--pp-card); color: var(--pp-text); }
[data-pp-dark="1"] .pp-table thead th {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  color: rgba(226,232,240,.65);
  border-bottom-color: var(--pp-border);
}
[data-pp-dark="1"] .pp-table tbody td { border-bottom-color: var(--pp-border-2); color: var(--pp-text); }
[data-pp-dark="1"] .pp-table tbody tr:hover { background: rgba(var(--pp-primary-rgb),.06); }
[data-pp-dark="1"] .pp-table-wrap { border-color: var(--pp-border); }
[data-pp-dark="1"] .pp-card-header { background: transparent; border-bottom-color: var(--pp-border); }
[data-pp-dark="1"] .pp-card-footer { background: var(--pp-card-2); border-top-color: var(--pp-border); }
[data-pp-dark="1"] .pp-modal { background: var(--pp-card); border-color: var(--pp-border); }
[data-pp-dark="1"] .pp-modal-header, [data-pp-dark="1"] .pp-modal-footer { border-color: var(--pp-border); }
[data-pp-dark="1"] .pp-modal-close { background: var(--pp-card-2); border-color: var(--pp-border); color: var(--pp-text-muted); }
[data-pp-dark="1"] .pp-dd { background: var(--pp-card); border-color: var(--pp-border); }
[data-pp-dark="1"] .pp-dd-header, [data-pp-dark="1"] .pp-dd-divider { border-color: var(--pp-border); background: transparent; }
[data-pp-dark="1"] .pp-dd-item { color: var(--pp-text); }
[data-pp-dark="1"] .pp-dd-item:hover { background: rgba(var(--pp-primary-rgb),.1); }
[data-pp-dark="1"] .pp-dd-item i { color: var(--pp-text-muted); }
[data-pp-dark="1"] .pp-input, [data-pp-dark="1"] .pp-select, [data-pp-dark="1"] .pp-textarea {
  background: var(--pp-card-2);
  border-color: var(--pp-border);
  color: var(--pp-text);
}
[data-pp-dark="1"] .pp-btn-ghost { background: transparent; border-color: var(--pp-border); color: var(--pp-text); }
[data-pp-dark="1"] .pp-btn-ghost:hover { background: rgba(var(--pp-primary-rgb),.12); border-color: rgba(var(--pp-primary-rgb),.35); color: #fff; }
[data-pp-dark="1"] .pp-pick {
  background: var(--pp-card-2) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text) !important;
}
[data-pp-dark="1"] .pp-pick.pp-pick-active {
  background: rgba(var(--pp-primary-rgb),.18) !important;
  color: #fff !important;
}
[data-pp-dark="1"] .pp-toast { background: var(--pp-card); color: var(--pp-text); border-color: var(--pp-border); }
[data-pp-dark="1"] .pp-skeleton {
  background: linear-gradient(90deg, var(--pp-bg-2) 0%, color-mix(in srgb, var(--pp-bg-2), white 5%) 50%, var(--pp-bg-2) 100%);
  background-size: 200% 100%;
}

/* Tarjetas con borde gradient sutil en dark */
[data-pp-dark="1"] .pp-card::before,
[data-pp-dark="1"] .pp-kpi::before { opacity: .14; }

/* Dropdown profile head en dark */
[data-pp-dark="1"] .pp-dd-profile-head {
  background: linear-gradient(135deg, rgba(var(--pp-primary-rgb),.18), rgba(var(--pp-secondary-rgb),.12));
  border-bottom-color: var(--pp-border);
}
[data-pp-dark="1"] .pp-dd-section + .pp-dd-section { border-top-color: var(--pp-border-2); }

/* ─── Modales en dark mode (selector global por .pp-dark en <body>) ─── */
.pp-dark .pp-modal {
  background: var(--pp-card) !important;
  border-color: var(--pp-border) !important;
  color: var(--pp-text);
}
.pp-dark .pp-modal-header, .pp-dark .pp-modal-footer { border-color: var(--pp-border); color: var(--pp-text); }
.pp-dark .pp-modal-header span, .pp-dark .pp-modal-header strong { color: var(--pp-text); }
.pp-dark .pp-modal-body { color: var(--pp-text); }
.pp-dark .pp-modal-body h2, .pp-dark .pp-modal-body h3, .pp-dark .pp-modal-body h4 { color: var(--pp-text); }
.pp-dark .pp-modal-body p, .pp-dark .pp-modal-sub, .pp-dark .pp-modal-body small { color: var(--pp-text-muted); }
.pp-dark .pp-modal-body strong { color: var(--pp-text); }
.pp-dark .pp-modal-close { background: var(--pp-card-2); border-color: var(--pp-border); color: var(--pp-text-muted); }
.pp-dark .pp-modal-bd { background: rgba(0,0,0,.6); }
.pp-dark .pp-label { color: var(--pp-text); }
.pp-dark .pp-input, .pp-dark .pp-select, .pp-dark .pp-textarea {
  background: var(--pp-card-2); border-color: var(--pp-border); color: var(--pp-text);
}
.pp-dark input[type="color"] { background: var(--pp-card-2); border-color: var(--pp-border); }
.pp-dark .pp-pick { background: var(--pp-card-2) !important; border-color: var(--pp-border) !important; color: var(--pp-text) !important; }
.pp-dark .pp-pick.pp-pick-active { background: rgba(var(--pp-primary-rgb),.18) !important; color: #fff !important; }
.pp-dark .pp-btn-ghost { background: transparent; border-color: var(--pp-border); color: var(--pp-text); }
.pp-dark .pp-btn-ghost:hover { background: rgba(var(--pp-primary-rgb),.12); color: #fff; }
/* Caja "Crear degradado propio" en dark */
.pp-dark .pp-modal-body div[style*="background:var(--pp-bg-2)"] { background: rgba(255,255,255,.04) !important; }

/* Modal body/footer + label en dark (data-pp-dark, dentro de pp-app) */
[data-pp-dark="1"] .pp-modal-body { color: var(--pp-text); }
[data-pp-dark="1"] .pp-modal-body h2,
[data-pp-dark="1"] .pp-modal-body h3,
[data-pp-dark="1"] .pp-modal-body h4 { color: var(--pp-text); }
[data-pp-dark="1"] .pp-modal-body p,
[data-pp-dark="1"] .pp-modal-sub { color: var(--pp-text-muted); }
[data-pp-dark="1"] .pp-modal-body small { color: var(--pp-text-muted); }
[data-pp-dark="1"] .pp-modal-body strong { color: var(--pp-text); }
[data-pp-dark="1"] .pp-modal-header { color: var(--pp-text); background: transparent; }
[data-pp-dark="1"] .pp-modal-footer { background: transparent; color: var(--pp-text-muted); }
[data-pp-dark="1"] .pp-label { color: var(--pp-text); }
[data-pp-dark="1"] input[type="color"] { background: var(--pp-card-2); border-color: var(--pp-border); }
[data-pp-dark="1"] .pp-modal-bd { background: rgba(0,0,0,.55); }
/* Picks (Izquierda/Derecha/etc.) en dark */
[data-pp-dark="1"] .pp-pick i,
[data-pp-dark="1"] .pp-pick span,
[data-pp-dark="1"] .pp-pick small { color: inherit; }
/* Caja "Crear degradado propio" en dark */
[data-pp-dark="1"] .pp-modal-body div[style*="background:var(--pp-bg-2)"] { background: rgba(255,255,255,.04) !important; }
/* Span con pp-text-success (footer auto-save) */
.pp-text-success { color: var(--pp-success); }

/* Cuando el sidebar tiene gradiente custom en dark, asegurar texto blanco */
[data-pp-dark="1"] .pp-sidebar { color: rgba(255,255,255,.78); }

/* Quick action / Activity en dark */
[data-pp-dark="1"] .pp-quick-icon { background: rgba(var(--pp-primary-rgb),.16); }
[data-pp-dark="1"] .pp-activity-item { border-bottom-color: var(--pp-border-2); }
[data-pp-dark="1"] .pp-activity-meta { color: var(--pp-text-muted); }

/* Hero subtítulo */
[data-pp-dark="1"] .pp-hero-sub { color: rgba(231,229,255,.75); }
[data-pp-dark="1"] .pp-hero-title { color: var(--pp-text); }

/* Badges en dark */
[data-pp-dark="1"] .pp-badge-success { background: rgba(16,185,129,.18); color: #6EE7B7; }
[data-pp-dark="1"] .pp-badge-danger  { background: rgba(239,68,68,.18);  color: #FCA5A5; }
[data-pp-dark="1"] .pp-badge-warning { background: rgba(245,158,11,.18); color: #FCD34D; }
[data-pp-dark="1"] .pp-badge-info    { background: rgba(59,130,246,.18); color: #93C5FD; }
[data-pp-dark="1"] .pp-badge-gray    { background: rgba(148,163,184,.18); color: #CBD5E1; }
[data-pp-dark="1"] .pp-badge-primary { background: rgba(var(--pp-primary-rgb),.22); color: #C7D2FE; }

/* KPI trend pills en dark */
[data-pp-dark="1"] .pp-kpi .trend.up   { background: rgba(16,185,129,.18); color: #6EE7B7; }
[data-pp-dark="1"] .pp-kpi .trend.down { background: rgba(239,68,68,.18); color: #FCA5A5; }
[data-pp-dark="1"] .pp-kpi .trend.flat { background: rgba(148,163,184,.14); color: #CBD5E1; }

/* Chart pill */
[data-pp-dark="1"] .pp-chart-pill      { background: rgba(16,185,129,.18); color: #6EE7B7; }
[data-pp-dark="1"] .pp-chart-pill.down { background: rgba(239,68,68,.18); color: #FCA5A5; }

/* ──────────────────────────────────────────────────────────────
   30. IMPRESIÓN
   ────────────────────────────────────────────────────────────── */
@media print {
  .pp-sidebar, .pp-topbar, .pp-mobile-nav, .pp-icon-btn { display: none !important; }
  .pp-app { grid-template-columns: 1fr; }
  .pp-content { padding: 0; }
  .pp-card { box-shadow: none; border-color: #e5e7eb; }
}

/* ──────────────────────────────────────────────────────────────
   SweetAlert2 personalizado (.pp-swal) — respeta tema claro/oscuro
   PP.confirm({...}) aplica customClass: { popup: 'pp-swal' }
   ────────────────────────────────────────────────────────────── */
.swal2-popup.pp-swal {
  background: var(--pp-bg-2) !important;
  color: var(--pp-text) !important;
  border-radius: 20px !important;
  border: 1px solid var(--pp-border, transparent) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
  padding: 24px !important;
}
.swal2-popup.pp-swal .swal2-title {
  color: var(--pp-text) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}
.swal2-popup.pp-swal .swal2-html-container,
.swal2-popup.pp-swal #swal2-html-container {
  color: var(--pp-text-muted) !important;
  font-size: 13.5px !important;
}
.swal2-popup.pp-swal .swal2-actions {
  gap: 10px !important;
  margin-top: 18px !important;
}
.swal2-popup.pp-swal .swal2-styled.swal2-confirm,
.swal2-popup.pp-swal .swal2-styled.swal2-cancel {
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
.swal2-popup.pp-swal .swal2-styled.swal2-cancel {
  background: transparent !important;
  color: var(--pp-text-muted) !important;
  border: 1px solid var(--pp-border, rgba(255,255,255,.12)) !important;
}
.swal2-popup.pp-swal .swal2-styled.swal2-cancel:hover {
  background: rgba(127,127,127,.08) !important;
  color: var(--pp-text) !important;
}
/* Iconos: el círculo de fondo debe contrastar con el popup */
.swal2-popup.pp-swal .swal2-icon {
  border-color: currentColor !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-warning {
  color: #F59E0B !important;
  border-color: #F59E0B !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-warning .swal2-icon-content {
  color: #F59E0B !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-error {
  color: #EF4444 !important;
  border-color: #EF4444 !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  background-color: #EF4444 !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-success {
  border-color: #10B981 !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: #10B981 !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16,185,129,.3) !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-info {
  color: #3B82F6 !important;
  border-color: #3B82F6 !important;
}
.swal2-popup.pp-swal .swal2-icon.swal2-question {
  color: var(--pp-primary, #4F46E5) !important;
  border-color: var(--pp-primary, #4F46E5) !important;
}
/* Backdrop más oscuro */
.swal2-container.swal2-backdrop-show {
  background: rgba(0,0,0,.55) !important;
}
/* Input dentro del SweetAlert (si se usa) */
.swal2-popup.pp-swal .swal2-input,
.swal2-popup.pp-swal .swal2-textarea,
.swal2-popup.pp-swal .swal2-select {
  background: var(--pp-bg) !important;
  color: var(--pp-text) !important;
  border: 1px solid var(--pp-border, rgba(255,255,255,.12)) !important;
  border-radius: 10px !important;
}

/* ──────────────────────────────────────────────────────────────
   Tabs estilo PILL (segmented control premium)
   ────────────────────────────────────────────────────────────── */
.pp-tabs-pill {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--pp-bg, rgba(127,127,127,.08));
  border: 1px solid var(--pp-border, rgba(255,255,255,.08));
  border-radius: 12px;
  margin: 0 auto 20px;
}
.pp-tabs-pill-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.pp-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text-muted);
  cursor: pointer;
  transition: all .18s ease;
  background: transparent;
  border: none;
  white-space: nowrap;
}
.pp-tab-pill:hover { color: var(--pp-text); }
.pp-tab-pill.active {
  background: var(--pp-grad, linear-gradient(135deg, #4F46E5, #7C3AED));
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(79,70,229,.5);
}
.pp-tab-pill i { font-size: 12px; }

/* Responsive: en mobile las tabs PILL deben envolverse en varias filas
   en vez de quedar lineales horizontales (rompía el ancho del modal). */
@media (max-width: 768px) {
  .pp-tabs-pill-wrap { display: block; }
  .pp-tabs-pill {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    justify-content: center;
  }
  .pp-tab-pill {
    flex: 0 1 auto;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* ──────────────────────────────────────────────────────────────
   Section card (agrupador dentro de modal)
   ────────────────────────────────────────────────────────────── */
.pp-section-card {
  border: 1px solid var(--pp-border, rgba(255,255,255,.08));
  border-radius: 14px;
  padding: 18px;
  background: rgba(127,127,127,.03);
  margin-bottom: 14px;
}
.pp-section-card:last-child { margin-bottom: 0; }
.pp-section-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--pp-border, rgba(255,255,255,.08));
}
.pp-section-card-header .pp-section-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--pp-grad, linear-gradient(135deg, #4F46E5, #7C3AED));
  color: #fff; font-size: 14px;
  box-shadow: 0 4px 12px -3px rgba(79,70,229,.4);
  flex-shrink: 0;
}
.pp-section-card-header .pp-section-icon.success { background: linear-gradient(135deg,#34D399,#059669); box-shadow: 0 4px 12px -3px rgba(16,185,129,.4); }
.pp-section-card-header .pp-section-icon.warning { background: linear-gradient(135deg,#FBBF24,#D97706); box-shadow: 0 4px 12px -3px rgba(217,119,6,.4); }
.pp-section-card-header .pp-section-icon.info    { background: linear-gradient(135deg,#60A5FA,#2563EB); box-shadow: 0 4px 12px -3px rgba(37,99,235,.4); }
.pp-section-card-header .pp-section-icon.cyan    { background: linear-gradient(135deg,#22D3EE,#0891B2); box-shadow: 0 4px 12px -3px rgba(8,145,178,.4); }
.pp-section-card-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pp-text);
  letter-spacing: -0.01em;
}
.pp-section-card-header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--pp-text-muted);
  line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────────
   Input con icono prefix (dentro de campos del modal)
   ────────────────────────────────────────────────────────────── */
.pp-field { display: block; margin-bottom: 0; }
.pp-field-label {
  display: block;
  position: relative;
  z-index: 2;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--pp-text-muted);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pp-field-label .req { color: var(--pp-danger, #EF4444); margin-left: 2px; }
/* ── PP-INPUT-ICON (versión NUEVA: wrapper <div> con icono+input adentro) ──
   IMPORTANTE: SOLO aplica a `<div class="pp-input-icon">` (selector por tag).
   La versión LEGACY donde `.pp-input-icon` es un `<i>` standalone (login y
   vistas antiguas) NO entra acá y conserva el comportamiento original de
   la regla más arriba (línea ~724): position:absolute superpuesto al input.
*/
div.pp-input-icon,
span.pp-input-icon,
label.pp-input-icon {
  display: block !important;
  position: relative !important;
  width: 100%;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  color: inherit;
  font-size: inherit;
  z-index: 1;
}
div.pp-input-icon > i:first-child,
span.pp-input-icon > i:first-child,
label.pp-input-icon > i:first-child {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pp-text-muted);
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
}
div.pp-input-icon > .pp-input,
div.pp-input-icon > select.pp-input,
span.pp-input-icon > .pp-input,
span.pp-input-icon > select.pp-input,
label.pp-input-icon > .pp-input,
label.pp-input-icon > select.pp-input {
  padding-left: 36px;
  width: 100%;
  position: relative;
  z-index: 1;
}
/* El hint <small> que aparece debajo del input debe quedar abajo SIEMPRE,
   nunca al lado del input ni superpuesto. */
div.pp-input-icon + small,
span.pp-input-icon + small,
label.pp-input-icon + small,
.pp-field-label + div.pp-input-icon + small,
.pp-field-label + span.pp-input-icon + small,
.pp-field-label + label.pp-input-icon + small {
  display: block !important;
  width: 100%;
  margin-top: 6px;
  clear: both;
}
/* Sufijo (unidad / moneda) — solo cuando el input es de texto/número, no selects */
.pp-input-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pp-text-muted);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────────
   Toggle switch premium (más bonito que el Bootstrap)
   ────────────────────────────────────────────────────────────── */
.pp-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--pp-border, rgba(255,255,255,.08));
  border-radius: 10px;
  background: rgba(127,127,127,.03);
  cursor: pointer;
  transition: all .15s ease;
}
.pp-switch-row:hover { background: rgba(127,127,127,.06); }
.pp-switch-row.active { border-color: var(--pp-primary, #4F46E5); background: rgba(79,70,229,.06); }
.pp-switch-row-info { flex: 1; min-width: 0; }
.pp-switch-row-info .title { font-size: 13.5px; font-weight: 600; color: var(--pp-text); margin: 0; }
.pp-switch-row-info .sub   { font-size: 11.5px; color: var(--pp-text-muted); margin: 2px 0 0; line-height: 1.3; }
.pp-switch-toggle {
  position: relative;
  width: 38px; height: 22px;
  background: rgba(127,127,127,.25);
  border-radius: 999px;
  transition: background .18s ease;
  flex-shrink: 0;
  margin-left: 14px;
}
.pp-switch-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pp-switch-row.active .pp-switch-toggle { background: var(--pp-primary, #4F46E5); }
.pp-switch-row.active .pp-switch-toggle::after { transform: translateX(16px); }
.pp-switch-row input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.pp-switch-row.pp-switch-row-disabled {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.3);
}
.pp-switch-row.pp-switch-row-disabled .pp-switch-toggle { background: rgba(127,127,127,.2) !important; }

/* ──────────────────────────────────────────────────────────────
   Combobox autocompletable (input + dropdown filtrable)
   ────────────────────────────────────────────────────────────── */
.pp-combobox { position: relative; }
.pp-combobox .pp-input-icon { position: relative; }
.pp-combobox-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(127,127,127,.15);
  color: var(--pp-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 11px;
  transition: all .12s ease;
  z-index: 2;
}
.pp-combobox-clear:hover { background: var(--pp-danger, #EF4444); color: #fff; }
.pp-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--pp-bg-2, #fff);
  border: 1px solid var(--pp-border, rgba(0,0,0,.08));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  max-height: 320px;
  overflow-y: auto;
  z-index: 100;
  padding: 6px;
}
.pp-combobox-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.pp-combobox-item:hover,
.pp-combobox-item.active {
  background: rgba(var(--pp-primary-rgb, 79, 70, 229), .08);
}
.pp-combobox-empty {
  padding: 18px;
  text-align: center;
  color: var(--pp-text-muted);
  font-size: 12.5px;
  font-style: italic;
}
/* Scroll bonito del dropdown */
.pp-combobox-list::-webkit-scrollbar { width: 8px; }
.pp-combobox-list::-webkit-scrollbar-track { background: transparent; }
.pp-combobox-list::-webkit-scrollbar-thumb { background: rgba(127,127,127,.25); border-radius: 4px; }

/* ──────────────────────────────────────────────────────────────────────
   Formulario de cliente — estilo unificado para los modales "Nuevo cliente"
   usados desde clientes/index.php, ventas/nueva.php y cualquier otro
   módulo. Antes este bloque estaba inline en clientes/index.php y por eso
   no aplicaba al modal cuando se abría desde ventas.
   ────────────────────────────────────────────────────────────────────── */
.pp-uppercase { text-transform: uppercase; }
.pp-form-section-label {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--pp-text-muted);
    margin: 18px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pp-border);
    display: flex; align-items: center; gap: 8px;
}
.pp-dte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-dte-card {
    background: var(--pp-bg-2);
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 12px 14px;
}
.pp-dte-label {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--pp-text-muted);
    margin-bottom: 8px;
}
.pp-dte-opts { display: flex; gap: 18px; }
.pp-dte-opts label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; cursor: pointer; font-weight: 600;
}
.pp-dte-opts input[type="radio"] {
    accent-color: var(--pp-primary);
    width: 16px; height: 16px; cursor: pointer;
}
@media (max-width: 640px) {
    .pp-dte-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Formularios de filtro de búsqueda (top de cada listado)
   En mobile (<768px) todos los grids inline se apilan a 1 columna para
   evitar que selects/inputs se monten unos sobre otros. Aplica a cualquier
   <form> dentro de .pp-card-body que use grid-template-columns inline.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .pp-card .pp-card-body form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .pp-card .pp-card-body form[style*="grid-template-columns"] > div {
        min-width: 0 !important;
        width: 100% !important;
    }
    /* Botones de acción del filtro (Aplicar / Limpiar) — sin padding-top
       extra que en desktop alinea con los labels; en mobile estorba. */
    .pp-card .pp-card-body form[style*="grid-template-columns"] > div[style*="padding-top"] {
        padding-top: 4px !important;
        justify-content: flex-end !important;
    }
    /* Inputs internos también full-width para no desbordar */
    .pp-card .pp-card-body form .pp-input,
    .pp-card .pp-card-body form .pp-input-icon {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX iOS — Inputs date/month/time con tamaño intrínseco excesivo
   En iOS Safari estos inputs heredan un padding/font-size del sistema que
   los hace verse "al 120%" y desbordan los contenedores. Forzamos appearance
   none + box-sizing + font-size 16px (evita el auto-zoom de iOS al hacer
   focus en inputs con font < 16px).
   ═══════════════════════════════════════════════════════════════════════════ */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-size: 16px;          /* iOS hace zoom si < 16px al focus */
    min-height: 38px;
    line-height: 1.2;
    min-width: 0;
    max-width: 100%;
}

/* En iOS Safari, los inputs de fecha ignoran width:100% si el contenido
   intrínseco (placeholder "dd/mm/aaaa") es más ancho. Forzamos con flex
   y min-width:0 en el contenedor pp-input-icon. */
.pp-input-icon {
    min-width: 0;
}
.pp-input-icon > input[type="date"],
.pp-input-icon > input[type="month"],
.pp-input-icon > input[type="datetime-local"],
.pp-input-icon > input[type="time"] {
    width: 100%;
    flex: 1 1 auto;
}

/* Específico para iOS — el icono del calendario nativo a veces empuja
   el contenido fuera. Lo escondemos visualmente cuando hay un wrapper
   con icono propio (.pp-input-icon ya muestra fa-calendar). */
@supports (-webkit-touch-callout: none) {
    .pp-input-icon input[type="date"]::-webkit-calendar-picker-indicator,
    .pp-input-icon input[type="month"]::-webkit-calendar-picker-indicator,
    .pp-input-icon input[type="datetime-local"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 8px;
        width: 24px;
        height: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Switch iOS-style (.pp-switch) — usado en configuracion/index.php
   para el toggle "Envío Automático de DTE por WhatsApp" y otros toggles
   booleanos del sistema. NO confundir con .pp-switch-row (que es otro
   patrón con varios items en una lista).
   ═══════════════════════════════════════════════════════════════════════════ */
.pp-switch{
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
}
.pp-switch input[type="checkbox"]{
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.pp-switch-slider{
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background-color .2s ease, box-shadow .2s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.pp-switch-slider::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.08);
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
}
.pp-switch input[type="checkbox"]:checked + .pp-switch-slider{
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 0 0 3px rgba(37,211,102,.12);
}
.pp-switch input[type="checkbox"]:checked + .pp-switch-slider::before{
    transform: translateX(20px);
    box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.1);
}
.pp-switch input[type="checkbox"]:focus-visible + .pp-switch-slider{
    outline: 2px solid var(--pp-primary, #4F46E5);
    outline-offset: 2px;
}
.pp-switch input[type="checkbox"]:disabled + .pp-switch-slider{
    opacity: .5;
    cursor: not-allowed;
}
/* Dark mode */
.pp-dark .pp-switch-slider{ background: #475569; }
.pp-dark .pp-switch-slider::before{ background: #e2e8f0; }