/* =============================================================================
   b9-presenca.css — a aba PRESENÇA do dono: Canais, Posts e Gestão Social.
   TUDO ESCOPADO em #presenca-view-container e modais de presença.
   Paleta: Tokens do Design System + Identidade Oficial Meta (Instagram & Facebook).
   ============================================================================= */

#presenca-view-container {
    --pr-gap: 16px;
    --pr-t: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    --pr-forte: #00806a;   /* 12/09/2026: texto branco em cima (4,9:1); o #00a884 dava 3,03:1 */
    --pr-forte-hover: #006856;
    --pr-ok: #2ecfa6;
    --pr-aviso: #f59e0b;
    --pr-erro: #ef4444;
    --pr-card: var(--bg-sidebar);
    --pr-card-subtle: rgba(255, 255, 255, 0.03);
    --pr-border: var(--border);
    --pr-text: var(--text-main);
    --pr-fraco: var(--text-secondary);
    --ig-grad: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --fb-blue: #1877f2;
    color: var(--pr-text);
}

html.light-theme #presenca-view-container {
    --pr-forte: #00806a;
    --pr-forte-hover: #006856;
    --pr-ok: #025c46;
    --pr-aviso: #92400e;
    --pr-erro: #b42318;
    --pr-card-subtle: rgba(0, 0, 0, 0.02);
    /* O #667781 do painel dá 4,14:1 sobre o card claro (medido); texto de 13px pede 4,5. */
    --pr-fraco: #54626b;
}

/* Cores de texto SEMPRE por token (a tela é validada nos dois temas): o verde claro
   #2ecfa6 sobre o card branco dá 1,9:1 — por isso o tema claro troca o valor acima. */
