/* Variáveis: cada cor cai primeiro na do tema do app e, na falta dela, no valor neutro. */
:root {
    --jarvis-primary: var(--c-primary, #212529);
    --jarvis-on-primary: #fff;
    --jarvis-surface: var(--c-surface, #fff);
    --jarvis-text: var(--c-text, #212529);
    --jarvis-text-muted: var(--c-text-muted, #6c757d);
    --jarvis-danger: var(--c-danger, #dc3545);
    --jarvis-border: var(--c-border, #dee2e6);
    --jarvis-border-soft: var(--c-border-soft, #f1f3f5);
    --jarvis-radius: var(--radius, .375rem);
    --jarvis-panel-shadow: 0 8px 24px rgba(22, 32, 46, .12);
    --jarvis-fab-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    --jarvis-whatsapp-glow: rgba(180, 249, 185, 1);
    --jarvis-whatsapp-pulse: rgba(44, 204, 56, .4);
    --jarvis-whatsapp-pulse-fade: rgba(204, 169, 44, 0);
}

/* O contorno do foco só aparece na navegação por teclado, senão o clique deixa a borda presa
   no último botão usado. */
.jarvis-dropzone-remove:focus,
.jarvis-pagination-page:focus,
.jarvis-picker-toggle:focus,
.jarvis-picker-nav:focus,
.jarvis-picker-day:focus,
.jarvis-picker-option:focus,
.jarvis-calendar-title:focus,
.jarvis-calendar-day:focus,
.jarvis-calendar-nav-button:focus,
.jarvis-calendar-picker-arrow:focus,
.jarvis-calendar-picker-month:focus,
.jarvis-pagination-button:focus,
.jarvis-select-add:focus,
.jarvis-fab:focus {
    outline: none;
}

.jarvis-dropzone-remove:focus-visible,
.jarvis-pagination-page:focus-visible,
.jarvis-picker-toggle:focus-visible,
.jarvis-picker-nav:focus-visible,
.jarvis-picker-day:focus-visible,
.jarvis-picker-option:focus-visible,
.jarvis-calendar-title:focus-visible,
.jarvis-calendar-day:focus-visible,
.jarvis-calendar-nav-button:focus-visible,
.jarvis-calendar-picker-arrow:focus-visible,
.jarvis-calendar-picker-month:focus-visible,
.jarvis-pagination-button:focus-visible,
.jarvis-select-add:focus-visible,
.jarvis-fab:focus-visible {
    outline: 2px solid var(--jarvis-primary);
    outline-offset: 2px;
}

/* FormSelect e FormMultiSelect */
.jarvis-select,
.jarvis-multi-select {
    position: relative;
}

/* Herda padding, fonte, borda e raio do .form-control para ficar igual aos demais campos. */
.jarvis-select-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    text-align: left;
    cursor: pointer;
}

/* Botão desabilitado não dispara click, e o clique nele precisa chegar ao document
   para fechar os painéis que estiverem abertos. */
.jarvis-select-control:disabled {
    pointer-events: none;
}

.jarvis-select:has(.jarvis-select-control:disabled),
.jarvis-multi-select:has(.jarvis-select-control:disabled) {
    cursor: not-allowed;
}

.jarvis-is-open > .jarvis-select-control {
    border-color: var(--jarvis-primary);
}

/* O campo que recebe a classe de erro é o escondido, então a borda vermelha passa para o
   controle que aparece no lugar dele. Vale para o select, a seleção múltipla, o dropzone e
   o numérico, que guardam o valor fora do campo que o usuário vê. */
.jarvis-select:has(.input-validation-error) > .jarvis-select-control,
.jarvis-multi-select:has(.input-validation-error) > .jarvis-select-control {
    border-color: var(--jarvis-danger);
}

.jarvis-dropzone:has(.input-validation-error) .jarvis-dropzone-area,
.jarvis-dropzone:has(.input-validation-error) .jarvis-dropzone-areas {
    border-color: var(--jarvis-danger);
}

div:has(> [data-jarvis-numeric-input].input-validation-error) > .form-control {
    border-color: var(--jarvis-danger);
}

.jarvis-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jarvis-select-value.jarvis-is-placeholder {
    color: var(--jarvis-text-muted);
}

.jarvis-select-caret {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: var(--jarvis-text-muted);
    transition: transform .15s ease;
}

.jarvis-is-open .jarvis-select-caret {
    transform: rotate(180deg);
}

.jarvis-select-panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    overflow: hidden;
    background-color: var(--jarvis-surface);
    border: 1px solid var(--jarvis-border);
    border-radius: var(--jarvis-radius);
    box-shadow: var(--jarvis-panel-shadow);
}

.jarvis-is-up .jarvis-select-panel {
    top: auto;
    bottom: calc(100% + 4px);
}

.jarvis-select-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    border-bottom: 1px solid var(--jarvis-border-soft);
    color: var(--jarvis-text-muted);
}

.jarvis-select-search-icon {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

.jarvis-select-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--jarvis-text);
    font-size: inherit;
}

.jarvis-select-options {
    max-height: min(240px, 40vh);
    margin: 0;
    padding: .25rem 0;
    overflow-y: auto;
    list-style: none;
}

.jarvis-select-option {
    padding: .375rem .75rem;
    cursor: pointer;
}

.jarvis-select-option:hover,
.jarvis-select-option-check label:hover,
.jarvis-select-option-all label:hover {
    background-color: var(--jarvis-border-soft);
}

.jarvis-select-option.jarvis-is-selected {
    background-color: var(--jarvis-border-soft);
    font-weight: 500;
}

.jarvis-select-option-check label,
.jarvis-select-option-all label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: .375rem .75rem;
    cursor: pointer;
}

/* Centraliza o checkbox na primeira linha do texto: metade da sobra entre a linha e o próprio box. */
.jarvis-select-option-check input,
.jarvis-select-option-all input {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin: calc((1.5em - 1em) / 2) 0 0;
    accent-color: var(--jarvis-primary);
    font-size: inherit;
}

.jarvis-select-option-all {
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--jarvis-border-soft);
    font-weight: 500;
}

.jarvis-select-option-text {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.jarvis-select-option-text small {
    color: var(--jarvis-text-muted);
    font-size: .875em;
    line-height: 1.3;
}

.jarvis-select-empty {
    padding: .75rem;
    color: var(--jarvis-text-muted);
    font-size: .875em;
    text-align: center;
}

/* FormSelect e FormMultiSelect: botão de atalho ao lado do campo */
.jarvis-select-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.jarvis-select-row .jarvis-select,
.jarvis-select-row .jarvis-multi-select {
    flex: 1;
    min-width: 0;
}

/* Mesmo cálculo de altura que o Bootstrap usa nos inputs, aplicado na largura: botão quadrado.
   Dois seletores para vencer o padding e a cor do .btn mesmo se o CSS do app vier depois deste. */
.jarvis-select-row .jarvis-select-add {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(1.5em + .75rem + 2px);
    padding: 0;
    appearance: none;
    background: transparent;
    border: 1px solid var(--jarvis-select-add-bg, var(--jarvis-primary));
    border-radius: var(--jarvis-radius);
    color: var(--jarvis-select-add-bg, var(--jarvis-primary));
    font-size: inherit;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.jarvis-select-row .jarvis-select-add:hover {
    background: var(--jarvis-select-add-bg, var(--jarvis-primary));
    color: var(--jarvis-select-add-color, var(--jarvis-on-primary));
}

.jarvis-select-add svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
}

/* Pagination */
.jarvis-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.jarvis-pagination-page {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    background: transparent;
    border-radius: 10px;
    color: var(--jarvis-text);
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .16s ease;
}

.jarvis-pagination-page:hover {
    background: var(--jarvis-border-soft);
    color: var(--jarvis-text);
}

.jarvis-pagination-page.jarvis-is-current {
    background: var(--jarvis-primary);
    color: var(--jarvis-on-primary);
    font-weight: 500;
}

.jarvis-pagination-ellipsis {
    flex: 0 0 auto;
    padding: 0 2px;
    color: var(--jarvis-text-muted);
    user-select: none;
}

/* Sem href a seta é um <button>, então os padrões do navegador precisam ser zerados. */
.jarvis-pagination-button,
.jarvis-calendar-nav-button,
.jarvis-calendar-picker-arrow {
    flex: 0 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    appearance: none;
    background: color-mix(in srgb, var(--jarvis-primary) 8%, transparent);
    border: 0;
    border-radius: 12px;
    color: var(--jarvis-primary);
    font-size: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease;
}

.jarvis-pagination-button:hover,
.jarvis-calendar-nav-button:hover,
.jarvis-calendar-picker-arrow:hover {
    background: color-mix(in srgb, var(--jarvis-primary) 16%, transparent);
    color: var(--jarvis-primary);
}

/* Na paginação a seta acompanha a altura dos números. */
.jarvis-pagination-button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

/* Nas pontas a seta fica apagada, sem clique e sem hover. */
.jarvis-pagination-button.jarvis-is-disabled,
.jarvis-pagination-button.jarvis-is-disabled:hover {
    background: var(--jarvis-border-soft);
    color: var(--jarvis-text-muted);
    pointer-events: none;
    cursor: default;
}

.jarvis-pagination-button svg,
.jarvis-calendar-nav-button svg,
.jarvis-calendar-picker-arrow svg {
    width: 1em;
    height: 1em;
}

/* Em tela pequena não cabe a lista inteira: ficam as setas e a página atual. */
@media (max-width: 575px) {
    .jarvis-pagination-page:not(.jarvis-is-current),
    .jarvis-pagination-ellipsis {
        display: none;
    }
}

/* Calendar */
.jarvis-calendar {
    position: relative;
    padding: 16px;
    background: var(--jarvis-surface);
    border: 1px solid var(--jarvis-border);
    border-radius: var(--jarvis-radius);
}

.jarvis-calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* A altura acompanha as setas, para o cabeçalho ficar alinhado.
   O flex: 1 empurra as setas e os botões extras para a direita. */
.jarvis-calendar-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 44px;
    padding: 4px 8px;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--jarvis-text);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .16s ease;
}

