/* ========================================================================== Hoori — design system em CSS puro -------------------------------------------------------------------------- Porte do design system da origem (Tailwind + shadcn/ui, ver docs/design-system.md) sem nenhuma biblioteca de front: tokens semânticos em HSL, tema claro/escuro pela classe `.dark` no , componentes como classes globais próprias. Índice 1. Tokens (tema claro, tema escuro, estados, navegação, gráficos) 2. Base 3. Estrutura administrativa (sidebar, barra superior, conteúdo) 4. Componentes (botão, campos, cartão, badge, tabela, tabs, alerta, toast, diálogo, métrica, progresso, avatar, skeleton, spinner, agenda, etapas, chips, lista) 5. Portal público 6. Autenticação 7. Utilitários 8. Movimento 9. Nomes antigos (compatibilidade com as telas já portadas) ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* 1. Tokens ================================================================ */ :root { --background: 0 0% 98%; --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 9%; --primary: 18 100% 50%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --accent: 18 100% 55%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 18 100% 50%; --success: 142 71% 40%; --success-foreground: 0 0% 100%; --warning: 38 92% 45%; --warning-foreground: 0 0% 100%; --info: 217 91% 55%; --info-foreground: 0 0% 100%; --sidebar-background: 0 0% 100%; --sidebar-foreground: 0 0% 25%; --sidebar-primary: 18 100% 50%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 0 0% 96%; --sidebar-accent-foreground: 0 0% 9%; --sidebar-border: 0 0% 90%; --sidebar-ring: 18 100% 50%; /* Paleta de séries (a origem referenciava --chart-2..5 sem defini-los). */ --chart-1: var(--primary); --chart-2: 217 91% 55%; --chart-3: 142 71% 40%; --chart-4: 38 92% 50%; --chart-5: 280 65% 60%; --radius: 0.75rem; /* 12px — token-base */ --radius-sm: 0.375rem; /* 6px — itens internos */ --radius-md: 0.625rem; /* 10px — botões e campos */ --radius-lg: 0.75rem; /* 12px — cartão */ --radius-xl: 1rem; /* 16px — navegação, ícones */ --radius-2xl: 1.5rem; /* 24px — glass-card */ --radius-public: 1.75rem; /* 28px — cartões públicos */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-premium: 0 24px 60px -16px rgb(0 0 0 / 0.22), 0 0 0 1px hsl(var(--border) / 0.6); --glow-sm: 0 0 12px hsl(var(--primary) / 0.2); --glow-md: 0 4px 20px hsl(var(--primary) / 0.3); --glow-lg: 0 8px 30px hsl(var(--primary) / 0.4); --glow-xl: 0 12px 48px hsl(var(--primary) / 0.5); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --duration-fast: 200ms; --duration: 300ms; --duration-slow: 400ms; --duration-slower: 500ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --topbar-height: 3.5rem; /* 56px */ --sidebar-width: 14rem; /* 224px */ --sidebar-width-mobile: 16rem; color-scheme: light; } .dark { --background: 0 0% 4%; --foreground: 0 0% 100%; --card: 0 0% 10%; --card-foreground: 0 0% 100%; --popover: 0 0% 10%; --popover-foreground: 0 0% 100%; --primary: 18 100% 59%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 14%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 14%; --muted-foreground: 220 9% 63%; --accent: 18 100% 67%; --accent-foreground: 0 0% 100%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 0 0% 14%; --input: 0 0% 14%; --ring: 18 100% 59%; --success: 142 64% 45%; --warning: 38 92% 50%; --info: 217 91% 60%; --sidebar-background: 0 0% 6%; --sidebar-foreground: 0 0% 85%; --sidebar-primary: 18 100% 59%; --sidebar-accent: 0 0% 12%; --sidebar-accent-foreground: 0 0% 100%; --sidebar-border: 0 0% 14%; --sidebar-ring: 18 100% 59%; --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.4); --shadow-premium: 0 24px 60px -16px rgb(0 0 0 / 0.7), 0 0 0 1px hsl(0 0% 100% / 0.06); color-scheme: dark; } /* 2. Base ================================================================== */ *, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: hsl(var(--border)); } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; line-height: 1.5; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.875rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; } h1 { font-size: 1.5rem; font-weight: 700; } h2 { font-size: 1.125rem; font-weight: 600; } h3 { font-size: 1rem; font-weight: 600; } h4 { font-size: 0.875rem; font-weight: 600; } p { margin: 0 0 0.75rem; } p:last-child { margin-bottom: 0; } a { color: hsl(var(--primary)); text-decoration: none; text-underline-offset: 4px; } a:hover { text-decoration: underline; } strong, b { font-weight: 600; } small { font-size: 0.75rem; } img, svg, video { display: inline-block; vertical-align: middle; max-width: 100%; } hr { height: 1px; margin: 1.5rem 0; background: hsl(var(--border)); } code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; } pre { margin: 0 0 1rem; padding: 0.75rem 1rem; overflow-x: auto; border-radius: var(--radius-md); background: hsl(var(--muted)); } ul, ol { margin: 0 0 0.75rem; padding-left: 1.25rem; } ::selection { background: hsl(var(--primary) / 0.25); } :focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } [hidden] { display: none !important; } .icon { flex-shrink: 0; width: 1rem; height: 1rem; } /* 3. Estrutura administrativa ============================================== */ .app-shell { min-height: 100vh; min-height: 100dvh; background-color: hsl(var(--background)); background-image: radial-gradient(60rem 30rem at 100% -10%, hsl(var(--primary) / 0.07), transparent 60%), radial-gradient(40rem 24rem at -10% 110%, hsl(var(--primary) / 0.04), transparent 60%); background-attachment: fixed; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; width: var(--sidebar-width-mobile); background: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground)); border-right: 1px solid hsl(var(--sidebar-border)); transform: translateX(-100%); transition: transform var(--duration) var(--ease); } .nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-2xl); } .sidebar__brand { display: flex; align-items: center; gap: 0.75rem; height: var(--topbar-height); flex-shrink: 0; padding: 0 1rem; border-bottom: 1px solid hsl(var(--sidebar-border)); } .sidebar__logo { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-lg); background: hsl(var(--sidebar-primary)); color: hsl(var(--sidebar-primary-foreground)); box-shadow: var(--glow-sm); } .sidebar__logo img { width: 100%; height: 100%; object-fit: cover; } .sidebar__name { min-width: 0; overflow: hidden; font-size: 1rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; color: hsl(var(--foreground)); } .sidebar__name small { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } .sidebar__close { margin-left: auto; } .sidebar__nav { flex: 1; overflow-y: auto; padding: 0.75rem; } .sidebar__nav ul { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; } .nav-item { display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-xl); color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .nav-item:hover { text-decoration: none; background: hsl(var(--accent) / 0.1); color: hsl(var(--foreground)); } .nav-item.is-active, .nav-item[aria-current="page"] { background: hsl(var(--sidebar-primary)); color: hsl(var(--sidebar-primary-foreground)); box-shadow: 0 8px 20px -6px hsl(var(--sidebar-primary) / 0.5); } .nav-item.is-active .icon { stroke-width: 2.25; } .sidebar__footer { flex-shrink: 0; padding: 0.75rem; border-top: 1px solid hsl(var(--sidebar-border)); } .sidebar__footer form { margin: 0; } .sidebar__footer .nav-item { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; } .sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.8); opacity: 0; pointer-events: none; transition: opacity var(--duration) var(--ease); } .nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; height: var(--topbar-height); padding: 0 1rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / 0.8); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); } .topbar__title { min-width: 0; overflow: hidden; font-size: 0.875rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .topbar__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .topbar__user { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.5rem; font-size: 0.875rem; font-weight: 500; } .topbar__user-name { display: none; } .app-main { min-width: 0; } .page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom)); } .page > * + * { margin-top: 0; } .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.5rem; } .page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .page-header p { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } .page-header__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } @media (min-width: 768px) { .sidebar { width: var(--sidebar-width); transform: none; } .nav-open .sidebar { box-shadow: none; } .sidebar .sidebar__close, .topbar .topbar__menu, .sidebar-backdrop { display: none; } .app-main { margin-left: var(--sidebar-width); } .topbar { padding: 0 2rem; } .topbar__title { visibility: hidden; } .topbar__user-name { display: inline; } .page { padding: 2rem 2rem 3rem; } .page-header h1 { font-size: 1.875rem; } } @media (min-width: 1280px) { .topbar { padding: 0 3.75rem; } .page { padding: 2rem 3.75rem 3rem; } } /* 4. Componentes =========================================================== */ /* 4.1 Botão */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--radius-md); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease); } .btn:hover { text-decoration: none; background: hsl(var(--primary) / 0.9); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .btn .icon { width: 1rem; height: 1rem; } .btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn--destructive, .btn--danger { background: hsl(var(--destructive)); border-color: transparent; color: hsl(var(--destructive-foreground)); } .btn--destructive:hover, .btn--danger:hover { background: hsl(var(--destructive) / 0.9); } .btn--outline { border-color: hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); } .btn--outline:hover { background: hsl(var(--accent)); border-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } /* "outline + danger": ação destrutiva de menor peso (ex.: remover item de lista). */ .btn--outline.btn--danger { border-color: hsl(var(--destructive) / 0.4); background: hsl(var(--background)); color: hsl(var(--destructive)); } .btn--outline.btn--danger:hover { border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn--secondary:hover { background: hsl(var(--secondary) / 0.8); } .btn--ghost { background: transparent; color: hsl(var(--foreground)); } .btn--ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn--link { height: auto; padding: 0; background: transparent; color: hsl(var(--primary)); } .btn--link:hover { background: transparent; text-decoration: underline; } .btn--sm { height: 2.25rem; padding: 0 0.75rem; } .btn--lg { height: 2.75rem; padding: 0 2rem; } .btn--block { display: flex; width: 100%; } .btn--icon { width: 2.5rem; padding: 0; } .btn--icon.btn--sm { width: 2.25rem; } /* Variação de marca: cápsula com brilho laranja. */ .btn-glow { border-radius: 9999px; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); box-shadow: var(--glow-md); } .btn-glow:hover { background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); box-shadow: var(--glow-lg); transform: translateY(-1px); } .btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } form.inline { display: inline; margin: 0; } /* Ação por ícone: alvo de toque de 44px no mobile. */ @media (pointer: coarse) { .btn--icon { min-width: 2.75rem; min-height: 2.75rem; } } /* 4.2 Campos */ label { font-size: 0.875rem; font-weight: 500; line-height: 1.25; } :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"], [type="file"], [type="submit"], [type="button"]), select, textarea), .input { display: block; width: 100%; height: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--input)); border-radius: var(--radius-md); background-color: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 1rem; line-height: 1.25rem; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } textarea:where(*) { min-height: 5rem; height: auto; resize: vertical; } select:where(*) { appearance: none; padding-right: 2.25rem; 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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; cursor: pointer; } select[multiple] { height: auto; padding-right: 0.75rem; background-image: none; } input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; } :where(input, select, textarea):focus-visible, .input:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / 0.9); } input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.5; } :where(input[readonly]) { background-color: hsl(var(--muted)); } input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { min-width: 0; } input[type="color"] { width: 4rem; height: 2.5rem; padding: 0.25rem; border: 1px solid hsl(var(--input)); border-radius: var(--radius-md); background: hsl(var(--background)); cursor: pointer; } input[type="file"] { display: block; width: 100%; font: inherit; font-size: 0.875rem; color: hsl(var(--muted-foreground)); } input[type="file"]::file-selector-button { height: 2.25rem; margin-right: 0.75rem; padding: 0 0.75rem; border: 1px solid hsl(var(--input)); border-radius: var(--radius-md); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font: inherit; font-weight: 600; cursor: pointer; } input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; accent-color: hsl(var(--primary)); cursor: pointer; vertical-align: middle; } input[type="range"] { width: 100%; accent-color: hsl(var(--primary)); } /* Switch: — trilho 44×24, marcador 20. */ input[type="checkbox"].switch { position: relative; width: 2.75rem; height: 1.5rem; appearance: none; border: 2px solid transparent; border-radius: 9999px; background: hsl(var(--input)); transition: background-color var(--duration-fast) var(--ease); } input[type="checkbox"].switch::before { content: ""; position: absolute; top: 0; left: 0; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: hsl(var(--background)); box-shadow: var(--shadow-lg); transition: transform var(--duration-fast) var(--ease); } input[type="checkbox"].switch:checked { background: hsl(var(--primary)); } input[type="checkbox"].switch:checked::before { transform: translateX(1.25rem); } .field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .field > label:has(> input[type="checkbox"]), .field > label:has(> input[type="radio"]), .check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; } .field-hint, .field .text-muted { margin: 0; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; } @media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid > .field--full { grid-column: 1 / -1; } } .form-actions { display: flex; flex-direction: column-reverse; gap: 0.5rem; margin-top: 0.5rem; } @media (min-width: 640px) { .form-actions { flex-direction: row; justify-content: flex-end; } } /* Faixa de filtros: simples, sem cartão aninhado. */ .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); align-items: end; gap: 0.75rem; margin-bottom: 1rem; } .filters label { display: block; margin-bottom: 0.375rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .search-input { height: 2.75rem !important; padding-left: 2.5rem !important; border-radius: var(--radius-lg) !important; 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='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.875rem center; background-size: 1rem; } .dark .search-input { background-color: hsl(0 0% 100% / 0.04) !important; border-color: hsl(0 0% 100% / 0.1) !important; } @media (min-width: 768px) { :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="color"], [type="file"], [type="submit"], [type="button"]), select, textarea), .input { font-size: 0.875rem; } } /* 4.3 Cartão */ .card { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: var(--shadow-card); } @media (min-width: 768px) { .card { padding: 1.5rem; } } .card > h2, .card-title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .card > h2 + .card-description, .card > h2 + p.card-description { margin-top: -0.75rem; } .card > h2:only-child, .card > h2:last-child { margin-bottom: 0; } .card > h3 { margin: 1.25rem 0 0.5rem; } .card-description, .card > p.card-description { margin: 0 0 1rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } .card-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .card-header .card-description { margin: 0.25rem 0 0; } .card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } .card > *:last-child { margin-bottom: 0; } .card--flush { padding: 0; overflow: hidden; } .card--primary { border-color: hsl(var(--primary) / 0.5); box-shadow: var(--glow-sm); } .card--warning { border-color: hsl(var(--warning) / 0.5); background: hsl(var(--warning) / 0.06); } .card--danger, .card--destructive { border-color: hsl(var(--destructive) / 0.5); background: hsl(var(--destructive) / 0.06); } .card--success { border-color: hsl(var(--success) / 0.5); background: hsl(var(--success) / 0.06); } .card--inset { margin: 0.75rem 0; padding: 1rem; border-radius: var(--radius-md); background: hsl(var(--muted) / 0.5); box-shadow: none; } a.card-link, .card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); } a.card-link:hover { text-decoration: none; border-color: hsl(var(--primary) / 0.6); box-shadow: var(--glow-md); } /* Painel premium / login. */ .glass-card { border: 1px solid hsl(var(--border) / 0.6); border-radius: var(--radius-2xl); background: hsl(var(--card) / 0.9); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-premium); } .dark .glass-card { border-color: hsl(0 0% 100% / 0.08); background: linear-gradient(160deg, hsl(0 0% 10% / 0.92), hsl(0 0% 12.5% / 0.88)); } /* 4.4 Métrica */ .metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } @media (min-width: 768px) { .metrics-grid { gap: 1rem; } } @media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .metrics-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .metrics-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .metrics-grid > .card, .metric-card { position: relative; margin: 0; overflow: hidden; transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .metrics-grid > .card:hover, .metric-card:hover { border-color: hsl(var(--primary) / 0.35); } .metrics-grid > .card .card-description, .metric-card .card-description, .metric-label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; } .metrics-grid > .card > .metric-icon, .metric-card > .metric-icon { position: absolute; top: 1rem; right: 1rem; } @media (min-width: 768px) { .metrics-grid > .card > .metric-icon, .metric-card > .metric-icon { top: 1.25rem; right: 1.25rem; } } .metrics-grid > .card > .metric-icon ~ .card-description { padding-right: 2.75rem; min-height: 2.25rem; } .metric-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--radius-xl); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } .metric-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } @media (min-width: 640px) { .metric-value { font-size: 1.5rem; } } @media (min-width: 1024px) { .metric-value { font-size: 1.875rem; } } @media (max-width: 639px) { .metrics-grid > .card { padding: 0.875rem; } .metrics-grid > .card > .metric-icon { top: 0.75rem; right: 0.75rem; width: 1.75rem; height: 1.75rem; } .metrics-grid > .card > .metric-icon .icon { width: 0.875rem; height: 0.875rem; } .metrics-grid > .card > .metric-icon ~ .card-description { padding-right: 2rem; min-height: 1.75rem; font-size: 0.75rem; } } .metric-hint { margin-top: 0.25rem; color: hsl(var(--muted-foreground)); font-size: 0.75rem; } /* 4.5 Badge */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border: 1px solid transparent; border-radius: 9999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: 0.75rem; font-weight: 600; line-height: 1rem; white-space: nowrap; vertical-align: middle; } .badge .icon { width: 0.75rem; height: 0.75rem; } .badge--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .badge--secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .badge--outline { border-color: hsl(var(--border)); background: transparent; color: hsl(var(--foreground)); } .badge--success, .badge--create, .badge--booking, .badge-success { border-color: hsl(var(--success) / 0.35); background: hsl(var(--success) / 0.12); color: hsl(var(--success)); } .badge--warning, .badge--update, .badge--status_change, .badge-warning { border-color: hsl(var(--warning) / 0.35); background: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); } .badge--info { border-color: hsl(var(--info) / 0.35); background: hsl(var(--info) / 0.12); color: hsl(var(--info)); } .badge--destructive, .badge--delete, .badge--error, .badge-danger { border-color: hsl(var(--destructive) / 0.35); background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); } .badge--brand { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); } /* 4.6 Tabela */ .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: 0.875rem; } thead tr { border-bottom: 1px solid hsl(var(--border)); } th { height: 3rem; padding: 0 1rem; color: hsl(var(--muted-foreground)); font-weight: 500; text-align: left; vertical-align: middle; white-space: nowrap; } td { padding: 1rem; vertical-align: middle; } tbody tr { border-bottom: 1px solid hsl(var(--border)); transition: background-color var(--duration-fast) var(--ease); } tbody tr:last-child { border-bottom: 0; } tbody tr:hover { background: hsl(var(--muted) / 0.5); } td .btn { height: 2.25rem; padding: 0 0.75rem; } td form.inline + form.inline, td .btn + .btn, td .btn + form.inline, td form.inline + .btn { margin-left: 0.25rem; } .card > .table-wrap:first-child, .card > h2 + .table-wrap, .card > .card-description + .table-wrap { margin-top: 0.5rem; } /* 4.7 Tabs */ .tabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 2.5rem; max-width: 100%; margin-bottom: 1.5rem; padding: 0.25rem; border-radius: var(--radius-md); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .tabs > a, .tabs > button, .tab { display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2rem; padding: 0.375rem 0.75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; font-size: 0.875rem; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); } .tabs > a:hover, .tab:hover { text-decoration: none; color: hsl(var(--foreground)); } .tabs > a.active, .tabs > a.is-active, .tabs > a[aria-current="page"], .tab.is-active { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: var(--shadow-sm); } @media (max-width: 639px) { .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .tabs > a, .tab { white-space: normal; text-align: center; } } /* 4.8 Alerta e toast */ .alert, .flash { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 1.25rem; padding: 0.875rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); font-size: 0.875rem; } .alert .icon { width: 1rem; height: 1rem; margin-top: 0.125rem; } .alert--success, .flash--success { border-color: hsl(var(--success) / 0.4); background: hsl(var(--success) / 0.1); color: hsl(var(--success)); } .alert--warning, .flash--warning { border-color: hsl(var(--warning) / 0.4); background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .alert--info, .flash--info { border-color: hsl(var(--info) / 0.4); background: hsl(var(--info) / 0.1); color: hsl(var(--info)); } .alert--destructive, .flash--error { border-color: hsl(var(--destructive) / 0.4); background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .toast-region { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } @media (min-width: 640px) { .toast-region { left: auto; width: 24rem; } } .toast { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); box-shadow: var(--shadow-xl); font-size: 0.875rem; font-weight: 500; pointer-events: auto; animation: slide-in-up var(--duration-slow) var(--ease) both; } .toast.is-leaving { animation: fade-out var(--duration) var(--ease) both; } .toast__icon { margin-top: 0.0625rem; } .toast--success .toast__icon { color: hsl(var(--success)); } .toast--error { border-color: hsl(var(--destructive) / 0.5); } .toast--error .toast__icon { color: hsl(var(--destructive)); } .toast__text { flex: 1; } .toast__close { display: inline-flex; margin: -0.25rem -0.25rem 0 0; padding: 0.25rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; } .toast__close:hover { color: hsl(var(--foreground)); } /* 4.9 Diálogo (renderizado no servidor, fecha voltando pra URL sem o parâmetro) */ .modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.8); animation: fade-in var(--duration-fast) var(--ease) both; } .modal__panel { position: relative; width: 100%; max-width: 32rem; max-height: 85vh; max-height: 85dvh; overflow-y: auto; padding: 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--background)); box-shadow: var(--shadow-2xl); animation: dialog-in var(--duration-fast) var(--ease) both; } .modal__panel--lg { max-width: 42rem; } .modal__panel:focus { outline: none; } @media (min-width: 640px) { .modal__panel { padding: 1.5rem; } } .modal__header { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; padding-right: 2rem; } .modal__title { font-size: 1.125rem; font-weight: 600; } .modal__description { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } .modal__close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; padding: 0.25rem; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); opacity: 0.8; } .modal__close:hover { opacity: 1; color: hsl(var(--foreground)); text-decoration: none; } .modal__footer { display: flex; flex-direction: column-reverse; gap: 0.5rem; margin-top: 1.5rem; } @media (min-width: 640px) { .modal__footer { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; } } .modal__footer form.inline { display: contents; } .detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem 1rem; margin: 0; font-size: 0.875rem; } .detail-list dt { color: hsl(var(--muted-foreground)); } .detail-list dd { margin: 0; font-weight: 500; text-align: right; } /* 4.10 Progresso, avatar, skeleton, spinner, separador */ .progress { position: relative; width: 100%; height: 0.5rem; overflow: hidden; border-radius: 9999px; background: hsl(var(--secondary)); } .progress__bar { height: 100%; border-radius: inherit; background: hsl(var(--primary)); transition: width var(--duration-slower) var(--ease); } .progress--soft .progress__bar { background: hsl(var(--primary) / 0.6); } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; overflow: hidden; border-radius: 9999px; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--sm { width: 2rem; height: 2rem; font-size: 0.75rem; } .avatar--lg { width: 4rem; height: 4rem; font-size: 1.25rem; } .skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--muted) / 0.5), hsl(var(--muted))); background-size: 200% 100%; animation: shimmer 1.6s linear infinite, pulse 2s var(--ease) infinite; } .spinner { animation: spin 1s linear infinite; } .separator { height: 1px; margin: 1rem 0; border: 0; background: hsl(var(--border)); } .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; color: hsl(var(--muted-foreground)); text-align: center; } .empty-state .icon { width: 2rem; height: 2rem; opacity: 0.6; } /* 4.11 Lista compacta (itens com borda dentro de um cartão) */ .list-item { display: block; margin-bottom: 0.5rem; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); color: inherit; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); } a.list-item:hover { text-decoration: none; border-color: hsl(var(--primary) / 0.5); background: hsl(var(--muted) / 0.4); } .list-item--done { border-color: hsl(var(--success) / 0.3); background: hsl(var(--success) / 0.08); } .list-item--muted { opacity: 0.7; } .list-item--danger { border-color: hsl(var(--destructive) / 0.3); background: hsl(var(--destructive) / 0.05); } /* 4.12 Chips e horários */ .chip-row, .slot-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); } .chip, .slot { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 2.5rem; padding: 0.5rem 0.875rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all var(--duration) var(--ease); } .slot { border-radius: var(--radius-md); font-variant-numeric: tabular-nums; } .chip:hover, .slot:hover { text-decoration: none; border-color: hsl(var(--primary) / 0.6); } .chip.selected, .chip.is-active, .slot.is-selected { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--glow-sm); transform: scale(1.03); } .checkbox-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--card)); cursor: pointer; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease); } .checkbox-row:hover { border-color: hsl(var(--primary) / 0.5); } .checkbox-row:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); } /* 4.13 Agenda (grade do mês) */ .calendar-container { border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); background: hsl(var(--card)); } .calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; } .calendar-nav strong { font-size: 1rem; font-weight: 600; text-transform: capitalize; } .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.375rem; } .calendar-weekday { padding-bottom: 0.25rem; color: hsl(var(--muted-foreground)); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; } .calendar-day { display: block; min-width: 0; min-height: 4.5rem; padding: 0.375rem; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--secondary) / 0.5); color: inherit; text-align: left; text-decoration: none; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration) var(--ease); } .calendar-day:hover { text-decoration: none; border-color: hsl(var(--primary) / 0.5); } .calendar-day__num { font-size: 0.875rem; font-weight: 600; } .calendar-day__events { margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.35; } .calendar-day__events > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .calendar-day.is-today { border-color: hsl(var(--primary)); } .calendar-day.is-today .calendar-day__num { color: hsl(var(--primary)); } .calendar-day.is-selected { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); box-shadow: var(--glow-sm); } .calendar-day.is-blocked { border-color: hsl(var(--destructive) / 0.4); background: hsl(var(--destructive) / 0.08); } @media (max-width: 639px) { .calendar-day { min-height: 3.25rem; padding: 0.25rem; } .calendar-day__events { display: none; } } .day-panel { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); } .timeline { position: relative; margin: 0; padding: 0 0 0 1.25rem; list-style: none; } .timeline::before { content: ""; position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.3125rem; width: 2px; border-radius: 1px; background: hsl(var(--primary) / 0.6); } /* 4.14 Etapas */ .steps { display: flex; align-items: center; margin: 0 0 1.5rem; padding: 0; list-style: none; } .steps__item { display: flex; flex: 1; align-items: center; } .steps__item:last-child { flex: 0 0 auto; } .steps__dot { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: 0.8125rem; font-weight: 600; transition: all var(--duration) var(--ease); } .steps__line { flex: 1; height: 3px; margin: 0 0.375rem; border-radius: 2px; background: hsl(var(--muted)); transition: background-color var(--duration-slower) var(--ease); } .steps__item.is-current .steps__dot { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 0 4px hsl(var(--primary) / 0.2); transform: scale(1.1); } .steps__item.is-done .steps__dot { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .steps__item.is-done .steps__line { background: hsl(var(--primary)); } /* 4.15 Paginação */ .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } /* 5. Portal público ======================================================== */ .public-body { background-color: hsl(var(--background)); background-image: radial-gradient(40rem 26rem at 50% -8rem, hsl(var(--primary) / 0.16), transparent 70%), linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.6)); background-attachment: fixed; } .public-shell { display: flex; flex-direction: column; width: 100%; max-width: 32rem; min-height: 100vh; min-height: 100dvh; margin: 0 auto; } .public-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem; padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem; border-bottom: 1px solid hsl(var(--border) / 0.6); background: hsl(var(--background) / 0.7); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } .public-header h1 { font-size: 1rem; font-weight: 700; line-height: 1.25; } .public-header p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.75rem; } .brand-logo { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-xl); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); object-fit: cover; box-shadow: var(--glow-sm); } .brand-logo .icon { width: 1.25rem; height: 1.25rem; } .brand-logo--lg { width: 5rem; height: 5rem; border-radius: var(--radius-2xl); box-shadow: var(--glow-lg); } .brand-logo--lg .icon { width: 2.5rem; height: 2.5rem; } .hoori-wordmark { display: block; width: auto; aspect-ratio: 1191 / 416; background-color: currentColor; -webkit-mask: var(--hoori-logo) center / contain no-repeat; mask: var(--hoori-logo) center / contain no-repeat; } .hoori-mark { display: inline-block; background-color: currentColor; -webkit-mask: var(--hoori-mark) center / contain no-repeat; mask: var(--hoori-mark) center / contain no-repeat; } .auth__wordmark { margin: 0; line-height: 0; color: hsl(var(--foreground)); } .auth__wordmark .hoori-wordmark { height: 3.25rem; margin-inline: auto; } .sidebar__wordmark { display: inline-flex; flex-shrink: 0; color: hsl(var(--foreground)); } .sidebar__wordmark .hoori-wordmark { height: 1.5rem; } .sidebar__caption { color: hsl(var(--muted-foreground)); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .sidebar__logo .icon { width: 1.375rem; height: 1.375rem; } .public-main { flex: 1; padding: 1.25rem 1rem; } .public-main > h2 { margin: 0 0 0.25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } .public-main > h2 + .muted { margin-bottom: 1.25rem; } .public-main form > label { display: block; margin: 0 0 0.5rem; } .public-main form > input, .public-main form > select, .public-main form > textarea { margin-bottom: 1rem; } .public-shell .btn { display: flex; width: 100%; height: 2.75rem; font-size: 0.9375rem; } .public-shell .btn + .btn, .public-shell form + .btn, .public-shell .btn + form { margin-top: 0.5rem; } .public-shell .btn-row { display: flex; gap: 0.5rem; } .public-shell .btn-row .btn { flex: 1; } .public-card, .public-shell .card { margin-bottom: 0.75rem; padding: 1rem; border: 1px solid hsl(var(--border) / 0.7); border-radius: var(--radius-public); background: hsl(var(--card) / 0.8); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--shadow-card); } .public-shell .card { border-radius: var(--radius-2xl); } .public-shell .card h2 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; } .public-shell a.card-link { padding: 1rem 1.25rem; } .public-shell a.card-link:hover { border-color: hsl(var(--primary) / 0.7); box-shadow: var(--glow-md); transform: translateY(-1px); } .service-card { position: relative; border-radius: var(--radius-2xl); } .public-shell .tabs { display: flex; width: 100%; margin-bottom: 1rem; } .public-shell .tabs > a { flex: 1; } .public-shell:has(.bottom-nav) .public-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); } .public-footer { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); color: hsl(var(--muted-foreground)); font-size: 0.6875rem; text-align: center; } .public-footer strong { color: hsl(var(--primary)); font-weight: 700; } /* Navegação inferior pública: ícone + rótulo, ativo em círculo preenchido. */ .bottom-nav { position: fixed; bottom: 0; left: 50%; z-index: 20; width: 100%; max-width: 32rem; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); border-top: 1px solid hsl(var(--border) / 0.6); background: hsl(var(--background) / 0.75); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 2.75rem; color: hsl(var(--muted-foreground)); font-size: 0.6875rem; font-weight: 500; text-decoration: none; } .bottom-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; transition: all var(--duration) var(--ease); } .bottom-nav a.is-active { color: hsl(var(--primary)); } .bottom-nav a.is-active .bottom-nav__icon { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--glow-md); transform: scale(1.1); } .bottom-nav a.is-active .icon { stroke-width: 2.5; } /* 6. Autenticação (sempre escura, ver `.dark` no ) =================== */ .auth-body { display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); background-color: hsl(var(--background)); background-image: radial-gradient(36rem 28rem at 50% -6rem, hsl(var(--primary) / 0.28), transparent 70%), radial-gradient(30rem 20rem at 100% 100%, hsl(var(--primary) / 0.1), transparent 70%), linear-gradient(180deg, hsl(0 0% 6%), hsl(var(--background))); } .auth { width: 100%; max-width: 26rem; animation: slide-in-up var(--duration-slow) var(--ease) both; } .auth__brand { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.75rem; text-align: center; } .auth__brand h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; } .auth__brand p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } .auth__card { padding: 1.5rem; } @media (min-width: 640px) { .auth__card { padding: 2rem; } } .auth__card h2 { margin-bottom: 0.25rem; font-size: 1.25rem; } .auth__card .card-description { margin-bottom: 1.25rem; } .auth__card .field input { height: 2.75rem; border-radius: var(--radius-lg); background: hsl(0 0% 100% / 0.04); border-color: hsl(0 0% 100% / 0.1); } .auth__card .btn { width: 100%; height: 2.75rem; margin-top: 0.5rem; } .auth__links { margin-top: 1.25rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; text-align: center; } .auth__links a { color: hsl(var(--muted-foreground)); } .auth__links a:hover { color: hsl(var(--foreground)); } .auth__footer { margin-top: 2rem; color: hsl(var(--muted-foreground)); font-size: 0.75rem; text-align: center; } .auth__footer strong { color: hsl(var(--primary)); } .auth__footer a, .public-footer a { color: inherit; text-decoration: none; } .auth__footer a:hover, .public-footer a:hover { text-decoration: underline; text-decoration-color: hsl(var(--primary)); } .footer-wordmark-link { display: inline-flex; vertical-align: middle; } .footer-wordmark-link:hover { text-decoration: none; } .footer-wordmark { height: 0.8125rem; color: hsl(var(--primary)); } .status-page { text-align: center; } .status-page__code { margin: 0; background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; } /* 7. Utilitários =========================================================== */ .text-muted, .muted { color: hsl(var(--muted-foreground)); } .muted { margin: 0; font-size: 0.875rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-2xs { font-size: 0.6875rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .tracking-wide { letter-spacing: 0.05em; } .text-center { text-align: center; } .text-right { text-align: right; } .text-primary { color: hsl(var(--primary)); } .text-success { color: hsl(var(--success)); } .text-warning { color: hsl(var(--warning)); } .text-info { color: hsl(var(--info)); } .text-destructive { color: hsl(var(--destructive)); } .tabular { font-variant-numeric: tabular-nums; } .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .break-all { word-break: break-all; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; min-width: 0; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .row-between { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .stack > * + * { margin-top: 1rem; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .grid { display: grid; gap: 0.5rem; } .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .grid-main-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .grid-main-aside > .card { margin-bottom: 0; } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-main-aside { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } .m-0 { margin: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .w-full { width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 200; padding: 0.5rem 1rem; border-radius: var(--radius-md); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); transform: translateY(-200%); } .skip-link:focus { transform: none; } .color-swatch { display: inline-block; width: 3rem; height: 3rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); } .thumb { display: block; width: 5rem; height: 5rem; margin-bottom: 0.75rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); object-fit: cover; } .thumb--contain { object-fit: contain; } .thumb--round { width: 4rem; height: 4rem; border-radius: 9999px; } /* Troca de tema: mostra o ícone do tema oposto ao atual. */ .theme-toggle .icon-sun { display: none; } .dark .theme-toggle .icon-sun { display: inline-block; } .dark .theme-toggle .icon-moon { display: none; } /* 8. Movimento ============================================================= */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-up { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } } @keyframes dialog-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); } 50% { box-shadow: 0 0 0 10px hsl(var(--primary) / 0); } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes pulse { 50% { opacity: 0.6; } } @keyframes spin { to { transform: rotate(360deg); } } .animate-fade-in { animation: fade-in var(--duration) var(--ease) both; } .animate-scale-in { animation: scale-in var(--duration-fast) var(--ease) both; } .animate-slide-in-up { animation: slide-in-up var(--duration-slow) var(--ease) both; } .animate-slide-in-right { animation: slide-in-right var(--duration) var(--ease) both; } .animate-pulse-glow { animation: pulse-glow 2s var(--ease) infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .chip.selected, .slot.is-selected, .steps__item.is-current .steps__dot, .bottom-nav a.is-active .bottom-nav__icon, a.card-link:hover { transform: none !important; } } /* 9. Nomes antigos ========================================================= */ /* As telas portadas antes deste CSS usam estes nomes; ficam como apelidos pra não precisar reescrever cada template de uma vez. Código novo usa os nomes das seções acima. */ .admin-page-header { flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.5rem; } .admin-page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .admin-page-header p { margin: 0.25rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } @media (min-width: 768px) { .admin-page-header h1 { font-size: 1.875rem; } } /* Cabeçalho com ação principal: título e descrição à esquerda, ação à direita. */ .admin-page-header:has(> .btn, > form, > .btn-group) { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.25rem; } .admin-page-header:has(> .btn, > form, > .btn-group) > :is(.btn, form, .btn-group) { justify-self: start; margin-top: 0.75rem; } @media (min-width: 640px) { .admin-page-header:has(> .btn, > form, > .btn-group) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .admin-page-header:has(> .btn, > form, > .btn-group) > :is(h1, p) { grid-column: 1; } .admin-page-header:has(> .btn, > form, > .btn-group) > :is(.btn, form, .btn-group) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-top: 0; } } .btn-outline { border-color: hsl(var(--input)); background: hsl(var(--background) / 0.6); color: hsl(var(--foreground)); } .btn-outline:hover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); color: hsl(var(--foreground)); } .btn-danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-danger:hover { background: hsl(var(--destructive) / 0.9); } .error, .success { margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid; border-radius: var(--radius-lg); font-size: 0.875rem; } .error { border-color: hsl(var(--destructive) / 0.4); background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .success { border-color: hsl(var(--success) / 0.4); background: hsl(var(--success) / 0.1); color: hsl(var(--success)); } .footer-note { padding: 1rem; color: hsl(var(--muted-foreground)); font-size: 0.6875rem; text-align: center; }