#presenca-view-container .presenca-ok-texto { color: var(--pr-ok); font-weight: 600; }
#presenca-view-container .presenca-erro-texto { color: var(--pr-erro); }
#presenca-view-container .presenca-erro { color: var(--pr-erro); }
#presenca-view-container .presenca-post-erro { font-size: 12px; margin-bottom: 8px; }
#presenca-view-container .presenca-icone-ok { color: var(--pr-ok); }
#presenca-view-container .presenca-icone-aviso { color: var(--pr-aviso); }
#presenca-view-container .presenca-icone-forte,
.presenca-modal .presenca-icone-forte { color: var(--pr-forte, #00806a); }
#presenca-view-container .presenca-icone-zap { color: #128c7e; }
.presenca-modal .presenca-icone-aviso { color: #b45309; }
.presenca-modal .presenca-icone-ig { color: #c13584; }
.presenca-modal .presenca-icone-fb { color: #1877f2; }
.presenca-modal .presenca-fraco { font-size: 12px; color: var(--text-secondary, #8696a0); }
.presenca-modal .presenca-modal-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.presenca-modal .presenca-modal-linha.entre { justify-content: space-between; }
.presenca-modal .presenca-modal-linha.fim { justify-content: flex-end; margin-top: 10px; }
.presenca-modal .presenca-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; text-transform: none; }
.presenca-modal .presenca-check input:disabled + i { opacity: 0.5; }
.presenca-modal input[type="date"],
.presenca-modal input[type="time"] {
    background: var(--bg-main, #0b141a);
    color: var(--text-main, #e9edef);
    border: 1px solid var(--border, #222e35);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
}
.presenca-modal .presenca-oculto { display: none; }
.presenca-modal .presenca-upload-icone { font-size: 26px; color: var(--text-secondary, #8696a0); margin-bottom: 8px; display: block; }
.presenca-modal .presenca-upload-dica { display: block; margin-top: 4px; }
.presenca-modal .presenca-bt.mini { padding: 3px 10px; font-size: 11.5px; }
.presenca-modal .presenca-bt:disabled { opacity: 0.6; cursor: wait; }

/* Link solto em texto de apoio ("toque em atualizar") herdava o roxo de visitado do navegador
   — invisível no escuro. Mesma cor dos links do cabeçalho. */
#presenca-view-container .presenca-fraco a { color: var(--pr-forte); font-weight: 600; text-decoration: none; }
html:not(.light-theme) #presenca-view-container .presenca-fraco a { color: var(--pr-ok); }
#presenca-view-container .presenca-fraco a:hover { text-decoration: underline; }

/* MINHAS REDES — a própria conta na mesma tela dos clientes */
#presenca-view-container .presenca-card.conta { border-style: dashed; }
#presenca-view-container .presenca-card.conta.aberto,
#presenca-view-container .presenca-card.conta:hover { border-style: solid; }
#presenca-view-container .presenca-lista-titulo {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--pr-fraco); margin: 14px 0 8px;
}
#presenca-view-container .presenca-passos { display: flex; flex-wrap: wrap; gap: 8px; }
#presenca-view-container .presenca-passos span {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--pr-border); color: var(--pr-fraco);
}
#presenca-view-container .presenca-passos span.feito { color: var(--pr-ok); border-color: currentColor; }
#presenca-view-container .presenca-dobra { border: 1px solid var(--pr-border); border-radius: 12px; padding: 12px 14px; background: var(--bg-main); }
#presenca-view-container .presenca-dobra summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--pr-text); margin: 0; }
#presenca-view-container .presenca-dobra summary::-webkit-details-marker { display: none; }
#presenca-view-container .presenca-dobra summary::before { content: '›'; display: inline-block; transition: transform var(--pr-t); color: var(--pr-fraco); }
#presenca-view-container .presenca-dobra[open] summary::before { transform: rotate(90deg); }
#presenca-view-container .presenca-dobra > :not(summary) { margin-top: 10px; }
#presenca-view-container .presenca-form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
#presenca-view-container .presenca-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--pr-fraco); margin-top: 10px; }
#presenca-view-container .presenca-campo input,
#presenca-view-container .presenca-campo textarea,
#presenca-view-container .presenca-cal-form input[type="time"] {
    background: var(--pr-card); color: var(--pr-text); border: 1px solid var(--pr-border); border-radius: 9px;
    padding: 9px 11px; font: inherit; font-size: 14px; font-weight: 400;
}
#presenca-view-container .presenca-campo input:focus,
#presenca-view-container .presenca-campo textarea:focus { outline: 2px solid var(--pr-forte); }
#presenca-view-container .presenca-modal-linha { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#presenca-view-container .presenca-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
#presenca-view-container .presenca-cal-form { display: flex; flex-direction: column; gap: 10px; }
#presenca-view-container .presenca-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#presenca-view-container .presenca-foto { margin: 0; position: relative; }
#presenca-view-container .presenca-foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
#presenca-view-container .presenca-foto button {
    position: absolute; top: 4px; right: 4px; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff;
    border-radius: 999px; width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1;
}
#presenca-view-container .presenca-foto.adicionar {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1 / 1;
    border: 2px dashed var(--pr-border); border-radius: 10px; color: var(--pr-fraco); font-size: 12px; cursor: pointer;
}
#presenca-view-container .presenca-foto.adicionar:hover { border-color: var(--pr-forte); }
#presenca-view-container .presenca-oculto { display: none; }
#presenca-view-container .presenca-cal-n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center;
    justify-content: center; background: rgba(127, 127, 127, 0.16); font-size: 11px;
}

#presenca-view-container .presenca-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: var(--pr-gap);
    padding: var(--pr-gap);
    box-sizing: border-box;
}

/* Coluna Lateral de Clientes */
#presenca-view-container .presenca-coluna {
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

#presenca-view-container .presenca-coluna-topo {
    padding: 0 0 14px;
}

#presenca-view-container .presenca-titulo {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.02em;
}

#presenca-view-container .presenca-titulo i {
    color: var(--pr-forte);
}

#presenca-view-container .presenca-subtitulo,
#presenca-view-container .presenca-fraco {
    margin: 0;
    font-size: 13px;
    color: var(--pr-fraco);
    line-height: 1.45;
}

#presenca-view-container .presenca-filtros {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
}

#presenca-view-container .presenca-filtro {
    border: 1px solid var(--pr-border);
    background: var(--pr-card);
    color: var(--pr-text);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--pr-t);
}

#presenca-view-container .presenca-filtro:hover {
    border-color: var(--pr-forte);
}

#presenca-view-container .presenca-filtro.ativo {
    background: var(--pr-forte);
    border-color: var(--pr-forte);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 168, 132, 0.25);
}

#presenca-view-container .presenca-lista,
#presenca-view-container .presenca-detalhe {
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

#presenca-view-container .presenca-detalhe {
    background: var(--pr-card);
    border: 1px solid var(--pr-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Card de cliente na lista */
#presenca-view-container .presenca-card {
    background: var(--pr-card);
    border: 1px solid var(--pr-border);
    border-radius: 14px;
    padding: 14px;
    margin: 0 0 10px;
    cursor: pointer;
    transition: all var(--pr-t);
    position: relative;
}

