/* Luiz Ramos · Propostas Admin — overrides 2026-05-26 Complementa dash.css + pages.css. Não duplica tokens. Dark fixo + accent verde aplicados via . */ /* ============ Layout root ============ */ html, body { background: var(--canvas); color: var(--ink); } body.prop-admin { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ============ Topbar ============ */ .dash-topbar.prop-topbar { display: flex; align-items: center; gap: var(--space-md); padding: 0 var(--space-md); } .prop-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-body); letter-spacing: -0.01em; white-space: nowrap; } .prop-brand:hover { color: var(--accent); } .prop-brand__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .prop-brand__sep { color: var(--muted); margin: 0 4px; } .prop-crumbs { flex: 1; display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--text-sm); color: var(--muted); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .prop-crumbs a { color: var(--body); text-decoration: none; } .prop-crumbs a:hover { color: var(--ink); } .prop-crumbs strong { color: var(--ink); font-weight: 500; } .prop-crumbs__sep { color: var(--muted); opacity: 0.6; } .prop-user.mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.04em; } /* ============ Container ============ */ .prop-main { padding: var(--space-lg) var(--space-lg) var(--space-xxl); overflow-x: clip; /* nenhum filho gera barra horizontal de PÁGINA; scroll fica contido em boards/tabelas */ } .prop-page { width: min(100%, 1560px); margin: 0 auto; min-width: 0; } @media (max-width: 1024px) { .prop-main { padding: var(--space-md) var(--space-md) var(--space-xl); } } @media (max-width: 640px) { .prop-main { padding: var(--space-sm) var(--space-sm) var(--space-xl); } } .prop-pagehead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--hairline); } .prop-pagehead h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h1); color: var(--ink); margin: 0; letter-spacing: -0.02em; } /* ============ Action bars ============ */ .prop-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } .prop-actions--right { justify-content: flex-end; } .prop-actions--between { justify-content: space-between; } .prop-actions__spacer { flex: 1; } /* ============ Cards ============ */ .prop-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-lg); } .prop-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--hairline); } .prop-card__head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3); color: var(--ink); margin: 0; letter-spacing: -0.01em; } .prop-card__head .prop-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); } .prop-card--soft { background: var(--canvas-2); border: 1px solid var(--hairline); } /* ============ Forms ============ */ .prop-form { display: grid; gap: var(--space-md); } .prop-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } @media (max-width: 720px) { .prop-form__row { grid-template-columns: 1fr; } } .prop-form label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); color: var(--body); margin-bottom: 10px; letter-spacing: 0.01em; } .prop-form label .lr-icon { color: var(--muted); flex-shrink: 0; } .prop-form label .req { color: var(--accent); margin-left: 2px; } .prop-form .hint { font-size: var(--text-xs); color: var(--muted); margin-top: 6px; line-height: 1.5; } .prop-input, .prop-form input[type="text"], .prop-form input[type="email"], .prop-form input[type="tel"], .prop-form input[type="number"], .prop-form input[type="password"], .prop-form input[type="date"], .prop-form input[type="url"], .prop-form textarea, .prop-form select { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: var(--text-body); color: var(--ink); background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-sizing: border-box; transition: border-color 120ms, box-shadow 120ms, background 120ms; } .prop-form input::placeholder, .prop-form textarea::placeholder { color: var(--muted); } .prop-form input:focus, .prop-form textarea:focus, .prop-form select:focus, .prop-input:focus { outline: 0; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); } .prop-form textarea { min-height: 90px; resize: vertical; line-height: 1.5; } .prop-input--mono { font-family: var(--font-mono); } .prop-form-actions { display: flex; gap: var(--space-sm); align-items: center; justify-content: flex-end; padding-top: var(--space-md); border-top: 1px solid var(--hairline); margin-top: var(--space-md); flex-wrap: wrap; } .prop-form-actions .left { margin-right: auto; } /* ============ Escopo dinâmico ============ */ .prop-escopo { display: grid; gap: var(--space-xs); } .prop-item { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--canvas-2); display: grid; gap: var(--space-xs); } .prop-item__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .prop-item__num { color: var(--accent); } .prop-item__row { display: grid; grid-template-columns: 3fr 1fr; gap: var(--space-xs); } @media (max-width: 540px) { .prop-item__row { grid-template-columns: 1fr; } } /* ============ Filtros (pills) ============ */ .prop-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-md); } .prop-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--body); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-full); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; transition: background 120ms, border-color 120ms, color 120ms; } .prop-pill:hover { background: var(--surface-2); color: var(--ink); border-color: var(--hairline-2); } .prop-pill.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ============ Tables ============ */ .prop-table-wrap { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow-x: auto; } .prop-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .prop-table thead th { background: var(--canvas-2); text-align: left; padding: 10px var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--hairline); font-weight: 500; white-space: nowrap; } .prop-table tbody td { padding: 12px var(--space-sm); border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--body); } .prop-table tbody tr:last-child td { border-bottom: 0; } .prop-table tbody tr:hover { background: var(--surface-2); } .prop-table tbody tr:hover td { color: var(--ink); } .prop-table .col-id { font-family: var(--font-mono); color: var(--muted); width: 56px; } .prop-table .col-val { font-family: var(--font-mono); font-weight: 500; color: var(--ink); text-align: right; white-space: nowrap; } .prop-table .col-date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; } .prop-table .col-actions { text-align: right; white-space: nowrap; } .prop-table .col-actions .btn { margin-left: 6px; } /* ============ Status badges (sobrescreve genéricos pages.css) ============ */ .prop-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--body); white-space: nowrap; } .prop-badge--rascunho { background: rgba(110,110,110,0.15); color: var(--muted); border-color: var(--hairline); } .prop-badge--enviada { background: rgba(245,165,36,0.10); color: var(--warn); border-color: rgba(245,165,36,0.30); } .prop-badge--vista { background: rgba(6,182,212,0.10); color: var(--c-cyan); border-color: rgba(6,182,212,0.30); } .prop-badge--aceita { background: var(--ok-soft); color: var(--ok); border-color: rgba(0,197,115,0.30); } .prop-badge--recusada { background: rgba(239,68,68,0.10); color: var(--error); border-color: rgba(239,68,68,0.30); } .prop-badge--expirada { background: rgba(110,110,110,0.10); color: var(--muted); border-color: var(--hairline); text-decoration: line-through; } /* ============ Botões extras ============ */ .btn.btn-ghost { background: transparent; color: var(--body); border-color: var(--hairline); } .btn.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--hairline-2); } .btn.btn-danger-outline { background: transparent; color: var(--error); border-color: rgba(239,68,68,0.35); } .btn.btn-danger-outline:hover { background: rgba(239,68,68,0.08); border-color: var(--error); } /* ============ Meta-line + token mono ============ */ .prop-meta-line { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); padding: var(--space-xs) var(--space-sm); background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--muted); } .prop-meta-line .lab { font-family: var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; } .prop-meta-line .val { color: var(--body); font-family: var(--font-mono); } .prop-meta-line .sep { color: var(--hairline-2); } /* ============ Empty state ============ */ .prop-empty { text-align: center; padding: var(--space-xxl) var(--space-md); color: var(--muted); background: var(--surface); border: 1px dashed var(--hairline-2); border-radius: var(--radius-lg); } .prop-empty h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-xxs); } .prop-empty p { margin: 0 0 var(--space-sm); } /* ============ Erro inline ============ */ .prop-inline-err { background: rgba(239,68,68,0.08); color: var(--error); border: 1px solid rgba(239,68,68,0.30); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-sm); margin-bottom: var(--space-sm); } /* ============ Preview iframe ============ */ .prop-preview { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .prop-preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--hairline); background: var(--canvas-2); } .prop-preview__head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--body); letter-spacing: 0.01em; } .prop-preview__actions { display: flex; gap: 6px; } .prop-preview__frame { width: 100%; min-height: 600px; border: 0; background: #fff; /* Iframe carrega tema light institucional — não herda canvas dark */ } /* ============ Grid editar (form + preview) ============ */ .prop-edit-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-md); align-items: start; } @media (max-width: 1024px) { .prop-edit-grid { grid-template-columns: 1fr; } .prop-preview__frame { min-height: 480px; } } /* ============ Histórico de versões ============ */ .prop-history { font-size: var(--text-sm); } .prop-history summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--body); padding: var(--space-xs) 0; } .prop-history summary:hover { color: var(--ink); } .prop-history table { width: 100%; margin-top: var(--space-xs); font-size: var(--text-xs); border-collapse: collapse; } .prop-history th, .prop-history td { padding: 6px 10px; border-bottom: 1px solid var(--hairline); text-align: left; font-family: var(--font-mono); color: var(--body); } .prop-history th { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; font-size: 10px; } /* ============ Login page ============ */ body.prop-login { background: var(--canvas); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-md); margin: 0; } .prop-login-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: 0 12px 48px rgba(0,0,0,0.5); } .prop-login-card .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-xxs); } .prop-login-card h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); margin: 0 0 var(--space-xxs); color: var(--ink); letter-spacing: -0.02em; } .prop-login-card .sub { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); } .prop-login-card label { display: block; font-size: var(--text-sm); color: var(--body); margin-bottom: 6px; font-weight: 500; } .prop-login-card input[type="password"] { width: 100%; padding: 12px; font-family: var(--font-body); font-size: var(--text-body); color: var(--ink); background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-sizing: border-box; transition: border-color 120ms, box-shadow 120ms; } .prop-login-card input[type="password"]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .prop-login-card .btn { margin-top: var(--space-sm); width: 100%; padding: 12px; } .prop-login-card .login-error { background: rgba(239,68,68,0.08); color: var(--error); border: 1px solid rgba(239,68,68,0.30); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--text-sm); margin-bottom: var(--space-sm); } .prop-login-card .foot { margin: var(--space-md) 0 0; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; } /* ============ Modal de confirmação ============ */ .lr-confirm-dialog { border: 0; padding: 0; background: transparent; max-width: 480px; width: min(480px, calc(100vw - 32px)); } .lr-confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .lr-confirm-form { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; } .lr-confirm-head { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--hairline); background: var(--canvas-2); } .lr-confirm-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; } .lr-confirm-dialog.is-danger .lr-confirm-head h3 { color: var(--error); } .lr-confirm-body { padding: var(--space-md); } .lr-confirm-msg { margin: 0; font-size: var(--text-body); color: var(--ink); line-height: 1.5; } .lr-confirm-detail { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--body); line-height: 1.5; } .lr-confirm-foot { display: flex; justify-content: flex-end; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--hairline); background: var(--canvas-2); } .lr-confirm-foot .btn { min-width: 96px; } /* ============ Image upload UI ============ */ .prop-img-block { margin-top: var(--space-xs); } .prop-img-row { display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: 6px; } .prop-img-thumb { width: 96px; height: 96px; border-radius: var(--radius-md); border: 1px dashed var(--hairline-2); background: var(--canvas-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .prop-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .prop-img-placeholder { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .prop-img-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* ============ Modal Share (publish-success) ============ */ .lr-share-dialog { border: 0; padding: 0; background: transparent; max-width: 540px; width: min(540px, calc(100vw - 32px)); } .lr-share-dialog::backdrop { background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lr-share-body { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-xl, 14px); padding: 28px 28px 24px; box-shadow: 0 32px 80px rgba(0,0,0,0.6); position: relative; text-align: center; animation: lr-share-in 480ms cubic-bezier(.18,.89,.32,1.28) both; } @keyframes lr-share-in { from { opacity: 0; transform: scale(0.85) translateY(20px); } to { opacity: 1; transform: none; } } .lr-share-close { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: var(--muted); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: background 160ms, color 160ms; } .lr-share-close:hover { background: var(--surface-2); color: var(--ink); } /* Checkmark animado */ .lr-share-check { width: 86px; height: 86px; margin: 4px auto 16px; } .lr-share-check-svg { width: 100%; height: 100%; } .lr-share-check-circle { stroke: var(--ok, #00c573); stroke-dasharray: 226; stroke-dashoffset: 226; animation: lr-share-circle 640ms cubic-bezier(.65,0,.45,1) 100ms forwards; } .lr-share-check-path { stroke: var(--ok, #00c573); stroke-dasharray: 60; stroke-dashoffset: 60; animation: lr-share-check 480ms cubic-bezier(.65,0,.45,1) 740ms forwards; } @keyframes lr-share-circle { to { stroke-dashoffset: 0; } } @keyframes lr-share-check { to { stroke-dashoffset: 0; } } .lr-share-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; animation: lr-share-fade 480ms ease 900ms both; } .lr-share-sub { font-size: 0.92rem; color: var(--body); margin: 0 0 22px; animation: lr-share-fade 480ms ease 1000ms both; } @keyframes lr-share-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .lr-share-url { display: flex; gap: 8px; align-items: center; background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 6px 6px 6px 14px; margin-bottom: 18px; animation: lr-share-fade 480ms ease 1100ms both; } .lr-share-url input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--font-mono); font-size: 0.86rem; color: var(--body); padding: 8px 0; min-width: 0; } .lr-share-url .btn { min-width: 96px; } .lr-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; animation: lr-share-fade 480ms ease 1200ms both; } @media (max-width: 480px) { .lr-share-grid { grid-template-columns: repeat(2, 1fr); } } .lr-share-btn { --c: #0a0a0a; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); color: var(--body); font-size: 0.78rem; font-weight: 500; text-decoration: none; transition: transform 160ms, background 160ms, border-color 160ms, color 160ms; cursor: pointer; } .lr-share-btn:hover { transform: translateY(-2px); background: var(--surface-2); border-color: var(--c); color: var(--ink); } .lr-share-btn-ico { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #fff; } .lr-share-btn-ico svg { width: 18px; height: 18px; } .lr-share-foot { text-align: center; font-size: 0.82rem; animation: lr-share-fade 480ms ease 1300ms both; } .lr-share-open { color: var(--accent); text-decoration: none; font-weight: 500; } .lr-share-open:hover { text-decoration: underline; } /* Confetti */ .lr-confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 99999; overflow: hidden; } .lr-confetti { position: absolute; top: 35%; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: lr-confetti-fall 1800ms cubic-bezier(.2,.6,.4,1) forwards; } @keyframes lr-confetti-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 400px)) rotate(var(--rot, 360deg)); } } @media (prefers-reduced-motion: reduce) { .lr-share-body { animation: none; } .lr-share-check-circle, .lr-share-check-path { animation: none; stroke-dashoffset: 0; } .lr-share-title, .lr-share-sub, .lr-share-url, .lr-share-grid, .lr-share-foot { animation: none; opacity: 1; } .lr-confetti-layer { display: none; } } /* ============ Print friendly ============ */ @media print { .dash-topbar, .prop-pagehead, .prop-actions, .btn, .prop-filters, .prop-preview, .prop-history, .prop-form-actions { display: none !important; } body.prop-admin { background: #fff; color: #000; } .prop-table thead th { background: #f3f3f3; color: #555; } .prop-card { box-shadow: none; border: 1px solid #ccc; } } /* ============ Spacing review · breathing room (2026-05-27) ============ * Overrides inline gap/padding nos modais clientes/produtos pra acompanhar * o sistema. !important porque os PHP setam inline style. */ .lr-confirm-dialog .lr-confirm-head { padding: var(--space-md) var(--space-lg) var(--space-sm) !important; } .lr-confirm-dialog .lr-confirm-body { padding: var(--space-lg) !important; gap: var(--space-md) !important; } .lr-confirm-dialog .lr-confirm-foot { padding: var(--space-md) var(--space-lg) !important; gap: var(--space-sm) !important; } .lr-confirm-dialog .prop-form { gap: var(--space-md); } /* Pagehead respira mais */ .prop-pagehead { margin-bottom: var(--space-lg); gap: var(--space-md); } .prop-pagehead h1 { line-height: 1.2; } .prop-meta-line { gap: 10px; flex-wrap: wrap; line-height: 1.6; } .prop-meta-line .sep { margin: 0 2px; } /* Section number/title (intra-grid em editar.php) */ .prop-edit-grid { gap: var(--space-md); } /* Inputs file/checkbox dentro de form */ .prop-form input[type="file"] { padding: 10px 12px; } .prop-form input[type="checkbox"] { width: auto; padding: 0; } /* Hint mais legível */ .prop-form .hint { margin-top: 6px; line-height: 1.55; } /* Auto-sum: valor_total travado quando soma automática ativa */ .prop-form input.is-locked { background: var(--canvas-2); color: var(--muted); cursor: not-allowed; border-style: dashed; } .prop-autosum-toggle { user-select: none; } .prop-autosum-toggle .lr-icon { color: var(--muted); } .prop-escopo-summary { transition: background 160ms; } /* ===== Row actions menu (⋯) — 2026-05-27 ===== */ .prop-row-menu { position: relative; display: inline-block; } .prop-row-menu__btn { background: transparent; border: 1px solid var(--hairline); color: var(--muted); border-radius: 6px; width: 28px; height: 28px; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; transition: all 160ms ease; display: inline-flex; align-items: center; justify-content: center; } .prop-row-menu__btn:hover { background: var(--surface-2); color: var(--body); border-color: var(--accent); } .prop-row-menu.is-open .prop-row-menu__btn { background: var(--surface-2); color: var(--body); border-color: var(--accent); } .prop-row-menu__items { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px; min-width: 180px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); animation: propMenuIn 140ms ease-out; } @keyframes propMenuIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .prop-row-menu.is-open .prop-row-menu__items { display: block; } .prop-row-menu__item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; width: 100%; background: transparent; border: 0; cursor: pointer; color: var(--body); font-size: 13px; font-family: inherit; text-align: left; border-radius: 4px; transition: background-color 120ms ease, color 120ms ease; } .prop-row-menu__item:hover, .prop-row-menu__item:focus-visible { background: var(--surface-2); outline: none; } .prop-row-menu__item--danger { color: #ef4444; } .prop-row-menu__item--danger:hover { background: rgba(239, 68, 68, 0.08); } .prop-row-menu__item .lr-icon { color: var(--muted); flex-shrink: 0; } .prop-row-menu__item--danger .lr-icon { color: #ef4444; } .prop-row-menu__sep { height: 1px; background: var(--hairline); margin: 4px 6px; } /* ===== Row link (nome/título clicável) — 2026-05-27 ===== */ .prop-row-link { color: inherit; text-decoration: none; display: inline-block; border-radius: 3px; transition: color 140ms ease; } .prop-row-link:hover { color: var(--accent, #34d399); text-decoration: underline; text-underline-offset: 3px; } .prop-row-link--id { font-family: var(--font-mono); color: var(--muted); } .prop-row-link--id:hover { color: var(--accent, #34d399); } .prop-name-link:hover { color: var(--accent, #34d399) !important; text-decoration: underline; text-underline-offset: 3px; } /* Menu portaled to body (escapes overflow:scroll table wrap) IMPORTANTE: display:block obrigatório porque o seletor descendant .prop-row-menu.is-open .prop-row-menu__items deixa de matchar quando items é movido pro body. */ .prop-row-menu__items.is-portaled { display: block !important; position: fixed !important; z-index: 9999; right: auto; top: auto; } /* ============================================================ PAINEL CRM · /admin/painel.php · 2026-05-27 ============================================================ */ .painel-section__title-h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--body); margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); } .painel-section__title-h2 .lr-icon { color: var(--muted); } /* ===== KPIs ===== */ /* Container aside full-width: KPI hero + lista 2-col minimal */ .painel-kpi-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0 16px; margin-bottom: var(--space-md); } .painel-kpi-list--full { width: 100%; } /* Hero KPI row (3 KPIs principais no topo do aside) */ .painel-kpi-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; } @media (max-width: 540px) { .painel-kpi-hero { grid-template-columns: 1fr; gap: 10px; } } .painel-kpi-hero__item { min-width: 0; } .painel-kpi-hero__lab { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .painel-kpi-hero__val { display: block; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; color: var(--body); letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .painel-kpi-hero__val--money { color: var(--accent, #34d399); } .painel-kpi-hero__val--ok { color: #10b981; } .painel-kpi-hero__hint { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; } /* Lista 2-col grid — itens em 2 colunas pra economizar altura */ .painel-kpi-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding: 4px 0 8px; } @media (max-width: 700px) { .painel-kpi-list-grid { grid-template-columns: 1fr; gap: 0; } } /* Lista linear minimal — só texto + número colorido */ .painel-kpi-list-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); } .painel-kpi-list-item:last-child { border-bottom: 0; } /* Em 2-col grid: última linha de cada coluna sem borda */ .painel-kpi-list-grid .painel-kpi-list-item:nth-last-child(-n+2):not(:nth-last-child(2):nth-child(odd)) { border-bottom: 0; } .painel-kpi-list-item__txt { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .painel-kpi-list-item__lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); } .painel-kpi-list-item__hint { font-size: 10px; color: var(--muted); } .painel-kpi-list-item__val { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--body); white-space: nowrap; letter-spacing: -0.01em; } .painel-kpi-list-item__val--money { color: var(--accent, #34d399); } .painel-kpi-list-item__val--ok { color: #10b981; } .painel-kpi-list-item__val--time { color: #8b5cf6; } /* ===== Modal Período ===== */ .lr-modal-periodo[hidden] { display: none; } .lr-modal-periodo { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; } .lr-modal-periodo__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .lr-modal-periodo__panel { position: relative; background: var(--surface, #111); border: 1px solid var(--hairline, #2a2a2a); border-radius: var(--radius, 8px); width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: lrModalIn 160ms ease-out; } @keyframes lrModalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .lr-modal-periodo__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); } .lr-modal-periodo__head h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .lr-modal-periodo__x { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .lr-modal-periodo__x:hover { color: var(--body); } .lr-modal-periodo__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; } .lr-modal-periodo__presets { display: flex; flex-wrap: wrap; gap: 6px; } .lr-modal-periodo__presets .btn { font-size: 12px; padding: 6px 10px; } .lr-modal-periodo__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lr-modal-periodo__inputs label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .lr-modal-periodo__inputs input[type="date"] { font-family: var(--font-mono); font-size: 13px; background: var(--bg, #0a0a0a); border: 1px solid var(--hairline); border-radius: 6px; color: var(--body); padding: 8px 10px; } .lr-modal-periodo__inputs input[type="date"]:focus { outline: none; border-color: var(--accent, #34d399); } .lr-modal-periodo__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--hairline); } body.lr-modal-open { overflow: hidden; } /* ===== Alertas ===== */ .painel-alertas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-sm); } .painel-alerta { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid; border-radius: var(--radius-lg); padding: 14px 16px; } .painel-alerta--danger { border-left-color: #ef4444; } .painel-alerta--warn { border-left-color: #f59e0b; } .painel-alerta--info { border-left-color: #3b82f6; } .painel-alerta__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; } .painel-alerta__dot { width: 8px; height: 8px; border-radius: 50%; } .painel-alerta--danger .painel-alerta__dot { background: #ef4444; animation: pulseDot 1.4s ease-in-out infinite; } .painel-alerta--warn .painel-alerta__dot { background: #f59e0b; } .painel-alerta--info .painel-alerta__dot { background: #3b82f6; } @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .painel-alerta__count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 999px; } .painel-alerta__list { list-style: none; padding: 0; margin: 0; } .painel-alerta__list li { border-top: 1px solid var(--hairline); padding: 8px 0; } .painel-alerta__list li:first-child { border-top: 0; padding-top: 0; } .painel-alerta__link { text-decoration: none; color: var(--body); display: block; } .painel-alerta__link:hover .painel-alerta__title { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .painel-alerta__title { display: block; font-size: 13px; font-weight: 500; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .painel-alerta__link small { font-size: 11px; color: var(--muted); } /* ===== Funil ===== */ .painel-funil-grid { display: grid; gap: 8px; margin-bottom: var(--space-md); } .painel-funil-row { display: grid; grid-template-columns: 90px 1fr 40px; gap: 12px; align-items: center; } .painel-funil-label { font-size: 12px; color: var(--muted); text-transform: capitalize; } .painel-funil-bar { height: 10px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .painel-funil-fill { height: 100%; border-radius: 4px; transition: width 400ms cubic-bezier(.2,.8,.2,1); } .painel-funil-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--body); text-align: right; } .painel-tempos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px dashed var(--hairline); } .painel-tempo { text-align: center; padding: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); } .painel-tempo__label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } .painel-tempo__val { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--body); letter-spacing: -0.02em; } /* ===== Kanban ===== */ .painel-kanban-board { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; } @media (max-width: 900px) { .painel-kanban-board { grid-template-columns: repeat(5, 250px); } } .kanban-col { background: var(--surface); border: 1px solid var(--hairline); border-top: 3px solid transparent; border-radius: var(--radius); display: flex; flex-direction: column; min-height: 320px; } .kanban-col__head { padding: 10px 12px; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--hairline); font-size: 12px; } .kanban-col__head strong { font-weight: 600; color: var(--body); font-size: 13px; } .kanban-col__count { background: var(--surface-2); color: var(--muted); font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700; } .kanban-col__sum { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .kanban-col__body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; transition: background-color 160ms ease; } .kanban-col__body.is-over { background: rgba(52, 211, 153, 0.06); outline: 2px dashed rgba(52, 211, 153, 0.35); outline-offset: -8px; } .kanban-col__empty { text-align: center; color: var(--muted); font-size: 12px; padding: 20px 0; border: 1px dashed var(--hairline); border-radius: var(--radius); margin-top: 6px; } .kanban-card { background: var(--canvas-2, #0e0e0e); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 12px; cursor: grab; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .kanban-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.3); } .kanban-card:active { cursor: grabbing; } .kanban-card.is-dragging { opacity: 0.4; transform: rotate(2deg); } .kanban-card--warn { border-left: 3px solid #f59e0b; } .kanban-card--danger { border-left: 3px solid #ef4444; } .kanban-card__title { display: block; font-size: 13px; font-weight: 500; color: var(--body); text-decoration: none; line-height: 1.3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-card__title:hover { color: var(--accent); text-decoration: underline; } .kanban-card__cliente { font-size: 11px; color: var(--muted); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban-card__meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; } .kanban-card__valor { color: var(--body); font-weight: 600; } .kanban-card__dias { color: var(--muted); } .kanban-card--warn .kanban-card__dias { color: #f59e0b; font-weight: 600; } .kanban-card--danger .kanban-card__dias { color: #ef4444; font-weight: 600; } /* ===================================================================== RESPONSIVIDADE + ERGONOMIA — overhaul 2026-06-09 (largura/mobile/UX) Camada final: corrige largura, mata barra horizontal de página, reflui todas as páginas no mobile e iguala alvos de toque. ===================================================================== */ /* Boards/kanban: cabem na largura nova sem barra; barra só em telas estreitas, contida */ .painel-kanban-board { grid-template-columns: repeat(5, minmax(200px, 1fr)); scroll-snap-type: x proximity; } .painel-kanban-board > * { scroll-snap-align: start; } @media (max-width: 900px) { .painel-kanban-board { grid-template-columns: repeat(5, minmax(220px, 1fr)); } } /* Tabelas: scroll horizontal CONTIDO no card (nunca empurra a página) + rolagem por toque */ .prop-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; } /* Pagehead: empilha no mobile, ações descem e ocupam a linha */ @media (max-width: 720px) { .prop-pagehead { flex-direction: column; align-items: stretch; gap: var(--space-sm); } .prop-pagehead .prop-actions { justify-content: flex-start; } } /* Action bars / filtros: quebram linha, sem estourar */ .prop-actions { flex-wrap: wrap; } /* Alvos de toque maiores no mobile (ergonomia) */ @media (max-width: 720px) { .btn { min-height: 40px; } .btn--sm { min-height: 38px; } .prop-form input, .prop-form select, .prop-form textarea { font-size: 16px; /* evita zoom iOS */ min-height: 44px; } /* Botões de ação isolados ocupam largura total p/ alcance do polegar */ .prop-pagehead .prop-actions .btn { flex: 1 1 auto; justify-content: center; } } /* Grids genéricos: filhos podem encolher (impede overflow por conteúdo longo) */ .prop-form__row > *, .prop-edit-grid > *, .painel-kpi-hero__item { min-width: 0; } /* Imagens/medias nunca estouram o container */ .prop-card img, .prop-page img { max-width: 100%; height: auto; } /* Modais/dialogs: largura segura no mobile */ @media (max-width: 560px) { dialog, .lr-dialog, .lr-confirm-dialog, .lr-share-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } } /* Entrada global LEVE e uniforme (sem stagger) — fluidez na navegação sem cansar. Stagger rico fica EXCLUSIVO do CRM (kanban), e lá só na 1ª visita da sessão. */ @keyframes propPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .prop-page { animation: propPageIn 160ms ease-out both; } @media (prefers-reduced-motion: reduce) { .prop-page { animation: none; } } /* Foco visível consistente (acessibilidade/ergonomia) */ .prop-nav__link:focus-visible, .prop-mnav__link:focus-visible, .btn:focus-visible, .prop-form input:focus-visible, .prop-form select:focus-visible, .prop-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }