/* ========================================================================= CRM UI - kit de estilo compartilhado. Ativa em qualquer pagina que tenha . Cada tela redesenhada usa estas classes; detalhes especificos vao num CSS proprio da pagina (ex.: leads.css, news.css). ========================================================================= */ body.ui2 { --ui-bg: #faf9f8; --ui-card: #ffffff; --ui-border: #eceae7; --ui-line: #f3f1ef; --ui-ink: #2a2724; --ui-ink-2: #6f6b66; --ui-ink-3: #a09b95; --ui-accent: #862029; /* vinho NEW */ --ui-accent-2: #6f1a22; --ui-tint: #fbf2f2; --ui-tint-2: rgba(134,32,41,.12); --ui-r: 14px; --ui-r-sm: 9px; --ui-shadow: 0 1px 2px rgba(28,20,18,.04), 0 6px 16px -8px rgba(28,20,18,.10); } body.ui2 main.content { background: var(--ui-bg); } body.ui2 .container-fluid { max-width: 1440px; } /* ---------- Cabecalho da pagina ---------- */ .ui2 .ui-header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 20px; } .ui2 .ui-header .ui-h-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ui2 .ui-header h1 { font-size: 1.6rem; font-weight: 680; letter-spacing: -.01em; color: var(--ui-ink); margin: 0; } .ui2 .ui-header .ui-h-sub { font-size: .82rem; color: var(--ui-ink-3); font-weight: 500; } .ui2 .ui-header .ui-h-sub b { color: var(--ui-ink-2); font-weight: 600; } .ui2 .ui-header .ui-h-actions { margin-left: auto; display: flex; gap: 8px; } /* ---------- Botoes ---------- */ .ui2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font-size: .8125rem; font-weight: 550; line-height: 1; border-radius: 8px; border: 1px solid transparent; transition: background .13s, border-color .13s, box-shadow .13s, color .13s; } .ui2 .btn svg, .ui2 .btn .feather { width: 15px; height: 15px; stroke-width: 2; } .ui2 .btn-sm { height: 32px; padding: 0 11px; font-size: .78rem; } .ui2 .btn-primary, .ui2 .btn-primary:focus { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; box-shadow: 0 1px 2px rgba(134,32,41,.25), inset 0 1px 0 rgba(255,255,255,.08); } .ui2 .btn-primary:hover { background: var(--ui-accent-2); border-color: var(--ui-accent-2); box-shadow: 0 2px 6px rgba(134,32,41,.28), inset 0 1px 0 rgba(255,255,255,.08); } .ui2 .btn-primary:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.18); } .ui2 .btn-outline-secondary, .ui2 .btn-light { color: var(--ui-ink-2); border-color: var(--ui-border); background: #fff; box-shadow: 0 1px 1px rgba(28,20,18,.03); } .ui2 .btn-outline-secondary:hover, .ui2 .btn-light:hover { color: var(--ui-ink); border-color: #d7d3ce; background: #faf9f8; } .ui2 .btn-danger { background: #d24b4b; border-color: #d24b4b; color: #fff; box-shadow: 0 1px 2px rgba(210,75,75,.25); } .ui2 .btn-danger:hover { background: #bf3d3d; border-color: #bf3d3d; } /* ---------- Cards ---------- */ .ui2 .ui-card { background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); margin-bottom: 14px; } .ui2 .ui-card-body { padding: 16px 18px; } .ui2 .ui-card-title { font-size: .95rem; font-weight: 650; color: var(--ui-ink); margin: 0 0 12px; } /* ---------- Toolbar (linha de acoes/filtros no topo de um card) ---------- */ .ui2 .ui-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ui2 .ui-toolbar .ui-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* botao "toggle" (ex.: Filtros) */ .ui2 .ui-toggle { border: 1px solid var(--ui-border); background: #fff; color: var(--ui-ink-2); border-radius: var(--ui-r-sm); height: 34px; padding: 0 13px; font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; } .ui2 .ui-toggle:hover { color: var(--ui-ink); border-color: #d9d6d2; } .ui2 .ui-toggle svg { width: 15px; height: 15px; } .ui2 .ui-toggle.is-open { color: var(--ui-accent); border-color: rgba(134,32,41,.35); background: var(--ui-tint); } /* ---------- Campos de formulario ---------- */ .ui2 .ui-field { min-width: 0; } .ui2 .ui-field label { display: block; font-size: .74rem; font-weight: 600; color: var(--ui-ink-2); margin-bottom: 5px; } .ui2 .ui-input, .ui2 .ui-field .form-control { width: 100%; border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); height: 40px; font-size: .88rem; color: var(--ui-ink); background: #fff; transition: border-color .12s, box-shadow .12s; } .ui2 .ui-input::placeholder, .ui2 .ui-field .form-control::placeholder { color: var(--ui-ink-3); } .ui2 .ui-input:focus, .ui2 .ui-field .form-control:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-tint-2); outline: none; } .ui2 textarea.ui-input { height: auto; padding: 10px 12px; line-height: 1.5; } /* select2 alinhado aos inputs */ .ui2 .select2-container { width: 100% !important; } .ui2 .select2-container--default .select2-selection--single { height: 40px; border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); display: flex; align-items: center; } .ui2 .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; font-size: .88rem; color: var(--ui-ink); padding-left: 12px; padding-right: 26px; } .ui2 .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ui-ink-3); } .ui2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; } .ui2 .select2-container--default.select2-container--focus .select2-selection--single, .ui2 .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-tint-2); } /* Painel de resultados (o que abre ao clicar) -- nunca tinha estilo próprio em lugar nenhum do site, sempre ficou no visual cru padrão do select2 (azul genérico, cantos retos, texto comprido virando barra de rolagem horizontal). Corrige de uma vez em todo select2 do CRM. */ .ui2 .select2-dropdown { border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); box-shadow: 0 10px 28px rgba(0,0,0,.16); overflow: hidden; /* Largura própria (min/max-width) tirada de propósito -- forçar um tamanho diferente do campo fechado desalinhava o painel (select2 posiciona a esquerda com base na largura ORIGINAL, então "crescer" por CSS jogava tudo torto). Painel do mesmo tamanho do campo fechado sempre alinha certo; nome comprido só quebra linha (ver .select2-results__option abaixo, já com white-space: normal). */ } .ui2 .select2-search--dropdown { padding: 8px; } .ui2 .select2-search--dropdown .select2-search__field { border: 1px solid var(--ui-border); border-radius: 7px; padding: 6px 10px; font-size: .85rem; outline: none; } .ui2 .select2-search--dropdown .select2-search__field:focus { border-color: var(--ui-accent); } .ui2 .select2-results__option { padding: 8px 12px; font-size: .86rem; color: var(--ui-ink); white-space: normal; word-break: break-word; } .ui2 .select2-results__option--highlighted[aria-selected] { background: var(--ui-accent) !important; color: #fff !important; } .ui2 .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background: var(--ui-tint); color: var(--ui-ink); } .ui2 .select2-results__group { font-weight: 700; font-size: .78rem; color: var(--ui-ink-3); padding: 8px 12px 4px; } /* ---------- Grade de estatisticas (stat cards) ---------- */ .ui2 .ui-statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 7px; } .ui2 .ui-stat { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 9px; background: #fbfaf9; border: 1px solid var(--ui-line); transition: background .12s, border-color .12s, box-shadow .12s; min-width: 0; } .ui2 a.ui-stat, .ui2 .ui-stat.is-clickable { cursor: pointer; } .ui2 .ui-stat:hover { background: #fff; border-color: var(--ui-border); } .ui2 .ui-stat .ui-stat-top { display: flex; align-items: center; gap: 6px; min-width: 0; } .ui2 .ui-stat .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .ui2 .ui-stat .ui-stat-label { font-size: .76rem; font-weight: 550; color: var(--ui-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui2 .ui-stat .ui-stat-value { font-size: 1.02rem; font-weight: 700; color: var(--ui-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ui2 .ui-stat.is-active { background: var(--ui-tint); border-color: var(--ui-accent); box-shadow: inset 0 0 0 1px var(--ui-accent); } .ui2 .ui-stat.is-active .ui-stat-label, .ui2 .ui-stat.is-active .ui-stat-value { color: var(--ui-accent); } /* ---------- Tabela ---------- */ .ui2 .ui-table-wrap { overflow-x: auto; } .ui2 table.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; } .ui2 table.ui-table thead th { background: #fdfcfb; border-bottom: 1px solid var(--ui-border); padding: 13px 16px; font-size: .72rem; font-weight: 600; color: var(--ui-ink-3); text-align: left; white-space: nowrap; } .ui2 table.ui-table tbody td { padding: 15px 16px; border-bottom: 1px solid var(--ui-line); font-size: .875rem; color: var(--ui-ink); vertical-align: middle; } .ui2 table.ui-table tbody td.col-muted { color: var(--ui-ink-3); font-variant-numeric: tabular-nums; } .ui2 table.ui-table tbody tr { transition: background .12s; } .ui2 table.ui-table tbody tr:hover { background: #fbf8f7; } .ui2 table.ui-table tbody tr:last-child td { border-bottom: 0; } /* pill generica de status */ .ui2 .ui-pill { display: inline-block; padding: 4px 11px 3px; border-radius: 999px; font-size: .74rem; font-weight: 650; white-space: nowrap; } /* acoes em icone (linha de tabela) */ .ui2 .ui-row-actions { display: inline-flex; gap: 4px; } .ui2 .ui-row-actions a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid transparent; color: var(--ui-ink-3); background: transparent; transition: all .12s; text-decoration: none; } .ui2 .ui-row-actions a:hover { border-color: var(--ui-border); color: var(--ui-ink); background: #fff; } .ui2 .ui-row-actions a i { font-size: .82rem; } /* estado vazio */ .ui2 .ui-empty { padding: 44px 16px; text-align: center; color: var(--ui-ink-3); font-size: .9rem; } /* ---------- Paginacao ---------- */ .ui2 .ui-pagination { display: flex; align-items: center; gap: 18px; padding: 13px 18px; border-top: 1px solid var(--ui-line); font-size: .85rem; color: var(--ui-ink-2); flex-wrap: wrap; } .ui2 .ui-pagination .ui-pg-count b { color: var(--ui-ink); font-weight: 700; } .ui2 .ui-pagination .ui-pg-size { display: inline-flex; align-items: center; gap: 8px; } .ui2 .ui-pagination .ui-pg-size label { margin: 0; font-size: .8rem; font-weight: 600; color: var(--ui-ink-3); } .ui2 .ui-pagination select { border: 1px solid var(--ui-border); border-radius: 7px; height: 32px; padding: 0 6px; font-size: .85rem; color: var(--ui-ink); background: #fff; } .ui2 .ui-pagination .ui-pg-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; } .ui2 .ui-pagination .ui-pg-nav a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-ink); background: #fff; } .ui2 .ui-pagination .ui-pg-nav a:hover { border-color: #d9d6d2; background: #f6f4f2; } /* ---------- Banner (aviso destacado) ---------- */ .ui2 .ui-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--ui-tint); border: 1px solid rgba(134,32,41,.22); color: var(--ui-accent); border-radius: var(--ui-r-sm); padding: 9px 14px; font-size: .85rem; margin-bottom: 14px; } .ui2 .ui-banner svg { width: 15px; height: 15px; vertical-align: -2px; } .ui2 .ui-banner a { margin-left: auto; color: var(--ui-accent); font-weight: 700; text-decoration: underline; } /* ---------- Modais ---------- */ .ui2 .modal-content { border: 0; border-radius: var(--ui-r); overflow: hidden; } .ui2 .modal-header { border-bottom: 1px solid var(--ui-line); padding: 16px 20px; } .ui2 .modal-title { font-size: 1rem; font-weight: 650; color: var(--ui-ink); } .ui2 .modal-body { padding: 18px 20px; } .ui2 .modal-footer { border-top: 1px solid var(--ui-line); padding: 14px 20px; } /* ---------- Modais de tarefa (criar / editar) — telas ui2 ---------- */ .ui2 #modaCreateLeadTask .modal-dialog, .ui2 #ld_modalEditTask .modal-dialog { max-width: 560px; } .ui2 #modaCreateLeadTask .modal-body .ui-field + .ui-field, .ui2 #ld_modalEditTask .modal-body .ui-field + .ui-field { margin-top: 14px; } .ui2 #modaCreateLeadTask textarea.form-control, .ui2 #ld_modalEditTask textarea.form-control { height: auto; min-height: 150px; padding: 10px 12px; line-height: 1.5; resize: vertical; } @media (max-width: 575.98px) { .ui2 #modaCreateLeadTask .modal-dialog, .ui2 #ld_modalEditTask .modal-dialog { max-width: calc(100vw - 20px); margin: 10px auto; } } /* ---------- Modal "Mensagem para o lead" (WhatsApp) — telas ui2 ---------- */ .ui2 #modalWhatsapp .modal-dialog { max-width: 540px; } .ui2 #modalWhatsapp .lp-modal-field { margin-bottom: 14px; } .ui2 #modalWhatsapp .lp-modal-field:last-child { margin-bottom: 0; } .ui2 #modalWhatsapp .lp-modal-field > label { display: block; font-size: .74rem; font-weight: 600; color: var(--ui-ink-2); margin-bottom: 6px; } .ui2 #modalWhatsapp .lp-modal-block-title { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-ink-3); margin: 0 0 12px; } .ui2 #modalWhatsapp .wa-ico { color: #1fa855; font-size: 1.05rem; } /* bloco "Enviar no WhatsApp" — cartão verde suave */ .ui2 #modalWhatsapp .wa-send { background: #f1faf4; border: 1px solid #d3e9dc; border-radius: var(--ui-r-sm); padding: 15px 15px 16px; margin-bottom: 18px; } .ui2 #modalWhatsapp .wa-send .lp-modal-block-title { color: #1c7a44; } /* bloco "Atualizar o lead" */ .ui2 #modalWhatsapp .wa-update { padding: 0 1px; } /* linha dos botões Número inválido / Abrir WhatsApp */ .ui2 #modalWhatsapp .lp-modal-actions-row { display: flex; gap: 10px; margin-top: 14px; } .ui2 #modalWhatsapp .lp-modal-actions-row .btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: .84rem; font-weight: 600; border-radius: var(--ui-r-sm); } .ui2 #modalWhatsapp .wa-btn-invalid { flex: 0 0 auto; padding: 0 16px; background: #fff; } .ui2 #modalWhatsapp .wa-btn-open { flex: 1 1 auto; background: #1fa855; border-color: #1fa855; color: #fff; } .ui2 #modalWhatsapp .wa-btn-open:hover, .ui2 #modalWhatsapp .wa-btn-open:focus { background: #178f47; border-color: #178f47; color: #fff; } .ui2 #modalWhatsapp .wa-btn-open i { font-size: 1.05rem; } @media (max-width: 519.98px) { .ui2 #modalWhatsapp .lp-modal-actions-row { flex-direction: column; } .ui2 #modalWhatsapp .wa-btn-invalid { width: 100%; } } /* ---------- Responsivo ---------- */ /* AdminKit deixa a .content com width:100vw; abaixo do breakpoint do menu isso soma com a sidebar (off-canvas mas ainda reservando 260px no flex) e estoura a página pro lado. Corta o excedente e deixa o flex encolher. */ @media (max-width: 991.98px) { body.ui2 { overflow-x: hidden; } .ui2 .main { min-width: 0; } .ui2 main.content { width: auto; max-width: 100%; } } @media (max-width: 767.98px) { .ui2 .ui-card-body { padding: 14px; } .ui2 .ui-header { margin-bottom: 16px; } .ui2 .ui-header h1 { font-size: 1.4rem; } .ui2 .ui-header .ui-h-actions { margin-left: 0; width: 100%; } .ui2 .ui-header .ui-h-actions .btn { flex: 1; justify-content: center; } } @media (max-width: 575.98px) { .ui2 .ui-statgrid { grid-template-columns: repeat(3, 1fr); } .ui2 .ui-header .ui-h-actions .btn span.btn-txt { display: none; } .ui2 .ui-header .ui-h-actions .btn { flex: 0 0 44px; padding: 0; } } /* ========================================================================= Navbar - itens compartilhados (relogio + inbox de tarefas). Sem escopo .ui2 para manter a barra consistente em todas as telas. ========================================================================= */ .navbar-align .nav-clock { display: inline-flex; align-items: center; height: 38px; margin-right: 14px; font-size: .8rem; font-weight: 500; color: var(--ui-ink-3, #a09b95); font-variant-numeric: tabular-nums; white-space: nowrap; } .navbar-align .nav-inbox { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--ui-border, #eceae7); background: #fff; color: var(--ui-ink-2, #6f6b66); text-decoration: none; transition: border-color .13s, color .13s, background .13s; } .navbar-align .nav-inbox:hover { color: var(--ui-accent, #862029); border-color: rgba(134, 32, 41, .35); background: var(--ui-tint, #fbf2f2); } .navbar-align .nav-inbox svg, .navbar-align .nav-inbox .feather { width: 18px; height: 18px; stroke-width: 2; } .navbar-align .nav-inbox-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--ui-accent, #862029); border: 2px solid #fff; color: #fff; font-size: .64rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* ========================================================================= Toast de aviso — notify() em view/app/appJs.php. Sem escopo: vale em qualquer tela (leads-page, ui2, login...). ========================================================================= */ #alert-popup { position: fixed; right: 20px; bottom: 20px; z-index: 20000; min-width: 260px; max-width: min(380px, calc(100vw - 40px)); margin: 0; padding: 13px 40px 13px 16px; border: 1px solid transparent; border-radius: 12px; box-shadow: 0 10px 34px -8px rgba(28, 20, 18, .3); font-size: .88rem; line-height: 1.45; animation: alert-popup-in .22s ease-out; } #alert-popup.alert-success { background: #eaf5ec; border-color: #bfe2c6; color: #1f6b34; } #alert-popup.alert-danger { background: #fdecec; border-color: #f3c6c6; color: #a3282b; } #alert-popup .alert-message { padding: 0; } #alert-popup .btn-close { position: absolute; top: 10px; right: 10px; padding: 6px; opacity: .5; } #alert-popup .btn-close:hover { opacity: .9; } @keyframes alert-popup-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 575.98px) { #alert-popup { left: 16px; right: 16px; bottom: 16px; max-width: none; } } /* ========================================================================= Histórico do lead — formatCardsHistory() em view/app/appJs.php. Sem escopo: usado no modal da lista de Leads e na aba Histórico do lead. ========================================================================= */ #populate-history { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 2px; } #populate-history .hist-empty { padding: 30px 8px; text-align: center; color: #a09b95; font-size: .9rem; } .hist-entry { display: flex; gap: 11px; padding: 12px 14px; border: 1px solid #edeae8; border-left: 3px solid #e0d5d0; border-radius: 11px; background: #ffffff; transition: border-color .12s, box-shadow .12s, transform .12s; } /* zebra: uma entrada mais clara que a outra, fácil de separar */ .hist-entry:nth-child(even) { background: #f8f4f3; border-color: #e8e2df; border-left-color: #d3c4be; } .hist-entry:hover { border-color: #d8c7c2; box-shadow: 0 3px 12px -6px rgba(28, 20, 18, .18); } .hist-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(134, 32, 41, .14); background: #ece9e6; } .hist-main { flex: 1 1 auto; min-width: 0; } .hist-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hist-who { font-weight: 660; font-size: .86rem; color: #2a2724; } .hist-when { font-size: .72rem; color: #8f8a84; font-variant-numeric: tabular-nums; background: rgba(28, 20, 18, .045); padding: 1px 7px; border-radius: 999px; } .hist-entry:nth-child(even) .hist-when { background: rgba(28, 20, 18, .06); } .hist-del { margin-left: auto; width: 22px; height: 22px; padding: 0; border: 1px solid #eceae7; border-radius: 6px; background: #fff; color: #a09b95; font-size: 1rem; line-height: 1; cursor: pointer; transition: all .12s; } .hist-del:hover { border-color: #862029; color: #862029; background: #fbf2f2; } .hist-body { margin-top: 6px; font-size: .84rem; line-height: 1.55; color: #605b55; overflow-wrap: anywhere; } .hist-body b, .hist-body strong { color: #2a2724; font-weight: 650; } .hist-body p { margin: 0 0 .4em; } .hist-body p:last-child { margin-bottom: 0; } .hist-body ul, .hist-body ol { margin: .3em 0; padding-left: 1.3em; } .hist-body li { margin: .12em 0; } .hist-body h1, .hist-body h2, .hist-body h3, .hist-body h4 { margin: .5em 0 .25em; color: #2a2724; font-weight: 680; line-height: 1.3; } .hist-body h1 { font-size: 1.02rem; } .hist-body h2 { font-size: .96rem; } .hist-body h3, .hist-body h4 { font-size: .9rem; } .hist-body blockquote { margin: .4em 0; padding: 2px 0 2px 10px; border-left: 2px solid #eceae7; color: #8a857f; } /* ========================================================================= Editor de texto (trumbowyg) — aparência no padrão do CRM. Sem escopo: vale onde tiver .wysiwyg (comentário do lead, tarefas...). ========================================================================= */ .trumbowyg-box, .trumbowyg-editor { border-color: #eceae7; border-radius: 9px; min-height: 220px; } .trumbowyg-box { margin: 0; background: #fff; } .trumbowyg-box.trumbowyg-editor-visible .trumbowyg-editor { display: block; } .trumbowyg-editor { padding: 12px 14px; font-size: .9rem; line-height: 1.6; color: #2a2724; /* Achado do Renato (tela Criar Tarefa, mas vale pra qualquer .wysiwyg): caixa pequena sem jeito de aumentar. "resize" funciona mesmo sendo contenteditable (não precisa ser