.jarvis-calendar-title:hover {
    background: var(--jarvis-border-soft);
}

/* Botões extras da página, informados no conteúdo da tag. */
.jarvis-calendar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* O ano fica na linha de baixo, menor, para o mês dominar o cabeçalho. */
.jarvis-calendar-year {
    display: block;
    color: var(--jarvis-text-muted);
    font-size: .8rem;
}

/* Escolha de mês e ano: abre sobre o cabeçalho, cobrindo o mês e o ano. */
.jarvis-calendar-picker {
    position: absolute;
    z-index: 1050;
    top: 8px;
    right: 8px;
    left: 8px;
    padding: 12px;
    background: var(--jarvis-surface);
    border: 1px solid var(--jarvis-border);
    border-radius: var(--jarvis-radius);
    box-shadow: var(--jarvis-panel-shadow);
}

.jarvis-calendar-picker-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.jarvis-calendar-picker-year {
    flex: 1;
    color: var(--jarvis-text);
    font-weight: 500;
    text-align: center;
}

.jarvis-calendar-picker-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.jarvis-calendar-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.jarvis-calendar-picker-month {
    padding: 8px 4px;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--jarvis-text);
    font-size: .85rem;
    cursor: pointer;
    transition: background-color .16s ease;
}

.jarvis-calendar-picker-month:hover {
    background: color-mix(in srgb, var(--jarvis-primary) 12%, transparent);
}

