/* ============================================================ beautyOffice — Sistema de temas Noir 3 direções (noir / petala / studio) × 2 modos (light / dark) Tudo dirigido por custom properties no . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=DM+Serif+Display&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap'); /* fallback antes da direção carregar */ html { --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-display: "Cormorant Garamond", Georgia, serif; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .45s ease, color .45s ease; } h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 600; color: var(--text); } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); color: var(--text); } /* scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--text-3); } /* ============================================================ DIRECTION-LEVEL TOKENS (fonts, radius, shadow, accent hue) ============================================================ */ html[data-dir="noir"] { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --display-weight: 600; --display-tracking: .005em; --shadow-card: 0 1px 2px rgba(20,16,10,.05); --shadow-pop: 0 18px 50px -12px rgba(20,16,10,.30); --card-border-w: 1px; --kpi-display-size: 2.4rem; } html[data-dir="petala"] { --font-display: "DM Serif Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-pill: 999px; --display-weight: 400; --display-tracking: 0; --shadow-card: 0 2px 10px -4px rgba(80,50,30,.10); --shadow-pop: 0 20px 50px -14px rgba(80,50,30,.28); --card-border-w: 1px; --kpi-display-size: 2.1rem; } html[data-dir="studio"] { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --radius-pill: 999px; --display-weight: 600; --display-tracking: -.02em; --shadow-card: 0 4px 18px -6px rgba(60,40,120,.12); --shadow-pop: 0 24px 60px -16px rgba(60,40,120,.30); --card-border-w: 1.5px; --kpi-display-size: 2.05rem; } /* barber — herança de barbearia: tipografia de letreiro, cantos secos */ html[data-dir="barber"] { --font-display: "Oswald", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --radius-sm: 3px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px; --display-weight: 600; --display-tracking: .015em; --shadow-card: 0 1px 2px rgba(0,0,0,.20); --shadow-pop: 0 22px 54px -14px rgba(0,0,0,.55); --card-border-w: 1px; --kpi-display-size: 2.6rem; } /* letreiro: caixa-alta nos títulos de marca/página */ html[data-dir="barber"] .brand-name, html[data-dir="barber"] .page-title, html[data-dir="barber"] .kpi-val, html[data-dir="barber"] .bk-salon, html[data-dir="barber"] .bk-share h1 { text-transform: uppercase; } html[data-dir="barber"] .crumb { text-transform: uppercase; letter-spacing: .1em; } /* ============================================================ COLOR TOKENS — blocks (dir × mode) ============================================================ */ /* ---- NOIR · light ---- */ html[data-dir="noir"][data-mode="light"] { --bg:#f7f4ef; --bg-2:#efe9df; --surface:#fffdf9; --surface-2:#f4efe6; --text:#1c1814; --text-2:#6b6357; --text-3:#9a9283; --line:#e8e1d5; --line-2:#d9d0c0; --accent:#977a3f; --accent-2:#c9a25f; --accent-contrast:#fffdf7; --accent-soft:rgba(151,122,63,.12); --sidebar-bg:#15120d; --sidebar-surface:#1e1a13; --sidebar-text:#e6dcc8; --sidebar-muted:#9c917c; --sidebar-active:rgba(232,201,138,.16); } /* ---- NOIR · dark ---- */ html[data-dir="noir"][data-mode="dark"] { --bg:#100e0b; --bg-2:#0a0908; --surface:#1a1612; --surface-2:#221d17; --text:#f1ebe0; --text-2:#a99f8d; --text-3:#6f675a; --line:#2a251e; --line-2:#3a342b; --accent:#e8c98a; --accent-2:#c9a25f; --accent-contrast:#1a1510; --accent-soft:rgba(232,201,138,.14); --sidebar-bg:#0a0908; --sidebar-surface:#15120d; --sidebar-text:#d6ccb8; --sidebar-muted:#8a8070; --sidebar-active:rgba(232,201,138,.16); } /* ---- PETALA · light ---- */ html[data-dir="petala"][data-mode="light"] { --bg:#f6f1ea; --bg-2:#efe5d9; --surface:#fffdf9; --surface-2:#f8f1e8; --text:#3a2c23; --text-2:#8a7565; --text-3:#b3a394; --line:#ece0d1; --line-2:#ddcab6; --accent:#b06a45; --accent-2:#d99873; --accent-contrast:#fff8f3; --accent-soft:rgba(176,106,69,.12); --sidebar-bg:#fbf6ef; --sidebar-surface:#f4eadd; --sidebar-text:#4d3b2f; --sidebar-muted:#9c8473; --sidebar-active:rgba(176,106,69,.13); } /* ---- PETALA · dark ---- */ html[data-dir="petala"][data-mode="dark"] { --bg:#1d1610; --bg-2:#160f0a; --surface:#291f19; --surface-2:#34281f; --text:#f4ebe1; --text-2:#c2ad9b; --text-3:#8a7565; --line:#392c22; --line-2:#4a3a2d; --accent:#dd9870; --accent-2:#e8ad8a; --accent-contrast:#241710; --accent-soft:rgba(221,152,112,.15); --sidebar-bg:#160f0a; --sidebar-surface:#221913; --sidebar-text:#e0cdbb; --sidebar-muted:#9c8473; --sidebar-active:rgba(221,152,112,.16); } /* ---- STUDIO · light ---- */ html[data-dir="studio"][data-mode="light"] { --bg:#f5f3fa; --bg-2:#ece8f6; --surface:#ffffff; --surface-2:#f4f1fb; --text:#211c2e; --text-2:#6c6580; --text-3:#9d97ad; --line:#e9e4f2; --line-2:#dad2ea; --accent:#6d4ee0; --accent-2:#9a7bff; --accent-contrast:#ffffff; --accent-soft:rgba(109,78,224,.10); --sidebar-bg:#ffffff; --sidebar-surface:#f4f1fb; --sidebar-text:#4a4360; --sidebar-muted:#9d97ad; --sidebar-active:rgba(109,78,224,.10); } /* ---- STUDIO · dark ---- */ html[data-dir="studio"][data-mode="dark"] { --bg:#131020; --bg-2:#0d0b18; --surface:#1d1830; --surface-2:#271f3f; --text:#efecf8; --text-2:#aaa2c4; --text-3:#756d90; --line:#2c2542; --line-2:#3b3357; --accent:#a892ff; --accent-2:#c1b0ff; --accent-contrast:#15102a; --accent-soft:rgba(168,146,255,.14); --sidebar-bg:#0d0b18; --sidebar-surface:#1a1530; --sidebar-text:#c5bce0; --sidebar-muted:#756d90; --sidebar-active:rgba(168,146,255,.14); } /* ---- BARBER · light ---- */ html[data-dir="barber"][data-mode="light"] { --bg:#ece7df; --bg-2:#e1dccf; --surface:#f7f3ec; --surface-2:#ebe5da; --text:#1b1816; --text-2:#5f574e; --text-3:#938a7d; --line:#d8d0c2; --line-2:#c5bbab; --accent:#9c3b32; --accent-2:#c25a4e; --accent-contrast:#f7f3ec; --accent-soft:rgba(156,59,50,.12); --sidebar-bg:#16140f; --sidebar-surface:#201d16; --sidebar-text:#e3d8c5; --sidebar-muted:#9a8f7c; --sidebar-active:rgba(207,91,75,.20); } /* ---- BARBER · dark (base da barbearia) ---- */ html[data-dir="barber"][data-mode="dark"] { --bg:#14120f; --bg-2:#0c0b09; --surface:#1d1a15; --surface-2:#262119; --text:#efe7d8; --text-2:#a89c88; --text-3:#6f6657; --line:#2c271f; --line-2:#3b342a; --accent:#cf5b4b; --accent-2:#e07a64; --accent-contrast:#16110d; --accent-soft:rgba(207,91,75,.16); --sidebar-bg:#0c0b09; --sidebar-surface:#16140f; --sidebar-text:#ddd1bd; --sidebar-muted:#8a7f6d; --sidebar-active:rgba(207,91,75,.20); } /* ---- BARBER · variações de acento (temas do barberbase.com.br) ---- */ html[data-dir="barber"][data-accent="dourado"] { --accent:#c9a25f; --accent-2:#dbb877; --accent-contrast:#16110d; --accent-soft:rgba(201,162,95,.16); --sidebar-active:rgba(201,162,95,.20); } html[data-dir="barber"][data-accent="terracota"] { --accent:#cf5b4b; --accent-2:#e07a64; --accent-contrast:#16110d; --accent-soft:rgba(207,91,75,.16); --sidebar-active:rgba(207,91,75,.20); } html[data-dir="barber"][data-accent="rose"] { --accent:#c66f86; --accent-2:#db8ba0; --accent-contrast:#16110d; --accent-soft:rgba(198,111,134,.16); --sidebar-active:rgba(198,111,134,.20); } html[data-dir="barber"][data-accent="salvia"] { --accent:#6f9b76; --accent-2:#8db894; --accent-contrast:#16110d; --accent-soft:rgba(111,155,118,.16); --sidebar-active:rgba(111,155,118,.20); } html[data-dir="barber"][data-accent="lilas"] { --accent:#8a72e8; --accent-2:#a591f0; --accent-contrast:#16110d; --accent-soft:rgba(138,114,232,.16); --sidebar-active:rgba(138,114,232,.20); } html[data-dir="barber"][data-accent="azul"] { --accent:#4f7fd0; --accent-2:#6f9ae0; --accent-contrast:#16110d; --accent-soft:rgba(79,127,208,.16); --sidebar-active:rgba(79,127,208,.20); } /* ---- semantic status (per mode) ---- */ html[data-mode="light"] { --success:#2f9163; --success-soft:rgba(47,145,99,.12); --warn:#c98a3c; --warn-soft:rgba(201,138,60,.14); --danger:#c8554f; --danger-soft:rgba(200,85,79,.12); --info:#3f7fc4; --info-soft:rgba(63,127,196,.12); --scrim: rgba(30,22,14,.42); } html[data-mode="dark"] { --success:#54c08a; --success-soft:rgba(84,192,138,.15); --warn:#e0a85a; --warn-soft:rgba(224,168,90,.16); --danger:#e3736d; --danger-soft:rgba(227,115,109,.15); --info:#6fa6e0; --info-soft:rgba(111,166,224,.15); --scrim: rgba(0,0,0,.6); } /* ============================================================ APP SHELL ============================================================ */ .app { display: flex; min-height: 100vh; min-height: 100dvh; } /* Trava o scroll do fundo quando um modal ou o menu mobile está aberto (iOS) */ body.modal-open, body.menu-open { overflow: hidden; } /* ---- Sidebar ---- */ .sidebar { width: 256px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; border-right: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent); transition: width .3s cubic-bezier(.4,0,.2,1), background .45s ease; z-index: 40; } .app.collapsed .sidebar { width: 76px; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px; height: 72px; flex-shrink: 0; } .brand-mark { width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.35rem; line-height: 1; } /* quando o mark traz o emblema SVG, ele desenha a própria forma/cor */ .brand-mark:has(.brand-emblem) { background: transparent; border-radius: 0; } .brand-mark span { transform: translateY(1px); } .brand-emblem { width: 100%; height: 100%; display: block; } .brand-emblem .be-glyph { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 23px; } html[data-dir="barber"] .brand-emblem .be-glyph { font-size: 20px; letter-spacing: .02em; } .brand-name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.45rem; letter-spacing: var(--display-tracking); white-space: nowrap; color: var(--sidebar-text); } .brand-name b { color: var(--accent); font-weight: inherit; } .app.collapsed .brand-name { opacity: 0; pointer-events: none; } .sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 14px 14px; } .nav-section-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sidebar-muted); padding: 18px 12px 8px; font-weight: 600; white-space: nowrap; } .app.collapsed .nav-section-label { opacity: 0; height: 14px; padding-top: 12px; } .nav-item { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 2px; color: var(--sidebar-text); position: relative; font-size: .92rem; font-weight: 500; white-space: nowrap; transition: background .18s ease, color .18s ease; } .nav-item .nav-ico { font-size: 1.25rem; flex-shrink: 0; width: 24px; text-align: center; opacity: .9; } .nav-item:hover { background: color-mix(in srgb, var(--sidebar-text) 8%, transparent); } .nav-item.active { background: var(--sidebar-active); color: var(--accent); } .nav-item.active .nav-ico { opacity: 1; } .nav-item.active::before { content:""; position:absolute; left:-14px; top:50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--accent); } .app.collapsed .nav-label, .app.collapsed .nav-caret, .app.collapsed .nav-badge { opacity: 0; pointer-events: none; } .nav-label { flex: 1; } .nav-badge { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); } .nav-caret { font-size: 1.05rem; opacity: .55; transition: transform .2s ease; } .nav-item.open .nav-caret { transform: rotate(90deg); } .nav-sub { overflow: hidden; padding-left: 36px; } /* submenu recolhido por padrão; abre só quando o grupo tem .open */ [data-nav-group] > .nav-sub { display: none; } [data-nav-group].open > .nav-sub { display: block; } .nav-sub .nav-item { font-size: .86rem; padding: 8px 12px; } .nav-sub .nav-item.active::before { display: none; } .app.collapsed .nav-sub { display: none; } .sidebar-foot { padding: 14px; border-top: 1px solid color-mix(in srgb, var(--sidebar-text) 10%, transparent); } .plan-card { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: var(--radius); padding: 13px 14px; white-space: nowrap; } .app.collapsed .plan-card { display: none; } .plan-card .pc-title { font-size: .82rem; font-weight: 700; color: var(--accent); } .plan-card .pc-sub { font-size: .74rem; color: var(--sidebar-muted); margin-top: 2px; } /* ---- Main column ---- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---- Topbar ---- */ .topbar { height: 72px; flex-shrink: 0; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 0 26px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius); flex-shrink: 0; display: grid; place-items: center; font-size: 1.25rem; background: transparent; border: 1px solid transparent; color: var(--text-2); transition: background .15s ease, color .15s ease, border-color .15s ease; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .topbar .search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 9px 16px; color: var(--text-3); } .topbar .search input { border: none; background: transparent; outline: none; flex: 1; color: var(--text); font-size: .9rem; font-family: inherit; } .topbar .search input::placeholder { color: var(--text-3); } .topbar .spacer { flex: 1; } /* location selector */ .loc-select { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: .86rem; font-weight: 600; color: var(--text); white-space: nowrap; } .loc-select .loc-dot { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: .95rem; } .loc-select i.caret, .loc-select .ico.caret { color: var(--text-3); font-size: 1.05rem; } /* direction switcher */ .dir-switch { display: flex; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); padding: 4px; border-radius: var(--radius-pill); } .dir-dot { width: 26px; height: 26px; border-radius: var(--radius-pill); border: 2px solid transparent; display: grid; place-items: center; position: relative; transition: transform .15s ease; } .dir-dot:hover { transform: scale(1.08); } .dir-dot .swatch { width: 16px; height: 16px; border-radius: var(--radius-pill); } .dir-dot.active { border-color: var(--accent); } .avatar-btn { display: flex; align-items: center; gap: 10px; padding-left: 6px; } .avatar-btn .av { width: 40px; height: 40px; } .avatar-btn .who { line-height: 1.2; white-space: nowrap; } .avatar-btn .who .nm { font-size: .86rem; font-weight: 700; } .avatar-btn .who .rl { font-size: .72rem; color: var(--text-3); } /* ---- Page area ---- */ .page { padding: 28px 26px 60px; max-width: 1480px; width: 100%; margin: 0 auto; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; } .crumb { font-size: .8rem; color: var(--text-3); font-weight: 500; margin-bottom: 6px; letter-spacing: .02em; } .crumb b { color: var(--accent); font-weight: 700; } .page-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: 2.1rem; line-height: 1.05; } .page-sub { color: var(--text-2); font-size: .92rem; margin-top: 6px; } /* ============================================================ COMPONENTS ============================================================ */ .ico { display: inline-block; vertical-align: -0.14em; flex-shrink: 0; } .card { background: var(--surface); border: var(--card-border-w) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: background .45s ease, border-color .45s ease, box-shadow .2s ease, transform .2s ease; } .card-pad { padding: 22px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .card-head > div:first-child { min-width: 0; } .card-head h3 { font-size: 1.04rem; font-weight: 700; } .card-head .ch-sub { font-size: .8rem; color: var(--text-3); margin-top: 2px; } .grid { display: grid; gap: 18px; } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius); padding: 10px 18px; font-size: .88rem; font-weight: 600; font-family: inherit; line-height: 1; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn i, .btn .ico { font-size: 1.1rem; } .btn-primary { background: var(--accent); color: var(--accent-contrast); } .btn-primary:hover { box-shadow: 0 8px 22px -8px var(--accent); filter: brightness(1.04); } .btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--line-2); background: var(--surface); } .btn-outline { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .btn-outline:hover { background: var(--accent-soft); } .btn-sm { padding: 7px 13px; font-size: .8rem; border-radius: var(--radius-sm); } .btn-icon-only { padding: 9px; } /* badges */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); white-space: nowrap; letter-spacing: .01em; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .b-accent { background: var(--accent-soft); color: var(--accent); } .b-success { background: var(--success-soft); color: var(--success); } .b-warn { background: var(--warn-soft); color: var(--warn); } .b-danger { background: var(--danger-soft); color: var(--danger); } .b-info { background: var(--info-soft); color: var(--info); } .b-muted { background: var(--surface-2); color: var(--text-2); } /* avatars */ .av { border-radius: var(--radius-pill); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex-shrink: 0; overflow: hidden; width: 38px; height: 38px; color: #fff; } .av.sq { border-radius: var(--radius-sm); } .av-sm { width: 30px; height: 30px; font-size: .72rem; } .av-lg { width: 52px; height: 52px; font-size: 1rem; } /* tables */ .tbl { width: 100%; border-collapse: collapse; } .tbl thead th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-3); padding: 12px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl tbody td { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr { transition: background .12s ease; } .tbl.hover tbody tr:hover { background: var(--surface-2); cursor: pointer; } .tbl .num { font-variant-numeric: tabular-nums; } /* progress */ .bar { height: 7px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .8s cubic-bezier(.2,.7,.2,1); } /* chips / filters */ .field { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .88rem; color: var(--text); font-family: inherit; } .field i, .field .ico { color: var(--text-3); font-size: 1.1rem; } .field input, .field select { border: none; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: .88rem; width: 100%; } .field select { cursor: pointer; } .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px; gap: 3px; } .seg button { border: none; background: transparent; color: var(--text-2); font-weight: 600; font-size: .82rem; padding: 7px 15px; border-radius: var(--radius-pill); transition: all .15s ease; } .seg button.active { background: var(--accent); color: var(--accent-contrast); } /* misc helpers */ .muted { color: var(--text-2); } .faint { color: var(--text-3); } .num { font-variant-numeric: tabular-nums; } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); } .divider { height: 1px; background: var(--line); border: none; margin: 0; } .flex { display: flex; } .between { display: flex; align-items: center; justify-content: space-between; } .icenter { display: flex; align-items: center; } .gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px} .hover-rise { transition: transform .2s ease, box-shadow .2s ease; } .hover-rise:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); } /* KPI card */ .kpi { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .kpi-top { display: flex; align-items: center; justify-content: space-between; } .kpi-ico { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; font-size: 1.4rem; background: var(--accent-soft); color: var(--accent); } .kpi-label { font-size: .82rem; color: var(--text-2); font-weight: 600; } .kpi-val { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--kpi-display-size); line-height: 1; } .kpi-trend { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 700; } .kpi-trend.up { color: var(--success); } .kpi-trend.down { color: var(--danger); } /* empty / loading shimmer */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } /* fade-in for routed pages */ @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .page-anim { animation: pageIn .4s cubic-bezier(.2,.7,.2,1); } @keyframes popIn { from { opacity:0; transform: scale(.96) translateY(6px);} to {opacity:1; transform:none;} } @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } } /* placeholder image slot */ .ph { background-image: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 9px, transparent 9px, transparent 18px); border: 1px dashed var(--line-2); border-radius: var(--radius); display: grid; place-items: center; color: var(--text-3); font-family: var(--font-body); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; } /* share modal */ .modal-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 120; display: grid; place-items: center; padding: 20px; animation: pageIn .2s ease; overscroll-behavior: contain; } .modal { width: min(480px, 100%); max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); animation: popIn .25s cubic-bezier(.2,.7,.2,1); overflow: hidden; } .modal-body { padding: 20px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Header do modal não quebra linha (o X fica sempre no topo à direita) */ .modal .card-head { flex-wrap: nowrap; align-items: flex-start; } .pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); margin-bottom: 8px; transition: border-color .15s ease, background .15s ease; text-align: left; } .pick-row:hover { border-color: var(--line-2); } .pick-row.sel { border-color: var(--accent); background: var(--accent-soft); } .pick-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; display: grid; place-items: center; } .pick-row.sel .pick-radio { border-color: var(--accent); } .pick-row.sel .pick-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .pref-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: .82rem; font-weight: 600; } .link-box { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 7px 7px 14px; } .link-box span { flex: 1; font-size: .82rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bld-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; } select.input { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; } @media (max-width: 520px) { .bld-row { grid-template-columns: 1fr 1fr; } .bld-row .icon-btn { grid-column: 1 / -1; justify-self: end; } } /* density tweak */ html[data-density="compact"] body { font-size: 14px; } html[data-density="compact"] .card-pad { padding: 15px; } html[data-density="compact"] .page { padding: 18px 18px 50px; } html[data-density="compact"] .kpi { padding: 14px 16px; gap: 9px; } html[data-density="compact"] .card-head { padding: 13px 16px; } html[data-density="compact"] .tbl thead th { padding: 9px 14px; } html[data-density="compact"] .tbl tbody td { padding: 9px 14px; } html[data-density="compact"] .page-head { margin-bottom: 18px; } html[data-density="compact"] .g-kpi, html[data-density="compact"] .g-2-1, html[data-density="compact"] .g-1-1 { gap: 14px; } /* calendar day view */ .cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .cal-head { display: flex; position: sticky; top: 0; background: var(--surface); z-index: 6; border-bottom: 1px solid var(--line); } .cal-head .cal-gut { width: 58px; flex-shrink: 0; } .cal-head .cal-pro { flex: 1; min-width: 150px; padding: 14px 12px; display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); } .cal-body { display: flex; position: relative; } .cal-gutter { width: 58px; flex-shrink: 0; } .cal-gutter .cal-h { height: 64px; font-size: .72rem; color: var(--text-3); text-align: right; padding: 2px 8px 0 0; box-sizing: border-box; } .cal-col { flex: 1; min-width: 150px; position: relative; border-left: 1px solid var(--line); } .cal-slot { height: 64px; border-bottom: 1px solid var(--line); } .cal-event { position: absolute; left: 4px; right: 4px; border-radius: var(--radius-sm); padding: 6px 9px; overflow: hidden; border-left: 3px solid; font-size: .76rem; box-shadow: var(--shadow-card); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .cal-event:hover { transform: scale(1.015); box-shadow: var(--shadow-pop); z-index: 5; } .cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 4; } .cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } /* segmented tabs in seg already; pill stat */ .stat-pill { display: inline-flex; flex-direction: column; } /* settings layout */ .set-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; } .set-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 92px; } .set-nav button { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-2); font-weight: 600; font-size: .9rem; text-align: left; transition: background .15s ease, color .15s ease; } .set-nav button .ico { font-size: 1.15rem; } .set-nav button:hover { background: var(--surface-2); color: var(--text); } .set-nav button.active { background: var(--accent-soft); color: var(--accent); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-label { font-size: .82rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; display: block; } .input { width: 100%; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: .9rem; } .input:focus { outline: none; border-color: var(--accent); } @media (max-width: 860px) { .set-grid { grid-template-columns: 1fr; } .set-nav { flex-direction: row; overflow-x: auto; position: static; } .form-row { grid-template-columns: 1fr; } } /* responsive grid layouts */ .g-kpi { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } .g-2-1 { display: grid; gap: 18px; grid-template-columns: 1.7fr 1fr; } .g-1-1 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; } .g-1-2 { display: grid; gap: 18px; grid-template-columns: 1fr 2fr; } .g-auto { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .kanban { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); align-items: start; } @media (max-width: 1180px) { .g-2-1, .g-1-2 { grid-template-columns: 1fr; } .kanban { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .g-kpi { grid-template-columns: repeat(2, 1fr); } .g-1-1 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .kanban { grid-template-columns: 1fr; } } /* kanban column */ .kcol { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; min-height: 160px; transition: background .15s ease, box-shadow .15s ease; } .kcol.drag-over { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .kcol-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; } .kcol-head .kc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; } .kcol-head .kc-count { font-size: .72rem; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; } .kcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; margin-bottom: 10px; cursor: grab; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); } .kcard:active { cursor: grabbing; } .kcard.dragging { opacity: .4; } .kcard .kc-strip { height: 3px; border-radius: 3px; margin: -13px -13px 11px; } /* toast */ .toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; } .toast { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: .88rem; font-weight: 600; animation: popIn .3s ease; min-width: 220px; } .toast .t-ico { width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; } /* segmented toggle pill on dark/light switch */ .mode-toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); position: relative; padding: 0; } .mode-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); transition: transform .25s cubic-bezier(.4,0,.2,1); } html[data-mode="dark"] .mode-toggle::after { transform: translateX(18px); } /* mobile */ .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 39; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .menu-toggle { display: none; } @media (max-width: 1000px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); } .app.mobile-open .sidebar { transform: none; } .app.mobile-open .scrim { opacity: 1; pointer-events: auto; } .menu-toggle { display: grid; } .topbar .search { display: none; } .page { padding: 20px 16px 60px; } .page-title { font-size: 1.7rem; } /* iOS: fonte >=16px evita o zoom automático ao focar campos */ input, select, textarea, .input, .field input, .field select { font-size: 16px; } /* Modal vira folha rolável: a tela cheia rola, header e botões sempre acessíveis */ .modal-scrim { place-items: start center; overflow-y: auto; padding: 12px; } .modal { max-height: none; } } @media (max-width: 620px) { .hide-sm { display: none !important; } /* No celular o seletor de unidade e o "Enviar link" continuam acessíveis: a unidade fica compacta (nome truncado) e o link vira só ícone. */ .loc-select { padding: 5px 8px 5px 6px; gap: 6px; max-width: 46vw; } .loc-select #loc-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .loc-select .loc-dot { width: 22px; height: 22px; } } /* ============================================================ INBOX v2 + AGENTE IA (design bundle 2) ============================================================ */ .inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; height: calc(100vh - 72px); height: calc(100dvh - 72px); background: var(--bg); } .inbox-col { display: flex; flex-direction: column; min-height: 0; } .inbox-list { border-right: 1px solid var(--line); } .inbox-ctx { border-left: 1px solid var(--line); } .inbox-h { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .inbox-scroll { flex: 1; overflow-y: auto; min-height: 0; } .conv { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s ease; position: relative; } .conv:hover { background: var(--surface-2); } .conv.active { background: var(--accent-soft); } .conv.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .conv-ch { position: absolute; left: 38px; top: 38px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; color: #fff; border: 2px solid var(--surface); } .conv-unread { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: .68rem; font-weight: 700; display: grid; place-items: center; } .chip-xs { font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; } .thread-h { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .thread-body { flex: 1; overflow-y: auto; min-height: 0; padding: 20px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); } .msg-wrap { display: flex; flex-direction: column; margin-bottom: 10px; max-width: 80%; } .msg-wrap.out { align-self: flex-end; align-items: flex-end; } .msg-wrap.in { align-self: flex-start; align-items: flex-start; } .msg { padding: 10px 13px; border-radius: 15px; font-size: .89rem; line-height: 1.42; } .msg.client { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .msg.salon { background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; } .msg.ai { background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-bottom-right-radius: 4px; } .msg-meta { font-size: .66rem; color: var(--text-3); margin: 3px 4px 0; display: flex; align-items: center; gap: 5px; } .ai-tag { color: var(--accent); font-weight: 700; } .composer { border-top: 1px solid var(--line); padding: 12px 16px 16px; flex-shrink: 0; background: var(--surface); } .composer-box { display: flex; align-items: flex-end; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px 8px 8px 14px; } .composer-box textarea { flex: 1; border: none; background: transparent; outline: none; resize: none; color: var(--text); font-family: inherit; font-size: .9rem; max-height: 90px; line-height: 1.4; } .ai-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: .82rem; font-weight: 600; margin-bottom: 10px; } .send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); border: none; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; } .inbox-back { display: none; } @media (max-width: 1000px) { .inbox { grid-template-columns: 1fr; } .inbox-list { display: flex; } .inbox-thread { display: none; } .inbox.show-thread .inbox-list { display: none; } .inbox.show-thread .inbox-thread { display: flex; } .inbox-back { display: grid; } } .agent-chat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-height: 280px; } .opt-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); } .opt-card .oi { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }