/* ============================================================
   C-GESTUS APM 2.1.2 · Premium polish + configurable alerts
   ============================================================ */

:root{
    --v212-cut:9px;
    --v212-glass-bg:rgba(255,255,255,.68);
    --v212-glass-bg-strong:rgba(255,255,255,.84);
    --v212-glass-line:rgba(91,126,145,.24);
    --v212-glow:rgba(22,155,213,.20);
    --v212-button-shadow:0 8px 16px rgba(18,47,64,.11),0 2px 4px rgba(18,47,64,.055);
    --v212-button-shadow-hover:0 13px 24px rgba(18,47,64,.15),0 3px 7px rgba(18,47,64,.075);
    --v212-panel-shadow:0 14px 38px rgba(23,38,51,.065)
}

html[data-theme="dark"]{
    --cg-bg:#252d32;
    --cg-card:#30393f;
    --cg-card-2:#374148;
    --cg-line:#4a565e;
    --cg-line-strong:#5a6871;
    --cg-ink:#f5f7f8;
    --cg-muted:#b5c0c5;
    --soft:#3a454c;
    --v212-glass-bg:rgba(52,63,70,.72);
    --v212-glass-bg-strong:rgba(60,72,79,.88);
    --v212-glass-line:rgba(184,204,214,.18);
    --v212-glow:rgba(58,170,225,.20);
    --v212-button-shadow:0 9px 18px rgba(0,0,0,.22),0 2px 4px rgba(0,0,0,.12);
    --v212-button-shadow-hover:0 15px 28px rgba(0,0,0,.28),0 3px 7px rgba(0,0,0,.16);
    --v212-panel-shadow:0 15px 42px rgba(0,0,0,.19)
}

body{
    background-image:
        radial-gradient(circle at 90% -10%,rgba(22,155,213,.065),transparent 31rem),
        linear-gradient(180deg,color-mix(in srgb,var(--cg-bg) 97%,white 3%),var(--cg-bg))
}

html[data-theme="dark"] body{
    background-image:
        radial-gradient(circle at 90% -10%,rgba(58,170,225,.085),transparent 32rem),
        linear-gradient(180deg,#2a3237,var(--cg-bg))
}

/* Wordmark: azul + branco/cinza, sem depender da imagem com texto. */
.v212-wordmark strong{
    display:flex;
    align-items:baseline;
    letter-spacing:.095em
}
.v212-wordmark strong b,
.v212-wordmark strong em{
    font-style:normal
}
.v212-wordmark strong b{
    color:var(--cg-ink)
}
.v212-wordmark strong em{
    color:#69777f
}
.v212-wordmark small{
    color:var(--cg-blue-deep)!important
}
html[data-theme="dark"] .v212-wordmark strong b{
    color:#fff
}
html[data-theme="dark"] .v212-wordmark strong em{
    color:#aeb9be
}

/* ------------------------------------------------------------
   Botões superiores: glassmorphism, corte diagonal e relevo real
   ------------------------------------------------------------ */
.v21-primary-nav>a,
.v21-primary-nav>.v211-nav-more,
.v21-top-actions>.v21-icon-button,
.v21-top-actions>.v21-create-button{
    position:relative;
    min-height:43px;
    border:1px solid var(--v212-glass-line)!important;
    border-radius:7px!important;
    clip-path:polygon(
        var(--v212-cut) 0,
        100% 0,
        100% calc(100% - var(--v212-cut)),
        calc(100% - var(--v212-cut)) 100%,
        0 100%,
        0 var(--v212-cut)
    );
    background:
        linear-gradient(115deg,rgba(255,255,255,.36),transparent 31%),
        linear-gradient(180deg,var(--v212-glass-bg-strong),var(--v212-glass-bg))!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.50),
        inset 0 -1px 0 rgba(255,255,255,.09)!important;
    filter:drop-shadow(0 8px 8px rgba(18,47,64,.10));
    backdrop-filter:blur(16px) saturate(1.22);
    -webkit-backdrop-filter:blur(16px) saturate(1.22);
    transition:
        transform .18s ease,
        filter .18s ease,
        color .18s ease,
        border-color .18s ease
}

html[data-theme="dark"] .v21-primary-nav>a,
html[data-theme="dark"] .v21-primary-nav>.v211-nav-more,
html[data-theme="dark"] .v21-top-actions>.v21-icon-button{
    background:
        linear-gradient(115deg,rgba(255,255,255,.075),transparent 32%),
        linear-gradient(180deg,rgba(67,80,88,.84),rgba(46,57,64,.74))!important
}

.v21-primary-nav>a:hover,
.v21-primary-nav>.v211-nav-more:hover,
.v21-top-actions>.v21-icon-button:hover,
.v21-top-actions>.v21-create-button:hover{
    transform:translateY(-2px) scale(1.018);
    border-color:color-mix(in srgb,var(--cg-blue) 42%,var(--v212-glass-line))!important;
    filter:drop-shadow(0 12px 10px rgba(18,47,64,.16))
}

