/* ==========================================================================
   MeuProntuário — Componentes do sistema interno
   Padrões de página usados pela tela modelo (resources/views/exemplo.blade.php).
   Depende de tokens.css e tema.css. Carregado globalmente pelo layout.blade.php.

   Estrutura de uma tela:
     .pagina
       .pagina-cabecalho  (.trilha, .pagina-titulo, .pagina-descricao, .pagina-acoes)
       .resumo-grade > .resumo-cartao   (opcional)
       .painel > .painel-ferramentas + tabela (bootstrap-table)
     modal com .form-secao
   ========================================================================== */

/* ---------- Página ---------- */
.pagina {
    display: grid;
    gap: 24px;
}

.pagina-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.trilha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: var(--mp-fs-xs);
    font-weight: 600;
    color: var(--mp-gray-500);
}

.trilha a {
    color: var(--mp-gray-500);
    text-decoration: none;
}

.trilha a:hover {
    color: var(--mp-brand-700);
}

.trilha [aria-current="page"] {
    color: var(--mp-brand-700);
}

.pagina-titulo {
    margin: 0;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--mp-ink);
}

.pagina-descricao {
    max-width: 48rem;
    margin: 6px 0 0;
    color: var(--mp-text-muted);
    font-size: var(--mp-fs-sm);
}

.pagina-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 575.98px) {
    .pagina-acoes,
    .pagina-acoes .btn {
        width: 100%;
    }
}

/* ---------- Botões com ícone ---------- */
.btn-icone-texto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding-inline: 18px;
    border-radius: 12px;
    font-weight: 700;
}

.btn-acao {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    background: var(--mp-surface);
    color: var(--mp-gray-600);
    transition: background-color .2s, color .2s, border-color .2s;
}

.btn-acao:hover {
    border-color: var(--mp-brand-200);
    background: var(--mp-brand-50);
    color: var(--mp-brand-700);
}

.btn-acao--perigo:hover {
    border-color: #f5c2c2;
    background: #fdecec;
    color: var(--mp-danger);
}

.btn-acao:focus-visible {
    outline: none;
    box-shadow: var(--mp-focus);
}

.acoes-linha {
    display: inline-flex;
    gap: 6px;
}

/* ---------- Cartões de resumo ---------- */
.resumo-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 992px) {
    .resumo-grade {
        /* Até 4 por linha; com menos cartões eles dividem a largura */
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
    }
}

.resumo-cartao {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow-sm);
}

.resumo-cartao__icone {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--mp-brand-50);
    color: var(--mp-brand-600);
    font-size: 17px;
}

.resumo-cartao--coral .resumo-cartao__icone {
    background: var(--mp-accent-50);
    color: var(--mp-accent-600);
}

.resumo-cartao--neutro .resumo-cartao__icone {
    background: var(--mp-gray-100);
    color: var(--mp-gray-600);
}

.resumo-cartao__rotulo {
    margin: 0;
    font-size: var(--mp-fs-xs);
    font-weight: 600;
    color: var(--mp-gray-500);
}

.resumo-cartao__valor {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--mp-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .resumo-cartao {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px;
    }

    .resumo-cartao__valor {
        font-size: 1.125rem;
    }

    /* Em coluna, o texto precisa da largura do cartão para as reticências funcionarem */
    .resumo-cartao > div {
        width: 100%;
    }
}

/* ---------- Painel ---------- */
.painel {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow-sm);
    height: 100%;
}

@media (max-width: 575.98px) {
    .painel {
        padding: 14px;
        border-radius: var(--mp-radius);
    }
}

.painel-ferramentas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.painel-ferramentas .form-select {
    width: auto;
    min-width: 190px;
    min-height: 40px;
    border-radius: 10px;
}

.painel-ferramentas .form-switch {
    margin: 0;
}

/* ---------- Tabela (bootstrap-table dentro de .painel) ---------- */
.painel .bootstrap-table .fixed-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.painel .bootstrap-table .fixed-table-toolbar::after {
    display: none;
}

.painel .bootstrap-table .fixed-table-toolbar .bs-bars,
.painel .bootstrap-table .fixed-table-toolbar .search,
.painel .bootstrap-table .fixed-table-toolbar .columns {
    float: none;
    margin: 0;
}

.painel .bootstrap-table .fixed-table-toolbar .bs-bars {
    flex: 1 1 auto;
}

.painel .bootstrap-table .fixed-table-toolbar .search {
    order: -1;
    flex: 1 1 260px;
    max-width: 420px;
}