#presenca-view-container .presenca-card:hover {
    border-color: var(--pr-forte);
    transform: translateY(-1px);
}

#presenca-view-container .presenca-card.aberto {
    border-color: var(--pr-forte);
    box-shadow: inset 4px 0 0 var(--pr-forte), 0 4px 12px rgba(0, 0, 0, 0.15);
}

#presenca-view-container .presenca-card-topo {
    display: flex;
    align-items: center;
    gap: 12px;
}

#presenca-view-container .presenca-card-nome {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

#presenca-view-container .presenca-card-nome strong {
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#presenca-view-container .presenca-card-nome span {
    font-size: 12px;
    color: var(--pr-fraco);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#presenca-view-container .presenca-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--bg-header);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--pr-text);
    border: 1px solid var(--pr-border);
}

#presenca-view-container .presenca-card-redes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 6px;
}

#presenca-view-container .presenca-rede {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--pr-border);
    color: var(--pr-fraco);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#presenca-view-container .presenca-rede.on {
    color: var(--pr-ok);
    border-color: rgba(46, 207, 166, 0.35);
    background: rgba(46, 207, 166, 0.08);
}

#presenca-view-container .presenca-rede.problema {
    color: var(--pr-erro);
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

#presenca-view-container .presenca-card-meta {
    font-size: 12px;
    color: var(--pr-fraco);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Selos */
#presenca-view-container .presenca-selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(127, 127, 127, 0.14);
    color: var(--pr-fraco);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

#presenca-view-container .presenca-selo.ok {
    color: var(--pr-ok);
    background: rgba(46, 207, 166, 0.12);
}

#presenca-view-container .presenca-selo.aviso {
    color: var(--pr-aviso);
    background: rgba(245, 158, 11, 0.12);
}

#presenca-view-container .presenca-selo.erro {
    color: var(--pr-erro);
    background: rgba(239, 68, 68, 0.12);
}

#presenca-view-container .presenca-selo.grande {
    font-size: 13px;
    padding: 6px 14px;
}

/* Detalhes do Cliente: Cabeçalho */
#presenca-view-container .presenca-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pr-border);
}

#presenca-view-container .presenca-cab h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

#presenca-view-container .presenca-cab-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
}

#presenca-view-container .presenca-cab-links a {
    color: var(--pr-forte);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color var(--pr-t);
}

#presenca-view-container .presenca-cab-links a:hover {
    text-decoration: underline;
}

/* =============================================================================
   SEÇÃO DE CONEXÃO DE REDES (INSTAGRAM & FACEBOOK)
   ============================================================================= */
#presenca-view-container .presenca-redes-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 900px) {
    #presenca-view-container .presenca-redes-box {
        grid-template-columns: 1fr;
    }
}

#presenca-view-container .presenca-rede-card {
    background: var(--bg-main);
    border: 1px solid var(--pr-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

#presenca-view-container .presenca-rede-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

#presenca-view-container .presenca-rede-card.ig::before {
    background: var(--ig-grad);
}

#presenca-view-container .presenca-rede-card.fb::before {
    background: var(--fb-blue);
}

#presenca-view-container .presenca-rede-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#presenca-view-container .presenca-rede-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

#presenca-view-container .presenca-rede-icone {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex: none;
}

#presenca-view-container .presenca-rede-icone.ig {
    background: var(--ig-grad);
}

#presenca-view-container .presenca-rede-icone.fb {
    background: var(--fb-blue);
}

#presenca-view-container .presenca-rede-titulos strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

#presenca-view-container .presenca-rede-titulos span {
    display: block;
    font-size: 12px;
    color: var(--pr-fraco);
}

#presenca-view-container .presenca-rede-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

#presenca-view-container .bt-conectar-ig {
    background: var(--ig-grad);
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.25);
    transition: filter var(--pr-t), transform var(--pr-t);
}

#presenca-view-container .bt-conectar-ig:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

#presenca-view-container .bt-conectar-fb {
    background: var(--fb-blue);
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25);
    transition: filter var(--pr-t), transform var(--pr-t);
}

#presenca-view-container .bt-conectar-fb:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Barra de Ações Rápidas */
#presenca-view-container .presenca-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bg-main);
    border: 1px solid var(--pr-border);
    border-radius: 12px;
    padding: 10px 14px;
}

#presenca-view-container .presenca-toolbar-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#presenca-view-container .presenca-toolbar-modos {
    display: flex;
    background: var(--pr-card);
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    padding: 2px;
}

