/* ══════════════════════════════════════════════════════════════════════════ Gestão Teleios — design system próprio. Tema claro/escuro por [data-theme] no (fallback em prefers-color-scheme). Tokens `--c-*`, shell `sys-*`, componentes `tp-*`. ══════════════════════════════════════════════════════════════════════════ */ :root { --c-bg: #eef2f8; --c-surface: #ffffff; --c-surface-2: #f4f7fb; --c-ink: #0f1b2d; --c-ink-soft: #33455f; --c-muted: #64748b; --c-line: #e2e8f0; --c-line-soft: #eef2f7; --c-brand: #0e7490; --c-brand-dark: #0b5c72; --c-brand-soft: #d9f1f7; --c-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 8px 24px rgba(15, 27, 45, .07); --c-shadow-sm: 0 1px 2px rgba(15, 27, 45, .08); --c-radius: 14px; --c-radius-sm: 10px; /* Barra de navegação: sempre escura (assinatura), mesmo no tema claro. */ --c-nav-bg: #0c2233; --c-nav-ink: #b9cbd9; --c-nav-muted: #7290a5; --c-ok: #16a34a; --c-ok-bg: #dcfce7; --c-ok-ink: #166534; --c-warn: #d97706; --c-warn-bg: #fef3c7; --c-warn-ink: #92400e; --c-danger: #dc2626; --c-danger-bg: #fee2e2; --c-danger-ink: #b91c1c; --c-info: #2563eb; --c-info-bg: #dbeafe; --c-info-ink: #1e40af; --c-neutral-bg: #e5e7eb; --c-neutral-ink: #475569; --sys-topnav-h: 56px; } :root[data-theme="dark"] { --c-bg: #070f18; --c-surface: #0f1c29; --c-surface-2: #16283a; --c-ink: #e6eef6; --c-ink-soft: #c3d3e0; --c-muted: #8ba3b7; --c-line: #1e3245; --c-line-soft: #16283a; --c-brand: #22b8cf; --c-brand-dark: #0e7490; --c-brand-soft: #10323d; --c-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .38); --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --c-nav-bg: #05111b; --c-nav-ink: #a9c0d1; --c-nav-muted: #5f7d92; --c-ok-bg: #0d2a1a; --c-ok-ink: #4ade80; --c-warn-bg: #2a2109; --c-warn-ink: #fbbf24; --c-danger-bg: #2c1214; --c-danger-ink: #f87171; --c-info-bg: #0f2038; --c-info-ink: #60a5fa; --c-neutral-bg: #1e3245; --c-neutral-ink: #9db2c2; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--c-bg); color: var(--c-ink); font-size: 14px; } a { color: var(--c-brand-dark); } :root[data-theme="dark"] a { color: var(--c-brand); } /* ─── Shell: barra horizontal ────────────────────────────────────────────── */ /* O menu é uma barra horizontal com um dropdown por módulo — o formato que a operação já usa nos outros sistemas. Enquanto houver poucos módulos ele cabe inteiro; quando apertar, o caminho é mover módulo raro para dentro de outro, não trocar por gaveta. */ .sys { --sys-gutter: clamp(14px, 2.2vw, 34px); min-height: 100vh; display: flex; flex-direction: column; } .sys-topnav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; background: var(--c-nav-bg); color: var(--c-nav-ink); padding: 0 var(--sys-gutter); position: sticky; top: 0; z-index: 30; min-height: var(--sys-topnav-h); } .sys-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; padding-right: 18px; } .sys-brand-mark { font-size: 20px; } .sys-brand-text { font-size: 15.5px; font-weight: 700; white-space: nowrap; line-height: 1.15; } .sys-brand-text small { display: block; font-size: 10.5px; font-weight: 500; color: var(--c-nav-muted); letter-spacing: .05em; } .sys-mod { position: relative; } .sys-mod-btn { display: flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; color: var(--c-nav-ink); font: inherit; font-weight: 600; padding: 9px 12px; border-radius: 9px; transition: background .12s, color .12s; } .sys-mod-btn:hover { background: rgba(255, 255, 255, .09); color: #fff; } .sys-mod.is-active > .sys-mod-btn { color: #fff; background: rgba(255, 255, 255, .12); } .sys-caret { font-size: 10px; opacity: .7; } .sys-dropdown { position: absolute; top: calc(100% + 4px); left: 0; min-width: 226px; z-index: 40; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius-sm); box-shadow: var(--c-shadow); padding: 6px; display: none; } .sys-mod.is-open .sys-dropdown, .sys-usermenu.is-open .sys-dropdown { display: block; } .sys-dropdown-right { left: auto; right: 0; } .sys-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--c-ink-soft); } .sys-dropdown a:hover { background: var(--c-surface-2); color: var(--c-ink); } .sys-dropdown a.is-current { background: var(--c-brand-soft); color: var(--c-brand-dark); font-weight: 600; } :root[data-theme="dark"] .sys-dropdown a.is-current { color: var(--c-brand); } .sys-dropdown a.is-soon { opacity: .65; } .sys-soon { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); border: 1px solid var(--c-line); border-radius: 6px; padding: 1px 5px; } .sys-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .sys-icon-btn { border: 0; background: rgba(255, 255, 255, .07); color: var(--c-nav-ink); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 15px; } .sys-icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; } .sys-usermenu { position: relative; } .sys-user { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--c-nav-ink); cursor: pointer; font: inherit; padding: 6px 8px; border-radius: 9px; } .sys-user:hover { background: rgba(255, 255, 255, .09); color: #fff; } .tp-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-brand); color: #fff; font-weight: 700; font-size: 12px; } .sys-main { flex: 1; padding: 22px var(--sys-gutter) 46px; } /* ─── Blocos de página ───────────────────────────────────────────────────── */ .tp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .tp-head h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; } .tp-head p { margin: 5px 0 0; color: var(--c-muted); max-width: 70ch; } .tp-crumb { font-size: 12px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; } .tp-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); box-shadow: var(--c-shadow-sm); padding: 18px; } .tp-card + .tp-card { margin-top: 16px; } .tp-card h2 { margin: 0 0 4px; font-size: 15.5px; } .tp-card h2 + p { margin: 0 0 14px; color: var(--c-muted); } .tp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .tp-cols { display: grid; gap: 16px; grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; } @media (max-width: 880px) { .tp-cols { grid-template-columns: 1fr; } } .tp-tile { display: block; text-decoration: none; color: inherit; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 18px; box-shadow: var(--c-shadow-sm); transition: transform .12s, box-shadow .12s, border-color .12s; } .tp-tile:hover { transform: translateY(-2px); box-shadow: var(--c-shadow); border-color: var(--c-brand); } .tp-tile-ic { font-size: 24px; } .tp-tile h3 { margin: 10px 0 4px; font-size: 15.5px; } .tp-tile p { margin: 0; color: var(--c-muted); } .tp-tile.is-soon { opacity: .7; } /* ─── Formulários ────────────────────────────────────────────────────────── */ .tp-field { margin-bottom: 12px; } .tp-field label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: var(--c-ink-soft); } .tp-field .tp-ajuda { font-weight: 400; color: var(--c-muted); } input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="file"], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--c-line); border-radius: var(--c-radius-sm); background: var(--c-surface); color: var(--c-ink); font: inherit; } textarea { min-height: 72px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-brand); outline-offset: 1px; border-color: transparent; } input[type="file"] { padding: 8px; background: var(--c-surface-2); } .tp-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .tp-check input { width: auto; } .tp-linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .tp-linha > * { flex: 1 1 180px; } .tp-btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; padding: 9px 16px; border: 0; border-radius: var(--c-radius-sm); cursor: pointer; background: var(--c-brand); color: #fff; font: inherit; font-weight: 600; text-decoration: none; } .tp-btn:hover { background: var(--c-brand-dark); } .tp-btn-ghost { background: var(--c-surface-2); color: var(--c-ink-soft); border: 1px solid var(--c-line); } .tp-btn-ghost:hover { background: var(--c-line-soft); color: var(--c-ink); } .tp-btn-danger { background: var(--c-danger); } .tp-btn-danger:hover { background: var(--c-danger-ink); } .tp-btn-sm { padding: 6px 11px; font-size: 12.5px; } .tp-alert { border-radius: var(--c-radius-sm); padding: 10px 13px; margin-bottom: 14px; border: 1px solid transparent; } .tp-alert-erro { background: var(--c-danger-bg); color: var(--c-danger-ink); border-color: var(--c-danger); } .tp-alert-ok { background: var(--c-ok-bg); color: var(--c-ok-ink); border-color: var(--c-ok); } .tp-alert-info { background: var(--c-info-bg); color: var(--c-info-ink); border-color: var(--c-info); } /* ─── Tabelas ────────────────────────────────────────────────────────────── */ .tp-tabela-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); } table.tp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .tp-tabela th, .tp-tabela td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--c-line-soft); white-space: nowrap; } .tp-tabela th { background: var(--c-surface-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); position: sticky; top: 0; z-index: 1; } .tp-tabela tbody tr:hover { background: var(--c-surface-2); } .tp-tabela td.tp-num { text-align: right; font-variant-numeric: tabular-nums; } .tp-tabela .tp-livre { white-space: normal; min-width: 220px; } .tp-rolagem { max-height: 460px; overflow: auto; } .tp-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--c-neutral-bg); color: var(--c-neutral-ink); } .tp-badge-numero { background: var(--c-info-bg); color: var(--c-info-ink); } .tp-badge-data { background: var(--c-warn-bg); color: var(--c-warn-ink); } .tp-badge-booleano { background: var(--c-ok-bg); color: var(--c-ok-ink); } .tp-badge-texto { background: var(--c-neutral-bg); color: var(--c-neutral-ink); } .tp-badge-vazia { background: var(--c-danger-bg); color: var(--c-danger-ink); } .tp-badge-papel { background: var(--c-brand-soft); color: var(--c-brand-dark); } :root[data-theme="dark"] .tp-badge-papel { color: var(--c-brand); } .tp-barra { height: 6px; border-radius: 999px; background: var(--c-line); overflow: hidden; min-width: 60px; } .tp-barra span { display: block; height: 100%; background: var(--c-brand); } .tp-mini { color: var(--c-muted); font-size: 12px; } .tp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .tp-vazio { text-align: center; color: var(--c-muted); padding: 34px 12px; } /* Métricas do topo do relatório */ .tp-metricas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 16px; } .tp-metrica { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 13px 15px; } .tp-metrica b { display: block; font-size: 20px; letter-spacing: -.02em; } .tp-metrica span { color: var(--c-muted); font-size: 12px; } /* Abas do relatório da planilha */ .tp-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .tp-abas a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-surface); text-decoration: none; color: var(--c-ink-soft); font-weight: 600; font-size: 12.5px; } .tp-abas a.is-current { background: var(--c-brand); border-color: var(--c-brand); color: #fff; } /* ─── Login ──────────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(120% 120% at 50% 0%, #123c50 0%, #071018 60%); } .login-card { width: min(380px, 100%); background: var(--c-surface); border-radius: 18px; padding: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } .login-card h1 { margin: 0 0 4px; font-size: 20px; } .login-sub { margin: 0 0 18px; color: var(--c-muted); } .login-card .tp-btn { width: 100%; margin-top: 6px; } .login-marca { text-align: center; color: #dbeafe; margin-bottom: 18px; } .login-marca b { display: block; font-size: 22px; letter-spacing: -.01em; color: #fff; } .login-marca span { font-size: 12.5px; color: #8fb4c7; letter-spacing: .08em; text-transform: uppercase; } /* ─── Situação do pedido ─────────────────────────────────────────────────── */ /* A cor é semântica, não decorativa: o que exige ação (aberto/parcial) é o que salta. "Recebido" é o estado de repouso e por isso é o mais discreto. */ .tp-badge-aberto { background: var(--c-info-bg); color: var(--c-info-ink); } .tp-badge-parcial { background: var(--c-warn-bg); color: var(--c-warn-ink); } .tp-badge-recebido { background: var(--c-neutral-bg); color: var(--c-neutral-ink); } .tp-badge-cancelado { background: var(--c-danger-bg); color: var(--c-danger-ink); } .tp-badge-st { background: var(--c-brand-soft); color: var(--c-brand-dark); } :root[data-theme="dark"] .tp-badge-st { color: var(--c-brand); } /* ─── Barra de filtros ───────────────────────────────────────────────────── */ .tp-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 12px 14px; margin-bottom: 14px; } .tp-filtros .tp-field { margin: 0; flex: 1 1 150px; min-width: 130px; } .tp-filtros .tp-acoes { display: flex; gap: 8px; } /* Formulário embutido numa linha de tabela (edição inline do item). */ .tp-tabela input[type="text"], .tp-tabela input[type="number"], .tp-tabela input[type="date"] { padding: 5px 7px; font-size: 12.5px; min-width: 90px; } .tp-tabela .tp-estreito { max-width: 92px; } .tp-linha-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } /* Aviso discreto para o item cujo valor veio da planilha antiga. */ .tp-marca-hist { font-size: 10.5px; color: var(--c-warn-ink); background: var(--c-warn-bg); border-radius: 5px; padding: 0 5px; white-space: nowrap; } .tp-total-linha td { background: var(--c-surface-2); font-weight: 600; }