/* ============================================================
   MEDPAD — Adaptação Mobile
   Alvo primário: Moto G100 + Hermit (Android WebView, Mobile UA)
   Viewport estimado: ~360 × 800 CSS px (portrait)

   REGRA DE OURO: Este arquivo NÃO altera nenhum comportamento
   desktop (min-width: 768px). Todas as regras aqui são escopo-
   adas a viewports menores ou a capacidades de entrada touch.
   ============================================================ */


/* ============================================================
   1. TOUCH TARGETS — @media (pointer: coarse)
      Aplicado a qualquer dispositivo de toque independente do
      tamanho de viewport (inclui tablets Hermit em landscape).
      Aumenta área de toque sem mudar tamanho visual dos itens.
   ============================================================ */

@media (pointer: coarse) {

    /* Botões Nor/Alt do exame físico — área de toque adequada */
    .pront-sym-opt {
        min-height: 2.75rem;
        align-items: center;
        padding: 0.2rem 0.3rem;
    }

    /* Pill S/N — targets já cobertos pela seção 2, mas reforço aqui */
    .switch-pill-v5 label {
        min-height: 2.6rem;
        min-width: 2.15rem;
    }

    /* Botão remover item extra — 1.75rem ~28px */
    .pront-extra-remove {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    /* Botão calendário — 1.85rem ~30px */
    .prontuario-panel button.pront-date-cal-btn {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* "+" do título do bloco — sem moldura, muito pequeno */
    .pront-add-discrete {
        min-width: 2.2rem;
        min-height: 2.2rem;
        padding: 4px 6px;
    }

    /* "+" inline de item — sem borda, pequeno */
    .pront-add-btn--item {
        min-width: 2.2rem;
        min-height: 2.2rem;
        padding: 2px 4px;
    }

    /* Botão remover chip de doença */
    .pront-disease-chip__remove {
        min-width: 2rem;
        min-height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Toggle triângulo para campos clínicos (▶ medic./doenças) */
    .prontuario-panel button.pront-clinical-toggle {
        min-width: 2.2rem;
        min-height: 2.2rem;
    }

    /* Help badge circular (ⓘ) — 1.05rem ~17px */
    .pront-help-badge {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    /* Botão de ajuda de protocolo — 1.05rem ~17px */
    .pront-protocol-help-btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    /* Botões de status UBS (Suspeita/Confirmado/etc.) */
    .pront-ubs-status-btn {
        min-height: 2.5rem;
        padding: 0.35rem 0.65rem;
    }

    /* Botões de cálculo na sidebar */
    .calc-btn {
        padding: 10px 0;
        font-size: 0.88rem;
    }

    /* Cabeçalho de seção da sidebar (clicável para expandir) */
    .calc-header {
        padding: var(--spacing-sm) 0;
        min-height: 2.75rem;
    }

    /* Botões do popover de calculadora */
    .popover-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.8rem;
    }

    /* Inputs internos do popover: maior área de toque */
    .calc-popover .input-group input,
    .calc-popover .input-group select {
        padding: var(--spacing-sm) 0;
        font-size: 1rem;
    }
}


/* ============================================================
   2. GRADE DE SINTOMAS — grid CSS adaptativo 2 colunas
      JS retorna 1 coluna em ≤640 px; o CSS cria um grid 2-col
      visual. O gap de 1 px + background da grade age como
      divisor vertical entre as colunas.
      Itens com data-mobile-span="2" ficam full-width.
   ============================================================ */

@media (max-width: 640px) {
    /* Converte flex-row de colunas JS para CSS grid 2-col.
       O gap de 1 px + background cria o divisor vertical. */
    .pront-symptom-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: dense;
        gap: 0 1px;
        background: var(--color-border);
    }

    /* Colunas JS viram "transparentes": itens fluem direto no grid */
    .pront-symptom-grid > .pront-symptom-column {
        display: contents;
    }

    /* Cada célula cobre o fundo da grade — o 1 px entre elas é o divisor */
    .pront-symptom-cell {
        background: var(--color-bg);
        padding: 0.52rem 0.3rem 0.48rem 0.2rem;
    }

    /* Linha interna: gap menor para células de ~50 % da tela */
    .pront-symptom-line {
        gap: 0.25rem;
    }

    .pront-symptom-cluster {
        gap: 0.25rem;
    }

    /* Rótulo: ligeiramente menor para caber em metade da tela */
    .pront-symptom-cell .pront-check-text {
        font-size: 0.79rem;
        line-height: 1.22;
    }

    /* Item de label longo → linha inteira (cobre o divisor) */
    .pront-symptom-cell[data-mobile-span="2"] {
        grid-column: 1 / -1;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
    }

    /* Full-width: rótulo pode quebrar em 2 linhas */
    .pront-symptom-cell[data-mobile-span="2"] .pront-check-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.83rem;
    }

    /* Cirurgia Geral tem controles internos maiores; em mobile fica mais legivel em uma coluna real. */
    .pront-cg-module-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        background: transparent;
    }

    .pront-cg-module-grid > .pront-symptom-column {
        display: flex;
        flex-direction: column;
    }

    .pront-cg-module-grid .pront-symptom-cell {
        background: transparent;
        padding: var(--spacing-sm) 0;
    }

    /* Pill S/N — área de toque adequada ao polegar */
    .switch-pill-v5 {
        border-radius: 16px;
    }

    .switch-pill-v5 label {
        width: 2.15rem;
        height: 2.6rem;
        font-size: 12px;
    }
}