#presenca-view-container .presenca-modo-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--pr-fraco);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--pr-t);
}

#presenca-view-container .presenca-modo-btn.ativo {
    background: var(--bg-main);
    color: var(--pr-text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Botões padrões do container */
#presenca-view-container .presenca-bt {
    border: 1px solid var(--pr-border);
    background: var(--bg-header);
    color: var(--pr-text);
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all var(--pr-t);
}

#presenca-view-container .presenca-bt:hover {
    border-color: var(--pr-forte);
}

#presenca-view-container .presenca-bt.primario {
    background: var(--pr-forte);
    border-color: var(--pr-forte);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 168, 132, 0.2);
}

#presenca-view-container .presenca-bt.primario:hover {
    background: var(--pr-forte-hover);
}

#presenca-view-container .presenca-bt.ok {
    background: var(--pr-forte);
    border-color: var(--pr-forte);
    color: #fff;
}

#presenca-view-container .presenca-bt.perigo {
    color: var(--pr-erro);
    border-color: rgba(239, 68, 68, 0.3);
}

#presenca-view-container .presenca-bt.perigo:hover {
    background: rgba(239, 68, 68, 0.08);
}

/* =============================================================================
   POST CARDS (MOCKUP SOCIAL MEDIA)
   ============================================================================= */
#presenca-view-container .presenca-post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

#presenca-view-container .presenca-post {
    background: var(--bg-main);
    border: 1px solid var(--pr-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 18px;
    transition: all var(--pr-t);
    position: relative;
}

#presenca-view-container .presenca-post:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

#presenca-view-container .presenca-arte-wrap {
    flex: 0 0 160px;
    position: relative;
}

#presenca-view-container .presenca-arte {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: rgba(127, 127, 127, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#presenca-view-container .presenca-post.story .presenca-arte {
    width: 110px;
    height: 195px;
}

#presenca-view-container .presenca-arte-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

#presenca-view-container .presenca-post-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#presenca-view-container .presenca-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

#presenca-view-container .presenca-post-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#presenca-view-container .presenca-rede-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}

#presenca-view-container .presenca-rede-tag.ig {
    background: rgba(220, 39, 67, 0.12);
    color: #e6683c;
}

#presenca-view-container .presenca-rede-tag.fb {
    background: rgba(24, 119, 242, 0.12);
    color: #1877f2;
}

#presenca-view-container .presenca-pilar-tag {
    font-size: 11.5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--pr-card-subtle);
    border: 1px solid var(--pr-border);
    color: var(--pr-fraco);
    text-transform: capitalize;
}

#presenca-view-container .presenca-tema-titulo {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--pr-text);
}

#presenca-view-container .presenca-legenda-box {
    background: var(--pr-card-subtle);
    border: 1px solid var(--pr-border);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pr-text);
    margin-bottom: 12px;
    max-height: 100px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

#presenca-view-container .presenca-post-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#presenca-view-container .presenca-metricas {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--pr-fraco);
}

#presenca-view-container .presenca-metricas span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#presenca-view-container .presenca-metricas i.fa-heart { color: #f43f5e; }
#presenca-view-container .presenca-metricas i.fa-comment { color: #38bdf8; }
#presenca-view-container .presenca-metricas i.fa-eye { color: #a855f7; }

/* Visualização Calendário */
#presenca-view-container .presenca-calendario-semana {
    display: grid;
    /* 7 colunas fixas não cabem na coluna de detalhe (~740 px): o cabeçalho quebrava e sábado
       saía cortado. Coluna mínima de 120 px e o grid decide quantas cabem por linha. */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    background: var(--bg-main);
    border: 1px solid var(--pr-border);
    border-radius: 14px;
    padding: 14px;
}

@media (max-width: 1100px) {
    #presenca-view-container .presenca-calendario-semana {
        grid-template-columns: repeat(3, 1fr);
    }
}

#presenca-view-container .presenca-cal-dia {
    background: var(--pr-card);
    border: 1px solid var(--pr-border);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
}

#presenca-view-container .presenca-cal-dia.hoje {
    border-color: var(--pr-forte);
    box-shadow: 0 0 10px rgba(0, 168, 132, 0.2);
}

#presenca-view-container .presenca-cal-dia-topo {
    font-size: 12px;
    font-weight: 700;
    color: var(--pr-fraco);
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    border-bottom: 1px solid var(--pr-border);
    padding-bottom: 6px;
}

