/*
 * app-redesign.css - App Profissional - Elevacao visual (2026-06-04)
 *
 * Camada de OVERRIDE final (carrega depois de app.css). Da coerencia de FAMILIA
 * com o app paciente: o login estava cinza/slate, desconectado da marca; agora
 * aquece para o verde SeuNutricionista. Eleva botoes/cards/nav/sidebar.
 *
 * IMPORTANTE: o app profissional NAO carrega brand-tokens.css. Desde 2026-06-10
 * os tokens --brand-* tem fallback fixo no bloco :root abaixo (mesmos valores
 * dos fallbacks inline do app.css), entao var(--brand-*) e color-mix funcionam.
 * Botao primario fica no verde escuro para contraste AA. Reversivel (remover link).
 */

/* 2026-06-10 (auditoria 3 frontends): a SPA estatica nao injeta tokens de
 * tenant (brand-tokens.css existe em /css mas nenhum HTML o carrega), entao
 * os var(--brand-*) do app.css caiam sempre no fallback inline. Este bloco
 * define os tokens com os MESMOS valores dos fallbacks (verdes da marca),
 * zero mudanca visual: color-mix e regras sem fallback passam a funcionar. */
:root {
  --brand-primary:        #609165;
  --brand-primary-dark:   #4f7855;
  --brand-primary-darker: #3d6041;
  --brand-pastel:         #86C98C;
}

:root {
  --rd-accent:      #609165;
  --rd-accent-dark: #4f7855;
  --rd-accent-deep: #3d6041;
  --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, .20);
}

/* ===== 1. Login: aquecer para a marca (coerencia com o app paciente) ===== */
.login-screen {
  background:
    radial-gradient(circle at 18% 16%, rgba(134, 201, 140, .32), transparent 52%),
    radial-gradient(circle at 84% 86%, rgba(96, 145, 101, .20), transparent 55%),
    linear-gradient(135deg, #f3faf4 0%, #e7f4ea 100%);
}
/* Tema escuro MANUAL (html.theme-dark): sem isto o fundo do login ficava com
   o gradiente claro acima enquanto o card escurecia (o dark de app.css cobre
   apenas prefers-color-scheme). Mesmos tons do dark automatico de app.css: */
html.theme-dark .login-screen {
  background:
    radial-gradient(circle at 18% 16%, rgba(96, 145, 101, .30), transparent 52%),
    radial-gradient(circle at 84% 86%, rgba(61, 96, 65, .20), transparent 55%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

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

/* ===== 2. Inputs: 16px no mobile (anti zoom iOS) + foco de marca ===== */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px;
  }
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent, #609165);
  box-shadow: var(--rd-ring);
}

/* ===== 3. Botao primario: verde escuro (AA 4.56:1) + brilho de marca =====
   Especificidade .btn.btn-primary (0,2,0) para vencer a regra do app.css. */
.btn.btn-primary,
.btn-primary {
  background: linear-gradient(135deg, var(--rd-accent-dark), var(--rd-accent-deep));
  box-shadow: var(--rd-brand-glow);
  border-radius: 14px;
}

.btn.btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--rd-accent-dark), var(--rd-accent-deep));
  box-shadow: 0 16px 36px -14px rgba(96, 145, 101, .58);
}

/* ===== 3b. 2026-06-12 (auditoria dark mode): no tema escuro o gradiente verde
   escuro fixo (#4f7855->#3d6041) ficava baixo contraste sobre o fundo slate
   (#1e293b). Clareia o gradiente (#609165->#4f7855) + borda clara, mantendo o
   texto branco legivel. Especificidade html.theme-dark .btn.btn-primary (1,2,0)
   vence as regras acima. ===== */
html.theme-dark .btn.btn-primary,
html.theme-dark .btn-primary {
  background: linear-gradient(135deg, #609165, #4f7855);
  border: 1px solid rgba(134, 201, 140, .55);
  color: #fff;
}

html.theme-dark .btn.btn-primary:hover:not(:disabled),
html.theme-dark .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6fa06f, #609165);
  border-color: rgba(134, 201, 140, .7);
  color: #fff;
}

/* ===== 4. Bottom-nav: presenca de marca no item ativo ===== */
.bottom-nav .nav-item.active {
  color: var(--accent-dark, #3d6041);
}

.bottom-nav .nav-item.active i {
  color: var(--accent, #609165);
}

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

/* ===== 6. App-header: assinatura sutil da marca ===== */
.app-header {
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 10px 24px -20px rgba(96, 145, 101, .55);
}

/* Secao 7 (recolor da sidebar ativa) REMOVIDA: nao verificavel sem login, podia
   degradar o estilo original do app.css. Sidebar mantem o visual existente. */

/* ===== 8. 2026-06-12 (auditoria responsividade): anti zoom iOS - complemento =====
   O guard da secao 2 usa textarea/select sem classe (especificidade 0,0,1) e
   perde para .ticket-reply textarea{font-size:14px} (0,1,1) do app.css, que
   ainda dispara zoom no iOS. Regra explicita, mesma especificidade e cascata
   posterior (este arquivo e o ultimo <link>). */
@media (max-width: 768px) {
  .ticket-reply textarea {
    font-size: 16px;
  }
}

/* ===== 9. 2026-06-12 (auditoria responsividade): tabela do diario com scroll =====
   .diario-compact tem overflow:hidden (cantos arredondados) envolvendo
   .diario-compact-table com thead th{white-space:nowrap}: em 360-430px a
   tabela era CORTADA sem scroll. overflow-x:auto mantem o raio quando nao ha
   estouro e libera arrasto horizontal quando ha (overflow-y segue hidden). */
.diario-compact {
  overflow-x: auto;
}

/* ===== 10. 2026-06-12 (auditoria responsividade): touch targets >= 44px =====
   Botoes pequenos de caixa fixa (.cenoura-close 32, .mais-close 36,
   .sidebar-toggle 24). Pseudo-elemento transparente expande a area de toque
   so em ponteiro grosso. Nenhum desses seletores usa ::after no app.css
   (verificado 2026-06-12); .sidebar-toggle ja e position:absolute e os outros
   nao definem position, logo o relative nao desloca nada. */
@media (pointer: coarse) {
  .cenoura-close,
  .mais-close {
    position: relative;
  }
  .cenoura-close::after,
  .mais-close::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
  }
  .sidebar-toggle::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
  }
}