/* ============================================================
   CASCA DE APP — o celular com cara de aplicativo
   ------------------------------------------------------------
   Vale para a área que põe `app-casca` no <body> (hoje: Coordenação).
   Abaixo de 768px: barra do topo com seta + título, barra de ABAS no
   rodapé, folha "Mais", avisos no rodapé (snackbar), tabela que vira
   cartões. No desktop a tela segue a de sempre.

   A cor de destaque é a da ÁREA: `--app-cor` (a área define; padrão =
   primária). Só tokens — o tema escuro sai de graça.
   Padrão: .github/instructions/pwa.instructions.md §"Casca de app".
   ============================================================ */

.app-casca {
    --app-cor: var(--color-primary);
    --app-nav-altura: 64px;
    --app-seguro-baixo: env(safe-area-inset-bottom, 0px);
}

/* Fora do celular a casca não aparece. */
.app-topo,
.app-nav {
    display: none;
}

/* ===== Escolha rápida em "chips" (ex.: trocar de hospital) =====
   Vale em qualquer tamanho: no desktop é só uma fileira de botões. */
.app-chips {
    display: flex;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0 0 var(--spacing-xs);
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.app-chips::-webkit-scrollbar {
    display: none;
}

.app-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    background: var(--color-bg-body);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.app-chip:hover {
    color: var(--color-text-primary);
    border-color: var(--app-cor);
}

.app-chip--ativo,
.app-chip--ativo:hover {
    border-color: var(--app-cor);
    background: color-mix(in srgb, var(--app-cor) 12%, var(--color-bg-body));
    color: var(--color-text-primary);
    font-weight: 600;
}

/* ===== Indicador do "puxar para atualizar" (criado pelo AppShell) ===== */
.app-puxar {
    position: fixed;
    top: 72px;
    left: 50%;
    z-index: var(--z-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border-radius: var(--border-radius-full);
    background: var(--color-bg-body);
    box-shadow: var(--shadow-md);
    color: var(--app-cor);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-60px);
}

.app-puxar i {
    transition: transform var(--transition-fast);
}

.app-puxar--pronto i {
    transform: rotate(180deg);
}

/* ===== "Carregando" ao trocar de tela (criado pelo AppShell) =====
   Faixa fina no topo, correndo — o padrão de app/navegador para "estou
   indo". Vale em qualquer tamanho. */
.app-carregando {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-toast);
    height: 3px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.app-carregando::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    border-radius: var(--border-radius-pill);
    background: var(--app-cor, var(--color-primary));
}

.app-carregando--ativo {
    opacity: 1;
}

.app-carregando--ativo::before {
    animation: app-carregando-corre 1.1s ease-in-out infinite;
}

