/* CCSI / IPC – Base CSS (clean, enxuto, sem Bootstrap) Compatível com desktop e mobile | JSF + PrimeFaces 7+ Autor: ccsi_ipc */ /* ===================== 1) Design Tokens ===================== */ :root{ /* Cores extraídas dos logos IPC / Polícia Civil */ --brand-600:#BDA558; /* dourado escuro (Polícia Civil) */ --brand-500:#D6C84C; /* dourado (IPC) */ --brand-400:#E5DA80; /* dourado claro */ --brand-300:#F1EDB6; /* areia */ --ink-900:#3A382E; /* quase preto quente */ --ink-800:#3E4771; /* azul marinho do logo IPC */ --ink-700:#747153; /* oliva */ --ink-600:#A3A6A4; /* cinza médio */ --ink-100:#ECECEC; /* cinza muito claro */ --ink-050:#F5F4F3; /* off-white */ --accent-500:#089176; /* verde teal do logo IPC */ --accent-600:#067862; /* teal mais escuro */ /* Tipografia */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Escalas */ --radius-xs:.25rem; --radius-sm:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.25rem; --radius-2xl:1.5rem; --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 2px 8px rgba(0,0,0,.12); --shadow-lg:0 10px 20px rgba(0,0,0,.16); --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; /* Breakpoints */ --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; } /* Dark mode opcional (ativa com data-theme="dark" no ) */ :root[data-theme="dark"]{ --ink-050:#141414; --ink-100:#1b1b1b; --ink-800:#c9d1d9; --ink-900:#e6edf3; --brand-500:#C9BB4C; --brand-600:#A7923C; --accent-500:#0AA184; --accent-600:#07866C; } /* ===================== 2) Reset enxuto + acessibilidade ===================== */ *{ box-sizing:border-box } html,body{ height:100% } html{ font-family:var(--font-sans); -webkit-text-size-adjust:100% } body{ margin:0; color:var(--ink-900); background:var(--ink-050); line-height:1.45 } img,svg,video,canvas{ max-width:100%; height:auto } a{ color:var(--accent-600); text-decoration:none } a:hover{ text-decoration:underline } :focus{ outline:none } :focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px } .visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap } /* reduzir animações para quem prefere */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important } } /* ===================== 3) Layout utilitário ===================== */ .container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-4) } .row{ display:flex; flex-wrap:wrap; gap:var(--space-4) } .col{ flex:1 1 0 } .col-12{ flex:0 0 100% } @media (min-width:var(--bp-md)){ .col-md-6{ flex:0 0 calc(50% - var(--space-4)) } .col-md-4{ flex:0 0 calc(33.333% - var(--space-4)) } .col-md-3{ flex:0 0 calc(25% - var(--space-4)) } } .card{ background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:var(--space-5) } .surface{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm) } .elev-0{ box-shadow:none } .header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--ink-100) } .header .brand{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4) } .header .brand img{ height:36px } .page-title{ font-size:1.25rem; font-weight:700; margin:var(--space-4) 0 } /* Espaçamentos util */ .mt-2{ margin-top:var(--space-2) } .mt-4{ margin-top:var(--space-4) } .mt-6{ margin-top:var(--space-6) } .mb-2{ margin-bottom:var(--space-2) } .mb-4{ margin-bottom:var(--space-4) } .mb-6{ margin-bottom:var(--space-6) } .p-2{ padding:var(--space-2) } .p-4{ padding:var(--space-4) } .p-6{ padding:var(--space-6) } /* ===================== 4) Tipografia ===================== */ .h1{ font-size:1.75rem; font-weight:800 } .h2{ font-size:1.5rem; font-weight:700 } .h3{ font-size:1.25rem; font-weight:700 } .lead{ font-size:1.05rem; color:var(--ink-800) } .small{ font-size:.875rem; color:var(--ink-700) } .mono{ font-family:var(--font-mono) } /* ===================== 5) Botões (nativos + PrimeFaces) ===================== */ .btn,.ui-button{ display:inline-flex; align-items:center; gap:.5rem; justify-content:center; cursor:pointer; user-select:none; border:0; border-radius:var(--radius-lg); font-weight:700; padding:.625rem 1rem; transition:transform .02s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; box-shadow:var(--shadow-sm) } .btn:active,.ui-button:active{ transform:translateY(1px) } .btn:disabled,.ui-button.ui-state-disabled{ opacity:.6; cursor:not-allowed } /* primário (dourado) — aplique com styleClass="btn btn-primary" */ .btn-primary{ background:linear-gradient(180deg, var(--brand-500), var(--brand-600)); color:#1b1b1b } .btn-primary:hover{ filter:brightness(.98) } .btn-primary:focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px } /* secundário */ .btn-secondary{ background:var(--ink-900); color:#fff } .btn-secondary:hover{ filter:brightness(1.03) } /* sucesso / atenção / perigo */ .btn-success{ background:var(--accent-500); color:#fff } .btn-warning{ background:var(--brand-500); color:#1f1f1f } .btn-danger{ background:#c53939; color:#fff } /* Botões text/link */ .btn-ghost{ background:transparent; color:var(--ink-900) } .btn-ghost:hover{ background:var(--ink-100) } /* Ícones alinhados */ .btn .icon{ width:1rem; height:1rem; display:inline-block } /* ===================== 6) Formulários (nativo + PrimeFaces) ===================== */ input[type=text],input[type=password],input[type=number],input[type=date],textarea,select,.ui-inputfield{ width:100%; border:1px solid var(--ink-100); background:#fff; color:var(--ink-900); border-radius:var(--radius-md); padding:.6rem .75rem; outline:none; transition:border .2s ease, box-shadow .2s ease } input::placeholder,textarea::placeholder{ color:#9aa0a6 } input:focus,textarea:focus,select:focus,.ui-inputfield.ui-state-focus{ border-color:var(--accent-500); box-shadow:0 0 0 3px rgba(8,145,118,.15) } .ui-inputfield.ui-state-error{ border-color:#e48a8a; box-shadow:0 0 0 3px rgba(229,102,102,.15) } .ui-inputfield:disabled, input:disabled, textarea:disabled, select:disabled{ background:#f6f6f6; color:#888 } /* Layout de formulário */ label{ display:block; font-weight:600; margin-bottom:.35rem } .form-row{ display:flex; gap:var(--space-4); flex-wrap:wrap } .form-col{ flex:1 1 12rem } /* Mensagens de validação PrimeFaces */ .ui-message-error,.ui-messages-error{ background:#fde8e8; color:#8a1f1f; border:1px solid #f6c6c6; border-radius:var(--radius-md); padding:.5rem .75rem } .ui-message-info,.ui-messages-info{ background:#e8f6f1; color:#0a5e4e; border:1px solid #c5ece1; border-radius:var(--radius-md); padding:.5rem .75rem } /* Checkbox/Radio PrimeFaces */ .ui-chkbox-box,.ui-radiobutton-box{ border:1px solid var(--ink-600); border-radius:var(--radius-xs); width:18px; height:18px } .ui-chkbox-box.ui-state-active,.ui-radiobutton-box.ui-state-active{ background:var(--accent-500); border-color:var(--accent-500) } /* ===================== 7) Componentes PrimeFaces principais ===================== */ /* Dialog */ .ui-dialog{ border:0; border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg) } .ui-dialog .ui-dialog-titlebar{ background:#fff; border:0; padding:var(--space-4); border-bottom:1px solid var(--ink-100); border-radius:var(--radius-2xl) var(--radius-2xl) 0 0; font-weight:800 } .ui-dialog .ui-dialog-content{ padding:var(--space-5); background:#fff } .ui-dialog .ui-dialog-footer{ padding:var(--space-4); border-top:1px solid var(--ink-100); background:#fff; border-radius:0 0 var(--radius-2xl) var(--radius-2xl) } .ui-widget-overlay,.ui-dialog-mask{ background:rgba(0,0,0,.35) } /* máscara mais suave */ /* DataTable */ .ui-datatable{ background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); overflow:hidden } .ui-datatable table{ width:100%; border-collapse:collapse } .ui-datatable thead th{ background:var(--ink-100); color:var(--ink-900); text-align:left; padding:.65rem .75rem; font-weight:700 } .ui-datatable thead th.ui-state-active{ background:var(--brand-300) } /* coluna ordenada */ .ui-datatable tbody td{ border-top:1px solid var(--ink-100); padding:.6rem .75rem } .ui-datatable .ui-paginator{ padding:.5rem; border-top:1px solid var(--ink-100) } .ui-datatable .ui-paginator .ui-paginator-page.ui-state-active{ background:var(--brand-500); color:#1b1b1b; border-radius:var(--radius-sm) } .ui-datatable .ui-state-highlight{ background:var(--brand-300)!important } /* Toolbar */ .ui-toolbar{ background:#fff; border:1px solid var(--ink-100); padding:.5rem; border-radius:var(--radius-lg) } /* Breadcrumb */ .ui-breadcrumb{ background:transparent; border:0 } .ui-breadcrumb ul li{ color:var(--ink-700) } .ui-breadcrumb .ui-menuitem-link{ color:var(--accent-600) } /* Calendar */ .ui-datepicker{ border:0; box-shadow:var(--shadow-md); border-radius:var(--radius-lg) } .ui-datepicker .ui-datepicker-header{ background:#fff; border-bottom:1px solid var(--ink-100) } /* FileUpload */ .ui-fileupload{ background:#fff; border:1px dashed var(--ink-100); padding:var(--space-4); border-radius:var(--radius-lg) } /* Captcha */ .ui-captcha{ border-radius:var(--radius-lg); overflow:hidden } /* Growl/Toast */ .ui-growl-item{ border-radius:var(--radius-md) } /* ===================== 8) Avisos/Chips/Badges ===================== */ .badge{ display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700 } .badge-ok{ background:var(--accent-500); color:#fff } .badge-warn{ background:var(--brand-500); color:#1f1f1f } .badge-danger{ background:#c53939; color:#fff } .alert{ padding:.75rem 1rem; border-radius:var(--radius-lg); border:1px solid transparent } .alert-ok{ background:#e8f6f1; color:#0a5e4e; border-color:#c5ece1 } .alert-warn{ background:#fff9e6; color:#6a530a; border-color:#f3e3a0 } .alert-danger{ background:#fde8e8; color:#8a1f1f; border-color:#f6c6c6 } /* ===================== 9) Navegação lateral (opcional) ===================== */ .sidebar{ position:sticky; top:64px; align-self:flex-start; width:260px; background:#fff; border:1px solid var(--ink-100); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:var(--space-3) } .nav{ list-style:none; margin:0; padding:0 } .nav li a{ display:flex; gap:.5rem; align-items:center; padding:.5rem .75rem; border-radius:var(--radius-md); color:var(--ink-900) } .nav li a:hover,.nav li a.active{ background:var(--ink-100) } /* ===================== 10) Helpers de estado ===================== */ .is-hidden{ display:none!important } .is-disabled{ opacity:.6; pointer-events:none } .text-center{ text-align:center } .text-right{ text-align:right } /* ===================== 11) Header institucional com logotipos (opcional) ===================== */ .brand-strip{ display:flex; gap:var(--space-4); align-items:center; padding:var(--space-3) var(--space-4); background:linear-gradient(90deg, var(--ink-050), #fff) } .brand-strip .badge-sigla{ background:var(--brand-600); color:#1f1f1f; padding:.35rem .6rem; border-radius:999px; font-weight:800 } .brand-strip .divider{ flex:1; height:1px; background:var(--ink-100) } /* ===================== 12) Rodapé enxuto ===================== */ .footer{ margin-top:var(--space-8); padding:var(--space-4); color:var(--ink-700); font-size:.9rem } .footer .muted{ color:var(--ink-600) } /* ===================== 13) Print-friendly (laudos/relatórios) ===================== */ @media print{ .no-print{ display:none!important } body{ background:#fff } .card,.surface,.ui-datatable{ box-shadow:none; border:0 } } /* ===================== 14) Fundos institucionais (login / auth) ===================== */ /* base suave (já melhora o branco chapado) */ .page-auth{ background: radial-gradient(1200px 600px at 10% -10%, rgba(229,218,128,.18), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(182,170,105,.15), transparent 55%), linear-gradient(180deg, var(--ink-050) 0%, #fff 100%); min-height:100vh; } .page-auth::before{ content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, rgba(0,0,0,.015) 0 2px, transparent 2px 12px); filter:blur(.2px); } /* variante escura abstrata (institucional) */ .page-auth-dark{ background: radial-gradient(900px 500px at 15% 10%, rgba(8,145,118,.18), transparent 60%), radial-gradient(1200px 700px at 85% 15%, rgba(214,200,76,.10), transparent 60%), linear-gradient(180deg, #1d2130 0%, #242a3f 100%); min-height:100vh; } .page-auth-dark::before{ content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 14px), radial-gradient(60rem 30rem at 50% 0%, rgba(255,255,255,.03), transparent 70%); } /* variante com foto (use --login-bg na tag ) */ .page-auth-photo{ position:relative; background:#1b2032; min-height:100vh } .page-auth-photo::after{ content:""; position:fixed; inset:0; z-index:-1; background: radial-gradient(900px 500px at 15% 10%, rgba(8,145,118,.24), transparent 60%), radial-gradient(1100px 600px at 85% 20%, rgba(214,200,76,.16), transparent 60%), linear-gradient(180deg, rgba(27,32,50,.85) 0%, rgba(27,32,50,.75) 100%), var(--login-bg) center/cover no-repeat; filter:saturate(.95) contrast(.98); } /* Variante “Portal Delegacia Online” */ :root{ --portal-blue-600:#0b78b8; --portal-blue-700:#0a5f93; --portal-blue-800:#0a2f4a; --portal-blue-900:#091f32 } .page-auth-portal{ position:relative; min-height:100vh; background: radial-gradient(60rem 35rem at 75% -10%, rgba(11,120,184,.25), transparent 60%), linear-gradient(180deg, var(--portal-blue-900) 0%, var(--portal-blue-800) 100%); } .page-auth-portal[data-bg]::after{ content:""; position:fixed; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(9,31,50,.80) 0%, rgba(9,31,50,.75) 100%), radial-gradient(60rem 35rem at 80% 0%, rgba(11,120,184,.30), transparent 65%), var(--portal-login-bg, none) center/cover no-repeat; filter:saturate(.95) contrast(.98); } .page-auth-portal .login-card,.page-auth-portal .card{ background:#fff; border-radius:var(--radius-xl); box-shadow:0 12px 32px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.5) } .page-auth-portal .ui-inputfield, .page-auth-portal input[type=text], .page-auth-portal input[type=password]{ background:#fff; border:1px solid #e7e7e7; box-shadow:inset 0 1px 2px rgba(0,0,0,.04) } .page-auth-portal .btn-primary{ background:linear-gradient(180deg, var(--portal-blue-600), var(--portal-blue-700)); color:#fff } .page-auth-portal .btn-ghost{ color:#fff; background:rgba(255,255,255,.08) } .page-auth-portal a,.page-auth-portal .forgot-link{ color:#dfefff } .page-auth-portal a:hover,.page-auth-portal .forgot-link:hover{ color:#fff } /* dark mode das variantes */ :root[data-theme="dark"] .page-auth{ background: radial-gradient(1100px 600px at 0% -10%, rgba(10,161,132,.12), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(201,187,76,.10), transparent 55%), linear-gradient(180deg, #121212 0%, #171717 100%); } :root[data-theme="dark"] .page-auth::before{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 12px); }