/* ========================================================================== /css/style.css — v1.0.0 (2025-10-31) Suporte a 3 temas (dark, light, auto) + 4 paletas de acento (padrão, azul, verde, laranja). Padrão: dark + padrao. -------------------------------------------------------------------------- Como usar: - - O header.php já alterna data-theme. data-accent é opcional (def: padrao). ========================================================================== */ /* ========================= Reset básico e tipografia ========================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji","Segoe UI Emoji"; line-height: 1.4; background: var(--bg); color: var(--fg); } /* ============================================ Paleta base (inicial — dark como valor base) ============================================ */ :root { /* Cores estruturais (overridden por tema) */ --bg: #0b0f15; --bg-soft: #0f1319; --card: #171b22; --border: #2b3240; --muted: #9aa4b2; --fg: #e8edf4; --fg-strong: #ffffff; --error-bg: #311f20; --error-bd: #6b1b1e; --error-fg: #ffd7d9; --ok-bg: #1c2e21; --ok-bd: #1b8a44; --ok-fg: #b6f2c4; --warn-bg: #33240a; --warn-bd: #8f5d10; --warn-fg: #ffdf9b; /* Paleta de acento (padrão = azul royal) */ --accent: #2563eb; --accent-weak: rgba(37, 99, 235, .15); --accent-bd: #1d4ed8; /* Estados/realces */ --link: #9cc1ff; --focus-ring: 0 0 0 3px rgba(37, 99, 235, .35); /* Inputs/Tabelas */ --input-bg: var(--bg-soft); --input-bd: var(--border); --table-row-hover: rgba(255,255,255,.03); } /* ============================== Tema LIGHT (força modo claro) ============================== */ html[data-theme="light"] { --bg: #f5f7fb; --bg-soft: #ffffff; --card: #ffffff; --border: #d9e0ea; --muted: #5a6575; --fg: #1b2430; --fg-strong: #0c1117; --error-bg: #fde8ea; --error-bd: #ff99a2; --error-fg: #7b1a1e; --ok-bg: #e6f6ea; --ok-bd: #58c28f; --ok-fg: #135c37; --warn-bg: #fff3da; --warn-bd: #ffcc73; --warn-fg: #7a4b00; --input-bg: #fff; --input-bd: #c8d2e1; --table-row-hover: rgba(0,0,0,.04); } /* ============================================== Tema AUTO (segue prefer-color-scheme do SO) - Se o SO for dark, usa paleta dark (root) - Se o SO for light, aplica as vars de light ============================================== */ @media (prefers-color-scheme: light) { html[data-theme="auto"] { --bg: #f5f7fb; --bg-soft: #ffffff; --card: #ffffff; --border: #d9e0ea; --muted: #5a6575; --fg: #1b2430; --fg-strong: #0c1117; --error-bg: #fde8ea; --error-bd: #ff99a2; --error-fg: #7b1a1e; --ok-bg: #e6f6ea; --ok-bd: #58c28f; --ok-fg: #135c37; --warn-bg: #fff3da; --warn-bd: #ffcc73; --warn-fg: #7a4b00; --input-bg: #fff; --input-bd: #c8d2e1; --table-row-hover: rgba(0,0,0,.04); } } /* Nota: se prefers-color-scheme: dark, o tema auto usa a raiz (dark) */ /* =========================================== Paletas de ACENTO (opcionais no ) =========================================== */ html[data-accent="padrao"] { --accent: #2563eb; --accent-weak: rgba(37, 99, 235, .15); --accent-bd: #1d4ed8; } html[data-accent="azul"] { --accent: #3b82f6; --accent-weak: rgba(59, 130, 246, .15); --accent-bd: #2563eb; } html[data-accent="verde"] { --accent: #22c55e; --accent-weak: rgba(34, 197, 94, .15); --accent-bd: #16a34a; } html[data-accent="laranja"] { --accent: #f97316; --accent-weak: rgba(249, 115, 22, .18); --accent-bd: #ea580c; } /* ==================== Elementos de layout ==================== */ .container { max-width: 1200px; margin: 24px auto; padding: 0 16px; } .card { background: var(--card); border-radius: 14px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.05); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; } .col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-5 { grid-column: span 5; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } .col-2 { grid-column: span 2; } .col-1 { grid-column: span 1; } /* Responsividade simples */ @media (max-width: 960px) { .grid { grid-template-columns: repeat(6, 1fr); } .col-8 { grid-column: span 6; } } @media (max-width: 640px) { .grid { grid-template-columns: repeat(4, 1fr); } .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 { grid-column: span 4; } } /* ========= Tipos/UI ========= */ h1, h2, h3, h4 { color: var(--fg-strong); margin: 0 0 10px; } p { margin: 0 0 10px; color: var(--fg); } small, .muted { color: var(--muted); } /* Inputs e form controls */ label { font-size: 12px; color: var(--muted); display: block; margin: 0 0 6px; } input, select, textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--input-bd); background: var(--input-bg); color: var(--fg); outline: none; transition: box-shadow .15s ease, border-color .15s ease; } input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--muted), var(--fg) 20%); } input:focus, select:focus, textarea:focus { border-color: var(--accent-bd); box-shadow: var(--focus-ring); } /* Botões */ .btn { padding: 10px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; transition: transform .05s ease, filter .15s ease, box-shadow .15s ease; box-shadow: 0 1px 0 rgba(0,0,0,.12); } .btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); } .btn-line { background: var(--bg-soft); border: 1px solid var(--input-bd); color: var(--fg); text-decoration: none; } .btn-danger { background: #b91c1c; } .btn-warning { background: #d97706; color: #fff; } /* Badges e chips */ .badge { padding: 6px 10px; border-radius: 999px; background: var(--accent-weak); color: var(--fg); border: 1px solid var(--accent-bd); display: inline-block; font-size: 12px; } /* Tabelas */ .tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tbl th { color: var(--muted); text-align: left; font-weight: 600; letter-spacing: .3px; } .tbl tr:hover td { background: var(--table-row-hover); } /* Links */ a { color: var(--link); } a:hover { text-decoration: underline; } /* Alertas */ .err { background: var(--error-bg); border: 1px solid var(--error-bd); color: var(--error-fg); padding: 10px; border-radius: 8px; } .ok { background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok-fg); padding: 10px; border-radius: 8px; } .warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn-fg); padding: 10px; border-radius: 8px; } /* Header (barra superior) — caso não use o CSS inline do header.php */ .header-bar{ display:flex;justify-content:space-between;align-items:center; background: var(--bg-soft); padding:10px 20px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; } .header-left{display:flex;align-items:center;gap:14px} .header-right{display:flex;align-items:center;gap:10px} .header-user{color: var(--muted); font-size:14px; margin-right:6px} .header-btn{ background: #1e293b; color:#fff; border:1px solid var(--border); border-radius:8px; padding:8px 12px; text-decoration:none; font-size:14px; cursor:pointer; transition: background .2s; } .header-btn:hover { background: var(--accent); } /* Utilitários */ .center { text-align:center; } .right { text-align:right; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } /* Uploads / Galeria (documentos.php) */ .files-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 10px; } .file-card { grid-column: span 3; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; } .file-card h4 { margin: 0 0 6px; font-size: 14px; color: var(--fg-strong); } .file-card small { color: var(--muted); } .file-actions { display:flex; gap: 6px; margin-top: 8px; } @media (max-width: 960px) { .file-card { grid-column: span 6; } } @media (max-width: 640px) { .file-card { grid-column: span 12; } } /* Botões de ação inline (listar_cliente AÇÕES) */ .actions a { margin-right: 12px; white-space: nowrap; text-decoration: none; color: var(--fg); } .actions a:hover { color: var(--link); } /* Paginador simples */ .pager { display:flex; gap:8px; align-items:center; } .pager a { padding:6px 10px; border:1px solid var(--input-bd); border-radius:8px; text-decoration:none; color: var(--fg); background: var(--bg-soft); } .pager .on { background: var(--accent); border-color: var(--accent-bd); color: #fff; } /* Tooltip básico (opcional) */ .tooltip { position: relative; display: inline-block; } .tooltip .tip { visibility: hidden; opacity: 0; transition: opacity .15s ease; position: absolute; z-index: 10; white-space: nowrap; background: var(--bg-soft); color: var(--fg); border: 1px solid var(--input-bd); padding: 6px 8px; border-radius: 8px; font-size: 12px; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); } .tooltip:hover .tip { visibility: visible; opacity: 1; } /* Botões de status (aprovar/rejeitar) */ .status-approve { background: #16a34a; color: #fff; } .status-reject { background: #b91c1c; color: #fff; } /* Inputs desabilitados */ input[disabled], select[disabled], textarea[disabled] { opacity: .7; cursor: not-allowed; } /* Campos de busca estreitos (filtros listar) */ .input { /* compat com seu HTML atual */ width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--input-bd); background: var(--input-bg); color: var(--fg); }