/* =========================================================
   Sabiamente App UI
   Base visual institucional
   ========================================================= */

/* ============================
   TOKENS / THEME
   ============================ */
:root{
    --azul:#4A90E2;
    --verde:#6CCB8E;
    --amarelo:#F5C85C;
    --roxo:#A084E8;

    --bg:#eef2f7;
    --fg:#111827;
    --muted:#4b5563;
    --card:#f7f9fc;
    --card-strong:#ffffff;
    --border:#d8e0ea;
    --border-strong:#c6d1de;

    --danger:#dc2626;
    --danger-dark:#b91c1c;
    --success:#16a34a;

    --radius:16px;
    --radius-md:12px;
    --radius-sm:10px;
    --radius-lg:24px;

    --shadow:0 10px 28px rgba(17,24,39,.10);
    --shadow-sm:0 4px 14px rgba(17,24,39,.06);
    --shadow-lg:0 18px 50px rgba(17,24,39,.14);

    --brightness:1;
    --font-scale:1;
    --line-height:1.7;
    --letter-spacing:0;
    --motion:1;
}

/* ============================
   THEMES
   ============================ */
.theme-dark{
    --bg:#0b1020;
    --fg:#e8ecf2;
    --muted:#a8b3c7;
    --card:#121a2f;
    --card-strong:#18233f;
    --border:#1f2b4e;
    --border-strong:#2a3a69;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --shadow-sm:0 6px 18px rgba(0,0,0,.28);
    --shadow-lg:0 20px 60px rgba(0,0,0,.45);
}

.theme-contrast{
    --bg:#000;
    --fg:#fff;
    --muted:#ff0;
    --card:#000;
    --card-strong:#000;
    --border:#fff;
    --border-strong:#fff;
    --shadow:none;
    --shadow-sm:none;
    --shadow-lg:none;
}

/* ============================
   RESET / BASE
   ============================ */
*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

html,
body{
    width:100%;
}

body{
    margin:0;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--fg);
    filter:brightness(var(--brightness));
    font-size:calc(16px * var(--font-scale));
}