.jarvis-calendar-picker-month.jarvis-is-selected {
    background: var(--jarvis-primary);
    color: var(--jarvis-on-primary);
    font-weight: 500;
}

.jarvis-calendar-weekdays,
.jarvis-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.jarvis-calendar-weekdays {
    margin-bottom: 6px;
}

.jarvis-calendar-weekdays span {
    color: var(--jarvis-text-muted);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-align: center;
    text-transform: uppercase;
}

.jarvis-calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    aspect-ratio: 1;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 12px;
    color: var(--jarvis-text);
    font-size: .9rem;
    cursor: pointer;
}

.jarvis-calendar-day:not(.jarvis-is-selected):hover {
    background: color-mix(in srgb, var(--jarvis-primary) 10%, transparent);
}

/* Fora do mês: sem número, sem clique e sem hover. */
.jarvis-calendar-day.jarvis-is-empty {
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

.jarvis-calendar-day.jarvis-has-items {
    background: color-mix(in srgb, var(--jarvis-primary) 6%, transparent);
    font-weight: 500;
}

.jarvis-calendar-day.jarvis-has-items:not(.jarvis-is-selected):hover {
    background: color-mix(in srgb, var(--jarvis-primary) 14%, transparent);
}

/* Hoje ganha fundo e contorno na cor de destaque. O contorno é box-shadow para não mexer no tamanho. */
.jarvis-calendar-day.jarvis-is-today {
    background: color-mix(in srgb, var(--jarvis-primary) 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--jarvis-primary);
    font-weight: 600;
}

.jarvis-calendar-day.jarvis-is-today:not(.jarvis-is-selected):hover {
    background: color-mix(in srgb, var(--jarvis-primary) 20%, transparent);
}

.jarvis-calendar-day.jarvis-is-selected {
    background: var(--jarvis-primary);
    color: var(--jarvis-on-primary);
}

.jarvis-calendar-day-number {
    line-height: 1;
}

.jarvis-calendar-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--jarvis-primary);
    border-radius: 999px;
    color: var(--jarvis-on-primary);
    font-size: .6rem;
    font-weight: 500;
}

