/* ============================================================
   C-GESTUS APM 2.1.3 · Compactação + Login + Sair visível
   ============================================================ */

:root{
    --v213-glass:rgba(255,255,255,.72);
    --v213-glass-strong:rgba(255,255,255,.90);
    --v213-shadow:0 8px 18px rgba(17,44,60,.09),0 2px 5px rgba(17,44,60,.05);
    --v213-shadow-hover:0 12px 25px rgba(17,44,60,.15),0 3px 8px rgba(17,44,60,.07);
    --v213-active:#173847;
    --v213-active-2:#0f2936;
    --v213-cut:8px
}

html[data-theme="dark"]{
    --v213-glass:rgba(62,72,78,.72);
    --v213-glass-strong:rgba(68,79,86,.88);
    --v213-shadow:0 9px 20px rgba(0,0,0,.20),0 2px 5px rgba(0,0,0,.14);
    --v213-shadow-hover:0 14px 28px rgba(0,0,0,.29),0 4px 8px rgba(0,0,0,.18);
    --v213-active:#244b60;
    --v213-active-2:#173541
}

/* ------------------------------------------------------------
   Navegação: glass, sombra e + ao lado de Tarefas
   ------------------------------------------------------------ */
.v21-primary-nav{
    gap:7px!important
}
.v21-primary-nav>a,
.v21-more-button,
.v213-nav-create{
    position:relative;
    min-height:42px!important;
    border:1px solid color-mix(in srgb,var(--cg-line) 88%,#fff)!important;
    border-radius:8px!important;
    clip-path:polygon(
        var(--v213-cut) 0,
        100% 0,
        100% calc(100% - var(--v213-cut)),
        calc(100% - var(--v213-cut)) 100%,
        0 100%,
        0 var(--v213-cut)
    );
    background:
        linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.16)),
        var(--v213-glass)!important;
    color:var(--cg-ink)!important;
    box-shadow:var(--v213-shadow)!important;
    backdrop-filter:blur(13px) saturate(1.22);
    -webkit-backdrop-filter:blur(13px) saturate(1.22);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important
}
html[data-theme="dark"] .v21-primary-nav>a,
html[data-theme="dark"] .v21-more-button,
html[data-theme="dark"] .v213-nav-create{
    border-color:rgba(160,185,198,.18)!important;
    background:
        linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018)),
        var(--v213-glass)!important;
    color:#dce7ec!important
}
.v21-primary-nav>a:hover,
.v21-more-button:hover,
.v213-nav-create:hover{
    transform:translateY(-2px)!important;
    box-shadow:var(--v213-shadow-hover)!important;
    border-color:color-mix(in srgb,var(--cg-blue) 38%,var(--cg-line))!important
}
.v21-primary-nav>a[aria-current="page"]{
    background:
        linear-gradient(155deg,rgba(61,166,219,.28),transparent 46%),
        linear-gradient(145deg,var(--v213-active),var(--v213-active-2))!important;
    border-color:rgba(79,185,233,.52)!important;
    color:#f6fbfe!important;
    box-shadow:
        0 10px 22px rgba(13,50,70,.21),
        inset 0 1px 0 rgba(255,255,255,.15),
        inset 0 -1px 0 rgba(0,0,0,.12)!important
}
.v21-primary-nav>a[aria-current="page"] .apm-icon{
    color:#59c4f1!important
}
.v213-nav-create{
    width:43px!important;
    min-width:43px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    background:
        linear-gradient(145deg,rgba(255,255,255,.28),transparent 38%),
        linear-gradient(145deg,#31a9df,#157fb8)!important;
    border-color:rgba(54,174,225,.58)!important;
    color:#fff!important;
    box-shadow:0 10px 20px rgba(21,133,187,.24),inset 0 1px 0 rgba(255,255,255,.30)!important
}
.v213-nav-create .apm-icon{
    width:18px!important;
    height:18px!important
}

/* ------------------------------------------------------------
   Mais: scroll interno + footer Sair sempre visível
   ------------------------------------------------------------ */
.v21-more-modal{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    max-height:min(86vh,880px)!important
}
.v21-more-modal[hidden]{display:none!important}
.v21-more-modal>.v21-modal-head{
    flex:0 0 auto
}
.v213-more-scroll{
    min-height:0;
    flex:1 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin
}
.v212-more-footer{
    position:relative!important;
    z-index:8;
    flex:0 0 auto;
    margin-top:auto;
    border-top:1px solid var(--cg-line);
    background:color-mix(in srgb,var(--cg-card) 96%,transparent)!important;
    box-shadow:0 -10px 24px rgba(17,44,60,.055);
    backdrop-filter:blur(16px)
}
html[data-theme="dark"] .v212-more-footer{
    background:rgba(47,57,63,.98)!important;
    box-shadow:0 -10px 24px rgba(0,0,0,.20)
}
.v212-logout-button{
    min-width:96px;
    justify-content:center;
    font-size:10px!important;
    box-shadow:0 8px 18px rgba(111,39,34,.10)!important
}

/* ------------------------------------------------------------
   Login: um único card, logo sempre visível e animação discreta
   ------------------------------------------------------------ */
.v213-login-wrap{
    min-height:100vh!important;
    display:grid!important;
    place-items:center!important;
    padding:28px!important;
    background:
        radial-gradient(circle at 50% 28%,rgba(28,161,216,.12),transparent 27rem),
        linear-gradient(155deg,#f4f7f8,#e9eef0)!important
}
html[data-theme="dark"] .v213-login-wrap{
    background:
        radial-gradient(circle at 50% 25%,rgba(30,154,209,.15),transparent 28rem),
        linear-gradient(155deg,#202c32,#18242a)!important
}
.v213-login-card{
    --cg-cut-bg:transparent;
    position:relative;
    width:min(430px,100%)!important;
    min-height:0!important;
    display:block!important;
    overflow:hidden!important;
    padding:0!important;
    border:1px solid rgba(105,145,166,.28)!important;
    border-radius:13px!important;
    background:
        linear-gradient(145deg,rgba(255,255,255,.90),rgba(244,248,250,.77))!important;
    box-shadow:
        0 28px 70px rgba(22,47,61,.16),
        0 5px 18px rgba(22,47,61,.08),
        inset 0 1px 0 rgba(255,255,255,.82)!important;
    backdrop-filter:blur(22px) saturate(1.12)
}
html[data-theme="dark"] .v213-login-card{
    border-color:rgba(104,162,190,.26)!important;
    background:
        linear-gradient(145deg,rgba(57,70,77,.96),rgba(42,53,59,.96))!important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.06)!important
}
.v213-login-aura{
    position:absolute;
    width:270px;
    height:270px;
    left:50%;
    top:-170px;
    transform:translateX(-50%);
    border:1px solid rgba(49,169,223,.18);
    border-radius:50%;
    box-shadow:0 0 70px rgba(37,157,211,.14);
    pointer-events:none
}
.v213-login-aura::after{
    content:"";
    position:absolute;
    inset:35px;
    border:1px solid rgba(49,169,223,.11);
    border-radius:50%
}
.v213-login-brand{
    position:relative;
    z-index:2;
    display:grid!important;
    justify-items:center!important;
    gap:10px;
    padding:34px 30px 20px!important;
    border:0!important;
    text-align:center
}
.v213-login-mark-wrap{
    position:relative;
    width:128px;
    height:128px;
    display:grid;
    place-items:center
}
.v213-login-mark-wrap::before{
    content:"";
    position:absolute;
    inset:-13px;
    border:1px solid rgba(41,167,221,.22);
    border-radius:50%;
    box-shadow:0 0 34px rgba(35,164,220,.15)
}
.v213-login-mark{
    width:128px!important;
    height:128px!important;
    display:block!important;
    object-fit:contain;
    filter:drop-shadow(0 10px 18px rgba(14,112,161,.21))
}
.v213-login-wordmark{
    display:grid;
    justify-items:center;
    line-height:1
}
.v213-login-wordmark strong{
    font-size:24px;
    letter-spacing:.105em
}
.v213-login-wordmark b,
.v213-login-wordmark em{
    font-style:normal
}
.v213-login-wordmark b{color:#253a45}
.v213-login-wordmark em{color:#687980}
.v213-login-wordmark small{
    margin-top:6px;
    color:#148fc9;
    font-size:9px;
    font-weight:950;
    letter-spacing:.26em
}
html[data-theme="dark"] .v213-login-wordmark b{color:#f1f6f8}
html[data-theme="dark"] .v213-login-wordmark em{color:#aebcc2}
.v213-login-body{
    position:relative;
    z-index:2;
    display:grid;
    gap:13px;
    padding:10px 34px 31px
}
.v213-login-body h1{
    margin:0 0 3px!important;
    color:var(--cg-ink)!important;
    font-size:25px!important;
    letter-spacing:-.035em!important;
    text-align:center
}
.v213-login-body label{
    display:grid;
    gap:6px;
    color:var(--cg-muted);
    font-size:9px;
    font-weight:850
}
.v213-login-body input{
    min-height:47px;
    border-radius:8px!important;
    background:color-mix(in srgb,var(--cg-card-2) 82%,transparent)!important;
    font-size:12px
}
.v213-login-submit{
    position:relative;
    min-height:48px!important;
    overflow:hidden;
    margin-top:5px;
    border:1px solid rgba(75,187,234,.58)!important;
    border-radius:8px!important;
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
    background:
        linear-gradient(145deg,rgba(255,255,255,.31),transparent 38%),
        linear-gradient(145deg,#40b4e7,#218dca)!important;
    color:#fff!important;
    box-shadow:0 11px 24px rgba(29,142,196,.25),inset 0 1px 0 rgba(255,255,255,.28)!important;
    font-weight:900!important;
    cursor:pointer
}
.v213-login-submit::after{
    content:"";
    position:absolute;
    top:-40%;
    bottom:-40%;
    left:-45%;
    width:34%;
    transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
    opacity:.55
}
.v213-login-submit:hover{
    transform:translateY(-2px);
    filter:saturate(1.08) brightness(1.03);
    box-shadow:0 15px 29px rgba(29,142,196,.30),inset 0 1px 0 rgba(255,255,255,.30)!important
}
.v213-login-foot{
    color:var(--cg-muted);
    font-size:7px;
    text-align:center
}

/* ------------------------------------------------------------
   Cabeçalhos de módulos: título + ações na mesma faixa
   ------------------------------------------------------------ */
.v213-module-head{
    min-height:58px!important;
    align-items:center!important;
    padding:7px 0 12px!important;
    margin:0 0 6px!important
}
.v213-module-head>div:first-child{
    display:block!important
}
.v213-module-head h1{
    font-size:clamp(27px,2.65vw,36px)!important
}
.v213-module-head .quick-actions,
.v213-module-head.apps-hero .apps-hero-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    margin:0!important
}
.v213-module-head .button{
    min-height:39px!important
}

/* ------------------------------------------------------------
   Filtros de módulos: glass + semântica cromática
   ------------------------------------------------------------ */
.task-scope-bar{
    gap:7px!important;
    margin-top:8px!important;
    margin-bottom:12px!important
}
.task-scope-bar>a,
.task-scope-bar>button{
    position:relative;
    min-height:39px!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid color-mix(in srgb,var(--cg-line) 88%,#fff)!important;
    border-radius:8px!important;
    clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
    background:
        linear-gradient(145deg,rgba(255,255,255,.54),rgba(255,255,255,.10)),
        var(--v213-glass)!important;
    color:var(--cg-ink)!important;
    box-shadow:0 6px 13px rgba(17,44,60,.07)!important;
    font-size:10px!important;
    font-weight:780!important;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease!important
}
html[data-theme="dark"] .task-scope-bar>a,
html[data-theme="dark"] .task-scope-bar>button{
    border-color:rgba(160,185,198,.17)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.01)),rgba(57,68,74,.78)!important;
    color:#dce6ea!important
}
.task-scope-bar>a:hover,
.task-scope-bar>button:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 9px 18px rgba(17,44,60,.12)!important
}
.task-scope-bar .active{
    color:#fff!important;
    border-color:rgba(72,176,221,.46)!important;
    box-shadow:0 9px 18px rgba(18,72,99,.18),inset 0 1px 0 rgba(255,255,255,.16)!important
}
.v213-scope-active.active,
.v213-scope-open.active{
    background:linear-gradient(145deg,#1b4c65,#14394a)!important
}
.v213-scope-today.active{
    background:linear-gradient(145deg,#158aa7,#116b83)!important
}
.v213-scope-overdue.active{
    background:linear-gradient(145deg,#a54b47,#7f3432)!important;
    border-color:rgba(223,115,108,.58)!important
}
.v213-scope-pay.active{
    background:linear-gradient(145deg,#a76634,#824822)!important
}
.v213-scope-receive.active,
.v213-scope-completed.active{
    background:linear-gradient(145deg,#36785c,#285e46)!important
}
.v213-scope-archived.active{
    background:linear-gradient(145deg,#647077,#4c585f)!important
}
.v213-scope-all.active{
    background:linear-gradient(145deg,#665d8e,#4e466f)!important
}

/* ------------------------------------------------------------
   Dark: cinzentos menos negros e mais separados
   ------------------------------------------------------------ */
html[data-theme="dark"] body{
    background:#202a2f!important
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .cg-cut-card{
    background-color:#303b41!important;
    border-color:#46545b!important
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    background:#3a4750!important;
    border-color:#52616a!important;
    color:#eef4f6!important
}
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .empty-state{
    border-color:#46545b!important
}

/* ------------------------------------------------------------
   Motion, só quando permitido
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:no-preference){
    html[data-motion="1"] .v213-login-card{
        animation:v213-card-in .46s cubic-bezier(.2,.75,.25,1) both
    }
    html[data-motion="1"] .v213-login-mark-wrap{
        animation:v213-mark-in .68s cubic-bezier(.18,.78,.22,1) .06s both
    }
    html[data-motion="1"] .v213-login-submit::after{
        animation:v213-shine 4.2s ease-in-out 1.15s infinite
    }
    @keyframes v213-card-in{
        from{opacity:0;transform:translateY(16px) scale(.985)}
        to{opacity:1;transform:none}
    }
    @keyframes v213-mark-in{
        from{opacity:0;transform:translateY(-8px) scale(.92);filter:blur(3px)}
        to{opacity:1;transform:none;filter:none}
    }
    @keyframes v213-shine{
        0%,68%,100%{left:-45%;opacity:0}
        75%{opacity:.55}
        86%{left:125%;opacity:0}
    }
}

@media(max-width:820px){
    .v213-login-wrap{
        padding:18px!important
    }
    .v213-login-card{
        width:min(390px,100%)!important
    }
    .v213-login-brand{
        display:grid!important;
        padding:28px 24px 17px!important
    }
    .v213-login-mark-wrap,
    .v213-login-mark{
        width:112px!important;
        height:112px!important
    }
    .v213-login-body{
        padding:8px 24px 26px
    }
    .v213-login-wordmark strong{
        font-size:21px
    }
    .v213-module-head{
        min-height:54px!important;
        gap:10px!important;
        align-items:center!important
    }
    .v213-module-head h1{
        font-size:28px!important
    }
    .v213-module-head .quick-actions{
        gap:5px!important
    }
    .v213-module-head .button{
        min-height:37px!important;
        padding:0 10px!important;
        font-size:9px!important
    }
    .task-scope-bar{
        display:flex!important;
        overflow-x:auto!important;
        padding-bottom:4px!important;
        flex-wrap:nowrap!important;
        scrollbar-width:none
    }
    .task-scope-bar::-webkit-scrollbar{display:none}
    .task-scope-bar>a,
    .task-scope-bar>button{
        flex:0 0 auto!important
    }
    .v21-more-modal{
        max-height:88vh!important
    }
    .v212-more-footer{
        padding-bottom:calc(16px + env(safe-area-inset-bottom))!important
    }
}

@media(max-width:520px){
    .v213-module-head{
        align-items:flex-start!important;
        flex-direction:column!important;
        padding-top:4px!important
    }
    .v213-module-head .quick-actions,
    .v213-module-head.apps-hero .apps-hero-actions{
        width:100%;
        justify-content:flex-start!important;
        overflow-x:auto;
        padding-bottom:2px
    }
    .v213-login-body h1{
        font-size:23px!important
    }
}