/* 01. TOKENS / ROOT */

:root{
  --accent:#6509D6;
  --accent-04:rgba(101, 9, 214, 0.04);
  --accent-06:rgba(101, 9, 214, 0.06);
  --accent-08:rgba(101, 9, 214, 0.08);
  --accent-10:rgba(101, 9, 214, 0.10);
  --accent-12:rgba(101, 9, 214, 0.12);
  --accent-14:rgba(101, 9, 214, 0.14);
  --accent-16:rgba(101, 9, 214, 0.16);
  --accent-18:rgba(101, 9, 214, 0.18);
  --accent-20:rgba(101, 9, 214, 0.20);

  --bg:#FFFFFF;
  --bg-global: #f9f9fb;
  --panel:#FFFFFF;
  --panel-2:#FCFCFE;
  --muted:#F6F6FB;
  --muted-2:#F2F0FA;
  --muted-3:#EEEAFB;

  --border:#E7E7EF;
  --border-2:#E5E8EB;
  --border-strong:#D9D9E4;

  --text:#252525;
  --text-2:#5A5A66;
  --text-3:#8B8B98;
  --text-link:#252525;

--success: #22C55E;
--warning: #F4B740;
--danger: #EF4444;

--success-08: rgba(52, 199, 89, 0.08);
--success-12: rgba(52, 199, 89, 0.12);

--warning-08: rgba(246, 196, 83, 0.08);
--warning-12: rgba(246, 196, 83, 0.12);

--danger-08: rgba(240, 90, 90, 0.08);
--danger-12: rgba(240, 90, 90, 0.12);

  --gradient-start:#4E0799;
  --gradient-end:#8A40FF;
  --post-separator:rgba(197, 157, 255, 0.50);

  --radius-xs:6px;
  --radius-sm:8px;
  --radius:10px;
  --radius-lg:12px;
  --radius-xl:14px;
  --radius-pill:999px;

  --shadow-dropdown:none;

  --ff:"Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs:14px;
  --lh:1.5;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  --t:220ms cubic-bezier(0.22, 1, 0.36, 1);
  --container:1140px;

  --selection-bg:rgba(101, 9, 214, 0.16);
  --selection-text:#14141A;

  --tooltip-bg:rgba(20,20,26,0.96);
  --tooltip-border:rgba(255,255,255,0.08);
  --tooltip-text:#FFFFFF;

  --p-surface:#FFFFFF;
  --p-surface-2:#FCFCFE;
  --p-surface-3:#F6F3FD;
  --p-border-soft:#E7E7EF;
  --p-border-soft-2:#D9D9E4;
  --p-text:#14141A;
  --p-text-soft:#6B6B78;
  --p-shadow-dropdown:none;
  --p-notif-new:#F8F4FF;
  --p-notif-new-hover:#F3EDFF;
  --p-chip-dark:#6509D6;
  --p-chip-dark-text:#FFFFFF;

    --esp-0: 0;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-7: 28px;
  --esp-8: 32px;
  --esp-9: 40px;
  --esp-10: 48px;
  --esp-11: 56px;
  --esp-12: 64px;

}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--ff);
  font-size:var(--fs);
  line-height:var(--lh);
  font-weight:var(--fw-medium);
  color:var(--text);
  background:var(--bg-global);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-top:55px;
}

img,
picture,
svg,
canvas,
video{
  display:block;
  max-width:100%;
}

img{
  height:auto;
  border-style:none;
}

svg{
  overflow:hidden;
}

iframe{
  border:0;
  display:block;
  width:100%;
}

input,
button,
textarea,
select{
  font:inherit;
  color:inherit;
}

input,
textarea,
select{
  background:none;
}

button{
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}

button:disabled{
  cursor:not-allowed;
}

textarea{
  resize:vertical;
  min-height:120px;
}

a{
  color:inherit;
  text-decoration:none;
}

ul,
ol{
  margin:0;
  padding:0;
  list-style:none;
}

li{
  margin:0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd{
  margin:0;
}

table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
}

caption{
  text-align:left;
}

th,
td{
  padding:0;
  text-align:left;
  vertical-align:top;
}

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:0;
}

strong,
b{
  font-weight:var(--fw-bold);
}

small{
  font-size:0.875em;
}

sub,
sup{
  position:relative;
  font-size:0.75em;
  line-height:0;
  vertical-align:baseline;
}

sub{
  bottom:-0.25em;
}

sup{
  top:-0.5em;
}

::selection{
  background:var(--selection-bg);
  color:var(--selection-text);
}

:focus-visible{
  outline:3px solid var(--accent-14);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}

[hidden]{
  display:none !important;
}

:disabled{
  cursor:not-allowed;
}

[aria-busy="true"]{
  cursor:progress;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline: 16px;
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}


.usuario-on{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  pointer-events: none;
  animation: px-online-pulse 1.8s ease-out infinite;
}

@keyframes px-online-pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.50);
    transform: scale(1);
  }
  50%{
    box-shadow: 0 0 0 7px rgba(34, 197, 94, 0);
    transform: scale(1.06);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    transform: scale(1);
  }
}

/* =========================================================
   MARGIN TOP
========================================================= */

.mt-0{ margin-top:var(--esp-0) !important; }
.mt-1{ margin-top:var(--esp-1) !important; }
.mt-2{ margin-top:var(--esp-2) !important; }
.mt-3{ margin-top:var(--esp-3) !important; }
.mt-4{ margin-top:var(--esp-4) !important; }
.mt-5{ margin-top:var(--esp-5) !important; }
.mt-6{ margin-top:var(--esp-6) !important; }
.mt-7{ margin-top:var(--esp-7) !important; }
.mt-8{ margin-top:var(--esp-8) !important; }
.mt-9{ margin-top:var(--esp-9) !important; }
.mt-10{ margin-top:var(--esp-10) !important; }
.mt-11{ margin-top:var(--esp-11) !important; }
.mt-12{ margin-top:var(--esp-12) !important; }

/* =========================================================
   MARGIN BOTTOM
========================================================= */

.mb-0{ margin-bottom:var(--esp-0) !important; }
.mb-1{ margin-bottom:var(--esp-1) !important; }
.mb-2{ margin-bottom:var(--esp-2) !important; }
.mb-3{ margin-bottom:var(--esp-3) !important; }
.mb-4{ margin-bottom:var(--esp-4) !important; }
.mb-5{ margin-bottom:var(--esp-5) !important; }
.mb-6{ margin-bottom:var(--esp-6) !important; }
.mb-7{ margin-bottom:var(--esp-7) !important; }
.mb-8{ margin-bottom:var(--esp-8) !important; }
.mb-9{ margin-bottom:var(--esp-9) !important; }
.mb-10{ margin-bottom:var(--esp-10) !important; }
.mb-11{ margin-bottom:var(--esp-11) !important; }
.mb-12{ margin-bottom:var(--esp-12) !important; }

/* =========================================================
   MARGIN LEFT / RIGHT
========================================================= */

.ml-0{ margin-left:var(--esp-0) !important; }
.ml-1{ margin-left:var(--esp-1) !important; }
.ml-2{ margin-left:var(--esp-2) !important; }
.ml-3{ margin-left:var(--esp-3) !important; }
.ml-4{ margin-left:var(--esp-4) !important; }
.ml-5{ margin-left:var(--esp-5) !important; }
.ml-6{ margin-left:var(--esp-6) !important; }
.ml-7{ margin-left:var(--esp-7) !important; }
.ml-8{ margin-left:var(--esp-8) !important; }
.ml-9{ margin-left:var(--esp-9) !important; }
.ml-10{ margin-left:var(--esp-10) !important; }
.ml-11{ margin-left:var(--esp-11) !important; }
.ml-12{ margin-left:var(--esp-12) !important; }

.mr-0{ margin-right:var(--esp-0) !important; }
.mr-1{ margin-right:var(--esp-1) !important; }
.mr-2{ margin-right:var(--esp-2) !important; }
.mr-3{ margin-right:var(--esp-3) !important; }
.mr-4{ margin-right:var(--esp-4) !important; }
.mr-5{ margin-right:var(--esp-5) !important; }
.mr-6{ margin-right:var(--esp-6) !important; }
.mr-7{ margin-right:var(--esp-7) !important; }
.mr-8{ margin-right:var(--esp-8) !important; }
.mr-9{ margin-right:var(--esp-9) !important; }
.mr-10{ margin-right:var(--esp-10) !important; }
.mr-11{ margin-right:var(--esp-11) !important; }
.mr-12{ margin-right:var(--esp-12) !important; }

/* =========================================================
   MARGIN X / Y
========================================================= */

.mx-0{ margin-left:var(--esp-0) !important; margin-right:var(--esp-0) !important; }
.mx-1{ margin-left:var(--esp-1) !important; margin-right:var(--esp-1) !important; }
.mx-2{ margin-left:var(--esp-2) !important; margin-right:var(--esp-2) !important; }
.mx-3{ margin-left:var(--esp-3) !important; margin-right:var(--esp-3) !important; }
.mx-4{ margin-left:var(--esp-4) !important; margin-right:var(--esp-4) !important; }
.mx-5{ margin-left:var(--esp-5) !important; margin-right:var(--esp-5) !important; }
.mx-6{ margin-left:var(--esp-6) !important; margin-right:var(--esp-6) !important; }
.mx-7{ margin-left:var(--esp-7) !important; margin-right:var(--esp-7) !important; }
.mx-8{ margin-left:var(--esp-8) !important; margin-right:var(--esp-8) !important; }
.mx-9{ margin-left:var(--esp-9) !important; margin-right:var(--esp-9) !important; }
.mx-10{ margin-left:var(--esp-10) !important; margin-right:var(--esp-10) !important; }
.mx-11{ margin-left:var(--esp-11) !important; margin-right:var(--esp-11) !important; }
.mx-12{ margin-left:var(--esp-12) !important; margin-right:var(--esp-12) !important; }

.my-0{ margin-top:var(--esp-0) !important; margin-bottom:var(--esp-0) !important; }
.my-1{ margin-top:var(--esp-1) !important; margin-bottom:var(--esp-1) !important; }
.my-2{ margin-top:var(--esp-2) !important; margin-bottom:var(--esp-2) !important; }
.my-3{ margin-top:var(--esp-3) !important; margin-bottom:var(--esp-3) !important; }
.my-4{ margin-top:var(--esp-4) !important; margin-bottom:var(--esp-4) !important; }
.my-5{ margin-top:var(--esp-5) !important; margin-bottom:var(--esp-5) !important; }
.my-6{ margin-top:var(--esp-6) !important; margin-bottom:var(--esp-6) !important; }
.my-7{ margin-top:var(--esp-7) !important; margin-bottom:var(--esp-7) !important; }
.my-8{ margin-top:var(--esp-8) !important; margin-bottom:var(--esp-8) !important; }
.my-9{ margin-top:var(--esp-9) !important; margin-bottom:var(--esp-9) !important; }
.my-10{ margin-top:var(--esp-10) !important; margin-bottom:var(--esp-10) !important; }
.my-11{ margin-top:var(--esp-11) !important; margin-bottom:var(--esp-11) !important; }
.my-12{ margin-top:var(--esp-12) !important; margin-bottom:var(--esp-12) !important; }

/* =========================================================
   PADDING TOP
========================================================= */

.pt-0{ padding-top:var(--esp-0) !important; }
.pt-1{ padding-top:var(--esp-1) !important; }
.pt-2{ padding-top:var(--esp-2) !important; }
.pt-3{ padding-top:var(--esp-3) !important; }
.pt-4{ padding-top:var(--esp-4) !important; }
.pt-5{ padding-top:var(--esp-5) !important; }
.pt-6{ padding-top:var(--esp-6) !important; }
.pt-7{ padding-top:var(--esp-7) !important; }
.pt-8{ padding-top:var(--esp-8) !important; }
.pt-9{ padding-top:var(--esp-9) !important; }
.pt-10{ padding-top:var(--esp-10) !important; }
.pt-11{ padding-top:var(--esp-11) !important; }
.pt-12{ padding-top:var(--esp-12) !important; }

/* =========================================================
   PADDING BOTTOM
========================================================= */

.pb-0{ padding-bottom:var(--esp-0) !important; }
.pb-1{ padding-bottom:var(--esp-1) !important; }
.pb-2{ padding-bottom:var(--esp-2) !important; }
.pb-3{ padding-bottom:var(--esp-3) !important; }
.pb-4{ padding-bottom:var(--esp-4) !important; }
.pb-5{ padding-bottom:var(--esp-5) !important; }
.pb-6{ padding-bottom:var(--esp-6) !important; }
.pb-7{ padding-bottom:var(--esp-7) !important; }
.pb-8{ padding-bottom:var(--esp-8) !important; }
.pb-9{ padding-bottom:var(--esp-9) !important; }
.pb-10{ padding-bottom:var(--esp-10) !important; }
.pb-11{ padding-bottom:var(--esp-11) !important; }
.pb-12{ padding-bottom:var(--esp-12) !important; }

/* =========================================================
   PADDING LEFT / RIGHT
========================================================= */

.pl-0{ padding-left:var(--esp-0) !important; }
.pl-1{ padding-left:var(--esp-1) !important; }
.pl-2{ padding-left:var(--esp-2) !important; }
.pl-3{ padding-left:var(--esp-3) !important; }
.pl-4{ padding-left:var(--esp-4) !important; }
.pl-5{ padding-left:var(--esp-5) !important; }
.pl-6{ padding-left:var(--esp-6) !important; }
.pl-7{ padding-left:var(--esp-7) !important; }
.pl-8{ padding-left:var(--esp-8) !important; }
.pl-9{ padding-left:var(--esp-9) !important; }
.pl-10{ padding-left:var(--esp-10) !important; }
.pl-11{ padding-left:var(--esp-11) !important; }
.pl-12{ padding-left:var(--esp-12) !important; }

