Preview de mixed.css
/* MIXED CSS PACK */
/* Template: ches_cafe/index.php */
/* Template mtime: 2025-12-31 16:30:24 */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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;
transition:var(--transition-smooth);
}
details.sidebar-widget>summary{
list-style:none;
cursor:pointer;
padding:11px 12px;
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;
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;
}
.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;
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; }
.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;
}
.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;
}
.sidebar-navwrap{
flex:1 1 auto;
min-height:0;
overflow:hidden; /* ✅ desktop: SIN scroll por defecto */
padding:8px 12px 10px;
overscroll-behavior: contain;
}
/* ✅ SI NO ENTRA TODO EL MENU, habilita scroll SOLO cuando hace falta */
.sidebar-navwrap.auto-scroll{
overflow-y:auto !important;
padding-right:6px;
}
.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;
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; }
.sidebar-navwrap{ overflow-y:auto; } /* mobile: sí scroll */
}
/* 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 */
.caja-lista{ display:flex; flex-direction:column; gap:6px; }
.stat-row.stat-mini{
padding:6px 0;
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;
font-weight:900;
line-height:1;
}
/* ===========================
✅ VISTA MESAS (NO MODAL)
=========================== */
.view-switch .btn.is-active{
background: rgba(96,165,250,.18)!important;
border: 1px solid rgba(96,165,250,.35)!important;
box-shadow: 0 10px 26px rgba(96,165,250,.18);
}
.mesas-shell{
max-width: 1400px;
margin: 0 auto;
}
.tables-grid{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap:18px;
}
.table-container{
height: 720px;
border-radius: var(--radius-lg);
overflow:hidden;
background: linear-gradient(180deg, rgba(30,41,59,.35) 0%, rgba(15,23,42,.35) 100%);
border: var(--border-glass);
box-shadow: 0 14px 40px rgba(0,0,0,.35);
position:relative;
}
.table-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
background: linear-gradient(90deg, rgba(255,255,255,.05), transparent);
}
.mesa-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.20);
font-weight:900;
letter-spacing:.2px;
}
.table-frame{
width:100%;
height: calc(100% - 48px);
border:0;
background:#000;
}
@media (max-width: 768px){
.tables-grid{ grid-template-columns: 1fr; }
.table-container{ height: 640px; }
}
/* Panel de Control (modal) */
.panel-control-list .panel-nav{
padding-left:0;
margin:0;
}
.panel-control-list .panel-nav .nav-item{ list-style:none; margin:0; }
.panel-control-list .panel-nav .nav-item + .nav-item{ margin-top:10px; }
.panel-control-list .sidebar-section-title{
margin:16px 0 8px;
padding:6px 10px;
border-radius:999px;
display:inline-block;
font-size:12px;
letter-spacing:.6px;
text-transform:uppercase;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:rgba(255,255,255,.85);
}
.panel-control-list .panel-nav a{
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:16px;
text-decoration:none;
color:rgba(255,255,255,.92);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
transition: all .18s ease;
}
.panel-control-list .panel-nav a:hover{
background:rgba(255,255,255,.10);
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.panel-control-list .panel-nav a i{
font-size:1.05rem;
opacity:.95;
}
.panel-control-list .panel-nav a .nav-text{
font-weight:800;
letter-spacing:.2px;
}
/* ===== 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%} }