/* ============================================================================
   REDESIGN , Calculadora de Prescricao Intercorrente (PRODUCAO, slug canonico)
   Escopo: body.cdp-redesign (sobrepoe o CSS e os <style> inline da pagina).
   Reusa o mesmo motor/IDs; isto e' so aparencia.
   ============================================================================ */

body.cdp-redesign {
    --v2-radius: 14px;
    --v2-radius-sm: 10px;
    --v2-line: var(--border-color, #e5e7eb);
    --v2-ink: var(--text-color, #1d1d1f);
    --v2-muted: var(--secondary-color, #6b7280);
    --v2-brand: var(--primary-color, #0071e3);
    --v2-surface: var(--content-bg, #ffffff);
    --v2-soft: #f6f8fb;
    --v2-ok: #15803d; --v2-ok-bg: #f0fdf4; --v2-ok-bd: #bbf7d0;
    --v2-bad: #b91c1c; --v2-bad-bg: #fef2f2; --v2-bad-bd: #fecaca;
    --v2-warn: #b45309; --v2-warn-bg: #fffbeb; --v2-warn-bd: #fde68a;
}

/* ---- Sem card externo: cada passo é um card próprio --------------------- */
/* padding:0 !important porque perf-flat-headers.css força padding-left/right:16px
   !important em body.cdp-2col .cdp-main > section.calculator-section, o que empurrava
   os cards 16px para dentro e os desalinhava do hero (header h1). Esta regra tem 1 id
   (#section-juridica), então vence o !important da regra concorrente (0 ids). */
body.cdp-redesign .cdp-main #section-juridica {
    background: transparent; border: none; box-shadow: none; padding: 0 !important; overflow: visible;
}
/* Passo 1 (regime/prazo) = card; Passo 2 (linha do tempo) = card separado. */
body.cdp-redesign #prescriptionCalculator,
body.cdp-redesign #dateManager {
    background: var(--v2-surface) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-radius) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 30px -18px rgba(16,24,40,.25) !important;
    padding: 18px 24px 22px !important;
    margin: 0 0 22px !important;
    overflow: visible !important;
    /* O CSS base limita .calculator-section.prescription-calculator a max-width:1000px,
       deixando o card do passo 1 mais estreito que o passo 2 (dateManager). Igualar a largura. */
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Respiro entre as seções dentro de cada card (evita elementos colados) */
body.cdp-redesign #dateManager > *:not(:first-child) { margin-top: 18px; }
body.cdp-redesign #dateManager .event-form-container > *:not(:first-child) { margin-top: 14px; }
body.cdp-redesign #prescriptionCalculator > *:not(:first-child) { margin-top: 6px; }

/* Esconde os titulos internos duplicados (ja temos o hero e os headers de passo) */
body.cdp-redesign #prescription-title,
body.cdp-redesign #dateManager > h3,
body.cdp-redesign .prescription-calculator > p { display: none; }

/* ---- Passos numerados ---------------------------------------------------- */
body.cdp-redesign .v2-step {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0 10px;
}
body.cdp-redesign .v2-step__num {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 0.95rem;
    color: #fff; background: linear-gradient(135deg, #0071e3, #0050b3);
    box-shadow: 0 4px 10px -3px rgba(0,113,227,.5);
}
body.cdp-redesign .v2-step__txt h3 { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--v2-ink); }
body.cdp-redesign .v2-step__txt p { margin: 1px 0 0; font-size: 0.82rem; color: var(--v2-muted); }
body.cdp-redesign .v2-block { padding: 2px 0 0; }

/* ---- Segmented control (pills) p/ area e regime -------------------------- */
body.cdp-redesign .v2-seg-wrap { margin: 4px 0 14px; }
body.cdp-redesign .v2-seg-wrap > label {
    display: block; font-size: 0.8rem; font-weight: 600; color: var(--v2-muted); margin-bottom: 7px;
}
body.cdp-redesign .v2-seg {
    display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
    background: var(--v2-soft); border: 1px solid var(--v2-line); border-radius: 12px;
}
body.cdp-redesign .v2-seg__btn {
    appearance: none; border: 1px solid transparent; background: transparent;
    color: var(--v2-muted); font: inherit; font-weight: 600; font-size: 0.9rem;
    padding: 9px 16px; border-radius: 9px; cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
body.cdp-redesign .v2-seg__btn:hover { color: var(--v2-ink); }
body.cdp-redesign .v2-seg__btn.is-active {
    background: var(--v2-surface); color: var(--v2-brand);
    border-color: var(--v2-line); box-shadow: 0 2px 6px -2px rgba(16,24,40,.18);
}
body.cdp-redesign .v2-seg__badge {
    display: inline-block; margin-left: 7px; font-size: 0.66rem; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; vertical-align: middle;
}
/* Esconde os <select> nativos substituidos por pills (mantidos no DOM p/ o motor) */
body.cdp-redesign .v2-hidden-native { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Inputs / selects gerais --------------------------------------------- */
body.cdp-redesign .form-group label { font-size: 0.82rem; font-weight: 600; color: var(--v2-muted); }
body.cdp-redesign #section-juridica select,
body.cdp-redesign #section-juridica input[type="date"],
body.cdp-redesign #section-juridica input[type="text"],
body.cdp-redesign #section-juridica input[type="number"] {
    height: 46px; border-radius: var(--v2-radius-sm);
    border: 1px solid var(--v2-line); background-color: var(--v2-surface);
    transition: border-color .15s, box-shadow .15s;
}
body.cdp-redesign #section-juridica select:focus,
body.cdp-redesign #section-juridica input:focus {
    outline: none; border-color: var(--v2-brand);
    box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}

/* ---- Tooltips: (?) -> icone ⓘ -------------------------------------------- */
body.cdp-redesign .tooltip-trigger {
    display: inline-grid; place-items: center; width: 18px; height: 18px;
    margin-left: 4px; border-radius: 50%; color: var(--v2-brand);
    background: #eef5ff; font-size: 0.72rem; cursor: pointer; vertical-align: middle;
    border: 1px solid #d7e8ff; transition: background .15s;
}
body.cdp-redesign .tooltip-trigger:hover { background: #d7e8ff; }

/* ---- Caixa de adicionar evento ------------------------------------------- */
body.cdp-redesign .event-form-container {
    background: var(--v2-soft); border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius); padding: 16px 18px; margin-top: 4px;
}
body.cdp-redesign .event-form-container h4 { margin-top: 0; }

/* ---- Botoes -------------------------------------------------------------- */
body.cdp-redesign #addEventBtn {
    background: var(--v2-brand); color: #fff; border: none; font-weight: 600;
    border-radius: var(--v2-radius-sm); padding: 11px 20px;
    box-shadow: 0 4px 12px -4px rgba(0,113,227,.5);
}
body.cdp-redesign #addEventBtn::before { content: "\002b"; font-weight: 800; margin-right: 8px; }
body.cdp-redesign .btn-clear-action { border-radius: var(--v2-radius-sm) !important; }

/* ---- Linha do tempo de eventos ------------------------------------------- */
/* UMA linha contínua no gutter (à esquerda, separada do texto) + pontos alinhados nela. */
body.cdp-redesign #event-list {
    /* base usa grid/flex herdado; forço coluna com stretch p/ todas as li terem mesmo left/largura */
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    list-style: none; margin: 10px 0 0; padding: 6px 0 6px 34px;
    position: relative; max-height: none !important; background: transparent !important; overflow: visible;
}
body.cdp-redesign #event-list::before {
    content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px;
    width: 2px; background: var(--v2-line); border-radius: 2px;
}
body.cdp-redesign #event-list li {
    position: relative; margin: 0 0 6px; padding: 8px 6px;
    border: none !important; border-radius: 8px; background: transparent !important;
    font-size: 0.9rem; display: flex; align-items: flex-start; gap: 12px;
}
body.cdp-redesign #event-list li:last-child { margin-bottom: 0; }
body.cdp-redesign #event-list li > .history-item-info { flex: 1 1 auto; min-width: 0; }
body.cdp-redesign #event-list li > .history-item-actions { flex: 0 0 auto; }
/* Ponto sobre a linha (centro do ponto alinhado ao centro da linha em x=12px) */
body.cdp-redesign #event-list li::before {
    content: ""; position: absolute; left: -28px; top: 12px; width: 13px; height: 13px;
    border-radius: 50%; background: var(--v2-brand);
    border: 3px solid var(--v2-surface); box-shadow: 0 0 0 1.5px var(--v2-line); z-index: 1;
}
/* cor da bolinha por tipo (classe aplicada pelo JS) */
body.cdp-redesign #event-list li.v2-ev-ok::before { background: var(--v2-ok); }
body.cdp-redesign #event-list li.v2-ev-bad::before { background: var(--v2-bad); }
body.cdp-redesign #event-list li.v2-ev-mark::before { background: var(--v2-brand); }

