/*
 * 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);
}