/* --------------------------------------------------------------------------
   Dentinho — camada fina sobre o Bootstrap 5
   -------------------------------------------------------------------------- */

:root {
    /* --------------------------------------------------------------------
       Paleta da Catcom — os mesmos tokens do :root de www.catcom.com.br
       (css/modern.css). Mudar aqui muda o sistema inteiro.
       -------------------------------------------------------------------- */
    --catcom-blue: #1d4ed8;        /* --primary       */
    --catcom-blue-light: #3b82f6;  /* --primary-light */
    --catcom-blue-dark: #1e40af;   /* --primary-dark  */
    --catcom-accent: #f59e0b;      /* --accent        */
    --catcom-accent-dark: #d97706; /* --accent-dark   */
    --catcom-font: "Orbitron", "Inter", system-ui, sans-serif;

    --brand: var(--catcom-blue);
    --brand-dark: var(--catcom-blue-dark);
    --brand-soft: #eff6ff;

    --surface: #ffffff;
    --page-bg: #f8fafc;            /* --bg-section    */
    --border: #e2e8f0;             /* --border        */
    --text: #1e293b;               /* --text          */
    --text-muted: #475569;         /* --text-muted    */
    --danger: #ef4444;
    --success: #16a34a;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Faz utilitários do Bootstrap (text-bg-primary, text-primary, links,
       anel de foco) seguirem o azul da Catcom. */
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: #1e40af;
    --bs-focus-ring-color: rgba(29, 78, 216, 0.1);
}

body {
    background-color: var(--page-bg);
    color: var(--text);
    font-family: var(--bs-body-font-family);
}

/* ------------------------------------------------------------------ navbar */
.app-navbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111827;
}

.app-navbar .navbar-brand .brand-logo {
    display: block;
    filter: drop-shadow(0 2px 6px rgba(29, 78, 216, 0.25));
}