/* ---- CTA Simular --------------------------------------------------------- */
body.cdp-redesign .intercorrente-actions { border-top: 1px solid var(--v2-line); }

/* ---- Hero do resultado (banner) ------------------------------------------ */
body.cdp-redesign .v2-result-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 18px 20px; border-radius: var(--v2-radius);
    border: 1px solid var(--v2-line); background: var(--v2-surface);
    box-shadow: 0 10px 30px -20px rgba(16,24,40,.35);
}
body.cdp-redesign .v2-result-hero__chip {
    font-size: 0.95rem; font-weight: 800; letter-spacing: .3px;
    padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}
body.cdp-redesign .v2-result-hero__chip.is-ok { color: var(--v2-ok); background: var(--v2-ok-bg); border: 1px solid var(--v2-ok-bd); }
body.cdp-redesign .v2-result-hero__chip.is-bad { color: var(--v2-bad); background: var(--v2-bad-bg); border: 1px solid var(--v2-bad-bd); }
body.cdp-redesign .v2-result-hero__chip.is-warn { color: var(--v2-warn); background: var(--v2-warn-bg); border: 1px solid var(--v2-warn-bd); }
body.cdp-redesign .v2-result-hero__main { flex: 1 1 240px; min-width: 0; }
body.cdp-redesign .v2-result-hero__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--v2-ink); }
body.cdp-redesign .v2-result-hero__sub { margin: 2px 0 0; font-size: 0.85rem; color: var(--v2-muted); }
/* Linha de previsão de prescrição (data projetada / data de consumação) */
body.cdp-redesign .v2-result-hero__forecast {
    margin: 8px 0 0; padding: 7px 12px; font-size: 0.9rem;
    border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-line);
    background: var(--v2-soft); color: var(--v2-ink);
}
body.cdp-redesign .v2-result-hero__forecast strong { color: var(--v2-brand); }
body.cdp-redesign .v2-result-hero__forecast.is-bad { background: var(--v2-bad-bg); border-color: var(--v2-bad-bd); }
body.cdp-redesign .v2-result-hero__forecast.is-bad strong { color: var(--v2-bad); }