.pr-0{ padding-right:var(--esp-0) !important; }
.pr-1{ padding-right:var(--esp-1) !important; }
.pr-2{ padding-right:var(--esp-2) !important; }
.pr-3{ padding-right:var(--esp-3) !important; }
.pr-4{ padding-right:var(--esp-4) !important; }
.pr-5{ padding-right:var(--esp-5) !important; }
.pr-6{ padding-right:var(--esp-6) !important; }
.pr-7{ padding-right:var(--esp-7) !important; }
.pr-8{ padding-right:var(--esp-8) !important; }
.pr-9{ padding-right:var(--esp-9) !important; }
.pr-10{ padding-right:var(--esp-10) !important; }
.pr-11{ padding-right:var(--esp-11) !important; }
.pr-12{ padding-right:var(--esp-12) !important; }

/* =========================================================
   PADDING X / Y
========================================================= */

.px-0{ padding-left:var(--esp-0) !important; padding-right:var(--esp-0) !important; }
.px-1{ padding-left:var(--esp-1) !important; padding-right:var(--esp-1) !important; }
.px-2{ padding-left:var(--esp-2) !important; padding-right:var(--esp-2) !important; }
.px-3{ padding-left:var(--esp-3) !important; padding-right:var(--esp-3) !important; }
.px-4{ padding-left:var(--esp-4) !important; padding-right:var(--esp-4) !important; }
.px-5{ padding-left:var(--esp-5) !important; padding-right:var(--esp-5) !important; }
.px-6{ padding-left:var(--esp-6) !important; padding-right:var(--esp-6) !important; }
.px-7{ padding-left:var(--esp-7) !important; padding-right:var(--esp-7) !important; }
.px-8{ padding-left:var(--esp-8) !important; padding-right:var(--esp-8) !important; }
.px-9{ padding-left:var(--esp-9) !important; padding-right:var(--esp-9) !important; }
.px-10{ padding-left:var(--esp-10) !important; padding-right:var(--esp-10) !important; }
.px-11{ padding-left:var(--esp-11) !important; padding-right:var(--esp-11) !important; }
.px-12{ padding-left:var(--esp-12) !important; padding-right:var(--esp-12) !important; }

.py-0{ padding-top:var(--esp-0) !important; padding-bottom:var(--esp-0) !important; }
.py-1{ padding-top:var(--esp-1) !important; padding-bottom:var(--esp-1) !important; }
.py-2{ padding-top:var(--esp-2) !important; padding-bottom:var(--esp-2) !important; }
.py-3{ padding-top:var(--esp-3) !important; padding-bottom:var(--esp-3) !important; }
.py-4{ padding-top:var(--esp-4) !important; padding-bottom:var(--esp-4) !important; }
.py-5{ padding-top:var(--esp-5) !important; padding-bottom:var(--esp-5) !important; }
.py-6{ padding-top:var(--esp-6) !important; padding-bottom:var(--esp-6) !important; }
.py-7{ padding-top:var(--esp-7) !important; padding-bottom:var(--esp-7) !important; }
.py-8{ padding-top:var(--esp-8) !important; padding-bottom:var(--esp-8) !important; }
.py-9{ padding-top:var(--esp-9) !important; padding-bottom:var(--esp-9) !important; }
.py-10{ padding-top:var(--esp-10) !important; padding-bottom:var(--esp-10) !important; }
.py-11{ padding-top:var(--esp-11) !important; padding-bottom:var(--esp-11) !important; }
.py-12{ padding-top:var(--esp-12) !important; padding-bottom:var(--esp-12) !important; }

/* =========================================================
   ALL SIDES
========================================================= */

.p-0{ padding:var(--esp-0) !important; }
.p-1{ padding:var(--esp-1) !important; }
.p-2{ padding:var(--esp-2) !important; }
.p-3{ padding:var(--esp-3) !important; }
.p-4{ padding:var(--esp-4) !important; }
.p-5{ padding:var(--esp-5) !important; }
.p-6{ padding:var(--esp-6) !important; }
.p-7{ padding:var(--esp-7) !important; }
.p-8{ padding:var(--esp-8) !important; }
.p-9{ padding:var(--esp-9) !important; }
.p-10{ padding:var(--esp-10) !important; }
.p-11{ padding:var(--esp-11) !important; }
.p-12{ padding:var(--esp-12) !important; }

.m-0{ margin:var(--esp-0) !important; }
.m-1{ margin:var(--esp-1) !important; }
.m-2{ margin:var(--esp-2) !important; }
.m-3{ margin:var(--esp-3) !important; }
.m-4{ margin:var(--esp-4) !important; }
.m-5{ margin:var(--esp-5) !important; }
.m-6{ margin:var(--esp-6) !important; }
.m-7{ margin:var(--esp-7) !important; }
.m-8{ margin:var(--esp-8) !important; }
.m-9{ margin:var(--esp-9) !important; }
.m-10{ margin:var(--esp-10) !important; }
.m-11{ margin:var(--esp-11) !important; }
.m-12{ margin:var(--esp-12) !important; }

/* =========================================================
   AUTO
========================================================= */

.mx-auto{
  margin-left:auto !important;
  margin-right:auto !important;
}

.ml-auto{
  margin-left:auto !important;
}

.mr-auto{
  margin-right:auto !important;
}

/* =========================================================
   VISIBILIDADE
========================================================= */

.px-hide-mobile{
  display:inline-flex !important;
}

.px-show-mobile-inline,
.px-show-mobile-inline-flex,
.px-show-mobile-block{
  display:none !important;
}

.px-show-desktop-inline{
  display:inline !important;
}

@media (max-width:768px){
  .px-hide-mobile{
    display:none !important;
  }

  .px-show-mobile-inline{
    display:inline !important;
  }

  .px-show-mobile-inline-flex{
    display:inline-flex !important;
  }

  .px-show-mobile-block{
    display:block !important;
  }

  .px-show-desktop-inline{
    display:none !important;
  }
}

/* =========================================================
   GRID DO SISTEMA
========================================================= */

.grid-sistema{
  display:grid;
  gap:18px;
  align-items:start;
  min-width:0;
}

.grid-sistema > *{
  min-width:0;
}