body,
input,
select,
textarea,
button{
    font-family:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

.font-title{
    font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

.font-body{
    font-family:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

img,
svg,
video,
canvas{
    max-width:100%;
    height:auto;
}

p,
li,
td,
th,
a,
span,
small{
    overflow-wrap:anywhere;
    word-break:break-word;
}

p{
    margin:0 0 1rem;
    line-height:var(--line-height);
    letter-spacing:var(--letter-spacing);
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0 0 .75rem;
    line-height:1.25;
    color:var(--fg);
    font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

ul,
ol{
    margin:.5rem 0 1rem;
    padding-left:1.25rem;
}

a{
    color:inherit;
    text-decoration:none;
}

a:hover{
    color:var(--azul);
}

.underline-links a{
    text-decoration:underline;
}

:focus-visible{
    outline:3px solid var(--azul);
    outline-offset:2px;
}

button,
.btn,
a,
input,
select,
textarea{
    touch-action:manipulation;
}

@media (prefers-reduced-motion: reduce){
    html{
        scroll-behavior:auto;
    }

    *{
        transition:none !important;
        animation:none !important;
    }
}

/* ============================
   HELPERS
   ============================ */
.w-full{
    width:100%;
}

.muted{
    color:var(--muted);
}

.mt-1{
    margin-top:.25rem;
}
.mt-2{
    margin-top:.5rem;
}
.mt-3{
    margin-top:1rem;
}
.mt-4{
    margin-top:1.5rem;
}
.mb-1{
    margin-bottom:.25rem;
}
.mb-2{
    margin-bottom:.5rem;
}
.mb-3{
    margin-bottom:1rem;
}
.mb-4{
    margin-bottom:1.5rem;
}

.row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.row--between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

/* ============================
   LAYOUT
   ============================ */
.container{
    width:min(1200px, 100%);
    margin-inline:auto;
    padding-inline:16px;
}

@media (min-width:640px){
    .container{
        padding-inline:24px;
    }
}

@media (min-width:1024px){
    .container{
        padding-inline:28px;
    }
}

.grid{
    display:grid;
    gap:16px;
}

.grid--shell{
    grid-template-columns:1fr;
    align-items:start;
}

@media (min-width:1024px){
    .grid--shell{
        grid-template-columns:280px 1fr;
    }
}

.app-layout{
    min-height:calc(100vh - 120px);
}

.app-main{
    padding:16px 0 28px;
    background:transparent;
}

@media (min-width:768px){
    .app-main{
        padding:18px 0 32px;
    }
}

.app-sidebar,
.app-content{
    min-width:0;
}

/* ============================
   HEADER
   ============================ */
.app-header{
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(10px);
    background:rgba(247,249,252,.88);
}

.theme-dark .app-header{
    background:rgba(11,16,32,.85);
}

.theme-contrast .app-header{
    background:#000;
}

@supports (background: color-mix(in srgb, #fff 50%, transparent)){
    .app-header{
        background:color-mix(in srgb, var(--card) 88%, transparent);
    }
}

.app-header__inner{
    padding:12px 16px;
}

.app-header__actions{
    gap:8px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.brand a{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.brand img,
.brand-logo{
    height:36px;
    width:auto;
}

.brand span{
    font-size:18px;
    font-weight:700;
    letter-spacing:-0.02em;
    white-space:nowrap;
    color:var(--azul);
}

@media (max-width:768px){
    .row--between{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }
}

@media (max-width:420px){
    .brand span{
        font-size:16px;
    }

    .brand img,
    .brand-logo{
        height:30px;
    }
}

.app-header nav.row{
    justify-content:flex-end;
    min-width:0;
}

@media (max-width:768px){
    .app-header nav.row{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        justify-content:flex-start;
        gap:8px;
    }

    .app-header nav.row .muted{
        display:none;
    }

    .app-header nav.row .btn{
        width:100%;
        min-height:44px;
        padding:12px;
        justify-content:center;
        white-space:normal;
    }
}

@media (max-width:420px){
    .app-header nav.row{
        grid-template-columns:1fr;
    }
}

/* ============================
   SIDEBAR
   ============================ */
.sidebar{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:var(--shadow);
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    color:inherit;
    transition:background-color .2s ease, color .2s ease;
}

.sidebar a:hover,
.sidebar a:focus-visible{
    background:rgba(74,144,226,.10);
    color:var(--fg);
}

.section-title{
    margin:0;
    padding:12px 14px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
}

.sidebar .section-title{
    border-top:1px solid var(--border);
    background:rgba(238,242,247,.9);
}

.theme-dark .sidebar .section-title{
    background:rgba(255,255,255,.04);
}

@media (max-width:1023px){
    .sidebar{
        display:grid;
    }

    .sidebar a{
        padding:12px;
    }

    .grid--shell > aside{
        order:0;
    }

    .grid--shell > section{
        order:1;
    }
}

/* ============================
   CARDS
   ============================ */
.card{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:var(--shadow);
}

.card--outline-azul{
    border:2px solid var(--azul);
}

.card-header{
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--border);
}

.card-title{
    margin:0;
    font-size:1.05rem;
    font-weight:700;
    color:var(--fg);
}

.card-body,
.card__body{
    padding:1.25rem;
}

/* ============================
   BUTTONS
   ============================ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    max-width:100%;
    min-height:42px;
    padding:10px 14px;
    border:1px solid var(--border-strong);
    border-radius:12px;
    background:rgba(255,255,255,.65);
    color:inherit;
    line-height:1.1;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 1px 0 rgba(17,24,39,.04);
    transition:background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.btn:hover{
    background:rgba(255,255,255,.85);
    color:inherit;
}

.btn:active{
    transform:translateY(1px);
}

.theme-dark .btn{
    background:rgba(255,255,255,.06);
}

.theme-dark .btn:hover{
    background:rgba(255,255,255,.10);
}

.btn--primary,
.btn-primary{
    background:var(--azul);
    border-color:rgba(0,0,0,.10);
    color:#fff;
}

.btn--primary:hover,
.btn-primary:hover{
    color:#fff;
    opacity:.92;
}

.btn--secondary,
.btn-secondary{
    background:var(--card-strong);
    border-color:var(--border-strong);
    color:#344054;
}

.theme-dark .btn--secondary,
.theme-dark .btn-secondary{
    color:var(--fg);
    background:rgba(255,255,255,.06);
}

.btn--success{
    background:var(--verde);
    border-color:rgba(0,0,0,.10);
    color:#fff;
}

.btn--success:hover{
    color:#fff;
    opacity:.92;
}

.btn--purple{
    background:var(--roxo);
    border-color:rgba(0,0,0,.10);
    color:#fff;
}

.btn--purple:hover{
    color:#fff;
    opacity:.92;
}

.btn--ghost{
    background:transparent;
    box-shadow:none;
}

.btn--danger{
    background:var(--danger);
    border-color:var(--danger-dark);
    color:#fff;
}

.btn--danger:hover{
    color:#fff;
    opacity:.92;
}

/* ============================
   FORMS
   ============================ */
.field{
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
}

.label{
    font-size:14px;
    color:var(--muted);
}

.input,
select,
textarea{
    width:100%;
    max-width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--border-strong);
    border-radius:12px;
    background:rgba(255,255,255,.72);
    color:inherit;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

textarea{
    min-height:110px;
    resize:vertical;
}

.input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    border-color:var(--azul);
    box-shadow:0 0 0 4px rgba(74,144,226,.14);
}

.theme-dark .input,
.theme-dark select,
.theme-dark textarea{
    background:rgba(255,255,255,.06);
}

/* ============================
   ALERTS
   ============================ */
.alert{
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(245,200,92,.18);
}

.alert--ok{
    background:rgba(108,203,142,.18);
}

.alert--error{
    background:rgba(239,68,68,.14);
}

.alert ul{
    margin:0;
    padding-left:18px;
}

.alert li{
    margin:4px 0;
}

/* ============================
   TABLES
   ============================ */
.table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
    box-shadow:var(--shadow);
}

table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
}

@media (max-width:1024px){
    table{
        min-width:640px;
    }
}

@media (max-width:640px){
    table{
        min-width:520px;
    }
}

th,
td{
    padding:12px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
}

th{
    position:sticky;
    top:0;
    z-index:1;
    font-size:13px;
    color:var(--muted);
    background:rgba(238,242,247,.95);
}

tr:hover td{
    background:rgba(74,144,226,.055);
}

@media (max-width:640px){
    .table--stack{
        min-width:0 !important;
    }

    .table--stack thead{
        display:none;
    }

    .table--stack tbody tr{
        display:block;
        overflow:hidden;
        margin:10px 0;
        border:1px solid var(--border);
        border-radius:14px;
        background:var(--card);
        box-shadow:var(--shadow-sm);
    }

    .table--stack tbody td{
        display:flex;
        justify-content:space-between;
        gap:10px;
        padding:10px 12px;
        border-bottom:1px solid var(--border);
    }

    .table--stack tbody td:last-child{
        border-bottom:0;
    }

    .table--stack tbody td::before{
        content:attr(data-label);
        flex:1;
        font-weight:700;
        color:var(--muted);
    }
}

/* ============================
   BADGES
   ============================ */
.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:12px;
    background:rgba(238,242,247,.9);
}

.badge--azul{
    color:var(--azul);
    border-color:rgba(74,144,226,.35);
    background:rgba(74,144,226,.10);
}

.badge--verde{
    color:#1f7a4a;
    border-color:rgba(108,203,142,.35);
    background:rgba(108,203,142,.14);
}

.badge--amarelo{
    color:#7a5a00;
    border-color:rgba(245,200,92,.45);
    background:rgba(245,200,92,.20);
}

.badge--roxo{
    color:#5a3fb5;
    border-color:rgba(160,132,232,.40);
    background:rgba(160,132,232,.14);

.badge--critico{
    color:#9f1239;
    border-color:rgba(220,38,38,.40);
    background:rgba(220,38,38,.14);
}

.badge--alerta{
    color:#9a3412;
    border-color:rgba(234,88,12,.38);
    background:rgba(249,115,22,.16);
}

.badge--positivo{
    color:#166534;
    border-color:rgba(22,163,74,.30);
    background:rgba(34,197,94,.14);
}

.badge--info{
    color:#1d4ed8;
    border-color:rgba(37,99,235,.30);
    background:rgba(59,130,246,.12);
}

.kpi-card{
    display:block;
    border:1px solid rgba(78,142,247,0.16);
    border-radius:16px;
    background:rgba(255,255,255,0.96);
    box-shadow:var(--shadow-sm);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow);
}
.kpi-card small{
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
}
.kpi-card--critical{
    border-color:rgba(220,38,38,.32);
    background:linear-gradient(180deg, rgba(254,242,242,.98), rgba(255,255,255,.98));
}
.kpi-card--critical strong, .kpi-card--critical small{color:#b91c1c;}
.kpi-card--excellent{
    border-color:rgba(37,99,235,.34);
    background:linear-gradient(180deg, rgba(219,234,254,.98), rgba(255,255,255,.98));
}
.kpi-card--excellent strong, .kpi-card--excellent small{color:#1d4ed8;}
.kpi-card--good{
    border-color:rgba(34,197,94,.30);
    background:linear-gradient(180deg, rgba(240,253,244,.98), rgba(255,255,255,.98));
}
.kpi-card--good strong, .kpi-card--good small{color:#15803d;}
.kpi-card--warning{
    border-color:rgba(249,115,22,.30);
    background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(255,255,255,.98));
}
.kpi-card--warning strong, .kpi-card--warning small{color:#c2410c;}
.kpi-card--positive{
    border-color:rgba(34,197,94,.28);
    background:linear-gradient(180deg, rgba(240,253,244,.98), rgba(255,255,255,.98));
}
.kpi-card--positive strong, .kpi-card--positive small{color:#15803d;}
.kpi-card--info{
    border-color:rgba(59,130,246,.24);
    background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(255,255,255,.98));
}
.kpi-card--info strong, .kpi-card--info small{color:#1d4ed8;}

.dashboard-header-card{
    border:1px solid rgba(78,142,247,0.18);
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96));
}
.dashboard-summary-panel{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:12px;
}
.dashboard-summary-panel__item{
    padding:16px;
    border-radius:14px;
    border:1px solid rgba(78,142,247,0.16);
    background:rgba(255,255,255,0.84);
    box-shadow:var(--shadow-sm);
}
.dashboard-summary-panel__item--primary{
    background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(255,255,255,.98));
    border-color:rgba(37,99,235,.22);
}
.dashboard-summary-panel__item--critical{
    background:linear-gradient(180deg, rgba(254,242,242,.98), rgba(255,255,255,.98));
    border-color:rgba(220,38,38,.22);
}
.dashboard-summary-panel__item--warning{
    background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(255,255,255,.98));
    border-color:rgba(249,115,22,.22);
}
.dashboard-summary-panel__item--good{
    background:linear-gradient(180deg, rgba(240,253,244,.98), rgba(255,255,255,.98));
    border-color:rgba(34,197,94,.22);
}
.dashboard-summary-panel__label{
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text-soft);
    font-weight:700;
    margin-bottom:8px;
}
.dashboard-summary-panel__text{
    font-size:1.05rem;
    font-weight:700;
    color:var(--primary-dark);
    line-height:1.55;
}
.dashboard-summary-list{display:grid;gap:8px;font-weight:700;color:var(--text);line-height:1.5;}
.dashboard-detail-card{
    border:1px solid rgba(78,142,247,0.18);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
}
.kpi-card .muted{font-weight:700;color:inherit;opacity:.92;}
.kpi-card .card__body{position:relative;overflow:hidden;}
.kpi-card .card__body::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:currentColor;
    opacity:.16;
}
.kpi-card strong{font-size:2rem;line-height:1;}
.kpi-card small{display:block;margin-top:8px;}

