/* ==========================================================================
   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; }

/* --------------------------------------------------------------------------
   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; }

/* --------------------------------------------------------------------------
   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; }
}

/* --------------------------------------------------------------------------
   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; }
}