/* icprop.css — Estilos do gerador de propostas In-Company.
   Escopado em #icprop (mesmo padrão do #pgen em propostas.css).
   O gerador redefine input/select/button — sem escopo vazaria no SaaS. */

/* ── Variáveis (mesmas do propostas.css para consistência) ── */
#icprop{--cy:#0ea5e9; --cy2:#38bdf8; --cy-glow:rgba(14,165,233,.35);
    --nav-1:#080e1a; --nav-2:#0a1d39; --nav-3:#0e2448;
    --nav-ink:#e2ecfa; --nav-muted:#8ea3c4; --nav-faint:#5a7194;
    --nav-field:rgba(255,255,255,.05); --nav-line:rgba(56,189,248,.10);
    --nav-card:rgba(255,255,255,.04); --nav-card-bd:rgba(255,255,255,.08);
    --ink:#0f172a; --radius:10px;
    --ring:0 0 0 3px rgba(14,165,233,.32);
    --shadow-btn:0 4px 14px rgba(14,165,233,.4);}
#icprop *{box-sizing:border-box;}
#icprop{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0c1525; color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}

/* ── Grid app (form + preview) ── */
#icprop .app{display:grid; grid-template-columns:380px 1fr; grid-template-rows:auto 1fr;
  height:calc(100vh - 160px); height:calc(100dvh - 160px); min-height:640px;}

/* ── Topbar ── */
#icprop .topbar{grid-column:1 / -1; position:relative; z-index:2; display:flex; align-items:center;
  gap:12px; height:52px; padding:0 20px;
  background:linear-gradient(90deg,var(--nav-1),var(--nav-2));
  border-bottom:1px solid rgba(56,189,248,.08);
  box-shadow:0 2px 20px rgba(0,0,0,.35); color:#fff;}
#icprop .brand{display:flex; align-items:center; gap:12px;}
#icprop .brand-mark{width:30px; height:30px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:17px;
  color:#04121f; background:linear-gradient(135deg,var(--cy2),var(--cy));
  box-shadow:0 4px 14px var(--cy-glow);}
#icprop .brand-text{display:flex; flex-direction:column; line-height:1.25;}
#icprop .brand-text strong{font-size:13.5px; font-weight:700; letter-spacing:-.01em;}
#icprop .brand-text span{font-size:10px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--cy2);}

/* ── Painel do formulário ── */
#icprop .panel{padding:16px; overflow-y:auto; min-height:0;}
#icprop .panel::-webkit-scrollbar{width:6px;}
#icprop .panel::-webkit-scrollbar-track{background:transparent;}
#icprop .panel::-webkit-scrollbar-thumb{border-radius:3px; background:rgba(56,189,248,.15);}
#icprop .panel::-webkit-scrollbar-thumb:hover{background:rgba(56,189,248,.3);}
#icprop .form{background:linear-gradient(180deg,var(--nav-1) 0%,var(--nav-2) 40%,var(--nav-3) 100%);
  border-right:1px solid rgba(56,189,248,.06); color:var(--nav-ink);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}

/* ── Cards (seções do form) ── */
#icprop .card{background:var(--nav-card); border:1px solid var(--nav-card-bd);
  border-radius:12px; padding:12px 14px 14px; margin-bottom:8px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  border-left:3px solid rgba(255,255,255,.06);}
#icprop .card:hover{background-color:rgba(255,255,255,.06); box-shadow:0 4px 20px -8px rgba(14,165,233,.12);}
#icprop .card-cy{border-left-color:var(--cy);}
#icprop .card-cy h2{color:var(--cy2);}
#icprop .card-am{border-left-color:#f59e0b;}
#icprop .card-am h2{color:#fbbf24;}
#icprop .card-gn{border-left-color:#22c55e;}
#icprop .card-gn h2{color:#4ade80;}

/* ── Formulário: tipografia ── */
#icprop .form h2{font-size:9.5px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; margin:0 0 10px; padding-bottom:7px;
  border-bottom:1px solid var(--nav-line); display:flex; align-items:center; gap:7px;}
