/**
 * mobile-responsive.css — Mobile Responsive Layer
 * InspectorPRO NR-13 PWA
 * 
 * SAFE: Todas as regras estão dentro de @media queries.
 * Desktop permanece 100% inalterado.
 * 
 * Breakpoints:
 *   1150px — Tablets e celulares landscape
 *   480px — Celulares portrait
 */

/* ==========================================
   HAMBURGER BUTTON (hidden on desktop)
   ========================================== */

.mobile-hamburger {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 10002;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.mobile-hamburger:active {
    transform: scale(0.92);
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #00d4ff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* Hamburger → X animation when open */
body.sidebar-open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

body.sidebar-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

body.sidebar-open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================
   MOBILE OVERLAY (hidden on desktop)
   ========================================== */

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
}

/* ==========================================
   TABLET & MOBILE (≤ 1150px)
   ========================================== */

@media (max-width: 1150px) {

    /* --- Hamburger: show & safe area support --- */
    /* ATENÇÃO: No tablet (769px a 1150px) mostramos. No mobile (<= 768px) vamos esconder depois. */
    .mobile-hamburger {
        display: flex !important;
        top: calc(14px + env(safe-area-inset-top)) !important;
        left: calc(14px + env(safe-area-inset-left)) !important;
    }

    /* --- Overlay: enable --- */
    .mobile-overlay.active {
        display: block !important;
    }

    /* --- Sidebar: slide off-screen --- */
    #sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 10001 !important;
        width: 260px !important;
        min-width: 260px !important;
    }

    body.sidebar-open #sidebar {
        transform: translateX(0) !important;
    }

    /* --- Main content: full width & safe areas --- */
    main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px !important;
        padding-top: calc(68px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        padding-left: calc(16px + env(safe-area-inset-left)) !important;
        padding-right: calc(16px + env(safe-area-inset-right)) !important;
    }

    .page {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
    }

    /* --- Login page: untouched (already fullscreen) --- */
    #page-login {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px !important;
    }

    #page-login > div {
        padding: 28px 20px !important;
        max-width: 100% !important;
    }

    /* --- Dashboard tile grid: 2 columns --- */
    .dashboard-tile-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* [R700] .site-shortcuts-row saiu do HTML — a regra que a escondia no mobile
       morreu junto (o hub de atalhos repetia o menu lateral e foi removido). */

    .tile {
        padding: 20px !important;
    }

    .tile-icon {
        font-size: 1.8rem !important;
    }

    .tile-title {
        font-size: 1rem !important;
    }

    /* --- Readability Overrides (Sizing & Contrast) --- */
    .tile-desc {
        font-size: 0.8rem !important; /* Aumentado de 0.7rem para melhor leitura */
    }

    .kpi-label, 
    .kpi-label-small,
    .pipeline-stage-label,
    .compliance-rate-label,
    .compliance-stat-label {
        font-size: 0.75rem !important; /* Garantir tamanho legível de no mínimo 12px */
        letter-spacing: 0.5px !important;
    }

    .tracking-step {
        font-size: 0.75rem !important; /* Aumentado de 0.65rem */
        width: 28px !important;
        height: 28px !important;
    }

    .tracking-step-arrow {
        font-size: 0.65rem !important; /* Aumentado de 0.5rem */
    }

    .discount-badge-premium {
        font-size: 0.75rem !important; /* Aumentado de 0.7rem */
    }

    .badge-sst {
        font-size: 0.72rem !important; /* Aumentado de 0.6rem */
        padding: 3px 8px !important;
    }

    .badge-obrig {
        font-size: 0.7rem !important; /* Aumentado de 0.55rem */
        padding: 2px 6px !important;
    }

    .item-texto {
        font-size: 0.88rem !important; /* Aumentado de 0.82rem */
        line-height: 1.5 !important;
    }

    .item-fonte {
        font-size: 0.72rem !important; /* Aumentado de 0.65rem */
    }

    /* --- Inline grids: stack vertically --- */
    .grid-2-cols,
    .grid-3-cols,
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Orçamentos KPI grid (forced 4 cols → 2 cols) */
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Typography scaling --- */
    h2 {
        font-size: 1.5rem !important;
    }

    /* --- Tables: horizontal scroll wrapper --- */
    table {
        font-size: 0.8rem;
    }

    th, td {
        padding: 10px 8px !important;
    }

    /* --- Modals: Bottom Sheet on Mobile --- */
    .modal > div,
    [id*="modal"] > div:first-child {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important; /* No margin on mobile, sticks to bottom */
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important; /* Arredondado apenas no topo */
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(0);
        animation: slideUpModal 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    }

    @keyframes slideUpModal {
        0% { transform: translateY(100%); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    /* Align modal container to flex-end to push content down */
    .modal, [id*="modal"] {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* --- Overriding Small Modal Close Touch Targets (at least 48px) --- */
    button[onclick*="fecharEditorFoto"],
    button[onclick*="hideModal"] {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }

    /* --- KPI cards: smaller font --- */
    [id^="kpi-"] {
        font-size: 1.3rem !important;
    }

    /* --- Buttons: touch-friendly min height (WCAG 48px standard para Native) --- */
    button, .btn, select {
        min-height: 48px !important; 
    }

    /* --- Search & Inputs: Prevent Safari Auto-Zoom on Focus (≥ 16px) --- */
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    input[type="email"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important; /* Full coverage for zoom prevention */
    }

    /* --- Flex layouts: stack on mobile --- */
    .flex.justify-between.items-center.mb-10 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* --- Page headers with buttons: stack --- */
    .flex.justify-between {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* --- Quick action buttons group --- */
    [style*="display:flex"][style*="gap:10px"] {
        flex-wrap: wrap !important;
    }

    /* --- Canvas charts: limit height --- */
    canvas {
        max-height: 220px !important;
    }

    /* --- Timeline container padding --- */
    #activity-timeline-container {
        padding-left: 8px !important;
    }

    /* --- Wizard: ensure full width --- */
    #page-nova-inspecao {
        padding: 8px !important;
    }

    /* --- Sidebar internal: touch-friendly spacing --- */
    .sidebar-header {
        padding: 20px 16px !important;
    }

    .nav-item {
        padding: 14px 20px !important; /* Ajustado para área de toque confortável */
        font-size: 0.95rem !important;
    }

    /* --- Form grids inside modals: single column --- */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Ensure grid-column span-2 becomes span-1 on mobile */
    [style*="grid-column:span 2"],
    [style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }

    /* --- Client details modal: tabs stack --- */
    #modal-detalhes-cliente [style*="display:flex"][style*="border-bottom"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Orçamento table: smaller --- */
    .premium-table th,
    .premium-table td {
        padding: 10px 6px !important;
        font-size: 0.75rem !important;
    }

    /* --- Background glow: disable on mobile (perf) --- */
    [style*="filter:blur(120px)"],
    [style*="filter:blur(100px)"] {
        display: none !important;
    }

    /* --- Photo crop modal: full width --- */
    #modal-crop-foto > div {
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    /* --- Pipeline: vertical collapse --- */
    .pipeline-stages {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    .pipeline-stage {
        flex: none !important;
        width: 100% !important;
        max-width: 340px !important;
    }

    .pipeline-arrow {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        justify-content: center !important;
        align-items: center !important;
        transform: rotate(90deg) !important;
        margin: 4px 0 !important;
    }

    .pipeline-arrow::after {
        width: 2px !important;
        height: 24px !important;
        background: linear-gradient(180deg, rgba(0,212,255,0.3), rgba(0,212,255,0.05)) !important;
    }
}

/* ==========================================
   SMALL PHONES & TRUE MOBILE (≤ 768px)
   (Aplicando regras exclusivas Native App)
   ========================================== */

@media (max-width: 768px) {
    /* 1. Esconder Hamburger Menu duplo (será controlado via Bottom Nav) 
       Mas se a sidebar estiver aberta, mostramos o hamburger (que vira X) para poder fechar. */
    .has-bottom-nav:not(.sidebar-open) .mobile-hamburger {
        display: none !important;
    }

    /* 2. Remover padding excessivo do topo já que não tem hamburger */
    .has-bottom-nav main {
        padding-top: calc(20px + env(safe-area-inset-top)) !important;
    }

    /* Garantir edge-to-edge nas páginas */
    .page {
        padding: 0 4px !important; 
    }

    /* [R911] O App Bar era sticky — mas o cabeçalho das telas cresceu (título +
       2 fileiras de botões = 258px medidos) e a faixa grudada passou a COBRIR
       1/3 do celular, com o conteúdo rolando POR BAIXO (prints do dono, 24/08).
       No celular ele agora rola junto com a página: a tela inteira volta a ser
       de quem trabalha. No desktop nada muda (este bloco é só ≤640px). */
    .page > div:first-child {
        position: static;
        padding: 16px 8px;
        margin: -4px -4px 16px -4px;
        background: rgba(15, 23, 42, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* ==========================================
   VERY SMALL PHONES (≤ 480px)
   ========================================== */

@media (max-width: 480px) {

    .dashboard-tile-grid {
        grid-template-columns: 1fr !important;
    }

    main {
        padding: 6px !important;
    }

    .page {
        padding: 4px !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    /* KPI grid: stack to 2 or 1 */
    .grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
    }

    [id^="kpi-"] {
        font-size: 1.1rem !important;
    }

    /* Buttons: stack instead of row */
    [style*="display:flex"][style*="gap:10px"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    [style*="display:flex"][style*="gap:10px"] > button,
    [style*="display:flex"][style*="gap:10px"] > a {
        width: 100% !important;
    }

    /* Modal content even tighter */
    .modal > div,
    [id*="modal"] > div:first-child {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    /* Login: tighter padding */
    #page-login > div {
        padding: 24px 16px !important;
    }

    #page-login h2 {
        font-size: 1.5rem !important;
    }

    /* Sidebar: full width on very small screens */
    #sidebar {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* ==========================================
   MISSING: tile-pink gradient (discovered in audit)
   ========================================== */

.tile-pink {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

/* ==========================================
   INTERMEDIATE VIEWPORTS (1151px to 1280px)
   ========================================== */

@media (min-width: 1151px) and (max-width: 1280px) {
    /* The sidebar is visible here, meaning available width is smaller (width - 260px).
       So 4/5 column layouts will squish. We override them to 2 columns. */
    .grid-cols-4,
    .md\:grid-cols-4,
    .md\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dashboard-tile-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .dash-macro-grid {
        grid-template-columns: 1fr !important;
    }

    .financial-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   [R285-MOBILE] Rodada 100% — modais utilizáveis no celular
   Print do dono (iPhone): modal Novo Orçamento espremido + página presa no
   zoom. Causas: (a) iOS dá auto-zoom quando um campo tem fonte < 16px;
   (b) corpo do modal em grid 2fr/1fr forçava 2 colunas de ~160px no 375px;
   (c) header em flex sem quebra espremia o título.
   ══════════════════════════════════════════════════════════════════════ */

/* (a) trava o auto-inflar de texto do iOS/Android — global e inofensivo */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 480px) {
    /* (a) iOS: campo com fonte <16px dispara zoom ao focar e a página fica presa nele */
    [id^="modal-"] input,
    [id^="modal-"] select,
    [id^="modal-"] textarea,
    #__kpi_modal input {
        font-size: 16px !important;
    }

    /* Nenhum modal pode ser mais largo que a tela */
    [id^="modal-"] > div, #__kpi_modal > div {
        max-width: 100% !important;
        margin: 8px 0 !important;
    }
    #modal-novo-orcamento { padding: 8px !important; }

    /* (c) header do Novo Orçamento: título em cima, botões embaixo (era espremido) */
    #modal-novo-orcamento .orc-modal-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #modal-novo-orcamento .orc-modal-head > div:last-child {
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    /* (b) corpo: 1 coluna no celular (resumo financeiro desce pra baixo dos itens) */
    #modal-novo-orcamento .orc-modal-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 14px !important;
    }

    /* Adicionar Serviço: Serviço em linha cheia; Qtd/Valor lado a lado; botão largo */
    #modal-novo-orcamento .orc-add-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    #modal-novo-orcamento .orc-add-grid > div:first-child {
        grid-column: 1 / -1;
    }
    #modal-novo-orcamento .orc-add-grid > button {
        grid-column: 1 / -1;
        height: 48px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   [R954] TABLET DEITADO (769–1150px) — o menu para de tapar o trabalho.

   Dono (26/08, com o tablet na horizontal, em campo): *"o sistema não funciona
   com o tablet virado na horizontal — o menu abre e fica na frente de tudo e
   não dá pra ver nada"*.

   A CAUSA: esta faixa era uma TERRA DE NINGUÉM. A barra de baixo (bottom-nav)
   só existe até 768px; o menu lateral fixo só entrava acima de 1150px. No meio,
   sobrava o menu deslizante do celular — 260px por cima do conteúdo, com overlay
   escuro atrapalhando tudo. Num tablet deitado de 1024px isso é absurdo: cabe
   menu E trabalho lado a lado, como no computador.

   Agora, de 769 a 1150: o menu vira COLUNA FIXA de 200px e o conteúdo começa
   depois dela. Sem overlay, sem tapar nada, sem precisar abrir e fechar.
   [R1046] E SO DEITADO -- foi o que faltou aqui.

   Dono (28/08): *"Voce arrumou o menu lateral pro tablet deitado mas agora ele
   aparece no tablet em pe"*.

   Eu escrevi aqui que "tablet em pe segue com a barra de baixo" e tratei isso
   como verdade. Nao e: tablet em pe nao mede menos de 769. Um iPad em pe da
   810px, um Galaxy Tab da 800 -- todos caem DENTRO desta faixa. Confundi
   "tablet em pe" com "celular", e a coluna fixa de 200px, que existe para
   aproveitar a sobra horizontal do aparelho DEITADO, passou a comer um quinto
   da largura justamente onde nao ha sobra nenhuma.

   Largura nunca disse orientacao. Quem diz e a orientacao. A faixa continua a
   mesma; o que ela agora exige e que o aparelho esteja deitado. Em pe, a regra
   de <=1150px que ja existe assume sozinha e entrega gaveta + hamburguer -- o
   comportamento correto, e o que ele tinha antes de eu mexer.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1150px) and (orientation: landscape) {

    /* o menu fica ANCORADO, não deslizando por cima */
    #sidebar {
        transform: none !important;
        width: 200px !important;
        min-width: 200px !important;
        z-index: 900 !important;              /* abaixo de modais; nunca por cima do trabalho */
        padding-left: env(safe-area-inset-left);
    }

    body.sidebar-open #sidebar { transform: none !important; }

    /* o conteúdo passa a começar DEPOIS do menu */
    main {
        margin-left: 200px !important;
        width: calc(100% - 200px) !important;
        padding-top: 16px !important;         /* sem o hambúrguer, não precisa do vão de cima */
    }

    .page { margin-left: 0 !important; width: 100% !important; }

    /* hambúrguer e overlay não fazem sentido com o menu sempre visível */
    .mobile-hamburger { display: none !important; }
    .mobile-overlay,
    .mobile-overlay.active { display: none !important; }

    /* a barra de baixo continua fora desta faixa (o menu lateral já navega) */
    .bottom-nav, #bottom-nav { display: none !important; }

    /* itens do menu com alvo de dedo, na largura menor */
    #sidebar .nav-item {
        padding: 11px 12px !important;
        font-size: 0.86rem !important;
        min-height: 42px;
    }
    #sidebar .sidebar-header { padding: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [R963] O GIRO DO TABLET NÃO PODE QUEBRAR O LAYOUT — margem por CSS, sempre.

   Dono (26/08, foto do tablet DEITADO no 296.2): "Tablet horizontal também
   não arrumou" — menu fixo na esquerda e o CONTEÚDO POR BAIXO dele.

   A CAUSA: no computador, quem afasta o conteúdo do menu era um estilo INLINE
   (fixDOMStructure em navigation.js): >1150px ele escreve margin-left:260px;
   até 1150px ele APAGA a margem. Só que isso roda UMA vez, no boot. O tablet
   liga em pé (menor que 1150 → margem apagada), o dono GIRA para deitado
   (maior que 1150) e ninguém devolve a margem — conteúdo embaixo do menu.

   A REGRA: cada faixa de largura declara a margem em CSS, com !important
   (vence o inline morto do boot). Girar o aparelho muda a media query na
   hora — sem depender de JS rodar de novo. A largura vem de --sidebar-w
   (fonte única: densidade.css muda para 218px e tudo acompanha).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1151px) {
    main {
        margin-left: var(--sidebar-w, 260px) !important;
        width: calc(100% - var(--sidebar-w, 260px)) !important;
    }
    /* girou para deitado com o menu-gaveta aberto: some com os restos do modo em pé */
    .mobile-overlay, .mobile-overlay.active { display: none !important; }
    .mobile-hamburger { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [R1098] O DEDO PRECISA ACERTAR — e o olho precisa LER.
   ═══════════════════════════════════════════════════════════════════════════

   Achado pelo próprio auditor de mobile (CHECK 49), medindo o app de verdade num
   Chromium com toque. O que ele encontrou, e que estava congelado na catraca como
   "legado aceito" desde que ela nasceu:

       #cfg-logo-remover-fundo    16 × 16 px     Configurações
       input (checkbox)           22 × 22 px     Usuários, 4 deles
       "Painel"                   47 × 20 px     Relatórios
       #btn-login-options         36 × 48 px     Login
       fontes de 8,8 a 10,9 px    Dashboard, Orçamentos, Calendário, Certificados

   Uma caixa de seleção de 16 px no dedo do dono, em campo, com luva ou com a mão suja
   de graxa, não é "pequena": é inclicável. E fonte de 8,8 px no sol da fazenda não se lê.

   O piso de 40 px é o que a WCAG 2.2 (2.5.8) pede como alvo mínimo, e 11 px é o piso que
   este auditor já cobrava — ele só nunca tinha sido cumprido, porque o legado entrou
   inteiro na catraca no dia em que ela foi criada.

   `pointer: coarse` é o que separa dedo de mouse: no notebook do escritório nada muda.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1150px) and (pointer: coarse) {

    /* caixas de seleção e rádios: o quadrado continua visualmente discreto, mas a ÁREA
       que responde ao toque passa de 16 px para 40. */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    /* [R1098] SÓ A ALTURA, e por quê: `min-width: 40px` em botão estreito de emoji
       (⚠️ 📅 🔮 dos Relatórios) forçava a largura e o conteúdo quebrava em coluna — o
       auditor pegou seis "torres" de 40×134 px na hora. Altura mínima é o que resolve o
       dedo sem mexer no fluxo horizontal; largura se conserta caso a caso. */
    button,
    .btn,
    a[onclick],
    [role="button"] {
        min-height: 40px;
    }

    /* [R1098] A FONTE MÍNIMA NÃO ENTRA POR AQUI — e o motivo fica registrado.
       Tentei `body * { font-size: max(11px, 1em) }` e o auditor reprovou na hora: dentro
       de `max()`, `1em` resolve contra o PAI, então cada nível herdava um pouco maior e o
       texto empilhou em torres de 40×134 px na tela de Relatórios.
       Regra global de fonte é remédio pior que a doença. As fontes de 8,8 a 10,9 px são
       de regras específicas (cartões do dashboard, chips do funil, rótulos do calendário)
       e se consertam UMA A UMA, na regra que as define — não por cima de tudo. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   [R1098] FONTE MÍNIMA NO DEDO — pelas classes que a produzem, nunca por cima de tudo.
   ═══════════════════════════════════════════════════════════════════════════

   A tentativa global (`body * { font-size: max(11px, 1em) }`) foi reprovada pelo auditor
   na hora: dentro de `max()`, `1em` resolve contra o PAI, cada nível herdava um pouco
   maior, e o texto empilhou em torres de 40×134 px em Relatórios.

   O que sobrou de miúdo vem de rótulo de cartão e de chip — texto de APOIO, que em
   monitor de 24" fica elegante e no celular no sol da fazenda não se lê:

       8,8 px   "Executado"                     Dashboard
       9,6 px   "0% ocupação"                   Calendário
      10,4 px   "Execução de Laudos"            Dashboard
      10,9 px   "Em aberto (aguardando…)"       Orçamentos / Certificados

   Aqui o piso é aplicado só onde o tamanho é DECLARADO abaixo de 11 px, com a unidade
   que o código usa (rem). Em monitor nada muda — `pointer: coarse` separa dedo de mouse.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1150px) and (pointer: coarse) {

    [style*="font-size:0.5"],
    [style*="font-size: 0.5"],
    [style*="font-size:0.6"],
    [style*="font-size: 0.6"],
    [style*="font-size:0.68"],
    [style*="font-size: 0.68"] {
        font-size: 0.72rem !important;   /* ≈ 11,5 px, acima do piso de 11 */
    }
}