/* ==========================================================================
   CULCO 3.0 · PADRÕES VISUAIS (componentes)
   Um lugar só para: título de página, barra de filtros, campos, botões,
   cards e margens internas. Carregado por último (depois do legacy.css e
   do culco-shell.css); os seletores começam com body.cs para vencer as
   regras antigas e os <style> soltos dos templates.

   Regras da casa:
     - botões: sempre em pílula (cantos totalmente redondos);
     - campos (input/select): cantos de 8px;
     - cards e barras: cantos de 14px e sombra suave, sem borda dura;
     - página: margem interna de 32px × 36px (20px no celular).

   Nomes novos (use nos templates):
     .culco-pagina            → embrulha o conteúdo da página
     .culco-cabecalho         → bloco do título (h1.culco-titulo + p.culco-subtitulo)
     .culco-filtros           → barra de filtros (form)
       .culco-filtros__campo  → cada filtro (label + campo)
       .culco-filtros__rotulo → rótulo em caixa alta
       .culco-filtros__acoes  → FILTRAR / LIMPAR
     .culco-campo             → input/select/textarea
     .culco-botao             → botão principal  (--secundario, --perigo, --pequeno, --largo)
     .culco-card              → card branco
   Nomes antigos com o mesmo visual (para não reescrever tudo de uma vez):
     .culco-toolbar-blindada, .control, .label-mini, .culco-input,
     .btn-submit-filter, .btn-clear-filter, .button, .button-small,
     .dash-main-title
   ========================================================================== */

body.cs {
    --ui-raio-card:   14px;
    --ui-raio-campo:  8px;
    --ui-raio-botao:  100px;
    --ui-sombra-card: 0 1px 2px rgba(22, 19, 14, .04), 0 8px 24px -12px rgba(22, 19, 14, .14);
    --ui-linha:       rgba(22, 19, 14, .12);
    --ui-texto:       #16130E;
    --ui-texto-suave: #6B6558;
    --ui-cinza:       #ECEAE4;
    --ui-cinza-hover: #E0DDD5;
    --ui-perigo:      #D63B32;
    --ui-pagina-pad-y: 32px;
    --ui-pagina-pad-x: 36px;

    /* o legacy.css puxava o body 32px para cima quando havia barra do WP */
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   PÁGINA
   -------------------------------------------------------------------------- */
body.cs .culco-pagina {
    width: 100%;
    max-width: 1600px;
    padding: var(--ui-pagina-pad-y) var(--ui-pagina-pad-x) 48px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   TÍTULO DA PÁGINA
   -------------------------------------------------------------------------- */
body.cs .culco-cabecalho { margin: 0 0 24px; }

body.cs .culco-titulo,
body.cs .dash-main-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--font);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ui-texto);
}
body.cs .culco-titulo > i,
body.cs .dash-main-title > i {
    font-size: .85em;
    color: var(--color-destaques, var(--primary-color));
}
/* Título dentro de um box branco (páginas com imagem de fundo) */
body.cs .culco-cabecalho--box {
    padding: 20px 24px;
    background: #fff;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
}
body.cs .culco-cabecalho--box .culco-titulo { font-size: 24px; }

body.cs .culco-subtitulo {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ui-texto-suave);
}

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */
body.cs .culco-card {
    background: #fff;
    border: 0;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
    padding: 24px;
}

/* --------------------------------------------------------------------------
   CAMPOS
   -------------------------------------------------------------------------- */
body.cs .culco-campo,
body.cs .culco-filtros .culco-input,
body.cs .culco-toolbar-blindada .culco-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ui-linha);
    border-radius: var(--ui-raio-campo);
    background-color: #fff;
    color: var(--ui-texto);
    font-family: inherit;
    font-size: 14px;
    line-height: 40px;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
body.cs textarea.culco-campo { height: auto; padding: 12px 14px; line-height: 1.5; }
body.cs .culco-campo:focus,
body.cs .culco-filtros .culco-input:focus,
body.cs .culco-toolbar-blindada .culco-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

/* --------------------------------------------------------------------------
   BOTÕES (sempre pílula)
   -------------------------------------------------------------------------- */