.jarvis-calendar-day.jarvis-is-selected .jarvis-calendar-day-count {
    background: var(--jarvis-on-primary);
    color: var(--jarvis-primary);
}

/* A partir do tablet a grade ganha linhas: o fundo do grid aparece pelo vão de 1px entre as
   células, que passam a ter fundo opaco. No mobile a grade continua solta, sem linhas. */
@media (min-width: 768px) {
    .jarvis-calendar-grid {
        gap: 1px;
        overflow: hidden;
        background: var(--jarvis-border);
        border: 1px solid var(--jarvis-border);
        border-radius: 8px;
    }

    .jarvis-calendar-day {
        background: var(--jarvis-surface);
        border-radius: 0;
    }

    /* Os dias fora do mês viram célula apagada, senão a cor da linha vaza. */
    .jarvis-calendar-day.jarvis-is-empty {
        visibility: visible;
        background: var(--jarvis-border-soft);
    }

    .jarvis-calendar-day:not(.jarvis-is-selected):hover {
        background: color-mix(in srgb, var(--jarvis-primary) 10%, var(--jarvis-surface));
    }

    .jarvis-calendar-day.jarvis-has-items {
        background: color-mix(in srgb, var(--jarvis-primary) 6%, var(--jarvis-surface));
    }

    .jarvis-calendar-day.jarvis-has-items:not(.jarvis-is-selected):hover {
        background: color-mix(in srgb, var(--jarvis-primary) 14%, var(--jarvis-surface));
    }

    .jarvis-calendar-day.jarvis-is-today {
        background: color-mix(in srgb, var(--jarvis-primary) 12%, var(--jarvis-surface));
    }

    .jarvis-calendar-day.jarvis-is-today:not(.jarvis-is-selected):hover {
        background: color-mix(in srgb, var(--jarvis-primary) 20%, var(--jarvis-surface));
    }

    .jarvis-calendar-day.jarvis-is-selected {
        background: var(--jarvis-primary);
    }
}

/* FormDate, FormTime e FormDateTime */
.jarvis-picker {
    position: relative;
}

/* O texto não passa por baixo do botão que abre o painel. */
.jarvis-picker.jarvis-has-toggle .form-control {
    padding-right: 2.5rem;
}

.jarvis-picker-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--jarvis-text-muted);
    cursor: pointer;
}

.jarvis-picker-toggle:hover {
    color: var(--jarvis-primary);
}

.jarvis-picker-toggle[disabled] {
    pointer-events: none;
    opacity: .65;
}

.jarvis-picker-toggle svg {
    width: 1.1em;
    height: 1.1em;
}

