/*
 * Prime Hub — sistema visual próprio, sem depender do Bootstrap.
 * Estética inspirada no Material Design (Google): paleta índigo/roxa,
 * elevação em camadas (sombras suaves), cantos arredondados, tipografia
 * Roboto. Os nomes de classe seguem o mesmo vocabulário usado nas telas
 * (btn, card, modal, nav-tabs, row/col-*, etc.) só pra não precisar reescrever
 * cada página -- a implementação por trás é 100% nossa.
 */

:root {
    --ph-primary: #4f46e5;
    --ph-primary-dark: #3730a3;
    --ph-primary-light: #eef2ff;
    --ph-on-primary: #ffffff;
    --ph-accent: #0891b2;
    --ph-success: #15803d;
    --ph-success-bg: #dcfce7;
    --ph-warning: #b45309;
    --ph-warning-bg: #fef3c7;
    --ph-danger: #b91c1c;
    --ph-danger-bg: #fee2e2;
    --ph-info: #1d4ed8;
    --ph-info-bg: #dbeafe;
    --ph-orange: #c2410c;
    --ph-orange-bg: #ffedd5;
    --ph-yellow: #a16207;
    --ph-yellow-bg: #fef9c3;
    --ph-neutral: #52525b;
    --ph-neutral-bg: #f4f4f5;
    --ph-surface: #ffffff;
    --ph-bg: #f3f4f8;
    --ph-border: #e4e4e7;
    --ph-text: #27272a;
    --ph-text-muted: #71717a;
    --ph-radius: 14px;
    --ph-radius-sm: 10px;
    --ph-gap: 1rem;
    --ph-elev-1: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .05);
    --ph-elev-2: 0 4px 14px rgba(15, 23, 42, .12);
    --ph-elev-3: 0 10px 30px rgba(15, 23, 42, .18);
}

/* ---------------------------------------------------------------- Base */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: var(--ph-bg);
    color: var(--ph-text);
    font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    /* Rodapé fixo: body em coluna ocupando pelo menos a viewport inteira,
       o <main> cresce pra preencher o espaço sobrando e o <footer> só fica
       "colado" embaixo quando o conteúdo é curto -- nunca flutua no meio
       da tela nem cria espaço em branco estranho. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

body > footer {
    flex-shrink: 0;
}

/* Rodapé (portal do cliente e administração) -- antes era só um texto cinza
   solto, com o mesmo fundo do resto da página, sem nenhuma linha separando
   onde a tela termina e o rodapé começa (print/reclamação do Kleber). Usa o
   MESMO gradiente do navbar (.navbar-dark.bg-dark), pra fechar a página com
   a mesma identidade visual do topo. */
