/* HIVE MKT 360 — Componentes: botoes, filtros, modais, calendario, timeline */

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 16px;
}

.filters-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    padding: 8px 16px;
    border-radius: var(--r-surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.filters-container span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-select {
    border: 1px solid var(--border-light);
    background: var(--bg-body);
    padding: 10px 14px;
    border-radius: var(--r-control);
    min-width: 130px;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    transition: var(--transition-fast);
    cursor: pointer;
    font-weight: 500;
}

.filter-select:focus {
    box-shadow: 0 0 0 3px rgba(248, 198, 48, 0.25);
    border-color: var(--color-5);
}

/* O mesmo bloco de filtro, quando mora no topbar em vez do corpo da tela
   (hoje: o filtro de Analista da Visao Geral, vizinho do seletor de mes).

   So mexe na MEDIDA - fundo, borda, sombra e tema escuro continuam vindo das
   regras acima. Sem isto o bloco fecha 50px contra os 46px do .month-selector
   ao lado: 8+8 de padding mais os 32 do controle mais as duas bordas. Os 6px
   aqui sao os mesmos 6px do .month-selector, e e por isso que sao 6. */
.topbar-filtro {
    padding: 6px 8px;
    gap: 8px;
}

.topbar-filtro span {
    color: var(--text-muted);
    font-size: 16px;
    padding-left: 6px;
}

.topbar-filtro .filter-select {
    height: 32px;
    padding: 0 10px;
    min-width: 150px;
    font-weight: 600;
}

.input-bare {
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--r-control);
    transition: var(--transition-fast);
    font-weight: 500;
}

.input-bare:focus,
.input-bare:hover {
    background: var(--bg-body);
    border: 1px solid var(--border-dark);
}

select.input-bare {
    cursor: pointer;
}

select.input-bare:focus {
    box-shadow: 0 0 0 3px rgba(248, 198, 48, 0.25);
    border-color: var(--color-5);
}

.btn-primary {
    /* Chapado e igual ao .btn-action: eram dois botoes de mesma importancia
       com formas e cores diferentes, e apareciam no mesmo fluxo. */
    background: var(--color-3);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: var(--r-control);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
    letter-spacing: 0.2px;
}

.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: scale(0.97);
}

.btn-action {
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--r-control);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.btn-action:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-action:active {
    transform: scale(0.97);
}

.btn-danger {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 20px;
    padding: 6px;
    border-radius: var(--r-control);
    transition: var(--transition-fast);
}

.btn-danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

.btn-danger:active {
    transform: scale(0.92);
}

.btn-primary.btn-dashed {
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
    border: 2px dashed var(--border-dark);
    width: 100%;
    justify-content: center;
}

#statusModal {
    display: none;
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-surface);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    padding: 12px;
    min-width: 240px;
}

.status-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-radius: var(--r-control);
    transition: var(--transition-fast);
}

.status-badge {
    width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-control);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.conclusion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    font-size: 19px;
    border-radius: var(--r-control);
    cursor: pointer;
    transition: var(--transition-fast);
}

.conclusion-toggle:hover {
    transform: scale(1.1);
}

.legend-box {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-surface);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.legend-color {
    width: 24px;
    height: 24px;
    border-radius: var(--r-control);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--r-control);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.chip span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.chip:hover {
    filter: brightness(0.95);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.chip i {
    font-size: 16px;
    flex-shrink: 0;
}

.cal-toggle {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    border-radius: var(--r-control);
    transition: var(--transition-fast);
    letter-spacing: 0.2px;
}

.cal-toggle:hover {
    color: var(--text-primary);
    background: var(--surface-elevated);
}

.cal-toggle.active {
    background: var(--surface-elevated) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 -2px 0 var(--color-5);
    font-weight: 700;
}

#cal-navigator {
    display: none;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    padding: 8px 16px;
}

.nav-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-control);
}

.nav-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* A Agenda e a unica tela que cresce alem da altura da janela: um mes de
   6 semanas nao cabe. As demais telas usam .view-content.active com
   flex: 1 e min-height: 0, que as prende a altura da tela para que a
   tabela interna role - o Painel de Posts depende disso. Aqui e o
   contrario: a tela cresce e quem rola e a pagina. */
