/* Modais da "Nova cotação" (tipo de seguro > CPF > cliente), com o mesmo desenho do portal Sindepar.
   Tudo fica sob #fluxo-portal para não misturar com o estilo da plataforma. */

#fluxo-portal {
  --azul: #2f5e9e;
  --azul-escuro: #1f4a7e;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #1b1b1b;
}
#fluxo-portal *, #fluxo-portal *::before, #fluxo-portal *::after { box-sizing: border-box; }
#fluxo-portal button { font: inherit; cursor: pointer; }
#fluxo-portal [hidden] { display: none !important; }

#fluxo-portal .fp-overlay { position: fixed; inset: 0; background: rgba(16,16,16,.55); display: grid; place-items: center; padding: 16px; z-index: 1000; }
#fluxo-portal .fp-modal { position: relative; background: #fff; border-radius: 22px; width: 100%; max-width: 530px; padding: 40px 48px 36px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
#fluxo-portal .fp-modal h3 { margin: 0 0 30px; font-size: 21px; font-weight: 400; color: #3a3f47; }
#fluxo-portal .fp-modal h3 strong { font-weight: 700; color: #1b2430; }
#fluxo-portal .m-icone { width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%; background: var(--azul); display: grid; place-items: center; box-shadow: 0 0 0 7px #e6eef8; }
#fluxo-portal .dica { margin: 12px 0 0; color: #8a8f98; font-size: 12.5px; }
#fluxo-portal .fechar { position: absolute; top: 14px; right: 20px; border: 0; background: none; font-size: 26px; color: #444; line-height: 1; }
#fluxo-portal .opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#fluxo-portal .opcao { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 10px; border: 1.5px solid #d3dbe7; border-radius: 14px; background: #fff; font-size: 15px; }
#fluxo-portal .opcao:hover, #fluxo-portal .opcao:focus-visible { border-color: var(--azul); background: #f2f7fd; box-shadow: 0 0 0 3px #dbe7f6; outline: none; }
#fluxo-portal .o-ico { width: 38px; height: 38px; color: var(--azul); }
#fluxo-portal .cpf-campo { width: 100%; height: 62px; font: inherit; font-size: 24px; letter-spacing: 3px; text-align: center; color: #1b2430; padding: 0 16px; border: 2px solid var(--azul); border-radius: 16px; outline: none; background: #fff; box-shadow: 0 0 0 4px #dbe7f6; }
#fluxo-portal .cpf-campo::placeholder { color: #9aa3ae; }
#fluxo-portal .erro { color: #c0262d; font-size: 12.5px; margin-top: 10px; }
#fluxo-portal .acoes { display: flex; justify-content: center; gap: 16px; margin-top: 30px; }
#fluxo-portal .acoes.centro { margin-top: 28px; }
#fluxo-portal .pri, #fluxo-portal .sec { min-width: 150px; padding: 13px 26px; border-radius: 6px; font-weight: 600; font-size: 16px; }
#fluxo-portal .pri { background: var(--azul); color: #fff; border: 1.5px solid var(--azul); }
#fluxo-portal .pri:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
#fluxo-portal .pri:disabled { opacity: .6; cursor: default; }
#fluxo-portal .sec { background: #fff; color: var(--azul); border: 1.5px solid var(--azul); }
#fluxo-portal .sec:hover { background: #f2f7fd; }

