/* Shared UI adjustments used across multiple screens after Bootstrap 5 migration */

.navbar.fixed-top {
    z-index: 3000 !important;
}

.navbar,
.navbar .navbar-collapse {
    overflow: visible !important;
}

.navbar .dropdown,
.navbar .dropdown-menu {
    overflow: visible;
}

.navbar.navbar-light .navbar-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1;
}

.navbar.navbar-light .navbar-nav {
    align-items: center;
}

.navbar.navbar-light .navbar-nav .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1;
    font-size: 14px;
    font-weight: 500;
    padding: 0.5rem 0.7rem;
}

.navbar .dropdown-menu {
    z-index: 3100 !important;
}

.modal {
    z-index: 4000 !important;
}

.modal-backdrop {
    z-index: 3990 !important;
}

/* Keep Instituto C navbar dropdowns above page cards/content blocks. */
.navbar.navbar-ic.fixed-top {
    z-index: 3200 !important;
    overflow: visible !important;
}

.navbar.navbar-ic .navbar-collapse {
    overflow: visible !important;
}

.navbar.navbar-ic .container-fluid {
    overflow: visible !important;
}

.navbar.navbar-ic.fixed-top .navbar-collapse,
.navbar.navbar-ic.fixed-top .navbar-collapse.show,
.navbar.navbar-ic.fixed-top .navbar-collapse.in,
.navbar.navbar-ic.fixed-top .navbar-collapse.collapsing {
    max-height: none !important;
    overflow: visible !important;
}

.navbar.navbar-ic .dropdown-menu {
    z-index: 3300 !important;
}

.navbar.navbar-ic .navbar-ic-logo {
    max-height: 38px;
    width: auto;
}

.navbar.navbar-ic .navbar-ic-alias {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-10px);
}

@media (min-width: 1400px) {
    .navbar.navbar-ic.fixed-top {
        height: 50px;
        min-height: 50px;
        padding-top: 0;
        padding-bottom: 0;
        overflow: visible !important;
    }

    .navbar.navbar-ic .container-fluid {
        height: 100%;
        flex-wrap: nowrap;
        overflow: visible !important;
    }

    .navbar.navbar-ic .navbar-brand,
    .navbar.navbar-ic .navbar-nav .nav-link {
        min-height: 50px;
        padding-top: 0;
        padding-bottom: 0;
        line-height: 1;
    }

    .navbar.navbar-ic .navbar-ic-alias {
        transform: translateY(-3px);
    }

    .navbar.navbar-ic .navbar-collapse {
        height: 100%;
        flex-wrap: nowrap;
        overflow: visible !important;
    }

    .navbar.navbar-ic .navbar-collapse.show,
    .navbar.navbar-ic .navbar-collapse.in,
    .navbar.navbar-ic .navbar-collapse.collapsing {
        overflow: visible !important;
    }

    .navbar.navbar-ic .navbar-nav {
        flex-wrap: nowrap;
    }

    .navbar.navbar-ic .dropdown-menu {
        margin-top: 0;
    }
}

@media (max-width: 1399.98px) {
    .navbar.navbar-ic + .tela-principal,
    .navbar.navbar-ic + .ic-app-scroll > .tela-principal {
        margin-top: 58px;
    }

    .navbar.navbar-ic .navbar-collapse {
        background-color: #fff;
    }
}

.tela-principal {
    position: relative;
    z-index: 0 !important;
}

/* ============================================================
   App shell (só no _LayoutNew, via body.ic-app-shell): quem rola é o
   .ic-app-scroll — wrapper full-bleed do .tela-principal — e não o body.
   Assim a scrollbar começa ABAIXO da navbar fixa e corre na CALHA da
   janela (na margem, fora do painel branco arredondado do .tela-principal).
   Mantém o espaçamento atual (padding-top do body + margens do painel).
   ============================================================ */
body.ic-app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.ic-app-shell > .ic-app-scroll {
    flex: 1 1 auto;
    min-height: 0; /* permite o flex-item encolher e rolar internamente */
    overflow-y: auto;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
}

/* Painel estica até o fundo em páginas curtas; cresce livre nas longas. */
body.ic-app-shell > .ic-app-scroll > .tela-principal {
    flex: 1 0 auto;
}

.navbar .dropdown-toggle::after {
    vertical-align: 0.18em;
}

.navbar .dropdown-menu .dropdown-item {
    font-size: 14px;
    line-height: 1.35;
}

#logoutForm {
    margin-bottom: 0;
}

#logoutForm .navbar-nav,
#logoutForm .nav {
    margin-bottom: 0;
}

#logoutForm .nav-link {
    padding-right: 0;
}

.triagemic-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.triagemic-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.triagemic-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.triagemic-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.triagemic-kpi strong {
    margin-left: 0.25rem;
}

.triagemic-kpi--good {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.triagemic-kpi--warn {
    background: #fff4e3;
    border-color: #f0ddbe;
    color: #8a5b13;
}

.triagemic-kpi--info {
    background: #eaf1fb;
    border-color: #d3e2f5;
    color: #2f4767;
}

.triagemic-kpi--neutral {
    background: #eef0f4;
    border-color: #e0e4ec;
    color: #54617a;
}

.triagemic-kpi--primary {
    background: var(--ic-danger-bg);
    border-color: var(--ic-danger-border);
    color: var(--ic-danger-text);
}

/* Chips de KPI que também filtram a listagem (Triagens IC): mesmo visual do KPI,
   com estado clicável + selecionado. */
.triagemic-status-filters {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.triagemic-kpi--filter {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.triagemic-kpi--filter:hover {
    filter: brightness(0.96);
}

.triagemic-kpi--filter:focus-visible {
    outline: 2px solid var(--ic-primary);
    outline-offset: 2px;
}

.triagemic-kpi--filter.is-active {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.triagemic-result-count {
    font-size: 0.82rem;
    color: var(--ic-ink-muted);
    padding: 0 0.15rem 0.4rem;
}

/* Botão de limpar dentro do campo de busca do hero (.usuario-search já é relative). */
.triagemic-search .form-control {
    padding-right: 1.9rem;
}

.triagemic-search-clear {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ic-ink-muted);
    line-height: 1;
    padding: 0.15rem 0.25rem;
    cursor: pointer;
    z-index: 2;
}

/* Neutraliza `.usuario-search .fa` (regra da lupa, definida depois neste arquivo);
   por isso o seletor precisa de especificidade maior. */
.usuario-search .triagemic-search-clear .fa {
    position: static;
    transform: none;
    left: auto;
    color: inherit;
    pointer-events: none;
}

.triagemic-search-clear:hover {
    color: var(--ic-primary);
}

.triagemic-polo-filter {
    width: 280px;
    max-width: 100%;
}

.triagemic-layout {
    align-items: flex-start;
}

.triagemic-main hr {
    margin: 1rem 0;
    border-top: 1px solid #e6e6e6;
    opacity: 1;
}

.triagemic-sidebar {
    margin-top: 16px;
}

.triagemic-right-column {
    margin-top: 16px;
}

.triagemic-menu-direito h3 {
    margin: 0 0 0.65rem;
    font-size: 1.25rem;
}

.triagemic-menu-direito h4 {
    margin: 0.35rem 0 0.5rem;
    font-size: 0.98rem;
    font-weight: 600;
}

.triagemic-menu-direito progress {
    height: 8px;
}

.triagemic-menu-direito .form-group label {
    font-size: 0.82rem;
    margin-bottom: 0.25rem;
}

.triagemic-menu-direito .form-control {
    min-height: 34px;
    padding: 0.28rem 0.45rem;
    font-size: 0.84rem;
    border-color: #d9d9d9;
}

.triagemic-menu-direito .card {
    border-width: 1px;
}

.triagemic-menu-direito .card-header {
    padding: 0.45rem 0.65rem;
    font-size: 0.88rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.triagemic-menu-direito .list-group-item {
    padding: 0.34rem 0.6rem;
    font-size: 0.82rem;
    border-color: #e7e7e7;
}

.triagemic-menu-direito .badge {
    font-size: 0.72rem;
    font-weight: 600;
}

.triagemic-menu-direito .btn {
    font-size: 0.86rem;
}

#sidebar.nav.flex-column > li > a {
    color: #777;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 500;
}

#sidebar.nav.flex-column > li > a:hover,
#sidebar.nav.flex-column > li > a:focus {
    text-decoration: none;
    color: #ef4365;
}

#sidebar .nav.flex-column > li > a {
    padding: 1px 16px 1px 26px;
    font-size: 12px;
    color: #8a8a8a;
}

#conteudoTabela.table > thead > tr > th {
    border-bottom-width: 1px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

#conteudoTabela.table > tbody > tr > td {
    border-top-width: 1px;
    font-size: 0.84rem;
    vertical-align: middle;
}

#conteudoTabela .form-select,
#conteudoTabela .form-control {
    min-height: 30px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.82rem;
}

@media (max-width: 991.98px) {
    .triagemic-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .triagemic-polo-filter {
        width: 100%;
    }

    .triagemic-right-column {
        margin-top: 0;
    }
}

.triagemic-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.triagemic-page-shell {
    padding: 0.65rem;
}

.triagemic-hero {
    background: linear-gradient(135deg, #e8effb 0%, #dce7f8 48%, #edf3fe 100%);
    border: 1px solid #d6e0f1;
    /* O .card global (Site.css:355) é `flex: 100%` = grow 1 + basis 100%. Dentro do
       .triagemic-page (flex column) isso faz o hero esticar até o fim da página quando
       sobra espaço — gritante nas listagens curtas, onde o hero é o único .card e come
       a sobra inteira. O hero tem SEMPRE a altura do seu conteúdo. */
    flex: 0 0 auto;
}

.triagemic-hero .card-body {
    padding: 0.82rem 1rem;
}

.triagemic-hero .triagemic-toolbar {
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    margin-bottom: 0;
}

.triagemic-hero .triagemic-toolbar-left {
    gap: 6px;
}

.triagemic-page .triagemic-toolbar .btn.btn-ic,
.triagemic-page .triagemic-toolbar .btn.btn-ic:focus,
.triagemic-page .triagemic-toolbar .btn.btn-ic:active {
    border: 1px solid #ef4365;
    color: #fff;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.triagemic-page .triagemic-toolbar .btn.btn-ic:hover,
.triagemic-page .triagemic-toolbar .btn.btn-ic:focus-visible {
    background-color: #fff;
    border-color: #ef4365;
    color: #ef4365;
    box-shadow: 0 0 0 2px rgba(239, 67, 101, 0.16);
}

.triagemic-page .triagemic-toolbar .btn.btn-ic .fa {
    color: inherit !important;
}

.triagemic-hero h2 {
    font-size: 1.38rem;
    line-height: 1.2; /* folga p/ o descender (g, j, p, q, y) não ser cortado pelo overflow:hidden do toolbar */
}

.triagemic-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4f5f77;
    background: #eaf0f8;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.triagemic-toolbar-description {
    font-size: 0.92rem;
    color: #5c6675;
}

.triagemic-filter-label {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #495e7c;
}

.triagemic-content {
    /* O .card global (Site.css:341) é flex-direction: row, herança de cards
       de agenda legados. O content card SEMPRE empilha: cabeçalho em cima,
       tabela embaixo. Forçamos coluna aqui (app-shared carrega depois do
       Site.css, então vence sem !important e sem tocar no .card global). */
    display: flex;
    flex-direction: column;
    border: 1px solid #dbe5f3;
}

.triagemic-content-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid #dfe8f5;
    background: #eef3fb;
}

.triagemic-content-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #223754;
}

.triagemic-content-subtitle {
    font-size: 0.86rem;
    color: #6c7788;
}

.triagemic-table-wrap {
    padding-top: 0.4rem !important;
}

.triagemic-table-region {
    position: relative;
}

.triagemic-table-loader {
    position: absolute;
    inset: 0.48rem 0.78rem;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
    color: #29486a;
    font-size: 0.88rem;
    font-weight: 600;
}

.triagemic-table-loader-spinner {
    width: 1.2rem;
    height: 1.2rem;
    border-width: 0.16em;
    color: #ef4365;
}

/* ============================================================
   Triagens em CARDS (grade densa → cards, one-per-row).
   Página tingida (escopada) + card "ficha": faixa de status colorida à
   esquerda, topo em grid alinhado (nº · nome · score · status · ações) e
   régua de meta em colunas fixas. Sem DataTables (busca/polo client-side).
   ============================================================ */
.triagemic-cards-page {
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 96px);
}

.triagemic-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.triagemic-card {
    background: #fff;
    border: 1px solid var(--ic-border);
    border-left: 4px solid var(--ic-accent-neutral);
    border-radius: var(--ic-radius-md);
    box-shadow: var(--ic-shadow-sm);
    padding: 0.7rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}

.triagemic-card:hover {
    box-shadow: 0 0 0 3px var(--ic-primary-soft), var(--ic-shadow-md);
    transform: translateY(-1px);
}

/* Faixa de status à esquerda (cor por estado) */
.triagemic-card--good { border-left-color: #38a169; }
.triagemic-card--warn { border-left-color: #d9a121; }
.triagemic-card--info { border-left-color: var(--ic-accent-info); }
.triagemic-card--primary { border-left-color: var(--ic-primary); }
.triagemic-card--neutral { border-left-color: var(--ic-accent-neutral); }
.triagemic-card--danger { border-left-color: var(--ic-danger-text); }

/* ── Topo em grid alinhado ── */
.triagemic-card-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(180px, 220px) auto;
    align-items: center;
    gap: 0.9rem;
}

.triagemic-card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.2rem;
    padding: 0 0.55rem;
    border-radius: 10px;
    background: var(--ic-bg-soft);
    border: 1px solid #d4e0f1;
    color: var(--ic-ink-soft);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.triagemic-card-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.triagemic-card-name {
    font-weight: 700;
    color: var(--ic-ink);
    font-size: 0.98rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.triagemic-card-sub {
    font-size: 0.78rem;
    color: var(--ic-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.triagemic-card-top .triagemic-score {
    min-width: 48px;
    min-height: 30px;
    font-weight: 700;
}

/* Coluna de status: controle (pill/dropdown) + Aceitar Família */
.triagemic-card-status {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.triagemic-status-select {
    width: 100%;
}

.triagemic-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.3rem 0.7rem;
    border: 1px solid transparent;
    text-decoration: none;
    text-align: center;
}

a.triagemic-status-pill:hover {
    filter: brightness(0.97);
    text-decoration: none;
}

.triagemic-status-pill--good { background: #e5f7ed; border-color: #c6ebd7; color: #11653a; }
.triagemic-status-pill--warn { background: #fff4e3; border-color: #f0ddbe; color: #8a5b13; }
.triagemic-status-pill--info { background: #eaf1fb; border-color: #d3e2f5; color: #2f4767; }
.triagemic-status-pill--neutral { background: #eef0f4; border-color: #e0e4ec; color: #54617a; }
.triagemic-status-pill--danger { background: var(--ic-danger-bg); border-color: var(--ic-danger-border); color: var(--ic-danger-text); }

.triagemic-card-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Régua de meta: 7 colunas fixas, SEMPRE 1 linha (mesma altura p/ todos os
   cards; a Obs é a 7ª coluna, truncada em 1 linha com tooltip). ── */
.triagemic-card-meta {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem 0.85rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--ic-border);
}

.triagemic-meta-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.triagemic-meta-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--ic-ink-muted);
}

.triagemic-meta-value {
    font-size: 0.84rem;
    color: var(--ic-ink);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.triagemic-convite {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    white-space: normal;
}

.triagemic-convite-input {
    display: inline-block;
    width: 116px;
}

.triagemic-convite-count {
    color: var(--ic-ink-muted);
    font-size: 0.8rem;
}

/* Filtro de polo inline no hero */
.triagemic-polo-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ic-ink-muted);
}

.triagemic-polo-inline .fa {
    font-size: 0.82rem;
}

.triagemic-polo-inline .form-select {
    min-width: 168px;
}

/* Hero numa linha só: as ações crescem p/ ocupar a largura e alinham à direita;
   busca mais estreita e KPIs/gap um pouco menores p/ tudo caber. */
.triagemic-cards-page .triagemic-hero-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 0.45rem;
}

.triagemic-cards-page .triagemic-kpi {
    font-size: 0.8rem;
    padding: 0.18rem 0.55rem;
}

.triagemic-cards-page .triagemic-search {
    flex: 0 1 240px;
    min-width: 160px;
}

@media (max-width: 991.98px) {
    .triagemic-card-top {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .triagemic-card-status {
        grid-column: 1 / -1;
    }

    .triagemic-card-actions {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .triagemic-card-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .triagemic-card-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.triagemic-empty {
    margin-top: 0.3rem;
}

/* Botão em carregamento (ação AJAX em andamento): no clique, adicionar a classe
   junto com disabled via JS; remover ambos se a ação falhar. O spinner entra como
   ::before, preservando o rótulo do botão. */
.btn.ic-btn-loading {
    pointer-events: none;
}

.btn.ic-btn-loading::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    vertical-align: -0.125em;
    border: 0.14em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ic-btn-loading-spin 0.65s linear infinite;
}

@keyframes ic-btn-loading-spin {
    to { transform: rotate(360deg); }
}

.triagemic-loader {
    width: 100%;
    min-height: 2px;
}

.triagemic-table-shell {
    border: 1px solid #d5e1f1;
    border-radius: 14px;
    background: #fff;
    padding: 0.4rem 0.55rem 0.25rem;
}

#conteudoTabela.triagemic-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0.28rem;
}

#conteudoTabela.triagemic-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #e9f0fb;
    border-bottom: 1px solid #ccdbee;
    color: #344e71;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.72rem 0.65rem;
}

#conteudoTabela.triagemic-table > thead > tr > th.sorting,
#conteudoTabela.triagemic-table > thead > tr > th.sorting_asc,
#conteudoTabela.triagemic-table > thead > tr > th.sorting_desc,
#conteudoTabela.triagemic-table > thead > tr > th.sorting_asc_disabled,
#conteudoTabela.triagemic-table > thead > tr > th.sorting_desc_disabled {
    padding-right: 1.85rem !important;
    background-image: none !important;
}

#conteudoTabela.triagemic-table thead .sorting:after,
#conteudoTabela.triagemic-table thead .sorting_asc:after,
#conteudoTabela.triagemic-table thead .sorting_desc:after,
#conteudoTabela.triagemic-table thead .sorting_asc_disabled:after,
#conteudoTabela.triagemic-table thead .sorting_desc_disabled:after {
    font-family: inherit !important;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    top: 50%;
    bottom: auto;
    right: 0.62rem;
    transform: translateY(-50%);
    color: #5a769d;
    opacity: 0.55;
}

#conteudoTabela.triagemic-table thead .sorting:after {
    content: "↕";
    opacity: 0.35;
}

#conteudoTabela.triagemic-table thead .sorting_asc:after {
    content: "▲";
}

#conteudoTabela.triagemic-table thead .sorting_desc:after {
    content: "▼";
}

#conteudoTabela.triagemic-table thead .sorting_asc_disabled:after,
#conteudoTabela.triagemic-table thead .sorting_desc_disabled:after {
    opacity: 0.2;
}

#conteudoTabela.triagemic-table > tbody > tr > td {
    border-top: 1px solid #eef2f7;
    font-size: 0.84rem;
    padding: 0.58rem 0.65rem;
    vertical-align: middle;
    color: #2f3f53;
    white-space: nowrap;
}

#conteudoTabela.triagemic-table tbody td.sorting_1,
#conteudoTabela.triagemic-table tbody td.sorting_2,
#conteudoTabela.triagemic-table tbody td.sorting_3 {
    background: transparent !important;
}

#conteudoTabela.triagemic-table > tbody > tr:hover > td {
    background: #f2f6fd;
}

.triagemic-id-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.triagemic-id-number {
    font-weight: 700;
    color: #243144;
}

.triagemic-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.triagemic-row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #516a89;
    background: #e7eef9;
    text-decoration: none;
    transition: all 0.16s ease;
}

.triagemic-row-actions a:hover {
    background: #d2e0f3;
    color: #2d4464;
}

.triagemic-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 28px;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.82rem;
    border: 1px solid transparent;
}

.triagemic-score--low {
    background: #dff5e7;
    color: #0f6b3a;
    border-color: #bde5cd;
}

.triagemic-score--medium {
    background: #fff5cf;
    color: #735300;
    border-color: #f6e4a2;
}

.triagemic-score--high {
    background: #fde1db;
    color: #8e2f1f;
    border-color: #f5c1b6;
}

.triagemic-family-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    border-radius: 999px;
    padding: 0.08rem 0.48rem;
    font-weight: 600;
    color: #2d4a6e;
    background: #dceaff;
}

.triagemic-accept-btn {
    font-size: 0.76rem;
    font-weight: 600;
}

.triagemic-page .dataTables_wrapper .dataTables_length,
.triagemic-page .dataTables_wrapper .dataTables_filter,
.triagemic-page .dataTables_wrapper .dataTables_info,
.triagemic-page .dataTables_wrapper .dataTables_paginate {
    font-size: 0.84rem;
    color: #53627b;
}

.triagemic-page .dataTables_wrapper {
    padding: 0.25rem 0.45rem 0.2rem;
}

.triagemic-page .dataTables_wrapper .dataTables_length,
.triagemic-page .dataTables_wrapper .dataTables_filter {
    padding: 0.15rem 0.2rem 0.2rem;
}

.triagemic-page .dataTables_wrapper .dataTables_info,
.triagemic-page .dataTables_wrapper .dataTables_paginate {
    padding: 0.35rem 0.2rem 0.15rem;
}

.triagemic-page .dataTables_wrapper .dataTables_filter input,
.triagemic-page .dataTables_wrapper .dataTables_length select {
    border: 1px solid #c8d7ea;
    border-radius: 8px;
    min-height: 34px;
    padding: 0.22rem 0.55rem;
    background: #fff;
}

.triagemic-page .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
}

.triagemic-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.triagemic-page .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 1px solid #a8c2e5 !important;
    background: #dbe9fb !important;
    color: #1f4269 !important;
}

@media (max-width: 991.98px) {
    .triagemic-content-head {
        padding: 10px 12px 8px;
    }
}

/* Family Index2: keep pre-migration visual proportions while running on Bootstrap 5. */
.family-legacy-bs5 .form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -6px;
    margin-left: -6px;
}

.family-legacy-bs5 .form-row > [class^="col-"],
.family-legacy-bs5 .form-row > [class*=" col-"] {
    padding-right: 6px;
    padding-left: 6px;
}

.family-legacy-bs5 .align-bottom {
    align-items: flex-end;
}

.family-legacy-bs5 #dropdowns.w-100 {
    width: auto !important;
}

.family-legacy-bs5 #dropdowns {
    margin-right: 0 !important;
}

.family-legacy-bs5 .ml-1 { margin-left: 0.25rem !important; }
.family-legacy-bs5 .ml-2 { margin-left: 0.5rem !important; }
.family-legacy-bs5 .ml-3 { margin-left: 1rem !important; }
.family-legacy-bs5 .ml-4 { margin-left: 1.5rem !important; }
.family-legacy-bs5 .ml-5 { margin-left: 3rem !important; }

.family-legacy-bs5 .mr-1 { margin-right: 0.25rem !important; }
.family-legacy-bs5 .mr-2 { margin-right: 0.5rem !important; }
.family-legacy-bs5 .mr-3 { margin-right: 1rem !important; }
.family-legacy-bs5 .mr-4 { margin-right: 1.5rem !important; }

.family-legacy-bs5 .main-text,
.family-legacy-bs5 .family-card-header p,
.family-legacy-bs5 .family-card-container p {
    font-size: 14px;
    line-height: 1.25;
}

.family-legacy-bs5 .secondary-text,
.family-legacy-bs5 .family-card-header h6,
.family-legacy-bs5 .family-card-container h6 {
    font-size: 13px;
}

.family-legacy-bs5 .sort-button {
    font-size: 13px;
}

.family-legacy-bs5 .sort-button.active {
    background-color: #eceff4;
}

.family-legacy-bs5 .family-card-header {
    padding-top: 15px;
    padding-bottom: 7px;
}

.family-legacy-bs5 .family-card .fa-2x {
    font-size: 1.6em;
    line-height: 1;
}

.family-legacy-bs5 .family-cards-container {
    padding-top: 1.35rem;
}

.family-legacy-bs5 #employees-counter {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1;
}

/* Navbar IC refresh for Bootstrap 5 rollout. */
.navbar.navbar-ic .navbar-ic-menu .nav-link {
    border-radius: 10px;
    color: #324963;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.navbar.navbar-ic .navbar-ic-menu .nav-link:hover,
.navbar.navbar-ic .navbar-ic-menu .nav-link:focus-visible {
    color: #ef4365;
    background: #f6f8fc;
}

.navbar.navbar-ic .navbar-ic-menu .dropdown-menu {
    border: 1px solid #dfe7f3;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(29, 50, 81, 0.12);
    padding: 0.35rem;
}

.navbar.navbar-ic .navbar-ic-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.42rem 0.6rem;
    font-size: 0.84rem;
}

.navbar.navbar-ic .navbar-ic-menu .dropdown-item:hover,
.navbar.navbar-ic .navbar-ic-menu .dropdown-item:focus {
    color: #ef4365;
    background: #fff3f6;
}

/* Sino de notificação da navbar (demandas atribuídas ao atendente). */
.navbar.navbar-ic .navbar-ic-notif {
    margin-right: 0.35rem;
}

.navbar.navbar-ic .navbar-ic-notif-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ic-radius-pill);
    color: #324963;
    font-size: 1.05rem;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.navbar.navbar-ic .navbar-ic-notif-toggle:hover,
.navbar.navbar-ic .navbar-ic-notif-toggle:focus-visible {
    color: var(--ic-primary);
    background: #f6f8fc;
}

.navbar.navbar-ic .navbar-ic-notif-badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ic-radius-pill);
    background: var(--ic-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.navbar.navbar-ic .navbar-ic-notif-menu {
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid #dfe7f3;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(29, 50, 81, 0.12);
    overflow: hidden;
}

.navbar.navbar-ic .navbar-ic-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #eef2f8;
    font-weight: 700;
    color: var(--ic-ink);
}

.navbar.navbar-ic .navbar-ic-notif-head-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ic-radius-pill);
    background: var(--ic-primary-soft);
    color: var(--ic-primary);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

.navbar.navbar-ic .navbar-ic-notif-empty {
    padding: 1rem 0.85rem;
    color: var(--ic-ink-muted);
    font-size: 0.86rem;
}

.navbar.navbar-ic .navbar-ic-notif-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid #f2f5fa;
    text-decoration: none;
    color: var(--ic-ink);
    transition: background-color 0.14s ease;
}

.navbar.navbar-ic .navbar-ic-notif-item:hover,
.navbar.navbar-ic .navbar-ic-notif-item:focus {
    background: #fff3f6;
}

.navbar.navbar-ic .navbar-ic-notif-item-title {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.2;
}

.navbar.navbar-ic .navbar-ic-notif-item-meta {
    font-size: 0.78rem;
    color: var(--ic-ink-muted);
    text-transform: capitalize;
}

.navbar.navbar-ic .navbar-ic-notif-all {
    display: block;
    padding: 0.6rem 0.85rem;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ic-primary);
    text-decoration: none;
}

.navbar.navbar-ic .navbar-ic-notif-all:hover,
.navbar.navbar-ic .navbar-ic-notif-all:focus {
    background: #fff3f6;
}

