/* ============================================================
   C-GESTUS Planner 2.2.1 · Menu Elegante
   ============================================================ */

:root{
    --v221-blue:#1394d3;
    --v221-blue-deep:#0d6eba;
    --v221-ink:#16313e;
    --v221-muted:#71868f;
    --v221-line:rgba(99,138,158,.17);
    --v221-glass:rgba(255,255,255,.84);
    --v221-glass-strong:rgba(255,255,255,.95);
    --v221-shadow:0 18px 55px rgba(18,47,62,.14);
    --v221-shadow-soft:0 8px 26px rgba(18,47,62,.09)
}

/* ------------------------------------------------------------
   Topbar: um ponto de entrada discreto
   ------------------------------------------------------------ */
.v220-topbar{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:62px!important;
    gap:10px!important
}
.v220-brand{
    flex:0 0 auto!important;
    margin:0!important
}
.v220-menu-trigger{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:92px!important;
    min-height:40px!important;
    justify-self:auto!important;
    padding:0 14px!important;
    border-radius:12px!important;
    border:1px solid rgba(106,151,173,.20)!important;
    background:
        linear-gradient(150deg,rgba(255,255,255,.92),rgba(243,249,251,.72))!important;
    box-shadow:
        0 6px 18px rgba(20,56,73,.07),
        inset 0 1px 0 rgba(255,255,255,.92)!important;
    backdrop-filter:blur(16px) saturate(1.12);
    -webkit-backdrop-filter:blur(16px) saturate(1.12)
}
.v220-menu-trigger:hover{
    transform:translateY(-1px)!important;
    border-color:rgba(19,148,211,.32)!important;
    box-shadow:
        0 10px 26px rgba(20,56,73,.12),
        inset 0 1px 0 rgba(255,255,255,.95)!important
}
.v220-menu-trigger .apm-icon{
    width:18px!important;
    height:18px!important
}
.v220-top-actions{
    margin-left:auto!important
}

/* ------------------------------------------------------------
   Modal: menos caixa, mais continuidade com a aplicação
   ------------------------------------------------------------ */
.v220-hub-modal{
    width:min(760px,calc(100vw - 34px))!important;
    max-height:min(690px,calc(100vh - 42px))!important;
    border:1px solid rgba(106,148,169,.16)!important;
    border-radius:24px!important;
    background:rgba(249,252,253,.91)!important;
    box-shadow:
        0 30px 90px rgba(10,32,44,.20),
        0 2px 12px rgba(17,50,65,.08)!important;
    backdrop-filter:blur(28px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.18)!important;
    overflow:hidden!important;
    animation:v221-menu-in .22s cubic-bezier(.2,.75,.25,1)
}
@keyframes v221-menu-in{
    from{opacity:0;transform:translate(-50%,-48%) scale(.975)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.v220-hub-head{
    min-height:58px!important;
    padding:12px 15px!important;
    border-bottom:1px solid rgba(101,142,162,.13)!important;
    background:rgba(255,255,255,.48)!important
}
.v220-hub-head p{
    margin-bottom:1px!important;
    font-size:6.5px!important;
    letter-spacing:.16em!important
}
.v220-hub-head h2{
    font-size:18px!important;
    letter-spacing:-.025em!important
}
.v220-hub-head-actions button{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.68)!important
}
.v220-hub-body{
    padding:12px 15px!important;
    overflow:auto!important
}
.v220-hub-panel{
    min-height:0!important
}
.v220-panel-intro{
    margin:0 0 10px!important
}
.v220-panel-intro>span{
    font-size:15px!important
}
.v220-panel-intro p{
    margin-top:2px!important;
    font-size:7.5px!important
}

/* ------------------------------------------------------------
   Menu principal: constelação compacta no PC
   ------------------------------------------------------------ */
.v220-hub-home{
    display:grid;
    place-items:center
}
.v220-hub-orbit{
    position:relative!important;
    width:min(540px,100%)!important;
    height:340px!important;
    margin:0 auto!important;
    border-radius:28px!important;
    background:none!important
}
.v220-hub-orbit::before,
.v220-hub-orbit::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    pointer-events:none;
    border-radius:50%;
    transform:translate(-50%,-50%)
}
.v220-hub-orbit::before{
    width:250px;
    height:250px;
    border:1px solid rgba(33,151,211,.10)
}
.v220-hub-orbit::after{
    width:150px;
    height:150px;
    border:1px solid rgba(33,151,211,.13)
}
.v220-hub-center{
    left:50%!important;
    top:50%!important;
    width:74px!important;
    height:74px!important;
    border-radius:50%!important;
    background:
        radial-gradient(circle at 35% 28%,rgba(255,255,255,.33),transparent 25%),
        linear-gradient(145deg,#25ace4,#0b6fc2)!important;
    box-shadow:
        0 12px 28px rgba(10,111,188,.22),
        0 0 0 7px rgba(22,147,210,.055)!important
}
.v220-hub-center .apm-icon{
    width:21px!important;
    height:21px!important
}
.v220-hub-center span{
    font-size:6.5px!important
}
.v220-hub-node{
    width:118px!important;
    min-height:66px!important;
    grid-template-columns:26px 1fr!important;
    column-gap:7px!important;
    padding:9px 10px!important;
    border-radius:14px!important;
    border:1px solid rgba(103,145,165,.16)!important;
    background:rgba(255,255,255,.76)!important;
    box-shadow:
        0 8px 22px rgba(21,58,75,.07),
        inset 0 1px 0 rgba(255,255,255,.88)!important;
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px)
}
.v220-hub-node .apm-icon{
    width:22px!important;
    height:22px!important
}
.v220-hub-node strong{
    font-size:9px!important
}
.v220-hub-node small{
    font-size:6px!important;
    line-height:1.15!important
}
.v220-hub-node:hover{
    border-color:rgba(18,143,208,.30)!important;
    box-shadow:0 12px 30px rgba(21,58,75,.11)!important
}
.v220-node-create{
    top:10px!important
}
.v220-node-organize{
    left:18px!important;
    top:48%!important
}
.v220-node-apps{
    right:18px!important;
    top:48%!important
}
.v220-node-customize{
    left:100px!important;
    bottom:8px!important
}
.v220-node-system{
    right:100px!important;
    bottom:8px!important
}