.table-row--critical td{background:rgba(254,242,242,.72);}
.table-row--warning td{background:rgba(255,247,237,.76);}
.table-row--positive td{background:rgba(240,253,244,.68);}

}

/* ============================
   PAGE / PERFIL DO ALUNO
   ============================ */
.page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
    margin-bottom:1.5rem;
}

.page-title{
    margin:0;
    font-size:1.6rem;
    font-weight:700;
}

.page-subtitle{
    margin:.35rem 0 0;
    color:var(--muted);
}

.perfil-aluno,
.perfil-page{
    display:grid;
    gap:1.25rem;
}

.perfil-hero-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.perfil-nome{
    font-size:1.5rem;
    font-weight:700;
    color:var(--fg);
}

.perfil-meta{
    margin-top:.35rem;
    font-size:.95rem;
    color:var(--muted);
}

.perfil-acoes{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}

.perfil-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin:.25rem 0 .5rem;
}

.perfil-tab{
    display:inline-flex;
    align-items:center;
    padding:.7rem 1rem;
    border:1px solid var(--border-strong);
    border-radius:10px;
    background:var(--card-strong);
    color:#344054;
    font-weight:600;
    transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}

.perfil-tab:hover{
    color:inherit;
    background:rgba(74,144,226,.06);
}