/* Usuario page styles (Bootstrap 5 migration). */
.usuario-page {
    margin: 0;
    padding: 0.6rem 0.65rem 0.75rem;
    /* Superfície levemente tingida: aterra os cards brancos (não flutuam no branco). */
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 92px);
}

.usuario-page .card {
    flex-direction: column;
}

.usuario-hero {
    border-radius: 14px;
    overflow: hidden;
}

/* O overflow:hidden do toolbar do hero cortava o topo da busca quando as ações
   quebravam de linha (coluna mais alta que o título + align-items:center). */
.usuario-page .triagemic-hero .triagemic-toolbar {
    overflow: visible;
}

.usuario-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Busca + botão primário andam sempre juntos (nunca separam de linha). */
.usuario-hero-search-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.usuario-hero-search-group .btn {
    white-space: nowrap;
}

.usuario-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.usuario-kpi strong {
    margin-left: 0.25rem;
}

.usuario-kpi--active {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.usuario-kpi--inactive {
    background: #ffefec;
    border-color: #f7d1ca;
    color: #913629;
}

/* ===== Cards de usuários (um por linha, horizontais) ===== */
.usuario-search {
    position: relative;
    flex: 0 1 300px;
    min-width: 200px;
}

.usuario-search .fa {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ic-ink-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.usuario-search .form-control {
    padding-left: 2rem;
    border-radius: var(--ic-radius-pill);
    border-color: var(--ic-border);
    font-size: 0.86rem;
}


.usuario-card-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.usuario-card {
    display: grid;
    grid-template-columns: minmax(190px, 2.2fr) 96px minmax(96px, 1fr) minmax(96px, 1fr) minmax(150px, 1.8fr) auto;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    background: #fff;
    padding: 0.55rem 0.9rem;
    box-shadow: var(--ic-shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}

/* Highlight rosa IC no hover: borda rosa translúcida + halo suave amarram
   o visual com o botão primário sem gritar (primária cheia ficou agressiva). */
.usuario-card:hover {
    box-shadow: 0 0 0 3px var(--ic-primary-soft), var(--ic-shadow-md);
    border-color: rgba(239, 67, 101, 0.38);
    transform: translateY(-1px);
}

.usuario-card-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.usuario-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    background: hsl(var(--avatar-hue, 220) 60% 93%);
    color: hsl(var(--avatar-hue, 220) 42% 34%);
}

.usuario-avatar--muted {
    background: #eef0f4;
    color: #97a2b4;
}

.usuario-card-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.usuario-card-name {
    font-weight: 700;
    color: var(--ic-ink);
    font-size: 0.92rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-card-login {
    font-size: 0.8rem;
    color: var(--ic-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-card .usuario-status {
    justify-self: start;
    justify-content: center;
}

.usuario-card-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.usuario-card-meta-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ic-ink-muted);
    font-weight: 600;
}

.usuario-card-meta-value {
    font-size: 0.86rem;
    color: var(--ic-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    justify-content: flex-start;
}

.usuario-spec {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ic-radius-pill);
    color: var(--ic-success-text);
    background: var(--ic-success-bg);
    border: 1px solid var(--ic-success-border);
}

.usuario-spec--none {
    color: var(--ic-ink-muted);
    background: var(--ic-bg-soft);
    border-color: var(--ic-border);
    font-weight: 500;
}

.usuario-card-actions {
    display: flex;
    gap: 0.4rem;
    justify-self: end;
}

.usuario-card-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--ic-border);
    background: var(--ic-bg-soft);
    color: var(--ic-ink-soft);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.usuario-card-action .fa {
    color: inherit;
}

.usuario-card-action:hover {
    color: var(--ic-primary);
    border-color: var(--ic-primary);
    background: var(--ic-primary-soft);
}

.usuario-card-action--danger:hover {
    color: var(--ic-danger-text);
    border-color: var(--ic-danger-border);
    background: var(--ic-danger-bg);
}

.usuario-empty {
    padding: 2.5rem 1rem;
}

@media (max-width: 991.98px) {
    .usuario-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;
    }

    .usuario-card-main {
        flex: 1 1 220px;
    }

    .usuario-card-meta-item {
        flex: 0 0 auto;
        min-width: 90px;
    }

    .usuario-card-tags {
        flex: 1 1 100%;
    }

    .usuario-card-actions {
        justify-self: auto;
        margin-left: auto;
    }
}

@media (max-width: 575.98px) {
    .usuario-card {
        flex-direction: column;
        align-items: stretch;
    }

    .usuario-card .usuario-status {
        align-self: flex-start;
    }

    .usuario-card-actions {
        margin-left: 0;
        justify-content: flex-end;
    }

    .usuario-search {
        flex: 1 1 100%;
    }
}

.usuario-status,
.usuario-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.24rem 0.55rem;
    border: 1px solid transparent;
}

.usuario-status--active,
.usuario-flag--on {
    color: #11653a;
    background: #e5f7ed;
    border-color: #c6ebd7;
}

.usuario-status--inactive,
.usuario-flag--off {
    color: #8e3f2e;
    background: #ffefec;
    border-color: #f7d1ca;
}

.usuario-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.78rem;
    padding: 0.2rem 0.15rem;
}

.usuario-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.usuario-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.usuario-form-field .field-validation-error {
    font-size: 0.78rem;
}

.usuario-permissoes {
    display: grid;
    gap: 0.6rem;
}

.usuario-permissoes-item {
    border: 1px solid #e3eaf5;
    border-radius: 10px;
    background: #f9fbff;
    padding: 0.55rem 0.65rem;
}

@media (max-width: 991.98px) {
    .usuario-form-grid {
        grid-template-columns: 1fr;
    }
}

/* TecnicoReferencia page styles. */
.tecref-page {
    margin: 0;
    padding: 0.6rem 0.65rem 0.75rem;
    /* Superfície tingida: aterra os cards brancos (padrão da grade de cadastro). */
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 92px);
}

.tecref-page .card {
    flex-direction: column;
}

.tecref-hero {
    border-radius: 14px;
    overflow: hidden;
}

.tecref-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tecref-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.tecref-kpi strong {
    margin-left: 0.25rem;
}

.tecref-kpi--active {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.tecref-kpi--deleted {
    background: #ffefec;
    border-color: #f7d1ca;
    color: #913629;
}

/* Cadastro de Técnicos de Referência — grade de cards (padrão Usuário).
   Reusa usuario-card-*; a tela só sobrescreve o grid do card para 3 colunas
   (identidade | status | ações). Nos deletados, a data/autor da remoção vai
   na sub-linha da identidade (usuario-card-login). */
.tecref-card {
    grid-template-columns: minmax(240px, 1fr) auto auto;
}

.tecref-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem 0.15rem;
}

.tecref-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tecref-form-field .field-validation-error {
    font-size: 0.78rem;
}

/* Grupo page styles. */
.grupo-page {
    margin: 0;
    padding: 0.6rem 0.65rem 0.75rem;
    /* Superfície tingida: aterra os cards brancos (padrão da grade de cadastro). */
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 92px);
}

.grupo-page .card {
    flex-direction: column;
}

.grupo-hero {
    border-radius: 14px;
    overflow: hidden;
}

.grupo-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.grupo-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.grupo-kpi strong {
    margin-left: 0.25rem;
}

.grupo-kpi--active {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.grupo-kpi--inactive {
    background: #ffefec;
    border-color: #f7d1ca;
    color: #913629;
}

/* Cadastro de Grupos de Atendimento — grade de cards (padrão Usuário).
   Reusa usuario-card-*; grid de 5 colunas: identidade | status | encontro
   (semana · dia · período) | famílias ativas | ações. Identidade encosta à
   esquerda e ações à direita; as três infos centrais ficam centradas em
   colunas fr que abrem pela largura do card (em vez de agrupar tudo no meio).
   Frações fixas (minmax(0, Nfr)) mantêm as colunas alinhadas entre os cards. */
.grupo-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
}

.grupo-card .usuario-status {
    justify-self: center;
}

.grupo-card .usuario-card-meta-item {
    align-items: center;
    text-align: center;
}

/* Excluir desabilitado: grupo com famílias vinculadas não pode ser removido. */
.grupo-card .usuario-card-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #9ca9ba;
    background: #f2f4f8;
    border-color: var(--ic-border);
}

.grupo-familias {
    display: inline-flex;
    min-width: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.12rem 0.48rem;
    font-weight: 700;
    color: #2d4a6e;
    background: #dceaff;
}

.grupo-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem 0.15rem;
}

.grupo-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.grupo-form-grid .grupo-form-field:last-child {
    grid-column: 1 / -1;
}

.grupo-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.grupo-form-field .field-validation-error {
    font-size: 0.78rem;
}

@media (max-width: 991.98px) {
    .grupo-form-grid {
        grid-template-columns: 1fr;
    }

    .grupo-form-grid .grupo-form-field:last-child {
        grid-column: auto;
    }
}

/* Encaminhamento page styles. */
.enc-page {
    margin: 0;
    padding: 0.6rem 0.65rem 0.75rem;
    /* Superfície tingida: aterra os cards brancos (padrão da grade de cadastro). */
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 92px);
}

.enc-page .card {
    flex-direction: column;
}

.enc-hero {
    border-radius: 14px;
    overflow: hidden;
}

.enc-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.enc-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.enc-kpi strong {
    margin-left: 0.25rem;
}

.enc-kpi--internal {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.enc-kpi--external {
    background: #ffefec;
    border-color: #f7d1ca;
    color: #913629;
}

/* Cadastros de Encaminhamentos — grade de cards (padrão Usuário/Grupo).
   Reusa usuario-card-*; grid de 4 colunas: identidade (descrição) | tipo |
   ambiente (enc-kind interno/externo) | ações. Frações fixas (minmax(0, Nfr))
   para alinhar as colunas entre todos os cards (cada card é um grid próprio);
   tipo e ambiente centrados nas colunas fr que abrem pela largura. */
.enc-card {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
}

.enc-card .enc-kind {
    justify-self: center;
}

.enc-card .usuario-card-meta-item {
    align-items: center;
    text-align: center;
}

.enc-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.24rem 0.55rem;
    border: 1px solid transparent;
}

.enc-kind--internal {
    color: #11653a;
    background: #e5f7ed;
    border-color: #c6ebd7;
}

.enc-kind--external {
    color: #8e3f2e;
    background: #ffefec;
    border-color: #f7d1ca;
}

.enc-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem 0.15rem;
}

.enc-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.enc-form-field .field-validation-error {
    font-size: 0.78rem;
}

/* Produto page styles. */
.produto-page {
    margin: 0;
    padding: 0.6rem 0.65rem 0.75rem;
    /* Superfície tingida: aterra os cards brancos (padrão da grade de cadastro). */
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 92px);
}

.produto-page .card {
    flex-direction: column;
}

.produto-hero {
    border-radius: 14px;
    overflow: hidden;
}

.produto-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.produto-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.produto-kpi strong {
    margin-left: 0.25rem;
}

.produto-kpi--active {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.produto-kpi--inactive {
    background: #ffefec;
    border-color: #f7d1ca;
    color: #913629;
}

/* Cadastros de Produtos — grade de cards (padrão Usuário) com seleção em lote.
   Grid de 4 colunas: identidade | tipo | status | ações — o checkbox de seleção
   entra no grupo de ações (à direita, do tamanho dos botões). Frações fixas
   para alinhar as colunas; tipo e status centrados. */
.produto-card {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
}

.produto-card .produto-status {
    justify-self: center;
}

.produto-card .usuario-card-meta-item {
    align-items: center;
    text-align: center;
}

/* Card selecionado: leve tingido rosa + borda IC. */
.produto-card:has(.produto-checkbox:checked) {
    border-color: var(--ic-primary);
    background: #fff6f8;
}

/* "Selecionar todos" (rótulo "Todos") no hero, antes da busca. */
.produto-selectall {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ic-ink-soft);
    cursor: pointer;
    white-space: nowrap;
}

/* ── Checkbox custom IC (seleção em lote de Produtos) ──
   Native escondido; caixa arredondada que acende rosa IC com um "check" branco. */
.produto-checkbox,
#select-all-produtos {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    flex: 0 0 auto;
    background: #fff;
    border: 1.5px solid var(--ic-border-strong);
    transition: background-color .15s ease, border-color .15s ease;
}

.produto-checkbox::before,
#select-all-produtos::before {
    content: "";
    background: #fff;
    transform: scale(0);
    transition: transform .12s ease;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.produto-checkbox:checked,
#select-all-produtos:checked {
    background: var(--ic-primary);
    border-color: var(--ic-primary);
}

.produto-checkbox:checked::before,
#select-all-produtos:checked::before {
    transform: scale(1);
}

.produto-checkbox:focus-visible,
#select-all-produtos:focus-visible {
    outline: 2px solid var(--ic-primary-soft);
    outline-offset: 1px;
}

/* Select-all do hero: compacto, ao lado do rótulo "Todos". */
#select-all-produtos {
    width: 19px;
    height: 19px;
    border-radius: 6px;
}

#select-all-produtos::before {
    width: 10px;
    height: 10px;
}

/* Checkbox do card: no grupo de ações, mesmo tamanho dos botões (32px). */
.produto-card .produto-checkbox {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border-width: 1px;
    border-color: var(--ic-border);
    background: var(--ic-bg-soft);
}

.produto-card .produto-checkbox::before {
    width: 13px;
    height: 13px;
}

.produto-card .produto-checkbox:hover {
    border-color: var(--ic-primary);
    background: var(--ic-primary-soft);
}

.produto-card .produto-checkbox:checked {
    background: var(--ic-primary);
    border-color: var(--ic-primary);
}

.produto-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.24rem 0.55rem;
    border: 1px solid transparent;
}

.produto-status--active {
    color: #11653a;
    background: #e5f7ed;
    border-color: #c6ebd7;
}

.produto-status--inactive {
    color: #8e3f2e;
    background: #ffefec;
    border-color: #f7d1ca;
}

.produto-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem 0.15rem;
}

.produto-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.produto-form-field .field-validation-error {
    font-size: 0.78rem;
}

/* Medicamento page styles. */
.medicamento-page {
    margin: 0;
    padding: 0.6rem 0.65rem 0.75rem;
    /* Superfície tingida: aterra os cards brancos (padrão da grade de cadastro). */
    background: var(--ic-bg-surface);
    min-height: calc(100vh - 92px);
}

.medicamento-page .card {
    flex-direction: column;
}

.medicamento-hero {
    border-radius: 14px;
    overflow: hidden;
}

.medicamento-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.medicamento-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.medicamento-kpi strong {
    margin-left: 0.25rem;
}

.medicamento-kpi--active {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.medicamento-kpi--inactive {
    background: #ffefec;
    border-color: #f7d1ca;
    color: #913629;
}

/* Cadastros de Medicamentos — grade de cards (padrão Usuário/Grupo).
   Reusa usuario-card-*; grid de 4 colunas: identidade | quantidade | status |
   ações. Frações fixas para alinhar as colunas; quantidade e status centrados. */
.medicamento-card {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
}

.medicamento-card .medicamento-status {
    justify-self: center;
}

.medicamento-card .usuario-card-meta-item {
    align-items: center;
    text-align: center;
}

.medicamento-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.24rem 0.55rem;
    border: 1px solid transparent;
}

.medicamento-status--active {
    color: #11653a;
    background: #e5f7ed;
    border-color: #c6ebd7;
}

.medicamento-status--inactive {
    color: #8e3f2e;
    background: #ffefec;
    border-color: #f7d1ca;
}

.medicamento-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.2rem 0.15rem;
}

.medicamento-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.medicamento-form-field .field-validation-error {
    font-size: 0.78rem;
}

/* Familia active screen refresh styles. */
.family-page-bs5 {
    margin: 0;
    padding: 0.2rem 0.65rem 0.15rem;
    height: calc(100vh - 94px);
    height: calc(100dvh - 94px);
    overflow: hidden;
}

.family-page-bs5.triagemic-page {
    gap: 0.45rem;
}

.family-page-bs5 > #divSummary {
    display: contents;
}

.family-page-bs5 #Aviso {
    margin: 0;
}

.family-page-bs5 #Aviso .alert {
    margin-bottom: 0;
}

.family-page-bs5 .card {
    flex-direction: column;
}

.family-hero {
    border-radius: 14px;
    overflow: hidden;
}

.family-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.family-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.family-kpi strong {
    margin-left: 0.25rem;
}

.family-kpi--context {
    background: #e8f6f1;
    border-color: #cbe8dc;
    color: #165d43;
}

.family-kpi--status {
    background: #fff2df;
    border-color: #f1ddbb;
    color: #7a4b08;
}

.family-content {
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.family-content-head {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.family-page-bs5 .family-container {
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
}

.family-filter-column {
    min-width: 300px;
    max-width: 300px;
    border-right: 1px solid #dbe5f3;
    background: #f7faff;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.family-page-bs5 .filter-container {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
}

.family-filter-box {
    padding: 0.7rem 0.9rem 1rem;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.family-filter-title {
    margin-bottom: 0.3rem;
}

.family-filter-input,
.family-filter-select {
    border: 1px solid #cad7ea;
    border-radius: 9px;
    min-height: 36px;
    font-size: 0.84rem;
}

.family-filter-group-title {
    display: block;
    margin-top: 0.52rem;
    margin-bottom: 0.32rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a5e7a;
}

.family-page-bs5 .switch-holder {
    padding: 0.32rem 0.1rem;
    border-bottom: 1px dashed #e2e9f4;
}

.family-page-bs5 .switch-holder:last-child {
    border-bottom: 0;
}

.family-page-bs5 .switch-toggle {
    height: 34px;
}

.family-page-bs5 .switch-toggle input[type="checkbox"] + label {
    width: 78px;
    height: 32px;
    border-radius: 16px;
    background: #e7edf8;
    border: 1px solid #cfdcf0;
}

.family-page-bs5 .switch-toggle input[type="checkbox"] + label::before {
    top: 3px;
    left: 3px;
    width: 34px;
    height: 24px;
    line-height: 24px;
    font-size: 11px;
    border-radius: 12px;
    background-color: #566e90;
    box-shadow: none;
}

.family-page-bs5 .switch-toggle input[type="checkbox"]:checked + label::before {
    left: calc(100% - 37px);
}

.family-page-bs5 .numberCircle {
    background: #fff;
    border-color: #ccd7e8;
    color: #334d6f;
    font-weight: 700;
}

.family-export-stack {
    gap: 0.45rem;
}

.family-export-btn {
    width: 100%;
    font-size: 0.82rem;
    font-weight: 600;
}

.family-sortbar {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.68rem 0.9rem 0.38rem;
}

.family-counter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid #d4e0f1;
    border-radius: 999px;
    background: #e9f1ff;
    color: #2e4b6e;
    font-weight: 700;
    padding: 0.35rem 0.72rem;
}

.family-counter-chip #employees-counter {
    font-size: 0.9rem;
    line-height: 1;
}

.family-sort-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    border: 1px solid #d5e1f1;
    border-radius: 999px;
    background: #fff;
    color: #375274;
    padding: 0.34rem 0.72rem;
    font-size: 0.79rem;
    font-weight: 600;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.family-sort-chip:hover {
    background: #edf3fd;
    border-color: #c3d5ec;
    color: #27486d;
}

.family-sort-chip.active {
    background: #dce9fb;
    border-color: #9db9de;
    color: #1f4269;
}

.family-sort-chip .icon-sort {
    margin-left: 0.1rem;
}

.family-cards-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.family-page-bs5 .cards {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.family-page-bs5 .scrollbar {
    max-height: none;
    margin-right: 0;
    float: none;
    height: auto;
    overflow: visible;
}

.family-cards-grid {
    padding: 0.28rem 0.95rem 0.35rem;
    margin-right: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

.family-page-bs5 .family-cards-container.scrollbar.family-cards-grid {
    max-height: none;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body:has(.family-page-bs5) {
    overflow: hidden;
    padding-bottom: 0;
}

.family-page-bs5.family-legacy-bs5 .family-cards-container {
    padding-top: 0.28rem;
}

.family-page-bs5 #style-1 {
    scrollbar-width: thin;
    scrollbar-color: #7f9ec7 #e6edf7;
}

.family-page-bs5 #style-1::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.family-page-bs5 #style-1::-webkit-scrollbar-track {
    background: #e6edf7;
    border-radius: 999px;
}

.family-page-bs5 #style-1::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #98b2d2 0%, #6f8fb9 100%);
    border-radius: 999px;
    border: 2px solid #e6edf7;
}

.family-page-bs5 #style-1::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #87a6cb 0%, #5f82b1 100%);
}

.family-cards-grid .family-card {
    border-radius: 12px;
    border: 1px solid #dbe5f3;
    margin-bottom: 18px;
    box-shadow: 0 8px 20px rgba(31, 56, 89, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.family-cards-grid .family-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(31, 56, 89, 0.13);
}

/* Family Edit page layout and kit editor styles. */
.family-page-bs5 .family-edit-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(180deg, #f7faff 0%, #eef4fd 100%);
}

.family-page-bs5 .family-edit-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.family-page-bs5 .family-edit-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.family-page-bs5 .family-edit-section {
    border: 1px solid #d8e4f6;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(28, 51, 82, 0.06);
    overflow: hidden;
}

.family-page-bs5 .family-edit-section--hero {
    border-color: #c9dbf6;
    box-shadow: 0 8px 20px rgba(32, 64, 108, 0.08);
}

.family-page-bs5 .family-edit-section-head {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e3ecf9;
    background: #f9fbff;
}

.family-page-bs5 .family-edit-section-head--accent {
    background: linear-gradient(90deg, #edf5ff 0%, #f9fbff 100%);
}

.family-page-bs5 .family-edit-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1f3f67;
}

.family-page-bs5 .family-edit-section-head--accent .family-edit-section-title::before {
    content: "";
    width: 6px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #61adff 0%, #2f6fca 100%);
    box-shadow: 0 0 0 2px rgba(97, 173, 255, 0.2);
}

.family-page-bs5 .family-edit-section-body {
    padding: 1rem;
}

.family-page-bs5 .family-edit-section-body--accent {
    padding-left: 1.15rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.family-page-bs5 .family-edit-section-body .row {
    margin-left: 0;
    margin-right: 0;
}

.family-page-bs5 .family-edit-section-body .col-md-6,
.family-page-bs5 .family-edit-section-body .col-md-5,
.family-page-bs5 .family-edit-section-body .col-md-4,
.family-page-bs5 .family-edit-section-body .col-md-3,
.family-page-bs5 .family-edit-section-body .col-sm-6,
.family-page-bs5 .family-edit-section-body .col-sm-4 {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.family-page-bs5 .family-edit-section--benefits,
.family-page-bs5 .family-edit-section--kit {
    border-color: #cfe1fb;
}

.family-page-bs5 .kit-empty-state {
    border: 1px dashed #b7cef1;
    border-radius: 12px;
    background: #f8fbff;
    padding: 1rem;
    text-align: center;
}

.family-page-bs5 .kit-empty-title {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #2a4f7f;
}

.family-page-bs5 .kit-empty-subtitle {
    margin-bottom: 0.8rem;
    font-size: 0.84rem;
    color: #4a6384;
}

.family-page-bs5 .kit-editor {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.family-page-bs5 .kit-editor-date {
    max-width: 270px;
}

.family-page-bs5 .kit-editor-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #3c5880;
    margin-bottom: 0.35rem;
}

.family-page-bs5 .kit-editor-date-input {
    min-height: 38px;
}

.family-page-bs5 .kit-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 0.95rem;
}

.family-page-bs5 .kit-editor-panel {
    border: 1px solid #dce8fa;
    border-radius: 12px;
    background: #fbfdff;
    overflow: hidden;
}

.family-page-bs5 .kit-editor-panel-title {
    margin: 0;
    padding: 0.62rem 0.8rem;
    border-bottom: 1px solid #e3edfb;
    font-size: 0.9rem;
    font-weight: 700;
    color: #2a4d79;
    background: #f2f7ff;
}

.family-page-bs5 .kit-editor-panel-body {
    padding: 0.75rem;
}

.family-page-bs5 .kit-product-row {
    padding: 0.55rem;
    border: 1px solid #e3ebf9;
    border-radius: 10px;
    background: #ffffff;
}

.family-page-bs5 .kit-product-label {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4a6485;
}

.family-page-bs5 .kit-product-action {
    min-width: 40px;
    font-size: 16px;
    font-weight: 600;
}

.family-page-bs5 .kit-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem;
    border: 1px solid #e3ebf9;
    border-radius: 10px;
    background: #ffffff;
    margin-bottom: 0.55rem;
}

.family-page-bs5 .kit-history-item:last-child {
    margin-bottom: 0;
}

.family-page-bs5 .kit-history-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    font-size: 0.86rem;
    color: #2a3f5e;
}

.family-page-bs5 .kit-history-date {
    font-size: 0.78rem;
    font-weight: 700;
    color: #3f6392;
}

.family-page-bs5 .kit-history-empty {
    margin: 0;
    padding: 0.55rem;
    border-radius: 8px;
    background: #f7fbff;
    border: 1px dashed #d2e1f6;
    font-size: 0.84rem;
    color: #5a6f8f;
}

.family-page-bs5 .kit-editor-actions {
    margin-top: 0.65rem;
}

.family-page-bs5 .kit-editor-submit {
    width: 100%;
}