.painel .bootstrap-table .fixed-table-toolbar .search .form-control {
    min-height: 40px;
    padding-left: 38px;
    border-radius: 10px;
    background: var(--mp-gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7d80' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px;
}

.painel .bootstrap-table .fixed-table-toolbar .search .form-control:focus {
    background-color: #fff;
}

.painel .bootstrap-table .fixed-table-container {
    border: 0;
}

.painel .bootstrap-table .table {
    margin: 0;
    color: var(--mp-gray-700);
    font-size: var(--mp-fs-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.painel .bootstrap-table .table thead th {
    border: 0;
    border-bottom: 1px solid var(--mp-border);
    background: var(--mp-gray-50);
    color: var(--mp-gray-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

.painel .bootstrap-table .table thead th:first-child {
    border-top-left-radius: 10px;
}

.painel .bootstrap-table .table thead th:last-child {
    border-top-right-radius: 10px;
}

.painel .bootstrap-table .table thead th .th-inner {
    padding: 12px 14px;
    color: inherit; /* bootstrap-table fixa preto; herda a cor do th nos dois temas */
}

.painel .bootstrap-table .table tbody td {
    padding: 12px 14px;
    border-color: var(--mp-gray-100);
    vertical-align: middle;
}

.painel .bootstrap-table .table tbody tr:hover td {
    background: var(--mp-gray-50);
}

.painel .bootstrap-table .table tbody tr.no-records-found:hover td {
    background: transparent;
}

.painel .bootstrap-table .fixed-table-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 14px;
    font-size: var(--mp-fs-sm);
    color: var(--mp-gray-500);
}

.painel .bootstrap-table .fixed-table-pagination::after {
    display: none;
}

.painel .bootstrap-table .fixed-table-pagination > div {
    float: none;
    margin: 0;
}

.painel .bootstrap-table .pagination {
    gap: 4px;
    margin: 0;
}

.painel .bootstrap-table .page-link {
    min-width: 34px;
    border: 1px solid var(--mp-border);
    border-radius: 8px !important;
    color: var(--mp-gray-700);
    text-align: center;
}

.painel .bootstrap-table .page-item.active .page-link {
    border-color: var(--mp-brand-600);
    background: var(--mp-brand-600);
    color: #fff;
}

.painel .bootstrap-table .fixed-table-loading {
    background: rgba(255, 255, 255, .8);
}

/* Seletor de "registros por página" */
.painel .bootstrap-table .page-list .btn {
    min-height: 32px;
    padding: 2px 10px;
    border: 1px solid var(--mp-border);
    border-radius: 8px;
    background: var(--mp-surface);
    color: var(--mp-gray-700);
    font-size: var(--mp-fs-sm);
    font-weight: 600;
}

.painel .bootstrap-table .page-list .btn:hover,
.painel .bootstrap-table .page-list .btn.show {
    border-color: var(--mp-gray-300);
    background: var(--mp-gray-50);
}

.painel .bootstrap-table .page-list .dropdown-menu {
    min-width: 72px;
    padding: 4px;
    border: 1px solid var(--mp-border);
    border-radius: 10px;
    box-shadow: var(--mp-shadow);
}

.painel .bootstrap-table .page-list .dropdown-item {
    border-radius: 6px;
}

.painel .bootstrap-table .page-list .dropdown-item.active {
    background: var(--mp-brand-600);
}

/* A página rola inteira; sem rolagem interna da tabela (global.css limita a 500px) */
.painel .bootstrap-table .fixed-table-body {
    max-height: none;
}

/* Modo cartão (mobile): cada linha vira um cartão. Seletores longos para vencer o bootstrap-table.css */
.painel .bootstrap-table .fixed-table-container .table tbody tr td:has(> .card-views) {
    padding: 14px 2px;
}

.painel .bootstrap-table .fixed-table-container .table tbody tr .card-view {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.painel .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
    min-width: 0;
    flex: none;
    color: var(--mp-gray-500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.painel .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
    width: auto !important;
    min-width: 0;
    text-align: right !important;
}

/* Primeira coluna (título da linha) ocupa a largura toda, sem rótulo */
.painel .bootstrap-table .fixed-table-container .table tbody tr .card-view:first-child {
    padding-bottom: 10px;
}

.painel .bootstrap-table .fixed-table-container .table tbody tr .card-view:first-child .card-view-title {
    display: none;
}

.painel .bootstrap-table .fixed-table-container .table tbody tr .card-view:first-child .card-view-value {
    width: 100% !important;
    text-align: left !important;
}

/* ---------- Conteúdo de células ---------- */
.celula-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.celula-titulo__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--mp-brand-50);
    color: var(--mp-brand-700);
    font-size: 13px;
    font-weight: 800;
}

.celula-titulo strong,
.celula-titulo small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.celula-titulo strong {
    color: var(--mp-ink);
    font-weight: 700;
}

.celula-titulo small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.valor-monetario {
    font-weight: 700;
    color: var(--mp-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Selos de status ---------- */
.selo-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--mp-radius-pill);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.selo-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.selo-status--sucesso {
    background: #e3f6ec;
    color: #137a43;
}

.selo-status--neutro {
    background: var(--mp-gray-100);
    color: var(--mp-gray-600);
}

.selo-status--alerta {
    background: var(--mp-accent-50);
    color: #b5461b;
}

.selo-status--perigo {
    background: #fdecec;
    color: #b42318;
}

/* ---------- Estado vazio ---------- */
.estado-vazio {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 40px 16px;
    text-align: center;
    white-space: normal;
}

.estado-vazio__icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 16px;
    background: var(--mp-gray-100);
    color: var(--mp-gray-500);
    font-size: 22px;
}

.estado-vazio strong {
    color: var(--mp-ink);
    font-size: var(--mp-fs-md);
}

.estado-vazio p {
    max-width: 26rem;
    margin: 0;
    color: var(--mp-gray-500);
    font-size: var(--mp-fs-sm);
}

/* ---------- Formulários em modal ---------- */
.modal-formulario .modal-header {
    align-items: flex-start;
    padding: 22px 24px 8px;
    border: 0;
}

.modal-formulario .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.modal-formulario .modal-subtitulo {
    margin: 4px 0 0;
    color: var(--mp-gray-500);
    font-size: var(--mp-fs-sm);
}

.modal-formulario .modal-body {
    display: grid;
    gap: 20px;
    padding: 16px 24px;
}

.modal-formulario .modal-footer {
    gap: 8px;
    padding: 16px 24px 22px;
    border: 0;
}

.modal-formulario .modal-footer > * {
    margin: 0;
}

@media (max-width: 575.98px) {
    .modal-formulario .modal-footer .btn {
        flex: 1;
    }
}

.form-secao {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.form-secao + .form-secao {
    padding-top: 20px;
    /* box-shadow em vez de border-top: a borda do fieldset é interrompida pelo <legend> */
    box-shadow: 0 -1px 0 var(--mp-border);
}

.form-secao__titulo {
    /* float tira o <legend> da borda do fieldset (padrão do Bootstrap reboot) */
    float: left;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mp-gray-500);
}

.form-secao__titulo + * {
    clear: left;
}

.form-secao .form-control,
.form-secao .form-select {
    border-radius: 12px;
}

.form-secao .form-floating > label {
    color: var(--mp-gray-500);
}

.form-secao .form-floating > .form-control:focus ~ label::after,
.form-secao .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-secao .form-floating > .form-select ~ label::after {
    background: transparent;
}

.form-secao textarea.form-control {
    min-height: 110px;
}

.obrigatorio {
    color: var(--mp-danger);
    font-weight: 700;
}

/* Só erros são destacados; o "válido" que o erroAjax aplica em todos os campos fica neutro */
.form-secao .form-control.is-valid,
.form-secao .form-select.is-valid {
    border-color: var(--bs-border-color);
    background-image: none;
    padding-right: .75rem;
}

.form-secao .form-control.is-valid:focus,
.form-secao .form-select.is-valid:focus {
    border-color: var(--mp-brand-400);
    box-shadow: var(--mp-focus);
}

.form-secao .form-select.is-valid {
    padding-right: 2.25rem;
    background-image: var(--bs-form-select-bg-img);
}

.form-secao .form-check-input.is-valid {
    border-color: var(--bs-border-color);
}

.form-secao .form-check-input.is-valid:checked {
    border-color: var(--mp-brand-600);
    background-color: var(--mp-brand-600);
}

.form-secao .form-check-input.is-valid ~ .form-check-label {
    color: inherit;
}

.form-ajuda {
    margin: 6px 2px 0;
    color: var(--mp-gray-500);
    font-size: 12px;
}

/* Interruptor em cartão (ex.: ativo/inativo) */
.opcao-interruptor,
.opcao-interruptor.form-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
}

.opcao-interruptor strong {
    display: block;
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
}

.opcao-interruptor small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.opcao-interruptor.form-switch {
    padding-left: 16px;
    cursor: pointer;
}

.opcao-interruptor .form-check-input,
.opcao-interruptor.form-switch .form-check-input {
    float: none;
    flex: none;
    width: 2.6em;
    height: 1.4em;
    margin: 0;
    cursor: pointer;
}

/* ---------- Modal de confirmação (components/modals/confirmacao_modal) ---------- */
.modal-confirmacao .modal-content {
    align-items: center;
    padding: 24px 20px 20px;
    text-align: center;
}

.modal-confirmacao__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 16px;
    background: var(--mp-brand-50);
    color: var(--mp-brand-600);
    font-size: 22px;
}

.modal-confirmacao--perigo .modal-confirmacao__icone {
    background: #fdecec;
    color: var(--mp-danger);
}

.modal-confirmacao .modal-title {
    margin-bottom: 6px;
    color: var(--mp-ink);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.modal-confirmacao .modal-body {
    width: 100%;
    padding: 0;
    color: var(--mp-gray-600);
    font-size: var(--mp-fs-sm);
}

.modal-confirmacao .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
    padding: 0;
    border: 0;
}

.modal-confirmacao .modal-footer > .btn {
    margin: 0;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
}

.modal-confirmacao.modal-lg .modal-body,
.modal-confirmacao.modal-md .modal-body {
    text-align: left;
}

/* ---------- Cabeçalho e rodapé de painel ---------- */
.painel-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.painel-titulo {
    margin: 0;
    color: var(--mp-ink);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.015em;
}

.painel-descricao {
    margin: 4px 0 0;
    color: var(--mp-gray-500);
    font-size: var(--mp-fs-sm);
}

.painel-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    color: var(--mp-gray-500);
    font-size: var(--mp-fs-sm);
}