.jarvis-picker-panel {
    position: absolute;
    z-index: 1050;
    top: calc(100% + .25rem);
    left: 0;
    display: flex;
    gap: .5rem;
    width: max-content;
    padding: .5rem;
    background: var(--jarvis-surface);
    border: 1px solid var(--jarvis-border);
    border-radius: var(--jarvis-radius);
    box-shadow: var(--jarvis-panel-shadow);
}

/* Sem espaço abaixo do campo o painel sobe; sem espaço à direita, alinha pela direita. */
.jarvis-picker.jarvis-is-up .jarvis-picker-panel {
    top: auto;
    bottom: calc(100% + .25rem);
}

.jarvis-picker.jarvis-is-end .jarvis-picker-panel {
    right: 0;
    left: auto;
}

.jarvis-picker-calendar {
    flex: 1 1 auto;
    min-width: 15rem;
}

.jarvis-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    margin-bottom: .35rem;
}

.jarvis-picker-title {
    flex: 1;
    text-align: center;
    font-size: .95rem;
    font-weight: 500;
}

.jarvis-picker-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--jarvis-primary);
    cursor: pointer;
}

.jarvis-picker-nav:hover {
    background: color-mix(in srgb, var(--jarvis-primary) 12%, transparent);
}

.jarvis-picker-nav svg {
    width: 1em;
    height: 1em;
}

.jarvis-picker-week,
.jarvis-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.jarvis-picker-week span {
    color: var(--jarvis-text-muted);
    font-size: .7rem;
    font-weight: 500;
    text-align: center;
}

.jarvis-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--jarvis-text);
    font-size: .85rem;
    cursor: pointer;
}

.jarvis-picker-day.jarvis-is-empty {
    visibility: hidden;
    pointer-events: none;
}

.jarvis-picker-day:not(.jarvis-is-selected):hover {
    background: color-mix(in srgb, var(--jarvis-primary) 12%, transparent);
}

.jarvis-picker-day.jarvis-is-today {
    box-shadow: inset 0 0 0 1px var(--jarvis-primary);
    font-weight: 600;
}

.jarvis-picker-day.jarvis-is-selected,
.jarvis-picker-option.jarvis-is-selected {
    background: var(--jarvis-primary);
    color: var(--jarvis-on-primary);
}

.jarvis-picker-day[disabled],
.jarvis-picker-option[disabled] {
    color: var(--jarvis-text-muted);
    opacity: .45;
    pointer-events: none;
}

/* Horas e minutos em duas listas, cada uma rolando sozinha. */
.jarvis-picker-time {
    display: flex;
    flex: 0 0 auto;
    gap: .25rem;
}

.jarvis-picker-calendar + .jarvis-picker-time {
    padding-left: .5rem;
    border-left: 1px solid var(--jarvis-border-soft);
}

.jarvis-picker-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 2px;
    height: 13.5rem;
    padding-right: .15rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--jarvis-border) transparent;
}

.jarvis-picker-column::-webkit-scrollbar {
    width: 6px;
}

.jarvis-picker-column::-webkit-scrollbar-thumb {
    background: var(--jarvis-border);
    border-radius: 3px;
}

.jarvis-picker-option {
    flex: 0 0 auto;
    width: 3rem;
    padding: .25rem 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--jarvis-text);
    font-size: .85rem;
    text-align: center;
    cursor: pointer;
}

.jarvis-picker-option:not(.jarvis-is-selected):hover {
    background: color-mix(in srgb, var(--jarvis-primary) 12%, transparent);
}