/* Modal de formulário (cabeçalho com divisória, campos com sublinhado) */
#fluxo-portal .modal-form { max-width: 700px; padding: 0; text-align: left; max-height: calc(100vh - 32px); overflow-y: auto; }
#fluxo-portal .mf-topo { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; border-bottom: 1px solid #e3e5e8; }
#fluxo-portal .modal-form .mf-topo h3 { margin: 0; font-size: 22px; font-weight: 600; color: #1b2430; }
#fluxo-portal .fechar-circ { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #eef1f5; font-size: 24px; color: #444; line-height: 1; }
#fluxo-portal .fechar-circ:hover { background: #e2e7ee; }
#fluxo-portal #fp-form-cliente { padding: 22px 32px 28px; }
#fluxo-portal .mf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px 22px; }
#fluxo-portal .mf-grid label { font-size: 13px; font-weight: 400; color: #5a6270; margin: 0; }
#fluxo-portal .mf-grid input { display: block; width: 100%; margin-top: 8px; padding: 6px 2px 8px; font: inherit; font-size: 16px; letter-spacing: 0; color: #1b2430; border: 0; border-bottom: 2px solid #d3dbe7; border-radius: 0; background: transparent; outline: none; }
#fluxo-portal .mf-grid input:focus { border-bottom-color: var(--azul); }
#fluxo-portal .mf-grid input[readonly] { color: #1b2430; cursor: default; }
#fluxo-portal .mf-grid input.invalido { border-bottom-color: #c0262d; }
#fluxo-portal .c-5 { grid-column: span 5; } #fluxo-portal .c-7 { grid-column: span 7; } #fluxo-portal .c-12 { grid-column: span 12; }
#fluxo-portal #fp-form-cliente .erro { margin-top: 18px; text-align: right; }
@media (max-width: 700px) { #fluxo-portal .mf-grid > label { grid-column: span 12; } }

/* Modal Cliente: dois caminhos em cartões */
#fluxo-portal .sep { margin: 22px 0 12px; font-size: 13px; font-weight: 600; color: #5a6270; letter-spacing: .02em; }
#fluxo-portal .cartoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#fluxo-portal .cartao { text-align: left; border-radius: 12px; padding: 18px; border: 2px solid; display: flex; flex-direction: column; gap: 10px; font: inherit; cursor: pointer; }
#fluxo-portal .cartao .cab { display: flex; align-items: center; gap: 12px; }
#fluxo-portal .cartao svg { width: 34px; height: 34px; flex: none; }
#fluxo-portal .cartao strong { font-size: 17px; }
#fluxo-portal .cartao .desc { font-size: 13.5px; line-height: 1.45; }
#fluxo-portal .cartao.cotar { background: var(--azul); border-color: var(--azul); color: #fff; }
#fluxo-portal .cartao.cotar:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
#fluxo-portal .cartao.mesa-cartao { background: #fff; border-color: var(--azul); color: var(--azul); }
#fluxo-portal .cartao.mesa-cartao .desc { color: #3c4a56; }
#fluxo-portal .cartao.mesa-cartao:hover { background: #f2f7fd; }
#fluxo-portal .cartao:disabled { opacity: .6; cursor: default; }
#fluxo-portal .salvar-cliente { margin-top: 18px; padding: 9px 20px; border: 1.5px solid var(--azul); color: var(--azul); border-radius: 6px; font: inherit; font-weight: 600; font-size: 14px; background: #fff; cursor: pointer; }
#fluxo-portal .salvar-cliente:hover { background: #f2f7fd; }
#fluxo-portal .salvar-cliente:disabled { opacity: .6; cursor: default; }
#fluxo-portal .fp-modal.confirma { max-width: 520px; padding: 34px 34px 28px; }
#fluxo-portal .icone-mesa { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--azul); color: var(--azul); display: grid; place-items: center; }
#fluxo-portal .icone-mesa svg { width: 32px; height: 32px; }
#fluxo-portal .fp-modal.confirma h3 { margin-bottom: 10px; }
#fluxo-portal .fp-modal.confirma p { margin: 0 0 8px; font-size: 14.5px; color: #3c4a56; line-height: 1.5; }

/* Plano de saúde: só o cartão "Enviar para a Mesa", ocupando a largura toda */
#fluxo-portal .cartoes.um { grid-template-columns: 1fr; }
#fluxo-portal .opcao[hidden], #fluxo-portal .cartao[hidden] { display: none !important; }
#fluxo-portal .cartoes[hidden], #fluxo-portal #fp-cliente-sep[hidden] { display: none !important; }