@media (max-width: 575.98px) {
    .painel-rodape {
        flex-direction: column-reverse;
    }

    .painel-rodape .btn {
        width: 100%;
    }
}

/* ---------- Campo de busca com ícone ---------- */
.campo-busca {
    position: relative;
    display: block;
    flex: 1 1 240px;
    max-width: 420px;
    margin: 0;
}

.campo-busca > i,
.campo-busca > svg {
    position: absolute;
    top: 50%;
    left: 13px;
    width: 14px;
    color: var(--mp-gray-500);
    transform: translateY(-50%);
    pointer-events: none;
}

.campo-busca .form-control {
    min-height: 40px;
    padding-left: 38px;
    border-radius: 10px;
    background: var(--mp-gray-50);
}

.campo-busca .form-control:focus {
    background: var(--mp-surface);
}

/* ---------- Filtro em chips ---------- */
.filtro-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--mp-gray-200);
    border-radius: var(--mp-radius-pill);
    background: var(--mp-surface);
    color: var(--mp-gray-600);
    font-size: var(--mp-fs-sm);
    font-weight: 600;
    transition: background-color .2s, border-color .2s, color .2s;
}

.chip:hover {
    border-color: var(--mp-gray-300);
    color: var(--mp-ink);
}

.chip[aria-pressed="true"] {
    border-color: var(--mp-brand-600);
    background: var(--mp-brand-600);
    color: #fff;
}

