/*
 * NeuroDoc additions on top of duralux.css.
 *
 * Deliberately small: it only covers what the Duralux stylesheet has no
 * class for (a text wordmark instead of the shipped bitmap logo, Django's
 * own form/errorlist markup, print output). No Duralux token, colour,
 * shadow or radius is redefined here.
 */

/* ---- Sidebar wordmark (Duralux ships a bitmap logo we do not have) ---- */
.nxl-navigation .m-header .b-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nxl-navigation .m-header .brand-mark {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    background: var(--bs-primary, #3454d1);
}

.nxl-navigation .m-header .logo-lg {
    color: #283c50;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1;
    white-space: nowrap;
}

/* Duralux fixes the sidebar body at calc(100vh - 80px) and relies on the
 * perfect-scrollbar plugin to scroll it. Without that plugin the lower menu
 * items are simply unreachable on a short screen, so scroll it natively. */
.nxl-navigation .navbar-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

/* ---- Authentication / public shell ----------------------------------- */
/* Duralux styles the auth card (.auth-container .card.wd-450) but leaves the
 * page that holds it to the template. */
.nd-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.nd-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    text-decoration: none;
}

.nd-auth-brand .brand-mark {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    background: var(--bs-primary, #3454d1);
}

.nd-auth-brand .brand-name {
    color: #283c50;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* ---- Django form rendering ------------------------------------------- */
/* Forms are rendered field by field with Duralux classes wherever the
 * template controls the markup. Where a form is still rendered through
 * Django's own {{ form }} output, these rules keep it inside the design
 * language instead of falling back to unstyled browser controls. */
.nd-form ul.errorlist {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--bs-danger, #ea4d4d);
    font-size: 12px;
    font-weight: 500;
}

.nd-form .helptext {
    display: block;
    margin-top: 0.35rem;
    color: #6b7280;
    font-size: 11px;
}

.nd-form p {
    margin-bottom: 1rem;
}

.nd-form label {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #283c50;
    font-size: 13px;
    font-weight: 600;
}

.nd-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.nd-form select,
.nd-form textarea {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    color: #283c50;
    background-color: #fff;
    border: 1px solid #dcdee4;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nd-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):focus,
.nd-form select:focus,
.nd-form textarea:focus {
    border-color: var(--bs-primary, #3454d1);
    box-shadow: 0 0 0 0.2rem rgba(52, 84, 209, 0.15);
    outline: 0;
}

/* ---- Accessibility --------------------------------------------------- */
/* Duralux removes the default outline on several controls; a visible focus
 * ring is a hard requirement for keyboard use of a clinical record. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.nxl-link:focus-visible,
.nxl-head-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--bs-primary, #3454d1);
    outline-offset: 2px;
}

.nd-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 10px 16px;
    background: #fff;
    color: #283c50;
    font-weight: 600;
    border-radius: 0 0 6px 0;
}

.nd-skip-link:focus {
    left: 0;
}

/* ---- Logotipo da clínica no menu lateral ----------------------------- */

/* Altura fixa e largura livre: logotipo de clínica vem em proporção
 * imprevisível — faixa horizontal, quadrado, brasão alto. Limitar a altura
 * e deixar a largura seguir mantém a proporção e impede que uma faixa
 * larga estoure a coluna de 280px do menu. */
.nd-sidebar-logo {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ---- Long clinical text --------------------------------------------- */
.nd-prose {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- Campos de texto ------------------------------------------------- */
/*
 * Sem alca de redimensionamento. Arrastar o canto de um campo nao e uma
 * decisao que o prontuario deva pedir a quem esta atendendo, e cada caixa
 * arrastada deixava a tela um pouco mais torta que a anterior.
 *
 * A caixa cresce sozinha conforme o texto (`app.js`, autogrow), entao nada
 * se perde: quem escreve uma historia longa continua vendo o que escreveu,
 * sem precisar arrastar nada.
 */
textarea.form-control,
textarea.form-control-sm {
    resize: none;
    overflow-y: hidden;
}

/* Enquanto o JS nao rodou (ou falhou), a caixa nao pode ficar cortada. */
.no-js textarea.form-control {
    overflow-y: auto;
}

/* ---- Consumo do plano (indicadores) ---------------------------------- */
/* A barra e fina de proposito: ela acompanha um numero que ja esta escrito
 * ao lado, e nao substitui a leitura dele. Barra grossa pediria atencao
 * que o dado nao merece todo dia -- so quando enche, e para isso serve a
 * cor. */
.nd-plano-barra {
    height: 8px;
    border-radius: 4px;
}

/* ---- Busca rapida global (Ctrl+K) ------------------------------------ */
/* Sobreposicao propria, e nao o modal do tema: a busca precisa abrir no
 * primeiro terco da tela (onde o olho ja esta, e onde o teclado do celular
 * nao a empurra para fora), e o modal do tema centraliza verticalmente.
 *
 * O `display:flex` daqui precisava do `[hidden]` logo abaixo para nao
 * deixar a caixa sempre aberta -- hoje a regra geral no fim do arquivo
 * cuida disso, e esta continua so por clareza local. */
.nd-busca-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(0, 19, 39, .45);
}

.nd-busca-overlay[hidden] {
    display: none;
}

.nd-busca-caixa {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 48px rgba(0, 19, 39, .28);
    overflow: hidden;
}

.nd-busca-campo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-gray-200);
}

.nd-busca-campo input {
    flex: 1;
    border: 0;
    outline: 0;
    /* 16px: abaixo disso o Safari do iPhone da zoom ao focar o campo, e a
     * tela inteira pula. Vale para todo campo do produto. */
    font-size: 16px;
    color: var(--bs-dark);
    background: transparent;
}

.nd-busca-resultados {
    max-height: 48vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nd-busca-resultados li a {
    display: block;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
    /* 40px de alvo: o mesmo minimo de toque do resto do produto. */
    min-height: 40px;
}

.nd-busca-resultados li a:hover,
.nd-busca-resultados li.is-ativo a {
    background: var(--bs-gray-100);
}

.nd-busca-rodape {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--bs-gray-200);
    background: var(--bs-gray-100);
}

.nd-busca-tecla {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--bs-gray-300);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fff;
    font-size: 11px;
    line-height: 1.5;
    color: var(--bs-gray-600);
}

/* ---- Atendimento: rascunho local e consulta anterior ------------------ */
/* O aviso de rascunho fica preso ao topo da area de trabalho: ele aparece
 * quando a pagina carrega e a decisao (restaurar ou descartar) e do
 * momento seguinte -- rolar a tela e perde-lo de vista seria trocar o
 * aviso por uma duvida. */
.nd-rascunho-aviso {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Gaveta da consulta anterior. `transform` em vez de `right`, porque
 * animar posicao repinta a pagina inteira a cada quadro e a gaveta abre
 * por cima de um prontuario sendo digitado. */
.nd-gaveta {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1070;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    height: 100vh;
    background: #fff;
    box-shadow: -12px 0 32px rgba(0, 19, 39, .18);
    transform: translateX(100%);
    transition: transform .18s ease-out;
}

.nd-gaveta.is-aberta {
    transform: translateX(0);
}

.nd-gaveta-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-gray-200);
}

.nd-gaveta-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.nd-gaveta-fundo {
    position: fixed;
    inset: 0;
    z-index: 1069;
    background: rgba(0, 19, 39, .35);
}

.nd-gaveta-fundo[hidden] {
    display: none;
}

/* Quem desligou animacao no sistema recebe a gaveta sem deslize: ela
 * aparece e some, que e a informacao que a animacao carregava. */
@media (prefers-reduced-motion: reduce) {
    .nd-gaveta {
        transition: none;
    }
}

/* ---- Contrato de adesao ---------------------------------------------- */
/*
 * Texto longo para ler na tela, em tres lugares: a pagina publica, a
 * caixa do cadastro e o console da instalacao. O que muda entre eles e o
 * recipiente; a tipografia e a mesma, e por isso mora aqui e nao em cada
 * template.
 *
 * `max-width` em caractere (`ch`) e nao em pixel: a medida que importa
 * numa coluna de texto e quantas letras cabem na linha, e nenhuma fonte
 * garante isso em pixel. Entre 60 e 75 caracteres e onde o olho volta
 * para a linha certa sem se perder.
 */
.nd-contrato {
    max-width: 72ch;
    color: var(--bs-body-color, #4b5563);
    font-size: 13px;
    line-height: 1.7;
}

.nd-contrato-cabeca {
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.nd-contrato-clausulas,
.nd-contrato-itens {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nd-contrato-clausulas > li {
    margin-bottom: 20px;
}

.nd-contrato-itens > li {
    /* O numero da clausula fica na calha, fora do bloco de texto: quem
     * procura "9.2" corre o olho pela margem esquerda em vez de ler o
     * comeco de cada paragrafo. */
    padding-left: 44px;
    text-indent: -44px;
    margin-bottom: 8px;
}

.nd-contrato-numero {
    display: inline-block;
    width: 44px;
    text-indent: 0;
    color: var(--bs-gray-500, #9ca3af);
    font-variant-numeric: tabular-nums;
}

/* Qualificacao das partes e os blocos de fecho (anexos, declaracao,
 * assinaturas). Recuados por uma regua a esquerda em vez de emoldurados:
 * sao partes do mesmo documento, e caixa em volta de cada uma
 * transformaria um contrato em cinco cartoes empilhados. */
.nd-contrato-partes,
.nd-contrato-bloco {
    border-left: 2px solid var(--bs-border-color, #e5e7eb);
    padding-left: 16px;
    margin: 0 0 24px;
}

.nd-contrato-anexos,
.nd-contrato-declaracao {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.nd-contrato-anexos > li,
.nd-contrato-declaracao > li {
    margin-bottom: 6px;
}

/* O estado do anexo colado ao nome dele, e nao numa coluna a parte: a
 * informacao que importa e "este existe?", e ela precisa ser lida na
 * mesma sacada que o nome. */
.nd-contrato-estado {
    display: inline-block;
    font-size: 11px;
    line-height: 1.5;
    padding: 0 6px;
    border-radius: 3px;
    background: var(--bs-gray-200, #e5e7eb);
    color: var(--bs-gray-700, #374151);
    white-space: nowrap;
}

.nd-contrato-estado-ok {
    background: #dcfce7;
    color: #166534;
}

/* Alineas: mesma calha das clausulas, um nivel adentro. A letra ocupa
 * largura fixa para que a), b) e c) comecem na mesma coluna. */
.nd-contrato-alineas {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}

.nd-contrato-alineas > li {
    padding-left: 26px;
    text-indent: -26px;
    margin-bottom: 4px;
}

.nd-contrato-letra {
    display: inline-block;
    width: 26px;
    text-indent: 0;
    color: var(--bs-gray-500, #9ca3af);
}

/* Duas colunas no fecho: o contratado de um lado, a advogada do outro,
 * como num instrumento assinado. Uma coluna so no celular. */
.nd-contrato-assinaturas {
    display: grid;
    gap: 20px 40px;
    border-top: 1px solid var(--bs-border-color, #e5e7eb);
    padding-top: 16px;
}

@media (min-width: 640px) {
    .nd-contrato-assinaturas {
        grid-template-columns: 1fr 1fr;
    }
}

/* A caixa com rolagem propria: o cadastro e o console mostram o contrato
 * inteiro sem empurrar o botao de aceite para tres telas abaixo.
 *
 * `tabindex="0"` esta no HTML, e nao aqui, mas e por causa desta regra:
 * area rolavel que so rola com o mouse deixa de fora quem navega pelo
 * teclado. */
.nd-contrato-caixa {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

/* Dentro da caixa o titulo desce de tamanho. Na pagina publica ele e o
 * titulo da pagina e manda no tamanho dela; no cadastro e no console ele
 * esta dentro de outra tela, e um titulo de pagina ali disputa a atencao
 * com o titulo que de fato manda. */
.nd-contrato-caixa .nd-contrato-cabeca h2 {
    font-size: 15px;
    margin-bottom: 2px;
}

.nd-contrato-caixa:focus-visible {
    outline: 2px solid var(--bs-primary, #3454d1);
    outline-offset: 2px;
}

/* ---- `hidden` volta a esconder ------------------------------------- */
/*
 * O tema traz `[hidden]{display:none!important}` — e, dez mil linhas
 * depois, `.d-flex{display:flex!important}`. Os dois seletores têm a
 * mesma especificidade e os dois são `!important`, então vence o último:
 * um elemento com `hidden` **e** `d-flex` fica visível.
 *
 * O defeito apareceu no aviso de rascunho do atendimento, e apareceu de
 * um jeito que não se lê como problema de CSS: a faixa "há um rascunho
 * não salvo" nascia visível para todo mundo, e os botões dela não faziam
 * nada — porque o JavaScript só registra os cliques quando de fato
 * encontra um rascunho, e ali não havia nenhum. Dois sintomas, uma causa.
 *
 * Esta regra fica no fim de `neurodoc.css`, que é carregado depois do
 * tema, e devolve ao atributo o significado que ele tem no HTML. Vale
 * para todo o produto: qualquer `el.hidden = true` do JavaScript passa a
 * esconder, inclusive em elemento que carregue classe de display.
 */
[hidden] {
    display: none !important;
}

/* ---- Print ----------------------------------------------------------- */
@media print {
    .nxl-navigation,
    .nxl-header,
    .page-header-right,
    .footer,
    .nd-no-print {
        display: none !important;
    }

    /* Na impressao a caixa deixa de rolar: papel nao rola, e um contrato
     * impresso com 340px de altura sai com uma clausula e meia. */
    .nd-contrato-caixa {
        max-height: none;
        overflow: visible;
        border: 0;
        padding: 0;
    }

    .nd-contrato {
        max-width: none;
    }

    .nxl-container {
        top: 0;
        margin-left: 0;
    }

    .nxl-container .nxl-content {
        padding-top: 0;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #e5e7eb !important;
    }
}

/* ---- Agenda: grade da semana ------------------------------------------ */
/*
 * A grade e um CSS grid: uma coluna de horario mais sete de dia. Cada celula
 * e um botao quando esta livre, para marcar com um clique.
 *
 * A cor carrega o estado, e nao so decora: livre e claro e clicavel;
 * ocupado usa o tom do estado do agendamento; bloqueado e hachurado, porque
 * "cinza chapado" se confunde com desabilitado e a hachura le como
 * "fechado". Passado fica esmaecido, porque oferecer um horario que ja
 * passou nao ajuda ninguem.
 */
.nd-agenda {
    display: grid;
    gap: 2px;
    background: #eef1f5;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 2px;
    overflow-x: auto;
    grid-template-columns: 4.5rem repeat(7, minmax(6.5rem, 1fr));
}

.nd-agenda-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8f9fa;
    padding: 6px 8px;
    text-align: center;
    border-radius: 4px;
}

.nd-agenda-head.is-today {
    background: #ebeefa;
    box-shadow: inset 0 -2px 0 #3454d1;
}

.nd-agenda-time {
    background: #f8f9fa;
    color: #64748b;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    padding: 6px 8px;
    text-align: right;
    border-radius: 4px;
    white-space: nowrap;
}

.nd-slot {
    display: block;
    width: 100%;
    min-height: 2.35rem;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    text-align: left;
    font: inherit;
    font-size: 11px;
    line-height: 1.25;
    color: #283c50;
    cursor: default;
    overflow: hidden;
}

.nd-slot-empty {
    background: transparent;
    min-height: 2.35rem;
}

button.nd-slot-free {
    cursor: pointer;
    border-color: #e5e7eb;
    color: #15803d;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.nd-slot-free-label,
.nd-slot-free-time {
    display: block;
}

.nd-slot-free-label {
    font-weight: 600;
    font-size: 10px;
}

.nd-slot-free-time {
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

button.nd-slot-free:hover,
button.nd-slot-free:focus-visible {
    background: #ebeefa;
    border-color: #3454d1;
    color: #3454d1;
}

.nd-slot-past {
    background: #f8f9fa;
    color: #cbd5e1;
}

.nd-slot-blocked {
    color: #64748b;
    background: repeating-linear-gradient(
        45deg, #f1f3f5, #f1f3f5 5px, #e5e7eb 5px, #e5e7eb 10px
    );
}

.nd-slot-busy {
    cursor: pointer;
    border-color: rgba(52, 84, 209, .25);
    background: #ebeefa;
    color: #283c50;
}

.nd-slot-busy .nd-slot-name {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-slot-busy.is-continuation {
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Tom por estado do agendamento. */
.nd-slot-busy[data-status="confirmed"] { background: #dbf5f3; border-color: rgba(61,199,190,.35); }
.nd-slot-busy[data-status="checked_in"],
.nd-slot-busy[data-status="in_progress"] { background: #ffebd0; border-color: rgba(255,162,29,.4); }
.nd-slot-busy[data-status="completed"] { background: #e1fbed; border-color: rgba(23,198,102,.35); }
.nd-slot-busy[data-overbook="1"] { border-style: dashed; border-color: #ffa21d; }

.nd-agenda-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 11px;
    color: #64748b;
}

.nd-agenda-legend span.nd-key {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
    vertical-align: -2px;
    margin-right: 4px;
}

/* Mês: horários compactos, mas ainda botões legíveis e com alvo de toque. */
.nd-month-day {
    min-width: 8.5rem;
    min-height: 9rem;
}

.nd-month-slots {
    display: grid;
    gap: 3px;
}

.nd-month-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-height: 1.65rem;
    padding: 3px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    font: inherit;
    font-size: 10px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

button.nd-month-slot-free {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
    cursor: pointer;
}

button.nd-month-slot-free:hover,
button.nd-month-slot-free:focus-visible {
    color: #14532d;
    background: #bbf7d0;
    border-color: #22c55e;
}

.nd-month-slot-busy {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

/* O horario marcado tambem se clica, e abre o mesmo modal da semana e do
 * dia. Era a unica das tres visoes em que nao dava para mexer num
 * agendamento -- quem via o paciente no mes tinha de trocar de visao so
 * para remarcar.
 *
 * O realce no foco importa tanto quanto o do mouse: este e um botao que
 * se alcanca pelo teclado, e sem ele quem navega por Tab nao sabe em qual
 * horario esta. */
button.nd-month-slot-busy {
    cursor: pointer;
    text-align: left;
}

button.nd-month-slot-busy:hover,
button.nd-month-slot-busy:focus-visible {
    color: #7f1d1d;
    background: #fecaca;
    border-color: #ef4444;
}

/* O nome do paciente na celula do mes.
 *
 * Truncado por CSS, e nao cortado no servidor: o nome inteiro fica no
 * `title`, e quem passa o mouse le o resto. Cortar na view esconderia o
 * final de "ADRIANO TRIGO MONTEIRO DE MATOS SOEIRO FILHO" de todo mundo,
 * inclusive de quem quer conferir.
 *
 * `min-width: 0` e o que faz o `text-overflow` funcionar dentro de um
 * item flex: sem ele o filho se recusa a encolher abaixo do conteudo e a
 * celula transborda em vez de cortar -- e a celula do mes e estreita por
 * natureza, sao sete numa linha. */
.nd-month-slot-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

/* Atendimento que ja aconteceu. Azul, e nao vermelho: vermelho e "esta
 * ocupado agora, nao ofereca", e o que ja passou nao disputa vaga com
 * ninguem. */
.nd-month-slot-done {
    color: #1e3a8a;
    background: #e0e7ff;
    border-color: #a5b4fc;
}

/* Horario que passou e ninguem usou. Cinza apagado, de proposito: ele
 * precisa estar visivel -- e a informacao que o mes anterior tem a dar --
 * sem competir com o que ainda da para marcar. */
.nd-month-slot-past {
    color: #6b7280;
    background: #f9fafb;
    border-color: #e5e7eb;
}

.nd-month-key-free {
    background: #dcfce7;
    border-color: #86efac !important;
}

.nd-month-key-busy {
    background: #fee2e2;
    border-color: #fca5a5 !important;
}

.nd-month-key-done {
    background: #e0e7ff;
    border-color: #a5b4fc !important;
}

.nd-month-key-past {
    background: #f9fafb;
    border-color: #e5e7eb !important;
}

@media (max-width: 991px) {
    .nd-agenda {
        grid-template-columns: 3.5rem repeat(7, minmax(5.5rem, 1fr));
    }
    .nd-slot { font-size: 10px; }
}

/* Pagina sem barra lateral.

   `base.html` so inclui a barra quando ha inquilino resolvido, e o tema
   reserva 280px a esquerda para ela em `.nxl-container`. Sem a barra,
   aquela margem vira uma faixa vazia do lado esquerdo da tela — que e o
   que acontece no console da instalacao aberto por um superadministrador
   sem vinculo em clinica nenhuma.

   Tambem some o deslocamento do topo, que existe para o cabecalho fixo. */
body.nd-no-shell .nxl-container {
    margin-left: 0;
    top: 0;
    min-height: 100vh;
}
body.nd-no-shell .nxl-content {
    max-width: 1320px;
    margin: 0 auto;
}

/* ==========================================================================
   Aparelho de toque: celular e tablet, em pe e deitado

   Auditado num navegador de verdade, em 27 telas do produto, em quatro
   tamanhos: 390x844, 360x740, 844x390 (deitado) e 768x1024 (tablet).
   Nenhuma delas transbordava na horizontal — o tema e Bootstrap e as
   tabelas estao embrulhadas em `.table-responsive` —, e o menu lateral
   entra e sai como deve. O que a auditoria encontrou foi outra coisa: o
   tamanho do que se toca e do que se le.

   Tudo aqui esta atras de media query, e de proposito: no computador a
   densidade do Duralux e boa, e aumentar campo e botao lá só roubaria
   espaco de tela num sistema que mostra muita informacao junta.
   ========================================================================== */

/* Barra de acoes da pagina que quebra a linha em vez de sair da tela.
 *
 * A partir de 768px o tema deixa de esconder as acoes atras do botao de
 * sanduiche e as mostra em linha — e em `d-flex` sem `flex-wrap`. Numa tela
 * de atendimento com cinco acoes (Imprimir, Anexos, Documentos, Descartar,
 * Finalizar) isso pede 593px de uma barra que tem menos, e a pagina passa a
 * rolar na horizontal. Foi medido em 768x1024: 52px para fora.
 *
 * A faixa afetada e estreita (tablet em retrato, celular em paisagem), e por
 * isso passa desapercebida no computador — onde tudo cabe e a regra nunca
 * chega a agir.
 *
 * Fora de media query de proposito: a condicao ja e a propria largura
 * disponivel. Quebrar linha quando nao cabe e o comportamento certo em
 * qualquer tamanho, e em tela larga a linha nunca quebra porque cabe.
 * `justify-content: flex-end` mantem as acoes a direita, como estavam. */
.page-header-right-items-wrapper {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .5rem;
}

/* A condicao e o DEDO, e nao a largura.
 *
 * A primeira versao deste bloco usava so `max-width: 767.98px`, e a medicao
 * mostrou o erro: num celular deitado a tela tem 844px de largura, e as
 * regras deixavam de valer — o mesmo aparelho, o mesmo dedo, e o Safari
 * voltando a dar zoom a cada campo tocado. No tablet em retrato (768px),
 * idem.
 *
 * `pointer: coarse` e a pergunta certa: "o apontador e impreciso?". O teto
 * de 1199px exclui o computador com tela sensivel ao toque, onde o mouse
 * costuma ser o apontador de fato e a densidade do tema deve continuar.
 *
 * A largura fica na lista como primeira alternativa porque nem todo
 * navegador antigo responde `pointer`, e naquela faixa o certo e valer de
 * qualquer forma. */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 1199.98px) {
    /* 16px nos campos, e nao 13,5px.
     *
     * Este e o remendo mais importante do bloco, e o motivo nao e leitura:
     * o Safari do iPhone **da zoom na pagina** quando o campo que recebe o
     * foco tem fonte menor que 16px, e nao volta ao sair. Quem preenche o
     * cadastro de paciente atravessa 28 campos; o prontuario estruturado
     * tem mais de mil. A cada toque a pagina saltava de escala, e o
     * caminho de volta era a pinca.
     *
     * 16px e o limiar do proprio Safari, nao uma preferencia. Vale para
     * `-sm` tambem: o campo pequeno e justamente o da tabela, o mais
     * apertado de acertar com o dedo. */
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm,
    .input-group-text {
        font-size: 1rem;
    }

    /* Alvo de toque de 40px.
     *
     * A auditoria achou botao de 27px de altura — "Trocar organizacao",
     * "Usar a camera", "Nao sei a data de nascimento". O dedo tem cerca de
     * 9mm; 27px e metade disso, e o erro de toque num prontuario nao e
     * cosmetico: o botao vizinho pode ser "Descartar".
     *
     * `min-height` em vez de `padding` para nao mexer no alinhamento do
     * texto dentro do botao, e `inline-flex` para o rotulo continuar
     * centrado quando a altura cresce. */
    .btn,
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Botao que e so icone continua quadrado. Sem isto ele viraria um
     * retangulo de 40x30 e sairia do lugar no cabecalho. */
    .btn-icon {
        min-width: 40px;
    }

    /* A paginacao tambem se toca, e ela nao herda a regra do botao: o
     * `.page-link` do Bootstrap nao e `.btn`, e ficava com 30px de altura
     * — tres quartos do alvo que o resto da tela respeita.
     *
     * Onde isso doi: a lista de pacientes, depois da migracao do cadastro,
     * tem noventa paginas. "Anterior" e "Proxima" sao o unico jeito de
     * andar nela pelo celular, e estavam encostados na borda direita, do
     * tamanho de um numero.
     *
     * `flex-wrap` porque com o contador no meio ("45 / 90") os tres itens
     * nao cabem lado a lado em tela estreita; sem ele, o terceiro
     * transbordava para fora do cartao. */
    .pagination {
        flex-wrap: wrap;
        gap: .25rem;
    }
    .page-link {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* A caixa de selecao tambem se toca. 13px de lado e menor que a
     * pontuacao do texto ao lado dela. */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: .1rem;
    }
    .form-check-label {
        padding-left: .25rem;
    }

    /* O avatar do cabecalho e o gatilho do menu da conta — sair, trocar de
     * organizacao, MFA. Ele mede 30px, e e o unico caminho para aquelas
     * acoes: errar o toque ali nao tem alternativa na tela. A area cresce
     * sem que a bolinha cresca, com o `padding` entrando por fora. */
    .nxl-h-item > a[aria-label="Conta"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    /* Lista longa com rolagem propria (atendimentos na ficha do paciente).
     *
     * No computador a altura fixa impede que a lista de um paciente de dez
     * anos empurre o resto da ficha para fora da tela. No celular, area
     * rolavel dentro de pagina rolavel e briga de dedo: o toque que queria
     * rolar a pagina rola a lista, ou o contrario. Proporcional a tela
     * resolve os dois — continua limitada, e o limite acompanha o aparelho. */
    .nd-lista-rolavel {
        max-height: 60vh !important;
    }
}