.perfil-tab.active{
    color:#1d4ed8;
    border-color:#98a2b3;
    background:#eef4ff;
}

.theme-dark .perfil-tab{
    color:var(--fg);
    background:rgba(255,255,255,.06);
}

.theme-dark .perfil-tab.active{
    background:rgba(74,144,226,.18);
    border-color:rgba(74,144,226,.45);
    color:#8dbdff;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1rem;
}

.info-item{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card-strong);
}

.info-label{
    font-size:.85rem;
    color:var(--muted);
}

.info-value{
    font-size:1rem;
    font-weight:600;
    color:var(--fg);
}

.atalhos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:1rem;
}

.atalho-card{
    display:flex;
    flex-direction:column;
    gap:.45rem;
    padding:1rem;
    border:1px solid var(--border-strong);
    border-radius:12px;
    background:var(--card-strong);
    color:inherit;
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.atalho-card:hover{
    transform:translateY(-1px);
    color:inherit;
    border-color:#84adff;
    box-shadow:var(--shadow-sm);
}

.atalho-titulo{
    font-weight:700;
    color:var(--fg);
}

.atalho-desc{
    font-size:.92rem;
    color:var(--muted);
}

.empty-state{
    margin-top:1rem;
}

.empty-note{
    padding:1rem;
    border:1px dashed var(--border-strong);
    border-radius:12px;
    background:#f8fafc;
    color:var(--muted);
}

.theme-dark .empty-note{
    background:rgba(255,255,255,.03);
}

.timeline{
    display:grid;
    gap:1rem;
}

.timeline-item{
    padding:1rem;
    border-left:4px solid var(--border-strong);
    border-radius:8px;
    background:var(--card-strong);
}

.timeline-title{
    margin-bottom:.3rem;
    font-weight:700;
    color:var(--fg);
}

.timeline-desc{
    color:var(--muted);
}

/* ============================
   FOOTER
   ============================ */
.app-footer,
footer.container{
    padding:12px 16px 28px;
}

/* ============================
   RESPONSIVO FINAL
   ============================ */
@media (max-width:768px){
    .page-header{
        flex-direction:column;
        align-items:stretch;
    }

    .perfil-acoes{
        width:100%;
    }

    .perfil-acoes .btn{
        flex:1 1 220px;
    }
}
.perfil-layout{
    display:grid;
    gap:1rem;
}

.perfil-hero{
    overflow:hidden;
}

.perfil-hero-grid{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}

.perfil-identidade{
    display:flex;
    align-items:center;
    gap:1rem;
    min-width:0;
}

.perfil-avatar{
    width:56px;
    height:56px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(74,144,226,.12);
    color:var(--azul);
    font-weight:700;
    font-size:1.25rem;
    flex:0 0 56px;
}

.perfil-nome{
    margin:0;
    font-size:1.4rem;
    font-weight:700;
    color:var(--fg);
    line-height:1.2;
    text-transform:capitalize;
}

.perfil-meta{
    margin-top:.25rem;
    font-size:.95rem;
    color:var(--muted);
}

.perfil-acoes{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}

.perfil-nav .card-body--sm{
    padding:.85rem 1rem;
}

.perfil-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

.perfil-tab{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:.7rem 1rem;
    border:1px solid var(--border-strong);
    border-radius:999px;
    background:var(--card-strong);
    color:#344054;
    font-weight:600;
    transition:all .2s ease;
}

.perfil-tab:hover{
    background:rgba(74,144,226,.08);
    border-color:rgba(74,144,226,.35);
    color:var(--fg);
}

.perfil-tab.active{
    background:var(--azul);
    border-color:var(--azul);
    color:#fff;
}

.perfil-section{
    display:grid;
    gap:1rem;
}

.section-subtitle{
    margin:0;
    font-size:1rem;
    font-weight:700;
    color:var(--fg);
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1rem;
}

.info-item{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card-strong);
}

