/* ===== Portal Tuiutech: tema escuro com as cores do logo ===== */
:root {
    --fundo: #17181b;
    --superficie: #1f2125;
    --superficie-2: #272a2f;
    --coluna: #131417;
    --borda: #2e3136;
    --texto: #e6e6e8;
    --texto-suave: #a3a8b0;
    --texto-fraco: #8c9199;
    --vermelho: #e42225;
    --vermelho-escuro: #c81b1e;
    --raio: 8px;
    color-scheme: dark;
}

[hidden] { display: none !important; }

* { font-family: 'Roboto', sans-serif; box-sizing: border-box; }

body { margin: 0; padding: 0; min-height: 100vh; background-color: var(--fundo); color: var(--texto); line-height: 1.5; }
h1, h2, h3 { font-weight: 700; color: white; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline: none; }

/* --- Cabeçalho --- */
.Cabecario {
    background-color: var(--fundo);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--borda);
}
.logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-img { height: 40px; width: 40px; image-rendering: pixelated; border-radius: 6px; }
.logo-nome { color: white; font-weight: 700; font-size: 18px; letter-spacing: 0.3px; }
.menu-container { display: flex; align-items: center; gap: 28px; }
#Menu ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 6px; }
#Menu a {
    display: block;
    color: var(--texto-suave);
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: 0.2s;
}
#Menu a:hover { color: white; background-color: var(--superficie); }
#Menu a.active { color: white; background-color: var(--superficie-2); box-shadow: inset 0 -2px 0 var(--vermelho); }

.grupo-perfil { display: flex; align-items: center; gap: 12px; }
.perfil-btn {
    background-color: var(--vermelho);
    color: white;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: bold;
    cursor: default;
    overflow: hidden;
}
.perfil-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.perfil-btn.miniatura { width: 24px; height: 24px; font-size: 11px; }
.btn-sair {
    color: var(--texto-fraco);
    text-decoration: none;
    font-size: 14px; font-weight: bold;
    border: 1px solid var(--borda);
    padding: 6px 12px;
    border-radius: 6px;
    transition: 0.2s;
}
.btn-sair:hover { background-color: var(--vermelho); border-color: var(--vermelho); color: white; }

