/* ═══════════════════════════════════════════════════════════════════════════
   native.css — camada de "app nativo" do Portal do Tutor.

   Carregado DEPOIS de app.css. Aqui mora tudo que existe para apagar os sinais
   de que isto é uma página web: safe-area do notch, o flash azul do toque, o
   menu de contexto do long-press, o bounce do navegador, o hover que gruda no
   dedo e o modal que aparece em fade no meio da tela.

   Regra de convívio: nada aqui muda cor de marca nem layout de conteúdo — isso
   continua em app.css e nas páginas. Esta folha só cuida do COMPORTAMENTO e do
   invólucro (shell). Se um estilo daqui sumir, o app continua funcionando; só
   volta a ter cara de site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
    /* Fonte do sistema no corpo: é o que o olho reconhece como "app deste
       telefone". A Sulphur Point (marca) fica nos títulos — ver o tema em
       MainLayout.razor, que aponta H1..H6/Subtitle para --tutor-font-brand. */
    --tutor-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                         "Apple Color Emoji", "Segoe UI Emoji";
    --tutor-font-brand: "Sulphur Point", var(--tutor-font-system);

    /* Curva de bottom sheet do iOS — sobe rápido e assenta sem repique. */
    --tutor-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --tutor-ease-press: cubic-bezier(0.2, 0, 0.2, 1);

    /* Fallbacks: sem @supports de env(), todo calc() que usasse env() direto
       viraria declaração inválida e derrubaria o padding inteiro. */
    --tutor-safe-top: 0px;
    --tutor-safe-bottom: 0px;
    --tutor-safe-left: 0px;
    --tutor-safe-right: 0px;

    --tutor-nav-height: 64px;

    /* Cores da marca da clínica. O padrão é o teal do AtendeVet — que é
       exatamente o gradiente do .dragatos-pet-header —, então clínica sem cor
       definida continua vendo o que via antes. Quando o médico define uma cor,
       o MainLayout sobrescreve estas quatro em :root via
       tutorNative.definirCoresDaMarca, com os valores já calculados pelo
       BrandColorHelper (que garante contraste em marca clara e escura). */
    --tutor-brand-de: #11414B;
    --tutor-brand-para: #247a8a;
    --tutor-brand-on: #ffffff;
    --tutor-brand-tinta: #11414B;
}

/* Header de cartão na cor da marca, terminando em ONDA — mesma técnica do site
   (páginas de clínica): uma máscara SVG recorta a borda de baixo.

   O caminho preenche a área de CIMA e deixa a borda inferior ondulada — é o
   inverso da onda do site, que decora o rodapé de um card claro. `mask` recorta
   o elemento inteiro, então o gradiente é que ganha o contorno; nada de
   pseudo-elemento sobreposto, que brigaria com o texto.

   🔴 A onda tem altura FIXA (--tutor-onda-altura), em DUAS camadas de máscara:
   um retângulo sólido cobrindo tudo menos a faixa de baixo + a onda ocupando
   exatamente essa faixa.

   Antes era uma camada só, com `100% 100%` — a máscara esticava junto com o
   elemento e o corte ficava em ~72..74% da ALTURA. Enquanto o header tinha uma
   linha de texto isso sobrava; bastava o nome do plano quebrar em duas linhas
   para a altura crescer, a onda subir proporcionalmente e comer a linha do
   valor. O conteúdo só escapava enquanto `padding-top + conteúdo` coubesse em
   ~0,39 × padding-bottom — uma folga que dependia do TAMANHO DO TEXTO, ou seja,
   quebrava sozinha em produção.

   Com a faixa fixa, a folga necessária é constante: basta padding-bottom >=
   --tutor-onda-altura, e nenhum texto entra na onda por mais alto que o header
   fique. */
