/* ================================================================
   CDS VEI v27.3.5 — UX / LEGIBILIDADE / LED GLASS / ACTIVE SIDEBAR
   - sem animações infinitas
   - otimizado para Full HD / 2K / 4K
   - foco em transform/opacity e feedback curto
   ================================================================ */

:root{
  --cds-font-base:clamp(15px,calc(14.2px + .10vw),18px);
  --cds-font-ui:clamp(14px,calc(13.4px + .10vw),17px);
  --cds-font-menu:clamp(15px,calc(14px + .12vw),18px);
  --cds-font-small:clamp(11px,calc(10.6px + .08vw),14px);
  --cds-line:1.55;
  --cds-fast:160ms;
  --cds-normal:220ms;
  --cds-ease:cubic-bezier(.2,.86,.24,1);
}

html{
  font-size:var(--cds-font-base);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:Inter,"Segoe UI Variable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;
  line-height:var(--cds-line);
  font-kerning:normal;
  font-optical-sizing:auto;
  font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  font-synthesis:none;
}

/* Evita quebras destrutivas nos textos funcionais */
#main-sidebar .menu-text,
main p,
main label,
main li,
main td,
main th,
main button,
main input,
main select,
main textarea,
.cms-panel,
.oficinas-shell{
  word-break:normal;
  overflow-wrap:break-word;
  hyphens:manual;
}

/* Legibilidade dos elementos funcionais sem inflar micro-rótulos decorativos */
main input,
main select,
main textarea,
main button,
main [role="button"],
#oficinas-modal input,
#oficinas-modal select,
#oficinas-modal textarea,
#oficinas-modal button{
  font-size:var(--cds-font-ui) !important;
  line-height:1.35;
}

main p,
main li,
main td,
main th,
main label,
#oficinas-modal .oficinas-field > span,
#oficinas-modal .oficinas-result-main strong,
#oficinas-modal .oficinas-result-main span{
  font-size:max(.82rem,13px);
}

#main-sidebar .menu-header{
  font-size:var(--cds-font-small) !important;
  line-height:1.25;
  letter-spacing:.12em;
}

#main-sidebar .menu-text{
  font-size:var(--cds-font-menu) !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* micro-kicker do menu continua compacto, porém mais legível */
#main-sidebar .menu-text::before{
  font-size:clamp(9px,calc(8.4px + .10vw),12px) !important;
  line-height:1.1 !important;
  letter-spacing:.13em !important;
}

/* Inputs mais confortáveis */
main input,
main select,
main textarea,
#oficinas-modal input,
#oficinas-modal select,
#oficinas-modal textarea{
  min-height:42px;
}

/* ----------------------------------------------------------------
   SIDEBAR GLASS + LED
   ---------------------------------------------------------------- */
#main-sidebar .menu-card{
  position:relative;
  isolation:isolate;
  min-height:64px !important;
  border-radius:18px !important;
  border:1px solid rgba(226,240,255,.10) !important;
  border-left:4px solid rgba(var(--mc-color),.40) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015) 28%,rgba(3,8,15,.74)),
    linear-gradient(135deg,rgba(var(--mc-color),.09),rgba(3,8,15,.82) 54%,rgba(2,6,12,.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -10px 20px rgba(0,0,0,.22),
    0 10px 24px rgba(0,0,0,.30),
    0 0 0 1px rgba(var(--mc-color),.07) !important;
  transition:
    transform var(--cds-fast) var(--cds-ease),
    box-shadow var(--cds-normal) ease,
    border-color var(--cds-fast) ease,
    background var(--cds-fast) ease,
    filter var(--cds-fast) ease !important;
  animation:none !important;
  will-change:transform,box-shadow,filter;
}

#main-sidebar .menu-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:.22 !important;
  background:
    radial-gradient(circle at 13% 50%,rgba(var(--mc-color),.32),rgba(var(--mc-color),.10) 18%,transparent 44%),
    linear-gradient(110deg,transparent 25%,rgba(255,255,255,.05) 42%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.05) 58%,transparent 76%) !important;
  transform:translateX(-5%);
  transition:opacity var(--cds-fast),transform var(--cds-normal),filter var(--cds-fast) !important;
  animation:none !important;
}

#main-sidebar .menu-card::after{
  content:"" !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:inherit !important;
  z-index:1 !important;
  pointer-events:none !important;
  display:block !important;
  opacity:.55 !important;
  border:1px solid rgba(var(--mc-color),.18) !important;
  box-shadow:0 0 0 rgba(var(--mc-color),0) !important;
  transition:opacity var(--cds-fast),border-color var(--cds-fast),box-shadow var(--cds-normal) !important;
  animation:none !important;
}

