/* ========================================================================== IHX Access — tema do Admin (django-unfold) 6 presets de cor + seletor flutuante. O preset é escolhido por usuário (persistido em localStorage) e aplicado via [data-ihx-preset] no . Cada preset só redefine o ramp --color-primary-* (50→950) com cores COMPLETAS rgb(R G B) — formato que o Unfold/Tailwind v4 consome via var(--color-primary-XXX) (direto p/ sólido; color-mix() p/ transparência). A especificidade html[data-ihx-preset] (0,1,1) vence o :root do Unfold (0,1,0). ========================================================================== */ /* 🟢 Verde (marca, #C2CC33) — também é o default vindo do settings.UNFOLD */ html[data-ihx-preset="green"] { --color-primary-50: rgb(250 251 230); --color-primary-100: rgb(244 246 200); --color-primary-200: rgb(233 238 150); --color-primary-300: rgb(219 227 96); --color-primary-400: rgb(205 215 60); --color-primary-500: rgb(194 204 51); --color-primary-600: rgb(168 178 40); --color-primary-700: rgb(130 138 32); --color-primary-800: rgb(103 109 28); --color-primary-900: rgb(84 89 26); --color-primary-950: rgb(46 49 12); } /* 🟡 Amarelo (#E6B800) */ html[data-ihx-preset="yellow"] { --color-primary-50: rgb(255 251 235); --color-primary-100: rgb(254 243 199); --color-primary-200: rgb(253 230 138); --color-primary-300: rgb(252 211 77); --color-primary-400: rgb(245 191 39); --color-primary-500: rgb(230 184 0); --color-primary-600: rgb(202 138 4); --color-primary-700: rgb(161 98 7); --color-primary-800: rgb(133 77 14); --color-primary-900: rgb(113 63 18); --color-primary-950: rgb(66 32 6); } /* 🔴 Vermelho (#D23B30) */ html[data-ihx-preset="red"] { --color-primary-50: rgb(254 242 242); --color-primary-100: rgb(254 226 226); --color-primary-200: rgb(254 202 202); --color-primary-300: rgb(252 165 165); --color-primary-400: rgb(248 113 113); --color-primary-500: rgb(210 59 48); --color-primary-600: rgb(185 28 28); --color-primary-700: rgb(153 27 27); --color-primary-800: rgb(127 29 29); --color-primary-900: rgb(113 26 26); --color-primary-950: rgb(69 10 10); } /* 🔵 Azul (#2D6CDF) */ html[data-ihx-preset="blue"] { --color-primary-50: rgb(239 246 255); --color-primary-100: rgb(219 234 254); --color-primary-200: rgb(191 219 254); --color-primary-300: rgb(147 197 253); --color-primary-400: rgb(96 165 250); --color-primary-500: rgb(45 108 223); --color-primary-600: rgb(37 99 235); --color-primary-700: rgb(29 78 216); --color-primary-800: rgb(30 64 175); --color-primary-900: rgb(30 58 138); --color-primary-950: rgb(23 37 84); } /* 🟣 Roxo (#7C3AED) */ html[data-ihx-preset="purple"] { --color-primary-50: rgb(245 243 255); --color-primary-100: rgb(237 233 254); --color-primary-200: rgb(221 214 254); --color-primary-300: rgb(196 181 253); --color-primary-400: rgb(167 139 250); --color-primary-500: rgb(139 92 246); --color-primary-600: rgb(124 58 237); --color-primary-700: rgb(109 40 217); --color-primary-800: rgb(91 33 182); --color-primary-900: rgb(76 29 149); --color-primary-950: rgb(46 16 101); } /* ⚫ Preto/grafite (#2B2B2B) */ html[data-ihx-preset="black"] { --color-primary-50: rgb(245 245 245); --color-primary-100: rgb(229 229 229); --color-primary-200: rgb(212 212 212); --color-primary-300: rgb(163 163 163); --color-primary-400: rgb(115 115 115); --color-primary-500: rgb(82 82 82); --color-primary-600: rgb(64 64 64); --color-primary-700: rgb(43 43 43); --color-primary-800: rgb(38 38 38); --color-primary-900: rgb(23 23 23); --color-primary-950: rgb(10 10 10); } /* ⚪ Cinza (#6B7280) */ html[data-ihx-preset="gray"] { --color-primary-50: rgb(248 250 252); --color-primary-100: rgb(241 245 249); --color-primary-200: rgb(226 232 240); --color-primary-300: rgb(203 213 225); --color-primary-400: rgb(148 163 184); --color-primary-500: rgb(107 114 128); --color-primary-600: rgb(71 85 105); --color-primary-700: rgb(51 65 85); --color-primary-800: rgb(30 41 59); --color-primary-900: rgb(15 23 42); --color-primary-950: rgb(2 6 23); } /* -------------------------------------------------------------------------- Dashboard "launcher" (estilo macOS) — estilizado com variáveis --color-* (NÃO com utilitários Tailwind, que podem não estar no build do unfold). Assim o hero e os ícones acompanham o preset de cor escolhido. -------------------------------------------------------------------------- */ .ihx-home { max-width: 72rem; margin: 0 auto; width: 100%; } .ihx-hero { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 2rem 2.5rem; margin-bottom: 2rem; color: #fff; background: linear-gradient(135deg, var(--color-primary-950) 0%, var(--color-primary-800) 48%, var(--color-primary-500) 135%); box-shadow: 0 12px 32px rgba(0, 0, 0, .20); } .ihx-hero__blob { position: absolute; border-radius: 9999px; background: rgba(255, 255, 255, .10); } .ihx-hero__logo { position: relative; height: 2.25rem; width: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); } .ihx-hero__title { position: relative; margin-top: 1.25rem; font-size: 1.5rem; font-weight: 600; } .ihx-hero__sub { position: relative; margin-top: .25rem; opacity: .85; } .ihx-launcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (min-width: 640px) { .ihx-launcher { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } } @media (min-width: 1280px) { .ihx-launcher { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ihx-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 1rem; background: var(--color-base-50, rgb(255 255 255)); border: 1px solid var(--color-base-200, rgb(229 231 235)); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .ihx-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-500) 30%, transparent), 0 14px 30px color-mix(in srgb, var(--color-primary-500) 18%, transparent), 0 12px 24px rgba(0, 0, 0, .10); } html.dark .ihx-card { background: var(--color-base-900, rgb(17 24 39)); border-color: var(--color-base-800, rgb(31 41 55)); } html.dark .ihx-card:hover { border-color: color-mix(in srgb, var(--color-primary-400) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary-400) 30%, transparent), 0 14px 34px color-mix(in srgb, var(--color-primary-500) 25%, transparent), 0 12px 24px rgba(0, 0, 0, .45); } .ihx-card__icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .85rem; background: color-mix(in srgb, var(--color-primary-500) 14%, transparent); color: var(--color-primary-700); transition: transform .18s ease; } .ihx-card:hover .ihx-card__icon { transform: scale(1.12); } html.dark .ihx-card__icon { background: color-mix(in srgb, var(--color-primary-400) 18%, transparent); color: var(--color-primary-300); } .ihx-card__icon .material-symbols-outlined { font-size: 1.6rem; line-height: 1; } .ihx-card__title { display: block; font-size: .98rem; font-weight: 600; color: var(--color-base-900, rgb(17 24 39)); } html.dark .ihx-card__title { color: var(--color-base-100, rgb(243 244 246)); } .ihx-card__desc { display: block; margin-top: .15rem; font-size: .82rem; color: var(--color-base-500, rgb(107 114 128)); } html.dark .ihx-card__desc { color: var(--color-base-400, rgb(156 163 175)); } @media (prefers-reduced-motion: reduce) { .ihx-card, .ihx-card__icon { transition: none; } .ihx-card:hover { transform: none; } } /* -------------------------------------------------------------------------- Hover da sidebar (faltava destaque ao passar o mouse) — glow na cor do tema -------------------------------------------------------------------------- */ #nav-sidebar-apps ol li a { transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; } #nav-sidebar-apps ol li a:hover { background: color-mix(in srgb, var(--color-primary-500) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-500) 30%, transparent), 0 0 12px color-mix(in srgb, var(--color-primary-500) 15%, transparent); color: var(--color-primary-700); } html.dark #nav-sidebar-apps ol li a:hover { background: color-mix(in srgb, var(--color-primary-400) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary-400) 35%, transparent), 0 0 12px color-mix(in srgb, var(--color-primary-500) 20%, transparent); color: var(--color-primary-300); } /* -------------------------------------------------------------------------- NEON nos campos clicáveis (foco) — cor do tema, em todo o admin -------------------------------------------------------------------------- */ #content input[type="text"], #content input[type="password"], #content input[type="email"], #content input[type="number"], #content input[type="url"], #content input[type="search"], #content input[type="tel"], #content input[type="date"], #content input[type="datetime-local"], #content input[type="time"], #content textarea, #content select { transition: box-shadow .18s ease, border-color .18s ease; } #content input[type="text"]:focus, #content input[type="password"]:focus, #content input[type="email"]:focus, #content input[type="number"]:focus, #content input[type="url"]:focus, #content input[type="search"]:focus, #content input[type="tel"]:focus, #content input[type="date"]:focus, #content input[type="datetime-local"]:focus, #content input[type="time"]:focus, #content textarea:focus, #content select:focus { border-color: var(--color-primary-500) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 22%, transparent), 0 0 14px color-mix(in srgb, var(--color-primary-500) 40%, transparent) !important; outline: none !important; } /* -------------------------------------------------------------------------- TOGGLE liga/desliga em TODO checkbox quadrado do admin -------------------------------------------------------------------------- */ /* Converte campos booleanos QUADRADOS de formulário num interruptor liga/desliga, idêntico ao switch nativo do unfold (pílula com bolinha deslizante). Vale para os campos de estado (Ativo, módulos, permissões etc.). EXCLUSÕES: `:not(.rounded-full)` poupa radios/switches; `:not(.action-select)` e `:not(#action-toggle)` poupam os checkboxes de SELEÇÃO de linha das listas — seleção não é um estado liga/desliga, e um toggle "off" ali parecia "registro desativado". Esses continuam como checkbox (✓) do unfold. */ input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle) { appearance: none; -webkit-appearance: none; position: relative; display: inline-block; flex: none; box-sizing: border-box; width: 2rem; /* w-8 */ min-width: 2rem; height: 1.25rem; /* h-5 */ margin: 0; padding: 0; border: 0 !important; border-radius: 9999px !important; background-color: var(--color-base-300, #d1d5db) !important; background-image: none !important; cursor: pointer; vertical-align: middle; transition: background-color .2s ease; } input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle)::after { content: "" !important; position: absolute; top: .25rem; /* top-1 */ left: .25rem; /* left-1 */ width: .75rem; /* w-3 / h-3 */ height: .75rem; margin: 0 !important; border-radius: 9999px; background: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .2s ease; } input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle):checked { /* "ligado" usa a COR DO TEMA escolhido (--color-primary-*, trocado pelo seletor COR). */ background-color: var(--color-primary-600) !important; } input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle):checked::after { left: 1rem; /* left-4 */ } input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle):focus, input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle):focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 30%, transparent); } input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle):disabled { opacity: .5; cursor: not-allowed; } html.dark input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle) { background-color: var(--color-base-600, #4b5563) !important; } html.dark input[type="checkbox"]:not(.rounded-full):not(.action-select):not(#action-toggle):checked { background-color: var(--color-primary-500) !important; /* mais vivo no escuro */ } /* Switches NATIVOS do unfold (BooleanField em inlines) — `.rounded-full` é poupado da conversão acima, mas a cor "ligado" também deve seguir o tema (vinha verde fixo). */ input[type="checkbox"].rounded-full:checked { background-color: var(--color-primary-600) !important; } html.dark input[type="checkbox"].rounded-full:checked { background-color: var(--color-primary-500) !important; } /* -------------------------------------------------------------------------- Barra de AÇÃO em massa — legibilidade nos temas CLAROS (verde-oliva / amarelo) -------------------------------------------------------------------------- */ /* Nesses 2 temas o bg-primary da barra é claro; o texto (contador + o select, que herdam o `text-white`/`text-current` do unfold) fica ilegível. O unfold usa @layer, e seu `!important` vence `!important` SEM layer — então não adianta brigar por especificidade. Truque: `#changelist-actions` tem a classe `text-white` (NORMAL, em layer); uma regra NÃO-layered aqui troca a `color` herdada para ESCURA e vence o layer. Isso pega o contador, o texto do select e a seta (currentColor) de uma vez. O botão "Run" tem `text-white` próprio (em fundo escuro) e segue branco. */ html[data-ihx-preset="green"] #changelist-actions, html[data-ihx-preset="yellow"] #changelist-actions { color: #111827; } /* -------------------------------------------------------------------------- Tela de LOGIN — card da marca + neon na cor do tema -------------------------------------------------------------------------- */ body.login #page { background: transparent; } body.login { background: radial-gradient(1100px 600px at 12% -10%, color-mix(in srgb, var(--color-primary-500) 20%, transparent), transparent 60%), radial-gradient(1000px 700px at 112% 115%, color-mix(in srgb, var(--color-primary-600) 22%, transparent), transparent 55%), linear-gradient(135deg, var(--color-primary-950), var(--color-primary-800)); } html.dark body.login { background: radial-gradient(1100px 600px at 12% -10%, color-mix(in srgb, var(--color-primary-500) 16%, transparent), transparent 60%), radial-gradient(1000px 700px at 112% 115%, color-mix(in srgb, var(--color-primary-700) 20%, transparent), transparent 55%), linear-gradient(135deg, #0a0c06, var(--color-primary-950)); } .ihx-login { overflow: hidden; padding: 2rem; border-radius: 1.25rem; background: var(--color-base-50, rgb(255 255 255)); border: 1px solid color-mix(in srgb, var(--color-primary-500) 22%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary-500) 12%, transparent), 0 24px 60px rgba(0, 0, 0, .35); } html.dark .ihx-login { background: var(--color-base-900, rgb(17 24 39)); border-color: color-mix(in srgb, var(--color-primary-400) 26%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--color-primary-500) 15%, transparent), 0 24px 60px rgba(0, 0, 0, .60); } .ihx-login__brand { margin: -2rem -2rem 1.5rem; padding: 1.75rem 1rem; text-align: center; background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-500) 130%); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary-400) 40%, transparent); } .ihx-login__brand img { height: 2.25rem; width: auto; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); } .ihx-login__title { text-align: center; font-weight: 700; font-size: 1.35rem; color: var(--color-base-900, rgb(17 24 39)); } html.dark .ihx-login__title { color: var(--color-base-50, rgb(250 250 250)); } .ihx-login__sub { text-align: center; font-size: .875rem; margin: .3rem 0 1.5rem; color: var(--color-base-500, rgb(107 114 128)); } html.dark .ihx-login__sub { color: var(--color-base-400, rgb(156 163 175)); } /* campos do login: discretos em repouso, neon (moderado) só no foco */ #login-form input[type="text"], #login-form input[type="password"], #login-form input[type="email"] { border-color: color-mix(in srgb, var(--color-primary-500) 22%, transparent) !important; transition: box-shadow .18s ease, border-color .18s ease; } #login-form input[type="text"]:focus, #login-form input[type="password"]:focus, #login-form input[type="email"]:focus { border-color: var(--color-primary-500) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent), 0 0 12px color-mix(in srgb, var(--color-primary-500) 32%, transparent) !important; outline: none !important; } /* botão Acessar: glow discreto em repouso, um pouco mais no hover */ #login-form .submit-row, #login-form button[type="submit"] { box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary-500) 20%, transparent) !important; transition: box-shadow .18s ease, transform .12s ease; } #login-form .submit-row:hover, #login-form button[type="submit"]:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--color-primary-500) 38%, transparent) !important; } /* -------------------------------------------------------------------------- Botão "olho" para mostrar/ocultar senha -------------------------------------------------------------------------- */ .ihx-pass-wrap { position: relative; display: block; width: 100%; } .ihx-pass-toggle { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; width: 2.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-base-400, rgb(156 163 175)); transition: color .15s ease; } .ihx-pass-toggle:hover { color: var(--color-primary-600); } html.dark .ihx-pass-toggle:hover { color: var(--color-primary-300); } .ihx-pass-toggle .material-symbols-outlined { font-size: 1.25rem; line-height: 1; } /* -------------------------------------------------------------------------- Tela de Portaria (visita_view) — formulário limpo + captura de foto -------------------------------------------------------------------------- */ .ihx-portaria { max-width: 64rem; margin: 0 auto; width: 100%; } .ihx-portaria__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; color: var(--color-base-900, rgb(17 24 39)); } html.dark .ihx-portaria__title { color: var(--color-base-50, rgb(250 250 250)); } .ihx-portaria__sub { font-size: .9rem; color: var(--color-base-500, rgb(107 114 128)); margin: 0 0 1.25rem; } .ihx-portaria__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 900px) { .ihx-portaria__grid { grid-template-columns: 1.6fr 1fr; } } .ihx-section { background: var(--color-base-50, rgb(255 255 255)); border: 1px solid var(--color-base-200, rgb(229 231 235)); border-radius: 1rem; padding: 1.25rem 1.25rem 1rem; margin-bottom: 1.25rem; } html.dark .ihx-section { background: var(--color-base-900, rgb(17 24 39)); border-color: var(--color-base-800, rgb(31 41 55)); } .ihx-section__title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-700); margin: 0 0 .9rem; } html.dark .ihx-section__title { color: var(--color-primary-300); } .ihx-field { margin-bottom: .85rem; } .ihx-field--inline { display: flex; gap: .75rem; } .ihx-field--inline > div { flex: 1; } .ihx-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--color-base-700, rgb(55 65 81)); } html.dark .ihx-label { color: var(--color-base-300, rgb(209 213 219)); } .ihx-label .req { color: rgb(220 38 38); } .ihx-input, .ihx-select { width: 100%; font: inherit; padding: .55rem .7rem; border-radius: .6rem; background: var(--color-base-50, rgb(255 255 255)); border: 1px solid var(--color-base-300, rgb(209 213 219)); color: var(--color-base-900, rgb(17 24 39)); transition: box-shadow .18s ease, border-color .18s ease; } html.dark .ihx-input, html.dark .ihx-select { background: var(--color-base-950, rgb(3 7 18)); border-color: var(--color-base-700, rgb(55 65 81)); color: var(--color-base-100, rgb(243 244 246)); } .ihx-input:focus, .ihx-select:focus { outline: none; border-color: rgb(var(--color-primary-500)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 22%, transparent); } .ihx-input--error { border-color: rgb(220 38 38) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important; } .ihx-input-group { display: flex; gap: .5rem; } .ihx-input-group .ihx-input { flex: 1; } .ihx-alert { border-radius: .6rem; padding: .7rem .9rem; margin-bottom: 1rem; font-size: .9rem; background: color-mix(in srgb, var(--color-primary-500) 12%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary-500) 35%, transparent); color: var(--color-base-900, rgb(17 24 39)); } html.dark .ihx-alert { color: var(--color-base-100, rgb(243 244 246)); } .ihx-alert--error { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.4); } .ihx-alert--warn { background: rgba(202,138,4,.14); border-color: rgba(202,138,4,.45); } /* captura de foto */ .ihx-photo { text-align: center; } .ihx-photo__stage { position: relative; width: 100%; aspect-ratio: 3/4; max-width: 280px; margin: 0 auto .75rem; border-radius: .8rem; overflow: hidden; background: var(--color-base-100, rgb(243 244 246)); border: 1px solid var(--color-base-200, rgb(229 231 235)); display: flex; align-items: center; justify-content: center; } html.dark .ihx-photo__stage { background: var(--color-base-800, rgb(31 41 55)); border-color: var(--color-base-700, rgb(55 65 81)); } .ihx-photo__stage video, .ihx-photo__stage img { width: 100%; height: 100%; object-fit: cover; } .ihx-photo__placeholder { color: var(--color-base-400, rgb(156 163 175)); font-size: .85rem; padding: 1rem; } .ihx-photo__buttons { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } .ihx-btn { font: inherit; font-weight: 600; cursor: pointer; padding: .5rem .9rem; border-radius: .6rem; border: 1px solid var(--color-base-300, rgb(209 213 219)); background: var(--color-base-50, rgb(255 255 255)); color: var(--color-base-800, rgb(31 41 55)); display: inline-flex; align-items: center; gap: .35rem; transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; } html.dark .ihx-btn { background: var(--color-base-800, rgb(31 41 55)); border-color: var(--color-base-700, rgb(55 65 81)); color: var(--color-base-100, rgb(243 244 246)); } .ihx-btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 18%, transparent); } .ihx-btn--primary { background: rgb(var(--color-primary-600)); border-color: transparent; color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary-500) 30%, transparent); } .ihx-btn--primary:hover { background: rgb(var(--color-primary-700)); } .ihx-actions { position: sticky; bottom: 0; margin-top: 1.25rem; padding: .85rem 0; display: flex; gap: .75rem; justify-content: flex-end; background: linear-gradient(to top, var(--color-base-100, rgb(243 244 246)), transparent); } html.dark .ihx-actions { background: linear-gradient(to top, var(--color-base-950, rgb(3 7 18)), transparent); } .ihx-actions input[type="file"], #ihx-photo-file { display: none; } /* select2 (quando o unfold injeta) acompanhar a altura/raio dos campos */ .select2-container .select2-selection--single { height: auto !important; min-height: 2.35rem; border-radius: .6rem !important; } /* -------------------------------------------------------------------------- Seletor de paleta flutuante -------------------------------------------------------------------------- */ .ihx-preset-switcher { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; align-items: center; gap: .375rem; padding: .375rem .5rem; border-radius: 9999px; background: var(--color-base-50, rgb(250 250 250)); border: 1px solid var(--color-base-200, rgb(229 231 235)); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } html.dark .ihx-preset-switcher, :root[data-theme="dark"] .ihx-preset-switcher { background: var(--color-base-800, rgb(31 41 55)); border-color: var(--color-base-700, rgb(55 65 81)); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); } /* Não sobrepor as barras FIXAS do rodapé: sobe o seletor de cor acima delas. - Formulários (body.change-form): barra de salvar cola no rodapé (0–65px). */ body.change-form .ihx-preset-switcher { bottom: 5.25rem; } /* - Listas: a barra de ação flutua a ~64px do rodapé com 64px de altura (topo a ~128px) e só aparece com linha marcada — precisa subir mais. */ body:has(.action-select:checked) .ihx-preset-switcher { bottom: 8.75rem; } .ihx-preset-switcher__label { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-base-500, rgb(107 114 128)); margin-right: .125rem; user-select: none; } .ihx-preset-swatch { width: 1.125rem; height: 1.125rem; border-radius: 9999px; border: 2px solid transparent; padding: 0; cursor: pointer; outline: none; transition: transform .12s ease, border-color .12s ease; } .ihx-preset-swatch:hover { transform: scale(1.18); } .ihx-preset-swatch:focus-visible { border-color: var(--color-base-400, rgb(156 163 175)); } .ihx-preset-swatch[aria-pressed="true"] { border-color: var(--color-base-700, rgb(55 65 81)); transform: scale(1.12); } html.dark .ihx-preset-swatch[aria-pressed="true"], :root[data-theme="dark"] .ihx-preset-swatch[aria-pressed="true"] { border-color: var(--color-base-100, rgb(243 244 246)); } @media (prefers-reduced-motion: reduce) { .ihx-preset-swatch { transition: none; } } /* ============================================================ Construtor de relatórios (MODRelatorio) — layout em 2 colunas ============================================================ */ .ihx-rel__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; } .ihx-rel__sub { color: var(--color-base-500, rgb(107 114 128)); margin: 0 0 1.25rem; } .ihx-rel__opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-base-400, rgb(156 163 175)); } .ihx-rel__grid { display: grid; grid-template-columns: 340px 1fr; gap: 1.25rem; align-items: start; } @media (max-width: 900px) { .ihx-rel__grid { grid-template-columns: 1fr; } } /* lista de campos exibidos (checkboxes) */ .ihx-rel__campos { display: flex; flex-direction: column; gap: .35rem; max-height: 260px; overflow: auto; } .ihx-rel__campo { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; } /* uma linha de filtro: campo | operador | valor | remover */ .ihx-rel__filtro { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; margin-bottom: .5rem; align-items: center; } .ihx-rel__filtro .ihx-rel__filtro-val { grid-column: 1 / 3; display: flex; gap: .35rem; align-items: center; } .ihx-rel__filtro-rem { padding: .35rem .6rem; line-height: 1; } #rel-acoes { display: flex; gap: .5rem; flex-wrap: wrap; } /* coluna de resultado */ .ihx-rel__status { font-size: .9rem; color: var(--color-base-600, rgb(75 85 99)); background: var(--color-base-50, rgb(255 255 255)); border: 1px solid var(--color-base-200, rgb(229 231 235)); border-radius: .8rem; padding: .7rem .9rem; margin-bottom: 1rem; } html.dark .ihx-rel__status { background: var(--color-base-900, rgb(17 24 39)); border-color: var(--color-base-800, rgb(31 41 55)); color: var(--color-base-300, rgb(209 213 219)); } .ihx-rel__grafico { background: var(--color-base-50, rgb(255 255 255)); border: 1px solid var(--color-base-200, rgb(229 231 235)); border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; } html.dark .ihx-rel__grafico { background: var(--color-base-900, rgb(17 24 39)); border-color: var(--color-base-800, rgb(31 41 55)); } .ihx-rel__tabela { overflow: auto; border-radius: 1rem; } .ihx-rel__table { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--color-base-50, rgb(255 255 255)); } html.dark .ihx-rel__table { background: var(--color-base-900, rgb(17 24 39)); } .ihx-rel__table th, .ihx-rel__table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--color-base-200, rgb(229 231 235)); white-space: nowrap; } html.dark .ihx-rel__table th, html.dark .ihx-rel__table td { border-color: var(--color-base-800, rgb(31 41 55)); } .ihx-rel__table th { position: sticky; top: 0; font-weight: 700; text-transform: uppercase; font-size: .7rem; letter-spacing: .03em; background: color-mix(in srgb, var(--color-primary-500) 10%, var(--color-base-50, #fff)); color: var(--color-primary-700); } html.dark .ihx-rel__table th { background: color-mix(in srgb, var(--color-primary-500) 16%, var(--color-base-900, #111)); color: var(--color-primary-300); } .ihx-rel__table tbody tr:hover td { background: color-mix(in srgb, var(--color-primary-500) 7%, transparent); } .ihx-rel__vazio { color: var(--color-base-500, rgb(107 114 128)); padding: 1rem; } /* -------------------------------------------------------------------------- Badge da EDIÇÃO no topo da sidebar (Access / Access Pro / School…) -------------------------------------------------------------------------- */ /* Tag fixa e sempre visível, no lugar onde o tenant não tinha marca. Cores seguem o tema escolhido (var(--color-primary-*)). Ver templates/unfold/helpers/navigation_header.html + app.context_processors.ihx_edicao. */ .ihx-edicao-badge { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .45rem .65rem; border-radius: .7rem; background: color-mix(in srgb, var(--color-primary-500) 15%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary-500) 35%, transparent); } .ihx-edicao-badge__ic { font-size: 1.35rem; line-height: 1; color: var(--color-primary-600); } html.dark .ihx-edicao-badge__ic { color: var(--color-primary-400); } .ihx-edicao-badge__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; } .ihx-edicao-badge__rotulo { font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-base-500, #6b7280); } .ihx-edicao-badge__nome { font-size: .9rem; font-weight: 700; color: var(--color-base-800, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.dark .ihx-edicao-badge__rotulo { color: var(--color-base-400, #9ca3af); } html.dark .ihx-edicao-badge__nome { color: var(--color-base-100, #f3f4f6); }