.chip:focus-visible {
    outline: none;
    box-shadow: var(--mp-focus);
}

/* ---------- Grade de cartões de registro ---------- */
.grade-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.cartao-registro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    transition: border-color .2s, box-shadow .2s;
}

.cartao-registro:hover {
    border-color: var(--mp-brand-200);
    box-shadow: var(--mp-shadow);
}

.cartao-registro--inativo {
    background: var(--mp-gray-50);
}

.cartao-registro--inativo .celula-titulo__avatar {
    background: var(--mp-gray-200);
    color: var(--mp-gray-600);
}

.cartao-registro__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cartao-registro__dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--mp-border);
}

.cartao-registro__dados dt {
    color: var(--mp-gray-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cartao-registro__dados dd {
    margin: 2px 0 0;
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cartao-registro__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.cartao-registro__rodape small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.cartao-registro__observacao {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--mp-gray-600);
    font-size: 13px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Placeholder enquanto carrega */
.cartao-registro--esqueleto {
    min-height: 168px;
    border-color: transparent;
    background: linear-gradient(100deg, var(--mp-gray-100) 30%, var(--mp-gray-50) 50%, var(--mp-gray-100) 70%);
    background-size: 300% 100%;
    animation: esqueleto-brilho 1.4s linear infinite;
}

.cartao-registro--esqueleto:hover {
    border-color: transparent;
    box-shadow: none;
}

@keyframes esqueleto-brilho {
    to {
        background-position: -150% 0;
    }
}

.grade-cartoes > .estado-vazio {
    grid-column: 1 / -1;
}

/* ---------- Menu de ações "⋯" (dropdown com data-bs-display="static") ---------- */
.menu-acoes {
    position: relative;
    flex: none;
}

.menu-acoes .btn-acao {
    border-color: transparent;
    background: transparent;
}

.menu-acoes .btn-acao:hover,
.menu-acoes .btn-acao[aria-expanded="true"] {
    border-color: var(--mp-border);
    background: var(--mp-surface);
    color: var(--mp-ink);
}

.menu-acoes .dropdown-menu[data-bs-popper],
.menu-acoes .dropdown-menu {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 170px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    box-shadow: var(--mp-shadow);
}

.menu-acoes .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--mp-radius-sm);
    color: var(--mp-gray-700);
    font-size: var(--mp-fs-sm);
    font-weight: 500;
}

.menu-acoes .dropdown-item > i,
.menu-acoes .dropdown-item > svg {
    width: 14px;
    color: var(--mp-gray-500);
}

.menu-acoes .dropdown-item:hover,
.menu-acoes .dropdown-item:focus {
    background: var(--mp-gray-100);
    color: var(--mp-ink);
}

.menu-acoes .dropdown-item--perigo,
.menu-acoes .dropdown-item--perigo > i,
.menu-acoes .dropdown-item--perigo > svg {
    color: var(--mp-danger);
}

.menu-acoes .dropdown-item--perigo:hover {
    background: #fdecec;
    color: var(--mp-danger);
}

@media (prefers-reduced-motion: reduce) {
    .cartao-registro--esqueleto {
        animation: none;
    }
}

/* ---------- Cartão de resumo: variações ---------- */
a.resumo-cartao,
.resumo-cartao--link {
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s var(--mp-ease);
}

a.resumo-cartao:hover {
    border-color: var(--mp-brand-200);
    box-shadow: var(--mp-shadow);
    transform: translateY(-2px);
}

/* Barra de progresso dentro do cartão (largura em --proporcao) */
.resumo-cartao__barra {
    display: block;
    height: 6px;
    margin: 6px 0 4px;
    border-radius: 6px;
    background: var(--mp-gray-100);
    overflow: hidden;
}

.resumo-cartao__barra::before {
    content: "";
    display: block;
    width: var(--proporcao, 0%);
    height: 100%;
    border-radius: 6px;
    background: var(--mp-brand-500);
    transition: width .3s var(--mp-ease);
}

.resumo-cartao__barra--alerta::before {
    background: var(--mp-accent-500);
}

.resumo-cartao > div {
    min-width: 0;
}

/* Com barra de progresso, o texto ocupa a largura toda do cartão */
.resumo-cartao > div:has(> .resumo-cartao__barra) {
    flex: 1;
}

.resumo-cartao__detalhe {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--mp-gray-500);
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.variacao {
    font-weight: 700;
}

.variacao--positiva {
    color: #137a43;
}

.variacao--negativa {
    color: #b42318;
}

.texto-negativo {
    color: var(--mp-danger) !important;
}

/* ---------- Item de lista (aniversariantes, recentes...) ---------- */
.item-lista {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--mp-gray-100);
    color: inherit;
    text-decoration: none;
}