.rodape-gradiente {
    background: linear-gradient(100deg, #1e1b4b 0%, #3730a3 55%, #6d28d9 100%);
    color: #e0e7ff;
    margin-top: 2rem;
}
.rodape-gradiente .rodape-link { color: #fff; font-weight: 500; }
.rodape-gradiente .rodape-link:hover { color: #fff; text-decoration: underline; }

a { color: var(--ph-primary); text-decoration: none; }
a:hover { color: var(--ph-primary-dark); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0 0 .5rem; color: var(--ph-text); }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 .75rem; }

hr { border: none; border-top: 1px solid var(--ph-border); margin: .75rem 0; }

/* --------------------------------------------------------- Utilitários */

.container-fluid { width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; margin: 0 auto; }

.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
/* Esse projeto não carrega o Bootstrap de verdade (só reimplementa um
   subconjunto das classes -- ver app.js) -- .text-truncate sozinho não
   fazia NADA sem essas 3 propriedades, então um texto longo (ex.: link do
   VSCode na aba T-Cloud) quebrava linha em vez de truncar com "...", e
   qualquer botão do lado acabava sobrepondo o texto quebrado. */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-none { display: none !important; }
.flex-wrap { flex-wrap: wrap; }
.flex-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-middle { vertical-align: middle; }
.gap-1 { gap: .35rem; }
.gap-2 { gap: .6rem; }
.gap-3 { gap: 1rem; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .35rem !important; }
.mb-2 { margin-bottom: .6rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-1 { margin-top: .35rem !important; }
.mt-2 { margin-top: .6rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.me-3 { margin-right: 1rem !important; }
.me-auto { margin-right: auto !important; }
.mb-lg-0 { margin-bottom: 0 !important; }

.p-0 { padding: 0 !important; }
.p-2 { padding: .6rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.py-2 { padding-top: .6rem !important; padding-bottom: .6rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-nowrap { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.text-muted { color: var(--ph-text-muted) !important; }
.text-dark { color: var(--ph-text) !important; }
.text-light, .text-white { color: #fff !important; }
.text-white-50 { color: rgba(255,255,255,.65) !important; }
.text-danger { color: var(--ph-danger) !important; }
.text-success { color: var(--ph-success) !important; }
.text-warning { color: var(--ph-warning) !important; }
.text-primary { color: var(--ph-primary) !important; }

.small { font-size: .82rem; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }

.border { border: 1px solid var(--ph-border) !important; }
.border-0 { border: none !important; }
.border-top { border-top: 1px solid var(--ph-border) !important; }
.border-bottom { border-bottom: 1px solid var(--ph-border) !important; }
.overflow-hidden { overflow: hidden !important; }
.shadow-lg { box-shadow: var(--ph-elev-3) !important; }
.rounded { border-radius: var(--ph-radius-sm) !important; }

/* ------------------------------------------------------------- Grid */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -.5rem;
}

.row > [class*="col-"] {
    padding: 0 .5rem;
    width: 100%;
}

.g-2 > [class*="col-"] { padding: .35rem; }
.g-3 > [class*="col-"] { padding: .5rem; }

.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
    .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

/* ------------------------------------------------------------ Botões */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid transparent;
    border-radius: var(--ph-radius-sm);
    padding: .55rem 1.1rem;
    font-size: .95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, filter .15s ease;
    line-height: 1.3;
    text-decoration: none;
}

.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-sm { padding: .35rem .75rem; font-size: .82rem; border-radius: 8px; }

.btn-dark {
    background-color: var(--ph-primary);
    border-color: var(--ph-primary);
    color: var(--ph-on-primary);
    box-shadow: var(--ph-elev-1);
}
.btn-dark:hover { background-color: var(--ph-primary-dark); border-color: var(--ph-primary-dark); color: #fff; }

.btn-secondary {
    background-color: var(--ph-neutral-bg);
    border-color: var(--ph-neutral-bg);
    color: var(--ph-neutral);
}
.btn-secondary:hover { background-color: #e4e4e7; }

.btn-outline-dark {
    background-color: transparent;
    border-color: var(--ph-primary);
    color: var(--ph-primary);
}
.btn-outline-dark:hover { background-color: var(--ph-primary); color: #fff; }

.btn-outline-light {
    background-color: transparent;
    border-color: rgba(255,255,255,.5);
    color: #fff;
}
.btn-outline-light:hover { background-color: rgba(255,255,255,.15); }

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--ph-border);
    color: var(--ph-neutral);
}

/* Botões outline coloridos (azul/laranja/vermelho/amarelo) -- faltavam no
   sistema (só existia o outline-dark índigo), então botões com essas
   classes ficavam sem estilo nenhum. Mesmo padrão visual do
   .btn-outline-dark: transparente com borda colorida, preenche com a cor
   sólida no hover. */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--ph-info);
    color: var(--ph-info);
}
.btn-outline-primary:hover { background-color: var(--ph-info); color: #fff; }

.btn-outline-orange {
    background-color: transparent;
    border-color: var(--ph-orange);
    color: var(--ph-orange);
}
.btn-outline-orange:hover { background-color: var(--ph-orange); color: #fff; }

.btn-outline-danger {
    background-color: transparent;
    border-color: var(--ph-danger);
    color: var(--ph-danger);
}
.btn-outline-danger:hover { background-color: var(--ph-danger); color: #fff; }

.btn-outline-warning {
    background-color: transparent;
    border-color: var(--ph-yellow);
    color: var(--ph-yellow);
}
.btn-outline-warning:hover { background-color: var(--ph-yellow); color: #fff; }

/* Tamanho padrão pra botões de ação em linha de tabela (Convite/Resetar/
   Bloquear/Editar) -- antes cada um tinha uma largura diferente porque só
   o texto definia o tamanho, ficava desalinhado. */
.btn-acao-linha { width: 106px; flex: 0 0 auto; justify-content: center; white-space: nowrap; }

/* Coluna de setor (select dentro de linha de tabela) e telefone -- sem
   isso o select fica largo só do tamanho do texto mais curto da tabela
   inteira e corta o nome do setor selecionado, e o telefone quebra linha. */
.select-setor-linha { min-width: 150px; }
.telefone-linha { white-space: nowrap; }

/* Tabela com muitas colunas (equipe/usuários) virando cards em telas
   pequenas -- em vez de forçar scroll horizontal ou espremer tudo, cada
   linha passa a ser um bloco com "rótulo: valor", empilhado. */
@media (max-width: 768px) {
    .tabela-cards-mobile thead { display: none; }
    .tabela-cards-mobile, .tabela-cards-mobile tbody, .tabela-cards-mobile tr { display: block; width: 100%; }
    .tabela-cards-mobile tbody tr {
        border: 1px solid var(--ph-border);
        border-radius: var(--ph-radius);
        margin-bottom: .75rem;
        padding: .5rem .75rem;
    }
    .tabela-cards-mobile tbody tr:hover { background-color: transparent; }
    .tabela-cards-mobile td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        border: none;
        padding: .35rem 0;
        text-align: right;
        white-space: normal;
    }
    .tabela-cards-mobile td[data-rotulo]::before {
        content: attr(data-rotulo);
        font-weight: 600;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--ph-text-muted);
        text-align: left;
        margin-right: auto;
    }
    .tabela-cards-mobile td:empty { display: none; }
    .tabela-cards-mobile td:not([data-rotulo]):has(img.avatar-circle) { justify-content: center; padding-bottom: .5rem; }
    .tabela-cards-mobile .btn-acao-linha { width: auto; flex: 1 1 0; }
}

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: var(--ph-radius-sm); }

/* Botões de ação de um chamado (Imprimir / Encerrar / Reabrir) -- Imprimir é
   uma ação secundária/neutra (cinza, menor), Encerrar/Reabrir são a ação
   principal da tela e cada uma tem cor própria (verde = concluir, âmbar =
   reabrir/atenção) pra não ficar tudo com a mesma cara de botão outline
   branco -- pedido do Kleber de nunca deixar botão com fundo branco. */
.chamado-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.btn-imprimir {
    background-color: var(--ph-neutral-bg);
    border-color: var(--ph-neutral-bg);
    color: var(--ph-neutral);
}
.btn-imprimir:hover { background-color: #e4e4e7; border-color: #e4e4e7; color: var(--ph-text); }

.btn-encerrar {
    background-color: var(--ph-success);
    border-color: var(--ph-success);
    color: #fff;
    font-weight: 600;
}
.btn-encerrar:hover { background-color: #14532d; border-color: #14532d; color: #fff; }

.btn-reabrir {
    background-color: var(--ph-warning);
    border-color: var(--ph-warning);
    color: #fff;
    font-weight: 600;
}
.btn-reabrir:hover { background-color: #7c3510; border-color: #7c3510; color: #fff; }

.select-responsavel-chamado { width: auto; min-width: 150px; display: inline-block; }

.btn-close {
    background: transparent;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ph-text-muted);
    padding: .25rem .5rem;
}
.btn-close::before { content: "\00d7"; }
.btn-close:hover { color: var(--ph-text); }

/* ------------------------------------------------------------- Forms */

.form-label { display: block; font-weight: 500; font-size: .85rem; margin-bottom: .3rem; color: var(--ph-text); }

.form-control, .form-select {
    display: block;
    width: 100%;
    padding: .55rem .75rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--ph-text);
    background-color: #fff;
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--ph-primary);
    box-shadow: 0 0 0 3px var(--ph-primary-light);
}

.form-control:disabled { background-color: var(--ph-neutral-bg); color: var(--ph-text-muted); }

.form-control-sm, .form-select-sm { padding: .35rem .6rem; font-size: .82rem; }

/* Campo de senha com botão de mostrar/ocultar (olho) -- não usa .input-group
   do Bootstrap (não carregamos o framework completo, só os ícones), então é
   um wrapper posicionado próprio em vez de depender de flexbox de terceiros. */
.campo-senha { position: relative; }
.campo-senha .form-control { padding-right: 2.6rem; }
.campo-senha .toggle-senha {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--ph-text-muted);
    padding: .3rem .5rem;
    line-height: 1;
    cursor: pointer;
}
.campo-senha .toggle-senha:hover { color: var(--ph-text); }

select.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2352525b' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: .7rem; padding-right: 2rem; }

/* -------------------------------------------------------------- Cards */

.card {
    background-color: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius);
}

.card-body { padding: 1.25rem; }
.card-header { padding: .9rem 1.25rem; border-bottom: 1px solid var(--ph-border); background-color: #fff; font-weight: 600; }
.card-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--ph-border); }

.card-stat {
    border: none;
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-1);
}

.card-conversa-chamado { box-shadow: var(--ph-elev-1); }
.form-resposta-chamado { border-top: 1px solid var(--ph-border); }

.card-stat .stat-value { font-size: 2rem; font-weight: 700; }

/* Acento colorido por contexto -- borda lateral fininha, pra cada card de
   número do dashboard ter uma "cor de assunto" própria em vez de tudo
   ficar preto/índigo igual (pedido do Kleber: "está morto, só azul"). */
.card-stat.acento-indigo { border-left: 4px solid var(--ph-primary); }
.card-stat.acento-ciano { border-left: 4px solid var(--ph-accent); }
.card-stat.acento-verde { border-left: 4px solid var(--ph-success); }
.card-stat.acento-ambar { border-left: 4px solid var(--ph-warning); }
.card-stat.acento-rosa { border-left: 4px solid #be123c; }
.card-stat.acento-violeta { border-left: 4px solid #7c3aed; }
.card-stat.acento-laranja { border-left: 4px solid #c2410c; }

/* Cards da tela inicial de Relatórios (relatorios.php) -- pedido do Kleber
   pra essa seção ser "glamorosa", então em vez do card-stat padrão (borda
   lateral fina) ganham um ícone grande num círculo com o mesmo gradiente
   do timbrado/navbar e sobem levemente no hover, convidando o clique. */
.relatorio-card { transition: transform .15s ease, box-shadow .15s ease; }
.relatorio-card:hover { transform: translateY(-3px); box-shadow: var(--ph-elev-2, 0 8px 20px rgba(0,0,0,.1)); }
.relatorio-card-icone {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e1b4b, #3730a3, #6d28d9);
    color: #fff; font-size: 1.5rem;
}

/* -------------------------------------------------- Cards de KPI (RAG) */
/* Aba "KPIs" geral + sub-aba "Métricas" de cada setor em cliente.php --
   pedido do Kleber: "cards, ter cores... igual ao Power BI". Grid próprio
   (não Bootstrap) pra controlar a quantidade de colunas via a var --kpi-
   cols, alterada pelo controle "Personalizar" (ver JS) e compartilhada
   entre TODOS os grids da página -- mudar uma vez vale pra aba geral e
   pra cada setor. */
.kpi-mes-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ph-text-muted);
    margin: 1.5rem 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ph-border);
}
.kpi-mes-titulo:first-child { margin-top: 0; }

.kpi-personalizar select { width: auto; }

.kpi-grade {
    display: grid;
    grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 1200px) { .kpi-grade { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) { .kpi-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .kpi-grade { grid-template-columns: 1fr !important; } }

.kpi-card {
    background: var(--ph-surface);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-1);
    border-left: 5px solid var(--kpi-cor, var(--ph-neutral));
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--ph-elev-2, 0 8px 20px rgba(0,0,0,.1)); }

.kpi-card-topo { display: flex; justify-content: space-between; align-items: center; }
.kpi-card-icone {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--ph-neutral-bg);
    background-color: color-mix(in srgb, var(--kpi-cor, var(--ph-neutral)) 15%, transparent);
    color: var(--kpi-cor, var(--ph-neutral));
    font-size: .95rem;
}
.kpi-card-periodo {
    font-size: .72rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: 999px;
    background-color: var(--ph-neutral-bg); color: var(--ph-text-muted);
}
.kpi-card-nome { font-size: .82rem; font-weight: 600; color: var(--ph-text-muted); }
.kpi-card-valor { font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: var(--ph-text); }
.kpi-card-barra { height: 6px; border-radius: 999px; background-color: var(--ph-neutral-bg); overflow: hidden; }
.kpi-card-barra-preenchida { height: 100%; border-radius: 999px; background-color: var(--kpi-cor, var(--ph-neutral)); }
.kpi-card-status { font-size: .78rem; font-weight: 600; color: var(--kpi-cor, var(--ph-neutral)); }
.kpi-card-status-neutro { color: var(--ph-text-muted); font-weight: 500; }
.kpi-card-meta { font-size: .76rem; color: var(--ph-text-muted); }
.kpi-card-obs { font-size: .76rem; color: var(--ph-text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kpi-card-rodape { display: flex; justify-content: flex-end; gap: .4rem; margin-top: auto; padding-top: .35rem; }

/* -------------------------------------------- Cards de Análise de IA */
/* Aba "Análise de Risco" em cliente.php -- mesma linguagem visual dos
   cards de KPI acima (acento colorido, ícone, hover-lift), corrigindo o
   card antigo que dependia de classes que não existiam neste CSS
   (col-lg-4/flex-column/bg-danger) e por isso saía com o layout quebrado
   (queixa real do Kleber, não só estética). */
.analise-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.analise-card {
    background: var(--ph-surface);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-1);
    border-left: 5px solid var(--analise-cor, var(--ph-primary));
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.analise-card:hover { transform: translateY(-2px); box-shadow: var(--ph-elev-2, 0 8px 20px rgba(0,0,0,.1)); }

.analise-card-topo { display: flex; align-items: center; gap: .5rem; }
.analise-card-icone {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--ph-primary-light);
    background-color: color-mix(in srgb, var(--analise-cor, var(--ph-primary)) 15%, transparent);
    color: var(--analise-cor, var(--ph-primary));
    font-size: .85rem;
}
.analise-card-escopo { flex: 1 1 auto; font-size: .82rem; font-weight: 600; color: var(--ph-text); min-width: 0; }
.analise-card-data { flex: 0 0 auto; font-size: .72rem; color: var(--ph-text-muted); text-align: right; }
.analise-card-nivel { font-size: .78rem; font-weight: 700; color: var(--analise-cor, var(--ph-primary)); }
.analise-card-preview { font-size: .84rem; color: var(--ph-text); margin: 0; flex-grow: 1; }
.analise-card-rodape { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .35rem; }

/* Círculo colorido com ícone -- usado no ícone do setor (icone_setor_html)
   e nos cards do dashboard (icone_circulo_html), mesmo componente visual
   reaproveitado nos dois lugares. */
.icone-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* Gráficos do dashboard (Chart.js) -- altura fixa pro canvas não colapsar
   pra 0px (Chart.js precisa de um container com altura definida pra
   calcular responsive:true corretamente) nem crescer sem limite. */
.chart-wrap { position: relative; height: 280px; }
.chart-wrap-sm { height: 220px; }
.chart-wrap-bar-h { height: 200px; } /* sobrescrita inline por cliente (ver dashboard.php) */

/* ------------------------------------------- Dashboard customizável
   Grid de 12 colunas (mesma unidade do Bootstrap) onde cada widget ocupa um
   "grid-column: span N" -- dá pra arrastar (reordenar) e escolher a largura
   por widget, e o arranjo é salvo POR USUÁRIO (dashboard.php). */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--ph-gap);
    align-items: stretch;
}

