/* ==========================================================================
   Painel Unificado — folha de estilo única.
   Sem framework externo: a CSP do painel não libera CDN, e o conjunto de
   componentes aqui é pequeno o bastante para não justificar um.
   ========================================================================== */

:root {
    --tinta:        #16202c;
    --tinta-2:      #47566a;
    --tinta-3:      #7b8a9c;
    --linha:        #e2e8f0;
    --linha-forte:  #cbd5e1;
    --fundo:        #f4f6f9;
    --papel:        #ffffff;

    --menu-fundo:   #14202e;
    --menu-tinta:   #a9b8ca;
    --menu-ativo:   #ffffff;

    --acento:       #1257a5;
    --acento-forte: #0e4585;
    --acento-suave: #e8f0fb;

    --ouvidoria:    #7b4bc4;
    --sic:          #1257a5;
    --upa:          #0f8a6a;
    --admin:        #b0682a;
    --solicitacoes: #0e7490;

    --ok:           #0f8a6a;
    --ok-suave:     #e3f5ee;
    --alerta:       #b5761b;
    --alerta-suave: #fdf2e0;
    --erro:         #b8332c;
    --erro-suave:   #fdeceb;
    --info:         #1257a5;
    --info-suave:   #e8f0fb;
    --neutro-suave: #eef1f5;

    --raio:         10px;
    --raio-sm:      6px;
    --sombra:       0 1px 2px rgba(16, 32, 48, .06), 0 4px 12px rgba(16, 32, 48, .05);
    --sombra-alta:  0 8px 28px rgba(16, 32, 48, .14);
    --menu-largura: 244px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
p  { margin: 0 0 .7rem; }

.ic { width: 20px; height: 20px; flex: 0 0 auto; }
.ic-sm { width: 16px; height: 16px; flex: 0 0 auto; }

.mudo    { color: var(--tinta-3); }
.suave   { color: var(--tinta-2); }
.pequeno { font-size: .82rem; }
.forte   { font-weight: 600; }
.mono    { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.nowrap  { white-space: nowrap; }
.centro  { text-align: center; }
.direita { text-align: right; }

/* ---------------------------------------------------------------- estrutura */

.app { display: flex; min-height: 100vh; }

.menu {
    width: var(--menu-largura);
    flex: 0 0 var(--menu-largura);
    background: var(--menu-fundo);
    color: var(--menu-tinta);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.menu__marca {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.15rem 1rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu__marca:hover { text-decoration: none; }
.menu__brasao {
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, #2f6fbf, #1a3f6e);
    color: #fff; flex: 0 0 auto;
}
.menu__nome  { font-weight: 650; font-size: .95rem; line-height: 1.15; }
.menu__orgao { font-size: .72rem; color: var(--menu-tinta); opacity: .85; }

.menu__grupo { padding: 1rem .7rem .25rem; }
.menu__titulo {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: rgba(255, 255, 255, .38); padding: 0 .5rem .4rem; font-weight: 700;
}

.menu__link {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .6rem; margin-bottom: 2px;
    border-radius: var(--raio-sm);
    color: var(--menu-tinta); font-size: .9rem; font-weight: 500;
}
.menu__link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.menu__link.is-ativo { background: rgba(255, 255, 255, .12); color: var(--menu-ativo); font-weight: 600; }
.menu__link.is-ativo .ic { color: #fff; }
.menu__contador {
    margin-left: auto; font-size: .72rem; font-weight: 700;
    background: rgba(255, 255, 255, .14); color: #fff;
    padding: .1rem .4rem; border-radius: 20px; min-width: 22px; text-align: center;
}

.menu__rodape {
    margin-top: auto; padding: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.menu__usuario {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .5rem; border-radius: var(--raio-sm); color: #fff;
}
.menu__usuario:hover { background: rgba(255, 255, 255, .07); text-decoration: none; }
.menu__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #fff;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: 0 0 auto;
}
.menu__usuario-nome  { font-size: .85rem; font-weight: 600; line-height: 1.1; }
.menu__usuario-cargo { font-size: .72rem; color: var(--menu-tinta); }

.menu__sair {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    margin-top: .35rem; padding: .45rem .5rem;
    background: none; border: 0; border-radius: var(--raio-sm);
    color: var(--menu-tinta); font: inherit; font-size: .84rem; cursor: pointer;
}
.menu__sair:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    padding: .85rem 1.6rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 20;
}
.topo__titulo { font-size: 1.02rem; font-weight: 650; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.busca-topo { display: flex; align-items: center; gap: .4rem; }
.busca-topo input {
    width: 210px; padding: .42rem .6rem .42rem 2rem;
    border: 1px solid var(--linha-forte); border-radius: 20px;
    background: var(--fundo) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8a9c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21'/%3E%3C/svg%3E") no-repeat .55rem center / 15px;
    font: inherit; font-size: .85rem;
}
.busca-topo input:focus { outline: 2px solid var(--acento); outline-offset: 1px; background-color: #fff; }

.pagina { padding: 1.4rem 1.6rem 3rem; max-width: 1360px; width: 100%; }

/* ------------------------------------------------------------------- cartões */

.cartao {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1.15rem;
}
.cartao__cabecalho {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--linha);
}
.cartao__cabecalho h2 { font-size: .98rem; }
.cartao__acoes { margin-left: auto; display: flex; gap: .45rem; align-items: center; }
.cartao__corpo { padding: 1.1rem; }
.cartao__corpo--liso { padding: 0; }

/* ---------------------------------------------------------------------- KPIs */

.kpis {
    display: grid; gap: .85rem; margin-bottom: 1.15rem;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.kpi {
    background: var(--papel); border: 1px solid var(--linha);
    border-left: 3px solid var(--linha-forte);
    border-radius: var(--raio); padding: .9rem 1rem;
    box-shadow: var(--sombra); display: block; color: inherit;
}
.kpi:hover { text-decoration: none; box-shadow: var(--sombra-alta); }
.kpi--ouvidoria { border-left-color: var(--ouvidoria); }
.kpi--sic       { border-left-color: var(--sic); }
.kpi--upa       { border-left-color: var(--upa); }
.kpi--solicitacoes { border-left-color: var(--solicitacoes); }
.kpi.is-destaque { background: linear-gradient(180deg, #fffaf1, var(--papel)); }

.kpi__rotulo  { font-size: .78rem; color: var(--tinta-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi__valor   { font-size: 1.85rem; font-weight: 700; line-height: 1.15; margin: .15rem 0 .1rem; letter-spacing: -.02em; }
.kpi__detalhe { font-size: .8rem; color: var(--tinta-3); }

/* ------------------------------------------------------------------- atalhos */

.atalhos { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.15rem; }
.atalho {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .8rem; background: var(--papel);
    border: 1px solid var(--linha); border-radius: 22px;
    font-size: .87rem; font-weight: 550; color: var(--tinta);
    box-shadow: var(--sombra);
}
.atalho:hover { text-decoration: none; border-color: var(--acento); color: var(--acento); }
.atalho__contador {
    background: var(--acento); color: #fff; font-size: .72rem; font-weight: 700;
    padding: .08rem .42rem; border-radius: 20px;
}
.atalho--ouvidoria .ic { color: var(--ouvidoria); }
.atalho--sic .ic       { color: var(--sic); }
.atalho--upa .ic       { color: var(--upa); }
.atalho--solicitacoes .ic { color: var(--solicitacoes); }

/* -------------------------------------------------------------------- badges */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .5rem; border-radius: 20px;
    font-size: .74rem; font-weight: 650; white-space: nowrap;
    background: var(--neutro-suave); color: var(--tinta-2);
}
.badge--ok     { background: var(--ok-suave);     color: #0a6a52; }
.badge--alerta { background: var(--alerta-suave); color: #8f5c12; }
.badge--erro   { background: var(--erro-suave);   color: #9a2a24; }
.badge--info   { background: var(--info-suave);   color: #0e4585; }
.badge--neutro { background: var(--neutro-suave); color: var(--tinta-2); }

.pilula-modulo {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: .1rem .45rem; border-radius: 5px;
}
.pilula-modulo--ouvidoria { background: #f1ebfb; color: #5c33a0; }
.pilula-modulo--sic       { background: #e8f0fb; color: #0e4585; }
.pilula-modulo--upa       { background: #e3f5ee; color: #0a6a52; }
.pilula-modulo--solicitacoes { background: #e0f2f7; color: #0b5f75; }

/* -------------------------------------------------------------------- botões */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .48rem .85rem; border-radius: var(--raio-sm);
    border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta);
    font: inherit; font-size: .87rem; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: var(--fundo); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn--primario {
    background: var(--acento); border-color: var(--acento); color: #fff;
}
.btn--primario:hover { background: var(--acento-forte); border-color: var(--acento-forte); }
.btn--perigo { border-color: #e5b3b0; color: var(--erro); background: #fff; }
.btn--perigo:hover { background: var(--erro-suave); }
.btn--sm { padding: .3rem .6rem; font-size: .8rem; }
.btn--bloco { width: 100%; }
.btn--fantasma { border-color: transparent; background: transparent; }
.btn--fantasma:hover { background: var(--fundo); }

/* ----------------------------------------------------------------- formulário */

.campo { margin-bottom: .9rem; }
.campo__rotulo { display: block; font-size: .82rem; font-weight: 650; margin-bottom: .28rem; color: var(--tinta-2); }
.campo__dica   { font-size: .78rem; color: var(--tinta-3); margin-top: .25rem; }

.entrada, select.entrada, textarea.entrada {
    width: 100%; padding: .5rem .65rem;
    border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    background: #fff; color: var(--tinta); font: inherit; font-size: .9rem;
}
.entrada:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }
textarea.entrada { min-height: 110px; resize: vertical; line-height: 1.5; }
select.entrada {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347566a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .5rem center; background-size: 16px;
    padding-right: 2rem;
}

.filtros {
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
}
.filtros .campo { margin-bottom: 0; }
.filtros__acoes { display: flex; gap: .45rem; }

.check { display: flex; align-items: flex-start; gap: .5rem; padding: .3rem 0; font-size: .87rem; }
.check input { margin-top: .22rem; width: 16px; height: 16px; accent-color: var(--acento); }

/* -------------------------------------------------------------------- tabelas */

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabela th {
    text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-3); font-weight: 700;
    padding: .6rem .8rem; border-bottom: 1px solid var(--linha); background: #fbfcfd;
    white-space: nowrap;
}
.tabela td { padding: .65rem .8rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:hover { background: #fafbfd; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela__principal { font-weight: 600; }
.tabela__acoes { text-align: right; white-space: nowrap; }

.vazio { padding: 2.4rem 1rem; text-align: center; color: var(--tinta-3); }
.vazio .ic { width: 34px; height: 34px; margin-bottom: .5rem; opacity: .5; }

/* ----------------------------------------------------------------- paginação */

.paginacao {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1.1rem; border-top: 1px solid var(--linha);
    font-size: .85rem; color: var(--tinta-2); flex-wrap: wrap;
}
.paginacao__paginas { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.paginacao__item {
    min-width: 30px; height: 30px; padding: 0 .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--linha); border-radius: var(--raio-sm);
    color: var(--tinta-2); font-size: .85rem; background: #fff;
}
.paginacao__item:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.paginacao__item.is-ativo { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 650; }
.paginacao__item.is-inerte { opacity: .4; pointer-events: none; }

/* --------------------------------------------------------------------- flash */

.flash {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .9rem; border-radius: var(--raio);
    border: 1px solid var(--linha); background: var(--papel);
    margin-bottom: .7rem; font-size: .89rem;
}
.flash--sucesso { background: var(--ok-suave);     border-color: #b9e3d4; color: #0a5c47; }
.flash--erro    { background: var(--erro-suave);   border-color: #f0c4c1; color: #92251f; }
.flash--aviso   { background: var(--alerta-suave); border-color: #f0d5a8; color: #7d5010; }
.flash--info    { background: var(--info-suave);   border-color: #c3d8f3; color: #0e4585; }

/* ------------------------------------------------------------------ timeline */

.timeline { position: relative; padding: .3rem 0; }
.timeline__dia {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--tinta-3); margin: 1rem 0 .55rem; padding-left: 2.4rem;
}
.timeline__dia:first-child { margin-top: 0; }

.evento {
    position: relative; display: block;
    padding: .1rem 0 1rem 2.4rem; color: inherit;
}
.evento:hover { text-decoration: none; }
.evento::before {
    content: ""; position: absolute; left: 11px; top: 26px; bottom: 0;
    width: 2px; background: var(--linha);
}
.evento:last-child::before { display: none; }

.evento__marca {
    position: absolute; left: 0; top: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--papel); border: 1px solid var(--linha-forte); color: var(--tinta-2);
}
.evento__marca .ic { width: 13px; height: 13px; }
.evento--ouvidoria .evento__marca { border-color: #d9c9f4; color: var(--ouvidoria); background: #f7f3fe; }
.evento--sic       .evento__marca { border-color: #c3d8f3; color: var(--sic);       background: #f2f7fd; }
.evento--upa       .evento__marca { border-color: #b9e3d4; color: var(--upa);       background: #f1fbf7; }
.evento--solicitacoes .evento__marca { border-color: #b8e0ea; color: var(--solicitacoes); background: #f0f9fb; }

.evento__caixa {
    background: var(--papel); border: 1px solid var(--linha);
    border-radius: var(--raio); padding: .65rem .85rem;
}
.evento:hover .evento__caixa { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.evento__topo { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .2rem; }
.evento__titulo { font-weight: 600; font-size: .9rem; }
.evento__hora { margin-left: auto; font-size: .78rem; color: var(--tinta-3); }
.evento__resumo { font-size: .86rem; color: var(--tinta-2); }
.evento__rodape { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .35rem; font-size: .78rem; color: var(--tinta-3); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
    padding: .3rem .75rem; border-radius: 20px; font-size: .84rem; font-weight: 550;
    border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-2);
}
.chip:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.chip.is-ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ---------------------------------------------------------------- conversa */

.conversa { display: flex; flex-direction: column; gap: .9rem; }
.fala { display: flex; gap: .7rem; max-width: 82%; }
.fala--equipe { align-self: flex-end; flex-direction: row-reverse; }
.fala__avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-size: .78rem; font-weight: 700;
    background: var(--neutro-suave); color: var(--tinta-2);
}
.fala--equipe .fala__avatar { background: var(--acento-suave); color: var(--acento); }
.fala__balao {
    background: var(--papel); border: 1px solid var(--linha);
    border-radius: var(--raio); padding: .7rem .9rem; min-width: 0;
}
.fala--equipe .fala__balao { background: var(--acento-suave); border-color: #c3d8f3; }
.fala__meta { font-size: .76rem; color: var(--tinta-3); margin-bottom: .3rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.fala__texto { white-space: pre-wrap; word-wrap: break-word; font-size: .9rem; }

.anexo {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: .4rem .4rem 0 0; padding: .32rem .6rem;
    background: #fff; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
    font-size: .82rem; color: var(--tinta-2); max-width: 100%;
}
a.anexo:hover { border-color: var(--acento); color: var(--acento); text-decoration: none; }
.anexo--indisponivel { border-style: dashed; color: var(--tinta-3); background: var(--fundo); }
.anexo__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------- grade */

.grade { display: grid; gap: 1.15rem; }
.grade--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grade--meio { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.definicoes { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .45rem .9rem; font-size: .88rem; }
.definicoes dt { color: var(--tinta-3); font-size: .8rem; }
.definicoes dd { margin: 0; }

/* --------------------------------------------------------------------- barras */

.barra-item { margin-bottom: .75rem; }
.barra-item__topo { display: flex; align-items: baseline; gap: .5rem; font-size: .86rem; margin-bottom: .28rem; }
.barra-item__nota { margin-left: auto; font-weight: 700; }
.barra {
    height: 8px; border-radius: 20px; background: var(--neutro-suave); overflow: hidden;
}
.barra__preenchida { height: 100%; border-radius: 20px; background: var(--acento); }
.barra__preenchida--ok     { background: var(--ok); }
.barra__preenchida--alerta { background: var(--alerta); }
.barra__preenchida--erro   { background: var(--erro); }
.barra__preenchida--upa    { background: var(--upa); }

.escala-linha { display: flex; align-items: center; gap: .5rem; font-size: .8rem; margin-bottom: .3rem; }
.escala-linha__rotulo { width: 78px; color: var(--tinta-3); flex: 0 0 auto; }
.escala-linha__barra { flex: 1; height: 7px; background: var(--neutro-suave); border-radius: 20px; overflow: hidden; }
.escala-linha__valor { width: 52px; text-align: right; color: var(--tinta-2); flex: 0 0 auto; }

.nps-medidor { display: flex; height: 12px; border-radius: 20px; overflow: hidden; background: var(--neutro-suave); margin: .5rem 0; }
.nps-medidor span { height: 100%; }
.nps-medidor .detr { background: var(--erro); }
.nps-medidor .neut { background: var(--alerta); }
.nps-medidor .prom { background: var(--ok); }
.nps-legenda { display: flex; gap: 1rem; font-size: .78rem; color: var(--tinta-2); flex-wrap: wrap; }
.nps-legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: .3rem; }

.colunas-tempo { display: flex; align-items: flex-end; gap: 3px; height: 110px; padding-top: .5rem; }
.coluna-tempo { flex: 1; min-width: 4px; background: var(--acento-suave); border-radius: 3px 3px 0 0; position: relative; }
.coluna-tempo span { display: block; height: 100%; background: var(--sic); border-radius: 3px 3px 0 0; }
.eixo-tempo { display: flex; justify-content: space-between; font-size: .72rem; color: var(--tinta-3); margin-top: .35rem; }

/* --------------------------------------------------------------------- notas */

.nota {
    border-left: 3px solid var(--alerta); background: #fffdf7;
    border-radius: var(--raio-sm); padding: .55rem .75rem; margin-bottom: .6rem;
}
.nota__meta { font-size: .76rem; color: var(--tinta-3); display: flex; gap: .5rem; align-items: center; }
.nota__texto { font-size: .87rem; white-space: pre-wrap; margin-top: .2rem; }
.nota__remover { margin-left: auto; }

/* --------------------------------------------------------- grade de permissões */

.permissoes { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.permissoes__modulo { border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem .9rem; }
.permissoes__titulo { display: flex; align-items: center; gap: .45rem; font-weight: 650; margin-bottom: .5rem; font-size: .92rem; }
.permissoes__acao { display: flex; gap: .5rem; padding: .28rem 0; align-items: flex-start; }
.permissoes__acao input { margin-top: .2rem; accent-color: var(--acento); width: 16px; height: 16px; }
.permissoes__rotulo { font-size: .86rem; font-weight: 550; }
.permissoes__descricao { font-size: .77rem; color: var(--tinta-3); }

/* ------------------------------------------------------------ telas limpas */

.limpo {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
    background: radial-gradient(1100px 520px at 50% -10%, #24405f, transparent);
    background-color: var(--menu-fundo);
}
.limpo__caixa { width: 100%; max-width: 400px; }
.limpo__marca { display: flex; align-items: center; gap: .7rem; justify-content: center; margin-bottom: 1.2rem; color: #fff; }
.limpo__cartao { background: var(--papel); border-radius: 14px; padding: 1.8rem 1.6rem; box-shadow: var(--sombra-alta); }
.limpo__titulo { text-align: center; margin-bottom: .3rem; }
.limpo__sub { text-align: center; color: var(--tinta-3); font-size: .88rem; margin-bottom: 1.3rem; }
.limpo__rodape { text-align: center; margin-top: 1.1rem; font-size: .78rem; color: rgba(255, 255, 255, .55); }

.erro-pagina { text-align: center; padding: 2.5rem 1rem; }
.erro-pagina__codigo { font-size: 3.2rem; font-weight: 750; color: var(--tinta-3); line-height: 1; }
.erro-pagina__mensagem { color: var(--tinta-2); margin: .6rem auto 1.2rem; max-width: 560px; white-space: pre-wrap; text-align: left; display: inline-block; }

/* ------------------------------------------------------------------ auxiliares */

.linha-acoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.separador { height: 1px; background: var(--linha); margin: 1rem 0; border: 0; }
.aviso-lgpd {
    display: flex; gap: .5rem; align-items: flex-start;
    background: var(--alerta-suave); border: 1px solid #f0d5a8; color: #7d5010;
    border-radius: var(--raio-sm); padding: .55rem .7rem; font-size: .82rem; margin-bottom: .8rem;
}

/* -------------------------------------------------------------------- mobile */

.menu-alternar { display: none; }

@media (max-width: 980px) {
    .grade--2 { grid-template-columns: 1fr; }
    .fala { max-width: 95%; }
}

@media (max-width: 780px) {
    .app { flex-direction: column; }
    .menu {
        position: static; width: 100%; flex: none; height: auto;
        flex-direction: row; align-items: center; flex-wrap: wrap; padding-bottom: .4rem;
    }
    .menu__marca { border: 0; padding: .8rem 1rem; }
    .menu__grupo { display: flex; gap: .25rem; overflow-x: auto; padding: .2rem .6rem; width: 100%; }
    .menu__titulo { display: none; }
    .menu__link { white-space: nowrap; }
    .menu__rodape { margin: 0 0 0 auto; border: 0; display: flex; gap: .3rem; align-items: center; }
    .menu__usuario-info, .menu__sair span { display: none; }
    .topo { padding: .7rem 1rem; }
    .busca-topo input { width: 150px; }
    .pagina { padding: 1rem; }
    .kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media print {
    .menu, .topo, .cartao__acoes, .paginacao, .atalhos { display: none !important; }
    body { background: #fff; }
    .cartao { box-shadow: none; border-color: #ccc; }
}

/* ------------------------------------------------- validação de formulário */
.entrada.is-invalido { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-suave); }
.campo__dica--erro   { color: var(--erro); }

/* ---------------------------------------------------------------- logotipo */
.menu__marca {
    flex-direction: column; align-items: flex-start; gap: .35rem;
    padding: .95rem 1.15rem .8rem;
}
.menu__logo { display: block; width: 118px; height: auto; }
.menu__marca .menu__nome {
    font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--menu-tinta); opacity: .8; line-height: 1.2;
}
.limpo__marca { flex-direction: column; gap: .5rem; }
.limpo__logo { display: block; width: min(220px, 60vw); height: auto; }
.limpo__marca .menu__nome { font-size: .9rem; color: #fff; }
@media (max-width: 860px) {
    .menu__marca { flex-direction: row; align-items: center; padding: .6rem 1rem; }
    .menu__logo { width: 96px; }
    .menu__marca .menu__nome { display: none; }
}

/* ------------------------------------------------- timeline interna e avisos */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.chip { display: inline-flex; align-items: center; gap: .35rem; }

.sino {
    position: relative; display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%; color: var(--tinta-2);
}
.sino:hover { background: var(--fundo); color: var(--acento); text-decoration: none; }
.sino.tem-aviso { color: var(--acento); }
.sino__contador {
    position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--erro); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}

.aviso {
    display: flex; gap: .75rem; padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--linha); color: var(--tinta);
}
.aviso:hover { background: #fafbfd; text-decoration: none; }
.aviso.is-nova { background: #f6f9fe; }
.aviso.is-nova .aviso__titulo { font-weight: 650; }
.aviso__marca {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; background: var(--neutro-suave); color: var(--tinta-2);
}
.aviso.is-nova .aviso__marca { background: var(--acento-suave); color: var(--acento); }
.aviso__corpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.aviso__titulo { font-size: .9rem; }
.aviso__texto { font-size: .84rem; color: var(--tinta-2); }
.aviso__rodape { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .76rem; color: var(--tinta-3); }

.participante { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--linha); }
.participante:last-of-type { border-bottom: 0; }
.participante__avatar {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; background: var(--neutro-suave); color: var(--tinta-2);
}
.participante__info { display: flex; flex-direction: column; min-width: 0; font-size: .86rem; line-height: 1.3; }
.participante__remover { margin-left: auto; }
.participante__novo { margin-top: .8rem; }
.linha-acoes--justa { flex-wrap: nowrap; }
.linha-acoes--justa .entrada { flex: 1; min-width: 0; }

.chat {
    display: flex; flex-direction: column; gap: .7rem;
    max-height: 560px; overflow-y: auto; padding: 1rem;
    background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.chat .fala { max-width: 92%; }
.chat__evento {
    align-self: center; max-width: 95%; text-align: center;
    border: 1px dashed var(--linha-forte); border-radius: var(--raio-sm);
    padding: .4rem .7rem; background: var(--papel); font-size: .8rem; color: var(--tinta-2);
}
.chat__evento--reabertura { border-color: #f0d5a8; background: var(--alerta-suave); }
.chat__evento--status     { border-color: #c3d8f3; }
.chat__evento-meta { font-size: .72rem; color: var(--tinta-3); margin-bottom: .15rem; }
.chat__evento-texto { white-space: pre-wrap; word-wrap: break-word; }
.chat__envio { padding: .9rem 1rem 1rem; }
.chat__envio textarea.entrada { min-height: 70px; }
.chat__acoes { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.chat__acoes .btn--primario { margin-left: auto; }
.chat__anexar { position: relative; cursor: pointer; max-width: 70%; }
.chat__anexar input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chat__anexar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat__novidade {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem 1rem; background: var(--info-suave); color: #0e4585;
    border-bottom: 1px solid #c3d8f3; font-size: .84rem;
}
.chat__novidade[hidden] { display: none; }
.chat__novidade .btn { margin-left: auto; }

.avisos-flutuantes {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
    display: flex; flex-direction: column; gap: .5rem; max-width: min(360px, calc(100vw - 2rem));
}
.aviso-flutuante {
    display: block; padding: .7rem .9rem; border-radius: var(--raio);
    background: var(--tinta); color: #fff; font-size: .86rem;
    box-shadow: var(--sombra-alta); border-left: 4px solid var(--acento);
}
.aviso-flutuante:hover { text-decoration: none; background: #22303f; }