/* Dropzone */
.jarvis-dropzone {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Escondido sem sair da ordem de tabulação: o campo continua alcançável pelo teclado. */
.jarvis-dropzone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Com a câmera ligada, quem desenha a caixa é este container: as duas escolhas ficam dentro dela,
   separadas por uma linha, e continuam sendo dois labels irmãos. */
.jarvis-dropzone-areas {
    display: flex;
    flex-direction: column;
    background: var(--jarvis-border-soft);
    border: 2px dashed var(--jarvis-border);
    border-radius: var(--jarvis-radius);
    transition: border-color .16s ease, background-color .16s ease;
}

/* A área é um label, então o clique e o Enter já chegam no input escondido.
   O fundo é o cinza claro da paleta, senão a área se perde dentro de um card branco. */
.jarvis-dropzone-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 24px 16px;
    background: var(--jarvis-border-soft);
    border: 2px dashed var(--jarvis-border);
    border-radius: var(--jarvis-radius);
    color: var(--jarvis-text-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.jarvis-dropzone-area:hover,
.jarvis-dropzone-areas:hover,
.jarvis-dropzone-area:has(.jarvis-dropzone-input:focus-visible),
.jarvis-dropzone-areas:has(.jarvis-dropzone-input:focus-visible) {
    border-color: var(--jarvis-primary);
}

/* Dentro da caixa compartilhada quem desenha a borda é o container. */
.jarvis-dropzone-areas > .jarvis-dropzone-area {
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Sem borda própria, cada metade precisa se destacar sozinha: senão a caixa inteira acende e não
   dá para saber qual das duas o clique vai acionar. */
.jarvis-dropzone-areas > .jarvis-dropzone-area:hover,
.jarvis-dropzone-areas > .jarvis-dropzone-area:has(.jarvis-dropzone-input:focus-visible),
.jarvis-dropzone-camera:hover,
.jarvis-dropzone-camera:has(.jarvis-dropzone-input:focus-visible) {
    background: color-mix(in srgb, var(--jarvis-primary) 8%, transparent);
}

/* Enquanto o arquivo está sobre a área, o destaque mostra onde ele vai cair. */
.jarvis-is-drag .jarvis-dropzone-area,
.jarvis-is-drag .jarvis-dropzone-areas {
    background: color-mix(in srgb, var(--jarvis-primary) 8%, var(--jarvis-border-soft));
    border-color: var(--jarvis-primary);
}

.jarvis-dropzone-area.jarvis-is-blocked {
    pointer-events: none;
    opacity: .65;
}

.jarvis-dropzone-area svg {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 4px;
    color: var(--jarvis-primary);
}

.jarvis-dropzone-title {
    color: var(--jarvis-text);
    font-size: .9rem;
    font-weight: 600;
}

.jarvis-dropzone-subtitle {
    font-size: .8rem;
}

.jarvis-dropzone-camera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 2px dashed var(--jarvis-border);
    color: var(--jarvis-primary);
    cursor: pointer;
}

.jarvis-dropzone-camera svg {
    width: 1.1rem;
    height: 1.1rem;
}

.jarvis-dropzone-camera-text {
    font-size: .9rem;
    font-weight: 600;
}

.jarvis-dropzone-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jarvis-dropzone-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--jarvis-border-soft);
    border-radius: var(--jarvis-radius);
    color: var(--jarvis-text);
    font-size: .85rem;
}

.jarvis-dropzone-file > svg {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    color: var(--jarvis-primary);
}

.jarvis-dropzone-file-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.jarvis-dropzone-file-size {
    flex: 0 0 auto;
    color: var(--jarvis-text-muted);
    font-size: .78rem;
}

.jarvis-dropzone-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--jarvis-text-muted);
    cursor: pointer;
}

.jarvis-dropzone-remove:hover {
    background: var(--jarvis-border-soft);
    color: var(--jarvis-text);
}

.jarvis-dropzone-remove svg {
    width: .85em;
    height: .85em;
}

.jarvis-dropzone-message {
    color: var(--jarvis-danger);
    font-size: .8rem;
}

/* FormCheck e FormSwitch */
.jarvis-check,
.jarvis-switch {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    position: relative;
    cursor: pointer;
}

.jarvis-check input,
.jarvis-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.jarvis-check-label,
.jarvis-switch-label {
    color: var(--jarvis-text);
    line-height: 1.3;
}

/* A marca é desenhada em CSS: sem depender de fonte de ícone. */
.jarvis-check-mark {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    position: relative;
    border: 1px solid var(--jarvis-border);
    border-radius: 6px;
    background: var(--jarvis-surface);
    transition: background-color .16s ease, border-color .16s ease;
}

.jarvis-check-mark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 6px;
    height: 11px;
    border: solid var(--jarvis-on-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .16s ease;
}