/* ---- Status chips dentro do resumo/cards --------------------------------- */
body.cdp-redesign .periodo-status {
    font-weight: 800; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem;
}
body.cdp-redesign .periodo-status.status-nao-prescrito { color: var(--v2-ok); background: var(--v2-ok-bg); }
body.cdp-redesign .periodo-status.status-prescrito { color: var(--v2-bad); background: var(--v2-bad-bg); }
body.cdp-redesign .periodo-status.status-desconsiderado { color: var(--v2-muted); background: var(--v2-soft); }
body.cdp-redesign .result-card-periodo {
    border: 1px solid var(--v2-line) !important; border-radius: var(--v2-radius) !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}

/* ---- Dark mode ----------------------------------------------------------- */
body.cdp-redesign.dark-mode {
    --v2-soft: rgba(255,255,255,.04);
    --v2-ok-bg: rgba(34,197,94,.12); --v2-bad-bg: rgba(239,68,68,.12); --v2-warn-bg: rgba(245,158,11,.12);
    /* Texto/borda dos callouts e chips tambem precisam clarear no dark (contraste WCAG). */
    --v2-ok: #4ade80; --v2-ok-bd: rgba(74,222,128,.35);
    --v2-bad: #f87171; --v2-bad-bd: rgba(248,113,113,.35);
    --v2-warn: #fbbf24; --v2-warn-bd: rgba(251,191,36,.4);
}
body.cdp-redesign.dark-mode .v2-seg__btn.is-active { background: rgba(255,255,255,.07); }
body.cdp-redesign.dark-mode .tooltip-trigger { background: rgba(0,113,227,.18); border-color: rgba(0,113,227,.3); }
/* Hero no dark */
body.cdp-redesign.dark-mode .v2-result-hero { background: rgba(255,255,255,.03); }
body.cdp-redesign.dark-mode .v2-result-hero__title { color: #e2e8f0; }

/* ---- Modais de ajuda: corpo rolavel + barra fixa de Fechar --------------- */
/* O JS (ver2-ux) envolve o conteudo em .v2-modal-body e adiciona .v2-modal-footer.
   Aqui transformamos a caixa num flex-column com altura maxima: o cabecalho/corpo
   rolam e o botao Fechar fica sempre visivel ao pe do modal. */
/* So os modais aprimorados pelo JS (que recebem .v2-modal-body) viram flex-column
   com teto de altura; o modal dinamico de confirmacao (floating-modal) fica intacto. */
body.cdp-redesign .modal-content:has(.v2-modal-body) {
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 760px);
    padding: 0;            /* o respiro vai para o .v2-modal-body */
    overflow: hidden;      /* corta os cantos arredondados do conteudo rolavel */
}
body.cdp-redesign .modal-content:has(.v2-modal-body) > .close-button { z-index: 6; top: 12px; right: 16px; }

