/* Plataforma de Cursos — CSS próprio (substitui Tailwind CDN).
   Cobre apenas as classes usadas nos templates `templates/cursos/*_platform.html`
   e `meus_cursos.html`. Ao adicionar uma classe nova num template da plataforma,
   adicione o equivalente aqui. */

/* ===== Design tokens ===== */
:root{
  --plat-primary:#00685f;--plat-primary-container:#008378;
  --plat-on-primary:#fff;--plat-on-primary-container:#f4fffc;
  --plat-secondary-container:#316bf3;--plat-on-secondary-container:#fefcff;
  --plat-tertiary-container:#518200;--plat-on-tertiary-container:#f9ffea;
  --plat-error-container:#ffdad6;--plat-on-error-container:#93000a;
  --plat-surface:#f8f9ff;--plat-on-surface:#0b1c30;
  --plat-outline:#6d7a77;
  --plat-white:#fff;
  --plat-slate-50:#f8fafc;--plat-slate-100:#f1f5f9;--plat-slate-200:#e2e8f0;
  --plat-slate-300:#cbd5e1;--plat-slate-400:#94a3b8;--plat-slate-500:#64748b;
  --plat-slate-600:#475569;--plat-slate-700:#334155;--plat-slate-900:#0f172a;
  --plat-teal-50:#f0fdfa;--plat-teal-100:#ccfbf1;--plat-teal-200:#99f6e4;
  --plat-teal-600:#0d9488;--plat-teal-700:#0f766e;--plat-teal-800:#115e59;
  --plat-amber-100:#fef3c7;--plat-amber-800:#92400e;
  --plat-emerald-100:#d1fae5;--plat-emerald-200:#a7f3d0;--plat-emerald-800:#065f46;
  --plat-rose-50:#fff1f2;--plat-rose-200:#fecdd3;--plat-rose-500:#f43f5e;--plat-rose-800:#9f1239;
  --plat-sky-50:#f0f9ff;--plat-sky-200:#bae6fd;--plat-sky-800:#075985;
}

/* ===== Reset mínimo (não interfere com o resto do site) ===== */
.plat-scope,.plat-scope *,.plat-scope *::before,.plat-scope *::after{box-sizing:border-box}
.plat-scope{font-family:'Inter',system-ui,sans-serif;color:var(--plat-on-surface);background:var(--plat-surface);line-height:1.5}
.plat-scope h1,.plat-scope h2,.plat-scope h3,.plat-scope h4,.plat-scope h5,.plat-scope h6,
.plat-scope p,.plat-scope ul,.plat-scope ol,.plat-scope form,.plat-scope figure{margin:0;padding:0}
.plat-scope ul{list-style:none}
.plat-scope a{color:inherit;text-decoration:none}
.plat-scope button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.plat-scope img{display:block;max-width:100%}
.plat-scope input{font:inherit}

/* ===== Display / Layout ===== */
.plat-scope .flex{display:flex}.plat-scope .grid{display:grid}
.plat-scope .hidden{display:none}
.plat-scope .flex-col{flex-direction:column}.plat-scope .flex-1{flex:1 1 0%}.plat-scope .flex-wrap{flex-wrap:wrap}
.plat-scope .items-center{align-items:center}.plat-scope .items-start{align-items:flex-start}
.plat-scope .justify-center{justify-content:center}.plat-scope .justify-between{justify-content:space-between}
.plat-scope .relative{position:relative}.plat-scope .absolute{position:absolute}
.plat-scope .fixed{position:fixed}.plat-scope .sticky{position:sticky}
.plat-scope .inset-y-0{top:0;bottom:0}.plat-scope .top-0{top:0}.plat-scope .top-4{top:1rem}
.plat-scope .right-4{right:1rem}.plat-scope .left-4{left:1rem}.plat-scope .left-0{left:0}
.plat-scope .top-1\/2{top:50%}.plat-scope .-translate-y-1\/2{transform:translateY(-50%)}
.plat-scope .z-50{z-index:50}.plat-scope .z-\[40\]{z-index:40}
.plat-scope .overflow-hidden{overflow:hidden}.plat-scope .overflow-y-auto{overflow-y:auto}
.plat-scope .outline-none{outline:0}
.plat-scope .object-cover{object-fit:cover}

