/* 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) ── */
/* Tokens (--cy, --nav-*, --ink, --radius, --ring, --shadow-btn) vivem em
   propcomum.css desde a Etapa 7 (11/09/2026) — compartilhados com o outro gerador. */
#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;}

/* ── Etapa 4: vínculo com o cadastro, etiquetas e professores ── */
#icprop .ic-hint{font-size:10.5px; line-height:1.45; color:var(--nav-muted); margin-top:8px;}
#icprop .ic-tag{display:inline-block; font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:#7dd3fc; background:rgba(14,165,233,.14); border:1px solid rgba(56,189,248,.3); border-radius:999px;
  padding:1px 7px; margin-left:6px; vertical-align:middle; cursor:help;}
#icprop .ic-tag[hidden]{display:none;}
/* contador − N + no título da seção (o mesmo desenho do .mc-stp do app) */
#icprop .ic-stp{margin-left:auto; display:inline-flex; align-items:center; gap:2px; text-transform:none; letter-spacing:0;
  border:1px solid rgba(56,189,248,.25); border-radius:999px; padding:2px;}
#icprop .ic-stp button{width:28px; height:28px; border:0; border-radius:999px; background:rgba(255,255,255,.06);
  color:var(--nav-ink); font-size:16px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;
  position:relative;}
#icprop .ic-stp button::after{content:''; position:absolute; inset:-8px;}
#icprop .ic-stp button:hover{background:rgba(14,165,233,.25);}
#icprop .ic-stp .n{min-width:22px; text-align:center; font-size:13px; font-weight:800; color:#fff;}
#icprop .ic-prof{padding:8px 0 10px; border-top:1px dashed var(--nav-line);}
#icprop .ic-prof:first-child{border-top:0; padding-top:0;}
#icprop .ic-prof>label{margin-top:0;}
#icprop .ic-prof input,#icprop .ic-prof textarea{margin-top:6px;}
#icprop .ic-prof input[hidden]{display:none;}

/* ── Etapa 5: editor da programação (dias e linhas) ── */
#icprop .ic-h2-acts{margin-left:auto; display:inline-flex; gap:6px; text-transform:none; letter-spacing:0;}
#icprop .ic-mini{background:transparent; color:#7dd3fc; border:1px solid rgba(56,189,248,.35); border-radius:999px;
  font:inherit; font-size:10.5px; font-weight:700; padding:4px 10px; cursor:pointer; line-height:1.2; position:relative;}
#icprop .ic-mini::after{content:''; position:absolute; inset:-8px;}
#icprop .ic-mini:hover{background:rgba(14,165,233,.14);}
#icprop .ic-import{border:1px dashed rgba(56,189,248,.3); border-radius:10px; padding:8px 10px 10px; margin:6px 0 10px;}
#icprop .ic-import[hidden]{display:none;}
#icprop .ic-dia{border:1px solid var(--nav-card-bd); border-radius:10px; padding:8px; margin-top:8px; background:rgba(255,255,255,.025);}
#icprop .ic-dia-h{display:grid; grid-template-columns:auto 82px 1fr auto; gap:6px; align-items:center;}
#icprop .ic-dia-n{font-size:11px; font-weight:800; color:#4ade80; letter-spacing:.3px; white-space:nowrap;}
#icprop .ic-dia-h input{padding:6px 8px; font-size:12px;}
#icprop .ic-dia-acts,#icprop .ic-l-acts{display:inline-flex; gap:2px;}
/* botão de ícone: 26px visuais, alvo de 44 pelo ::after (inset -9 = 26+18) */
#icprop .ic-ib{width:26px; height:26px; border:0; border-radius:6px; background:rgba(255,255,255,.07); color:var(--nav-ink);
  font-size:13px; line-height:1; cursor:pointer; padding:0; position:relative; display:inline-flex; align-items:center; justify-content:center;}
#icprop .ic-ib::after{content:''; position:absolute; inset:-9px;}
#icprop .ic-ib:hover{background:rgba(14,165,233,.25);}
#icprop .ic-ib:disabled{opacity:.3; cursor:default;}
#icprop .ic-ib-x{color:#fca5a5;}
#icprop .ic-linhas{margin-top:6px; display:flex; flex-direction:column; gap:6px;}
#icprop .ic-linha{display:grid; grid-template-columns:100px 1fr; grid-template-areas:"h t" "p tipo" "acts acts"; gap:4px 6px;
  padding:6px 0 6px 8px; border-left:2px solid rgba(255,255,255,.12);}
