/* ================= RESET ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ================= BODY ================= */
body{
font-family:'Segoe UI', sans-serif;
background: linear-gradient(135deg,#0f172a,#1e293b);
color:#e5e7eb;
}

.dashboard-progress{
position:fixed;
top:0;
left:0;
z-index:9999;
width:100%;
height:3px;
overflow:hidden;
opacity:0;
pointer-events:none;
transition:opacity 0.18s ease;
}

.dashboard-progress.active{
opacity:1;
}

.dashboard-progress span{
position:absolute;
top:0;
left:-35%;
width:35%;
height:100%;
border-radius:0 999px 999px 0;
background:linear-gradient(90deg,#ff3c00,#ffb020);
box-shadow:0 0 14px rgba(255,122,24,0.55);
animation:dashboardProgressLoading 1s ease-in-out infinite;
}

@keyframes dashboardProgressLoading{
0%{left:-35%;width:35%;}
55%{width:48%;}
100%{left:100%;width:35%;}
}

/* ================= LAYOUT ================= */
.layout{
display:flex;
height:100vh;
overflow:hidden;
}

/* ================= SIDEBAR ================= */
.sidebar{
width:260px;
background: rgba(17,24,39,0.85);
backdrop-filter: blur(20px);
padding:20px;
height:100vh;
overflow-y:auto;

border-right:1px solid rgba(255,255,255,0.05);
box-shadow: 5px 0 30px rgba(0,0,0,0.4);
}

/* LOGO */
.sidebar h2{
margin-bottom:30px;
font-size:22px;
font-weight:700;
color:white;
}

/* ================= BOTÕES MENU ================= */
.sidebar button{
width:100%;
display:flex;
align-items:center;
gap:10px;

padding:12px;
margin-bottom:8px;

background:transparent;
border:none;
color:#9ca3af;

cursor:pointer;
border-radius:10px;

font-size:14px;
transition:all 0.25s ease;
position:relative;
}

/* ÍCONES */
.icon {
width: 20px;
height: 20px;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}

.icon-pedidos{
width: 26px;
height: 26px;
}

/* MENU ITEM */
.menu-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
}

/* ================= HOVER ================= */
.sidebar button:hover{
background: rgba(255,60,0,0.12);
color:#ff7a18;
transform:translateX(3px);
}

/* ================= ATIVO ================= */
.sidebar button.active{
background: rgba(255,60,0,0.15);
color:#ff3c00;
font-weight:500;
}

.sidebar button.pedido-alerta{
background:transparent;
color:#9ca3af;
font-weight:400;
animation:none;
}

.sidebar button.pedido-alerta .icon-pedidos{
animation:none;
}

.submenu button.pedido-alerta{
background: rgba(255,60,0,0.12);
color:#ff7a18;
}

.menu-badge{
display:none;
align-items:center;
justify-content:center;
min-width:20px;
height:20px;
padding:0 6px;
margin-left:auto;
border-radius:999px;
background:#ef4444;
color:white;
font-size:11px;
font-weight:800;
box-shadow:0 0 14px rgba(239,68,68,0.65);
}

.menu-badge.pedido-alerta{
animation:none;
box-shadow:none;
}

/* ÍCONE SEGUE COR */
.sidebar button svg{
stroke: currentColor;
}

/* ================= GLOW ANIMADO ================= */
.sidebar > button.active::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:10px;
  padding:1px;

  background: linear-gradient(45deg,#ff3c00,#ff7a18,#ff3c00);

  -webkit-mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:1;
}

.sidebar > button.active{
  animation: glowPulse 6s infinite ease-in-out;
}

#menuPedidosBtn.active{
  animation:none;
}

#menuPedidosBtn.active::before{
  display:none;
}

.sidebar > button.active.pedido-alerta{
  animation: glowPulse 6s infinite ease-in-out;
}


@keyframes glowPulse{
0%{
box-shadow:0 0 5px rgba(255,60,0,0.3),
0 0 10px rgba(255,122,24,0.2);
}
50%{
box-shadow:0 0 12px rgba(255,60,0,0.6),
0 0 30px rgba(255,122,24,0.4);
}
100%{
box-shadow:0 0 5px rgba(255,60,0,0.3),
0 0 10px rgba(255,122,24,0.2);
}
}

