/* ============================================================ IMA — Sistema de Design (Design System) Instituto do Meio Ambiente de Santa Catarina Versão 1.0 — base para todos os sistemas em código ============================================================ COMO USAR: … ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Marca — azuis */ --ima-blue: #00406D; /* azul institucional — menus, cabeçalhos */ --ima-blue-700: #0A4F82; /* hover sobre azul */ --ima-blue-600: #13608F; --ima-blue-900: #002E50; /* pressionado / profundidade */ --ima-accent: #009FE3; /* azul claro — item selecionado, foco, links */ --ima-accent-600: #0089C7; --ima-accent-050: #E5F5FD; /* fundo de seleção suave */ /* Marca — ações */ --ima-green: #5FBF49; /* verde — confirmar / aprovar / sucesso */ --ima-green-600: #4DA438; /* botão verde (texto branco AA) */ --ima-green-700: #3E8A2C; /* hover do verde */ --ima-green-050: #EDF7E9; --ima-red: #E30613; /* vermelho — excluir / rejeitar / erro */ --ima-red-600: #C50510; /* hover do vermelho */ --ima-red-700: #A40410; --ima-red-050: #FDEAEB; /* Apoio (estados não-marca) */ --ima-amber: #E8A100; /* atenção / pendente */ --ima-amber-050: #FDF3DC; /* Neutros */ --gray-900: #1A2430; /* texto principal (azul-acinzentado) */ --gray-800: #2B3744; --gray-700: #45525F; /* texto secundário */ --gray-600: #58646F; /* texto auxiliar reforçado */ --gray-500: #6E7A86; /* texto auxiliar / placeholder */ --gray-400: #97A2AD; --gray-300: #C6CDD4; /* bordas */ --gray-200: #E1E6EA; /* divisores */ --gray-100: #EEF1F4; /* fundos de campo */ --gray-050: #F5F7F9; /* fundo de página */ --white: #FFFFFF; /* Tipografia */ --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Espaçamento (base 4) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Raios */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* Sombras */ --shadow-xs: 0 1px 2px rgba(16, 35, 53, .06); --shadow-sm: 0 1px 3px rgba(16, 35, 53, .10), 0 1px 2px rgba(16, 35, 53, .06); --shadow-md: 0 4px 12px rgba(16, 35, 53, .10); --shadow-lg: 0 12px 32px rgba(16, 35, 53, .16); /* Layout */ --sidebar-w: 256px; --topbar-h: 60px; /* Foco acessível */ --focus-ring: 0 0 0 3px rgba(0, 159, 227, .35); } /* ---------- 2. RESET / BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } body.ima { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: var(--gray-900); background: var(--gray-050); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ima h1, .ima h2, .ima h3, .ima h4 { margin: 0; font-weight: var(--fw-semibold); color: var(--ima-blue); line-height: 1.2; } .ima a { color: var(--ima-accent-600); text-decoration: none; } .ima a:hover { text-decoration: underline; } /* ---------- 3. BOTÕES ---------- */ .btn { --btn-bg: var(--ima-blue); --btn-fg: #fff; --btn-bg-hover: var(--ima-blue-700); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: inherit; font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap; padding: 0 var(--sp-4); height: 40px; border: 1px solid transparent; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: background .15s, box-shadow .15s, border-color .15s, color .15s; text-decoration: none; } .btn:hover { background: var(--btn-bg-hover); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn:active { transform: translateY(.5px); } .btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn .ico { width: 18px; height: 18px; flex: none; } /* Variantes de ação */ .btn--confirm { --btn-bg: var(--ima-green-600); --btn-bg-hover: var(--ima-green-700); } /* aceitar / aprovar */ .btn--danger { --btn-bg: var(--ima-red); --btn-bg-hover: var(--ima-red-600); } /* excluir / rejeitar */ .btn--accent { --btn-bg: var(--ima-accent); --btn-bg-hover: var(--ima-accent-600); } /* Secundário (contorno) */ .btn--outline { background: #fff; color: var(--ima-blue); border-color: var(--gray-300); } .btn--outline:hover { background: var(--gray-050); border-color: var(--ima-blue); } .btn--outline.btn--danger { color: var(--ima-red); border-color: #F0B5B9; background:#fff; } .btn--outline.btn--danger:hover { background: var(--ima-red-050); border-color: var(--ima-red); } .btn--outline.btn--confirm { color: var(--ima-green-700); border-color: #B9DFAC; background:#fff; } .btn--outline.btn--confirm:hover { background: var(--ima-green-050); border-color: var(--ima-green-600); } /* Texto / fantasma */ .btn--ghost { background: transparent; color: var(--ima-blue); } .btn--ghost:hover { background: var(--gray-100); } /* Tamanhos */ .btn--sm { height: 32px; font-size: var(--text-sm); padding: 0 var(--sp-3); } .btn--lg { height: 48px; font-size: var(--text-md); padding: 0 var(--sp-6); } .btn--icon { width: 40px; padding: 0; } .btn--icon.btn--sm { width: 32px; } .btn--block { display: flex; width: 100%; } /* Proteção: links e botões dentro de sidebar sempre brancos, independente da regra global de âncora (.ima a) */ .ima-sidebar a, .ima a.ima-nav__link, .ima a.ima-nav__submenu-item, .ima-sidebar button.ima-nav__link, .ima-sidebar button.ima-nav__submenu-item { color: #fff; text-decoration: none; } /* ---------- 4. MENU LATERAL (sidebar) ---------- */ .ima-sidebar { width: var(--sidebar-w); flex: none; background: var(--ima-blue); color: #fff; display: flex; flex-direction: column; min-height: 100%; } .ima-sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); height: var(--topbar-h); padding: 0 var(--sp-5); border-bottom: 1px solid rgba(255,255,255,.12); } .ima-sidebar__brand img { height: 30px; width: auto; display: block; } .ima-sidebar__section { padding: var(--sp-5) var(--sp-3) var(--sp-2); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: #fff; } .ima-nav { list-style: none; margin: 0; padding: 0 var(--sp-3); display: flex; flex-direction: column; gap: 2px; } .ima-nav__link, .ima a.ima-nav__link { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--radius); color: #fff; font-weight: var(--fw-medium); font-size: var(--text-base); cursor: pointer; transition: background .14s, color .14s; position: relative; border: none; background: none; width: 100%; text-align: left; font-family: inherit; text-decoration: none; } .ima-nav__link .ico { width: 19px; height: 19px; flex: none; opacity: .9; } .ima-nav__link:hover { background: rgba(255,255,255,.10); color: #fff; } /* Item SELECIONADO — azul claro, texto branco */ .ima-nav__link.is-active { background: var(--ima-accent); color: #fff; font-weight: var(--fw-semibold); box-shadow: 0 2px 8px rgba(0,159,227,.35); } .ima-nav__link.is-active .ico { opacity: 1; } .ima-nav__badge { margin-left: auto; background: rgba(255,255,255,.18); color:#fff; font-size: 11px; font-weight: var(--fw-semibold); padding: 1px 8px; border-radius: var(--radius-pill); } .ima-nav__link.is-active .ima-nav__badge { background: rgba(255,255,255,.25); } /* Submenu / dropdown */ .ima-nav__submenu { position:relative; } .ima-nav__submenu > .ima-nav__link { display:flex; justify-content:space-between; } .ima-nav__submenu > .ima-nav__link::after { content:""; width:16px; height:16px; flex:none; background:currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/100% no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/100% no-repeat; transition: transform .15s; } .ima-nav__submenu.is-open > .ima-nav__link::after { transform: rotate(180deg); } .ima-nav__submenu-list { display:none; flex-direction:column; gap:1px; margin-top:2px; padding-left: 8px; } .ima-nav__submenu.is-open > .ima-nav__submenu-list { display:flex; } .ima-nav__submenu-item, .ima a.ima-nav__submenu-item { display:flex; align-items:center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--radius); color: #fff; font-size: var(--text-sm); cursor:pointer; transition: background .14s, color .14s; border:none; background:none; font-family:inherit; width:100%; text-align:left; text-decoration:none; } .ima-nav__submenu-item:hover { background: rgba(255,255,255,.10); color:#fff; } .ima-nav__submenu-item.is-active { color:#fff; background: rgba(255,255,255,.15); font-weight: var(--fw-medium); } /* ---------- 5. TOPBAR ---------- */ .ima-topbar { height: var(--topbar-h); background:#fff; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-6); } .ima-topbar__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ima-blue); } .ima-topbar__spacer { flex: 1; } .ima-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ima-blue); color:#fff; display: grid; place-items: center; font-weight: var(--fw-semibold); font-size: var(--text-sm); } /* ---------- 6. FORMULÁRIOS ---------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); } .label { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--gray-800); } .label .req { color: var(--ima-red); } .input, .select, .textarea { font-family: inherit; font-size: var(--text-base); color: var(--gray-900); background:#fff; border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 0 var(--sp-3); height: 40px; width: 100%; transition: border-color .14s, box-shadow .14s; } .textarea { height: auto; padding: var(--sp-3); min-height: 96px; resize: vertical; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--gray-400); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ima-accent); box-shadow: var(--focus-ring); } .input:disabled { background: var(--gray-100); color: var(--gray-500); cursor: not-allowed; } .input.is-invalid, .select.is-invalid { border-color: var(--ima-red); } .field__hint { font-size: var(--text-xs); color: var(--gray-500); } .field__error { font-size: var(--text-xs); color: var(--ima-red); font-weight: var(--fw-medium); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7A86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* Checkbox / radio / toggle */ .check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--text-base); } .check input { width: 18px; height: 18px; accent-color: var(--ima-accent); cursor: pointer; } .toggle { position: relative; display: inline-block; width: 42px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle__track { position: absolute; inset: 0; background: var(--gray-300); border-radius: var(--radius-pill); transition: background .16s; } .toggle__track::before { content:""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background:#fff; border-radius: 50%; transition: transform .16s; box-shadow: var(--shadow-xs); } .toggle input:checked + .toggle__track { background: var(--ima-green-600); } .toggle input:checked + .toggle__track::before { transform: translateX(18px); } .toggle input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); } /* ---------- 7. CARDS ---------- */ .card { background:#fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .card__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--gray-200); display:flex; align-items:center; gap: var(--sp-3); } .card__title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--ima-blue); } .card__body { padding: var(--sp-5); } .card__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--gray-200); display:flex; gap: var(--sp-3); justify-content:flex-end; } /* Stat card */ .stat { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--sp-5); box-shadow: var(--shadow-xs); } .stat__label { font-size: var(--text-sm); color: var(--gray-500); font-weight: var(--fw-medium); } .stat__value { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--ima-blue); line-height: 1.1; margin-top: 6px; } .stat__delta { font-size: var(--text-xs); font-weight: var(--fw-semibold); margin-top: var(--sp-2); display:inline-flex; gap:4px; align-items:center; } .stat__delta.up { color: var(--ima-green-700); } .stat__delta.down { color: var(--ima-red-600); } .stat__bar { height: 4px; border-radius: 2px; margin-top: var(--sp-3); background: var(--gray-100); overflow:hidden; } .stat__bar > i { display:block; height:100%; border-radius:2px; background: var(--ima-accent); } /* ---------- 8. BADGES / STATUS ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1; padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap; } .badge::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex:none; } .badge--success { background: var(--ima-green-050); color: var(--ima-green-700); } .badge--danger { background: var(--ima-red-050); color: var(--ima-red-600); } .badge--info { background: var(--ima-accent-050); color: var(--ima-accent-600); } .badge--warning { background: var(--ima-amber-050); color: #9A6E00; } .badge--neutral { background: var(--gray-100); color: var(--gray-700); } .badge--solid.badge--info { background: var(--ima-accent); color:#fff; } .badge--solid::before { display:none; } /* ---------- 9. ALERTS ---------- */ .alert { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); border: 1px solid; font-size: var(--text-base); align-items: flex-start; } .alert__ico { flex: none; width: 20px; height: 20px; margin-top: 1px; } .alert__title { font-weight: var(--fw-semibold); margin-bottom: 2px; } .alert--success { background: var(--ima-green-050); border-color: #C2E4B6; color: var(--ima-green-700); } .alert--danger { background: var(--ima-red-050); border-color: #F3BFC2; color: var(--ima-red-700); } .alert--info { background: var(--ima-accent-050); border-color: #B8E5F8; color: var(--ima-accent-600); } .alert--warning { background: var(--ima-amber-050); border-color: #F2D89A; color: #8A6200; } .alert p { margin: 0; color: var(--gray-800); } /* ---------- 10. TABELA ---------- */ .table-wrap { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-xs); } .table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .table thead th { text-align: left; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500); font-weight: var(--fw-semibold); padding: var(--sp-3) var(--sp-4); background: var(--gray-050); border-bottom: 1px solid var(--gray-200); } .table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-100); color: var(--gray-800); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--gray-050); } .table .cell-strong { font-weight: var(--fw-semibold); color: var(--gray-900); } .table .cell-muted { color: var(--gray-500); } .table .row-actions { display: flex; gap: 6px; justify-content: flex-end; } /* Filtros de tabela */ .table-filter { display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-200); background: var(--gray-050); } .table-filter__search { position:relative; flex: 1; min-width: 200px; } .table-filter__search .ico { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--gray-400); pointer-events:none; } .table-filter__search input { width:100%; padding-left:32px; height:36px; font-size:var(--text-sm); border:1px solid var(--gray-300); border-radius:var(--radius); background:#fff; font-family:inherit; color:var(--gray-900); transition: border-color .14s, box-shadow .14s; } .table-filter__search input::placeholder { color: var(--gray-400); } .table-filter__search input:focus { outline:none; border-color:var(--ima-accent); box-shadow:var(--focus-ring); } .filter-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .filter-chip { display:inline-flex; align-items:center; gap:5px; padding: 5px 12px; border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:var(--fw-semibold); cursor:pointer; border:1.5px solid var(--gray-300); background:#fff; color:var(--gray-600); transition: all .14s; white-space:nowrap; } .filter-chip:hover { border-color:var(--ima-blue); color:var(--ima-blue); } .filter-chip.is-active { background:var(--ima-blue); border-color:var(--ima-blue); color:#fff; } .filter-chip.is-active.chip--success { background:var(--ima-green-600); border-color:var(--ima-green-600); } .filter-chip.is-active.chip--warning { background:var(--ima-amber); border-color:var(--ima-amber); color:#fff; } .filter-chip.is-active.chip--danger { background:var(--ima-red); border-color:var(--ima-red); } .filter-chip.is-active.chip--info { background:var(--ima-accent); border-color:var(--ima-accent); } .filter-clear { font-size:var(--text-xs); font-weight:var(--fw-semibold); color:var(--gray-500); cursor:pointer; padding:5px 8px; border-radius:var(--radius); border:none; background:none; font-family:inherit; } .filter-clear:hover { color:var(--ima-red); background:var(--ima-red-050); } .table-count { font-size:var(--text-xs); color:var(--gray-500); white-space:nowrap; margin-left:auto; } .table-row--hidden { display:none; } /* Ordenação de tabelas */ .table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .table thead th.sortable:hover { color: var(--ima-blue); background: var(--gray-100); } .table thead th.sortable::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: middle; width: 14px; height: 14px; opacity: .35; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 9l4-4 4 4M16 15l-4 4-4-4'/%3E%3C/svg%3E") center/100% no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 9l4-4 4 4M16 15l-4 4-4-4'/%3E%3C/svg%3E") center/100% no-repeat; } .table thead th.sort-asc { color: var(--ima-blue); } .table thead th.sort-asc::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); } .table thead th.sort-desc { color: var(--ima-blue); } .table thead th.sort-desc::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); } /* ---------- 11. MODAL ---------- */ .modal-backdrop { position: absolute; inset: 0; background: rgba(16,30,46,.55); display: grid; place-items: center; padding: var(--sp-6); z-index: 50; } .modal { width: 100%; max-width: 440px; background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .modal__head { padding: var(--sp-5) var(--sp-6) 0; display:flex; gap: var(--sp-3); align-items:flex-start; } .modal__icon { width: 44px; height: 44px; border-radius: 50%; display:grid; place-items:center; flex:none; } .modal__icon.danger { background: var(--ima-red-050); color: var(--ima-red); } .modal__icon.confirm { background: var(--ima-green-050); color: var(--ima-green-700); } .modal__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--ima-blue); } .modal__body { padding: var(--sp-2) var(--sp-6) var(--sp-5); color: var(--gray-700); } .modal__foot { padding: var(--sp-4) var(--sp-6); background: var(--gray-050); display:flex; gap: var(--sp-3); justify-content:flex-end; } /* ---------- 12. TABS / BREADCRUMB / PAGINATION ---------- */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--gray-200); } .tab { padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-medium); color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; font-size: var(--text-base); } .tab:hover { color: var(--ima-blue); } .tab.is-active { color: var(--ima-blue); border-bottom-color: var(--ima-accent); font-weight: var(--fw-semibold); } .tab .ima-nav__badge, .tab .tab-count { background: var(--gray-100); color: var(--gray-600); font-size: 11px; font-weight: var(--fw-semibold); padding: 1px 7px; border-radius: var(--radius-pill); margin-left: 6px; } .tab.is-active .tab-count { background: var(--ima-accent-050); color: var(--ima-accent-600); } /* Abas segmentadas (pill) */ .segmented { display:inline-flex; background: var(--gray-100); border-radius: var(--radius); padding: 3px; gap: 2px; } .segmented button { border:none; background:none; font-family:inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-600); padding: 6px 14px; border-radius: var(--radius-sm); cursor:pointer; transition: background .14s, color .14s; } .segmented button:hover { color: var(--ima-blue); } .segmented button.is-active { background:#fff; color: var(--ima-blue); font-weight: var(--fw-semibold); box-shadow: var(--shadow-xs); } .tab-panel { padding: var(--sp-5) 0; } .breadcrumb { display:flex; align-items:center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--gray-500); } .breadcrumb a { color: var(--gray-500); } .breadcrumb a:hover { color: var(--ima-accent-600); } .breadcrumb .sep { color: var(--gray-300); } .breadcrumb .current { color: var(--gray-800); font-weight: var(--fw-medium); } .pagination { display:flex; gap: 4px; align-items:center; } .page-btn { min-width: 34px; height: 34px; padding: 0 8px; border:1px solid var(--gray-300); background:#fff; border-radius: var(--radius); color: var(--gray-700); cursor:pointer; font-family:inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); display:grid; place-items:center; } .page-btn:hover { border-color: var(--ima-accent); color: var(--ima-blue); } .page-btn.is-active { background: var(--ima-blue); border-color: var(--ima-blue); color:#fff; } .page-btn:disabled { opacity:.45; cursor:not-allowed; } /* ---------- Utilidades ---------- */ .stack { display:flex; flex-direction:column; } .row { display:flex; align-items:center; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .wrap { flex-wrap: wrap; } /* ---------- 13. CALENDÁRIO / DATA ---------- */ .cal { width: 304px; background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); } .cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--sp-3); } .cal__title { font-weight: var(--fw-semibold); color: var(--ima-blue); font-size: var(--text-md); } .cal__nav { display:flex; gap: 4px; } .cal__grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal__dow { text-align:center; font-size: 11px; color: var(--gray-500); font-weight: var(--fw-semibold); padding: 4px 0; text-transform: uppercase; } .cal__day { aspect-ratio: 1; display:grid; place-items:center; border-radius: var(--radius); font-size: var(--text-sm); color: var(--gray-800); cursor:pointer; border:none; background:none; font-family:inherit; position: relative; } .cal__day:hover { background: var(--gray-100); } .cal__day.is-muted { color: var(--gray-300); } .cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--ima-accent); color: var(--ima-accent-600); font-weight: var(--fw-semibold); } .cal__day.is-selected { background: var(--ima-accent); color:#fff; font-weight: var(--fw-semibold); box-shadow: 0 2px 6px rgba(0,159,227,.4); } .cal__day.has-event::after { content:""; position:absolute; bottom: 5px; width: 4px; height: 4px; border-radius:50%; background: var(--ima-green-600); } .cal__day.is-selected.has-event::after { background:#fff; } .cal__day.in-range { background: var(--ima-accent-050); border-radius: 0; color: var(--ima-accent-600); } .cal__day.range-start { background: var(--ima-accent); color:#fff; border-radius: var(--radius) 0 0 var(--radius); } .cal__day.range-end { background: var(--ima-accent); color:#fff; border-radius: 0 var(--radius) var(--radius) 0; } /* ---------- 14. LOGIN ---------- */ .ima-login { display:flex; min-height: 520px; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); border:1px solid var(--gray-200); } .ima-login__brand { flex: 1.1; background: var(--ima-blue); color:#fff; padding: var(--sp-10); display:flex; flex-direction:column; justify-content:space-between; position: relative; overflow:hidden; } .ima-login__brand::before, .ima-login__brand::after { content:""; position:absolute; background: var(--ima-accent); opacity:.16; } .ima-login__brand::before { width: 360px; height: 360px; border-radius: 50%; right: -140px; top: -120px; } .ima-login__brand::after { width: 220px; height: 220px; border-radius: 50%; left: -80px; bottom: -90px; background: var(--ima-green); opacity:.14; } .ima-login__logo { height: 46px; position: relative; z-index:1; } .ima-login__lead { position: relative; z-index:1; } .ima-login__lead h2 { color:#fff; font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height:1.2; } .ima-login__lead p { color: rgba(255,255,255,.8); margin: var(--sp-3) 0 0; max-width: 38ch; } .ima-login__foot { position:relative; z-index:1; font-size: var(--text-sm); color: rgba(255,255,255,.6); } .ima-login__form { flex: 1; background:#fff; padding: var(--sp-10); display:flex; flex-direction:column; justify-content:center; } .ima-login__form h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); } .input-group { position: relative; } .input-group .ico { position:absolute; left: 12px; top: 50%; transform: translateY(-50%); width:18px; height:18px; color: var(--gray-400); } .input-group .input { padding-left: 38px; } /* ---------- 15. MAPA ---------- */ .ima-map { display:flex; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-xs); background:#fff; } .ima-map__canvas { flex:1; position:relative; background: linear-gradient(180deg,#E8F4FB 0%, #DCEEF7 100%); min-height: 360px; overflow:hidden; } .ima-map__panel { width: 280px; flex:none; border-left:1px solid var(--gray-200); display:flex; flex-direction:column; } .ima-map__pin { position:absolute; transform: translate(-50%,-100%); cursor:pointer; } .ima-map__pin svg { display:block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); } .ima-map__pin .dot { width: 14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); transform: translate(-50%,-50%); position:absolute; } .map-toolbar { position:absolute; top: var(--sp-3); right: var(--sp-3); display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow:hidden; } .map-toolbar button { width:34px; height:34px; border:none; background:#fff; cursor:pointer; color: var(--gray-700); display:grid; place-items:center; } .map-toolbar button:hover { background: var(--gray-100); color: var(--ima-blue); } .map-toolbar button + button { border-top:1px solid var(--gray-200); } .map-legend { position:absolute; left: var(--sp-3); bottom: var(--sp-3); background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); padding: var(--sp-3); box-shadow: var(--shadow-sm); font-size: var(--text-xs); display:flex; flex-direction:column; gap:6px; } .map-legend .row { gap: 8px; } .map-legend i { width:10px; height:10px; border-radius:50%; flex:none; } .map-item { padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--gray-100); cursor:pointer; display:flex; gap: var(--sp-3); align-items:flex-start; } .map-item:hover { background: var(--gray-050); } .map-item.is-active { background: var(--ima-accent-050); box-shadow: inset 3px 0 0 var(--ima-accent); } .map-item__dot { width:10px; height:10px; border-radius:50%; margin-top:5px; flex:none; }