#icprop .ic-linha input,#icprop .ic-linha select{padding:6px 7px; font-size:11.5px;}
#icprop .ic-l-h{font-variant-numeric:tabular-nums; letter-spacing:-.2px;}
#icprop .ic-linha select{padding-right:26px; background-position:right 8px center;}
#icprop .ic-l-h{grid-area:h;} #icprop .ic-l-t{grid-area:t;} #icprop .ic-l-p{grid-area:p;} #icprop .ic-l-tipo{grid-area:tipo;}
#icprop .ic-l-acts{grid-area:acts; justify-content:flex-end;}
#icprop .ic-linha.ic-t-intervalo{border-left-color:rgba(142,163,196,.5);}
#icprop .ic-linha.ic-t-intervalo .ic-l-t{font-style:italic; color:var(--nav-muted);}
#icprop .ic-linha.ic-t-abertura,#icprop .ic-linha.ic-t-encerramento{border-left-color:var(--cy);}
#icprop .ic-add-l{margin-top:8px;}
@media(min-width:1100px){
  #icprop .ic-linha{grid-template-columns:100px 1fr 120px 104px auto; grid-template-areas:"h t p tipo acts";}
}

/* ── Etapa 6: saída da calculadora ── */
#icprop .ic-pc-out{margin-top:10px; border-top:1px solid var(--nav-line); padding-top:6px;}
#icprop .ic-pc-row{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; color:var(--nav-muted); border-bottom:1px dashed rgba(255,255,255,.06);}
#icprop .ic-pc-row:last-child{border-bottom:0;}
#icprop .ic-pc-row span{flex:1; min-width:0;}
#icprop .ic-pc-row small{display:block; font-size:10px; color:var(--nav-muted);} /* faint dava 3,1 no fundo mais claro do gradiente */
#icprop .ic-pc-row b{color:#fff; font-size:13px; white-space:nowrap; text-align:right;}
#icprop .ic-pc-row em{font-style:normal; font-size:10px; font-weight:800; color:#fca5a5; margin-left:6px; text-transform:uppercase; letter-spacing:.3px;}
#icprop .ic-pc-ok b{color:#4ade80;}
#icprop .ic-pc-bad b{color:#fca5a5;}
#icprop input[readonly]{opacity:.85; cursor:default;}

/* ── Etapa 7: botão dos textos no topbar ── */
#icprop .ic-topbtn{margin-left:auto;}

/* ── 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);}

/* ── Prévia: é o PDF de verdade num iframe (Etapa 2). As regras do documento
   em DOM (#icDoc, .ic-band, .ic-sec…) saíram — o layout vive no docDefinition
   do icprop.js, e só lá. ── */
#icprop .preview-wrap{display:flex; flex-direction:column; gap:8px; padding:12px;}
#icprop #icPreview{flex:1; width:100%; min-height:520px; border:0; border-radius:8px; background:#fff;
  box-shadow:0 4px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(56,189,248,.06);}
#icprop .ic-pv-msg{font-size:12.5px; line-height:1.5; color:#fde68a; background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.35); border-radius:8px; padding:10px 12px;}

/* ══ 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:12px 10px;}
  #icprop #icPreview{min-height:70vh; min-height:70dvh;}
  #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;}
  /* Os botões de template ficavam em 38px e o hitSlop do .b não os alcança aqui
     (o ::after se ancora fora do #icprop). 44 de verdade, medido. */
  #icprop .ic-tpl-actions .b{min-height:44px; font-size:12.5px;}
  /* 36 + inset −4 entregava 43 medido (subpixel); 38 fecha em 46 real. */
  #icprop .ic-dia-h{grid-template-columns:auto 1fr; grid-template-areas:"n data" "tema tema" "acts acts";}
  #icprop .ic-dia-n{grid-area:n;} #icprop .ic-dia-data{grid-area:data;} #icprop .ic-dia-tema{grid-area:tema;} #icprop .ic-dia-acts{grid-area:acts; justify-content:flex-end;}
  #icprop .ic-dia-h input,#icprop .ic-linha input,#icprop .ic-linha select{font-size:16px; min-height:44px;}
  #icprop .ic-linha{grid-template-columns:118px 1fr;}
  #icprop .ic-ib{width:36px; height:36px;} #icprop .ic-ib::after{inset:-5px;}
  #icprop .ic-dia-acts,#icprop .ic-l-acts{gap:10px;} /* gap ≥ 2 × inset: os alvos não disputam */
  #icprop .ic-mini{min-height:38px; padding:6px 12px;} #icprop .ic-mini::after{inset:-5px;} /* 36 dava 43 medido */
  #icprop .ic-stp button{width:38px; height:38px;}
  #icprop .ic-stp button::after{inset:-4px;}
  #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;}
}