@media (max-width: 991.98px) {
    .family-page-bs5 .family-edit-two-col {
        grid-template-columns: 1fr;
    }

    .family-page-bs5 .kit-editor-grid {
        grid-template-columns: 1fr;
    }

    .family-page-bs5 .kit-editor-date {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .family-page-bs5 .family-edit-shell {
        gap: 0.85rem;
    }

    .family-page-bs5 .family-edit-section-head {
        padding: 0.7rem 0.8rem;
    }

    .family-page-bs5 .family-edit-section-body {
        padding: 0.8rem;
    }

    .family-page-bs5 .family-edit-section-body--accent {
        padding-left: 0.8rem;
    }

    .family-page-bs5 .kit-editor-panel-body {
        padding: 0.6rem;
    }

    .family-page-bs5 .kit-product-row {
        padding: 0.48rem;
    }

    .family-page-bs5 .kit-history-item {
        padding: 0.5rem;
    }
}

@media (max-width: 1199.98px) {
    body:has(.family-page-bs5) {
        overflow: auto;
    }

    .family-page-bs5 {
        height: auto;
        overflow: visible;
    }

    .family-page-bs5 .family-container {
        min-height: 0;
        height: auto;
        flex-direction: column;
    }

    .family-filter-column {
        min-width: 100%;
        max-width: 100%;
        border-right: 0;
        border-bottom: 1px solid #dbe5f3;
    }

    .family-page-bs5 .filter-container {
        max-height: none;
        overflow: visible;
    }

    .family-filter-box {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .family-cards-grid {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 767.98px) {
    .family-sortbar {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .family-counter-chip {
        width: 100%;
        justify-content: center;
    }

    .family-sort-chip {
        font-size: 0.76rem;
        padding: 0.3rem 0.62rem;
    }

    .family-page-bs5 .switch-label .main-text {
        font-size: 0.78rem;
    }
}

/* Family internal screens refresh styles. */
.family-detail-page {
    padding: 0.65rem;
}

.family-detail-page--atendimentos {
    overflow-x: hidden;
}

.family-detail-hero {
    background: linear-gradient(135deg, #f0f5fd 0%, #e6eefb 45%, #f7f9fe 100%);
    border: 1px solid #d8e3f3;
    border-radius: 12px;
}

.family-detail-hero .card-body {
    padding: 0.65rem 0.85rem;
}

.family-detail-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    overflow: hidden;
}

.family-detail-card--sticky {
    position: sticky;
    top: 0;
}

.family-detail-sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.family-detail-grid {
    margin-left: 0;
    margin-right: 0;
}

.family-detail-grid > [class*="col-"] {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.family-detail-card-head {
    display: block;
    width: 100%;
    flex: 0 0 auto;
    border-bottom: 1px solid #dfe8f5;
    background: #eef3fb;
}

.family-detail-card > .card-body {
    display: block;
    width: 100%;
    flex: 1 1 auto;
}

.family-detail-card .table-responsive,
.family-detail-card .family-detail-table {
    width: 100%;
}

.family-detail-section-head {
    padding: 0.58rem 0.78rem;
}

.family-detail-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.15;
    color: #223754;
}

.family-detail-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.7rem;
}

.family-detail-avatar {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid #edf3fb;
    box-shadow: 0 6px 14px rgba(36, 61, 95, 0.1);
}

.family-detail-facts {
    display: grid;
    gap: 0.5rem;
}

.family-detail-facts div {
    padding: 0.5rem 0.62rem;
    border: 1px solid #ebedf1;
    border-radius: 9px;
    background: #ffffff;
}

.family-detail-facts dt {
    margin-bottom: 0.12rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #66778f;
}

.family-detail-facts dd {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #243a58;
}

.family-detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #556987;
}

.family-detail-timeline {
    display: grid;
    gap: 0.5rem;
}

.family-detail-timeline-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: 9px;
    background: #fbfbfc;
    border: 1px solid #ebedf1;
}

.family-detail-timeline-label,
.family-detail-muted {
    font-size: 0.78rem;
    color: #66778f;
}

.family-detail-table thead th {
    border-bottom: 1px solid #e7e9ee;
    background: #f7f7f8;
    color: #4a5d79;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: normal;
}

.family-detail-table tbody td {
    padding-top: 0.52rem;
    padding-bottom: 0.52rem;
    padding-left: 0.42rem;
    padding-right: 0.42rem;
    border-color: #edf2f9;
    vertical-align: middle;
    font-size: 0.86rem;
}

.family-detail-table tbody tr:hover {
    background: #fafafa;
}

.family-detail-table-icon-col {
    width: 58px;
}

.family-detail-icon-btn {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0;
    font-size: 0.78rem;
}

.family-detail-action-btn {
    white-space: normal;
    padding: 0.25rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.1;
}

.family-detail-count {
    display: inline-flex;
    min-width: 1.8rem;
    justify-content: center;
    padding: 0.1rem 0.34rem;
    border-radius: 999px;
    background: #f1f2f5;
    color: #3b3f47;
    font-weight: 700;
}

.family-detail-chart-stack {
    display: grid;
    gap: 0.7rem;
}

.family-detail-chart-block {
    padding: 0.65rem;
    border: 1px solid #e6e8ee;
    border-radius: 10px;
    background: #ffffff;
}

.family-detail-chart-title {
    margin-bottom: 0.45rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #243a58;
}

.family-detail-chart-canvas {
    position: relative;
    min-height: 205px;
}

.family-detail-page--atendimentos .table-responsive {
    overflow-x: auto;
}

.family-detail-page--atendimentos .dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-sidebar-stack {
    gap: 0.35rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-section-head {
    padding: 0.42rem 0.56rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-card > .card-body {
    padding: 0.45rem 0.56rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-avatar-wrap {
    margin-bottom: 0.35rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-facts {
    gap: 0.28rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-facts div {
    padding: 0.35rem 0.46rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-timeline {
    gap: 0.32rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-timeline-item {
    padding: 0.36rem 0.46rem;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-left-actions {
    margin-top: 0.45rem !important;
    gap: 0.35rem !important;
}

.family-detail-page--atendimentos .family-detail-left-column .family-detail-left-discuss-btn {
    margin-top: 0.45rem !important;
}

/* ============================================================
   Agendamentos em cards (painel do quadro de atendimentos da família IC).
   Substitui a antiga tabela #table-agendamentos. Cards compactos, um por
   linha, ordenados por data desc; rolagem interna com a scrollbar IC.
   ============================================================ */
.family-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.family-agenda-search {
    position: relative;
    flex: 0 1 230px;
    min-width: 120px;
}

.family-agenda-search .fa {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ic-ink-muted);
    font-size: 0.78rem;
    pointer-events: none;
}

.family-agenda-search .form-control {
    height: 30px;
    padding: 0.1rem 0.55rem 0.1rem 1.75rem;
    border-radius: var(--ic-radius-pill);
    border-color: var(--ic-border);
    font-size: 0.8rem;
    background: #fff;
}

.family-agenda-wrap {
    padding: 0.45rem 0.52rem 0.55rem;
    max-height: 430px;
    overflow-y: auto;
}

.family-agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.family-agenda-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    background: #fff;
    padding: 0.5rem 0.62rem;
    box-shadow: var(--ic-shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.family-agenda-card:hover {
    box-shadow: var(--ic-shadow-md);
    border-color: var(--ic-border-strong);
}

.family-agenda-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.family-agenda-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ic-ink);
}

.family-agenda-date .fa {
    color: var(--ic-ink-muted);
    font-size: 0.8rem;
}

.family-agenda-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.71rem;
    font-weight: 700;
    padding: 0.16rem 0.5rem;
    border-radius: var(--ic-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}

.family-agenda-status--yes {
    color: var(--ic-success-text);
    background: var(--ic-success-bg);
    border-color: var(--ic-success-border);
}

.family-agenda-status--no {
    color: var(--ic-danger-text);
    background: var(--ic-danger-bg);
    border-color: var(--ic-danger-border);
}

.family-agenda-status--nd {
    color: var(--ic-ink-muted);
    background: var(--ic-bg-soft);
    border-color: var(--ic-border);
}

.family-agenda-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.family-agenda-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.family-agenda-body-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 0 1 auto;
}

.family-agenda-person,
.family-agenda-atendente {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--ic-ink-soft);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.family-agenda-person {
    font-weight: 600;
    color: var(--ic-ink);
    flex: 1 1 auto;
}

.family-agenda-person .fa,
.family-agenda-atendente .fa {
    color: var(--ic-ink-muted);
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.family-agenda-tipo {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.14rem 0.5rem;
    border-radius: var(--ic-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    flex: 0 0 auto;
}

.family-agenda-tipo--psico {
    color: #3f5b8a;
    background: #eaf0fb;
    border-color: #d5e2f5;
}

.family-agenda-tipo--pedago {
    color: var(--ic-warn-text);
    background: var(--ic-warn-bg);
    border-color: var(--ic-warn-border);
}

.family-agenda-tipo--geral {
    color: var(--ic-ink-muted);
    background: var(--ic-bg-soft);
    border-color: var(--ic-border);
}

.family-agenda-remarc {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.71rem;
    font-weight: 600;
    color: var(--ic-warn-text);
    background: var(--ic-warn-bg);
    border: 1px solid var(--ic-warn-border);
    border-radius: var(--ic-radius-pill);
    padding: 0.12rem 0.45rem;
    flex: 0 0 auto;
}

.family-detail-table--compact thead th,
.family-detail-table--compact tbody td {
    font-size: 0.78rem;
}

/* ============================================================
   AtendimentosCyrela board — overrides escopados em .atendimentoscyrela-page
   para NÃO afetar o board de Família IC (classes .family-detail-* globais).
   ============================================================ */

/* --- Coluna esquerda: cards e resumo mais densos --- */
.atendimentoscyrela-page .family-detail-left-column .family-detail-sidebar-stack {
    gap: 0.5rem;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-section-head {
    padding: 0.4rem 0.6rem;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-card > .card-body {
    padding: 0.4rem 0.55rem;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-facts {
    gap: 0.2rem;
}

/* Fatos em LINHA (rótulo à esquerda, valor à direita) — reduz muito a altura
   vs. o empilhado padrão do IC (rótulo em cima do valor). */
.atendimentoscyrela-page .family-detail-left-column .family-detail-facts div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.24rem 0.5rem;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-facts dt {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
    color: #7d8ba0;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-facts dd {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 0.78rem;
    line-height: 1.25;
    color: #243a58;
    overflow-wrap: anywhere;
}

/* --- Coluna esquerda: inputs de calendário e botões menores --- */
.atendimentoscyrela-page .family-detail-left-column .family-detail-label {
    margin-bottom: 0.14rem;
    font-size: 0.62rem;
}

.atendimentoscyrela-page .family-detail-left-column .row.g-2 {
    --bs-gutter-y: 0.3rem;
}

.atendimentoscyrela-page .family-detail-left-column .input-group.date .form-control,
.atendimentoscyrela-page .family-detail-left-column .input-group.date .input-group-text {
    height: 30px;
    min-height: 0;
    padding-top: 0.16rem;
    padding-bottom: 0.16rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

.atendimentoscyrela-page .family-detail-left-column .input-group.date .input-group-text {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-left-actions {
    margin-top: 0.5rem !important;
}

.atendimentoscyrela-page .family-detail-left-column .family-detail-left-actions .btn {
    padding-top: 0.34rem;
    padding-bottom: 0.34rem;
    font-size: 0.82rem;
}

/* --- Tabela do meio: layout fixo + ellipsis = sem scroll horizontal --- */
.atendimentoscyrela-page #tabelaAtendimentosCyrela {
    table-layout: fixed;
    width: 100%;
}

/* box-sizing border-box → a largura definida em cada coluna JÁ inclui o padding,
   então a soma das colunas fixas é previsível e o Título (auto) recebe o resto. */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th,
.atendimentoscyrela-page #tabelaAtendimentosCyrela td {
    box-sizing: border-box;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela thead th {
    white-space: nowrap;
    padding: 0.5rem 0.4rem;
}

/* Linhas com o mesmo respiro do board IC (.family-detail-table global usa ~0.52rem
   vertical). A "altura enorme" original vinha do texto quebrando em várias linhas;
   com ellipsis cada linha tem altura única — então mantemos o espaçamento do IC. */
.atendimentoscyrela-page #tabelaAtendimentosCyrela tbody td {
    padding: 0.5rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Larguras: fixa todas as colunas previsíveis e deixa só o Título (texto livre)
   em auto, absorvendo todo o espaço restante. Depende de autoWidth:false no
   DataTable — senão ele escreve um width inline na <table> e estoura o container. */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th:nth-child(1),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(1) { width: 5.2rem; } /* Data */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th:nth-child(2),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(2) { width: 6.4rem; } /* Área */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th:nth-child(3),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(3) { width: 5.4rem; } /* Modelo */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th:nth-child(4),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(4) { width: 6.4rem; } /* Obra */
/* Título (5): sem largura → pega o espaço restante */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th:nth-child(6),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(6) { width: 5.6rem; } /* Criado por */
.atendimentoscyrela-page #tabelaAtendimentosCyrela th:nth-child(7),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(7) { width: 4.8rem; } /* Ações */

/* Área e Modelo vêm em minúsculas do banco — capitaliza só na exibição. */
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(2),
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(3) {
    text-transform: capitalize;
}

/* A coluna de ações não trunca (mantém os dois botões redondos do padrão IC). */
.atendimentoscyrela-page #tabelaAtendimentosCyrela td:nth-child(7) {
    overflow: visible;
    white-space: nowrap;
}

/* --- Controles do DataTables (compactos, na paleta azul do board) --- */
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper {
    padding: 0.4rem 0.6rem 0.5rem;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_length,
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_filter,
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_info,
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_paginate {
    font-size: 0.76rem;
    color: #53627b;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_length,
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_filter {
    margin-bottom: 0.4rem;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_filter input,
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_length select {
    width: auto;
    border: 1px solid #c8d7ea;
    border-radius: 8px;
    min-height: 28px;
    font-size: 0.76rem;
    color: #2f3f53;
    background: #fff;
    padding: 0.14rem 0.45rem;
    margin: 0 0.3rem;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    padding: 0.16rem 0.5rem !important;
    margin-left: 0.18rem;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_paginate .paginate_button.current,
.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 1px solid #a8c2e5 !important;
    background: #dbe9fb !important;
    color: #1f4269 !important;
}

.atendimentoscyrela-page #tabelaAtendimentosCyrela_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid #c8d8ec !important;
    background: #eef4fe !important;
    color: #244a73 !important;
}

/* --- Indicadores: gráfico mais baixo --- */
.atendimentoscyrela-page .family-detail-chart-canvas {
    min-height: 170px;
}

/* ============================================================
   AtendimentosCyrela — ficha do atendimento (Atendimento.cshtml).
   Reaproveita a anatomia de atendimento do IC (.family-attendance-*);
   abaixo só os ajustes específicos da ficha Cyrela.
   ============================================================ */

/* Labels legados usam .font-weight-bold (utilitário BS4, sem shim CSS). */
.atendimentoscyrela-ficha-page .font-weight-bold {
    font-weight: 700;
}

/* Cabeçalhos do accordion (panel-title > a[collapse]) NÃO podem virar o pill
   de histórico — o pill é só para os links "Histórico" no corpo das seções. */
.atendimentoscyrela-ficha-page .family-attendance-content-card .panel-heading .panel-title a {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #223754;
    font-size: inherit;
    font-weight: 700;
    white-space: normal;
    text-decoration: none;
    cursor: pointer;
}

/* Espaçamento entre os painéis do accordion / cards de demanda. */
.atendimentoscyrela-ficha-page .family-attendance-content-card .panel + .panel {
    margin-top: 0.55rem;
}

/* Cards de demanda aninhados levemente realçados. */
.atendimentoscyrela-ficha-page .family-attendance-content-card .demanda-cyrela-item {
    background: #fbfcfe;
}

/* Sidebar: o título vem como texto direto no .panel-heading (sem <a>), e o
   .panel-primaryy o deixa claro — força a cor escura sobre o fundo claro do nav. */
.atendimentoscyrela-ficha-page .family-attendance-nav-card .panel-heading {
    color: #223754;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Atendimento IndexInfo list pages opened from Family Atendimento cards. */
.family-list-page {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.2rem 0.5rem 0.3rem;
}

.family-list-hero {
    border-radius: 12px;
    border: 1px solid #d8e3f3;
    background: linear-gradient(135deg, #f0f5fd 0%, #e6eefb 45%, #f7f9fe 100%);
}

.family-list-hero .card-body {
    padding: 0.58rem 0.8rem;
}

.family-list-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #223754;
}

.family-list-summary {
    display: block;
}

.family-list-summary #Aviso,
.family-list-summary #Aviso .alert {
    margin: 0;
}

.family-list-content {
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    background-color: #fff;
    display: block;
    box-shadow: 0 1px 6px rgba(34, 55, 84, 0.07);
}

.family-list-content-head {
    padding: 0.58rem 0.78rem;
    border-bottom: 1px solid #dfe8f5;
    background: #eef3fb;
    border-radius: 12px 12px 0 0;
}

.family-list-content-head h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #223754;
}

.family-list-table-wrap {
    padding: 0.5rem 0.75rem 0.75rem;
}

/* DataTables controls */
.family-list-content .dataTables_wrapper {
    width: 100%;
}

.family-list-content .dataTables_wrapper .dataTables_length,
.family-list-content .dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: #4a5d79;
}

.family-list-content .dataTables_wrapper .dataTables_filter input {
    border: 1px solid #d0d7e2;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.82rem;
    color: #2b3340;
    outline: none;
    transition: border-color 0.15s;
}

.family-list-content .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #4a8cdb;
    box-shadow: 0 0 0 2px rgba(74, 140, 219, 0.15);
}

.family-list-content .dataTables_wrapper .dataTables_length select {
    border: 1px solid #d0d7e2;
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    font-size: 0.82rem;
    color: #2b3340;
}

.family-list-content .dataTables_wrapper .dataTables_info {
    font-size: 0.78rem;
    color: #6b7c96;
    padding-top: 0.4rem;
}

.family-list-content .dataTables_wrapper .dataTables_paginate {
    padding-top: 0.3rem;
}

.family-list-content .dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 0.8rem;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    color: #4a5d79 !important;
    border: 1px solid transparent;
}

.family-list-content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.family-list-content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #4a8cdb;
    border-color: #4a8cdb;
    color: #fff !important;
}

.family-list-content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eef3fb;
    border-color: #d0d7e2;
    color: #223754 !important;
}

/* Table styles */
.family-list-content table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    font-size: 0.82rem;
    color: #2b3340;
}

.family-list-content table.dataTable thead th {
    background: #f4f7fb;
    color: #4a5d79;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.8rem 0.5rem 0.65rem;
    border-bottom: 2px solid #dde4ef;
    white-space: nowrap;
    background-image: none !important;
}

/* Sorting icons — override Glyphicons (Bootstrap 3) com Unicode */
.family-list-content table.dataTable thead .sorting:after,
.family-list-content table.dataTable thead .sorting_asc:after,
.family-list-content table.dataTable thead .sorting_desc:after,
.family-list-content table.dataTable thead .sorting_asc_disabled:after,
.family-list-content table.dataTable thead .sorting_desc_disabled:after {
    font-family: inherit !important;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    top: 50%;
    bottom: auto;
    right: 0.55rem;
    transform: translateY(-50%);
    color: #5a769d;
    opacity: 0.55;
}

.family-list-content table.dataTable thead .sorting:after {
    content: "↕";
    opacity: 0.35;
}

.family-list-content table.dataTable thead .sorting_asc:after {
    content: "▲";
    opacity: 0.8;
}

.family-list-content table.dataTable thead .sorting_desc:after {
    content: "▼";
    opacity: 0.8;
}

.family-list-content table.dataTable tbody tr {
    border-bottom: 1px solid #edf0f5;
    transition: background 0.12s;
}

.family-list-content table.dataTable tbody tr:last-child {
    border-bottom: none;
}

.family-list-content table.dataTable tbody tr:hover {
    background: #f5f8fd;
}

.family-list-content table.dataTable tbody td {
    padding: 0.45rem 0.65rem;
    color: #2b3340;
    vertical-align: middle;
    font-size: 0.82rem;
}

.family-list-content .table-responsive {
    border-radius: 0 0 10px 10px;
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    .family-list-page {
        padding: 0.15rem 0.35rem 0.25rem;
    }

    .family-list-hero .card-body,
    .family-list-content-head {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .family-list-table-wrap {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

@media (max-width: 1199.98px) {
    .family-detail-card--sticky {
        position: static;
    }
}

.family-attendance-page {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.family-attendance-grid {
    margin: 0;
}

.family-attendance-grid > [class*="col-"] {
    padding: 0.35rem;
}

.family-attendance-nav-card,
.family-attendance-content-card {
    border-radius: 12px;
    border: 1px solid #e4e6eb;
    background: #fff;
}

.family-attendance-nav-card {
    position: sticky;
    top: 0;
}

.family-attendance-nav-card .card-body,
.family-attendance-content-card .card-body {
    padding: 0.7rem 0.85rem;
}

.family-attendance-hero-card {
    border-radius: 12px;
    border: 1px solid #d8e3f3;
    background: linear-gradient(135deg, #f0f5fd 0%, #e6eefb 45%, #f7f9fe 100%);
}

.family-attendance-hero-card .card-body {
    padding: 0.62rem 0.9rem;
    display: grid;
    grid-template-columns: minmax(230px, 320px) 1fr;
    grid-template-areas:
        "title metrics"
        "form form";
    column-gap: 1rem;
    row-gap: 0.22rem;
    align-items: center;
}

.family-attendance-hero-card .card-body.p-3 {
    padding-top: 0.45rem !important;
    padding-bottom: 0.5rem !important;
}

.family-attendance-hero-card .family-list-title {
    grid-area: title;
    font-size: 1.26rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1f3654;
}

.family-attendance-hero-metrics-slot {
    grid-area: metrics;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem 1rem;
}

.family-attendance-hero-form-slot {
    grid-area: form;
    display: flex;
    justify-content: flex-start;
    padding-left: 0.35rem;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 0.4rem 0.8rem;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics.row {
    margin-left: 0;
    margin-right: 0;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics > [class*="col-"] {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics h2 {
    display: none;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics h4 {
    margin: 0;
    line-height: 1.25;
    text-align: left !important;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics h4:first-child {
    font-size: 0.74rem;
    color: #4a5d79;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}

.family-attendance-hero-metrics-slot .family-attendance-header-metrics h4:last-child {
    font-size: 0.98rem;
    font-weight: 700;
    color: #223754;
}

.family-attendance-hero-form-slot .family-attendance-header-form,
.family-attendance-hero-form-slot > form {
    margin: 0;
    width: 100%;
    text-align: left;
}

.family-attendance-hero-form-slot .family-attendance-header-form > .row,
.family-attendance-hero-form-slot > form > .row,
.family-attendance-hero-form-slot > form > section.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start !important;
    gap: 0.3rem 0.45rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto;
    max-width: 100%;
}

.family-attendance-hero-form-slot .family-attendance-header-form > .row > [class*="col-"],
.family-attendance-hero-form-slot > form > .row > [class*="col-"],
.family-attendance-hero-form-slot > form > section.row > [class*="col-"] {
    flex: 0 0 auto;
    float: none;
    width: 220px;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0.45rem;
}

.family-attendance-hero-form-slot label {
    display: block;
    margin-bottom: 0.18rem;
    font-size: 0.72rem;
    color: #4a5d79;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Left menu links */
.family-attendance-nav-card .sidebar-nav > h5 {
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: center;
}

.family-attendance-nav-card .sidebar-nav > h5 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 178px;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #cdd9ea;
    background: #f4f7fc;
    color: #2a466d;
    font-weight: 600;
    text-decoration: none;
}

.family-attendance-nav-card .sidebar-nav > h5 a:hover {
    color: #1f3654;
    background: #e9f0fb;
    border-color: #b8cbeb;
}

.family-attendance-nav-card .sidebar-nav h5[style] {
    margin: 0 0.1rem 0.45rem !important;
    display: inline-block !important;
    width: calc(50% - 0.3rem);
    vertical-align: top;
}

.family-attendance-nav-card .sidebar-nav h5[style] > a {
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.25rem;
    font-size: 0.76rem;
}

.family-attendance-nav-card .sidebar-nav .family-attendance-inline-actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.45rem;
}

.family-attendance-nav-card .sidebar-nav .family-attendance-inline-actions > h5 {
    margin: 0;
    flex: 1 1 0;
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: center;
}

.family-attendance-nav-card .sidebar-nav .family-attendance-inline-actions > h5 > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0.32rem 0.25rem;
    border-radius: 8px;
    border: 1px solid #cdd9ea;
    background: #f4f7fc;
    color: #2a466d;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.76rem;
}

.family-attendance-nav-card .sidebar-nav .family-attendance-inline-actions > h5 > a:hover {
    color: #1f3654;
    background: #e9f0fb;
    border-color: #b8cbeb;
}

/* Legacy panels in side menu */
.family-attendance-nav-card .panel {
    border: 1px solid #dbe4f2;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 0.45rem;
}

.family-attendance-nav-card .panel .panel-heading {
    background: #eef3fb;
    border-bottom: 1px solid #dde6f4;
    padding: 0.5rem 0.6rem;
}

.family-attendance-nav-card .panel .panel-heading .panel-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

.family-attendance-nav-card .panel .panel-heading .panel-title > a,
.family-attendance-nav-card .panel .panel-heading .panel-title > a:visited,
.family-attendance-nav-card .panel .panel-heading .panel-title > a:hover,
.family-attendance-nav-card .panel .panel-heading .panel-title > a:focus {
    color: #223754;
    text-decoration: none;
    display: block;
}

.family-attendance-nav-card .panel .panel-body a,
.family-attendance-nav-card .panel .panel-body a:visited,
.family-attendance-nav-card .panel .panel-body a:hover,
.family-attendance-nav-card .panel .panel-body a:focus {
    color: #2b3340;
    text-decoration: none;
}

.family-attendance-nav-card .panel .panel-body {
    padding: 0.5rem 0.6rem;
    font-size: 0.78rem;
}

.family-attendance-nav-card .panel .form-group {
    margin-bottom: 0.3rem;
}

.family-attendance-nav-card .panel .form-group label,
.family-attendance-nav-card .panel .form-group span {
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Main content area with legacy markup */
.family-attendance-content-card h1,
.family-attendance-content-card h2,
.family-attendance-content-card h3,
.family-attendance-content-card h4 {
    color: #223754;
}

.family-attendance-content-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 0;
}

.family-attendance-content-card h3 {
    font-size: 0.98rem;
    font-weight: 700;
}

.family-attendance-content-card h4 {
    font-size: 0.86rem;
    font-weight: 700;
}

/* Respiro entre perguntas: toda linha-cabeçalho de pergunta (a que traz o link
   "Data" com o relógio de histórico) ganha margem superior, separando cada
   pergunta da anterior. Cobre TODAS as telas de atendimento de uma vez, sem
   mexer partial por partial. */
.family-attendance-content-card .d-flex.w-100:has(.fa-history) {
    margin-top: 28px;
}

/* Os partials legados usam <h1></h1> vazio como "espaçador" entre perguntas.
   Com o respiro acima centralizado no CSS, o h1 vazio só desalinha — zera. */
.family-attendance-content-card h1:empty {
    display: none;
    margin: 0;
}

.family-attendance-content-card .form-control,
.family-attendance-content-card select,
.family-attendance-content-card textarea {
    border-radius: 8px;
    border: 1px solid #d3dbe7;
    min-height: 2rem;
    font-size: 0.82rem;
}

.family-attendance-content-card .form-control:focus,
.family-attendance-content-card select:focus,
.family-attendance-content-card textarea:focus {
    border-color: #4a8cdb;
    box-shadow: 0 0 0 2px rgba(74, 140, 219, 0.15);
}

.family-attendance-content-card .btn,
.family-attendance-content-card a.btn {
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
}

.family-attendance-content-card .panel {
    border: 1px solid #dce4f1;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.family-attendance-content-card .panel .panel-heading {
    background: #f3f7fc;
    border-bottom: 1px solid #e2e8f2;
    padding: 0.55rem 0.7rem;
}

.family-attendance-content-card .panel .panel-title {
    font-size: 0.84rem;
    font-weight: 700;
    margin: 0;
}

.family-attendance-content-card .panel .panel-body {
    padding: 0.6rem 0.7rem;
}

.family-attendance-content-card .nav-tabs {
    border-bottom: 1px solid #dce5f3;
}

.family-attendance-content-card .nav-tabs > li > a {
    border-radius: 8px 8px 0 0;
    padding: 0.4rem 0.65rem;
    font-size: 0.78rem;
    color: #45648d;
}

.family-attendance-content-card .nav-tabs > li.active > a,
.family-attendance-content-card .nav-tabs > li.active > a:focus,
.family-attendance-content-card .nav-tabs > li.active > a:hover {
    color: #223754;
    background: #eef3fb;
    border: 1px solid #dce5f3;
    border-bottom-color: transparent;
}

.family-attendance-content-card hr {
    margin: 0.65rem 0;
    border-top: 1px solid #e7edf6;
}

.family-attendance-content-card [href*="TelaEncerraAtendimento"].btn,
.family-attendance-content-card #encerrarAtendimentoButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(460px, 62%);
    margin: 0.55rem auto;
    min-height: 2rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* TelaEncerramento da Família. */
.family-closure-page {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem 0.5rem 0.35rem;
}

.family-closure-hero-card {
    border-radius: 14px;
    border: 1px solid #d8e3f3;
    background: linear-gradient(135deg, #f0f5fd 0%, #e6eefb 45%, #f7f9fe 100%);
}

.family-closure-hero-card .card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.72rem 0.95rem;
}

.family-closure-title {
    margin: 0.28rem 0 0.12rem;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.08;
    color: #1f3654;
}

.family-closure-subtitle {
    margin: 0;
    font-size: 0.92rem;
    color: #5c6675;
}

.family-closure-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.family-closure-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.family-closure-chip strong {
    font-weight: 700;
}

.family-closure-chip--status {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.family-closure-layout {
    margin: 0;
    align-items: flex-start;
}

.family-closure-layout > [class*="col-"] {
    padding: 0.35rem;
}

.family-closure-nav-card,
.family-closure-content-card {
    border-radius: 14px;
    border: 1px solid #dfe7f3;
    background: #fff;
    overflow: hidden;
}

.family-closure-nav-card {
    position: sticky;
    top: 0;
}

.family-closure-nav-card .card-body,
.family-closure-content-card .card-body {
    padding: 0.75rem 0.85rem;
}

.family-closure-nav-card .sidebar-nav > h5 a.btn.btn-ic,
.family-closure-nav-card .family-attendance-inline-actions > h5 > a.btn.btn-ic {
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.48rem 0.78rem;
    min-height: 38px;
    border: 1px solid #d3dfef;
    background: #f5f9ff;
    color: #2a466d;
    box-shadow: none;
}

.family-closure-nav-card .sidebar-nav > h5 a.btn.btn-ic:hover,
.family-closure-nav-card .family-attendance-inline-actions > h5 > a.btn.btn-ic:hover {
    background: #eaf2ff;
    border-color: #bfd4f1;
    color: #1f3654;
}

.family-closure-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.family-closure-section {
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(30, 53, 86, 0.05);
}

.family-closure-section--full {
    grid-column: 1 / -1;
}

.family-closure-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #e3ecf9;
    background: #f9fbff;
}

.family-closure-section-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #1f3f67;
}

.family-closure-section-note {
    font-size: 0.78rem;
    color: #5b6f8b;
}

.family-closure-section-body {
    padding: 0.85rem 0.9rem;
}

.family-closure-meta-grid {
    align-items: flex-start;
}

.family-closure-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #3c5880;
}

.family-closure-notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.family-closure-note-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.family-closure-page .form-control,
.family-closure-page .form-select,
.family-closure-page input[type="text"],
.family-closure-page input[type="date"],
.family-closure-page select,
.family-closure-page textarea {
    border: 1px solid #cad7ea;
    border-radius: 10px;
    font-size: 0.85rem;
    min-height: 38px;
}

.family-closure-page textarea {
    min-height: 104px;
}

.family-closure-page .form-control:focus,
.family-closure-page .form-select:focus,
.family-closure-page input[type="text"]:focus,
.family-closure-page input[type="date"]:focus,
.family-closure-page select:focus,
.family-closure-page textarea:focus {
    border-color: #4a8cdb;
    box-shadow: 0 0 0 2px rgba(74, 140, 219, 0.15);
}

.family-closure-actions {
    display: flex;
    justify-content: center;
    padding-top: 0.1rem;
}

.family-closure-submit-btn {
    width: min(420px, 100%);
}

@media (max-width: 1199.98px) {
    .family-closure-nav-card {
        position: static;
    }

    .family-closure-hero-card .card-body {
        flex-direction: column;
    }

    .family-closure-hero-metrics {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .family-closure-page {
        padding-left: 0.28rem;
        padding-right: 0.28rem;
    }

    .family-closure-nav-card .card-body,
    .family-closure-content-card .card-body {
        padding: 0.7rem;
    }

    .family-closure-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .family-closure-notes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199.98px) {
    .family-attendance-nav-card {
        position: static;
    }

    .family-attendance-hero-card .card-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "metrics"
            "form";
        row-gap: 0.45rem;
    }

    .family-attendance-hero-form-slot .family-attendance-header-form > .row > [class*="col-"] {
        width: 100%;
    }

    .family-attendance-content-card [href*="TelaEncerraAtendimento"].btn,
    .family-attendance-content-card #encerrarAtendimentoButton {
        width: min(420px, 100%);
    }
}

@media (max-width: 767.98px) {
    .family-detail-page {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .family-detail-grid > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .family-detail-hero .card-body,
    .family-detail-section-head {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .family-detail-chart-canvas {
        min-height: 220px;
    }
}

/* Triagem IC questionnaire styles. */
.triagemic-questionario-page {
    padding: 0.45rem 0.65rem 0.2rem;
}

.triagemic-questionario-header {
    background: linear-gradient(135deg, #e8effb 0%, #dce7f8 48%, #edf3fe 100%);
    border: 1px solid #d6e0f1;
    border-radius: 14px;
}

.triagemic-questionario-header .card-body {
    padding: 0.75rem 1rem;
}

.triagemic-questionario {
    padding: 0.15rem 0.05rem 0.25rem;
}

.triagemic-questionario-grid {
    align-items: flex-start;
}

.triagemic-questionario-card {
    background: #fff;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    padding: 0.75rem 0.85rem 0.6rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 8px rgba(29, 50, 81, 0.05);
}

.triagemic-questionario-card .group {
    margin-bottom: 0;
}

.triagemic-questionario-card .group > h2 {
    font-size: 1.16rem;
    color: #223754;
    margin-top: 0;
    margin-bottom: 0.7rem;
}

.triagemic-questionario-card .subgroup {
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px solid #e8eef7;
}

.triagemic-questionario-card .subgroup > h3 {
    font-size: 1rem;
    color: #2f4a6e;
    margin-top: 0;
    margin-bottom: 0.65rem;
}

.triagemic-questionario .group hr,
.triagemic-questionario .subgroup hr {
    margin: 0.9rem 0;
    border-top: 1px solid #e6edf8;
    opacity: 1;
}

.triagemic-questionario .form-group {
    margin-bottom: 0.62rem;
}

.triagemic-questionario label {
    display: inline-block;
    margin-bottom: 0.28rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #314a6a;
}

.triagemic-questionario .form-control,
.triagemic-questionario .form-select,
.triagemic-questionario input[type="text"],
.triagemic-questionario input[type="number"],
.triagemic-questionario input[type="date"],
.triagemic-questionario textarea,
.triagemic-questionario select {
    min-height: 36px;
    border: 1px solid #cad7ea;
    border-radius: 9px;
    background-color: #fff;
    font-size: 0.86rem;
}

.triagemic-questionario textarea {
    min-height: 72px;
}

.triagemic-questionario .tab-content {
    border: 1px solid #dbe5f3;
    border-radius: 0 0 10px 10px;
    padding: 0.9rem;
    background: #fbfcff;
}

.triagemic-questionario .nav-tabs {
    border-bottom: 1px solid #dbe5f3;
}

.triagemic-questionario .nav-tabs > li > a {
    border-radius: 8px 8px 0 0;
    color: #456086;
    font-size: 0.84rem;
}

.triagemic-questionario .nav-tabs > li.active > a,
.triagemic-questionario .nav-tabs > li.active > a:focus,
.triagemic-questionario .nav-tabs > li.active > a:hover {
    color: #ef4365;
    background-color: #fff;
    border-color: #dbe5f3 #dbe5f3 transparent;
}

.triagemic-questionario-menu {
    display: block;
}

.triagemic-questionario .field-validation-error {
    font-size: 0.78rem;
}

.triagemic-sidebar-nav {
    top: 98px;
    max-height: calc(100vh - 122px);
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    background: #fff;
    padding: 0.55rem 0.35rem;
    box-shadow: 0 2px 8px rgba(29, 50, 81, 0.05);
}

.triagemic-sidebar-nav > li {
    margin-bottom: 0.34rem;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
    background: #f8fbff;
    overflow: hidden;
}

.triagemic-sidebar-nav > li > a {
    display: block;
    border-radius: 0;
    padding: 0.42rem 0.58rem;
    font-size: 0.81rem;
    font-weight: 700;
    color: #2f496b;
    background: #eef4fe;
    text-decoration: none;
}

.triagemic-sidebar-nav > li > a:hover,
.triagemic-sidebar-nav > li > a:focus {
    background: #e6effd;
    color: #ef4365;
    text-decoration: none;
}

.triagemic-sidebar-nav > li.active > a {
    background: #e3eefc;
    color: #ef4365;
}

.triagemic-sidebar-subnav {
    margin-top: 0;
    margin-left: 0;
    padding: 0.2rem 0.3rem 0.28rem;
    background: #fff;
}

.triagemic-sidebar-subnav > li > a {
    display: block;
    border-radius: 7px;
    padding: 0.2rem 0.46rem;
    font-size: 0.76rem;
    color: #5b6e89;
    text-decoration: none;
}

.triagemic-sidebar-subnav > li > a:hover,
.triagemic-sidebar-subnav > li > a:focus {
    color: #ef4365;
    background: #fff3f6;
    text-decoration: none;
}

.triagemic-right-panel {
    top: 98px;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    background: #fff;
    padding: 0.68rem 0.7rem;
    box-shadow: 0 2px 8px rgba(29, 50, 81, 0.05);
    z-index: 2;
}

.triagemic-right-title {
    line-height: 1.35;
    color: #233e60;
}

.triagemic-progress-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dbe5f3;
    background: #fff;
    width: 100%;
}

.triagemic-progress-title {
    padding: 0.45rem 0.62rem;
    border-bottom: 1px solid #d5e2f3;
    background: #e9f0fb;
    color: #2d4668;
    font-size: 0.84rem;
    font-weight: 700;
}

.triagemic-progress-card .card-header {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.triagemic-progress-card .list-group-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.79rem;
    line-height: 1.25;
}

.triagemic-progress-card .badge {
    font-size: 0.72rem;
    font-weight: 700;
}

.triagemic-questionario .radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    min-height: 34px;
    margin-bottom: 0;
    padding-top: 0.15rem;
}

.triagemic-questionario .radio label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
    font-size: 0.83rem;
    font-weight: 500;
    color: #334b6c;
}

.triagemic-questionario .radio label.ml-3 {
    margin-left: 0 !important;
}

.triagemic-questionario .radio input[type="radio"] {
    margin: 0;
    width: 15px;
    height: 15px;
    vertical-align: middle;
}

.triagemic-componente-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.24rem;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
    border-bottom: 1px solid #dbe5f3;
}

.triagemic-componente-tabs > li {
    float: none;
    flex: 0 0 auto;
}

.triagemic-componente-tab-link {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 8px 8px 0 0;
    padding: 0.45rem 0.65rem;
    color: #2f3f53;
    text-decoration: none;
}

.triagemic-componente-tab-link--add {
    min-width: 40px;
    text-align: center;
}

.triagemic-delete-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.triagemic-delete-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #8e3f2e;
    background: #ffefec;
    text-decoration: none;
    border: 1px solid #f7d1ca;
}

.btn-ic .fa,
.btn-ic .fa-plus {
    color: #fff !important;
}

.btn-ic:hover {
    background-color: #fff;
    border-color: #ef4365;
    color: #ef4365;
}

.btn-ic:hover .fa,
.btn-ic:hover .fa-plus {
    color: #ef4365 !important;
}

/* Variante redonda só-ícone do btn-ic (ex.: "adicionar" ao lado da busca no hero). */
.btn-ic-round {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.btn-ic-round .fa {
    margin: 0;
    font-size: 1rem;
}

.triagemic-delete-action i {
    font-size: 0.95rem;
    line-height: 1;
}

/* ============================================================
   ic-file-upload — seletor de arquivo canônico do IC
   (currículo, anexos etc.). Substitui o antigo label.btn-default
   vazio. Ver DesignSystem #sg-forms.
   ============================================================ */
.ic-file-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.ic-file-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.34rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ic-ink-soft);
    background: var(--ic-bg-soft);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-sm);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.ic-file-upload-btn:hover {
    color: var(--ic-primary);
    background: var(--ic-primary-soft);
    border-color: var(--ic-primary);
}

.ic-file-upload-btn .fa {
    color: inherit !important;
    font-size: 0.95rem;
}

.ic-file-upload-name {
    font-size: 0.86rem;
    color: var(--ic-ink-muted);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-file-upload-name.has-file {
    color: var(--ic-ink);
    font-weight: 600;
}

.ic-file-download {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--ic-ink);
    text-decoration: none;
}

.ic-file-download:hover {
    color: var(--ic-primary);
}

.ic-file-download .fa {
    color: var(--ic-danger-text) !important;
    font-size: 1.4rem;
    line-height: 1;
}

.ic-file-download:hover .fa {
    color: var(--ic-primary) !important;
}

/* Atendimento TecnicoReferencia page styles. */
.tr-reference-page {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.2rem 0.5rem 0.35rem;
}

.tr-reference-page > #divSummary {
    display: contents;
}

.tr-reference-page #Aviso,
.tr-reference-page #Aviso .alert {
    margin: 0;
}

.tr-reference-hero-card {
    border-radius: 14px;
    border: 1px solid #d7e2f2;
    background: linear-gradient(135deg, #eef4fe 0%, #e2ecfb 48%, #f8fbff 100%);
}

.tr-reference-hero-card .card-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
}

.tr-reference-hero-title {
    margin: 0.28rem 0 0.12rem;
    font-size: 1.38rem;
    font-weight: 800;
    line-height: 1.08;
    color: #1f3654;
}

.tr-reference-hero-subtitle {
    margin: 0;
    font-size: 0.92rem;
    color: #607089;
}

.tr-reference-hero-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.tr-reference-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    border: 1px solid #d0ddf0;
    background: rgba(255, 255, 255, 0.78);
    color: #375274;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.28rem 0.68rem;
}

.tr-reference-chip--status {
    background: #e9f7ef;
    border-color: #cbe8d8;
    color: #1c6542;
}

.tr-reference-layout {
    margin: 0;
    align-items: flex-start;
}

.tr-reference-layout > [class*="col-"] {
    padding: 0.35rem;
}

.tr-reference-layout > [class*="col-"] {
    padding-top: 0;
}

.tr-reference-sidebar-card,
.tr-reference-content-card {
    border-radius: 14px;
    border: 1px solid #dce5f2;
    background: #fff;
    overflow: hidden;
}

.tr-reference-sidebar-card {
    position: sticky;
    top: 0;
}

.tr-reference-sidebar-card .card-body,
.tr-reference-content-card .card-body {
    padding: 0.8rem 0.9rem;
}

.tr-reference-avatar-panel {
    border-top: 1px solid #e4ebf6;
    padding: 0.9rem;
    display: flex;
    justify-content: center;
    background: #f8fbff;
}

.tr-reference-avatar {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 18px;
    border: 3px solid #edf4fe;
    box-shadow: 0 10px 24px rgba(32, 63, 103, 0.12);
}

.tr-reference-sidebar-card .sidebar-nav > h5 {
    margin: 0 0 0.48rem;
    font-size: 0.82rem;
    line-height: 1.25;
    text-align: center;
}

.tr-reference-sidebar-card .sidebar-nav > h5 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    width: 100%;
    padding: 0.48rem 0.7rem;
    border-radius: 10px;
    border: 1px solid #d3dfef;
    background: #f5f9ff;
    color: #2a466d;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.tr-reference-sidebar-card .sidebar-nav > h5 > a.btn.btn-ic,
.tr-reference-sidebar-card .family-attendance-inline-actions > h5 > a.btn.btn-ic {
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.48rem 0.78rem;
    min-height: 38px;
    border: 1px solid #d3dfef;
    background: #f5f9ff;
    color: #2a466d;
    box-shadow: none;
}

.tr-reference-sidebar-card .sidebar-nav > h5 > a.btn.btn-ic:hover,
.tr-reference-sidebar-card .family-attendance-inline-actions > h5 > a.btn.btn-ic:hover {
    background: #eaf2ff;
    border-color: #bfd4f1;
    color: #1f3654;
}

.tr-reference-sidebar-card .sidebar-nav > h5 > a.btn.btn-ic .fa,
.tr-reference-sidebar-card .family-attendance-inline-actions > h5 > a.btn.btn-ic .fa {
    width: 1rem;
    text-align: center;
}

.tr-reference-sidebar-card .sidebar-nav > h5 a:hover {
    background: #eaf2ff;
    border-color: #bfd4f1;
    color: #1f3654;
}

.tr-reference-sidebar-card .family-attendance-inline-actions {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.tr-reference-sidebar-card .family-attendance-inline-actions > h5 {
    margin: 0;
    flex: 1 1 0;
}

.tr-reference-sidebar-card .family-attendance-inline-actions > h5 > a {
    width: 100%;
}

.tr-reference-sidebar-card .panel-group {
    display: grid;
    gap: 0.55rem;
}

.tr-reference-sidebar-card .panel {
    margin-bottom: 0;
    border: 1px solid #dce5f2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(29, 50, 81, 0.04);
}

.tr-reference-sidebar-card .panel-heading {
    padding: 0;
    border-bottom: 1px solid #e3eaf5;
    background: #eef4fe;
}

.tr-reference-sidebar-card .panel-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.tr-reference-sidebar-card .panel-title > a {
    display: block;
    padding: 0.55rem 0.72rem;
    color: #223754;
    text-decoration: none;
}

.tr-reference-sidebar-card .panel-body {
    padding: 0.62rem 0.72rem;
}

.tr-reference-sidebar-card .form-horizontal {
    display: grid;
    gap: 0.4rem;
}

.tr-reference-sidebar-card .form-group {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(0, 1.1fr);
    gap: 0.45rem;
    align-items: start;
}

.tr-reference-sidebar-card .form-group label,
.tr-reference-sidebar-card .form-group span {
    width: auto;
    float: none;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}

.tr-reference-sidebar-card .form-group label {
    color: #5a6f8f;
    font-weight: 700;
}

.tr-reference-sidebar-card .form-group span {
    color: #243a58;
}

.tr-reference-sidebar-card .sidebar-nav > h4,
.tr-reference-sidebar-card .sidebar-nav > h5:not(:has(a)) {
    margin: 0.2rem 0 0.2rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1f3654;
}

.tr-reference-content-shell {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.tr-reference-content-head {
    padding: 0.15rem 0.1rem 0;
}

.tr-reference-content-kicker {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    background: #eef3fb;
    color: #4d5f79;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tr-reference-content-title {
    margin: 0.35rem 0 0.18rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #223754;
}

.tr-reference-content-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: #617089;
}

.tr-reference-section-label {
    margin-top: -0.1rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4a6485;
}

.tr-reference-stack {
    display: grid;
    gap: 0.85rem;
}

.tr-reference-module {
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(30, 53, 86, 0.05);
    padding: 0.8rem 0.9rem;
}

.tr-reference-module .Incremental,
.tr-reference-module > .Incremental {
    width: 100%;
}

.tr-reference-module h3,
.tr-reference-module h4 {
    margin-top: 0;
    color: #223754;
}

.tr-reference-module h4 {
    margin-bottom: 0.7rem;
    font-size: 0.96rem;
    font-weight: 800;
}

.tr-reference-module p:empty,
.tr-reference-module hr {
    display: none;
}

.tr-reference-module .row {
    margin-left: 0;
    margin-right: 0;
}

.tr-reference-module [class*="col-"] {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.tr-reference-module .form-control,
.tr-reference-module .form-select,
.tr-reference-module input[type="text"],
.tr-reference-module input[type="number"],
.tr-reference-module input[type="date"],
.tr-reference-module select,
.tr-reference-module textarea {
    min-height: 36px;
    border: 1px solid #cad7ea;
    border-radius: 9px;
    background: #fff;
    font-size: 0.84rem;
}

.tr-reference-module textarea {
    min-height: 82px;
}

.tr-reference-module label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #314a6a;
}

.tr-reference-module .btn.btn-ic,
.tr-reference-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.42rem 0.85rem;
}

.tr-reference-module .btn.btn-sm {
    padding: 0.38rem 0.75rem;
}

.tr-reference-module section.row,
.tr-reference-module .d-flex.flex-row.justify-content-end {
    margin-top: 0.75rem;
}

.tr-reference-module .d-flex.flex-row.justify-content-end {
    gap: 0.45rem;
    flex-wrap: wrap;
}

.tr-reference-module .field-validation-error {
    font-size: 0.78rem;
}

.tr-reference-footer-actions {
    display: flex;
    justify-content: center;
    padding-top: 0.1rem;
}

.tr-reference-close-btn {
    width: min(460px, 100%);
}

.triagemic-delete-action:hover {
    color: #7d2619;
    background: #ffdcd5;
    text-decoration: none;

    .tr-reference-sidebar-card {
        position: static;
    }

    .tr-reference-hero-card .card-body {
        flex-direction: column;
    }

    .tr-reference-hero-metrics {
        justify-content: flex-start;
    }
}

.triagemic-fill-table {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.triagemic-fill-row {
    display: grid;

    .tr-reference-page {
        padding-left: 0.28rem;
        padding-right: 0.28rem;
    }

    .tr-reference-sidebar-card .card-body,
    .tr-reference-content-card .card-body {
        padding: 0.72rem;
    }

    .tr-reference-module {
        padding: 0.72rem;
    }

    .tr-reference-sidebar-card .form-group {
        grid-template-columns: 1fr;
        gap: 0.12rem;
    }

    .tr-reference-avatar {
        width: 96px;
        height: 96px;
    }
    grid-template-columns: minmax(0, 1fr) minmax(90px, auto) minmax(58px, auto);
    gap: 0.5rem;
    align-items: center;
    border-top: 1px solid #edf2f9;
    padding: 0.46rem 0.62rem;
    font-size: 0.78rem;
    width: 100%;
}

.triagemic-fill-row--head {
    border-top: none;
    background: #f8fbff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4a5d78;
}

.triagemic-fill-name {
    color: #2c4363;
    font-weight: 600;
}

.triagemic-fill-count {
    color: #4d617d;
    font-variant-numeric: tabular-nums;
    justify-self: end;
    text-align: right;
}

.triagemic-fill-percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    border-radius: 999px;
    padding: 0.14rem 0.45rem;
    color: #1f4269;
    background: #dbe9fb;
    border: 1px solid #b7cdec;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    justify-self: end;
}

@media (max-width: 991.98px) {
    .triagemic-questionario-page {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    .triagemic-questionario-card {
        padding: 0.68rem 0.7rem 0.55rem;
    }
}

/* Menu esquerdo IC: botões lado a lado */
.menu-escuerdo-botoes-ic {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.menu-escuerdo-botoes-ic h5 {
    margin: 0;
    flex: 1;
    min-width: 120px;
}

.menu-escuerdo-botoes-ic h5 a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.menu-escuerdo-botoes-ic h5 a:hover {
    background-color: #f0f0f0;
    text-decoration: none;
}

/* Cabeçalho de atendimento IC: métrica à direita do título */
.menu-escuerdo-botoes-ic .family-attendance-hero-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.family-list-hero {
    display: flex;
    align-items: center;
}

.family-list-hero h2 {
    flex-shrink: 0;
    margin-bottom: 0 !important;
}

.menu-escuerdo-botoes-ic .family-attendance-hero-metrics-slot {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.family-attendance-hero-metrics-slot .row {
    width: 100%;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.family-attendance-hero-metrics-slot .row > div {
    flex-shrink: 0;
}

/* Dashboard IC page styles. */
.dashboardic-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0.65rem;
}

.dashboardic-hero .card-body {
    padding: 0.92rem 1rem;
}

.dashboardic-hero-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboardic-filter-box {
    min-width: 240px;
}

.dashboardic-filter-box .form-control,
.dashboardic-filter-box .form-select {
    min-height: 38px;
    border-radius: 10px;
    border-color: #cdd9ea;
}

.dashboardic-grid {
    align-items: stretch;
}

.dashboardic-card {
    flex-direction: column;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(31, 53, 86, 0.05);
}

.dashboardic-card--chart .dashboardic-card-body {
    padding: 0.9rem;
}

.dashboardic-card + .dashboardic-card {
    margin-top: 0.7rem;
}

.dashboardic-content-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
}

.dashboardic-content-head .triagemic-content-title {
    width: 100%;
}

.dashboardic-content-head .triagemic-content-title a {
    color: #223754;
    text-decoration: none;
}

.dashboardic-content-head .triagemic-content-title a:hover {
    color: #ef4365;
}

.dashboardic-head-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.dashboardic-head-actions .toggle-btn {
    display: none;
}

.dashboardic-card-body {
    padding: 0.78rem;
}

.dashboardic-card-body--tables {
    padding-top: 0.65rem;
}

.dashboardic-chart-wrapper {
    position: relative;
    width: 100%;
    height: 320px;
}

.dashboardic-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Aposentado: `.dashboardic-chart-wrapper--wide` (400px) existia porque Encaminhamentos,
   Atendimentos em aberto e Crianças impactadas ocupavam a linha inteira. Agora todos os
   cards do dashboard são col-xl-6 (dois por linha) e dividem a mesma altura — alturas
   diferentes lado a lado faziam a dupla da linha desalinhar. */

/* Tabela do gráfico de encaminhamentos. Existe por acessibilidade: três cores da paleta
   ficam abaixo de 3:1 de contraste com o fundo, e a regra é rótulo visível OU tabela.
   O quadradinho repete a cor da série para amarrar tabela e gráfico sem depender de cor.
   O card de atendimentos em aberto usa a mesma anatomia e por isso divide as duas regras. */
.encaminhamentos-tabela th,
.abertos-tabela th { white-space: nowrap; }

.encaminhamentos-legenda-cor,
.abertos-legenda-cor {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.35rem;
    vertical-align: baseline;
    border-radius: 2px;
}

.dashboardic-table {
    margin-bottom: 0.65rem;
}

.dashboardic-table:last-child {
    margin-bottom: 0;
}

.dashboardic-table > thead > tr > th {
    background: #f6f9ff;
    border-top: 1px solid #dde6f4;
    border-bottom: 1px solid #d4dfef;
    color: #2f4566;
    font-size: 0.79rem;
    font-weight: 700;
    vertical-align: middle;
}

.dashboardic-table > tbody > tr > td {
    border-top: 1px solid #e6edf8;
    vertical-align: middle;
    font-size: 0.82rem;
}

.dashboardic-table > tbody > tr.active > td {
    background: #fffdf4;
}

.dashboardic-card-body--tables {
    overflow-x: auto;
}

@media (max-width: 1199.98px) {
    .dashboardic-chart-wrapper {
        height: 280px;
    }
}

@media (max-width: 767.98px) {
    .dashboardic-page {
        padding: 0.45rem;
    }

    .dashboardic-filter-box {
        min-width: 100%;
    }

    .dashboardic-content-head {
        align-items: stretch;
    }

    .dashboardic-head-actions {
        justify-content: flex-end;
    }

    .dashboardic-chart-wrapper {
        height: 240px;
    }
}

/* Discussoes (Familia/IndexDiscussao) page styles. */
.discussao-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Superfície levemente tingida: aterra os cards brancos (não flutuam no branco). */
    background: var(--ic-bg-surface);
}

.discussao-page .card {
    border: 1px solid #e2e8f3;
}

.discussao-hero {
    border-radius: 14px;
    overflow: hidden;
}

/* Evita o corte do topo da busca quando as ações do hero quebram de linha. */
.discussao-page .triagemic-hero .triagemic-toolbar {
    overflow: visible;
}

.discussao-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Busca + Exportar andam juntos (não separam de linha). */
.discussao-hero-search-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.discussao-hero-search-group .btn {
    white-space: nowrap;
}

.discussao-search {
    position: relative;
    flex: 0 1 260px;
    min-width: 180px;
}

.discussao-search .fa {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ic-ink-muted);
    font-size: 0.82rem;
    pointer-events: none;
}

.discussao-search .form-control {
    padding-left: 2rem;
    border-radius: var(--ic-radius-pill);
    border-color: var(--ic-border);
    font-size: 0.86rem;
    background: #fff;
}

.discussao-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.discussao-kpi strong {
    margin-left: 0.25rem;
}

.discussao-kpi--ok {
    background: #e8f6f1;
    border-color: #cbe8dc;
    color: #165d43;
}

.discussao-kpi--pending {
    background: #fff2df;
    border-color: #f1ddbb;
    color: #7a4b08;
}

.discussao-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2f4767;
    background: #eef4ff;
    border: 1px solid #d4e0f1;
}

.discussao-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    white-space: normal;
}

.discussao-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f1f4fb;
    border: 1px solid #dde4f2;
    color: #344c70;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.14rem 0.55rem;
}

/* ============================================================
   Discussões em cards (Famílias do Dia › Discussões). Mesmo padrão
   horizontal dos cadastros básicos (cards brancos sobre superfície
   tingida, colunas alinhadas por grid), com faixa lateral de cor
   sinalizando com/sem discussão. Substitui #conteudoTabela.discussao-table.
   ============================================================ */
.discussao-card-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.discussao-card {
    display: grid;
    grid-template-columns: minmax(210px, 1.9fr) auto minmax(128px, 1fr) minmax(150px, 1.9fr) auto;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--ic-border);
    border-left: 3px solid var(--ic-accent-good); /* verde = tem discussão */
    border-radius: var(--ic-radius-md);
    background: #fff;
    padding: 0.55rem 0.9rem;
    box-shadow: var(--ic-shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease, transform .12s ease;
}

.discussao-card:hover {
    box-shadow: var(--ic-shadow-md);
    border-color: var(--ic-border-strong);
    border-left-color: var(--ic-accent-good);
    transform: translateY(-1px);
}

.discussao-card--empty {
    border-left-color: var(--ic-accent-warn); /* âmbar = sem discussão */
}

.discussao-card--empty:hover {
    border-left-color: var(--ic-accent-warn);
}

.discussao-card-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.discussao-fam-badge {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0.28rem 0.45rem;
    border-radius: var(--ic-radius-md);
    background: #eaf0fb;
    border: 1px solid #d5e2f5;
    color: #3f5b8a;
    line-height: 1.05;
}

.discussao-fam-num {
    font-weight: 800;
    font-size: 1.02rem;
}

.discussao-fam-label {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7d93b8;
    font-weight: 700;
}

.discussao-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.discussao-identity-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ic-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discussao-identity-primary .fa {
    color: var(--ic-ink-muted);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.discussao-identity-secondary {
    font-size: 0.78rem;
    color: var(--ic-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discussao-status {
    justify-self: start;
}

.discussao-status--muted {
    color: var(--ic-ink-muted);
    background: var(--ic-bg-soft);
    border-color: var(--ic-border);
}

.discussao-proxima {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.discussao-proxima-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ic-ink-muted);
    font-weight: 700;
}

.discussao-proxima-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.16rem 0.5rem;
    border-radius: var(--ic-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discussao-proxima-pill--ok {
    color: var(--ic-success-text);
    background: var(--ic-success-bg);
    border-color: var(--ic-success-border);
}

.discussao-proxima-pill--none {
    color: var(--ic-warn-text);
    background: var(--ic-warn-bg);
    border-color: var(--ic-warn-border);
}

.discussao-chip--muted {
    color: var(--ic-ink-muted);
    background: var(--ic-bg-soft);
    border-color: var(--ic-border);
    font-style: italic;
    font-weight: 500;
}

.discussao-card-actions {
    justify-self: end;
}

.discussao-card--empty .discussao-fam-badge {
    background: #eef0f4;
    border-color: #e2e6ee;
    color: #97a2b4;
}

.discussao-card--empty .discussao-fam-label {
    color: #a7b0be;
}

.discussao-card-empty-text {
    grid-column: 2 / 5;
    color: var(--ic-ink-muted);
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 991.98px) {
    .discussao-card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.9rem;
    }

    .discussao-card-main {
        flex: 1 1 240px;
    }

    .discussao-chip-list {
        flex: 1 1 100%;
    }

    .discussao-card-actions {
        margin-left: auto;
    }

    .discussao-card-empty-text {
        flex: 1 1 auto;
    }
}

/* ============================================================
   Tela Discussão de Caso (Familia/DiscussaoCaso) — migrada p/ BS5/IC.
   Hero + cards de conteúdo (discussão atual + estratégias + histórico).
   ============================================================ */
.discussao-caso-page {
    background: var(--ic-bg-surface);
}

.discussao-caso-content {
    border-radius: 12px;
}

.discussao-caso-finalizar {
    white-space: nowrap;
}

.discussao-caso-sep {
    margin: 0.9rem 0 0.8rem;
    border: 0;
    border-top: 1px solid var(--ic-border);
}

.discussao-caso-estrategias-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}

.discussao-caso-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ic-ink);
}

.discussao-estrategia-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.discussao-estrategia-item {
    background: var(--ic-bg-soft);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-sm);
    padding: 0.4rem 0.55rem;
}

