:root {
      --bg-base: #07090e;
      --bg-sidebar: #090c14;
      --bg-card: #0d111a;
      --bg-card-hover: #121824;
      --border: rgba(56, 189, 248, 0.08);
      --border-hover: rgba(56, 189, 248, 0.25);
      --text-primary: #f1f5f9;
      --text-muted: #94a3b8;
      --text-dim: #475569;
      --accent: #38bdf8;
      --accent-glow: rgba(56, 189, 248, 0.15);
      --spring: cubic-bezier(0.34,1.56,0.64,1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-family: 'Inter', sans-serif; background: var(--bg-base); color: var(--text-primary); }

    /* ── LOADER ── */
    #pageLoader {
      position: fixed; inset: 0; z-index: 99999;
      background: var(--bg-base);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
      transition: opacity .5s ease, visibility .5s ease;
    }
    #pageLoader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
    .loader-brand { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--text-primary); animation: loaderPulse 2s ease infinite; }
    .loader-brand span { color: var(--accent); font-style: italic; }
    @keyframes loaderPulse { 0%,100%{opacity:1;} 50%{opacity:.7;} }
    .loader-dot-anim {
      width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
      box-shadow: 0 0 12px var(--accent);
      animation: loaderBlink 1.2s ease infinite;
    }
    @keyframes loaderBlink { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:.4;} }
    .loader-bar-wrap { width: 200px; height: 2px; background: var(--border); border-radius: 99px; overflow: hidden; }
    .loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #7dd3fc); border-radius: 99px; box-shadow: 0 0 8px var(--accent); transition: width .3s ease; }
    .loader-txt { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
    .loader-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
    .lp { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0; animation: lpFloat linear infinite; }
    @keyframes lpFloat { 0%{transform:translateY(100vh) scale(0);opacity:0;} 10%{opacity:.35;} 90%{opacity:.1;} 100%{transform:translateY(-10vh) scale(1);opacity:0;} }
    body { min-height: 100vh; overflow-x: hidden; }

    /* ── NOISE OVERLAY ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 0;
      opacity: 0.3;
    }

    @keyframes gear-spin     { 0%{transform:rotate(0)} 100%{transform:rotate(90deg)} }
    @keyframes bell-swing    { 0%,100%{transform:rotate(0)} 20%{transform:rotate(14deg)} 40%{transform:rotate(-10deg)} 60%{transform:rotate(6deg)} 80%{transform:rotate(-4deg)} }
    @keyframes arrow-slide   { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
    @keyframes user-pop      { 0%{transform:scale(1)} 60%{transform:scale(1.08)} 100%{transform:scale(1.05)} }
    @keyframes signal-fill   { 0%,100%{transform:scaleY(.45);opacity:.55} 50%{transform:scaleY(1);opacity:1} }
    @keyframes modal-in      { from{opacity:0;transform:translateY(10px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
    @keyframes overlay-in    { from{opacity:0} to{opacity:1} }
    @keyframes fade-in       { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
    @keyframes login-in      { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }
    @keyframes glow-reveal   { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
    @keyframes toast-in      { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

    /* ── NAV ICON ANIMATIONS ── */
    /* Dashboard: cuadritos hacen scale pulse en secuencia */
    @keyframes dash-pulse    { 0%,100%{transform:scale(1)} 40%{transform:scale(1.18)} 70%{transform:scale(0.92)} }
    /* Categorías: rota suavemente */
    @keyframes cat-spin      { 0%{transform:rotate(0deg)} 100%{transform:rotate(45deg)} }
    /* Productos: flota y vuelve */
    @keyframes prod-float    { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-4px)} }
    /* Pagos: shimmer — la línea de la tarjeta se desplaza a la derecha */
    @keyframes pay-slide     { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }
    /* Cupones: tag hace un pequeño swing */
    @keyframes tag-swing     { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-12deg)} 65%{transform:rotate(8deg)} }
    /* Roles (escudo): pulsa escala */
    @keyframes shield-pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
    /* Gestión de Roles (candado): el arco sube y baja — unlock micro */
    @keyframes lock-shackle  { 0%,60%,100%{transform:translateY(0)} 25%{transform:translateY(-3px)} }
    /* El arco interior del candado también sube independientemente */
    @keyframes lock-arc-up   { 0%,60%,100%{transform:translateY(0)} 25%{transform:translateY(-4px)} }
    .nav-item:hover .icon-lock .lock-shackle-path { animation: lock-arc-up .55s var(--spring) both; }
    /* Licencias (llave): gira levemente */
    @keyframes key-turn { 0%{transform:rotate(0)} 60%{transform:rotate(-18deg)} 100%{transform:rotate(0)} }
    .nav-item:hover .icon-key { animation: key-turn .5s var(--spring) both; }
    /* Divisas: gira el símbolo */
    @keyframes coin-spin     { 0%{transform:rotateY(0deg)} 50%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)} }
    /* Auditoría: el documento hace un bounce down */
    @keyframes doc-bounce    { 0%,100%{transform:translateY(0)} 40%{transform:translateY(3px)} }
    /* Logout: sale y vuelve */
    /* ── CAPTCHA ─────────────────────────────────────────────────── */
    .captcha-wrap { display:flex; gap:10px; align-items:center; }
    .captcha-canvas-box {
      flex-shrink:0; position:relative; border-radius:10px; overflow:hidden;
      border:1px solid var(--border);
      background:linear-gradient(135deg,#0a0e1a 0%,#0d1220 100%);
      box-shadow:inset 0 0 20px rgba(56,189,248,0.04);
    }
    .captcha-refresh-btn {
      position:absolute; top:4px; right:4px;
      background:rgba(56,189,248,0.08); border:1px solid rgba(56,189,248,0.15);
      border-radius:5px; padding:3px 5px; cursor:pointer;
      color:var(--accent); line-height:1; font-size:11px;
      transition:background 0.2s, transform 0.3s;
    }
    .captcha-refresh-btn:hover { background:rgba(56,189,248,0.15); }
    .captcha-refresh-btn.spinning svg { animation:captchaSpin 0.5s ease; }
    @keyframes captchaSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
    .captcha-input-wrap { flex:1; position:relative; }
    .captcha-input-wrap .field-icon {
      position:absolute; left:12px; top:50%; transform:translateY(-50%);
      width:15px; height:15px; pointer-events:none;
      color:var(--text-muted); opacity:0.5; transition:color .25s,opacity .25s;
    }
    .captcha-input-wrap:focus-within .field-icon { color:var(--accent); opacity:1; animation:iconPulse 0.35s ease; }
    #panel-captcha-input {
      width:100%; padding:12px 14px 12px 36px;
      background:rgba(13,17,26,0.7); border:1px solid var(--border);
      border-radius:10px; color:var(--text-primary); font-size:13px;
      outline:none; transition:border-color .2s,box-shadow .2s;
      letter-spacing:0.12em; font-family:'JetBrains Mono',monospace;
    }
    #panel-captcha-input::placeholder { font-size:12px; letter-spacing:0; font-family:'Inter',sans-serif; color:var(--text-dim); }
    #panel-captcha-input:focus { border-color:rgba(56,189,248,0.35); box-shadow:0 0 0 3px rgba(56,189,248,0.08); }
    #panel-captcha-input.captcha-ok  { border-color:rgba(74,222,128,0.5); }
    #panel-captcha-input.captcha-err { border-color:rgba(248,113,113,0.5); animation:captchaShake 0.35s ease; }
    @keyframes captchaShake {
      0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
      40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
    }

    .password-toggle-btn {
      position:absolute; right:6px; top:50%; transform:translateY(-50%);
      width:32px; height:32px; border-radius:8px; border:none; background:transparent;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      color:var(--text-muted); transition:color .2s ease;
    }
    .password-toggle-btn:hover { color:var(--accent); }
    .password-toggle-btn svg { width:17px; height:17px; }
    .password-toggle-btn.eye-pop { animation:eye-pop-anim .35s var(--spring); }
    @keyframes eye-pop-anim { 0%{transform:translateY(-50%) scale(0.6)} 60%{transform:translateY(-50%) scale(1.25)} 100%{transform:translateY(-50%) scale(1)} }
    @keyframes logout-slide  { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
    /* Gestión de Productos: hoja se dobla */
    @keyframes gp-fold       { 0%{transform:scaleY(1)} 40%{transform:scaleY(.88) skewX(-3deg)} 100%{transform:scaleY(1) skewX(0)} }
    /* Pedidos: caja sube un poco */
    @keyframes pedido-lift   { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-4px)} }
    /* Difusión: ya tiene bell-swing */
    /* Auditoría: doc-bounce ya existe, reusar */
    /* Licencias: key-turn ya existe, reusar */
    /* Tabla/tarjeta: entrada al cargar */
    @keyframes row-in        { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* Clases de ícono para animaciones on hover */
    .icon-dashboard  { transform-origin:center; }
    .icon-categorias { transform-origin:center; }
    .icon-productos  { transform-origin:center; }
    .icon-pagos      { transform-origin:center; }
    .icon-cupones    { transform-origin:center; }
    .icon-shield     { transform-origin:center; }
    .icon-lock       { transform-origin:center; }
    .icon-coin       { transform-origin:center; perspective:200px; }
    .icon-doc        { transform-origin:bottom center; }
    .icon-logout     { transform-origin:center; }

    /* ── MODAL ── */
    .modal-overlay { position:fixed;inset:0;z-index:300;background:rgba(4,6,10,0.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;animation:overlay-in .2s ease; }
    .modal-overlay.open { display:flex; }
    .modal-box { background:#090d16;border:1px solid var(--border);border-radius:16px;width:100%;padding:28px;animation:modal-in .35s var(--spring);position:relative; }
    .modal-close-circle { position:absolute;top:18px;right:18px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s cubic-bezier(0.34,1.56,0.64,1); }
    .modal-close-circle:hover { background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);transform:scale(1.1) rotate(90deg); }
    .modal-close-circle svg { width:14px;height:14px;color:var(--text-muted); }
    .auth-icon-badge { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.2); }
    .auth-icon-badge svg { width:22px;height:22px;color:#38bdf8; }

    /* ── BUTTONS ── */
    .btn-primary {
      display:inline-flex; align-items:center; gap:8px;
      background:var(--accent); color:#040811; font-weight:600; font-size:13px;
      padding:9px 18px; border-radius:8px; border:none; cursor:pointer;
      transition:background .2s, transform .2s var(--spring), box-shadow .2s;
      box-shadow: 0 4px 14px rgba(56,189,248,0.2);
    }
    .btn-primary:hover { background:#7dd3fc; transform:scale(1.02); box-shadow:0 6px 20px rgba(56,189,248,0.35); }
    .btn-primary:hover .icon-arrow { animation:arrow-slide .5s var(--spring); }

    .btn-secondary {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(56,189,248,0.03); color:#e2e8f0; font-weight:500; font-size:13px;
      padding:9px 18px; border-radius:8px; border:1px solid var(--border); cursor:pointer;
      transition:background .2s, border-color .2s, color .2s;
    }
    .btn-secondary:hover { background:rgba(56,189,248,0.08); border-color:var(--border-hover); color:#fff; }

    .btn-danger {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(239,68,68,.08); color:#f87171; font-weight:500; font-size:13px;
      padding:9px 18px; border-radius:8px; border:1px solid rgba(239,68,68,.18); cursor:pointer;
      transition:background .2s;
    }
    .btn-danger:hover { background:rgba(239,68,68,.16); }

    /* ── INPUT ── */
    .input {
      width:100%; background:rgba(13,17,26,0.7); border:1px solid var(--border);
      border-radius:8px; padding:9px 12px; color:var(--text-primary);
      font-size:13px; font-family:'Inter',sans-serif; outline:none;
      transition:border-color .2s, box-shadow .2s;
    }
    .input:focus { border-color:rgba(56,189,248,0.4); box-shadow:0 0 0 3px rgba(56,189,248,0.1); }
    .input::placeholder { color:var(--text-dim); }

    /* ── CARD ── */
    .card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; }
    .card-hover { transition:transform .35s var(--spring), border-color .3s, box-shadow .3s; }
    .card-hover:hover { transform:translateY(-2px); border-color:var(--border-hover); box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(56,189,248,0.04); }

    /* ── MONO ── */
    .mono { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }

    /* ── SIDEBAR ── */
    .sidebar {
      width:260px; flex-shrink:0; background:var(--bg-sidebar);
      border-right:1px solid var(--border);
      height:100vh; display:flex; flex-direction:column;
      position:fixed; top:0; left:0; z-index:40; overflow:hidden;
    }
    .sidebar-top { padding:24px 16px 0; flex-shrink:0; }
    .sidebar-nav { padding:0 16px; flex:1; overflow-y:auto; overflow-x:hidden; }
    .sidebar-bottom { padding:12px 16px 20px; flex-shrink:0; border-top:1px solid var(--border); background:var(--bg-sidebar); }

    .nav-item {
      display:flex; align-items:center; gap:12px;
      padding:10px 14px; border-radius:9px; font-size:14px; font-weight:500;
      color:var(--text-muted); cursor:pointer;
      transition:background .2s, color .2s;
      border:none; background:transparent; width:100%; text-align:left;
      position:relative; overflow:hidden;
    }
    .nav-item:hover { background:rgba(56,189,248,0.06); color:#e2e8f0; }

    /* Estado activo — degradado + barra neón izquierda */
    .nav-item.active {
      background: linear-gradient(90deg, rgba(56,189,248,0.15) 0%, rgba(0,0,0,0) 100%) !important;
      color: #ffffff !important;
      font-weight: 600;
    }
    .nav-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background-color: var(--accent);
      border-radius: 0 3px 3px 0;
      box-shadow:
         2px 0px 12px rgba(56,189,248,0.8),
        -1px 0px  8px rgba(56,189,248,0.5);
    }
    .nav-item svg { flex-shrink:0; }

    /* Sidebar user block */
    .sidebar-user { display:flex; align-items:center; gap:12px; padding:14px 10px 10px; border-radius:9px; transition:background .15s; }
    .sidebar-user:hover { background:rgba(56,189,248,0.05); }
    .sidebar-user-avatar {
      width:38px; height:38px; border-radius:50%;
      background:linear-gradient(135deg, rgba(56,189,248,0.3), rgba(14,165,233,0.2));
      border:1px solid rgba(56,189,248,0.25);
      display:flex; align-items:center; justify-content:center;
      font-size:13px; font-weight:700; color:var(--accent); flex-shrink:0;
    }
    .sidebar-user-name { font-size:14px; font-weight:600; color:#fff; line-height:1.2; }
    .sidebar-user-email { font-size:12px; color:var(--text-muted); line-height:1.3; }

    .nav-item-logout {
      display:flex; align-items:center; gap:12px;
      padding:9px 14px; border-radius:9px; font-size:14px; font-weight:500;
      color:rgba(239,68,68,.7); cursor:pointer;
      transition:background .15s, color .15s;
      border:none; background:transparent; width:100%; text-align:left; margin-top:2px;
    }
    .nav-item-logout:hover { background:rgba(239,68,68,.07); color:#f87171; }

    /* ── TOPBAR ── */
    .topbar {
      position:fixed; top:0; left:260px; right:0; height:56px; z-index:30;
      border-bottom:1px solid var(--border);
      background:rgba(7,9,14,0.9); backdrop-filter:blur(20px);
      display:flex; align-items:center; gap:16px; padding:0 28px;
    }

    /* ── MAIN CONTENT ── */
    .main-content { position:fixed; top:56px; left:260px; right:0; bottom:0; overflow-y:auto; overflow-x:hidden; }

    /* ── MOBILE MENU BUTTON ── */
    .mobile-menu-btn {
      display:none; background:transparent; border:1px solid var(--border);
      color:var(--text-muted); padding:8px; border-radius:8px; cursor:pointer;
      flex-shrink:0; align-items:center; justify-content:center;
      transition:background .2s, border-color .2s, color .2s;
    }
    .mobile-menu-btn:hover { background:rgba(56,189,248,0.07); border-color:var(--border-hover); color:var(--accent); }

    /* SIDEBAR OVERLAY */
    .sidebar-overlay { position:fixed;inset:0;background:rgba(4,6,10,0.6);z-index:55;display:none;backdrop-filter:blur(2px); }
    .sidebar-overlay.open { display:block;animation:overlay-in .2s ease; }

    /* ── RESPONSIVE MOBILE ── */
    @media (max-width: 768px) {
      .sidebar {
        width:78vw; max-width:300px;
        transform:translateX(-100%);
        transition:transform .3s var(--spring);
        z-index:60;
        box-shadow:8px 0 40px rgba(0,0,0,.6);
      }
      .sidebar.open { transform:translateX(0); }
      .mobile-menu-btn { display:flex; }
      .topbar { left:0; padding:0 12px; gap:10px; }
      .main-content { left:0; }
      .topbar .relative.flex-1 { max-width:none !important; }
      .topbar input[type="text"] { font-size:12px; }
      .modal-box { padding:20px; }
      .modal-overlay { padding:16px; }

      /* ── CARD-LIST: tabla → tarjetas en móvil (excepto matriz de permisos) ── */
      .data-table:not(#permisos-matriz-table) thead { display:none; }
      .data-table:not(#permisos-matriz-table),
      .data-table:not(#permisos-matriz-table) tbody { display:block; width:100%; }
      .data-table:not(#permisos-matriz-table) tr.hidden { display:none !important; }
      .data-table:not(#permisos-matriz-table) tr.row-animate {
        animation: row-in .35s var(--spring) both;
      }
      .data-table:not(#permisos-matriz-table) tr {
        display:grid;
        grid-template-columns:1fr 1fr;
        background:var(--bg-card);
        border:1px solid var(--border);
        border-radius:12px;
        margin-bottom:10px;
        overflow:hidden;
        transition:border-color .2s, box-shadow .2s;
      }
      .data-table:not(#permisos-matriz-table) tr:hover { border-color:var(--border-hover); box-shadow:0 4px 20px rgba(0,0,0,.4); }
      .data-table:not(#permisos-matriz-table) td {
        display:flex;
        flex-direction:column;
        justify-content:center;
        padding:10px 12px;
        font-size:13px;
        border-bottom:1px solid rgba(56,189,248,0.05);
        border-right:1px solid rgba(56,189,248,0.05);
        overflow:visible; max-width:none; white-space:normal; word-break:break-word;
      }
      .data-table:not(#permisos-matriz-table) td::before {
        content:attr(data-label);
        font-family:'JetBrains Mono',monospace;
        font-size:9px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--text-dim);
        margin-bottom:4px;
        line-height:1;
      }
      .data-table:not(#permisos-matriz-table) td.td-full {
        grid-column:1/-1;
        border-right:none;
        background:rgba(56,189,248,0.025);
      }
      .data-table:not(#permisos-matriz-table) td.td-full::before { color:var(--accent); opacity:.7; }
      .data-table:not(#permisos-matriz-table) td.td-actions {
        grid-column:1/-1;
        flex-direction:row;
        align-items:center;
        gap:8px;
        border-right:none;
        border-bottom:none;
        padding:10px 12px;
      }
      .data-table:not(#permisos-matriz-table) td.td-actions::before { display:none; }

      /* ── MATRIZ DE PERMISOS en móvil: card por rol ── */
      #permisos-matriz-table { border-collapse:collapse; width:100%; }
      #permisos-matriz-table thead { display:none; }
      #permisos-matriz-table tbody { display:flex; flex-direction:column; gap:10px; }
      #permisos-matriz-table tr {
        display:block;
        background:var(--bg-card);
        border:1px solid var(--border);
        border-radius:12px;
        overflow:hidden;
        padding:0 0 4px 0;
      }
      /* Primera celda = nombre del rol → header de la card */
      #permisos-matriz-table td:first-child {
        display:block;
        padding:10px 14px 8px;
        background:rgba(56,189,248,0.035);
        border-bottom:1px solid var(--border);
        font-size:14px;
        font-weight:600;
      }
      /* Celdas de checkbox → grid de 2 columnas con label visible */
      #permisos-matriz-table td:not(:first-child) {
        display:inline-flex;
        align-items:center;
        gap:8px;
        width:calc(50% - 1px);
        padding:8px 14px;
        font-size:12px;
        vertical-align:top;
        box-sizing:border-box;
        border-bottom:1px solid rgba(56,189,248,0.04);
      }
      #permisos-matriz-table td:not(:first-child)::before {
        content:attr(data-section);
        font-family:'JetBrains Mono',monospace;
        font-size:9px;
        letter-spacing:.07em;
        text-transform:uppercase;
        color:var(--text-dim);
        white-space:nowrap;
        order:1;
      }
      #permisos-matriz-table td:not(:first-child) input { order:0; flex-shrink:0; }

      .overflow-x-auto { overflow:visible; }
    }
    @media (max-width: 420px) { .topbar { padding:0 10px; } }

    /* ── ICON ANIMATIONS ── */
    .nav-item:hover .gear-icon       { animation: gear-spin    .5s var(--spring) forwards; }
    .nav-item:hover .bell-icon       { animation: bell-swing   .6s var(--spring); }
    .nav-item:hover .user-icon       { animation: user-pop     .4s var(--spring) both; }
    .nav-item:hover .arrow-icon      { animation: arrow-slide  .5s var(--spring); }
    .nav-item:hover .icon-dashboard  { animation: dash-pulse   .55s var(--spring) both; }
    .nav-item:hover .icon-categorias { animation: cat-spin     .45s var(--spring) forwards; }
    .nav-item:hover .icon-productos  { animation: prod-float   .55s ease both; }
    .nav-item:hover .icon-pagos      { animation: pay-slide    .4s var(--spring) both; }
    .nav-item:hover .icon-cupones    { animation: tag-swing    .55s var(--spring) both; }
    .nav-item:hover .icon-shield     { animation: shield-pulse .5s var(--spring) both; }
    .nav-item:hover .icon-lock       { animation: lock-shackle .55s var(--spring) both; }
    .nav-item:hover .icon-coin       { animation: coin-spin    .6s ease both; }
    .nav-item:hover .icon-doc        { animation: doc-bounce   .45s var(--spring) both; }
    .nav-item-logout:hover .icon-logout { animation: logout-slide .5s var(--spring) both; }
    .icon-gp     { transform-origin:center; }
    .icon-pedido { transform-origin:center; }
    .nav-item:hover .icon-gp     { animation: gp-fold    .5s var(--spring) both; }
    .nav-item:hover .icon-pedido { animation: pedido-lift .5s ease both; }

    /* ── TABLE ── */
    .data-table { width:100%; border-collapse:collapse; }
    .data-table th {
      padding:10px 14px; text-align:left;
      font-family:'JetBrains Mono',monospace; font-size:10px;
      letter-spacing:.08em; text-transform:uppercase;
      color:var(--text-dim); border-bottom:1px solid var(--border); font-weight:500;
    }
    .data-table td { padding:12px 14px; font-size:13px; border-bottom:1px solid rgba(56,189,248,0.04); }
    .data-table tr:last-child td { border-bottom:none; }
    .data-table tr.row-animate { animation: row-in .35s var(--spring) both; }
    .data-table tr:hover td { background:rgba(56,189,248,0.02); }
    .data-table tr.hidden { display:none !important; }

    /* ── BADGES ── */
    .badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:500; }
    .badge.green  { background:rgba(34,197,94,.1);  color:#4ade80; border:1px solid rgba(34,197,94,.2); }
    .badge.yellow { background:rgba(234,179,8,.1);  color:#facc15; border:1px solid rgba(234,179,8,.2); }
    .badge.red    { background:rgba(239,68,68,.1);  color:#f87171; border:1px solid rgba(239,68,68,.2); }
    .badge.blue   { background:rgba(56,189,248,.1); color:#38bdf8; border:1px solid rgba(56,189,248,.2); }

    /* ── ICON SELECT (form productos) ── */
    .icon-select { position:relative; }
    .icon-select-trigger { display:flex; align-items:center; gap:10px; cursor:pointer; text-align:left; }
    .icon-select-trigger-icon { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; color:var(--text-muted); }
    .icon-select-trigger-icon svg { width:18px; height:18px; }
    .icon-select-trigger-label { flex:1; font-size:13px; color:var(--text-primary); }
    .icon-select-chevron { width:14px; height:14px; color:var(--text-dim); flex-shrink:0; transition:transform .15s; }
    .icon-select.open .icon-select-chevron { transform:rotate(180deg); color:var(--accent); }
    .icon-select-menu {
      position:absolute; left:0; right:0; top:calc(100% + 6px);
      background:#0d111a; border:1px solid var(--border); border-radius:9px;
      padding:4px; z-index:50; max-height:220px; overflow-y:auto;
      box-shadow:0 12px 28px rgba(0,0,0,.6);
    }
    .icon-select-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text-primary); transition:background .15s; }
    .icon-select-item:hover { background:rgba(56,189,248,0.06); }
    .icon-select-item.selected { background:rgba(56,189,248,0.12); color:var(--accent); }
    .icon-select-item svg { width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }

    /* ── PAYMENT EMOJI CHIP ── */
    .payment-emoji-chip {
      display:inline-flex; align-items:center; justify-content:center;
      font-size:22px; line-height:1;
      transition:transform .3s var(--spring);
    }
    .payment-emoji-chip:hover { transform:scale(1.2); }

    /* ── PHONE PREFIX ── */
    .phone-input-group { display:flex; gap:8px; position:relative; }
    .phone-prefix-trigger {
      display:flex; align-items:center; gap:6px; flex-shrink:0;
      background:rgba(56,189,248,0.03); border:1px solid var(--border);
      border-radius:8px; padding:9px 10px; color:var(--text-primary);
      font-size:13px; font-family:'Inter',sans-serif; cursor:pointer;
      transition:border-color .2s, background .2s;
    }
    .phone-prefix-trigger:hover { border-color:var(--border-hover); background:rgba(56,189,248,0.07); }
    .phone-prefix-trigger svg { width:12px; height:12px; color:var(--text-muted); flex-shrink:0; transition:transform .2s var(--spring); }
    .phone-prefix-trigger.open svg { transform:rotate(180deg); color:var(--accent); }
    .phone-number-input { flex:1; min-width:0; }
    .phone-prefix-dropdown {
      position:absolute; top:calc(100% + 6px); left:0; width:250px; max-height:240px;
      overflow-y:auto; background:#0d111a; border:1px solid var(--border); border-radius:9px;
      padding:5px; box-shadow:0 12px 28px rgba(0,0,0,.6); z-index:50; display:none;
    }
    .phone-prefix-dropdown.open { display:block; animation:modal-in .2s var(--spring); }
    .phone-prefix-search {
      width:100%; background:rgba(56,189,248,0.03); border:1px solid var(--border);
      border-radius:7px; padding:8px 9px; color:var(--text-primary); font-size:12.5px;
      font-family:'Inter',sans-serif; outline:none; margin-bottom:5px;
      transition:border-color .2s;
    }
    .phone-prefix-search:focus { border-color:rgba(56,189,248,0.4); }
    .phone-prefix-search::placeholder { color:var(--text-dim); }
    .phone-prefix-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:12.5px; color:var(--text-muted); transition:background .15s, color .15s; }
    .phone-prefix-item:hover { background:rgba(56,189,248,0.06); color:#fff; }
    .phone-prefix-item.active { background:rgba(56,189,248,0.12); color:var(--accent); font-weight:600; }
    .phone-prefix-item .flag { font-size:15px; line-height:1; }
    .phone-prefix-item .name { flex:1; }
    .phone-prefix-item .code { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); }
    .phone-prefix-empty { padding:14px 8px; text-align:center; font-size:12px; color:var(--text-dim); }

    /* ── TABS ── */
    .tab { padding:5px 14px; border-radius:6px; font-size:13px; font-weight:500; border:none; cursor:pointer; transition:background .2s, color .2s; background:transparent; color:var(--text-muted); }
    .tab.active { background:rgba(56,189,248,0.12); color:var(--accent); }

    /* ── SIGNAL BARS ── */
    .bc-modo-btn { padding:5px 14px; border-radius:8px; font-size:12px; cursor:pointer; background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--text-muted); transition:all .2s; }
    .bc-modo-btn.active,.bc-modo-btn:hover { background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.35); color:#38bdf8; }
    .bc-check-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; cursor:pointer; transition:background .15s; font-size:13px; }
    .bc-check-item:hover { background:rgba(255,255,255,.04); }
    .bc-check-item input[type=checkbox] { accent-color:#38bdf8; width:14px; height:14px; cursor:pointer; }
    .signal-bar { display:inline-block; width:3px; border-radius:2px; background:var(--accent); transform-origin:bottom; }
    .signal-bar-1 { height:8px;  animation:signal-fill 1.1s ease-in-out infinite 0s; }
    .signal-bar-2 { height:12px; animation:signal-fill 1.1s ease-in-out infinite .18s; }
    .signal-bar-3 { height:16px; animation:signal-fill 1.1s ease-in-out infinite .36s; }

    /* ── KPI ICON BOX ── */
    .kpi-icon-box { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .35s var(--spring); }
    .kpi-icon-box svg { width:18px; height:18px; }
    .card-hover:hover .kpi-icon-box { transform:scale(1.1) rotate(-4deg); }

    /* ── EYE ICON ── */
    .action-eye-icon { width:13px; height:13px; flex-shrink:0; transition:transform .3s var(--spring); }
    .btn-secondary:hover .action-eye-icon { transform:scale(1.18); }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width:4px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:#1e293b; border-radius:4px; }
    ::-webkit-scrollbar-thumb:hover { background:var(--accent); }

    /* ── DIV GLOW ── */
    .div-glow { height:1px; background:linear-gradient(90deg,transparent,rgba(56,189,248,0.2),transparent); margin:16px 0; animation:glow-reveal 1s ease both; }

    /* ── BOTÓN RESTABLECER ── */
    .btn-reset-seccion {
      display:inline-flex; align-items:center; gap:6px;
      background:rgba(239,68,68,.07); color:#f87171;
      font-weight:500; font-size:12px;
      padding:8px 14px; border-radius:8px;
      border:1px solid rgba(239,68,68,.2); cursor:pointer;
      transition:background .2s, border-color .2s, transform .15s;
      white-space:nowrap; flex-shrink:0;
    }
    .btn-reset-seccion:hover {
      background:rgba(239,68,68,.15);
      border-color:rgba(239,68,68,.4);
      transform:scale(1.02);
    }
    .btn-reset-seccion svg { flex-shrink:0; }

    /* ── Licencias: botones de cabecera responsivos ── */
    .lic-header-btns { display:flex; gap:8px; width:100%; flex-wrap:nowrap; align-items:center; }
    .lic-header-btns .btn-primary,
    .lic-header-btns .btn-secondary {
      flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap;
      overflow:hidden; font-size:12px; padding:8px 10px; gap:5px;
    }
    .lic-header-btns .btn-reset-seccion { flex-shrink:0; padding:8px 10px; font-size:12px; }
    @media (min-width:640px) {
      .lic-header-btns { width:auto; }
      .lic-header-btns .btn-primary,
      .lic-header-btns .btn-secondary {
        flex:none; font-size:13px; padding:9px 18px; gap:8px;
      }
      .lic-header-btns .btn-reset-seccion { padding:8px 14px; font-size:12px; }
    }

    /* ── TOAST ── */
    .toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
    .toast-item { background:#090d16; border:1px solid var(--border); border-radius:12px; padding:12px 20px; display:flex; align-items:center; gap:10px; pointer-events:all; animation:toast-in .4s var(--spring); }

    /* ── Variante row ── */
    /* ── Header de variantes ── */
    .variante-row-header {
      display: grid;
      grid-template-columns: 1.4fr 80px 80px 60px 28px;
      gap: 6px;
      padding: 0 10px 4px;
    }
    .variante-row-header span {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
    }

    .variante-row {
      display: grid;
      grid-template-columns: 1.4fr 80px 80px 60px 28px;
      gap: 6px;
      align-items: center;
      background: rgba(56,189,248,0.02);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 8px 10px;
      transition: border-color .2s;
    }
    /* En móvil: reducir columnas numéricas para dar más espacio al nombre */
    @media (max-width: 480px) {
      .variante-row,
      .variante-row-header { grid-template-columns: 1fr 62px 62px 46px 26px; gap: 4px; }
      .variante-row input { font-size: 12px; }
    }
    .variante-row:hover { border-color: var(--border-hover); }
    .variante-row input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; width: 100%; padding: 2px 4px; }
    .variante-row input::placeholder { color: var(--text-dim); }
    .variante-del-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(239,68,68,.18); background: rgba(239,68,68,.07); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s; }
    .variante-del-btn:hover { background: rgba(239,68,68,.18); }
    .variante-del-btn svg { width: 13px; height: 13px; color: #f87171; }

    /* ── GRAD TEXT (for login screen) ── */
    .grad-text {
      background: linear-gradient(to bottom, #ffffff 30%, #93c5fd 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

    /* ── Matriz de permisos ── */
    #permisos-matriz-table th { text-align: left; }
    #permisos-matriz-table td { vertical-align: middle; border-bottom: 1px solid var(--border); }
    #permisos-matriz-table tr:last-child td { border-bottom: none; }
    #permisos-matriz-table tr:hover td { background: rgba(56,189,248,0.02); }
    .matriz-chk:not(:disabled) { cursor: pointer; }
    .matriz-chk { accent-color: var(--accent); width: 16px; height: 16px; }
      /* ── Animated field icons ────────────────────────────────── */
    .input-icon-wrap { position: relative; }
    .input-icon-wrap .field-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      width: 16px; height: 16px; pointer-events: none;
      color: var(--text-muted); transition: color 0.25s, opacity 0.25s;
      opacity: 0.55;
    }
    .input-icon-wrap input { padding-left: 38px !important; }
    .input-icon-wrap input:focus ~ .field-icon,
    .input-icon-wrap:focus-within .field-icon { color: var(--accent); opacity: 1; }
    @keyframes iconPulse {
      0%   { transform: translateY(-50%) scale(1); }
      40%  { transform: translateY(-50%) scale(1.22); }
      70%  { transform: translateY(-50%) scale(0.93); }
      100% { transform: translateY(-50%) scale(1); }
    }
    .input-icon-wrap:focus-within .field-icon { animation: iconPulse 0.35s ease; }
    .field-icon path, .field-icon circle, .field-icon polyline,
    .field-icon line, .field-icon rect, .field-icon ellipse {
      stroke-dasharray: 60; stroke-dashoffset: 0;
      transition: stroke-dashoffset 0.4s ease;
    }
        /* ── CANVAS PARTÍCULAS LOGIN ── */
    #login-particulas {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
    }
    #login-screen > div { position: relative; z-index: 1; }

    /* ==== Animaciones automáticas para iconos SVG sin animar (agregado) ==== */
    @keyframes svgAutoPulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.1); }
    }
    .svg-auto-anim {
      animation: svgAutoPulse 2.4s ease-in-out infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    .svg-auto-anim-hover {
      transition: transform 0.25s ease;
      transform-origin: center;
      transform-box: fill-box;
    }
    a:hover > .svg-auto-anim-hover,
    a:hover .svg-auto-anim-hover,
    button:hover > .svg-auto-anim-hover,
    button:hover .svg-auto-anim-hover,
    .svg-auto-anim-hover:hover {
      transform: scale(1.15) rotate(-4deg);
    }