.painel-cabecalho + .item-lista {
    border-top: 0;
    padding-top: 0;
}

.item-lista--link {
    margin-inline: -8px;
    padding-inline: 8px;
    border-radius: 10px;
    transition: background-color .2s;
}

.item-lista--link:hover {
    background: var(--mp-gray-50);
    color: inherit;
}

.item-lista__texto {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.item-lista__texto a,
.item-lista__texto strong {
    overflow: hidden;
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.item-lista__texto a:hover {
    color: var(--mp-brand-700);
}

.item-lista__texto small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.item-lista__seta {
    flex: none;
    color: var(--mp-gray-300);
    font-size: 12px;
}

.item-lista .celula-titulo__avatar {
    font-size: 11px;
}

.avatar--festa {
    background: var(--mp-accent-50) !important;
    color: var(--mp-accent-600) !important;
    font-size: 15px !important;
}

.estado-vazio--compacto {
    padding: 20px 8px;
}

.estado-vazio--compacto .estado-vazio__icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
}

/* ---------- Linha do tempo (agenda) ---------- */
.linha-tempo {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.linha-tempo__item {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 16px;
    border-radius: 12px;
    transition: background-color .2s;
}

.linha-tempo__item::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--mp-brand-200);
}

.linha-tempo__item:hover {
    background: var(--mp-gray-50);
}

.linha-tempo__hora {
    display: grid;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.linha-tempo__hora strong {
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
}

.linha-tempo__hora small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.linha-tempo__corpo {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.linha-tempo__corpo strong {
    overflow: hidden;
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.linha-tempo__corpo small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.linha-tempo__item--passado {
    opacity: .55;
}

.linha-tempo__item--passado::before {
    background: var(--mp-gray-200);
}

.linha-tempo__item--cancelado .linha-tempo__corpo strong {
    text-decoration: line-through;
}

.linha-tempo__item--proximo {
    background: var(--mp-brand-50);
}

.linha-tempo__item--proximo::before,
.linha-tempo__item--agora::before {
    background: var(--mp-brand-500);
}

.linha-tempo__item--agora {
    background: var(--mp-accent-50);
}

.linha-tempo__item--agora::before {
    background: var(--mp-accent-500);
}

.linha-tempo__esqueleto {
    height: 58px;
    border-radius: 12px;
    background: linear-gradient(100deg, var(--mp-gray-100) 30%, var(--mp-gray-50) 50%, var(--mp-gray-100) 70%);
    background-size: 300% 100%;
    animation: esqueleto-brilho 1.4s linear infinite;
}

.linha-tempo__esqueleto + .linha-tempo__esqueleto {
    margin-top: 6px;
}

.linha-tempo__erro {
    padding: 16px 0;
    color: var(--mp-gray-500);
    font-size: var(--mp-fs-sm);
}

@media (max-width: 575.98px) {
    .linha-tempo__item {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 4px 12px;
    }

    .linha-tempo__item .selo-status {
        grid-column: 2;
        justify-self: start;
    }
}

/* ---------- Mini indicadores (rótulo + valor em linha) ---------- */
.mini-indicadores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 8px;
}

.mini-indicadores dt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mp-gray-500);
    font-size: 12px;
    font-weight: 600;
}