#presenca-view-container .presenca-cal-post-mini {
    background: var(--bg-main);
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    padding: 6px;
    font-size: 11px;
    display: flex;
    gap: 6px;
    align-items: center;
}

#presenca-view-container .presenca-cal-post-mini img {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
}

/* Modal Nova Postagem */
.presenca-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.presenca-modal {
    background: var(--bg-sidebar, #111b21);
    color: var(--text-main, #e9edef);
    border: 1px solid var(--border, #222e35);
    border-radius: 18px;
    width: 100%;
    max-width: 580px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presenca-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.presenca-modal-topo h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.presenca-modal-fechar {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
}

.presenca-form-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.presenca-form-grupo label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.presenca-modal textarea,
.presenca-modal input[type="text"],
.presenca-modal select {
    background: var(--bg-main, #0b141a);
    color: var(--text-main, #e9edef);
    border: 1px solid var(--border, #222e35);
    border-radius: 10px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.presenca-modal textarea:focus,
.presenca-modal input:focus,
.presenca-modal select:focus {
    outline: 2px solid #00a884;
}

.presenca-upload-box {
    border: 2px dashed var(--border, #222e35);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s;
}

.presenca-upload-box:hover {
    border-color: #00a884;
    background: rgba(0, 168, 132, 0.05);
}
/* O modal mora no <body>, fora do container: os botões precisam do estilo aqui também
   (senão saem como botão cru do navegador). Mesma escala e mesmos tokens do container. */
.presenca-modal .presenca-bt {
    border: 1px solid var(--border, #222e35);
    background: var(--bg-header, #202c33);
    color: var(--text-main, #e9edef);
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    transition: all 0.18s ease;
}
.presenca-modal .presenca-bt:hover { border-color: #00806a; }
.presenca-modal .presenca-bt.primario {
    background: #00806a;
    border-color: #00806a;
    color: #fff;
}
.presenca-modal .presenca-bt.primario:hover { background: #006856; }

/* "Comentou → direct": a lista dos últimos comentários tratados, dentro do bloco dobrável. */
#presenca-view-container .presenca-lista-simples { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
#presenca-view-container .presenca-lista-simples li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#presenca-view-container .presenca-lista-simples a { color: var(--pr-fraco); text-decoration: underline; }


/* ===================== FERRAMENTAS (13/09/2026, referência Metricool) =====================
   Visão geral, KPIs, calendário mensal, mapa de horários, desempenho, prévia IG. Só tokens. */
#presenca-view-container .presenca-vazio-grande { padding: 60px 24px; text-align: center; color: var(--pr-fraco); }
#presenca-view-container .presenca-vazio-grande i { font-size: 36px; opacity: .4; display: block; margin-bottom: 12px; }
#presenca-view-container .presenca-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
#presenca-view-container .presenca-kpi { background: var(--pr-card); border: 1px solid var(--pr-border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#presenca-view-container .presenca-kpi-rotulo { font-size: 12px; font-weight: 500; color: var(--pr-fraco); }
#presenca-view-container .presenca-kpi-valor { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1; }
#presenca-view-container .presenca-kpi-valor small { font-size: 13px; font-weight: 600; color: var(--pr-fraco); }
#presenca-view-container .presenca-kpi-sub { font-size: 11.5px; color: var(--pr-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#presenca-view-container .presenca-kpi.ok .presenca-kpi-valor { color: var(--pr-ok); }
#presenca-view-container .presenca-kpi.atencao .presenca-kpi-valor { color: var(--pr-aviso); }
#presenca-view-container .presenca-kpi.erro .presenca-kpi-valor { color: var(--pr-erro); }

#presenca-view-container .presenca-vg { padding: 20px 22px 32px; display: flex; flex-direction: column; gap: 14px; }
#presenca-view-container .presenca-vg-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#presenca-view-container .presenca-vg-topo h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
#presenca-view-container .presenca-vg-topo p { margin: 4px 0 0; font-size: 13px; color: var(--pr-fraco); }
#presenca-view-container .presenca-vg-acoes { display: flex; gap: 8px; }
#presenca-view-container .presenca-vg .presenca-kpis { margin: 0; }
#presenca-view-container .presenca-vg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#presenca-view-container .presenca-vg-card { background: var(--pr-card); border: 1px solid var(--pr-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
#presenca-view-container .presenca-vg-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#presenca-view-container .presenca-vg-card-topo h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
#presenca-view-container .presenca-vg-card-topo h4 i { color: var(--pr-fraco); font-size: 12px; }
#presenca-view-container .presenca-vg-card-topo span { font-size: 12px; color: var(--pr-fraco); }
#presenca-view-container .presenca-vg-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; margin: 0 -4px; border-top: 1px solid var(--border-subtle); cursor: pointer; border-radius: 8px; }
#presenca-view-container .presenca-vg-item:first-of-type { border-top: 0; }
#presenca-view-container .presenca-vg-item:hover { background: var(--bg-surface-hover); }
#presenca-view-container .presenca-vg-item > i { font-size: 10px; color: var(--pr-fraco); }
#presenca-view-container .presenca-vg-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--pr-fraco); flex: 0 0 auto; }
#presenca-view-container .presenca-vg-ponto.ok { background: var(--pr-ok); }
#presenca-view-container .presenca-vg-ponto.aviso, #presenca-view-container .presenca-vg-ponto.atencao { background: var(--pr-aviso); }
#presenca-view-container .presenca-vg-ponto.erro { background: var(--pr-erro); }
#presenca-view-container .presenca-vg-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#presenca-view-container .presenca-vg-texto strong { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#presenca-view-container .presenca-vg-texto span { font-size: 12px; color: var(--pr-fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#presenca-view-container .presenca-vg-vazio { font-size: 13px; color: var(--pr-fraco); padding: 6px 0; }
#presenca-view-container .presenca-vg-barra { display: grid; grid-template-columns: 140px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 12.5px; }
#presenca-view-container .presenca-vg-barra-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pr-text); }
#presenca-view-container .presenca-vg-barra-trilho { height: 8px; border-radius: 999px; background: var(--bg-surface-active); overflow: hidden; }
#presenca-view-container .presenca-vg-barra-trilho span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
#presenca-view-container .presenca-vg-barra b { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }
#presenca-view-container .presenca-vg-dica { font-size: 12.5px; color: var(--pr-fraco); display: flex; align-items: center; gap: 8px; }
#presenca-view-container .presenca-vg-dica i { color: var(--accent-text); }

/* calendário mensal */
#presenca-view-container .presenca-cal-mes-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
#presenca-view-container .presenca-cal-mes-nav { display: flex; align-items: center; gap: 8px; }
#presenca-view-container .presenca-cal-mes-nav h4 { margin: 0 6px; font-size: 15px; font-weight: 600; color: var(--text-primary); text-transform: capitalize; min-width: 150px; text-align: center; }
#presenca-view-container .presenca-cal-legenda { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--pr-fraco); flex-wrap: wrap; }
#presenca-view-container .presenca-cal-legenda span { display: inline-flex; align-items: center; gap: 5px; }
#presenca-view-container .presenca-cal-legenda i { width: 8px; height: 8px; border-radius: 2px; background: var(--pr-fraco); }
#presenca-view-container .presenca-cal-legenda i.ok { background: var(--pr-ok); }
#presenca-view-container .presenca-cal-legenda i.aviso { background: var(--pr-aviso); }
#presenca-view-container .presenca-cal-legenda i.erro { background: var(--pr-erro); }
#presenca-view-container .presenca-cal-legenda b { color: var(--text-primary); font-weight: 600; margin-left: auto; }
#presenca-view-container .presenca-cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--pr-border); border: 1px solid var(--pr-border); border-radius: 12px; overflow: hidden; }
#presenca-view-container .presenca-cal-cab { background: var(--bg-surface); padding: 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pr-fraco); text-align: center; }
#presenca-view-container .presenca-cal-cel { background: var(--pr-card); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px; position: relative; }
#presenca-view-container .presenca-cal-cel.fora { background: var(--bg-surface); }
#presenca-view-container .presenca-cal-cel.fora .presenca-cal-num { opacity: .4; }
#presenca-view-container .presenca-cal-cel.domingo .presenca-cal-num { color: var(--pr-erro); opacity: .8; }
#presenca-view-container .presenca-cal-num { font-size: 12px; font-weight: 600; color: var(--pr-fraco); font-variant-numeric: tabular-nums; }
#presenca-view-container .presenca-cal-cel.hoje .presenca-cal-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pr-forte); color: #fff; }
#presenca-view-container .presenca-cal-mini { appearance: none; display: flex; align-items: center; gap: 6px; padding: 3px 5px 3px 3px; border-radius: 6px; border: 1px solid var(--pr-border); border-left-width: 3px; background: var(--bg-surface); color: var(--pr-text); font: 500 11px/1 var(--font-sans); cursor: pointer; text-align: left; min-width: 0; }
#presenca-view-container .presenca-cal-mini:hover { background: var(--bg-surface-hover); }
#presenca-view-container .presenca-cal-mini img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
#presenca-view-container .presenca-cal-mini > i { width: 22px; text-align: center; color: var(--pr-fraco); }
#presenca-view-container .presenca-cal-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#presenca-view-container .presenca-cal-mini span i { font-size: 10px; margin-left: 2px; }
#presenca-view-container .presenca-cal-mini.ok { border-left-color: var(--pr-ok); }
#presenca-view-container .presenca-cal-mini.aviso { border-left-color: var(--pr-aviso); }
#presenca-view-container .presenca-cal-mini.erro { border-left-color: var(--pr-erro); }
#presenca-view-container .presenca-cal-mini.mudo { border-left-color: var(--pr-fraco); opacity: .6; }
#presenca-view-container .presenca-cal-mais { font-size: 11px; color: var(--pr-fraco); padding-left: 4px; }
#presenca-view-container .presenca-cal-nota { margin: 10px 0 0; font-size: 12px; display: flex; gap: 6px; align-items: center; }

/* desempenho */
#presenca-view-container .presenca-desemp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
#presenca-view-container .presenca-hm { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
#presenca-view-container .presenca-hm-linha { display: grid; grid-template-columns: 34px repeat(24, minmax(14px, 1fr)); gap: 3px; align-items: center; }
#presenca-view-container .presenca-hm-dia { font-size: 11px; color: var(--pr-fraco); text-transform: lowercase; }
#presenca-view-container .presenca-hm-cel { display: block; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--f, 0) * 100%), var(--bg-surface-active)); }
#presenca-view-container .presenca-hm-cel.prog { box-shadow: inset 0 0 0 2px var(--pr-forte); }
#presenca-view-container .presenca-hm-horas span { font-size: 10px; color: var(--pr-fraco); text-align: left; }
#presenca-view-container .presenca-hm-legenda { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--pr-fraco); }
#presenca-view-container .presenca-hm-legenda span { display: inline-flex; align-items: center; gap: 6px; }
#presenca-view-container .presenca-hm-legenda i.presenca-hm-cel { width: 14px; height: 14px; }
#presenca-view-container .presenca-hm-legenda b { margin-left: auto; color: var(--text-primary); font-weight: 600; }
#presenca-view-container .presenca-desemp-linha { display: grid; grid-template-columns: 40px minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-subtle); cursor: pointer; }
#presenca-view-container .presenca-desemp-linha:first-of-type { border-top: 0; }
#presenca-view-container .presenca-desemp-linha img, #presenca-view-container .presenca-desemp-sem { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg-surface-active); display: inline-flex; align-items: center; justify-content: center; color: var(--pr-fraco); }
#presenca-view-container .presenca-desemp-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#presenca-view-container .presenca-desemp-texto strong { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#presenca-view-container .presenca-desemp-texto span { font-size: 11.5px; color: var(--pr-fraco); }
#presenca-view-container .presenca-desemp-barra { height: 8px; border-radius: 999px; background: var(--bg-surface-active); overflow: hidden; }
#presenca-view-container .presenca-desemp-barra span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
#presenca-view-container .presenca-desemp-nums { display: flex; gap: 10px; font-size: 11.5px; color: var(--pr-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
#presenca-view-container .presenca-desemp-nums i { font-size: 10px; margin-right: 2px; }

/* prévia IG (modal) */
.presenca-previa-modal { max-width: 820px; width: calc(100% - 32px); }
.presenca-previa-corpo { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.presenca-fone { width: 340px; max-width: 100%; border: 1px solid var(--border, #333); border-radius: 22px; overflow: hidden; background: var(--bg-card, #fff); color: var(--text-main); font-family: var(--font-sans); }
.presenca-fone.story { background: #000; color: #fff; position: relative; }
.presenca-fone-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; }
.presenca-fone-cab i { margin-left: auto; color: var(--text-secondary); }
.presenca-fone-cab small { margin-left: 6px; opacity: .7; font-size: 12px; }
.presenca-fone.story .presenca-fone-cab { position: absolute; top: 6px; left: 0; right: 0; z-index: 2; color: #fff; }
.presenca-fone-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ig-grad, linear-gradient(45deg, #f09433, #bc1888)); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.presenca-fone-arte { width: 100%; aspect-ratio: 1 / 1; background: var(--bg-surface-active, #222); display: flex; align-items: center; justify-content: center; }
.presenca-fone.story .presenca-fone-arte { aspect-ratio: 9 / 16; }
.presenca-fone-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.presenca-fone-sem { font-size: 12px; color: var(--text-secondary); display: inline-flex; gap: 6px; align-items: center; padding: 12px; text-align: center; }
.presenca-fone-acoes { display: flex; gap: 14px; padding: 10px 12px 6px; font-size: 20px; }
.presenca-fone-acoes .presenca-fone-dir { margin-left: auto; }
.presenca-fone-legenda { padding: 0 12px; font-size: 13px; line-height: 1.45; max-height: 140px; overflow: auto; }
.presenca-fone-tags { color: #00376b; }
html.dark-theme .presenca-fone-tags { color: #7dbaff; }
.presenca-fone-data { padding: 8px 12px 12px; font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.presenca-fone-story-barra { position: absolute; top: 0; left: 8px; right: 8px; height: 2px; background: rgba(255,255,255,.35); z-index: 2; margin-top: 4px; border-radius: 2px; }
.presenca-fone-story-barra span { display: block; width: 45%; height: 100%; background: #fff; border-radius: 2px; }
.presenca-fone-story-resposta { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 12px; z-index: 2; color: #fff; }
.presenca-fone-story-resposta span { flex: 1; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 8px 12px; font-size: 12px; }
.presenca-previa-lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.presenca-previa-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.presenca-previa-dados { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 10px; font-size: 13px; }
.presenca-previa-dados dt { color: var(--text-secondary); }
.presenca-previa-dados dd { margin: 0; color: var(--text-main); word-break: break-word; }
.presenca-previa-acoes { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--border); }
@media (max-width: 1100px) {
    #presenca-view-container .presenca-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #presenca-view-container .presenca-desemp { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    #presenca-view-container .presenca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #presenca-view-container .presenca-vg { padding: 14px; }
    #presenca-view-container .presenca-vg-grade { grid-template-columns: 1fr; }
    #presenca-view-container .presenca-cal-cel { min-height: 64px; padding: 4px; }
    #presenca-view-container .presenca-cal-mini span { display: none; }
    #presenca-view-container .presenca-cal-mini { padding: 2px; }
    .presenca-previa-corpo { grid-template-columns: 1fr; }
    .presenca-fone { width: 100%; }
}

/* ---- ajustes medidos no print (13/09/2026) ---- */
#presenca-view-container .presenca-kpi-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
#presenca-view-container .presenca-cal-mes-nav h4 { text-transform: none; }
.presenca-modal .presenca-selo { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--bg-surface-active); color: var(--text-secondary); }
.presenca-modal .presenca-selo.ok { background: rgba(46, 207, 166, .16); color: #2ecfa6; }
.presenca-modal .presenca-selo.aviso { background: rgba(245, 158, 11, .16); color: #f59e0b; }
.presenca-modal .presenca-selo.erro { background: rgba(239, 68, 68, .16); color: #ef4444; }
html.light-theme .presenca-modal .presenca-selo.ok { color: #025c46; }
html.light-theme .presenca-modal .presenca-selo.aviso { color: #92400e; }
html.light-theme .presenca-modal .presenca-selo.erro { color: #b42318; }
.presenca-modal .presenca-rede-tag, .presenca-modal .presenca-pilar-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--bg-surface-active); color: var(--text-main); }
.presenca-modal .presenca-rede-tag.ig i { color: #c13584; }
.presenca-modal .presenca-rede-tag.fb i { color: #1877f2; }
.presenca-modal .presenca-bt { appearance: none; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font: 500 13px/1 var(--font-sans); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.presenca-modal .presenca-bt.primario { background: #00806a; border-color: #00806a; color: #fff; }
.presenca-modal .presenca-bt.perigo { color: #ef4444; }
html.light-theme .presenca-modal .presenca-bt.perigo { color: #b42318; }
#presenca-view-container .presenca-voltar { display: none; }
@media (max-width: 760px) {
    #presenca-view-container .presenca-wrap { flex-direction: column; padding: 12px; gap: 12px; overflow-y: auto; }
    #presenca-view-container .presenca-coluna { flex: 0 0 auto; }
    #presenca-view-container .presenca-lista { overflow: visible; max-height: none; }
    #presenca-view-container .presenca-detalhe { flex: 0 0 auto; overflow: visible; padding: 14px; }
    #presenca-view-container.presenca-cliente-aberto .presenca-coluna { display: none; }
    #presenca-view-container .presenca-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; }
}