#view-calendario.view-content.active {
    flex: 1 0 auto;
    min-height: auto;
}

#calendar-grid {
    border: 1px solid var(--border-light);
    background: var(--bg-surface);
    border-radius: var(--r-surface);
    overflow: hidden;
    /* Era flex: 1, que forcava a grade a caber na altura da tela - junto com
       o overflow: hidden, as ultimas semanas do mes eram cortadas e a rolagem
       parava antes do fim. Com 1 0 auto ela cresce se sobrar espaco, mas
       nunca encolhe abaixo do proprio conteudo. */
    flex: 1 0 auto;
    box-shadow: var(--shadow-sm);
}

.cal-header-cell {
    padding: 16px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-elevated);
    letter-spacing: 1.2px;
}

.cal-cell {
    min-height: 110px;
    max-height: 160px;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-surface);
    position: relative;
    transition: background 0.15s;
}

.cal-cell:hover {
    background: var(--hover-bg);
}

.cal-cell.today {
    background: rgba(114, 78, 145, 0.05);
}

body.dark-mode .cal-cell.today {
    background: rgba(114, 78, 145, 0.12);
}

.cal-day-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-align: right;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-control);
    float: right;
    margin-top: -2px;
    margin-right: -2px;
    transition: background 0.15s;
}

.cal-cell.today .cal-day-num {
    /* Hoje: contorno em vez de bloco cheio. */
    color: var(--color-3);
    background: transparent;
    font-weight: 800;
    box-shadow: inset 0 0 0 1.5px var(--color-3);
}

/* --- A SEMANA COM LINHAS DE HORA --------------------------------------

   Mesma grade de #calendar-grid, com uma coluna de horas na frente dos sete
   dias (grid-template-columns: 70px repeat(7, 1fr), definido no JS junto com
   o resto da grade).

   A ALTURA DA LINHA E O CONTEUDO, e nao ha min-height nem max-height aqui de
   proposito: numa grade CSS todas as celulas de uma linha sobem para a altura
   da mais alta, entao a hora com quatro reunioes fica alta e a hora vazia fica
   na altura do proprio rotulo. Nao e o mesmo caso da .cal-cell do mes, que tem
   max-height e rola por dentro - la a celula e um dia inteiro e cresceria sem
   fim; aqui e uma hora so de um dia so. */
.week-hour {
    padding: 8px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-elevated);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px dashed var(--border-light);
}

.week-cell {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px dashed var(--border-light);
    background: var(--bg-surface);
    /* Sem isto a celula vazia herda 'stretch' e fica com a altura da linha,
       o que e o que se quer - mas a de conteudo empurraria os chips para
       ocupar a sobra. Os chips ficam no topo, alinhados entre os dias. */
    justify-content: flex-start;
    min-width: 0;
    transition: background 0.15s;
}

.week-cell:hover {
    background: var(--hover-bg);
}

.week-cell.today {
    background: rgba(114, 78, 145, 0.05);
}

body.dark-mode .week-cell.today {
    background: rgba(114, 78, 145, 0.12);
}

/* O canto onde a coluna das horas encontra a linha dos dias. */
.cal-header-cell.week-corner {
    background: var(--surface-elevated);
}

/* O numero do dia mora no cabecalho na visao por semana: a coluna do dia
   deixou de ser uma celula so, entao nao ha mais onde por o .cal-day-num. */
.week-header-dia {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--text-primary);
}

.cal-header-cell.today,
.cal-header-cell.today .week-header-dia {
    color: var(--color-3);
}

.cal-header-cell.fora-do-mes {
    opacity: 0.5;
}

.day-view-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-surface);
    overflow-y: auto;
    box-shadow: var(--shadow-sm);
    padding-bottom: 20px;
}

.day-view-row {
    display: flex;
    min-height: 70px;
}

.day-view-hour {
    width: 70px;
    flex-shrink: 0;
    padding: 16px 12px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    border-right: 1px solid var(--border-light);
    border-bottom: 1px dashed var(--border-light);
}