.v220-hub-node:nth-of-type(1){animation:v221-node-in .20s .03s both}
.v220-hub-node:nth-of-type(2){animation:v221-node-in .20s .06s both}
.v220-hub-node:nth-of-type(3){animation:v221-node-in .20s .09s both}
.v220-hub-node:nth-of-type(4){animation:v221-node-in .20s .12s both}
.v220-hub-node:nth-of-type(5){animation:v221-node-in .20s .15s both}
@keyframes v221-node-in{
    from{opacity:0;filter:blur(2px)}
    to{opacity:1;filter:blur(0)}
}

/* ------------------------------------------------------------
   Criar: radial apenas no PC, menor e mais refinado
   ------------------------------------------------------------ */
.v220-create-ring{
    width:440px!important;
    height:330px!important;
    margin:0 auto!important;
    background:
        radial-gradient(circle at 50% 50%,transparent 0 74px,rgba(27,149,211,.10) 75px 76px,transparent 77px 126px,rgba(27,149,211,.06) 127px 128px,transparent 129px)!important
}
.v220-create-action{
    width:82px!important;
    height:82px!important;
    border-color:rgba(104,145,165,.18)!important;
    background:rgba(255,255,255,.80)!important;
    box-shadow:0 9px 24px rgba(22,59,76,.08)!important
}
.v220-create-action .apm-icon{
    width:23px!important;
    height:23px!important
}
.v220-create-action span{
    font-size:7.5px!important
}
.v220-create-center{
    width:68px!important;
    height:68px!important;
    box-shadow:0 11px 27px rgba(7,103,192,.22)!important
}
.v220-create-center .apm-icon{
    width:19px!important;
    height:19px!important
}
.action-task{top:0!important}
.action-event{right:36px!important;top:44px!important}
.action-finance{right:36px!important;bottom:44px!important}
.action-followup{bottom:0!important}
.action-project{left:36px!important;bottom:44px!important}
.action-routine{left:36px!important;top:44px!important}

/* ------------------------------------------------------------
   Grelhas: informação útil, sem ruído de URLs
   ------------------------------------------------------------ */
.v220-organize-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important
}
.v220-organize-grid>a,
.v220-feature-grid>a{
    min-height:64px!important;
    grid-template-columns:24px 1fr auto!important;
    gap:7px!important;
    padding:9px 10px!important;
    border-radius:11px!important;
    border-color:rgba(104,145,165,.15)!important;
    background:rgba(255,255,255,.64)!important
}
.v220-organize-grid .apm-icon,
.v220-feature-grid .apm-icon{
    width:20px!important;
    height:20px!important
}
.v220-organize-grid strong,
.v220-feature-grid strong{
    font-size:8px!important
}
.v220-organize-grid small{
    display:none!important
}
.v220-feature-grid small{
    font-size:6.3px!important
}
.v220-feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important
}
.v220-theme-inline{
    padding:7px!important;
    border-radius:11px!important
}