.dashboard-widget { min-width: 0; }

.dashboard-widget-controles {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    background-color: var(--ph-primary-light);
    border: 1px dashed var(--ph-primary);
    border-radius: var(--ph-radius-sm);
    padding: .4rem .6rem;
    margin-bottom: .5rem;
}

.dashboard-grid.modo-personalizar .dashboard-widget-controles { display: flex; }
/* No modo personalizar, o card fica "soltável" (leve contorno) mesmo fora
   do hover, pra ficar claro que a página inteira está em modo de edição. */
.dashboard-grid.modo-personalizar .dashboard-widget { outline: 1px dashed transparent; border-radius: var(--ph-radius); transition: outline-color .15s ease; }
.dashboard-grid.modo-personalizar .dashboard-widget:hover { outline-color: var(--ph-border); }
.dashboard-widget.arrastando { opacity: .4; }

.dashboard-widget-alca {
    cursor: grab;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ph-primary-dark);
    display: flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
}
.dashboard-widget-alca:active { cursor: grabbing; }

.dashboard-widget-tamanhos { display: flex; gap: .25rem; }
.dashboard-widget-tamanho-btn {
    border: 1px solid var(--ph-primary);
    background-color: #fff;
    color: var(--ph-primary);
    font-size: .74rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: var(--ph-radius-sm);
    cursor: pointer;
}
.dashboard-widget-tamanho-btn:hover { background-color: var(--ph-primary-light); }
.dashboard-widget-tamanho-btn.active { background-color: var(--ph-primary); color: #fff; }

/* Em telas pequenas o conceito de "largura em colunas" não ajuda em nada --
   cada widget ocupa a linha inteira, empilhado, igual o resto do site já
   faz em mobile. */
@media (max-width: 768px) {
    .dashboard-widget { grid-column: span 12 !important; }
}

/* Cards de visão geral clicáveis (ex.: portal/chamados.php) -- reseta o
   estilo padrão de link (sublinhado/azul) e dá um feedback visual de que
   são clicáveis, igual ao .card-cliente. */
a.filtro-card, a.filtro-card:hover {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
a.filtro-card:hover { box-shadow: var(--ph-elev-2); transform: translateY(-2px); }

.cliente-atencao { border-left: 4px solid var(--ph-danger); }

/* -------------------------------------------------------------- Badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
    font-size: .78rem;
    padding: .38em .7em;
    border-radius: 999px;
    letter-spacing: .01em;
    background-color: var(--ph-neutral-bg);
    color: var(--ph-neutral);
}

.bg-dark { background-color: var(--ph-primary) !important; color: #fff !important; }
.bg-primary { background-color: var(--ph-primary-light) !important; color: var(--ph-primary) !important; }
.bg-secondary { background-color: var(--ph-neutral-bg) !important; color: var(--ph-neutral) !important; }
.bg-success { background-color: var(--ph-success-bg) !important; color: var(--ph-success) !important; }
.bg-warning { background-color: var(--ph-warning-bg) !important; color: var(--ph-warning) !important; }
.bg-danger { background-color: var(--ph-danger-bg) !important; color: var(--ph-danger) !important; }
.bg-white { background-color: #fff !important; }
.bg-light { background-color: var(--ph-neutral-bg) !important; }

.badge-aberta, .badge-aberto { background-color: var(--ph-info-bg); color: var(--ph-info); }
.badge-andamento { background-color: #ede9fe; color: #6d28d9; }
.badge-concluida, .badge-resolvido { background-color: var(--ph-success-bg); color: var(--ph-success); }
.badge-cancelada, .badge-fechado { background-color: var(--ph-neutral-bg); color: var(--ph-neutral); }
/* Aguardando nós = precisa de ação AGORA, por isso a cor mais chamativa
   (mesma família do "alta prioridade"). Aguardando cliente = já respondemos,
   bola com o cliente, cor mais neutra/tranquila. */
.badge-aguardando-equipe { background-color: #ffe4e6; color: #be123c; }
.badge-aguardando-cliente { background-color: #ede9fe; color: #6d28d9; }

.prio-baixa { background-color: var(--ph-success-bg); color: var(--ph-success); }
.prio-media { background-color: var(--ph-warning-bg); color: var(--ph-warning); }
.prio-alta { background-color: #ffe4e6; color: #be123c; }
.prio-urgente { background-color: var(--ph-danger-bg); color: var(--ph-danger); animation: ph-pulse 2s infinite; }

@keyframes ph-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,28,28,.25); }
    50% { box-shadow: 0 0 0 4px rgba(185,28,28,.12); }
}

.badge-origem-cliente { background-color: var(--ph-primary-light); color: var(--ph-primary); }
.badge-origem-equipe { background-color: #ecfeff; color: var(--ph-accent); }

/* ------------------------------------------------------------- Alerts */

.alert {
    position: relative;
    padding: .9rem 2.5rem .9rem 1rem;
    border-radius: var(--ph-radius-sm);
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.alert-danger { background-color: var(--ph-danger-bg); color: var(--ph-danger); }
.alert-success { background-color: var(--ph-success-bg); color: var(--ph-success); }
.alert .btn-close { position: absolute; top: .5rem; right: .5rem; }

/* ------------------------------------------------------------ Navbar */

.navbar {
    display: flex;
    align-items: center;
    padding: .6rem 1.5rem;
}

.navbar-dark.bg-dark {
    background: linear-gradient(100deg, #1e1b4b 0%, #3730a3 55%, #6d28d9 100%) !important;
    color: #fff;
}

.navbar .container-fluid { display: flex; align-items: center; width: 100%; flex-wrap: wrap; gap: .5rem; }

.navbar-brand img { height: 28px; display: block; }

.navbar-toggler {
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    padding: .35rem .6rem;
    display: none;
    cursor: pointer;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
}
.navbar-toggler-icon::before, .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: #fff;
}
.navbar-toggler-icon::before { top: -6px; }
.navbar-toggler-icon::after { top: 6px; }

.navbar-collapse { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; gap: .5rem; }
.navbar-nav { display: flex; list-style: none; margin: 0; padding: 0; gap: .25rem; }
.nav-item { list-style: none; }

.navbar .nav-link {
    color: rgba(255,255,255,.85) !important;
    padding: .5rem .8rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 500;
}
.navbar .nav-link:hover { background-color: rgba(255,255,255,.1); color: #fff !important; text-decoration: none; }

.navbar-text { color: rgba(255,255,255,.85); display: inline-flex; align-items: center; gap: .4rem; }

@media (max-width: 991.98px) {
    .navbar-toggler { display: inline-flex; align-items: center; }
    .navbar-collapse { display: none; width: 100%; flex-direction: column; align-items: stretch; }
    .navbar-collapse.show { display: flex; }
    .navbar-nav { flex-direction: column; width: 100%; }
}

/* ------------------------------------------------------------- Tabs */

.nav-tabs {
    display: flex;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: 1px solid var(--ph-border);
    gap: .2rem;
}

.nav-tabs .nav-link {
    padding: .6rem 1rem;
    border-radius: 10px 10px 0 0;
    color: var(--ph-text-muted);
    font-weight: 500;
    border: 1px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.nav-tabs .nav-link:hover { color: var(--ph-primary); text-decoration: none; }

.nav-tabs .nav-link.active {
    color: var(--ph-primary);
    font-weight: 600;
    border-color: var(--ph-border) var(--ph-border) #fff;
    background-color: #fff;
}

.nav-tabs .nav-link.text-danger:hover,
.nav-tabs .nav-link.text-danger.active { color: var(--ph-danger) !important; }

.tab-pane { display: none; }
.tab-pane.show.active { display: block; }

@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar { height: 4px; }
    .nav-tabs .nav-item { flex-shrink: 0; }
}

/* ------------------------------------------------------------- Modal */

.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1050;
    overflow-y: auto;
    padding: 2rem 1rem;
}

.modal.show { display: block; }

.modal-dialog {
    max-width: 520px;
    margin: 0 auto;
}

.modal-content {
    background-color: #fff;
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-3);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ph-border);
}

.modal-title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.modal-body { padding: 1.25rem; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ph-border);
}

.modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(15, 23, 42, .5);
    z-index: 1040;
    opacity: 0;
    transition: opacity .12s ease;
}
.modal-backdrop.show { opacity: 1; }