/* 2 colunas iguais */
.grid-sistema--2-colunas{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

/* 3 colunas iguais */
.grid-sistema--3-colunas{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* 4 colunas iguais */
.grid-sistema--4-colunas{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

/* 5 colunas iguais */
.grid-sistema--5-colunas{
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

/* 6 colunas iguais */
.grid-sistema--6-colunas{
  grid-template-columns:repeat(6, minmax(0, 1fr));
}

/* 7 colunas iguais */
.grid-sistema--7-colunas{
  grid-template-columns:repeat(7, minmax(0, 1fr));
}

/* 8 colunas iguais */
.grid-sistema--8-colunas{
  grid-template-columns:repeat(8, minmax(0, 1fr));
}

/* 9 colunas iguais */
.grid-sistema--9-colunas{
  grid-template-columns:repeat(9, minmax(0, 1fr));
}

/* 10 colunas iguais */
.grid-sistema--10-colunas{
  grid-template-columns:repeat(10, minmax(0, 1fr));
}

/* 11 colunas iguais */
.grid-sistema--11-colunas{
  grid-template-columns:repeat(11, minmax(0, 1fr));
}

/* 12 colunas iguais */
.grid-sistema--12-colunas{
  grid-template-columns:repeat(12, minmax(0, 1fr));
}

/* conteúdo principal + lateral */
.grid-sistema--principal-lateral{
  grid-template-columns:minmax(0, 1fr) 320px;
}

.grid-sistema--principal-lateral-pequena{
  grid-template-columns:minmax(0, 1fr) 280px;
}

.grid-sistema--principal-lateral-grande{
  grid-template-columns:minmax(0, 1fr) 400px;
}

/* lateral + conteúdo principal */
.grid-sistema--lateral-principal{
  grid-template-columns:320px minmax(0, 1fr);
}

.grid-sistema--lateral-principal-pequena{
  grid-template-columns:280px minmax(0, 1fr);
}

.grid-sistema--lateral-principal-grande{
  grid-template-columns:400px minmax(0, 1fr);
}

/* colunas automáticas para cards */
.grid-sistema--cards{
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
}

.grid-sistema--cards-140{
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
}

.grid-sistema--cards-160{
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

.grid-sistema--cards-180{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.grid-sistema--cards-200{
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}

/* variações de espaçamento */
.grid-sistema--gap-pequeno{
  gap:12px;
}

.grid-sistema--gap-medio{
  gap:18px;
}

.grid-sistema--gap-grande{
  gap:24px;
}

.grid-sistema--gap-x-pequeno{
  column-gap:12px;
}

.grid-sistema--gap-x-medio{
  column-gap:18px;
}

.grid-sistema--gap-x-grande{
  column-gap:24px;
}

.grid-sistema--gap-y-pequeno{
  row-gap:12px;
}

.grid-sistema--gap-y-medio{
  row-gap:18px;
}

.grid-sistema--gap-y-grande{
  row-gap:24px;
}

/* responsivo progressivo */
@media (max-width:1200px){
  .grid-sistema--12-colunas{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }

  .grid-sistema--11-colunas{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }

  .grid-sistema--10-colunas{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }

  .grid-sistema--9-colunas{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }

  .grid-sistema--8-colunas{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .grid-sistema--7-colunas{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .grid-sistema--6-colunas{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .grid-sistema--5-colunas{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .grid-sistema--4-colunas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:980px){
  .grid-sistema--principal-lateral,
  .grid-sistema--principal-lateral-pequena,
  .grid-sistema--principal-lateral-grande,
  .grid-sistema--lateral-principal,
  .grid-sistema--lateral-principal-pequena,
  .grid-sistema--lateral-principal-grande{
    grid-template-columns:1fr;
  }

  .grid-sistema--12-colunas,
  .grid-sistema--11-colunas,
  .grid-sistema--10-colunas,
  .grid-sistema--9-colunas,
  .grid-sistema--8-colunas,
  .grid-sistema--7-colunas,
  .grid-sistema--6-colunas{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .grid-sistema--5-colunas,
  .grid-sistema--4-colunas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .grid-sistema--3-colunas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .grid-sistema--2-colunas{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .grid-sistema--12-colunas,
  .grid-sistema--11-colunas,
  .grid-sistema--10-colunas,
  .grid-sistema--9-colunas,
  .grid-sistema--8-colunas,
  .grid-sistema--7-colunas,
  .grid-sistema--6-colunas,
  .grid-sistema--5-colunas,
  .grid-sistema--4-colunas,
  .grid-sistema--3-colunas,
  .grid-sistema--2-colunas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .grid-sistema--cards,
  .grid-sistema--cards-140,
  .grid-sistema--cards-160,
  .grid-sistema--cards-180,
  .grid-sistema--cards-200{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:420px){
  .grid-sistema--12-colunas,
  .grid-sistema--11-colunas,
  .grid-sistema--10-colunas,
  .grid-sistema--9-colunas,
  .grid-sistema--8-colunas,
  .grid-sistema--7-colunas,
  .grid-sistema--6-colunas,
  .grid-sistema--5-colunas,
  .grid-sistema--4-colunas,
  .grid-sistema--3-colunas,
  .grid-sistema--2-colunas{
    grid-template-columns:1fr;
  }

  .grid-sistema--cards,
  .grid-sistema--cards-140,
  .grid-sistema--cards-160,
  .grid-sistema--cards-180,
  .grid-sistema--cards-200{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   BOTÕES
========================================================= */

.botao {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--panel);
    color: var(--text);
    font-family: var(--ff);
    font-size: 13px;
    line-height: 1;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--t);
    appearance: none;
    -webkit-appearance: none;
}

.botao:hover {
    text-decoration: none;
}

.botao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-12);
}

.botao:disabled,
.botao.botao-desabilitado {
    opacity: .6;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================
   VARIAÇÕES
========================================================= */

.botao-primario {
    background: var(--accent);
    color: #FFFFFF;
}

.botao-primario:hover {
    filter: brightness(.96);
}

.botao-secundario {
    background: var(--accent-08);
    color: var(--accent);
    border-color: transparent;
}

.botao-secundario:hover {
    background: var(--accent-12);
    color: var(--accent);
}

.botao-contorno {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.botao-contorno:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.botao-neutro {
    background: var(--muted);
    color: var(--text);
    border-color: var(--border);
}

/* =========================================================
   BOTÕES CONTEXTUAIS
========================================================= */

.botao-sucesso {
    background: var(--success);
    color: #FFFFFF;
    border-color: transparent;
}

.botao-sucesso:hover {
    filter: brightness(.96);
}

.botao-aviso {
    background: var(--warning);
    color: #FFFFFF;
    border-color: transparent;
}

.botao-aviso:hover {
    filter: brightness(.96);
}

.botao-perigo {
    background: var(--danger);
    color: #FFFFFF;
    border-color: transparent;
}

.botao-perigo:hover {
    filter: brightness(.96);
}

/* =========================================================
   BOTÕES CONTEXTUAIS TRANSPARENTES
========================================================= */

.botao-sucesso-transparente {
    background: var(--success-08);
    color: var(--success);
    border-color: transparent;
}

.botao-sucesso-transparente:hover {
    background: var(--success-12);
    color: var(--success);
}

.botao-aviso-transparente {
    background: var(--warning-08);
    color: #B7791F;
    border-color: transparent;
}

.botao-aviso-transparente:hover {
    background: var(--warning-12);
    color: #A16207;
}

.botao-perigo-transparente {
    background: var(--danger-08);
    color: var(--danger);
    border-color: transparent;
}

.botao-perigo-transparente:hover {
    background: var(--danger-12);
    color: var(--danger);
}

/* =========================================================
   ESTADOS
========================================================= */

.esta-seguindo {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.esta-seguindo:hover {
    border-color: var(--accent);
    color: var(--accent);
    filter: none;
}

.botao-carregando {
    pointer-events: none;
}

.botao-carregando svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    animation: botao-girando .8s linear infinite;
}

@keyframes botao-girando {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   TAMANHOS
========================================================= */

.botao-pequeno {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

.botao-grande {
    min-height: 44px;
    padding: 0 20px;
    font-size: 14px;
}

.botao-bloco {
    width: 100%;
}

.botao-so-icone {
    width: 36px;
    min-width: 36px;
    padding: 0;
}

.botao-so-icone.botao-pequeno {
    width: 30px;
    min-width: 30px;
}

.botao-so-icone.botao-grande {
    width: 44px;
    min-width: 44px;
}

/* =========================================================
   COM ÍCONE
========================================================= */

.botao-com-icone svg,
.botao-so-icone svg,
.botao svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* =========================================================
   BOTÕES DE LINK
========================================================= */

.botao-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text);
    font-family: var(--ff);
    font-size: 14px;
    line-height: 1.2;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: all var(--t);
    cursor: pointer;
}

.botao-link:hover {
    opacity: .88;
    background: var(--accent-06);
    text-decoration: none;
}

.botao-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-12);
}

.botao-link-vermais {
    color: var(--text);
}

.botao-link-vermais svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* =/* =========================================================
   GRUPO DE BOTÕES COLADOS / AÇÕES COMBINADAS
========================================================= */

.botao-grupo-colado{
  display:inline-flex;
  align-items:stretch;
  flex-wrap:nowrap;
  border-radius:var(--radius-pill);
}

.botao-grupo-colado > .botao,
.botao-grupo-colado > .botao-acao-colada{
  border-radius:0;
  position:relative;
}

.botao-grupo-colado > .botao:first-child,
.botao-grupo-colado > .botao-acao-colada:first-child{
  border-top-left-radius:var(--radius-pill);
  border-bottom-left-radius:var(--radius-pill);
}

.botao-grupo-colado > .botao:last-child,
.botao-grupo-colado > .botao-acao-colada:last-child{
  border-top-right-radius:var(--radius-pill);
  border-bottom-right-radius:var(--radius-pill);
}

.botao-grupo-colado > .botao + .botao,
.botao-grupo-colado > .botao + .botao-acao-colada,
.botao-grupo-colado > .botao-acao-colada + .botao,
.botao-grupo-colado > .botao-acao-colada + .botao-acao-colada{
  margin-left:1px;
}

/* =========================================================
   BOTÃO DE AÇÃO COLADA
========================================================= */

.botao-acao-colada{
  min-height:36px;
  padding:0 14px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--accent);
  color:#FFFFFF;
  font-family:var(--ff);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  cursor:pointer;
  transition:
    background-color var(--t),
    border-color var(--t),
    color var(--t),
    opacity var(--t);
}

.botao-acao-colada:hover{
  filter:brightness(.96);
}

.botao-acao-colada:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--accent-12);
  z-index:2;
}

.botao-acao-colada svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
}

.botao-acao-colada__icone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.botao-acao-colada__texto{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.botao-acao-colada__contador{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  color:#FFFFFF;
  font-size:11px;
  line-height:1;
  font-weight:var(--fw-bold);
}

.botao-acao-colada--secundaria{
  background:var(--text);
  color:#FFFFFF;
}

.botao-acao-colada--secundaria:hover{
  filter:brightness(.96);
}

.botao-acao-colada--neutra{
  background:var(--muted);
  border-color:var(--border);
  color:var(--text);
}

.botao-acao-colada--neutra:hover{
  background:var(--panel-2);
  border-color:var(--border-strong);
  filter:none;
}

.botao-acao-colada--contorno{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}

.botao-acao-colada--contorno:hover{
  border-color:var(--accent);
  color:var(--accent);
  filter:none;
}

/* =========================================================
   AJUSTES RESPONSIVOS
========================================================= */

@media (max-width:768px){
  .botao-grupo-colado{
    width:100%;
  }

  .botao-grupo-colado > .botao,
  .botao-grupo-colado > .botao-acao-colada{
    flex:1 1 auto;
    min-width:0;
  }

  .botao-acao-colada{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }

  .botao-acao-colada__contador{
    min-width:17px;
    height:17px;
    font-size:10px;
  }
}

@media (max-width:768px){
  .barra-px__acoes{
    gap:8px;
    flex-wrap:nowrap;
  }

  .barra-px__direita{
    min-width:auto;
  }

  .barra-px .botao-grupo-colado{
    width:auto;
    flex:0 0 auto;
  }

  .barra-px .botao-grupo-colado > .botao,
  .barra-px .botao-grupo-colado > .botao-acao-colada{
    flex:0 0 auto;
  }
}

/* =========================================================
   AJUSTES RESPONSIVOS
========================================================= */

@media (max-width: 768px) {
    .botao-grande {
        min-height: 42px;
    }

    .botao-link {
        font-size: 13px;
    }
}


/* =========================================================
   FORMULÁRIOS
========================================================= */

.form-grupo {
    width: 100%;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
    font-weight: var(--fw-semibold);
}

.form-controle {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--panel);
    color: var(--text);
    font-family: var(--ff);
    font-size: 14px;
    line-height: 1.2;
    outline: none;
    transition:
        border-color var(--t),
        background-color var(--t),
        box-shadow var(--t),
        color var(--t);
    appearance: none;
    -webkit-appearance: none;
}

.form-controle::placeholder {
    color: var(--text-3);
}

.form-controle:hover {
    border-color: var(--border-strong);
}

.form-controle:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-08);
}

.form-controle:disabled {
    background: var(--muted);
    color: var(--text-3);
    opacity: 1;
    cursor: not-allowed;
}

.form-controle--select {
    padding-right: 42px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B8B98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.form-controle--textarea {
    min-height: 120px;
    padding: 14px;
    resize: vertical;
}

.form-texto {
    margin: 8px 2px 0;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.45;
}

.form-texto--erro {
    color: var(--danger);
}

.form-texto--sucesso {
    color: var(--success);
}

.form-erro {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px var(--danger-08);
}

.form-sucesso {
    border-color: var(--success);
    box-shadow: 0 0 0 4px var(--success-08);
}

.form-linha {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* =========================================================
   INPUT GROUP / ADDONS
========================================================= */

.form-grupo-inline {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.form-addon {
    min-width: 46px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--muted);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    transition:
        border-color var(--t),
        background-color var(--t),
        color var(--t);
}

.form-addon--inicio {
    border-right: 0;
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.form-addon--fim {
    border-left: 0;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.form-grupo-inline .form-controle {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0;
}

.form-grupo-inline .form-controle:first-child {
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.form-grupo-inline .form-controle:last-child {
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.form-grupo-inline .form-controle:only-child {
    border-radius: var(--radius-xs);
}

.form-grupo-inline:focus-within .form-addon {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-04);
}

.form-grupo-inline .form-controle:focus {
    box-shadow: none;
    border-color: var(--accent);
}

.form-grupo-inline .form-controle:disabled + .form-addon,
.form-grupo-inline .form-addon + .form-controle:disabled {
    background: var(--muted);
    color: var(--text-3);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .form-linha {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CHECKBOX E RADIO
========================================================= */

.form-opcoes {
    display: grid;
    gap: 14px;
}

.form-opcao {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    cursor: pointer;
    color: var(--text);
}

.form-opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-opcao__controle {
    position: relative;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--border-strong);
    background: var(--panel);
    transition:
        border-color var(--t),
        background-color var(--t),
        box-shadow var(--t),
        opacity var(--t),
        transform var(--t);
}

.form-opcao__texto {
    min-width: 0;
    display: block;
}

.form-opcao__titulo {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
    font-weight: var(--fw-semibold);
}

.form-opcao__descricao {
    display: block;
    margin-top: 4px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
    font-weight: var(--fw-medium);
}

/* checkbox */

.form-opcao--checkbox .form-opcao__controle {
    border-radius: 6px;
}

.form-opcao--checkbox .form-opcao__controle::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #FFFFFF;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1 -1.414 0l-5 -5a1 1 0 0 1 1.414 -1.414l4.293 4.293l9.293 -9.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1 -1.414 0l-5 -5a1 1 0 0 1 1.414 -1.414l4.293 4.293l9.293 -9.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    opacity: 0;
    transform: scale(.82);
    transition: opacity var(--t), transform var(--t);
}

/* radio */

.form-opcao--radio .form-opcao__controle {
    border-radius: 999px;
}

.form-opcao--radio .form-opcao__controle::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 999px;
    background: #FFFFFF;
    opacity: 0;
    transform: scale(.75);
    transition: opacity var(--t), transform var(--t);
}

/* hover */

.form-opcao:hover .form-opcao__controle {
    border-color: var(--accent);
}

/* focus */

.form-opcao input:focus-visible + .form-opcao__controle {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-08);
}

/* checked checkbox */

.form-opcao--checkbox input:checked + .form-opcao__controle {
    background: var(--accent);
    border-color: var(--accent);
}

.form-opcao--checkbox input:checked + .form-opcao__controle::after {
    opacity: 1;
    transform: scale(1);
}

/* checked radio */

.form-opcao--radio input:checked + .form-opcao__controle {
    background: var(--accent);
    border-color: var(--accent);
}

.form-opcao--radio input:checked + .form-opcao__controle::after {
    opacity: 1;
    transform: scale(1);
}

/* disabled */

.form-opcao input:disabled + .form-opcao__controle {
    opacity: .5;
    cursor: not-allowed;
}

.form-opcao input:disabled ~ .form-opcao__texto {
    opacity: .58;
}

/* =========================================================
   SWITCH
========================================================= */

.controle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.controle-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.controle-switch__slider {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #E8E8EF;
    transition:
        background-color var(--t),
        opacity var(--t),
        box-shadow var(--t);
}

.controle-switch__slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid rgba(20,20,26,0.06);
    transition: transform var(--t);
}

.controle-switch input:checked + .controle-switch__slider {
    background: var(--accent);
}

.controle-switch input:checked + .controle-switch__slider::after {
    transform: translateX(20px);
}

.controle-switch input:focus-visible + .controle-switch__slider {
    box-shadow: 0 0 0 4px var(--accent-08);
}

.controle-switch input:disabled + .controle-switch__slider {
    opacity: .5;
}

/* =========================================================
   SWITCH LINHA SIMPLES
========================================================= */

.controle-switch-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.controle-switch-linha__texto {
    min-width: 0;
}

.controle-switch-linha__titulo {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
    font-weight: var(--fw-semibold);
}

.controle-switch-linha__descricao {
    display: block;
    margin-top: 5px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.55;
    font-weight: var(--fw-medium);
}

/* =========================================================
   SWITCH LIST / PREFERÊNCIAS
========================================================= */

.lista-switches {
    display: grid;
    gap: 12px;
}

.item-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    cursor: pointer;
    transition:
        border-color var(--t),
        background-color var(--t);
}

.item-switch:hover {
    border-color: var(--border-strong);
    background: var(--panel-2);
}

.item-switch__copy {
    min-width: 0;
}

.item-switch__titulo {
    display: block;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
    font-weight: var(--fw-semibold);
}

.item-switch__descricao {
    display: block;
    margin-top: 5px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.55;
    font-weight: var(--fw-medium);
}

@media (max-width: 768px) {
    .controle-switch-linha,
    .item-switch {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .controle-switch-linha .controle-switch,
    .item-switch .controle-switch {
        margin-top: 2px;
    }
}


/* =========================================================
   BLOCOS
========================================================= */

.bloco {
    min-width: 0;
    border-radius: var(--radius-lg);
}

.bloco__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bloco__cabecalho-esquerda {
    min-width: 0;
    flex: 1 1 auto;
}

.bloco__cabecalho-direita {
    flex: 0 0 auto;
    margin-left: auto;
}

.bloco__titulo {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1.25;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.02em;
}

.bloco__descricao {
    margin: 0;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.5;
}

.bloco__corpo {
    min-width: 0;
}

.bloco__rodape {
    margin-top: 20px;
}

/* =========================================================
   VARIAÇÕES DE SUPERFÍCIE
========================================================= */

.bloco-superficie {
    background: rgba(229, 232, 235, 0.4);
    padding: 1.5rem;
}

.bloco-painel {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--border);
    padding: 22px;
}

.bloco-destaque {
    position: relative;
    border: 1px solid var(--accent-20);
    background: linear-gradient(180deg, var(--accent-04) 0%, #fff 100%);
    padding: 20px;
}

.bloco-destaque-aviso {
    position: relative;
    border: 1px solid rgba(246, 196, 83, 0.28);
    background: linear-gradient(180deg, rgba(246, 196, 83, 0.07) 0%, #fff 100%);
    padding: 20px;
}

/* =========================================================
   VARIAÇÕES ESTRUTURAIS
========================================================= */

.bloco-compacto {
    padding: 16px;
}

.bloco-sem-padding {
    padding: 0 !important;
}

.bloco-altura-total {
    height: 100%;
}

.bloco__cabecalho--embutido {
    padding: 16px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-strong);
}

/* =========================================================
   TEXTOS INTERNOS
========================================================= */

.bloco__texto {
    margin-top: 6px;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.55;
    font-weight: var(--fw-medium);
}

/* =========================================================
   BLOCO GRID
========================================================= */

.bloco-grid{
  display:grid;
  gap:25px 15px;
  align-items:start;
  min-width:0;
}

.bloco-grid > *{
  min-width:0;
}

.bloco-grid--1-coluna{
  grid-template-columns:1fr;
}

.bloco-grid--2-colunas{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.bloco-grid--3-colunas{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.bloco-grid--4-colunas{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.bloco-grid--5-colunas{
  grid-template-columns:repeat(5, minmax(0, 1fr));
}

.bloco-grid--6-colunas{
  grid-template-columns:repeat(6, minmax(0, 1fr));
}

.bloco-grid--cards{
  grid-template-columns:repeat(auto-fill, 115px);
}

.bloco-grid--cards-fluidos{
  grid-template-columns:repeat(auto-fit, minmax(115px, 1fr));
}

.bloco-grid--novos{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px 6px;
}

.bloco-grid--gap-pequeno{
  gap:12px 10px;
}

.bloco-grid--gap-medio{
  gap:18px 14px;
}

.bloco-grid--gap-grande{
  gap:24px 18px;
}

.bloco-card{
  width:120px;
  min-width:0;
}

@media (max-width:1200px){
  .bloco-grid--6-colunas{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .bloco-grid--5-colunas{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .bloco-grid--4-colunas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:980px){
  .bloco-grid--6-colunas,
  .bloco-grid--5-colunas{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloco-grid--4-colunas,
  .bloco-grid--3-colunas,{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .bloco-grid--2-colunas{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .bloco-grid--6-colunas,
  .bloco-grid--5-colunas,
  .bloco-grid--4-colunas,
  .bloco-grid--3-colunas,
  .bloco-grid--2-colunas,{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .bloco-grid--cards{
    grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
  }

  .bloco-card{
    width:auto;
  }
}

@media (max-width:420px){
  .bloco-grid--6-colunas,
  .bloco-grid--5-colunas,
  .bloco-grid--4-colunas,
  .bloco-grid--3-colunas,
  .bloco-grid--2-colunas,{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   BOTÃO EMBUTIDO NO BLOCO
========================================================= */

.bloco-sem-padding > .p_homeblock__more {
    display: block;
    width: 100%;
    margin-top: 0;
    padding: 12px;
    border-top: 1px solid var(--border-strong);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    text-align: center;
    color: var(--text);
    font-size: 14px;
    line-height: 1.2;
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition:
        color var(--t),
        background-color var(--t);
}

.bloco-sem-padding > .p_homeblock__more:hover,
.bloco-sem-padding > .p_homeblock__more:focus-visible {
    color: var(--accent);
    background: var(--accent-04);
    text-decoration: none;
    outline: none;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 768px) {
    .bloco-superficie,
    .bloco-painel,
    .bloco-destaque,
    .bloco-destaque-aviso {
        padding: 16px;
    }

    .bloco__cabecalho {
        margin-bottom: 18px;
    }

    .bloco__titulo {
        font-size: 18px;
    }

    .bloco__cabecalho-direita {
        margin-left: 0;
        width: 100%;
    }

    .bloco-grid--cards {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    }

    .bloco-card {
        width: auto;
    }
}


/* =========================================================
   BADGES
========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--muted);
    color: var(--text);
    font-size: 12px;
    line-height: 1;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* tamanhos */

.badge-pequena {
    min-height: 18px;
    padding: 0 6px;
    font-size: 10px;
}

.badge-media {
    min-height: 24px;
    padding: 0 10px;
    font-size: 12px;
}

/* sólidas */

.badge-neutra {
    background: var(--muted);
    color: var(--text);
}

.badge-primaria {
    background: var(--accent);
    color: #FFFFFF;
}

.badge-sucesso {
    background: var(--success);
    color: #FFFFFF;
}

.badge-aviso {
    background: var(--warning);
    color: #FFFFFF;
}

.badge-perigo {
    background: var(--danger);
    color: #FFFFFF;
}

/* suaves */

.badge-primaria-suave {
    background: var(--accent-08);
    color: var(--accent);
}

.badge-sucesso-suave {
    background: var(--success-08);
    color: var(--success);
}

.badge-aviso-suave {
    background: var(--warning-08);
    color: #B7791F;
}

.badge-perigo-suave {
    background: var(--danger-08);
    color: var(--danger);
}

/* =========================================================
   BADGE DE CONTAGEM
========================================================= */

.badge-contagem {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #FFFFFF;
    font-size: 10px;
    line-height: 1;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* =========================================================
   BOTÕES DE ÍCONE
========================================================= */

.botao-icone {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    position: relative;
    background: transparent;
    color: var(--text-2);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--t),
        color var(--t),
        opacity var(--t),
        box-shadow var(--t);
    appearance: none;
    -webkit-appearance: none;
}

.botao-icone:hover {
    background: var(--muted);
    color: var(--text);
    text-decoration: none;
}

.botao-icone:active {
    opacity: .86;
}

.botao-icone:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--accent-08);
}

.botao-icone svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

/* badge no botão de ícone */

.botao-icone[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}

.botao-icone[data-badge="0"]::after,
.botao-icone[data-badge=""]::after {
    display: none;
}

/* =========================================================
   ALERTAS E FEEDBACKS
========================================================= */

.alerta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--muted);
}

.alerta__icone {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.alerta__icone svg {
    width: 20px;
    height: 20px;
    display: block;
}

.alerta__conteudo {
    min-width: 0;
}

.alerta__titulo {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
    font-weight: var(--fw-semibold);
}

.alerta__texto {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
    font-weight: var(--fw-medium);
}

.alerta__titulo + .alerta__texto {
    margin-top: 4px;
}

.alerta__acoes {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-left: 32px;
}

/* =========================================================
   VARIAÇÕES
========================================================= */

.alerta-sucesso {
    background: var(--success-08);
    border-color: var(--success-12);
    color: var(--success);
}

.alerta-sucesso .alerta__icone {
    color: var(--success);
}

.alerta-aviso {
    background: var(--warning-08);
    border-color: var(--warning-12);
    color: #B7791F;
}

.alerta-aviso .alerta__icone {
    color: #B7791F;
}

.alerta-perigo {
    background: var(--danger-08);
    border-color: var(--danger-12);
    color: var(--danger);
}

.alerta-perigo .alerta__icone {
    color: var(--danger);
}

/* =========================================================
   COMPACTO
========================================================= */

.alerta-compacto {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 14px;
}

.alerta-compacto .alerta__texto {
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   ALERTA INLINE
========================================================= */

.alerta-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--muted);
}

.alerta-inline__icone {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
}

.alerta-inline__icone svg {
    width: 16px;
    height: 16px;
    display: block;
}

.alerta-inline__texto {
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
    font-weight: var(--fw-semibold);
}

.alerta-inline-sucesso {
    background: var(--success-08);
    border-color: var(--success-12);
    color: var(--success);
}

.alerta-inline-sucesso .alerta-inline__icone,
.alerta-inline-sucesso .alerta-inline__texto {
    color: var(--success);
}

.alerta-inline-aviso {
    background: var(--warning-08);
    border-color: var(--warning-12);
    color: #B7791F;
}

.alerta-inline-aviso .alerta-inline__icone,
.alerta-inline-aviso .alerta-inline__texto {
    color: #B7791F;
}

.alerta-inline-perigo {
    background: var(--danger-08);
    border-color: var(--danger-12);
    color: var(--danger);
}

.alerta-inline-perigo .alerta-inline__icone,
.alerta-inline-perigo .alerta-inline__texto {
    color: var(--danger);
}

@media (max-width: 768px) {
    .alerta {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 13px 14px;
    }

    .alerta__acoes {
        padding-left: 0;
    }
}


/* =========================================================
   TOOLTIPS
========================================================= */

[data-dica],
[data-dica-rich]{
  position:relative;
}

/* desativa pseudo-tooltips antigos quando o sistema novo estiver ativo */
[data-dica]::before,
[data-dica]::after,
[data-dica-rich]::before,
[data-dica-rich]::after{
  display:none !important;
  content:none !important;
}

/* =========================================================
   BASE
========================================================= */

.dica{
  position:fixed;
  top:0;
  left:0;
  min-width:0;
  max-width:220px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--tooltip-bg);
  border:1px solid var(--tooltip-border);
  color:var(--tooltip-text);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1600;
  transform:translate3d(0, 0, 0) scale(.985);
  transition:
    opacity .16s ease,
    visibility .16s ease,
    transform .16s ease;
}

.dica.is-visivel{
  opacity:1;
  visibility:visible;
  transform:translate3d(0, 0, 0) scale(1);
}

/* =========================================================
   TAMANHOS / VARIAÇÕES
========================================================= */

.dica--simples{
  padding:8px 10px;
  max-width:220px;
}

.dica--rica{
  min-width:200px;
  max-width:240px;
  padding:11px 13px;
  border-radius:14px;
}

.dica--compacta{
  min-width:0;
  max-width:210px;
}

.dica--larga{
  max-width:260px;
}

.dica--quebra .dica__texto{
  white-space:normal;
}

/* =========================================================
   CONTEÚDO
========================================================= */

.dica__conteudo{
  min-width:0;
}

.dica__texto{
  color:var(--tooltip-text);
  font-size:12px;
  line-height:1.1;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}

.dica__titulo{
  color:#FFFFFF;
  font-size:12px;
  line-height:1.25;
  font-weight:var(--fw-semibold);
}

.dica__tempo{
  margin-top:4px;
  color:#FFFFFF;
  font-size:18px;
  line-height:1;
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
}

.dica__meta{
  margin-top:5px;
  color:rgba(255,255,255,.78);
  font-size:11px;
  line-height:1.35;
  font-weight:var(--fw-medium);
}

.dica__titulo + .dica__meta{
  margin-top:4px;
}

.dica__tempo + .dica__meta{
  margin-top:5px;
}

/* =========================================================
   AJUSTES DE POSIÇÃO
========================================================= */

.dica[data-posicao="top"]{
  transform-origin:center bottom;
}

.dica[data-posicao="bottom"]{
  transform-origin:center top;
}

.dica[data-posicao="left"]{
  transform-origin:right center;
}

.dica[data-posicao="right"]{
  transform-origin:left center;
}

/* =========================================================
   ALVOS
========================================================= */

.dica-alvo{
  position:relative;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width:768px){
  .dica{
    max-width:min(220px, calc(100vw - 24px));
  }

  .dica--rica{
    min-width:190px;
    max-width:min(230px, calc(100vw - 24px));
  }

  .dica--larga{
    max-width:min(250px, calc(100vw - 24px));
  }

  .dica__tempo{
    font-size:16px;
  }
}



/* =========================================================
   MODAIS
========================================================= */

html.modal-aberto,
body.modal-aberto{
  overflow:hidden;
}

.modal-px{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t), visibility var(--t);
}

.modal-px.esta-aberto{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.modal-px__fundo{
  position:absolute;
  inset:0;
  background:rgba(20,20,26,.6);
}

.modal-px__janela{
  position:relative;
  width:min(100%, 560px);
  max-height:min(92vh, 900px);
  margin:auto;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transform:translateY(10px) scale(.985);
  transition:transform var(--t);
}

.modal-px.esta-aberto .modal-px__janela{
  transform:translateY(0) scale(1);
}

.modal-px--pequeno .modal-px__janela{
  width:min(100%, 420px);
}

.modal-px--medio .modal-px__janela{
  width:min(100%, 560px);
}

.modal-px--grande .modal-px__janela{
  width:min(100%, 720px);
}

.modal-px--largo .modal-px__janela{
  width:min(100%, 920px);
}

.modal-px__cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:60px;
  padding:0 18px 0 20px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  flex:0 0 auto;
}

.modal-px__cabecalho-texto{
  min-width:0;
  flex:1 1 auto;
}

.modal-px__titulo{
  color:var(--text);
  font-size:18px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
}

.modal-px__subtitulo{
  margin-top:4px;
  color:var(--text-3);
  font-size:13px;
  line-height:1.4;
  font-weight:var(--fw-medium);
}

.modal-px__fechar{
  width:36px;
  height:36px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  flex:0 0 auto;
  transition:background-color var(--t), color var(--t), opacity var(--t), transform var(--t);
}

.modal-px__fechar:hover{
  background:var(--muted);
  color:var(--text);
}

.modal-px__fechar:active{
  opacity:.88;
  transform:scale(.98);
}

.modal-px__fechar svg{
  width:18px;
  height:18px;
  display:block;
}

.modal-px__corpo{
  padding:18px 20px 20px;
  background:var(--panel);
  overflow:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:0;
}

.modal-px__corpo::-webkit-scrollbar{
  width:8px;
}

.modal-px__corpo::-webkit-scrollbar-thumb{
  background:rgba(20,20,26,.12);
  border-radius:999px;
}

.modal-px__corpo::-webkit-scrollbar-track{
  background:transparent;
}

.modal-px__texto{
  color:var(--text-2);
  font-size:14px;
  line-height:1.6;
  font-weight:var(--fw-medium);
}

.modal-px__pilha{
  display:grid;
  gap:16px;
}

.modal-px__pilha > *{
  min-width:0;
}

.modal-px__corpo{
  min-width:0;
}

.upload-arquivo{
  min-width:0;
  width:100%;
  max-width:100%;
}

.upload-arquivo__interno{
  min-width:0;
}

.upload-arquivo__descricao,
.upload-arquivo__titulo{
  min-width:0;
  max-width:100%;
}

.upload-arquivo__entrada{
  min-width:0;
  max-width:100%;
}

.modal-px__secao{
  display:grid;
  gap:10px;
}

.modal-px__secao-titulo{
  color:var(--text);
  font-size:14px;
  line-height:1.3;
  font-weight:var(--fw-semibold);
}

.modal-px__secao-texto{
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
  font-weight:var(--fw-medium);
}

.modal-px__superficie{
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel-2);
}

.modal-px__rodape{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:16px 20px 20px;
  border-top:1px solid var(--border);
  background:var(--panel);
  flex:0 0 auto;
}

.modal-px__rodape--espacado{
  justify-content:space-between;
}

.modal-px__rodape-texto{
  min-width:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.4;
  font-weight:var(--fw-medium);
}

.modal-px__destaque{
  padding:18px;
  border-radius:var(--radius);
  background:var(--accent-04);
  border:1px solid var(--accent-12);
}

.modal-px__destaque-titulo{
  color:var(--text);
  font-size:15px;
  line-height:1.3;
  font-weight:var(--fw-semibold);
}

.modal-px__destaque-texto{
  margin-top:6px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
  font-weight:var(--fw-medium);
}

.modal-px__grade{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.modal-px__cartao{
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
}

.modal-px__cartao-titulo{
  color:var(--text);
  font-size:13px;
  line-height:1.3;
  font-weight:var(--fw-semibold);
}

.modal-px__cartao-texto{
  margin-top:6px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.5;
  font-weight:var(--fw-medium);
}

@media (max-width:768px){
  .modal-px{
    padding:12px;
    align-items:flex-end;
  }

  .modal-px__janela{
    width:100%;
    max-height:min(88vh, 900px);
    border-radius:14px 14px 0 0;
    transform:translateY(14px);
  }

  .modal-px.esta-aberto .modal-px__janela{
    transform:translateY(0);
  }

  .modal-px__cabecalho{
    min-height:56px;
    padding:0 14px 0 16px;
  }

  .modal-px__titulo{
    font-size:16px;
  }

  .modal-px__subtitulo{
    font-size:12px;
  }

  .modal-px__corpo{
    padding:16px;
  }

  .modal-px__rodape{
    padding:14px 16px 16px;
    flex-wrap:wrap;
  }

  .modal-px__rodape > *{
    width:100%;
  }

  .modal-px__grade{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ÁREA DE UPLOAD / MULTIFORM DATA
========================================================= */
.upload-arquivo{
  position:relative;
  border:1px dashed var(--accent-20);
  border-radius:var(--radius-xs);
  background:var(--accent-04);
  transition:
    border-color var(--t),
    background-color var(--t);
  padding: 12px;
}

.upload-arquivo:hover{
  border-color:var(--accent);
  background:var(--accent-08);
}

.upload-arquivo.esta-arrastando{
  border-color:var(--accent);
  background:var(--accent-10);
}

.upload-arquivo__interno{
  min-height:220px;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
}

.upload-arquivo--compacto .upload-arquivo__interno{
  min-height:120px;
  padding:16px 14px;
}

.upload-arquivo__icone{
  width:56px;
  height:56px;
  border-radius:var(--radius-pill);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  color:var(--accent);
  background:var(--accent-10);
  border:1px solid var(--accent-12);
  flex:0 0 auto;
  transition:
    background-color var(--t),
    border-color var(--t),
    color var(--t);
}

.upload-arquivo:hover .upload-arquivo__icone{
  background:var(--accent-12);
  border-color:var(--accent-14);
}

.upload-arquivo.esta-arrastando .upload-arquivo__icone{
  background:var(--accent-14);
  border-color:var(--accent-16);
}

.upload-arquivo--compacto .upload-arquivo__icone{
  width:40px;
  height:40px;
  margin-bottom:10px;
}

.upload-arquivo__icone svg{
  width:22px;
  height:22px;
  display:block;
}

.upload-arquivo--compacto .upload-arquivo__icone svg{
  width:20px;
  height:20px;
}

.upload-arquivo__titulo{
  color:var(--text);
  font-size:15px;
  line-height:1.35;
  font-weight:var(--fw-semibold);
  transition:color var(--t);
}

.upload-arquivo:hover .upload-arquivo__titulo,
.upload-arquivo.esta-arrastando .upload-arquivo__titulo{
  color:var(--accent);
}

.upload-arquivo__descricao{
  margin-top:8px;
  color:var(--text-3);
  font-size:13px;
  line-height:1.45;
  font-weight:var(--fw-medium);
  max-width:420px;
  transition:color var(--t);
}

.upload-arquivo:hover .upload-arquivo__descricao,
.upload-arquivo.esta-arrastando .upload-arquivo__descricao{
  color:var(--text-2);
}

.upload-arquivo--somente-titulo .upload-arquivo__descricao{
  display:none;
}

.upload-arquivo__entrada{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}

.upload-arquivo__entrada:focus-visible + .upload-arquivo__interno{
  outline:3px solid var(--accent-14);
  outline-offset:-1px;
  border-radius:inherit;
}

.upload-arquivo__entrada:focus-visible + .upload-arquivo__interno .upload-arquivo__icone{
  background:var(--accent-12);
  border-color:var(--accent-14);
}

.upload-arquivo__entrada:focus-visible + .upload-arquivo__interno .upload-arquivo__titulo{
  color:var(--accent);
}

@media (max-width:768px){
  .upload-arquivo__interno{
    min-height:180px;
    padding:20px 16px;
  }

  .upload-arquivo--compacto .upload-arquivo__interno{
    min-height:108px;
    padding:14px 12px;
  }

  .upload-arquivo__icone{
    width:52px;
    height:52px;
    margin-bottom:14px;
  }

  .upload-arquivo__titulo{
    font-size:14px;
  }

  .upload-arquivo__descricao{
    font-size:12px;
    max-width:100%;
  }
}

/* =========================================================
   PROGRESS BAR
========================================================= */

.progresso{
  --progresso-cor-1: var(--gradient-start);
  --progresso-cor-2: var(--gradient-end);
  --progresso-cor-soft: var(--accent-08);
  --progresso-cor-soft-2: var(--accent-12);
  --progresso-valor: var(--accent);

  display:flex;
  flex-direction:column;
  gap:10px;
}

.progresso--success{
  --progresso-cor-1: var(--success);
  --progresso-cor-2: #34d399;
  --progresso-cor-soft: var(--success-08);
  --progresso-cor-soft-2: var(--success-12);
  --progresso-valor: var(--success);
}

.progresso--warning{
  --progresso-cor-1: var(--warning);
  --progresso-cor-2: #f59e0b;
  --progresso-cor-soft: var(--warning-08);
  --progresso-cor-soft-2: var(--warning-12);
  --progresso-valor: var(--warning);
}

.progresso--danger{
  --progresso-cor-1: var(--danger);
  --progresso-cor-2: #f87171;
  --progresso-cor-soft: var(--danger-08);
  --progresso-cor-soft-2: var(--danger-12);
  --progresso-valor: var(--danger);
}

.progresso__topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.progresso__titulo{
  color:var(--text);
  font-size:14px;
  line-height:1.35;
  font-weight:var(--fw-semibold);
}

.progresso__valor{
  color:var(--progresso-valor);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
}

.progresso__trilho{
  position:relative;
  overflow:hidden;
  width:100%;
  height:10px;
  border-radius:var(--radius-pill);
  background:var(--muted-2);
  border:1px solid var(--progresso-cor-soft);
}

.progresso__barra{
  --progresso:0%;
  position:relative;
  width:var(--progresso);
  height:100%;
  min-width:10px;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--progresso-cor-1) 0%, var(--progresso-cor-2) 100%);
  transition:width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.progresso__listras{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0) 0 10px,
      rgba(255,255,255,0.18) 10px 20px
    );
  animation:progresso-listras 900ms linear infinite;
  pointer-events:none;
}

.progresso__descricao{
  color:var(--text-3);
  font-size:12px;
  line-height:1.45;
  font-weight:var(--fw-medium);
}

@keyframes progresso-listras{
  from{
    background-position:0 0;
  }
  to{
    background-position:28px 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .progresso__barra{
    transition:none;
  }

  .progresso__listras{
    animation:none;
  }
}

@media (max-width:768px){
  .progresso__titulo{
    font-size:13px;
  }

  .progresso__valor{
    font-size:12px;
  }

  .progresso__trilho{
    height:9px;
  }

  .progresso__descricao{
    font-size:12px;
  }
}


/* =========================================================
   DROPDOWN GLOBAL
========================================================= */

.dropdown-px{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  width:max-content;
  max-width:100%;
}

.dropdown-px--bloco{
  display:flex;
  width:100%;
}

.dropdown-px__gatilho{
  appearance:none;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  min-height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:var(--radius-pill);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:
    background-color var(--t),
    border-color var(--t),
    color var(--t),
    opacity var(--t);
}

.dropdown-px--bloco .dropdown-px__gatilho{
  width:100%;
  justify-content:space-between;
}

.dropdown-px__gatilho:hover{
  background:var(--muted);
  border-color:var(--border-strong);
}

.dropdown-px__gatilho:active{
  opacity:.92;
}

.dropdown-px__gatilho:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-12);
}

.dropdown-px.esta-aberto .dropdown-px__gatilho{
  background:var(--muted);
  border-color:var(--border-strong);
}

.dropdown-px__gatilho-texto{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.dropdown-px__gatilho-texto span{
  white-space:nowrap;
}

.dropdown-px__gatilho-icone{
  width:16px;
  height:16px;
  color:var(--text-3);
  flex:0 0 auto;
  transition:transform var(--t), color var(--t);
}

.dropdown-px.esta-aberto .dropdown-px__gatilho-icone{
  transform:rotate(180deg);
  color:var(--text);
}

.dropdown-px__painel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:220px;
  max-width:min(420px, calc(100vw - 24px));
  padding:8px;
  background:var(--panel);
  border:1px solid var(--border-2);
  border-radius:var(--radius-xl);
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition:
    opacity var(--t),
    visibility var(--t),
    transform var(--t);
  z-index:90;
}

.dropdown-px__painel--esquerda{
  left:0;
  right:auto;
}

.dropdown-px__painel--acima{
  top:auto;
  bottom:calc(100% + 10px);
}

.dropdown-px.esta-aberto .dropdown-px__painel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.dropdown-px__cabecalho{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 8px 12px;
}

.dropdown-px__titulo{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
}

.dropdown-px__acao{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text-2);
  min-height:32px;
  padding:0 10px;
  border-radius:var(--radius-sm);
  font-size:12px;
  line-height:1;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:background-color var(--t), color var(--t);
}

.dropdown-px__acao:hover{
  background:var(--muted);
  color:var(--text);
}

.dropdown-px__acao:focus-visible{
  outline:none;
  background:var(--muted);
  color:var(--text);
}

.dropdown-px__corpo{
  min-width:0;
}

.dropdown-px__lista{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.dropdown-px__grupo{
  padding:4px 0;
}

.dropdown-px__separador{
  height:1px;
  margin:4px 0;
  background:var(--border-2);
}

.dropdown-px__item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 12px;
  border-radius:var(--radius);
  color:var(--text-link);
  text-decoration:none;
  font-size:13px;
  line-height:1.25;
  font-weight:var(--fw-semibold);
  transition:background-color var(--t), color var(--t), border-color var(--t);
}

.dropdown-px__item:hover{
  background:var(--muted);
  color:var(--text);
}

.dropdown-px__item--ativo{
  background:var(--accent-08);
  color:var(--accent);
}

.dropdown-px__item--perigo{
  color:var(--danger);
}

.dropdown-px__item--perigo:hover{
  background:var(--danger-08);
  color:var(--danger);
}

.dropdown-px__meta{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--success);
  color:#fff;
  font-size:12px;
  line-height:1;
  font-weight:var(--fw-bold);
}

.dropdown-px__rodape{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--border-2);
}

.dropdown-px__rodape-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--accent);
  font-size:12px;
  line-height:1;
  font-weight:var(--fw-semibold);
  transition:background-color var(--t), color var(--t);
}

.dropdown-px__rodape-link:hover{
  background:var(--accent-06);
}

/* =========================================================
   VARIAÇÃO: MENU
========================================================= */

.dropdown-px--menu .dropdown-px__painel{
  width:220px;
}

.dropdown-px-menu__perfil{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:var(--radius);
  text-decoration:none;
  transition:background-color var(--t);
}

.dropdown-px-menu__perfil:hover{
  background:var(--accent-06);
}

.dropdown-px-menu__avatar{
  width:44px;
  height:44px;
  border-radius: var(--radius-xs);
  object-fit:cover;
  flex:0 0 auto;
}

.dropdown-px-menu__meta{
  min-width:0;
}

.dropdown-px-menu__nome{
  color:var(--text);
  font-size:14px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dropdown-px-menu__sub{
  margin-top:4px;
  color:var(--text-2);
  font-size:12px;
  line-height:1.3;
  font-weight:var(--fw-medium);
}

/* =========================================================
   VARIAÇÃO: NOTIFICAÇÕES
========================================================= */

.dropdown-px--notificacoes .dropdown-px__painel{
  width:min(420px, calc(100vw - 24px));
  padding:0;
  overflow:hidden;
}

.dropdown-px--notificacoes .dropdown-px__cabecalho{
  padding: 12px 16px 12px;
  border-bottom:1px solid var(--border);
}

.dropdown-px-notificacoes__lista{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:420px;
  overflow:auto;
  padding:8px;
}

.dropdown-px-notificacoes__lista::-webkit-scrollbar{
  width:8px;
}

.dropdown-px-notificacoes__lista::-webkit-scrollbar-thumb{
  background:rgba(20,20,26,0.12);
  border-radius:999px;
}

.dropdown-px-notificacoes__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:var(--radius-xs);
  transition:background-color var(--t);
}

.dropdown-px-notificacoes__item:hover{
  background:var(--p-surface-2);
}

.dropdown-px-notificacoes__item--novo{
  background:var(--p-notif-new);
}

.dropdown-px-notificacoes__item--novo:hover{
  background:var(--p-notif-new-hover);
}

.dropdown-px-notificacoes__link{
  min-width:0;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.dropdown-px-notificacoes__avatar{
  width:44px;
  height:44px;
  border-radius:var(--radius-xs);
  object-fit:cover;
  display:block;
}

.dropdown-px-notificacoes__conteudo{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dropdown-px-notificacoes__texto{
  color:var(--p-text);
  font-size:13px;
  line-height:1.42;
  font-weight:var(--fw-medium);
  word-break:break-word;
}

.dropdown-px-notificacoes__texto strong{
  color:var(--p-text);
  font-weight:var(--fw-semibold);
}

.dropdown-px-notificacoes__tempo{
  color:var(--p-text-soft);
  font-size:11px;
  line-height:1.2;
  font-weight:var(--fw-medium);
}

.dropdown-px-notificacoes__thumb{
  width:46px;
  height:46px;
  object-fit:cover;
  display:block;
}

.dropdown-px-notificacoes__vazio{
  padding:28px 18px 24px;
  text-align:center;
}

.dropdown-px-notificacoes__vazio-icone{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--p-surface-3);
}

.dropdown-px-notificacoes__vazio-icone svg path {
  stroke: var(--accent);
}

.dropdown-px-notificacoes__vazio-titulo{
  margin:0 0 4px;
  color:var(--p-text);
  font-size:15px;
  line-height:1.3;
  font-weight:var(--fw-semibold);
}

.dropdown-px-notificacoes__vazio-texto{
  margin:0 auto;
  max-width:260px;
  color:var(--p-text-soft);
  font-size:12px;
  line-height:1.55;
  font-weight:var(--fw-medium);
}

.dropdown-px--notificacoes .dropdown-px__rodape{
  margin-top:0;
  padding:8px;
  border-top:1px solid var(--border);
}

/* =========================================================
   VARIAÇÃO: IDIOMA
========================================================= */

.dropdown-px--idioma .dropdown-px__painel{
  width:210px;
}

.dropdown-px-idioma__bandeira{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}

/* =========================================================
   VARIAÇÃO: CARRINHO
========================================================= */

.dropdown-px--carrinho .dropdown-px__painel{
  width:min(360px, calc(100vw - 24px));
  padding:0;
  overflow:hidden;
}

.dropdown-px--carrinho .dropdown-px__cabecalho{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--border);
}

.dropdown-px-carrinho__lista{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:8px;
}

.dropdown-px-carrinho__item{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px 8px;
  border-radius:var(--radius);
  transition:background-color var(--t);
}

.dropdown-px-carrinho__item:hover{
  background:var(--muted);
}

.dropdown-px-carrinho__thumb{
  width:56px;
  height:56px;
  border-radius:var(--radius-xs);
  object-fit:cover;
  display:block;
}

.dropdown-px-carrinho__conteudo{
  min-width:0;
}

.dropdown-px-carrinho__titulo{
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  font-weight:var(--fw-semibold);
}

.dropdown-px-carrinho__sub{
  margin-top:4px;
  color:var(--text-2);
  font-size:12px;
  line-height:1.35;
  font-weight:var(--fw-medium);
}

.dropdown-px-carrinho__preco{
  color:var(--text);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}

.dropdown-px-carrinho__resumo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px 0;
  border-top:1px solid var(--border);
}

.dropdown-px-carrinho__resumo-label{
  color:var(--text-2);
  font-size:12px;
  line-height:1.3;
  font-weight:var(--fw-medium);
}

.dropdown-px-carrinho__resumo-valor{
  color:var(--text);
  font-size:14px;
  line-height:1;
  font-weight:var(--fw-semibold);
}

.dropdown-px-carrinho__acoes{
  display:grid;
  gap:8px;
  padding:12px 16px 16px;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width:768px){
  .dropdown-px{
    width:100%;
  }

  .dropdown-px__gatilho{
    width:100%;
    justify-content:space-between;
  }

  .dropdown-px__painel{
    width:100%;
    min-width:0;
    max-width:none;
    left:0;
    right:0;
  }

  .dropdown-px__painel--acima{
    top:calc(100% + 10px);
    bottom:auto;
  }

  .dropdown-px--menu .dropdown-px__painel,
  .dropdown-px--idioma .dropdown-px__painel,
  .dropdown-px--notificacoes .dropdown-px__painel,
  .dropdown-px--carrinho .dropdown-px__painel{
    width:100%;
  }

  .dropdown-px-notificacoes__link{
    grid-template-columns:40px minmax(0,1fr);
  }

  .dropdown-px-notificacoes__thumb{
    display:none;
  }

  .dropdown-px-carrinho__item{
    grid-template-columns:48px minmax(0,1fr);
  }

  .dropdown-px-carrinho__preco{
    grid-column:2;
    justify-self:flex-start;
    margin-top:2px;
  }

  /* NAVBAR MOBILE */
  .barra-px__acoes > .dropdown-px{
    width:auto !important;
    max-width:none;
    flex:0 0 auto;
    position:static;
  }

  .barra-px__acoes > .dropdown-px [data-dropdown-px-gatilho]{
    width:auto !important;
    justify-content:center;
  }

  .barra-px__acoes > .dropdown-px [data-dropdown-px-painel]{
    position:fixed;
    top:63px;
    right:8px;
    left:auto;
    bottom:auto;
    width:min(360px, calc(100vw - 16px)) !important;
    min-width:0;
    max-width:calc(100vw - 16px);
    margin:0;
    transform:translateY(6px);
    z-index:1200;
  }

  .barra-px__acoes > .dropdown-px.dropdown-px--menu [data-dropdown-px-painel]{
    width:min(280px, calc(100vw - 16px)) !important;
    max-height:min(72vh, 520px);
    overflow:auto;
  }

  .barra-px__acoes > .dropdown-px.dropdown-px--notificacoes [data-dropdown-px-painel]{
    width:min(360px, calc(100vw - 16px)) !important;
    max-height:min(75vh, 560px);
  }

  .barra-px__acoes > .dropdown-px.dropdown-px--notificacoes .dropdown-px-notificacoes__lista{
    max-height:min(58vh, 420px);
  }
}


/* =========================================================
   TABS GLOBAIS
========================================================= */

.tabs-px{
  display:grid;
  gap:16px;
}

.tabs-px__barra{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}

.tabs-px__barra::-webkit-scrollbar{
  display:none;
}

.tabs-px__barra.esta-arrastando{
  cursor:grabbing;
  user-select:none;
}

.tabs-px__lista{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}

.tabs-px__botao{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 15px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text-2);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  transition:
    background-color var(--t),
    border-color var(--t),
    color var(--t),
    opacity var(--t);
}

.tabs-px__botao:hover{
  color:var(--accent);
  border-color:var(--accent-20);
  background:var(--accent-04);
}

.tabs-px__botao:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-12);
}

.tabs-px__botao.esta-ativa,
.tabs-px__botao[aria-selected="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.tabs-px__contador{
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:2px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent-10);
  color:currentColor;
  font-size:11px;
  line-height:1;
  font-weight:var(--fw-bold);
}