/* ============================================================
   3. CABEÇALHO DO PAINEL DE PRONTUÁRIO — mobile
      O flex-wrap existente pode agrupar mal o título, os botões
      de copiar e o botão Voltar em telas estreitas.
   ============================================================ */

@media (max-width: 640px) {
    .pront-panel-head {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }

    .pront-panel-head-main {
        width: 100%;
    }

    .pront-panel-back {
        align-self: flex-start;
    }
}


/* ============================================================
   4. POPOVERS FIXOS — constraint de viewport mobile
   ============================================================ */

/* AI copy popover: posicionado por JS, pode sair da tela */
@media (max-width: 767px) {
    .pront-ai-copy-popover {
        max-width: calc(100vw - 24px) !important;
    }
}

/* Z-index do popover de calculadora: precisa ser maior que o
   drawer da sidebar (z:600) para não ficar oculto atrás dele */
@media (max-width: 768px) {
    .calc-popover {
        z-index: 700;
    }
}


/* ============================================================
   5. MODAIS — bottom-sheet em mobile
      Em vez de modal centralizado (difícil de alcançar com
      polegar), exibe como folha deslizante da parte inferior.
   ============================================================ */

@media (max-width: 640px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-height: 90dvh;
        overflow-y: auto;
    }

    .modal.modal--resizable {
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        resize: none;
        min-height: auto;
    }
}


/* ============================================================
   6. ELEMENTOS FIXOS — safe-area para Hermit / Android WebView
      env(safe-area-inset-*) evita sobreposição com barras do
      sistema e do Hermit em modo Full Screen.
   ============================================================ */

@media (max-width: 767px) {
    /* Indicador de status (salvo/salvando) — canto inferior direito */
    .status-body {
        bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
        right: calc(var(--spacing-md) + env(safe-area-inset-right, 0px));
    }

    /* Banner de cookies — largura total na base */
    .cookie-body {
        padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
        padding-left: calc(var(--spacing-md) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--spacing-md) + env(safe-area-inset-right, 0px));
    }
}

/* Popover de calculadora (bottom sheet) — safe area */
@media (max-width: 768px) {
    .calc-popover {
        padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
    }
}


/* ============================================================
   7. OVERFLOW HORIZONTAL — prevenção global mobile
      Garante que nenhum elemento ultrapasse a largura do viewport.
      Não afeta overflow horizontal intencional (ex.: scroll de
      tabelas densas com overflow-x explícito).
   ============================================================ */

@media (max-width: 767px) {
    /* Painel de prontuário: nenhum filho vai além da viewport */
    .prontuario-panel {
        overflow-x: hidden;
    }

    /* Bloco de identificação: overflow-x hidden para cortar
       quaisquer inputs que escapem da grade */
    .pront-ident-band {
        overflow-x: hidden;
    }

    /* Grids de exame objetivo e plano */
    .pront-ubs-vitals-grid,
    .pront-ubs-objective-grid,
    .pront-ubs-plan-grid {
        overflow-x: hidden;
    }
}


/* ============================================================
   8. TIPOGRAFIA — escala mínima legível mobile
   ============================================================ */

@media (max-width: 767px) {
    /* Inputs de linha do prontuário: mínimo 16px para evitar
       zoom automático do WebView em campos de formulário */
    .pront-input-line,
    .pront-input-inline,
    .pront-textarea,
    .pront-detail-input,
    .pront-detail-textarea,
    .pront-detail-balloon-textarea {
        font-size: max(0.88rem, 16px);
    }

    /* Data pill: manter compacto mas legível */
    .pront-ident-band .pront-date-row .pront-input-date-pill.pront-input-line {
        font-size: max(0.74rem, 14px);
    }
}


/* ============================================================
   9. PLANO — grid 2 colunas em mobile
      Títulos (summary) centralizados. Itens selecionáveis em
      2 colunas; itens com data-mobile-wide ocupam linha inteira.
   ============================================================ */

