/* MIXED CSS PACK */
/* Template: take-away/index.php */
/* Template mtime: 2025-12-19 01:09:47 */

/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
:root{
            --bg-void:#05060a;
            --bg-glass: rgba(18,22,30,.88);
            --bg-glass-hover: rgba(28,34,46,.72);
            --accent-primary:#60a5fa;
            --accent-secondary:#818cf8;
            --accent-tertiary:#a78bfa;
            --accent-gradient: linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);
            --success:#22c55e;
            --danger:#ef4444;
            --warning:#f59e0b;

            --text-main:#f8fafc;
            --text-muted:#94a3b8;
            --text-dim:#64748b;

            --border-glass:1px solid rgba(255,255,255,.08);
            --border-glass-hover:1px solid rgba(255,255,255,.15);
            --glass-filter: blur(16px);

            --radius-xl:24px;
            --radius-lg:16px;
            --radius-md:12px;
            --radius-sm:8px;

            /* ✅ MAS ANCHA (como pediste) */
            --sidebar-width:380px;
            --sidebar-compact:80px;

            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        html,body{height:100%}
        body{
            background:var(--bg-void);
            color:var(--text-main);
            font-family:'Inter',sans-serif;
            margin:0;
            overflow-x:hidden;
            font-size:15px;
            line-height:1.35;
            background-image:
                radial-gradient(circle at 15% 50%, rgba(56,189,248,.04) 0%, transparent 28%),
                radial-gradient(circle at 85% 30%, rgba(139,92,246,.06) 0%, transparent 30%);
        }

        .text-muted,.text-body-secondary{ color:var(--text-muted)!important; }
        h1,h2,h3,h4,h5,h6{
            font-family:'Outfit',sans-serif;
            letter-spacing:-.02em;
            color:#fff;
        }
        .text-gradient{
            background:var(--accent-gradient);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
        }

        /* SCROLLBAR */
        ::-webkit-scrollbar{width:6px}
        ::-webkit-scrollbar-track{background:rgba(255,255,255,.03); border-radius:10px}
        ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:10px}
        ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}

        /* SIDEBAR */
        .sidebar{
            width:var(--sidebar-width);
            height:calc(100vh - 24px);
            position:fixed;
            top:12px; left:12px;
            border-radius:var(--radius-xl);
            background:var(--bg-glass);
            backdrop-filter:var(--glass-filter);
            -webkit-backdrop-filter:var(--glass-filter);
            border:var(--border-glass);
            z-index:1000;
            display:flex;
            flex-direction:column;
            box-shadow:
                0 20px 60px rgba(0,0,0,.4),
                0 0 0 1px rgba(255,255,255,.03),
                inset 0 1px 0 rgba(255,255,255,.05);
            overflow:hidden;
            transition:transform .3s cubic-bezier(.34,1.56,.64,1);
        }

        .sidebar.compact{ width:var(--sidebar-compact); transition:var(--transition-smooth); }

        .sidebar.compact .sidebar-header .logo-text,
        .sidebar.compact .sidebar-section-title,
        .sidebar.compact .nav-item .nav-text,
        .sidebar.compact .widget-sub,
        .sidebar.compact details.sidebar-widget .widget-body,
        .sidebar.compact .sidebar-footer .user-info,
        .sidebar.compact .sidebar-footer .btn{
            display:none!important;
        }
        .sidebar.compact .nav-item a{ justify-content:center; padding:12px; }
        .sidebar.compact .nav-item a i{ margin-right:0; font-size:1.3rem; }
        .sidebar.compact .logo-rebote{ margin:0 auto; }

        .sidebar-header{
            padding:16px 18px;
            border-bottom:var(--border-glass);
            flex:0 0 auto;
            background:rgba(0,0,0,.2);
        }

        .logo-rebote{
            width:46px; height:46px;
            border-radius:50%;
            background:#fff;
            border:3px solid rgba(255,255,255,.15);
            box-shadow:
                0 0 20px rgba(255,255,255,.25),
                0 0 40px rgba(96,165,250,.2);
            animation:rebote 3s ease-in-out infinite;
            cursor:pointer;
            transition:var(--transition-smooth);
        }
        @keyframes rebote{
            0%,100%{transform:translate(0,0) rotate(0deg)}
            25%{transform:translate(3px,2px) rotate(2deg)}
            50%{transform:translate(-2px,3px) rotate(-2deg)}
            75%{transform:translate(2px,-1px) rotate(1deg)}
        }

        /* CONTENIDO SIDEBAR */
        .sidebar-content{
            flex:1 1 auto;
            min-height:0;
            display:flex;
            flex-direction:column;
            overflow:hidden;
        }

        /* ✅ cajas ARRIBA pero COMPACTAS */
        .sidebar-top{
            flex:0 0 auto;
            padding:10px 12px 8px;
            border-bottom:var(--border-glass);
            background:rgba(0,0,0,.13);
        }

        details.sidebar-widget{
            border:var(--border-glass);
            border-radius:var(--radius-lg);
            overflow:hidden;
            background:linear-gradient(135deg, rgba(30,41,59,.25) 0%, rgba(15,23,42,.25) 100%);
            margin-bottom:10px; /* mas compacto */
            transition:var(--transition-smooth);
        }
        details.sidebar-widget>summary{
            list-style:none;
            cursor:pointer;
            padding:11px 12px; /* ✅ más compacto */
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            user-select:none;
            font-weight:800;
            color:#fff;
        }
        details.sidebar-widget>summary::-webkit-details-marker{display:none}

        details.sidebar-widget>summary::after{
            content:'';
            width:6px;height:6px;
            border-right:2px solid var(--text-muted);
            border-bottom:2px solid var(--text-muted);
            transform:rotate(45deg);
            transition:var(--transition-smooth);
            margin-right:4px;
        }
        details.sidebar-widget[open]>summary::after{
            transform:rotate(-135deg);
            border-color:var(--accent-primary);
        }

        .widget-sub{
            font-size:.76rem;
            color:var(--text-muted);
            font-weight:700;
            background:rgba(255,255,255,.05);
            padding:3px 8px;
            border-radius:999px;
            white-space:nowrap;
        }

        .widget-body{
            padding:10px 12px 12px; /* ✅ más compacto */
            animation:fadeIn 0.2s ease-out;
        }
        @keyframes fadeIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }

        .card-elite{
            background:linear-gradient(180deg, rgba(30,41,59,.4) 0%, rgba(15,23,42,.4) 100%);
            backdrop-filter:blur(12px);
            border:var(--border-glass);
            border-radius:var(--radius-lg);
            box-shadow:0 12px 32px rgba(0,0,0,.3);
            overflow:hidden;
        }

        .card-header-elite{
            padding:11px 12px;
            border-bottom:1px solid rgba(255,255,255,.08);
            background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, transparent 100%);
        }

        .stat-row{
            padding:6px 0;
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .stat-row:last-child{border-bottom:none}

        .stat-val{
            font-family:'Outfit',sans-serif;
            font-weight:800;
            color:#fff;
            font-size:.98rem;
        }

        /* ✅ Caja en 2 columnas ADENTRO (para que no coma altura) */
        .caja-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:0 14px;
        }
        .caja-grid .stat-row{
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .caja-grid .stat-row:nth-last-child(-n+2){
            border-bottom:none;
        }

        .sidebar-section-title{
            padding:10px 6px 6px;
            color:rgba(255,255,255,.62);
            text-transform:uppercase;
            font-weight:900;
            letter-spacing:1.8px;
            font-size:.62rem; /* ✅ más compacto */
            margin-top:4px;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .sidebar-section-title::before,
        .sidebar-section-title::after{
            content:'';
            flex:1;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
        }

        .nav-item{ margin-bottom:6px; position:relative; }

        /* ✅ links más compactos para que ENTREN todos (sin scroll) */
        .nav-item a{
            color:rgba(255,255,255,.90);
            padding:10px 12px;
            border-radius:var(--radius-md);
            display:flex;
            align-items:center;
            text-decoration:none;
            font-weight:800;
            font-size:.93rem;
            transition:var(--transition-smooth);
            border:1px solid transparent;
            position:relative;
            overflow:hidden;
        }
        .nav-item a:hover{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.12);
            transform:translateX(2px);
        }
        .nav-item a i{
            font-size:1.05rem;
            margin-right:10px;
            color:rgba(255,255,255,.62);
            width:20px;
            text-align:center;
        }
        .nav-tooltip{ display:none; } /* ✅ no suma ruido y no rompe */

        .status-badge{
            width:10px;height:10px;border-radius:50%;
            display:inline-block;margin-right:10px;
        }
        .status-active{
            background:var(--success);
            box-shadow:0 0 0 rgba(34,197,94,.7);
            animation:pulse-green 2s infinite;
        }
        @keyframes pulse-green{
            0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}
            70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
            100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
        }

        .sidebar-footer{
            padding:12px 14px;
            border-top:var(--border-glass);
            background:linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.5) 100%);
            flex:0 0 auto;
        }

        .user-avatar{
            width:40px;height:40px;border-radius:50%;
            border:2px solid var(--accent-primary);
            padding:2px;background:rgba(0,0,0,.3);
            position:relative;
        }
        .user-status{
            position:absolute; bottom:0; right:0;
            width:10px;height:10px;background:var(--success);
            border-radius:50%; border:2px solid #000;
        }

        /* ✅ SIN SCROLL EN DESKTOP (y entra todo por los ajustes + auto-cierre si falta altura) */
        .sidebar-navwrap{
            flex:1 1 auto;
            min-height:0;
            overflow:hidden; /* ✅ no scroll */
            padding:8px 12px 10px;
            overscroll-behavior: contain;
        }

        .main-content{
            margin-left:calc(var(--sidebar-width) + 24px);
            padding:20px 24px;
            min-height:100vh;
            transition:var(--transition-smooth);
        }
        .main-content.expanded{
            margin-left:calc(var(--sidebar-compact) + 24px);
        }

        .btn{
            border:none;
            font-weight:800;
            padding:.65rem 1.1rem;
            border-radius:var(--radius-md);
            transition:var(--transition-smooth);
        }
        .btn-secondary{
            background:rgba(255,255,255,.12);
            color:#fff;
            border:1px solid rgba(255,255,255,.1);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.18);
            transform:translateY(-1px);
            box-shadow:0 8px 20px rgba(0,0,0,.25);
        }
        .btn-primary-elite{
            background:var(--accent-gradient);
            color:#fff;
            box-shadow:0 8px 28px rgba(96,165,250,.3);
            border:1px solid rgba(96,165,250,.3);
        }

        .sidebar-toggle{
            position:absolute;
            top:20px;
            right:-12px;
            width:24px;
            height:24px;
            background:var(--bg-glass);
            border:var(--border-glass);
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            color:var(--text-muted);
            transition:var(--transition-smooth);
            z-index:1001;
        }
        .sidebar-toggle:hover{
            background:var(--accent-primary);
            color:white;
            transform:scale(1.08);
        }

        /* ✅ Mostrador más angosto y prolijo */
        .mostrador-shell{
            max-width:1100px; /* ✅ achica ancho general del mostrador */
            margin:0 auto;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .sidebar{
                transform:translateX(-120%);
                width:320px;
                height:100vh;
                top:0;
                left:0;
                border-radius:0 var(--radius-xl) var(--radius-xl) 0;
            }
            .sidebar.active{ transform:translateX(0); }
            .main-content{ margin-left:0; padding:16px; }
            .sidebar-toggle{ display:none; }

            /* mobile: permitimos scroll porque es imposible garantizar altura */
            .sidebar-navwrap{ overflow-y:auto; }
        }

        /* MODALS */
        .modal-content{
            background:rgba(10,12,18,.92);
            border:1px solid rgba(255,255,255,.15);
            backdrop-filter:blur(28px);
            -webkit-backdrop-filter:blur(28px);
            border-radius:24px;
            box-shadow:0 30px 100px rgba(0,0,0,.7);
        }
        .modal-header{
            border-bottom:1px solid rgba(255,255,255,.1);
            padding:20px 24px;
        }
        .modal-footer{
            border-top:1px solid rgba(255,255,255,.1);
            padding:20px 24px;
        }
        .form-control{
            background:rgba(0,0,0,.4);
            border:1px solid rgba(255,255,255,.15);
            color:#fff;
            border-radius:var(--radius-md);
            padding:14px 16px;
            transition:var(--transition-smooth);
        }
        .form-control:focus{
            background:rgba(0,0,0,.6);
            border-color:var(--accent-primary);
            box-shadow:0 0 0 4px rgba(96,165,255,.15), 0 8px 24px rgba(0,0,0,.3);
        }
        .form-control::placeholder{ color:rgba(255,255,255,.4); }
        /* Caja: lista vertical compacta (sin comer altura) */
.caja-lista{ display:flex; flex-direction:column; gap:6px; }

.stat-row.stat-mini{
  padding:6px 0;              /* más chico */
  border-bottom:1px solid rgba(255,255,255,.07);
}

.stat-row.stat-mini:last-child{ border-bottom:none; }

.stat-row.stat-mini .text-muted{
  font-size:.82rem;
  letter-spacing:.2px;
}

.stat-row.stat-mini .stat-val{
  font-size:.95rem;           /* valor un toque más chico */
  font-weight:900;
  line-height:1;
}

/* ===== INLINE <style> BLOCK #2 ===== */
#fxProgress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:rgba(255,255,255,0.1); }
        #fxProgress span { display:block; height:100%; background:var(--accent-primary); width:0; animation:loading 1s infinite; }
        @keyframes loading { 0%{width:0;left:0} 50%{width:50%} 100%{width:0;left:100%} }