
/* V226 - Atalhos com ícones SVG profissionais e mobile em slide único */
.quick-action-card .quick-icon-v226,
.quick-action-card span.quick-icon-v226{
  position:relative!important;
  z-index:2!important;
  width:48px!important;
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,var(--primary,#0f6cad),color-mix(in srgb,var(--primary,#0f6cad) 70%, #0f172a 30%))!important;
  box-shadow:0 12px 26px rgba(15,23,42,.16)!important;
  color:#fff!important;
  font-size:0!important;
}

.quick-action-card .quick-icon-v226 svg{
  width:25px!important;
  height:25px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.quick-action-card:nth-child(2) .quick-icon-v226{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important}
.quick-action-card:nth-child(3) .quick-icon-v226{background:linear-gradient(135deg,#8b5cf6,#6d28d9)!important}
.quick-action-card:nth-child(4) .quick-icon-v226{background:linear-gradient(135deg,#f59e0b,#ea580c)!important}
.quick-action-card:nth-child(5) .quick-icon-v226{background:linear-gradient(135deg,#06b6d4,#0284c7)!important}
.quick-action-card:nth-child(6) .quick-icon-v226{background:linear-gradient(135deg,#ef4444,#b91c1c)!important}
.quick-action-card:nth-child(7) .quick-icon-v226{background:linear-gradient(135deg,#ec4899,#be185d)!important}

@supports not (color: color-mix(in srgb, white 10%, black)){
  .quick-action-card .quick-icon-v226{background:var(--primary,#0f6cad)!important}
}

/* Mobile: uma única linha com slide, sem barra de rolagem */
@media(max-width:760px){
  .quick-actions-app{
    margin:-20px 0 8px!important;
    overflow:hidden!important;
  }

  .quick-actions-scroll{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 14px 8px!important;
    margin:0!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .quick-actions-scroll::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }

  .quick-action-card{
    flex:0 0 98px!important;
    width:98px!important;
    min-width:98px!important;
    min-height:86px!important;
    scroll-snap-align:start!important;
    border-radius:18px!important;
    padding:10px 7px!important;
    gap:7px!important;
  }

  .quick-action-card .quick-icon-v226,
  .quick-action-card span.quick-icon-v226{
    width:38px!important;
    height:38px!important;
    border-radius:14px!important;
  }

  .quick-action-card .quick-icon-v226 svg{
    width:20px!important;
    height:20px!important;
    stroke-width:2!important;
  }

  .quick-action-card strong{
    font-size:11px!important;
    line-height:1.1!important;
  }
}

@media(max-width:420px){
  .quick-action-card{
    flex-basis:92px!important;
    width:92px!important;
    min-width:92px!important;
  }
}


/* V227 - Mobile: atalhos não passam por cima do banner destaque */
@media(max-width:760px){
  .quick-actions-app{
    margin:12px 0 12px!important;
    padding-top:0!important;
    position:relative!important;
    z-index:2!important;
  }

  .hero,
  .hero-carousel{
    margin-bottom:0!important;
    position:relative!important;
    z-index:1!important;
  }

  .quick-actions-scroll{
    position:relative!important;
    z-index:2!important;
  }
}

@media(max-width:420px){
  .quick-actions-app{
    margin-top:10px!important;
  }
}


/* V228 - Atalhos em cor única branca com transparência leve */
.quick-action-card{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
}

.quick-action-card::before,
.quick-action-card::after{
  display:none!important;
}

.quick-action-card .quick-icon-v226,
.quick-action-card span.quick-icon-v226,
.quick-action-card:nth-child(2) .quick-icon-v226,
.quick-action-card:nth-child(3) .quick-icon-v226,
.quick-action-card:nth-child(4) .quick-icon-v226,
.quick-action-card:nth-child(5) .quick-icon-v226,
.quick-action-card:nth-child(6) .quick-icon-v226,
.quick-action-card:nth-child(7) .quick-icon-v226{
  background:rgba(255,255,255,.38)!important;
  color:#0f172a!important;
  box-shadow:none!important;
  border:1px solid rgba(255,255,255,.56)!important;
}

.quick-action-card .quick-icon-v226 svg{
  stroke:#0f172a!important;
}

.quick-action-card strong{
  color:#0f172a!important;
}

.quick-action-card:hover{
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:none!important;
}

@media(max-width:760px){
  .quick-action-card{
    background:rgba(255,255,255,.68)!important;
    border-color:rgba(255,255,255,.50)!important;
    backdrop-filter:blur(8px)!important;
  }

  .quick-action-card .quick-icon-v226,
  .quick-action-card span.quick-icon-v226{
    background:rgba(255,255,255,.32)!important;
  }
}


/* V229 - Mantém card branco/transparente, mas volta ícones coloridos e barrinha azul */
.quick-action-card{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.52)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
}

.quick-action-card::before{
  display:none!important;
}

.quick-action-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:0!important;
  height:3px!important;
  border-radius:999px 999px 0 0!important;
  background:var(--primary,#0f6cad)!important;
  transform:scaleX(.42)!important;
  transform-origin:center!important;
  opacity:.78!important;
  transition:transform .18s ease, opacity .18s ease!important;
}

.quick-action-card:hover{
  background:rgba(255,255,255,.86)!important;
  border-color:var(--primary,#0f6cad)!important;
  box-shadow:none!important;
}

.quick-action-card:hover::after{
  transform:scaleX(1)!important;
  opacity:1!important;
}

/* Ícones coloridos como antes */
.quick-action-card .quick-icon-v226,
.quick-action-card span.quick-icon-v226{
  background:linear-gradient(135deg,var(--primary,#0f6cad),color-mix(in srgb,var(--primary,#0f6cad) 70%, #0f172a 30%))!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(15,23,42,.12)!important;
  border:0!important;
}

.quick-action-card .quick-icon-v226 svg{
  stroke:#ffffff!important;
}

.quick-action-card:nth-child(2) .quick-icon-v226{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important}
.quick-action-card:nth-child(3) .quick-icon-v226{background:linear-gradient(135deg,#8b5cf6,#6d28d9)!important}
.quick-action-card:nth-child(4) .quick-icon-v226{background:linear-gradient(135deg,#f59e0b,#ea580c)!important}
.quick-action-card:nth-child(5) .quick-icon-v226{background:linear-gradient(135deg,#06b6d4,#0284c7)!important}
.quick-action-card:nth-child(6) .quick-icon-v226{background:linear-gradient(135deg,#ef4444,#b91c1c)!important}
.quick-action-card:nth-child(7) .quick-icon-v226{background:linear-gradient(135deg,#ec4899,#be185d)!important}

.quick-action-card strong{
  color:#0f172a!important;
}

@media(max-width:760px){
  .quick-action-card{
    background:rgba(255,255,255,.68)!important;
    border-color:rgba(255,255,255,.50)!important;
  }

  .quick-action-card:hover{
    border-color:var(--primary,#0f6cad)!important;
  }

  .quick-action-card .quick-icon-v226,
  .quick-action-card span.quick-icon-v226{
    box-shadow:0 8px 18px rgba(15,23,42,.12)!important;
  }
}