body.cs .culco-botao,
body.cs .button,
body.cs .btn-submit-filter,
body.cs .btn-clear-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--ui-raio-botao);
    background: var(--button-color, #16130E);
    color: var(--button-color-contrast, #fff);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s, background-color .2s;
}
body.cs .culco-botao:hover,
body.cs .button:hover,
body.cs .btn-submit-filter:hover { filter: brightness(1.12); opacity: 1; }

body.cs .culco-botao--secundario,
body.cs .btn-clear-filter {
    background: var(--ui-cinza);
    color: var(--ui-texto);
}
body.cs .culco-botao--secundario:hover,
body.cs .btn-clear-filter:hover { background: var(--ui-cinza-hover); filter: none; }

body.cs .culco-botao--perigo { background: var(--ui-perigo); color: #fff; }

body.cs .culco-botao--pequeno,
body.cs .button-small {
    height: 32px;
    padding: 0 16px;
    border-radius: var(--ui-raio-botao);
    font-size: 11.5px;
}

body.cs .culco-botao--largo { width: 100%; height: 48px; font-size: 14px; }

/* --------------------------------------------------------------------------
   BARRA DE FILTROS
   -------------------------------------------------------------------------- */
body.cs .culco-filtros,
body.cs .culco-toolbar-blindada {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    margin: 0 0 28px;
    padding: 20px 24px;
    background: #fff;
    border: 0;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
    box-sizing: border-box;
}

body.cs .culco-filtros__campo,
body.cs .culco-toolbar-blindada .control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 180px;
    min-width: 0;
}

body.cs .culco-filtros__rotulo,
body.cs .culco-toolbar-blindada .label-mini {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
}
body.cs .culco-filtros__rotulo i,
body.cs .culco-toolbar-blindada .label-mini i {
    margin-right: 4px;
    color: var(--primary-color);
}

body.cs .culco-filtros__acoes {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}
body.cs .culco-toolbar-blindada > .button,
body.cs .culco-toolbar-blindada > .btn-submit-filter,
body.cs .culco-toolbar-blindada > .btn-clear-filter { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   PÁGINAS COM A ESTRUTURA "DASH" (Mural, Dashboards)
   Mesmo fundo, margem interna e largura das outras páginas.
   -------------------------------------------------------------------------- */
body.cs .dash-wrapper {
    background: transparent;
    min-height: 0;
    padding: var(--ui-pagina-pad-y) var(--ui-pagina-pad-x) 48px;
    font-family: var(--font);
}
body.cs .dash-full-container {
    max-width: 1600px;
    margin: 0;
}
body.cs .mural-header-top { margin-bottom: 28px; }

/* Filtros dos dashboards → mesmo visual de .culco-filtros */
body.cs .dash-filters-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 0 0 28px;
    padding: 20px 24px;
    background: #fff;
    border: 0;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
}
body.cs .dash-filters-container .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 180px;
    min-width: 0;
}
body.cs .dash-filters-container .custom-dates { gap: 16px; flex: 2 1 360px; }
body.cs .dash-filters-container .label-mini {
    display: block;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
}
body.cs .dash-filters-container .label-mini i { margin-right: 4px; color: var(--primary-color); }
body.cs .dash-filters-container .culco-input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ui-linha);
    border-radius: var(--ui-raio-campo);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
}
body.cs .dash-filters-container .filter-actions { display: flex; gap: 10px; margin-left: 0; }
body.cs .button-filter {
    height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--ui-raio-botao);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    transform: none;
}
body.cs .button-filter.btn-primary { background: var(--button-color, #16130E); color: var(--button-color-contrast, #fff); }
body.cs .button-filter.btn-light   { background: var(--ui-cinza); color: var(--ui-texto); }

/* Lista do Inbox/Outbox (div.culco-table) → mesmo card */
body.cs div.culco-table {
    border: 0;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
}

/* Cards dos dashboards e do Gerenciar Usuários */
body.cs .dash-card {
    border: 0;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
}

/* --------------------------------------------------------------------------
   PÁGINAS DA GRADE ANTIGA (.container / .grid-12)
   Procedimentos, Treinamentos, Agentes, Acesso Rápido, Ajuda, Farol,
   Projetos, Agenda, Diretrizes. O body ganha "cs-pagina-grid"
   (inc/culco-layout.php). O .grid-12 tem 20px de respiro; o .container
   compensa para a borda do conteúdo ficar nos mesmos 36px das outras páginas.
   -------------------------------------------------------------------------- */
body.cs .culco-pagina--cabecalho { padding-bottom: 0; }
body.cs .culco-pagina--cabecalho .culco-cabecalho { margin-bottom: 4px; }

body.cs-pagina-grid .main-content > .space-20 { display: none; }
body.cs-pagina-grid .main-content > .container,
body.cs-pagina-grid .main-content-bkg > .container {
    max-width: 1600px;
    margin: 0;
    padding: 0 max(0px, calc(var(--ui-pagina-pad-x) - 20px));
}
body.cs-pagina-grid .main-content > .height-align {
    max-width: 1600px;
    padding: 0 max(0px, calc(var(--ui-pagina-pad-x) - 20px));
}
/* .grid-12 que só embrulha os cards (não é card) perde o respiro lateral */
body.cs-pagina-grid .main-content > .height-align > .grid-12:not([class*="grid-lg"]),
body.cs-pagina-grid .main-content > .container.height-align > .grid-12:not([class*="grid-lg"]) {
    padding: 0;
}
body.cs-pagina-grid .main-content .culco-filtros { margin-bottom: 0; }
/* Treinamentos: cards em grid sem coluna com respiro */
body.cs-pagina-grid .treinamento-grid-wrapper { padding: 0 20px; box-sizing: border-box; }
/* Farol: as colunas dos cards ficam dentro de um .grid-12 */
body.cs-pagina-grid .main-content > .container > .grid-12 > .height-align { margin: 0 -20px; }
body.cs-pagina-grid .main-content > .container > .culco-filtros-wrap { padding: 20px; }

/* --------------------------------------------------------------------------
   FORMULÁRIOS DO ACF NO SITE (.culco-form-acf)
   Editar Perfil e painel lateral de edição.
   -------------------------------------------------------------------------- */
body.cs .culco-form-acf .acf-fields { border: 0; background: transparent; }
body.cs .culco-form-acf .acf-field { border: 0 !important; padding: 14px 0; }
body.cs .culco-form-acf .acf-field .acf-label label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
}
body.cs .culco-form-acf .acf-field .description { font-size: 12.5px; color: var(--ui-texto-suave); }
body.cs .culco-form-acf .acf-field input[type="text"],
body.cs .culco-form-acf .acf-field input[type="url"],
body.cs .culco-form-acf .acf-field input[type="email"],
body.cs .culco-form-acf .acf-field input[type="number"],
body.cs .culco-form-acf .acf-field textarea,
body.cs .culco-form-acf .acf-field select {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--ui-linha);
    border-radius: var(--ui-raio-campo);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
}
body.cs .culco-form-acf .acf-field input:focus,
body.cs .culco-form-acf .acf-field textarea:focus,
body.cs .culco-form-acf .acf-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
body.cs .culco-form-acf .acf-field .button,
body.cs .culco-form-acf .acf-field a.button {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--ui-raio-botao);
    background: var(--ui-cinza);
    color: var(--ui-texto);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 34px;
    letter-spacing: 0;
    text-transform: none;
    filter: none;
}
body.cs .culco-form-acf .acf-field .button:hover { background: var(--ui-cinza-hover); }
body.cs .culco-form-acf .acf-repeater .acf-table { border-radius: var(--ui-raio-campo); overflow: hidden; }
body.cs .culco-form-acf .acf-repeater .acf-row-handle { background: #F7F6F2; }

/* Checkbox em "pílulas" (Perfil DISC) */
body.cs .culco-form-acf .acf-checkbox-list { display: flex; flex-wrap: wrap; gap: 8px; }
body.cs .culco-form-acf .acf-checkbox-list li { margin: 0 !important; }
body.cs .culco-form-acf .acf-checkbox-list label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--ui-linha);
    border-radius: var(--ui-raio-botao);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