.tutor-card-header {
    --tutor-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H400 V74 C340,94 300,60 240,76 C180,92 120,58 60,74 C40,79 20,82 0,79 Z' fill='%23000'/%3E%3C/svg%3E");
    --tutor-onda-altura: 26px;
    background: linear-gradient(135deg, var(--tutor-brand-de) 0%, var(--tutor-brand-para) 100%);
    color: var(--tutor-brand-on);
    /* padding-bottom > altura da onda: a última linha de texto para ACIMA da faixa. */
    padding: 16px 18px 32px;
    -webkit-mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--tutor-onda-altura)) no-repeat,
        var(--tutor-wave) bottom / 100% var(--tutor-onda-altura) no-repeat;
    mask:
        linear-gradient(#000, #000) top / 100% calc(100% - var(--tutor-onda-altura)) no-repeat,
        var(--tutor-wave) bottom / 100% var(--tutor-onda-altura) no-repeat;
    /* União das duas camadas. O padrão já é `add`, mas o WebKit legado usa outro
       vocabulário — sem isto, o Safari antigo intersecta e o header some. */
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

/* O conteúdo logo abaixo sobe para dentro da onda: sem isto sobraria uma faixa
   branca do tamanho da amplitude, e a onda pareceria um erro de recorte.

   7px = a parte TRANSPARENTE da faixa de 26px (a curva ocupa ~72..82% dela).
   Era -14px quando a onda esticava com a altura e a amplitude passava de 20px;
   manter aquele valor agora empurraria o corpo do card por cima do header. */
.tutor-card-header + * {
    margin-top: -7px;
}

/* Sem máscara não há como saber que a borda é ondulada — o cantinho arredondado
   evita o retângulo cru em navegador antigo. */
@supports not ((-webkit-mask: none) or (mask: none)) {
    .tutor-card-header {
        border-radius: 16px 16px 0 0;
        padding-bottom: 16px; /* sem onda não há faixa a evitar */
    }

    .tutor-card-header + * {
        margin-top: 0;
    }
}

.tutor-card-header .mud-typography,
.tutor-card-header .mud-icon-root {
    color: var(--tutor-brand-on);
}

/* Fundo suave da marca, para chips e ícones sobre o cartão branco. */
.tutor-brand-wash {
    background: color-mix(in srgb, var(--tutor-brand-tinta) 10%, transparent);
    color: var(--tutor-brand-tinta);
}

@supports (padding: env(safe-area-inset-top)) {
    :root {
        --tutor-safe-top: env(safe-area-inset-top);
        --tutor-safe-bottom: env(safe-area-inset-bottom);
        --tutor-safe-left: env(safe-area-inset-left);
        --tutor-safe-right: env(safe-area-inset-right);
    }
}

/* ── Tipografia ───────────────────────────────────────────────────────────── */
/* html:root vence o `:root` que o MudThemeProvider injeta em <style> no body
   (mesma especificidade perderia por ordem de documento). */

html:root {
    --mud-typography-default-family: var(--tutor-font-system);
    --mud-typography-body1-family: var(--tutor-font-system);
    --mud-typography-body2-family: var(--tutor-font-system);
    --mud-typography-button-family: var(--tutor-font-system);
    --mud-typography-caption-family: var(--tutor-font-system);
    --mud-typography-overline-family: var(--tutor-font-system);
    --mud-typography-h1-family: var(--tutor-font-brand);
    --mud-typography-h2-family: var(--tutor-font-brand);
    --mud-typography-h3-family: var(--tutor-font-brand);
    --mud-typography-h4-family: var(--tutor-font-brand);
    --mud-typography-h5-family: var(--tutor-font-brand);
    --mud-typography-h6-family: var(--tutor-font-brand);
    --mud-typography-subtitle1-family: var(--tutor-font-brand);
    --mud-typography-subtitle2-family: var(--tutor-font-brand);
}

body {
    font-family: var(--tutor-font-system);
}

/* Botão de app não grita em CAIXA ALTA. */
.mud-button-root {
    text-transform: none;
    letter-spacing: 0;
}

/* ── Comportamento de toque ───────────────────────────────────────────────── */

html {
    /* Mata o retângulo azul que pisca em todo toque no Android/Chrome. */
    -webkit-tap-highlight-color: transparent;
    /* Impede o Safari de reflowar a fonte ao girar o aparelho. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Sem isto o app inteiro balança no fim do scroll (bounce do iOS) e o
       Chrome dispara o próprio pull-to-refresh por cima do nosso. */
    overscroll-behavior-y: none;
}

/* O long-press abre "Abrir link em nova aba / Copiar link" — o que denuncia o
   navegador na hora. Vale só para o invólucro: texto de conteúdo (telefone,
   endereço, resultado de exame) continua selecionável e copiável de propósito. */
.mud-appbar,
.mud-toolbar,
.tutor-nav-tile,
.tutor-page-header,
.mud-button-root,
.mud-icon-button,
.mud-chip,
.mud-dialog .mud-dialog-title,
.dragatos-pet-action-tile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mud-appbar a,
.tutor-nav-tile,
.tutor-nav-tile * {
    -webkit-touch-callout: none;
}

/* Imagem arrastável é reflexo de página; em app, foto não sai do lugar. */
img,
.mud-avatar {
    -webkit-user-drag: none;
    user-select: none;
}

/* Scroll com inércia dentro de qualquer área rolável do app. */
.mud-dialog-content,
.dragatos-action-scroll,
.mud-main-content {
    -webkit-overflow-scrolling: touch;
}

/* ── Safe areas (notch e barra de gestos) ─────────────────────────────────── */
/* O index.html já declara viewport-fit=cover; sem as regras abaixo o conteúdo
   passa POR BAIXO do notch e da barra de gestos do iPhone. Em desktop e em
   qualquer aparelho sem recorte, env() vale 0 e nada disto tem efeito. */

.mud-appbar.mud-appbar-fixed-top {
    padding-top: var(--tutor-safe-top);
    padding-left: var(--tutor-safe-left);
    padding-right: var(--tutor-safe-right);
}

.mud-appbar.mud-appbar-fixed-bottom {
    padding-bottom: var(--tutor-safe-bottom);
    padding-left: var(--tutor-safe-left);
    padding-right: var(--tutor-safe-right);
}

/* padding-top do .mud-main-content já é a altura do appbar (MudBlazor);
   a margem soma o recorte do topo em vez de disputar com ela. */
.mud-main-content {
    margin-top: var(--tutor-safe-top);
    /* Espaço do bottom nav + barra de gestos. Antes isto era `mb-16 pb-4` no
       container do MainLayout, que ignorava o recorte do aparelho. */
    padding-bottom: calc(var(--tutor-nav-height) + var(--tutor-safe-bottom) + 12px);
}

/* ── Feedback de pressão ──────────────────────────────────────────────────── */
/* Em touch não existe hover: o estado "gruda" no último elemento tocado e o
   card fica levantado depois que o dedo já saiu. O sinal nativo é o oposto —
   o alvo AFUNDA enquanto o dedo está nele e volta ao soltar. */

@media (hover: none), (pointer: coarse) {

    .dragatos-pet-card:active,
    .dragatos-clinica-card:active,
    .dragatos-stat-card:active,
    .dragatos-pet-action-tile:active,
    .clinica-acard:active,
    .tutor-nav-tile:active,
    .tutor-list-row:active {
        transform: scale(0.972);
        transition: transform 0.10s var(--tutor-ease-press);
    }

    .mud-button-root:active:not(.mud-disabled),
    .mud-icon-button:active:not(.mud-disabled) {
        transform: scale(0.94);
        transition: transform 0.10s var(--tutor-ease-press);
    }

    /* Alvo de toque de 44px (mínimo do HIG da Apple e do Material). Vários
       botões da tela usam Size.Small e caíam para ~28px. */
    .mud-button-root:not(.mud-icon-button) {
        min-height: 44px;
    }

    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Volta ao tamanho ao soltar, sem tranco. */
.dragatos-pet-card,
.dragatos-clinica-card,
.dragatos-stat-card,
.dragatos-pet-action-tile,
.clinica-acard,
.tutor-nav-tile,
.mud-button-root,
.mud-icon-button {
    transition: transform 0.18s var(--tutor-ease-press),
                box-shadow 0.2s ease;
}

/* ── Bottom nav ───────────────────────────────────────────────────────────── */

.tutor-nav {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    width: 100%;
}

.tutor-nav-item {
    flex: 1 1 0;
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.tutor-nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 12px;
    min-height: 48px;
    position: relative;
}

.tutor-nav-tile .mud-icon-root {
    font-size: 22px;
    /* O ícone da aba ativa cresce um tico — leitura periférica, sem depender
       só da opacidade. */
    transition: transform 0.18s var(--tutor-ease-press);
}

.tutor-nav-label {
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    font-weight: 500;
}

/* Ícone e texto seguem a cor de contraste da marca (--tutor-on-brand vem do
   style inline do app bar). Branco é o padrão quando a clínica não definiu cor:
   sem o fallback, marca clara deixaria o menu ilegível. */
.tutor-nav-tile,
.tutor-nav-tile .mud-typography,
.tutor-nav-tile .mud-icon-root,
.tutor-nav-label {
    color: var(--tutor-on-brand, #fff);
}

/* Aba inativa recua; a ativa fica cheia. Sem isto não dá para saber onde
   você está — que era o caso até aqui. */
.tutor-nav-item:not(.tutor-nav-item--active) .tutor-nav-tile {
    opacity: 0.62;
}

.tutor-nav-item--active .tutor-nav-tile {
    opacity: 1;
    background: var(--tutor-on-brand-wash, rgba(255, 255, 255, 0.14));
}

.tutor-nav-item--active .tutor-nav-label {
    font-weight: 700;
}

.tutor-nav-item--active .tutor-nav-tile .mud-icon-root {
    transform: translateY(-1px) scale(1.06);
}

@media (hover: hover) and (pointer: fine) {
    .tutor-nav-tile:hover {
        background: var(--tutor-on-brand-wash, rgba(255, 255, 255, 0.12));
    }
}

/* ── Header de página (substitui o breadcrumb) ────────────────────────────── */

.tutor-page-header {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    margin: 4px 0 12px;
}

.tutor-page-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px é o alvo mínimo do HIG — o mesmo que a regra de pointer:coarse dá aos
       botões do MudBlazor. Este aqui é um <button> cru, então precisa do seu. */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin-left: -10px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: transform 0.12s var(--tutor-ease-press), background-color 0.15s ease;
}

.tutor-page-header__back:active {
    transform: scale(0.88);
    background: rgba(17, 65, 75, 0.08);
}

.tutor-page-header__title {
    font-family: var(--tutor-font-brand);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tutor-page-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Transição de página ──────────────────────────────────────────────────── */
/* Trocar de rota sem transição é o que faz a navegação parecer um clique de
   link. O @key da rota no MainLayout recria o nó e replica a animação. */

.tutor-page {
    animation: tutorPageIn 0.26s var(--tutor-ease-sheet) both;
}

@keyframes tutorPageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Bottom sheets ────────────────────────────────────────────────────────── */
/* Modal de app sobe de baixo, com a alça de arrasto e os cantos de cima
   arredondados. No desktop (>= 768px) nada disto vale e o MudDialog continua
   centralizado como sempre.
   Vale para TODO .mud-dialog de propósito: o DialogOptions do MudBlazor 8 não
   aceita classe no diálogo, e neste app não existe modal que deva continuar
   flutuando no meio da tela do celular. A exceção é o passo obrigatório, que se
   identifica pela classe .mud-dialog-fullscreen (TutorDialog.SheetObrigatorio). */

@media (max-width: 767.98px) {

    .mud-dialog-container .mud-dialog {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
        border-radius: 22px 22px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 34px rgba(17, 65, 75, 0.22);
        animation: tutorSheetIn 0.30s var(--tutor-ease-sheet) both;
        /* Enquanto o dedo arrasta, o native.js escreve --tutor-sheet-drag. */
        transform: translateY(var(--tutor-sheet-drag, 0px));
    }

    /* Sheet "cheio" — usado pelo wizard de primeiro acesso, que é obrigatório
       e não deve competir com o que está atrás. */
    .mud-dialog-container .mud-dialog.mud-dialog-fullscreen {
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    /* Alça de arrasto. */
    .mud-dialog-container .mud-dialog::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 2px;
        background: rgba(17, 65, 75, 0.22);
        z-index: 3;
        pointer-events: none;
    }

    .mud-dialog-container .mud-dialog.mud-dialog-fullscreen::before {
        display: none;
    }

    /* Abre espaço para a alça e separa o cabeçalho do conteúdo rolável. */
    .mud-dialog .mud-dialog-title {
        padding: 20px 24px 12px;
        border-bottom: 1px solid rgba(17, 65, 75, 0.08);
        border-radius: 0;
        flex: 0 0 auto;
    }

    .mud-dialog-fullscreen .mud-dialog-title {
        padding-top: calc(14px + var(--tutor-safe-top));
    }

    /* Sheet sem título: o conteúdo é que precisa desviar da alça. Não dá para
       usar `> .mud-dialog-content:first-child` — o MudBlazor embrulha o conteúdo
       num mud-focus-trap, então ele nunca é filho direto do diálogo. */
    .mud-dialog:not(:has(.mud-dialog-title)) .mud-dialog-content {
        padding-top: 26px;
    }

    .mud-dialog .mud-dialog-content {
        overscroll-behavior: contain;
        padding-bottom: 12px;
    }

    /* Rodapé de ações respeitando a barra de gestos, com a ação principal
       ocupando a largura — o polegar não precisa mirar num canto. */
    .mud-dialog .mud-dialog-actions {
        flex: 0 0 auto;
        padding: 12px 16px;
        padding-bottom: calc(12px + var(--tutor-safe-bottom));
        border-top: 1px solid rgba(17, 65, 75, 0.08);
        border-radius: 0;
        gap: 10px;
    }

    .mud-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 auto;
        min-height: 48px;
        border-radius: 14px;
    }

    /* O botão de fechar do MudBlazor fica a 8px do topo e brigaria com a alça;
       desce um pouco e ganha alvo de 44px pela regra de pointer:coarse. */
    .mud-dialog .mud-dialog-title .mud-button-close {
        top: 14px;
        right: 10px;
    }
}

@keyframes tutorSheetIn {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Arrasto em curso: sem transição, o painel tem que colar no dedo. */
.mud-dialog.tutor-sheet--dragging {
    animation: none;
    transition: none;
}

/* Soltou sem fechar: volta assentando. */
.mud-dialog.tutor-sheet--settling {
    animation: none;
    transition: transform 0.24s var(--tutor-ease-sheet);
}

/* ── Snackbar ─────────────────────────────────────────────────────────────── */
/* Toast de app aparece no rodapé, acima da navegação — não sobre o cabeçalho. */

.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-left,
.mud-snackbar-location-bottom-right {
    padding-bottom: calc(var(--tutor-nav-height) + var(--tutor-safe-bottom) + 8px);
}

.mud-snackbar {
    border-radius: 14px;
}

/* ── Pull to refresh ──────────────────────────────────────────────────────── */

.tutor-ptr {
    position: fixed;
    top: calc(var(--tutor-safe-top) + 56px);
    left: 50%;
    z-index: 1200;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(17, 65, 75, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
}

.tutor-ptr__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(17, 65, 75, 0.18);
    border-top-color: #11414B;
}

.tutor-ptr--spinning .tutor-ptr__spinner {
    animation: tutorPtrSpin 0.7s linear infinite;
}

@keyframes tutorPtrSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Acessibilidade ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .tutor-page,
    .mud-dialog-container .mud-dialog {
        animation: none !important;
    }

    .dragatos-pet-card:active,
    .dragatos-clinica-card:active,
    .dragatos-stat-card:active,
    .dragatos-pet-action-tile:active,
    .clinica-acard:active,
    .tutor-nav-tile:active,
    .mud-button-root:active,
    .mud-icon-button:active {
        transform: none;
    }
}