:root{
      --brand-navy:#0B2C4D;
      --brand-red:#C81E2A;
      --brand-gold:#F59E0B;

      --sbw: clamp(16rem, 17vw, 18.5rem);
      --sbw-collapsed: 4.5rem;
      --drawer-w: min(86vw, 22rem);
    }

    html,
    body{
      overflow-x:hidden;
      scroll-behavior:smooth;
    }

    body{
      color:#0f172a;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    ::selection{
      background:rgba(200,30,42,.22);
      color:#0f172a;
    }

    :focus-visible{
      outline:3px solid rgba(200,30,42,.55);
      outline-offset:3px;
      border-radius:.65rem;
    }

    .skip-link{
      position:fixed;
      top:.75rem;
      left:.75rem;
      z-index:99999;
      transform:translateY(-160%);
      padding:.7rem 1rem;
      border-radius:999px;
      background:#fff;
      color:#0f172a;
      font-weight:800;
      box-shadow:0 20px 40px -24px rgba(15,23,42,.65);
      transition:transform .18s ease;
    }

    .skip-link:focus{
      transform:translateY(0);
    }

    .full-bleed{
      position:relative;
      left:50%;
      transform:translateX(-50%);
      width:100svw;
      max-width:100svw;
    }

    @supports not (width: 100svw){
      .full-bleed{
        width:100vw;
        max-width:100vw;
      }
    }

    .bg-premium{
      background:
        radial-gradient(1200px 600px at 80% -20%, rgba(200,30,42,.13), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(255,255,255,.08), transparent 55%),
        linear-gradient(180deg, #0b2c4d 0%, #0b2c4d 58%, #092339 100%);
    }

    .bg-texture{
      background-image:
        radial-gradient(circle at 25% 15%, rgba(255,255,255,0.10) 0 2px, transparent 3px),
        radial-gradient(circle at 75% 85%, rgba(255,255,255,0.08) 0 2px, transparent 3px),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:16px 16px, 18px 18px, 48px 48px, 48px 48px;
      opacity:.22;
    }

    .flash-card{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      padding:.8rem .95rem;
      border-radius:1rem;
      border:1px solid;
      box-shadow:0 12px 24px -22px rgba(15,23,42,.55);
    }

    /* ===== LAYOUT LOGADO ===== */
    .app{
      min-height:100vh;
      min-height:100dvh;
      display:flex;
    }

    .app-content{
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      min-height:100vh;
      min-height:100dvh;
    }

    .app-content-inner{
      flex:1 1 auto;
    }

    /* ===== SIDEBAR DESKTOP ===== */
    .sidebar{
      width:var(--sbw);
      background:rgba(255,255,255,.96);
      border-right:1px solid rgba(226,232,240,.95);
      border-top-right-radius:1.25rem;
      border-bottom-right-radius:1.25rem;
      box-shadow:14px 0 34px -28px rgba(15,23,42,.45);
      display:flex;
      flex-direction:column;
      position:sticky;
      top:0;
      height:100vh;
      height:100dvh;
      overflow:hidden;
      transition:width .2s ease, box-shadow .2s ease;
      backdrop-filter:blur(12px);
    }

    body[data-sb="collapsed"] .sidebar{
      width:var(--sbw-collapsed);
    }

    body[data-sb="collapsed"] .sb-hide-on-collapse{
      display:none !important;
    }

    .sb-header{
      padding:1rem .9rem .85rem;
      border-bottom:1px solid #e2e8f0;
      display:flex;
      flex-direction:column;
      gap:.75rem;
      background:
        radial-gradient(280px 120px at 100% -20%, rgba(200,30,42,.10), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .sb-toggle{
      width:38px;
      height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:.9rem;
      background:#fff;
      border:1px solid #e2e8f0;
      box-shadow:0 1px 2px rgba(15,23,42,.06);
      line-height:1;
      padding:0;
      color:#0f172a;
      transition:background .15s, transform .15s, border-color .15s;
    }

    .sb-toggle:hover{
      background:#f8fafc;
      border-color:#cbd5e1;
      transform:translateY(-1px);
    }

    .sb-brand{
      display:flex;
      align-items:center;
      gap:.75rem;
      min-width:0;
      padding:.15rem .1rem;
      border-radius:1rem;
      text-decoration:none;
    }

    .sb-scroll{
      overflow-y:auto;
      padding:.85rem .7rem;
      scrollbar-gutter:stable;
    }

    .sb-scroll::-webkit-scrollbar,
    .quick-actions__list::-webkit-scrollbar{
      width:8px;
    }

    .sb-scroll::-webkit-scrollbar-thumb,
    .quick-actions__list::-webkit-scrollbar-thumb{
      background:#cbd5e1;
      border-radius:999px;
      border:2px solid transparent;
      background-clip:content-box;
    }

    .navlink{
      position:relative;
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:.62rem .75rem;
      border-radius:.95rem;
      color:#334155;
      background:transparent;
      border:1px solid transparent;
      white-space:nowrap;
      text-decoration:none;
      transition:background .14s, border-color .14s, color .14s, transform .14s, box-shadow .14s;
    }

    .navlink:hover{
      background:#f8fafc;
      border-color:#e2e8f0;
      color:#0f172a;
      transform:translateX(2px);
    }

    .navlink.is-active{
      background:linear-gradient(135deg, var(--brand-navy), #123d68);
      border-color:rgba(11,44,77,.25);
      color:#fff;
      font-weight:700;
      box-shadow:0 10px 18px -14px rgba(11,44,77,.75);
    }

    .navlink.is-active::before{
      content:"";
      position:absolute;
      left:-.7rem;
      width:4px;
      height:60%;
      border-radius:999px;
      background:var(--brand-red);
    }

    .sb-icon,
    .quick-rail__icon{
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      line-height:1;
      padding:0;
      box-sizing:border-box;
      vertical-align:middle;
      border-radius:.75rem;
      border:1px solid #e2e8f0;
      background:#fff;
      font-size:17px;
      flex:0 0 auto;
      overflow:hidden;
      white-space:nowrap;
      text-align:center;
      font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Noto Emoji",system-ui,sans-serif;
      font-variant-ligatures:normal;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    .navlink.is-active .sb-icon{
      border-color:rgba(255,255,255,.28);
      background:rgba(255,255,255,.14);
      color:#fff;
    }

    .sb-icon img.emoji,
    .quick-rail__icon img.emoji{
      width:1em;
      height:1em;
      display:block;
      margin:0;
    }

    body[data-sb="collapsed"] .sb-scroll{
      padding:.65rem .45rem;
      scrollbar-gutter:auto;
    }

    body[data-sb="collapsed"] .navlink{
      justify-content:center;
      padding:.5rem;
      gap:0;
      border-radius:1rem;
    }

    body[data-sb="collapsed"] .navlink:hover{
      transform:none;
    }

    body[data-sb="collapsed"] .navlink.is-active::before{
      left:-.45rem;
      height:48%;
    }

    body[data-sb="collapsed"] .navlink .sb-icon{
      width:38px;
      height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0;
      line-height:1;
      padding:0;
      box-sizing:border-box;
      font-size:18px;
    }

    body[data-sb="collapsed"] .sb-header{
      padding:.65rem .45rem;
      align-items:center;
    }

    body[data-sb="collapsed"] .sb-toggle{
      margin:0 auto;
    }

    body[data-sb="collapsed"] .sb-brand{
      justify-content:center;
    }

    body[data-sb="collapsed"] .sidebar .px-4.py-3.border-b{
      padding:.65rem .45rem;
      display:flex;
      justify-content:center;
    }

    body[data-sb="collapsed"] .sidebar .px-4.py-3.border-b .truncate,
    body[data-sb="collapsed"] .sidebar .px-4.py-3.border-b .text-xs,
    body[data-sb="collapsed"] .sidebar .px-4.py-3.border-b .sb-hide-on-collapse{
      display:none !important;
    }

    /* ===== DRAWER MOBILE LOGADO ===== */
    .mobile-drawer-backdrop{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.45);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
      z-index:45;
    }

    .mobile-drawer{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      width:var(--drawer-w);
      max-width:100%;
      background:#fff;
      border-right:1px solid #e2e8f0;
      box-shadow:0 20px 25px -5px rgba(0,0,0,.15), 0 8px 10px -6px rgba(0,0,0,.10);
      transform:translateX(-100%);
      transition:transform .2s ease;
      z-index:50;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    body[data-mobile-nav="open"] .mobile-drawer-backdrop{
      opacity:1;
      pointer-events:auto;
    }

    body[data-mobile-nav="open"] .mobile-drawer{
      transform:translateX(0);
    }

    body[data-mobile-nav="open"]{
      overflow:hidden;
    }

    /* ===== QUICK ACTIONS FAB ===== */
    .quick-actions{
      position:fixed;
      right:max(1.25rem, env(safe-area-inset-right));
      bottom:max(1.25rem, env(safe-area-inset-bottom));
      z-index:60;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:.75rem;
      pointer-events:none;
    }

    .quick-actions__fab{
      pointer-events:auto;
    }

    .quick-actions__panel,
    .quick-actions__panel *{
      pointer-events:none;
    }

    body[data-quick-actions="open"] .quick-actions__panel,
    body[data-quick-actions="open"] .quick-actions__panel *{
      pointer-events:auto;
    }

    .quick-actions__backdrop{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.28);
      backdrop-filter:blur(2px);
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
      z-index:58;
    }

    body[data-quick-actions="open"] .quick-actions__backdrop{
      opacity:1;
      pointer-events:auto;
    }

    .quick-actions__panel{
      width:min(92vw, 27rem);
      max-height:min(72vh, 38rem);
      overflow:hidden;
      background:rgba(255,255,255,.96);
      border:1px solid rgba(226,232,240,.95);
      border-radius:1.5rem;
      box-shadow:
        0 24px 60px -24px rgba(15,23,42,.45),
        0 10px 20px -16px rgba(15,23,42,.35);
      transform:translateY(10px) scale(.97);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
      backdrop-filter:blur(18px);
    }

    body[data-quick-actions="open"] .quick-actions__panel{
      transform:translateY(0) scale(1);
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    .quick-actions__header{
      padding:1rem 1rem .85rem;
      border-bottom:1px solid #e2e8f0;
      background:
        radial-gradient(420px 160px at 100% -40%, rgba(200,30,42,.12), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .quick-actions__search{
      width:100%;
      margin-top:.75rem;
      border:1px solid #e2e8f0;
      background:#fff;
      border-radius:1rem;
      padding:.7rem .85rem;
      font-size:.875rem;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }

    .quick-actions__search:focus{
      border-color:rgba(11,44,77,.45);
      box-shadow:0 0 0 4px rgba(11,44,77,.10);
    }

    .quick-actions__list{
      padding:.85rem;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.65rem;
      overflow-y:auto;
      max-height:calc(min(72vh, 38rem) - 8.5rem);
    }

    .quick-actions__item{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      min-height:4.8rem;
      padding:.75rem;
      border:1px solid #e2e8f0;
      border-radius:1.1rem;
      background:#fff;
      color:#0f172a;
      text-decoration:none;
      transition:transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
    }

    .quick-actions__item:hover{
      transform:translateY(-2px);
      border-color:#cbd5e1;
      background:#f8fafc;
      box-shadow:0 10px 18px -16px rgba(15,23,42,.35);
    }

    .quick-actions__icon{
      width:2.35rem;
      height:2.35rem;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      border-radius:.9rem;
      font-size:1.05rem;
      border:1px solid rgba(15,23,42,.06);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
      overflow:hidden;
      white-space:nowrap;
      text-align:center;
      font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Noto Emoji",system-ui,sans-serif;
    }

    .quick-actions__title{
      display:block;
      font-size:.84rem;
      font-weight:800;
      line-height:1.15;
      color:#0f172a;
    }

    .quick-actions__desc{
      display:block;
      margin-top:.22rem;
      font-size:.72rem;
      line-height:1.2;
      color:#64748b;
    }

    .quick-actions__empty{
      display:none;
      grid-column:1 / -1;
      padding:1rem;
      border:1px dashed #cbd5e1;
      border-radius:1.1rem;
      background:#f8fafc;
      color:#64748b;
      text-align:center;
      font-size:.875rem;
    }

    .quick-actions__fab{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-width:3.45rem;
      height:3.45rem;
      padding:0 1.05rem;
      border-radius:999px;
      color:#fff;
      background:
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.26), transparent 34%),
        linear-gradient(135deg, var(--brand-navy), #123d68);
      border:1px solid rgba(255,255,255,.20);
      box-shadow:
        0 18px 35px -18px rgba(15,23,42,.65),
        0 0 0 6px rgba(255,255,255,.14);
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .quick-actions__fab:hover{
      transform:translateY(-2px);
      box-shadow:
        0 22px 44px -20px rgba(15,23,42,.75),
        0 0 0 7px rgba(255,255,255,.18);
    }

    .quick-actions__fab-icon{
      width:2rem;
      height:2rem;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:rgba(255,255,255,.14);
      transition:transform .18s ease;
    }

    body[data-quick-actions="open"] .quick-actions__fab-icon{
      transform:rotate(45deg);
    }

    .quick-actions__fab-label{
      font-size:.875rem;
      font-weight:800;
      white-space:nowrap;
    }

    .quick-actions__close{
      width:2.25rem;
      height:2.25rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:.85rem;
      border:1px solid #e2e8f0;
      background:#fff;
      color:#0f172a;
      transition:background .15s ease, border-color .15s ease;
    }

    .quick-actions__close:hover{
      background:#f8fafc;
      border-color:#cbd5e1;
    }

    .qa--create{ background:linear-gradient(180deg,#D1FAE5,#A7F3D0); }
    .qa--start{ background:linear-gradient(180deg,#DBEAFE,#BFDBFE); }
    .qa--requests{ background:linear-gradient(180deg,#EDE9FE,#DDD6FE); }
    .qa--techniques{ background:linear-gradient(180deg,#CCFBF1,#99F6E4); }
    .qa--notices{ background:linear-gradient(180deg,#FEE2E2,#FECACA); }
    .qa--groups{ background:linear-gradient(180deg,#E0E7FF,#C7D2FE); }
    .qa--classes{ background:linear-gradient(180deg,#E0F2FE,#BAE6FD); }
    .qa--students{ background:linear-gradient(180deg,#FEF3C7,#FDE68A); }
    .qa--posts{ background:linear-gradient(180deg,#FCE7F3,#FBCFE8); }
    .qa--access{ background:linear-gradient(180deg,#FFEDD5,#FED7AA); }

    .public-header-link{
      display:inline-flex;
      align-items:center;
      min-height:2.25rem;
    }

    @media (max-width:640px){
      .quick-actions{
        right:max(1rem, env(safe-area-inset-right));
        bottom:max(1rem, env(safe-area-inset-bottom));
        left:max(1rem, env(safe-area-inset-left));
        align-items:stretch;
      }

      .quick-actions__panel{
        width:100%;
        max-height:72vh;
        border-radius:1.4rem 1.4rem 1.1rem 1.1rem;
        transform:translateY(18px) scale(.98);
      }

      .quick-actions__list{
        grid-template-columns:1fr;
        max-height:calc(72vh - 8.5rem);
      }

      .quick-actions__fab{
        align-self:flex-end;
      }

      .quick-actions__fab-label{
        display:none;
      }
    }

    @media (min-width:1024px) and (max-width:1279px){
      :root{ --sbw: 15.5rem; }
      .navlink{ padding:.58rem .65rem; gap:.6rem; }
      .sb-icon{ width:28px; height:28px; }
    }

    @media (min-width:1536px){
      :root{ --sbw: 18.5rem; }
    }


    /* ===== Betoni Design System: clareza, performance e responsividade ===== */
    :root{
      --bt-radius-sm:.75rem;
      --bt-radius:1rem;
      --bt-radius-lg:1.5rem;
      --bt-radius-xl:2rem;
      --bt-shadow-sm:0 8px 18px -16px rgba(15,23,42,.55);
      --bt-shadow:0 20px 45px -32px rgba(15,23,42,.65);
      --bt-shadow-strong:0 28px 75px -42px rgba(2,8,23,.78);
      --bt-border:rgba(226,232,240,.96);
      --bt-surface:rgba(255,255,255,.96);
      --bt-surface-soft:rgba(248,250,252,.96);
      --bt-text:#0f172a;
      --bt-muted:#64748b;
      --bt-focus:rgba(200,30,42,.22);
    }

    .brand-gradient{
      background:
        radial-gradient(800px 380px at 86% -8%, rgba(200,30,42,.30), transparent 58%),
        radial-gradient(650px 320px at 0% 0%, rgba(255,255,255,.12), transparent 55%),
        linear-gradient(135deg, var(--brand-navy) 0%, #123d68 56%, #7f1d1d 100%);
    }

    .site-main{
      max-width:72rem;
      margin-inline:auto;
      padding:clamp(1rem, 2.4vw, 1.6rem);
    }

    .betoni-page-shell{
      width:100%;
      max-width:72rem;
      margin-inline:auto;
    }

    main#main-content h1,
    main#main-content h2,
    main#main-content h3{
      text-wrap:balance;
      letter-spacing:-.025em;
    }

    main#main-content p,
    main#main-content li{
      text-wrap:pretty;
    }

    main#main-content :where(.bg-white\/95,.bg-white,.soft-card,.unit-info-card,.about-card,.card-glass):not(.no-design-polish){
      border-color:var(--bt-border);
    }

    main#main-content :where(section, article, .rounded-2xl, .rounded-3xl){
      scroll-margin-top:6rem;
    }

    main#main-content :where(input:not([type='checkbox']):not([type='radio']):not([type='file']), textarea, select){
      min-height:2.75rem;
      border-radius:.9rem;
      border-color:#cbd5e1;
      background-color:#fff;
      transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

    main#main-content :where(input:not([type='checkbox']):not([type='radio']):not([type='file']), textarea, select):focus{
      border-color:rgba(11,44,77,.55) !important;
      box-shadow:0 0 0 4px rgba(11,44,77,.10) !important;
      outline:0 !important;
    }

    main#main-content :where(label){
      color:#334155;
      font-weight:700;
    }

    main#main-content :where(button, a[class*='rounded'], input[type='submit']){
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }

    main#main-content :where(button:not(.plain-button), a[class*='bg-'], a[class*='ring-'], input[type='submit']){
      transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
    }

    main#main-content :where(button:not(.plain-button), a[class*='bg-'], a[class*='ring-'], input[type='submit']):hover:not(:disabled){
      transform:translateY(-1px);
    }

    main#main-content :where(button:not(.plain-button), a[class*='bg-[var(--brand-red)]'], a[class*='bg-[var(--brand-navy)]'], a[class*='bg-slate-900'], a[class*='bg-slate-800'], input[type='submit']){
      box-shadow:var(--bt-shadow-sm);
    }

    main#main-content :where(table){
      border-collapse:separate;
      border-spacing:0;
    }

    main#main-content :where(th){
      background:#f8fafc;
      color:#334155;
      font-size:.75rem;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

    main#main-content :where(td, th){
      border-color:#e2e8f0;
    }

    main#main-content :where(tr:hover td){
      background:rgba(248,250,252,.72);
    }

    .readable-copy{
      max-width:70ch;
      color:#334155;
      line-height:1.75;
    }

    .bt-card{
      border:1px solid var(--bt-border);
      background:var(--bt-surface);
      border-radius:var(--bt-radius-lg);
      box-shadow:var(--bt-shadow);
    }

    .bt-card-hover{
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .bt-card-hover:hover{
      transform:translateY(-3px);
      border-color:rgba(200,30,42,.22);
      box-shadow:var(--bt-shadow-strong);
    }

    .bt-section-title{
      font-size:clamp(1.65rem, 3vw, 2.55rem);
      line-height:1.08;
      font-weight:950;
      color:#0f172a;
    }

    .bt-section-subtitle{
      margin-top:.55rem;
      color:#64748b;
      line-height:1.7;
      max-width:70ch;
    }

    .bt-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:999px;
      padding:.42rem .75rem;
      background:#eff6ff;
      border:1px solid #dbeafe;
      color:#0b2c4d;
      font-size:.74rem;
      font-weight:900;
      letter-spacing:.09em;
      text-transform:uppercase;
    }

    .public-header-link{
      border-radius:999px;
      padding:.45rem .65rem;
      transition:background .15s ease, color .15s ease, transform .15s ease;
    }

    .public-header-link:hover{
      background:#f8fafc;
      transform:translateY(-1px);
    }

    .mobile-touch-target{
      min-height:44px;
    }

    @media (max-width:640px){
      .site-main{
        padding:1rem;
      }

      main#main-content{
        font-size:15px;
      }

      main#main-content :where(.rounded-3xl){
        border-radius:1.35rem;
      }

      main#main-content :where(.p-6){
        padding:1rem;
      }

      main#main-content :where(.gap-6){
        gap:1rem;
      }

      main#main-content :where(button, a[class*='rounded']){
        min-height:44px;
      }
    }





    /* Modais e formulários: evita botão de salvar fora da tela em mobile. */
    .modal .sticky.bottom-0,
    [role="dialog"] .sticky.bottom-0{
      z-index:5;
    }

    @media (max-width:640px){
      .modal > .relative,
      [role="dialog"]{
        width:min(96vw, 100%) !important;
        max-height:88vh !important;
        margin-top:4vh !important;
      }

      main#main-content :where(.grid.grid-cols-2){
        grid-template-columns:1fr;
      }
    }

    /* ===== Transição global, cursor e feedback de ações longas ===== */
    main#main-content{
      animation:betoniPageFadeIn .26s ease-out both;
      will-change:opacity, transform;
    }

    body.is-navigating main#main-content{
      animation:betoniPageFadeOut .14s ease-in both;
    }

    @keyframes betoniPageFadeIn{
      from{ opacity:0; transform:translateY(6px); }
      to{ opacity:1; transform:translateY(0); }
    }

    @keyframes betoniPageFadeOut{
      from{ opacity:1; transform:translateY(0); }
      to{ opacity:.78; transform:translateY(3px); }
    }

    .betoni-page-curtain{
      position:fixed;
      left:0;
      right:0;
      top:0;
      z-index:99980;
      pointer-events:none;
      height:4px;
      opacity:0;
      transform:scaleX(.12);
      transform-origin:left center;
      background:linear-gradient(90deg, var(--brand-red), #ffffff, #1d4ed8, var(--brand-red));
      box-shadow:0 8px 24px rgba(200,30,42,.22);
      transition:opacity .12s ease, transform .28s cubic-bezier(.22,1,.36,1);
    }

    .betoni-page-curtain::before{
      content:"";
      position:fixed;
      inset:0;
      background:rgba(248,250,252,.16);
      opacity:0;
      transition:opacity .18s ease;
      pointer-events:none;
    }

    body.is-navigating .betoni-page-curtain{
      opacity:1;
      transform:scaleX(.82);
      animation:betoniCurtainProgress .9s ease-in-out infinite;
    }

    body.is-navigating .betoni-page-curtain::before{
      opacity:1;
    }

    @keyframes betoniCurtainProgress{
      0%{ transform:scaleX(.18); }
      55%{ transform:scaleX(.78); }
      100%{ transform:scaleX(1); }
    }

    a[href],
    button,
    [role="button"],
    summary,
    label[for],
    select,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    input[type="checkbox"],
    input[type="radio"],
    [data-open-modal],
    [data-close-modal],
    [data-action],
    [onclick],
    .clickable{
      cursor:pointer;
    }

    button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled,
    [aria-disabled="true"],
    .disabled\:cursor-not-allowed:disabled{
      cursor:not-allowed !important;
    }

    .betoni-loading-modal{
      position:fixed;
      inset:0;
      z-index:99990;
      display:none;
      align-items:center;
      justify-content:center;
      padding:1rem;
      background:
        radial-gradient(circle at top, rgba(255,255,255,.22), transparent 36%),
        rgba(15,23,42,.42);
      backdrop-filter:blur(6px);
      pointer-events:auto;
    }

    .betoni-loading-modal[aria-hidden="true"],
    body:not([data-loading="true"]) .betoni-loading-modal{
      display:none !important;
      pointer-events:none !important;
    }

    body[data-loading="true"] .betoni-loading-modal{
      display:flex;
    }

    body[data-loading="true"]{
      cursor:progress;
    }

    body[data-loading="true"] a,
    body[data-loading="true"] button{
      cursor:progress;
    }

    /* Downloads/exportações não devem travar a tela.
       Em navegadores, o download pode terminar sem navegar a página; por isso o aviso é estilo toast e não bloqueia cliques. */
    body[data-loading-mode="download"] .betoni-loading-modal{
      align-items:flex-start;
      justify-content:flex-end;
      padding:1rem;
      background:transparent;
      backdrop-filter:none;
      pointer-events:none;
    }

    body[data-loading-mode="download"] .betoni-loading-card{
      width:min(92vw, 24rem);
      text-align:left;
      padding:1rem 1rem .9rem;
      border-radius:1.15rem;
      border-color:rgba(148,163,184,.4);
      box-shadow:0 18px 48px -28px rgba(2,8,23,.62);
    }

    body[data-loading-mode="download"] .betoni-loading-spinner{
      width:2rem;
      height:2rem;
      border-width:3px;
      margin:0 0 .65rem;
    }

    body[data-loading-mode="download"] .betoni-loading-hint{
      display:none;
    }

    .betoni-loading-card{
      position:relative;
      overflow:hidden;
      width:min(92vw, 27rem);
      border-radius:1.55rem;
      border:1px solid rgba(255,255,255,.76);
      background:rgba(255,255,255,.98);
      box-shadow:0 26px 74px -34px rgba(2,8,23,.72);
      padding:1.35rem 1.35rem 1.2rem;
      text-align:center;
      transform-origin:center;
      animation:betoniLoadingIn .18s ease-out both;
    }

    .betoni-loading-card::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:4px;
      background:linear-gradient(90deg, var(--brand-red), #1e3a8a, var(--brand-red));
      animation:betoniLoadingBar 1.15s ease-in-out infinite;
      transform-origin:left center;
    }

    @keyframes betoniLoadingIn{
      from{ opacity:0; transform:translateY(10px) scale(.985); }
      to{ opacity:1; transform:translateY(0) scale(1); }
    }

    @keyframes betoniLoadingBar{
      0%{ transform:scaleX(.16); opacity:.56; }
      50%{ transform:scaleX(.72); opacity:1; }
      100%{ transform:scaleX(1); opacity:.68; }
    }

    .betoni-loading-spinner{
      width:3rem;
      height:3rem;
      margin:.25rem auto .95rem;
      border-radius:999px;
      border:4px solid #e2e8f0;
      border-top-color:var(--brand-red);
      animation:betoniSpin .78s linear infinite;
    }

    @keyframes betoniSpin{ to{ transform:rotate(360deg); } }

    .betoni-loading-title{
      font-weight:900;
      color:#0f172a;
      font-size:1.05rem;
      line-height:1.35;
    }

    .betoni-loading-message{
      margin-top:.45rem;
      color:#475569;
      font-size:.92rem;
      line-height:1.45;
    }

    .betoni-loading-hint{
      margin-top:.85rem;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
      padding:.35rem .7rem;
      color:#64748b;
      font-size:.76rem;
      font-weight:700;
    }



    /* ===== Fallback responsivo sem depender 100% das utilities do Tailwind =====
       Corrige telas onde dados desktop sumiam por causa de .hidden + md:block.
       A classe .hidden NÃO usa !important para permitir que md:block/md:flex/etc.
       reexibam tabelas/cards no desktop. Modais e menus continuam ocultos até o JS
       remover a classe hidden. */
    .hidden{ display:none; }

    @media (min-width:640px){
      .sm\:block{ display:block !important; }
      .sm\:flex{ display:flex !important; }
      .sm\:grid{ display:grid !important; }
      .sm\:inline{ display:inline !important; }
      .sm\:inline-flex{ display:inline-flex !important; }
      .sm\:table{ display:table !important; }
      .sm\:table-row{ display:table-row !important; }
      .sm\:table-cell{ display:table-cell !important; }
      .sm\:hidden{ display:none !important; }
    }

    @media (min-width:768px){
      .md\:block{ display:block !important; }
      .md\:flex{ display:flex !important; }
      .md\:grid{ display:grid !important; }
      .md\:inline{ display:inline !important; }
      .md\:inline-flex{ display:inline-flex !important; }
      .md\:table{ display:table !important; }
      .md\:table-row{ display:table-row !important; }
      .md\:table-cell{ display:table-cell !important; }
      .md\:hidden{ display:none !important; }
    }

    @media (min-width:1024px){
      .sidebar.lg\:flex{ display:flex !important; }
      .lg\:block{ display:block !important; }
      .lg\:flex{ display:flex !important; }
      .lg\:grid{ display:grid !important; }
      .lg\:inline{ display:inline !important; }
      .lg\:inline-flex{ display:inline-flex !important; }
      .lg\:table{ display:table !important; }
      .lg\:table-row{ display:table-row !important; }
      .lg\:table-cell{ display:table-cell !important; }
      .lg\:hidden{ display:none !important; }
      .mobile-auth-topbar{ display:none !important; }
    }

    @media (min-width:1280px){
      .xl\:block{ display:block !important; }
      .xl\:flex{ display:flex !important; }
      .xl\:grid{ display:grid !important; }
      .xl\:inline{ display:inline !important; }
      .xl\:inline-flex{ display:inline-flex !important; }
      .xl\:table{ display:table !important; }
      .xl\:table-row{ display:table-row !important; }
      .xl\:table-cell{ display:table-cell !important; }
      .xl\:hidden{ display:none !important; }
    }

    details[open] .group-open\:hidden{ display:none !important; }
    details[open] .group-open\:inline{ display:inline !important; }
    details[open] .group-open\:block{ display:block !important; }


    /* ===== Revisão V8: painéis responsivos e proteção contra conteúdo invisível =====
       Use classes explícitas para listas/tabelas que têm versão mobile e desktop.
       Isso evita que uma utility .hidden ou cache de CSS deixe dados invisíveis no desktop. */
    .bt-desktop-panel{ display:none !important; }
    .bt-mobile-panel{ display:block !important; }

    @media (min-width:768px){
      .bt-desktop-panel{ display:block !important; visibility:visible !important; opacity:1 !important; height:auto !important; max-height:none !important; }
      .bt-mobile-panel{ display:none !important; }
    }

    @media (max-width:767.98px){
      .bt-desktop-panel{ display:none !important; }
      .bt-mobile-panel{ display:block !important; visibility:visible !important; opacity:1 !important; height:auto !important; }
    }

    /* Tabelas nunca devem estourar o layout, mas também não devem sumir no desktop. */
    main#main-content :where(.overflow-x-auto, .overflow-auto){
      max-width:100%;
      -webkit-overflow-scrolling:touch;
    }

    main#main-content :where(table){
      width:100%;
    }

    main#main-content :where(td, th){
      vertical-align:top;
    }

    /* Evita cards comprimidos demais em telas intermediárias. */
    @media (min-width:1024px){
      .bt-auth-main > .mx-auto,
      .bt-auth-main > .max-w-\[1400px\],
      .bt-auth-main > .max-w-\[1500px\],
      .bt-auth-main > .max-w-\[1600px\]{
        width:100%;
      }
    }

    /* Estado de carregamento nunca pode prender clique quando for download/exportação. */
    body[data-loading-mode="download"]{
      pointer-events:auto !important;
    }

    body[data-loading-mode="download"] main#main-content,
    body[data-loading-mode="download"] .app,
    body[data-loading-mode="download"] .sidebar,
    body[data-loading-mode="download"] .quick-actions{
      pointer-events:auto !important;
    }

    @media (max-width:1023.98px){
      .sidebar,
      .sidebar.hidden,
      .sidebar.lg\:flex,
      aside.sidebar{
        display:none !important;
        width:0 !important;
        min-width:0 !important;
      }

      .app{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
      }

      .app-content{
        width:100% !important;
        min-width:0 !important;
      }

      .mobile-auth-topbar,
      .lg\:hidden.mobile-auth-topbar{
        display:block !important;
      }

      .bt-auth-main{
        width:100% !important;
        max-width:100% !important;
        padding:1rem !important;
      }
    }

    @media (max-width:640px){
      body{
        min-width:0 !important;
      }

      .bt-auth-main{
        padding:.75rem !important;
      }

      .bt-auth-main > :where(div, section, article){
        max-width:100% !important;
      }

      .quick-actions{
        right:max(.85rem, env(safe-area-inset-right)) !important;
        bottom:max(.85rem, env(safe-area-inset-bottom)) !important;
      }

      .quick-actions__fab{
        width:3.25rem !important;
        height:3.25rem !important;
        min-width:3.25rem !important;
        padding:0 !important;
      }

      .quick-actions__fab-label{
        display:none !important;
      }

      .quick-actions__panel{
        width:min(94vw, 24rem) !important;
        max-height:70dvh !important;
        border-radius:1.25rem !important;
      }

      .quick-actions__list{
        grid-template-columns:1fr !important;
        max-height:calc(70dvh - 8.5rem) !important;
      }

      .admin-mobile-stack{
        display:flex !important;
        flex-direction:column !important;
        gap:.75rem !important;
      }

      .admin-mobile-stack > *{
        width:100% !important;
      }

      .admin-actions-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:.6rem !important;
        align-items:stretch !important;
      }

      .admin-actions-grid > *{
        width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        min-height:44px !important;
        padding-left:.65rem !important;
        padding-right:.65rem !important;
      }

      .admin-actions-grid .admin-action-wide,
      .admin-actions-grid #bulkOpenBtn,
      .admin-actions-grid #bulkExportFtemgBtn{
        grid-column:1 / -1;
      }

      .admin-search-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:.6rem !important;
        width:100% !important;
      }

      .admin-search-actions > *{
        width:100% !important;
      }

      .admin-search-actions .admin-search-wide{
        grid-column:1 / -1;
      }
    }

    @media (prefers-reduced-motion:reduce){
      *,
      *::before,
      *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
      }
    }

    @media print{
      .sidebar,
      .quick-actions,
      .quick-actions__backdrop,
      header,
      footer,
      .mobile-drawer,
      .mobile-drawer-backdrop{
        display:none !important;
      }

      body{
        background:#fff !important;
      }

      .app,
      .app-content,
      .app-content-inner,
      main{
        display:block !important;
        min-height:auto !important;
        padding:0 !important;
      }
    }
      /* V6 desktop data visibility fix: md:block/md:flex fallback restored. */