body.modal-open { overflow: hidden; }

/* -------------------------------------------------------------- Table */

.table-responsive { overflow-x: auto; }

table.table {
    width: 100%;
    border-collapse: collapse;
}

table.table thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ph-text-muted);
    text-align: left;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ph-border);
}

table.table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid #f1f1f4;
}

table.table.table-sm td, table.table.table-sm th { padding: .5rem .75rem; }

table.table-hover tbody tr:hover { background-color: var(--ph-primary-light); }

.linha-cliente { cursor: pointer; }
.linha-cliente:focus { outline: 2px solid var(--ph-primary); outline-offset: -2px; }

/* -------------------------------------------------------------- Login */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1b4b, #4338ca);
    padding: 1rem;
}

.login-card {
    max-width: 400px;
    width: 100%;
    border-radius: 20px;
    border: none;
    box-shadow: var(--ph-elev-3);
}

.login-logo-wrap {
    background: linear-gradient(135deg, #1e1b4b, #4338ca);
    padding: 2rem 1rem;
    text-align: center;
}

/* ---------------------------------------------------------- Chamados */

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.toolbar .toolbar-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.toolbar .toolbar-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.busca-toolbar {
    width: 320px;
    max-width: 100%;
}

@media (max-width: 576px) {
    .toolbar .toolbar-filtros {
        margin-left: 0;
        width: 100%;
    }
    .toolbar .toolbar-filtros .btn,
    .toolbar .toolbar-filtros select,
    .toolbar .toolbar-filtros .busca-toolbar {
        flex: 1 1 auto;
        width: 100%;
    }
}

.chamado-card {
    border: none;
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-1);
    border-left: 5px solid var(--ph-neutral);
    transition: box-shadow .15s ease;
    overflow: hidden;
}