/* ------------------------------------------------------------
   Footer subtil e sempre disponível
   ------------------------------------------------------------ */
.v220-hub-footer{
    min-height:56px!important;
    padding:9px 15px!important;
    border-top:1px solid rgba(102,143,163,.12)!important;
    background:rgba(250,252,253,.88)!important;
    box-shadow:0 -8px 22px rgba(17,45,59,.035)!important
}
.v220-hub-footer>span strong{
    font-size:8px!important
}
.v220-hub-footer>span small{
    font-size:6px!important
}
.v220-hub-footer .v212-logout-button{
    min-height:35px!important;
    padding:0 12px!important;
    border-radius:10px!important
}

/* Definições */
.v221-menu-behaviour-note{
    display:grid;
    gap:2px;
    padding:10px;
    border:1px solid #dce7ea;
    border-radius:11px;
    background:#f8fbfc
}
.v221-menu-behaviour-note strong{
    font-size:8px
}
.v221-menu-behaviour-note small{
    color:#829299;
    font-size:6.8px;
    line-height:1.4
}

/* ------------------------------------------------------------
   Dark: grafite, não preto absoluto
   ------------------------------------------------------------ */
html[data-theme="dark"]{
    --v221-glass:rgba(44,55,61,.82);
    --v221-glass-strong:rgba(49,61,68,.94)
}
html[data-theme="dark"] .v220-menu-trigger{
    background:linear-gradient(150deg,rgba(61,74,81,.88),rgba(42,54,60,.75))!important;
    border-color:rgba(144,176,191,.16)!important;
    color:#edf4f7!important;
    box-shadow:0 7px 20px rgba(0,0,0,.18)!important
}
html[data-theme="dark"] .v220-hub-modal{
    background:rgba(38,48,54,.94)!important;
    border-color:rgba(145,176,190,.13)!important;
    box-shadow:0 30px 90px rgba(0,0,0,.42)!important
}
html[data-theme="dark"] .v220-hub-head,
html[data-theme="dark"] .v220-hub-footer{
    background:rgba(44,55,61,.76)!important
}
html[data-theme="dark"] .v220-hub-node,
html[data-theme="dark"] .v220-create-action,
html[data-theme="dark"] .v220-organize-grid>a,
html[data-theme="dark"] .v220-feature-grid>a{
    background:rgba(51,63,69,.76)!important;
    border-color:rgba(150,181,194,.12)!important;
    color:#edf4f6!important;
    box-shadow:0 9px 24px rgba(0,0,0,.16)!important
}
html[data-theme="dark"] .v220-hub-orbit::before,
html[data-theme="dark"] .v220-hub-orbit::after{
    border-color:rgba(52,168,223,.10)!important
}
html[data-theme="dark"] .v221-menu-behaviour-note{
    border-color:#46575f;
    background:#2c3a40;
    color:#edf4f6
}

/* ------------------------------------------------------------
   Telefone: Menu em cima, botão circular, sem dock gigante
   ------------------------------------------------------------ */