@media (max-width: 640px) {
    /* Títulos de cada grupo do Plano: centralizados */
    .pront-ubs-plan-block summary {
        text-align: center;
    }

    /* Itens de checkbox em 2 colunas */
    .pront-ubs-plan-body > .pront-detail-check-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: dense;
        gap: 0.22rem 0.5rem;
    }

    /* Itens com label longo ocupam linha inteira */
    .pront-ubs-plan-body > .pront-detail-check-list .pront-detail-check-row[data-mobile-wide] {
        grid-column: 1 / -1;
    }

    /* Retorno: o pront-ubs-return-group já é 2-col; garantir alinhamento */
    .pront-ubs-return-group .pront-detail-check-row {
        align-items: center;
    }
}


/* ============================================================
   10. EXAME FÍSICO — Nor/Alt: ajustes de layout mobile
       Os botões "Nor" e "Alt" têm 3 chars; o cabeçalho do row
       (label esq + tri dir) mantém o layout horizontal em mobile
       para que fiquem legíveis lado a lado.
   ============================================================ */

@media (max-width: 640px) {
    /* Reverte coluna→linha no cabeçalho do row objetivo:
       label à esquerda, Nor/Alt à direita na mesma linha */
    .pront-ubs-objective-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    /* Label pode quebrar linha, mas não trunca */
    .pront-ubs-objective-head .pront-item-head-label {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Tri (Nor/Alt) fica fixo à direita */
    .pront-ubs-tri {
        flex-shrink: 0;
    }

    /* Área de toque adequada para Nor/Alt */
    .pront-ubs-tri .pront-sym-opt {
        min-height: 2.75rem;
        align-items: center;
        padding: 0.2rem 0.4rem;
    }
}


/* ============================================================
   11. GINECOLOGIA — expansão mobile e dark mode
      A consulta ginecológica tem painéis densos; em telas
      estreitas, uma coluna real fica mais estável que a grade
      genérica de sintomas em 2 colunas.
   ============================================================ */

@media (max-width: 640px) {
    .pront-gyn-module-grid {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        background: transparent;
    }

    .pront-gyn-module-grid > .pront-symptom-column {
        display: flex !important;
        flex-direction: column;
        gap: 0.45rem;
    }

    .pront-gyn-module-grid .pront-symptom-cell {
        grid-column: auto;
        border: 1px solid var(--color-border);
        background: var(--color-bg);
        padding: 0.55rem;
    }

    .pront-gyn-module-cell .pront-symptom-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem;
        align-items: center;
        min-height: 2.5rem;
    }

    .pront-gyn-module-cell .pront-symptom-cluster {
        min-width: 0;
    }

    .pront-gyn-module-cell .pront-check-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.9rem;
        line-height: 1.25;
    }

    .pront-gyn-inline-status {
        justify-self: end;
    }

    .pront-gyn-module-body {
        margin-top: 0.55rem;
        padding: 0.6rem 0 0.1rem;
        border-top: 1px dashed var(--color-border);
        gap: 0.6rem;
    }

    .pront-gyn-control-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
        margin-bottom: 0;
    }

    .pront-gyn-control-label {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .pront-gyn-chip-group {
        gap: 0.35rem;
    }

    .pront-gyn-chip {
        min-height: 2.25rem;
        padding: 0.35rem 0.55rem;
        font-size: 0.78rem;
        line-height: 1.25;
    }

    .pront-gyn-vitals-grid,
    .pront-gyn-objective-grid,
    .pront-gyn-plan-grid {
        grid-template-columns: 1fr !important;
    }

    .pront-gyn-objective-grid .pront-ubs-objective-row {
        gap: 0.45rem;
    }

    .pront-gyn-plan-grid .pront-ubs-plan-block {
        padding: 0.65rem;
    }
}

@media (max-width: 767px) {
    body.dark-mode .dontpad-header,
    body.dark-mode .sidebar {
        background: #101010;
        border-color: #2f2f2f;
    }

    body.dark-mode .prontuario-panel {
        background: #121212;
    }

    body.dark-mode .pront-gyn-module-grid .pront-symptom-cell {
        background: #171717;
        border-color: #363636;
    }

    body.dark-mode .pront-gyn-module-body {
        border-top-color: #3a3a3a;
    }

    body.dark-mode .pront-gyn-control-label,
    body.dark-mode .pront-symptom-summary {
        color: #b8b8b8;
    }

    body.dark-mode .switch-pill-v5 {
        background: #202020;
        border-color: #4a4a4a;
    }

    body.dark-mode .switch-pill-v5 label {
        background: #151515;
        color: #bdbdbd;
    }

    body.dark-mode .switch-pill-v5 input[type='radio']:checked + label {
        background: #eeeeee;
        color: #101010;
    }

    body.dark-mode .pront-ubs-plan-block,
    body.dark-mode .pront-ubs-objective-block,
    body.dark-mode .pront-ubs-objective-row {
        background: #161616;
        border-color: #363636;
    }
}