Redator de SD - preparado para deploy

app/public/styles.css

@@ -0,0 +1,168 @@
+/* Tema: claro é o padrão; o escuro vale quando o usuário escolhe (data-theme="dark")
+   ou quando o sistema está escuro e o usuário não forçou o claro (data-theme="light").
+   O botão 🌗 do topo alterna automático → claro → escuro (persistido em localStorage). */
+:root{
+  color-scheme:light;
+  --bg:#F2F6F5; --surface:#FFFFFF; --ink:#1C2A2D; --muted:#5C6B6E;
+  --line:#D7E1DF; --accent:#0B6B70; --accent-soft:#E1EFEF; --accent-ink:#FFFFFF;
+  --ok:#1E7B47; --ok-bg:#E3F2E9; --warn:#A8730B; --warn-bg:#F8EFDB;
+  --err:#B3362B; --err-bg:#F9E4E1; --pend:#5E6E78; --pend-bg:#E8EDF0;
+  --shadow:0 1px 3px rgba(28,42,45,.08);
+  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
+  --mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
+}
+:root[data-theme="dark"]{
+  color-scheme:dark;
+  --bg:#0E191B; --surface:#152325; --ink:#E3EDEB; --muted:#94A6A4;
+  --line:#25393C; --accent:#56C4CA; --accent-soft:#123B3E; --accent-ink:#08282A;
+  --ok:#54C88A; --ok-bg:#123626; --warn:#E2AC42; --warn-bg:#3A2D0F;
+  --err:#E3705F; --err-bg:#41201C; --pend:#9AA8B2; --pend-bg:#22313A;
+  --shadow:0 1px 3px rgba(0,0,0,.35);
+}
+@media (prefers-color-scheme: dark){
+  :root:not([data-theme="light"]){
+    color-scheme:dark;
+    --bg:#0E191B; --surface:#152325; --ink:#E3EDEB; --muted:#94A6A4;
+    --line:#25393C; --accent:#56C4CA; --accent-soft:#123B3E; --accent-ink:#08282A;
+    --ok:#54C88A; --ok-bg:#123626; --warn:#E2AC42; --warn-bg:#3A2D0F;
+    --err:#E3705F; --err-bg:#41201C; --pend:#9AA8B2; --pend-bg:#22313A;
+    --shadow:0 1px 3px rgba(0,0,0,.35);
+  }
+}
+*{box-sizing:border-box}
+[hidden]{display:none !important}
+html,body{height:100%}
+body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; display:flex; flex-direction:column;}
+button{font-family:var(--sans); cursor:pointer;}
+button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
+textarea, select, input[type=date], input[type=text]{font-family:var(--sans); font-size:14px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px 10px;}
+.sel-modelo{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);}
+.sel-modelo select{font-family:var(--mono); font-size:12.5px; padding:7px 8px;}
+textarea{width:100%; resize:vertical;}
+
+.appbar{background:var(--surface); border-bottom:1px solid var(--line); padding:10px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
+.appbar h1{font-size:16px; margin:0;}
+.appbar .sub{color:var(--muted); font-size:12px;}
+.appbar .spacer{flex:1;}
+.chip-status{font-size:12px; color:var(--muted); font-family:var(--mono);}
+
+.aviso{background:var(--warn-bg); color:var(--warn); padding:10px 20px; font-size:14px;}
+.aviso code{font-family:var(--mono);}
+
+.btn{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:6px; padding:8px 16px; font-size:14px; font-weight:600; text-decoration:none; display:inline-block;}
+.btn:hover{border-color:var(--accent);}
+.btn-sm{padding:4px 12px; font-size:13px;}
+.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
+.btn-primary:hover{filter:brightness(1.08);}
+.btn:disabled{opacity:.45; cursor:not-allowed;}
+.btnrow{display:flex; gap:10px; flex-wrap:wrap;}
+
+.panel{background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:16px 20px;}
+.panel h2{font-size:14px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
+.hint{font-size:13px; color:var(--muted); margin:0 0 10px;}
+
+/* --- Login --- */
+#telaLogin{flex:1; display:flex; align-items:center; justify-content:center; padding:20px;}
+.login-box{width:100%; max-width:340px; display:flex; flex-direction:column; gap:12px;}
+.login-box label{font-size:13px; color:var(--muted);}
+.login-box input{width:100%; margin-top:4px;}
+.login-erro{background:var(--err-bg); color:var(--err); border-radius:6px; padding:8px 12px; font-size:13px;}
+
+/* --- Home --- */
+#telaHome, #telaBase{max-width:860px; width:100%; margin:0 auto; padding:20px; display:flex; flex-direction:column; gap:16px;}
+.nova-demanda textarea{margin-bottom:10px;}
+.lista-sds{display:flex; flex-direction:column; gap:6px;}
+.sd-item{display:flex; gap:12px; align-items:baseline; padding:8px 10px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--ink);}
+.sd-item:hover{border-color:var(--accent); background:var(--accent-soft);}
+.sd-item .num{font-family:var(--mono); font-size:12px; color:var(--accent); white-space:nowrap;}
+.sd-item .tit{flex:1; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
+.sd-item .st{font-size:11px; border-radius:10px; padding:1px 8px;}
+.sd-item .btn-excluir{border:1px solid var(--line); background:var(--surface); color:var(--muted);
+  border-radius:6px; font-size:12px; line-height:1; padding:4px 8px; align-self:center; flex:0 0 auto;}
+.sd-item .btn-excluir:hover{border-color:var(--err); color:var(--err); background:var(--err-bg);}
+.st-rascunho{background:var(--warn-bg); color:var(--warn);}
+.st-enviada{background:var(--ok-bg); color:var(--ok);}
+.saldos{display:flex; gap:10px; flex-wrap:wrap;}
+.saldo-chip{border:1px solid var(--line); border-radius:8px; padding:8px 14px; min-width:130px;}
+.saldo-chip .label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
+.saldo-chip .value{font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;}
+.saldo-chip .sub{font-size:11px; color:var(--muted);}
+
+/* --- Conversa --- */
+.conversa{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:0; min-height:0;}
+@media (max-width: 980px){ .conversa{grid-template-columns:1fr;} .coluna-painel{border-left:none; border-top:1px solid var(--line);} }
+.coluna-chat{display:flex; flex-direction:column; min-height:0; padding:16px 20px; gap:10px;}
+.mensagens{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:4px; min-height:200px;}
+.msg{max-width:92%; padding:10px 14px; border-radius:10px; font-size:14px;}
+.msg.user{align-self:flex-end; background:var(--accent-soft); border:1px solid var(--line); white-space:pre-wrap;}
+.msg.assistant{align-self:flex-start; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);}
+.msg.assistant p{margin:0 0 8px;} .msg.assistant p:last-child{margin-bottom:0;}
+.msg.assistant ul,.msg.assistant ol{margin:4px 0 8px; padding-left:20px;}
+.msg.assistant li{margin-bottom:2px;}
+.msg.assistant h1,.msg.assistant h2,.msg.assistant h3{font-size:14.5px; margin:10px 0 4px;}
+.msg.assistant code{font-family:var(--mono); font-size:12.5px; background:var(--bg); padding:0 4px; border-radius:4px;}
+.msg.assistant strong{color:var(--accent);}
+.msg .digitando{display:inline-block; animation:pulse 1s infinite;}
+.msg .pensando{display:inline-block; color:var(--muted); font-style:italic; font-size:13px; animation:pulse 1.4s infinite;}
+@keyframes pulse{50%{opacity:.3}}
+@media (prefers-reduced-motion: reduce){ .msg .digitando{animation:none;} }
+.opcoes{display:flex; flex-direction:column; gap:6px;}
+.opcoes button{text-align:left; background:var(--surface); border:1px solid var(--accent); color:var(--ink); border-radius:8px; padding:8px 14px; font-size:13.5px;}
+.opcoes button:hover{background:var(--accent-soft);}
+.form-msg{display:flex; gap:8px; align-items:flex-end;}
+.form-msg textarea{flex:1;}
+.uso{font-size:11.5px; color:var(--muted); font-family:var(--mono);}
+
+/* --- Painel --- */
+.coluna-painel{border-left:1px solid var(--line); background:var(--surface); overflow-y:auto; padding:16px 18px;}
+.painel-vazio{color:var(--muted); font-size:13.5px; padding:30px 10px; text-align:center;}
+.pbloco{margin-bottom:18px;}
+.pbloco h3{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 8px;}
+.resumo-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px;}
+.rchip{border:1px solid var(--line); border-radius:8px; padding:6px 12px;}
+.rchip .label{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
+.rchip .value{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;}
+.ptitulo{font-size:14.5px; font-weight:700; margin-bottom:8px;}
+.twrap{overflow-x:auto;}
+table.quadro{border-collapse:collapse; width:100%; font-size:12px; font-variant-numeric:tabular-nums;}
+table.quadro th, table.quadro td{border:1px solid var(--line); padding:4px 7px; text-align:left; vertical-align:top;}
+table.quadro th{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; background:var(--accent-soft);}
+table.quadro td.num{text-align:right;}
+table.quadro tr.total td{font-weight:700; border-top:2px solid var(--accent);}
+table.quadro tr.subtotal td{font-weight:600; background:var(--accent-soft);}
+
+.check-item{display:grid; grid-template-columns:18px 56px 1fr; gap:6px; padding:4px 0; border-top:1px solid var(--line); font-size:12.5px; align-items:start;}
+.check-item:first-child{border-top:none;}
+.check-item .icon{font-weight:700; text-align:center;}
+.check-item .id{font-family:var(--mono); font-size:10.5px; color:var(--muted); padding-top:2px;}
+.check-item .obs{display:block; color:var(--muted); font-size:11.5px;}
+.st-ok .icon{color:var(--ok);} .st-alerta .icon{color:var(--warn);}
+.st-falha .icon{color:var(--err);} .st-pendente .icon{color:var(--pend);}
+
+.art-entr{margin-bottom:10px;}
+.art-entr h4{font-size:12px; margin:0 0 4px;}
+.art-row{display:flex; gap:8px; align-items:flex-start; padding:5px 8px; border-radius:6px; font-size:12.5px; margin-bottom:3px;}
+.art-row.confirmed{background:var(--ok-bg);}
+.art-row.unconfirmed{background:var(--warn-bg);}
+.art-row input[type=checkbox]{margin-top:3px; accent-color:var(--accent); width:15px; height:15px; flex:0 0 auto;}
+.art-row .art-main{flex:1; min-width:0;}
+.art-row label{cursor:pointer; display:block;}
+.art-row input[type=date]{font-family:var(--mono); font-size:11.5px; margin-top:3px; padding:2px 6px;}
+.art-row .flag{font-size:11px; margin-top:2px;}
+.flag.bad{color:var(--err);} .flag.miss{color:var(--warn);}
+
+/* --- Alimentar base --- */
+.cap-card{border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px;
+  display:flex; gap:10px; align-items:flex-start;}
+.cap-card input[type=checkbox]{margin-top:4px; accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto;}
+.cap-card .cap-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
+.cap-card input[type=text]{width:100%; font-weight:600;}
+.cap-card textarea{font-size:13px;}
+.cap-card .cap-meta{display:flex; gap:8px; flex-wrap:wrap;}
+.cap-card .cap-meta input{flex:1; min-width:120px; font-size:12.5px; font-family:var(--mono);}
+.cap-card.excluida{opacity:.45;}
+
+.pend-list{margin:0; padding-left:18px; font-size:12.5px; display:flex; flex-direction:column; gap:5px;}
+.lock-msg{font-size:12.5px; border-radius:6px; padding:8px 11px; margin-bottom:10px;}
+.lock-msg.locked{background:var(--warn-bg); color:var(--warn);}
+.lock-msg.open{background:var(--ok-bg); color:var(--ok);}