.v21-primary-nav>a[aria-current="page"]{
    color:var(--cg-blue-deep)!important;
    border-color:rgba(22,155,213,.38)!important;
    background:
        linear-gradient(115deg,rgba(255,255,255,.54),transparent 32%),
        linear-gradient(145deg,rgba(223,246,255,.93),rgba(236,247,252,.76))!important;
    filter:
        drop-shadow(0 9px 8px rgba(22,155,213,.14))
        drop-shadow(0 0 10px rgba(22,155,213,.05))
}
html[data-theme="dark"] .v21-primary-nav>a[aria-current="page"]{
    color:#75c8f2!important;
    background:
        linear-gradient(115deg,rgba(255,255,255,.10),transparent 32%),
        linear-gradient(145deg,rgba(29,85,112,.75),rgba(47,65,75,.83))!important
}

.v21-top-actions>.v21-create-button{
    width:46px;
    min-width:46px;
    color:#fff;
    border-color:rgba(116,209,249,.55)!important;
    background:
        linear-gradient(120deg,rgba(255,255,255,.28),transparent 34%),
        linear-gradient(145deg,#25afe7,#167ac1)!important;
    filter:
        drop-shadow(0 10px 8px rgba(22,125,190,.25))
        drop-shadow(0 0 12px rgba(37,175,231,.10))
}

.v21-top-actions>.v21-create-button .apm-icon{
    width:21px;
    height:21px
}

/* O More fica junto da navegação, não perdido nas ações de sistema. */
.v211-nav-more{
    margin-left:2px
}

/* Badges de dados/atenção */
.v212-nav-badge,
.v212-more-badge,
.v212-dock-badge{
    display:inline-grid;
    place-items:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border:1px solid color-mix(in srgb,var(--cg-danger) 44%,var(--cg-line));
    border-radius:999px;
    background:color-mix(in srgb,var(--cg-danger) 13%,var(--cg-card));
    color:var(--cg-danger);
    font-size:7px;
    font-weight:900;
    line-height:1;
    font-variant-numeric:tabular-nums
}
.v212-more-badge{
    margin-left:auto
}
.v212-dock-badge{
    position:absolute;
    top:2px;
    right:15%;
    min-width:16px;
    height:16px;
    font-size:6px
}
.v21-mobile-dock>a,
.v21-mobile-dock>button{
    position:relative
}

/* ------------------------------------------------------------
   Modal Mais e Sair
   ------------------------------------------------------------ */
.v21-more-modal{
    overflow:hidden;
    border-radius:16px!important;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
    background:
        linear-gradient(135deg,rgba(255,255,255,.30),transparent 36%),
        color-mix(in srgb,var(--cg-card) 96%,transparent)!important;
    box-shadow:0 30px 90px rgba(9,29,40,.25)!important;
    backdrop-filter:blur(22px) saturate(1.15)
}
html[data-theme="dark"] .v21-more-modal{
    background:
        linear-gradient(135deg,rgba(255,255,255,.045),transparent 38%),
        rgba(47,57,63,.96)!important
}

.v21-action-grid>a,
.v21-action-grid>button,
.v21-module-grid>a,
.v21-system-links>a,
.v21-theme-choice>button{
    border-radius:8px!important;
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
    transition:transform .16s ease,filter .16s ease,background .16s ease
}
.v21-action-grid>a:hover,
.v21-action-grid>button:hover,
.v21-module-grid>a:hover,
.v21-system-links>a:hover,
.v21-theme-choice>button:hover{
    transform:translateY(-1px);
    filter:drop-shadow(0 7px 7px rgba(18,47,64,.10))
}

.v212-more-footer{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:14px;
    padding:15px 22px 19px;
    background:color-mix(in srgb,var(--cg-card-2) 76%,transparent)
}
.v212-more-footer>span strong,
.v212-more-footer>span small{
    display:block
}
.v212-more-footer>span strong{
    max-width:300px;
    overflow:hidden;
    color:var(--cg-ink);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap
}
.v212-more-footer>span small{
    margin-top:3px;
    color:var(--cg-muted);
    font-size:7px
}
.v212-more-footer form{
    margin:0
}
.v212-logout-button{
    min-height:40px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 13px;
    border:1px solid color-mix(in srgb,var(--cg-danger) 34%,var(--cg-line));
    border-radius:7px;
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
    background:color-mix(in srgb,var(--cg-danger) 8%,var(--cg-card));
    color:var(--cg-danger);
    box-shadow:0 7px 14px rgba(78,32,30,.07);
    font-size:9px;
    font-weight:850;
    cursor:pointer
}
.v212-logout-button:hover{
    background:color-mix(in srgb,var(--cg-danger) 14%,var(--cg-card));
    transform:translateY(-1px)
}
.v212-logout-button .apm-icon{
    width:16px;
    height:16px
}

/* ------------------------------------------------------------
   Cards: assinatura geométrica ligeiramente mais nítida
   ------------------------------------------------------------ */
.cg-cut-card,
.v21-context-card,
.v21-home-stats .stat-card,
.home-focus130,
.focus-panel,
.v21-area-summary,
.focus-overdue{
    border-radius:11px!important;
    box-shadow:var(--v212-panel-shadow)
}

.cg-cut-card::before,
.v21-context-card::before{
    background:
        linear-gradient(135deg,var(--cg-cut-bg) 0 8px,transparent 8.4px) top left / 14px 14px no-repeat,
        linear-gradient(315deg,var(--cg-cut-bg) 0 8px,transparent 8.4px) bottom right / 14px 14px no-repeat!important
}

/* ------------------------------------------------------------
   Login premium: wordmark limpo e painel futurista, sem exagero
   ------------------------------------------------------------ */
.v212-login-branding{
    display:grid;
    place-items:center;
    gap:14px;
    margin:auto
}
.v212-login-mark{
    width:190px;
    height:190px;
    object-fit:contain;
    filter:drop-shadow(0 18px 20px rgba(19,119,177,.15))
}
.v212-login-wordmark{
    display:grid;
    justify-items:center;
    gap:5px
}
.v212-login-wordmark strong{
    display:flex;
    font-size:31px;
    letter-spacing:.13em;
    line-height:1
}
.v212-login-wordmark b,
.v212-login-wordmark em{
    font-style:normal
}
.v212-login-wordmark b{
    color:var(--cg-ink)
}
.v212-login-wordmark em{
    color:#6d7b82
}
.v212-login-wordmark small{
    color:var(--cg-blue-deep);
    font-size:8px;
    font-weight:900;
    letter-spacing:.33em
}
html[data-theme="dark"] .v212-login-wordmark b{
    color:#fff
}
html[data-theme="dark"] .v212-login-wordmark em{
    color:#a7b1b6
}

.v211-login-shell{
    border-radius:0!important;
    clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
    box-shadow:0 32px 90px rgba(16,37,50,.16)!important
}
.v211-login-brand{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 15%,rgba(22,155,213,.23),transparent 20rem),
        linear-gradient(145deg,color-mix(in srgb,var(--cg-card) 72%,#1c718f 28%),var(--cg-card-2))!important
}
.v211-login-brand::after{
    content:"";
    position:absolute;
    left:-15%;
    bottom:-40%;
    width:75%;
    aspect-ratio:1;
    border:1px solid rgba(65,184,232,.18);
    border-radius:50%;
    box-shadow:0 0 60px rgba(22,155,213,.10)
}
.v211-login-card button[type="submit"]{
    min-height:47px;
    border-radius:7px!important;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    background:
        linear-gradient(115deg,rgba(255,255,255,.26),transparent 34%),
        linear-gradient(145deg,#35afe2,#2689c6)!important;
    box-shadow:0 11px 20px rgba(24,133,193,.19)!important
}
.v211-login-card input{
    border-radius:7px!important
}

/* ------------------------------------------------------------
   Motion: subtil, só quando o utilizador permite
   ------------------------------------------------------------ */
@keyframes v212-enter-top{
    from{opacity:0;transform:translateY(-8px)}
    to{opacity:1;transform:none}
}
@keyframes v212-enter-up{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
}

html[data-motion="1"].v212-ready .v21-topbar{
    animation:v212-enter-top .38s ease both
}
html[data-motion="1"].v212-ready .v21-shell>*:nth-child(1){animation:v212-enter-up .34s .03s ease both}
html[data-motion="1"].v212-ready .v21-shell>*:nth-child(2){animation:v212-enter-up .34s .07s ease both}
html[data-motion="1"].v212-ready .v21-shell>*:nth-child(3){animation:v212-enter-up .34s .11s ease both}
html[data-motion="1"].v212-ready .v21-shell>*:nth-child(4){animation:v212-enter-up .34s .15s ease both}
html[data-motion="1"].v212-ready .v211-login-shell{
    animation:v212-enter-up .45s ease both
}

@media(max-width:820px){
    .v21-top-actions>.v21-icon-button,
    .v21-top-actions>.v21-create-button{
        min-height:39px
    }

    .v21-more-modal{
        clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)
    }

    .v212-more-footer{
        padding-bottom:calc(17px + env(safe-area-inset-bottom))
    }
}

@media(max-width:560px){
    .v212-more-footer{
        align-items:stretch;
        flex-direction:column
    }
    .v212-more-footer form,
    .v212-logout-button{
        width:100%
    }
    .v212-logout-button{
        justify-content:center
    }
    .v212-login-mark{
        width:112px;
        height:112px
    }
    .v212-login-wordmark strong{
        font-size:24px
    }
}

@media(prefers-reduced-motion:reduce){
    html[data-motion="1"].v212-ready .v21-topbar,
    html[data-motion="1"].v212-ready .v21-shell>*,
    html[data-motion="1"].v212-ready .v211-login-shell{
        animation:none!important
    }
}