@keyframes pedidoPulse{
0%{
transform:translateX(0) scale(1);
box-shadow:0 0 0 0 rgba(239,68,68,0.45);
}
70%{
transform:translateX(3px) scale(1.03);
box-shadow:0 0 0 9px rgba(239,68,68,0);
}
100%{
transform:translateX(0) scale(1);
box-shadow:0 0 0 0 rgba(239,68,68,0);
}
}

@keyframes pedidoBadgePulse{
0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(239,68,68,0.45);
}
70%{
transform:scale(1.2);
box-shadow:0 0 0 8px rgba(239,68,68,0);
}
100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(239,68,68,0);
}
}

@keyframes pedidoIconPulse{
0%{
transform:scale(1);
filter:drop-shadow(0 0 0 rgba(239,68,68,0));
}
70%{
transform:scale(1.18);
filter:drop-shadow(0 0 8px rgba(239,68,68,0.9));
}
100%{
transform:scale(1);
filter:drop-shadow(0 0 0 rgba(239,68,68,0));
}
}

/* ================= SUBMENU ================= */
.submenu{
max-height:0;
overflow:hidden;
transition:all 0.3s ease;
padding-left:10px;
margin-bottom:5px;
}

.submenu.open{
max-height:none;
margin-bottom:10px;
}

/* SUBMENU BOTÕES */
.submenu button{
background:transparent;
font-size:13px;
padding:10px;
color:#9ca3af;
border-radius:8px;
padding-left:20px;
}

.submenu button:hover{
background: rgba(255,255,255,0.04);
color:#ffffff;
}

.submenu button.active{
background: rgba(255,255,255,0.04);
color: #ff3c00;
font-weight: 500;
transform: translateX(4px);
}

/* ================= MAIN ================= */
.main{
flex:1;
background:#f9fafb;
height:100vh;
position:relative;
}

/* ================= IFRAME ================= */
iframe{
width:100%;
height:100%;
border:none;
background:white;
}

/* ================= TITULOS ================= */
h1{
margin-bottom:20px;
color:#111827;
}

/* ================= INPUTS ================= */
input{
padding:12px;
width:400px;
margin-bottom:10px;

border-radius:10px;
border:1px solid #e5e7eb;

background:white;
transition:0.25s;
}

input:focus{
outline:none;
border-color:#ff3c00;
box-shadow:0 0 0 3px rgba(255,60,0,0.2);
}

/* ================= BOTÕES ================= */
.main button{
padding:10px 16px;
border-radius:10px;
border:none;

background: linear-gradient(45deg,#ff3c00,#ff7a18);
color:white;

cursor:pointer;
transition:all 0.25s ease;
}

.main button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(255,60,0,0.4);
}

/* ================= RESPONSIVO ================= */
@media(max-width:900px){
.sidebar{
width:200px;
}
}

@media(max-width:768px){
.sidebar{
display:none;
}
.main{
width:100%;
}
input{
width:100%;
}
}

/* ================= CHAT ================= */
#chatPopup{
position:fixed;
right:20px;
bottom:20px;

width:65px;
height:65px;

background: linear-gradient(135deg,#ff3c00,#ff7a18);
border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
z-index:9999;

box-shadow:0 10px 30px rgba(0,0,0,0.4);
transition:0.3s;
}

#chatPopup:hover{
transform:scale(1.1);
box-shadow:0 15px 40px rgba(0,0,0,0.6);
}

#chatPopup.chat-oculto{
opacity:0;
pointer-events:none;
transform:translateY(12px) scale(0.92);
}

#chatPopup img{
width:30px;
height:30px;
filter: brightness(0) invert(1);
}

.chat-badge{
position:absolute;
top:-6px;
right:-6px;
display:none;
align-items:center;
justify-content:center;
min-width:22px;
height:22px;
padding:0 6px;
border-radius:999px;
background:#ef4444;
color:white;
font-size:12px;
font-weight:800;
border:2px solid #111827;
}

#chatPopup.nova-msg{
animation: chatPulse 0.7s ease;
}

@keyframes chatPulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.16);
}
100%{
transform:scale(1);
}
}