.mini-indicadores dd {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--mp-ink);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.ponto {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ponto--entrada {
    background: var(--mp-brand-500);
}

.ponto--saida {
    background: var(--mp-accent-500);
}

.ponto--saldo {
    background: var(--mp-ink);
}

@media (max-width: 575.98px) {
    .mini-indicadores dd {
        font-size: .9375rem;
    }
}

/* ---------- Abas segmentadas (ex.: período de gráfico) ---------- */
.alternador-abas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--mp-gray-100);
}

.alternador-abas > button {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mp-gray-600);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.alternador-abas > button:hover {
    color: var(--mp-ink);
}

.alternador-abas > button.active {
    background: var(--mp-surface);
    color: var(--mp-ink);
    box-shadow: var(--mp-shadow-sm);
}

.alternador-abas > button:focus-visible {
    outline: none;
    box-shadow: var(--mp-focus);
}

/* ---------- Valores carregando / positivos ---------- */
.carregando-texto {
    color: transparent !important;
    border-radius: 6px;
    background: linear-gradient(100deg, var(--mp-gray-100) 30%, var(--mp-gray-50) 50%, var(--mp-gray-100) 70%);
    background-size: 300% 100%;
    animation: esqueleto-brilho 1.4s linear infinite;
}

.texto-positivo {
    color: #137a43 !important;
}

html[data-tema="escuro"] .texto-positivo {
    color: #6ee7a0 !important;
}

html[data-tema="escuro"] .texto-negativo {
    color: #fca5a5 !important;
}

/* ---------- Data e hora em célula (data em cima, hora embaixo) ---------- */
.celula-data {
    display: grid;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.celula-data strong {
    color: var(--mp-ink);
    font-weight: 600;
}

.celula-data small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

/* ---------- Textos de apoio ---------- */
.texto-alerta {
    color: var(--mp-accent-600) !important;
}

.texto-suave {
    color: var(--mp-gray-500) !important;
}

html[data-tema="escuro"] .texto-alerta {
    color: #ffa47f !important;
}

/* Os avisos de exibirCaixaAlerta (index.js) também usam .texto-alerta no texto: ali mantém a cor do aviso */
.alert-temporario .texto-alerta,
html[data-tema="escuro"] .alert-temporario .texto-alerta {
    color: inherit !important;
}

/* ---------- Aviso em faixa (ícone + texto) ---------- */
.aviso {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--mp-accent-50);
    color: var(--mp-ink);
    font-size: 13px;
}

.aviso > i {
    flex: none;
    margin-top: 3px;
    color: var(--mp-accent-600);
}

.aviso--info {
    background: var(--mp-brand-50);
}

.aviso--info > i {
    color: var(--mp-brand-600);
}

/* ---------- Aviso de vencimento do plano/teste (layout, acima do conteúdo) ---------- */
.aviso-vencimento {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding: 14px 16px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow-sm);
}

.aviso-vencimento__icone {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--mp-accent-50);
    color: var(--mp-accent-600);
    font-size: 17px;
}

.aviso-vencimento__texto {
    flex: 1;
    min-width: 0;
}

.aviso-vencimento__texto strong {
    display: block;
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
}

.aviso-vencimento__texto p {
    margin: 2px 0 0;
    color: var(--mp-gray-500);
    font-size: 13px;
}

.aviso-vencimento__acao {
    flex: none;
}

/* Vencido ou a 2 dias: a faixa inteira em coral */
.aviso-vencimento--critico {
    border-color: var(--mp-accent-100);
    background: var(--mp-accent-50);
}

.aviso-vencimento--critico .aviso-vencimento__icone {
    background: var(--mp-accent-500);
    color: #fff;
}