#icprop label{display:block; font-size:11px; font-weight:600; color:var(--nav-muted);
  margin:8px 0 4px; letter-spacing:.2px;}
#icprop input,#icprop textarea,#icprop select{width:100%; min-width:0; box-sizing:border-box;
  padding:8px 11px; border:1px solid var(--nav-line); border-radius:var(--radius);
  font-size:12.5px; font-family:inherit; color:var(--nav-ink);
  background-color:var(--nav-field); color-scheme:dark;
  transition:border-color .2s, box-shadow .2s, background-color .2s;}
#icprop input:hover,#icprop textarea:hover,#icprop select:hover{
  border-color:rgba(56,189,248,.25); background-color:rgba(255,255,255,.07);}
#icprop input:focus,#icprop textarea:focus,#icprop select:focus{
  outline:none; border-color:var(--cy); background-color:rgba(14,165,233,.08); box-shadow:var(--ring);}
#icprop input::placeholder,#icprop textarea::placeholder{color:var(--nav-faint);}
#icprop select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;}
#icprop select option{background-color:var(--nav-2); color:var(--nav-ink);}
#icprop textarea{resize:vertical; min-height:56px; line-height:1.5;}
#icprop .row{display:flex; gap:8px;}
#icprop .row > *{flex:1; min-width:0;}

/* ── Template actions ── */
#icprop .ic-tpl-actions{display:flex; gap:8px; margin-top:8px;}
#icprop .ic-tpl-actions .b{flex:1; font-size:11px; padding:7px 10px;}

/* ── Botão PDF ── */
#icprop .btn{background:linear-gradient(135deg,var(--cy2),var(--cy)); color:#04121f;
  border:none; padding:10px 14px; border-radius:var(--radius); font-size:12.5px;
  font-weight:700; cursor:pointer; width:100%; margin-top:12px;
  box-shadow:var(--shadow-btn); display:flex; align-items:center; justify-content:center; gap:6px;
  transition:filter .18s, box-shadow .18s, transform .08s;}
#icprop .btn:hover{filter:brightness(1.1); box-shadow:0 6px 22px var(--cy-glow);}
#icprop .btn:active{transform:translateY(1px);}
#icprop .btn:disabled{opacity:.45; cursor:not-allowed; pointer-events:none;}
#icprop .btn.loading{pointer-events:none; opacity:.7; color:transparent!important; position:relative;}
#icprop .btn.loading::after{content:''; position:absolute; inset:0; margin:auto;
  width:16px; height:16px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%; animation:ic-sp .7s linear infinite;}
@keyframes ic-sp{to{transform:rotate(360deg)}}

/* ── Preview ── */
#icprop .preview-wrap{background:linear-gradient(180deg,#0f1b2e,#0c1525);
  padding:16px 12px; overflow-x:auto; overflow-y:auto;}
#icprop .preview-wrap::-webkit-scrollbar-thumb{background:rgba(14,165,233,.2);}
#icprop .preview-wrap::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,.35);}

/* ── Documento (preview) ── */
#icprop #icDoc{background:#fff; width:210mm; min-height:297mm; overflow:hidden;
  margin:0 auto; box-shadow:0 4px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(56,189,248,.06);
  border-radius:4px; font-size:13px; color:#1e293b; line-height:1.7;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  transform-origin:top center;}
#icprop #icDoc .ic-band{width:100%; height:auto; display:block;}
#icprop #icDoc .ic-body{padding:10mm 16mm 14mm;}

/* ── Carta de apresentação ── */
#icprop #icDoc .ic-dest{font-size:13px; line-height:1.6; margin-bottom:22px;
  padding-left:14px; border-left:3px solid #0c4a6e;}
#icprop #icDoc .ic-dest b{color:#0c4a6e;}
#icprop #icDoc p{margin:0 0 11px; font-size:13px; line-height:1.7;}
#icprop #icDoc ul{margin:8px 0 16px 0; padding:0; list-style:none;}
#icprop #icDoc li{margin:0 0 6px; font-size:13px; line-height:1.55;
  padding:6px 12px 6px 28px; position:relative; background:#f0f9ff;
  border-radius:6px;}
