/** * EventOTSS — Design System * --------------------------------------------------------------------------- * Fonte única de cores, tipografia, raios, sombras e regras responsivas. * Carregado logo após o Bootstrap em TODAS as páginas (painel e públicas). * * Regras de uso (ver docs/standards/DESIGN_SYSTEM.md): * - Nunca use hexadecimais soltos em CSS novo: use as variáveis abaixo ou as * do Bootstrap (--bs-primary, --bs-success…), que já estão alinhadas. * - Prefira utilitários do Bootstrap a estilos inline. * - Breakpoints: os mesmos do Bootstrap (576 / 768 / 992 / 1200 / 1400). */ /* 1. TOKENS ---------------------------------------------------------------- */ :root { /* Marca (paleta atual preservada) */ --app-primary: #0d6efd; --app-primary-hover: #0b5ed7; --app-primary-active: #0a58ca; --app-primary-soft: #e7f0ff; --app-primary-subtle-border: #b6d4fe; --app-success: #198754; --app-success-soft: #e8f5ee; --app-warning: #ffc107; --app-warning-soft: #fff8db; --app-danger: #dc3545; --app-danger-soft: #fdecee; --app-info: #0dcaf0; --app-purple: #6f42c1; /* Neutros */ --app-text: #202936; --app-text-muted: #5b6676; --app-text-subtle: #8492a6; --app-surface: #f4f7fb; --app-surface-raised: #ffffff; --app-surface-sunken: #eef2f7; --app-border: #dfe7f0; --app-border-strong: #c9d2df; --app-sidebar: #18212f; --app-sidebar-text: #c9d2df; --app-focus: #86b7fe; /* Forma */ --app-radius-sm: .375rem; --app-radius: .5rem; --app-radius-lg: .75rem; --app-radius-xl: 1rem; --app-radius-pill: 50rem; --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08); --app-shadow: 0 4px 12px rgba(16, 24, 40, .08); --app-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14); /* Dimensões */ --app-control-height: 2.5rem; /* 40px em ponteiro fino */ --app-touch-target: 2.75rem; /* 44px (WCAG 2.5.5 / Apple HIG) */ --app-content-max: 1680px; /* leitura confortável em telas grandes */ --app-font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* Alinhamento do Bootstrap aos tokens */ --bs-body-font-family: var(--app-font-family); --bs-body-color: var(--app-text); --bs-secondary-color: var(--app-text-muted); --bs-border-color: var(--app-border); --bs-border-radius: var(--app-radius); --bs-border-radius-sm: var(--app-radius-sm); --bs-border-radius-lg: var(--app-radius-lg); --bs-border-radius-xl: var(--app-radius-xl); --bs-box-shadow-sm: var(--app-shadow-sm); --bs-box-shadow: var(--app-shadow); --bs-box-shadow-lg: var(--app-shadow-lg); --bs-focus-ring-color: rgba(13, 110, 253, .35); } /* 2. BASE ----------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--app-font-family); color: var(--app-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg, video, canvas, iframe { max-width: 100%; } img, video { height: auto; } /* Títulos fluidos: mesma hierarquia do celular ao monitor 4K */ h1, .h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); } h2, .h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.85rem); } h3, .h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.5rem); } h1, h2, h3, .h1, .h2, .h3 { line-height: 1.2; text-wrap: balance; } p { text-wrap: pretty; } /* Foco visível e consistente em toda a aplicação */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: .2rem solid var(--app-focus); outline-offset: .12rem; } /* 3. COMPONENTES ---------------------------------------------------------- */ /* Botões: um único raio para todas as ações (pílula fica para badges/chips). */ .btn { --bs-btn-border-radius: var(--app-radius); --bs-btn-font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .btn-sm { --bs-btn-border-radius: var(--app-radius-sm); } .btn.rounded-pill { border-radius: var(--app-radius) !important; } .btn.btn-sm.rounded-pill { border-radius: var(--app-radius-sm) !important; } .btn > i + span, .btn > i.me-1, .btn > i.me-2 { margin-right: 0 !important; } .btn-group > .btn, .input-group > .btn { display: inline-flex; } .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-active); --bs-btn-active-border-color: var(--app-primary-active); } /* Campos: placeholder discreto e altura uniforme */ .form-control, .form-select { min-height: var(--app-control-height); } .form-control-sm, .form-select-sm { min-height: calc(var(--app-control-height) - .5rem); } .form-control::placeholder { color: var(--app-text-subtle); font-weight: 400; opacity: 1; } .form-label { font-weight: 600; } /* Cabeçalho de página padrão: título + ações, quebra limpa no celular. */ .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; } .page-header > :first-child { flex: 1 1 18rem; min-width: 0; } .page-header > :not(:first-child) { display: flex; flex-wrap: wrap; gap: .5rem; } @media (max-width: 575.98px) { .page-header > .btn, .page-header > :not(:first-child) { width: 100%; } .page-header > :not(:first-child) > .btn { flex: 1 1 auto; } } /* Cartões */ .card { --bs-card-border-color: var(--app-border); --bs-card-border-radius: var(--app-radius-lg); --bs-card-inner-border-radius: calc(var(--app-radius-lg) - 1px); } .card.rounded-4 { border-radius: var(--app-radius-lg) !important; } /* Feedback de preenchimento (form-feedback.js) — mesmo visual em todo o sistema. Erro: borda vermelha + mensagem abaixo. Acerto: borda verde + ícone. */ :root { --app-invalid: var(--app-danger); --app-valid: var(--app-success); } .form-control.is-api-invalid, .form-select.is-api-invalid { border-color: var(--app-invalid); padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(.75em + .375rem) calc(.75em + .375rem); } .form-select.is-api-invalid { background-position: right .75rem center, center right 2.25rem; } .ts-wrapper.is-invalid .ts-control, .ts-wrapper.is-api-invalid .ts-control { border-color: var(--app-invalid) !important; } .ts-wrapper.is-valid .ts-control { border-color: var(--app-valid) !important; } .ts-wrapper.is-invalid.focus .ts-control, .ts-wrapper.is-api-invalid.focus .ts-control { box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .2); } .invalid-feedback { font-weight: 500; } .invalid-feedback::before { content: "\f06a"; margin-right: .3rem; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free"; font-weight: 900; } .input-group > .is-invalid ~ .invalid-feedback, .input-group + .invalid-feedback { display: block; } .ff-counter { margin-top: .15rem; font-variant-numeric: tabular-nums; } /* Badges continuam em pílula (padrão visual de status) */ .badge { font-weight: 600; letter-spacing: .01em; } /* Modais: margens seguras e rolagem interna no celular */ .modal-content { border-radius: var(--app-radius-lg); } /* Formulário envolvendo cabeçalho/corpo/rodapé do modal: sem isto o corpo não rola e o rodapé (Salvar/Cancelar) sai da tela em monitores baixos. */ .modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-content > form > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .modal-dialog-scrollable .modal-content > form > :is(.modal-header, .modal-footer) { flex-shrink: 0; } /* 4. TABELAS RESPONSIVAS -------------------------------------------------- */ /* Indica visualmente que há conteúdo além da borda (sombras de rolagem). */ .table-responsive { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; background: linear-gradient(to right, var(--bs-body-bg) 30%, rgba(255, 255, 255, 0)) left center / 2rem 100% no-repeat local, linear-gradient(to left, var(--bs-body-bg) 30%, rgba(255, 255, 255, 0)) right center / 2rem 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0)) left center / .75rem 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0)) right center / .75rem 100% no-repeat scroll; } .table-responsive > .table { background-color: transparent; } .table > thead th { white-space: nowrap; } /* Coluna de ações sempre visível quando a tabela rola na horizontal. */ @media (max-width: 1199.98px) { .table-responsive > .table > :is(thead, tbody) > tr > :last-child:not(:only-child) { position: sticky; right: 0; z-index: 1; background-color: var(--bs-body-bg); box-shadow: inset 1px 0 0 var(--app-border), -.5rem 0 .75rem -.5rem rgba(16, 24, 40, .18); } .table-responsive > .table > thead > tr > :last-child:not(:only-child) { background-color: var(--bs-table-bg, var(--bs-body-bg)); } .table-responsive > .table-hover > tbody > tr:hover > :last-child { background-color: var(--bs-tertiary-bg); } } /* Celular: cada linha vira um cartão empilhado (rótulos via responsive-tables.js). */ @media (max-width: 575.98px) { .table-responsive:has(> .table-stack-ready) { background: none; overflow-x: visible; } .table-stack-ready > thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; } .table-stack-ready, .table-stack-ready > tbody, .table-stack-ready > tbody > tr { display: block; width: 100% !important; min-width: 0 !important; } .table-stack-ready > tbody > tr { padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); } .table-stack-ready > tbody > tr > td { display: block; width: 100%; max-width: 100%; min-width: 0; padding: .35rem 0; border: 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; } .table-stack-ready > tbody > tr > td::before { content: attr(data-label); display: block; margin-bottom: .15rem; color: var(--app-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .table-stack-ready > tbody > tr > td:is([data-label=""], :not([data-label]))::before { content: none; } .table-stack-ready > tbody > tr > td[data-label="#"] { display: none; } .table-stack-ready > tbody > tr > td.table-stack-full { display: block; padding: 1rem 0; text-align: center !important; } .table-stack-ready > tbody > tr > td.table-stack-full::before { content: none; } .table-responsive > .table-stack-ready > :is(thead, tbody) > tr > :last-child:not(:only-child) { position: static; box-shadow: none; background: transparent; } .table-stack-ready > tbody > tr > td:last-child:not(:only-child):not(.table-stack-full) { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; padding-top: .6rem; } .table-stack-ready > tbody > tr > td:last-child:not(:only-child)::before { flex: 1 0 100%; } } /* 5. LAYOUT DO PAINEL ----------------------------------------------------- */ /* Telas grandes: conteúdo centralizado com largura máxima legível. */ .app-main > :not(script, style, link, .modal, .offcanvas, .toast-container) { max-width: var(--app-content-max); margin-inline: auto; } .max-w-7xl { max-width: var(--app-content-max); } /* 6. TOQUE (celular e tablet) --------------------------------------------- */ @media (pointer: coarse) { .btn:not(.btn-close):not(.btn-link), .form-control, .form-select, .page-link, .nav-link, .dropdown-item, .list-group-item-action { min-height: var(--app-touch-target); } .btn-sm:not(.btn-close) { min-height: 2.25rem; min-width: 2.25rem; } .form-check-input { width: 1.25em; height: 1.25em; } .form-control, .form-select { font-size: max(1rem, 16px); } /* evita zoom automático no iOS */ } /* 7. CELULAR -------------------------------------------------------------- */ @media (max-width: 575.98px) { .modal-dialog:not([class*="modal-fullscreen"]) { margin: .5rem; } .modal-footer { gap: .5rem; } .modal-footer > .btn { flex: 1 1 auto; } .pagination { flex-wrap: wrap; gap: .25rem; } .card-body { padding: 1rem; } .dropdown-menu { max-width: calc(100vw - 1rem); } } /* 8. IMPRESSÃO ------------------------------------------------------------ */ @media print { .app-sidebar, .app-navbar, .app-footer, .app-skip-link, .btn, .toast-container { display: none !important; } .app-main { padding: 0 !important; } .table-responsive { background: none; overflow: visible !important; } } /* 9. MOVIMENTO REDUZIDO --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Barra padrão de filtros das linhas do tempo (timeline-filters.js). */ .app-timeline-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem .75rem; align-items: end; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); } .app-timeline-filters .form-label { margin-bottom: .2rem; font-size: .78rem; } .app-timeline-filters__actions { display: flex; gap: .5rem; } .app-timeline-filters__actions .btn:first-child { flex: 1 1 auto; } /* JustValidate marca o