body.cs .culco-form-acf .acf-checkbox-list label.selected {
    border-color: var(--button-color, #16130E);
    background: var(--button-color, #16130E);
    color: var(--button-color-contrast, #fff);
}
body.cs .culco-form-acf .acf-form-submit { padding-top: 12px; }
/* Classe .hidden do wp-admin (o CSS do admin não carrega no site): campo do ícone das Redes Sociais */
body.cs .culco-form-acf .hidden { display: none !important; }
/* Prévia de imagem (Foto, Imagem de destaque) em tamanho de miniatura */
body.cs .culco-form-acf .acf-image-uploader .image-wrap { max-width: 180px; }
body.cs .culco-form-acf .acf-image-uploader .image-wrap img { border-radius: var(--ui-raio-campo); }

/* --------------------------------------------------------------------------
   CARD: título, centro; ALERTA
   -------------------------------------------------------------------------- */
body.cs .culco-card__titulo {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ui-texto);
}
body.cs .culco-card--centro { max-width: 520px; text-align: center; padding: 48px 24px; }
body.cs .culco-card--centro > i { font-size: 40px; color: var(--ui-texto-suave); margin-bottom: 16px; display: block; }

body.cs .culco-alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: var(--ui-raio-campo);
    font-size: 14px;
    font-weight: 600;
}
body.cs .culco-alerta--ok { background: #E8F5E9; color: #1E6B35; }
body.cs .culco-alerta--erro { background: #FDECEA; color: #A82A22; }

/* --------------------------------------------------------------------------
   EDITAR PERFIL
   -------------------------------------------------------------------------- */
body.cs .culco-perfil-editar {
    display: grid;
    grid-template-columns: 260px minmax(0, 720px);
    gap: 24px;
    align-items: start;
}
body.cs .culco-perfil-editar__resumo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
body.cs .culco-perfil-editar__resumo img {
    width: 120px;
    height: 120px;
    margin-bottom: 8px;
    border: 3px solid var(--color-destaques, var(--primary-color));
    border-radius: 50%;
    object-fit: cover;
}
body.cs .culco-perfil-editar__resumo strong { font-size: 17px; }
body.cs .culco-perfil-editar__resumo span { font-size: 14px; color: var(--ui-texto-suave); margin-bottom: 10px; }
@media (max-width: 900px) {
    body.cs .culco-perfil-editar { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   VISUAL DO PORTAL (page-visual.php)
   -------------------------------------------------------------------------- */
body.cs .culco-visual__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}
body.cs .culco-visual__secoes { display: flex; flex-direction: column; gap: 20px; }
body.cs .culco-visual__secao-topo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
body.cs .culco-visual__numero {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    font-weight: 700;
}
body.cs .culco-visual__ajuda { margin: 2px 0 0; font-size: 13.5px; color: var(--ui-texto-suave); }

/* Cores em pares (cor + texto sobre ela), lado a lado */
body.cs .culco-visual__pares .acf-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ui-linha);
}
body.cs .culco-visual__pares .acf-fields:last-child { border-bottom: 0; }
body.cs .culco-visual__google[hidden] { display: none; }
body.cs .culco-visual__google .acf-field-group > .acf-input > .acf-fields { border: 1px solid var(--ui-linha); border-radius: var(--ui-raio-campo); padding: 4px 16px; }
body.cs .culco-visual .acf-field[data-name="logo_negativo"] .image-wrap {
    padding: 12px;
    border-radius: var(--ui-raio-campo);
    background: var(--secondary-color, #16130E);
}

/* Barra "Salvar" fixa embaixo */
body.cs .culco-visual__salvar {
    position: sticky;
    bottom: 16px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 14px 16px 14px 24px;
    border-radius: var(--ui-raio-card);
    background: #fff;
    box-shadow: 0 10px 30px -10px rgba(22, 19, 14, .3);
    font-size: 14px;
    color: var(--ui-texto-suave);
}

/* Lateral com a prévia (acompanha a rolagem) */
body.cs .culco-visual__lateral { position: sticky; top: calc(var(--cs-admin, 0px) + var(--cs-topo-altura, 64px) + 20px); }

/* Mini portal da prévia */
body.cs .culco-previa {
    --pv-topo: var(--secondary-color, #16130E);
    --pv-topo-texto: var(--secondary-color-contrast, #fff);
    --pv-destaque: var(--primary-color, #FFCD00);
    --pv-destaque-texto: var(--primary-color-contrast, #16130E);
    --pv-botao: var(--button-color, #16130E);
    --pv-botao-texto: var(--button-color-contrast, #fff);
    --pv-detalhe: var(--color-destaques, #F0A040);
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid var(--ui-linha);
    border-radius: 10px;
    font-size: 11px;
    user-select: none;
}
body.cs .culco-previa__topo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    background: var(--pv-topo);
    color: var(--pv-topo-texto);
}
body.cs .culco-previa__logo { height: 14px; max-width: 80px; object-fit: contain; }
body.cs .culco-previa__logo--claro { filter: brightness(0) invert(1); }
body.cs .culco-previa__busca {
    flex: 1;
    height: 14px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--pv-topo-texto) 12%, transparent);
}
body.cs .culco-previa__ajuda {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pv-destaque);
    color: var(--pv-destaque-texto);
    font-size: 9px;
    font-weight: 700;
}
body.cs .culco-previa__corpo { display: flex; min-height: 190px; }
body.cs .culco-previa__menu {
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 8px;
    background: var(--pv-topo);
    color: color-mix(in srgb, var(--pv-topo-texto) 65%, transparent);
}
body.cs .culco-previa__menu small { font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
body.cs .culco-previa__menu b { color: var(--pv-topo-texto); font-size: 12px; margin-bottom: 6px; }
body.cs .culco-previa__menu span { padding: 4px 6px; border-radius: 5px; font-weight: 600; }
body.cs .culco-previa__menu span.is-ativo { background: var(--pv-destaque); color: var(--pv-destaque-texto); }
body.cs .culco-previa__conteudo { flex: 1; padding: 12px; background: var(--cs-fundo, #F4F3EE); }
body.cs .culco-previa__titulo { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ui-texto); }
body.cs .culco-previa__titulo i { color: var(--pv-detalhe); }
body.cs .culco-previa__card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--ui-sombra-card);
}
body.cs .culco-previa__foto { width: 22px; height: 22px; border: 2px solid var(--pv-detalhe); border-radius: 50%; background: #E5E2DA; }
body.cs .culco-previa__linha { height: 6px; border-radius: 3px; background: #E5E2DA; }
body.cs .culco-previa__linha--curta { width: 60%; }
body.cs .culco-previa__botao {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--pv-botao);
    color: var(--pv-botao-texto);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 1100px) {
    body.cs .culco-visual__grade { grid-template-columns: 1fr; }
    body.cs .culco-visual__lateral { position: static; order: -1; }
}
@media (max-width: 600px) {
    body.cs .culco-visual__pares .acf-fields { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   MURAL: colunas que se adaptam à largura e card que se reorganiza
   quando fica estreito (iPad, notebook, monitores menores)
   -------------------------------------------------------------------------- */
body.cs .mural-grid:not(.list-view) {
    column-count: auto;
    column-width: 320px;   /* quantas colunas couberem com pelo menos 320px */
    column-gap: 24px;
}
body.cs .mural-card {
    container-type: inline-size;
    border: 0;
    border-radius: var(--ui-raio-card);
    box-shadow: var(--ui-sombra-card);
    overflow-wrap: anywhere;
}
body.cs .mural-card-header {
    flex-wrap: wrap;
    gap: 8px 12px;
    border-radius: var(--ui-raio-card) var(--ui-raio-card) 0 0;
}
body.cs .mural-card-header .user-name.receiver { min-width: 0; }
body.cs .mural-card-header .badge-valor { white-space: normal; max-width: 100%; text-align: center; line-height: 1.3; }
body.cs .mural-footer { flex-wrap: wrap; gap: 12px; border-radius: 0 0 var(--ui-raio-card) var(--ui-raio-card); }
body.cs .mural-sender-info { min-width: 0; margin-left: auto; }
body.cs .sender-text-wrapper { min-width: 0; }

/* Card estreito: avatar centralizado, nome e selo empilhados, rodapé em duas linhas */
@container (max-width: 380px) {
    .mural-card .avatar-extravasa { left: 50%; transform: translateX(-50%); }
    .mural-card .mural-card-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px 14px;
    }
    .mural-card .mural-body { padding: 20px; }
    .mural-card .mural-footer { flex-direction: column; align-items: stretch; padding: 12px 20px; }
    .mural-card .mural-interactions { justify-content: center; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
    .mural-card .mural-sender-info { margin-left: 0; justify-content: center; }
}

/* --------------------------------------------------------------------------
   CELULAR
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.cs { --ui-pagina-pad-y: 20px; --ui-pagina-pad-x: 16px; }

    body.cs .culco-titulo,
    body.cs .dash-main-title { font-size: 23px; }

    body.cs .culco-filtros,
    body.cs .culco-toolbar-blindada,
    body.cs .dash-filters-container {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    body.cs .culco-filtros__campo,
    body.cs .culco-toolbar-blindada .control { flex-basis: auto; }
    body.cs .culco-filtros__acoes > * { flex: 1; }
    body.cs .culco-toolbar-blindada > .button,
    body.cs .culco-toolbar-blindada > .btn-submit-filter,
    body.cs .culco-toolbar-blindada > .btn-clear-filter { width: 100%; margin: 0; }
}

/* --------------------------------------------------------------------------
   PAINEL LATERAL (edição e ajuda da página)
   -------------------------------------------------------------------------- */
body.cs .culco-painel-fundo {
    position: fixed;
    inset: 0;
    z-index: 1990;
    background: rgba(22, 19, 14, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
body.cs .culco-painel {
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px); /* abaixo da barra do WordPress, quando aparece */
    right: 0;
    bottom: 0;
    z-index: 2000;
    width: min(560px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--cs-fundo, #F4F3EE);
    box-shadow: -12px 0 40px rgba(22, 19, 14, .25);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--cs-ease, ease), visibility .3s;
}

body.cs.culco-painel-aberto { overflow: hidden; }
body.cs .culco-painel.is-aberto { transform: translateX(0); visibility: visible; }
body.cs .culco-painel-fundo.is-aberto { opacity: 1; visibility: visible; }
body.cs .culco-painel--largo { width: min(680px, 100vw); }

body.cs .culco-painel__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
    border-bottom: 1px solid var(--ui-linha);
}
body.cs .culco-painel__rotulo {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
}
body.cs .culco-painel__titulo {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ui-texto);
}
body.cs .culco-painel__fechar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-cinza);
    color: var(--ui-texto);
    font-size: 16px;
}
body.cs .culco-painel__fechar:hover { background: var(--ui-cinza-hover); }

body.cs .culco-painel__corpo {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}


/* --------------------------------------------------------------------------
   COMUNICADOS (page-comunicados.php e single.php)
   -------------------------------------------------------------------------- */
body.cs .culco-comunicados__intro { margin-bottom: 20px; }
body.cs .culco-comunicados__grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
body.cs .culco-comunicado { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
body.cs .culco-comunicado__imagem { display: block; aspect-ratio: 16 / 9; background: var(--ui-cinza); }
body.cs .culco-comunicado__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.cs .culco-comunicado__texto { padding: 18px 20px 22px; }
body.cs .culco-comunicado__data { margin: 0 0 6px; font-size: 13px; color: var(--ui-texto-suave); }
body.cs .culco-comunicado__titulo { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
body.cs .culco-comunicado__titulo a { color: var(--ui-texto); text-decoration: none; }
body.cs .culco-comunicado__titulo a:hover { text-decoration: underline; }
body.cs .culco-comunicado__resumo { margin: 0; line-height: 1.5; color: var(--ui-texto-suave); }
body.cs .culco-comunicados__paginas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 0; }
body.cs .culco-comunicados__paginas .page-numbers { padding: 8px 14px; border-radius: var(--ui-raio-botao); background: #fff; box-shadow: var(--ui-sombra-card); color: var(--ui-texto); text-decoration: none; }
body.cs .culco-comunicados__paginas .current { background: var(--button-color); color: var(--button-color-contrast, #fff); }
body.cs .culco-comunicados__vazio { margin-top: 24px; padding: 40px; text-align: center; color: var(--ui-texto-suave); }
body.cs .culco-comunicados__vazio i { display: block; margin-bottom: 12px; font-size: 32px; }

body.cs .culco-comunicado-pagina { max-width: 900px; padding-top: 0; }
body.cs .culco-comunicado-pagina__corpo { padding: 28px 32px; margin: 12px 0 24px; }
body.cs .culco-comunicado-pagina__imagem img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 20px; }
@media (max-width: 600px) { body.cs .culco-comunicado-pagina__corpo { padding: 20px; } }

/* Selos de agenda dos comunicados (só editores veem) */
body.cs .culco-selos-agenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
body.cs .culco-selo-agenda {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--ui-raio-botao);
    background: #E8F0FE; color: #1A4A9C; font-size: 12px; font-weight: 600;
}
body.cs .culco-selo-agenda--saida { background: #FDEFD9; color: #8A4B00; }

/* --------------------------------------------------------------------------
   CONFIGURAÇÕES (page-configuracoes.php)
   -------------------------------------------------------------------------- */
body.cs .culco-config__grupo { margin: 8px 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-texto-suave); }
body.cs .culco-config__lista { padding: 0; overflow: hidden; }
body.cs .culco-config__item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 20px; border-top: 1px solid var(--ui-linha);
    transition: opacity .2s;
}
body.cs .culco-config__item:first-child { border-top: 0; }
body.cs .culco-config__item.is-desligada { opacity: .55; }
body.cs .culco-config__icone {
    flex: 0 0 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; font-size: 16px;
    background: var(--ui-cinza); color: var(--primary-color);
}
body.cs .culco-config__corpo { flex: 1; min-width: 0; }
body.cs .culco-config__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.cs .culco-config__linha { min-height: 38px; }
body.cs .culco-config__linha h3 { margin: 0; font-size: 16px; line-height: 1.3; }
body.cs .culco-config__select { width: auto; min-width: 120px; }
body.cs .culco-config__sempre { flex-shrink: 0; padding: 4px 12px; border-radius: var(--ui-raio-botao); background: var(--ui-cinza); font-size: 12px; font-weight: 600; color: var(--ui-texto-suave); }
body.cs .culco-config__detalhes { margin-top: 2px; }
body.cs .culco-config__detalhes summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ui-texto-suave); }
body.cs .culco-config__detalhes p { margin: 10px 0 0; line-height: 1.5; font-size: 14px; }
body.cs .culco-config__editar-secao,
body.cs .culco-config__categorias { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-linha); display: grid; gap: 6px; }
body.cs .culco-config__categorias ul { margin: 0 0 4px; padding-left: 18px; font-size: 14px; }
body.cs .culco-config__abrir { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; }
body.cs .culco-config__barra {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 22px 0 32px; padding: 14px 18px;
    border-radius: var(--ui-raio-card); background: #fff; box-shadow: 0 -6px 24px -10px rgba(22, 19, 14, .25);
    font-size: 13.5px; color: var(--ui-texto-suave);
}
body.cs .culco-config__nova { padding: 22px 24px; }
body.cs .culco-config__nova h2 { margin: 0 0 6px; font-size: 18px; }
body.cs .culco-config__ajuda { margin: 6px 0 14px; color: var(--ui-texto-suave); line-height: 1.5; font-size: 14px; }
body.cs .culco-config__nova-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
body.cs .culco-config__nova-form .culco-filtros__campo { flex: 1 1 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 0; }
body.cs .culco-config__nova-form .culco-filtros__campo .culco-campo,
body.cs .culco-config__nova-form .culco-campo-icone__previa { height: 44px; box-sizing: border-box; }
body.cs .culco-config__nova-form .culco-campo-icone__previa { flex-basis: 44px; }
body.cs .culco-config__nova-form .culco-filtros__acoes { margin: 0; }
body.cs .culco-config__nova-form .culco-filtros__acoes .culco-botao { height: 44px; }

/* Aviso fixo (página desligada vista pelo superadmin) */
body.cs .culco-aviso--fixo { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 3000; }

/* Interruptor (liga/desliga), estilo iOS */
body.cs .culco-chave { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
body.cs .culco-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body.cs .culco-chave__trilho {
    position: relative; width: 52px; height: 32px; border-radius: 32px;
    background: #E3E3E8; box-shadow: inset 0 0 0 2px #E3E3E8;
    transition: background .2s, box-shadow .2s;
}
body.cs .culco-chave__trilho::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 28px; height: 28px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04);
    transition: transform .2s ease;
}
body.cs .culco-chave input:checked + .culco-chave__trilho { background: #34C759; box-shadow: inset 0 0 0 2px #34C759; }
body.cs .culco-chave input:checked + .culco-chave__trilho::after { transform: translateX(20px); }
body.cs .culco-chave input:focus-visible + .culco-chave__trilho { outline: 3px solid rgba(52, 199, 89, .4); outline-offset: 2px; }

/* Ordem do menu */
body.cs .culco-config__ordem { margin-top: 22px; padding: 22px 24px; }
body.cs .culco-config__ordem h2 { margin: 0 0 6px; font-size: 18px; }
body.cs .culco-config__ordem-lista { list-style: none; counter-reset: ordem; margin: 0; padding: 0; max-width: 560px; }
body.cs .culco-config__ordem-lista li {
    counter-increment: ordem;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-top: 1px solid var(--ui-linha);
}
body.cs .culco-config__ordem-lista li:first-child { border-top: 0; }
body.cs .culco-config__ordem-lista li > span:first-of-type::before { content: counter(ordem) ". "; color: var(--ui-texto-suave); font-weight: 600; }
body.cs .culco-config__ordem-lista li i { width: 20px; text-align: center; color: var(--primary-color); }
body.cs .culco-config__ordem-lista li.is-desligada > span:first-of-type { text-decoration: line-through; opacity: .55; }
body.cs .culco-config__ordem-botoes { display: inline-flex; gap: 6px; }

/* Campo de ícone do Font Awesome */
body.cs .culco-campo-icone { display: flex; align-items: center; gap: 8px; }
body.cs .culco-campo-icone__previa {
    flex: 0 0 40px; height: 40px; border-radius: var(--ui-raio-campo);
    display: grid; place-items: center; background: var(--ui-cinza); font-size: 18px; color: var(--primary-color);
}
body.cs .culco-campo-icone .culco-campo { flex: 1; font-family: ui-monospace, monospace; font-size: 13.5px; }
body.cs .culco-campo-icone__ajuda { display: block; margin-top: 4px; font-size: 12px; color: var(--ui-texto-suave); }

/* --------------------------------------------------------------------------
   BUSCA, 404 e CARDS DE SUGESTÃO (search.php, 404.php, inc/culco-busca.php)
   -------------------------------------------------------------------------- */
body.cs .culco-busca__campo { flex: 1 1 320px; }
body.cs .culco-comunicado__data i { margin-right: 4px; color: var(--primary-color); }

body.cs .culco-sugestoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; }
body.cs .culco-sugestao {
    display: flex; flex-direction: column; gap: 8px; padding: 22px;
    color: var(--ui-texto); text-decoration: none; transition: transform .2s, box-shadow .2s;
}
body.cs .culco-sugestao:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(22, 19, 14, .05), 0 16px 32px -14px rgba(22, 19, 14, .25); }
body.cs .culco-sugestao__icone {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--primary-color); color: var(--primary-color-contrast, #fff); font-size: 18px;
}
body.cs .culco-sugestao strong { font-size: 17px; }
body.cs .culco-sugestao__texto { color: var(--ui-texto-suave); font-size: 14px; line-height: 1.5; flex: 1; }
body.cs .culco-sugestao__ir { font-size: 13.5px; font-weight: 600; color: var(--ui-texto); }

body.cs .culco-404__topo { position: relative; overflow: hidden; padding: 36px 36px 30px; margin-bottom: 28px; }
body.cs .culco-404__codigo {
    position: absolute; right: 24px; top: -18px; font-size: 140px; font-weight: 800; line-height: 1;
    color: var(--primary-color); opacity: .12; pointer-events: none;
}
body.cs .culco-404__busca { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; max-width: 560px; }
body.cs .culco-404__busca .culco-campo { flex: 1 1 260px; height: 44px; }
body.cs .culco-404__inicio { font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
    body.cs .culco-404__topo { padding: 26px 20px; }
    body.cs .culco-404__codigo { font-size: 90px; top: -8px; }
}

/* Configurações: Ordem do menu e Nova seção lado a lado */
body.cs .culco-config__colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; margin-top: 22px; }
body.cs .culco-config__colunas .culco-config__ordem { margin-top: 0; }
body.cs .culco-config__colunas .culco-config__nova-form { display: grid; grid-template-columns: 1fr; gap: 14px; }
body.cs .culco-config__colunas .culco-config__nova-form .culco-filtros__campo { flex: none; }
body.cs .culco-config__colunas .culco-config__nova-form .culco-filtros__acoes { justify-content: flex-start; }
@media (max-width: 1000px) { body.cs .culco-config__colunas { grid-template-columns: minmax(0, 1fr); } }

/* Selos de nível de usuário (Gerenciar Usuários) */
body.cs .culco-nivel { display: inline-block; padding: 4px 10px; border-radius: var(--ui-raio-botao); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
body.cs .culco-nivel--funcionario   { background: #E8F5E9; color: #2E7D32; }
body.cs .culco-nivel--editor_culco  { background: #E8F0FE; color: #1A4A9C; }
body.cs .culco-nivel--administrator { background: #FFF3E0; color: #E65100; }
body.cs .culco-nivel--superadmin    { background: #16130E; color: #fff; }

/* --------------------------------------------------------------------------
   BASE DE CONHECIMENTO (page-base-conhecimento.php)
   -------------------------------------------------------------------------- */
body.cs .culco-base__grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
body.cs .culco-base__grade .culco-card { padding: 20px 22px; }
body.cs .culco-base__grade h2 { margin: 0 0 10px; font-size: 17px; }
body.cs .culco-base__lateral { display: flex; flex-direction: column; gap: 18px; }
body.cs .culco-base__docs { list-style: none; margin: 0; padding: 0; }
body.cs .culco-base__doc { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ui-linha); }
body.cs .culco-base__doc:first-child { border-top: 0; }
body.cs .culco-base__doc.is-inativo .culco-base__doc-info { opacity: .55; }
body.cs .culco-base__doc-info { min-width: 0; }
body.cs .culco-base__doc-info strong { display: block; }
body.cs .culco-base__doc-info span { font-size: 13px; color: var(--ui-texto-suave); }
body.cs .culco-base__doc-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
body.cs .culco-base__doc-acoes form { margin: 0; }
body.cs .culco-base__barra { height: 10px; border-radius: 10px; background: var(--ui-cinza); overflow: hidden; margin-bottom: 8px; }
body.cs .culco-base__barra span { display: block; height: 100%; background: var(--primary-color); border-radius: 10px; }
body.cs .culco-base__importar { display: grid; gap: 10px; }
body.cs .culco-base__check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
body.cs .culco-base__numeros { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 13.5px; color: var(--ui-texto-suave); }
body.cs .culco-base__numeros strong { display: block; font-size: 20px; color: var(--ui-texto); }
body.cs .culco-base__sem { margin: 10px 0; padding-left: 0; list-style: none; max-height: 260px; overflow-y: auto; font-size: 13.5px; }
body.cs .culco-base__sem li { padding: 6px 0; border-top: 1px solid var(--ui-linha); }
body.cs .culco-base__sem li span { color: var(--ui-texto-suave); margin-right: 6px; }
body.cs .culco-base__form { display: grid; gap: 10px; padding: 18px 24px 24px; }
body.cs .culco-base__abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--ui-raio-botao); background: var(--ui-cinza); width: max-content; }
body.cs .culco-base__abas button { padding: 6px 16px; border: 0; border-radius: var(--ui-raio-botao); background: none; font: inherit; font-size: 13.5px; cursor: pointer; }
body.cs .culco-base__abas button[aria-selected="true"] { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
body.cs .culco-base__texto { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; line-height: 1.55; min-height: 380px; resize: vertical; }
body.cs .culco-base__previa { max-width: none; min-height: 380px; padding: 16px 18px; border-radius: var(--ui-raio-campo); background: #fff; line-height: 1.55; }
body.cs .culco-base__salvar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 1000px) { body.cs .culco-base__grade { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   DASHBOARD GERAL (page-dashboard-geral.php)
   -------------------------------------------------------------------------- */
body.cs .culco-dash__datas > span { display: flex; gap: 6px; }
body.cs .culco-dash__periodo { margin: 14px 0 18px; font-size: 13.5px; color: var(--ui-texto-suave); }
body.cs .culco-dash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 18px; }
body.cs .culco-dash__kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
body.cs .culco-dash__kpi span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ui-texto-suave); }
body.cs .culco-dash__kpi strong { font-size: 30px; line-height: 1.15; color: var(--ui-texto); }
body.cs .culco-dash__kpi small { font-size: 12.5px; color: var(--ui-texto-suave); }
body.cs .culco-dash__bloco { padding: 20px 22px; margin-bottom: 18px; }
body.cs .culco-dash__bloco h2 { margin: 0 0 14px; font-size: 16.5px; }
body.cs .culco-dash__bloco h2 i { margin-right: 6px; color: var(--primary-color); }
body.cs .culco-dash__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
body.cs .culco-dash__vazio, body.cs .culco-dash__nota { margin: 0; font-size: 13.5px; color: var(--ui-texto-suave); }
body.cs .culco-dash__nota { margin-top: 12px; }
body.cs .culco-dash__titulo-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
body.cs .culco-dash__titulo-linha h2 { margin: 0; }

/* Série (colunas lado a lado: Culcos e acessos) */
body.cs .culco-dash__legenda { display: flex; gap: 16px; margin: -6px 0 10px; font-size: 12.5px; color: var(--ui-texto-suave); }
body.cs .culco-dash__legenda span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
body.cs .culco-dash__legenda .is-culcos::before, body.cs .culco-dash__barras .is-culcos { background: var(--primary-color); }
body.cs .culco-dash__legenda .is-acessos::before, body.cs .culco-dash__barras .is-acessos { background: var(--color-destaques, #f1c40f); }
body.cs .culco-dash__serie { display: flex; align-items: flex-end; gap: 4px; height: 200px; overflow-x: auto; padding-bottom: 2px; }
body.cs .culco-dash__coluna { flex: 1 0 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
body.cs .culco-dash__barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--ui-linha); }
body.cs .culco-dash__barras span { width: 42%; max-width: 16px; min-height: 1px; border-radius: 3px 3px 0 0; }
body.cs .culco-dash__coluna small { font-size: 10.5px; color: var(--ui-texto-suave); white-space: nowrap; }

/* Rankings com barra */
body.cs .culco-dash__ranking { list-style: none; counter-reset: rk; margin: 0; padding: 0; }
body.cs .culco-dash__ranking li { counter-increment: rk; display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(60px, 34%) 44px; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
body.cs .culco-dash__ranking li::before { content: counter(rk); font-size: 12px; font-weight: 700; color: var(--ui-texto-suave); text-align: right; }
body.cs .culco-dash__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.cs .culco-dash__barra { height: 8px; border-radius: 8px; background: var(--ui-cinza); overflow: hidden; }
body.cs .culco-dash__barra span { display: block; height: 100%; border-radius: 8px; background: var(--primary-color); }
body.cs .culco-dash__ranking strong { text-align: right; }

/* Tabelas */
body.cs .culco-dash__tabela-wrap { overflow-x: auto; }
body.cs .culco-dash__tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
body.cs .culco-dash__tabela th { text-align: left; padding: 8px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-texto-suave); border-bottom: 1px solid var(--ui-linha); }
body.cs .culco-dash__tabela td { padding: 9px 10px; border-bottom: 1px solid var(--ui-linha); }
body.cs .culco-dash__tabela tr.is-sem td { color: var(--ui-texto-suave); }
body.cs .culco-dash__bloco > .culco-botao { margin-top: 12px; }
@media (max-width: 900px) { body.cs .culco-dash__grade { grid-template-columns: minmax(0, 1fr); } }

/* Página de um conteúdo (procedimento, treinamento, agente, seções extras) */
body.cs .culco-conteudo-pagina { padding-top: 0; }
body.cs .culco-conteudo-pagina__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 12px; color: var(--ui-texto-suave); font-size: 13px;
}
body.cs .culco-conteudo-pagina__selo {
    padding: 3px 10px; border-radius: 100px;
    background: var(--cs-destaque, #FFCD00); color: var(--cs-destaque-texto, #16130E);
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
body.cs .culco-conteudo-pagina__grade {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start;
    margin-bottom: 24px;
}
body.cs .culco-conteudo-pagina__grade--sem-links { grid-template-columns: minmax(0, 1fr); max-width: 1000px; }
body.cs .culco-conteudo-pagina__corpo { padding: 32px 36px; }
body.cs .culco-conteudo-pagina__corpo .editor > :first-child { margin-top: 0; }
body.cs .culco-conteudo-pagina__corpo .editor img { max-width: 100%; height: auto; border-radius: 10px; }
body.cs .culco-conteudo-pagina__links { position: sticky; top: 24px; padding: 22px; }
body.cs .culco-conteudo-pagina__links-titulo {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ui-texto);
}
body.cs .culco-conteudo-pagina__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.cs .culco-conteudo-pagina__link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: var(--ui-raio-campo);
    background: var(--ui-cinza); color: var(--ui-texto); font-weight: 600; font-size: 14px;
    text-decoration: none; transition: background .15s, color .15s;
}
body.cs .culco-conteudo-pagina__link i { font-size: 12px; opacity: .6; flex-shrink: 0; }
body.cs .culco-conteudo-pagina__link:hover,
body.cs .culco-conteudo-pagina__link:focus-visible {
    background: var(--cs-destaque, #FFCD00); color: var(--cs-destaque-texto, #16130E);
}
@media (max-width: 900px) {
    body.cs .culco-conteudo-pagina__grade { grid-template-columns: minmax(0, 1fr); }
    body.cs .culco-conteudo-pagina__links { position: static; }
}
@media (max-width: 600px) { body.cs .culco-conteudo-pagina__corpo { padding: 20px; } }