#main-sidebar .menu-card > *{
  position:relative;
  z-index:2;
}

#main-sidebar .menu-icon-3d{
  width:46px !important;
  height:46px !important;
  border-radius:14px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.26),rgba(255,255,255,.07) 24%,rgba(11,16,25,.86) 70%) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.22),
    inset 0 -4px 9px rgba(0,0,0,.52),
    0 5px 12px rgba(0,0,0,.30),
    0 0 0 1px rgba(var(--mc-color),.06) !important;
  transition:
    transform var(--cds-fast) var(--cds-ease),
    box-shadow var(--cds-fast),
    border-color var(--cds-fast),
    filter var(--cds-fast) !important;
}

/* Hover: LED mais intenso */
#main-sidebar .menu-card:hover,
#main-sidebar:hover .menu-card:hover,
#main-sidebar .menu-card.cds-led-hover{
  transform:translateY(-3px) scale(1.018) !important;
  border-color:rgba(var(--mc-color),.82) !important;
  border-left-color:rgb(var(--mc-color)) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 28%,rgba(4,9,16,.80)),
    linear-gradient(135deg,rgba(var(--mc-color),.30),rgba(var(--mc-color),.14) 38%,rgba(4,9,16,.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -10px 20px rgba(0,0,0,.20),
    0 18px 36px rgba(0,0,0,.36),
    0 0 16px rgba(var(--mc-color),.44),
    0 0 34px rgba(var(--mc-color),.30),
    0 0 58px rgba(var(--mc-color),.17) !important;
  filter:brightness(1.08) saturate(1.08);
}

#main-sidebar .menu-card:hover::before,
#main-sidebar .menu-card.cds-led-hover::before{
  opacity:.92 !important;
  transform:translateX(5%) !important;
  filter:brightness(1.18);
}

#main-sidebar .menu-card:hover::after,
#main-sidebar .menu-card.cds-led-hover::after{
  opacity:1 !important;
  border-color:rgba(var(--mc-color),.74) !important;
  box-shadow:
    inset 0 0 15px rgba(var(--mc-color),.12),
    0 0 18px rgba(var(--mc-color),.42),
    0 0 34px rgba(var(--mc-color),.18) !important;
}

#main-sidebar .menu-card:hover .menu-icon-3d,
#main-sidebar .menu-card.cds-led-hover .menu-icon-3d{
  transform:translateY(-1px) scale(1.065) !important;
  border-color:rgba(var(--mc-color),.90) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.30),
    inset 0 -4px 9px rgba(0,0,0,.48),
    0 0 17px rgba(var(--mc-color),.62),
    0 0 32px rgba(var(--mc-color),.34) !important;
  filter:drop-shadow(0 0 9px rgba(var(--mc-color),.62));
}

#main-sidebar .menu-card:hover .menu-text,
#main-sidebar .menu-card.cds-led-hover .menu-text{
  color:#fff !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.90),
    0 0 13px rgba(var(--mc-color),.50),
    0 0 28px rgba(var(--mc-color),.23) !important;
}

/* Estado ativo persistente */
#main-sidebar .menu-card.active,
#main-sidebar .menu-card[aria-current="page"]{
  transform:translateX(3px) !important;
  color:#fff !important;
  border-color:rgba(var(--mc-color),.94) !important;
  border-left:5px solid rgb(var(--mc-color)) !important;
  background:
    radial-gradient(circle at 15% 50%,rgba(var(--mc-color),.23),transparent 44%),
    linear-gradient(135deg,rgba(var(--mc-color),.22),rgba(7,14,23,.91)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 20px rgba(var(--mc-color),.10),
    0 0 17px rgba(var(--mc-color),.43),
    0 0 38px rgba(var(--mc-color),.22),
    0 14px 30px rgba(0,0,0,.34) !important;
}

#main-sidebar .menu-card.active::after,
#main-sidebar .menu-card[aria-current="page"]::after{
  opacity:1 !important;
  border-color:rgba(var(--mc-color),.70) !important;
  box-shadow:
    inset 0 0 14px rgba(var(--mc-color),.11),
    0 0 18px rgba(var(--mc-color),.38),
    0 0 32px rgba(var(--mc-color),.16) !important;
}