@keyframes app-carregando-corre {
    0% { left: -40%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .app-carregando--ativo::before {
        left: 0;
        width: 100%;
        animation: none;
    }
}

/* ============================================================
   CELULAR
   ============================================================ */
@media (max-width: 767.98px) {
    .app-casca {
        padding-bottom: calc(var(--app-nav-altura) + var(--app-seguro-baixo));
        -webkit-tap-highlight-color: transparent;
    }

    /* Toque de app: sem o atraso/zoom de duplo toque nos controles. */
    .app-casca :is(a, button, .btn, input, select, label) {
        touch-action: manipulation;
    }

    /* ----- Barra do topo: seta + título ----- */
    .app-topo {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        min-width: 0;
    }

    .app-topo__voltar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-left: calc(var(--spacing-sm) * -1);
        border-radius: var(--border-radius-full);
        color: var(--color-text-primary);
        font-size: var(--font-size-md);
        text-decoration: none;
    }

    .app-topo__voltar:active {
        background: color-mix(in srgb, var(--app-cor) 15%, transparent);
    }

    .app-topo__titulo {
        overflow: hidden;
        font-size: var(--font-size-md);
        font-weight: 600;
        color: var(--color-text-primary);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* A seta e o título já dizem onde a pessoa está: o "Voltar para..." e o
       selo da área sobravam no topo de cada tela. */
    .app-casca .voltar-area,
    .app-casca .area-badge {
        display: none;
    }

    /* ----- Barra de abas ----- */
    .app-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: var(--z-fixed);
        display: flex;
        height: calc(var(--app-nav-altura) + var(--app-seguro-baixo));
        padding-bottom: var(--app-seguro-baixo);
        border-top: 1px solid var(--color-border);
        background: var(--color-bg-body);
        box-shadow: 0 -0.125rem 0.5rem color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    }

    .app-nav__item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-text-secondary);
        font-size: 0.8rem;
        text-decoration: none;
        user-select: none;
        cursor: pointer;
    }

    /* Ícone dentro de uma "pílula" — a aba ativa acende só ela (Material 3). */
    .app-nav__item i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 30px;
        border-radius: var(--border-radius-pill);
        font-size: 1.15rem;
        transition: background var(--transition-fast);
    }

    .app-nav__rotulo {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .app-nav__item--ativo {
        color: var(--color-text-primary);
        font-weight: 600;
    }

    .app-nav__item--ativo i {
        background: color-mix(in srgb, var(--app-cor) 18%, transparent);
        color: var(--app-cor);
    }

    .app-nav__item:active i {
        background: color-mix(in srgb, var(--app-cor) 25%, transparent);
    }

    /* ----- Folha "Mais" (offcanvas que sobe do rodapé) ----- */
    .offcanvas-bottom.app-folha {
        height: auto;
        max-height: 85vh;
        padding-bottom: var(--app-seguro-baixo);
        border-top: 0;
        border-radius: calc(var(--border-radius-xl) * 3) calc(var(--border-radius-xl) * 3) 0 0;
        background: var(--color-bg-body);
        color: var(--color-text-primary);
    }

    .app-folha__alca {
        width: 36px;
        height: 4px;
        margin: var(--spacing-sm) auto 0;
        border-radius: var(--border-radius-pill);
        background: var(--color-border);
    }

    .app-folha__titulo {
        margin: 0;
        font-size: var(--font-size-md);
        font-weight: 600;
    }

    .app-folha .offcanvas-body {
        padding-top: 0;
    }

    .app-folha__lista {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .app-folha__item {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        min-height: 52px;
        padding: 0 var(--spacing-sm);
        border-radius: var(--border-radius-xl);
        color: var(--color-text-primary);
        font-size: var(--font-size-base);
        text-decoration: none;
    }

    .app-folha__item:active {
        background: var(--color-bg-light);
    }

    .app-folha__item > i:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--border-radius-full);
        background: color-mix(in srgb, var(--app-cor) 12%, transparent);
        color: var(--app-cor);
    }

    .app-folha__seta {
        margin-left: auto;
        color: var(--color-text-muted);
        font-size: 0.8rem;
    }

    /* ----- Avisos do Django: snackbar no rodapé, acima das abas -----
       No topo eles cobriam o começo da tela (o card de boas-vindas). */
    .app-casca #messages {
        top: auto;
        bottom: calc(var(--app-nav-altura) + var(--app-seguro-baixo) + var(--spacing-sm));
        max-height: 40vh;
    }

    /* ----- Tabela que vira CARTÕES -----
       Envolva a tela em `.app-cartoes`: cada linha vira um cartão e cada
       célula mostra o nome da coluna (`data-rotulo`, preenchido pelo
       AppShell a partir do <th>). A 1ª célula é o título do cartão e a de
       ações (`bf-acoes`) fica embaixo, à direita. */
    .app-cartoes .table-responsive {
        overflow: visible;
    }

    .app-cartoes table.table {
        border: 0;
    }

    .app-cartoes table.table thead {
        display: none;
    }

    .app-cartoes table.table,
    .app-cartoes table.table tbody,
    .app-cartoes table.table tr,
    .app-cartoes table.table td {
        display: block;
        width: 100%;
    }

    .app-cartoes table.table tbody tr {
        margin-bottom: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        border: 1px solid var(--color-border);
        border-left: 3px solid var(--app-cor);
        border-radius: var(--app-raio, var(--border-radius-lg));
        background: var(--color-bg-body);
        box-shadow: var(--shadow-sm);
    }

    .app-cartoes table.table > :not(caption) > * > * {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Célula pintada (linha de destaque, `!important` para vencer o hover do
       Bootstrap) virava um "cartão dentro do cartão": o recuo do cartão
       aparecia em volta. No cartão quem pinta é a LINHA (`tr`) — a tela que
       destaca uma linha repete a cor no `tr`, dentro de `.app-cartoes`. */
    .app-cartoes table.table tbody tr > td {
        background: transparent !important;
    }

    /* Rótulo à esquerda e o conteúdo junto, à direita: célula com várias
       peças (nível + valor + ganho) não se espalha pela linha, e o que não
       cabe desce inteiro (ex.: uma barra de progresso com flex-basis 100%). */
    .app-cartoes table.table td {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--spacing-xs) var(--spacing-sm);
        box-sizing: border-box;
        padding: 0.3rem 0;
        text-align: right;
    }

    .app-cartoes table.table td::before {
        content: attr(data-rotulo);
        flex-shrink: 0;
        margin-right: auto;
        color: var(--color-text-secondary);
        font-size: 0.8rem;
        font-weight: 600;
        text-align: left;
    }

    .app-cartoes table.table td:first-child {
        justify-content: flex-start;
        gap: var(--spacing-xs);
        padding-bottom: var(--spacing-xs);
        font-size: var(--font-size-base);
        font-weight: 600;
        text-align: left;
    }

    .app-cartoes table.table td:first-child::before,
    .app-cartoes table.table td.bf-acoes::before,
    .app-cartoes table.table td[colspan]::before {
        content: none;
    }

    /* A coluna de ações tem 128px fixos para a tabela (acoes_table.css, com
       !important); no cartão ela é uma linha inteira, com alvos de toque de
       app. Contra !important global, só !important — restrito ao cartão. */
    .app-cartoes table.table td.bf-acoes {
        justify-content: flex-end;
        gap: var(--spacing-sm);
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: var(--spacing-sm) 0 0 !important;
    }

    .app-cartoes table.table td.bf-acoes .btn {
        width: 40px !important;
        height: 40px !important;
    }

    .app-cartoes table.table td[colspan] {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   5. SEÇÕES: LISTA → TELA (Minha Conta, Notificações…)
   O padrão de toda tela de conta/ajustes de app (Configurações do Android,
   Ajustes do iPhone): no celular a grade de cards vira uma LISTA de linhas
   com ícone e ›; tocar abre a seção em tela cheia (o AppShell põe
   `app-secao-aberta` no <body> e o nome dela no topo); a seta volta à lista.
   No topo da lista, a pessoa (foto + nome) — o "cabeçalho de entidade" das
   diretrizes do Android; "Sair" fica no fim, num grupo à parte.
   A LISTA não espera o JS: o seletor reconhece a tela pela própria
   marcação (`.app-casca` com menu de cards + área de conteúdo, via :has).
   Antes dependia da classe `app-secoes` que o AppShell põe — e o celular
   desenhava primeiro a grade antiga e só depois a lista (pisca feio).
   ============================================================ */

/* Peças que só existem na lista do app. */
.app-secoes__entidade,
.app-secoes__rodape {
    display: none;
}

@media (max-width: 767.98px) {
    /* O "Ocultar / Seções" + botão flutuante de antes sobram: a lista É o menu. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-toggle,
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-fab,
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-fab.is-visible {
        display: none;
    }

    /* ----- LISTA ----- */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-container {
        align-items: stretch;
        gap: var(--spacing-md);
        margin: 0;
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-header {
        text-align: left;
    }

    /* O nome da tela já está na barra do topo. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-header h1 {
        display: none;
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-header p {
        margin: 0;
    }

    /* Com a pessoa no topo, a frase de apoio sobra. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-header:has(.app-secoes__entidade) p {
        display: none;
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)):not(.app-secao-aberta) .app-secoes__entidade {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: calc(var(--border-radius-xl) * 2);
        background: var(--color-bg-body);
        box-shadow: var(--shadow-sm);
    }

    .app-secoes__foto {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        border-radius: var(--border-radius-full);
        object-fit: cover;
    }

    .app-secoes__identidade {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .app-secoes__nome {
        overflow: hidden;
        color: var(--color-text-primary);
        font-size: var(--font-size-md);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .app-secoes__sub {
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

    /* A grade vira um GRUPO de linhas (mesmo recolhida pelo toggle antigo). */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid,
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-container.is-collapsed .nav-cards-grid {
        display: block;
        overflow: hidden;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: calc(var(--border-radius-xl) * 2);
        background: var(--color-bg-body);
        box-shadow: var(--shadow-sm);
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn,
    .app-secoes__sair {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
        width: 100%;
        min-width: 0;
        min-height: 56px;
        margin: 0;
        padding: 0 var(--spacing-md);
        border: 0;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--color-text-primary);
        text-align: left;
        text-decoration: none;
        transform: none;
        -webkit-tap-highlight-color: transparent;
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn:last-child {
        border-bottom: 0;
    }

    /* Sem o sublinhado colorido do card de desktop. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn::before {
        display: none;
    }

    /* A seta de "abre outra tela" (disclosure), do Font Awesome. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn::after {
        content: "\f054";
        margin-left: auto;
        color: var(--color-text-muted);
        font-family: "Font Awesome 6 Free";
        font-size: 0.8rem;
        font-weight: 900;
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn:active,
    .app-secoes__sair:active {
        background: var(--color-bg-light);
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn i,
    .app-secoes__sair i {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        margin: 0;
        border-radius: var(--border-radius-full);
        background: color-mix(in srgb, var(--app-cor) 12%, transparent);
        color: var(--app-cor);
        font-size: 1rem;
        transform: none;
    }

    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-grid .nav-card-btn span,
    .app-secoes__sair span {
        font-size: var(--font-size-base);
        font-weight: 500;
        text-align: left;
    }

    /* "Sair": grupo à parte, em vermelho — ação que encerra, longe das outras. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)):not(.app-secao-aberta) .app-secoes__rodape {
        display: block;
        overflow: hidden;
        border: 1px solid var(--color-border);
        border-radius: calc(var(--border-radius-xl) * 2);
        background: var(--color-bg-body);
        box-shadow: var(--shadow-sm);
    }

    .app-secoes__sair {
        border-bottom: 0;
        color: var(--color-danger);
        cursor: pointer;
    }

    .app-secoes__sair i {
        background: color-mix(in srgb, var(--color-danger) 12%, transparent);
        color: var(--color-danger);
    }

    /* Na lista o conteúdo fica guardado (a 1ª seção já carregou por trás). */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)):not(.app-secao-aberta) .nav-cards-content {
        display: none;
    }

    /* ----- TELA (seção aberta) ----- */
    .app-secoes.app-secao-aberta .nav-cards-container,
    .app-secoes.app-secao-aberta .voltar-area {
        display: none;
    }

    /* A seção ocupa a tela: sem a moldura de "caixa dentro da página" — nem
       a da área de conteúdo, nem a do bloco da seção logo dentro dela. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-content,
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-content > :first-child {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* O 1º título da seção repete o que a barra do topo já diz. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-content > :first-child > h2:first-child {
        display: none;
    }

    /* O <form> global (nav_cards_menu.css) põe 2rem de recuo: no celular
       cada campo perdia um terço da largura. */
    :is(.app-secoes, .app-casca:has(.nav-cards-grid):has(.nav-cards-content)) .nav-cards-content form {
        padding: var(--spacing-md);
    }
}

/* ============================================================
   6. A TELA DO APP — UM PADRÃO para todas as telas (celular)
   Nasceu na Minha Conta (09/10/2026) e vale para TODA tela dentro da
   casca: a <main> de cada área tem `app-tela`. É o que os apps fazem
   (iOS "grouped inset", Material 3): grupos em cartões arredondados com
   um título pequeno acima; rótulo em caixa normal (não MAIÚSCULAS);
   campos altos com fonte de 16px (o iPhone não dá zoom ao focar); botão
   principal LARGO no fim do grupo e o secundário discreto; abas viram
   controle segmentado; tabela vira cartões, com busca larga.
   Modais ficam de fora (`:not(.modal *)`): já são um "cartão" deles.
   ============================================================ */
.app-casca {
    --app-raio: calc(var(--border-radius-xl) * 2);
}

@media (max-width: 767.98px) {
    /* ----- Títulos ----- */
    /* De BLOCO (h2): o mesmo tamanho em toda tela ("Seus hospitais",
       "Hospitais", "Meus plantões"…). */
    .app-tela h2:not(.modal *):not(.co-hero *):not(.pt-hero *) {
        font-size: var(--font-size-md);
        font-weight: 700;
    }

    /* De GRUPO (h3/h4): pequeno e cinza, em cima do cartão. */
    .app-tela :is(h3, h4):not(.modal *):not(.card *):not(.co-hero *):not(.pt-hero *) {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin: var(--spacing-lg) 0 var(--spacing-sm);
        padding: 0 var(--spacing-xs);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 600;
        letter-spacing: 0.01em;
    }

    .app-tela :is(h3, h4):not(.modal *):not(.card *) > i {
        color: var(--app-cor);
    }

    .app-secao-aberta .nav-cards-content > :first-child > p:first-of-type {
        margin: 0 var(--spacing-xs) var(--spacing-md);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
    }

    /* ----- Grupos: formulário e cartão = cartão arredondado ----- */
    .app-tela :is(form, .card):not(.modal *) {
        margin: 0 0 var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--app-raio);
        background: var(--color-bg-body);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

    .app-tela form:not(.modal *) {
        padding: var(--spacing-md);
    }

    /* Formulário DENTRO de um cartão: o cartão já é o grupo. */
    .app-tela .card form:not(.modal *) {
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .app-tela .card-header:not(.modal *) {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
        border: 0;
        background: transparent;
        color: var(--color-text-primary);
        font-weight: 600;
    }

    .app-tela .card-body:not(.modal *) {
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    }

    /* ----- Campos ----- */
    .app-tela :is(.form-label, form label:not(.form-check-label)):not(.modal *) {
        margin-bottom: var(--spacing-xs);
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        letter-spacing: normal;
        text-transform: none;
    }

    .app-tela .form-label i:not(.modal *) {
        display: none;
    }

    .app-tela :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm):not(.modal *) {
        min-height: 48px;
        border-radius: var(--border-radius-xl);
        font-size: 1rem;
    }

    .app-tela :is(.form-text, .invalid-feedback):not(.modal *) {
        font-size: 0.8rem;
    }

    /* ----- Botões ----- */
    /* Todo botão do app com o mesmo canto; os normais com 44px de toque. */
    .app-tela .btn:not(.btn-close):not(.modal *) {
        border-radius: var(--border-radius-xl);
    }

    .app-tela .btn:not(.btn-sm):not(.btn-close):not(.modal *) {
        min-height: 44px;
    }

    /* No formulário: o principal LARGO; o secundário discreto embaixo. */
    .app-tela :is(form .btn, .card-body > .btn):not(.btn-sm):not(.modal *) {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        width: 100%;
        min-height: 48px;
        margin: var(--spacing-sm) 0 0;
        font-size: 1rem;
        font-weight: 600;
    }

    .app-tela form .d-flex:has(> .btn:not(.btn-sm)):not(.modal *) {
        flex-direction: column;
        gap: 0 !important;
    }

    .app-tela form :is(.btn-secondary, .btn-light, .btn-outline-secondary):not(.btn-sm):not(.modal *) {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--color-text-secondary);
        font-weight: 500;
    }

    /* ----- Abas → controle segmentado ----- */
    .app-tela .nav-tabs:not(.modal *) {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px;
        margin-bottom: var(--spacing-md);
        padding: 3px;
        border: 0;
        border-radius: var(--border-radius-pill);
        background: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
    }

    .app-tela .nav-tabs .nav-item:not(.modal *) {
        flex: 1 1 0;
        min-width: 0;
    }

    .app-tela .nav-tabs .nav-link:not(.modal *) {
        width: 100%;
        min-height: 40px;
        margin: 0;
        padding: 0 var(--spacing-sm);
        border: 0;
        border-radius: var(--border-radius-pill);
        background: transparent;
        color: var(--color-text-secondary);
        font-size: var(--font-size-sm);
        font-weight: 500;
        white-space: nowrap;
    }

    .app-tela .nav-tabs .nav-link.active:not(.modal *) {
        background: var(--color-bg-body);
        box-shadow: var(--shadow-sm);
        color: var(--color-text-primary);
        font-weight: 600;
    }

    /* ----- Avisos: banner arredondado ----- */
    .app-tela .alert:not(.modal *) {
        border-radius: var(--app-raio);
        font-size: var(--font-size-sm);
    }

    /* ----- Tabela (DataTables): busca larga, sem o "Mostrar N" ----- */
    .app-tela .dataTables_length {
        display: none;
    }

    /* A grade do DataTables divide "Mostrar | Buscar" em duas colunas
       (col-md-6): no celular cada uma ocupa a linha toda. */
    .app-tela .dataTables_wrapper > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .app-tela .dataTables_filter,
    .app-tela .dataTables_filter label {
        display: block;
        width: 100%;
        margin: 0 0 var(--spacing-sm);
        font-size: 0;            /* some com o "Pesquisar:" — o campo diz o que é */
        text-align: left;
    }

    /* `div.dataTables_wrapper div.dataTables_filter input` (do DataTables)
       põe width:auto com mais especificidade — repete a mesma cadeia. */
    .app-tela div.dataTables_wrapper div.dataTables_filter input {
        display: block;
        width: 100%;
        min-height: 44px;
        margin: 0;
        border-radius: var(--border-radius-pill);
        font-size: 1rem;
    }

    .app-tela .dataTables_info,
    .app-tela .dataTables_paginate {
        float: none;
        padding-top: var(--spacing-sm);
        font-size: var(--font-size-sm);
        text-align: center;
    }

    .app-tela .dataTables_paginate .pagination {
        justify-content: center;
    }

    /* ============================================================
       7. O MESMO DESENHO nos blocos de cada área
       Cartões de lista, números de destaque e sanfonas que cada área
       criou do seu jeito: mesmo canto, mesmo número, mesmo rótulo.
       ============================================================ */

    /* Um canto só para tudo que é "cartão" na tela. */
    .app-tela :is(.co-card, .pt-card, .co-hospital, .co-atalho, .pt-atalho,
                  .co-hero, .pt-hero, .co-kpi, .esc-kpi, .ma-kpi, details,
                  .hospital-card, .co-bonus-niveis):not(.modal *) {
        border-radius: var(--app-raio);
    }

    /* Números de destaque (KPI): rótulo pequeno em caixa normal + número forte. */
    .app-tela :is(.co-kpi__titulo, .ma-kpi-label, .esc-kpi .text-uppercase):not(.modal *) {
        color: var(--color-text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: normal;
        text-transform: none !important;   /* .text-uppercase do Bootstrap é !important */
    }

    .app-tela :is(.co-kpi__valor, .ma-kpi-valor, .esc-kpi-valor):not(.modal *) {
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
        font-weight: 700;
        line-height: 1.2;
    }
}

/* ============================================================
   8. A GESTÃO no app (09/10/2026)
   A Gestão tem cabeçalho e início próprios (global/partials/header.html,
   safe/home_hero.html). Aqui só o que faz ela ficar IGUAL às outras áreas
   no celular: logo + seta + título na mesma linha, o ☰ some (o "Mais" das
   abas abre o mesmo menu) e o início com a saudação curta.
   ============================================================ */
@media (max-width: 767.98px) {
    .app-casca--gestao .header .logo {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: var(--spacing-sm);
        min-width: 0;
    }

    /* Com a seta de voltar no lugar, o logo sobra (no início ele fica). */
    .app-casca--gestao .header .logo:has(.app-topo__voltar) > a:first-child {
        display: none;
    }

    .app-casca--gestao .header-right .open-menu-btn {
        display: none;
    }

    /* Início: o hero vira uma saudação curta, como nas outras áreas. */
    .app-casca--gestao .hero-section {
        padding: var(--spacing-md);
        border-radius: var(--app-raio);
        text-align: left;
    }

    .app-casca--gestao .hero-illustration {
        display: none;
    }

    .app-casca--gestao .hero-title {
        font-size: var(--font-size-lg);
    }

    .app-casca--gestao .hero-content,
    .app-casca--gestao .hero-info {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    /* Os atalhos dos módulos: o mesmo canto dos cartões do app. */
    .app-casca--gestao .stat-card {
        border-radius: var(--app-raio);
    }
}

/* ============================================================
   9. DIÁLOGOS EM TELA CHEIA (celular)
   O "full-screen dialog" do Material: modal com formulário ou conteúdo
   grande ocupa a tela inteira no celular (o mesmo que o `.modal-fullscreen`
   do Bootstrap), em vez de uma janelinha com margem por cima da página.
   Confirmação curta (sem form, sem -lg/-xl, ex.: "Sair") segue centralizada.
   ============================================================ */
@media (max-width: 767.98px) {
    .app-casca .modal-dialog:is(.modal-lg, .modal-xl, .modal-dialog-scrollable, :has(form)) {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    /* `!important` na altura: módulos limitam o próprio modal por ID (ex.:
       `#todo-modal-detalhe .modal-content { max-height: 92vh }`), e regra com
       id vence esta — o diálogo ficava "flutuando" com as abas aparecendo. */
    .app-casca .modal-dialog:is(.modal-lg, .modal-xl, .modal-dialog-scrollable, :has(form)) .modal-content {
        height: 100% !important;
        max-height: none !important;
        border: 0;
        border-radius: 0;
    }

    .app-casca .modal-dialog:is(.modal-lg, .modal-xl, .modal-dialog-scrollable, :has(form)) .modal-body {
        overflow-y: auto;
    }

    .app-casca .modal-dialog:is(.modal-lg, .modal-xl, .modal-dialog-scrollable, :has(form)) .modal-footer {
        padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
    }

    /* O X de fechar com alvo de toque de app. */
    .app-casca .modal-header .btn-close {
        width: 44px;
        height: 44px;
        margin: calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) auto;
        background-size: 0.9rem;
    }
}