/*
 * 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, entao os tokens
 * --brand-* ficam VAZIOS aqui. Use apenas --accent / --accent-dark (definidos no
 * app.css) e verdes explicitos. Nunca color-mix com --brand-* (invalida a regra).
 * Botao primario fica no verde escuro para contraste AA. Reversivel (remover link).
 */

: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%);
}

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

/* ===== 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. */