@media(max-width:820px){
    body:not([data-menu-mobile="classic"]){
        padding-bottom:0!important
    }
    .v220-mobile-menu-dock{
        display:none!important
    }
    .v220-topbar{
        min-height:58px!important;
        padding-left:max(10px,env(safe-area-inset-left))!important;
        padding-right:max(10px,env(safe-area-inset-right))!important;
        gap:6px!important
    }
    body:not([data-menu-mobile="classic"]) .v220-hub-trigger-desktop{
        display:inline-grid!important;
        place-items:center!important;
        width:36px!important;
        min-width:36px!important;
        height:36px!important;
        min-height:36px!important;
        padding:0!important;
        border-radius:50%!important;
        margin-left:2px!important
    }
    body:not([data-menu-mobile="classic"]) .v220-hub-trigger-desktop span{
        display:none!important
    }
    .v220-hub-trigger-desktop .apm-icon{
        width:18px!important;
        height:18px!important
    }
    .v220-brand{
        min-width:0!important;
        max-width:120px!important;
        gap:6px!important
    }
    .v220-brand img{
        width:32px!important;
        height:32px!important
    }
    .v220-brand .v220-wordmark{
        display:grid!important;
        min-width:0!important
    }
    .v220-wordmark strong{
        font-size:9px!important;
        letter-spacing:.08em!important;
        white-space:nowrap
    }
    .v220-wordmark small{
        display:block!important;
        margin-top:2px!important;
        font-size:5.5px!important;
        letter-spacing:.15em!important
    }
    .v220-top-actions{
        gap:2px!important
    }
    .v220-top-actions .v21-icon-button{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        border-radius:10px!important
    }
    .v220-top-actions .v21-icon-button .apm-icon{
        width:16px!important;
        height:16px!important
    }

    .v220-hub-modal{
        left:7px!important;
        right:7px!important;
        bottom:calc(7px + env(safe-area-inset-bottom))!important;
        top:auto!important;
        width:auto!important;
        max-height:min(82dvh,680px)!important;
        transform:none!important;
        border-radius:22px!important;
        animation:v221-sheet-in .20s cubic-bezier(.2,.76,.25,1)!important
    }
    @keyframes v221-sheet-in{
        from{opacity:0;transform:translateY(18px)}
        to{opacity:1;transform:translateY(0)}
    }
    .v220-hub-head{
        min-height:52px!important;
        padding:10px 12px!important
    }
    .v220-hub-head h2{
        font-size:16px!important
    }
    .v220-hub-head p{
        display:none!important
    }
    .v220-hub-body{
        padding:10px!important
    }

    /* O menu principal deixa de ser uma roda gigante no telefone. */
    .v220-hub-home{
        display:block!important
    }
    .v220-hub-orbit{
        width:100%!important;
        height:auto!important;
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:7px!important;
        padding:0!important;
        background:none!important
    }
    .v220-hub-orbit::before,
    .v220-hub-orbit::after,
    .v220-hub-center{
        display:none!important
    }
    .v220-hub-node{
        position:static!important;
        width:auto!important;
        min-height:58px!important;
        transform:none!important;
        grid-template-columns:23px 1fr!important;
        padding:8px 9px!important;
        border-radius:12px!important
    }
    .v220-hub-node:hover{
        transform:none!important
    }
    .v220-node-create{
        grid-column:1/-1!important;
        min-height:66px!important;
        border-color:rgba(20,149,211,.27)!important;
        background:
            linear-gradient(145deg,rgba(22,150,213,.085),rgba(255,255,255,.78))!important
    }
    .v220-node-create .apm-icon{
        color:#118bd0!important
    }
    .v220-hub-node .apm-icon{
        width:21px!important;
        height:21px!important
    }
    .v220-hub-node strong{
        font-size:8.5px!important
    }
    .v220-hub-node small{
        font-size:5.7px!important
    }

    /* Criar: 2x3, rápido de tocar, sem ocupar o ecrã todo. */
    .v220-create-ring{
        width:100%!important;
        height:auto!important;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        background:none!important
    }
    .v220-create-action{
        position:static!important;
        width:auto!important;
        height:72px!important;
        transform:none!important;
        border-radius:12px!important;
        display:grid!important;
        grid-template-columns:25px 1fr!important;
        place-items:initial!important;
        align-items:center!important;
        align-content:center!important;
        text-align:left!important;
        padding:9px 11px!important
    }
    .v220-create-action:hover{
        transform:none!important
    }
    .v220-create-center{
        display:none!important
    }
    .v220-create-action .apm-icon{
        width:22px!important;
        height:22px!important
    }
    .v220-create-action span{
        font-size:8px!important
    }

    .v220-organize-grid,
    .v220-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important
    }
    .v220-organize-grid>a,
    .v220-feature-grid>a{
        min-height:55px!important;
        padding:8px!important
    }
    .v220-feature-grid small{
        display:none!important
    }
    .v220-theme-inline{
        grid-template-columns:repeat(3,1fr)!important
    }
    .v220-hub-footer{
        min-height:52px!important;
        padding:8px 11px calc(8px + env(safe-area-inset-bottom))!important
    }
}

@media(max-width:440px){
    .v21-brand span.v220-wordmark{
        display:grid!important
    }
    .v220-brand{
        max-width:112px!important
    }
    .v220-wordmark strong{
        font-size:8.5px!important
    }
    .v220-top-actions .v21-icon-button{
        width:30px!important;
        height:30px!important;
        min-width:30px!important
    }
    .v220-organize-grid,
    .v220-feature-grid{
        grid-template-columns:1fr 1fr!important
    }
}

@media(max-width:370px){
    .v220-brand{
        max-width:100px!important
    }
    .v220-wordmark strong{
        font-size:7.8px!important
    }
    .v220-wordmark small{
        font-size:5px!important
    }
    .v220-top-actions .v21-icon-button{
        width:28px!important;
        height:28px!important;
        min-width:28px!important
    }
    body:not([data-menu-mobile="classic"]) .v220-hub-trigger-desktop{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important
    }
}

@media(prefers-reduced-motion:reduce){
    .v220-hub-modal,
    .v220-hub-node{
        animation:none!important
    }
}