.plat-scope .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.plat-scope .col-span-full{grid-column:1/-1}
.plat-scope .gap-1{gap:.25rem}.plat-scope .gap-2{gap:.5rem}.plat-scope .gap-3{gap:.75rem}
.plat-scope .gap-4{gap:1rem}.plat-scope .gap-6{gap:1.5rem}.plat-scope .gap-8{gap:2rem}
.plat-scope .gap-gutter{gap:1.5rem}
.plat-scope .space-y-1 > * + *{margin-top:.25rem}.plat-scope .space-y-2 > * + *{margin-top:.5rem}
.plat-scope .space-y-6 > * + *{margin-top:1.5rem}

/* divide */
.plat-scope .divide-y > * + *{border-top:1px solid var(--plat-slate-100)}

/* ===== Sizing ===== */
.plat-scope .w-full{width:100%}.plat-scope .w-10{width:2.5rem}.plat-scope .w-12{width:3rem}
.plat-scope .w-16{width:4rem}.plat-scope .w-80{width:20rem}
.plat-scope .h-2{height:.5rem}.plat-scope .h-10{height:2.5rem}.plat-scope .h-12{height:3rem}
.plat-scope .h-16{height:4rem}.plat-scope .h-48{height:12rem}.plat-scope .h-full{height:100%}
.plat-scope .min-h-screen{min-height:100vh}
.plat-scope .min-h-\[360px\]{min-height:360px}
.plat-scope .max-w-xl{max-width:36rem}.plat-scope .max-w-7xl{max-width:80rem}

/* ===== Spacing ===== */
.plat-scope .p-4{padding:1rem}
.plat-scope .p-6{padding:1.5rem}.plat-scope .p-8{padding:2rem}.plat-scope .p-12{padding:3rem}
.plat-scope .px-8{padding-left:2rem;padding-right:2rem}
.plat-scope .px-2{padding-left:.5rem;padding-right:.5rem}
.plat-scope .px-3{padding-left:.75rem;padding-right:.75rem}
.plat-scope .px-4{padding-left:1rem;padding-right:1rem}
.plat-scope .px-6{padding-left:1.5rem;padding-right:1.5rem}
.plat-scope .py-1{padding-top:.25rem;padding-bottom:.25rem}
.plat-scope .py-2{padding-top:.5rem;padding-bottom:.5rem}
.plat-scope .py-3{padding-top:.75rem;padding-bottom:.75rem}
.plat-scope .py-4{padding-top:1rem;padding-bottom:1rem}
.plat-scope .py-8{padding-top:2rem;padding-bottom:2rem}
.plat-scope .py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.plat-scope .py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.plat-scope .px-5{padding-left:1.25rem;padding-right:1.25rem}
.plat-scope .pl-12{padding-left:3rem}.plat-scope .pr-4{padding-right:1rem}
.plat-scope .mx-auto{margin-left:auto;margin-right:auto}
.plat-scope .mx-2{margin-left:.5rem;margin-right:.5rem}
.plat-scope .mb-1{margin-bottom:.25rem}.plat-scope .mb-2{margin-bottom:.5rem}
.plat-scope .mb-3{margin-bottom:.75rem}.plat-scope .mb-4{margin-bottom:1rem}
.plat-scope .mb-0{margin-bottom:0}
.plat-scope .mb-6{margin-bottom:1.5rem}.plat-scope .mb-10{margin-bottom:2.5rem}
.plat-scope .mt-2{margin-top:.5rem}.plat-scope .mt-3{margin-top:.75rem}
.plat-scope .mt-4{margin-top:1rem}.plat-scope .mt-6{margin-top:1.5rem}
.plat-scope .mt-16{margin-top:4rem}.plat-scope .mt-auto{margin-top:auto}
.plat-scope .ms-1{margin-inline-start:.25rem}
.plat-scope .ms-3{margin-inline-start:.75rem}
.plat-scope .ms-auto{margin-inline-start:auto}
.plat-scope .inline-block{display:inline-block}
.plat-scope .mb-8{margin-bottom:2rem}
.plat-scope .mt-1{margin-top:.25rem}
.plat-scope .mt-8{margin-top:2rem}