@media (max-width: 575.98px) {
    .aviso-vencimento {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .aviso-vencimento__texto {
        flex-basis: calc(100% - 56px);
    }

    .aviso-vencimento__acao {
        width: 100%;
    }
}

/* ---------- Rótulo de grupo de campos ---------- */
.rotulo-campo {
    margin: 0 0 6px;
    color: var(--mp-gray-600);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Controle segmentado (radios estilizados) ---------- */
.segmentado {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--mp-gray-100);
}

.segmentado__opcao {
    flex: 1;
    margin: 0;
    cursor: pointer;
}

.segmentado__opcao > span {
    display: grid;
    place-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 9px;
    color: var(--mp-gray-600);
    font-size: var(--mp-fs-sm);
    font-weight: 600;
    text-align: center;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.segmentado__opcao:hover > span {
    color: var(--mp-ink);
}

.segmentado__opcao input:checked + span {
    background: var(--mp-surface);
    color: var(--mp-brand-700);
    box-shadow: var(--mp-shadow-sm);
}

.segmentado__opcao--alerta input:checked + span {
    color: var(--mp-accent-600);
}

.segmentado__opcao input:focus-visible + span {
    box-shadow: var(--mp-focus);
}

/* Variante com <button aria-pressed> (atalhos que não são um campo do formulário) */
button.segmentado__opcao {
    padding: 0;
    border: 0;
    background: none;
}

button.segmentado__opcao[aria-pressed="true"] > span {
    background: var(--mp-surface);
    color: var(--mp-brand-700);
    box-shadow: var(--mp-shadow-sm);
}

button.segmentado__opcao:focus-visible > span {
    box-shadow: var(--mp-focus);
}

button.segmentado__opcao:focus-visible {
    outline: none;
}

button.segmentado__opcao:disabled {
    cursor: default;
    opacity: .55;
}

.segmentado--compacto {
    flex: none;
    padding: 3px;
}

.segmentado--compacto .segmentado__opcao > span {
    min-width: 54px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
}

.segmentado--bloqueado {
    opacity: .65;
    pointer-events: none;
}

/* ---------- Chip com checkbox (seleção múltipla) ---------- */
.chip--check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.chip--check:has(input:checked) {
    border-color: var(--mp-brand-600);
    background: var(--mp-brand-600);
    color: #fff;
}

.chip--check:has(input:focus-visible) {
    box-shadow: var(--mp-focus);
}

/* Opção que, marcada, indica algo fora do padrão: coral claro com texto coral escuro (nunca texto branco no coral) */
.chip--check.chip--fora:has(input:checked) {
    border-color: var(--mp-accent-500);
    background: var(--mp-accent-50);
    color: var(--mp-accent-600);
}

/* ---------- Campo de dentes (analisesOrto.js → campoDentes) ----------
   Dentes em etiquetas removíveis e um campo para digitar o próximo, com a aparência de um .form-control */
.campo-dentes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 5px 8px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--mp-surface);
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}

html[data-tema="escuro"] .campo-dentes {
    background: var(--mp-gray-50);
}

.campo-dentes:focus-within {
    border-color: var(--mp-brand-400);
    box-shadow: var(--mp-focus);
}

.campo-dentes.is-invalid {
    border-color: var(--mp-danger);
}

.campo-dentes__dente {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 2px 2px 10px;
    border-radius: var(--mp-radius-pill);
    background: var(--mp-brand-50);
    color: var(--mp-brand-700);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.campo-dentes__dente button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 11px;
}

.campo-dentes__dente button:hover,
.campo-dentes__dente button:focus-visible {
    outline: none;
    background: var(--mp-brand-100);
}

.campo-dentes__entrada {
    flex: 1;
    min-width: 140px;
    padding: 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mp-text);
    font-size: var(--mp-fs-sm);
}

.campo-dentes__entrada::placeholder {
    color: var(--mp-gray-500);
}

/* ---------- Campo com autocomplete (index.js → autocomplete()) ---------- */
.campo-autocomplete {
    position: relative;
}

.campo-autocomplete .lista-autocomplete {
    top: calc(100% + 4px);
    z-index: 20;
    max-height: 260px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--mp-border);
    border-radius: 12px;
    background: var(--mp-surface);
    box-shadow: var(--mp-shadow);
}

.campo-autocomplete .opcao-autocomplete {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--mp-text);
}

.campo-autocomplete .opcao-autocomplete:hover {
    background: var(--mp-gray-100);
}

/* Opção marcada pelo teclado (↑ ↓) */
.campo-autocomplete .opcao-autocomplete.ativa {
    background: var(--mp-brand-50);
}

/* Última opção: usar o texto digitado quando ele não está na lista */
.campo-autocomplete .opcao-autocomplete--novo {
    color: var(--mp-brand-700);
    font-weight: 600;
}

.campo-autocomplete .opcao-autocomplete--novo:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--mp-gray-100);
    border-radius: 0 0 8px 8px;
}

.lista-autocomplete__vazio {
    margin: 0;
    padding: 8px 10px;
    color: var(--mp-gray-500);
    font-size: 13px;
}