.discussao-estrategia-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.discussao-estrategia-field {
    flex: 0 1 340px;
    min-width: 0;
}

.discussao-estrategia-form .triagemic-delete-action {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Histórico de discussões em cards */
.discussao-hist-wrap {
    padding: 0.6rem 0.8rem 0.7rem;
    max-height: 460px;
    overflow-y: auto;
}

.discussao-hist-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.discussao-hist-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    background: #fff;
    padding: 0.5rem 0.7rem;
    box-shadow: var(--ic-shadow-sm);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.discussao-hist-card:hover {
    box-shadow: var(--ic-shadow-md);
    border-color: var(--ic-border-strong);
}

.discussao-hist-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.discussao-hist-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.84rem;
    color: var(--ic-ink);
}

.discussao-hist-date .fa {
    color: var(--ic-ink-muted);
    font-size: 0.8rem;
}

.discussao-hist-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
}

.discussao-hist-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--ic-ink-soft);
}

.discussao-hist-meta .fa {
    color: var(--ic-ink-muted);
    font-size: 0.8rem;
}

.discussao-hist-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ic-primary);
    text-decoration: none;
}

.discussao-hist-link:hover {
    text-decoration: underline;
}

/* ===== AgendaIc (Adultos) — Bootstrap 5 layout ===== */
.agendaic-page {
    --agendaic-row-height: 184px;
    --agendaic-row-gap: 4px;
    --agendaic-header-height: 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agendaic-page-shell {
    padding: 0.65rem;
}

.agendaic-hero {
    background: linear-gradient(135deg, #e8effb 0%, #dce7f8 48%, #edf3fe 100%);
    border: 1px solid #d6e0f1;
}

.agendaic-hero .card-body {
    padding: 0.82rem 1rem;
}

.agendaic-hero h2 {
    font-size: 1.38rem;
    line-height: 1.05;
}

.agendaic-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    border-radius: 10px;
}

.agendaic-toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agendaic-hero-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.agendaic-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4f5f77;
    background: #eaf0f8;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.agendaic-toolbar-description {
    font-size: 0.92rem;
    color: #5c6675;
}

