/* Ecovip · Painel de sistemas — tela inicial no estilo da grade de apps do iCloud/iOS. */

.topo__usuario { font-weight: 700; font-size: 15px; color: var(--tinta); padding: 0 8px; }
.portal .topo__interno, .portal .conteudo { max-width: 980px; }
.portal .conteudo { padding-top: 34px; }

/* ---------- Boas-vindas ---------- */
.boas-vindas { text-align: center; }
.avatar {
    width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, #8CC63F 0%, var(--verde-esc) 100%);
    color: #fff; font: 600 34px/1 var(--fonte-titulo); letter-spacing: .04em;
    box-shadow: 0 0 0 4px #fff, 0 6px 18px rgba(31, 42, 23, .18);
}
.boas-vindas__titulo {
    margin: 0; font: 600 clamp(28px, 5vw, 38px)/1.15 var(--fonte-titulo); color: var(--tinta); letter-spacing: .01em;
}
.boas-vindas__sub { margin: 6px 0 0; color: var(--tinta-suave); }

/* ---------- Grade de apps ---------- */
.apps {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 42px;
    margin: 44px auto 24px; max-width: 760px;
}
.app {
    width: 128px; display: flex; flex-direction: column; align-items: center; gap: 12px;
    text-align: center; text-decoration: none; color: var(--tinta);
    -webkit-tap-highlight-color: transparent;
}
.app:hover { color: var(--tinta); }
.app__icone {
    width: 100px; height: 100px; border-radius: 22.5%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 22px rgba(31, 42, 23, .16), inset 0 1px 0 rgba(255, 255, 255, .38);
    transition: transform .16s ease, box-shadow .16s ease;
}
.app__icone svg {
    width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}
.app:hover .app__icone { transform: translateY(-3px) scale(1.04); box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 16px 28px rgba(31, 42, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .38); }
.app:active .app__icone { transform: scale(.95); }
.app:focus-visible { outline: none; }
.app:focus-visible .app__icone { outline: 3px solid var(--verde); outline-offset: 4px; }
.app__nome { font: 700 16px/1.25 var(--fonte); }

.app__icone--azul    { background: linear-gradient(160deg, #5AC8FA 0%, #0A7BFF 100%); }
.app__icone--roxo    { background: linear-gradient(160deg, #C79BFF 0%, #7B3FE4 100%); }
.app__icone--laranja { background: linear-gradient(160deg, #FFC15A 0%, #FF7A00 100%); }
.app__icone--verde   { background: linear-gradient(160deg, #8CC63F 0%, #427324 100%); }

@media (max-width: 520px) {
    .apps { gap: 28px 18px; margin-top: 34px; }
    .app { width: 104px; }
    .app__icone { width: 84px; height: 84px; }
    .app__icone svg { width: 42px; height: 42px; }
    .app__nome { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .app__icone { transition: none; }
}