.day-view-content {
    flex: 1;
    padding: 8px 16px;
    border-bottom: 1px dashed var(--border-light);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--bg-surface);
    padding: 40px;
    border-radius: var(--r-surface);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-control);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: var(--transition-smooth);
}

.form-control:focus {
    box-shadow: 0 0 0 4px rgba(114, 78, 145, 0.15);
    border-color: var(--color-3);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 32px;
}

#view-clientes th.col-name {
    width: 20%;
}

#view-clientes th.col-role {
    width: 11%;
}

#view-clientes th.col-actions {
    width: 14%;
}

.empty-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    border: 2px dashed rgba(0, 0, 0, 0.08);
    border-radius: var(--r-surface);
    background: rgba(0, 0, 0, 0.015);
    text-align: center;
    color: var(--text-muted);
}

body.dark-mode .empty-state-box {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.015);
}

.empty-state-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.empty-state-text {
    font-weight: 600;
    font-size: 14px;
}

/* Timeline Widget */
.timeline-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 12px 8px 4px;
}

.timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 24px;
    bottom: -16px;
    width: 2px;
    background: rgba(114, 78, 145, 0.15);
}

body.dark-mode .timeline-item:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.1);
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-3);
    margin-top: 5px;
    box-shadow: 0 0 0 4px rgba(114, 78, 145, 0.1);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    overflow: hidden;
}

.timeline-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Health Bar Widget */
.health-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 12px 12px 12px 0;
}

.health-bar-container {
    width: 100%;
    height: 24px;
    background: var(--chart-track);
    border-radius: var(--r-surface);
    display: flex;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.health-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.health-legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.health-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 8px;
}

/* Ajustes no ApexCharts */
.apexcharts-tooltip {
    border-radius: var(--r-surface) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--border-light) !important;
    background: var(--bg-surface) !important;
    padding: 12px 16px !important;
}

.apexcharts-tooltip-title {
    background: transparent !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    font-family: 'Inter', sans-serif !important;
}

.apexcharts-tooltip-text {
    color: var(--text-secondary) !important;
    font-family: 'Inter', sans-serif !important;
}


/* ── Layout da Visao Geral (estava embutido no <main> do dashboard) ── */

.dashboard-overview-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 0;
}

.dashboard-overview-top>div {
    min-width: 0;
}

.kpi-square-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}

/* O padding vem do proprio .kpi-card, em views.css. Antes era redefinido
   aqui tambem, e o mesmo cartao tinha duas medidas declaradas. */
.kpi-square-grid .kpi-card {
    gap: 12px;
}

@media (max-width: 1180px) {
    .kpi-square-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .kpi-square-grid { grid-template-columns: 1fr; }
}


/* ── CORES DOS STATUS ────────────────────────────────────────────────────
   Ficam aqui, e nao no JS, por dois motivos: o estilo inline que existia
   antes vencia qualquer regra de tema, e o mesmo codigo aparece em tres
   telas diferentes - agora tem uma fonte so.
   Os numeros (1, 22, 4) nao mudam: sao a linguagem que a equipe ja tem. */

