/* ============================================
   DOSE-MODAL.CSS — DoseFrequencyModal (dose · frequência · posologia)
   ============================================
   Padroniza as cores do modal com a paleta do sistema (tokens LabNote).
   Sobrepõe as classes utilitárias Tailwind — mesma estratégia dos
   overrides de css/styles.css. Acompanha temas/paletas personalizados
   via var(--accent-primary): muda de navy para verde-escuro (Esmeralda),
   etc., junto com o resto do sistema.

   Estados (selecionado/ativo) são detectados pela classe que o JS
   alterna (.bg-blue-600 / .bg-green-100) — sem necessidade de tocar a
   lógica do componente.
   ============================================ */

/* ── Cabeçalho ─────────────────────────────────────────────── */
.dfm-dialog .dfm-header {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 6%, #ffffff) !important;
    border-bottom-color: var(--color-border-primary, #e2e8f0) !important;
}
.dfm-dialog .dfm-header-icon {
    background: #ffffff !important;
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 20%, transparent) !important;
}
.dfm-dialog .dfm-header-icon i { color: var(--accent-primary, #18355C) !important; }
.dfm-dialog .dfm-header-nome { color: var(--color-text-primary, #0c1f3b) !important; }
.dfm-dialog .dfm-header-bula-link { color: var(--accent-primary, #18355C) !important; }

/* Badge de tipo (Biológico…) → neutro informativo */
.dfm-dialog .dfm-header-tipo-badge > span {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 9%, transparent) !important;
    color: var(--accent-primary, #18355C) !important;
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 28%, transparent) !important;
}

/* ── Inputs / selects — foco com o accent ──────────────────── */
.dfm-dialog input:focus,
.dfm-dialog select:focus {
    border-color: var(--accent-primary, #18355C) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #18355C) 16%, transparent) !important;
}

/* ── Botões de frequência / duração ────────────────────────── */
.dfm-dialog .dfm-freq-btn,
.dfm-dialog .dfm-rec-dia-btn,
.dfm-dialog .dfm-rec-cont-btn {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 7%, transparent) !important;
    color: var(--accent-primary, #18355C) !important;
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 22%, transparent) !important;
}
.dfm-dialog .dfm-freq-btn:hover,
.dfm-dialog .dfm-rec-dia-btn:hover,
.dfm-dialog .dfm-rec-cont-btn:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 14%, transparent) !important;
}
/* selecionado (o JS adiciona .bg-blue-600) */
.dfm-dialog .dfm-freq-btn.bg-blue-600,
.dfm-dialog .dfm-rec-dia-btn.bg-blue-600,
.dfm-dialog .dfm-rec-cont-btn.bg-blue-600 {
    background: var(--accent-primary, #18355C) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary, #18355C) !important;
}

/* ── Chips de apresentação ─────────────────────────────────── */
.dfm-dialog .dfm-apr-chip.dose-chip {
    background: #ffffff !important;
    color: var(--accent-primary, #18355C) !important;
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 25%, transparent) !important;
}
.dfm-dialog .dfm-apr-chip.dose-chip:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 45%, transparent) !important;
}
/* dose-chip selecionado (JS adiciona .bg-green-100) */
.dfm-dialog .dfm-apr-chip.dose-chip.bg-green-100 {
    background: var(--accent-primary, #18355C) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary, #18355C) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #18355C) 18%, transparent) !important;
}
/* chip "sem dose" — neutro */
.dfm-dialog .dfm-apr-chip.forma-chip {
    background: var(--color-bg-tertiary, #f1f5f9) !important;
    color: var(--color-text-muted, #94a3b8) !important;
    border-color: var(--color-border-primary, #e2e8f0) !important;
}
.dfm-dialog .dfm-apr-chip.forma-chip.bg-gray-200 {
    background: var(--color-border-primary, #e2e8f0) !important;
    color: var(--color-text-secondary, #1e293b) !important;
}

/* ── Chips de marca (Nome na receita) ──────────────────────── */
.dfm-dialog .dfm-marca-chip {
    background: #ffffff !important;
    color: var(--color-text-secondary, #1e293b) !important;
    border-color: var(--color-border-primary, #e2e8f0) !important;
}
.dfm-dialog .dfm-marca-chip:hover {
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 45%, transparent) !important;
}
/* marca ativa (JS adiciona .bg-blue-600) */
.dfm-dialog .dfm-marca-chip.bg-blue-600 {
    background: var(--accent-primary, #18355C) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary, #18355C) !important;
}

/* ── Caixa de resultado (quantidade calculada) ─────────────── */
.dfm-dialog .dfm-rec-result {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 6%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 20%, transparent) !important;
}
.dfm-dialog .dfm-rec-qtd {
    border-color: color-mix(in srgb, var(--accent-primary, #18355C) 35%, transparent) !important;
    color: var(--accent-primary, #18355C) !important;
}

/* ── Botão Confirmar ───────────────────────────────────────── */
.dfm-dialog .dfm-confirm {
    background: var(--accent-primary, #18355C) !important;
    color: #ffffff !important;
}
.dfm-dialog .dfm-confirm:hover {
    background: color-mix(in srgb, var(--accent-primary, #18355C) 88%, black) !important;
}

/* ── Ícones/realces coloridos remanescentes nas labels ─────── */
.dfm-dialog .dfm-apresentacoes-section label .text-amber-600 {
    color: var(--color-text-muted, #94a3b8) !important;
}
.dfm-dialog .dfm-apresentacoes-section label .text-blue-700,
.dfm-dialog .dfm-apresentacoes-section label .text-green-700 {
    color: var(--accent-primary, #18355C) !important;
}