/* Responsividade global: celular, tablet e telas intermediárias */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,canvas,svg{max-width:100%}
input,select,textarea,button{max-width:100%}
table{max-width:100%}
.rich-content,.reading-body,.modal-article-content{overflow-wrap:anywhere;word-break:normal}
.rich-content img,.reading-body img,.modal-article-content img{height:auto!important;max-width:100%!important}
.rich-content table,.reading-body table,.modal-article-content table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:1100px){
  .topbar{padding-left:24px;padding-right:24px;gap:18px}
  .search-box{width:min(100%,560px);flex:1}
  .content-layout,.categories-content,.profile-content,.settings-content,.search-content,.reading-content,.library-content,.cases-content,.favorites-content{max-width:100%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .right-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
  .app-shell{display:block;border:0;border-radius:0;min-height:100dvh}
  .page{padding-bottom:86px}
  .sidebar{position:fixed;z-index:100;left:0;right:0;bottom:0;top:auto;width:100%;height:78px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 -8px 28px rgba(70,45,42,.08);overflow:hidden}
  .brand,.sidebar-promo{display:none!important}
  .main-nav{display:flex!important;flex-direction:row!important;gap:4px;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a,.main-nav a:nth-child(n){display:flex!important;flex:0 0 76px;height:62px;padding:6px 4px;justify-content:center;flex-direction:column;gap:4px;text-align:center;border-radius:10px;font-size:10px;line-height:1.1;scroll-snap-align:start}
  .main-nav a svg{width:20px;height:20px;flex:0 0 auto}
  .main-nav a span{display:block!important;max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main-nav a::before{display:none}
  .main-nav a:not(.active):hover{transform:none}
  .topbar{position:sticky;top:0;z-index:30;height:auto;min-height:68px;padding:10px 14px;gap:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
  .topbar>div:empty{display:none}
  .search-box{width:100%;min-width:0;height:44px}
  .search-box kbd{display:none}
  .top-actions{flex:0 0 auto}
  .profile{min-width:auto;gap:7px}
  .profile img{width:40px;height:40px}
  .profile div{display:none}
  .content-layout,.categories-content,.profile-content,.settings-content,.search-content,.reading-content,.library-content,.cases-content,.favorites-content{padding-left:16px!important;padding-right:16px!important}
  .content-layout{padding-top:18px}
  .right-panel{grid-template-columns:1fr}
  .settings-heading,.categories-title,.library-heading,.cases-heading,.profile-title,.results-toolbar{align-items:flex-start;flex-direction:column}
  .settings-tabs{max-width:100%;overflow-x:auto;white-space:nowrap}
  .account-row{align-items:flex-start;flex-wrap:wrap}
  .account-actions,.status-form{width:100%;flex-wrap:wrap}
  .account-main{min-width:0;width:calc(100% - 60px)}
  .form-grid,.case-form-grid,.permission-grid{grid-template-columns:1fr!important}
  .settings-modal{padding:12px}
  .settings-modal>article,.content-modal-dialog{width:100%;max-width:100%;max-height:90dvh;border-radius:16px}
  .settings-modal form,.settings-modal header{padding-left:16px;padding-right:16px}
  .footer{margin-left:16px!important;margin-right:16px!important}
}

@media (max-width:560px){
  .page{padding-bottom:82px}
  .sidebar{height:74px}
  .main-nav a,.main-nav a:nth-child(n){flex-basis:72px;height:58px;font-size:9.5px}
  .topbar{padding:9px 11px}
  .top-actions{display:flex!important}
  .profile .logout-link{display:grid}
  .content-layout,.categories-content,.profile-content,.settings-content,.search-content,.reading-content,.library-content,.cases-content,.favorites-content{padding-left:12px!important;padding-right:12px!important}
  .stats,.category-grid,.featured-grid,.settings-summary,.shortcut-grid{grid-template-columns:1fr!important}
  .stat-card{height:auto;min-height:92px}
  .featured-card{grid-template-columns:88px minmax(0,1fr);height:auto;min-height:122px}
  .featured-card img{width:88px;height:100%;min-height:122px}
  .welcome h1,.categories-title h1,.settings-heading h1,.profile-title h1,.search-hero h1{font-size:clamp(28px,9vw,36px)!important}
  .section-heading{align-items:flex-start;gap:8px}
  .category-card{min-height:104px}
  .panel-card,.profile-card,.case-form-card,.reading-card{padding-left:14px!important;padding-right:14px!important}
  .reading-card>header,.case-form-card>header{align-items:flex-start;flex-wrap:wrap}
  .reading-card>header>a{width:100%;justify-content:center}
  .primary-button,.secondary-button,.form-actions button,.form-actions a{min-height:44px}
  .form-actions,.settings-modal footer{flex-direction:column-reverse;align-items:stretch}
  .form-actions>* ,.settings-modal footer>*{width:100%;justify-content:center}
  .account-actions button,.status-form button,.status-form select{min-height:42px}
  .footer{margin-left:12px!important;margin-right:12px!important}
}

@media (hover:none) and (pointer:coarse){
  button,a,input,select,textarea{touch-action:manipulation}
  .category-card:hover,.main-nav a:hover{transform:none}
  input,select,textarea{font-size:16px}
}

/* ==========================================================
   Correção definitiva da navegação inferior em celulares
   Android/iOS, inclusive navegadores em modo edge-to-edge.
   ========================================================== */
@media (max-width:820px){
  :root{
    --mobile-nav-base-height:76px;
    --mobile-safe-bottom:max(env(safe-area-inset-bottom, 0px), var(--visual-viewport-bottom, 0px));
  }

  html{
    min-height:100%;
    min-height:100dvh;
    scroll-padding-bottom:calc(var(--mobile-nav-base-height) + var(--mobile-safe-bottom) + 16px);
  }

  body{
    min-height:100%;
    min-height:100dvh;
    padding-bottom:calc(var(--mobile-nav-base-height) + var(--mobile-safe-bottom));
  }

  .app-shell{
    min-height:100dvh!important;
    overflow:visible!important;
  }

  .page{
    min-height:100dvh;
    padding-bottom:calc(var(--mobile-nav-base-height) + var(--mobile-safe-bottom) + 18px)!important;
  }

  .sidebar{
    position:fixed!important;
    z-index:9999!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:var(--visual-viewport-bottom, 0px)!important;
    width:100%!important;
    max-width:none!important;
    height:calc(var(--mobile-nav-base-height) + env(safe-area-inset-bottom, 0px))!important;
    min-height:var(--mobile-nav-base-height)!important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px))!important;
    margin:0!important;
    overflow:visible!important;
    border-radius:0!important;
    box-shadow:0 -7px 24px rgba(70,45,42,.12)!important;
    transform:translateZ(0);
    isolation:isolate;
  }

  .main-nav{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:stretch!important;
    width:100%!important;
    height:64px!important;
    min-height:64px!important;
    gap:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }

  .main-nav a,
  .main-nav a:nth-child(n){
    display:flex!important;
    visibility:visible!important;
    flex:0 0 74px!important;
    min-width:74px!important;
    height:60px!important;
    min-height:60px!important;
    padding:6px 4px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
    overflow:hidden!important;
  }

  .main-nav a svg{
    display:block!important;
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    min-height:21px!important;
  }

  .main-nav a span{
    display:block!important;
    width:100%!important;
    max-width:70px!important;
    font-size:9.5px!important;
    line-height:1.05!important;
    text-align:center!important;
  }
}

@media (max-width:380px){
  .main-nav a,
  .main-nav a:nth-child(n){
    flex-basis:68px!important;
    min-width:68px!important;
  }
}