[data-st="1"]  { background: #E2E2E2; color: #111827; }
[data-st="11"] { background: #CCCCCC; color: #111827; }
[data-st="2"]  { background: #FFF2CC; color: #111827; }
[data-st="22"] { background: #FFE699; color: #111827; }
[data-st="3"]  { background: #F8CECC; color: #111827; }
[data-st="33"] { background: #EA9999; color: #111827; }
[data-st="4"]  { background: #D5E8D4; color: #111827; }
[data-st="44"] { background: #B9E0A5; color: #111827; }
[data-st=""]   { background: transparent; color: var(--text-muted); }

.status-cell[data-st], .status-badge[data-st] { border: 1px solid rgba(0, 0, 0, 0.08); }

/* No escuro, as cores claras ficavam cerca de 190x mais luminosas que o
   fundo - uma tela do Painel virava uma parede de pontos acesos. Mesmo
   matiz, luminosidade baixa, texto claro; contraste interno acima de 7:1. */
body.dark-mode [data-st="1"]  { background: #33343A; color: #D6D8DD; }
body.dark-mode [data-st="11"] { background: #3E4046; color: #E4E6EB; }
body.dark-mode [data-st="2"]  { background: #3D3218; color: #F0D28C; }
body.dark-mode [data-st="22"] { background: #4A3C18; color: #FFE08A; }
body.dark-mode [data-st="3"]  { background: #3F2422; color: #F0A9A4; }
body.dark-mode [data-st="33"] { background: #4C2A27; color: #F5B5AF; }
body.dark-mode [data-st="4"]  { background: #22351F; color: #A3D49C; }
body.dark-mode [data-st="44"] { background: #2A4024; color: #B4DFA6; }
body.dark-mode [data-st=""]   { background: transparent; }

body.dark-mode .status-cell[data-st],
body.dark-mode .status-badge[data-st] { border-color: rgba(255, 255, 255, 0.10); }

/* Etiqueta de status fora do Painel: mostra o nome, nao o codigo. */
.chip-status {
    padding: 5px 10px;
    border-radius: var(--r-control);
    font-weight: 600;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}


/* Remover cliente: mora ao lado do nome, na primeira coluna. Antes ficava
   depois de todas as outras e saia da tela. Discreto ate o ponteiro chegar
   perto - e uma acao destrutiva, nao merece destaque permanente. */
.btn-icone-remover {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 5px;
    border-radius: var(--r-control);
    opacity: 0;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

tr:hover .btn-icone-remover,
.btn-icone-remover:focus-visible { opacity: 1; }
.btn-icone-remover:hover { color: var(--accent-alert); background: var(--hover-bg); }

/* --- TELA USUARIOS E ACESSOS ------------------------------------------ */

#view-usuarios th.col-name    { width: 22%; }
#view-usuarios th.col-role    { width: 17%; }
#view-usuarios th.col-actions { width: 7%; }

/* Nota fixa da tela: explica que login e permissao sao dois cadastros
   diferentes. Fica visivel sempre porque e a confusao que essa tela
   naturalmente provoca, nao um aviso pontual. */
.nota-tela {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--r-surface);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.nota-tela i {
    font-size: 18px;
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Faixa de alerta: so aparece quando alguem entrou sem cadastro. */
.faixa-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--glow-warm);
    border: 1px solid var(--accent-warm);
    border-radius: var(--r-surface);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
}

.faixa-aviso i {
    font-size: 20px;
    color: var(--accent-warm);
    flex-shrink: 0;
}

.faixa-aviso span { flex: 1; }

.legenda-papel {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.legenda-papel strong { color: var(--text-secondary); }

/* O login nao e editavel: a chave do registro no banco vem dele, e
   troca-lo aqui criaria um registro orfao sem que nada avisasse. */
.user-login {
    font-size: 13px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.marca-voce {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--glow-primary);
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.celula-inativa {
    color: var(--text-muted);
    font-size: 13px;
    padding-left: 4px;
}

/* Analista sem vinculo: o sistema nao tem como saber quais sao os
   clientes dessa pessoa, entao a avaliacao viria vazia. Marcado na
   propria celula porque e ali que se resolve. */
.campo-pendente {
    border-color: var(--accent-warm) !important;
    background: var(--glow-warm) !important;
}

/* Cargos: marcacao multipla, nao escolha unica.

   Quem e editor de video E videomaker precisa das duas marcadas, entao um
   <select> nao serve. Um <select multiple> serviria, mas com oito cargos
   deixaria cada linha da tabela com a altura de um paragrafo. O menu abre
   por cima do resto - por isso o table-wrapper desta tela tem
   overflow-y: visible. */
.cargos-menu {
    position: relative;
    min-width: 130px;
}

.cargos-menu>summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    background: var(--bg-body);
    border-radius: var(--r-control);
    font-size: 12px;
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.cargos-menu>summary::-webkit-details-marker {
    display: none;
}

.cargos-menu[open]>summary {
    border-color: var(--color-5);
    box-shadow: 0 0 0 3px rgba(248, 198, 48, 0.25);
}

.cargos-opcoes {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-control);
    box-shadow: var(--shadow-md);
}

.cargos-opcoes label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: var(--r-control);
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.cargos-opcoes label:hover {
    background: var(--bg-body);
}

.cargos-opcoes input {
    cursor: pointer;
}

.tabela-vazia {
    text-align: center;
    padding: 32px;
    color: var(--text-muted);
    font-size: 13px;
}

/* O input de .input-bare e width:100%, entao a marca "voce" quebrava linha
   e deixava so aquela linha mais alta. Em inline-flex o bloco encolhe ate o
   tamanho natural do input e a marca fica colada no nome, nao no fim da
   coluna - onde parecia pertencer ao login do vizinho. */
.cel-nome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}

.cel-nome .input-bare {
    width: auto;
    min-width: 0;
}

/* Selo de ambiente de teste. Deliberadamente em amarelo de alerta e nao na
   cor da marca: ele existe para interromper quem esta distraido. */
.selo-ambiente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--accent-warm);
    color: #22162B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.selo-ambiente i { font-size: 14px; }

/* --- AS TRES FAIXAS DO RADAR DE CARTEIRA ------------------------------

   Mesma disciplina do bloco [data-st] acima, e pelo mesmo motivo: os
   tokens --accent-* nao sao redefinidos no tema escuro. Usar --accent-alert
   cru num cartao escuro repete a "parede de pontos acesos" que o comentario
   dali descreve.

   TRES PAPEIS por faixa, e nao um. A cor que funciona como fundo de chip
   nao funciona como linha de 2px sobre --bg-surface: no claro a linha
   precisa ser mais escura que o fundo do chip, no escuro mais clara. O
   poligono do radar usa 'linha'; o chip e o cartao usam 'bg' e 'fg'. */
:root {
    --faixa-risco-bg:    #FBE3E8;  --faixa-risco-fg:    #8A1F35;  --faixa-risco-linha:    #C2334F;
    --faixa-atencao-bg:  #FDF0CE;  --faixa-atencao-fg:  #6B4B06;  --faixa-atencao-linha:  #B98908;
    --faixa-saudavel-bg: #DAF2E8;  --faixa-saudavel-fg: #0B5540;  --faixa-saudavel-linha: #12876A;
}
body.dark-mode {
    --faixa-risco-bg:    #3F2229;  --faixa-risco-fg:    #F0A9B4;  --faixa-risco-linha:    #E5788D;
    --faixa-atencao-bg:  #3D3218;  --faixa-atencao-fg:  #F0D28C;  --faixa-atencao-linha:  #E0B443;
    --faixa-saudavel-bg: #16332B;  --faixa-saudavel-fg: #8FD8BE;  --faixa-saudavel-linha: #3FBF95;
}

[data-faixa="risco"]    { background: var(--faixa-risco-bg);    color: var(--faixa-risco-fg); }
[data-faixa="atencao"]  { background: var(--faixa-atencao-bg);  color: var(--faixa-atencao-fg); }
[data-faixa="saudavel"] { background: var(--faixa-saudavel-bg); color: var(--faixa-saudavel-fg); }

.faixa-selo {
    display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Grupo segmentado. O calendario monta isto com estilo inline desde
   sempre; o radar precisa do mesmo controle em tres lugares (Carteira /
   Histórico, as janelas e as cinco notas do modal), e tres copias do
   mesmo inline seria a quarta. A regra fica aqui, e o calendario pode
   passar a usa-la quando alguem mexer nele. */
.cal-view-switcher {
    background: var(--bg-surface); border: 1px solid var(--border-light);
    border-radius: var(--r-control); display: inline-flex; overflow: hidden;
    box-shadow: var(--shadow-sm); flex: none;
}
.cal-view-switcher .cal-toggle + .cal-toggle { border-left: 1px solid var(--border-light); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* Chip nao pressionado apaga em vez de sumir: a contagem de cada faixa
   continua legivel mesmo quando o filtro esta noutra. */
.chips .chip[aria-pressed="false"] { opacity: .5; }
.chips .chip[aria-pressed="true"] { border-color: var(--text-primary); opacity: 1; font-weight: 700; }

/* Selo de PRODUCAO em maquina local: o oposto do amarelo de teste. Ele
   aparece quando a copia local ficou apontando para o banco real - o
   estado logo depois de uma virada, em que "e local, pode clicar" e
   exatamente a suposicao errada. */
.selo-ambiente.selo-producao {
    background: var(--accent-alert);
    color: #FFF;
}

/* ─── MODAL DE AGENDAMENTO ───────────────────────────────────────────────

   O modal antigo era uma coluna de campos com 40px de respiro em volta e
   90vh de altura maxima: num notebook ele encostava em cima e embaixo, e
   o botao de salvar ficava abaixo da dobra.

   Aqui a caixa e tres partes empilhadas - cabecalho, miolo, rodape - e
   quem rola e SO o miolo. Cabecalho e rodape nao precisam de sticky
   porque nao estao dentro do que rola: sao irmaos dele. Sticky dentro de
   um elemento que e ao mesmo tempo grade e area de rolagem se comporta de
   um jeito que ninguem quer depurar as onze da noite. */
.modal-agenda {
    max-width: 660px;
    max-height: 82vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* O modal e item de flex do overlay, e item de flex nasce com
       min-width: auto - ele cresce ate caber o conteudo e passa por cima
       do width: 100%. Numa tela estreita a folha ficava mais larga que o
       telefone, com metade dos campos fora da tela. O mesmo vale para as
       tres faixas abaixo, cada uma item de flex desta caixa. */
    min-width: 0;
}

.modal-agenda-header,
.modal-agenda-body,
.modal-agenda-footer {
    min-width: 0;
}

.modal-agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.modal-agenda-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}

.modal-agenda-body {
    padding: 24px 28px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    align-content: start;
}

/* Campo que ocupa a linha inteira. O resto divide a linha em dois. */
.modal-agenda-body .am-wide {
    grid-column: 1 / -1;
}

/* 20px do padrao viravam 140px de altura so de respiro entre os nove
   campos - o suficiente para empurrar o rodape para fora da tela. */
.modal-agenda-body .form-group {
    margin-bottom: 14px;
}

.modal-agenda-body .form-control {
    padding: 10px 13px;
}

/* O rotulo do sistema reserva 10px abaixo de si. Sao nove rotulos: 90px
   de altura em respiro que ninguem pediu, num formulario que ja e alto. */
.modal-agenda-body .form-group > label {
    margin-bottom: 6px;
    font-size: 11px;
}

/* min-width: auto e o padrao de item de flex e de grade, e ele impede o
   campo de encolher abaixo do proprio conteudo. Tres campos de data lado
   a lado tem largura intrinseca de uns 450px - mais do que a tela de um
   celular - e o modal inteiro esticava junto, cortando metade dos campos
   para fora da tela. */
.modal-agenda-body > *,
.am-datas > div {
    min-width: 0;
}

.modal-agenda-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 28px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-surface);
    flex-shrink: 0;
}

.am-btn-cancelar {
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border: 1px solid var(--border-light);
}

.am-btn-salvar {
    background: var(--accent-primary);
    padding: 11px 22px;
}

/* Data / Inicio / Termino: uma linha so, e cada um com o seu rotulo. */
.am-datas {
    display: flex;
    gap: 12px;
}

.am-datas > div {
    flex: 1;
}

/* A alcinha da folha. No desktop nao existe: la o modal e uma caixa
   centrada, e alcinha em caixa centrada nao quer dizer nada. */
.am-pegador {
    display: none;
}

/* ─── TIPO: quatro pilulas no lugar de um select ─── */
.am-tipos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.am-tipo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-control);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.am-tipo i {
    font-size: 16px;
}

.am-tipo:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.am-tipo[aria-checked="true"] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

/* Dois <label> deste modal NAO sao rotulo de campo, sao o proprio
   controle: o interruptor da sala e cada linha da lista de participantes.
   '.form-group label' os alcanca com especificidade maior que a das
   classes abaixo e impunha caixa alta, display:block e 10px de margem -
   com display:block o trilho do interruptor virava um span inline, e
   inline ignora width e height: o controle simplesmente nao aparecia. */
.modal-agenda-body .am-switch {
    display: flex;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 0;
    font-weight: 600;
}

/* ─── SALA: um interruptor, nao uma caixinha ─── */
.am-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    /* Casa a altura com a do .form-control ao lado, para os dois campos
       da linha terminarem juntos. */
    padding: 10px 0;
}

.am-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.am-switch-trilho {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: var(--r-pill);
    background: var(--chart-track);
    border: 1px solid var(--border-dark);
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.am-switch-trilho::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.am-switch input:checked + .am-switch-trilho {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.am-switch input:checked + .am-switch-trilho::after {
    transform: translateX(18px);
}

/* O foco vive no input, que e invisivel - sem isto o teclado nao mostra
   onde esta. */
.am-switch input:focus-visible + .am-switch-trilho {
    box-shadow: 0 0 0 4px var(--glow-primary);
}

.am-switch-texto {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ─── PARTICIPANTES: um chip por pessoa ─────────────────────────────────

   Era uma caixa com fichas dentro e, embaixo, uma lista de caixinhas de
   marcar com busca - tres controles para uma pergunta so, e nenhum deles
   dizia de longe quem estava dentro.

   Aqui a pessoa E o chip: clicar liga e desliga. O tique nasce com
   largura zero e cresce ao ser marcado, entao o chip escolhido fica
   fisicamente maior que os outros - a leitura acontece antes da leitura
   do texto. */
.am-part-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.am-part-conta {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-legivel);
}

.am-pessoas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Dezenove pessoas nao cabem sem rolar, e crescer para fora seria
       empurrar o rodape do modal para fora da tela outra vez. */
    max-height: 118px;
    overflow-y: auto;
    padding: 2px;
}

.chip-pessoa {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1.5px solid var(--border-dark);
    border-radius: var(--r-pill);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}

.chip-pessoa:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.chip-pessoa:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--glow-primary);
}

.chip-pessoa i {
    width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 15px;
    transition: var(--transition-fast);
}

.chip-pessoa[aria-pressed="true"] {
    border-color: var(--accent-legivel);
    background: var(--surface-elevated);
    color: var(--accent-legivel);
}

.chip-pessoa[aria-pressed="true"] i {
    width: 15px;
    margin-right: 6px;
    opacity: 1;
}

/* Quem nao tem mais acesso: continua legivel, mas dito. */
.chip-pessoa.fora {
    font-style: italic;
    opacity: 0.8;
}

/* ─── NO CELULAR O MODAL VIRA FOLHA ─────────────────────────────────────

   Caixa centrada e um gesto de mouse: ela supoe uma tela com sobra em
   volta. Num celular a sobra nao existe, e a caixa vira um retangulo
   flutuando com margem de 8px - que e o que havia aqui.

   A folha sobe da borda de baixo, encostada nos dois lados, com as
   quinas de cima arredondadas e uma alcinha. Alem de ser o gesto que a
   pessoa ja conhece do sistema operacional, ela poe os campos mais perto
   do polegar e devolve ao formulario a largura inteira da tela. */
@media (max-width: 640px) {
    .modal-overlay-folha {
        align-items: flex-end;
        /* O respiro em volta sai: a folha encosta. */
        backdrop-filter: blur(4px);
    }

    .modal-agenda {
        max-width: none;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        /* A borda clara so faz sentido quando ha fundo dos dois lados. */
        border-left: none;
        border-right: none;
        border-bottom: none;
        animation: subirFolha 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .am-pegador {
        display: block;
        width: 36px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: var(--r-pill);
        background: var(--border-dark);
        flex-shrink: 0;
    }

    .modal-agenda-header {
        padding: 12px 20px 14px;
    }

    .modal-agenda-header h2 {
        font-size: 17px;
    }

    /* A grade continua de duas colunas, mas agora quase tudo atravessa as
       duas: num celular so o par Sala + Recorrencia e curto o bastante
       para dividir a linha - e dividi-la economiza uma faixa inteira de
       altura no formulario de criacao. */
    .modal-agenda-body {
        padding: 16px 20px;
        gap: 0 12px;
    }

    .modal-agenda-body > .form-group {
        grid-column: 1 / -1;
        margin-bottom: 12px;
    }

    .modal-agenda-body > #am-group-sala,
    .modal-agenda-body > #am-group-recurrence {
        grid-column: span 1;
    }

    .modal-agenda-footer {
        padding: 12px 20px;
        /* Encosta no fim da tela no iPhone sem cair sob a barra de baixo. */
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        /* O rodape fica POR CIMA do que ainda rola, e sem sombra o corte
           parecia acidente: o ultimo campo aparecia serrado ao meio sem
           nada dizendo que havia mais embaixo. */
        box-shadow: 0 -10px 20px -14px rgba(18, 9, 26, 0.45);
    }

    /* O dedo precisa de alvo maior do que o ponteiro, entao os botoes
       crescem mesmo com a altura apertando: quem manda aqui e o polegar. */
    .modal-agenda-footer button {
        flex: 1;
        justify-content: center;
        padding: 13px 16px;
    }

    .am-tipos {
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
    }

    .am-tipo {
        padding: 10px 6px;
        font-size: 12px;
    }

    /* Data inteira numa linha, e as duas horas dividindo a de baixo. Com
       os tres lado a lado o campo de data encolhe ate a data virar
       reticencias - e data pela metade nao e informacao. */
    .am-datas {
        flex-wrap: wrap;
    }

    .am-datas .am-data {
        flex-basis: 100%;
        margin-bottom: 14px;
    }

    .am-datas .am-hora {
        flex-basis: 0;
        min-width: 120px;
    }

    .am-pessoas {
        max-height: 104px;
    }
}

@keyframes subirFolha {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}


/* ─── FILTROS DA AGENDA ──────────────────────────────────────────────────

   Os tres eram <select class="filter-select"> soltos numa caixa: o mesmo
   controle cinza do resto do sistema, sem dizer o que filtrava nem
   avisar quando estava filtrando. Numa tela em que o filtro ESCONDE
   compromissos, "esta ligado?" e a pergunta mais importante da barra.

   Agora cada um tem o rotulo encaixado na propria borda - o nome do
   campo nao ocupa linha e nao some quando ha valor escolhido - e o
   estado ligado se anuncia: borda, rotulo e texto na cor de acento, com
   um ponto ao lado do rotulo. */
.filtros-agenda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.filtro-campo {
    position: relative;
}

.filtro-campo > label {
    position: absolute;
    top: -7px;
    left: 11px;
    z-index: 1;
    padding: 0 6px;
    /* O rotulo corta a borda; para isso ele precisa do fundo DA TELA, e
       nao do fundo do campo. */
    background: var(--bg-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition-fast);
}

.filtro-campo > select {
    /* appearance: none tira a seta do sistema, que nao acompanha nem o
       tema escuro nem o raio de canto do resto. A nossa vem no <i>. */
    appearance: none;
    -webkit-appearance: none;
    min-width: 176px;
    padding: 12px 38px 12px 15px;
    border: 1.5px solid var(--border-dark);
    border-radius: var(--r-control);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
}

.filtro-campo > i {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition-fast);
}

.filtro-campo > select:hover {
    border-color: var(--accent-primary);
}

.filtro-campo > select:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--glow-primary);
}

/* Ligado. A classe entra pelo JS, em aplicarFiltrosNaBarra(). */
.filtro-campo.ativo > select {
    border-color: var(--accent-legivel);
    color: var(--accent-legivel);
    background: var(--surface-elevated);
}

.filtro-campo.ativo > label,
.filtro-campo.ativo > i {
    color: var(--accent-legivel);
}

/* O ponto: quem passa os olhos pela barra ve que ha filtro ligado sem
   precisar ler os tres campos. */
.filtro-campo.ativo > label::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--accent-legivel);
    vertical-align: 1px;
}

.filtro-limpar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px dashed var(--border-dark);
    border-radius: var(--r-control);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filtro-limpar:hover {
    border-color: var(--accent-alert);
    border-style: solid;
    color: var(--accent-alert);
}

.filtro-limpar i {
    font-size: 15px;
}

@media (max-width: 640px) {
    .filtros-agenda {
        gap: 12px;
    }

    .filtro-campo {
        flex: 1 1 100%;
    }

    .filtro-campo > select {
        width: 100%;
    }
}