.app-navbar .navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Mesma tipografia do site: Orbitron 900 no wordmark, com o gradiente que a
   catcom.com.br usa sobre fundo claro (#navbar.scrolled .logo-name). */
.app-navbar .navbar-brand .brand-company {
    font-family: var(--catcom-font);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2.5px;
    background: linear-gradient(135deg, #1e293b 30%, var(--catcom-blue) 70%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--catcom-blue);
}

.app-navbar .navbar-brand .brand-app {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-top: 2px;
}

.app-navbar .nav-link {
    color: #4b5563;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
}

.app-navbar .nav-link:hover {
    background: #f3f4f6;
    color: #111827;
}

.app-navbar .nav-link.active {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

/* ------------------------------------------------------------------- cards */
.card {
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0 !important;
    font-weight: 600;
}

.page-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.15rem;
}

.page-subtitle {
    color: var(--text-muted);
    margin-bottom: 0;
}

/* ------------------------------------------------------------- estatísticas */
.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 1.2rem;
}

/* ---------------------------------------------------------------- progresso */
.progress {
    background-color: #eef0f5;
    border-radius: 99px;
}

.progress-bar {
    background-color: var(--brand);
}

.progress-thin {
    height: 6px;
}

/* --------------------------------------------------------------------------
   Botões — mesmas regras do .btn/.btn-primary do site: peso 600, raio 8px e,
   no hover, o azul escuro com a elevação de 2px e a sombra azulada.
   -------------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--catcom-blue);
    --bs-btn-border-color: var(--catcom-blue);
    --bs-btn-hover-bg: var(--catcom-blue-dark);
    --bs-btn-hover-border-color: var(--catcom-blue-dark);
    --bs-btn-active-bg: var(--catcom-blue-dark);
    --bs-btn-active-border-color: var(--catcom-blue-dark);
    --bs-btn-disabled-bg: var(--catcom-blue);
    --bs-btn-disabled-border-color: var(--catcom-blue);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.3);
}

.btn-outline-primary {
    --bs-btn-color: var(--catcom-blue);
    --bs-btn-border-color: var(--catcom-blue);
    --bs-btn-hover-bg: var(--catcom-blue);
    --bs-btn-hover-border-color: var(--catcom-blue);
    --bs-btn-active-bg: var(--catcom-blue-dark);
    --bs-btn-active-border-color: var(--catcom-blue-dark);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #15803d;
    --bs-btn-active-border-color: #15803d;
}

.btn-warning {
    --bs-btn-bg: var(--catcom-accent);
    --bs-btn-border-color: var(--catcom-accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--catcom-accent-dark);
    --bs-btn-hover-border-color: var(--catcom-accent-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* --------------------------------------------------------------------------
   Formulários — espelham .form-group input do site: fundo #f8fafc, borda
   #e2e8f0, raio 8px e, no foco, borda azul + anel rgba(29,78,216,.1) e fundo
   branco.
   -------------------------------------------------------------------------- */
.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color: var(--catcom-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.form-control::placeholder {
    color: #94a3b8;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f1f5f9;
}

.input-group-text {
    background-color: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
}

/* O input-group precisa manter os cantos internos retos. */
.input-group > :not(:last-child).form-control,
.input-group > :not(:last-child).input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > :not(:first-child).form-control,
.input-group > :not(:first-child).input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
    background-color: #fef2f2;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.invalid-feedback {
    color: var(--danger);
}

.form-check-input:checked {
    background-color: var(--catcom-blue);
    border-color: var(--catcom-blue);
}

.form-check-input:focus {
    border-color: var(--catcom-blue);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.text-brand {
    color: var(--catcom-blue) !important;
}

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(160deg, #eff6ff 0%, var(--page-bg) 45%, var(--page-bg) 100%);
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.auth-brand img {
    filter: drop-shadow(0 3px 10px rgba(29, 78, 216, 0.3));
}

.auth-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    text-align: left;
}

/* Espelha .logo-name / .logo-tagline do catcom.com.br: Orbitron 900 a 24px com
   4px de tracking, e a tagline em Inter 600 a 8.5px com 5px de tracking. */
.auth-brand-name {
    font-family: var(--catcom-font);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 4px;
    background: linear-gradient(135deg, #1e293b 30%, var(--catcom-blue) 70%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--catcom-blue);
}

.auth-brand-tagline {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #475569;
    margin-top: 3px;
}

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.table > :not(caption) > * > * {
    padding: 0.7rem 0.75rem;
}

.table thead th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* ==========================================================================
   Selos de situação
   ========================================================================== */

.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35em 0.7em;
    font-size: 0.75rem;
}

.badge-soft-primary   { background: #eff6ff; color: #1d4ed8; }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }
.badge-soft-success   { background: #f0fdf4; color: #15803d; }
.badge-soft-danger    { background: #fef2f2; color: #b91c1c; }
.badge-soft-warning   { background: #fffbeb; color: #b45309; }
.badge-soft-info      { background: #f0f9ff; color: #0369a1; }

/* ==========================================================================
   Prontuário
   ========================================================================== */

.definition-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

/* Cabeçalho do paciente: iniciais no lugar da foto, que o sistema não guarda. */
.patient-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

/* Alerta clínico do topo do prontuário: alergia e uso de anticoagulante são a
   informação que não pode passar despercebida antes de uma anestesia. */
.alerta-clinico {
    border-left: 4px solid var(--danger);
    background: #fef2f2;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link.active {
    color: var(--catcom-blue);
    background: transparent;
    border-bottom-color: var(--catcom-blue);
}

/* ==========================================================================
   Agenda
   ========================================================================== */

.calendario {
    table-layout: fixed;
    width: 100%;
}

.calendario th {
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem 0;
}

.calendario td {
    vertical-align: top;
    border: 1px solid var(--border);
    height: 118px;
    padding: 0.35rem;
    background: var(--surface);
}

.calendario td.fora-do-mes {
    background: #fafbfc;
}

.calendario td.fora-do-mes .dia-numero {
    color: #cbd5e1;
}

.calendario td.hoje {
    box-shadow: inset 0 0 0 2px var(--catcom-blue);
}

.calendario .dia-numero {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.calendario .compromisso {
    display: block;
    font-size: 0.7rem;
    line-height: 1.25;
    padding: 0.15rem 0.3rem;
    margin-top: 0.15rem;
    border-radius: 5px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendario .compromisso:hover {
    background: #dbeafe;
}

.calendario .compromisso.cancelado {
    background: #f1f5f9;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Agenda do dia: a hora à esquerda, o atendimento à direita. */
.agenda-linha {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px dashed var(--border);
}

.agenda-linha:last-child {
    border-bottom: 0;
}

.agenda-hora {
    flex: 0 0 84px;
    font-weight: 700;
    color: var(--catcom-blue);
}

.agenda-hora small {
    display: block;
    font-weight: 500;
    color: var(--text-muted);
}

/* ==========================================================================
   Orçamento — itens

   Cada item é uma grade, não uma linha de tabela: no desktop as colunas ficam
   alinhadas como numa tabela, e no celular elas se reorganizam sem que o valor
   saia da tela. É o momento em que se preenche o orçamento com o paciente na
   cadeira — o total precisa estar à vista enquanto se digita.
   ========================================================================== */

.item-linha {
    display: grid;
    gap: 0.5rem;
    align-items: end;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--border);

    /* procedimento | descrição | dente | qtd | unitário | total | remover
       As larguras somam ~700px no mínimo, que é o que sobra dentro do cartão a
       768px — o ponto exato em que a grade entra. Mínimos maiores faziam a
       página transbordar justamente na virada para o tablet em retrato. */
    grid-template-columns: minmax(110px, 1.3fr) minmax(120px, 1.6fr) 72px 60px 96px 88px 40px;
}

.item-linha:last-child {
    border-bottom: 0;
}

.item-linha .form-control,
.item-linha .form-select {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
}

/* O rótulo de cada campo só aparece no celular; no desktop quem rotula é o
   cabeçalho da grade. */
.rotulo-item {
    display: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.item-linha .campo-total {
    text-align: right;
    padding-bottom: 0.45rem;
}

.item-linha .campo-remover {
    padding-bottom: 0.2rem;
}

/* Cabeçalho da grade — some junto com o formato de colunas. */
.itens-cabecalho {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(110px, 1.3fr) minmax(120px, 1.6fr) 72px 60px 96px 88px 40px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.itens-cabecalho .text-end {
    text-align: right;
}

/* ==========================================================================
   Impressão (anamnese, orçamento, receita e extrato)
   ========================================================================== */

.print-sheet {
    max-width: 820px;
    margin: 2rem auto;
    background: #fff;
    padding: 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
}

.print-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--text);
}

.print-clinica-nome {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.print-clinica-dados {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Rodapé de conferência: QR à esquerda, código legível à direita. */
.print-assinatura {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.print-assinatura .qr {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
}

.print-assinatura .qr img,
.print-assinatura .qr canvas {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.print-codigo {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: var(--text);
}

/* Linha de assinatura do profissional. */
.print-firma {
    margin-top: 3rem;
    text-align: center;
}

.print-firma .linha {
    width: 280px;
    margin: 0 auto 0.35rem;
    border-top: 1px solid var(--text);
}

@media print {
    body {
        background: #fff;
    }

    .no-print {
        display: none !important;
    }

    .print-sheet {
        margin: 0;
        border: 0;
        padding: 0;
        max-width: none;
    }

    /* Duas vias do receituário de controle especial saem em folhas separadas. */
    .quebra-pagina {
        break-before: page;
        page-break-before: always;
    }
}

.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Telas pequenas

   O sistema é usado no consultório de três jeitos: no computador da recepção,
   no tablet e no celular do dentista entre um atendimento e outro. A regra que
   organiza esta seção é uma só: **abaixo de 768px a tabela deixa de ser
   tabela**.

   Tabela estreita rola de lado, e o que sai da tela primeiro é a última coluna
   — justamente a das ações, onde o dedo precisa chegar. Por isso a listagem
   vira pilha de cartões, com o rótulo de cada campo vindo do `data-rotulo` da
   própria célula: a marcação continua sendo escrita UMA vez, e as duas formas
   nunca divergem.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ---------------------------------------------- listagem em cartões */
    .lista-registros thead {
        /* Sai da tela, mas continua no fluxo para o leitor de tela. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lista-registros,
    .lista-registros tbody,
    .lista-registros tr,
    .lista-registros td {
        display: block;
        width: auto;
    }

    .lista-registros tr {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 0.85rem 1rem;
        margin-bottom: 0.75rem;
        background: var(--surface);
    }

    /* O Bootstrap desenha as bordas da tabela por variável; num cartão elas
       viram linha solta no meio do conteúdo. */
    .lista-registros > :not(caption) > * > * {
        box-shadow: none;
        border-bottom: 0;
        padding: 0.3rem 0;
    }

    .lista-registros td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        margin-bottom: 0.1rem;
    }

    /* Célula sem rótulo é o título do cartão (o nome) ou a barra de ações. */
    .lista-registros td:not([data-rotulo]) {
        text-align: left !important;
    }

    .lista-registros td.celula-titulo {
        font-size: 1.05rem;
        font-weight: 600;
        padding-bottom: 0.5rem;
    }

    .lista-registros td.celula-acoes {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding-top: 0.7rem;
        margin-top: 0.4rem;
        border-top: 1px dashed var(--border);
    }

    /* Célula vazia no cartão só ocuparia espaço em branco. */
    .lista-registros td:empty {
        display: none;
    }

    /* A rolagem lateral do wrapper deixa de ter função quando não há tabela. */
    .table-responsive:has(.lista-registros) {
        overflow-x: visible;
    }

    /* ------------------------------------------------- alvos de toque */

    /* 44px é o mínimo confortável para o polegar; abaixo disso o botão exige
       mira. Vale para os botões de ação das listagens, que são btn-sm. */
    .btn-sm,
    .lista-registros .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Barra de ações do topo: os botões ocupam a largura toda em vez de se
       espremerem no canto. Funciona nos dois usos — no container, quando há
       mais de um botão, e no próprio botão, quando ele é o único. */
    .acoes-topo {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .acoes-topo > .btn,
    a.btn.acoes-topo {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* ------------------------------------------------------- diversos */

    /* O autocompletar de paciente cobriria o formulário inteiro. */
    .list-group.position-absolute {
        max-height: 45vh;
        overflow-y: auto;
    }

    /* Cartões de indicador do painel: o valor não pode quebrar em duas linhas. */
    .stat-card .stat-value {
        font-size: 1.45rem;
    }

    .stat-card .stat-label {
        font-size: 0.72rem;
    }

    /* Abas do prontuário rolam em vez de quebrar em três fileiras. */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* A folha impressa mantém a largura de papel; no celular ela rola dentro
       do próprio bloco em vez de esticar a página. */
    .print-sheet {
        padding: 1.25rem;
        margin: 0.75rem;
        overflow-x: auto;
    }
}

@media (max-width: 767.98px) {
    /* No extrato, o saldo após cada lançamento é o número que a pessoa abriu a
       tela para ver — no cartão ele ganha o peso que a coluna dava. */
    .lista-registros td.saldo-acumulado {
        font-size: 1.1rem;
        padding-top: 0.5rem;
        margin-top: 0.3rem;
        border-top: 1px dashed var(--border);
    }
}

@media (max-width: 767.98px) {
    /* ------------------------------------------ itens do orçamento */

    .itens-cabecalho {
        display: none;             /* cada campo passa a levar o próprio rótulo */
    }

    .rotulo-item {
        display: block;
    }

    /* Duas fileiras: procedimento e descrição em cima, e dente / qtd / unitário
       lado a lado embaixo — os três campos curtos cabem numa linha só. */
    .item-linha {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        padding: 0.9rem;
        margin-bottom: 0.75rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface);
    }

    .item-linha .campo-procedimento,
    .item-linha .campo-descricao {
        grid-column: 1 / -1;
    }

    /* O total do item e o botão de remover fecham o bloco, sempre visíveis. */
    .item-linha .campo-total {
        grid-column: 1 / 3;
        text-align: left;
        padding-top: 0.4rem;
        border-top: 1px dashed var(--border);
    }

    .item-linha .campo-total [data-total-linha] {
        font-size: 1.1rem;
    }

    .item-linha .campo-remover {
        grid-column: 3 / -1;
        justify-self: end;
        align-self: end;
        padding-top: 0.4rem;
    }

    /* Resumo fixo no rodapé: montar orçamento na cadeira é justamente quando o
       total precisa ficar à vista enquanto se digita. */
    .resumo-orcamento {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: var(--surface);
        border-top: 2px solid var(--border);
        margin: 0 -1rem -1rem;
        padding: 0.75rem 1rem;
        box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.08);
    }
}

/* ==========================================================================
   Agenda do mês no celular

   A grade de sete colunas é substituída por esta lista abaixo de md — ver o
   comentário em views/agenda/calendario.php.
   ========================================================================== */

.dia-agenda {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.dia-agenda-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.dia-agenda-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    min-height: 44px;
}

.dia-agenda-item .hora {
    font-weight: 700;
    color: var(--catcom-blue);
    flex: 0 0 46px;
}

.dia-agenda-item.cancelado {
    color: var(--text-muted);
}

.dia-agenda-item.cancelado .hora {
    color: var(--text-muted);
    text-decoration: line-through;
}