/* ===== Borders / radii / shadows ===== */
.plat-scope .border{border:1px solid var(--plat-slate-200)}
.plat-scope .border-2{border:2px solid var(--plat-slate-200)}
.plat-scope .border-b{border-bottom:1px solid var(--plat-slate-200)}
.plat-scope .border-t{border-top:1px solid var(--plat-slate-200)}
.plat-scope .border-r{border-right:1px solid var(--plat-slate-200)}
.plat-scope .border-dashed{border-style:dashed}
.plat-scope .border-slate-50{border-color:var(--plat-slate-50)}
.plat-scope .border-slate-100{border-color:var(--plat-slate-100)}
.plat-scope .border-slate-200{border-color:var(--plat-slate-200)}
.plat-scope .border-teal-100{border-color:var(--plat-teal-100)}
.plat-scope .border-teal-200{border-color:var(--plat-teal-200)}
.plat-scope .border-primary\/10{border-color:rgba(0,104,95,.18)}

.plat-scope .rounded-lg{border-radius:.5rem}
.plat-scope .rounded-xl{border-radius:.75rem}
.plat-scope .rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}
.plat-scope .rounded-full{border-radius:9999px}

.plat-scope .shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.plat-scope .shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.plat-scope .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.plat-scope .shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.plat-scope .shadow-teal-900\/5{--plat-shadow-color:rgba(19,78,74,.05)}
.plat-scope .shadow-teal-500\/10{box-shadow:0 10px 15px -3px rgba(20,184,166,.12)}
.plat-scope .shadow-slate-900\/20{box-shadow:0 25px 50px -12px rgba(15,23,42,.2)}
.plat-scope .hover\:shadow-xl:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.plat-scope .hover\:shadow-primary\/5:hover{box-shadow:0 20px 25px -5px rgba(0,104,95,.05)}