.info-label{
    font-size:.85rem;
    color:var(--muted);
}

.info-value{
    font-size:1rem;
    font-weight:600;
    color:var(--fg);
}

.atalhos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:1rem;
}

.atalho-card{
    display:flex;
    flex-direction:column;
    gap:.45rem;
    padding:1rem;
    border:1px solid var(--border-strong);
    border-radius:14px;
    background:var(--card-strong);
    color:inherit;
    transition:all .2s ease;
}

.atalho-card:hover{
    transform:translateY(-1px);
    border-color:rgba(74,144,226,.4);
    box-shadow:var(--shadow-sm);
    color:inherit;
}

.atalho-titulo{
    font-weight:700;
    color:var(--fg);
}

.atalho-desc{
    font-size:.93rem;
    color:var(--muted);
}

.timeline{
    display:grid;
    gap:1rem;
}

.timeline-item{
    padding:1rem 1rem 1rem 1.25rem;
    border-left:4px solid var(--azul);
    border-radius:10px;
    background:var(--card-strong);
}

.timeline-title{
    margin-bottom:.3rem;
    font-weight:700;
    color:var(--fg);
}

.timeline-desc{
    color:var(--muted);
}

@media (max-width:768px){
    .perfil-hero-grid{
        align-items:flex-start;
    }

    .perfil-identidade{
        width:100%;
    }

    .perfil-acoes{
        width:100%;
    }

    .perfil-acoes .btn{
        flex:1 1 100%;
    }

    .perfil-tabs{
        gap:.5rem;
    }

    .perfil-tab{
        flex:1 1 calc(50% - .5rem);
        text-align:center;
    }
}

@media (max-width:480px){
    .perfil-tab{
        flex:1 1 100%;
    }
}
.questionario-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1rem;
}

.form-actions{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}

@media (max-width:768px){
    .form-actions .btn{
        flex:1 1 100%;
    }
}
.label-help {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
}

.help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    cursor: help;
    border: 1px solid #94a3b8;
    color: #334155;
    background: #f8fafc;
    line-height: 1;
}