.agendaic-kpi {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.2rem 0.62rem;
}

.agendaic-kpi strong {
    margin-left: 0.25rem;
}

.agendaic-kpi--good {
    background: #e5f7ed;
    border-color: #c6ebd7;
    color: #11653a;
}

.agendaic-kpi--warn {
    background: #fff4e3;
    border-color: #f0ddbe;
    color: #8a5b13;
}

.agendaic-kpi--danger {
    background: #fde7ec;
    border-color: #f6c1cc;
    color: #8a1f2f;
}

.agendaic-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0;
}

.agendaic-filter-field {
    display: flex;
    flex-direction: column;
    min-width: 170px;
}

.agendaic-filter-label {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #495e7c;
}

.agendaic-filter-form .input-group .form-control {
    background: #fff;
    border-color: #cdd9eb;
}

/* Botão de ícone de calendário coladinho ao input (canônico: .ic-date-toggle;
   .agendaic-calendar-toggle é o alias legado das telas de Agenda). */
.ic-date-toggle,
.agendaic-calendar-toggle {
    background: #fff;
    border-color: var(--ic-border);
    color: #4f5f77;
    cursor: pointer;
}

.ic-date-toggle:hover,
.ic-date-toggle:focus,
.agendaic-calendar-toggle:hover,
.agendaic-calendar-toggle:focus {
    background: var(--ic-bg-soft);
    color: #29486a;
    border-color: var(--ic-border);
    box-shadow: none;
}

.ic-date-toggle .fa,
.agendaic-calendar-toggle .fa {
    color: inherit;
}

/* ============================================================
   Calendário (Eonasdan bootstrap-datetimepicker v4) sobre BS5
   ------------------------------------------------------------
   A lib foi feita para Bootstrap 3: usa glyphicons (mapeados p/
   Font Awesome em site-4.js) e cores BS3 (#337ab7). Aqui re-skin
   completo com os tokens --ic-* e correção dos 3 sintomas do BS5:
     • some / fica atrás de tudo   -> display:block + z-index 3500
     • "fonte com zoom"            -> font-size fixo no root (a lib
                                       não define, então herda o body)
     • visual BS3 / ícones grandes -> branding + sizing das células
   O widget é REMOVIDO do DOM ao fechar (lib.hide -> widget.remove),
   então existe no máximo 1 por vez: display:block !important é seguro.
   Carregado depois de bootstrap-datepicker.css (ver _Css.cshtml),
   então sobrepõe o vendor sem precisar de !important nas cores.
   ============================================================ */

/* A lib é inicializada com widgetParent:'body' (escapa o stacking
   context do .tela-principal). A place() da lib exige um ancestral
   posicionado; body posicionado (sem z-index, NÃO cria stacking
   context) garante isso e não altera o layout. */
body {
    position: relative;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block !important;
    /* Acima de .modal (4000): o widget é filho do body (widgetParent), então é o
       z-index que decide. Em 3500 o calendário aberto de dentro de um modal ficava
       ATRÁS dele — só aparecia a faixa que passava da borda de baixo. Nada no IC
       passa de 4000, então este é o topo da pilha. */
    z-index: 4050 !important;
    width: 19rem;
    max-width: 19rem;
    padding: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.25;
    color: var(--ic-ink);
    background: #fff;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    box-shadow: var(--ic-shadow-lg);
}

.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 38rem;
    max-width: 38rem;
}

/* remove as setinhas/caret triangulares do tema BS3 */
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
    display: none !important;
}

.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0;
}

/* cabeçalho: « mês ano » + navegação */
.bootstrap-datetimepicker-widget table th {
    height: 2rem;
    line-height: 2rem;
    width: 2rem;
    font-weight: 600;
    color: var(--ic-ink-soft);
    border-radius: var(--ic-radius-sm);
}

.bootstrap-datetimepicker-widget table th.picker-switch {
    width: auto;
    font-weight: 700;
    color: var(--ic-ink);
}

.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--ic-bg-soft);
}

.bootstrap-datetimepicker-widget table th.dow {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ic-ink-muted);
}

.bootstrap-datetimepicker-widget table th .fa,
.bootstrap-datetimepicker-widget .picker-switch .fa {
    font-size: 0.95rem;
}

/* dias */
.bootstrap-datetimepicker-widget table td {
    border-radius: var(--ic-radius-sm);
}

.bootstrap-datetimepicker-widget table td.day {
    height: 2rem;
    line-height: 2rem;
    width: 2rem;
    border-radius: var(--ic-radius-sm);
}

.bootstrap-datetimepicker-widget table td.cw {
    font-size: 0.72em;
    color: var(--ic-accent-neutral);
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background: var(--ic-bg-soft);
    cursor: pointer;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: var(--ic-accent-neutral);
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--ic-primary);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background: var(--ic-primary);
    color: #fff;
    text-shadow: none;
}

.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #fff;
}

/* meses / anos / horas (spans clicáveis) */
.bootstrap-datetimepicker-widget table td span {
    width: 3.6rem;
    height: 2.4rem;
    line-height: 2.4rem;
    margin: 2px;
    border-radius: var(--ic-radius-sm);
}

.bootstrap-datetimepicker-widget table td span:hover {
    background: var(--ic-bg-soft);
}

.bootstrap-datetimepicker-widget table td span.old {
    color: var(--ic-accent-neutral);
}

/* timepicker */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    font-size: 1.1rem;
    font-weight: 600;
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: var(--ic-ink-soft);
}

.bootstrap-datetimepicker-widget a[data-action]:hover {
    background: var(--ic-bg-soft);
}

.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"] {
    background: var(--ic-primary);
    border-color: var(--ic-primary);
    color: #fff;
}

.bootstrap-datetimepicker-widget .picker-switch td span:hover {
    background: var(--ic-bg-soft);
}

.agendaic-filter-button {
    align-self: flex-end;
}

.agendaic-page .agendaic-toolbar .btn.btn-ic,
.agendaic-page .agendaic-toolbar .btn.btn-ic:focus,
.agendaic-page .agendaic-toolbar .btn.btn-ic:active {
    border: 1px solid #ef4365;
    color: #fff;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.agendaic-page .agendaic-toolbar .btn.btn-ic:hover,
.agendaic-page .agendaic-toolbar .btn.btn-ic:focus-visible {
    background-color: #fff;
    border-color: #ef4365;
    color: #ef4365;
    box-shadow: 0 0 0 2px rgba(239, 67, 101, 0.16);
}

.agendaic-page .agendaic-toolbar .btn.btn-ic .fa {
    color: inherit !important;
}

.agendaic-content {
    border: 1px solid #dbe5f3;
}

.agendaic-schedule-region {
    padding: 0.55rem 0.6rem 0.85rem;
    overflow-x: auto;
}

.agendaic-schedule-region .fixed-container {
    align-items: stretch;
}

/* ===== Agenda de adultos que preenche o viewport (cabeçalho grudado, scroll só na grade) =====
   Mesmo encaixe do calendário: body 100dvh → .ic-app-scroll → .tela-principal → página.
   O cabeçalho da tela (hero) e a linha de nomes/horários ficam fixos; rola só a grade. */
.agendaic-page--fill {
    height: calc(100vh - 90px); /* fallback p/ navegadores sem :has() */
    overflow: hidden;
}

@supports selector(:has(*)) {
    body.ic-app-shell:has(.agendaic-page--fill) > .ic-app-scroll {
        overflow-y: hidden;
    }

    body.ic-app-shell:has(.agendaic-page--fill) > .ic-app-scroll > .tela-principal {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    body.ic-app-shell > .ic-app-scroll > .tela-principal > .agendaic-page--fill {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* Hero não cresce (por padrão herda flex:1 1 100% e dividiria o espaço com a grade) */
.agendaic-page--fill .agendaic-hero {
    flex: 0 0 auto;
}

.agendaic-page--fill .agendaic-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.agendaic-page--fill .agendaic-content > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* A grade é o único container que rola (vertical + horizontal) */
.agendaic-page--fill .agendaic-schedule-region {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* scroll-area deixa de ser contexto de scroll próprio (senão o sticky top dos
   cabeçalhos de atendente resolveria contra ela) e preenche a largura restante
   após a coluna de horários, para as colunas dividirem esse espaço. */
.agendaic-page--fill .agendaic-scroll-area {
    overflow: visible;
    flex: 1 1 auto;
    min-width: 0;
}

/* Colunas de atendente dividem a largura disponível igualmente (sem largura fixa):
   preenchem exatamente o espaço quando cabem — nada de scroll horizontal — e só
   descem para o piso (min-width) + scroll quando a tela é estreita demais. */
.agendaic-page--fill .agendaic-atendente-column {
    flex: 1 1 0;
    min-width: 288px;
}

.agendaic-page--fill .card-agendamento {
    min-width: 0;
    max-width: none;
}

/* Coluna de horários fixa à esquerda no scroll horizontal */
.agendaic-page--fill .agendaic-times-column {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
}

/* Linha de cabeçalho (label "Horários" + nomes dos atendentes) fixa no topo */
.agendaic-page--fill .agendaic-times-label,
.agendaic-page--fill .agendaic-atendente-header {
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Canto (label Horários): fica acima de tudo — topo E esquerda */
.agendaic-page--fill .agendaic-times-label {
    z-index: 5;
    background: #fff;
}

/* Faixa branca atrás dos cabeçalhos sticky (cobre o sliver do gap ao rolar) */
.agendaic-page--fill .agendaic-atendente-header {
    box-shadow: 0 -6px 0 6px #fff;
}

/* Times column ---------------------------------------------------------- */
.agendaic-page .agendaic-times-column {
    flex: 0 0 auto;
    padding: 0 0.5rem 0 0.5rem !important;
    border-right: 1px dashed #dbe5f3;
    gap: var(--agendaic-row-gap);
}

.agendaic-times-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--agendaic-header-height);
    margin-bottom: var(--agendaic-row-gap);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #495e7c;
}

.agendaic-page .agendaic-time-slot {
    height: var(--agendaic-row-height);
    min-height: var(--agendaic-row-height);
    margin: 0;
    background: #f5f8ff;
    border-color: #dbe5f3;
    color: #2f4767;
    font-size: 0.82rem;
    font-weight: 700;
    justify-content: flex-start;
    padding-top: 9px;
}

/* Atendente columns ----------------------------------------------------- */
.agendaic-scroll-area {
    flex: 1 1 auto;
    overflow-x: auto;
}

.agendaic-page .schedule-cards {
    margin-top: 0;
    gap: 0;
}

/* Garante o espaço do ícone no input de membro: o atalho `padding` da regra
   .form-control (mais abaixo na cascata) zeraria o padding-left, fazendo o
   ícone cobrir o texto. Seletor com elemento (input) vence por especificidade. */
/* ============================================================
   Documentos dos atendimentos na tela de Editar Família
   (Views/Familia/_DocumentosAtendimentosIc.cshtml)
   ============================================================ */
.familia-docs-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 0.7rem;
}

.familia-docs-toolbar .usuario-search { margin-left: auto; }

.familia-docs-tabela {
    font-size: 0.86rem;
    vertical-align: middle;
}

.familia-docs-tabela th {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ic-ink-muted);
    background: var(--ic-bg-head);
    white-space: nowrap;
}

.familia-docs-tabela td { vertical-align: middle; }

.familia-docs-tabela .ic-file-download {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 380px;
    min-width: 0;
}

.familia-docs-tabela .ic-file-download > .fa { flex: 0 0 auto; }

/* A truncagem tem de ficar no SPAN, não no flex container: um flex item não encolhe
   abaixo do conteúdo sem min-width:0, e text-overflow só age em quem tem o overflow. */
.familia-docs-tabela .ic-file-download > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lixinho "limpar horário": some no card compacto da grade, aparece no hover/foco;
   no modal de edição fica sempre visível, porque ali há espaço e o alvo é único. */
.agendaic-card-membro {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.agendaic-card-membro > .agendaic-membro-input {
    flex: 1 1 auto;
    min-width: 0;
}

.agendaic-card-limpar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--ic-ink-muted);
    background: transparent;
    border: 0;
    border-radius: var(--ic-radius-sm);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}

.agendaic-card-limpar:hover,
.agendaic-card-limpar:focus-visible {
    color: var(--ic-danger-text);
    background: var(--ic-danger-bg);
}

.agendaic-page .agendaic-card-limpar {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    opacity: 0;
    /* invisível NÃO pode ser clicável: sem isto dá para acertar o lixinho às cegas */
    pointer-events: none;
}

.agendaic-page .card-agendamento:hover .agendaic-card-limpar,
.agendaic-page .card-agendamento:focus-within .agendaic-card-limpar {
    opacity: 1;
    pointer-events: auto;
}

.agendaic-editar-modal .agendaic-card-limpar {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
}

.agendaic-limpar-aviso {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--ic-ink-muted);
}

.agendaic-page .card-agendamento input.agendaic-membro-input {
    height: 28px;
    min-height: 28px;
    font-size: 0.8rem;
    padding-left: 28px;
}

.agendaic-editar-modal .card-agendamento input.agendaic-membro-input {
    height: 44px;
    min-height: 44px;
    font-size: 0.98rem;
    padding-left: 40px;
}

.agendaic-page .agendaic-atendente-column {
    padding: 0 0.35rem 0 0.35rem !important;
    gap: var(--agendaic-row-gap);
}

.agendaic-page .agendaic-atendente-column .agendaic-atendente-header {
    height: var(--agendaic-header-height);
    margin-bottom: var(--agendaic-row-gap);
}

.agendaic-atendente-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.6rem;
    background: #ffffff;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #223754;
    font-weight: 600;
    font-size: 0.84rem;
    box-shadow: 0 1px 0 rgba(34, 55, 84, 0.04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaic-atendente-header .fa {
    color: #4f5f77;
}

/* ===== Card de agendamento — colunas alinhadas (Adultos) =====
   Altura fixa (= --agendaic-row-height) pra alinhar 1:1 com a coluna de
   horários. Form compacto em grade de 2 colunas, com contraste reforçado. */
.agendaic-page .card-agendamento {
    min-width: 340px;
    max-width: 420px;
    width: 100%;
    height: var(--agendaic-row-height);
    min-height: var(--agendaic-row-height);
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #c9d8ee;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.07);
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

.agendaic-page .vertical-container3-clean:nth-child(even) .card-agendamento {
    background-color: #f6f9ff;
}

.agendaic-page .card-agendamento form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    justify-content: flex-start;
}

.agendaic-page .card-agendamento .agendaic-membro-input {
    width: 100%;
    height: 28px;
    min-height: 28px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #1f3350;
    padding-left: 28px;
    border-color: #bdcce4;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23889ab4' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 13px 13px;
}

.agendaic-page .card-agendamento .agendaic-membro-input::placeholder {
    color: #97a6bd;
    font-weight: 400;
}

.agendaic-page .card-agendamento .agendaic-membro-input:focus {
    border-color: #ef8298;
    box-shadow: 0 0 0 2px rgba(239, 67, 101, 0.18);
}

.agendaic-page .card-agendamento .agendaic-card-body {
    flex: 1 1 auto;
    min-height: 0;
}

.agendaic-page .card-agendamento .agendaic-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 9px;
}

.agendaic-page .card-agendamento .agendaic-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agendaic-page .card-agendamento .agendaic-field--full {
    grid-column: 1 / -1;
}

.agendaic-page .card-agendamento .agendaic-card-label {
    margin: 0;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6a7a93;
    line-height: 1.1;
}

/* Segmentado Sim/Não — blindado contra o div.radio global (inline-flex + gap
   grande + labels com largura de conteúdo), que pintava só "um teco". */
.agendaic-page .card-agendamento .radio {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    height: 24px;
    border: 1px solid #bdcce4;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    padding: 0;
}

.agendaic-page .card-agendamento .radio label {
    flex: 1 1 0 !important;
    min-width: 0;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 100%;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    color: #44566f;
    cursor: pointer;
}

.agendaic-page .card-agendamento .radio label.ml-3 {
    margin: 0 !important;
    border-left: 1px solid #bdcce4;
}

.agendaic-page .card-agendamento .radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.agendaic-page .card-agendamento .radio label:has(input:checked) {
    background: #ef4365;
    color: #fff;
}

.agendaic-page .card-agendamento .radio label:has(input:disabled) {
    color: #aab4c4;
    cursor: not-allowed;
}

.agendaic-page .card-agendamento .form-control,
.agendaic-page .card-agendamento .form-select {
    min-height: 24px;
    height: 24px;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    color: #1f3350;
    border-color: #bdcce4;
    border-radius: 6px;
    margin: 0;
    width: 100%;
}

.agendaic-page .card-agendamento textarea.form-control {
    height: 24px;
    min-height: 24px;
    resize: none;
    overflow: hidden;
}

.agendaic-page .card-agendamento .agendaic-flags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.agendaic-page .card-agendamento .agendaic-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: 1px solid #bdcce4;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #44566f;
    cursor: pointer;
    white-space: nowrap;
}

.agendaic-page .card-agendamento .agendaic-flag input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.agendaic-page .card-agendamento .agendaic-flag:has(input:checked) {
    background: #ef4365;
    border-color: #ef4365;
    color: #fff;
}

.agendaic-page .card-agendamento .agendaic-card-badges {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    font-size: 0.66rem;
    color: #44566f;
}

.agendaic-page .card-agendamento .agendaic-card-badges .cyrela {
    flex: 0 0 auto;
    white-space: nowrap;
}

.agendaic-page .card-agendamento .agendaic-card-badges .tecref {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaic-page .card-agendamento .cyrela .fa {
    color: #ef4365;
}

.agendaic-page .card-agendamento .tecref {
    color: #244a72;
}

/* ===== Status do card da Agenda (cores herdadas da Agenda do Dia) =====
   Mesma paleta dos cards .agendaic-dia-card--*: verde compareceu, vermelho
   falta, âmbar horário passado sem registro, azul aguardando. */
.agendaic-page .card-agendamento.agendaic-card--ok {
    border-left: 4px solid var(--ic-accent-good);
    background: #fbfefc;
}

.agendaic-page .card-agendamento.agendaic-card--falta {
    border-left: 4px solid var(--ic-accent-danger);
    background: #fdf6f8;
}

.agendaic-page .card-agendamento.agendaic-card--warning {
    border-left: 4px solid var(--ic-accent-warn);
    background: #fdfaf3;
}

.agendaic-page .card-agendamento.agendaic-card--pending {
    border-left: 4px solid var(--ic-accent-info);
    background: #fafcff;
}

/* Busca: cards que não batem ficam esmaecidos (display:none quebraria o
   alinhamento das linhas com a coluna de horários). */
.agendaic-page .card-agendamento.agendaic-card--dimmed {
    opacity: 0.13;
    pointer-events: none;
}

/* Alerta "atendimento não registrado" (triângulo âmbar, vindo da Agenda do Dia) */
.agendaic-page .card-agendamento .agendaic-card-warnflag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--ic-radius-pill);
    background: #fbf4d8;
    border: 1px solid #efe1a8;
    color: #8a6b13;
    font-size: 0.62rem;
}

/* Campo Remarcação dentro do card (controles de 24px) */
.agendaic-page .card-agendamento .agendaic-remarc-group {
    flex-wrap: nowrap;
}

.agendaic-page .card-agendamento .agendaic-remarc-group .ic-date-toggle {
    height: 24px;
    min-height: 24px;
    padding: 0 7px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
}

.agendaic-page .card-agendamento .agendaic-remarc-group input:disabled {
    background: #f3f6fb;
    color: #97a6bd;
    cursor: not-allowed;
}

/* Datepicker de remarcação: dias com horário livre do atendente ficam verdes
   (classe aplicada via JS em dp.show/dp.update com /AgendaDoDiaIc/DiasComHorarioLivre). */
.bootstrap-datetimepicker-widget table td.day.ic-day-livre:not(.active) {
    background: var(--ic-success-bg);
    color: var(--ic-success-text);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--ic-success-border);
    border-radius: 8px;
}