#main-sidebar .menu-card.active .menu-icon-3d,
#main-sidebar .menu-card[aria-current="page"] .menu-icon-3d{
  border-color:rgba(var(--mc-color),.92) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.28),
    inset 0 -4px 9px rgba(0,0,0,.46),
    0 0 17px rgba(var(--mc-color),.62),
    0 0 34px rgba(var(--mc-color),.30) !important;
}

#main-sidebar .menu-card.active .menu-text,
#main-sidebar .menu-card[aria-current="page"] .menu-text{
  color:#fff !important;
  font-weight:850 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.90),
    0 0 13px rgba(var(--mc-color),.54),
    0 0 25px rgba(var(--mc-color),.24) !important;
}

/* Press/click */
#main-sidebar .menu-card:active,
#main-sidebar .menu-card.cds-led-press{
  transform:translateY(1px) scale(.990) !important;
  filter:brightness(1.13);
}

#main-sidebar .menu-card.cds-led-click{
  animation:cdsMenuLedClick .42s var(--cds-ease) 1 !important;
}

@keyframes cdsMenuLedClick{
  0%{
    filter:brightness(1);
  }
  34%{
    filter:brightness(1.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      0 0 22px rgba(var(--mc-color),.70),
      0 0 46px rgba(var(--mc-color),.44),
      0 0 72px rgba(var(--mc-color),.24),
      0 10px 26px rgba(0,0,0,.32);
  }
  100%{
    filter:brightness(1);
  }
}

/* ----------------------------------------------------------------
   Feedback LED curto em botões/cards do portal
   ---------------------------------------------------------------- */
button,
[role="button"],
.glass-panel:not(#main-sidebar){
  transition:
    transform var(--cds-fast) var(--cds-ease),
    box-shadow var(--cds-normal),
    border-color var(--cds-fast),
    filter var(--cds-fast) !important;
}

button:hover:not(:disabled),
[role="button"]:hover,
.glass-panel:not(#main-sidebar):hover{
  filter:brightness(1.045);
}

button.cds-ui-click,
[role="button"].cds-ui-click{
  animation:cdsUiClick .36s var(--cds-ease) 1 !important;
}

@keyframes cdsUiClick{
  0%{filter:brightness(1)}
  38%{
    filter:brightness(1.18);
    box-shadow:
      0 0 15px rgba(34,211,238,.34),
      0 0 30px rgba(34,211,238,.18);
  }
  100%{filter:brightness(1)}
}

/* foco de teclado forte e acessível */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
#main-sidebar .menu-card:focus-visible{
  outline:3px solid rgba(34,211,238,.72) !important;
  outline-offset:3px !important;
}

/* 2K / 4K */
@media(min-width:1600px){
  :root{
    --cds-font-base:clamp(16px,calc(15px + .12vw),19px);
    --cds-font-ui:clamp(15px,calc(14px + .10vw),18px);
    --cds-font-menu:clamp(16px,calc(15px + .12vw),19px);
  }
  #main-sidebar .menu-card{min-height:68px !important}
  #main-sidebar .menu-icon-3d{width:48px !important;height:48px !important}
}

@media(min-width:2560px){
  :root{
    --cds-font-base:19px;
    --cds-font-ui:17px;
    --cds-font-menu:18px;
    --cds-font-small:13px;
  }
  #main-sidebar .menu-card{min-height:72px !important}
}

/* mobile */
@media(max-width:767px){
  :root{
    --cds-font-base:clamp(16px,4.1vw,18px);
    --cds-font-ui:clamp(15px,3.8vw,17px);
    --cds-font-menu:clamp(15px,4vw,17px);
  }
  #main-sidebar .menu-card{min-height:60px !important}
}

/* Acessibilidade: sem efeitos pulsantes quando o SO pede menos movimento */
@media(prefers-reduced-motion:reduce){
  #main-sidebar .menu-card,
  #main-sidebar .menu-card::before,
  #main-sidebar .menu-card::after,
  #main-sidebar .menu-icon-3d,
  button,
  [role="button"],
  .glass-panel{
    animation:none !important;
    transition-duration:.001ms !important;
  }
  #main-sidebar .menu-card:hover{
    transform:none !important;
  }
}

@media(forced-colors:active){
  #main-sidebar .menu-card{
    border:1px solid ButtonText !important;
  }
  #main-sidebar .menu-card.active,
  #main-sidebar .menu-card[aria-current="page"]{
    outline:3px solid Highlight !important;
    color:HighlightText !important;
  }
}