/* ===== Ergonomia v4 ===== */
:root{
    --azul:#5f8fdc;
    --azul-escuro:#0a1f52;
    --dourado:#f1c85b;
}
body,
input,
select,
textarea,
button{
    font-family:Inter, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.font-title,
h1,h2,h3,h4,h5,h6{
    font-family:Inter, "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body{letter-spacing:-.005em;}
.container{width:min(1440px, 100%);}
.app-layout{padding-bottom:24px;}
.grid--shell{grid-template-columns:300px 1fr; gap:22px;}
.app-header{background:linear-gradient(90deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card-strong) 90%, transparent));}
.app-header__inner{padding:14px 18px;}
.app-header__actions{gap:10px; justify-content:flex-end;}
.brand span{font-size:1.85rem; font-weight:800; letter-spacing:-.035em; color:var(--fg);}
.brand-logo{height:46px;}
.sidebar-toggle{min-width:114px; font-weight:700;}
.btn{border-radius:14px; padding:11px 16px; font-weight:700; box-shadow:0 6px 18px rgba(17,24,39,.08);}
.btn--primary,.btn-primary{background:linear-gradient(135deg, var(--azul), #7ca4ea); box-shadow:0 10px 24px rgba(95,143,220,.28);}
.btn--secondary,.btn-secondary{background:color-mix(in srgb, var(--card-strong) 94%, var(--azul) 6%); color:var(--fg);}
.card{border-radius:22px; box-shadow:0 18px 42px rgba(15,23,42,.08);}
.card-body,.card__body{padding:1.35rem 1.45rem;}
.card--inner{border-radius:18px; background:color-mix(in srgb, var(--card-strong) 92%, var(--azul) 8%); box-shadow:none;}
.card-body--compact{padding:1rem 1.1rem;}
.page-title{font-size:clamp(2rem, 3vw, 3rem); font-weight:800; letter-spacing:-.04em;}
.page-subtitle{font-size:1rem; max-width:60ch;}
.sidebar{position:sticky; top:98px; border-radius:24px;}
.sidebar a{min-height:52px; border-radius:14px; margin:6px 10px; padding:14px 16px; font-size:1rem; font-weight:700;}
.sidebar a:hover,.sidebar a:focus-visible{background:color-mix(in srgb, var(--azul) 16%, var(--card-strong)); box-shadow:inset 0 0 0 1px rgba(95,143,220,.22);}
.sidebar .section-title{padding:16px 18px 8px; background:transparent; border-top:1px solid var(--border);}
.theme-dark .sidebar .section-title{background:transparent;}
.theme-dark .sidebar a:hover,.theme-dark .sidebar a:focus-visible{background:rgba(255,255,255,.08);}
.perfil-hero,.perfil-nav{border-radius:24px;}
.perfil-avatar{width:68px; height:68px; flex-basis:68px; font-size:1.5rem; background:linear-gradient(135deg, rgba(95,143,220,.22), rgba(241,200,91,.18)); color:var(--azul-escuro);}
.theme-dark .perfil-avatar{color:#fff;}
.perfil-nome{font-size:clamp(1.6rem,2.2vw,2.2rem); font-weight:800; letter-spacing:-.04em;}
.perfil-meta{font-size:1rem;}
.perfil-acoes .btn{min-height:48px;}
.perfil-tabs{gap:.75rem;}
.perfil-tab{min-height:46px; padding:.8rem 1.15rem; border-radius:999px; font-weight:700; box-shadow:0 6px 18px rgba(15,23,42,.05);}
.perfil-tab.active{background:linear-gradient(135deg, color-mix(in srgb, var(--azul) 15%, var(--card-strong)), color-mix(in srgb, var(--dourado) 10%, var(--card-strong))); border-color:rgba(95,143,220,.45); color:var(--azul-escuro);}
.theme-dark .perfil-tab.active{color:#fff; background:linear-gradient(135deg, rgba(95,143,220,.28), rgba(241,200,91,.16));}
.perfil-conteudo{display:grid; gap:1rem;}
.resumo-stack{display:grid; gap:1rem;}
.resumo-bloco{overflow:visible;}
.resumo-cabecalho{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem;}
.section-title--card{padding:0; margin:0; font-size:1.45rem; letter-spacing:-.03em; color:var(--fg); text-transform:none;}
.resumo-apoio{margin:0; color:var(--muted); font-size:.98rem;}
.info-grid--compacta{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem;}
.info-item{gap:.45rem; padding:1rem 1.05rem; border-radius:18px; background:linear-gradient(180deg, color-mix(in srgb, var(--card-strong) 94%, white 6%), color-mix(in srgb, var(--card) 96%, var(--azul) 4%)); box-shadow:0 8px 20px rgba(15,23,42,.05);}
.theme-dark .info-item{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));}
.info-item--destacado,.info-item--status{border-color:rgba(95,143,220,.35);}
.info-item--larger{grid-column:span 2;}
.info-item--full{grid-column:1/-1;}
.info-label{font-size:.8rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;}
.info-value{font-size:1.05rem; line-height:1.5; font-weight:700;}
.resumo-grid-apoio{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem;}
.lista-bloco{display:grid; gap:.65rem; margin:.85rem 0 0; padding-left:1.15rem;}
.lista-bloco li{line-height:1.6;}
.lista-bloco--colunas{grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); padding-left:1rem;}
.subsection-title{margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.02em;}
body.sidebar-collapsed .grid--shell{grid-template-columns:1fr;}
body.sidebar-collapsed .app-sidebar{display:none;}
body.sidebar-collapsed .app-content{grid-column:1/-1;}
@media (max-width:1180px){
    .grid--shell{grid-template-columns:1fr;}
    .app-sidebar{display:none; position:fixed; top:84px; left:16px; right:16px; z-index:60; max-height:calc(100vh - 110px); overflow:auto;}
    body.sidebar-open .app-sidebar{display:block;}
    .resumo-grid-apoio{grid-template-columns:1fr;}
}
@media (max-width:768px){
    .brand span{font-size:1.4rem;}
    .brand-logo{height:40px;}
    .app-header nav.row{grid-template-columns:repeat(2, minmax(0,1fr));}
    .sidebar-toggle{min-width:0;}
    .info-item--larger,.info-item--full{grid-column:auto;}
    .perfil-tabs{overflow:auto; flex-wrap:nowrap; padding-bottom:.25rem;}
    .perfil-tab{white-space:nowrap;}
}


/* ===== Barra superior e acessibilidade combinadas ===== */
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:12px;top:12px;z-index:200;padding:10px 14px;border-radius:12px;background:var(--card-strong);border:1px solid var(--border-strong)}
.sabiamente-body{filter:brightness(var(--brightness));}
.topbar{gap:16px}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.toolbar-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb, var(--card) 88%, transparent);box-shadow:var(--shadow-sm)}
.btn--toolbar{min-height:40px;padding:9px 14px;border-radius:999px;background:transparent;border-color:transparent;box-shadow:none;font-weight:700}
.btn--toolbar:hover,.btn--toolbar:focus-visible{background:rgba(74,144,226,.12);border-color:rgba(74,144,226,.22)}
.btn--toolbar.is-active{background:linear-gradient(180deg, color-mix(in srgb, var(--azul) 82%, white 18%), color-mix(in srgb, var(--azul) 64%, white 36%));border-color:rgba(44,94,164,.38);color:#fff;box-shadow:0 10px 24px rgba(74,144,226,.20)}
.theme-contrast .btn--toolbar.is-active{background:#fff;color:#000;border-color:#fff;box-shadow:none}
.btn--menu{min-height:42px;padding-inline:16px}
.shell-frame{padding-top:10px}
.surface-bar{height:8px;width:min(300px,100%);margin:0 0 18px;border-radius:999px;background:linear-gradient(90deg,var(--amarelo),color-mix(in srgb, var(--azul) 80%, white 20%),var(--roxo));box-shadow:var(--shadow-sm)}
.sidebar-panel{position:sticky;top:96px;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,var(--card) 0%, var(--card-strong) 100%);box-shadow:var(--shadow)}
.sidebar-panel__header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--border)}
.sidebar-eyebrow{margin-bottom:6px;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.sidebar{border:0;border-radius:0;background:transparent;box-shadow:none}
.sidebar .section-title{padding:16px 18px 8px;border-top:1px solid var(--border);background:transparent}
.sidebar a{display:block;margin:0 12px 4px;padding:12px 14px;border-radius:14px;border:1px solid transparent;font-weight:700}
.sidebar a:hover,.sidebar a:focus-visible{background:rgba(74,144,226,.12);border-color:rgba(74,144,226,.20)}
.sidebar-logout{padding:14px}
.app-footer{padding-top:8px}
@media (max-width:1180px){
  .header-tools{justify-content:flex-start}
  .toolbar-group{width:100%;justify-content:flex-start;overflow:auto hidden;scrollbar-width:thin}
  .sidebar-panel{position:static}
}
@media (max-width:768px){
  .topbar{align-items:stretch}
  .header-tools{width:100%}
  .btn--menu{width:100%}
}

.dashboard-grid-cards{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
}
.dashboard-grid-two{
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:16px;
}
.dashboard-kpi{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.dashboard-kpi strong{
    font-size:2rem;
    line-height:1;
}
.dashboard-bars{
    display:grid;
    gap:12px;
}
.dashboard-bar-row{
    display:grid;
    grid-template-columns:minmax(120px, 1.4fr) minmax(120px, 4fr) 52px;
    gap:10px;
    align-items:center;
}
.dashboard-bar-label,
.dashboard-bar-value{
    font-size:.95rem;
}
.dashboard-bar-track{
    width:100%;
    height:12px;
    border-radius:999px;
    background:color-mix(in srgb, var(--border) 75%, #fff 25%);
    overflow:hidden;
}
.dashboard-bar-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--azul), var(--roxo));
}
@media (max-width: 640px){
    .dashboard-bar-row{
        grid-template-columns:1fr;
    }
}