.bootstrap-datetimepicker-widget table td.day.ic-day-livre:not(.active):hover {
    background: color-mix(in srgb, var(--ic-success-bg) 65%, var(--ic-success-border));
}

@media (max-width: 991.98px) {
    .agendaic-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .agendaic-hero-actions {
        align-items: stretch;
        justify-content: flex-start;
    }

    .agendaic-filter-form {
        flex-wrap: wrap;
    }

    .agendaic-filter-field {
        flex: 1 1 200px;
    }
}

/* ===== AgendaInfantilIc (Psicologia / Pedagogia) ===== */
.agendaic-page .agendaic-grupo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0.35rem 0 0.4rem;
}

.agendaic-grupo-column {
    flex: 1 1 260px;
    min-width: 240px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: #f8fafc;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
}

.agendaic-grupo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    color: #223754;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(34, 55, 84, 0.04);
}

.agendaic-grupo-nome {
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}

.agendaic-grupo-horario {
    font-size: 0.74rem;
    font-weight: 600;
    color: #5b6a82;
    background: #eef4ff;
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

.agendaic-grupo-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-agendamento-infantil {
    background: #ffffff;
    border: 1px solid #dbe5f3;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.06);
}

.card-agendamento-infantil form {
    margin: 0;
}

.card-agendamento-infantil .form-control {
    min-height: 28px;
    height: 28px;
    font-size: 0.78rem;
    padding: 0.1rem 0.45rem;
    border-color: #dbe5f3;
}

.card-agendamento-infantil .form-control:focus {
    border-color: #a8c2e5;
    box-shadow: 0 0 0 2px rgba(168, 194, 229, 0.25);
}

/* ===== AgendaIc Calendário Mensal — visual Google Agenda ===== */
.agendaic-calendar-page {
    /* Fallback para navegadores sem :has() — nos atuais, o bloco @supports
       abaixo dimensiona pela cadeia flex do app-shell, sem constante em px. */
    height: calc(100vh - 90px);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    gap: 8px;
    overflow: hidden;
}

/* Sem scroll global nas telas de calendário: a página preenche exatamente o
   espaço do .ic-app-scroll via flex (body 100dvh → scroll → tela-principal →
   página), então nenhuma constante de altura precisa bater com o chrome. */
@supports selector(:has(*)) {
    body.ic-app-shell:has(.agendaic-calendar-page) > .ic-app-scroll {
        overflow-y: hidden;
    }

    body.ic-app-shell:has(.agendaic-calendar-page) > .ic-app-scroll > .tela-principal {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    body.ic-app-shell > .ic-app-scroll > .tela-principal > .agendaic-calendar-page {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
}

.agendaic-calendar-page .agendaic-hero {
    flex: 0 0 auto;
}

.agendaic-calendar-page .agendaic-hero .card-body {
    padding: 0.55rem 0.85rem;
}

.agendaic-calendar-page .agendaic-cal-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.agendaic-calendar-page .agendaic-cal-filters .form-control,
.agendaic-calendar-page .agendaic-cal-filters .form-select {
    min-height: 30px;
    border-color: #cdd9eb;
    background: #fff;
}

.agendaic-calendar-page .agendaic-cal-filters .form-control {
    width: 200px;
}

.agendaic-calendar-page .agendaic-cal-filters .form-select {
    width: 160px;
}

.agendaic-calendar-content {
    border: 1px solid #dbe5f3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.agendaic-calendar-content > .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.agendaic-cal-monthbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0.8rem;
    background: #f4f7fc;
    border-bottom: 1px solid #dbe5f3;
    flex: 0 0 auto;
}

.agendaic-cal-monthnav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.agendaic-cal-arrow,
.agendaic-cal-today {
    border: 1px solid #cdd9eb !important;
    background: #ffffff !important;
    color: #29486a !important;
    height: 30px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.agendaic-cal-arrow {
    width: 30px;
    padding: 0 !important;
}

.agendaic-cal-today {
    padding: 0 0.75rem !important;
    font-weight: 600;
    font-size: 0.82rem;
}

.agendaic-cal-arrow:hover,
.agendaic-cal-today:hover {
    background: #eef4ff !important;
    color: #1f3552 !important;
    text-decoration: none;
}

.agendaic-cal-monthtitle {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-weight: 700;
    color: #223754;
}

.agendaic-cal-monthname {
    font-size: 1.2rem;
    line-height: 1;
    text-transform: capitalize;
}

.agendaic-cal-monthyear {
    font-size: 0.95rem;
    color: #5b6a82;
    font-weight: 600;
}

.agendaic-cal-selectors {
    display: flex;
    gap: 0.4rem;
}

.agendaic-cal-selectors .form-select {
    min-height: 30px;
    border-color: #cdd9eb;
    background: #fff;
    font-size: 0.82rem;
}

.agendaic-cal-weekhead {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #ffffff;
    border-bottom: 1px solid #e2eaf3;
    flex: 0 0 auto;
}

.agendaic-cal-dow {
    padding: 6px 12px 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5b6a82;
    text-align: left;
    border-right: 1px solid #f0f4fa;
}

.agendaic-cal-dow:last-child {
    border-right: none;
}

.agendaic-cal-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    background: #f4f7fc;
    gap: 1px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.agendaic-cal-cell {
    background: #ffffff;
    padding: 4px 5px 3px;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    cursor: pointer;
    transition: background-color 0.12s ease;
    overflow: hidden;
}

.agendaic-cal-cell:hover {
    background: #f7faff;
}

.agendaic-cal-cell--empty {
    background: #fafbfd;
    cursor: default;
}

.agendaic-cal-cell--empty:hover {
    background: #fafbfd;
}

.agendaic-cal-cell--today {
    background: #f1f7ff;
}

.agendaic-cal-cell--today:hover {
    background: #e6efff;
}

.agendaic-cal-cell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    min-height: 22px;
    flex: 0 0 auto;
}

.agendaic-cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2f4767;
    border-radius: 999px;
}

.agendaic-cal-day-num--today {
    background: #ef4365;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(239, 67, 101, 0.35);
}

.agendaic-cal-day-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #4f5f77;
    background: #eef3fb;
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    padding: 0 0.5rem;
    line-height: 1.5;
}

.agendaic-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 2px 2px;
}

.agendaic-cal-events::-webkit-scrollbar {
    width: 4px;
}

.agendaic-cal-events::-webkit-scrollbar-thumb {
    background: #d2dceb;
    border-radius: 2px;
}

.agendaic-cal-event {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px 4px;
    border-radius: 4px;
    line-height: 1.25;
    color: #1d2a3d;
    cursor: pointer;
    border: 1px solid rgba(34, 55, 84, 0.07);
    box-shadow: 0 1px 0 rgba(34, 55, 84, 0.03);
    overflow: hidden;
    flex: 0 0 auto;
    min-height: 36px;
}

.agendaic-cal-event:hover {
    filter: brightness(0.94);
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.12);
}

.agendaic-cal-event-top {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
}

.agendaic-cal-event-time {
    font-weight: 700;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: #1d2a3d;
}

.agendaic-cal-event-name {
    font-size: 0.74rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaic-cal-event-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: rgba(34, 55, 84, 0.72);
    white-space: nowrap;
    overflow: hidden;
}

.agendaic-cal-event-familia {
    font-weight: 600;
    flex-shrink: 0;
}

.agendaic-cal-event-polo {
    flex-shrink: 0;
}

.agendaic-cal-event-atendente {
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaic-cal-event-sep {
    flex-shrink: 0;
    opacity: 0.5;
}

@media (max-width: 991.98px) {
    .agendaic-calendar-page .agendaic-cal-filters {
        width: 100%;
        justify-content: flex-start;
    }

    .agendaic-calendar-page .agendaic-cal-filters .form-control,
    .agendaic-calendar-page .agendaic-cal-filters .form-select {
        flex: 1 1 160px;
        width: auto;
    }

    .agendaic-cal-monthbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .agendaic-cal-selectors {
        justify-content: stretch;
    }

    .agendaic-cal-selectors .form-select {
        flex: 1 1 auto;
    }

    .agendaic-cal-cell {
        min-height: 110px;
    }
}

/* ===== Calendário AgendaIc v2 — visão mês+semana estilo Google =====
   A célula do mês mantém o scroll interno (decisão de uso: resolver pelo
   modal sem sair da tela); o "+N mais" é um rodapé fixo que abre o popover. */
.agendaic-calendar-page--v2 .agendaic-cal-event {
    border-left: 3px solid transparent;
}

.agendaic-cal-vistames {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.agendaic-cal-vistames[hidden],
.agendaic-week[hidden] {
    display: none !important;
}

/* Dias do mês vizinho (grade contínua) */
.agendaic-cal-cell--outside {
    background: #fafcfe;
}

.agendaic-cal-cell--outside:hover {
    background: #f2f6fb;
}

.agendaic-cal-cell--outside .agendaic-cal-day-num {
    color: #97a5ba;
    font-weight: 500;
}

.agendaic-cal-cell--outside .agendaic-cal-event {
    opacity: 0.6;
}

/* Pílula de feriado (nacional automático ou "Feriado" lançado na agenda).
   Vive no head da célula do mês, no cabeçalho do dia da semana e no popover;
   entra na busca por texto do filtro. */
.agendaic-cal-holiday {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 6px;
    margin-right: auto; /* cola no número do dia; contador segue à direita */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ic-success-text);
    background: #fff; /* o dia inteiro é tingido de verde — pílula branca destaca */
    border: 1px solid var(--ic-success-border);
    border-radius: var(--ic-radius-pill);
    padding: 0 0.5rem;
    line-height: 1.6;
}

.agendaic-week-dayhead .agendaic-cal-holiday {
    margin: 1px 0 0;
    max-width: 94%;
}

.agendaic-cal-popover-date .agendaic-cal-holiday {
    margin: 2px 0 0;
    background: var(--ic-success-bg); /* popover é branco — aqui a pílula volta a ser verde */
}

/* Contador do dia = gatilho do popover (célula continua com scroll) */
.agendaic-cal-day-count {
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.agendaic-cal-day-count:hover {
    background: #dde7f6;
    border-color: #c3d2e8;
    color: #1f3552;
}

/* Popover de dia (lista completa da célula) */
.agendaic-cal-popover {
    position: fixed;
    z-index: 1045;
    width: 320px;
    background: #fff;
    border: 1px solid var(--ic-border-strong);
    border-radius: var(--ic-radius-lg);
    box-shadow: var(--ic-shadow-lg);
    padding: 10px 12px 12px;
}

.agendaic-cal-popover-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.agendaic-cal-popover-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.agendaic-cal-popover-dow {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ic-ink-muted);
}

.agendaic-cal-popover-num {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ic-radius-pill);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-ink);
}

.agendaic-cal-popover-num.is-today {
    background: var(--ic-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(239, 67, 101, 0.35);
}

.agendaic-cal-popover-close {
    border: 0;
    background: transparent;
    width: 28px;
    height: 28px;
    border-radius: var(--ic-radius-pill);
    color: var(--ic-ink-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.agendaic-cal-popover-close:hover {
    background: #eef3fb;
    color: var(--ic-ink);
}

.agendaic-cal-popover-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 300px;
    overflow-y: auto;
}

.agendaic-cal-popover-empty {
    font-size: 0.8rem;
    color: var(--ic-ink-muted);
    padding: 8px 2px;
}

.agendaic-cal-popover-open {
    margin-top: 8px;
    width: 100%;
    border: 1px solid var(--ic-border);
    background: #f7f9fd;
    color: #29486a;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 5px;
}

.agendaic-cal-popover-open:hover {
    background: #eef4ff;
}

/* Toggle Mês | Semana (segmentado da barra do calendário) */
.agendaic-cal-viewtoggle {
    display: inline-flex;
    border: 1px solid #cdd9eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    flex: 0 0 auto; /* não deixa os selects (width:100% do BS) esmagarem o toggle */
}

/* .form-select do BS5 nasce com width:100% — na barra do calendário os selects
   de mês/ano devem ter o tamanho do conteúdo, senão engolem os vizinhos. */
.agendaic-cal-selectors .form-select {
    width: auto;
    flex: 0 0 auto;
}

.agendaic-cal-viewbtn {
    border: 0;
    background: transparent;
    height: 28px;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #44597a;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.agendaic-cal-viewbtn + .agendaic-cal-viewbtn {
    border-left: 1px solid #e2eaf3;
}

.agendaic-cal-viewbtn:hover {
    background: #f2f6fd;
}

.agendaic-cal-viewbtn.is-active {
    background: var(--ic-primary-soft);
    color: var(--ic-primary);
}

.agendaic-cal-hint {
    display: none;
    font-size: 0.68rem;
    color: #7c8ba3;
    margin-right: 0.35rem;
    white-space: nowrap;
    align-self: center;
}

@media (min-width: 1200px) {
    .agendaic-cal-hint {
        display: inline;
    }
}

.agendaic-cal-monthname--week {
    font-size: 1.05rem;
    text-transform: none;
}

/* Legenda de atendentes (chips clicáveis que filtram o calendário) */
.agendaic-cal-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    padding: 5px 10px;
    background: #fff;
    border-bottom: 1px solid #e2eaf3;
    flex: 0 0 auto;
}

.agendaic-cal-legend-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #5b6a82;
    margin-right: 2px;
}

.agendaic-cal-legendchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--ic-radius-pill);
    padding: 1px 9px 1px 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #3c4f6b;
    cursor: pointer;
    opacity: 0.42;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}

.agendaic-cal-legendchip.is-on {
    opacity: 1;
}

.agendaic-cal-legendchip:hover {
    background: #f2f6fd;
}

.agendaic-cal-legenddot {
    width: 11px;
    height: 11px;
    border-radius: var(--ic-radius-pill);
    border: 1.5px solid;
    flex: 0 0 auto;
}

.agendaic-cal-legendclear {
    border: 0;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ic-primary);
    padding: 1px 8px;
    border-radius: var(--ic-radius-pill);
    cursor: pointer;
}

.agendaic-cal-legendclear:hover {
    background: var(--ic-primary-soft);
}

/* ----- Visão Semana (grade de horários) ----- */
.agendaic-week {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.agendaic-week-head {
    display: grid;
    grid-template-columns: 56px repeat(5, 1fr);
    border-bottom: 1px solid #e2eaf3;
    background: #fff;
    flex: 0 0 auto;
}

.agendaic-week-dayhead {
    border: 0;
    background: transparent;
    border-left: 1px solid #f0f4fa;
    padding: 5px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    position: relative;
}

.agendaic-week-dayhead:hover {
    background: #f7faff;
}

.agendaic-week-downame {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5b6a82;
}

.agendaic-week-daynum {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ic-radius-pill);
    font-size: 1.05rem;
    font-weight: 700;
    color: #2f4767;
}

.agendaic-week-dayhead.is-today .agendaic-week-daynum {
    background: var(--ic-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(239, 67, 101, 0.35);
}

.agendaic-week-daycount {
    position: absolute;
    top: 5px;
    right: 8px;
    font-size: 0.66rem;
    font-weight: 600;
    color: #4f5f77;
    background: #eef3fb;
    border: 1px solid #dbe5f3;
    border-radius: var(--ic-radius-pill);
    padding: 0 0.45rem;
    line-height: 1.5;
}

.agendaic-week-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.agendaic-week-body {
    display: grid;
    grid-template-columns: 56px repeat(5, 1fr);
}

.agendaic-week-gutter {
    position: relative;
    border-right: 1px solid #e6ecf5;
}

.agendaic-week-hour {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: 0.66rem;
    font-weight: 600;
    color: #8b99b0;
    background: #fff;
    padding: 0 2px;
}

.agendaic-week-gutter .agendaic-week-hour:first-child {
    transform: none;
}

/* Linhas de hora: passo fixo de 64px = HOUR_PX do CalendarioMensal.cshtml */
.agendaic-week-col {
    position: relative;
    border-left: 1px solid #eef2f8;
    background-image: repeating-linear-gradient(to bottom, #eef2f8 0, #eef2f8 1px, transparent 1px, transparent 64px);
    cursor: pointer;
}

.agendaic-week-col.is-today {
    background-color: #f8fbff;
}

.agendaic-week-event {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 7px 4px;
    border-radius: 6px;
    border: 1px solid rgba(34, 55, 84, 0.08);
    border-left: 3px solid transparent;
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.08);
    overflow: hidden;
    cursor: pointer;
    line-height: 1.25;
    z-index: 1;
}

.agendaic-week-event:hover {
    filter: brightness(0.95);
    box-shadow: 0 2px 8px rgba(34, 55, 84, 0.18);
    z-index: 5;
}

.agendaic-week-event-time {
    font-size: 0.66rem;
    font-weight: 700;
    opacity: 0.85;
    white-space: nowrap;
}

.agendaic-week-event-name {
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaic-week-event-fam {
    font-weight: 600;
    font-size: 0.7rem;
    opacity: 0.75;
}

.agendaic-week-event-meta {
    font-size: 0.68rem;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agendaic-week-event.is-compact {
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
}

.agendaic-week-event.is-compact .agendaic-week-event-meta {
    display: none;
}

/* Linha do "agora" (só na coluna de hoje) */
.agendaic-week-nowline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ic-primary);
    z-index: 6;
    pointer-events: none;
}

.agendaic-week-nowdot {
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: var(--ic-radius-pill);
    background: var(--ic-primary);
}

/* Dia de feriado: além da pílula, o dia inteiro fica verde claro (mês e semana).
   Declarado depois de --today/--outside e .is-today para vencer o empate de cascata. */
.agendaic-cal-cell--holiday {
    background: var(--ic-success-bg);
}

.agendaic-cal-cell--holiday:hover {
    background: color-mix(in srgb, var(--ic-success-bg) 70%, var(--ic-success-border));
}

.agendaic-week-dayhead.is-holiday,
.agendaic-week-col.is-holiday {
    background-color: var(--ic-success-bg);
}

.agendaic-week-dayhead.is-holiday:hover {
    background-color: color-mix(in srgb, var(--ic-success-bg) 70%, var(--ic-success-border));
}

@media (max-width: 991.98px) {
    .agendaic-week-head,
    .agendaic-week-body {
        grid-template-columns: 44px repeat(5, 1fr);
    }

    .agendaic-cal-legend {
        max-height: 64px;
        overflow-y: auto;
    }
}

/* ===== Editar Agendamento Modal (usado no CalendarioMensal) ===== */
.agendaic-editar-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(34, 55, 84, 0.18);
    overflow: hidden;
}

.agendaic-editar-modal-header {
    background: linear-gradient(135deg, #e8effb 0%, #dce7f8 48%, #edf3fe 100%);
    border-bottom: 1px solid #d6e0f1;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.agendaic-editar-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.agendaic-editar-modal .modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #223754;
    line-height: 1.1;
}

.agendaic-editar-modal-subtitle {
    font-size: 0.86rem;
    color: #5b6a82;
}

.agendaic-editar-modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.6rem;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.agendaic-editar-modal-header .btn-close:hover {
    opacity: 1;
    background-color: #fff;
}

.agendaic-editar-modal-body {
    padding: 1.4rem 1.5rem 1.5rem;
    background: #fff;
}

/* Reset do .card-agendamento dentro do modal — mesma estrutura semântica do
   grid, porém com largura cheia, controles maiores e respiro. */
.agendaic-editar-modal .card-agendamento {
    min-width: 0;
    max-width: none;
    width: 100%;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    overflow: visible;
    gap: 1rem;
}

.agendaic-editar-modal .card-agendamento form {
    gap: 1.1rem;
}

.agendaic-editar-modal .card-agendamento .agendaic-card-time {
    display: none;
}

.agendaic-editar-modal .card-agendamento .agendaic-card-body {
    display: block !important;
}

.agendaic-editar-modal .card-agendamento .agendaic-membro-input {
    height: 44px;
    min-height: 44px;
    font-size: 0.98rem;
    font-weight: 600;
    color: #223754;
    padding-left: 40px;
    border-radius: 9px;
    border-color: #cfdcef;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2397a6bd' d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 17px 17px;
}

.agendaic-editar-modal .card-agendamento .agendaic-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

.agendaic-editar-modal .card-agendamento .agendaic-field--full {
    grid-column: 1 / -1;
}

.agendaic-editar-modal .card-agendamento .agendaic-card-label {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6a82;
    margin-bottom: 0.1rem;
}

.agendaic-editar-modal .card-agendamento .radio {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    height: 42px;
    max-width: 240px;
    border: 1px solid #cdd9eb;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    padding: 0;
}

.agendaic-editar-modal .card-agendamento .radio label {
    flex: 1 1 0 !important;
    min-width: 0;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: #3f4f68;
    cursor: pointer;
}

.agendaic-editar-modal .card-agendamento .radio label.ml-3 {
    margin-left: 0 !important;
    border-left: 1px solid #cdd9eb;
}

.agendaic-editar-modal .card-agendamento .radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.agendaic-editar-modal .card-agendamento .radio label:has(input:checked) {
    background: #ef4365;
    color: #fff;
}

.agendaic-editar-modal .card-agendamento .radio label:has(input:disabled) {
    opacity: 0.4;
    cursor: not-allowed;
}

.agendaic-editar-modal .card-agendamento .form-control,
.agendaic-editar-modal .card-agendamento .form-select {
    min-height: 42px;
    height: 42px;
    padding: 0.45rem 0.7rem;
    font-size: 0.92rem;
    border-color: #cdd9eb;
    border-radius: 9px;
    margin: 0;
    width: 100%;
}

.agendaic-editar-modal .card-agendamento textarea.form-control {
    height: auto;
    min-height: 72px;
    resize: vertical;
    overflow: auto;
}

.agendaic-editar-modal .card-agendamento .agendaic-flags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.agendaic-editar-modal .card-agendamento .agendaic-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    border: 1px solid #cdd9eb;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #4f5f77;
    cursor: pointer;
}

.agendaic-editar-modal .card-agendamento .agendaic-flag input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.agendaic-editar-modal .card-agendamento .agendaic-flag:has(input:checked) {
    background: #ef4365;
    border-color: #ef4365;
    color: #fff;
}

.agendaic-editar-modal .card-agendamento .agendaic-card-badges {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.86rem;
    color: #4f5f77;
}

.agendaic-editar-modal .card-agendamento .cyrela .fa {
    color: #ef4365;
}

.agendaic-editar-modal .card-agendamento .tecref {
    color: #29486a;
}

@media (max-width: 767.98px) {
    .agendaic-editar-modal-header {
        padding: 0.9rem 1rem;
    }

    .agendaic-editar-modal-body {
        padding: 1rem;
    }

    .agendaic-editar-modal .card-agendamento form > .d-flex {
        flex-direction: column;
    }
}

/* ===== Dashboard - Agenda IC ===== */
.agendaic-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .agendaic-dash-grid {
        grid-template-columns: 1fr;
    }
}

.agendaic-dash-section {
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.agendaic-page .agendaic-dash-section h3.agendaic-dash-section-title,
.agendaic-dash-section > h3.agendaic-dash-section-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 1rem 0.8rem !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #223754 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    border-bottom: 1px solid #eef3fb !important;
    background: #ffffff !important;
}

.agendaic-dash-section-body {
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.agendaic-dash-subhead {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b6a82;
    margin: 0.2rem 0 -0.3rem;
}

.agendaic-dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 0.45rem;
}

.agendaic-dash-stat {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2eaf3;
    border-radius: 8px;
    padding: 0.35rem 0.55rem 0.35rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.agendaic-dash-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: #cdd9eb;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.agendaic-dash-stat-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6a82;
    line-height: 1.2;
}

.agendaic-dash-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d2a3d;
    line-height: 1.2;
}

