/* ============================================================ Sistema Rodo Wall — Módulo Checklist — Shell / Base FIEL ao design do protótipo original do checklist: fontes Rajdhani/Inter, cards brancos com faixa de destaque, menu com borda esquerda no item ativo, accent azul. Tokens locais do módulo (--cl*), com claro e escuro seguindo o [data-theme] da plataforma. ============================================================ */ /* Tokens do módulo — tema ESCURO (padrão da plataforma) */ /* ------------------------------------------------------------------ Tokens do módulo Checklist. IMPORTANTE: definidos em :root (não só em .cl-app) porque os modais são anexados ao , FORA do .cl-app. Se ficassem só no .cl-app, dentro do modal var(--clcard)/var(--cltx) ficariam indefinidos — fundo transparente e texto sem cor (ilegível no tema claro). ------------------------------------------------------------------ */ :root, .cl-app{ --clbg:#080b12; --clbg2:#0d1117; --clcard:#111620; --clcard-h:#161d2e; --claccent:#3b82f6; --claccent-dim:rgba(59,130,246,.12); --claccent-glow:rgba(59,130,246,.20); --clborder:rgba(255,255,255,.07); --clborder-b:rgba(255,255,255,.14); --cltx:#e8ecf4; --cltx2:#a9b6cc; --cltx3:#7e8ca6; --clgreen:#22c55e; --clgreen-dim:rgba(34,197,94,.12); --clred:#ef4444; --clred-dim:rgba(239,68,68,.12); --clorange:#f59e0b; --clorange-dim:rgba(245,158,11,.12); --clradius:12px; --clfd:'Rajdhani',sans-serif; --clfb:'Inter',sans-serif; } /* Tokens do módulo — tema CLARO (o visual dos prints) */ [data-theme="light"]:root, [data-theme="light"] .cl-app{ --clbg:#f0f3f9; --clbg2:#ffffff; --clcard:#ffffff; --clcard-h:#f5f7fc; --claccent:#2563eb; --claccent-dim:rgba(37,99,235,.10); --claccent-glow:rgba(37,99,235,.14); --clborder:#e3e9f2; --clborder-b:#c9d4e6; --cltx:#0d1b3e; --cltx2:#3f5175; --cltx3:#5f7093; --clgreen:#16a34a; --clgreen-dim:rgba(22,163,74,.10); --clred:#dc2626; --clred-dim:rgba(220,38,38,.09); --clorange:#d97706; --clorange-dim:rgba(217,119,6,.10); } .cl-app{ display:none; min-height:100vh; background:var(--clbg); color:var(--cltx); font-family:var(--clfb); } .cl-app[style*="flex"]{ display:flex !important; } /* ---------- Sidebar (branca no claro, como no protótipo) ---------- */ .cl-side{ width:240px; flex-shrink:0; display:flex; flex-direction:column; padding:18px 0 14px; background:var(--clbg2); border-right:1px solid var(--clborder); } .cl-brand{ display:flex; align-items:center; gap:11px; padding:4px 18px 16px; margin-bottom:8px; border-bottom:1px solid var(--clborder); font-family:var(--clfd); font-weight:700; letter-spacing:1px; font-size:17px; color:var(--cltx); } .cl-brand .cl-brand-mark{ width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:#0d1b3e; box-shadow:0 4px 12px rgba(13,27,62,.35); } .cl-brand small{ display:block; font-family:var(--clfb); font-weight:600; font-size:9px; letter-spacing:2.5px; color:var(--cltx3); margin-top:1px; } .cl-nav{ display:flex; flex-direction:column; } .cl-nav-item{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 18px; background:transparent; border:none; border-left:3px solid transparent; color:var(--cltx2); font-family:var(--clfb); font-weight:500; font-size:13.5px; cursor:pointer; transition:all .22s cubic-bezier(.4,0,.2,1); white-space:nowrap; } .cl-nav-item .cl-ic{ opacity:.6; transition:opacity .22s, transform .22s cubic-bezier(.34,1.56,.64,1); } .cl-nav-item:hover{ background:var(--clcard-h); border-left-color:var(--clborder-b); color:var(--cltx); } .cl-nav-item:hover .cl-ic{ opacity:1; transform:scale(1.08); } .cl-nav-item.active{ background:var(--claccent-dim); border-left-color:var(--claccent); color:var(--cltx); font-weight:600; } .cl-nav-item.active .cl-ic{ opacity:1; color:var(--claccent); } /* ---------- Área principal ---------- */ .cl-main{ flex:1; display:flex; flex-direction:column; min-width:0; } .cl-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 26px; background:var(--clbg2); border-bottom:1px solid var(--clborder); } .cl-top-title{ display:flex; flex-direction:column; } .cl-top-title span{ font-family:var(--clfd); font-weight:700; font-size:22px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cltx); } .cl-top-title small{ color:var(--cltx3); font-size:12px; } .cl-top-right{ display:flex; align-items:center; gap:12px; } .cl-modbtn{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; background:var(--clcard); border:1px solid var(--clborder-b); color:var(--cltx); font-weight:600; font-size:12px; cursor:pointer; transition:all .22s; } .cl-modbtn:hover{ border-color:var(--claccent); color:var(--claccent); } .cl-top-user{ font-size:13px; color:var(--cltx2); font-weight:600; } .cl-view{ padding:24px 26px; max-width:1180px; width:100%; } /* ---------- Cards (brancos, com sombra suave e hover) ---------- */ .cl-card{ background:var(--clcard); border:1px solid var(--clborder); border-radius:var(--clradius); padding:20px; margin-bottom:18px; transition:all .25s cubic-bezier(.4,0,.2,1); } .cl-card-titulo{ display:flex; align-items:center; gap:9px; font-family:var(--clfd); font-weight:700; font-size:16px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:16px; color:var(--cltx); } .cl-card-titulo .cl-ic{ color:var(--claccent); } /* ---------- Botões ---------- */ .cl-btn{ display:inline-flex; align-items:center; gap:7px; justify-content:center; padding:9px 16px; border-radius:9px; border:1px solid var(--clborder-b); background:var(--clcard); color:var(--cltx); font-family:var(--clfb); font-weight:600; font-size:13px; cursor:pointer; transition:all .2s; } .cl-btn:hover{ border-color:var(--claccent); color:var(--claccent); transform:translateY(-1px); } .cl-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; } .cl-btn-primary{ background:var(--claccent); border-color:var(--claccent); color:#fff; box-shadow:0 4px 14px var(--claccent-glow); } .cl-btn-primary:hover{ color:#fff; filter:brightness(1.08); } .cl-btn-sec{ background:var(--claccent-dim); border-color:transparent; color:var(--claccent); } .cl-btn-sec:hover{ border-color:var(--claccent); } .cl-btn-ghost{ background:transparent; border-color:var(--clborder-b); color:var(--cltx2); } .cl-btn-danger{ background:var(--clred-dim); border-color:transparent; color:var(--clred); } .cl-btn-danger:hover{ border-color:var(--clred); color:var(--clred); } /* ---------- Campos ---------- */ .cl-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .cl-field label{ font-family:var(--clfb); font-weight:600; font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--cltx3); } .cl-input, .cl-field input, .cl-field select{ padding:11px 13px; border-radius:9px; border:1px solid var(--clborder-b); background:var(--clcard-h); color:var(--cltx); font-family:var(--clfb); font-size:14px; transition:all .2s; } .cl-field input:focus, .cl-field select:focus, .cl-input:focus{ outline:none; border-color:var(--claccent); box-shadow:0 0 0 3px var(--claccent-glow); } .cl-field input:disabled{ opacity:.65; } .cl-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cl-acoes-fim{ display:flex; justify-content:flex-end; gap:12px; margin-top:16px; } /* ---------- Chips de carreta ---------- */ .cl-carreta-row{ display:flex; gap:12px; } .cl-carreta-row select{ flex:1; } .cl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .cl-chips-vazio{ color:var(--cltx3); font-size:12px; } .cl-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--claccent-dim); border:1px solid transparent; color:var(--claccent); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; } .cl-chip button{ background:none; border:none; color:var(--claccent); cursor:pointer; font-size:15px; line-height:1; } /* ---------- Estados vazios / loading ---------- */ .cl-empty{ text-align:center; padding:44px 16px; } .cl-empty-titulo{ font-family:var(--clfd); font-weight:700; font-size:18px; letter-spacing:.5px; margin-bottom:6px; } .cl-empty-desc{ color:var(--cltx2); font-size:13px; } .cl-empty-inline{ text-align:center; color:var(--cltx3); padding:26px; font-size:13px; } .cl-loading{ text-align:center; color:var(--cltx3); padding:26px; } /* ---------- Pílulas de status (como no protótipo: dot + texto) ---------- */ .cl-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; } .cl-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; } .cl-pill-green{ background:var(--clgreen-dim); color:var(--clgreen); } .cl-pill-orange{ background:var(--clorange-dim); color:var(--clorange); } .cl-pill-red{ background:var(--clred-dim); color:var(--clred); } .cl-placa{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; background:var(--claccent-dim); color:var(--claccent); padding:3px 10px; border-radius:7px; letter-spacing:1px; } .cl-ic{ display:inline-block; vertical-align:middle; } /* ---------- Responsivo ---------- */ @media (max-width: 860px){ .cl-app{ flex-direction:column; } .cl-side{ width:100%; flex-direction:row; align-items:center; overflow-x:auto; padding:10px 12px; border-right:none; border-bottom:1px solid var(--clborder); } .cl-brand{ border:none; margin:0; padding:0 12px 0 0; } .cl-brand small{ display:none; } .cl-nav{ flex-direction:row; } .cl-nav-item{ border-left:none; border-bottom:3px solid transparent; padding:9px 13px; } .cl-nav-item.active{ border-left:none; border-bottom-color:var(--claccent); } .cl-grid2{ grid-template-columns:1fr; } .cl-view{ padding:16px; } } /* ---------- Mobile: inputs a 16px evitam o zoom automático do iOS ---------- */ @media (max-width: 860px){ .cl-app input, .cl-app select, .cl-app textarea, .cl-input, .cl-textarea{ font-size:16px !important; } /* Faixa Frota ao Vivo e tabelas: rolagem confortável no toque */ .cl-live{ -webkit-overflow-scrolling:touch; } .cl-table-wrap{ -webkit-overflow-scrolling:touch; } /* Botões com área de toque adequada */ .cl-btn{ min-height:40px; } .cl-ans{ min-height:46px; } /* Modais ocupam quase toda a tela */ .cl-modal{ max-width:94vw; padding:16px; } .cl-acoes-fim{ flex-wrap:wrap; } } /* Separador de área (setor) no menu do checklist */ .cl-nav-sec{ padding:14px 16px 6px; margin-top:4px; font-family:var(--clfd,'Rajdhani',sans-serif); font-weight:700; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--claccent); opacity:.85; border-top:1px solid var(--clborder); } .cl-nav-sec:first-child{ border-top:none; margin-top:0; }