/* ==========================================================
   calc-emergencia.css — Calculadora de Doses · Plantão10
   REDESIGN 2026 (substitui o arquivo antigo por completo)
   - Acento dedicado: var(--calc-accent) (laranja #d35400)
   - Resultado em CARDS (sem tabela), dose em mL como número-herói
   - Responsivo: mobile-first, adapta para desktop
   - Funciona nos 3 temas (light / hospital / carvao) via tokens
   ========================================================== */

/* ── Container principal ── */
.ce-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 16px 12px 40px;
    min-height: 60vh;
}

/* ── Telas (navegação interna) ── */
.ce-tela {
    display: none;
    flex-direction: column;
    gap: 16px;
    animation: ceFadeIn 0.18s ease;
}
.ce-tela.active { display: flex; }
@keyframes ceFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Títulos ── */
.ce-titulo {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--heading-color, #1053a4);
    margin: 4px 0 2px;
    text-align: center;
    letter-spacing: -0.01em;
}
.ce-sub {
    text-align: center;
    color: var(--text-secondary, #4e6080);
    margin: 0;
    font-size: 0.95rem;
}
.ce-tela-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ce-titulo-tela {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--heading-color, #1053a4);
    margin: 0 0 0 auto;
    text-align: right;
}
.ce-aviso-tela1 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    max-width: 460px;
    margin: 6px auto 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted, #8a9ab8);
    line-height: 1.45;
}
.ce-aviso-tela1 i { color: var(--success-color, #0d8a62); margin-top: 2px; }

/* ── Botão voltar ── */
.ce-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--calc-accent, #d35400);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    transition: opacity 0.15s;
}
.ce-back:hover { opacity: 0.7; }

/* ===========================================================
   TELA 1 — Cards de Perfil
   =========================================================== */
.ce-cards-perfil {
    display: flex;
    gap: 14px;
    margin-top: 8px;
}
.ce-card-perfil {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-container, #fff);
    border: 1.5px solid var(--rec-split-border, #ccd6ea);
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
    padding: 18px 18px;
    text-align: left;
    box-shadow: var(--shadow-split, 0 2px 8px rgba(16,30,60,0.06));
    color: var(--text-main, #1a2133);
    font-family: inherit;
}
/* nenhum card de perfil vem "pré-selecionado" — destaque só no hover */
.ce-card-perfil:hover {
    border-color: var(--calc-accent, #d35400);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--calc-accent-shadow, rgba(211,84,0,0.28));
}
/* Tela 1: todos os ícones em laranja */
.ce-card-perfil-icon {
    flex: none;
    width: 54px; height: 54px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    background: var(--calc-accent-tint, rgba(211,84,0,0.10));
    color: var(--calc-accent, #d35400);
    font-size: 1.5rem;
}
.ce-card-perfil-icon--alt {
    background: var(--calc-accent-tint, rgba(211,84,0,0.10));
    color: var(--calc-accent, #d35400);
}
.ce-card-perfil-text { flex: 1; min-width: 0; }
.ce-card-perfil-nome { display: block; font-size: 1.12rem; font-weight: 800; }
.ce-card-perfil-desc { display: block; font-size: 0.78rem; font-weight: 500; color: var(--text-muted, #8a9ab8); margin-top: 3px; }
.ce-card-perfil-arrow { color: var(--text-muted, #8a9ab8); font-size: 0.85rem; }

/* ===========================================================
   TELA 2 — Situação, Classe e Busca
   =========================================================== */
.ce-secao-titulo {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #8a9ab8);
    margin-top: 4px;
}

/* Card de situação — cor de destaque (borda/glow/ícone) vem da badge da situação.
   As vars --sit-* são setadas inline em ceCarregarSituacoes; fallback vermelho. */
.ce-cards-situacao { display: flex; flex-direction: column; gap: 12px; }
.ce-card-sit {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-container, #fff);
    border: 1.5px solid var(--sit-border, var(--danger-tint2, rgba(192,57,43,0.20)));
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
    padding: 16px;
    text-align: left;
    box-shadow: 0 4px 14px var(--sit-shadow, var(--danger-shadow, rgba(192,57,43,0.10)));
    color: var(--text-main, #1a2133);
    font-family: inherit;
}
.ce-card-sit:hover { border-color: var(--sit-cor, var(--danger-color, #C0392B)); transform: translateY(-1px); }
.ce-card-sit-icon {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sit-tint, var(--danger-tint, rgba(192,57,43,0.10)));
    color: var(--sit-cor, var(--danger-color, #C0392B));
    font-size: 1.25rem;
}
.ce-card-sit-text { flex: 1; min-width: 0; }
.ce-card-sit-nome { display: block; font-size: 0.97rem; font-weight: 800; }
.ce-card-sit-desc { display: block; font-size: 0.76rem; font-weight: 500; color: var(--text-muted, #8a9ab8); margin-top: 2px; }
.ce-card-sit-arrow { color: var(--sit-cor, var(--danger-color, #C0392B)); font-size: 0.82rem; }

/* Cards de classe de medicamento */
.ce-cards-classe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}
.ce-card-classe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg-container, #fff);
    border: 1px solid var(--rec-split-border, #ccd6ea);
    border-radius: 14px;
    cursor: pointer;
    padding: 14px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main, #1a2133);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    text-align: center;
    line-height: 1.2;
    font-family: inherit;
}
.ce-card-classe i { font-size: 1.2rem; color: var(--accent-color, #1053a4); transition: color 0.15s; }
.ce-card-classe:hover {
    border-color: var(--calc-accent, #d35400);
    background: var(--calc-accent-tint, rgba(211,84,0,0.10));
    transform: translateY(-1px);
}
.ce-card-classe:hover i { color: var(--calc-accent, #d35400); }

/* Barra de busca */
.ce-busca-wrap { position: relative; }
.ce-busca-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted, #8a9ab8); font-size: 0.92rem; pointer-events: none;
}
#ce-busca-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 40px 13px 40px;
    border: 1.5px solid var(--rec-split-border, #ccd6ea);
    border-radius: 14px;
    /* 16px evita o zoom automático do iOS ao focar o campo no mobile. */
    font-size: 16px;
    font-family: inherit;
    background: var(--bg-container, #fff);
    color: var(--text-main, #1a2133);
    box-shadow: var(--shadow-split, 0 1px 2px rgba(16,30,60,0.04));
    transition: border-color 0.15s;
}
#ce-busca-input:focus { outline: none; border-color: var(--calc-accent, #d35400); }
.ce-busca-limpar {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted, #8a9ab8);
    cursor: pointer; font-size: 0.95rem; padding: 6px; display: none;
}
.ce-busca-limpar:hover { color: var(--text-main, #1a2133); }
.ce-busca-resultados { display: none; flex-direction: column; gap: 6px; }
#ce-tela2-navegacao { display: flex; flex-direction: column; gap: 16px; }
.ce-busca-grupo-titulo {
    font-size: 0.74rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-muted, #8a9ab8); margin-top: 4px;
}

/* ===========================================================
   TELA 3 — Categorias e lista de cenários
   =========================================================== */
.ce-grade-categorias {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ce-card-cat {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--bg-container, #fff);
    border: 1.5px solid var(--rec-split-border, #ccd6ea);
    border-radius: 14px; cursor: pointer; padding: 16px 10px;
    font-size: 0.85rem; font-weight: 700; color: var(--text-main, #1a2133);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    text-align: center; font-family: inherit;
}
.ce-card-cat i { font-size: 1.4rem; color: var(--calc-accent, #d35400); }
.ce-card-cat:hover {
    border-color: var(--calc-accent, #d35400);
    background: var(--calc-accent-tint, rgba(211,84,0,0.10));
    transform: translateY(-1px);
}

.ce-lista-cenarios { display: flex; flex-direction: column; gap: 8px; }
.ce-item-cenario {
    display: flex; align-items: center;
    background: var(--bg-container, #fff);
    border: 1px solid var(--rec-split-border, #ccd6ea);
    border-radius: 14px; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ce-item-cenario:hover { border-color: var(--calc-accent, #d35400); }
.ce-item-cenario.favorito {
    border-color: var(--calc-accent-tint2, rgba(211,84,0,0.18));
    box-shadow: 0 2px 8px var(--calc-accent-shadow, rgba(211,84,0,0.28));
}
.ce-item-nome {
    flex: 1; background: none; border: none; padding: 15px 16px;
    text-align: left; font-size: 0.95rem; font-weight: 500;
    color: var(--text-main, #1a2133); cursor: pointer; line-height: 1.3;
    font-family: inherit;
}
.ce-item-cenario.favorito .ce-item-nome { font-weight: 600; }
.ce-item-nome strong { font-weight: 700; }
.ce-item-nome small { font-size: 0.78rem; color: var(--text-muted, #8a9ab8); font-weight: 400; }
.ce-item-nome:hover { color: var(--calc-accent, #d35400); }
.ce-fav-btn {
    background: none; border: none; border-left: 1px solid var(--rec-split-border, #ccd6ea);
    padding: 15px 15px; cursor: pointer; color: var(--text-muted, #8a9ab8);
    font-size: 1rem; transition: color 0.15s; flex-shrink: 0;
}
.ce-fav-btn:hover { color: var(--calc-accent, #d35400); }
.ce-item-cenario.favorito .ce-fav-btn { color: var(--calc-accent, #d35400); }

/* Badges de tipo (usados na busca) */
.ce-badge {
    display: inline-block; font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px;
    border-radius: 6px; margin-right: 5px; vertical-align: middle; white-space: nowrap;
}
.ce-badge-emerg { background: rgba(192,57,43,0.12);  color: var(--danger-color, #C0392B); }
.ce-badge-urg   { background: var(--calc-accent-tint, rgba(211,84,0,0.12)); color: var(--calc-accent, #d35400); }
.ce-badge-rot   { background: var(--accent-tint, rgba(16,83,164,0.12)); color: var(--accent-color, #1053a4); }

/* ===========================================================
   TELA 4 — Cabeçalho do cenário (título em destaque)
   =========================================================== */
.ce-cenario-head {
    display: flex; align-items: center; gap: 12px;
}
.ce-cenario-mark {
    flex: none; width: 44px; height: 44px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--calc-accent-tint, rgba(211,84,0,0.10));
    color: var(--calc-accent, #d35400); font-size: 1.2rem;
}
.ce-cenario-nome {
    font-size: 1.4rem; font-weight: 800; line-height: 1.15;
    color: var(--text-main, #1a2133); margin: 0; letter-spacing: -0.01em;
}
/* indicador de favorito à direita do cabeçalho (tela 4) */
.ce-cenario-fav {
    flex: none; margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted, #8a9ab8); font-size: 1.4rem;
    padding: 4px; transition: color 0.15s, transform 0.1s;
}
.ce-cenario-fav:hover { transform: scale(1.1); }
.ce-cenario-fav.ativo { color: var(--calc-accent, #d35400); }

/* ── Dados do paciente (inputs) ── */
.ce-dados-paciente {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    background: var(--bg-container, #fff);
    border: 1px solid var(--rec-split-border, #ccd6ea);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-split, 0 2px 8px rgba(16,30,60,0.05));
}
.ce-campo { display: flex; flex-direction: column; gap: 7px; }
.ce-campo label {
    font-size: 0.72rem; font-weight: 700; color: var(--text-secondary, #4e6080);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ce-campo input[type="number"] {
    padding: 12px 14px;
    border: 1.5px solid var(--rec-split-border, #ccd6ea);
    border-radius: 12px;
    font-size: 1.2rem;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-weight: 700;
    background: var(--bg-container, #fff);
    color: var(--text-main, #1a2133);
    width: 130px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ce-campo input[type="number"]:focus {
    outline: none;
    border-color: var(--calc-accent, #d35400);
    box-shadow: 0 0 0 3px var(--calc-accent-tint, rgba(211,84,0,0.10));
}
.ce-campo-idade .ce-idade-wrap { display: flex; gap: 6px; }
.ce-campo-idade input[type="number"] { width: 92px; }
#ce-idade-unidade {
    padding: 0 10px;
    border: 1.5px solid var(--rec-split-border, #ccd6ea);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--bg-container, #fff);
    color: var(--text-main, #1a2133);
    cursor: pointer;
}
/* grupo de ações (Estimar + Calcular) alinhado à direita; Estimar fica à
   esquerda do Calcular */
.ce-acoes {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.ce-btn-calcular {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 24px;
    background: var(--calc-accent, #d35400);
    color: #fff; border: none; border-radius: 13px;
    font-size: 0.98rem; font-weight: 800; cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    box-shadow: 0 6px 16px var(--calc-accent-shadow, rgba(211,84,0,0.32));
    font-family: inherit;
}
.ce-btn-calcular:hover { background: var(--calc-accent-hover, #b8480a); transform: translateY(-1px); }
.ce-btn-calcular:active { transform: translateY(0); }

.ce-btn-estimar {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 16px; background: transparent;
    color: var(--accent-color, #1053a4);
    border: 1.5px dashed var(--accent-color, #1053a4);
    border-radius: 12px; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s; white-space: nowrap;
    font-family: inherit;
}
.ce-btn-estimar:hover { background: var(--accent-tint, rgba(16,83,164,0.07)); }
.ce-peso-estimado {
    border-color: var(--calc-accent, #d35400) !important;
    background: var(--calc-accent-tint, rgba(211,84,0,0.10)) !important;
}

/* ===========================================================
   RESULTADO — Cards de medicamento (substitui a tabela)
   =========================================================== */
.ce-resultado { display: flex; flex-direction: column; gap: 14px; }
.ce-resultado-titulo {
    font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--heading-color, #1053a4);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-tint2, rgba(16,83,164,0.14));
}

/* Grade: 1 coluna no mobile, 2 colunas no desktop */
.ce-cards-resultado {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.ce-med-card {
    background: var(--bg-container, #fff);
    border: 1px solid var(--rec-split-border, #ccd6ea);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-split, 0 2px 10px rgba(16,30,60,0.06));
    display: flex;
    flex-direction: column;
}

/* kicker (modo medicamento — mostra o cenário). A cor vem inline (da badge);
   o border-bottom usa essa mesma cor (border-bottom-color setado inline). */
.ce-med-card-kicker {
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted, #8a9ab8);
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1.5px solid var(--rec-split-border, #ccd6ea);
}

/* cabeçalho: nome (ÊNFASE) + via */
.ce-med-card-head {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
}
.ce-med-card-title { flex: 1; min-width: 0; }
.ce-med-card-title strong {
    display: block; font-size: 1.12rem; font-weight: 800;
    color: var(--text-main, #1a2133); line-height: 1.15;
}
.ce-med-card-title small {
    display: block; font-size: 0.8rem; font-weight: 500;
    color: var(--text-muted, #8a9ab8); margin-top: 3px; line-height: 1.3;
}
.ce-via-badge {
    display: inline-block;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em;
    color: var(--calc-accent, #d35400);
    background: var(--calc-accent-tint, rgba(211,84,0,0.12));
    padding: 6px 10px; border-radius: 8px;
}

/* bloco-herói: dose em mL */
.ce-dose-hero {
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
    background: var(--calc-accent-tint, rgba(211,84,0,0.07));
    border: 1px solid var(--calc-accent-tint2, rgba(211,84,0,0.18));
    border-radius: 14px; padding: 14px 16px;
}
.ce-dose-hero-num {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 2.1rem; font-weight: 700; line-height: 1;
    color: var(--calc-accent, #d35400); letter-spacing: -0.5px;
    /* mantém o número-herói (inclui faixas "0,7 – 1,4") sempre em uma linha só */
    white-space: nowrap;
}
.ce-dose-hero-unit {
    font-size: 1.05rem; font-weight: 700; color: var(--calc-accent, #d35400);
}
.ce-dose-hero-sec {
    margin-left: auto; text-align: right;
    font-size: 0.76rem; font-weight: 600; color: var(--text-secondary, #4e6080);
    line-height: 1.35;
}
.ce-dose-hero-formula {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.7rem; font-weight: 500; color: var(--text-muted, #8a9ab8);
}

/* metadados (diluição / infusão) */
.ce-med-meta { margin-top: 12px; }
.ce-med-meta-row {
    display: flex; gap: 10px; padding: 8px 0;
    border-top: 1px solid var(--bg-panel2, #edf1f9);
}
.ce-med-meta-label {
    flex: none; width: 76px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.02em; color: var(--text-muted, #8a9ab8);
    padding-top: 1px;
}
.ce-med-meta-val {
    flex: 1; font-size: 0.82rem; font-weight: 500;
    color: var(--text-main, #1a2133); line-height: 1.4;
}

/* observações / alerta — em tom amarelado */
.ce-med-obs {
    display: flex; gap: 8px; align-items: flex-start;
    background: rgba(250, 204, 21, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.40);
    border-radius: 11px; padding: 10px 12px; margin-top: 12px;
}
.ce-med-obs i { color: var(--premium-text, #9e4d0f); font-size: 0.82rem; margin-top: 1px; }
.ce-med-obs span {
    font-size: 0.78rem; font-weight: 500;
    color: var(--premium-text, #9e4d0f); line-height: 1.4;
}
/* Rótulo "Padrão" / nome do cenário quando o card aparece em duas versões
   (orientação/observação padrão + específica do cenário). */
.ce-med-fonte {
    display: inline-block; margin-right: 6px;
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px;
    background: rgba(0,0,0,0.06); color: var(--text-muted, #8a9ab8);
    vertical-align: middle; white-space: nowrap;
}

/* ── Diluição (tabela dentro da meta-row) ─────────────────────────────────── */
.ce-dil-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* Legenda curta acima de um grupo de chips (concentração / volume). */
.ce-dil-cap {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--text-muted, #8a9ab8); margin: 6px 0 4px;
}
.ce-dil-cap:first-child { margin-top: 0; }
.ce-dil-cap small { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .85; }
.ce-dil-chip {
    border: 1.5px solid var(--rec-split-border, #ccd6ea);
    background: var(--premium-bg, #fff);
    color: var(--text-color, #1f2937);
    border-radius: 999px; padding: 4px 12px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.ce-dil-chip:hover { border-color: var(--calc-accent, #d35400); }
.ce-dil-chip.ativo {
    border-color: var(--calc-accent, #d35400);
    background: var(--calc-accent, #d35400);
    color: #fff;
}
/* ── HERO da VELOCIDADE de infusão ──
   Mesmo peso visual do hero da dose, mas em VERDE (eixo "velocidade"), com os
   seletores de unidade/tempo dentro do próprio hero. Padding/margin iguais ao
   .ce-dose-hero. */
.ce-vel-hero {
    background: rgba(39,174,96,0.07);
    border: 1px solid rgba(39,174,96,0.20);
    border-radius: 14px; padding: 14px 16px;
}
/* Quando a dose (hero laranja) e a velocidade (hero verde) aparecem juntas,
   dá respiro entre os dois blocos (antes ficavam grudados). */
.ce-dose-hero + .ce-vel-hero { margin-top: 14px; }
.ce-vel-hero-main { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
/* Linha inferior do hero: toggles à esquerda e a "spec" (fórmula) à direita.
   Se couber, ficam na mesma linha; senão, a spec quebra para baixo dos toggles. */
.ce-vel-hero-bottom { display: flex; align-items: flex-end; gap: 6px 12px; flex-wrap: wrap; margin-top: 9px; }
.ce-vel-hero-bottom .ce-vel-hero-toggles { margin-top: 0; }
.ce-vel-hero-num {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 2.1rem; font-weight: 700; line-height: 1;
    color: #1e9e57; letter-spacing: -0.5px;
}
.ce-vel-hero-unit { font-size: 1.05rem; font-weight: 700; color: #1e9e57; }
/* Seletores de unidade/tempo: linha abaixo do número. Tom verde para combinar
   com o eixo de velocidade (sem o laranja do acento padrão). */
.ce-vel-hero-toggles { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.ce-vel-seg {
    display: inline-flex; border: 1.5px solid rgba(39,174,96,0.30);
    border-radius: 999px; overflow: hidden; background: var(--premium-bg, #fff);
}
.ce-vel-chip {
    border: none; cursor: pointer;
    color: #1e9e57;
    padding: 3px 11px; font-size: 0.74rem; font-weight: 700;
    transition: all 0.15s; line-height: 1.4;
}
.ce-vel-chip + .ce-vel-chip { border-left: 1.5px solid rgba(39,174,96,0.30); }
.ce-vel-chip:hover { background: rgba(39,174,96,0.10); }
.ce-vel-chip.ativo { background: #1e9e57; color: #fff; }
/* "spec" igual ao .ce-dose-hero-formula: mesma fonte, no canto inferior-direito
   do hero. Fica na mesma linha dos toggles quando cabe; se não couber, quebra
   para baixo deles, sempre em uma linha só. */
.ce-vel-hero-spec {
    margin-left: auto; text-align: right; white-space: nowrap;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.7rem; font-weight: 500; color: var(--text-muted, #8a9ab8);
}
/* Mini-tabela: chave à esquerda, valor à direita. */
.ce-dil-tab { width: 100%; border-collapse: collapse; }
.ce-dil-tab td { padding: 3px 0; vertical-align: baseline; }
.ce-dil-tab-k {
    color: var(--text-muted, #8a9ab8); font-size: 0.8rem; padding-right: 12px;
    white-space: nowrap;
}
.ce-dil-tab-v {
    text-align: right; font-weight: 700; font-size: 0.86rem;
    color: var(--text-main, #1a2133); white-space: nowrap;
}
/* Linha do diluente em destaque (cor + negrito reforçado). */
.ce-dil-tab-diluente .ce-dil-tab-k,
.ce-dil-tab-diluente .ce-dil-tab-v {
    color: var(--calc-accent, #d35400); font-weight: 800;
}

/* Orientações de administração — tom informativo (azul), distinto do alerta */
.ce-med-orient {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.38);
}
.ce-med-orient i,
.ce-med-orient span { color: var(--accent-primary, #1d4ed8); }

/* Observação sobre faixa etária (texto livre do admin) — tom informativo (azul),
   reaproveita a caixa de observação. */
.ce-med-idade {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.38);
}
.ce-med-idade i,
.ce-med-idade span { color: var(--accent-primary, #1d4ed8); }

/* Contraindicação para a faixa etária informada — alerta forte (vermelho). */
.ce-med-contra {
    display: flex; gap: 8px; align-items: flex-start;
    background: rgba(192, 57, 43, 0.12);
    border: 1px solid rgba(192, 57, 43, 0.42);
    border-radius: 11px; padding: 10px 12px; margin-top: 12px;
}
.ce-med-contra i { color: var(--danger-color, #C0392B); font-size: 0.85rem; margin-top: 1px; }
.ce-med-contra span { font-size: 0.8rem; font-weight: 600; color: var(--danger-color, #C0392B); line-height: 1.4; }

/* ação: enviar para a receita (explícita) — verde */
.ce-btn-add-receita {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 14px; padding: 12px;
    background: var(--bg-container, #fff);
    color: var(--accent-secondary, #14a874);
    border: 1.5px solid var(--accent-sec-tint2, rgba(20,168,116,0.18));
    border-radius: 12px; font-size: 0.82rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.ce-btn-add-receita:hover {
    background: var(--accent-sec-tint, rgba(20,168,116,0.10));
    border-color: var(--accent-secondary, #14a874);
}
.ce-btn-add-receita.enviado {
    background: var(--accent-secondary, #14a874); color: #fff;
    border-color: var(--accent-secondary, #14a874);
}

/* Vazio / loading */
.ce-vazio {
    grid-column: 1 / -1;
    text-align: center; color: var(--text-muted, #8a9ab8);
    padding: 32px 16px; font-size: 0.9rem;
}
.ce-loading-small {
    color: var(--text-muted, #8a9ab8); font-size: 0.88rem;
    padding: 12px 0; display: flex; align-items: center; gap: 8px;
}

/* ===========================================================
   DESKTOP — aproveita a tela larga
   =========================================================== */
@media (min-width: 720px) {
    /* cada card de medicamento ocupa a linha inteira (como um parágrafo) */
    .ce-cards-resultado { grid-template-columns: 1fr; }
    /* o card-herói não estica demais a fonte */
    .ce-dose-hero-num { font-size: 2.25rem; }
    .ce-titulo { font-size: 1.7rem; }
    .ce-cenario-nome { font-size: 1.55rem; }
}

/* ===========================================================
   MOBILE
   =========================================================== */
@media (max-width: 600px) {
    .ce-container { padding: 20px; }

    .ce-cards-perfil { flex-direction: column; }
    .ce-card-perfil { padding: 16px 16px; }

    .ce-cards-situacao { flex-direction: column; }

    .ce-cards-classe { grid-template-columns: repeat(2, 1fr); }
    .ce-grade-categorias { grid-template-columns: repeat(2, 1fr); }

    /* inputs ocupam a largura toda e ficam confortáveis ao toque */
    .ce-dados-paciente { gap: 12px; }
    .ce-campo-peso, .ce-campo-idade { flex: 1; }
    .ce-campo-peso input[type="number"] { width: 100%; }
    .ce-campo-idade .ce-idade-wrap { width: 100%; }
    .ce-campo-idade input[type="number"] { width: 100%; min-width: 0; }
    .ce-acoes { width: 100%; margin-left: 0; flex-direction: column; }
    .ce-btn-calcular { width: 100%; }
    .ce-btn-estimar { width: 100%; justify-content: center; }

    .ce-cenario-nome { font-size: 1.25rem; }
    .ce-dose-hero-num { font-size: 2rem; }
}