/* Variante "select com digitação": seta à direita que abre a lista inteira */
.campo-autocomplete--select .form-control {
    padding-right: 40px;
}

.campo-autocomplete__abrir {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mp-gray-500);
}

.campo-autocomplete__abrir i {
    font-size: 12px;
    transition: transform .2s;
}

.campo-autocomplete--select:has([aria-expanded="true"]) .campo-autocomplete__abrir i {
    transform: rotate(180deg);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.autocomplete-item small {
    flex: none;
    color: var(--mp-gray-500);
    font-size: 12px;
}

/* ---------- Ranking com barra proporcional (--proporcao) ---------- */
.ranking {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ranking__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
}

.ranking__texto {
    display: grid;
    min-width: 0;
    line-height: 1.3;
}

.ranking__texto strong {
    overflow: hidden;
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ranking__texto small {
    color: var(--mp-gray-500);
    font-size: 12px;
}

.ranking__valor {
    color: var(--mp-ink);
    font-size: var(--mp-fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ranking__barra {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 6px;
    background: var(--mp-gray-100);
    overflow: hidden;
}

.ranking__barra::before {
    content: "";
    display: block;
    width: var(--proporcao);
    height: 100%;
    border-radius: 6px;
    background: var(--mp-accent-500);
}

.ranking--marca .ranking__barra::before {
    background: var(--mp-brand-500);
}

/* ---------- Barra de ações fixa no rodapé de formulários longos ---------- */
.barra-acoes {
    position: sticky;
    bottom: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    background: var(--mp-surface-translucida);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--mp-shadow);
}

.barra-acoes__status {
    margin-right: auto;
    color: var(--mp-accent-600);
    font-size: var(--mp-fs-sm);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .barra-acoes {
        flex-wrap: wrap;
        bottom: 8px;
        padding: 10px;
    }

    .barra-acoes__status {
        flex-basis: 100%;
        text-align: center;
    }

    .barra-acoes .btn {
        flex: 1;
    }
}

/* ---------- Marcas (Você, Responsável, CRO…) ---------- */
.usuario-marcas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.usuario-marca {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--mp-radius-pill);
    background: var(--mp-gray-100);
    color: var(--mp-gray-700);
    font-size: 12px;
    font-weight: 600;
}

.usuario-marca i {
    color: var(--mp-gray-500);
    font-size: 11px;
}

.usuario-marca--voce {
    background: var(--mp-brand-50);
    color: var(--mp-brand-700);
}

/* ---------- Lista de anamnese (cadastro do paciente e prévia em /configuracao/anamnese) ---------- */
.anamnese-lista {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pergunta;
}

.anamnese-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 10px;
    border-top: 1px solid var(--mp-gray-100);
    border-radius: 10px;
    counter-increment: pergunta;
    transition: background-color .2s;
}

.anamnese-item:first-child {
    border-top: 0;
}

.anamnese-item__pergunta {
    min-width: 0;
    margin: 0;
    color: var(--mp-gray-700);
    font-size: var(--mp-fs-sm);
    font-weight: 500;
}

.anamnese-item__pergunta::before {
    content: counter(pergunta) ".";
    display: inline-block;
    min-width: 26px;
    color: var(--mp-gray-500);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.anamnese-item--sim {
    background: var(--mp-accent-50);
}

.anamnese-item--sim .anamnese-item__pergunta {
    color: var(--mp-ink);
}

.anamnese-item--aberta {
    display: grid;
    gap: 8px;
}

.anamnese-item--aberta textarea {
    border-radius: 12px;
}

@media (max-width: 575.98px) {
    .anamnese-item:not(.anamnese-item--aberta) {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}

/* ---------- Campo de senha com botão de mostrar/ocultar ----------
   .campo-senha (no .form-floating) > input + button.campo-senha__alternar[data-alternar-senha]
   O clique é tratado no index.js; campos sem o botão no HTML ganham um em adicionarBotaoVisualizarSenha(). */
.campo-senha {
    position: relative;
}

.campo-senha .form-control {
    padding-right: 52px;
}

/* O ícone de validação do Bootstrap fica antes do botão */
.campo-senha .form-control.is-invalid,
.campo-senha .form-control.is-valid {
    background-position: right 52px center;
}

/* Edge/IE têm um "olhinho" nativo: escondido para não duplicar com o nosso */
.campo-senha input::-ms-reveal,
.campo-senha input::-ms-clear {
    display: none;
}

.campo-senha__alternar {
    position: absolute;
    top: 7px;
    right: 6px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--mp-radius-sm);
    background: transparent;
    color: var(--mp-gray-500);
}

.campo-senha__alternar:hover {
    color: var(--mp-ink);
}

.campo-senha__alternar:focus-visible {
    outline: 2px solid var(--mp-focus);
    outline-offset: -2px;
}