/* ====================================================================== TGA Painel — Ultimate v4 (ÚNICO ARQUIVO) - Um CSS para TODAS as páginas (admin, cliente, revenda, sites, rádios, APIs) - Acessível (WCAG AA+), responsivo, alto contraste, foco visível - Compatível com QUALQUER tabela/form/botão/link, mesmo sem classes - Ajustes para autofill, campos inválidos, search, toolbars, mobile - Remove logo duplicada no
; skip-link só em :focus-visible ====================================================================== */ /* ======================= TOKENS DE TEMA ======================= */ :root{ /* Marca */ --brand:#e63946; --brand-soft:#ff6b6b; /* Base dark */ --bg:#0b0f12; --surface:#11161e; --elev:#0f141b; --text:#f7f9fc; --text-muted:#b8c3d3; --border:#27313f; --link:#8bb4ff; /* Estados */ --ok:#2e7d32; --warn:#ffb300; --danger:#d32f2f; --info:#2f6fef; /* Forma/efeitos */ --radius-sm:8px; --radius:14px; --radius-lg:20px; --round:999px; --ring:0 0 0 3px rgba(230,57,70,.45); --shadow-1:0 2px 8px rgba(0,0,0,.25); --shadow-2:0 18px 44px rgba(0,0,0,.50); /* Tipografia/spacing */ --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif; --fs:16px; --lh:1.6; --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --sp-6:40px; /* Campos */ --field-bg:#0e141c; --placeholder:#95a5bb; color-scheme: dark; } /* Modo claro opcional — habilite com */ html[data-theme="light"]{ --bg:#f5f7fb; --surface:#ffffff; --elev:#ffffff; --text:#0b0f12; --text-muted:#4c5a6f; --border:#dfe6f1; --field-bg:#ffffff; --link:#174ea6; --ring:0 0 0 3px rgba(230,57,70,.28); --shadow-1:0 2px 8px rgba(0,0,0,.06); --shadow-2:0 18px 44px rgba(0,0,0,.16); color-scheme: light; } /* Preferências do usuário */ @media (prefers-contrast: more){ :root{ --ring:0 0 0 4px rgba(230,57,70,.6) } } @media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} } /* ======================= BASE ======================= */ *{box-sizing:border-box} html,body{height:100%} html{font-size:100%} body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs); line-height:var(--lh); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%; display:block} a{color:var(--link); text-underline-offset:2px} a:hover{text-decoration:underline} :focus{outline:none} :focus-visible{box-shadow:var(--ring); border-radius:10px} ::selection{background:rgba(230,57,70,.28)} /* Alvos mínimos de toque (mobile/TV) */ a, button, [type=button], [type=submit], [role="button"]{ min-height:44px; min-width:44px; } /* ======================= LAYOUT UTILS ======================= */ .container{max-width:1160px;margin:0 auto;padding:var(--sp-4)} .container.narrow{max-width:640px} .stack{display:flex;flex-direction:column;gap:var(--sp-3)} .row{display:flex;flex-wrap:wrap;gap:var(--sp-3)} .grid{display:grid;gap:var(--sp-3)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .center{display:flex;align-items:center;justify-content:center} .space-between{display:flex;align-items:center;justify-content:space-between} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .p-2{padding:var(--sp-2)} .p-3{padding:var(--sp-3)} .p-4{padding:var(--sp-4)} @media (max-width:960px){.grid-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:720px){.row{flex-direction:column}.grid-2,.grid-3{grid-template-columns:1fr}} /* ======================= HEADER ======================= */ .app-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:16px} .app-header img{height:52px;width:auto} .brand{font-size:1.06rem;color:var(--text-muted)} .topnav{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-left:auto} .topnav a,.topnav button{ background:var(--elev);border:1px solid var(--border);color:var(--text); padding:12px 16px;border-radius:var(--round);cursor:pointer;font-weight:800; transition:background .15s ease,opacity .15s ease,transform .04s ease } .topnav a:hover,.topnav button:hover{background:rgba(255,255,255,.06)} .topnav .danger{background:#3a1313;border-color:#7a2f2f} .topnav .danger:hover{background:#471d1d} /* Remove logo duplicada dentro do conteúdo */ main > header > img, main header img, main img[src$="logo.png"], main img[src*="/logo.png"], main img[alt*="TGA" i]{ display:none !important; } main .show-logo img{ display:block !important; } /* exceção */ /* ======================= CARDS ======================= */ .card{ background:linear-gradient(180deg, var(--surface), #0e141c 140%); border-radius:var(--radius); padding:var(--sp-4); box-shadow:var(--shadow-2); } .card + .card{margin-top:18px} @media (min-width:1200px){ .card{box-shadow:var(--shadow-2), 0 1px 0 rgba(255,255,255,.03)} } .card.headered{padding:0} .card header{padding:var(--sp-4);border-bottom:1px solid var(--border);font-weight:900} .card .content{padding:var(--sp-4)} .card .footer{padding:var(--sp-3);border-top:1px solid var(--border);display:flex;gap:var(--sp-2);justify-content:flex-end} /* ======================= TIPOGRAFIA ======================= */ h1{font-size:2rem;margin:0 0 var(--sp-2)} h2{font-size:1.48rem;margin:0 0 var(--sp-2)} h3{font-size:1.2rem;margin:0 0 var(--sp-2)} .muted{color:var(--text-muted)} p, td, th, .badge, .btn { overflow-wrap:anywhere; word-break:break-word; } /* ======================= FORMULÁRIOS ======================= */ label{display:block;margin:var(--sp-2) 0 6px;font-weight:800} input,select,textarea,.input{ width:100%;padding:14px 12px;border-radius:12px;border:1px solid var(--border); background:var(--field-bg);color:var(--text); transition:border-color .15s, box-shadow .15s, background-color .15s; font-size:1rem; } ::placeholder{ color:var(--placeholder); opacity:.9 } textarea{min-height:120px;resize:vertical} select{ appearance:none; background-image: linear-gradient(45deg,transparent 50%,var(--text) 50%), linear-gradient(135deg,var(--text) 50%,transparent 50%), linear-gradient(to right, transparent, transparent); background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%,100% 0; background-size:6px 6px,6px 6px,2.2em 2.2em; background-repeat:no-repeat; } input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--brand)} /* Foco limpo — anel + borda da marca */ input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible{ border-color: var(--brand) !important; box-shadow: var(--ring); } /* Remove “borda vermelha” nativa de inválido */ input:invalid, textarea:invalid, select:invalid{ box-shadow:none !important; border-color:var(--border) !important; } input:focus:invalid, textarea:focus:invalid, select:focus:invalid{ box-shadow:var(--ring) !important; border-color:var(--border) !important; } /* Autofill no dark (Chrome/Edge) */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{ -webkit-text-fill-color: var(--text) !important; box-shadow: 0 0 0 1000px var(--field-bg) inset !important; caret-color: var(--text); } /* Input group */ .input-group{display:flex;align-items:stretch} .input-group > input,.input-group > select{border-top-right-radius:0;border-bottom-right-radius:0} .input-group > .addon{ display:inline-flex;align-items:center;gap:8px;padding:0 12px;background:var(--elev); border:1px solid var(--border);border-left:0;border-top-right-radius:12px;border-bottom-right-radius:12px; } .is-invalid{border-color:var(--danger)!important} .help,.help-text{font-size:.95rem;color:var(--text-muted);margin-top:6px} /* ======================= BOTÕES ======================= */ .btn, button, [type=submit], [type=button]{ --btn-bg:var(--brand); --btn-bd:var(--brand); --btn-fg:#101114; display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--btn-bg);border:1px solid var(--btn-bd);color:var(--btn-fg); font-weight:900;cursor:pointer;border-radius:18px;padding:12px 20px; transition:transform .04s ease, opacity .15s, background .15s; box-shadow:0 2px 6px rgba(0,0,0,.35); } .btn:hover, button:hover{opacity:.96; transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.35);} .btn:active, button:active{transform:translateY(0)} .btn:disabled, button:disabled{opacity:.6;cursor:not-allowed} .btn.secondary{--btn-bg:#2a3442;--btn-bd:#2a3442;--btn-fg:#e8eef6} .btn.secondary:hover{background:#364356} .btn.ghost{--btn-bg:transparent;--btn-bd:var(--border);--btn-fg:var(--text)} .btn.warn{--btn-bg:var(--warn);--btn-bd:var(--warn);--btn-fg:#2b1a00} .btn.warn:hover{background:#e0a200} .btn.ok{--btn-bg:var(--ok);--btn-bd:var(--ok);--btn-fg:#fff} .btn.ok:hover{background:#276a2b} .btn.danger{--btn-bg:var(--danger);--btn-bd:var(--danger);--btn-fg:#fff} .btn.danger:hover{background:#b82a2a} .btn.sm{padding:10px 14px;border-radius:12px} .btn.lg{padding:14px 24px;border-radius:20px;font-size:1.06rem} .actions{display:flex;gap:12px;flex-wrap:wrap} .card header .actions .btn{min-width:140px} @media (max-width:720px){ .card header .actions{width:100%} .card header .actions .btn{width:100%;min-width:0} } /* ======================= PILLS ======================= */ .pills{display:flex;gap:10px;flex-wrap:wrap} .pills a{padding:10px 14px;border-radius:var(--round);border:1px solid var(--border);background:var(--elev);font-weight:800;color:var(--text)} .pills a[aria-current="page"],.pills a.active{background:var(--brand);border-color:var(--brand);color:#0c0c0c} /* ======================= TABELAS ======================= */ .table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,.35)} table{width:100%;border-collapse:collapse;margin-top:12px} caption{caption-side:top;text-align:left;padding:10px;color:var(--text-muted);font-weight:700} th,td{padding:16px;border-bottom:1px solid var(--border)} tr{line-height:1.8} th{text-align:left;color:var(--text-muted);font-weight:900;background:var(--elev);position:sticky;top:0;z-index:1} tr:hover td{background:rgba(255,255,255,.06)} .table-zebra tr:nth-child(even) td{background:rgba(255,255,255,.03)} /* Sem wrapper: mobile scroll automático */ @media (max-width:680px){ table{ display:block; width:100%; overflow:auto; -webkit-overflow-scrolling:touch; } thead, tbody, tr{ width:max-content; } } /* Células e ações genéricas */ td, th{ word-break:break-word; overflow-wrap:anywhere; } td .actions{ display:flex; gap:10px; flex-wrap:wrap; } td .actions .btn{ min-width:112px; } td .btn{ margin:4px 6px 0 0; } td .btn:last-child{ margin-right:0; } @media (max-width:760px){ td .actions{ flex-direction:column; } td .actions .btn, td .btn{ width:100%; min-width:0; } } /* ======================= BUSCA (ícone + foco) ======================= */ .search{flex:1;min-width:240px} .search input[type="search"], .search input[type="text"]{ padding-left:44px; background-image: url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:12px 50%; background-size:18px 18px; } input[type="search"]{ -webkit-appearance:none; appearance:none; border-radius:12px; } input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; height:16px; width:16px; opacity:.8; filter: invert(1); } /* ======================= ALERTS / BADGES / TOOLBAR ======================= */ .alert{padding:14px;border-radius:12px;margin:12px 0;border:1px solid var(--border);background:var(--elev)} .alert.success{background:#11391c;color:#7be495;border:1px solid #2f6f44} .alert.error{background:#3a1313;color:#ffbaba;border:1px solid #7a2f2f} .alert.warn{background:#3a2a13;color:#ffd27a;border:1px solid #7a5a2f} .badge{display:inline-block;padding:6px 12px;border-radius:var(--round);font-size:.95rem;border:1px solid var(--border);background:var(--elev);font-weight:800} .badge.ok{background:#11391c;color:#7be495;border-color:#2f6f44} .badge.blocked{background:#3a1313;color:#ffbaba;border-color:#7a2f2f} .badge.warn{background:#3a2a13;color:#ffd27a;border-color:#7a5a2f} .toolbar{display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:var(--sp-2)} @media (max-width:760px){ .toolbar{ gap:14px; } .toolbar .search{ width:100%; order:1; } .toolbar .actions{ width:100%; order:2; } .toolbar .actions .btn{ width:100%; } } /* ======================= AUTH ======================= */ .auth{min-height:100dvh;display:grid;place-items:center;padding:var(--sp-4)} .auth .panel{width:100%;max-width:460px} /* ======================= ACESSIBILIDADE EXTRA ======================= */ .skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus-visible{ position:fixed;left:12px;top:12px;z-index:10000; width:auto;height:auto;padding:8px 12px;background:#ffffff;color:#111827;border-radius:10px; border:2px solid #e5e7eb; box-shadow:0 4px 16px rgba(0,0,0,.25); text-decoration:none; font-weight:800; } .visually-hidden,.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} /* ======================= SCROLLBAR (WebKit) ======================= */ *::-webkit-scrollbar{height:12px;width:12px} *::-webkit-scrollbar-track{background:#0d131a} *::-webkit-scrollbar-thumb{background:#2a3442;border-radius:var(--round);border:2px solid #0d131a} *::-webkit-scrollbar-thumb:hover{background:#3a4657} /* ======================= ALTO CONTRASTE (Windows/Edge) ======================= */ @media (forced-colors: active){ *{forced-color-adjust:auto} a,button,[type=submit]{border:1px solid ButtonText} .card,.alert,.table-wrap{border:1px solid CanvasText} .pills a[aria-current="page"],.pills a.active{outline:2px solid Highlight} } /* ======================= Ultimate v4.1 — padronização de listas ======================= */ /* Header das listas */ .toolbar.card{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; } .toolbar.card h1{ margin:0; } .toolbar.card p{ margin:0; color:var(--text-muted); } .toolbar.card .actions{ display:flex; gap:12px; flex-wrap:wrap; } @media (max-width:760px){ .toolbar.card .search{ width:100%; order:1; } .toolbar.card .actions{ width:100%; order:2; } .toolbar.card .actions .btn{ width:100%; } } /* Colunas consistentes (ID / Status / Ações) */ table th:first-child, table td:first-child { width:72px; text-align:right; } /* ID */ table th:nth-child(4), table td:nth-child(4){ width:120px; text-align:center;} /* Status */ table th:last-child, table td:last-child { width:340px; } /* Ações desktop */ /* Ações responsivas e quebras bonitas */ td:last-child .actions{ display:flex; gap:10px; flex-wrap:wrap; } td:last-child .btn{ min-width:120px; } td:nth-child(2), td:nth-child(3){ overflow-wrap:anywhere; word-break:break-word; } /* Separadores suaves entre linhas */ tbody tr + tr td{ border-top:1px solid rgba(255,255,255,.04); } /* Mobile */ @media (max-width:760px){ table th:last-child, table td:last-child { width:auto; text-align:unset; } td:last-child .btn{ width:100%; min-width:0; } } /* Forms universais – respiro e botões 100% no mobile */ .card form{display:grid; gap:14px} .card form .actions{display:flex; gap:12px; flex-wrap:wrap} @media (max-width:760px){ .card form .actions .btn{width:100%} } /* Desktop: botão no tamanho natural */ form .btn{ width:auto } /* Mobile: botão 100% (toque mais fácil) */ @media (max-width:760px){ form .btn{ width:100% } } /* clusters mais neutros no dark */ .marker-cluster-small { background: rgba(80,160,255,.15); } .marker-cluster-small div { background: rgba(80,160,255,.85); color:#fff; } .marker-cluster-medium { background: rgba(255,185,0,.15); } .marker-cluster-medium div { background: rgba(255,185,0,.90); color:#111; } .marker-cluster-large { background: rgba(255,80,120,.15); } .marker-cluster-large div { background: rgba(255,80,120,.90); color:#fff; } /* bordas suaves */ .marker-cluster div { border: 2px solid rgba(0,0,0,.2); box-shadow: 0 2px 6px rgba(0,0,0,.25); }