body.cdp-redesign .v2-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 26px 30px 18px;
}
body.cdp-redesign .v2-modal-body > h2 { margin-top: 0; padding-right: 34px; }

body.cdp-redesign .v2-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--v2-line);
    background: var(--v2-surface);
}
body.cdp-redesign .v2-modal-close-bar {
    width: auto;
    max-width: max-content;
    padding: 10px 24px;
    border: none;
    border-radius: var(--v2-radius-sm);
    background: var(--v2-brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 0.15s ease;
}
body.cdp-redesign .v2-modal-close-bar:hover { filter: brightness(1.08); }
/* botoes de acao (ex.: confirmar regra) ficam logo acima da barra, sem colar */
body.cdp-redesign .modal-content .modal-actions { padding: 0 30px 4px; margin-top: 6px; }
body.cdp-redesign.dark-mode .v2-modal-footer { background: var(--v2-surface); border-top-color: var(--v2-line); }

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 640px) {
    body.cdp-redesign .v2-seg { display: flex; width: 100%; }
    body.cdp-redesign .v2-seg__btn { flex: 1 1 auto; text-align: center; }
    body.cdp-redesign .v2-step, body.cdp-redesign .v2-block { padding-left: 16px; padding-right: 16px; }
    /* respiro lateral: o modal nunca encosta nas bordas da tela */
    body.cdp-redesign .modal { padding: 0 14px; }
    body.cdp-redesign .modal-content:has(.v2-modal-body) { width: 100%; max-width: 100%; max-height: 88vh; margin: 14vh auto 0; }
    body.cdp-redesign .v2-modal-body { padding: 22px 18px 14px; }
    body.cdp-redesign .v2-modal-footer { padding: 11px 16px; }
}