.jarvis-check input:checked ~ .jarvis-check-mark {
    background: var(--jarvis-primary);
    border-color: var(--jarvis-primary);
}

.jarvis-check input:checked ~ .jarvis-check-mark::after {
    transform: rotate(45deg) scale(1);
}

.jarvis-switch-mark {
    display: block;
    width: 44px;
    height: 26px;
    flex: 0 0 auto;
    position: relative;
    border-radius: 999px;
    background: var(--jarvis-border);
    transition: background-color .16s ease;
}

.jarvis-switch-mark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--jarvis-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .16s ease;
}

.jarvis-switch input:checked ~ .jarvis-switch-mark {
    background: var(--jarvis-primary);
}

.jarvis-switch input:checked ~ .jarvis-switch-mark::after {
    transform: translateX(18px);
}

.jarvis-check input:focus-visible ~ .jarvis-check-mark,
.jarvis-switch input:focus-visible ~ .jarvis-switch-mark {
    outline: 2px solid var(--jarvis-primary);
    outline-offset: 2px;
}

.jarvis-check input:disabled ~ .jarvis-check-mark,
.jarvis-switch input:disabled ~ .jarvis-switch-mark,
.jarvis-check:has(input:disabled),
.jarvis-switch:has(input:disabled) {
    opacity: .65;
    cursor: not-allowed;
}

/* Fab */
.jarvis-fab {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    appearance: none;
    background: var(--jarvis-fab-bg, var(--jarvis-primary));
    border: none;
    border-radius: 50%;
    box-shadow: var(--jarvis-fab-shadow);
    color: var(--jarvis-fab-color, var(--jarvis-on-primary));
    font-size: 1.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}

.jarvis-fab:hover {
    color: var(--jarvis-fab-color, var(--jarvis-on-primary));
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(.92);
}

.jarvis-fab svg,
.jarvis-fab img {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

@media (min-width: 768px) {
    .jarvis-fab {
        display: none;
    }
}

/* ButtonWhatsApp */
.jarvis-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100000;
}

.jarvis-whatsapp img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    border-radius: 150% !important;
    box-shadow: 0 0 0 var(--jarvis-whatsapp-glow);
    cursor: pointer;
    animation: jarvis-whatsapp-pulse 2s infinite;
}

@-webkit-keyframes jarvis-whatsapp-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--jarvis-whatsapp-glow);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px var(--jarvis-whatsapp-glow);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 var(--jarvis-whatsapp-glow);
    }
}

@keyframes jarvis-whatsapp-pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--jarvis-whatsapp-pulse);
        box-shadow: 0 0 0 0 var(--jarvis-whatsapp-pulse);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px var(--jarvis-whatsapp-pulse-fade);
        box-shadow: 0 0 0 10px var(--jarvis-whatsapp-pulse-fade);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 var(--jarvis-whatsapp-pulse-fade);
        box-shadow: 0 0 0 0 var(--jarvis-whatsapp-pulse-fade);
    }
}
/* Sheet */
.jarvis-sheet .modal-content {
    color: var(--jarvis-text);
}

.jarvis-sheet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.jarvis-sheet-actions > .btn {
    margin: 0;
    min-width: 120px;
}

/* No celular a janela vira uma folha que sobe do rodapé. */
@media (max-width: 575.98px) {
    .modal.jarvis-sheet .modal-dialog {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }

    .modal.jarvis-sheet.show .modal-dialog {
        transform: none;
    }

    /* Durante o arrasto a posição vem do JavaScript, sem transição competindo. */
    .modal.jarvis-sheet.jarvis-sheet-dragging .modal-dialog {
        transition: none;
    }

    .modal.jarvis-sheet .modal-content {
        border: 0;
        border-radius: 22px 22px 0 0;
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal.jarvis-sheet .modal-header {
        position: relative;
        padding-top: 22px;
        touch-action: none;
    }

    .modal.jarvis-sheet .modal-header::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: var(--jarvis-border);
        transform: translateX(-50%);
    }

    .modal.jarvis-sheet .modal-body {
        overflow-y: auto;
    }

    .jarvis-sheet-actions > .btn {
        flex: 1;
        min-width: 0;
    }
}