.chamado-card:hover { box-shadow: var(--ph-elev-2); }

/* Piscada rápida no card pra onde a tela rolou de volta sozinha depois de
   uma ação (responder/encerrar/trocar setor) -- confirma visualmente que é
   ESSE o chamado, não só a posição de scroll (ver scroll_para em cliente.php). */
.chamado-card.chamado-destacado {
    animation: chamado-destacado-flash 2s ease-out;
}
@keyframes chamado-destacado-flash {
    0%, 15% { box-shadow: 0 0 0 3px var(--ph-primary, #4f46e5), var(--ph-elev-2); }
    100% { box-shadow: var(--ph-elev-1); }
}

.badge-rotulo {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    color: #a1a1aa;
}

.chamado-card[data-prioridade="urgente"] { border-left-color: var(--ph-danger); }
.chamado-card[data-prioridade="alta"] { border-left-color: #be123c; }
.chamado-card[data-prioridade="media"] { border-left-color: var(--ph-warning); }
.chamado-card[data-prioridade="baixa"] { border-left-color: var(--ph-success); }

.avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
    color: #fff;
    flex-shrink: 0;
}

.avatar-circle.equipe { background-color: var(--ph-primary); }
.avatar-circle.cliente { background-color: var(--ph-success); }

.avatar-circle.avatar-foto {
    /* Fundo branco pra qualquer foto/PNG enviado com transparência (ex.:
       logo/desenho num fundo transparente) -- antes ficava com o fundo
       colorido de equipe/cliente (azul/verde) aparecendo atrás das partes
       transparentes da imagem, o que o Kleber reportou como "fundo azul"
       ao enviar um PNG como foto de perfil. Só vale pra foto de verdade;
       quem não tem foto continua com o círculo colorido + inicial. */
    background-color: #fff;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

.perfil-avatar .avatar-circle {
    width: 96px;
    height: 96px;
    font-size: 2.2rem;
}

/* Galeria de avatares pré-definidos (escolher em vez de subir foto) */
.galeria-avatares {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    max-width: 420px;
}

.avatar-opcao {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: none;
    cursor: pointer;
    line-height: 0;
    transition: transform .1s, border-color .1s;
}

.avatar-opcao img { width: 100%; height: 100%; border-radius: 50%; display: block; }

.avatar-opcao:hover { border-color: var(--ph-primary); transform: scale(1.08); }
.avatar-opcao.active { border-color: var(--ph-primary); }

/* Seletor de ícone de setor (modal Gerenciar setores) -- mesma ideia da
   galeria de avatares, só que com bootstrap-icons em vez de foto. */
.seletor-icone-setor {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.icone-opcao {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--ph-radius-sm);
    border: 2px solid var(--ph-border);
    background-color: var(--ph-surface);
    color: var(--ph-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform .1s, border-color .1s, color .1s;
}
.icone-opcao:hover { border-color: var(--ph-primary); transform: scale(1.05); }
.icone-opcao.active { border-color: var(--ph-primary); color: var(--ph-primary); background-color: var(--ph-primary-light); }

/* Chat de chamados (estilo WhatsApp) */

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0;
    max-height: 480px;
    overflow-y: auto;
}

.chat-linha {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    max-width: 100%;
}

.chat-linha.chat-direita { flex-direction: row-reverse; margin-left: auto; }
.chat-linha.chat-esquerda { margin-right: auto; }

.chat-bolha {
    max-width: min(75%, 520px);
    padding: .55rem .85rem;
    border-radius: 16px;
    position: relative;
    word-wrap: break-word;
}

.chat-esquerda .chat-bolha { border-bottom-left-radius: 4px; }
.chat-direita .chat-bolha { border-bottom-right-radius: 4px; }

/* Cor da bolha segue quem escreveu (cliente = verde, equipe = azul/roxo),
   não o lado em que aparece -- no portal do cliente as próprias mensagens
   dele ficam à direita (convenção normal de chat), então cor por posição
   ficava errada lá (cliente apareceria azul). */
.chat-bolha.bolha-cliente { background-color: var(--ph-success-bg); color: #14532d; }
.chat-bolha.bolha-equipe { background-color: var(--ph-primary); color: #fff; }

.chat-bolha .chat-autor { font-size: .72rem; font-weight: 700; opacity: .75; display: block; margin-bottom: .1rem; }
.chat-bolha.bolha-equipe .chat-autor { color: #e0e7ff; }
.chat-bolha .chat-hora { font-size: .68rem; opacity: .65; display: block; margin-top: .25rem; text-align: right; }

.chat-anexos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; max-width: 100%; }
.chat-anexos .anexo-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background-color: rgba(255,255,255,.6);
    border: 1px solid rgba(0,0,0,.08);
    color: inherit;
    text-decoration: none;
    max-width: 100%;
    min-width: 0;
}
/* Nome do arquivo trunca com "..." em vez de estourar a bolha -- antes um
   nome de arquivo longo e sem espaços (ex.: hash gerado por scanner/app de
   fotos) não tinha onde quebrar linha e ficava pra fora da bolha inteira,
   por cima do resto da conversa. Nome completo continua acessível via
   title="" (tooltip ao passar o mouse). */
.chat-anexos .anexo-link .anexo-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Segue quem ESCREVEU (bolha-equipe = fundo escuro, precisa de texto claro),
   não o LADO onde a bolha aparece -- antes usava .chat-direita, que é a
   posição, e no portal do cliente a própria mensagem do cliente (bolha
   clara/verde) também cai à direita, ficando com texto branco ilegível
   em cima do verde claro. */
.bolha-equipe .chat-anexos .anexo-link { background-color: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: #fff; }
.chat-anexos .anexo-link:hover { text-decoration: underline; }

.anexos-upload-preview { font-size: .78rem; color: #64748b; margin-top: .25rem; }

/* Widget de anexos "escolher -> enviar anexos -> lista embaixo" (ver
   inicializarAnexoStager() em app.js) -- substitui o <input type="file">
   nativo, que mostrava o rótulo no idioma do navegador (ex. "Escolher
   Ficheiros", português de Portugal) e não dava pra montar vários lotes
   antes de mandar a resposta do chamado. */
.anexos-stager-input { display: none; }
.anexos-stager-controles { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.anexos-stager-pendente { font-size: .8rem; }
.anexos-stager-erro { margin-bottom: .5rem; }
.anexos-stager-lista { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.anexos-stager-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    background-color: var(--ph-neutral-bg);
    border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm);
    font-size: .85rem;
}
.anexos-stager-item i { font-size: 1.15rem; color: var(--ph-primary); flex-shrink: 0; }
.anexos-stager-item-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexos-stager-item-tamanho { color: var(--ph-text-muted); font-size: .76rem; flex-shrink: 0; }
.anexos-stager-item-remover {
    border: none;
    background: transparent;
    color: var(--ph-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .2rem;
    flex-shrink: 0;
}
.anexos-stager-item-remover:hover { color: var(--ph-danger); }

/* Arrastar e soltar arquivo em qualquer lugar do form (não só no widget
   pequeno) -- ver listener de "dragenter"/"drop" no form em
   inicializarAnexoStager() (app.js). Destaca a área toda com uma borda
   tracejada, e o widget de anexo em si fica mais evidente ainda. */
form.anexos-arrastando { outline: 2px dashed var(--ph-primary); outline-offset: 4px; border-radius: var(--ph-radius-sm); }
form.anexos-arrastando .anexos-stager { background-color: var(--ph-primary-light); border-radius: var(--ph-radius-sm); }

/* Resumo com todos os anexos do chamado, no topo (fora de qualquer bolha de
   chat -- fundo neutro claro, então o link não pode herdar a cor branca
   usada dentro da bolha escura da equipe). */
.resumo-anexos-chamado { background-color: var(--ph-neutral-bg); border-radius: var(--ph-radius-sm); padding: .65rem .85rem; }
.resumo-anexos-titulo { font-size: .78rem; font-weight: 700; color: var(--ph-text-muted); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .02em; }
.resumo-reunioes-chamado { background-color: var(--ph-neutral-bg); border-radius: var(--ph-radius-sm); padding: .65rem .85rem; }
.reuniao-vinculada-item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; padding: .25rem 0; }
.reuniao-vinculada-item + .reuniao-vinculada-item { border-top: 1px solid var(--ph-border); }
.chat-anexos .anexo-link.anexo-link-resumo { background-color: #fff; border-color: var(--ph-border); color: var(--ph-text); }
.chat-anexos .anexo-link.anexo-link-resumo:hover { background-color: var(--ph-primary-light); }

/* Miniatura de verdade pra anexo que é imagem -- em vez de só nome+ícone
   (que obrigava abrir arquivo por arquivo pra saber o que era), mostra o
   preview e abre em tela grande no clique (.lightbox-anexo em app.js), sem
   baixar nada. */
.anexo-link-imagem { padding: 0 !important; border-radius: var(--ph-radius-sm) !important; background: none !important; border: none !important; overflow: hidden; }
.anexo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--ph-radius-sm); border: 1px solid var(--ph-border); cursor: zoom-in; display: block; }
.bolha-equipe .anexo-thumb { border-color: rgba(255,255,255,.3); }

.lightbox-anexo {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 20, .88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 2rem;
}
.lightbox-anexo.show { display: flex; }
.lightbox-anexo img { max-width: 90vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.lightbox-anexo-fechar {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .85;
}
.lightbox-anexo-fechar:hover { opacity: 1; }
.lightbox-anexo-legenda { position: absolute; bottom: 1.25rem; left: 0; right: 0; text-align: center; color: #fff; font-size: .85rem; opacity: .8; }

@media (max-width: 576px) { .chat-bolha { max-width: 85%; } }

/* Pills de filtro por status -- cada uma com a cor do status correspondente */

.filtro-pill {
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background-color: #f4f4f6 !important;
    color: #52525b !important;
    font-weight: 500;
}

.filtro-pill:hover { filter: brightness(0.96); }

.filtro-pill.filtro-pendentes { background-color: #fef3c7 !important; color: #b45309 !important; }
.filtro-pill.filtro-todos { background-color: var(--ph-neutral-bg) !important; color: var(--ph-neutral) !important; }
.filtro-pill.filtro-aberto { background-color: var(--ph-info-bg) !important; color: var(--ph-info) !important; }
.filtro-pill.filtro-aguardando_equipe { background-color: #ffe4e6 !important; color: #be123c !important; }
.filtro-pill.filtro-aguardando_cliente { background-color: #ede9fe !important; color: #6d28d9 !important; }
.filtro-pill.filtro-fechado { background-color: #f4f4f6 !important; color: #71717a !important; }

.filtro-pill.active { color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.filtro-pill.filtro-pendentes.active { background-color: #b45309 !important; }
.filtro-pill.filtro-todos.active { background-color: var(--ph-neutral) !important; }
.filtro-pill.filtro-aberto.active { background-color: var(--ph-info) !important; }
.filtro-pill.filtro-aguardando_equipe.active { background-color: #be123c !important; }
.filtro-pill.filtro-aguardando_cliente.active { background-color: #6d28d9 !important; }
.filtro-pill.filtro-fechado.active { background-color: #52525b !important; }

.btn-exportar { background-color: #15803d !important; border-color: #15803d !important; color: #fff !important; }
.btn-exportar:hover { background-color: #166534 !important; border-color: #166534 !important; color: #fff !important; }

/* --------------------------------------------------- Cards de clientes */

.grid-clientes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ph-gap);
}

.card-cliente {
    background-color: var(--ph-surface);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-1);
    padding: 1.1rem;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.card-cliente:hover, .card-cliente:focus {
    box-shadow: var(--ph-elev-2);
    transform: translateY(-2px);
    outline: none;
}

/* Nos cards de "clientes que precisam de atenção" (dashboard.php) o card
   inteiro é um link (<a>) em vez de uma div com JS -- reseta o estilo padrão
   de link pra não ficar sublinhado/azul por cima do visual de card. */
a.card-cliente, a.card-cliente:hover {
    text-decoration: none;
    color: inherit;
}

.card-cliente-logo-wrap {
    width: 100%;
    height: 92px;
    border-radius: var(--ph-radius-sm);
    background-color: var(--ph-neutral-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.card-cliente-logo {
    /* Retangular e grande de propósito -- muita empresa usa logo largo
       (retângulo), não quadrado/redondo, então o box acima é sempre
       retangular e a imagem entra inteira dentro dele sem cortar
       (object-fit: contain), só "sobra" fundo cinza-claro nas laterais
       quando o logo é mais quadrado do que o box. */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-cliente-logo-vazio {
    font-size: 1.8rem;
    color: var(--ph-text-muted);
}

/* Logo do cliente ao lado do nome, no topo da própria página dele
   (cliente.php) -- menor que o card da listagem, só um selo de identidade
   junto do título. */
.cliente-topo-logo {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    border-radius: var(--ph-radius-sm);
}

.card-cliente-topo {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.card-cliente-nome { min-width: 0; }
.card-cliente-nome .fw-semibold { font-size: 1rem; }

.card-cliente-contato { font-size: .85rem; color: var(--ph-text-muted); }

.card-cliente-modulos {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: auto;
}

.modulo-pill { font-size: .72rem; }
.modulo-pendente { background-color: var(--ph-warning-bg); color: var(--ph-warning); }
.modulo-ok { background-color: var(--ph-success-bg); color: var(--ph-success); }
.modulo-neutro { background-color: var(--ph-neutral-bg); color: var(--ph-neutral); }

/* Painel de setores independentes (cliente.php, aba Chamados, e portal do
   cliente pro usuário master) -- mesmo espírito visual do grid de clientes
   (.card-cliente acima), só que carrega insights de chamados em vez de
   dados cadastrais. */
.grid-setores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .75rem;
}

.card-setor {
    background-color: var(--ph-surface);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-elev-1);
    padding: 1rem;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border: 2px solid transparent;
}

.card-setor:hover, .card-setor:focus { box-shadow: var(--ph-elev-2); transform: translateY(-2px); outline: none; }
.card-setor.active { border-color: var(--ph-primary); }
.card-setor.setor-atencao { border-left: 4px solid var(--ph-danger); }

.card-setor-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
/* Nome de setor sem espaço (ex.: "Comercial/Suprimentos/Produção") não tem
   ponto de quebra "normal" pro navegador -- sem isso, vaza pra fora do
   card em vez de quebrar linha. min-width:0 é o que permite o item flex
   encolher menos que o conteúdo (senão overflow-wrap não faz nada aqui). */
.card-setor-topo span.fw-semibold { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.card-setor-responsavel { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ph-text-muted); }
.card-setor-insights { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }

/* Setor pode ter mais de um responsável -- avatares em fileira, levemente
   sobrepostos, em vez de um só avatar+nome como antes. */
.card-setor-responsavel-avatares { display: flex; }
.card-setor-responsavel-avatares .avatar-circle {
    width: 22px; height: 22px; font-size: .7rem;
    border: 2px solid var(--ph-surface);
    margin-left: -8px;
}
.card-setor-responsavel-avatares .avatar-circle:first-child { margin-left: 0; }

/* Cada responsável de setor, dentro do modal "Gerenciar setores" -- vários
   por setor agora, cada um com o próprio bloco de edição/avatar/convite. */
.responsavel-setor-item {
    background-color: var(--ph-neutral-bg);
    border-radius: var(--ph-radius-sm);
    padding: .75rem;
}

.card-setor-todos { align-items: center; justify-content: center; text-align: center; background-color: var(--ph-primary-light); }
.card-setor-todos .card-setor-topo { justify-content: center; }

/* Lista de setores dentro do modal "Gerenciar setores" (cliente.php) */
.setor-detalhe {
    border: 1px solid var(--ph-border);
    border-left: 4px solid var(--ph-primary);
    border-radius: var(--ph-radius);
    padding: .75rem 1rem;
}

.setor-detalhe + .setor-detalhe { margin-top: .5rem; }
.setor-detalhe summary { cursor: pointer; display: flex; align-items: center; gap: .6rem; list-style: none; }
.setor-detalhe summary .icone-circulo { width: 30px; height: 30px; font-size: .92rem; }
.setor-detalhe summary::-webkit-details-marker { display: none; }
.setor-detalhe summary::before { content: "\25B8"; color: var(--ph-text-muted); transition: transform .15s ease; }
.setor-detalhe[open] summary::before { transform: rotate(90deg); }
.setor-detalhe-corpo { padding-top: .75rem; margin-top: .5rem; border-top: 1px solid var(--ph-border); }

/* Preview do logo dentro do modal de cliente (aba Visualizar/Alterar) */
.logo-preview-alterar {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: contain;
    background-color: var(--ph-neutral-bg);
    flex-shrink: 0;
}

/* Aba "Visualizar" do modal de cliente -- antes era uma <dl> simples e crua
   (rótulo/valor empilhado sem hierarquia visual nenhuma). Reorganizado em
   blocos: cabeçalho com logo grande + nome + status, dois números em
   destaque (pendentes/total), grade de contato com ícone, e observações só
   aparecem quando existem (em vez de mostrar "-" pra todo cliente sem
   observação cadastrada). */
.ver-cliente-topo { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.ver-cliente-topo .logo-preview-alterar { width: 64px; height: 64px; }
.min-width-0 { min-width: 0; }

.ver-cliente-stats {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}
.ver-cliente-stat {
    flex: 1;
    background-color: var(--ph-neutral-bg);
    border-radius: var(--ph-radius-sm);
    padding: .75rem 1rem;
    text-align: center;
}
.ver-cliente-stat-valor { font-size: 1.6rem; font-weight: 700; color: var(--ph-text); line-height: 1.1; }
.ver-cliente-stat-rotulo { font-size: .75rem; color: var(--ph-text-muted); margin-top: .15rem; }
/* Contagem de urgentes numa linha PRÓPRIA, separada do número grande de
   pendentes -- antes vinha tudo junto dentro do mesmo elemento (fonte
   grande de 1.6rem), o número e o aviso de urgente ficavam espremidos e
   quebrando linha de um jeito ilegível num tile tão estreito. */
.ver-cliente-stat-urgente { font-size: .72rem; font-weight: 600; color: var(--ph-danger); margin-top: .35rem; }

.ver-cliente-info {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: 1rem;
}
.ver-cliente-info-item { display: flex; align-items: flex-start; gap: .65rem; }
.ver-cliente-info-item > i { font-size: 1rem; color: var(--ph-primary); margin-top: .2rem; flex-shrink: 0; width: 1.1rem; text-align: center; }
.ver-cliente-info-rotulo { font-size: .72rem; color: var(--ph-text-muted); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }

.ver-cliente-observacoes {
    background-color: var(--ph-warning-bg);
    border-radius: var(--ph-radius-sm);
    padding: .65rem .85rem;
    margin-bottom: .5rem;
    font-size: .9rem;
}

.logo-preview-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--ph-text-muted);
}

/* ---------------------------------------------------- Calendário mensal
   Componente reusável (aba Setores > Calendário, Visão geral > Agenda
   geral) -- grid de 7 colunas, colorido, pensado pra caber bem no celular
   (células menores em telas estreitas em vez de quebrar o layout). */
.calendario-mensal {
    background-color: var(--ph-surface);
    border-radius: var(--ph-radius);
    padding: .75rem;
    box-shadow: var(--ph-elev-1);
}

.calendario-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
    padding: 0 .25rem;
}

.calendario-modos {
    display: flex;
    gap: 2px;
    background-color: var(--ph-neutral-bg);
    border-radius: 8px;
    padding: 2px;
}

.calendario-modo-botao {
    border: none;
    background: transparent;
    color: var(--ph-text-muted);
    font-size: .74rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: 6px;
    cursor: pointer;
}
.calendario-modo-botao.active { background-color: var(--ph-primary); color: var(--ph-on-primary); }

.calendario-titulo-mes {
    font-weight: 600;
    text-transform: capitalize;
    color: var(--ph-text);
}

.calendario-nav-botao {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background-color: var(--ph-primary-light);
    color: var(--ph-primary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .1s;
}
.calendario-nav-botao:hover { background-color: var(--ph-primary); color: var(--ph-on-primary); }

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calendario-dia-semana {
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ph-text-muted);
    padding: .35rem 0;
}

.calendario-dia {
    min-height: 76px;
    background-color: var(--ph-neutral-bg);
    border-radius: 8px;
    padding: .3rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background-color .1s, transform .1s;
    border: 2px solid transparent;
}
.calendario-dia:hover { background-color: var(--ph-primary-light); transform: scale(1.03); z-index: 1; }
.calendario-dia.calendario-fora-do-mes { opacity: .4; }
.calendario-dia.calendario-hoje { border-color: var(--ph-primary); }

.calendario-numero-dia {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ph-text);
}
.calendario-dia.calendario-hoje .calendario-numero-dia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--ph-primary);
    color: var(--ph-on-primary);
}

.calendario-evento {
    font-size: .66rem;
    line-height: 1.3;
    padding: 1px 5px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 600;
}
.calendario-evento.calendario-evento-treinamento { background-color: #7c3aed; }
.calendario-evento.calendario-evento-reuniao { background-color: #0891b2; }
.calendario-evento.calendario-evento-conversa { background-color: #15803d; }
.calendario-evento.calendario-evento-auxilio { background-color: #b45309; }
.calendario-evento.calendario-evento-cancelado { background-color: var(--ph-neutral); text-decoration: line-through; opacity: .7; }

.calendario-mais-eventos {
    font-size: .64rem;
    color: var(--ph-text-muted);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* Visão Semana -- 7 colunas de altura livre (sem cap de eventos, resolve o
   "não consigo ver todas as reuniões daquele dia"). */
.calendario-semana-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: start;
}

.calendario-semana-coluna {
    background-color: var(--ph-neutral-bg);
    border-radius: 8px;
    padding: .4rem;
    min-height: 120px;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.calendario-semana-coluna.calendario-hoje { border-color: var(--ph-primary); }

.calendario-semana-cabecalho-dia {
    text-align: center;
    cursor: pointer;
    margin-bottom: 2px;
}
.calendario-semana-cabecalho-dia .calendario-semana-nome-dia { font-size: .68rem; text-transform: uppercase; color: var(--ph-text-muted); font-weight: 700; display: block; }
.calendario-semana-cabecalho-dia .calendario-numero-dia { font-size: .82rem; }

/* Visão Dia -- lista vertical, evento por linha, sem truncar título. */
.calendario-dia-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendario-evento-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    background-color: var(--ph-neutral-bg);
    cursor: pointer;
    border-left: 4px solid #7c3aed;
}
.calendario-evento-item.calendario-evento-reuniao { border-left-color: #0891b2; }
.calendario-evento-item.calendario-evento-conversa { border-left-color: #15803d; }
.calendario-evento-item.calendario-evento-auxilio { border-left-color: #b45309; }
.calendario-evento-item.calendario-evento-cancelado { border-left-color: var(--ph-neutral); opacity: .7; text-decoration: line-through; }
.calendario-evento-item .calendario-evento-item-hora { font-weight: 700; font-size: .78rem; color: var(--ph-text-muted); white-space: nowrap; }
.calendario-evento-item .calendario-evento-item-titulo { font-size: .86rem; }

.calendario-dia-vazio {
    color: var(--ph-text-muted);
    font-size: .8rem;
    text-align: center;
    padding: 1rem 0;
}

/* Celular: dias mais compactos, cabem 7 colunas sem quebrar/rolar. */
@media (max-width: 576px) {
    .calendario-dia { min-height: 58px; padding: .2rem; border-radius: 6px; }
    .calendario-numero-dia { font-size: .7rem; }
    .calendario-evento { font-size: .58rem; padding: 1px 3px; }
    .calendario-dia-semana { font-size: .62rem; padding: .25rem 0; }
    .calendario-grid { gap: 2px; }
}

/* ------------------------------------------------- Overlay de carregamento
   Mostrado em TODO submit de formulário (feedback visual imediato, pedido
   do Kleber depois de reclamar que os cliques "pareciam não fazer nada"
   enquanto a página recarregava) -- versão com estrelinhas de IA quando a
   ação específica é IA (mais lenta, chama API externa). */
.overlay-carregando {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.overlay-carregando.mostrando { opacity: 1; pointer-events: all; }

.overlay-carregando-caixa {
    background-color: var(--ph-surface);
    border-radius: var(--ph-radius);
    padding: 1.75rem 2.25rem;
    text-align: center;
    box-shadow: var(--ph-elev-3);
    max-width: 90vw;
}

.overlay-carregando-icone {
    font-size: 2.2rem;
    color: var(--ph-primary);
    display: inline-block;
    animation: overlay-pulso 1.1s ease-in-out infinite;
}
@keyframes overlay-pulso {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: .6; }
}

.overlay-carregando-texto {
    margin-top: .6rem;
    font-weight: 600;
    color: var(--ph-text);
}

.resultado-sugestao-ia .alert { margin-bottom: 0; }

/* ---------------------------------------------------- Barra de progresso
   Genérica (classes .progress/.progress-bar, ex.: % do checklist de
   implantação em cliente.php) -- reaproveitada também pelo overlay de
   upload abaixo. */
.progress {
    background-color: var(--ph-border);
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: var(--ph-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: width .2s ease;
}
.progress-bar.bg-success { background-color: var(--ph-success); }

/* Fase "Registrando..." do overlay de upload (ver app.js) -- os bytes já
   chegaram no servidor, mas ele ainda pode estar processando (ex.: vídeo
   aula grande) sem nenhum jeito de saber quantos % já foi. Uma barra 100%
   parada do mesmo jeito por vários minutos parece travada; esse listrado
   animado deixa claro que ainda tem coisa rodando. */
.progress-bar-processando {
    background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: progresso-processando-listras 1s linear infinite;
}
@keyframes progresso-processando-listras {
    from { background-position: 0 0; }
    to { background-position: 1rem 0; }
}

/* ------------------------------------------------------ Cards de vídeo aula
   Aba "Vídeo aulas" por setor (cliente.php) e grade do portal do cliente --
   pedido explícito do Kleber pra ficar "bem legal e atrativo" pros clientes,
   não só uma lista/tabela seca como Documentos. Miniatura é o próprio
   <video preload="metadata"> (o navegador mostra o primeiro quadro como
   imagem estática sem precisar gerar um thumbnail no servidor -- Hostinger
   shared hosting não tem ffmpeg disponível). */
.video-aula-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.video-aula-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .12); }
.video-aula-thumb {
    position: relative;
    height: 160px;
    background: linear-gradient(135deg, #1e293b, #334155);
    cursor: pointer;
    overflow: hidden;
}
.video-aula-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.video-aula-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    background: rgba(15, 23, 42, .15);
    transition: background .15s ease, transform .15s ease;
}
.video-aula-thumb:hover .video-aula-play-overlay { background: rgba(15, 23, 42, .35); transform: scale(1.08); }

/* Área de arrastar-e-soltar genérica pra escolher um arquivo (vídeo aula,
   arquivo de VPN etc.) -- pedido do Kleber pra não precisar procurar o
   arquivo numa janela de pastas toda vez. É um <label> em volta do
   <input type=file> (escondido) -- clicar em qualquer lugar da área já
   abre o seletor de arquivo, sem precisar de JS pra isso; JS só cuida do
   estado de arrastar-por-cima e do drop em si (ver .dropzone-arquivo em
   cliente.php). */
.dropzone-arquivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    text-align: center;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--ph-border);
    border-radius: var(--ph-radius-sm);
    background-color: var(--ph-bg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.dropzone-arquivo:hover { border-color: var(--ph-primary); }
.dropzone-arquivo.dropzone-arquivo-sobre {
    border-color: var(--ph-primary);
    background-color: var(--ph-primary-light);
}
.dropzone-arquivo-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.dropzone-arquivo-icone { font-size: 1.8rem; color: var(--ph-primary); }
.dropzone-arquivo-texto { color: var(--ph-text-muted); font-size: .88rem; }
.dropzone-arquivo-nome { font-weight: 600; }

/* ------------------------------------------- Overlay de progresso de upload
   Mostrado enquanto um arquivo está subindo (barra com % de verdade, não só
   um spinner) -- pedido do Kleber depois de levantar o limite de anexo pra
   500MB: sem isso a pessoa não tem ideia se um arquivo grande travou ou só
   está subindo (ver inicializarAnexoStager()/listener de "submit" genérico
   em app.js). Fica por cima de qualquer outro overlay da página (ver
   .overlay-carregando em cliente.php, z-index 2000). */
.overlay-upload-progresso {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.overlay-upload-progresso.show { opacity: 1; pointer-events: all; }

.overlay-upload-progresso-caixa {
    background-color: var(--ph-surface);
    border-radius: var(--ph-radius);
    padding: 1.75rem 2.25rem;
    text-align: center;
    box-shadow: var(--ph-elev-3);
    max-width: 90vw;
    width: 22rem;
}

.overlay-upload-progresso-titulo {
    font-weight: 600;
    color: var(--ph-text);
    margin-bottom: .75rem;
}

.overlay-upload-progresso .progress { height: 20px; }

.overlay-upload-progresso-detalhe {
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--ph-text-muted);
}