/*
 * app-redesign.css - App Paciente - Elevacao visual (2026-06-04)
 *
 * Camada de OVERRIDE final: carrega depois de app-revisao.css, entao vence a
 * cascata para selectores de igual especificidade. Objetivo: elevar a presenca
 * da marca, corrigir inputs <16px (zoom iOS), e refinar login/cards/nav/botoes.
 *
 * REGRAS:
 * - Tenant-aware: cores solidas SEMPRE via tokens --brand-*. Verde literal so em
 *   brilhos/aneis translucidos (mesmo padrao ja usado no app.css legado).
 * - color-mix mistura a partir de --brand-pastel para aquecer fundos sem perder
 *   o white-label (cada tenant aquece para a propria cor).
 * - Reversivel: remover o <link> deste arquivo restaura o visual anterior.
 * - Contraste: o botao primario fica no verde escuro (AA 4.56:1 com texto branco);
 *   nao clarear o fundo do botao.
 */

:root {
  --rd-brand-glow:    0 12px 30px -14px rgba(96, 145, 101, .48);
  --rd-card-shadow:   0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -18px rgba(15, 23, 42, .22);
  --rd-ring:          0 0 0 3px rgba(96, 145, 101, .18);
  --rd-radius-card:   18px;
}

/* ===== 1. Inputs: 16px no mobile (anti zoom iOS) + foco de marca ===== */
@media (max-width: 768px) {
  body .app-section input:not([type=checkbox]):not([type=radio]):not([type=range]),
  body .app-section select,
  body .app-section textarea,
  .compras-busca input,
  .rec-busca input,
  .chat-search-input,
  .cog-label input,
  .cog-label select,
  .sug-input,
  .sug-select,
  .sug-textarea,
  .registrar-foto-label textarea {
    font-size: 16px;
  }
}

body .app-section input:focus,
body .app-section select:focus,
body .app-section textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--rd-ring);
  outline: none;
}

/* ===== 2. Botao primario: verde escuro (AA) + brilho de marca + cantos suaves ===== */
.btn.btn-primary,
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary-darker));
  box-shadow: var(--rd-brand-glow);
  border-radius: 14px;
}

.btn.btn-primary:hover:not(:disabled):not(.btn-loading),
.btn-primary:hover:not(:disabled):not(.btn-loading) {
  box-shadow: 0 16px 36px -14px rgba(96, 145, 101, .58);
}

/* ===== 3. Bottom-nav: estado ativo com pill de marca mais presente ===== */
.nav-item.active .nav-item-icon {
  background: color-mix(in srgb, var(--brand-pastel) 22%, #fff);
  box-shadow: inset 0 0 0 1px rgba(96, 145, 101, .22);
}

/* ===== 4. Cards: elevacao (so raio+sombra; NAO mexer em border-color para nao
   clobberar bordas laterais de status em cards internos). body .card vence app.css. ===== */
body .card {
  border-radius: var(--rd-radius-card);
  box-shadow: var(--rd-card-shadow);
}

/* ===== 5. Header: assinatura sutil de marca na sombra inferior ===== */
body .app-header {
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 10px 24px -20px rgba(96, 145, 101, .55);
}

/* ===== 6. Login: card mais marcante + porta de entrada coerente ===== */
body .login-box {
  border-radius: 24px;
  box-shadow: 0 26px 64px -26px rgba(61, 96, 65, .45), 0 2px 6px rgba(15, 23, 42, .06);
}

/* Desktop: deixar o card respirar sem ficar perdido no vazio (1440px) */
@media (min-width: 920px) {
  .login-container {
    width: 100%;
    max-width: 440px;
  }
  .login-box {
    padding: 38px 40px;
  }
}

/* ===== 7. Dark mode: manter coerencia da elevacao (theme-dark = mecanismo do app) ===== */
html.theme-dark body .card,
body.theme-dark .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -18px rgba(0, 0, 0, .5);
}

/* ===== 8. 2026-06-12 (auditoria responsividade): anti zoom iOS - complemento =====
   Campos que escapavam do guard da secao 1 (fora de .app-section ou com
   classe propria de mesma especificidade declarada antes na cascata):
   .clube-busca input 14px, .sc-input-bar input 15px, .command-palette-input 15px
   (app.css) e .calc-form input/select 15px (app-deferred.css). Regra aditiva,
   vence por ordem de cascata (este arquivo e o ultimo <link>). */
@media (max-width: 768px) {
  .clube-busca input,
  .sc-input-bar input,
  .command-palette-input,
  .calc-form input,
  .calc-form select {
    font-size: 16px;
  }
}

/* ===== 9. 2026-06-12 (auditoria responsividade): touch targets >= 44px =====
   Botoes de fechar/acoes com caixa fixa 28-36px (.mais-close/.sc-close 36,
   .header-btn/.modal-close 32, .status-banner__close 28, .pdf-drawer-btn 36).
   Sem mexer no layout: pseudo-elemento transparente expande a area de toque
   apenas em ponteiro grosso (touch). Nenhum desses seletores usa ::after no
   bundle (verificado 2026-06-12) e nenhum define position, logo o relative
   nao desloca nada. */
@media (pointer: coarse) {
  .mais-close,
  .sc-close,
  .modal-close,
  .status-banner__close,
  .pdf-drawer-btn,
  .header-btn {
    position: relative;
  }
  .mais-close::after,
  .sc-close::after,
  .modal-close::after,
  .status-banner__close::after,
  .pdf-drawer-btn::after,
  .header-btn::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
  }
  .status-banner__close::after {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
  }
}

/* ===== 10. 2026-06-12 (auditoria responsividade): modal em viewport dinamico =====
   .modal-content usa max-height:90vh; no iOS o vh e o viewport GRANDE (com a
   barra de URL recolhida), entao em telas baixas o rodape do modal podia ficar
   atras da barra. dvh acompanha o viewport visivel. Mesmo valor no desktop. */
@supports (height: 1dvh) {
  .modal-overlay .modal-content {
    max-height: 90dvh;
  }
}