.agendaic-dash-stat--info::before    { background: #6f9fc9; }
.agendaic-dash-stat--good::before    { background: #5fb37a; }
.agendaic-dash-stat--warn::before    { background: #d6b886; }
.agendaic-dash-stat--danger::before  { background: #c4778a; }
.agendaic-dash-stat--ic::before      { background: #ef4365; }

.agendaic-dash-stat--info    { background: #f5f9fd; }
.agendaic-dash-stat--good    { background: #f5faf7; }
.agendaic-dash-stat--warn    { background: #fbf8f2; }
.agendaic-dash-stat--danger  { background: #fbf4f6; }
.agendaic-dash-stat--ic      { background: #fff6f8; }

.agendaic-dash-chart {
    background: #ffffff;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    height: 280px;
    display: flex;
}

.agendaic-dash-chart canvas {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto;
}

.agendaic-dash-table-wrap {
    background: #ffffff;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
}

.agendaic-dash-table-wrap > table {
    width: 100%;
}

.agendaic-dash-table-wrap.is-collapsed .agendaic-dash-table tbody tr:nth-child(n+11) {
    display: none;
}

.agendaic-dash-table-toggle {
    display: block;
    width: 100%;
    border: 0;
    border-top: 1px solid #e2eaf3;
    background: #f8fbff;
    color: #29486a;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.agendaic-dash-table-toggle:hover {
    background: #eef3fb;
}

.agendaic-dash-table-toggle .agendaic-dash-toggle-less,
.agendaic-dash-table-wrap.is-collapsed .agendaic-dash-table-toggle .agendaic-dash-toggle-more {
    display: inline-flex;
    align-items: center;
}

.agendaic-dash-table-toggle .agendaic-dash-toggle-more,
.agendaic-dash-table-wrap.is-collapsed .agendaic-dash-table-toggle .agendaic-dash-toggle-less {
    display: none;
}

.agendaic-dash-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.agendaic-dash-table thead th {
    background: #f4f7fc;
    color: #2f4767;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.2rem;
    border-bottom: 1px solid #e2eaf3;
    white-space: nowrap;
    line-height: 1.15;
}

.agendaic-dash-table thead th.agendaic-dash-table-group {
    background: #eef3fb;
    font-size: 0.6rem;
    color: #4f5f77;
    padding: 0.25rem 0.2rem;
    border-bottom: 1px solid #dbe5f3;
}

.agendaic-dash-table tbody td {
    padding: 0.32rem 0.2rem;
    font-size: 0.75rem;
    color: #2f4767;
    border-top: 1px solid #f0f4fa;
    white-space: nowrap;
    text-align: center;
}

.agendaic-dash-table tbody tr:nth-child(even) td {
    background: #fafcff;
}

.agendaic-dash-table-month {
    font-weight: 600;
    text-align: left !important;
    color: #1d2a3d;
}

.agendaic-dash-table .agendaic-dash-table-sep {
    border-left: 2px solid #dbe5f3;
}

@media (max-width: 1199.98px) {
    .agendaic-dash-chart {
        height: 260px;
    }
}

/* ===== AgendaDoDiaIc (Adultos) — lista de cards ===== */
.agendaic-dia-list {
    padding: 0.5rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.agendaic-page #form-data-dia .agendaic-filter-field:first-of-type {
    min-width: 240px;
    flex: 1 1 240px;
}

.agendaic-page #filtroBusca {
    background: #fff;
    border-color: #cdd9eb;
}

.agendaic-page #form-data-dia .input-group-text {
    background: #fff;
    border-color: #cdd9eb;
    color: #4f5f77;
}

.agendaic-dia-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #6b7790;
    background: #f8fbff;
    border: 1px dashed #dbe5f3;
    border-radius: 12px;
    margin: 0.5rem;
}

.agendaic-dia-empty i {
    font-size: 1.8rem;
    color: #b6c4d8;
}

.agendaic-dia-cards {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.familia-do-dia {
    margin: 0;
}

.agendaic-dia-card {
    background: #ffffff;
    border: 1px solid #dbe5f3;
    border-left: 4px solid #cdd9eb;
    border-radius: 10px;
    padding: 0.6rem 0.85rem 0.65rem;
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.agendaic-dia-card--ok       { border-left-color: #5fb37a; background: #fbfefc; }
.agendaic-dia-card--falta    { border-left-color: #c4778a; background: #fdf6f8; }
.agendaic-dia-card--warning  { border-left-color: #d6b886; background: #fdfaf3; }
.agendaic-dia-card--pending  { border-left-color: #6f9fc9; background: #fafcff; }

.agendaic-dia-card-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.agendaic-dia-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.agendaic-dia-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1d2a3d;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.22rem 0.55rem;
    min-width: 56px;
    letter-spacing: 0.02em;
}

.agendaic-dia-fam {
    display: inline-flex;
    align-items: center;
    background: #eef3fb;
    border: 1px solid #dbe5f3;
    color: #29486a;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}

.agendaic-dia-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.agendaic-dia-membro,
.agendaic-dia-atendente {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    min-width: 0;
}

.agendaic-dia-membro strong,
.agendaic-dia-atendente strong {
    font-size: 0.95rem;
    color: #1d2a3d;
    font-weight: 600;
}

.agendaic-dia-atendente strong {
    font-size: 0.86rem;
    color: #2f4767;
    font-weight: 500;
}

.agendaic-dia-flags {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.agendaic-dia-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #eef3fb;
    color: #4f5f77;
    border: 1px solid #dbe5f3;
    font-size: 0.78rem;
}

.agendaic-dia-flag--warn {
    background: #fbf4d8;
    color: #8a6b13;
    border-color: #efe1a8;
}

.agendaic-dia-flag--cyrela {
    background: #fde7ec;
    color: #b3354d;
    border-color: #f6c1cc;
}

.agendaic-dia-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5b6a82;
    line-height: 1.1;
}

.agendaic-dia-card-body {
    display: grid;
    grid-template-columns:
        minmax(110px, max-content)
        minmax(110px, max-content)
        minmax(180px, 1.2fr)
        minmax(220px, 2fr)
        minmax(140px, 1fr);
    gap: 0.75rem;
    align-items: flex-end;
}

.agendaic-dia-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.agendaic-dia-field--justificativa {
    flex: 1 1 auto;
}

.agendaic-dia-card-body .form-control,
.agendaic-dia-card-body .form-select {
    min-height: 32px;
    height: 32px;
    font-size: 0.84rem;
    padding: 0.25rem 0.5rem;
    border-color: #cdd9eb;
    border-radius: 7px;
}

.agendaic-dia-card-body textarea.form-control {
    height: auto;
    min-height: 32px;
    resize: vertical;
}

.agendaic-dia-card-body .familia-do-dia {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
}

.agendaic-dia-card-body input[type="radio"] {
    margin: 0 0.25rem 0 0;
    accent-color: #ef4365;
}

@media (max-width: 1199.98px) {
    .agendaic-dia-card-body {
        grid-template-columns: 1fr 1fr;
    }

    .agendaic-dia-field--justificativa,
    .agendaic-dia-field--remarcacao {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .agendaic-dia-card-body {
        grid-template-columns: 1fr;
    }

    .agendaic-dia-field--justificativa,
    .agendaic-dia-field--remarcacao {
        grid-column: auto;
    }
}

/* ===== Agenda do dia — modal de remarcação ===== */
.agendaic-remarc-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #51607a;
    margin-bottom: 0.25rem;
}

.agendaic-remarc-success {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
    border-radius: 10px;
    background: var(--ic-success-bg);
    border: 1px solid var(--ic-success-border);
    color: var(--ic-success-text);
    font-size: 0.86rem;
    font-weight: 600;
}

.agendaic-remarc-success i {
    font-size: 1rem;
}

.agendaic-remarc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.75rem 1rem;
    color: #6b7790;
    background: #f8fbff;
    border: 1px dashed #dbe5f3;
    border-radius: 10px;
    text-align: center;
    font-size: 0.88rem;
}

.agendaic-remarc-empty i {
    font-size: 1.6rem;
    color: #b6c4d8;
}

.agendaic-remarc-cancel {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef2f8;
    font-size: 0.88rem;
}

.agendaic-remarc-confirm {
    margin-top: 0.85rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--ic-danger-bg);
    border: 1px solid var(--ic-danger-border);
    color: var(--ic-danger-text);
    font-size: 0.88rem;
}

/* ===== Estoque — Controle ===== */
.estoque-filter-form {
    flex-wrap: wrap;
    gap: 0.5rem 0.55rem;
}

.estoque-filter-field--date {
    min-width: 140px;
}

.estoque-filter-field--small {
    min-width: 96px;
    max-width: 110px;
}

.estoque-filter-form .form-control,
.estoque-filter-form .form-select {
    background: #fff;
    border-color: #cdd9eb;
    font-size: 0.82rem;
}

.estoque-table-region {
    padding: 0.6rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.estoque-table-wrap {
    background: #ffffff;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
    padding: 0.55rem 0.55rem 0.3rem;
    overflow: hidden;
}

.estoque-table-wrap .dataTables_wrapper {
    padding: 0.2rem 0.35rem;
    font-size: 0.82rem;
    color: #4f5f77;
}

.estoque-table-wrap .dataTables_filter input,
.estoque-table-wrap .dataTables_length select {
    border: 1px solid #cdd9eb;
    border-radius: 6px;
    padding: 0.18rem 0.5rem;
    min-height: 30px;
    background: #fff;
    font-size: 0.82rem;
}

.estoque-table-wrap .dataTables_paginate .paginate_button {
    border-radius: 6px !important;
    padding: 0.15rem 0.5rem !important;
}

.estoque-table-wrap .dataTables_paginate .paginate_button.current,
.estoque-table-wrap .dataTables_paginate .paginate_button.current:hover {
    border: 1px solid #a8c2e5 !important;
    background: #dbe9fb !important;
    color: #1f4269 !important;
}

.estoque-table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    width: 100% !important;
}

.estoque-table thead th {
    background: #eef3fb;
    color: #2f4767;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid #dbe5f3;
    border-top: 0;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.estoque-table tbody td {
    padding: 0.4rem 0.5rem;
    font-size: 0.84rem;
    color: #2f4767;
    border-top: 1px solid #f0f4fa;
    vertical-align: middle;
    white-space: nowrap;
}

.estoque-table tbody tr:nth-child(even) td {
    background: #fafcff;
}

.estoque-table tbody tr:hover td {
    background: #f1f7ff;
}

.estoque-col-produto {
    color: #1d2a3d;
    min-width: 180px;
    white-space: normal !important;
}

.estoque-col-estoque {
    background: #fef8ec;
    border-left: 2px solid #f0ddbe;
    border-right: 2px solid #f0ddbe;
}

.estoque-table tbody tr:nth-child(even) td.estoque-col-estoque {
    background: #fdf3e0;
}

.estoque-table th.estoque-table-sep,
.estoque-table td.estoque-table-sep {
    border-left: 2px solid #dbe5f3;
}

/* Chart card abaixo da tabela */
.estoque-chart-card {
    background: #ffffff;
    border: 1px solid #e2eaf3;
    border-radius: 10px;
    overflow: hidden;
}

.estoque-chart-head {
    padding: 0.7rem 1rem 0.5rem;
    border-bottom: 1px solid #eef3fb;
    background: #ffffff;
}

.estoque-chart-title {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #223754;
}

.estoque-chart-body {
    padding: 0.85rem 0.95rem;
    height: 260px;
}

.estoque-chart-body canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 991.98px) {
    .estoque-filter-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .estoque-filter-field--date,
    .estoque-filter-field--small {
        max-width: none;
    }
}

/* ===== Estoque — botões de ação na tabela ===== */
.estoque-actions-col {
    width: 110px;
    min-width: 110px;
}

.estoque-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
}

.estoque-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #4f5f77;
    background: #f4f7fc;
    border: 1px solid #dbe5f3;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    font-size: 0.82rem;
}

.estoque-action-btn:hover {
    text-decoration: none;
    color: #1d2a3d;
    background: #e6eef9;
    border-color: #b8c8e0;
}

.estoque-action-btn--edit:hover {
    color: #29486a;
    background: #dbe9fb;
    border-color: #a8c2e5;
}

.estoque-action-btn--transfer:hover {
    color: #11653a;
    background: #d8f0e2;
    border-color: #abdcbe;
}

.estoque-action-btn--delete:hover {
    color: #8a1f2f;
    background: #fde7ec;
    border-color: #f6c1cc;
}

/* Form em grid dentro dos modais de estoque */
.estoque-form {
    margin: 0;
}

.estoque-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem 1rem;
}

.estoque-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.estoque-form-field--full {
    grid-column: 1 / -1;
}

.estoque-form-field .form-label {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6a82;
    margin: 0;
}

.estoque-form-field .input-group .form-control,
.estoque-form-field .input-group .form-select {
    border-color: #cdd9eb;
    font-size: 0.88rem;
    min-height: 36px;
}

.estoque-form-field .input-group-text {
    background: #f4f7fc;
    border-color: #cdd9eb;
    color: #4f5f77;
    font-size: 0.85rem;
}

.estoque-form-field .field-validation-error,
.estoque-form-field .field-validation-valid {
    font-size: 0.78rem;
    color: #b3354d;
}

/* Bloco de info no topo do modal de transferência */
.estoque-transfer-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1rem;
    padding: 0.65rem 0.85rem;
    background: #f4f7fc;
    border: 1px solid #dbe5f3;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.86rem;
    color: #2f4767;
}

.estoque-transfer-info > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.estoque-transfer-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6a82;
}

@media (max-width: 575.98px) {
    .estoque-form-grid {
        grid-template-columns: 1fr;
    }
    .estoque-transfer-info {
        grid-template-columns: 1fr;
    }
}

/* Coluna de checkbox da EstoqueSaida */
.estoque-check-col {
    width: 36px;
    min-width: 36px;
    text-align: center !important;
}

.estoque-table tbody td:first-child {
    text-align: center;
}

.saida-checkbox {
    cursor: pointer;
    margin: 0;
}

/* ===== FamiliaKit (Saídas de Kit) ===== */
.kit-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #6b7790;
    background: #f8fbff;
    border: 1px dashed #dbe5f3;
    border-radius: 12px;
    margin: 0.6rem 0.85rem;
}

.kit-empty i {
    font-size: 1.8rem;
    color: #b6c4d8;
}

.kit-table .kit-col-familia {
    width: 180px;
    min-width: 160px;
}

.kit-table .kit-col-actions {
    width: 160px;
    min-width: 140px;
    text-align: right;
}

.kit-table tbody td {
    vertical-align: top;
}

.kit-familia-num {
    font-weight: 700;
    color: #1d2a3d;
    font-size: 0.95rem;
}

.kit-familia-polo {
    font-size: 0.78rem;
    color: #5b6a82;
}

.kit-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kit-items-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 8px;
    background: #f4f7fc;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #2f4767;
}

.kit-items-list li:hover {
    background: #eaf0f9;
}

.kit-item-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kit-item-qtd {
    flex: 0 0 auto;
    font-weight: 700;
    color: #29486a;
    background: #ffffff;
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.75rem;
}

/* Modal de Saída de Kit — estilos paralelos aos do family-page-bs5,
   pra funcionar quando o partial é carregado no modal do FamiliaKit.
   Foco em posicionamento: padding/gap generosos, painéis em card,
   grid que colapsa cedo (em <1200px o modal-xl vira modal-lg=800px e
   2 colunas ali ficam apertadas). */

/* Garante respiro nas bordas do modal — sobrescreve padding default do BS5. */
.modal.agendaic-editar-modal .modal-body.kit-saida-modal-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.kit-saida-modal-body .kit-editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.kit-saida-modal-body .kit-editor-date {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 280px;
    padding: 0.85rem 1rem;
    background: #f4f7fc;
    border: 1px solid #dbe5f3;
    border-radius: 10px;
}

.kit-saida-modal-body .kit-editor-label {
    display: block;
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a6485;
}

.kit-saida-modal-body .kit-editor-date-input {
    min-height: 38px;
    border-color: #cdd9eb;
    background: #fff;
}

.kit-saida-modal-body .kit-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.kit-saida-modal-body .kit-editor-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #d6e2f3;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.05);
    overflow: hidden;
}

.kit-saida-modal-body .kit-editor-panel-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #e3edfb;
    background: linear-gradient(135deg, #f2f7ff 0%, #e8f0fb 100%);
    font-size: 0.95rem;
    font-weight: 700;
    color: #2a4d79;
    line-height: 1.2;
}

.kit-saida-modal-body .kit-editor-panel-title i {
    color: #4a7ab8 !important;
    font-size: 0.95rem;
}

.kit-saida-modal-body .kit-editor-panel-body {
    padding: 1rem;
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.kit-saida-modal-body .kit-product-row {
    padding: 0.85rem 0.95rem;
    border: 1px solid #e3ebf9;
    border-radius: 10px;
    background: #ffffff;
    margin: 0 !important;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kit-saida-modal-body .kit-product-row:hover {
    border-color: #b6cdec;
    background: #fbfdff;
}

.kit-saida-modal-body .kit-product-row[data-kitproduto-exists="false"] {
    background: #f7fbff;
    border-style: dashed;
    border-color: #c4d6f1;
}

.kit-saida-modal-body .kit-product-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6a82;
}

.kit-saida-modal-body .kit-product-row .form-control {
    border-color: #cdd9eb;
    font-size: 0.9rem;
    min-height: 36px;
}

.kit-saida-modal-body .kit-product-action {
    min-width: 44px;
    height: 36px;
    padding: 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
}

.kit-saida-modal-body .kit-history-list,
.family-page-bs5 .kit-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kit-saida-modal-body .kit-history-item,
.family-page-bs5 .kit-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem 0.55rem 0.75rem;
    border: 1px solid #e3ebf9;
    border-left: 3px solid #c4d4ea;
    border-radius: 8px;
    background: #fbfdff;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.kit-saida-modal-body .kit-history-item:hover,
.family-page-bs5 .kit-history-item:hover {
    background: #f0f5fc;
    border-left-color: #5b88c1;
}

.kit-saida-modal-body .kit-history-info,
.family-page-bs5 .kit-history-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.kit-saida-modal-body .kit-history-top,
.family-page-bs5 .kit-history-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kit-saida-modal-body .kit-history-date,
.family-page-bs5 .kit-history-date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #3f6392;
    background: #e7eef9;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.kit-saida-modal-body .kit-history-date i,
.family-page-bs5 .kit-history-date i {
    color: #3f6392 !important;
    font-size: 0.72rem;
}

.kit-saida-modal-body .kit-history-qtd,
.family-page-bs5 .kit-history-qtd {
    font-size: 0.72rem;
    font-weight: 700;
    color: #29486a;
    background: #ffffff;
    border: 1px solid #d2e1f6;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.kit-saida-modal-body .kit-history-name,
.family-page-bs5 .kit-history-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1d2a3d;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kit-saida-modal-body .kit-history-restore,
.family-page-bs5 .kit-history-restore {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #abdcbe;
    background: #e8f6ee;
    color: #11653a;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kit-saida-modal-body .kit-history-restore:hover,
.family-page-bs5 .kit-history-restore:hover {
    background: #11653a;
    color: #fff;
    border-color: #11653a;
}

.kit-saida-modal-body .kit-history-restore i,
.family-page-bs5 .kit-history-restore i {
    color: inherit !important;
    font-size: 0.85rem;
}

.kit-saida-modal-body .kit-history-empty,
.family-page-bs5 .kit-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 1.5rem 1rem;
    border-radius: 10px;
    background: #f7fbff;
    border: 1px dashed #d2e1f6;
    color: #6b7790;
    font-size: 0.84rem;
    text-align: center;
}

.kit-saida-modal-body .kit-history-empty i,
.family-page-bs5 .kit-history-empty i {
    font-size: 1.6rem;
    color: #b6c4d8 !important;
}

@media (max-width: 1199.98px) {
    .kit-saida-modal-body .kit-editor-grid {
        grid-template-columns: 1fr;
    }
    .kit-saida-modal-body .kit-editor-date {
        max-width: 100%;
    }
}

/* ===== Tecnico (Técnicos) ===== */
.tecnico-sort-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    background: #f4f7fc;
    border-bottom: 1px solid #e2eaf3;
}

.tecnico-sort-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b6a82;
    margin-right: 0.25rem;
}

.sort-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #ffffff;
    border: 1px solid #dbe5f3;
    color: #29486a;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sort-chip:hover {
    background: #eef4ff;
    border-color: #b8c8e0;
}

.sort-chip.is-active {
    background: #ef4365;
    border-color: #ef4365;
    color: #fff;
}

.sort-chip.is-active:hover {
    background: #d63955;
    border-color: #d63955;
}

.sort-chip-icon {
    font-size: 0.7rem;
    opacity: 0.7;
}

.sort-chip.is-active .sort-chip-icon {
    color: #fff !important;
    opacity: 1;
}

.sort-chip.is-asc .sort-chip-icon::before { content: "\f0d8"; }
.sort-chip.is-desc .sort-chip-icon::before { content: "\f0d7"; }

.technician-cards-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem 1rem;
}

.technician-card {
    background: #ffffff;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 1px 2px rgba(34, 55, 84, 0.05);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.technician-card:hover {
    box-shadow: 0 3px 10px rgba(34, 55, 84, 0.1);
    border-color: #c4d4ea;
}

.technician-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.technician-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4365 0%, #c4395b 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(239, 67, 101, 0.25);
}

.technician-id {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.technician-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1d2a3d;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technician-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.technician-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4f5f77;
    background: #eef3fb;
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.technician-meta-pill i {
    color: #4f5f77 !important;
    font-size: 0.7rem;
}

.technician-card-header .view-details {
    flex: 0 0 auto;
}

.technician-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.45rem;
}

.technician-stat {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2eaf3;
    border-radius: 8px;
    padding: 0.35rem 0.55rem 0.35rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.technician-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: #cdd9eb;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.technician-stat-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6a82;
    line-height: 1.2;
}

.technician-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d2a3d;
    line-height: 1.2;
}