/* ===== Identidade visual integrada com a landpage ===== */
:root{
    --primary:#4e8ef7;
    --primary-dark:#0d1b39;
    --primary-soft:#eef5ff;
    --secondary:#61c98f;
    --accent:#f1c95f;
    --surface:#f7fbff;
    --surface-alt:#eef4fb;
    --text:#163042;
    --text-soft:#567083;
    --line:#d9e5f0;
    --shadow-soft:0 18px 40px rgba(14,31,63,0.08);
    --shadow-card:0 22px 48px rgba(14,31,63,0.10);
}
body{
    background:
        radial-gradient(circle at top left, rgba(241,201,95,0.20), transparent 24%),
        radial-gradient(circle at top right, rgba(78,142,247,0.12), transparent 30%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
    color:var(--text);
}
.theme-dark body,
.theme-dark{
    --text:#edf3fb;
    --text-soft:#b7c4d7;
    --surface:#10192f;
    --surface-alt:#16233f;
    --line:#233556;
}
.app-topline{height:6px;background:linear-gradient(90deg, #f1c95f 0%, #61c98f 35%, #4e8ef7 70%, #0d1b39 100%)}
.brand-link{display:flex;align-items:center;gap:12px}
.brand-tagline{display:block;max-width:38ch;color:var(--text-soft);font-size:.86rem;font-weight:500;line-height:1.4}
.app-intro-banner{margin:0 0 18px;border-radius:32px;background:linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(238,245,255,0.96) 58%, rgba(241,201,95,0.16) 100%);border-color:rgba(78,142,247,0.16);box-shadow:var(--shadow-card)}
.card--hero-soft{overflow:hidden;position:relative}
.card--hero-soft:before{content:"";position:absolute;inset:auto -60px -80px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(78,142,247,0.18), transparent 70%)}
.app-intro-banner__body{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(78,142,247,0.10);color:var(--primary-dark);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.hero-mini-title{font-size:clamp(1.4rem, 2vw, 2rem);letter-spacing:-.04em;margin-bottom:10px}
.hero-mini-points{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.no-margin{margin:0}
.app-content{display:grid;gap:16px}
.page-actions{margin-bottom:0}
.app-footer{padding:20px 16px 30px}
.app-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;padding:22px 24px;border:1px solid rgba(78,142,247,0.16);border-radius:28px;background:linear-gradient(135deg, rgba(255,255,255,0.94), rgba(238,245,255,0.98));box-shadow:var(--shadow-soft)}
.footer-brand-line{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.footer-logo{width:42px;height:42px;object-fit:contain}
.footer-title{font-weight:800;font-family:Inter, sans-serif;margin-bottom:8px;color:var(--primary-dark)}
.footer-copy{display:block;padding:14px 4px 0;color:var(--text-soft)}

/* Páginas públicas */
.public-shell{padding:10px 0 26px}
.public-shell__grid{display:grid;grid-template-columns:1.1fr .95fr;gap:22px;align-items:stretch}
.card--hero{border-radius:32px;background:linear-gradient(135deg, #0d1b39 0%, #14306c 52%, #1d4fa0 100%);color:#fff;border-color:rgba(13,27,57,0.2);box-shadow:0 30px 70px rgba(13,27,57,0.22)}
.public-hero-card__body{display:grid;gap:20px;padding:34px}
.public-title{font-size:clamp(2rem, 4vw, 3.5rem);line-height:1.02;letter-spacing:-.05em;margin:0}
.public-text{font-size:1.04rem;color:rgba(255,255,255,0.86);max-width:54ch;margin:0}
.public-feature-list{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.public-feature-item{padding:18px;border-radius:20px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(10px)}
.public-feature-item strong{display:block;margin-bottom:8px;font-size:1rem}
.public-feature-item span{display:block;color:rgba(255,255,255,0.82);font-size:.94rem;line-height:1.5}
.public-login-card{border-radius:30px;background:linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(244,249,255,0.98) 100%);border-color:rgba(78,142,247,0.18)}
.public-login-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.public-login-logo{width:72px;height:72px;object-fit:contain}
.public-form{display:grid;gap:14px}
.public-form__actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.public-submit{min-width:160px}
.public-note{padding:14px 16px;border-radius:16px;background:rgba(241,201,95,0.18);border:1px solid rgba(241,201,95,0.35);font-size:.94rem;color:var(--text);margin-top:4px}
.help{font-size:.84rem;color:var(--text-soft)}
.text-sm{font-size:.9rem}

/* Ajustes refinados para leitura e operação */
.app-header{border-bottom:1px solid rgba(78,142,247,0.12);box-shadow:0 10px 30px rgba(13,27,57,0.06)}
.toolbar-group{background:rgba(255,255,255,0.78);border-color:rgba(78,142,247,0.14)}
.sidebar-panel{border-color:rgba(78,142,247,0.14);box-shadow:var(--shadow-card)}
.sidebar a{position:relative}
.sidebar a.is-current{background:linear-gradient(135deg, rgba(78,142,247,0.14), rgba(97,201,143,0.12));border-color:rgba(78,142,247,0.24);color:var(--primary-dark)}
.sidebar a.is-current:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:999px;background:linear-gradient(180deg, #4e8ef7, #61c98f)}
.table-wrap,.card,.sidebar-panel,.app-footer__grid,.public-login-card{backdrop-filter:blur(12px)}
.table-wrap{border-color:rgba(78,142,247,0.14)}
th{background:rgba(239,245,252,0.95)}
.input,select,textarea{background:rgba(255,255,255,0.9)}
.theme-dark .input,.theme-dark select,.theme-dark textarea{background:rgba(255,255,255,0.06)}
.btn--secondary{border-color:rgba(78,142,247,0.16)}
.btn--danger{background:linear-gradient(135deg, #df4f4f, #c73434)}
.badge{font-weight:700}
.badge--roxo{color:#4456b7;border-color:rgba(68,86,183,0.22);background:rgba(68,86,183,0.10)}

@media (max-width:1080px){
  .public-shell__grid,
  .app-footer__grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .public-feature-list{grid-template-columns:1fr}
  .brand-tagline{max-width:none}
  .app-intro-banner__body{align-items:flex-start}
}
@media (max-width:768px){
  .public-hero-card__body,.public-login-card .card__body{padding:24px}
  .public-form__actions{align-items:stretch}
  .public-submit{width:100%}
  .app-footer__grid{padding:18px}
  .hero-mini-points{justify-content:flex-start}
}


/* ===== Correções da index pública ===== */
.public-page .brand,
.public-page .sidebar-toggle,
.public-page .app-intro-banner,
.public-page .app-sidebar,
.public-page .page-actions,
.public-page .app-footer{
    display:none !important;
}
.public-page .app-layout{
    padding-top:18px;
}
.public-page .shell-frame{
    padding-top:0;
}
.public-page .grid--shell{
    display:block;
}
.public-page .app-content{
    display:block;
}
.public-page .topbar{
    justify-content:flex-end;
}
.public-page .header-tools{
    width:100%;
    justify-content:flex-end;
}
.public-page .app-header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(247,251,255,0.92);
    backdrop-filter:blur(10px);
}
.card--hero .public-title,
.card--hero h1,
.card--hero h2,
.card--hero h3{
    color:#ffffff;
}
.card--hero .hero-kicker{
    background:rgba(255,255,255,0.12);
    color:#ffffff;
}
.card--hero .public-text,
.card--hero .public-feature-item span{
    color:rgba(255,255,255,0.92);
}
.public-form__actions--end{
    justify-content:flex-end;
}
.public-submit{
    min-height:48px;
}
@media (max-width:768px){
    .public-page .header-tools{
        justify-content:center;
    }
    .public-page .toolbar-group{
        width:100%;
        justify-content:center;
    }
}