:root{
    --ink:#1F2A24;
    --ink-soft:#4B5750;
    --bg:#FAFAF8;
    --surface:#FFFFFF;
    --border:#E5E1D6;
    --primary:#2F4A3C;
    --primary-dark:#213529;
    --primary-tint:#E8EEE9;
    --gold:#B08D57;
    --gold-tint:#F5EEE2;
    --amber:#C97C3D;
    --amber-tint:#FBEDE0;
    --danger:#B5484A;
  }
  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    font-size:17px;
    min-height:100vh;
  }
  h1,h2,h3,h4,.font-display{
    font-family:'Fraunces',serif;
    letter-spacing:-0.01em;
  }
  /* ---------- LOGIN ---------- */
  #screen-login{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 600px at 12% 8%, rgba(107,155,120,0.35), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 15%, rgba(176,141,87,0.28), transparent 60%),
      radial-gradient(ellipse 800px 700px at 20% 95%, rgba(47,74,60,0.30), transparent 55%),
      radial-gradient(ellipse 900px 700px at 100% 100%, rgba(107,155,120,0.30), transparent 60%),
      linear-gradient(160deg, #1c2b22 0%, #24382c 55%, #2c4436 100%);
    padding:24px;
  }
  #screen-login::before{
    /* leve textura orgânica desfocada, tipo folhagem ao fundo */
    content:'';
    position:fixed; inset:0;
    background-image:
      radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.5;
    filter:blur(0.3px);
  }
  .leaf-particles{
    position:absolute; inset:0;
    pointer-events:none;
    overflow:hidden;
  }
  .leaf-particle{
    position:absolute;
    color:rgba(201,183,138,0.55);
    opacity:0;
    animation:leaf-float linear infinite;
  }
  @keyframes leaf-float{
    0%   { transform:translateY(0) rotate(0deg);   opacity:0; }
    10%  { opacity:.6; }
    85%  { opacity:.25; }
    100% { transform:translateY(-110vh) rotate(50deg); opacity:0; }
  }
  .login-content{
    position:relative;
    z-index:5;
    width:100%;
    max-width:420px;
    animation:login-in .6s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes login-in{
    from{opacity:0; transform:translateY(24px);}
    to{opacity:1; transform:translateY(0);}
  }
  .login-brand{
    text-align:center;
    margin-bottom:26px;
  }
  .login-brand .leaf-mark{
    width:60px;height:60px;
    font-size:26px;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(201,183,138,0.35);
    backdrop-filter:blur(6px);
  }
  .login-brand .brand-name{
    font-family:'Fraunces',serif;
    font-size:26px;
    font-weight:600;
    color:#F7F5EF;
    margin-top:14px;
  }
  .login-brand .brand-sub{
    font-size:12.5px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(247,245,239,0.65);
    margin-top:4px;
  }
  #screen-login .login-card{
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(4px);
    box-shadow:0 30px 70px -30px rgba(0,0,0,0.55);
  }
  .login-card-stripe{
    height:4px;
    background:linear-gradient(90deg, var(--primary), var(--gold));
  }
  .login-footnote{
    text-align:center;
    margin-top:20px;
    font-size:12px;
    color:rgba(247,245,239,0.55);
    line-height:1.6;
  }
  .leaf-mark{
    width:46px;height:46px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--primary);
    border-radius:14px;
    color:#fff;font-size:22px;
  }
  .login-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:44px 40px;
    width:100%;
    max-width:400px;
    box-shadow:0 20px 50px -25px rgba(31,42,36,0.25);
  }
  .form-control-lg-custom{
    padding:14px 16px;
    font-size:17px;
    border-radius:12px;
    border:1px solid var(--border);
  }
  .form-control-lg-custom:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(47,74,60,0.15);
  }

  /* Login compacto em telas mais baixas (ex: notebook 1366x768) - evita
     que o formulario fique cortado/exija rolagem pra achar Senha/Entrar. */
  @media (max-height: 900px){
    #screen-login{
      padding-top:20px;
      padding-bottom:20px;
    }
    .login-brand{ margin-bottom:12px; }
    .login-brand .leaf-mark{ width:42px; height:42px; font-size:19px; }
    .login-brand .brand-name{ font-size:20px; margin-top:8px; }
    .login-brand .brand-sub{ margin-top:2px; }
    .login-card{ padding:24px 28px 20px; }
    .login-footnote{ margin-top:10px; font-size:11px; line-height:1.4; }
  }
  @media (max-height: 750px){
    .login-brand{ display:none; }
    #screen-login{ padding-top:10px; padding-bottom:10px; }
    .login-card{ padding:18px 24px; }
    .login-card .mb-3{ margin-bottom:.5rem !important; }
    .login-card .mb-4{ margin-bottom:.75rem !important; }
    .login-card label{ margin-bottom:.15rem !important; font-size:13px; }
    .form-control-lg-custom{ padding:9px 14px; font-size:15px; }
    .btn-primary-custom{ padding:9px; }
    .login-footnote{ margin-top:6px; }
  }
  .btn-primary-custom{
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:12px;
    padding:14px;
    font-weight:600;
    font-size:17px;
    transition:background .15s ease;
  }
  .btn-primary-custom:hover{background:var(--primary-dark); color:#fff;}
  .btn-outline-custom{
    background:transparent;
    border:1.5px solid var(--border);
    color:var(--ink);
    border-radius:12px;
    font-weight:600;
  }
  .btn-outline-custom:hover{border-color:var(--primary); color:var(--primary);}

  /* ---------- APP SHELL ---------- */
  .app-shell{min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;}
  .app-topbar{
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .sidebar{
    width:250px;
    flex-shrink:0;
    /* Sem min-height fixo: dentro do .d-flex.flex-grow-1 (ver nav.php/
       footer.php), o flexbox já estica a sidebar pra acompanhar a altura
       real do conteúdo ao lado — um valor fixo aqui conflitava com o
       sticky-footer, empurrando a página além da tela sem necessidade. */
    background:var(--surface);
    border-right:1px solid var(--border);
    padding:24px 14px;
  }
  .side-link{
    display:flex;align-items:center;gap:10px;
    padding:13px 14px;
    border-radius:12px;
    color:var(--ink-soft);
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    margin-bottom:4px;
    white-space:nowrap;
  }
  .side-link i{font-size:20px;}
  .side-link.active{
    background:var(--primary-tint);
    color:var(--primary);
  }
  .side-link:hover:not(.active){background:var(--bg); color:var(--ink);}
  .app-main{padding:28px 32px; flex:1; min-width:0;}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:12.5px;
    font-weight:700;
    color:var(--gold);
  }
  .page-title{font-size:30px; font-weight:600; margin-top:2px;}
  .page-sub{color:var(--ink-soft); font-size:15.5px;}

  .card-soft{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
  }
  .doc-icon{
    width:48px;height:48px;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
    flex-shrink:0;
  }
  .badge-status{
    font-weight:600;
    font-size:12.5px;
    padding:6px 12px;
    border-radius:999px;
  }
  .badge-pago{background:var(--primary-tint); color:var(--primary);}
  .badge-pendente{background:var(--amber-tint); color:var(--amber);}
  .badge-vencido{background:#FBEAEA; color:var(--danger);}
  .filter-chip{
    border:1.5px solid var(--border);
    border-radius:999px;
    padding:8px 18px;
    font-weight:600;
    font-size:14.5px;
    color:var(--ink-soft);
    background:var(--surface);
    cursor:pointer;
  }
  .filter-chip.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
  }
  .doc-nao-visto{
    border-left:4px solid var(--gold);
    background:var(--gold-tint);
  }
  .badge-novo{
    display:inline-block;
    background:var(--gold);
    color:#fff;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.03em;
    padding:2px 8px;
    border-radius:999px;
  }
  .visibility-tag{
    display:inline-flex; align-items:center; gap:5px;
    font-size:12.5px; font-weight:600;
    margin-top:4px;
  }
  .visibility-individual{color:var(--primary);}
  .visibility-coletivo{color:var(--gold);}

  /* space cards (agendas) */
  .space-card{
    border:1.5px solid var(--border);
    border-radius:16px;
    padding:18px;
    cursor:pointer;
    background:var(--surface);
    transition:.15s ease;
    height:100%;
  }
  .space-card:hover{border-color:var(--gold);}
  .space-card.selected{
    border-color:var(--primary);
    background:var(--primary-tint);
  }
  .space-icon{
    width:56px;height:56px;
    border-radius:14px;
    background:var(--gold-tint);
    color:var(--gold);
    display:flex;align-items:center;justify-content:center;
    font-size:26px;
    margin-bottom:12px;
  }
  .space-card.selected .space-icon{background:var(--primary); color:#fff;}

  /* wizard steps */
  .step-indicator{display:flex; align-items:center; gap:8px; margin-bottom:28px;}
  .step-dot{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700; font-size:14px;
    background:var(--border); color:var(--ink-soft);
  }
  .step-dot.active{background:var(--primary); color:#fff;}
  .step-dot.done{background:var(--primary-tint); color:var(--primary);}
  .step-line{flex:1; height:2px; background:var(--border);}
  .step-label{font-size:13.5px; font-weight:600; color:var(--ink-soft);}

  /* calendar */
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
  .cal-head{
    text-align:center; font-size:12.5px; font-weight:700;
    color:var(--ink-soft); padding-bottom:4px;
  }
  .cal-day{
    aspect-ratio:1/1;
    display:flex;align-items:center;justify-content:center;
    border-radius:10px;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    border:1.5px solid var(--border);
    transition:border-color .12s ease, background .12s ease;
  }
  .cal-day.reserved{background:var(--amber-tint); color:var(--amber); border-color:var(--amber-tint);}
  .cal-day.empty{visibility:hidden; border-color:transparent; cursor:default;}
  .cal-day.selected{background:var(--primary); color:#fff; border-color:var(--primary);}
  .cal-day:not(.empty):not(.selected):hover{border-color:var(--gold);}

  /* complaints */
  .complaint-row{
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 18px;
    background:var(--surface);
    cursor:pointer;
  }
  .complaint-row:hover{border-color:var(--gold);}
  .visto-chip{
    display:inline-block;
    border:1px solid var(--border);
    border-radius:999px;
    padding:4px 12px;
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
    background:var(--surface);
  }
  .bubble{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px 18px;
    font-size:16px;
    line-height:1.5;
  }
  .bubble.admin{background:var(--primary-tint); border-color:transparent;}

  .app-footer{
    background:var(--surface);
    border-top:1px solid var(--border);
    font-size:12px;
    color:var(--ink-soft);
  }

  /* bottom nav mobile */
  .bottom-nav{
    display:none;
    position:fixed; bottom:0; left:0; right:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    padding:8px 4px 10px;
    z-index:1030;
  }
  .bottom-nav .nav-item-mobile{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--ink-soft); text-decoration:none; font-size:11.5px; font-weight:600;
    flex:1; padding:6px 2px;
  }
  .bottom-nav .nav-item-mobile i{font-size:22px;}
  .bottom-nav .nav-item-mobile.active{color:var(--primary);}

  /* sheet "Mais" */
  .mais-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(31,42,36,0.45);
    z-index:1040;
  }
  .mais-overlay.show{display:block;}
  .mais-sheet{
    position:absolute; left:0; right:0; bottom:0;
    background:var(--surface);
    border-radius:20px 20px 0 0;
    padding:14px 20px 24px;
    animation:sheet-up .25s ease-out;
  }
  @keyframes sheet-up{
    from{transform:translateY(100%);}
    to{transform:translateY(0);}
  }
  .mais-handle{
    width:40px; height:4px;
    background:var(--border);
    border-radius:99px;
    margin:0 auto 16px;
  }
  .mais-item{
    display:flex; align-items:center; gap:14px;
    padding:12px 4px;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid var(--border);
  }
  .mais-item:last-of-type{border-bottom:none;}
  .mais-item-icon{
    width:42px; height:42px;
    border-radius:12px;
    background:var(--primary-tint);
    color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:19px;
    flex-shrink:0;
  }

  @media (max-width: 767.98px){
    .sidebar{display:none;}
    .app-main{padding:20px 16px 90px;}
    .bottom-nav{display:flex;}
    .page-title{font-size:24px;}
  }

  .tab-pane-custom{display:none;}
  .tab-pane-custom.show{display:block;}
  .step-pane{display:none;}
  .step-pane.show{display:block;}