/* --- Botões --- */
.btn-primario {
    background-color: var(--vermelho);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: bold; font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-primario:hover { background-color: var(--vermelho-escuro); }
.btn-secundario {
    background-color: transparent;
    color: var(--texto-suave);
    border: 1px solid var(--borda);
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: bold; font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}
.btn-secundario:hover { background-color: var(--superficie-2); color: white; }
.btn-tabela { padding: 6px 12px; font-size: 13px; }
.btn-tabela.ativo { border-color: #ffc940; color: #ffc940; }

/* --- Home --- */
.dashboard { padding: 40px 24px; max-width: 1200px; margin: 0 auto; }
.secao-dashboard { margin-bottom: 50px; }
.cabecalho-secao { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabecalho-secao h2 { font-size: 26px; margin: 0; }
.subtitulo-secao { color: var(--texto-fraco); font-size: 15px; margin: 6px 0 24px; }
.grid-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cartao-tl {
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
    text-decoration: none;
    display: flex; flex-direction: column;
    transition: transform 0.2s, border-color 0.2s;
}
.cartao-tl:hover { border-color: #444951; transform: translateY(-2px); }
.capa-cartao { height: 84px; }
.gradiente-1 { background: linear-gradient(135deg, #950f0e, var(--vermelho)); }
.gradiente-2 { background: linear-gradient(135deg, #2a2d33, #4b515b); }
.gradiente-3 { background: linear-gradient(135deg, #6b4e00, #ffc940); }
.link-discreto { color: var(--texto-suave); font-weight: bold; font-size: 14px; }
.link-discreto:hover { color: white; }
.info-cartao { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.info-cartao strong { color: white; font-size: 16px; }
.info-cartao span { color: var(--texto-fraco); font-size: 14px; }

/* --- Documentos --- */
.container-docs { display: flex; max-width: 1200px; margin: 32px auto; padding: 0 24px; gap: 28px; align-items: flex-start; }
.sidebar-docs {
    width: 250px; flex-shrink: 0;
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    padding: 20px;
    border-radius: var(--raio);
    position: sticky; top: 20px;
}
.sidebar-docs h3 { margin: 0 0 15px; font-size: 16px; border-bottom: 1px solid var(--borda); padding-bottom: 10px; }
.sidebar-docs ul { list-style: none; padding: 0; margin: 0; }
.sidebar-docs li { margin-bottom: 6px; }
.sidebar-docs a {
    color: var(--texto-suave);
    text-decoration: none; font-weight: bold;
    display: block; padding: 8px 10px; border-radius: 6px; transition: 0.2s;
}
.sidebar-docs a:hover { background-color: var(--superficie-2); color: white; }
.sidebar-docs a.ativa { background-color: var(--superficie-2); color: white; box-shadow: inset 2px 0 0 var(--vermelho); }

.conteudo-docs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.barra-pesquisa { display: flex; gap: 12px; flex-wrap: wrap; }
.barra-pesquisa input {
    flex: 1; min-width: 200px;
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    color: white; padding: 12px 15px; border-radius: 6px; font-size: 16px;
}
.barra-pesquisa input:focus { outline: none; border-color: var(--vermelho); }
.btn-drive-topo {
    background-color: #34a853; color: white; text-decoration: none;
    padding: 12px 20px; border-radius: 6px; font-weight: bold; font-size: 14px;
    transition: 0.2s; display: flex; align-items: center; white-space: nowrap;
}
.btn-drive-topo:hover { background-color: #2d8e47; }

.bloco-docs { background-color: var(--superficie); border: 1px solid var(--borda); padding: 24px; border-radius: var(--raio); }
.bloco-docs h2 { margin: 0 0 20px; font-size: 20px; }
.tabela-docs { width: 100%; border-collapse: collapse; text-align: left; }
.tabela-docs th, .tabela-docs td { padding: 12px 15px; border-bottom: 1px solid var(--borda); }
.tabela-docs th { color: var(--texto-fraco); font-size: 14px; }
.tabela-docs tbody tr:last-child td { border-bottom: none; }
.tabela-docs tbody tr:hover { background-color: var(--superficie-2); }
.tabela-docs td a { color: var(--texto); font-weight: 600; text-decoration: none; }
.tabela-docs td a:hover { color: var(--vermelho); text-decoration: underline; }
.tabela-docs .coluna-acoes { width: 44px; text-align: center; }
.btn-excluir-doc {
    background: transparent; border: 1px solid var(--borda); color: var(--texto-fraco);
    border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; transition: 0.2s;
}
.btn-excluir-doc:hover { background-color: var(--vermelho); border-color: var(--vermelho); color: white; }

/* Editor: o formulário empilha título, texto e botões (corrige o layout quebrado) */
#formDocumentos { display: flex; flex-direction: column; gap: 15px; }
.input-titulo {
    width: 100%;
    background-color: transparent;
    border: none; border-bottom: 2px solid var(--borda);
    color: white; font-size: 24px; font-weight: bold; padding: 10px 0;
}
.input-titulo:focus { outline: none; border-color: var(--vermelho); }
.input-texto {
    width: 100%;
    background-color: var(--fundo);
    border: 1px solid var(--borda); border-radius: 6px;
    color: var(--texto); padding: 15px; font-size: 16px; line-height: 1.6;
    min-height: 250px; resize: vertical;
}
.input-texto:focus { outline: none; border-color: var(--vermelho); }
.editor-acoes { display: flex; gap: 12px; margin-top: 5px; }

/* --- Kanban --- */
.kanban-container { padding: 24px; display: flex; flex-direction: column; min-height: calc(100vh - 66px); }
.acoes-globais { margin-bottom: 20px; text-align: right; }
.linha-separadora { border: none; border-top: 1px solid var(--borda); margin: 40px 0; }
.kanban-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.kanban-cabecalho h2 { margin: 0; font-size: 24px; }
.kanban-board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 20px; }
.kanban-coluna {
    background-color: var(--coluna);
    border: 1px solid var(--borda);
    border-radius: 10px;
    width: 290px; min-width: 290px;
    display: flex; flex-direction: column; padding: 12px;
}
.coluna-cabecalho { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 14px; }
.coluna-cabecalho h3 { margin: 0; font-size: 14px; color: var(--texto-suave); }
.contador-tarefas { background-color: var(--superficie-2); color: var(--texto-suave); font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
.kanban-cartoes { display: flex; flex-direction: column; gap: 8px; min-height: 12px; }
.kanban-cartao {
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 12px; cursor: grab;
    transition: background-color 0.2s, border-color 0.2s;
}
.kanban-cartao:hover { background-color: var(--superficie-2); border-color: #444951; }
.cartao-titulo { color: var(--texto); font-size: 14px; margin: 4px 0; line-height: 1.4; overflow-wrap: anywhere; }
.cartao-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cartao-data { font-size: 12px; color: var(--texto-fraco); background-color: var(--fundo); padding: 2px 6px; border-radius: 4px; }
.btn-add-cartao {
    background: transparent; border: none; color: var(--texto-suave);
    text-align: left; padding: 8px 10px; margin-top: 8px; border-radius: 6px;
    cursor: pointer; font-weight: bold; font-size: 14px; transition: 0.2s;
}
.btn-add-cartao:hover { background-color: var(--superficie-2); color: white; }
.btn-apagar-quadro {
    background: transparent; border: 1px solid var(--borda); color: var(--texto-fraco);
    border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s;
}
.btn-apagar-quadro:hover { background-color: var(--vermelho); border-color: var(--vermelho); color: white; }

/* --- Login --- */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-container { width: 100%; display: flex; justify-content: center; }
.login-box {
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    padding: 40px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    width: 100%; max-width: 400px; text-align: center;
}
.logo-login { width: 80px; height: 80px; image-rendering: pixelated; border-radius: 10px; margin-bottom: 20px; }
.login-box h2 { margin: 0 0 5px; font-size: 24px; }
.login-subtitulo { color: var(--texto-fraco); font-size: 14px; margin: 0 0 30px; }
.grupo-input { text-align: left; margin-bottom: 20px; }
.grupo-input label { display: block; color: var(--texto-suave); font-size: 14px; font-weight: bold; margin-bottom: 8px; }
.input-login {
    width: 100%;
    background-color: var(--coluna);
    border: 1px solid var(--borda);
    color: white; padding: 12px 15px; border-radius: 6px; font-size: 16px; transition: 0.2s;
}
.input-login:focus { outline: none; border-color: var(--vermelho); background-color: var(--fundo); }
.btn-login { width: 100%; padding: 14px; font-size: 16px; margin-top: 4px; }
.login-rodape { margin-top: 25px; font-size: 14px; }
.login-rodape span { color: var(--texto-fraco); }
.login-erro { color: #ff8f80; font-size: 14px; min-height: 20px; margin: 0 0 10px; text-align: left; }
.login-erro.ok { color: #5aac44; }

/* --- Página de acessos (admin) --- */
.form-acesso { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; align-items: end; }
.form-acesso .grupo-input { margin-bottom: 0; }
.form-acesso .login-erro { grid-column: 1 / -1; margin: 0; }

/* --- Telas menores --- */
@media (max-width: 800px) {
    .Cabecario { flex-wrap: wrap; padding: 12px 16px; }
    .menu-container { width: 100%; justify-content: space-between; gap: 12px; }
    #Menu ul { flex-wrap: wrap; }
    #Menu a { padding: 8px 10px; font-size: 13px; }
    .container-docs { flex-direction: column; padding: 0 16px; margin: 20px auto; }
    .sidebar-docs { width: 100%; position: static; }
    .dashboard, .kanban-container { padding: 20px 16px; }
    .bloco-docs { padding: 18px; overflow-x: auto; }
    .login-box { padding: 30px 24px; }

    .barra-pesquisa { flex-direction: column; align-items: stretch; }
    .barra-pesquisa input { width: 100%; }
    .btn-drive-topo { justify-content: center; }

    .form-acesso { grid-template-columns: 1fr; }
    .modal-caixa { padding: 18px; }
    .modal-acoes { flex-direction: column-reverse; }
    .modal-acoes button { width: 100%; }
    .btn-perigo { margin-right: 0; }

    .codigo-do-dia { font-size: 32px; padding: 16px; letter-spacing: 2px; }
    .grade-historico { grid-template-columns: 1fr; max-height: 400px; }

    .kanban-cabecalho { flex-direction: column; align-items: stretch; }
    .kanban-cabecalho .acoes-globais { text-align: left; margin-bottom: 0; }
}

@media (max-width: 480px) {
    .logo-nome { display: none; }
    .grupo-perfil { gap: 8px; }
    .dashboard, .kanban-container, .container-docs { padding-left: 12px; padding-right: 12px; }
    .bloco-docs { padding: 14px; }
    .tabela-docs th, .tabela-docs td { padding: 10px 8px; font-size: 13px; }
}


/* --- Anexos nos documentos --- */
.grupo-anexo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-anexo { display: inline-block; cursor: pointer; text-align: center; }
.texto-anexo { color: var(--texto-fraco); font-size: 13px; }

/* ===== Janelas (modais) de criar/editar ===== */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 11, 13, 0.7);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 100;
}
.modal-overlay.oculto { display: none; }
.modal-caixa {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 24px;
    width: 100%; max-width: 520px; max-height: 90vh;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.modal-caixa h2 { margin: 0; font-size: 20px; }
.modal-caixa .grupo-input { margin-bottom: 0; }
.modal-acoes { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.btn-perigo {
    background: transparent; color: #ff8f80;
    border: 1px solid #5a2a28; padding: 12px 20px; border-radius: 6px;
    font-weight: bold; cursor: pointer; margin-right: auto; transition: 0.2s;
}
.btn-perigo:hover { background: var(--vermelho); border-color: var(--vermelho); color: white; }

/* --- Estado vazio da tabela de documentos --- */
.tabela-docs .linha-vazia td { color: var(--texto-fraco); text-align: center; cursor: default; padding: 24px; }
.tabela-docs .linha-vazia:hover { background: none; }

/* --- Prazos nos cartões do Kanban --- */
.cartao-prazo { font-size: 12px; padding: 2px 8px; border-radius: 4px; font-weight: bold; white-space: nowrap; }
.cartao-prazo.prazo-atrasado { background: #3a1614; color: #ff8f80; }
.cartao-prazo.prazo-proximo { background: #3a2c14; color: #ffcf80; }
.cartao-prazo.prazo-ok { background: var(--fundo); color: var(--texto-fraco); }

/* --- Painel de prazos (topo da página de Projetos) --- */
.painel-prazos { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; max-width: 420px; }
.painel-prazos h2 { margin: 0 0 8px; font-size: 13px; color: var(--texto-suave); font-weight: bold; }
.lista-prazos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-prazos li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.lista-prazos .tarefa-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.lista-prazos .tarefa-titulo { font-size: 13px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-prazos .tarefa-quadro { font-size: 11px; color: var(--texto-fraco); }
.prazos-mais { margin: 6px 0 0; font-size: 12px; color: var(--texto-fraco); }

/* --- Chamada (código do dia) --- */
.bloco-chamada .grupo-anexo { align-items: center; }
.lista-presencas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.lista-presencas li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--fundo); border-radius: 6px; font-size: 14px; }
.lista-presencas .hora { color: var(--texto-fraco); font-size: 12px; }
.codigo-do-dia { font-size: 42px; font-weight: 700; color: white; letter-spacing: 4px; text-align: center; padding: 20px; background: var(--fundo); border-radius: 8px; margin: 0; }

/* --- Histórico de chamadas (blocos por dia) --- */
.grade-historico { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; max-height: 480px; overflow-y: auto; padding-right: 2px; }
.bloco-dia { background: var(--coluna); border: 1px solid var(--borda); border-radius: 8px; padding: 14px; }
.bloco-dia h3 { margin: 0 0 10px; font-size: 13px; color: var(--texto-suave); font-weight: bold; }
.bloco-dia .lista-presencas { max-height: none; }

/* --- Janela de tarefa: detalhes, etapa e "Eu vou fazer" --- */
.input-texto-curto { min-height: 90px; font-size: 15px; padding: 12px 15px; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
select.input-login { cursor: pointer; }
.bloco-responsavel { display: flex; flex-direction: column; gap: 8px; }
.responsavel-atual { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); }
.check-responsavel { display: flex; align-items: center; gap: 10px; font-weight: bold; color: var(--texto); cursor: pointer; font-size: 15px; }
.check-responsavel input { width: 20px; height: 20px; accent-color: var(--vermelho); cursor: pointer; flex-shrink: 0; }
.cartao-detalhes {
    margin: 2px 0 0; font-size: 12px; color: var(--texto-fraco); line-height: 1.4; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Home: "Suas tarefas" --- */
.lista-minhas-tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-minhas-tarefas li {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px;
}
.lista-minhas-tarefas li.vazio { display: block; color: var(--texto-fraco); font-size: 14px; }
.minha-tarefa-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.minha-tarefa-info strong { color: white; font-size: 15px; overflow-wrap: anywhere; }
.minha-tarefa-info p { margin: 0; color: var(--texto-suave); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.minha-tarefa-meta { color: var(--texto-fraco); font-size: 12px; }
.minha-tarefa-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* --- Avaliações --- */
.grade-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 20px; }
.cartao-pessoa {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 14px; cursor: pointer; color: var(--texto); font: inherit; transition: 0.2s;
}
.cartao-pessoa:hover { border-color: #444951; background: var(--superficie-2); }
.cartao-pessoa .perfil-btn, .topo-pessoa .perfil-btn { width: 48px; height: 48px; font-size: 17px; flex-shrink: 0; }
.topo-pessoa .perfil-btn { width: 56px; height: 56px; }
.cartao-pessoa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-pessoa-info strong { color: white; font-size: 15px; overflow-wrap: anywhere; }
.tag-voce, .tag-arquivo, .tag-avaliador { background: var(--superficie-2); color: var(--texto-suave); font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.topo-pessoa { display: flex; align-items: center; gap: 14px; }
.resumo-estrelas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.estrelas { color: #ffc940; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.estrelas-vazias { color: #4a4e55; }
.estrela-meia {
    background: linear-gradient(90deg, #ffc940 50%, #4a4e55 50%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.form-avaliacao { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 14px 0; }
.rotulo-avaliacao { color: var(--texto-suave); font-size: 14px; font-weight: bold; }
.seletor-estrelas { display: flex; gap: 4px; }
.seletor-estrelas button {
    background: none; border: none; padding: 2px 4px; cursor: pointer;
    font-size: 34px; line-height: 1; color: #4a4e55; transition: color 0.15s, transform 0.15s;
}
.seletor-estrelas button:hover { transform: scale(1.1); }
.seletor-estrelas button.ativa { color: #ffc940; }
.legenda-estrelas { margin: 0; font-size: 13px; color: var(--texto-suave); min-height: 18px; }
.form-avaliacao .login-erro { margin: 0; }
.aviso-avaliacao { margin: 0; padding: 12px; background: var(--fundo); border-radius: 6px; color: var(--texto-suave); font-size: 14px; }
.titulo-lista-avaliacoes { margin: 0; font-size: 15px; color: var(--texto-suave); }
.lista-avaliacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-avaliacoes li { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.lista-avaliacoes li.vazio { color: var(--texto-fraco); font-size: 14px; }
.avaliacao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avaliacao-topo .btn-excluir-doc { margin-left: auto; }
.avaliacao-texto { margin: 6px 0 0; font-size: 14px; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }

/* --- Celular: tarefas da Home, avaliações e janela de tarefa --- */
@media (max-width: 800px) {
    .lista-minhas-tarefas li { flex-direction: column; gap: 10px; }
    .minha-tarefa-acoes { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .grade-pessoas { grid-template-columns: 1fr; }
    .seletor-estrelas { gap: 8px; }
    .seletor-estrelas button { font-size: 40px; }
}
@media (max-width: 360px) {
    .linha-campos { grid-template-columns: 1fr; }
}

/* --- Avaliações: painel da equipe --- */
.painel-equipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px;
    color: var(--texto); font: inherit;
}
.stat-botao { cursor: pointer; transition: 0.2s; }
.stat-botao:not(:disabled):hover { border-color: #2c6b3a; background: #10261a; }
.stat-botao:disabled { cursor: default; }
.stat-larga { grid-column: 1 / -1; gap: 10px; }
.stat-rotulo { font-size: 12px; font-weight: bold; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-valor { font-size: 28px; font-weight: 700; color: white; line-height: 1.1; }
.stat-nome { font-size: 22px; color: #7ee29a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-sub { font-size: 13px; color: var(--texto-suave); }

.input-ordem {
    background-color: var(--superficie); border: 1px solid var(--borda); color: white;
    padding: 12px 15px; border-radius: 6px; font-size: 15px; cursor: pointer;
}
.input-ordem:focus { outline: none; border-color: var(--vermelho); }

/* --- Avaliações: cartões das pessoas --- */
.cartao-pessoa-info { flex: 1; }
.sparkline { width: 64px; height: 26px; flex-shrink: 0; }
.sparkline polyline { fill: none; stroke: #ffc940; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tag-tendencia { width: fit-content; font-size: 11px; font-weight: bold; padding: 1px 8px; border-radius: 10px; margin-top: 3px; }
.tag-tendencia.melhorou { background: #10261a; color: #7ee29a; }
.tag-tendencia.piorou { background: #2a1210; color: #ff8f80; }
.tag-tendencia.estavel { background: var(--superficie-2); color: var(--texto-suave); }

/* --- Avaliações: janela de cada pessoa --- */
.modal-larga { max-width: 600px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); }
.aba {
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    color: var(--texto-suave); padding: 10px 16px; font-weight: bold; font-size: 15px; cursor: pointer; transition: 0.2s;
}
.aba:hover { color: white; }
.aba.ativa { color: white; border-bottom-color: var(--vermelho); }
.painel-aba { display: flex; flex-direction: column; gap: 14px; }
.acoes-avaliacao { display: flex; gap: 10px; flex-wrap: wrap; }
.lista-avaliacoes li.minha { border-color: #6b5520; }

.veredito { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo); }
.veredito strong { font-size: 17px; color: white; }
.veredito span { font-size: 14px; color: var(--texto-suave); }
.veredito.melhorou { background: #10261a; border-color: #2c6b3a; }
.veredito.melhorou strong { color: #7ee29a; }
.veredito.piorou { background: #2a1210; border-color: #6b2c28; }
.veredito.piorou strong { color: #ff8f80; }

.numeros-pessoa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.numeros-pessoa > div { display: flex; flex-direction: column; gap: 2px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.numero { font-size: 22px; font-weight: 700; color: white; }
.numero-rotulo { font-size: 12px; color: var(--texto-fraco); line-height: 1.3; }

.grafico { width: 100%; height: auto; display: block; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; }
.grafico-grade { stroke: var(--borda); stroke-width: 1; }
.grafico-eixo { fill: var(--texto-fraco); font-size: 11px; }
.grafico-linha { fill: none; stroke: #ffc940; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico-ponto { fill: #ffc940; stroke: var(--fundo); stroke-width: 2; }
.grafico-media { stroke: var(--vermelho); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafico-media-texto { fill: #ff8f80; font-size: 11px; font-weight: bold; }

.barras { display: flex; flex-direction: column; gap: 7px; }
.barra-linha { display: grid; grid-template-columns: 78px 1fr 62px; align-items: center; gap: 10px; font-size: 13px; }
.barra-rotulo { color: var(--texto-suave); white-space: nowrap; }
.barra-trilho { height: 10px; background: var(--fundo); border-radius: 5px; overflow: hidden; }
.barra-cheia { display: block; height: 100%; background: #ffc940; border-radius: 5px; transition: width 0.4s; }
.barra-qtd { color: var(--texto-fraco); text-align: right; white-space: nowrap; }

.linha-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.linha-tempo li { display: flex; gap: 12px; font-size: 13px; padding: 8px 10px; background: var(--fundo); border-radius: 6px; border-left: 3px solid var(--borda); }
.linha-tempo li.subiu { border-left-color: #3fa35b; }
.linha-tempo li.desceu { border-left-color: var(--vermelho); }
.linha-tempo-data { color: var(--texto-fraco); white-space: nowrap; }

@media (max-width: 800px) {
    .painel-equipe { grid-template-columns: 1fr 1fr; }
    .stat-valor { font-size: 24px; }
    .input-ordem { width: 100%; }
    .aba { flex: 1; padding: 10px 8px; }
    .numero { font-size: 19px; }
    .barra-linha { grid-template-columns: 70px 1fr 56px; gap: 8px; }
}

.tag-avaliador { background: #2e2710; color: #ffc940; }
.regra-avaliadores { margin: -8px 0 20px; border: 1px solid var(--borda); border-left: 3px solid #ffc940; }

/* --- Agenda da equipe (Home) --- */
.agenda-cabecalho { justify-content: space-between; }
.agenda { padding: 18px; }
.agenda-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.agenda-topo h3 { margin: 0 0 0 6px; font-size: 20px; color: white; }
.agenda-seta {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borda);
    background: none; color: var(--texto); font-size: 20px; line-height: 1; cursor: pointer; transition: 0.2s;
}
.agenda-seta:hover { background: var(--superficie-2); color: white; }
.agenda-status { font-size: 13px; color: var(--texto-fraco); flex-basis: 100%; }
.agenda-status:empty { display: none; }
.agenda-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; font-size: 12px; font-weight: bold; color: var(--texto-fraco); padding: 6px 0; }
.agenda-grade {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--borda); border-left: 1px solid var(--borda); border-radius: 6px; overflow: hidden;
}
.agenda-dia {
    min-height: 100px; min-width: 0; padding: 6px 5px; display: flex; flex-direction: column; gap: 3px;
    background: var(--superficie); color: var(--texto); font: inherit; text-align: left; cursor: pointer;
    border: none; border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); transition: background 0.15s;
}
.agenda-dia:hover { background: var(--superficie-2); }
.agenda-dia.fora { background: var(--fundo); }
.agenda-dia.fora .agenda-numero { color: #4a4e55; }
.agenda-numero {
    align-self: center; min-width: 26px; height: 26px; line-height: 26px; padding: 0 5px; border-radius: 13px;
    text-align: center; font-size: 13px; font-weight: bold; color: var(--texto-suave); white-space: nowrap;
}
.agenda-dia.hoje .agenda-numero { background: var(--vermelho); color: white; }
.agenda-eventos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev { display: block; font-size: 12px; line-height: 1.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
.ev-inteiro { background: var(--cor); color: white; padding: 0 6px; font-weight: bold; }
.ev-hora { padding: 0 2px; color: var(--texto); }
.ev-hora i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); margin-right: 5px; vertical-align: middle; }
.ev-mais { font-size: 11px; color: var(--texto-fraco); padding: 0 2px; }
.agenda-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--texto-suave); }
.agenda-legenda span::before {
    content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--cor); margin-right: 6px; vertical-align: middle;
}

.titulo-proximos { margin: 22px 0 10px; font-size: 16px; color: var(--texto-suave); }
.lista-proximos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-proximos li.vazio { color: var(--texto-fraco); font-size: 14px; }
.proximo {
    width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
    background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--cor);
    border-radius: var(--raio); padding: 12px 14px; color: var(--texto); font: inherit; transition: 0.2s;
}
.proximo:hover { background: var(--superficie-2); }
.proximo-data { display: flex; flex-direction: column; min-width: 96px; flex-shrink: 0; }
.proximo-data strong { color: white; font-size: 14px; }
.proximo-data span { color: var(--texto-fraco); font-size: 12px; }
.proximo-titulo { display: flex; flex-direction: column; min-width: 0; font-weight: bold; overflow-wrap: anywhere; }
.proximo-titulo small { color: var(--texto-fraco); font-weight: normal; font-size: 12px; }

.lista-eventos-dia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-eventos-dia li { display: flex; gap: 12px; align-items: flex-start; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 12px; }
.lista-eventos-dia li.vazio { display: block; color: var(--texto-fraco); font-size: 14px; }
.evento-cor { width: 4px; align-self: stretch; border-radius: 2px; background: var(--cor); flex-shrink: 0; }
.evento-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.evento-info strong { color: white; font-size: 15px; overflow-wrap: anywhere; }
.evento-quando { color: var(--texto-suave); font-size: 13px; font-weight: bold; }
.evento-local { color: var(--texto-suave); font-size: 13px; }
.evento-info p { margin: 4px 0 2px; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }

/* No celular: cada evento vira uma bolinha colorida no dia (toque no dia para ver tudo) */
@media (max-width: 600px) {
    .agenda { padding: 10px; }
    .agenda-cabecalho .btn-primario { width: 100%; }
    .agenda-topo h3 { font-size: 17px; }
    .agenda-semana { font-size: 10px; }
    .agenda-dia { min-height: 58px; padding: 4px 2px; gap: 4px; align-items: center; }
    .agenda-numero { min-width: 24px; height: 24px; line-height: 24px; font-size: 12px; padding: 0 3px; }
    .agenda-eventos { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .ev { font-size: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--cor); }
    .ev-hora i { display: none; }
    .ev-mais { font-size: 9px; line-height: 8px; padding: 0; }
    .proximo { gap: 10px; padding: 10px 12px; }
    .proximo-data { min-width: 78px; }
}

/* --- Agenda: "Salvar na minha agenda" --- */
.salvar-minha-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--texto-fraco); }
.salvar-minha-agenda a.btn-tabela { display: inline-block; text-decoration: none; }

/* --- Avaliações: abas da página e tabela do ranking --- */
.abas-pagina { margin: 4px 0 16px; }
.caixa-ranking { padding: 4px 6px; overflow-x: auto; }
.tabela-ranking th { padding: 0; }
.tabela-ranking .ordenar {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer; white-space: nowrap;
    color: var(--texto-fraco); font: inherit; font-weight: bold; padding: 14px 12px;
}
.tabela-ranking .ordenar:hover, .tabela-ranking .ordenar.ativa { color: white; }
.tabela-ranking .seta { font-size: 10px; }
.tabela-ranking td { padding: 12px; vertical-align: middle; }
.tabela-ranking tbody tr[data-id] { cursor: pointer; }
.tabela-ranking .col-pos { width: 60px; }
.tabela-ranking tr.top-1 { background: rgba(255, 201, 64, 0.06); }
.posicao-numero {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 6px;
    border-radius: 13px; font-size: 13px; font-weight: 700; background: var(--superficie-2); color: var(--texto-suave);
}
.posicao-numero.pos-1 { background: #ffc940; color: #1a1b1e; }
.posicao-numero.pos-2 { background: #c7ccd1; color: #1a1b1e; }
.posicao-numero.pos-3 { background: #cd8a4b; color: #1a1b1e; }
.pessoa-celula { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa-texto { display: flex; flex-direction: column; min-width: 0; }
.pessoa-texto strong { color: white; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pessoa-texto small { color: var(--texto-fraco); font-size: 12px; }
.media-celula { white-space: nowrap; color: var(--texto-suave); }
.estrela-unica { display: none; color: #ffc940; }
.rotulo-curto { display: none; }
.nota-ranking { margin: 12px 0 0; font-size: 12px; }

/* --- Kanban: várias pessoas e situação da entrega --- */
.cartao-rodape { gap: 8px; flex-wrap: wrap; }
.grupo-avatares { display: flex; align-items: center; margin-left: auto; }
.grupo-avatares .perfil-btn { border: 2px solid var(--superficie); margin-left: -6px; }
.grupo-avatares .perfil-btn:first-child { margin-left: 0; }
.avatar-mais { font-size: 11px; font-weight: bold; color: var(--texto-suave); margin-left: 4px; }
.cartao-prazo.selo-completa { background: #10261a; color: #7ee29a; white-space: normal; }
.cartao-prazo.selo-atrasada { background: #3a2410; color: #ffb35c; white-space: normal; }
.kanban-cartao.concluido .cartao-titulo { color: var(--texto-suave); }
.entrega-tarefa { margin: 0; padding: 10px 12px; border-radius: 6px; font-size: 14px; font-weight: bold; }
.entrega-tarefa.no-prazo { background: #10261a; color: #7ee29a; }
.entrega-tarefa.atrasada { background: #3a2410; color: #ffb35c; }
.lista-participantes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-participantes li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto); }
.lista-participantes .btn-tirar-participante { margin-left: auto; }

@media (max-width: 600px) {
    .tabela-ranking .col-ultima { display: none; }
    .tabela-ranking .estrelas-completas { display: none; }
    .tabela-ranking .estrela-unica { display: inline; }
    .tabela-ranking .rotulo-longo { display: none; }
    .tabela-ranking .rotulo-curto { display: inline; }
    .tabela-ranking .ordenar, .tabela-ranking td { padding: 10px 6px; }
    .tabela-ranking .col-pos { width: 44px; }
    .tabela-ranking .pessoa-avatar { display: none; }
    .pessoa-texto strong { max-width: 130px; }
}