.tabs-px__botao.esta-ativa .tabs-px__contador,
.tabs-px__botao[aria-selected="true"] .tabs-px__contador{
  background:rgba(255,255,255,0.18);
  color:#fff;
}

.tabs-px__painel{
  display:none;
}

.tabs-px__painel.esta-ativo{
  display:block;
}

/* versão estática */
.tabs-px--estatica .tabs-px__painel{
  display:block;
}

/* =========================================================
   LAYOUT DE CONTEÚDO SEGMENTADO
========================================================= */

.layout-segmentado-px{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
  align-items:start;
}

.layout-segmentado-px__principal,
.layout-segmentado-px__lateral{
  display:grid;
  gap:12px;
}

@media (max-width:980px){
  .layout-segmentado-px{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   ITEM RESUMO / ITEM DE LISTA REUTILIZÁVEL
========================================================= */

.item-resumo-px{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel-2);
  padding:16px;
}

.item-resumo-px__topo{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.item-resumo-px__meta{
  min-width:0;
  flex:1 1 auto;
}

.item-resumo-px__titulo{
  color:var(--text);
  font-size:17px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;
}

.item-resumo-px__sub{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.item-resumo-px__slug{
  color:var(--text-3);
  font-size:12px;
  line-height:1.35;
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:0.02em;
}

.item-resumo-px__valores{
  flex:0 0 auto;
  text-align:right;
}

.item-resumo-px__valor{
  color:var(--text);
  font-size:18px;
  line-height:1.15;
  font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;
}

.item-resumo-px__apoio{
  margin-top:6px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.4;
  font-weight:var(--fw-medium);
}

.item-resumo-px__rodape{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.item-resumo-px__texto{
  color:var(--text-2);
  font-size:12px;
  line-height:1.45;
  font-weight:var(--fw-medium);
}

.item-resumo-px__acoes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* =========================================================
   RESUMO LATERAL / RESUMO GENÉRICO
========================================================= */

.resumo-lateral-px{
  position:sticky;
  top:78px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  padding:16px;
}

.resumo-lateral-px__titulo{
  margin:0 0 14px;
  color:var(--text);
  font-size:16px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
}

.resumo-lateral-px__lista{
  display:grid;
  gap:10px;
}

.resumo-lateral-px__linha{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.resumo-lateral-px__label{
  color:var(--text-2);
  font-size:13px;
  line-height:1.4;
  font-weight:var(--fw-medium);
}

.resumo-lateral-px__valor{
  color:var(--text);
  font-size:13px;
  line-height:1.4;
  font-weight:var(--fw-semibold);
  text-align:right;
}

.resumo-lateral-px__separador{
  height:1px;
  margin:2px 0;
  background:var(--border);
}

.resumo-lateral-px__linha--total .resumo-lateral-px__label{
  color:var(--text);
  font-weight:var(--fw-semibold);
}

.resumo-lateral-px__linha--total .resumo-lateral-px__valor{
  color:var(--text);
  font-size:18px;
  line-height:1.1;
  font-weight:var(--fw-semibold);
}

.resumo-lateral-px__acoes{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.resumo-lateral-px__nota{
  margin-top:10px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.5;
  font-weight:var(--fw-medium);
}

@media (max-width:980px){
  .resumo-lateral-px{
    position:static;
    top:auto;
  }
}

@media (max-width:768px){
  .tabs-px{
    gap:14px;
  }

  .tabs-px__botao{
    min-height:36px;
    padding:0 14px;
    font-size:12px;
  }

  .item-resumo-px{
    padding:14px;
  }

  .item-resumo-px__topo{
    flex-direction:column;
    align-items:flex-start;
  }

  .item-resumo-px__valores{
    text-align:left;
  }

  .item-resumo-px__rodape{
    flex-direction:column;
    align-items:flex-start;
  }

  .item-resumo-px__titulo{
    font-size:16px;
  }

  .item-resumo-px__valor{
    font-size:17px;
  }
}



/* =========================================================
   THUMBNAILS
========================================================= */

.thumb-px{
  --thumb-tamanho:120px;
  width:var(--thumb-tamanho);
  min-width:0;
  display:flex;
  flex-direction:column;
}

.thumb-px__midia{
  position:relative;
  display:block;
  width:var(--thumb-tamanho);
  height:var(--thumb-tamanho);
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--panel);
  overflow:hidden;
  transition:
    border-color var(--t),
    background-color var(--t),
    box-shadow var(--t),
    transform var(--t);
}

.thumb-px__midia:hover{
  border-color:var(--accent);
  background:var(--panel);
  box-shadow:0 0 0 3px var(--accent-08);
}

.thumb-px__imagem{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:calc(var(--radius-xs) - 2px);
  background:var(--muted);
}

/* variações */

.thumb-px--imagem .thumb-px__midia{
  border-radius:var(--radius-xs);
  padding:4px;
}

.thumb-px--imagem .thumb-px__imagem{
  border-radius:calc(var(--radius-xs) - 2px);
}

.thumb-px--perfil-redondo .thumb-px__midia{
  border-radius:var(--radius-pill);
  padding:3px;
}

.thumb-px--perfil-redondo .thumb-px__imagem{
  border-radius:var(--radius-pill);
}

.thumb-px--perfil-quadrado .thumb-px__midia{
  border-radius:var(--radius-xs);
  padding:3px;
}

.thumb-px--perfil-quadrado .thumb-px__imagem{
  border-radius:calc(var(--radius-xs) - 2px);
}

/* meta */

.thumb-px__meta{
  margin-top:6px;
  min-width:0;
}

.thumb-px__usuario{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

.thumb-px__assinatura,
.thumb-px__verificado{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.thumb-px__assinatura img{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
}

.thumb-px__nome{
  min-width:0;
  flex:0 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-link);
  font-size:13px;
  line-height:1.25;
  font-weight:var(--fw-medium);
}

.thumb-px__verificado img,
.thumb-px__verificado svg{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
}

.thumb-px__tempo{
  margin-top:3px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.35;
  font-weight:var(--fw-medium);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* tamanhos opcionais */

.thumb-px--100{
  --thumb-tamanho:100px;
}

.thumb-px--120{
  --thumb-tamanho:120px;
}

.thumb-px--140{
  --thumb-tamanho:140px;
}

/* responsivo */

@media (max-width:768px){
  .thumb-px{
    --thumb-tamanho: 100px;
  }

  .thumb-px__nome{
    font-size:12px;
  }

  .thumb-px__tempo{
    font-size:10px;
  }
}


/* =========================================================
   PERFIL DE USUÁRIO
========================================================= */

.usuario-px{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:0 0 auto;
  padding:2px 6px 2px 2px;
  border-radius:var(--radius-xs);
  text-decoration:none;
  transition:background-color var(--t), opacity var(--t);
}

.usuario-px:hover{
  background:var(--muted);
}

.usuario-px:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--accent-08);
}

.usuario-px__avatar{
  width:32px;
  height:32px;
  border-radius:var(--radius-xs);
  object-fit:cover;
  flex:0 0 auto;
  background:var(--muted);
}

.usuario-px__nome{
  min-width:0;
  color:var(--text-link);
  font-size:13px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.usuario-px--compacto{
  padding:0;
  border-radius:var(--radius-xs);
}

.usuario-px--compacto:hover{
  background:transparent;
}

.usuario-px--compacto .usuario-px__nome{
  display:none;
}

@media (max-width:768px){
  .usuario-px{
    padding:0;
    border-radius:var(--radius-xs);
  }

  .usuario-px__nome{
    display:none;
  }
}

/* =========================================================
   LINKS DE AÇÃO
========================================================= */

.link-acao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text-2);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background-color var(--t),
    color var(--t),
    opacity var(--t),
    box-shadow var(--t);
}

.link-acao:hover{
  background:var(--muted);
  color:var(--text);
  text-decoration:none;
}

.link-acao:active{
  opacity:.88;
}

.link-acao:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--accent-08);
}

/* =========================================================
   VARIAÇÕES
========================================================= */

.link-acao-neutro{
  color:var(--text-2);
}

.link-acao-neutro:hover{
  background:var(--muted);
  color:var(--text);
}

.link-acao-primario{
  color:var(--accent);
}

.link-acao-primario:hover{
  background:var(--accent-08);
  color:var(--accent);
}

.link-acao-sucesso{
  color:var(--success);
}

.link-acao-sucesso:hover{
  background:var(--success-08);
  color:var(--success);
}

.link-acao-aviso{
  color:#B7791F;
}

.link-acao-aviso:hover{
  background:var(--warning-08);
  color:#A16207;
}

.link-acao-perigo{
  color:var(--danger);
}

.link-acao-perigo:hover{
  background:var(--danger-08);
  color:var(--danger);
}

/* =========================================================
   ESTADOS ÚTEIS
========================================================= */

.link-acao-ativo{
  background:var(--accent-08);
  color:var(--accent);
}

.link-acao-desabilitado,
.link-acao[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
  cursor:not-allowed;
}

.link-acao-com-icone svg{
  width:16px;
  height:16px;
  flex:0 0 16px;
}

/* =========================================================
   TAMANHOS
========================================================= */

.link-acao-pequeno{
  min-height:30px;
  padding:0 10px;
  font-size:12px;
}

.link-acao-grande{
  min-height:38px;
  padding:0 14px;
  font-size:14px;
}

@media (max-width:768px){
  .link-acao{
    font-size:12px;
  }

  .link-acao-grande{
    min-height:36px;
    font-size:13px;
  }
}


/* =========================================================
   BARRA GLOBAL
========================================================= */

.barra-px{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:55px;
  background:rgba(255,255,255,0.70);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-2);
  z-index:1000;
}

.barra-px__inner{
  min-height:55px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}

.barra-px__esquerda{
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}

.barra-px__centro{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.barra-px__direita{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.barra-px__logo{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.barra-px__logo img{
  width:auto;
  height:31px;
  display:block;
}

.barra-px__logo--mobile{
  display:none;
}

.barra-px__mobile-esquerda{
  display:none;
}

/* =========================================================
   NAVEGAÇÃO
========================================================= */

.barra-px__nav{
  display:flex;
  align-items:stretch;
  gap:22px;
  height:55px;
  min-width:0;
}

.barra-px__navlink{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:55px;
  color:var(--text-2);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  text-decoration:none;
  transition:
    color var(--t),
    opacity var(--t),
    background-color var(--t);
}

.barra-px__navlink:hover{
  color:var(--accent);
}

.barra-px__navlink.esta-ativo{
  color:var(--accent);
}

.barra-px__navlink::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:transparent;
  border-radius:var(--radius-pill);
  z-index:2;
  transition:background-color var(--t);
}

.barra-px__navlink:hover::after{
  background:var(--accent-20);
}

.barra-px__navlink.esta-ativo::after{
  background:var(--accent);
}

/* =========================================================
   VARIAÇÕES
========================================================= */

.barra-px--principal .barra-px__inner{
  grid-template-columns:auto 1fr auto;
}

.barra-px--principal .barra-px__centro{
  justify-content:flex-start;
}

.barra-px--shopping .barra-px__inner{
  grid-template-columns:auto 1fr auto;
}

.barra-px--shopping .barra-px__centro{
  display:none;
}

.barra-px--centralizada .barra-px__inner{
  grid-template-columns:1fr auto 1fr;
}

.barra-px--centralizada .barra-px__esquerda{
  justify-content:flex-start;
}

.barra-px--centralizada .barra-px__direita{
  justify-content:flex-end;
}

.barra-px--centralizada .barra-px__centro{
  display:flex;
}

/* =========================================================
   AÇÕES AUXILIARES
========================================================= */

.barra-px__acoes{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.barra-px__botao{
  flex:0 0 auto;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width:980px){
  .barra-px__inner{
    gap:16px;
  }

  .barra-px__esquerda{
    gap:16px;
  }

  .barra-px__nav{
    gap:16px;
  }
}

@media (max-width:768px){
  .barra-px__inner{
    min-height:55px;
    grid-template-columns:auto 1fr auto;
    gap:12px;
  }

  .barra-px__logo--desktop{
    display:none;
  }

  .barra-px__logo--mobile{
    display:inline-flex;
  }

  .barra-px__logo--mobile img{
    height:28px;
  }

  .barra-px__nav{
    display:none;
  }

  .barra-px__mobile-esquerda{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .barra-px__esquerda{
    gap:12px;
  }

  .barra-px__direita{
    gap:8px;
  }

  .barra-px--centralizada .barra-px__inner{
    grid-template-columns:1fr auto 1fr;
  }
}

/* =========================================================
   LATERAL GLOBAL
========================================================= */

.lateral-px{
  --lateral-largura: 280px;
  --lateral-largura-fechada: 72px;
  position: relative;
  width: var(--lateral-largura);
  min-width: 0;
  flex: 0 0 var(--lateral-largura);
  border-right: 1px solid var(--border);
  background: var(--panel);
  transition:
    width var(--t),
    flex-basis var(--t),
    transform var(--t),
    opacity var(--t);
}

.lateral-px__topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:60px;
  padding:12px;
  border-bottom:1px solid var(--border);
}

.lateral-px__topo-esquerda{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

.lateral-px__titulo{
  color:var(--text);
  font-size:15px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lateral-px__acoes{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.lateral-px__corpo{
  min-width:0;
  padding:10px;
  display:grid;
  gap:8px;
}

.lateral-px__rodape{
  margin-top:auto;
  padding:10px;
  border-top:1px solid var(--border);
}

.lateral-px__grupo{
  display:grid;
  gap:4px;
}

.lateral-px__grupo-titulo{
  padding:6px 10px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.lateral-px__separador{
  height:1px;
  margin:4px 0;
  background:var(--border);
}

/* =========================================================
   ITEM DA LATERAL
========================================================= */

.item-lateral-px{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:0 10px;
  border:0;
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  background:transparent;
  color:var(--text-2);
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  transition:
    background-color var(--t),
    color var(--t),
    opacity var(--t);
}

.item-lateral-px:hover{
  background:var(--muted);
  color:var(--text);
}

.item-lateral-px:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--accent-08);
}

.item-lateral-px.esta-ativo{
  background:var(--accent-08);
  color:var(--accent);
}

.item-lateral-px[aria-disabled="true"],
.item-lateral-px.esta-desabilitado{
  opacity:.5;
  pointer-events:none;
}

.item-lateral-px__icone{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
}

.item-lateral-px__icone svg{
  width:20px;
  height:20px;
  display:block;
}

.item-lateral-px__texto{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.item-lateral-px__titulo{
  min-width:0;
  color:currentColor;
  font-size:13px;
  line-height:1.25;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.item-lateral-px__meta{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--danger);
  color:#FFFFFF;
  font-size:10px;
  line-height:1;
  font-weight:var(--fw-semibold);
  flex:0 0 auto;
}

.item-lateral-px__seta{
  width:16px;
  height:16px;
  color:var(--text-3);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  transition:transform var(--t), color var(--t), opacity var(--t);
}

.item-lateral-px__seta svg{
  width:16px;
  height:16px;
  display:block;
}

.item-lateral-px[aria-expanded="true"] .item-lateral-px__seta{
  transform:rotate(90deg);
  color:currentColor;
}

/* =========================================================
   ACCORDION INTERNO
========================================================= */

.lateral-px__acordeon{
  display:grid;
  gap:4px;
}

.lateral-px__acordeon-conteudo{
  display:none;
  padding:2px 0 6px 30px;
}

.lateral-px__acordeon.esta-aberto .lateral-px__acordeon-conteudo{
  display:grid;
  gap:4px;
}

.lateral-px__subitem{
  min-height:34px;
  padding:0 10px;
  border-radius:var(--radius-sm);
  display:inline-flex;
  align-items:center;
  color:var(--text-2);
  font-size:12px;
  line-height:1;
  font-weight:var(--fw-semibold);
  text-decoration:none;
  transition:background-color var(--t), color var(--t);
}

.lateral-px__subitem:hover{
  background:var(--muted);
  color:var(--text);
}

.lateral-px__subitem.esta-ativo{
  background:var(--accent-08);
  color:var(--accent);
}

/* =========================================================
   RECOLHÍVEL
========================================================= */

.lateral-px--recolhivel.esta-fechada{
  width:var(--lateral-largura-fechada);
  flex-basis:var(--lateral-largura-fechada);
}

.lateral-px--recolhivel.esta-fechada .lateral-px__titulo,
.lateral-px--recolhivel.esta-fechada .lateral-px__grupo-titulo,
.lateral-px--recolhivel.esta-fechada .item-lateral-px__texto,
.lateral-px--recolhivel.esta-fechada .item-lateral-px__meta,
.lateral-px--recolhivel.esta-fechada .item-lateral-px__seta,
.lateral-px--recolhivel.esta-fechada .lateral-px__acordeon-conteudo,
.lateral-px--recolhivel.esta-fechada .lateral-px__rodape .botao,
.lateral-px--recolhivel.esta-fechada .lateral-px__rodape .link-acao{
  display:none !important;
}

.lateral-px--recolhivel.esta-fechada .lateral-px__topo{
  justify-content:center;
}

.lateral-px--recolhivel.esta-fechada .lateral-px__topo-esquerda{
  display:none;
}

.lateral-px--recolhivel.esta-fechada .lateral-px__acoes{
  width:100%;
  justify-content:center;
}

.lateral-px--recolhivel.esta-fechada .item-lateral-px{
  grid-template-columns:20px;
  justify-content:center;
  padding:0;
}

.lateral-px--recolhivel.esta-fechada .item-lateral-px__icone{
  margin:0 auto;
}

/* =========================================================
   PAINEL / OFFCANVAS
========================================================= */

.lateral-px__overlay{
  position:fixed;
  inset:0;
  background:rgba(20,20,26,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--t), visibility var(--t);
  z-index:1090;
}

.lateral-px--painel{
  z-index:1100;
}

.lateral-px__fechar-mobile,
.lateral-px__abrir-mobile{
  display:none;
}

@media (max-width:768px){
  .lateral-px__abrir-mobile{
    display:inline-flex;
  }

  .lateral-px--painel{
    position:fixed;
    top:55px;
    left:0;
    bottom:0;
    width:min(86vw, 320px);
    flex-basis:min(86vw, 320px);
    max-width:320px;
    border-right:1px solid var(--border);
    transform:translateX(-100%);
    box-shadow:none;
  }

  .lateral-px--painel.esta-aberta{
    transform:translateX(0);
  }

  .lateral-px--painel .lateral-px__fechar-mobile{
    display:inline-flex;
  }

  .lateral-px__overlay.esta-aberto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .lateral-px--recolhivel{
    width:min(86vw, 320px);
    flex-basis:min(86vw, 320px);
  }

  .lateral-px--recolhivel.esta-fechada{
    width:min(86vw, 320px);
    flex-basis:min(86vw, 320px);
  }

  .lateral-px--recolhivel.esta-fechada .lateral-px__titulo,
  .lateral-px--recolhivel.esta-fechada .lateral-px__grupo-titulo,
  .lateral-px--recolhivel.esta-fechada .item-lateral-px__texto,
  .lateral-px--recolhivel.esta-fechada .item-lateral-px__meta,
  .lateral-px--recolhivel.esta-fechada .item-lateral-px__seta,
  .lateral-px--recolhivel.esta-fechada .lateral-px__acordeon-conteudo{
    display:initial;
  }

  .lateral-px--recolhivel.esta-fechada .item-lateral-px{
    grid-template-columns:20px minmax(0,1fr) auto auto;
    padding:0 10px;
  }

  .lateral-px--recolhivel.esta-fechada .lateral-px__topo{
    justify-content:space-between;
  }

  .lateral-px--recolhivel.esta-fechada .lateral-px__topo-esquerda{
    display:flex;
  }

  .lateral-px--recolhivel.esta-fechada .lateral-px__acoes{
    width:auto;
  }
}

/* =========================================================
   PAGINAÇÃO
========================================================= */

.paginacao-px{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.paginacao-px__lista{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.paginacao-px__item{
  display:inline-flex;
}

.paginacao-px__link,
.paginacao-px__atual{
  min-width:40px;
  height:40px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  color:var(--text);
  font-size:14px;
  line-height:1;
  font-weight:var(--fw-semibold);
  text-decoration:none;
  white-space:nowrap;
  transition:
    background-color var(--t),
    border-color var(--t),
    color var(--t),
    opacity var(--t),
    box-shadow var(--t);
}

.paginacao-px__link:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-06);
}

.paginacao-px__link:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--accent-08);
}

.paginacao-px__link:active{
  opacity:.88;
}

.paginacao-px__atual{
  background:var(--accent);
  border-color:var(--accent);
  color:#FFFFFF;
}

.paginacao-px__reticencias{
  min-width:20px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  font-size:14px;
  line-height:1;
  font-weight:var(--fw-semibold);
  padding:0 2px;
}

.paginacao-px__link--anterior,
.paginacao-px__link--proxima{
  padding:0 16px;
}

.paginacao-px__link[aria-disabled="true"],
.paginacao-px__link.esta-desabilitado{
  opacity:.5;
  pointer-events:none;
  cursor:not-allowed;
}

.paginacao-px--compacta{
  gap:8px;
}

.paginacao-px--compacta .paginacao-px__lista{
  gap:8px;
}

.paginacao-px--compacta .paginacao-px__link,
.paginacao-px--compacta .paginacao-px__atual{
  min-width:36px;
  height:36px;
  padding:0 12px;
  font-size:13px;
}

.paginacao-px--compacta .paginacao-px__reticencias{
  height:36px;
  font-size:13px;
}

@media (max-width:768px){
  .paginacao-px{
    gap:8px;
    margin-top:22px;
  }

  .paginacao-px__lista{
    gap:8px;
  }

  .paginacao-px__link,
  .paginacao-px__atual{
    min-width:36px;
    height:36px;
    padding:0 12px;
    font-size:13px;
  }

  .paginacao-px__reticencias{
    height:36px;
    font-size:13px;
  }

  .paginacao-px__link--anterior,
  .paginacao-px__link--proxima{
    padding:0 12px;
  }
}


/* =========================================================
   LISTA LATERAL COM MÍDIA / META / AÇÃO
========================================================= */

.lista-lateral-px{
  display:grid;
  gap:12px;
}

.lista-lateral-px__item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;
}

.lista-lateral-px__item.com-bg {
  background: var(--panel);
  padding: 1rem;
  border-radius: var(--radius-lg);
}
.lista-lateral-px__item.com-bg:hover  {
  background: var(--accent-06);
}

.lista-lateral-px__principal{
  min-width:0;
  display:grid;
  grid-template-columns:56px minmax(0, 1fr);
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.lista-lateral-px__principal--sem-midia{
  grid-template-columns:52px minmax(0, 1fr);
}

.lista-lateral-px__thumb{
  width:56px;
  height:56px;
  border-radius:var(--radius-xs);
  object-fit:cover;
  display:block;
  flex:0 0 56px;
  background:var(--muted);
}

.lista-lateral-px__avatar{
  width:52px;
  height:52px;
  border-radius:var(--radius-xs);
  object-fit:cover;
  display:block;
  flex:0 0 52px;
  background:var(--muted);
}

.lista-lateral-px__corpo{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.lista-lateral-px__topo{
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
}

.lista-lateral-px__insignia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.lista-lateral-px__insignia .subscription-badge{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
}

.lista-lateral-px__nome{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:14px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
}

.lista-lateral-px__verificado{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.lista-lateral-px__verificado img{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
}

.lista-lateral-px__descricao{
  color:var(--text-2);
  font-size:13px;
  line-height:1.4;
  font-weight:var(--fw-medium);
  word-break:break-word;
}

.lista-lateral-px__descricao strong{
  color:var(--accent);
  font-weight:var(--fw-semibold);
}

.lista-lateral-px__meta{
  color:var(--text-2);
  font-size:12px;
  line-height:1.35;
  font-weight:var(--fw-medium);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lista-lateral-px__tempo{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.3;
  font-weight:var(--fw-medium);
}

.lista-lateral-px__acao{
  flex:0 0 auto;
  align-self:center;
}

.lista-lateral-px__acao .botao{
  min-height:36px;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width:768px){
  .lista-lateral-px__item{
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
  }

  .lista-lateral-px__principal{
    grid-template-columns:48px minmax(0, 1fr);
    gap:10px;
  }

  .lista-lateral-px__principal--sem-midia{
    grid-template-columns:44px minmax(0, 1fr);
  }

  .lista-lateral-px__thumb{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .lista-lateral-px__avatar{
    width:44px;
    height:44px;
    flex-basis:44px;
  }

  .lista-lateral-px__nome{
    font-size:13px;
  }

  .lista-lateral-px__descricao{
    font-size:12px;
    line-height:1.4;
  }

  .lista-lateral-px__meta,
  .lista-lateral-px__tempo{
    font-size:11px;
  }

  .lista-lateral-px__acao .botao{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }
}

/* =========================================================
   LAYOUTS AUXILIARES / DS-ROW
========================================================= */

.ds-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.ds-row--inicio{
  justify-content:flex-start;
}

.ds-row--centro{
  justify-content:center;
}

.ds-row--fim{
  justify-content:flex-end;
}

.ds-row--entre{
  justify-content:space-between;
}

.ds-row--espalhado{
  justify-content:space-around;
}

.ds-row--meio-entre{
  align-items:center;
  justify-content:space-between;
}

.ds-row--centro-entre{
  align-items:center;
  justify-content:space-between;
}

.ds-row--sem-quebra{
  flex-wrap:nowrap;
}

.ds-row--coluna{
  flex-direction:column;
  align-items:flex-start;
}

.ds-row--coluna-centro{
  flex-direction:column;
  align-items:center;
}

.ds-row--gap-pequeno{
  gap:8px;
}

.ds-row--gap-medio{
  gap:12px;
}

.ds-row--gap-grande{
  gap:16px;
}

.ds-row__item-expandido{
  flex:1 1 auto;
  min-width:0;
}

.ds-row__item-fixo{
  flex:0 0 auto;
}

@media (max-width:768px){
  .ds-row--quebra-mobile{
    flex-wrap:wrap;
  }

  .ds-row--empilha-mobile{
    flex-direction:column;
    align-items:stretch;
  }

  .ds-row--entre-mobile{
    justify-content:space-between;
  }
}

/* =========================================================
   ITEM DE IMAGEM
========================================================= */

.item-imagem{
  position:relative;
  display:block;
  width:100%;
  border-radius:var(--radius-xs);
  overflow:hidden;
  background:var(--muted);
  border:1px solid var(--border);
  min-width:0;
}

.item-imagem__midia{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--muted-2);
  overflow:hidden;
}

.item-imagem__midia img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t), filter var(--t);
}

.item-imagem:hover .item-imagem__midia img{
  transform:scale(1.02);
}

.item-imagem--paisagem .item-imagem__midia{
  aspect-ratio:16 / 10;
}

.item-imagem--retrato .item-imagem__midia{
  aspect-ratio:4 / 5;
}

.item-imagem__info{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-radius:var(--radius-xs);
  background:rgba(20, 20, 26, 0.72);
  color:#fff;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--t), transform var(--t);
  pointer-events:none;
}

.item-imagem:hover .item-imagem__info,
.item-imagem:focus-within .item-imagem__info{
  opacity:1;
  transform:translateY(0);
}

.item-imagem__data,
.item-imagem__hora{
  font-size:12px;
  line-height:1.2;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}

.item-imagem__hora{
  color:rgba(255,255,255,0.82);
}

/* =========================================================
   BOTÕES SVG COM BORDA
========================================================= */

.botao-borda-svg{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--bg);
  color:var(--text-2);
  font-size:13px;
  line-height:1;
  font-weight:var(--fw-semibold);
  transition:
    border-color var(--t),
    color var(--t),
    background-color var(--t),
    transform var(--t);
  text-decoration:none;
}

.botao-borda-svg:hover,
.botao-borda-svg:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-04);
}

.botao-borda-svg:active{
  transform:translateY(1px);
}

.botao-borda-svg svg{
  width:18px;
  height:18px;
  flex:0 0 18px;
  stroke:currentColor;
  transition:transform var(--t);
}

.botao-borda-svg:hover svg,
.botao-borda-svg:focus-visible svg{
  transform:scale(1.04);
}

.botao-borda-svg__texto{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

/* somente ícone */
.botao-borda-svg--somente-icone{
  width:38px;
  min-width:38px;
  padding:0;
}

/* menor com texto */
.botao-borda-svg--pequeno{
  min-height:32px;
  padding:0 10px;
  gap:6px;
  font-size:12px;
}

.botao-borda-svg--pequeno svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}

/* menor somente ícone */
.botao-borda-svg--somente-icone-pequeno{
  width:32px;
  min-width:32px;
  min-height:32px;
  padding:0;
}

.botao-borda-svg--somente-icone-pequeno svg{
  width:15px;
  height:15px;
  flex:0 0 15px;
}

/* contextual */
.botao-borda-svg--perigo:hover,
.botao-borda-svg--perigo:focus-visible{
  border-color:var(--danger);
  color:var(--danger);
  background:var(--danger-08);
}

.botao-borda-svg--aviso:hover,
.botao-borda-svg--aviso:focus-visible{
  border-color:var(--warning);
  color:#B7791F;
  background:var(--warning-08);
}

.botao-borda-svg--sucesso:hover,
.botao-borda-svg--sucesso:focus-visible{
  border-color:var(--success);
  color:var(--success);
  background:var(--success-08);
}

@media (max-width:768px){
  .item-imagem__info{
    opacity:1;
    transform:none;
  }
}



































/* 15. TOAST GLOBAL */

.p_toast-stack{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  pointer-events:none;
}

.p_toast{
  position:relative;
  width:min(380px, calc(100vw - 24px));
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px 14px 14px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(18,18,24,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 32px rgba(0,0,0,.22);
  color:#fff;
  overflow:hidden;
  pointer-events:auto;
  opacity:0;
  transform:translateY(16px) scale(.98);
  transition:
    opacity .22s ease,
    transform .22s ease;
}

.p_toast.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.p_toast.is-leaving{
  opacity:0;
  transform:translateY(10px) scale(.98);
}

.p_toast__icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-top:1px;
  background:rgba(255,255,255,.06);
  color:#fff;
}

.p_toast__icon svg{
  width:20px;
  height:20px;
  display:block;
}

.p_toast__content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-right:4px;
}

.p_toast__title{
  color:#fff;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
}

.p_toast__message{
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
  font-weight:500;
  word-break:break-word;
}

.p_toast__close{
  width:32px;
  height:32px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:rgba(255,255,255,.68);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    background var(--t),
    color var(--t),
    transform var(--t);
}

.p_toast__close:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

.p_toast__close:active{
  transform:scale(.96);
}

.p_toast__close svg{
  width:18px;
  height:18px;
  display:block;
}

.p_toast__progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.p_toast__progress span{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  transform:scaleX(1);
  background:currentColor;
  opacity:.9;
  transition-property:transform;
  transition-timing-function:linear;
}

.p_toast--success{
  border-color:rgba(34,197,94,.22);
  color:#22c55e;
}

.p_toast--success .p_toast__icon{
  background:rgba(34,197,94,.14);
  color:#86efac;
}

.p_toast--warning{
  border-color:rgba(245,158,11,.24);
  color:#f59e0b;
}

.p_toast--warning .p_toast__icon{
  background:rgba(245,158,11,.14);
  color:#fcd34d;
}

.p_toast--error{
  border-color:rgba(239,68,68,.22);
  color:#ef4444;
}

.p_toast--error .p_toast__icon{
  background:rgba(239,68,68,.14);
  color:#fca5a5;
}

.p_toast--info{
  border-color:rgba(96,165,250,.22);
  color:#60a5fa;
}

.p_toast--info .p_toast__icon{
  background:rgba(96,165,250,.14);
  color:#93c5fd;
}

@media (max-width: 640px){
  .p_toast-stack{
    left:12px;
    right:12px;
    bottom:12px;
    align-items:stretch;
  }

  .p_toast{
    width:100%;
    border-radius:16px;
    grid-template-columns:auto 1fr auto;
    padding:13px;
  }

  .p_toast__icon{
    width:34px;
    height:34px;
    border-radius:11px;
  }

  .p_toast__title{
    font-size:13px;
  }

  .p_toast__message{
    font-size:12px;
  }
}