#icprop #icDoc li::before{content:'✓'; position:absolute; left:10px; top:6px;
  font-weight:700; color:#0369a1; font-size:12px;}
#icprop #icDoc .ic-assinatura{margin-top:32px; line-height:1.7; font-size:12.5px;
  padding:16px 20px; background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  border-radius:10px; border-left:4px solid #0284c7;}
#icprop #icDoc .ic-assinatura b{color:#0c4a6e; font-size:13.5px;}

/* ── Página de título ── */
#icprop #icDoc .ic-titulo-pagina{margin:44px 0; padding:0; text-align:center;
  background:linear-gradient(135deg,#0c4a6e 0%,#0369a1 40%,#0284c7 100%);
  border-radius:12px; position:relative; overflow:hidden;}
#icprop #icDoc .ic-titulo-pagina::before{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.12) 0%,transparent 60%);
  pointer-events:none;}
#icprop #icDoc .ic-titulo-inner{display:flex; flex-direction:column; gap:14px;
  padding:48px 32px; position:relative; z-index:1;}
#icprop #icDoc .ic-titulo-label{font-size:11px; font-weight:800; letter-spacing:3px;
  text-transform:uppercase; color:rgba(255,255,255,.7);}
#icprop #icDoc .ic-titulo-tema{font-size:20px; font-weight:800; line-height:1.35;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.15);}
#icprop #icDoc .ic-titulo-org{font-size:13px; font-weight:600; color:rgba(255,255,255,.8);
  margin-top:8px; letter-spacing:.3px;}

/* ── Seções de conteúdo ── */
#icprop #icDoc .ic-sec{font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  margin:30px 0 12px; padding:8px 14px; color:#fff; background:#0c4a6e;
  border-radius:6px; display:flex; align-items:center; gap:8px;}
#icprop #icDoc .ic-sec::before{content:''; width:3px; height:16px; background:#38bdf8;
  border-radius:2px; flex-shrink:0;}
#icprop #icDoc h3{font-size:13px; font-weight:700; margin:18px 0 8px; color:#0c4a6e;
  text-transform:uppercase; padding-bottom:4px; border-bottom:1px solid #bae6fd;}
#icprop #icDoc h4{font-size:13px; font-weight:700; margin:16px 0 6px; color:#0369a1;
  padding-left:10px; border-left:2px solid #7dd3fc;}
#icprop #icDoc .ic-pin{background:linear-gradient(90deg,#f0f9ff,#e0f2fe); border-left:3px solid #0284c7;
  padding:10px 14px; margin:12px 0; font-size:12.5px; border-radius:0 8px 8px 0;
  font-weight:500;}

/* ── Ficha do curso ── */
#icprop #icDoc .ic-ficha{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
  border:1px solid #bae6fd; border-radius:10px; padding:16px 20px; margin:18px 0;
  box-shadow:0 2px 8px rgba(3,105,161,.06);}
#icprop #icDoc .ic-ficha p{margin:0 0 5px; font-size:13px; line-height:1.6;}
#icprop #icDoc .ic-ficha b{color:#0c4a6e;}

/* ── Professor ── */
#icprop #icDoc .ic-prof-nome{font-size:15px; font-weight:800; margin:12px 0 8px;
  text-transform:uppercase; color:#0c4a6e; letter-spacing:.3px;}

/* ── OBS programação ── */
#icprop #icDoc .ic-obs{font-style:italic; font-size:12px; color:#64748b; margin-top:14px;
  padding:10px 14px; background:#f8fafc; border-radius:6px; border:1px solid #e2e8f0;}

/* ── Tabela de investimento ── */
#icprop #icDoc .ic-invest-tbl{width:100%; border-collapse:separate; border-spacing:0;
  margin:16px 0; font-size:12.5px; border-radius:10px; overflow:hidden;
  border:1px solid #bae6fd; box-shadow:0 2px 8px rgba(3,105,161,.06);}
#icprop #icDoc .ic-invest-tbl th{background:linear-gradient(135deg,#0c4a6e,#0369a1);
  color:#fff; padding:10px 12px; text-align:center; font-weight:700;
  font-size:11px; letter-spacing:.8px; text-transform:uppercase;}