/* ===== Colors ===== */
.plat-scope .bg-white{background:var(--plat-white)}
.plat-scope .bg-slate-50{background:var(--plat-slate-50)}
.plat-scope .bg-slate-100{background:var(--plat-slate-100)}
.plat-scope .bg-slate-200{background:var(--plat-slate-200)}
.plat-scope .bg-teal-50{background:var(--plat-teal-50)}
.plat-scope .bg-amber-100{background:var(--plat-amber-100)}
.plat-scope .bg-amber-50{background:#fffbeb}
.plat-scope .bg-emerald-100{background:var(--plat-emerald-100)}
.plat-scope .bg-emerald-50{background:#ecfdf5}
.plat-scope .bg-rose-50{background:var(--plat-rose-50)}
.plat-scope .bg-sky-50{background:var(--plat-sky-50)}
.plat-scope .border-amber-200{border-color:#fde68a}
.plat-scope .border-emerald-200{border-color:var(--plat-emerald-200)}
.plat-scope .border-rose-200{border-color:var(--plat-rose-200)}
.plat-scope .border-sky-200{border-color:var(--plat-sky-200)}
.plat-scope .bg-surface{background:var(--plat-surface)}
.plat-scope .bg-primary{background:var(--plat-primary)}
.plat-scope .bg-primary-container{background:var(--plat-primary-container)}
.plat-scope .bg-secondary-container{background:var(--plat-secondary-container)}
.plat-scope .bg-tertiary-container{background:var(--plat-tertiary-container)}
.plat-scope .bg-error-container{background:var(--plat-error-container)}

.plat-scope .text-white{color:var(--plat-white)}
.plat-scope .text-on-surface{color:var(--plat-on-surface)}
.plat-scope .text-on-primary{color:var(--plat-on-primary)}
.plat-scope .text-on-primary-container{color:var(--plat-on-primary-container)}
.plat-scope .text-on-secondary-container{color:var(--plat-on-secondary-container)}
.plat-scope .text-on-tertiary-container{color:var(--plat-on-tertiary-container)}
.plat-scope .text-on-error-container{color:var(--plat-on-error-container)}
.plat-scope .text-outline{color:var(--plat-outline)}
.plat-scope .text-primary{color:var(--plat-primary)}
.plat-scope .text-slate-300{color:var(--plat-slate-300)}
.plat-scope .text-slate-400{color:var(--plat-slate-400)}
.plat-scope .text-slate-500{color:var(--plat-slate-500)}
.plat-scope .text-slate-600{color:var(--plat-slate-600)}
.plat-scope .text-slate-700{color:var(--plat-slate-700)}
.plat-scope .text-slate-900{color:var(--plat-slate-900)}
.plat-scope .text-teal-600{color:var(--plat-teal-600)}
.plat-scope .text-teal-700{color:var(--plat-teal-700)}
.plat-scope .text-teal-800{color:var(--plat-teal-800)}
.plat-scope .text-teal-600\/70{color:rgba(13,148,136,.7)}
.plat-scope .text-amber-800{color:var(--plat-amber-800)}
.plat-scope .text-emerald-800{color:var(--plat-emerald-800)}
.plat-scope .text-rose-500{color:var(--plat-rose-500)}
.plat-scope .text-rose-800{color:var(--plat-rose-800)}
.plat-scope .text-sky-800{color:var(--plat-sky-800)}

/* hover / focus colors */
.plat-scope .hover\:bg-slate-100:hover{background:var(--plat-slate-100)}
.plat-scope .hover\:bg-primary\/5:hover{background:rgba(0,104,95,.05)}
.plat-scope .hover\:text-teal-500:hover{color:var(--plat-teal-600)}
.plat-scope .hover\:bg-slate-500:hover{background:var(--plat-slate-500)}
.plat-scope .hover\:text-white:hover{color:var(--plat-white)}
.plat-scope .hover\:border-slate-500:hover{border-color:var(--plat-slate-500)}
.plat-scope .focus\:border-primary:focus{border-color:var(--plat-primary)}
.plat-scope .focus\:ring-4:focus{box-shadow:0 0 0 4px rgba(0,104,95,.1)}
.plat-scope .focus\:ring-primary\/10:focus{box-shadow:0 0 0 4px rgba(0,104,95,.1)}
.plat-scope .hover\:brightness-110:hover{filter:brightness(1.1)}
.plat-scope .hover\:brightness-95:hover{filter:brightness(.95)}
.plat-scope .hover\:text-primary:hover{color:var(--plat-primary)}
.plat-scope .active\:scale-95:active{transform:scale(.95)}
.plat-scope .group:hover .group-hover\:scale-105{transform:scale(1.05)}

/* ===== Typography ===== */
.plat-scope .text-xs{font-size:.75rem;line-height:1rem}
.plat-scope .text-sm{font-size:.875rem;line-height:1.25rem}
.plat-scope .text-lg{font-size:1.125rem;line-height:1.75rem}
.plat-scope .text-xl{font-size:1.25rem;line-height:1.75rem}
.plat-scope .text-3xl{font-size:1.875rem;line-height:2.25rem}
.plat-scope .text-4xl{font-size:2.25rem;line-height:2.5rem}
.plat-scope .text-\[10px\]{font-size:10px}
.plat-scope .text-\[11px\]{font-size:11px}
.plat-scope .text-h2{font-size:36px;line-height:1.2;font-weight:600}
.plat-scope .text-h3{font-size:24px;line-height:1.3;font-weight:600}
.plat-scope .text-body-lg{font-size:18px;line-height:1.6;font-weight:400}
.plat-scope .text-body-md{font-size:16px;line-height:1.6;font-weight:400}
.plat-scope .font-h2,.plat-scope .font-h3{font-family:'Lexend',system-ui,sans-serif}
.plat-scope .font-body-lg,.plat-scope .font-body-md,.plat-scope .font-label-sm{font-family:'Inter',system-ui,sans-serif}
.plat-scope .font-\[\'Lexend\'\]{font-family:'Lexend',system-ui,sans-serif}
.plat-scope .font-bold{font-weight:700}.plat-scope .font-extrabold{font-weight:800}
.plat-scope .font-semibold{font-weight:600}
.plat-scope .uppercase{text-transform:uppercase}
.plat-scope .tracking-tight{letter-spacing:-.025em}
.plat-scope .tracking-wider{letter-spacing:.05em}
.plat-scope .text-center{text-align:center}
.plat-scope .text-left{text-align:left}
.plat-scope .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Transitions ===== */
.plat-scope .transition-all{transition:all .2s}
.plat-scope .transition-colors{transition:color .2s,background-color .2s,border-color .2s}
.plat-scope .transition-transform{transition:transform .2s}
.plat-scope .duration-500{transition-duration:.5s}

/* ===== Hover scale (componente reutilizável) ===== */
.plat-scope .hover-scale{transition:transform .15s ease,filter .15s,background-color .15s,color .15s,border-color .15s}
.plat-scope .hover-scale:hover{transform:scale(1.03)}
.plat-scope .hover-scale:active{transform:scale(.97)}

/* ===== Tooltip central (global — funciona dentro e fora de .plat-scope) ===== */
[data-tooltip]{position:relative}
[data-tooltip]::before,
[data-tooltip]::after{
  position:absolute;left:50%;transform:translateX(-50%);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease-out .1s;
  z-index:200;
}
[data-tooltip]::after{
  content:attr(data-tooltip);
  bottom:calc(100% + 8px);
  background:#0f172a;color:#fff;
  padding:.4rem .75rem;border-radius:.5rem;
  font-family:'Inter',system-ui,sans-serif;
  font-size:.75rem;font-weight:500;white-space:nowrap;letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(15,23,42,.25);
}
[data-tooltip]::before{
  content:"";bottom:100%;
  border:5px solid transparent;border-top-color:#0f172a;margin-bottom:-2px;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after{opacity:1}
/* Variante placement=right — usado na sidebar rail */
[data-tooltip-placement="right"]::after{
  top:50%;left:calc(100% + 10px);bottom:auto;transform:translateY(-50%);
}
[data-tooltip-placement="right"]::before{
  top:50%;left:100%;bottom:auto;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:#0f172a;
  margin-left:-2px;margin-bottom:0;
}

/* ============================================================
   Sidebar da plataforma de cursos
   ============================================================
   MOBILE (<1024px):
     • Default: sidebar ESCONDIDA (translateX(-100%)), largura 17.5rem.
       Só o hamburguer aparece no header.
     • body.plat-sidebar-open: sidebar desliza (translateX(0)) e overlay
       com backdrop blur cobre o resto. Click no overlay fecha.
     • body.plat-drawer-lock: trava scroll enquanto drawer aberto.
     • main sem padding-left.

   DESKTOP (≥1024px):
     • Default: sidebar EXPANDIDA (20rem) — labels, counts e headers visíveis.
     • body.plat-sidebar-collapsed: sidebar vira RAIL (4.5rem, só ícones
       com tooltip à direita).
     • main acompanha (padding-left 20rem ↔ 4.5rem).
     • Sem persistência — sempre inicia expandida.
   ============================================================ */

.plat-scope .plat-sidebar{
  display:flex;flex-direction:column;
  position:fixed;top:4rem;left:0;bottom:0;
  width:17.5rem !important;             /* largura em mobile */
  z-index:60;background:#fff;
  transform:translateX(-100%) !important; /* MOBILE default: fora da tela */
  transition:transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 10px 20px rgba(15,23,42,.1);
  overflow:visible;
}
.plat-scope .plat-sidebar > nav{overflow:visible;flex:1 1 auto}

/* Mobile: drawer aberto */
body.plat-sidebar-open .plat-sidebar{transform:translateX(0) !important}
body.plat-drawer-lock{overflow:hidden}

/* Overlay mobile (backdrop com blur) */
.plat-scope .plat-sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(11,28,48,.5);backdrop-filter:blur(4px);
  z-index:55;
}
body.plat-sidebar-open .plat-sidebar-overlay{display:block}

.plat-scope .plat-sidebar h6{
  font-size:.625rem;letter-spacing:.05em;text-transform:uppercase;
  color:#94a3b8;font-weight:700;padding:1rem .75rem .5rem;margin:0;
}
.plat-scope .plat-sidebar a{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.65rem 1rem;margin:.1rem .5rem;border-radius:.5rem;
  font-family:'Lexend',sans-serif;font-size:.875rem;
  transition:padding .3s cubic-bezier(.4,0,.2,1), margin .3s cubic-bezier(.4,0,.2,1);
}
.plat-scope .plat-sidebar a > span > i.bi,
.plat-scope .plat-sidebar a > i.bi{font-size:1rem;line-height:1}

/* Em mobile: main não tem padding-left (sidebar é overlay) */
.plat-scope .plat-with-sidebar{padding-left:0;transition:padding-left .3s cubic-bezier(.4,0,.2,1)}

/* ---- Desktop (≥1024px): expandida default, colapsa para rail ---- */
@media (min-width:1024px){
  .plat-scope .plat-sidebar{
    width:20rem !important;             /* expanded default */
    transform:none !important;          /* sempre visível em desktop */
  }
  .plat-scope .plat-sidebar-overlay{display:none !important}

  /* Colapsada: rail 4.5rem
     (NB: não usar .plat-scope como descendente — ela está NO body, então o
      combinator falha; usar classe de estado direto no body.) */
  body.plat-sidebar-collapsed .plat-sidebar{width:4.5rem !important}

  /* Colapsada: esconde labels/counts/headers */
  body.plat-sidebar-collapsed .plat-sidebar-label,
  body.plat-sidebar-collapsed .plat-sidebar-count,
  body.plat-sidebar-collapsed .plat-sidebar h6{display:none}

  /* Colapsada: ícones centralizados e maiores */
  body.plat-sidebar-collapsed .plat-sidebar a{
    justify-content:center;padding:.65rem .5rem;margin:.15rem .35rem
  }
  body.plat-sidebar-collapsed .plat-sidebar a > span > i.bi,
  body.plat-sidebar-collapsed .plat-sidebar a > i.bi{font-size:1.5rem}

  /* main acompanha — !important para vencer .md\:px-8 */
  .plat-scope .plat-with-sidebar{padding-left:20rem !important}
  body.plat-sidebar-collapsed .plat-with-sidebar{padding-left:4.5rem !important}
}

/* Tooltip da sidebar: só mostra no estado colapsado (desktop rail) */
.plat-sidebar [data-tooltip]::before,
.plat-sidebar [data-tooltip]::after{display:none}
body.plat-sidebar-collapsed .plat-sidebar [data-tooltip]:hover::before,
body.plat-sidebar-collapsed .plat-sidebar [data-tooltip]:hover::after{display:block;opacity:1}

/* ===== Dropdown de perfil ===== */
.plat-scope .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plat-scope .top-full{top:100%}
.plat-scope .right-0{right:0}
.plat-scope .w-64{width:16rem}
.plat-scope .p-1\.5{padding:.375rem}
.plat-scope .my-3{margin-top:.75rem;margin-bottom:.75rem}
.plat-scope .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.plat-scope .plat-dropdown.hidden{display:none}
.plat-scope .plat-dropdown{z-index:60}

/* ===== Responsividade ===== */
@media (min-width:640px){
  .plat-scope .sm\:flex{display:flex}
  .plat-scope .sm\:inline{display:inline}
  .plat-scope .sm\:hidden{display:none}
}
@media (min-width:768px){
  .plat-scope .md\:flex{display:flex}
  .plat-scope .md\:inline{display:inline}
  .plat-scope .md\:hidden{display:none}
  .plat-scope .md\:flex-row{flex-direction:row}
  .plat-scope .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plat-scope .md\:px-8{padding-left:2rem;padding-right:2rem}
}
@media (min-width:1024px){
  .plat-scope .lg\:flex{display:flex}
  .plat-scope .lg\:inline{display:inline}
  .plat-scope .lg\:hidden{display:none}
  /* Regras específicas da sidebar em desktop estão na seção "Sidebar" acima. */
}
@media (min-width:1280px){
  .plat-scope .xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}