.technician-stat--info::before    { background: #6f9fc9; }
.technician-stat--good::before    { background: #5fb37a; }
.technician-stat--warn::before    { background: #d6b886; }
.technician-stat--danger::before  { background: #c4778a; }
.technician-stat--neutral::before { background: #b8c4d6; }
.technician-stat--date::before    { background: #c8b4d8; }

.technician-stat--info    { background: #f5f9fd; }
.technician-stat--good    { background: #f5faf7; }
.technician-stat--warn    { background: #fbf8f2; }
.technician-stat--danger  { background: #fbf4f6; }
.technician-stat--date    { background: #faf7fc; }

.technician-stat--date .technician-stat-value {
    font-size: 0.86rem;
    color: #2f4767;
}

/* Modal de detalhes do técnico */
.tecnico-detail-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.tecnico-demandas-table thead th {
    background: #f4f7fc;
    color: #2f4767;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid #e2eaf3;
    white-space: nowrap;
}

.tecnico-demandas-table tbody td {
    padding: 0.5rem;
    font-size: 0.84rem;
    color: #2f4767;
    border-top: 1px solid #f0f4fa;
    vertical-align: middle;
}

.tecnico-demandas-table tbody tr:nth-child(even) td {
    background: #fafcff;
}

.tecnico-demanda-obs {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tecnico-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
    white-space: nowrap;
}

.tecnico-status--good    { background: #e5f7ed; border-color: #c6ebd7; color: #11653a; }
.tecnico-status--warn    { background: #fff4e3; border-color: #f0ddbe; color: #8a5b13; }
.tecnico-status--danger  { background: #fde7ec; border-color: #f6c1cc; color: #8a1f2f; }
.tecnico-status--neutral { background: #eef3fb; border-color: #dbe5f3; color: #4f5f77; }

@media (max-width: 767.98px) {
    .modal.agendaic-editar-modal .modal-body.kit-saida-modal-body {
        padding: 1.1rem 1.15rem 1.25rem;
    }
    .kit-saida-modal-body .kit-editor-panel-body {
        max-height: 280px;
    }
}

/* Switch "Inativos" no filtro da EstoqueSaida */
.estoque-inativo-field {
    min-width: 110px;
    max-width: 130px;
}

.estoque-inativo-field .form-check.form-switch {
    margin: 0;
    padding-top: 2px;
}

.estoque-inativo-field .form-check-input {
    cursor: pointer;
    width: 2.25em;
    height: 1.15em;
    margin-top: 0.18em;
}

.estoque-inativo-field .form-check-input:checked {
    background-color: #ef4365;
    border-color: #ef4365;
}

.estoque-inativo-field .form-check-label {
    font-size: 0.8rem;
    color: #4f5f77;
    cursor: pointer;
}

/* Destino dinâmico (Família/Hospital/Interno + observação) em 2-col */
.estoque-destino-grid,
.estoque-tipo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem 1rem;
}

@media (max-width: 575.98px) {
    .estoque-destino-grid,
    .estoque-tipo-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Design tokens IC (catalogados no Design System: /DesignSystem)
   Valores canônicos extraídos do visual vigente. Novos estilos
   devem referenciar estes tokens em vez de hex soltos.
   ============================================================ */
:root {
    /* Cor de marca / ação primária */
    --ic-primary: #ef4365;
    --ic-primary-soft: rgba(239, 67, 101, 0.16);

    /* Tinta (textos) */
    --ic-ink: #223754;
    --ic-ink-soft: #2f4767;
    --ic-ink-muted: #495e7c;
    --ic-text-secondary: #5c6675;

    /* Superfícies e bordas */
    --ic-border: #dbe5f3;
    --ic-border-strong: #d6e0f1;
    --ic-bg-soft: #eef4ff;
    --ic-bg-head: #eef3fb;
    --ic-bg-page: #f6f6f6;
    --ic-bg-surface: #f4f6fb; /* superfície "afundada": aterra cards brancos p/ não flutuarem no branco */
    --ic-hero-gradient: linear-gradient(135deg, #e8effb 0%, #dce7f8 48%, #edf3fe 100%);

    /* Estados (badges, KPIs, status) */
    --ic-success-bg: #e5f7ed;
    --ic-success-border: #c6ebd7;
    --ic-success-text: #11653a;
    --ic-warn-bg: #fff4e3;
    --ic-warn-border: #f0ddbe;
    --ic-warn-text: #8a5b13;
    --ic-danger-bg: #ffefec;
    --ic-danger-border: #f7d1ca;
    --ic-danger-text: #8e3f2e;

    /* Acentos de cards/stats (barras laterais) */
    --ic-accent-info: #6f9fc9;
    --ic-accent-good: #5fb37a;
    --ic-accent-warn: #d6b886;
    --ic-accent-danger: #c4778a;
    --ic-accent-neutral: #b8c4d6;
    --ic-accent-date: #c8b4d8;

    /* Raios */
    --ic-radius-sm: 6px;
    --ic-radius-md: 10px;
    --ic-radius-lg: 14px;
    --ic-radius-pill: 999px;

    /* Sombras */
    --ic-shadow-sm: 0 1px 2px rgba(34, 55, 84, 0.06);
    --ic-shadow-md: 0 8px 20px rgba(31, 56, 89, 0.08);
    --ic-shadow-lg: 0 12px 28px rgba(29, 50, 81, 0.12);

    /* Scrollbar */
    --ic-scroll-thumb: #e18ba0;        /* rosa médio (repouso) — visível sem gritar */
    --ic-scroll-thumb-hover: #ef4365;  /* rosa IC (hover) */
}

/* ============================================================
   Scrollbar IC — canônica. Trilho transparente + polegar em pílula
   rosa suave (rosa IC no hover), fino, sem "encher" o canto. Trilho
   transparente evita o corte nos cantos arredondados do painel. O
   gutter estável (no .tela-principal, scroller real do app shell)
   impede a página de "pular" ao aparecer a barra. Também disponível como
   utilitário .ic-scroll / .ic-scroll--slim. Ver DesignSystem #sg-scrollbar.
   ============================================================ */

/* Firefox — scrollbar-color/width são herdados, logo globais a partir do html */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--ic-scroll-thumb) transparent;
}

.ic-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--ic-scroll-thumb) transparent;
}

/* WebKit (Chrome, Edge, Safari) — global */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--ic-scroll-thumb);
    border: 2px solid transparent;   /* respiro transparente → pílula fina flutuante */
    border-radius: var(--ic-radius-pill);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ic-scroll-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Variante fina para áreas compactas (dropdowns, listas internas, modais) */
.ic-scroll--slim::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ic-scroll--slim::-webkit-scrollbar-thumb {
    border-width: 2px;
}

/* Toast global (renderizado por Views/Shared/_ToastMessage.cshtml) */
.ic-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 3000;
    color: #fff;
    border-radius: 6px;
    padding: 12px 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    max-width: 360px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .25s ease;
}

.ic-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.ic-toast.toast-success {
    background: #2d7d46;
}

.ic-toast.toast-error {
    background: #c0392b;
}

/* Switch canônico IC — todo toggle novo usa .ic-switch envolvendo o
   form-check form-switch (estado ligado em vermelho IC). O switch azul
   padrão do Bootstrap não deve ser usado nas telas do IC. */
.ic-switch .form-check-input {
    cursor: pointer;
}

.ic-switch .form-check-input:checked {
    background-color: #ef4365;
    border-color: #ef4365;
}

.ic-switch .form-check-input:focus {
    border-color: #ef4365;
    box-shadow: 0 0 0 2px rgba(239, 67, 101, 0.16);
}

.ic-switch .form-check-label {
    cursor: pointer;
}

/* ============================================================
   Correções de telas de Atendimento (Familia > Atendimentos)
   Catalogadas no Design System (/DesignSystem).
   ============================================================ */

/* Ícones dos botões "Editar"/"Ver Triagem" na nav lateral: os botões são
   claros nesse contexto, então o ícone segue a cor do texto (anula o
   .btn-ic .fa { color: #fff !important } global). */
.family-attendance-nav-card .sidebar-nav h5 a.btn-ic .fa,
.family-closure-nav-card .sidebar-nav h5 a.btn-ic .fa,
.tr-reference-sidebar-card .sidebar-nav h5 a.btn-ic .fa {
    color: inherit !important;
}

/* Hover nos itens (crianças/componentes) do menu lateral de atendimento */
.family-attendance-nav-card .panel .panel-heading {
    transition: background-color 0.15s ease;
}

.family-attendance-nav-card .panel .panel-heading:hover {
    background: #e2ecfa;
}

.family-attendance-nav-card .panel .panel-heading .panel-title > a {
    cursor: pointer;
}

.family-attendance-nav-card .panel .panel-heading .panel-title > a:hover {
    color: #ef4365;
}

/* Link de histórico ("Data" + relógio) — padrão canônico .ic-history-link.
   O seletor por atributo cobre o markup legado dos atendimentos sem editar
   cada partial. */
.ic-history-link,
.family-attendance-content-card a[data-toggle="collapse"],
.family-attendance-content-card a[data-bs-toggle="collapse"] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #d4e0f1;
    background: #eef4ff;
    color: #38506f;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ic-history-link:hover,
.family-attendance-content-card a[data-toggle="collapse"]:hover,
.family-attendance-content-card a[data-bs-toggle="collapse"]:hover {
    background: #e2ecfd;
    border-color: #b8c8e0;
    color: #2d4a6e;
}

.ic-history-link label,
.family-attendance-content-card a[data-toggle="collapse"] label,
.family-attendance-content-card a[data-bs-toggle="collapse"] label {
    margin: 0;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.ic-history-link .fa,
.family-attendance-content-card a[data-toggle="collapse"] .fa,
.family-attendance-content-card a[data-bs-toggle="collapse"] .fa {
    color: inherit;
    font-size: 0.78rem;
}

/* Abas legadas (Adultos/Crianças/membros) nos atendimentos: markup BS3
   (li > a sem .nav-link). O BS5 move .active para o <a>; cobrimos os dois. */
.family-attendance-content-card .nav-tabs {
    gap: 3px;
    padding: 0 4px;
}

.family-attendance-content-card .nav-tabs > li > a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    background: #f7fafe;
    border: 1px solid transparent;
    margin-bottom: -1px;
}

.family-attendance-content-card .nav-tabs > li > a:hover {
    background: #e9f0fb;
    color: #223754;
}

.family-attendance-content-card .nav-tabs > li > a.active,
.family-attendance-content-card .nav-tabs > li.active > a {
    color: #223754;
    background: #eef3fb;
    border: 1px solid #dce5f3;
    border-bottom-color: transparent;
    font-weight: 600;
}

/* Radios Sim/Não — padrão canônico .ic-radio. O helper
   InstitutoCRadioButtonFor gera div.radio > label > input + texto;
   o seletor div.radio aplica o padrão a todo markup existente. */
.ic-radio,
div.radio {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin: 0;
    padding: 0.1rem 0;
}

.ic-radio label,
div.radio label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.2;
    color: #2f3f53;
    cursor: pointer;
}

.ic-radio label.ml-3,
div.radio label.ml-3 {
    margin-left: 0 !important;
}

.ic-radio input[type="radio"],
div.radio input[type="radio"] {
    accent-color: #ef4365;
    width: 15px;
    height: 15px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

.ic-radio input[type="radio"]:disabled,
div.radio input[type="radio"]:disabled {
    cursor: not-allowed;
}

.ic-radio label:has(input[type="radio"]:disabled),
div.radio label:has(input[type="radio"]:disabled) {
    color: #93a0b3;
    cursor: not-allowed;
}

/* Radios soltos legados (fora de div.radio) também ficam no vermelho IC */
input[type="radio"]:not(.form-check-input) {
    accent-color: #ef4365;
}

/* Botões de ação em linha incremental (Excluir/Acatar demanda): o markup
   legado usa .form-control junto com .btn (hack BS3 de largura), o que
   esmaga e descaracteriza o botão. Aqui o botão volta a ser um botão. */
.family-attendance-content-card .btn.form-control,
.tr-reference-page .btn.form-control,
.family-closure-page .btn.form-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 96px;
    min-height: 0;
    white-space: nowrap;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
}

.family-attendance-content-card .btn.form-control:hover,
.tr-reference-page .btn.form-control:hover,
.family-closure-page .btn.form-control:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

/* ===== Indicadores (Relatório) ===== */
.indicadores-page .indicadores-subtitle { font-size: 0.82rem; color: #6c7788; margin-top: 2px; }

/* Filtro: input de número de família compacto (não precisa ser largo) */
.indicadores-page #form-drop .twitter-typeahead,
.indicadores-page #form-drop #NumeroFamilia { width: 160px !important; max-width: 160px; }
.indicadores-page #form-drop .twitter-typeahead #NumeroFamilia { width: 100% !important; }

/* A lista de sugestões do autocomplete (.tt-menu) é position:absolute e cai ABAIXO
   do input. O hero desta tela tinha overflow:hidden no .triagemic-toolbar (regra
   app-shared abaixo, só p/ arredondar — sem fundo/borda próprios) e no .card-body
   (.card.shadow-sm .card-body, Site.css:1158), o que RECORTAVA o dropdown dentro do
   card ("a lista só fica dentro do card-body"). Liberamos o overflow apenas nesta
   página para a lista transbordar o card. O #dropdowns/.triagemic-hero-actions já
   têm z-index:1100, então a lista fica acima do card de conteúdo/tabela abaixo. */
.indicadores-page .triagemic-hero .triagemic-toolbar,
.indicadores-page .triagemic-hero .card-body {
    overflow: visible;
}

/* A lista (.tt-menu) fica in-flow dentro de .tela-principal (que é overflow:auto,
   minimocss:84). Para uma lista longa (limit:15) num viewport baixo não ser
   recortada pelo scroller da página, limitamos a altura do menu com scroll interno. */
.indicadores-page .tt-menu {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== Dashboard Gerencial — refino do visual (filtros + cards) ===== */
/* Filtros em pílula, compactos e na mesma altura dos botões (~31px), centralizados.
   Antes tinham font 1.1rem / min-width 200px / margin-right 1rem (Site.css), o que
   deixava mais altos que o btn-sm e desalinhados. */
.dashboard-gerencial-page .clean-select,
.dashboard-gerencial-page .clean-input {
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 0.32rem 0.9rem;
    min-width: 0;
    margin-right: 0;
    box-shadow: 0 1px 2px rgba(20, 40, 80, 0.06);
}
.dashboard-gerencial-page .clean-select { padding-right: 1.7rem; min-width: 142px; }
.dashboard-gerencial-page .clean-input { min-width: 132px; }
.dashboard-gerencial-page .select-wrap::after { right: 0.75rem; font-size: 0.72rem; }
.dashboard-gerencial-page .triagemic-hero-actions .btn { border-radius: 10px; }

/* Cards de gráfico: mais compactos, título menor e borda suave (como no visual antigo).
   As variáveis --dash-* e o tamanho do canvas (JS) foram reduzidos juntos p/ não cortar. */
.dashboard-gerencial-page {
    --dash-card-height: 225px;
    --dash-title-height: 30px;
}
.dashboard-gerencial-page .card .card-title { font-size: 0.95rem; }
.dashboard-gerencial-page .chart-metric { border: 1px solid #e4ebf5; }
.dashboard-gerencial-page .triagemic-toolbar-left h2 { white-space: nowrap; }

/* ===== Atribuições — hero (filtros) + cards de demanda compactos =====
   O BS5 deixa o conteúdo em 1rem (16px) e labels sem bold; aqui voltamos ao
   compacto + negrito do visual antigo, escopado nesta tela. */
.atribuicoes-page .atribuicoes-hero-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1.6rem; }
.atribuicoes-page .atribuicoes-switches { display: flex; align-items: center; gap: 0.4rem 1.3rem; flex-wrap: wrap; }
/* toggle: switch + label alinhados por flex (sem o float/padding negativo do form-switch) */
.atribuicoes-page .atribuicoes-switches .form-check { display: flex; align-items: center; gap: 0.5rem; min-height: 0; margin: 0; padding-left: 0; }
.atribuicoes-page .atribuicoes-switches .form-check-input { float: none; margin: 0; flex: 0 0 auto; width: 2.3em; height: 1.15em; }
.atribuicoes-page .atribuicoes-switches .form-check-label { margin: 0; font-size: 0.85rem; font-weight: 600; color: #51607a; }
.atribuicoes-page .atribuicoes-busca { display: flex; align-items: center; gap: 0.5rem; }
.atribuicoes-page .atribuicoes-busca-label { margin: 0; font-size: 0.85rem; font-weight: 600; color: #51607a; }
.atribuicoes-page #filtroAtribuicoes { max-width: 300px; }
.atribuicoes-page .atribuicoes-hero-actions .atribuicoes-count { flex-basis: 100%; text-align: right; color: #5f6b74; margin-top: 1px; }
/* A lista de cards é uma .row direta no shell; a margem negativa -0.75rem da row
   excede o padding 0.65rem do .triagemic-page-shell e estoura ~0.2rem -> scroll
   horizontal dentro do .tela-principal (overflow-x:auto). Zeramos a margem. */
.atribuicoes-page #listaAtribuicoes { margin-left: 0; margin-right: 0; }

.atribuicoes-page .atribuicao-item label { font-weight: 600; font-size: 0.8rem; margin-bottom: 2px; color: #344054; }
.atribuicoes-page .atribuicao-item .form-control,
.atribuicoes-page .atribuicao-item select.form-control {
    font-size: 0.82rem;
    padding: 0.28rem 0.55rem;
    min-height: 0;
}
.atribuicoes-page .atribuicao-item textarea.form-control { padding: 0.35rem 0.55rem; }
.atribuicoes-page .atribuicao-item .b-shadow.p-4 { padding: 1rem !important; }
.atribuicoes-page .atribuicao-item .main-text { font-size: 0.82rem; margin-top: 0.15rem !important; }
.atribuicoes-page .atribuicao-item .mb-3 { margin-bottom: 0.55rem !important; }
/* selects do card voltam a ter a seta (BS5 não mostra em select.form-control) */
.atribuicoes-page .atribuicao-item select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 13px 11px;
    padding-right: 1.7rem;
}

/* Abas no padrão IC (vermelho no ativo; remove o azul/clipping do BS5 default) */
.indicadores-page .nav-tabs { border-bottom: 1px solid #dbe5f3; gap: 2px; flex-wrap: wrap; }
.indicadores-page .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 0.4rem 0.95rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #51607a;
    background: transparent;
    margin-bottom: -1px;
}
.indicadores-page .nav-tabs .nav-link:hover { color: #ef4365; background: #f6f9ff; border-color: transparent; }
.indicadores-page .nav-tabs .nav-link.active { color: #ef4365; background: #fff; border-color: #dbe5f3 #dbe5f3 #fff; }

/* Toolbar + busca da tabela */
.indicadores-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0.1rem 0 0.7rem; }
.indicadores-search { max-width: 340px; }

/* Filtros dentro do hero: alinhados à direita, na altura do título */
.triagemic-hero .indicadores-hero-filtros { margin: 0; justify-content: flex-end; }

/* Título de bloco/seção dentro de uma aba de indicadores */
.indicadores-page .indicadores-secao-titulo { font-size: 0.95rem; font-weight: 700; color: #29486a; margin: 0.25rem 0 0.55rem; }
.indicadores-page .indicadores-secao-titulo + .text-muted { margin-top: -0.35rem; }

/* Ícones de ordenação do DataTables via Font Awesome (o dataTables.bootstrap
   aponta para .png inexistentes no projeto, que apareciam quebrados). */
.indicadores-page table.dataTable thead th.sorting,
.indicadores-page table.dataTable thead th.sorting_asc,
.indicadores-page table.dataTable thead th.sorting_desc {
    background-image: none !important;
    cursor: pointer;
    position: relative;
    padding-right: 1.4rem !important;
}
.indicadores-page table.dataTable thead th.sorting::after,
.indicadores-page table.dataTable thead th.sorting_asc::after,
.indicadores-page table.dataTable thead th.sorting_desc::after {
    font-family: FontAwesome;
    font-size: 0.78rem;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c84a6;
}
.indicadores-page table.dataTable thead th.sorting::after { content: "\f0dc"; opacity: 0.5; }
.indicadores-page table.dataTable thead th.sorting_asc::after { content: "\f0de"; }
.indicadores-page table.dataTable thead th.sorting_desc::after { content: "\f0dd"; }

/* Tabela de indicadores: cabeçalho fixo, seções no tom IC, fonte compacta */
.indicadores-table-wrap { max-height: calc(100vh - 330px); overflow: auto; border: 1px solid #dbe5f3; border-radius: 10px; }
.indicadores-table { font-size: 0.84rem; margin-bottom: 0; }
.indicadores-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #e9f0fb; color: #344e71; font-weight: 700;
    border-bottom: 1px solid #ccdbee;
}
.indicadores-table .indicadores-group td {
    background: #eef3fb; color: #223754; font-weight: 700;
    border-top: 2px solid #d4e0f1;
}

/* Gráficos: cards uniformes em grade 2 colunas */
.indicadores-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 991.98px) { .indicadores-chart-grid { grid-template-columns: 1fr; } }
/* Variante de 3 colunas (degrada para 2 e depois 1 em telas menores) */
.indicadores-chart-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .indicadores-chart-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .indicadores-chart-grid--3 { grid-template-columns: 1fr; } }
.indicadores-chart-card {
    border: 1px solid #dbe5f3; border-radius: 10px; background: #fff;
    display: flex; flex-direction: column; overflow: hidden;
}
.indicadores-chart-card .indicadores-chart-head {
    padding: 8px 12px; border-bottom: 1px solid #eef2f8;
    font-weight: 600; color: #29486a; font-size: 0.88rem; background: #f7faff;
}
.indicadores-chart-card .indicadores-chart-body { padding: 12px; position: relative; flex: 1 1 auto; min-height: 0; }
.indicadores-chart-card canvas { width: 100% !important; max-height: 300px; }
.indicadores-chart-card .indicadores-chart-foot {
    padding: 7px 12px;
    border-top: 1px solid #eef2f8;
    background: #f7faff;
    font-size: 0.82rem;
    color: #51607a;
}
.indicadores-chart-card .indicadores-chart-foot strong { color: #29486a; }

/* Demandas: grade responsiva (sunbursts ECharts em cards) */
.indicadores-page .indicadores-demandas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; }
.indicadores-page .indicadores-demandas-grid .chart-container { min-height: 440px; }

/* ===== Autocomplete (typeahead.js) — robustez do campo IC =====
   O typeahead embrulha o <input> num .twitter-typeahead (inline-block por
   padrão) e clona um .tt-hint absoluto. Em containers flex/grid esse wrapper
   colapsava e CORTAVA o texto do input. Garantimos que o wrapper se comporte
   como o próprio campo (bloco, largura cheia) em qualquer layout, e que o
   input/hint preencham a largura mantendo a altura do form-control. */
.twitter-typeahead {
    display: block;
    width: 100%;
}
.twitter-typeahead .tt-input,
.twitter-typeahead .tt-hint {
    width: 100%;
    box-sizing: border-box;
    /* Defesa contra CORTE vertical dos dígitos: deixamos o line-height acompanhar
       o tamanho real renderizado da fonte (em vez de um valor fixo em px). Assim, se
       o navegador renderizar a fonte MAIOR do que o CSS pede (zoom, "tamanho mínimo
       de fonte" do Chrome, extensão que injeta CSS, ou métrica de fallback do
       Open Sans), o campo cresce em vez de cortar topo/baixo do texto. Em uso normal
       (fonte 14px) o campo continua nos mesmos 31px do form-control-sm. */
    line-height: normal;
}

/* ===== Dados clínicos — linhas incrementais =====================================
   Diagnósticos, Exames, Acompanhamentos Médicos, Medicamentos e Dependência Química.
   Partials compartilhados por AtendimentoSaude/Psico/PsicoInfantil/Nutricao(1..3).
   Problema legado: os campos ficavam em .col-* DENTRO de um <form> dentro do .row;
   no BS5 os .col-* precisam de um pai flex (.row) — como o pai imediato virou o
   <form>, as colunas perdiam o contexto flex e EMPILHAVAM. Aqui cada linha vira um
   card claro (.ic-clinico-row) com layout flex próprio; o <form> interno usa
   display:contents para "desaparecer" da caixa e deixar os campos participarem do
   flex do card. Botões voltam a ser botões do IC (sem o hack form-control+btn). */
.ic-clinico { margin-bottom: .25rem; }

.ic-clinico-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ic-ink);
    margin: 0 0 .75rem;
}
.ic-clinico-title > i { color: var(--ic-primary); font-size: .9em; }

.ic-clinico-rows { display: flex; flex-direction: column; gap: .6rem; }

.ic-clinico-empty {
    padding: .55rem .75rem;
    font-size: .85rem;
    font-style: italic;
    color: var(--ic-ink-muted);
    background: var(--ic-bg-soft);
    border: 1px dashed var(--ic-border);
    border-radius: var(--ic-radius-sm);
}

/* Cada item incremental é um card claro com layout flex responsivo. */
.ic-clinico-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem 1rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
    box-shadow: var(--ic-shadow-sm);
}
/* O <form> some da caixa; seus campos passam a ser filhos flex do card. */
.ic-clinico-row > form { display: contents; }

.ic-clinico-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 200px;
}
.ic-clinico-field > label {
    margin-bottom: .2rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ic-ink-muted);
}
.ic-clinico-field--date { flex: 0 0 150px; }
.ic-clinico-field--sm   { flex: 0 0 140px; }
.ic-clinico-field--grow { flex: 3 1 260px; }
/* radios Sim/Não e selects herdam o alinhamento do campo */
.ic-clinico-field .radio { margin: 0; }
.ic-clinico-field .radio label { margin-bottom: 0; }

/* Coluna de ação (Excluir) empurrada para o fim da linha. */
.ic-clinico-row-actions {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    padding-bottom: 1px;
}

/* Exames: campo do anexo. O bloco de upload usa o seletor canônico .ic-file-upload
   (ver #sg-forms) — nada de <img> cru p/ evitar "png quebrado". */
.ic-clinico-file-field { flex: 1 1 340px; }
.ic-clinico-file-field .ic-file-upload { margin: 0; }

/* Estado "com arquivo": chip no visual novo (cadastros básicos) + lixinho. */
.ic-clinico-attach { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ic-clinico-attach-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .34rem .7rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--ic-ink-soft);
    background: var(--ic-bg-soft);
    border: 1px solid var(--ic-border);
    border-radius: 8px;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.ic-clinico-attach-link:hover {
    color: var(--ic-primary);
    border-color: var(--ic-primary);
    background: var(--ic-primary-soft);
}
.ic-clinico-attach-link .fa { font-size: 1rem; color: inherit; }

/* Ação de linha (Excluir) reusa o botão-ícone do visual novo (.usuario-card-action). */
.ic-clinico-row-actions .usuario-card-action { flex: 0 0 auto; }

/* Rodapé da seção: botão "Novo". */
.ic-clinico-actions { margin-top: .7rem; }

/* ============================================================
   Campos pendentes (telas de atendimento 3)
   Painel lateral + lista de bloqueio do modal "Encerrar atendimento".
   A varredura é única (AppShared.varreCamposPendentes, app-shared.js) e
   as duas superfícies renderizam com estas mesmas classes.
   Catalogado no Design System (#sg-campos-pendentes).
   ============================================================ */
.ic-campos-pendentes-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 12px;
}

.ic-campos-pendentes-lista { font-size: .85em; }

.ic-campos-pendentes-count {
    background: var(--ic-primary);
    color: #fff;
}

.ic-campos-pendentes-count.ic-badge-ok { background: var(--ic-success-text); }

.ic-campos-pendentes-ok { color: var(--ic-success-text); }

.ic-campos-pendentes-secao { margin-bottom: 8px; }

.ic-campos-pendentes-titulo {
    font-weight: 600;
    color: var(--ic-ink);
}

.ic-campos-pendentes-qtd {
    font-weight: 400;
    color: var(--ic-text-secondary);
}

.ic-campos-pendentes-secao ul {
    padding-left: 18px;
    margin: 4px 0;
}

/* Botão barrado por regra de tela (ex.: encerrar antes de ver as demandas).
   Não usar .disabled do BS5 aqui: ela zera o pointer-events e o clique fica
   mudo — o usuário não descobre por que o botão não faz nada. Com
   aria-disabled o botão continua clicável e o próprio handler explica. */
.btn[aria-disabled="true"] { opacity: .65; }

.ic-campos-pendentes { margin-top: 15px; }

/* ============================================================
   Atendimento em Grupo (IC) — multi-seleção em chips, lista de
   anexos e linha incremental de família participante.
   Views/GruposIc/Form.cshtml · Views/GruposIc/Index.cshtml
   ============================================================ */
.ic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ic-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: var(--ic-radius-pill);
    background: var(--ic-bg-soft);
    border: 1px solid var(--ic-border);
    color: var(--ic-ink-soft);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.ic-chip:hover {
    border-color: var(--ic-primary);
    color: var(--ic-primary);
}

.ic-chip i {
    font-size: 0.72rem;
    opacity: 0.65;
}

.ic-anexos {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ic-anexo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-sm);
    background: #fff;
}

.ic-anexo .ic-file-download {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fila de anexos ainda não enviados (ver app-shared.js, bloco ic-file-upload).
   Some sozinha quando vazia — o [hidden] é controlado pelo JS. */
.ic-anexos-pendentes {
    margin-top: 0.4rem;
}

.ic-anexo--pendente {
    background: var(--ic-bg-soft);
    border-style: dashed;
}

.ic-anexo-nome {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
    font-size: 0.86rem;
    color: var(--ic-ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-anexo-nome i {
    flex: 0 0 auto;
    font-size: 0.78rem;
    opacity: 0.65;
}

.ic-anexo-nome > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Grupo × família: modal "Novo Grupo" (escolher grupo pela data),
   painel de informações e atalho para as demandas da família.
   ============================================================ */
.grupoic-selecao-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.grupoic-selecao-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991px) {
    .grupoic-selecao-split { grid-template-columns: minmax(0, 1fr); }
}

.grupoic-selecao-lista {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 460px;
    overflow-y: auto;
}

.grupoic-selecao-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    text-align: left;
    background: #fff;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.grupoic-selecao-item:hover { border-color: var(--ic-primary); background: var(--ic-bg-soft); }
.grupoic-selecao-item.is-ativo { border-color: var(--ic-primary); background: var(--ic-primary-soft); }
.grupoic-selecao-item.is-incluida { opacity: 0.75; }

.grupoic-selecao-data {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ic-ink);
}

.grupoic-selecao-corpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
}

.grupoic-selecao-corpo strong,
.grupoic-selecao-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupoic-selecao-sub {
    font-size: 0.76rem;
    color: var(--ic-ink-muted);
}

.grupoic-selecao-tags { flex: 0 0 auto; }

.grupoic-selecao-info {
    padding: 0.9rem 1rem;
    background: var(--ic-bg-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md);
}

.grupoic-selecao-carregando {
    font-size: 0.86rem;
    color: var(--ic-ink-muted);
}

.grupoic-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.grupoic-info-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ic-ink-muted);
}

.grupoic-info-title { margin: 0.15rem 0 0; font-size: 1.02rem; font-weight: 700; }

.grupoic-info-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
    margin: 0 0 0.8rem;
}

.grupoic-info-dl dt { font-size: 0.72rem; font-weight: 600; color: var(--ic-ink-muted); }
.grupoic-info-dl dd { margin: 0; font-size: 0.86rem; }

.grupoic-info-label {
    margin: 0.7rem 0 0.15rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ic-ink-muted);
}

.grupoic-info-texto {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.grupoic-info-aviso {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ic-warn-text);
}

.grupoic-info-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ic-border);
}

.grupoic-info-acoes form { margin: 0; }

.grupoic-alerta-individual {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.8rem 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.87rem;
    color: var(--ic-warn-text);
    background: var(--ic-warn-bg);
    border: 1px solid var(--ic-warn-border);
    border-radius: var(--ic-radius-md);
}

.grupoic-alerta-individual .btn { margin-left: auto; }

.grupoic-link-demanda {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ic-warn-text);
    white-space: nowrap;
}

/* ============================================================
   Relatório impresso do grupo (Views/GruposIc/Relatorio.cshtml)
   Página autônoma, sem navbar. Na tela vira uma "folha" centrada;
   na impressão some tudo que não é conteúdo. Ver DS #sg-impressao.
   ============================================================ */
.grupoic-print-body {
    background: var(--ic-bg-soft);
    padding: 1.5rem 1rem 3rem;
}

.grupoic-print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: 820px;
    margin: 0 auto 1rem;
}

.grupoic-print {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.2rem 2.4rem;
    background: #fff;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    color: var(--ic-ink);
}

.grupoic-print-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--ic-primary);
}

.grupoic-print-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ic-ink-muted);
}

.grupoic-print-title {
    margin: 0.2rem 0 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.grupoic-print-status {
    flex: 0 0 auto;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid;
    border-radius: 999px;
}

.grupoic-print-status--good { color: var(--ic-success-text); background: var(--ic-success-bg); border-color: var(--ic-success-border); }
.grupoic-print-status--warn { color: var(--ic-warn-text); background: var(--ic-warn-bg); border-color: var(--ic-warn-border); }
.grupoic-print-status--danger { color: var(--ic-danger-text); background: var(--ic-danger-bg); border-color: var(--ic-danger-border); }

.grupoic-print-section {
    margin-top: 1.5rem;
    break-inside: avoid;
}

.grupoic-print-section-title {
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ic-primary);
}

.grupoic-print-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.4rem;
    margin: 0;
}

.grupoic-print-dl dt {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ic-ink-muted);
}

.grupoic-print-dl dd {
    margin: 0;
    font-size: 0.9rem;
}

.grupoic-print-label {
    margin: 1rem 0 0.25rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ic-ink-muted);
}

.grupoic-print-texto {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre-wrap;   /* preserva as quebras digitadas no textarea */
}

.grupoic-print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.grupoic-print-table th,
.grupoic-print-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--ic-border);
}

.grupoic-print-table th {
    font-weight: 600;
    background: var(--ic-bg-soft);
}

.grupoic-print-lista {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.87rem;
}

.grupoic-print-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.8rem;
}

.grupoic-print-fotos figure {
    margin: 0;
    break-inside: avoid;
}

.grupoic-print-fotos img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-sm);
}

.grupoic-print-fotos figcaption {
    margin-top: 0.2rem;
    overflow: hidden;
    font-size: 0.72rem;
    color: var(--ic-ink-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupoic-print-footer {
    margin-top: 1.8rem;
    padding-top: 0.7rem;
    font-size: 0.72rem;
    color: var(--ic-ink-muted);
    border-top: 1px solid var(--ic-border);
}

@media print {
    .grupoic-print-body { padding: 0; background: #fff; }
    .grupoic-print-actions { display: none; }
    .grupoic-print { max-width: none; padding: 0; border: 0; border-radius: 0; }
    .grupoic-print-fotos img { height: 130px; }
    a[href] { color: inherit; text-decoration: none; }
}

.ic-anexos-aviso {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--ic-warn-text);
}

.ic-file-upload.is-dragover {
    outline: 2px dashed var(--ic-primary);
    outline-offset: 4px;
    border-radius: var(--ic-radius-sm);
}

/* Campo que ocupa a linha inteira do usuario-form-grid (2 colunas) */
.grupoic-field-wide { grid-column: 1 / -1; }

.grupoic-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--ic-warn-text);
}

.grupoic-add-familia {
    display: flex;
    align-items: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.grupoic-add-familia .usuario-form-field { min-width: 280px; }

.grupoic-familia-id {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.grupoic-familia-resp {
    font-size: 0.82rem;
    color: var(--ic-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupoic-membros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
}

.grupoic-membro-chip { margin-bottom: 0; }

.grupoic-membro-chip .form-check-label {
    font-size: 0.85rem;
    color: var(--ic-ink);
}

.grupoic-familia-row { align-items: flex-start; }

/* Evento de GRUPO no Calendário geral: cor IC fixa (um grupo tem N facilitadoras,
   então a cor-por-atendente da legenda não se aplica) + selo "Grupo".
   Views/AgendaIc/CalendarioMensal.cshtml */
.agendaic-cal-event--grupo {
    background-color: var(--ic-primary-soft);
    border-left: 3px solid var(--ic-primary);
    color: var(--ic-ink);
}

.agendaic-cal-event-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 0.32rem;
    border-radius: var(--ic-radius-pill);
    background: var(--ic-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex: 0 0 auto;
}