#icprop #icDoc .ic-invest-tbl td{border-bottom:1px solid #e0f2fe; padding:10px 12px;
  vertical-align:middle; background:#f0f9ff;}
#icprop #icDoc .ic-invest-tbl tr:last-child td{border-bottom:none;}
#icprop #icDoc .ic-invest-tema{font-size:12px; line-height:1.4; max-width:260px; font-weight:600;
  color:#0c4a6e;}
#icprop #icDoc .ic-invest-tbl td:last-child{font-size:15px; font-weight:800; color:#0369a1;}

/* ── Rodapé ── */
#icprop #icDoc .ic-rodape{display:flex; justify-content:space-between; gap:20px;
  margin-top:36px; padding-top:20px; border-top:2px solid #0c4a6e;}
#icprop #icDoc .ic-rodape-box{border:1px solid #bae6fd; padding:14px 16px;
  font-size:11.5px; line-height:1.6; text-align:center; flex:0 1 48%;
  border-radius:8px; background:#f0f9ff;}
#icprop #icDoc .ic-rodape-box b{color:#0c4a6e;}
#icprop #icDoc .ic-rodape-cnpj{font-size:10px; color:#64748b; margin-bottom:4px;
  letter-spacing:.5px;}
#icprop #icDoc .ic-rodape-sign{text-align:center; font-size:12px; line-height:1.7;
  padding:14px 16px; flex:0 1 48%; border:1px solid #bae6fd; border-radius:8px;
  background:#f0f9ff;}
#icprop #icDoc .ic-rodape-sign b{color:#0c4a6e;}

/* ══ Mobile ═══════════════════════════════════════════════════════ */
@media(max-width:768px){
  #icprop .app{grid-template-columns:1fr; grid-template-rows:auto auto 1fr; height:auto; min-height:0;
    padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);}
  #icprop .app,#icprop .panel,#icprop .preview-wrap{max-width:100%;}
  #icprop .preview-wrap{overflow-x:hidden; padding:16px 10px;}
  #icprop .form{border-right:none; border-bottom:1px solid rgba(56,189,248,.06);}
  #icprop .topbar{height:48px; padding:0 14px; gap:8px;}
  #icprop .brand-mark{width:26px; height:26px; font-size:15px; border-radius:7px;}
  #icprop .brand-text strong{font-size:12px;}
  #icprop .brand-text span{font-size:9px;}
}
@media(max-width:640px){
  #icprop .panel{padding:14px 12px 18px;}
  #icprop .card{background-color:transparent; background-image:none; border:0; border-radius:0;
    padding:0; margin:0 0 20px; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;}
  #icprop .card:hover{background-color:transparent; box-shadow:none;}
  #icprop .form h2{font-size:10.5px; letter-spacing:1.4px;}
  #icprop label{font-size:11px; margin:7px 0 3px;}
  #icprop input,#icprop textarea,#icprop select{padding:8px 10px; font-size:16px;
    border-radius:8px; min-height:44px;}
  #icprop select{padding-right:32px; background-position:right 10px center;}
  #icprop textarea{min-height:60px;}
  #icprop .btn{padding:14px 16px; font-size:14px; border-radius:10px; min-height:48px;}
  #icprop .row{flex-direction:row; gap:8px;}
  #icprop .row > *{flex:1 1 0; min-width:0;}
  #icprop .panel.form{overflow-x:hidden;}
}
@media(max-width:430px){
  #icprop .panel{padding:12px 10px 16px;}
  #icprop .card{margin:0 0 18px;}
  #icprop .topbar{height:44px; padding:0 10px;}
  #icprop .brand-mark{width:24px; height:24px; font-size:14px; border-radius:6px;}
  #icprop .brand-text strong{font-size:11.5px;}
  #icprop .brand-text span{font-size:8.5px;}
  #icprop .preview-wrap{padding:12px 6px;}
}
/* Touch UX */
#icprop a,#icprop button,#icprop input,#icprop select,#icprop textarea{touch-action:manipulation;}
@media(prefers-reduced-motion:reduce){
  #icprop *,#icprop *::before,#icprop *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;}
}