/* ═══════════════════════════════════════════════════════════════════════════ SOMA · DOCUMENTOS — MODELOS (aba + editor visual por blocos) TEMA CLARO — casa com page-documents.css (.documents-app: canvas claro, cards brancos, tinta #0B1F33, linhas #E2E8F0, acento turquesa #02B8BF). "Papel" do documento = branco (válido nos dois contextos). Aditivo. Obs.: o editor-modal é anexado ao (fora de .documents-app) → cores explícitas (não depende das custom properties do escopo). ═══════════════════════════════════════════════════════════════════════════ */ /* ---------- lista da aba "Modelos" ---------- */ .mdl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin:4px 0 18px; } .mdl-head h2 { margin:0 0 4px; font-size:18px; font-weight:700; color:#0B1F33; } .mdl-head p { margin:0; max-width:680px; font-size:13px; line-height:1.5; color:#54657A; } .mdl-group { margin:0 0 22px; } .mdl-group-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:0 0 10px; } .mdl-group-head h3 { margin:0; font-size:14px; font-weight:700; color:#0B1F33; display:flex; align-items:center; gap:8px; } .mdl-group-sub { font-size:11.5px; color:#8597A8; } .mdl-count { display:inline-flex; min-width:20px; height:20px; padding:0 6px; align-items:center; justify-content:center; border-radius:10px; background:rgba(2,184,191,.14); color:#0E9AA1; font-size:11px; font-weight:700; } .mdl-list { display:flex; flex-direction:column; gap:8px; } .mdl-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 14px; border:1px solid #E2E8F0; border-radius:12px; background:#FFFFFF; box-shadow:0 1px 2px rgba(11,31,51,.04); transition:border-color .15s, box-shadow .15s; } .mdl-item:hover { border-color:#02B8BF; box-shadow:0 4px 14px rgba(2,184,191,.12); } .mdl-item-main { display:flex; flex-direction:column; gap:6px; min-width:0; } .mdl-item-name { font-size:13.5px; font-weight:600; color:#0B1F33; } .mdl-item-meta { display:flex; flex-wrap:wrap; gap:5px; } .mdl-item-act { display:flex; gap:6px; flex-shrink:0; } .mdl-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:7px; font-size:10.5px; font-weight:600; background:#F1F5F9; color:#54657A; border:1px solid transparent; } .mdl-tag.kind { background:rgba(2,184,191,.12); color:#0E9AA1; } .mdl-tag.builtin { background:rgba(124,58,237,.10); color:#6D28D9; } .mdl-tag.pdf { background:rgba(37,99,235,.10); color:#1D4ED8; } .mdl-tag.sign { background:rgba(22,163,74,.12); color:#15803D; } .mdl-tag.use { background:rgba(2,184,191,.16); color:#0E7C82; border-color:rgba(2,184,191,.25); } .mdl-tag.svc { background:rgba(124,58,237,.10); color:#6D28D9; } .mdl-tag.lim { background:#EEF3F8; color:#54657A; } .mdl-tag.lim-full { background:rgba(220,38,38,.10); color:#B91C1C; border-color:rgba(220,38,38,.18); } .mdl-sub-note { font-size:11px; color:#6B7C8F; line-height:1.35; } .mdl-sub-note b { color:#0E7C82; } .mdl-empty { padding:16px; border:1px dashed #cdd9e6; border-radius:12px; color:#8597A8; font-size:12.5px; text-align:center; background:rgba(255,255,255,.5); } /* ---------- Seção 1: modelos padronizados (travados) ---------- */ .mdl-sec-divider { height:1px; background:linear-gradient(90deg,transparent,#E2E8F0 12%,#E2E8F0 88%,transparent); margin:30px 0 22px; } .mdl-tag.lock { background:rgba(11,31,51,.07); color:#3C4F63; border-color:rgba(11,31,51,.10); } .mdl-tag.lock::before { content:""; display:inline-block; width:10px; height:10px; margin-right:5px; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .mdl-item--std { background:linear-gradient(180deg,#FFFFFF,#FBFDFE); } .mdl-item--std.is-off { opacity:.62; } .mdl-item--std.is-off .mdl-item-name { color:#54657A; } .mdl-item--svc { background:linear-gradient(180deg,#FFFFFF,#FBF9FF); border-color:rgba(124,58,237,.18); } .mdl-item--svc:hover { border-color:rgba(124,58,237,.38); box-shadow:0 4px 14px rgba(124,58,237,.10); } .mdl-item.is-on { border-color:rgba(2,184,191,.45); box-shadow:0 2px 10px rgba(2,184,191,.12); background:linear-gradient(180deg,#FFFFFF,#F4FDFD); } /* switch "Disponível" */ .mdl-switch { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; font-size:11.5px; font-weight:600; color:#54657A; } .mdl-switch input { position:absolute; opacity:0; width:0; height:0; } .mdl-switch-ui { position:relative; width:34px; height:19px; border-radius:999px; background:#cdd9e6; transition:background .18s; flex:0 0 auto; } .mdl-switch-ui::after { content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(11,31,51,.3); transition:transform .18s; } .mdl-switch input:checked + .mdl-switch-ui { background:#02B8BF; } .mdl-switch input:checked + .mdl-switch-ui::after { transform:translateX(15px); } .mdl-switch input:focus-visible + .mdl-switch-ui { box-shadow:0 0 0 3px rgba(2,184,191,.3); } .mdl-switch-lbl { white-space:nowrap; } .mdl-btn { appearance:none; cursor:pointer; border:1px solid #E2E8F0; background:#FFFFFF; color:#0B1F33; padding:7px 13px; border-radius:9px; font-size:12.5px; font-weight:600; transition:.15s; } .mdl-btn:hover { border-color:#02B8BF; color:#0E9AA1; background:rgba(2,184,191,.05); } .mdl-btn.primary { background:linear-gradient(135deg,#02B8BF,#0891b2); border-color:transparent; color:#fff; } .mdl-btn.primary:hover { filter:brightness(1.07); color:#fff; } .mdl-btn.ghost { background:transparent; border-color:#E2E8F0; color:#54657A; } .mdl-btn.danger { background:transparent; border-color:rgba(220,38,38,.25); color:#B91C1C; } .mdl-btn.danger:hover { background:rgba(220,38,38,.07); border-color:rgba(220,38,38,.45); color:#991B1B; } .mdl-btn[disabled] { opacity:.5; cursor:not-allowed; } .mdl-btn[disabled]:hover { border-color:#E2E8F0; color:#0B1F33; background:#FFFFFF; filter:none; } .mdl-btn.ghost:hover { color:#0E9AA1; border-color:#02B8BF; background:rgba(2,184,191,.05); } /* ---------- editor (overlay) ---------- */ .mdl-ov { position:fixed; inset:0; z-index:1200; background:rgba(11,31,51,.45); backdrop-filter:blur(3px); display:flex; padding:26px; } .mdl-modal { margin:auto; width:min(1180px,100%); height:calc(100vh - 52px); display:flex; flex-direction:column; background:#FFFFFF; border:1px solid #E2E8F0; border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(11,31,51,.32); } .mdl-modal-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid #E2E8F0; background:#F8FAFC; } .mdl-name { flex:0 1 240px; min-width:160px; background:#FFFFFF; border:1px solid #E2E8F0; border-radius:9px; color:#0B1F33; padding:8px 11px; font-size:14px; font-weight:600; } .mdl-name:focus { outline:none; border-color:#02B8BF; box-shadow:0 0 0 3px rgba(2,184,191,.16); } .mdl-f { display:flex; align-items:center; gap:6px; font-size:11.5px; color:#54657A; } .mdl-f select { background:#FFFFFF; border:1px solid #E2E8F0; border-radius:8px; color:#0B1F33; padding:6px 9px; font-size:12px; } .mdl-f-chk { gap:5px; cursor:pointer; } .mdl-f-chk input { accent-color:#02B8BF; } .mdl-spacer { flex:1 1 auto; } .mdl-modal-body { flex:1; display:flex; min-height:0; } .mdl-side { width:236px; flex-shrink:0; border-right:1px solid #E2E8F0; padding:14px; overflow-y:auto; background:#F8FAFC; } .mdl-side h4 { margin:14px 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#8597A8; } .mdl-side h4:first-child { margin-top:0; } .mdl-vars, .mdl-addblocks { display:flex; flex-wrap:wrap; gap:6px; } .mdl-chip { cursor:pointer; border:1px solid #cfe6e7; background:rgba(2,184,191,.08); color:#0E9AA1; padding:5px 9px; border-radius:20px; font-size:11.5px; font-weight:600; transition:.15s; } .mdl-chip:hover { background:rgba(2,184,191,.16); border-color:#02B8BF; color:#0B1F33; } .mdl-hint { margin:12px 0 0; font-size:11px; line-height:1.5; color:#8597A8; } .mdl-hint b { color:#54657A; font-weight:700; } .mdl-canvas { flex:1; overflow-y:auto; padding:26px; background:linear-gradient(180deg,#edf0f4 0%,#e6eaf0 100%); } /* ---------- "papel" branco (documento) — igual nos dois temas ---------- */ .docpaper { width:182mm; max-width:100%; margin:0 auto; background:#fff; color:#141414; padding:18mm 16mm; border-radius:3px; box-shadow:0 10px 34px rgba(11,31,51,.18); border:1px solid #E2E8F0; font-family:Georgia,"Times New Roman",serif; font-size:13px; line-height:1.55; } .mdl-canvas .docpaper { padding:14mm 14mm; } .docp-block { margin:0 0 11px; position:relative; } .docp-head { display:flex; gap:14px; align-items:center; border-bottom:2px solid #111; padding-bottom:8px; } .docp-head-logo { flex-shrink:0; } .docp-logo-img, .docp-chip-logo { max-height:54px; max-width:150px; vertical-align:middle; } .docp-logo-txt { font-weight:700; font-size:15px; } .docp-head-inst { font-size:12px; line-height:1.35; } .docp-title { font-weight:700; letter-spacing:.06em; text-align:center; margin:6px 0 9px; font-size:15px; } .docp-rp { font-weight:700; } .docp-sign { text-align:center; margin-top:36px; } .docp-sign-data { display:block; margin-top:4px; font-size:12px; } .docp-sign-pair { display:flex; justify-content:space-between; gap:24px; margin-top:38px; text-align:center; } .docp-foot { display:block; border-top:1px solid #999; margin-top:14px; padding-top:6px; font-size:10.5px; color:#555; text-align:center; } .docp-itens { width:100%; border-collapse:collapse; margin:6px 0; } .docp-itens th, .docp-itens td { border:1px solid #bbb; padding:5px 8px; text-align:left; font-size:12px; } .docp-itens th { background:#f2f2f2; } /* controle especial (Portaria 344/98) */ .docp-ce-head { display:flex; gap:8px; } .docp-ce-emit { flex:1; border:1px solid #111; } .docp-ce-side { width:172px; display:flex; flex-direction:column; gap:6px; } .docp-ce-boxtitle { background:#111; color:#fff; font-size:10px; font-weight:700; letter-spacing:.05em; padding:3px 7px; } .docp-ce-emit-body { display:flex; gap:8px; align-items:center; padding:7px; font-size:11.5px; line-height:1.3; } .docp-ce-emit-logo img { max-height:42px; max-width:92px; } .docp-ce-tipo { border:2px solid #111; text-align:center; padding:6px; font-size:11.5px; line-height:1.25; } .docp-ce-tipo span { font-size:9px; } .docp-ce-via { border:1px solid #111; text-align:center; font-size:10.5px; padding:5px; } .docp-ce-line { margin-top:8px; } .docp-ce-presc, .docp-ce-box { border:1px solid #111; margin-top:8px; } .docp-ce-presc-body { padding:8px; min-height:74px; } .docp-ce-box { padding:0 0 8px; font-size:11.5px; } .docp-ce-box > :not(.docp-ce-boxtitle) { padding:0 8px; } /* selo de verificação / assinatura */ .docp-veri { margin-top:18px; } .docp-selo { border:1.5px dashed #555; padding:8px 10px; font-size:11px; text-align:center; } .docp-selo b { display:block; letter-spacing:.04em; } .docp-selo span { font-size:10px; color:#555; } .docp-selo.ok { border-color:#157a3f; color:#157a3f; } .docp-selo.wait { border-color:#9a6a00; color:#7a5400; } .docp-selo-nota { font-size:10px; margin-top:6px; text-align:center; color:#7a2e2e; } .docp-pdfnote { font-size:11px; color:#666; margin-bottom:8px; } .docp-pdfimg { max-width:100%; } /* ---------- chips de variável e blocos editáveis ---------- */ .docp-var { font-style:italic; background:rgba(2,184,191,.14); color:#0a6b70; border-radius:5px; padding:0 5px; font-size:.92em; white-space:nowrap; cursor:default; } .docp-edit { outline:none; min-height:18px; } .docp-edit:focus { box-shadow:0 0 0 2px rgba(2,184,191,.35); border-radius:4px; } .mdl-eblock { border:1px dashed transparent; border-radius:6px; padding:4px 6px; transition:border-color .15s; } .mdl-eblock:hover { border-color:rgba(2,184,191,.4); } .mdl-eblock-tools { position:absolute; top:-11px; right:6px; display:none; gap:3px; z-index:2; } .mdl-eblock:hover .mdl-eblock-tools { display:flex; } .mdl-eblock-type { font-family:system-ui,sans-serif; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#fff; color:#0E9AA1; border:1px solid #02B8BF; border-radius:5px; padding:2px 6px; } .mdl-eblock-tools button { font-family:system-ui,sans-serif; width:21px; height:19px; line-height:1; cursor:pointer; background:#fff; color:#0B1F33; border:1px solid #cdd9e6; border-radius:5px; font-size:11px; padding:0; } .mdl-eblock-tools button:hover { background:rgba(2,184,191,.14); border-color:#02B8BF; } @media (max-width:760px) { .mdl-side { display:none; } .docpaper { padding:12mm 9mm; } }