:root { --brand-primary:#053d2e; --brand-gold:#d4a853; --brand-graphite:#0f0f0f; --brand-cream:#f8f6ef; --profession-accent:#0b9b67; --profession-dark:#03241d; --forest-950:#03241d; --forest-900:#052f26; --forest-800:#0a4437; --emerald:#0b9b67; --gold:#f5bd16; --gold-soft:#fff2bd; --cream:#f8f7f2; --surface:#ffffff; --ink:#15241f; --muted:#68746f; --line:#dfe6e2; --danger:#b63d45; --shadow:0 18px 48px rgba(3,36,29,.13); } /* FOURMI Pro communication: operational messages remain contextual and honest about delivery. */ .communication-preferences{display:grid;gap:.65rem;margin:.85rem 0;padding:.9rem;border:1px solid rgba(37,71,56,.14);border-radius:16px;background:#fbf8ef}.compact-toggle{margin:0!important;padding:.65rem .75rem!important}.client-communication-panel{margin:1rem 0 1.25rem;padding:1rem;border:1px solid rgba(40,77,59,.16);border-radius:20px;background:linear-gradient(145deg,#fffdf7,#f4f7f0);box-shadow:0 10px 30px rgba(31,57,45,.07)}.client-communication-heading,.communication-history-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.client-communication-heading h2,.communication-history-heading h3{margin:.15rem 0}.connection-state{display:inline-flex;align-items:center;padding:.35rem .65rem;border-radius:999px;background:#eee8d9;color:#5e594e;font-size:.76rem;font-weight:800}.connection-state.state-connected{background:#dcecdf;color:#22543d}.connection-state.state-invited{background:#f5e8c7;color:#76581a}.communication-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.9rem 0}.communication-quick-actions button,.client-group-card button{min-height:44px;border:1px solid rgba(38,76,58,.18);border-radius:13px;background:#fff;color:#254b3a;font:inherit;font-weight:750;padding:.65rem;cursor:pointer}.communication-quick-actions button:first-child{background:#254b3a;color:#fff}.communication-invite{margin:.2rem 0 .75rem}.communication-reminders{border-top:1px solid rgba(40,77,59,.12);border-bottom:1px solid rgba(40,77,59,.12);padding:.65rem 0;margin:.5rem 0}.communication-reminders summary{font-weight:800;cursor:pointer}.communication-reminders p{font-size:.78rem;color:#6f716b}.communication-reminders label{display:inline-flex;gap:.4rem;margin-right:1rem;font-size:.86rem}.communication-history-heading{margin-top:1rem}.communication-history-heading span{font-size:.8rem;color:#777}.communication-history{display:grid;gap:.6rem;margin-top:.65rem}.communication-record{display:grid;grid-template-columns:1fr auto;gap:.25rem .65rem;padding:.8rem;border-radius:14px;background:#fff;border:1px solid rgba(40,77,59,.1)}.communication-record div{display:grid;gap:.15rem}.communication-record small{color:#777}.communication-record p{grid-column:1/-1;margin:.35rem 0;white-space:pre-wrap;font-size:.9rem}.communication-record button{grid-column:1/-1;justify-self:start}.communication-status{align-self:start;padding:.25rem .5rem;border-radius:999px;background:#ece8de;font-size:.7rem;font-weight:800}.communication-status.status-opened_external{background:#dce9e0;color:#24503c}.communication-empty{color:#7a7a72;font-size:.9rem}.communication-dialog form,.client-groups-shell{width:min(92vw,560px);max-height:88vh;overflow:auto;padding:1.15rem}.communication-dialog textarea{resize:vertical}.communication-warning,.communication-channel-note{padding:.7rem .8rem;border-radius:12px;background:#fff3d6;color:#70551e;font-size:.84rem}.communication-template-save{display:flex!important;align-items:center;gap:.55rem;margin:.75rem 0}.communication-footer{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1rem}.client-groups-entry{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;margin:.85rem 0;padding:1rem;border:1px solid rgba(40,77,59,.16);border-radius:18px;background:#f8f3e6;color:#254b3a;text-align:left}.client-groups-entry>span:nth-child(2){display:grid;gap:.2rem}.client-groups-entry small{color:#6f716b}.client-groups-list{display:grid;gap:.65rem;margin:.8rem 0 1rem}.client-group-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem;border:1px solid rgba(40,77,59,.13);border-radius:14px}.client-group-card div{display:grid;gap:.2rem}.client-group-card small{color:#777}.client-group-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;max-height:180px;overflow:auto}.client-group-members label{display:flex;align-items:center;gap:.45rem;padding:.5rem;border-radius:10px;background:#f6f4ed} @media(max-width:430px){.communication-quick-actions,.communication-footer,.client-group-members{grid-template-columns:1fr}.client-group-card{align-items:flex-start;flex-direction:column}.communication-dialog form,.client-groups-shell{padding:.9rem}} * { box-sizing:border-box; } html { background:#e7ece9; } body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .hidden { display:none !important; } .app-shell { width:min(100%,460px); min-height:100vh; margin:auto; background:var(--cream); box-shadow:var(--shadow); position:relative; overflow:hidden; } .onboarding { min-height:100vh; min-height:100dvh; background:radial-gradient(circle at 50% 20%,#145b48 0,transparent 42%),linear-gradient(160deg,#021b16 5%,#053c2e 67%,#0b5a40 100%); padding:18px 16px calc(28px + env(safe-area-inset-bottom)); color:white; } .onboarding::after { content:""; position:absolute; width:400px; height:400px; border-radius:50%; left:-260px; top:190px; background:radial-gradient(circle,#d4a85325,transparent 68%); pointer-events:none; } .onboarding-top { text-align:center; position:relative; z-index:1; padding:7px 0 26px; } .onboarding-wordmark { height:38px; display:flex; align-items:center; gap:7px; font-size:.71rem; font-weight:850; letter-spacing:.075em; text-align:left; } .onboarding-wordmark img { width:31px; height:31px; object-fit:contain; } .onboarding-hero-art { width:170px; height:150px; margin:10px auto 4px; position:relative; display:grid; place-items:center; } .onboarding-hero-glow { position:absolute; inset:16px 4px; border-radius:50%; background:radial-gradient(circle,#d4a8534a 0,transparent 65%); filter:blur(7px); } .brand-mark { position:relative; width:145px; height:145px; object-fit:contain; display:block; filter:drop-shadow(0 12px 20px #00140f80); } .onboarding-hero-kicker { color:#ebc879; letter-spacing:.21em; font-size:.61rem; font-weight:800; margin:0 0 9px; } .brand-name { max-width:330px; margin:0 auto; font-weight:850; letter-spacing:-.045em; font-size:clamp(1.8rem,7.5vw,2.32rem); line-height:1.07; } .brand-tagline { color:#d8e7df; font-size:.83rem; margin:10px 0 0; } .language-switch { position:absolute; right:0; top:2px; display:flex; background:#ffffff14; border:1px solid #ffffff19; padding:3px; border-radius:999px; } .language-button { min-width:34px; border:0; color:#dbe7e2; background:transparent; border-radius:999px; padding:6px 7px; font-weight:800; font-size:.7rem; } .language-button.active { color:var(--forest-950); background:var(--gold); } .onboarding-card { position:relative; z-index:1; background:var(--surface); color:var(--ink); padding:26px 23px 23px; border:1px solid #ffffffb8; border-radius:27px; box-shadow:0 18px 50px rgba(0,17,13,.23); } .onboarding-card h1 { font-size:1.55rem; } .onboarding-card .intro { margin-bottom:16px; } .onboarding:has(#professional-onboarding-step:not(.hidden),#student-onboarding-step:not(.hidden)) .onboarding-hero-art, .onboarding:has(#professional-onboarding-step:not(.hidden),#student-onboarding-step:not(.hidden)) .onboarding-hero-kicker, .onboarding:has(#professional-onboarding-step:not(.hidden),#student-onboarding-step:not(.hidden)) .brand-name, .onboarding:has(#professional-onboarding-step:not(.hidden),#student-onboarding-step:not(.hidden)) .brand-tagline { display:none; } .onboarding:has(#professional-onboarding-step:not(.hidden),#student-onboarding-step:not(.hidden)) .onboarding-top { padding-bottom:16px; } .eyebrow { margin:0 0 6px; color:var(--emerald); letter-spacing:.13em; font-weight:800; font-size:.72rem; } h1,h2,p { margin-top:0; } h1 { font-size:1.75rem; line-height:1.15; letter-spacing:-.035em; margin-bottom:10px; } h2 { font-size:1.18rem; line-height:1.25; letter-spacing:-.02em; margin-bottom:6px; } .intro { color:var(--muted); font-size:.92rem; margin-bottom:20px; } .profession-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:20px; } .profession-card { min-height:88px; padding:11px 5px; border:1px solid var(--line); border-radius:13px; background:#fbfcfb; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:.76rem; font-weight:700; } .profession-card:hover { border-color:#93b5a7; } .profession-card.selected { color:var(--forest-900); border:2px solid var(--emerald); background:#e8f6f0; box-shadow:0 0 0 3px #0b9b6714; } .profession-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#e5ece8; color:var(--forest-800); font-size:1.15rem; } .profession-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .profession-card[data-profession="teacher"] .profession-icon svg { fill:currentColor; stroke:none; } .selected .profession-icon { background:var(--emerald); color:white; } label { display:block; font-size:.79rem; font-weight:750; margin:0 0 6px; } input,select,textarea { width:100%; border:1px solid #bfcac5; border-radius:11px; padding:12px 13px; color:var(--ink); background:white; margin-bottom:16px; } textarea { resize:vertical; min-height:78px; } .primary-button { width:100%; border:0; border-radius:12px; background:var(--gold); color:var(--forest-950); padding:13px 17px; font-weight:850; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 7px 20px #c18d0038; } .app-shell:has(> .workspace:not(.hidden),> .student-workspace:not(.hidden)) { height:100vh; height:100dvh; min-height:0; } .workspace { position:relative; display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; background:var(--cream); } .workspace>.app-header { flex:none; } .workspace>main { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding-bottom:calc(105px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; } .app-header { height:68px; padding:11px 20px; display:flex; align-items:center; justify-content:space-between; background:var(--forest-950); color:white; } .mini-brand { display:flex; align-items:center; font-size:.78rem; letter-spacing:.08em; font-weight:850; } .mini-brand img { width:44px; height:44px; object-fit:cover; object-position:left center; margin-right:3px; } .avatar-button { border:1px solid #ffffff55; color:var(--forest-950); background:var(--gold); width:37px; height:37px; border-radius:50%; font-weight:850; } main { padding:0 18px; } .app-screen { display:none; padding:24px 0 18px; } .app-screen.active { display:block; } .welcome-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px; } .welcome-row h1 { margin:2px 0 0; } .muted { color:var(--muted); margin:0; font-size:.88rem; } .week-pill { background:#e8efe7; color:var(--forest-800); padding:7px 10px; border-radius:999px; font-size:.73rem; font-weight:750; white-space:nowrap; } .my-day-panel { margin-bottom:26px; padding:17px; border-radius:20px; background:white; border:1px solid var(--line); box-shadow:0 9px 24px #123a2d0b; } .my-day-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px; } .my-day-heading h2 { margin:0; font-size:1.35rem; } .my-day-heading > strong { color:var(--muted); font-size:.73rem; text-transform:capitalize; text-align:right; } .my-day-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; } .my-day-metrics div { padding:10px 8px; border-radius:12px; background:#eef7f3; } .my-day-metrics span,.my-day-metrics strong { display:block; } .my-day-metrics span { min-height:31px; color:var(--muted); font-size:.62rem; } .my-day-metrics strong { margin-top:3px; font-size:.82rem; color:var(--forest-800); } .my-day-context { margin:12px 0 8px; color:var(--forest-800); font-size:.75rem; font-weight:800; } .today-free-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:15px 0 7px; font-size:.75rem; } .today-free-slots { display:flex; gap:7px; overflow:auto; padding:1px 1px 9px; scrollbar-width:thin; } .today-free-slot { flex:0 0 148px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #91c1ad; border-radius:13px; padding:9px 10px; background:#ecf8f2; color:var(--forest-800); text-align:left; } .today-free-slot span,.today-free-slot strong,.today-free-slot small { display:block; }.today-free-slot strong { font-size:.68rem; }.today-free-slot small { color:var(--muted); font-size:.59rem; }.today-free-slot b { color:var(--emerald); font-size:.62rem; white-space:nowrap; } .today-free-slot.empty { border-style:dashed; color:var(--muted); background:var(--cream); } .today-appointments { display:grid; gap:8px; margin-top:5px; } .today-appointment { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:13px; background:#fff; } .today-appointment-time { color:var(--forest-800); font-weight:850; font-size:.82rem; } .today-appointment-copy strong,.today-appointment-copy small { display:block; } .today-appointment-copy strong { font-size:.79rem; }.today-appointment-copy small { color:var(--muted); font-size:.65rem; } .today-action-button { display:grid; place-items:center; flex:0 0 auto; width:32px; height:32px; border:1px solid var(--line); border-radius:50%; padding:0; background:white; color:var(--forest-800); font-size:1.2rem; font-weight:850; line-height:1; } .today-action-button:hover,.today-action-button:focus-visible { background:#e9f3ef; border-color:#b7c9c1; } .today-free-empty { width:100%; margin:0; padding:12px 14px; border-radius:12px; background:#f4f1e9; color:var(--muted); font-size:.74rem; line-height:1.45; } .barber-today-appointment { align-items:start; } .today-appointment-controls { display:flex; align-items:center; justify-content:flex-end; gap:7px; white-space:nowrap; } .today-appointment-controls > strong { padding-top:6px; color:var(--forest-900); font-size:.76rem; } .today-appointment-status { grid-column:2 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:-2px; } .today-appointment-status .status-pill,.today-appointment-status .payment-pill { min-height:25px; padding:5px 8px; font-size:.6rem; } .home-next-card { padding:14px; border:1px solid #b9d7cb; border-radius:16px; background:linear-gradient(145deg,#f8fcfa,#edf7f2); box-shadow:0 6px 18px #123a2d0b; } .home-next-card>.eyebrow { margin-bottom:8px; } .home-next-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .home-next-heading time { display:block; color:var(--forest-800); font-size:1.02rem; font-weight:900; }.home-next-heading h3 { margin:4px 0 1px; font-size:1rem; }.home-next-heading p { margin:0; color:var(--muted); font-size:.69rem; }.home-next-heading>strong { padding-top:2px; color:var(--forest-900); font-size:.82rem; white-space:nowrap; } .home-statuses { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }.home-statuses>span { display:flex; align-items:center; gap:5px; }.home-statuses small { color:var(--muted); font-size:.56rem; }.home-statuses .status-pill,.home-statuses .payment-pill { min-height:24px; padding:4px 8px; font-size:.58rem; } .home-next-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }.home-primary-action { flex:1; min-height:38px; border:0; border-radius:10px; background:var(--forest-800); color:white; font-size:.7rem; font-weight:850; }.home-primary-details { background:#e4f0eb; color:var(--forest-800); } .home-upcoming { padding:11px 2px 2px; }.home-upcoming>.eyebrow { margin:3px 0 5px; } .home-upcoming-item { display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; padding:8px 6px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }.home-upcoming-item time { color:var(--forest-800); font-size:.65rem; font-weight:850; }.home-upcoming-item strong,.home-upcoming-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-upcoming-item strong { font-size:.72rem; }.home-upcoming-item small { color:var(--muted); font-size:.61rem; }.home-upcoming-item i { color:var(--muted); font-style:normal; font-size:1rem; } .home-open-agenda { display:block; margin:9px auto 0; } .home-day-empty { display:flex; align-items:center; gap:9px; padding:13px; border-radius:13px; background:var(--cream); color:var(--muted); }.home-day-empty span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e4f0eb; color:var(--emerald); font-weight:900; }.home-day-empty p { margin:0; font-size:.74rem; } .home-day-list { display:grid; gap:7px; } .home-day-list-item { display:grid; grid-template-columns:86px minmax(0,1fr) auto 12px; align-items:center; gap:8px; width:100%; min-width:0; padding:9px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); text-align:left; } .home-day-list-item.is-focus { border-color:#9fc9b8; background:#f0f8f4; box-shadow:inset 4px 0 var(--emerald); } .home-day-list-item time { color:var(--forest-800); font-size:.66rem; font-weight:900; }.home-day-person { min-width:0; }.home-day-person strong,.home-day-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-day-person strong { font-size:.73rem; }.home-day-person small { color:var(--muted); font-size:.6rem; } .home-day-item-status { display:flex; align-items:flex-end; flex-direction:column; gap:4px; }.home-day-item-status .status-pill,.home-day-item-status .payment-pill { min-height:21px; padding:3px 6px; font-size:.53rem; }.home-day-list-item>i { color:var(--muted); font-style:normal; } .home-view-all { display:block; margin:8px auto 0; } .working-hours-status { min-height:0; margin:8px 0; padding:0; color:var(--muted); font-size:.7rem; line-height:1.4; }.working-hours-status.success { padding:10px 12px; border-radius:11px; background:#e9f6ef; color:var(--forest-800); }.working-hours-status.unsaved { color:#9a6800; }.working-hours-status.error { color:var(--danger); } .professional-spaces-panel { margin:14px 0; padding:15px; border:1px solid var(--line); border-radius:16px; background:#fff; }.professional-spaces-panel h2 { margin:0 0 5px; font-size:1rem; }.professional-spaces-panel select { margin-bottom:9px; }.professional-spaces-panel .secondary-button { width:100%; } .professional-spaces-panel { padding:0; border-color:rgba(187,140,43,.42); background:#faf7ee; } .professional-spaces-panel>button { display:grid; grid-template-columns:44px minmax(0,1fr) 20px; align-items:center; gap:12px; width:100%; min-height:72px; padding:12px 14px; border:0; border-radius:16px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; } .professional-spaces-panel>button:focus-visible { outline:3px solid #d4a853; outline-offset:3px; } .professional-spaces-panel>button:active { transform:scale(.985); } .professional-spaces-panel>button>span:nth-child(2) { display:grid; gap:2px; min-width:0; } .professional-spaces-panel strong { font-size:1rem; } .professional-spaces-panel small { color:var(--muted); line-height:1.3; } .professional-spaces-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#f4ead0; color:#80611c; font-size:1.5rem; } .professional-spaces-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .professional-spaces-arrow { font-size:1.7rem; } @media (max-width:520px) { .home-day-list-item { grid-template-columns:74px minmax(0,1fr) 10px; }.home-day-item-status { grid-column:2 / -1; align-items:flex-start; flex-direction:row; flex-wrap:wrap; }.home-day-list-item time { font-size:.61rem; } } .home-month-heading { margin-top:0; } .balance-card { background:linear-gradient(135deg,var(--forest-950),#0d5e48); color:white; border-radius:20px; padding:22px; margin-bottom:13px; overflow:hidden; position:relative; } .balance-card::after { content:""; position:absolute; width:150px; height:150px; right:-52px; bottom:-80px; background:#f5bd1642; border-radius:50%; } .balance-card p { color:#cfe2da; margin-bottom:5px; font-size:.82rem; } .balance-card strong { display:block; font-size:2rem; letter-spacing:-.04em; margin-bottom:3px; } .balance-card span { color:#b9d4c9; font-size:.75rem; } .metrics-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .metric-card { background:white; border:1px solid var(--line); border-radius:15px; padding:14px; } .metric-card p { display:inline; color:var(--muted); font-size:.77rem; } .metric-card strong { display:block; font-size:1.08rem; margin-top:8px; } .summary-card { cursor:pointer; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .summary-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px #123a2d14; } .summary-card:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .summary-card-icon { position:absolute; top:11px; right:13px; display:grid !important; place-items:center; width:25px; height:25px; border-radius:50%; background:#eef3f0; color:var(--forest-800) !important; font-size:1.25rem !important; line-height:1; } .metric-card.summary-card { position:relative; padding-right:42px; } .balance-card .summary-card-icon { z-index:2; background:#ffffff1f; color:white !important; } .metric-dot { width:8px; height:8px; display:inline-block; border-radius:50%; margin-right:4px; } .metric-dot.expected { background:#6e83df; }.metric-dot.received { background:var(--emerald); }.metric-dot.pending { background:var(--gold); }.metric-dot.expense { background:#d76970; } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:27px 0 12px; } .section-heading h1,.section-heading h2 { margin:0; } .section-heading .eyebrow { margin-bottom:4px; } .page-heading { margin-top:0; } .compact { margin-top:24px; } .text-button { border:0; background:transparent; color:var(--emerald); font-size:.79rem; font-weight:800; padding:7px; } .circle-button { border:0; background:var(--gold); color:var(--forest-950); width:39px; height:39px; border-radius:50%; font-size:1.35rem; box-shadow:0 6px 18px #c18d0038; } .appointment-list,.expense-list { display:grid; gap:9px; } .appointment-item,.expense-item { background:white; border:1px solid var(--line); border-radius:14px; padding:13px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; } .appointment-item.has-agenda-identity { border-left:5px solid var(--agenda-accent,#4c85c5); } .agenda-identity-icon { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:7px; border-radius:50%; background:color-mix(in srgb,var(--agenda-accent,#4c85c5) 15%,white); color:var(--agenda-accent,#4c85c5); font-size:.8rem; vertical-align:middle; } .date-badge { width:45px; min-height:50px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#e9f3ef; color:var(--forest-800); border-radius:11px; font-size:.66rem; font-weight:800; text-transform:uppercase; } .date-badge strong { font-size:1.13rem; } .appointment-copy strong,.expense-copy strong { display:block; font-size:.88rem; } .appointment-copy span,.expense-copy span { color:var(--muted); font-size:.73rem; } .amount-copy { text-align:right; } .amount-copy strong { display:block; font-size:.88rem; } .status-paid { color:#08764f; }.status-pending { color:#996e00; } .full .appointment-item { grid-template-columns:52px minmax(0,1fr) auto; align-items:start; padding:15px; } .full .amount-copy { grid-column:3; display:block; text-align:right; } .appointment-copy small { display:block; margin-top:5px; color:var(--muted); font-size:.68rem; } .appointment-card-actions { grid-column:2 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:2px; } .status-pill,.payment-pill { min-height:30px; padding:6px 10px; border:0; border-radius:999px; font-size:.66rem; font-weight:850; } .status-pill { background:#edf1ef; color:var(--forest-800); }.status-pill.status-confirmed { background:#e5f0ff; color:#285a91; }.status-pill.status-completed { background:#e7f6ee; color:#08764f; }.status-pill.status-cancelled,.status-pill.status-noShow { background:#fff0ef; color:var(--danger); }.status-pill.status-rescheduled { background:#fff5d9; color:#886400; } .payment-pill { cursor:default; background:#fff5d9; color:#886400; }.payment-pill.paid { background:#e7f6ee; color:#08764f; }.payment-pill.partial { background:#fff0cf; color:#7c5d00; } .appointment-pay-button,.appointment-more-button { min-height:34px; padding:7px 11px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--forest-800); font-size:.68rem; font-weight:850; }.appointment-pay-button { border-color:#e2b629; background:var(--gold); color:var(--forest-950); } .barber-appointment-item .appointment-card-actions { gap:6px; } .barber-appointment-item .appointment-more-button { padding-inline:9px; } .empty-state { background:white; border:1px dashed #b9c7c1; padding:40px 24px; border-radius:18px; text-align:center; color:var(--muted); } .empty-state > span { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 17px; border-radius:50%; background:#e9f3ef; color:var(--emerald); font-size:1.6rem; } .empty-state h2 { color:var(--ink); } .client-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; } .client-summary-grid article { background:white; border:1px solid var(--line); border-radius:14px; padding:13px; } .client-summary-grid article:last-child { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; } .client-summary-grid span { color:var(--muted); font-size:.74rem; } .client-summary-grid strong { display:block; margin-top:5px; font-size:1.08rem; } .client-summary-grid article:last-child strong { margin:0; color:var(--emerald); } .client-list { display:grid; gap:10px; } .client-card { background:white; border:1px solid var(--line); border-radius:16px; padding:15px; } .client-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .client-card-copy { flex:1; min-width:0; } .client-avatar,.client-detail-avatar { flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:#e9f3ef; color:var(--forest-800); font-weight:850; } .client-avatar { width:42px; height:42px; }.client-detail-avatar { width:48px; height:48px; } .client-avatar img,.client-detail-avatar img { width:100%; height:100%; object-fit:cover; } .client-detail-title-wrap { display:flex; align-items:center; gap:11px; } .client-photo-field { display:grid; grid-template-columns:82px 1fr; gap:14px; align-items:center; margin:0 0 18px; padding:13px; border-radius:14px; background:var(--cream); } .client-photo-preview { width:82px; height:82px; overflow:hidden; display:grid; place-items:center; border-radius:50%; background:white; border:1px dashed #a9bbb3; color:var(--emerald); font-size:1.5rem; } .client-photo-preview img { width:100%; height:100%; object-fit:cover; } .photo-upload-button { display:block; width:max-content; margin:0; padding:9px 12px; } .client-photo-field .field-help { margin:5px 0 0; font-size:.65rem; }.client-photo-field .text-button { padding:7px 0 0; } .teacher-agenda-personalization { margin:0 0 20px; padding:15px; border:1px solid var(--line); border-radius:15px; background:var(--cream); } .teacher-agenda-personalization h3 { margin:0 0 3px; font-size:.92rem; } .agenda-identity-options { min-width:0; margin:13px 0 0; padding:0; border:0; }.agenda-identity-options legend { margin-bottom:7px; font-size:.72rem; font-weight:800; } .agenda-color-options { display:flex; flex-wrap:wrap; gap:8px; } .agenda-color-choice { display:grid; place-items:center; width:38px; height:38px; padding:0; border:2px solid transparent; border-radius:50%; background:white; color:var(--ink); font-size:1rem; } .agenda-color-choice::before { content:""; width:24px; height:24px; border-radius:50%; background:var(--choice-color); } .agenda-color-choice.default { color:var(--muted); font-size:.72rem; font-weight:850; }.agenda-color-choice.default::before { display:none; } .agenda-color-choice.selected { border-color:var(--forest-800); box-shadow:0 0 0 2px white inset; } .agenda-identity-preview { margin-top:14px; padding:11px 12px; border-left:5px solid var(--agenda-accent,#4c85c5); border-radius:9px; background:white; font-size:.78rem; } .agenda-identity-preview strong { display:block; }.agenda-identity-preview span { color:var(--muted); } .identity-dot { display:inline-block; width:9px; height:9px; margin-right:4px; border-radius:50%; background:var(--identity-color); } .visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } .client-card h2 { margin:0 0 3px; font-size:1rem; } .client-card p { margin:0; color:var(--muted); font-size:.76rem; } .client-price { color:var(--forest-800); font-weight:850; white-space:nowrap; } .recurrence-chip { display:inline-flex; align-items:center; gap:5px; margin:11px 0; padding:5px 8px; background:#e9f3ef; color:var(--forest-800); border-radius:999px; font-size:.69rem; font-weight:750; } .client-card-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:9px; } .client-card-metrics div { background:var(--cream); padding:8px; border-radius:9px; } .client-card-metrics span { display:block; color:var(--muted); font-size:.63rem; } .client-card-metrics strong { font-size:.76rem; } .client-detail-button { width:100%; border:0; background:transparent; color:var(--emerald); padding:7px; font-weight:800; } .barber-client-card { padding-bottom:10px; } .barber-client-card .client-card-top { align-items:center; } .barber-client-card .client-card-copy p span { color:var(--forest-800); font-weight:750; } .barber-client-metrics { margin-top:12px; } .barber-client-metrics div { min-width:0; } .barber-client-metrics strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .client-detail-shell { padding:23px; } .client-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px; } .client-detail-actions .primary-button, .client-detail-actions .secondary-button { margin:0; min-height:46px; } .client-detail-actions:has(#student-add-lesson-button) #generate-charge-button { grid-column:1/-1; } .appointment-details-summary { display:flex; flex-direction:column; gap:5px; background:var(--cream); border-radius:12px; padding:14px; margin-bottom:18px; } .appointment-details-summary span { color:var(--muted); font-size:.8rem; } .appointment-copy small { display:block; color:var(--muted); margin-top:3px; max-width:190px; } .history-item .appointment-notes-button { display:block; padding:5px 0 0; text-align:left; } .edit-future-schedule { margin:22px 0; padding-top:18px; border-top:1px solid var(--line); } .edit-future-schedule h3 { margin:0 0 5px; } .current-schedule-list { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 22px; } .current-schedule-chip { display:flex; flex-direction:column; gap:3px; min-width:126px; padding:10px 12px; border-radius:12px; background:#e9f3ef; color:var(--forest-800); font-size:.76rem; } .current-schedule-chip strong { font-size:.82rem; } .edit-schedule-title { padding-top:18px; border-top:1px solid var(--line); } .edit-pattern-row { padding:10px 0; border-bottom:1px solid var(--line); } .edit-pattern-row:last-child { border-bottom:0; } .extra-service-button { margin:18px 0 4px; border-color:var(--gold); color:var(--forest-800); } .client-month-switch { display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:8px; margin-bottom:16px; } .client-month-switch button { border:0; border-radius:10px; min-height:36px; background:var(--cream); font-size:1.4rem; } .client-month-switch strong { text-align:center; text-transform:capitalize; font-size:.95rem; } .client-detail-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:16px; } .client-detail-meta div { background:var(--cream); border-radius:10px; padding:10px; } .client-detail-meta span { display:block; color:var(--muted); font-size:.67rem; } .client-detail-meta strong { font-size:.8rem; } .lifetime-meta { margin-bottom:20px; } .client-identity-line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; margin:-7px 0 9px; border-radius:10px; background:#eef8f3; color:var(--forest-800); font-size:.75rem; } .barber-client-status { justify-content:flex-end; padding:6px 10px; background:transparent; } .client-detail-section-label { margin-top:15px; } .barber-client-overview { margin-bottom:14px; } .client-contact-line { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; } .client-contact-line span { padding:6px 9px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--muted); font-size:.7rem; } @media (max-width:420px) { .client-detail-actions { grid-template-columns:1fr; } } .history-list { display:grid; gap:7px; max-height:320px; overflow:auto; } .history-item { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:12px 0 12px 17px; border-bottom:1px solid var(--line); } .history-item::before { content:""; position:absolute; left:3px; top:0; bottom:0; width:2px; background:#dcebe4; } .history-item::after { content:""; position:absolute; left:0; top:18px; width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 3px white; } .history-item time { font-size:.7rem; color:var(--muted); } .history-item p { margin:0; font-size:.76rem; } .history-item small { display:block; color:var(--muted); } .history-actions { min-width:92px; display:flex; flex-direction:column; align-items:flex-end; gap:2px; } .history-actions .text-button { padding:2px 0; } .person-next-card { display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; margin:0 0 17px; padding:14px; border-radius:14px; background:linear-gradient(135deg,var(--forest-950),#0d5e48); color:white; } .person-next-card span,.person-next-card small { color:#cfe2da; font-size:.69rem; }.person-next-card strong { font-size:.94rem; }.person-next-card small { grid-column:1; } .person-next-card button { grid-column:2; grid-row:1 / span 2; border:0; border-radius:9px; padding:8px 10px; background:var(--gold); color:var(--forest-950); font-size:.67rem; font-weight:850; } .appointment-action-shell { width:min(430px,calc(100vw - 32px)); padding:23px; } .appointment-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .appointment-action-grid button { min-height:50px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#eef7f3; color:var(--forest-800); font-size:.74rem; font-weight:800; } .appointment-action-grid .danger-action { background:#fff0ef; color:var(--danger); } #reschedule-dialog form { width:min(430px,calc(100vw - 34px)); } .backup-panel { margin:18px 0; padding:15px; border:1px solid var(--line); border-radius:15px; background:white; } .backup-panel h2 { margin-bottom:5px; }.backup-panel .intro { margin-bottom:12px; font-size:.78rem; } .backup-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .backup-actions .secondary-button { margin:0; min-height:48px; } .backup-status { min-height:18px; margin:9px 0 0; color:var(--emerald); font-size:.72rem; font-weight:700; } .summary-detail-shell { padding:23px; } .summary-detail-total { display:flex; align-items:center; justify-content:space-between; padding:14px; margin-bottom:14px; border-radius:12px; background:#e9f3ef; color:var(--forest-800); } .summary-detail-total span { font-size:.78rem; font-weight:750; } .summary-detail-total strong { font-size:1.15rem; } .summary-detail-list { display:grid; gap:8px; max-height:min(55vh,430px); overflow:auto; } .summary-detail-item { display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:13px; border:1px solid var(--line); border-radius:13px; background:white; } .summary-detail-item strong { font-size:.86rem; } .summary-detail-item small { grid-column:1; color:var(--muted); font-size:.7rem; } .summary-detail-item .summary-detail-amount { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:.85rem; white-space:nowrap; } .summary-detail-item .negative { color:var(--danger); } .summary-receive-button { grid-column:2; grid-row:1 / span 2; align-self:center; min-width:94px; padding:9px 11px; border:0; border-radius:10px; background:var(--gold); color:var(--forest-950); text-align:center; } .summary-receive-button strong,.summary-receive-button span { display:block; } .summary-receive-button strong { font-size:.85rem; } .summary-receive-button span { margin-top:2px; font-size:.65rem; font-weight:800; } .summary-receive-button.summary-undo-button { background:#fff0ef; color:var(--danger); } .receive-total-button { margin-bottom:16px; } .payment-partial-label { margin:2px 0 10px; } #receive-payment-dialog form { width:min(430px,calc(100vw - 34px)); } #receive-payment-dialog .secondary-button { width:100%; margin-top:8px; } .finance-summary { background:white; border:1px solid var(--line); border-radius:17px; padding:7px 17px; } .finance-summary div { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); } .finance-summary div:last-child { border-bottom:0; } .finance-summary span { color:var(--muted); font-size:.85rem; } .finance-summary strong { font-size:.91rem; } .finance-summary .total-line strong { color:var(--emerald); font-size:1.05rem; } .finance-center-card { width:100%; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:11px; margin-top:13px; padding:14px; border:1px solid var(--line); border-radius:15px; background:white; color:var(--ink); text-align:left; } .finance-center-card strong,.finance-center-card small { display:block; } .finance-center-card strong { font-size:.86rem; } .finance-center-card small { margin-top:2px; color:var(--muted); font-size:.68rem; } .finance-center-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:11px; background:#e9f3ef; color:var(--forest-800); font-size:1.2rem; } .finance-alert-badge { min-width:25px; height:25px; display:grid; place-items:center; padding:0 7px; border-radius:999px; background:var(--danger); color:white; font-size:.7rem; font-weight:850; } .finance-center-shell { width:min(440px,calc(100vw - 24px)); padding:23px; } .finance-month-switch { display:grid; grid-template-columns:38px 1fr 38px; align-items:center; gap:8px; margin-bottom:12px; } .finance-month-switch button { min-height:38px; border:0; border-radius:10px; background:var(--cream); font-size:1.35rem; } .finance-month-switch strong { text-align:center; text-transform:capitalize; font-size:.9rem; } .finance-center-totals { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; } .finance-center-totals div { padding:12px; border-radius:12px; background:#e9f3ef; } .finance-center-totals span,.finance-center-totals strong { display:block; } .finance-center-totals span { color:var(--muted); font-size:.68rem; } .finance-center-totals strong { margin-top:3px; color:var(--forest-800); font-size:1rem; } .finance-center-tabs { display:flex; gap:6px; overflow:auto; padding-bottom:5px; margin-bottom:9px; scrollbar-width:none; } .finance-center-tabs button { flex:0 0 auto; padding:8px 11px; border:0; border-radius:999px; background:#e8ece9; color:var(--muted); font-size:.7rem; font-weight:800; } .finance-center-tabs button.active { background:var(--forest-800); color:white; } .finance-selection { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 12px; } .finance-selection label { display:flex; align-items:center; gap:7px; margin:0; } .finance-selection input { width:auto; margin:0; accent-color:var(--emerald); } .finance-selection .primary-button { width:auto; margin:0; padding:9px 11px; box-shadow:none; font-size:.7rem; } .finance-selection .primary-button:disabled { opacity:.45; cursor:not-allowed; } .finance-movement-list { max-height:min(54vh,470px); overflow:auto; display:grid; gap:12px; } .movement-day h3 { margin:0 0 7px; color:var(--muted); font-size:.72rem; text-transform:capitalize; } .movement-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:11px; border:1px solid var(--line); border-radius:12px; background:white; } .movement-row input { width:auto; margin:0; accent-color:var(--emerald); } .movement-row-copy strong,.movement-row-copy small { display:block; } .movement-row-copy strong { font-size:.8rem; } .movement-row-copy small { color:var(--muted); font-size:.66rem; } .movement-row-amount { border:0; background:transparent; color:var(--emerald); text-align:right; font-weight:850; font-size:.78rem; } .movement-row-amount small { display:block; margin-top:2px; color:var(--gold); font-size:.58rem; } .movement-row.expense .movement-row-amount { color:var(--danger); } .expense-icon { width:40px; height:40px; border-radius:10px; background:#fff0f1; color:var(--danger); display:grid; place-items:center; } .finance-actions { display:flex; align-items:center; gap:8px; } .finance-alert-button { position:relative; width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:white; color:var(--forest-800); font-size:1.15rem; } .finance-header-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 4px; border-radius:999px; background:var(--danger); color:white; font-size:.56rem; font-weight:850; } .income-icon { background:#e9f3ef; color:var(--emerald); } .choice-dialog { padding:23px; } .choice-dialog .secondary-button { margin-top:10px; } .compact-button { padding:10px; margin-top:8px; } .agenda-actions { display:flex; align-items:center; gap:8px; } .blocked-slot { background:#f2edf8; border-color:#b9a2d2; color:#563e70; } .blocked-commitments-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:24px 0 10px; } .blocked-commitments-heading h2 { margin:0; } .blocked-commitments { display:grid; gap:8px; } .blocked-commitment { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:12px; border:1px solid #e7c36c; border-radius:12px; background:#fff6dc; } .blocked-commitment-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#f4d780; color:#694c00; } .blocked-commitment strong,.blocked-commitment small { display:block; } .blocked-commitment strong { font-size:.8rem; }.blocked-commitment small { color:var(--muted); font-size:.68rem; } .remove-block { border:0; border-radius:9px; padding:7px 9px; background:white; color:var(--danger); font-size:.67rem; font-weight:800; } .block-conflict-choice { margin-top:15px; padding:14px; border:1px solid #e3b556; border-radius:14px; background:#fff7df; } .block-conflict-choice h3 { margin:0 0 5px; color:#765600; font-size:.92rem; } .block-conflict-choice > p { margin:0 0 11px; color:#6e6242; font-size:.73rem; } .block-conflict-choice > strong { display:block; margin-bottom:6px; font-size:.7rem; } .block-conflict-list { display:grid; gap:6px; max-height:155px; overflow:auto; } .block-conflict-item { padding:8px 9px; border-radius:9px; background:white; border:1px solid #ead9ab; } .block-conflict-item strong,.block-conflict-item small { display:block; }.block-conflict-item strong { font-size:.76rem; }.block-conflict-item small { color:var(--muted); font-size:.65rem; } .block-conflict-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; margin-top:12px; } .block-conflict-actions .primary-button,.block-conflict-actions .secondary-button { margin:0; padding:10px; font-size:.7rem; } .personal-finance-entry { width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; margin:16px 0; padding:17px; border:1px solid #dbe7e1; border-radius:19px; background:linear-gradient(135deg,#fff 55%,#edf7f2); color:var(--ink); text-align:left; } .personal-finance-entry-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:var(--green); color:white; font-size:1.2rem; } .personal-finance-entry strong,.personal-finance-entry small { display:block; }.personal-finance-entry strong { font-size:.9rem; }.personal-finance-entry small { margin-top:3px; color:var(--muted); font-size:.68rem; } .personal-finance-dialog { width:min(920px,calc(100% - 24px)); max-height:94vh; padding:0; border:0; border-radius:28px; background:var(--cream); } .personal-finance-shell { padding:25px; overflow:auto; max-height:94vh; } .personal-finance-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }.personal-finance-header h2 { margin:4px 0 5px; font-size:1.75rem; }.personal-finance-header p:last-child { margin:0; color:var(--muted); font-size:.75rem; } .personal-finance-filters { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 14px; }.personal-finance-filters label span { display:block; margin-bottom:6px; font-weight:700; font-size:.7rem; }.personal-finance-filters input,.personal-finance-filters select { margin:0; } .personal-balance-card { padding:23px; border-radius:24px; background:linear-gradient(135deg,#063e32,#0d7058); color:white; overflow:hidden; }.personal-balance-card>span,.personal-balance-card>small { display:block; color:#cce6dc; }.personal-balance-card>strong { display:block; margin:7px 0 4px; font-size:2rem; }.personal-balance-card>small { max-width:560px; font-size:.66rem; }.personal-balance-card>div { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:20px; }.personal-balance-card>div span { padding:11px; border-radius:13px; background:rgba(255,255,255,.1); }.personal-balance-card>div small,.personal-balance-card>div b { display:block; }.personal-balance-card>div small { color:#cce6dc; font-size:.62rem; }.personal-balance-card>div b { margin-top:4px; font-size:.82rem; } .personal-currency-notice { margin-top:11px; padding:11px 13px; border-radius:12px; background:#fff5d8; color:#715800; font-size:.68rem; } .personal-finance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }.personal-finance-grid article { padding:15px; border:1px solid #e1e8e4; border-radius:17px; background:white; }.personal-finance-grid span,.personal-finance-grid strong,.personal-finance-grid small { display:block; }.personal-finance-grid span { color:var(--muted); font-size:.67rem; }.personal-finance-grid strong { margin-top:7px; font-size:1rem; }.personal-finance-grid small { margin-top:3px; color:var(--muted); font-size:.58rem; } .personal-finance-section { margin-top:14px; padding:17px; border:1px solid #e1e8e4; border-radius:19px; background:white; }.personal-finance-section h3 { margin:0 0 10px; font-size:.9rem; } .personal-currency-list { display:flex; gap:9px; overflow:auto; }.personal-currency-list article { min-width:145px; padding:13px; border-radius:14px; background:#eff7f3; }.personal-currency-list span,.personal-currency-list strong,.personal-currency-list small { display:block; }.personal-currency-list span { color:var(--green); font-weight:800; }.personal-currency-list strong { margin-top:4px; }.personal-currency-list small { color:var(--muted); font-size:.58rem; } .personal-movement-list article { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid #edf0ee; }.personal-movement-list article:last-child { border-bottom:0; }.personal-movement-sign { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#e7f6ef; color:var(--green); }.personal-movement-sign.expense { background:#fff0f0; color:#bd3d49; }.personal-movement-list strong,.personal-movement-list small { display:block; }.personal-movement-list small { margin-top:2px; color:var(--muted); font-size:.62rem; }.personal-movement-list b { font-size:.75rem; } .personal-finance-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.personal-summary-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #edf0ee; font-size:.7rem; }.personal-summary-row:last-child { border:0; }.personal-finance-empty { color:var(--muted); font-size:.68rem; padding:8px 0; }.personal-empty-feature { display:flex; gap:12px; align-items:center; }.personal-empty-feature>span { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:#fff3c8; color:#9b7100; }.personal-empty-feature h3,.personal-empty-feature p { margin:0; }.personal-empty-feature p { margin-top:3px; color:var(--muted); font-size:.67rem; } @media(max-width:640px){.personal-finance-shell{padding:18px}.personal-finance-header h2{font-size:1.45rem}.personal-finance-filters{grid-template-columns:1fr 1fr}.personal-balance-card{padding:19px}.personal-balance-card>strong{font-size:1.65rem}.personal-balance-card>div{grid-template-columns:1fr}.personal-finance-grid{grid-template-columns:1fr 1fr}.personal-finance-columns{grid-template-columns:1fr}} .availability-consult-button { width:100%; display:flex; justify-content:center; align-items:center; gap:8px; margin:13px 0; padding:13px; border:1px solid #8bbba6; border-radius:14px; background:#edf8f3; color:var(--forest-800); font-weight:800; } .date-time-summary-button { width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; margin:13px 0; padding:13px 14px; border:1px solid #aac5b9; border-radius:15px; background:#f5faf7; color:var(--forest-800); text-align:left; }.date-time-summary-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; background:#e2f2eb; }.date-time-summary-button small,.date-time-summary-button strong { display:block; }.date-time-summary-button small { color:var(--muted); font-size:.6rem; }.date-time-summary-button strong { margin-top:3px; font-size:.76rem; }.date-time-summary-button b { font-size:.72rem; }.date-time-summary-button.selected { border-color:#3d9a72; background:#eaf7f0; }.date-time-summary-button.selected .date-time-summary-icon::after { content:'✓'; position:absolute; color:var(--emerald); font-size:.65rem; transform:translate(13px,-13px); } .booking-availability-panel { margin:14px 0; padding:15px; border:1px solid #dbe6e1; border-radius:18px; background:#fbfcfb; } .booking-availability-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }.booking-availability-heading h3 { margin:2px 0 0; }.booking-availability-heading .text-button { width:auto; margin:0; } .booking-availability-nav { display:grid; grid-template-columns:38px 1fr 38px; gap:7px; margin:12px 0; }.booking-availability-nav input { margin:0; padding:9px; text-align:center; }.booking-availability-nav button { border:0; border-radius:10px; background:#e6f2ed; color:var(--forest-800); font-size:1.2rem; } .booking-availability-legend { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }.booking-availability-legend span { padding:5px 8px; border-radius:999px; font-size:.59rem; font-weight:800; }.booking-availability-legend .available { background:#e3f5ec; color:#176849; }.booking-availability-legend .occupied { background:#fff0ef; color:#b43d48; }.booking-availability-legend .blocked { background:#ecefed; color:#65716c; } .booking-availability-list { display:grid; gap:7px; max-height:340px; overflow:auto; } .booking-availability-slot { width:100%; display:grid; grid-template-columns:92px 1fr auto; gap:10px; align-items:center; padding:11px; border:1px solid transparent; border-radius:13px; text-align:left; }.booking-availability-slot strong,.booking-availability-slot span,.booking-availability-slot small { display:block; }.booking-availability-slot strong { font-size:.72rem; }.booking-availability-slot span { font-weight:800; font-size:.7rem; }.booking-availability-slot small { margin-top:2px; font-size:.59rem; opacity:.78; }.booking-availability-slot.available { border-color:#8fc4ab; background:#eaf7f0; color:#15563d; }.booking-availability-slot.occupied { border-color:#efc8c8; background:#fff1f0; color:#8e3039; }.booking-availability-slot.blocked,.booking-availability-slot.outside { border-color:#dde2df; background:#eef1ef; color:#66716c; }.booking-availability-slot b { font-size:.9rem; } .appointment-conflict-choice { margin:13px 0; padding:15px; border:1px solid #e7bd5b; border-radius:17px; background:#fff8df; }.appointment-conflict-choice h3 { margin:4px 0 12px; font-size:.92rem; }.appointment-conflict-choice>p:last-of-type { color:#6f6447; font-size:.68rem; }.appointment-conflict-comparison { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.appointment-conflict-comparison article { padding:11px; border-radius:12px; background:white; border:1px solid #ecdfbd; }.appointment-conflict-comparison article>span { display:block; margin-bottom:6px; color:var(--muted); font-size:.58rem; font-weight:800; text-transform:uppercase; }.appointment-conflict-comparison strong,.appointment-conflict-comparison small { display:block; }.appointment-conflict-comparison small { margin-top:3px; color:var(--muted); font-size:.61rem; }.appointment-conflict-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }.appointment-conflict-actions button { margin:0; padding:11px; font-size:.67rem; } @media(max-width:540px){.booking-availability-slot{grid-template-columns:83px 1fr auto}.appointment-conflict-comparison{grid-template-columns:1fr}.appointment-conflict-actions{grid-template-columns:1fr}} .weekly-availability { overflow-x:auto; margin:10px 0 18px; } .weekly-grid { min-width:620px; display:grid; grid-template-columns:56px repeat(7,1fr); border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; } .weekly-grid > div,.weekly-grid > button { min-height:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .weekly-corner,.weekly-head,.weekly-time { padding:7px 4px; text-align:center; font-size:.65rem; font-weight:800; background:var(--cream); } .weekly-head small { display:block; color:var(--muted); font-size:.6rem; } .weekly-time { padding-top:10px; color:var(--muted); } .weekly-cell { border-top:0; border-left:0; font-size:.58rem; font-weight:800; cursor:pointer; } .weekly-cell.available { background:#eef8f2; color:var(--emerald); } .weekly-cell.occupied { background:#fff0ef; color:var(--danger); cursor:pointer; } .weekly-cell.outside,.monthly-cell.outside { background:#eef0ef; color:#9aa39f; cursor:not-allowed; } .monthly-cell.outside .monthly-slot { color:#9aa39f; cursor:not-allowed; } .availability-view-controls { display:flex; gap:8px; align-items:center; margin:10px 0; } .availability-view-controls select { flex:0 0 auto; } .availability-view-controls .form-row { flex:1; margin:0; } .range-day { display:flex; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:white; margin-bottom:6px; font-size:.78rem; } .range-day strong { text-transform:capitalize; } .range-free { color:var(--emerald); font-weight:800; }.range-busy { color:var(--danger); font-weight:800; text-align:right; } .availability-heading { display:flex; align-items:center; justify-content:space-between; margin-top:18px; } .availability-heading h2 { margin:0; } .eye-toggle { border:1px solid var(--line); background:white; color:var(--forest-800); border-radius:50%; width:38px; height:38px; font-size:1.15rem; } #weekly-availability { overflow:auto; max-height:560px; position:relative; z-index:1; isolation:isolate; overscroll-behavior:contain; } .monthly-table { min-width:max-content; border-spacing:0; border:1px solid var(--line); border-radius:12px; background:white; } .monthly-table th,.monthly-table td { box-sizing:border-box; width:84px; min-width:84px; height:44px; padding:0; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .monthly-table tr:last-child th,.monthly-table tr:last-child td { border-bottom:0; } .monthly-table th:last-child,.monthly-table td:last-child { border-right:0; } .monthly-corner,.monthly-head,.monthly-time { padding:7px 4px !important; font-size:.65rem; font-weight:800; background:var(--cream); } .monthly-corner { position:sticky; top:0; left:0; z-index:6; width:70px !important; min-width:70px !important; box-shadow:2px 2px 5px #16382d24; } .monthly-head { position:sticky; top:0; z-index:4; box-shadow:0 2px 4px #16382d14; } .monthly-head small { display:block; color:var(--muted); font-size:.62rem; } .monthly-time { position:sticky; left:0; z-index:5; width:70px !important; min-width:70px !important; color:var(--muted); box-shadow:2px 0 5px #16382d24; } .monthly-half-hour .monthly-time { color:#7c8984; font-weight:650; } .monthly-cell { background:#eef8f2; } .monthly-cell.occupied { background:#fff0ef; } .monthly-slot { width:100%; height:100%; padding:5px; border:0; background:transparent; color:var(--emerald); font-size:.68rem; font-weight:800; cursor:pointer; } .monthly-cell.occupied .monthly-slot { color:var(--danger); cursor:pointer; } .monthly-cell.occupied .monthly-slot:hover,.weekly-cell.occupied:hover { background:#ffe3df; } .monthly-cell.occupied .monthly-slot:focus-visible,.weekly-cell.occupied:focus-visible { outline:3px solid var(--forest-800); outline-offset:-3px; } .monthly-cell.occupied .monthly-slot { min-height:44px; height:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .monthly-entry { display:block; width:100%; line-height:1.2; overflow-wrap:anywhere; font-size:.62rem; } .monthly-entry + .monthly-entry { border-top:1px solid #d9b9b7; padding-top:2px; } .monthly-midnight-row th,.monthly-midnight-row td { height:28px; background:var(--cream); border-bottom:0; } .monthly-midnight { color:var(--muted); font-size:.62rem; } .extra-day-row { margin-top:10px; } .recurring-time-card { margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:14px; background:white; } .recurring-time-card,.recurring-time-card * { min-width:0; } .recurring-time-card-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }.recurring-time-card-heading strong { font-size:.8rem; } .recurring-time-summary { width:100%; margin-top:8px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:#f7faf8; color:var(--forest-800); text-align:left; font-weight:800; } .recurring-time-summary.selected { border-color:var(--emerald); background:#eaf6f0; }.recurring-time-summary small { display:block; margin-top:3px; color:var(--muted); font-weight:650; } .recurring-time-card > .booking-availability-panel { margin:10px 0 0; padding:12px; border:0; border-top:1px solid var(--line); border-radius:0 0 12px 12px; background:#f7faf8; } .recurring-time-card > .booking-availability-panel .booking-availability-heading { align-items:flex-start; }.recurring-time-card > .booking-availability-panel .booking-availability-list { max-height:310px; } .custom-recurrence-options { margin:12px 0; min-width:0; } .custom-recurrence-options input,.custom-recurrence-options select { width:100%; max-width:100%; box-sizing:border-box; } .custom-recurrence-options > button { width:100%; display:block; text-align:center; background:var(--forest-800); color:white; } .custom-recurrence-options .booking-availability-panel { width:100%; max-width:100%; box-sizing:border-box; margin-top:10px; } .custom-date-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line); font-size:.78rem; } .custom-date-row span { overflow-wrap:anywhere; } .recurring-duration-details { margin-top:8px; font-size:.7rem; color:var(--muted); }.recurring-duration-details input { margin:7px 0 0; background:white; } .recurring-conflicts { margin:8px 0 0; color:var(--danger); font-size:.66rem; line-height:1.45; }.recurring-conflicts small { display:block; margin-top:3px; color:var(--muted); }.recurring-checked { color:var(--emerald); } .recurrence-validation-summary { padding:9px 11px; border-radius:10px; background:#edf7f2; color:var(--forest-800); font-size:.7rem; } .appointment-conflict-list { display:grid; gap:5px; max-height:150px; overflow:auto; margin:10px 0; }.appointment-conflict-list p { margin:0; padding:7px 9px; border-radius:8px; background:#fff4f3; color:var(--danger); font-size:.68rem; } .weekly-working-hours { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; width:100%; min-width:0; margin:12px 0; } .working-day-card { width:100%; min-width:0; max-width:100%; padding:11px; border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; } .working-day-card.is-closed { background:#f4f3ef; color:var(--muted); } .working-day-heading { display:flex; align-items:center; gap:8px; }.working-period-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 34px; align-items:center; gap:6px; min-width:0; } .working-day-heading { justify-content:space-between; }.working-day-heading strong { font-size:.78rem; } .working-day-toggle { display:flex; align-items:center; gap:6px; margin:0; font-size:.67rem; } .working-day-toggle input { width:18px; height:18px; margin:0; } .working-periods { display:grid; gap:7px; margin-top:9px; } .working-period-row input { width:100%; min-width:0; max-width:100%; margin:0; padding:8px 5px; font-size:.68rem; } .working-period-row .text-button { width:34px; min-width:34px; padding:6px; color:var(--danger); } .add-working-period { margin-top:8px; padding:5px 0; font-size:.68rem; } .copy-working-hours { margin:14px 0; padding:11px; border:1px solid var(--line); border-radius:14px; }.copy-working-hours legend { padding:0 5px; font-size:.72rem; font-weight:800; }.copy-working-hours select { margin-bottom:8px; } .daily-outside-hours { position:absolute; left:70px; right:0; z-index:0; background:repeating-linear-gradient(135deg,#eef0ed,#eef0ed 6px,#e6e9e5 6px,#e6e9e5 12px); opacity:.72; pointer-events:none; } @media (min-width:700px) { .weekly-working-hours { grid-template-columns:1fr 1fr; }.copy-working-hours { grid-column:1/-1; } } @media (max-width:699px) { .copy-working-hours { min-width:0; max-width:100%; overflow:hidden; }.working-day-heading { flex-wrap:wrap; }.copy-working-hours .weekday-chips { flex-wrap:wrap; } } .weekday-chips { display:flex; gap:5px; margin-top:6px; } .field-help { margin:12px 0 5px; color:var(--muted); font-size:.78rem; font-weight:700; } .main-weekday-chips { margin:8px 0 12px; justify-content:space-between; } .weekday-chip { width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:50%; background:white; color:var(--muted); font-size:.68rem; font-weight:800; } .weekday-chip.selected { border-color:var(--forest-800); background:var(--forest-800); color:white; } .weekday-chip.required { box-shadow:0 0 0 2px var(--gold); } .client-weekly-schedule { margin:8px 0 14px; padding:13px; border:1px solid var(--line); border-radius:15px; background:#f8faf8; } .client-weekly-schedule .field-help { margin-top:0; } .client-heading-actions { display:flex; align-items:center; gap:8px; } .filter-icon-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--forest-800); } .filter-icon-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .filter-icon-button.active { border-color:var(--forest-800); background:#e8f2ed; } .client-filter-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 16px; padding:13px; border:1px solid var(--line); border-radius:15px; background:white; } .client-filter-panel label { font-size:.66rem; } .client-filter-panel select { margin:0; padding:10px; font-size:.72rem; } .profile-card { background:white; border:1px solid var(--line); border-radius:17px; padding:15px; display:flex; align-items:center; gap:12px; margin:18px 0; } .profile-card img { width:120px; height:56px; object-fit:contain; flex:0 0 120px; } .profile-card strong,.profile-card span { display:block; }.profile-card span { color:var(--muted); font-size:.83rem; } .profile-language-switch { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:5px; margin-top:9px; background:#e8efe7; border-radius:12px; } .profile-language-switch .language-button { color:var(--forest-800); padding:9px 6px; } .profile-language-switch .language-button.active { color:var(--forest-950); } .online-booking-settings { margin:16px 0; border:1px solid var(--line); border-radius:17px; background:white; overflow:hidden; } .online-booking-settings > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px; cursor:pointer; font-weight:850; } .online-booking-settings > summary small { padding:5px 8px; border-radius:999px; background:var(--gold-soft); color:#725800; font-size:.62rem; } .online-booking-settings form { padding:0 15px 16px; } .online-booking-notice { margin-bottom:15px; padding:12px; border-radius:12px; background:#eaf4ef; color:var(--forest-800); } .online-booking-notice strong { display:block; font-size:.77rem; }.online-booking-notice p { margin:4px 0 0; color:var(--muted); font-size:.68rem; } .setting-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 16px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--cream); } .setting-toggle span { min-width:0; }.setting-toggle strong,.setting-toggle small { display:block; }.setting-toggle strong { font-size:.78rem; }.setting-toggle small { margin-top:3px; color:var(--muted); font-size:.63rem; font-weight:500; } .setting-toggle input { flex:0 0 auto; width:43px; height:24px; margin:0; accent-color:var(--emerald); } .public-link-field { display:flex; align-items:center; overflow:hidden; margin-bottom:10px; border:1px solid #bfcac5; border-radius:11px; background:white; } .public-link-field span { padding-left:12px; color:var(--muted); font-size:.68rem; white-space:nowrap; }.public-link-field input { min-width:0; margin:0; padding-left:3px; border:0; border-radius:0; } .public-link-preview { display:flex; flex-direction:column; gap:3px; margin-bottom:17px; padding:11px; border-radius:11px; background:var(--forest-950); color:white; overflow:hidden; }.public-link-preview span,.public-link-preview small { color:#bdd5cc; font-size:.62rem; }.public-link-preview strong { overflow:hidden; text-overflow:ellipsis; font-size:.7rem; white-space:nowrap; } .booking-services-field { margin:0 0 16px; padding:12px; border:1px solid var(--line); border-radius:12px; }.booking-services-field legend { padding:0 5px; font-size:.72rem; font-weight:800; } #booking-services-list { display:grid; gap:7px; }.booking-service-option { display:flex; align-items:center; gap:9px; margin:0; padding:8px; border-radius:9px; background:var(--cream); }.booking-service-option input { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--emerald); }.booking-service-option strong,.booking-service-option small { display:block; }.booking-service-option strong { font-size:.73rem; }.booking-service-option small { color:var(--muted); font-size:.61rem; font-weight:500; } .service-manager-shell { padding:23px; } .service-manager-list { display:grid; gap:10px; max-height:43vh; overflow:auto; margin-bottom:22px; } .service-manager-item { padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--cream); } .service-manager-editor { display:none; padding-top:12px; border-top:1px solid var(--line); }.service-manager-item.expanded .service-manager-editor { display:block; } .service-manager-item input,.service-manager-item textarea { margin-bottom:9px; background:white; } .service-manager-heading,.service-manager-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; } .service-manager-heading { margin-bottom:10px; } .service-manager-heading span { font-size:.68rem; font-weight:800; } .service-manager-heading>div { display:flex; align-items:center; gap:9px; } .service-manager-summary { display:flex; flex-direction:column; gap:3px; min-width:0; }.service-manager-summary small { color:var(--muted); font-size:.67rem; } .service-actions-menu { width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:10px; background:white; font-size:1rem; font-weight:850; } .service-favorite-button,.service-picker-star { border:0; background:transparent; color:#aab4b0; font-size:1.3rem; padding:2px; cursor:pointer; } .service-favorite-button.active,.service-picker-star.active { color:#ffb800; } .service-manager-actions .secondary-button { margin:0; padding:9px; } .service-manager-actions .text-button { white-space:nowrap; } .service-manager-actions .delete-managed-service { color:var(--danger); }.service-manager-actions .delete-managed-service:disabled { color:#9aa5a0; cursor:not-allowed; } .service-picker-manage { width:100%; margin-top:4px; }.reapply-service-defaults { display:block; margin:-4px 0 10px auto; } .business-name-form { margin:14px 0; padding:16px; border:1px solid var(--line); border-radius:16px; background:white; } .business-name-form input { margin-bottom:6px; } .business-name-form .secondary-button { margin-top:10px; } .teacher-billing-field { margin:6px 0 14px; } .teacher-billing-result { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 16px; padding:12px 14px; border-radius:13px; background:#edf8f3; color:var(--green); } .teacher-billing-result strong { font-size:1.15rem; } .completion-shell { padding:23px; } .completion-help { margin:-4px 0 14px; color:var(--muted); font-size:.76rem; line-height:1.45; } .completion-planned-card { display:grid; gap:4px; margin-bottom:12px; padding:15px; border-radius:15px; background:var(--cream); } .completion-planned-card span,.completion-planned-card small { color:var(--muted); } .completion-planned-card strong { font-size:1.3rem; } .completion-actions { display:grid; gap:8px; } .completion-actions .secondary-button { margin:0; } .completion-duration-form { margin-top:12px; padding:15px; border:1px solid var(--line); border-radius:15px; background:#fff; } .completion-duration-form .teacher-billing-result { margin-top:10px; } .service-select-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:14px; } .service-select-control input { margin:0; background:#f7faf8; cursor:pointer; } .service-select-control button { border:1px solid var(--line); border-radius:12px; padding:0 12px; background:white; color:var(--green); font-weight:800; cursor:pointer; } .service-picker-shell,.catalog-setup-shell { padding:23px; } .service-picker-list { display:grid; gap:8px; max-height:50vh; overflow:auto; margin:12px 0; } .service-picker-item { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; border:1px solid var(--line); border-radius:14px; background:white; padding:13px 14px; text-align:left; color:var(--ink); cursor:pointer; } .service-picker-item>span:first-child { display:grid; gap:3px; } .service-picker-item small { color:var(--muted); } .catalog-setup-list { display:grid; gap:8px; max-height:54vh; overflow:auto; margin:16px 0; } .catalog-template { display:grid; grid-template-columns:auto minmax(0,1fr) 82px; align-items:center; gap:10px; border:1px solid var(--line); border-radius:14px; padding:11px; background:white; } .catalog-template.recommended { background:#edf8f3; border-color:#acd8c8; } .catalog-template>span { display:grid; gap:2px; } .catalog-template small { color:var(--muted); } .catalog-template .catalog-template-duration { margin:0; padding:9px; } #skip-catalog-setup { display:block; width:100%; margin-top:10px; } @media (max-width:520px) { .service-select-control { grid-template-columns:1fr; } .service-select-control button { min-height:44px; } .catalog-template { grid-template-columns:auto minmax(0,1fr) 72px; } } #service-form { padding-top:18px; border-top:1px solid var(--line); } .secondary-button { width:100%; border:1px solid var(--line); background:white; color:var(--ink); border-radius:12px; padding:12px; margin-top:9px; font-weight:750; } .secondary-button.danger { color:var(--danger); } .floating-action { position:absolute; bottom:calc(43px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:58px; height:58px; border-radius:50%; border:4px solid var(--cream); background:var(--gold); color:var(--forest-950); font-size:1.7rem; line-height:1; font-weight:700; box-shadow:0 8px 20px #14261f38; z-index:41; } .bottom-nav { position:absolute; bottom:0; left:0; width:100%; height:calc(70px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:white; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr); z-index:40; } .nav-action-spacer { display:block; } .nav-button { border:0; background:transparent; color:#7c8883; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .nav-button span { font-size:1.2rem; }.nav-button small { font-size:.66rem; } .nav-icon { width:24px; height:24px; display:grid; place-items:center; }.nav-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .nav-button.active { color:var(--forest-800); font-weight:800; } .quick-actions-shell,.status-menu-shell { padding:23px; } .quick-actions-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.quick-actions-grid button { min-height:92px; padding:14px; border:1px solid var(--line); border-radius:15px; background:white; color:var(--ink); text-align:left; }.quick-actions-grid button:last-child { grid-column:1/-1; min-height:72px; }.quick-actions-grid span,.quick-actions-grid strong { display:block; }.quick-actions-grid span { color:var(--emerald); font-size:1.25rem; }.quick-actions-grid strong { margin-top:8px; font-size:.76rem; } .status-choice-list { display:grid; gap:7px; }.status-choice-list button { padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); text-align:left; font-weight:800; }.status-choice-list button.active { border-color:var(--forest-800); background:#e8f2ed; color:var(--forest-800); } .payment-total-row { display:flex; align-items:center; justify-content:space-between; margin:-4px 0 12px; padding:0 4px; color:var(--muted); font-size:.78rem; }.payment-total-row strong { color:var(--ink); } .appointment-create-contact { width:100%; margin:7px 0 2px; text-align:left; color:var(--emerald); } #client-dialog.contact-only-mode #client-schedule-fields { display:none; } .app-toast { position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:120; width:min(calc(100% - 36px),390px); transform:translateX(-50%); padding:13px 16px; border-radius:14px; background:var(--forest-950); color:white; box-shadow:0 12px 34px #001f185c; text-align:center; font-weight:800; font-size:.78rem; } .app-toast.success { background:var(--forest-800); } /* First-access choice and the dedicated student experience */ .audience-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; } .audience-card { min-height:82px; padding:13px 14px; border:1px solid #dce5df; border-radius:17px; background:#fbfcfa; color:var(--ink); text-align:left; display:grid; grid-template-columns:46px minmax(0,1fr) 23px; align-items:center; gap:13px; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .audience-card:hover { border-color:#8ab8a5; transform:translateY(-2px); box-shadow:0 10px 24px #0d4c3c14; } .audience-card:focus-visible { outline:3px solid var(--gold); outline-offset:2px; } .audience-card .audience-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; color:#0c6248; background:#e6f2ec; } .audience-card[data-audience="student"] .audience-icon { color:#8d6720; background:#faf0d9; } .audience-card .audience-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .audience-copy { min-width:0; }.audience-copy strong,.audience-copy small { display:block; }.audience-copy strong { font-size:.92rem; }.audience-copy small { color:var(--muted); line-height:1.3; font-size:.72rem; margin-top:3px; } .audience-arrow { color:var(--emerald); font-size:1.3rem; font-weight:700; } .onboarding-access-info { margin-top:17px; padding-top:15px; border-top:1px solid #e7ece8; color:var(--muted); font-size:.72rem; } .onboarding-access-info summary { width:max-content; max-width:100%; cursor:pointer; color:var(--forest-800); font-weight:800; }.onboarding-access-info summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .onboarding-access-info p { margin:9px 0 0; line-height:1.5; } .local-entry-profile { display:flex; align-items:center; gap:11px; padding:12px; margin:17px 0; background:#f2f7f3; border:1px solid #dbe9e1; border-radius:15px; } .local-entry-profile>span:nth-child(2) { min-width:0; flex:1; }.local-entry-profile small,.local-entry-profile strong { display:block; }.local-entry-profile small { color:var(--muted); font-size:.69rem; }.local-entry-profile strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.local-entry-profile>span:last-child { color:var(--emerald); font-weight:900; } .local-entry-avatar { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background:var(--forest-800); color:var(--gold); font-weight:900; } .local-entry-button { justify-content:space-between; min-height:50px; }.local-entry-note { color:var(--muted); font-size:.69rem; text-align:center; line-height:1.45; margin:13px 0 0; } .onboarding-back { margin:-5px 0 18px; padding:7px 0; border:0; background:transparent; color:var(--forest-800); font-weight:800; cursor:pointer; } .student-workspace { position:relative; display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; background:var(--cream); } .student-workspace>.app-header { flex:none; } .student-main { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:25px 18px calc(105px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; } .student-screen { display:none; }.student-screen.active { display:block; } .student-metrics { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; } .student-metrics article,.student-finance-summary article { padding:15px; border:1px solid var(--line); border-radius:16px; background:white; } .student-metrics span,.student-finance-summary span { display:block; min-height:34px; color:var(--muted); font-size:.7rem; }.student-metrics strong,.student-finance-summary strong { display:block; margin-top:4px; font-size:1.15rem; } .student-panel { margin:16px 0; padding:16px; border:1px solid var(--line); border-radius:18px; background:white; }.student-panel .section-heading { margin-bottom:10px; } .student-list { display:grid; gap:9px; }.student-list-card { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:13px; border:1px solid var(--line); border-radius:14px; background:white; } .student-list-card strong,.student-list-card small { display:block; }.student-list-card strong { font-size:.78rem; }.student-list-card small { margin-top:4px; color:var(--muted); font-size:.64rem; line-height:1.35; }.student-list-card > button,.subject-card > button { width:28px; height:28px; border:0; border-radius:50%; background:#eef1ef; color:var(--muted); } .student-type-dot { width:11px; height:11px; border-radius:50%; background:var(--emerald); }.student-type-dot.study { background:#6882dc; }.student-type-dot.exam { background:#d36b6f; }.student-type-dot.deadline { background:var(--gold); } .student-empty { padding:20px 10px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); text-align:center; font-size:.72rem; } .student-filter-row { display:flex; gap:7px; overflow:auto; margin:0 0 14px; padding-bottom:3px; }.student-filter-row button { flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:white; color:var(--muted); font-size:.68rem; font-weight:800; }.student-filter-row button.active { border-color:var(--forest-800); background:var(--forest-800); color:white; } .student-subject-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }.subject-card { position:relative; min-height:125px; padding:16px; border:1px solid var(--line); border-radius:17px; background:white; overflow:hidden; }.subject-card > span { display:block; width:35px; height:6px; margin-bottom:18px; border-radius:5px; background:var(--subject-color); }.subject-card strong,.subject-card small { display:block; }.subject-card small { margin-top:7px; color:var(--muted); font-size:.64rem; }.subject-card > button { position:absolute; top:10px; right:10px; } .task-card { grid-template-columns:minmax(0,1fr) auto; }.task-card label { display:flex; align-items:center; gap:11px; margin:0; }.task-card input { width:20px; height:20px; margin:0; accent-color:var(--emerald); }.task-card.completed strong { text-decoration:line-through; color:var(--muted); } .student-finance-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.student-finance-summary article:last-child { grid-column:1/-1; background:var(--forest-800); color:white; }.student-finance-summary article:last-child span { color:#c9dfd6; } .movement-sign { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#fff0ef; color:var(--danger); font-weight:900; }.movement-sign.income { background:#e8f6ef; color:var(--emerald); } .student-bottom-nav { position:absolute; bottom:0; left:0; width:100%; height:calc(70px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:white; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr); z-index:40; } .student-nav-button { border:0; background:transparent; color:#7c8883; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }.student-nav-button span { font-size:1.05rem; }.student-nav-button small { font-size:.58rem; }.student-nav-button.active { color:var(--forest-800); font-weight:850; } #student-entry-fields select,#student-entry-fields input { margin-bottom:13px; } dialog { width:min(calc(100% - 28px),420px); border:0; border-radius:22px; padding:0; box-shadow:0 25px 80px #001f18a8; } dialog::backdrop { background:#03241db8; backdrop-filter:blur(3px); } dialog form { padding:23px; } .dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; } .dialog-heading h2 { font-size:1.35rem; } .close-button { border:0; width:34px; height:34px; border-radius:50%; background:#eef1ef; font-size:1.3rem; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .money-input { position:relative; } .money-input span { position:absolute; left:13px; top:12px; color:var(--muted); } .money-input input { padding-left:29px; } @media(max-width:380px) { .profession-grid { grid-template-columns:repeat(2,1fr); } .onboarding { padding-inline:12px; }.onboarding-card { padding-inline:18px; } .full .appointment-item { grid-template-columns:45px minmax(0,1fr); }.full .amount-copy { grid-column:2; text-align:left; }.appointment-card-actions { grid-column:1/-1; } .barber-today-appointment { grid-template-columns:43px minmax(0,1fr) auto; } .today-appointment-controls { flex-direction:column-reverse; align-items:flex-end; gap:3px; } .barber-client-metrics { grid-template-columns:1fr; } } @media(min-width:461px) { body { padding:22px 0; } .app-shell { min-height:calc(100vh - 44px); border-radius:28px; } .app-shell:has(> .workspace:not(.hidden),> .student-workspace:not(.hidden)) { height:calc(100vh - 44px); height:calc(100dvh - 44px); min-height:0; } .onboarding { min-height:calc(100vh - 44px); } .workspace,.student-workspace { height:calc(100vh - 44px); height:calc(100dvh - 44px); } .bottom-nav,.student-bottom-nav { border-radius:0 0 28px 28px; } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } } .calendar-panel { background:white; border:1px solid var(--line); border-radius:20px; padding:14px; margin-bottom:16px; } .calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; } .calendar-toolbar h2 { margin:0; text-transform:capitalize; font-size:1rem; text-align:center; } .calendar-toolbar button { background:var(--cream); border:0; border-radius:10px; min-width:38px; height:38px; font-size:1.4rem; } .calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; } #calendar-weekdays span { font-size:.65rem; text-align:center; color:var(--muted); padding-bottom:8px; overflow:hidden; } .calendar-day { position:relative; border:0; border-radius:10px; background:transparent; color:var(--ink); height:39px; font-size:.84rem; } .calendar-day.is-today { box-shadow:inset 0 0 0 1px var(--emerald); } .calendar-day.selected { background:var(--forest-800); color:white; font-weight:800; } .calendar-day i { position:absolute; bottom:4px; left:calc(50% - 2px); height:4px; width:4px; border-radius:50%; background:var(--gold); } .calendar-shortcuts { display:flex; gap:8px; margin-top:12px; } .calendar-shortcuts button { flex:1; border:0; border-radius:9px; padding:9px; color:var(--forest-800); background:#e9f3ef; font-weight:700; } .daily-agenda-panel { margin:0 0 22px; padding:15px; border:1px solid var(--line); border-radius:18px; background:white; } .daily-agenda-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; } .daily-agenda-heading h2 { margin:0; text-transform:capitalize; } .daily-agenda-heading .secondary-button { width:auto; margin:0; } .daily-agenda-filter { display:grid; grid-template-columns:40px 1fr 40px; gap:8px; margin-bottom:13px; } .daily-agenda-filter button { border:0; border-radius:10px; background:#e9f3ef; color:var(--forest-800); font-size:1.35rem; } .daily-agenda-filter input { margin:0; padding:9px 11px; text-align:center; } .daily-agenda-timeline { max-height:480px; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fbfcfb; } .daily-agenda-canvas { position:relative; min-height:220px; margin-left:50px; border-left:1px solid var(--line); } .daily-time-label { position:absolute; right:calc(100% + 8px); width:41px; transform:translateY(4px); color:var(--muted); font-size:.66rem; font-weight:750; text-align:right; } .daily-time-line { position:absolute; left:0; right:0; height:1px; background:#e7ece9; pointer-events:none; } .daily-time-label.half-hour { color:#7c8984; font-weight:600; } .daily-time-line.half-hour { background:#f0f3f1; } .daily-event { position:absolute; left:9px; right:8px; z-index:1; display:flex; align-items:flex-start; gap:8px; overflow:hidden; padding:4px 8px; border:0; border-left:5px solid var(--agenda-accent,#4c85c5); border-radius:9px; background:#f8faf9; color:var(--ink); text-align:left; box-shadow:0 3px 10px #052f2612; line-height:1.15; } .daily-event.is-short { align-items:center; padding-top:2px; padding-bottom:2px; } .daily-event.is-short > img,.daily-event.is-short > span:first-child,.daily-event.is-short small { display:none; } .daily-event.has-overlap { outline:2px solid #c95c55; outline-offset:-2px; } .daily-event-state { font-weight:750; } .daily-event.color-1 { border-left-color:#a46ccc; background:#f2eafb; color:#59366e; }.daily-event.color-2 { border-left-color:#dfad33; background:#fff4d6; color:#735712; }.daily-event.color-3 { border-left-color:#28a889; background:#e4f6f1; color:#155d4d; } .daily-event.is-block { --agenda-accent:#8d6ab5; border-left-color:var(--agenda-accent); background:#f2edf8; color:#563e70; opacity:1; } .daily-event > img,.daily-event > span:first-child { flex:0 0 25px; width:25px; height:25px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:white; font-size:.7rem; font-weight:850; } .daily-event > span:last-child { min-width:0; }.daily-event strong,.daily-event small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.daily-event strong { font-size:.75rem; }.daily-event small { margin-top:2px; font-size:.61rem; opacity:.78; } .daily-agenda-empty { position:absolute; top:65px; left:14px; right:14px; color:var(--muted); text-align:center; font-size:.8rem; } .status-decision-details { display:grid; gap:5px; padding:13px; border-radius:12px; background:var(--cream); margin:12px 0; } .status-decision-details span:empty { display:none; } #status-decision-help { color:var(--muted); line-height:1.45; } .agenda-workflow-actions { display:grid; gap:7px; width:min(100%,320px); margin:0 0 15px auto; } .agenda-workflow-button { display:grid; grid-template-columns:22px minmax(0,1fr) 12px; align-items:center; gap:9px; width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:left; font:inherit; font-size:.78rem; font-weight:750; cursor:pointer; } .agenda-workflow-button:hover,.agenda-workflow-button:focus-visible { border-color:var(--forest-800); } .agenda-workflow-icon { color:var(--forest-800); font-size:1.25rem; line-height:1; text-align:center; } .agenda-workflow-chevron { color:var(--forest-800); font-size:1.25rem; line-height:1; } .work-hours-dialog { width:min(calc(100% - 24px),620px); max-width:100%; max-height:88dvh; overflow:hidden; background:#faf8f2; color:var(--ink); } .work-hours-sheet { display:flex; flex-direction:column; min-width:0; max-height:88dvh; } .work-hours-header { flex:none; padding:17px 19px 12px; border-bottom:1px solid var(--line); background:#fff; } .work-hours-header .dialog-heading { align-items:center; margin:0; } .work-hours-header h2 { margin:0; } .work-hours-handle { display:none; } .work-hours-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; } .work-hours-dialog form { min-width:0; padding:16px 19px 20px; } .work-hours-dialog form > input { max-width:100%; } .work-hours-days-label { margin:14px 0 6px; font-size:.82rem; } .work-hours-footer { flex:none; padding:12px 19px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; } .work-hours-save { width:100%; min-height:46px; margin:0; background:var(--forest-800); color:#fff; } @media(max-width:599px) { .agenda-workflow-actions { width:100%; } .work-hours-dialog { width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:24px 24px 0 0; } .work-hours-sheet { max-height:92dvh; } .work-hours-header { padding:8px 16px 12px; } .work-hours-handle { display:block; width:38px; height:4px; margin:0 auto 10px; border-radius:4px; background:#9ba6a1; } .work-hours-dialog form { padding:13px 16px 22px; } .work-hours-footer { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); } } #selected-day-title { text-transform:capitalize; } #availability-list { display:grid; gap:8px; } .free-slot,.busy-slot { display:flex; flex-direction:column; gap:4px; align-items:flex-start; border-radius:12px; padding:13px; font-size:.85rem; } .free-slot { border:1px dashed #81b59e; background:#eaf6ef; color:#145439; } .busy-slot { border:1px solid #e0cb84; background:#fff4cf; color:#674e16; } .free-slot span,.busy-slot span { font-size:.77rem; } .day-appointments-title { margin-top:24px; } .form-error { color:var(--danger); font-size:.85rem; } /* Shared professional shell; the barber profile only replaces theme tokens. */ .premium-mark { display:block; width:44px; height:44px; margin-right:6px; overflow:hidden; } .premium-mark img { display:block; width:auto; max-width:none; height:44px; } .brand-hierarchy { display:flex; flex-direction:column; line-height:1.05; } .brand-hierarchy strong { font-size:.78rem; letter-spacing:.06em; } .brand-hierarchy small { display:none; margin-top:4px; font-size:.57rem; letter-spacing:.24em; } .header-scissors { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .barber-home-hero,.barber-today-panel,.barber-booking-intro,.barber-booking-preview,.profession-badge { display:none; } .barber-metric-icon { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) { --forest-950:var(--profession-dark); --forest-900:var(--brand-primary); --forest-800:var(--brand-primary); --gold:var(--brand-gold); --cream:var(--brand-cream); --ink:var(--brand-graphite); --profession-accent:var(--brand-gold); background:var(--brand-cream); } #workspace:is([data-profession="barber"],[data-profession="other"]) .app-header { min-height:72px; height:auto; background:linear-gradient(112deg,#041d18,#053d2e 72%,#111a16); border-bottom:1px solid #d4a85370; } #workspace:is([data-profession="barber"],[data-profession="other"]) .premium-mark { overflow:hidden; background:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .premium-mark img { display:block; width:auto; max-width:none; height:44px; margin:0; } #workspace:is([data-profession="barber"],[data-profession="other"]) .brand-hierarchy strong { color:#f8f6ef; } #workspace:is([data-profession="barber"],[data-profession="other"]) .brand-hierarchy small { display:flex; align-items:center; gap:7px; color:var(--brand-gold); text-transform:uppercase; } #workspace:is([data-profession="barber"],[data-profession="other"]) .avatar-button { border-color:#d4a85380; box-shadow:0 0 0 2px #ffffff12; } #workspace:is([data-profession="barber"],[data-profession="other"]):has(#home-screen.active)>.app-header { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) #home-screen { padding-top:0; } #workspace:is([data-profession="barber"],[data-profession="other"]) #home-screen>.welcome-row, #workspace:is([data-profession="barber"],[data-profession="other"]) #home-screen>.my-day-panel { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-hero { display:block; position:relative; overflow:hidden; margin:0 -18px; padding:0 18px 40px; color:#f8f6ef; background-color:#03241d; background-image:linear-gradient(90deg,#031b16fa 0%,#032b22f2 55%,#041c17d4 100%),url('assets/barber-hero.png'); background-position:center,62% center; background-size:cover; background-repeat:no-repeat; } .barber-home-header { display:flex; align-items:center; justify-content:space-between; min-height:75px; gap:12px; } .barber-home-brand { display:flex; align-items:center; min-width:0; gap:7px; } .barber-home-brand-mark { display:block; width:43px; height:43px; overflow:hidden; flex:0 0 43px; } .barber-home-brand-mark img { display:block; width:auto; max-width:none; height:43px; } .barber-home-brand-name { display:flex; flex-direction:column; min-width:0; line-height:1.08; } .barber-home-brand-name strong { color:#fff; font-size:.81rem; letter-spacing:.055em; white-space:nowrap; } .barber-home-brand-name small { display:flex; align-items:center; gap:6px; margin-top:5px; color:#edc773; font-size:.57rem; font-weight:800; letter-spacing:.23em; } .barber-home-brand-name svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .barber-home-brand-name .premium-teacher-icon,.barber-hero-metric .premium-received-icon { display:none; } .barber-home-avatar-button { flex:0 0 37px; } .barber-hero-copy { min-height:140px; padding-top:18px; } .barber-hero-copy>p:first-child { margin:0 0 1px; color:#e7ebe5; font-size:.88rem; } .barber-hero-copy h1 { margin:0; color:#fff; font-size:1.7rem; line-height:1.2; } .barber-hero-copy>p:last-child { max-width:235px; margin:11px 0 0; color:#e5ece7; font-size:.76rem; line-height:1.4; } .barber-hero-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:13px; } .barber-hero-metric { min-width:0; min-height:84px; display:flex; flex-direction:column; justify-content:center; padding:8px 9px; border:1px solid #ffffff14; border-radius:13px; background:#061e1bc9; box-shadow:inset 0 1px #ffffff0d; } .barber-hero-metric-icon { display:block; width:19px; height:19px; color:#edc773; font-size:1.15rem; line-height:1.1; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .barber-hero-metric strong { overflow-wrap:anywhere; margin:5px 0 1px; color:#fff; font-size:1.02rem; line-height:1.15; } #barber-home-received-total { font-size:.91rem; } .barber-hero-metric>span:last-child { color:#d7e2db; font-size:.63rem; line-height:1.18; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta { display:flex; justify-content:space-between; min-height:62px; margin:0; border:0; border-radius:17px; background:linear-gradient(120deg,#f0c967,#d4a853); color:#12241d; box-shadow:0 7px 17px #0003; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:first-child { font-size:1.25rem; line-height:1; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:last-child { font-size:1.3rem; line-height:1; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-today-panel { display:block; position:relative; margin:-20px -3px 24px; padding:17px 14px 15px; border:1px solid #e3e7e1; border-radius:24px; background:#fffefa; box-shadow:0 13px 28px #11281e1c; } .barber-today-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; padding:0 3px 8px; border-bottom:1px solid #e9ede8; } .barber-today-heading h2 { margin:0; font-size:1.03rem; } .barber-today-heading>span { color:#50665a; font-size:.76rem; text-transform:capitalize; } .barber-today-heading>span::before { content:"·"; margin-right:4px; } .barber-today-heading button { margin-left:auto; padding:0; color:#087d56; font-size:.68rem; font-weight:800; white-space:nowrap; } .barber-home-appointments { display:grid; } .barber-timeline-item { display:grid; grid-template-columns:39px 9px 30px minmax(0,1fr) auto 7px; align-items:center; gap:6px; width:100%; min-height:61px; padding:7px 1px; border:0; border-bottom:1px solid #edf0ec; background:transparent; color:#182820; text-align:left; } .barber-timeline-item:last-child { border-bottom:0; } .barber-timeline-time strong,.barber-timeline-time small { display:block; line-height:1.18; } .barber-timeline-time strong { font-size:.67rem; }.barber-timeline-time small { margin-top:3px; color:#68746f; font-size:.62rem; } .barber-timeline-marker { width:7px; height:100%; position:relative; } .barber-timeline-marker::before { content:""; position:absolute; left:2px; top:-30px; bottom:-30px; border-left:1px solid #b9d7c7; } .barber-timeline-item:first-child .barber-timeline-marker::before { top:50%; } .barber-timeline-item:last-child .barber-timeline-marker::before { bottom:50%; } .barber-timeline-marker::after { content:""; position:absolute; left:-1px; top:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:#13956a; } .barber-timeline-item:has(.status-in-progress) .barber-timeline-marker::after { background:#d4a853; } .barber-timeline-avatar,.barber-timeline-avatar img,.barber-timeline-avatar>span { width:30px; height:30px; border-radius:50%; } .barber-timeline-avatar { overflow:hidden; background:#e7eee9; }.barber-timeline-avatar img { display:block; object-fit:cover; }.barber-timeline-avatar>span { display:grid; place-items:center; color:#07503a; font-size:.72rem; font-weight:850; } .barber-timeline-copy { min-width:0; }.barber-timeline-copy strong,.barber-timeline-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.barber-timeline-copy strong { font-size:.7rem; }.barber-timeline-copy small { color:#65746c; font-size:.62rem; } .barber-timeline-status { display:flex; flex-direction:column; align-items:flex-end; min-width:0; max-width:92px; gap:3px; }.barber-timeline-status .status-pill { min-height:0; padding:3px 5px; font-size:.52rem; white-space:nowrap; }.barber-timeline-status .status-scheduled { background:#e7f2ff; color:#236397; }.barber-timeline-status .status-in-progress { background:#fff1d4; color:#795100; }.barber-timeline-status>small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; color:#806000; font-size:.5rem; }.barber-timeline-status>small.payment-paid { color:#0a8055; } .barber-timeline-item>i { color:#78877e; font-size:1rem; font-style:normal; } .barber-view-all { display:block; margin:9px auto 0; font-size:.7rem; } .barber-today-empty { margin:0; padding:14px 5px; color:#68746f; font-size:.72rem; } .barber-free-heading { margin:12px 3px 7px; color:#204637; font-size:.7rem; font-weight:850; } .barber-home-free-slots { display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; } .barber-free-slot { flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid #bed9c9; border-radius:10px; background:#f3faf5; color:#174635; text-align:left; }.barber-free-slot span,.barber-free-slot strong,.barber-free-slot small { display:block; }.barber-free-slot strong { font-size:.67rem; }.barber-free-slot small { color:#6d7d73; font-size:.58rem; }.barber-free-slot b { color:#087d56; font-size:.61rem; } @media (max-width:390px) { .barber-timeline-item { grid-template-columns:35px 7px 28px minmax(0,1fr) auto 6px; gap:4px; }.barber-timeline-status { max-width:78px; }.barber-timeline-status .status-pill { font-size:.48rem; }.barber-today-heading button { font-size:.62rem; } } #workspace:is([data-profession="barber"],[data-profession="other"]) .profession-badge { display:inline-block; margin:0 0 9px; color:#a5762a; font-size:.57rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; } body:is([data-profession="barber"],[data-profession="other"]) #services-dialog .profession-badge { display:inline-block; color:#a5762a; font-size:.57rem; font-weight:900; letter-spacing:.2em; text-transform:uppercase; } #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen>.page-heading { margin:-24px -18px 18px; padding:21px 18px 15px; background:linear-gradient(110deg,#03251c,#092d24); color:#fff; } #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen>.page-heading .eyebrow { color:#e1bb67; } #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen>.page-heading .profession-badge { color:#e1bb67; } #workspace:is([data-profession="barber"],[data-profession="other"]) .calendar-panel { border-color:#decda7; } #workspace:is([data-profession="barber"],[data-profession="other"]) .calendar-day.selected { background:var(--brand-primary); color:white; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-agenda-panel { background:#fffdf9; border-color:#e4d8bc; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event { background:#fff9eb; border-left-color:var(--brand-gold); color:#1c2e27; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event.status-completed,#workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event.status-realized { background:#ebf6ee; border-left-color:#298766; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event.status-cancelled { background:#f2f1ef; border-left-color:#a7aca9; color:#78817c; opacity:.83; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event.is-block { background:#f0e9f8; border-left-color:#8d6ab5; color:#563e70; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event.has-overlap { outline:2px solid #c95c55; outline-offset:-2px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .daily-event-state { font-weight:750; } #workspace:is([data-profession="barber"],[data-profession="other"]) .bottom-nav { background:#071f19; border-color:#d4a85359; } .nav-more { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-finance { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-more { display:flex; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-button { color:#b3c2b9; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-button.active { color:#edc773; } #workspace:is([data-profession="barber"],[data-profession="other"]) .floating-action { border-color:#071f19; background:linear-gradient(145deg,#f6d884,#d4a853 65%,#b57d2c); } /* The premium Home structure is shared; the teacher only changes its visual skin. */ #workspace[data-profession="teacher"]:has(#home-screen.active)>.app-header { display:none; } #workspace[data-profession="teacher"] #home-screen { padding-top:0; } #workspace[data-profession="teacher"] #home-screen>.welcome-row, #workspace[data-profession="teacher"] #home-screen>.my-day-panel { display:none; } #workspace[data-profession="teacher"] .barber-home-hero { display:block; position:relative; overflow:hidden; margin:0 -18px; padding:0 18px 40px; color:#f8f6ef; background-color:#113c43; background-image:linear-gradient(90deg,#082e38f5 0%,#123e46e8 52%,#173b45bd 100%),url('assets/teacher-hero.png'); background-position:center,right center; background-size:cover; background-repeat:no-repeat; } #workspace[data-profession="teacher"] .barber-home-brand-name .premium-barber-icon, #workspace[data-profession="teacher"] .premium-clients-icon { display:none; } #workspace[data-profession="teacher"] .barber-home-brand-name .premium-teacher-icon, #workspace[data-profession="teacher"] .barber-hero-metric .premium-received-icon { display:block; } #workspace[data-profession="teacher"] .barber-home-brand-name small { color:#e8c479; } #workspace[data-profession="teacher"] .barber-hero-metric { background:#0b303ccc; border-color:#bed7de38; } #workspace[data-profession="teacher"] .barber-home-cta { display:flex; justify-content:space-between; min-height:62px; margin:0; border:0; border-radius:17px; background:linear-gradient(120deg,#f0c967,#d4a853); color:#122c31; box-shadow:0 7px 17px #0003; } #workspace[data-profession="teacher"] .barber-home-cta span:first-child { font-size:1.25rem; line-height:1; } #workspace[data-profession="teacher"] .barber-home-cta span:last-child { font-size:1.3rem; line-height:1; } #workspace[data-profession="teacher"] .barber-today-panel { display:block; position:relative; margin:-20px -3px 24px; padding:17px 14px 15px; border:1px solid #dfe7e4; border-radius:24px; background:#fffefa; box-shadow:0 13px 28px #11281e1c; } #workspace[data-profession="teacher"] .barber-timeline-marker::after { background:var(--agenda-accent,#315c73); } #workspace[data-profession="teacher"] .barber-timeline-avatar { box-shadow:0 0 0 2px var(--agenda-accent,#315c73); } #workspace[data-profession="teacher"] .barber-timeline-status>small { padding:3px 5px; border-radius:999px; background:#fff3d5; } #workspace[data-profession="teacher"] .barber-timeline-status>small.payment-paid { background:#e7f5ed; } #workspace[data-profession="teacher"] .barber-free-slot { background:#eef7f7; border-color:#bad1d4; } #workspace[data-profession="teacher"] .barber-today-heading button, #workspace[data-profession="teacher"] .barber-free-slot b { color:#315c73; } #workspace[data-profession="teacher"] .bottom-nav { background:#071f1b; border-color:#d4a85359; } #workspace[data-profession="teacher"] .nav-button { color:#afc0b9; } #workspace[data-profession="teacher"] .nav-button.active { color:#e8c479; } #workspace[data-profession="teacher"] .floating-action { border-color:#071f1b; background:linear-gradient(145deg,#f6d884,#d4a853 65%,#b57d2c); } #appointment-dialog .barber-booking-intro { color:#68746f; font-size:.78rem; } body:is([data-profession="barber"],[data-profession="other"]) #appointment-dialog .barber-booking-intro { display:block; } body:is([data-profession="barber"],[data-profession="other"]) #appointment-dialog .barber-booking-preview { display:flex; } body:is([data-profession="barber"],[data-profession="other"]) #appointment-dialog,body:is([data-profession="barber"],[data-profession="other"]) #services-dialog,body:is([data-profession="barber"],[data-profession="other"]) #service-picker-dialog { --gold:var(--brand-gold); --forest-950:var(--brand-primary); background:#f8f6ef; } body:is([data-profession="barber"],[data-profession="other"]) #appointment-dialog .dialog-heading { padding-bottom:12px; border-bottom:1px solid #e6dcc6; } .barber-booking-preview { align-items:center; gap:10px; min-height:60px; padding:8px 11px; margin-bottom:8px; border:1px solid #e5ddc9; border-radius:13px; background:white; cursor:pointer; } .barber-booking-preview img,.barber-preview-avatar,.barber-preview-icon { flex:0 0 38px; width:38px; height:38px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#edf2ed; color:#053d2e; font-weight:900; } .barber-preview-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .barber-booking-preview>span:nth-child(2) { min-width:0; flex:1; } .barber-booking-preview strong,.barber-booking-preview small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .barber-booking-preview strong { font-size:.76rem; }.barber-booking-preview small { color:#68746f; font-size:.65rem; } .barber-booking-preview>b { color:#98722f; } #appointment-confirmation-dialog { width:min(calc(100% - 32px),430px); padding:21px; border:0; border-radius:22px; color:#15241f; background:#f8f6ef; box-shadow:0 18px 60px #0a251e55; } .appointment-confirmation-summary { display:grid; gap:8px; margin:12px 0; } .appointment-confirmation-summary>div { padding:10px 12px; border:1px solid #e8e4d7; border-radius:12px; background:white; } .appointment-confirmation-summary span,.appointment-confirmation-summary strong,.appointment-confirmation-summary small { display:block; } .appointment-confirmation-summary span { color:#68746f; font-size:.62rem; }.appointment-confirmation-summary strong { font-size:.8rem; }.appointment-confirmation-summary small { color:#68746f; font-size:.65rem; } .appointment-confirmation-warning { padding:11px; border-radius:12px; background:#fff0ed; color:#a43b32; font-size:.72rem; font-weight:700; } .appointment-confirmation-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:9px; }.appointment-confirmation-actions button { margin:0; } @media(max-width:390px){#workspace:is([data-profession="barber"],[data-profession="other"]) .home-day-list-item { grid-template-columns:61px 29px minmax(0,1fr) 10px; }#workspace:is([data-profession="barber"],[data-profession="other"]) .home-day-item-status { grid-column:3/-1; flex-direction:row; }.appointment-confirmation-actions { grid-template-columns:1fr; }} /* ===== Professor premium home (v2) — visual skin only; ids, events and data untouched. ===== */ .premium-brand-motto,.premium-wallet-icon,.home-month-details,.nav-home-icon,.summary-result-icon { display:none; } #workspace[data-profession="teacher"] { --teacher-ink:#0f2a24; --teacher-green:#053d2e; --teacher-emerald:#0a8a5c; --teacher-gold:#d4a853; } /* Hero */ #workspace[data-profession="teacher"] .barber-home-hero { padding:0 20px 50px; border-radius:0 0 30px 30px; background-color:#062e28; background-image:linear-gradient(90deg,#052a24f7 0%,#062e28e0 38%,#08332c8c 64%,#0a352e33 100%),linear-gradient(180deg,#052a2480 0%,#052a2400 28%,#052a2400 58%,#052a24e6 100%),url('assets/teacher-hero-scene.jpg'); background-position:center,center,right top; background-size:cover,cover,auto 100%; } #workspace[data-profession="teacher"] .barber-home-header { align-items:flex-start; min-height:0; padding-top:18px; } #workspace[data-profession="teacher"] .barber-home-brand { align-items:center; gap:10px; } #workspace[data-profession="teacher"] .barber-home-brand-mark { width:52px; height:52px; flex:0 0 52px; } #workspace[data-profession="teacher"] .barber-home-brand-mark img { height:52px; } #workspace[data-profession="teacher"] .barber-home-brand-name strong { font-size:1.06rem; letter-spacing:.04em; } #workspace[data-profession="teacher"] .barber-home-brand-name small { margin-top:5px; color:#e3bf6e; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; } #workspace[data-profession="teacher"] .barber-home-brand-name svg { width:14px; height:14px; } #workspace[data-profession="teacher"] .premium-brand-motto { display:block; margin-top:8px; padding-top:7px; border-top:1px solid #f8f6ef40; color:#dfe8e3; font-size:.5rem; font-weight:600; letter-spacing:.3em; white-space:nowrap; } #workspace[data-profession="teacher"] .barber-home-avatar-button { flex:0 0 46px; width:46px; height:46px; font-size:1.05rem; } #workspace[data-profession="teacher"] .barber-hero-copy { min-height:0; padding:30px 0 22px; } #workspace[data-profession="teacher"] .barber-hero-copy>p:first-child { font-size:1rem; color:#e9efeb; } #workspace[data-profession="teacher"] .barber-hero-copy h1 { font-size:2.15rem; letter-spacing:-.02em; line-height:1.15; } #workspace[data-profession="teacher"] .barber-hero-copy>p:last-child { max-width:250px; margin-top:12px; color:#e8eeea; font-size:.9rem; line-height:1.42; } #workspace[data-profession="teacher"] .barber-hero-metrics { gap:9px; margin-bottom:16px; } #workspace[data-profession="teacher"] .barber-hero-metric { min-height:100px; justify-content:flex-start; padding:13px 12px 11px; border:1px solid #ffffff2b; border-radius:16px; background:#062a24b8; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 1px #ffffff12; } #workspace[data-profession="teacher"] .barber-hero-metric-icon { width:22px; height:22px; font-size:1.3rem; color:#e6c06a; } #workspace[data-profession="teacher"] .barber-hero-metric strong,#workspace[data-profession="teacher"] #barber-home-received-total { margin:auto 0 2px; font-size:1.15rem; letter-spacing:-.01em; overflow-wrap:normal; white-space:nowrap; } #workspace[data-profession="teacher"] .barber-hero-metric>span:last-child { color:#e1e9e4; font-size:.74rem; } #workspace[data-profession="teacher"] .barber-hero-metric .premium-received-icon { display:none; } #workspace[data-profession="teacher"] .barber-hero-metric .premium-wallet-icon { display:block; } #workspace[data-profession="teacher"] .barber-home-cta { min-height:58px; padding:0 22px; border-radius:16px; background:linear-gradient(100deg,#f3d27d 0%,#e2b95f 45%,#cf9f45 100%); color:#0f2a24; font-size:1.12rem; font-weight:800; box-shadow:0 10px 22px #00000038,inset 0 1px #fff6; } #workspace[data-profession="teacher"] .barber-home-cta span:first-child { font-size:1.5rem; font-weight:500; } #workspace[data-profession="teacher"] .barber-home-cta span:last-child { font-size:0; } #workspace[data-profession="teacher"] .barber-home-cta span:last-child::after { content:"→"; font-size:1.4rem; font-weight:600; } /* Today card + timeline */ #workspace[data-profession="teacher"] .barber-today-panel { margin:-28px 0 26px; padding:18px 16px 16px; border:1px solid #e6ebe7; border-radius:26px; background:#fffefb; box-shadow:0 16px 34px #0f2a2414; } #workspace[data-profession="teacher"] .barber-today-heading { align-items:baseline; padding:0 2px 12px; border-bottom-color:#edf0ec; } #workspace[data-profession="teacher"] .barber-today-heading h2 { font-size:1.3rem; letter-spacing:-.01em; } #workspace[data-profession="teacher"] .barber-today-heading>span { color:#3c4d45; font-size:.9rem; } #workspace[data-profession="teacher"] .barber-today-heading button { color:var(--teacher-emerald); font-size:.86rem; } #workspace[data-profession="teacher"] .barber-timeline-item { grid-template-columns:40px 12px 36px minmax(0,1fr) auto 8px; gap:7px; min-height:76px; padding:10px 0; border-bottom-color:#eef1ed; } #workspace[data-profession="teacher"] .barber-timeline-time strong { color:var(--teacher-ink); font-size:.86rem; } #workspace[data-profession="teacher"] .barber-timeline-time small { font-size:.8rem; } #workspace[data-profession="teacher"] .barber-timeline-marker { width:12px; } #workspace[data-profession="teacher"] .barber-timeline-marker::before { left:5px; top:-38px; bottom:-38px; border-left-color:#d7e1dc; } #workspace[data-profession="teacher"] .barber-timeline-item:first-child .barber-timeline-marker::before { top:50%; } #workspace[data-profession="teacher"] .barber-timeline-item:last-child .barber-timeline-marker::before { bottom:50%; } #workspace[data-profession="teacher"] .barber-timeline-item:only-child .barber-timeline-marker::before { display:none; } #workspace[data-profession="teacher"] .barber-timeline-marker::after { left:0; top:calc(50% - 5.5px); width:11px; height:11px; box-shadow:0 0 0 3px #fffefb; } #workspace[data-profession="teacher"] .barber-timeline-avatar,#workspace[data-profession="teacher"] .barber-timeline-avatar img,#workspace[data-profession="teacher"] .barber-timeline-avatar>span { width:36px; height:36px; } #workspace[data-profession="teacher"] .barber-timeline-avatar { box-shadow:none; background:color-mix(in srgb,var(--agenda-accent,#315c73) 15%,#fff); } #workspace[data-profession="teacher"] .barber-timeline-avatar>span { color:var(--agenda-accent,#315c73); font-size:.95rem; font-weight:800; } #workspace[data-profession="teacher"] .barber-timeline-copy strong,#workspace[data-profession="teacher"] .barber-timeline-copy small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; line-height:1.22; } #workspace[data-profession="teacher"] .barber-timeline-copy strong { color:var(--teacher-ink); font-size:.88rem; } #workspace[data-profession="teacher"] .barber-timeline-copy small { margin-top:2px; font-size:.76rem; } #workspace[data-profession="teacher"] .barber-timeline-status { max-width:124px; gap:5px; } #workspace[data-profession="teacher"] .barber-timeline-status .status-pill { max-width:100%; overflow:hidden; text-overflow:ellipsis; padding:4px 9px; font-size:.64rem; font-weight:700; } #workspace[data-profession="teacher"] .barber-timeline-status .status-completed { background:#e3f4ea; color:#0a7a52; } #workspace[data-profession="teacher"] .barber-timeline-status .status-in-progress { background:#fdebd0; color:#9a5a00; } #workspace[data-profession="teacher"] .barber-timeline-status .status-scheduled { background:#e5efff; color:#2a62b8; } #workspace[data-profession="teacher"] .barber-timeline-status>small { padding:4px 8px; font-size:.6rem; font-weight:600; color:#8a6200; background:#fdf3dc; } #workspace[data-profession="teacher"] .barber-timeline-status>small.payment-paid { color:#0a7a52; background:#e3f4ea; } #workspace[data-profession="teacher"] .barber-timeline-item>i { color:#6f7d76; font-size:1.25rem; } #workspace[data-profession="teacher"] .barber-free-heading { margin:16px 2px 10px; color:var(--teacher-ink); font-size:.92rem; } #workspace[data-profession="teacher"] .barber-home-free-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; overflow:visible; } #workspace[data-profession="teacher"] .barber-free-slot { flex-direction:column; align-items:stretch; gap:8px; padding:10px; border:1px solid #e3e8e4; border-radius:14px; background:#fcfdfb; color:var(--teacher-ink); } #workspace[data-profession="teacher"] .barber-free-slot strong { font-size:.78rem; white-space:nowrap; } #workspace[data-profession="teacher"] .barber-free-slot small { margin-top:2px; font-size:.72rem; } #workspace[data-profession="teacher"] .barber-free-slot b { padding:5px 8px; text-align:center; border:1px solid #b9dcc8; border-radius:999px; background:#eef8f2; color:var(--teacher-emerald); font-size:.74rem; white-space:nowrap; } #workspace[data-profession="teacher"] .barber-today-empty { font-size:.82rem; } /* Monthly summary */ #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-heading { align-items:flex-end; margin:6px 2px 14px; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-heading .eyebrow { color:#2f8a5c; letter-spacing:.24em; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-heading h2 { font-size:1.45rem; letter-spacing:-.01em; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-details { display:inline-block; padding:0 0 3px; color:var(--teacher-emerald); font-size:.86rem; font-weight:800; white-space:nowrap; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .metrics-grid { display:contents; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:104px; margin:0; padding:14px 14px 13px; border:1px solid #ebe7dd; border-radius:18px; background:#fff; color:var(--teacher-ink); box-shadow:0 4px 14px #0f2a240a; cursor:pointer; overflow:hidden; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card:focus-visible { outline:2px solid var(--teacher-gold); outline-offset:2px; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card .summary-card-icon { display:none !important; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card p { order:3; display:block; margin:2px 0 0; color:#5f6d66; font-size:.8rem; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card strong { order:2; display:block; margin:auto 0 0; padding-top:10px; color:var(--teacher-ink); font-size:1.32rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .metric-dot { order:1; width:14px; height:14px; margin:0; border:3.5px solid currentColor; background:#fff; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .metric-dot.expected { color:#6e7fdc; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .metric-dot.received { color:#14955f; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .metric-dot.expense { color:#d6535c; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .metric-dot.pending { color:#d4a853; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .balance-card { order:1; border-color:#d3e8dc; background:linear-gradient(160deg,#eef7f1,#e2f1e8); } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .balance-card::after { display:none; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .balance-card strong { color:var(--teacher-green); } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .balance-card p { color:#3e5c4f; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary #net-caption { display:none; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .summary-result-icon { order:1; display:block; width:20px; height:20px; fill:none; stroke:var(--teacher-green); stroke-width:3; stroke-linecap:round; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="expected"] { order:2; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="received"] { order:3; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="expenses"] { order:4; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="pending"] { order:5; grid-column:1/-1; flex-direction:row; align-items:center; gap:10px; min-height:0; padding:12px 14px; background:#fffdf8; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="pending"] p { order:2; flex:1; margin:0; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="pending"] strong { order:3; margin:0; padding:0; font-size:.98rem; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary [data-summary="pending"] .summary-card-icon { order:4; position:static; display:grid !important; width:24px; height:24px; font-size:1.1rem !important; } /* Bottom navigation */ #workspace[data-profession="teacher"] .bottom-nav { border-top:0; border-radius:24px 24px 0 0; background:#062520; box-shadow:0 -8px 24px #0f2a2426; } #workspace[data-profession="teacher"] .nav-button { color:#c9d6cf; } #workspace[data-profession="teacher"] .nav-button.active { color:#e6c06a; font-weight:700; } #workspace[data-profession="teacher"] .nav-home-glyph { display:none; } #workspace[data-profession="teacher"] .nav-home-icon { display:grid; } #workspace[data-profession="teacher"] .nav-button.active .nav-home-icon svg { fill:#e6c06a33; } #workspace[data-profession="teacher"] .floating-action { border:5px solid #062520; background:linear-gradient(145deg,#f6d884,#d4a853 62%,#b9842f); color:#0f2a24; box-shadow:0 8px 20px #0f2a2440; } @media (max-width:360px) { #workspace[data-profession="teacher"] .barber-home-hero { padding:0 16px 46px; } #workspace[data-profession="teacher"] .barber-home-brand-mark { width:42px; height:42px; flex-basis:42px; } #workspace[data-profession="teacher"] .barber-home-brand-mark img { height:42px; } #workspace[data-profession="teacher"] .barber-home-brand-name strong { font-size:.9rem; } #workspace[data-profession="teacher"] .premium-brand-motto { letter-spacing:.2em; } #workspace[data-profession="teacher"] .barber-hero-copy h1 { font-size:1.8rem; } #workspace[data-profession="teacher"] .barber-hero-metric { padding:11px 9px 9px; } #workspace[data-profession="teacher"] .barber-hero-metric strong,#workspace[data-profession="teacher"] #barber-home-received-total { font-size:.98rem; } #workspace[data-profession="teacher"] .barber-timeline-item { grid-template-columns:38px 12px 34px minmax(0,1fr) 8px; row-gap:6px; column-gap:6px; } #workspace[data-profession="teacher"] .barber-timeline-time,#workspace[data-profession="teacher"] .barber-timeline-marker,#workspace[data-profession="teacher"] .barber-timeline-avatar { grid-row:1 / span 2; } #workspace[data-profession="teacher"] .barber-timeline-copy { grid-column:4; grid-row:1; } #workspace[data-profession="teacher"] .barber-timeline-status { grid-column:4; grid-row:2; flex-direction:row; flex-wrap:wrap; align-items:center; max-width:none; } #workspace[data-profession="teacher"] .barber-timeline-item>i { grid-column:5; grid-row:1 / span 2; } #workspace[data-profession="teacher"] .barber-timeline-avatar,#workspace[data-profession="teacher"] .barber-timeline-avatar img,#workspace[data-profession="teacher"] .barber-timeline-avatar>span { width:34px; height:34px; } #workspace[data-profession="teacher"] .barber-timeline-status .status-pill,#workspace[data-profession="teacher"] .barber-timeline-status>small { padding:3px 7px; font-size:.58rem; } } /* ===== Searchable contact picker (booking form, every profession) ===== */ .contact-picker-label { display:block; margin:4px 0 8px; color:#173b30; font-size:.86rem; font-weight:800; } .contact-picker { position:relative; margin-bottom:6px; scroll-margin-top:12px; } .contact-picker-trigger { display:flex; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 14px 10px 10px; border:1px solid #d9e2dd; border-radius:16px; background:#fff; color:#0f2a24; text-align:left; box-shadow:0 2px 8px #0f2a2408; cursor:pointer; transition:border-color .15s, box-shadow .15s; } .contact-picker-trigger:hover { border-color:#a9c8b9; } .contact-picker-trigger:focus-visible { outline:none; border-color:#0a8a5c; box-shadow:0 0 0 3px #0a8a5c2e; } .contact-picker.is-open .contact-picker-trigger { border-color:#0a8a5c; border-bottom-left-radius:6px; border-bottom-right-radius:6px; box-shadow:0 0 0 3px #0a8a5c1f; } .contact-picker-avatar { flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:color-mix(in srgb,var(--picker-accent,#0a5d4a) 13%,#fff); color:var(--picker-accent,#0a5d4a); font-size:.95rem; font-weight:800; } .contact-picker-avatar img { width:100%; height:100%; object-fit:cover; } .contact-picker-avatar svg,.contact-picker-search svg { width:20px; height:20px; fill:none; stroke:#0b5b4a; stroke-width:2; stroke-linecap:round; } .contact-picker-value { flex:1; min-width:0; } .contact-picker-value strong,.contact-picker-value small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .contact-picker-value strong { color:#6a7872; font-size:.92rem; font-weight:600; } .contact-picker-trigger.has-value .contact-picker-value strong { color:#0f2a24; font-weight:750; } .contact-picker-value small { margin-top:2px; color:#6a7872; font-size:.76rem; } .contact-picker-chevron { flex:0 0 20px; width:20px; height:20px; fill:none; stroke:#5b6c65; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; } .contact-picker.is-open .contact-picker-chevron { transform:rotate(180deg); } .contact-picker-panel { margin-top:6px; padding:8px; border:1px solid #d9e2dd; border-radius:16px; background:#fffefb; box-shadow:0 14px 30px #0f2a241f; } .contact-picker-search { display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #dfe6e1; border-radius:12px; background:#fff; } .contact-picker-search:focus-within { border-color:#0a8a5c; box-shadow:0 0 0 3px #0a8a5c1f; } .contact-picker-search input { flex:1; min-width:0; height:46px; margin:0; padding:0; border:0; background:transparent; font-size:16px; box-shadow:none; outline:none; } .contact-picker-search input::-webkit-search-cancel-button { cursor:pointer; } .contact-picker-list { max-height:min(280px,38vh); overflow-y:auto; overscroll-behavior:contain; margin:6px 0 0; padding:0; list-style:none; } .contact-picker-option { display:flex; align-items:center; gap:11px; min-height:54px; padding:7px 10px; border-radius:12px; cursor:pointer; } .contact-picker-option .contact-picker-avatar { flex-basis:36px; width:36px; height:36px; font-size:.86rem; } .contact-picker-option:hover,.contact-picker-option.is-active { background:#f1f6f3; } .contact-picker-option.is-active { box-shadow:inset 0 0 0 2px #0a8a5c55; } .contact-picker-option.is-selected { background:#e6f4ec; } .contact-picker-option-copy { flex:1; min-width:0; } .contact-picker-option-copy strong,.contact-picker-option-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .contact-picker-option-copy strong { color:#0f2a24; font-size:.9rem; } .contact-picker-option-copy small { margin-top:1px; color:#6a7872; font-size:.76rem; } .contact-picker-check { flex:0 0 20px; width:20px; height:20px; fill:none; stroke:#0a8a5c; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } .contact-picker-empty { margin:10px 6px 4px; color:#6a7872; font-size:.82rem; text-align:center; } .contact-picker-create { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; margin:8px 0 0; padding:0 14px; border:1px dashed #9cc9b1; border-radius:12px; background:#f2f9f5; color:#08744e; font-size:.9rem; font-weight:800; cursor:pointer; } .contact-picker-create:hover { background:#e7f4ec; } .contact-picker-create:focus-visible,.contact-picker-option:focus-visible { outline:2px solid #0a8a5c; outline-offset:2px; } .contact-picker-create>span:first-child { font-size:1.1rem; line-height:1; } .contact-picker-error { min-height:0; margin:0 0 10px; color:#b3403a; font-size:.8rem; font-weight:700; } .contact-picker-error:empty { margin:0; } .contact-picker-legacy[hidden] { display:none !important; } body:is([data-profession="barber"],[data-profession="other"]) .contact-picker-trigger,body:is([data-profession="barber"],[data-profession="other"]) .contact-picker-panel { border-color:#e5ddc9; } body:is([data-profession="barber"],[data-profession="other"]) .contact-picker-chevron { stroke:#98722f; } .contact-picker-trigger:not(.has-value) .contact-picker-value strong { white-space:normal; line-height:1.25; } .contact-picker-search input::placeholder { font-size:.84rem; color:#7d8a84; } /* Monthly summary: shared by Professor and Barbeiro — centred content, values always fit inside the card. */ #workspace:is([data-profession="barber"],[data-profession="other"]) { --teacher-ink:#0f2a24; --teacher-green:#053d2e; --teacher-emerald:#0a8a5c; --teacher-gold:#d4a853; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card:not([data-summary="pending"]) { container-type:inline-size; align-items:center; justify-content:center; gap:6px; min-height:112px; padding:14px 10px; text-align:center; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card:not([data-summary="pending"]) strong { margin:0; padding:4px 0 0; max-width:100%; font-size:min(1.32rem,15cqi); font-variant-numeric:tabular-nums; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card:not([data-summary="pending"]) p { margin:0; max-width:100%; font-size:.78rem; line-height:1.2; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-card .metric-dot, #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .summary-result-icon { flex:0 0 auto; } #workspace:is([data-profession="teacher"],:is([data-profession="barber"],[data-profession="other"])) .home-month-summary .balance-card .summary-result-icon { width:20px; height:16px; } /* ===== Barbeiro premium: navy + gold + barbershop photo. Scoped to the Barber profile only. ===== */ .brand-ant-mark { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]),body:is([data-profession="barber"],[data-profession="other"]) { --brand-primary:#142d3b; --profession-dark:#0b202b; --brand-gold:#d8aa50; --brand-cream:#f8f7f3; --barber-navy:#142d3b; --barber-navy-deep:#0b202b; --barber-gold:#d8aa50; --barber-gold-light:#f0d184; --barber-red:#a64242; --barber-ink:#172924; --barber-muted:#65716d; --teacher-ink:#172924; --teacher-emerald:#142d3b; } #workspace:is([data-profession="barber"],[data-profession="other"]) .app-header { background:linear-gradient(112deg,#0b202b,#142d3b 72%,#0e1c24); border-bottom-color:#d8aa5566; } /* Hero with the barber-pole photo */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-hero { padding:0 20px 48px; border-radius:0 0 30px 30px; color:var(--barber-ink); background-color:#eef1f0; background-image:linear-gradient(90deg,#f6f7f6f2 0%,#f6f7f6d9 34%,#f6f7f633 56%,#f6f7f600 66%),linear-gradient(180deg,#f6f7f600 62%,#f3f4f2cc 100%),url('assets/barber-hero-pole.jpg'); background-position:center,center,right -24px top; background-size:cover,cover,auto 100%; background-repeat:no-repeat; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-header { align-items:flex-start; min-height:0; padding-top:18px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand { align-items:center; gap:10px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-mark { width:62px; height:58px; flex:0 0 62px; overflow:visible; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-mark img:not(.brand-ant-mark) { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .brand-ant-mark { display:block; width:100%; height:100%; object-fit:contain; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-name strong { display:flex; flex-direction:column; color:var(--brand-primary); font-size:1.42rem; font-weight:900; letter-spacing:.01em; line-height:.98; } #workspace:is([data-profession="barber"],[data-profession="other"]) .brand-word-fourmi { color:#0b4a37; } #workspace:is([data-profession="barber"],[data-profession="other"]) .brand-word-think { color:#c8952f; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-name small { margin-top:7px; padding-top:6px; border-top:1px solid #d8aa5599; color:#a77a22; font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-name small svg { width:14px; height:14px; color:var(--barber-gold); } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-avatar-button { flex:0 0 46px; width:46px; height:46px; border:0; background:linear-gradient(145deg,var(--barber-gold-light),var(--barber-gold)); color:var(--barber-navy-deep); font-size:1.05rem; box-shadow:0 4px 12px #0b202b26; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy { min-height:0; padding:30px 0 22px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy>p:first-child { color:#2b3a37; font-size:1rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy h1 { color:var(--barber-navy-deep); font-size:2.15rem; letter-spacing:-.02em; line-height:1.15; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy>p:last-child { max-width:240px; margin-top:12px; color:#33433f; font-size:.9rem; line-height:1.42; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metrics { gap:9px; margin-bottom:16px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metric { min-height:100px; justify-content:flex-start; padding:13px 12px 11px; border:1px solid #ffffff1f; border-radius:16px; background:#142d3bf2; box-shadow:0 8px 18px #0b202b29,inset 0 1px #ffffff14; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metric-icon { width:22px; height:22px; font-size:1.3rem; color:var(--barber-gold); } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metric strong,#workspace:is([data-profession="barber"],[data-profession="other"]) #barber-home-received-total { margin:auto 0 2px; color:#fff; font-size:1.15rem; white-space:nowrap; overflow-wrap:normal; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metric>span:last-child { color:#d9e1e5; font-size:.72rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta { min-height:58px; padding:0 22px; border-radius:16px; background:var(--barber-navy); color:#fff; font-size:1.08rem; font-weight:800; box-shadow:0 6px 14px #0b202b2e; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:first-child { color:var(--barber-gold); font-size:1.5rem; font-weight:500; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:last-child { font-size:0; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:last-child::after { content:"→"; color:var(--barber-gold); font-size:1.4rem; font-weight:600; } /* Today card + timeline (status colours keep their meaning) */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-today-panel { margin:-28px 0 26px; padding:18px 16px 16px; border:1px solid #e6e9e8; border-radius:26px; background:#fff; box-shadow:0 16px 34px #0b202b14; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-today-heading h2 { font-size:1.3rem; color:var(--barber-ink); } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-today-heading>span { color:#45524e; font-size:.9rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-today-heading button { color:var(--barber-navy); font-size:.86rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-item { grid-template-columns:40px 12px 36px minmax(0,1fr) auto 8px; gap:7px; min-height:72px; padding:10px 0; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-time strong { color:var(--barber-ink); font-size:.86rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-time small { font-size:.8rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-marker { width:12px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-marker::before { left:5px; border-left-color:#c9d3d8; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-marker::after { left:0; top:calc(50% - 5.5px); width:11px; height:11px; background:var(--barber-navy); box-shadow:0 0 0 3px #fff; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-item:has(.status-completed) .barber-timeline-marker::after { background:#14955f; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-item:has(.status-in-progress) .barber-timeline-marker::after { background:#d39a2c; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-avatar,#workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-avatar img,#workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-avatar>span { width:36px; height:36px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-avatar { background:#e8eef2; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-avatar>span { color:var(--barber-navy); font-size:.92rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-copy strong { color:var(--barber-ink); font-size:.88rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-copy small { margin-top:2px; font-size:.76rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-status { max-width:124px; gap:5px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-status .status-pill { padding:4px 9px; font-size:.64rem; font-weight:700; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-status .status-completed { background:#e3f4ea; color:#0a7a52; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-status>small { font-size:.62rem; font-weight:600; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-free-heading { margin:16px 2px 10px; color:var(--barber-ink); font-size:.92rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-free-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; overflow:visible; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-free-slot { flex-direction:column; align-items:stretch; gap:8px; padding:10px; border:1px solid #e3e7e9; border-radius:14px; background:#fbfcfc; color:var(--barber-ink); } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-free-slot strong { font-size:.78rem; white-space:nowrap; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-free-slot small { margin-top:2px; font-size:.72rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-free-slot b { padding:5px 8px; border:1px solid #c6d3db; border-radius:999px; background:#eef3f6; color:var(--barber-navy); font-size:.74rem; text-align:center; white-space:nowrap; } /* Monthly summary: deep navy main card */ #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-heading .eyebrow { color:#a77a22; } #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-details { color:var(--barber-navy); } #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-summary .balance-card { border-color:#0b202b; background:linear-gradient(160deg,#142d3b,#0b202b); box-shadow:0 8px 20px #0b202b33; } #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-summary .balance-card strong { color:#fff; } #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-summary .balance-card p { color:#d9e1e5; } #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-summary .summary-result-icon { stroke:var(--barber-gold); } #workspace:is([data-profession="barber"],[data-profession="other"]) .home-month-summary .summary-card:not(.balance-card) { border-color:#e6e9e8; } /* Bottom navigation */ #workspace:is([data-profession="barber"],[data-profession="other"]) .bottom-nav { border-top:0; border-radius:24px 24px 0 0; background:var(--barber-navy-deep); box-shadow:0 -8px 24px #0b202b26; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-button { color:#c9d2d7; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-button.active { color:var(--barber-gold); font-weight:700; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-home-glyph { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-home-icon { display:grid; } #workspace:is([data-profession="barber"],[data-profession="other"]) .floating-action { border:5px solid var(--barber-navy-deep); background:linear-gradient(145deg,var(--barber-gold-light),var(--barber-gold) 62%,#b88a35); color:var(--barber-navy-deep); box-shadow:0 8px 20px #0b202b40; } /* Agenda header follows the navy palette */ #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen>.page-heading { background:linear-gradient(110deg,#0b202b,#142d3b); } @media (max-width:360px) { #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-hero { padding:0 16px 46px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-mark { width:50px; height:46px; flex-basis:50px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-name strong { font-size:1.18rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy h1 { font-size:1.8rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metric { padding:11px 9px 9px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metric strong,#workspace:is([data-profession="barber"],[data-profession="other"]) #barber-home-received-total { font-size:.98rem; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-item { grid-template-columns:38px 12px 34px minmax(0,1fr) 8px; row-gap:6px; column-gap:6px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-time,#workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-marker,#workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-avatar { grid-row:1 / span 2; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-copy { grid-column:4; grid-row:1; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-status { grid-column:4; grid-row:2; flex-direction:row; flex-wrap:wrap; align-items:center; max-width:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-item>i { grid-column:5; grid-row:1 / span 2; } } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-copy strong,#workspace:is([data-profession="barber"],[data-profession="other"]) .barber-timeline-copy small { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:anywhere; line-height:1.22; } /* ===== Single management panel + reschedule (Professor petrol / Barbeiro navy) ===== */ body { --manage-accent:#0a5d4a; --manage-accent-soft:#e8f3ee; --manage-gold:#d4a853; --manage-ink:#13261f; --manage-muted:#65716d; } body:is([data-profession="barber"],[data-profession="other"]) { --manage-accent:#142d3b; --manage-accent-soft:#e8eef2; --manage-gold:#d8aa50; --manage-ink:#172924; } #appointment-actions-dialog,#reschedule-dialog { background:#fffefb; } .appointment-manage-shell { display:grid; gap:14px; } .manage-heading { padding-bottom:4px; } .manage-heading .eyebrow { color:var(--manage-accent); letter-spacing:.2em; } .manage-heading h2 { color:var(--manage-ink); font-size:1.45rem; text-transform:none; overflow-wrap:anywhere; } .manage-summary { display:grid; gap:3px; padding:12px 14px; border-left:3px solid var(--manage-gold); border-radius:12px; background:#f7f6f1; color:var(--manage-muted); font-size:.86rem; } .manage-summary strong { color:var(--manage-ink); font-size:.95rem; } .manage-summary .manage-date { text-transform:capitalize; } .manage-section { display:grid; gap:9px; padding:13px 14px; border:1px solid #e7e8e3; border-radius:16px; background:#fff; } .manage-section-title { margin:0; color:var(--manage-muted); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .manage-status-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:4px; border-radius:13px; background:#f1f2ee; } .manage-status-options button { min-height:42px; padding:6px 4px; border:0; border-radius:10px; background:transparent; color:#4c5a55; font-size:.78rem; font-weight:700; line-height:1.15; cursor:pointer; } .manage-status-options button:hover { background:#fff; } .manage-status-options button.active { background:#fff; color:var(--manage-accent); box-shadow:0 1px 4px #13261f24,inset 0 0 0 1.5px var(--manage-accent); } .manage-status-options button[data-status-set="completed"].active { color:#0a7a52; box-shadow:0 1px 4px #13261f24,inset 0 0 0 1.5px #0a7a52; } .manage-status-options button[data-status-set="noShow"].active { color:#a64242; box-shadow:0 1px 4px #13261f24,inset 0 0 0 1.5px #a64242; } .manage-status-options button:focus-visible,.manage-primary:focus-visible,.manage-secondary-actions button:focus-visible,.manage-cancel:focus-visible,.manage-pay-button:focus-visible,.manage-view-payment:focus-visible { outline:2px solid var(--manage-gold); outline-offset:2px; } .manage-status-hint { margin:0; color:var(--manage-muted); font-size:.78rem; } .manage-status-hint:empty { display:none; } .manage-cancelled-note { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:#f6eded; color:#7d3434; font-size:.84rem; font-weight:600; } .manage-cancelled-note .secondary-button { width:auto; min-height:38px; margin:0; padding:0 12px; font-size:.8rem; } .manage-payment-row { display:flex; align-items:center; justify-content:space-between; gap:10px; } .manage-payment-row strong { display:block; font-size:.98rem; } .manage-payment-row strong.is-pending { color:#8a6200; } .manage-payment-row strong.is-partial { color:#8a6200; } .manage-payment-row strong.is-paid { color:#0a7a52; } .manage-payment-row small { display:block; margin-top:2px; color:var(--manage-muted); font-size:.76rem; } .manage-payment-row small:empty { display:none; } .manage-pay-button,.manage-view-payment { flex:0 0 auto; min-height:40px; padding:0 14px; border:1px solid var(--manage-accent); border-radius:999px; background:var(--manage-accent); color:#fff; font-size:.8rem; font-weight:800; white-space:nowrap; cursor:pointer; } .manage-view-payment { border-color:#d5dbd8; background:#fff; color:var(--manage-accent); } .manage-payment-row .manage-pay-button + .manage-view-payment:not(.hidden) { margin-left:-4px; } .manage-payment-list { display:grid; gap:6px; padding-top:4px; border-top:1px dashed #e2e4df; font-size:.82rem; } .manage-payment-list>div { display:flex; justify-content:space-between; gap:10px; color:var(--manage-muted); } .manage-payment-list strong { color:var(--manage-ink); } .manage-payment-list .text-button { justify-self:start; padding:0; color:#a64242; font-size:.78rem; } .manage-primary-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .manage-primary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 10px; border:0; border-radius:14px; background:var(--manage-accent); color:#fff; font-size:.88rem; font-weight:800; cursor:pointer; } .manage-primary span:first-child { color:var(--manage-gold); font-size:1.05rem; } .manage-primary[data-appointment-action="reschedule"] { border:1.5px solid var(--manage-accent); background:#fff; color:var(--manage-accent); } .manage-secondary-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .manage-secondary-actions button { min-height:44px; padding:6px 10px; border:1px solid #e1e4e0; border-radius:12px; background:#fafaf7; color:var(--manage-ink); font-size:.8rem; font-weight:700; line-height:1.2; cursor:pointer; } .manage-cancel { justify-self:center; margin-top:4px; padding:8px 12px; border:0; background:none; color:#a64242; font-size:.84rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .manage-section .hidden,.manage-primary.hidden,.manage-cancel.hidden { display:none !important; } @media (max-width:360px) { .manage-status-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .manage-payment-row { flex-wrap:wrap; } } /* Completion */ .completion-previous { color:var(--manage-muted); font-size:.74rem; font-weight:600; } /* Reschedule */ #reschedule-form { display:grid; gap:12px; } .reschedule-current,.reschedule-choice { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:#f7f6f1; font-size:.82rem; color:var(--manage-muted); } .reschedule-current strong,.reschedule-choice strong { color:var(--manage-ink); font-size:.86rem; text-align:right; text-transform:capitalize; } .reschedule-choice { border:1.5px solid var(--manage-accent); background:var(--manage-accent-soft); } .reschedule-choice strong.is-empty { color:var(--manage-muted); font-weight:600; text-transform:none; } .reschedule-scope { display:grid; gap:8px; margin:0; padding:12px 13px; border:1px solid #e3d6b5; border-radius:12px; background:#fffaf0; } .reschedule-scope legend { padding:0 4px; color:var(--manage-ink); font-size:.84rem; font-weight:800; } .reschedule-scope label { display:flex; align-items:center; gap:9px; margin:0; font-size:.86rem; font-weight:600; color:var(--manage-ink); } .reschedule-scope input { width:18px; height:18px; margin:0; accent-color:var(--manage-accent); } .reschedule-scope small { color:var(--manage-muted); font-size:.74rem; line-height:1.35; } .reschedule-availability { display:block !important; margin:0; } .reschedule-availability .booking-availability-list { max-height:min(320px,42vh); overflow-y:auto; overscroll-behavior:contain; } .booking-availability-slot.is-chosen { outline:2px solid var(--manage-accent); outline-offset:-2px; background:var(--manage-accent-soft); } .reschedule-manual summary { cursor:pointer; color:var(--manage-accent); font-size:.82rem; font-weight:700; } .reschedule-manual .form-row { margin-top:8px; } .reschedule-conflict { display:grid; gap:8px; padding:12px 13px; border:1px solid #e9c9a0; border-radius:12px; background:#fff6e8; color:#6b4a12; font-size:.84rem; } .reschedule-conflict ul { margin:0; padding-left:18px; } .reschedule-conflict-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .reschedule-conflict-actions button { width:100%; min-height:44px; margin:0; font-size:.8rem; } .reschedule-footer { display:grid; grid-template-columns:1fr 1.6fr; gap:8px; position:sticky; bottom:-1px; padding:10px 0 2px; background:#fffefb; } .reschedule-footer button { width:100%; margin:0; min-height:50px; } #reschedule-form .form-error:empty { display:none; } body:is([data-profession="barber"],[data-profession="other"]) .reschedule-footer .primary-button,body:is([data-profession="barber"],[data-profession="other"]) .reschedule-conflict .primary-button { background:var(--manage-accent); color:#fff; } .manage-status-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .manage-status-options button { min-height:40px; font-size:.84rem; } @media (min-width:440px) { .manage-status-options { grid-template-columns:repeat(4,minmax(0,1fr)); } .manage-status-options button { font-size:.8rem; } } .manage-payment-row strong { line-height:1.25; } .manage-pay-button { padding:0 12px; font-size:.78rem; } #reschedule-form { grid-template-columns:minmax(0,1fr); } #reschedule-form>* { min-width:0; } .reschedule-current strong,.reschedule-choice strong { min-width:0; overflow-wrap:anywhere; } .reschedule-manual .form-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .reschedule-manual input { min-width:0; width:100%; } #reschedule-form { width:100%; max-width:100%; box-sizing:border-box; } .reschedule-availability .booking-availability-nav { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; } .reschedule-availability .booking-availability-nav input { min-width:0; width:100%; } /* ===== Professor: bright classroom hero (light composition, petrol green + gold) ===== */ #workspace[data-profession="teacher"] .barber-home-hero { color:#13261f; background-color:#f3f1ea; background-image:linear-gradient(90deg,#f7f5eff7 0%,#f7f5efee 44%,#f7f5efa6 56%,#f7f5ef1a 70%,#f7f5ef00 80%),linear-gradient(180deg,#f7f5ef00 62%,#f3f1eadb 100%),url('assets/teacher-hero-classroom.jpg'); background-position:center,center,90% top; background-size:cover,cover,auto 100%; } #workspace[data-profession="teacher"] .barber-home-brand-mark { width:62px; height:58px; flex:0 0 62px; overflow:visible; } #workspace[data-profession="teacher"] .barber-home-brand-mark img:not(.brand-ant-mark) { display:none; } #workspace[data-profession="teacher"] .brand-ant-mark { display:block; width:100%; height:100%; object-fit:contain; } #workspace[data-profession="teacher"] .barber-home-brand-name strong { display:flex; flex-direction:column; font-size:1.42rem; font-weight:900; letter-spacing:.01em; line-height:.98; } #workspace[data-profession="teacher"] .brand-word-fourmi { color:#0b4a37; } #workspace[data-profession="teacher"] .brand-word-think { color:#c8952f; } #workspace[data-profession="teacher"] .barber-home-brand-name small { margin-top:7px; padding-top:6px; border-top:1px solid #d4a85399; color:#1b3a30; font-size:.6rem; letter-spacing:.34em; } #workspace[data-profession="teacher"] .barber-home-brand-name small svg { color:#c8952f; } #workspace[data-profession="teacher"] .premium-brand-motto { border-top:0; padding-top:0; margin-top:6px; color:#3a4a44; } #workspace[data-profession="teacher"] .barber-home-avatar-button { border:0; background:linear-gradient(145deg,#f3d27d,#d4a853); color:#0f2a24; box-shadow:0 4px 12px #13261f26; } #workspace[data-profession="teacher"] .barber-hero-copy>p:first-child { color:#2b3a35; } #workspace[data-profession="teacher"] .barber-hero-copy h1 { color:#0f1f1a; } #workspace[data-profession="teacher"] .barber-hero-copy>p:last-child { color:#33433d; } #workspace[data-profession="teacher"] .barber-hero-metric { border-color:#ffffff1f; background:#0b3a30f2; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 8px 18px #13261f29,inset 0 1px #ffffff14; } #workspace[data-profession="teacher"] .barber-home-cta { box-shadow:0 8px 18px #13261f26,inset 0 1px #fff6; } @media (max-width:360px) { #workspace[data-profession="teacher"] .barber-home-brand-mark { width:50px; height:46px; flex-basis:50px; } #workspace[data-profession="teacher"] .barber-home-brand-name strong { font-size:1.18rem; } } /* ===== Finance screen redesign (all professional profiles; navy accent on Barbeiro) ===== */ #finance-screen { --fin-primary:#0b3a30; --fin-primary-2:#0f4a3c; --fin-received:#16a06a; --fin-pending:#e0a93b; --fin-expense:#cf5454; --fin-ink:#13261f; --fin-muted:#66736e; } #workspace:is([data-profession="barber"],[data-profession="other"]) #finance-screen { --fin-primary:#142d3b; --fin-primary-2:#1d3d50; --fin-ink:#172924; } #finance-screen .finance-page-heading { align-items:flex-start; margin-bottom:6px; } #finance-screen .finance-page-heading .eyebrow { color:#2f8a5c; letter-spacing:.22em; } #workspace:is([data-profession="barber"],[data-profession="other"]) #finance-screen .finance-page-heading .eyebrow { color:#a77a22; } #finance-screen .finance-page-heading h1 { color:var(--fin-ink); font-size:2rem; letter-spacing:-.02em; } #finance-screen .finance-subtitle { margin:6px 0 0; max-width:270px; color:var(--fin-muted); font-size:.9rem; line-height:1.4; } #finance-screen .finance-actions { display:none; } .finance-month-picker { position:relative; display:inline-flex; align-items:center; gap:8px; margin:6px 0 14px; padding:0 14px; min-height:44px; border:1px solid #e3e6e1; border-radius:999px; background:#fff; box-shadow:0 4px 12px #13261f0d; } .finance-month-picker svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:var(--fin-primary); stroke-width:1.8; stroke-linecap:round; } .finance-month-picker select { min-width:0; margin:0; padding:10px 22px 10px 0; border:0; background:transparent; color:var(--fin-ink); font-size:.92rem; font-weight:700; box-shadow:none; cursor:pointer; } .finance-month-picker select:focus-visible { outline:2px solid var(--fin-pending); outline-offset:3px; border-radius:6px; } #finance-screen .finance-hero { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin:0 0 12px; padding:18px; border:0; border-radius:22px; background:linear-gradient(150deg,var(--fin-primary-2),var(--fin-primary)); color:#fff; box-shadow:0 14px 30px #13261f2e; } #finance-screen .finance-hero>div { display:flex; } .finance-hero-net { align-items:center; gap:14px; } .finance-hero-net>div { display:grid; gap:2px; min-width:0; } .finance-hero-net span { color:#d7e4de; font-size:.86rem; font-weight:600; } .finance-hero-net strong { color:#fff; font-size:2.2rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; overflow-wrap:anywhere; } .finance-hero-net strong.is-negative { color:#ffc7c0; } .finance-hero-net small { color:#b9cbc3; font-size:.78rem; } .finance-hero-icon { flex:0 0 46px; width:46px; height:46px; display:grid; place-items:center; border:1px solid #ffffff2b; border-radius:14px; background:#ffffff12; } .finance-hero-icon svg { width:22px; height:22px; fill:none; stroke:#e6c06a; stroke-width:3; stroke-linecap:round; } .finance-donut-block { align-items:center; gap:16px; padding-top:14px; border-top:1px solid #ffffff21; } .finance-donut { position:relative; flex:0 0 118px; width:118px; height:118px; } .finance-donut svg { width:100%; height:100%; transform:rotate(0deg); } .finance-donut circle { fill:none; stroke-width:5.4; } .finance-donut .donut-track { stroke:#ffffff1f; } .finance-donut .donut-received { stroke:var(--fin-received); transition:stroke-dasharray .4s ease; } .finance-donut .donut-pending { stroke:var(--fin-pending); transition:stroke-dasharray .4s ease; } .finance-donut-center { position:absolute; inset:22px; display:grid; place-content:center; text-align:center; } .finance-donut-center strong { color:#fff; font-size:1.12rem; font-weight:800; line-height:1.1; } .finance-donut-center span { color:#cfdcd6; font-size:.62rem; line-height:1.2; } .finance-donut.is-empty .finance-donut-center span { font-size:.56rem; } .finance-donut-legend { flex:1; min-width:0; display:grid; gap:12px; margin:0; padding:0; list-style:none; } .finance-donut-legend li { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; column-gap:8px; row-gap:1px; } .finance-donut-legend i { width:11px; height:11px; border-radius:50%; background:var(--fin-received); } .finance-donut-legend .is-pending i { background:var(--fin-pending); } .finance-donut-legend span { color:#e3ece8; font-size:.84rem; } .finance-donut-legend strong { color:#fff; font-size:.95rem; text-align:right; white-space:nowrap; } .finance-donut-legend small { grid-column:3; color:#b9cbc3; font-size:.74rem; text-align:right; } .finance-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:12px; } .finance-kpi { position:relative; display:grid; justify-items:start; gap:3px; min-width:0; padding:12px 10px 12px; border:1px solid #e7e8e3; border-radius:18px; background:#fff; color:var(--fin-ink); text-align:left; box-shadow:0 4px 14px #13261f0a; cursor:pointer; overflow:hidden; container-type:inline-size; } .finance-kpi::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--kpi-color); opacity:.55; } .finance-kpi.is-received { --kpi-color:var(--fin-received); --kpi-soft:#e6f5ee; } .finance-kpi.is-pending { --kpi-color:var(--fin-pending); --kpi-soft:#fbf1dc; } .finance-kpi.is-expense { --kpi-color:var(--fin-expense); --kpi-soft:#fbe9e9; } .finance-kpi-icon { width:34px; height:34px; display:grid; place-items:center; margin-bottom:4px; border-radius:11px; background:var(--kpi-soft); } .finance-kpi-icon svg { width:18px; height:18px; fill:none; stroke:var(--kpi-color); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .finance-kpi.is-pending .finance-kpi-icon svg { stroke:#b8862a; } .finance-kpi-label { color:var(--fin-muted); font-size:.76rem; font-weight:600; } .finance-kpi strong { max-width:100%; color:var(--fin-ink); font-size:min(1.15rem,14cqi); font-weight:800; letter-spacing:-.01em; white-space:nowrap; } .finance-kpi small { color:var(--fin-muted); font-size:.66rem; } .finance-kpi:focus-visible,.finance-movement:focus-visible,.finance-cta:focus-visible { outline:2px solid var(--fin-pending); outline-offset:2px; } #finance-screen .finance-links { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-bottom:18px; } #finance-screen .finance-center-card,#finance-screen .personal-finance-entry { display:grid; grid-template-columns:42px minmax(0,1fr) auto auto; align-items:center; gap:12px; width:100%; margin:0; padding:12px 14px; border:1px solid #e7e8e3; border-radius:18px; background:#fff; color:var(--fin-ink); text-align:left; box-shadow:0 4px 14px #13261f0a; } #finance-screen .personal-finance-entry { grid-template-columns:42px minmax(0,1fr) auto; } #finance-screen .finance-center-icon,#finance-screen .personal-finance-entry-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#e9f3ee; color:var(--fin-primary); font-size:0; } #finance-screen .finance-center-icon svg,#finance-screen .personal-finance-entry-icon svg { width:20px; height:20px; fill:none; stroke:var(--fin-primary); stroke-width:2.2; stroke-linecap:round; } #workspace:is([data-profession="barber"],[data-profession="other"]) #finance-screen .finance-center-icon,#workspace:is([data-profession="barber"],[data-profession="other"]) #finance-screen .personal-finance-entry-icon { background:#e8eef2; } #finance-screen .finance-center-card strong,#finance-screen .personal-finance-entry strong { display:block; font-size:.92rem; } #finance-screen .finance-center-card small,#finance-screen .personal-finance-entry small { display:block; margin-top:2px; color:var(--fin-muted); font-size:.76rem; line-height:1.3; } #finance-screen .finance-alert-badge:not(.hidden) { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#c94a43; color:#fff; font-size:.72rem; font-weight:800; } .finance-movements-heading { align-items:center; margin:4px 0 10px; } .finance-movements-heading h2 { color:var(--fin-ink); font-size:1.2rem; } .finance-movement-filter select { min-height:38px; margin:0; padding:6px 30px 6px 14px; border:1px solid #e3e6e1; border-radius:999px; background-color:#fff; color:var(--fin-ink); font-size:.84rem; font-weight:600; } .finance-movements { display:grid; margin-bottom:14px; padding:4px 12px; border:1px solid #e7e8e3; border-radius:18px; background:#fff; box-shadow:0 4px 14px #13261f0a; } .finance-movement { display:grid; grid-template-columns:40px minmax(0,1fr) auto 10px; align-items:center; gap:11px; width:100%; min-height:62px; padding:9px 0; border:0; border-bottom:1px solid #eff0ec; background:transparent; color:var(--fin-ink); text-align:left; } div.finance-movement { grid-template-columns:40px minmax(0,1fr) auto; } .finance-movement:last-of-type { border-bottom:0; } button.finance-movement { cursor:pointer; } .finance-movement-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; } .finance-movement-icon svg { width:19px; height:19px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .finance-movement.is-income .finance-movement-icon { background:#e6f5ee; } .finance-movement.is-income .finance-movement-icon svg { stroke:#0f8a5a; } .finance-movement.is-pending .finance-movement-icon { background:#fbf1dc; } .finance-movement.is-pending .finance-movement-icon svg { stroke:#b8862a; } .finance-movement.is-expense .finance-movement-icon { background:#fbe9e9; } .finance-movement.is-expense .finance-movement-icon svg { stroke:#c24848; } .finance-movement-copy { min-width:0; } .finance-movement-copy strong,.finance-movement-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .finance-movement-copy strong { font-size:.88rem; } .finance-movement-copy small { margin-top:2px; color:var(--fin-muted); font-size:.74rem; } .finance-movement-amount { font-size:.92rem; font-weight:800; white-space:nowrap; } .finance-movement.is-income .finance-movement-amount { color:#0f8a5a; } .finance-movement.is-pending .finance-movement-amount { color:#b07a14; } .finance-movement.is-expense .finance-movement-amount { color:#c24848; } .finance-movement>b { color:#97a39e; font-size:1.1rem; } .finance-movements-empty { margin:0; padding:18px 6px; color:var(--fin-muted); font-size:.86rem; text-align:center; } .finance-movements-more { justify-self:center; margin:6px 0 4px; color:var(--fin-primary); font-size:.84rem; font-weight:700; } .finance-cta-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; } .finance-cta { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:54px; padding:0 14px; border:1px solid #e3e6e1; border-radius:16px; background:#fff; color:var(--fin-ink); font-size:.86rem; font-weight:800; text-align:left; cursor:pointer; } .finance-cta svg { width:20px; height:20px; fill:none; stroke:var(--fin-primary); stroke-width:1.9; stroke-linecap:round; } .finance-cta.primary { border:0; background:linear-gradient(100deg,#f3d27d,#d4a853); color:#13261f; box-shadow:0 8px 18px #d4a85340; } .finance-cta.primary>span:first-child { font-size:1.2rem; } .finance-cta b { color:inherit; opacity:.6; font-size:1.1rem; } .finance-history { margin:4px 0 8px; } .finance-history summary { cursor:pointer; color:var(--fin-muted); font-size:.82rem; font-weight:700; } @media (max-width:370px) { .finance-kpis { grid-template-columns:1fr 1fr; } .finance-kpi.is-expense { grid-column:1/-1; } .finance-donut { flex-basis:100px; width:100px; height:100px; } .finance-cta-row { grid-template-columns:1fr; } .finance-hero-net strong { font-size:1.8rem; } } @media (min-width:430px) { .finance-donut { flex-basis:128px; width:128px; height:128px; } } /* Free-time empty message spans the whole row */ .barber-home-free-slots>.barber-today-empty { grid-column:1/-1; } .finance-movements-heading h2 { font-size:1.12rem; white-space:nowrap; } .finance-cta { gap:8px; padding:0 12px; font-size:.82rem; line-height:1.2; } @media (max-width:370px) { .finance-donut-block { flex-direction:column; align-items:stretch; } .finance-donut { align-self:center; } .finance-movements-heading { flex-wrap:wrap; gap:8px; } .finance-movements-heading h2 { white-space:normal; } } .finance-donut-legend span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Barbeiro uses the same bottom bar as Professor: Início · Agenda · + · Clientes · Finanças */ #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-finance { display:flex; } #workspace:is([data-profession="barber"],[data-profession="other"]) .nav-more { display:none; } .completion-content-field { display:grid; gap:6px; margin:4px 0 14px; } .completion-content-field label { margin:0; font-size:.86rem; font-weight:800; } .completion-content-field textarea { min-height:78px; margin:0; resize:vertical; } .completion-content-field small { color:#65716d; font-size:.74rem; } .completion-content-field.hidden { display:none; } /* ===== Premium onboarding (intro · name · audience · activity) ===== */ .onboarding.onb { --onb-green:#053d2e; --onb-deep:#02211a; --onb-gold:#e2b75e; --onb-gold-2:#f4d58a; --onb-cream:#fbf8f1; position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; padding:0; overflow:hidden; color:#fff; background:radial-gradient(120% 60% at 85% 0%,#0f5a45 0%,transparent 55%),radial-gradient(90% 50% at 0% 100%,#0a4a38 0%,transparent 60%),linear-gradient(170deg,#03261e 0%,#043427 45%,#032a21 100%); } .onboarding.onb::after { display:none; } .onb-gold { color:var(--onb-gold); } .onb-lang { position:absolute; z-index:5; top:calc(14px + env(safe-area-inset-top)); right:16px; display:flex; gap:2px; padding:4px; border:1px solid #ffffff1f; border-radius:999px; background:#00000026; backdrop-filter:blur(6px); } .onb-lang .language-button { min-width:38px; min-height:34px; padding:6px 9px; border-radius:999px; color:#e6efe9; font-size:.78rem; font-weight:700; } .onb-lang .language-button.active { background:linear-gradient(145deg,var(--onb-gold-2),var(--onb-gold)); color:#13261f; box-shadow:0 4px 10px #00000033; } .onb-lang .language-button:focus-visible { outline:2px solid var(--onb-gold-2); outline-offset:2px; } /* Screen 1 */ .onb-intro { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:clamp(10px,2.2vh,22px); padding:calc(62px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); text-align:center; } .onb-curve { position:absolute; pointer-events:none; border-radius:50%; } .onb-curve-top { width:520px; height:520px; left:-300px; top:-330px; border:1px solid #e2b75e33; } .onb-curve-bottom { width:900px; height:420px; left:50%; bottom:-260px; transform:translateX(-50%); border-top:1.5px solid #e2b75e55; background:radial-gradient(60% 50% at 50% 0%,#0d5a4433,transparent); } .onb-brand-hero { position:relative; display:flex; flex-direction:column; align-items:center; } .onb-symbol { width:clamp(150px,30vh,250px); max-width:62vw; height:auto; filter:drop-shadow(0 18px 28px #00120d99) drop-shadow(0 0 22px #e2b75e1f); } .onb-wordmark { margin:clamp(6px,1.4vh,12px) 0 0; font-size:clamp(1.9rem,8.6vw,2.6rem); font-weight:850; letter-spacing:.01em; line-height:1; white-space:nowrap; } .onb-motto { margin:10px 0 0; color:#e9efe9; font-size:clamp(.66rem,2.9vw,.8rem); font-weight:600; letter-spacing:.32em; white-space:nowrap; } .onb-divider { width:62px; height:2px; margin-top:clamp(12px,2.2vh,20px); border-radius:2px; background:var(--onb-gold); } .onb-headline { margin:0; max-width:340px; color:#fff; font-size:clamp(1.85rem,8.4vw,2.55rem); font-weight:850; letter-spacing:-.02em; line-height:1.08; text-wrap:balance; } .onb-headline span { display:block; } .onb-support { margin:0; max-width:310px; color:#e3ece7; font-size:clamp(.92rem,3.9vw,1.02rem); line-height:1.45; } .onb-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; max-width:380px; margin:0; padding:0; list-style:none; } .onb-benefits li { display:flex; flex-direction:column; align-items:center; gap:7px; padding:0 4px; color:#eef3ef; font-size:clamp(.66rem,2.9vw,.76rem); line-height:1.25; } .onb-benefits li+li { border-left:1px solid #ffffff24; } .onb-benefits svg { width:clamp(26px,7.4vw,32px); height:clamp(26px,7.4vw,32px); fill:none; stroke:var(--onb-gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .onb-cta { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:380px; min-height:56px; margin:0; border:0; border-radius:999px; background:linear-gradient(100deg,var(--onb-gold-2) 0%,var(--onb-gold) 55%,#c99a3f 100%); color:#13261f; font-size:1.05rem; font-weight:800; box-shadow:0 12px 26px #00000040,inset 0 1px #fff8; cursor:pointer; } .onb-cta span:last-child { font-size:1.25rem; } .onb-cta:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; } .onb-cta:focus-visible,.onb-login-link:focus-visible,.onb-back:focus-visible { outline:3px solid #fff; outline-offset:3px; } .onb-login-link { position:relative; z-index:1; margin:-4px 0 0; padding:8px; border:0; background:none; color:#d9e5df; font-size:.84rem; cursor:pointer; } .onb-login-link span:first-child { text-decoration:underline; text-underline-offset:3px; text-decoration-color:#e2b75e88; } .onb-login-note { position:relative; z-index:1; max-width:340px; margin:-8px 0 0; color:#cfdcd5; font-size:.76rem; line-height:1.45; } .onb-login-link.is-dark { align-self:center; margin-top:4px; color:#4b5a54; } .onb-login-note.is-dark { margin:0; color:#5d6b65; text-align:center; } .onb-login-note.hidden { display:none; } /* Screens 2 · 3 · activity */ .onb-flow { position:relative; flex:1; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; } .onb-flow.hidden,.onb-intro.hidden { display:none; } .onb-flow-head { position:relative; padding:calc(62px + env(safe-area-inset-top)) 24px 26px; } .onb-back { position:absolute; top:calc(14px + env(safe-area-inset-top)); left:12px; width:42px; height:42px; display:grid; place-items:center; border:1px solid #ffffff22; border-radius:50%; background:#00000022; color:#fff; cursor:pointer; } .onb-back svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .onb-back.hidden { display:none; } .onb-compact-brand { display:flex; align-items:center; justify-content:center; gap:10px; } .onb-compact-brand img { width:62px; height:auto; filter:drop-shadow(0 6px 12px #00120d80); } .onb-compact-brand strong { display:block; color:#fff; font-size:1.3rem; font-weight:850; letter-spacing:.01em; line-height:1; white-space:nowrap; } .onb-compact-brand strong b { color:var(--onb-gold); font-weight:850; } .onb-compact-brand small { display:block; margin-top:5px; color:#dfe8e3; font-size:.52rem; font-weight:600; letter-spacing:.26em; white-space:nowrap; } .onb-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0 22px; } .onb-progress i { height:5px; border-radius:999px; background:#ffffff26; } .onb-progress i.is-done { background:linear-gradient(90deg,var(--onb-gold-2),var(--onb-gold)); } .onb-progress.hidden,.onb-count.hidden { display:none; } .onb-count { margin:0 0 10px; color:#e3ece7; font-size:.95rem; } .onb-title { margin:0; color:#fff; font-size:clamp(1.65rem,7.4vw,2.15rem); font-weight:800; letter-spacing:-.015em; line-height:1.12; text-wrap:balance; } .onb-desc { margin:12px 0 0; max-width:360px; color:#dce7e1; font-size:.98rem; line-height:1.45; } .onb-desc:empty { display:none; } .onb-sheet { position:relative; z-index:1; flex:1; padding:26px 22px calc(26px + env(safe-area-inset-bottom)); border-radius:30px 30px 0 0; background:var(--onb-cream); color:#13261f; box-shadow:0 -12px 30px #00140f40; } .onb-wave { position:absolute; left:0; right:0; bottom:0; height:110px; pointer-events:none; z-index:2; background:radial-gradient(120% 90% at 50% 120%,#0a4a38 0 42%,transparent 43%),radial-gradient(130% 100% at 30% 130%,#e2b75e55 0 45%,transparent 46%); opacity:.9; } .onb[data-step="audience"] .onb-wave,.onb[data-step="professional"] .onb-wave,.onb[data-step="student"] .onb-wave,.onb[data-step="local"] .onb-wave { display:none; } .onb-panel { position:relative; z-index:3; display:grid; gap:14px; } .onb-panel.hidden { display:none; } .onb-panel>label { margin:0; color:#13261f; font-size:.95rem; font-weight:600; } .onb-input { display:flex; align-items:center; gap:12px; min-height:58px; padding:0 16px; border:1px solid #dcdfd8; border-radius:16px; background:#fff; box-shadow:0 2px 8px #13261f0a; } .onb-input:focus-within { border-color:#0a8a5c; box-shadow:0 0 0 3px #0a8a5c26; } .onb-input svg { width:22px; height:22px; flex:none; fill:none; stroke:#1d2e28; stroke-width:1.7; stroke-linecap:round; } .onb-input input { flex:1; min-width:0; height:56px; margin:0; padding:0; border:0; background:transparent; color:#13261f; font-size:16px; box-shadow:none; outline:none; } .onb-input:has(input[aria-invalid="true"]) { border-color:#c24848; } .onb-error { margin:-6px 0 0; color:#b3403a; font-size:.82rem; font-weight:600; } .onb-error:empty { display:none; } .onb-sheet .onb-cta { max-width:none; margin-top:6px; } .onb .audience-grid { display:grid; grid-template-columns:1fr; gap:14px; margin:0; } .onb .audience-card { position:relative; display:grid; grid-template-columns:60px minmax(0,1fr) 24px; align-items:center; gap:16px; min-height:112px; padding:18px; border:1.5px solid #e3e6e0; border-radius:20px; background:#fff; color:#13261f; text-align:left; box-shadow:0 4px 14px #13261f0a; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; } .onb .audience-card .audience-icon { width:60px; height:60px; display:grid; place-items:center; border-radius:16px; background:#e6f2ec; color:#0c6248; } .onb .audience-card[data-suite="education"] .audience-icon { background:#e6f2ec; color:#0c6248; } .onb .audience-card[data-suite="pro"] .audience-icon { background:#fbf0d8; color:#a87a26; } .onb .audience-card .audience-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .onb .audience-copy strong { display:block; font-size:1.2rem; font-weight:800; text-transform:none; } .onb .audience-copy small { display:block; margin-top:4px; color:#5f6c66; font-size:.88rem; line-height:1.35; } .onb .audience-copy em { display:block; margin-top:7px; color:#0b5b4c; font-size:.72rem; font-style:normal; font-weight:800; line-height:1.3; } .onb .audience-arrow { display:grid; place-items:center; width:24px; height:24px; color:#13261f; } .onb .audience-arrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .onb .audience-card[data-suite="education"].selected { border-color:#0a8a5c; background:#f0f8f3; box-shadow:0 0 0 3px #0a8a5c22; } .onb .audience-card[data-suite="pro"].selected { border-color:#d4a853; background:#fdf8ec; box-shadow:0 0 0 3px #d4a85326; } .onb .audience-card.selected .audience-arrow { border-radius:50%; background:#0a8a5c; color:#fff; } .onb .audience-card[data-suite="pro"].selected .audience-arrow { background:#c99a3f; } .onb .audience-card.selected .audience-arrow svg path { d:path("M6 12.5l4 4 8-9"); } .onb .audience-card:focus-visible,.onb .profession-card:focus-visible { outline:3px solid #d4a853; outline-offset:2px; } .onb-profession-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; } .onb .profession-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; min-width:0; min-height:160px; padding:16px; border:1.5px solid #e3e6e0; border-radius:18px; background:#fff; color:#13261f; text-align:left; box-shadow:0 4px 14px #13261f0a; cursor:pointer; } .onb .profession-card .profession-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:#e6f2ec; color:#0c6248; font-size:1.3rem; } .onb .profession-card .profession-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .onb .profession-card .profession-name { font-size:.98rem; font-weight:800; line-height:1.2; } .onb .profession-card .profession-description { display:block; color:#5f6c66; font-size:.72rem; line-height:1.35; overflow-wrap:anywhere; } .onb .profession-card.selected { border-color:#0a8a5c; background:#f0f8f3; box-shadow:0 0 0 3px #0a8a5c22; } .onb .profession-card.selected::after { content:"✓"; position:absolute; top:12px; right:12px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#0a8a5c; color:#fff; font-size:.8rem; font-weight:900; } @media (max-width:460px) { .onb .audience-grid { gap:10px; } .onb .audience-card { grid-template-columns:46px minmax(0,1fr) 18px; gap:11px; min-height:0; padding:13px; border-radius:17px; } .onb .audience-card .audience-icon { width:46px; height:46px; border-radius:12px; } .onb .audience-card .audience-icon svg { width:25px; height:25px; } .onb .audience-copy strong { font-size:1.05rem; } .onb .audience-copy small { font-size:.77rem; } .onb-profession-grid { grid-template-columns:1fr; gap:9px; } .onb .profession-card { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:3px 11px; min-height:0; padding:12px; } .onb .profession-card .profession-icon { grid-row:1 / 3; width:42px; height:42px; } .onb .profession-card .profession-name { padding-right:22px; } } .onb-student-summary { display:flex; align-items:center; gap:14px; padding:16px; border:1.5px solid #d4a853; border-radius:18px; background:#fdf8ec; } .onb-student-summary .audience-icon { width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:14px; background:#fbf0d8; color:#a87a26; } .onb-student-summary .audience-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .onb-student-summary strong { display:block; font-size:1.1rem; } .onb-student-summary small { display:block; margin-top:3px; color:#5f6c66; font-size:.86rem; line-height:1.35; } .onb .local-entry { gap:10px; } .onb .local-entry .eyebrow { display:none; } .onb .local-entry h2 { display:none; } .onb .local-entry .intro { display:none; } .onb .local-entry-button { min-height:56px; border-radius:999px; background:linear-gradient(100deg,#f4d58a,#e2b75e 55%,#c99a3f); color:#13261f; } /* Short phones: tighten the first screen so "Começar" stays visible */ @media (max-height:700px) { .onb-intro { gap:8px; padding-top:calc(56px + env(safe-area-inset-top)); } .onb-symbol { width:clamp(110px,22vh,170px); } .onb-wordmark { font-size:1.75rem; } .onb-headline { font-size:1.65rem; } .onb-support { font-size:.86rem; } .onb-benefits li { gap:4px; } .onb-cta { min-height:50px; } .onb-flow-head { padding-top:calc(56px + env(safe-area-inset-top)); padding-bottom:18px; } .onb-progress { margin:16px 0 14px; } } @media (max-width:350px) { .onb-intro { padding-inline:16px; } .onb-motto { letter-spacing:.22em; } .onb-benefits li { padding:0 2px; } .onb .audience-card { grid-template-columns:48px minmax(0,1fr) 20px; gap:12px; padding:14px; } .onb .audience-card .audience-icon { width:48px; height:48px; } .onb-flow-head,.onb-sheet { padding-inline:18px; } } @media (min-width:461px) { .onboarding.onb { min-height:calc(100vh - 44px); min-height:calc(100dvh - 44px); } .onb-flow { min-height:calc(100dvh - 44px); } } /* Same-day extra lessons (new / edit student, custom dates) */ .same-day-add { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:44px; margin-top:8px; padding:9px 12px; border:1px dashed var(--emerald); border-radius:11px; background:transparent; color:var(--forest-800); font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; text-align:center; } .same-day-add span { font-size:1.05rem; line-height:1; } .same-day-add:hover,.same-day-add:focus-visible { background:#eaf6f0; } .same-day-add:focus-visible { outline:2px solid var(--emerald); outline-offset:2px; } .recurring-time-card.same-day-extra { margin-top:6px; border-left:3px solid var(--emerald); } .same-day-extra .recurring-time-card-heading { flex-wrap:wrap; justify-content:flex-start; } .same-day-extra .recurring-time-card-heading strong { flex:1 1 0; } .recurring-time-card-heading .same-day-remove { flex:none; min-height:32px; padding:4px 2px; font-size:.74rem; color:#a2453c; white-space:nowrap; } .active-release-notice { margin:8px 0 4px; padding:10px 12px; border-radius:11px; background:#fff7e6; border:1px solid #f0d9a8; color:#6b4e12; font-weight:650; } /* Always-visible client filters (status + order, combinable) */ .client-quick-filters { display:flex; align-items:center; gap:8px; margin:12px 0 14px; flex-wrap:wrap; } .client-status-chips { display:flex; flex:1 1 auto; min-width:0; padding:3px; border:1px solid var(--line); border-radius:999px; background:white; } .client-status-chips button { flex:1 1 0; min-width:0; min-height:36px; padding:6px 8px; border:0; border-radius:999px; background:transparent; color:var(--muted); font:inherit; font-size:.76rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .client-status-chips button.selected { background:var(--forest-800, #0b3d2e); color:white; } .client-status-chips button:focus-visible { outline:2px solid var(--emerald); outline-offset:1px; } .client-sort-chip { position:relative; display:flex; align-items:center; flex:0 1 auto; min-width:0; border:1px solid var(--line); border-radius:999px; background:white; } .client-sort-chip svg { position:absolute; left:11px; width:16px; height:16px; fill:none; stroke:var(--forest-800, #0b3d2e); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .client-sort-chip select { width:auto; max-width:100%; min-height:42px; margin:0; padding:8px 30px 8px 32px; border:0; border-radius:999px; background-color:transparent; font-size:.76rem; font-weight:800; color:var(--forest-800, #0b3d2e); } @media (max-width:359px){ .client-sort-chip { flex:1 1 100%; } .client-sort-chip select { width:100%; } } /* Finance: Previsto KPI (4 cards in a 2x2 grid) */ .finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .finance-kpi.is-expected { --kpi-color:#315c73; --kpi-soft:#e8eef2; } @media (min-width:720px){ .finance-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* Working currency selectors */ .finance-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 14px; } .finance-toolbar .finance-month-picker { margin:0; max-width:100%; } .finance-currency-picker { padding:0 12px; } .finance-currency-picker select { padding-right:20px; font-variant-numeric:tabular-nums; } .finance-currency-note { margin:-6px 0 12px; padding:9px 12px; border-radius:12px; background:#eef4f1; color:var(--fin-ink, #13261f); font-size:.78rem; font-weight:600; } .onb-currency { position:absolute; z-index:5; top:calc(14px + env(safe-area-inset-top)); left:16px; display:flex; align-items:center; gap:4px; min-height:42px; padding:0 4px 0 10px; border:1px solid #ffffff1f; border-radius:999px; background:#00000026; backdrop-filter:blur(6px); color:#e6efe9; } .onb-currency svg { width:17px; height:17px; flex:none; fill:none; stroke:var(--onb-gold-2, #e6c67a); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .onb-currency select { margin:0; min-height:34px; padding:6px 22px 6px 2px; border:0; border-radius:999px; background-color:transparent; color:#fff; font-size:.78rem; font-weight:800; box-shadow:none; cursor:pointer; } .onb-currency select option { color:#13261f; } .onb-currency select:focus-visible { outline:2px solid var(--onb-gold-2, #e6c67a); outline-offset:2px; } .onb:not([data-step="intro"]) .onb-currency { display:none; } @media (max-width:359px){ .onb-currency { left:10px; padding-left:8px; } .onb-currency svg { display:none; } .onb-currency select { padding-right:18px; font-size:.74rem; } .onb-lang { right:10px; } .onb-lang .language-button { min-width:34px; padding:6px 7px; } } .finance-toolbar .finance-currency-picker { padding:0 6px 0 14px; } .finance-toolbar .finance-currency-picker select { padding:10px 18px 10px 0; } .finance-toolbar { flex-wrap:nowrap; } .finance-toolbar .finance-month-picker:not(.finance-currency-picker) { flex:0 1 auto; min-width:0; } .finance-toolbar .finance-month-picker:not(.finance-currency-picker) select { min-width:0; max-width:100%; text-overflow:ellipsis; } .finance-toolbar .finance-currency-picker { flex:none; } @media (max-width:400px){ .finance-toolbar .finance-month-picker { padding:0 10px; gap:6px; } .finance-toolbar .finance-month-picker select { font-size:.84rem; } } /* Home KPIs: 4 indicadores em grade 2x2 (Professor e Barbeiro). Ordem interna: ícone + label, valor (elemento mais forte), comparação opcional. O valor nunca é cortado: fitKpiValues() reduz a fonte até caber. */ #workspace .barber-hero-metrics.premium-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #workspace .barber-hero-metrics.premium-kpis .kpi-card { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:6px; min-width:0; min-height:0; padding:12px 12px 11px; overflow:hidden; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-head { display:flex; align-items:center; gap:8px; min-width:0; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-icon { flex:none; display:block; width:30px; height:30px; margin:0; padding:6px; box-sizing:border-box; border-radius:10px; background:#ffffff14; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-icon-barber { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metrics.premium-kpis .kpi-card .kpi-icon-teacher { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metrics.premium-kpis .kpi-card .kpi-icon-barber { display:block; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-label { min-width:0; color:#e3ebe6; font-size:.76rem; font-weight:650; line-height:1.2; white-space:normal; overflow-wrap:normal; word-break:normal; hyphens:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:visible; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-value { display:block; margin:2px 0 0; color:#fff; font-size:clamp(1.2rem, 6.2vw, 1.6rem); font-weight:800; line-height:1.1; letter-spacing:-.015em; white-space:nowrap; overflow:visible; text-overflow:clip; font-variant-numeric:tabular-nums; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-value.kpi-wrap { white-space:normal; overflow-wrap:anywhere; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-top:auto; color:#c9d6cf; font-size:.68rem; font-weight:600; line-height:1.2; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.hidden { display:none; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare b { font-weight:800; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.is-up b { color:#7fe0a8; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.is-down b { color:#f3b2a6; } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.is-flat b { color:#e6d3a0; } @media (min-width:900px){ #workspace .barber-hero-metrics.premium-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); } #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-value { font-size:1.45rem; } } @media (max-width:374px){ #workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-head { flex-direction:column; align-items:flex-start; gap:6px; } #workspace .barber-hero-metrics.premium-kpis .kpi-card { padding:11px 10px 10px; } } /* ===================== Perfil Estudante — fase 1 ===================== Identidade: azul petróleo / verde azulado escuro, dourado, creme e branco. Isolado em #student-workspace. */ #student-workspace { --st-deep:#0b3036; --st-teal:#134a50; --st-ink:#10292c; --st-gold:#d8b15e; --st-gold-2:#efd38f; --st-cream:#f7f5ef; --st-muted:#5d6f6c; --st-line:#e2e7e4; background:var(--st-cream); } #student-workspace[data-screen="student-home-screen"] > .app-header { display:none; } #student-workspace[data-screen="student-home-screen"] .student-main { padding-top:0; } #student-workspace .app-header { background:var(--st-deep); } /* Hero */ .student-hero { position:relative; margin:0 -18px; padding:calc(16px + env(safe-area-inset-top)) 18px 46px; color:#f8f6ef; border-radius:0 0 30px 30px; background-color:var(--st-deep); background-image:linear-gradient(180deg,#0a2d33d9 0%,#0c3a40b3 38%,#0b3036e6 78%,#0b3036 100%),linear-gradient(90deg,#082a2fe0 0%,#0a303570 62%,#0a303530 100%),url("assets/student-hero-desk.jpg"); background-size:cover,cover,cover; background-position:center,center,62% 30%; box-shadow:0 18px 40px #0b30361f; } .student-hero-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .student-hero-brand .barber-home-brand-mark { width:auto; flex:none; } .student-hero-brand .barber-home-brand-mark img { height:40px; } .student-hero-brand .barber-home-brand-name small { color:var(--st-gold-2); } .student-hero-brand .barber-home-brand-name small svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .student-hero-avatar { flex:none; width:42px; height:42px; border:2px solid #ffffff40; background:linear-gradient(145deg,var(--st-gold-2),var(--st-gold)); color:var(--st-ink); font-size:1rem; box-shadow:0 6px 14px #00000033; } .student-hero-copy p { margin:0; color:#e8efec; font-size:1rem; } .student-hero-copy h1 { margin:2px 0 8px; color:#fff; font-size:clamp(1.9rem,8.5vw,2.35rem); font-weight:850; letter-spacing:-.02em; line-height:1.05; overflow-wrap:anywhere; } .student-hero-copy p:last-child { max-width:32ch; color:#eef3f1; font-size:.92rem; line-height:1.4; } .student-kpis { margin:20px 0 16px; } #student-workspace .barber-hero-metrics.premium-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card { display:flex; flex-direction:column; justify-content:flex-start; gap:6px; min-width:0; padding:12px 12px 11px; border:1px solid #ffffff26; border-radius:16px; background:#0a2f35c7; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 1px #ffffff12; overflow:hidden; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-head { display:flex; align-items:center; gap:8px; min-width:0; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-icon { flex:none; display:block; width:30px; height:30px; padding:6px; box-sizing:border-box; border-radius:10px; background:#ffffff14; color:var(--st-gold-2); fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-label { min-width:0; color:#e3ece9; font-size:.76rem; font-weight:650; line-height:1.2; white-space:normal; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-value { display:block; margin:2px 0 0; color:#fff; font-size:clamp(1.2rem,6.2vw,1.6rem); font-weight:800; line-height:1.1; letter-spacing:-.015em; white-space:nowrap; font-variant-numeric:tabular-nums; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-value.kpi-wrap { white-space:normal; overflow-wrap:anywhere; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:auto; color:#c9d8d4; font-size:.68rem; font-weight:600; line-height:1.2; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.hidden { display:none; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare b { font-weight:800; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.is-up b { color:#86e2b0; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.is-down b { color:#f4b5a9; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-compare.is-flat b { color:#ecd8a5; } @media (max-width:374px){ #student-workspace .barber-hero-metrics.premium-kpis .kpi-card .kpi-head { flex-direction:column; align-items:flex-start; gap:6px; } #student-workspace .barber-hero-metrics.premium-kpis .kpi-card { padding:11px 10px 10px; } } .student-hero-cta { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:100%; min-height:58px; margin:0; padding:8px 18px 8px 9px; border:0; border-radius:18px; background:linear-gradient(135deg,var(--st-gold-2),var(--st-gold) 60%,#c99a43); color:var(--st-ink); font-size:1.05rem; font-weight:850; text-align:center; box-shadow:0 12px 26px #00000033; } .student-hero-cta>span:nth-child(2) { text-align:center; } .student-hero-cta>span:last-child { font-size:1.35rem; } .student-cta-plus { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:#ffffff55; } .student-cta-plus svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; } .student-hero-cta:focus-visible { outline:3px solid #fff; outline-offset:3px; } /* Painel de hoje + linha do tempo */ .student-today-panel { position:relative; margin:-26px 0 18px; padding:18px 16px 16px; border:1px solid var(--st-line); border-radius:26px; background:#fffefb; box-shadow:0 16px 34px #0b30361a; } .student-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .student-panel-heading h2 { margin:0; color:var(--st-ink); font-size:1.15rem; } .student-panel-heading h2 small { color:var(--st-muted); font-size:.82rem; font-weight:600; } .student-panel-heading .text-button { flex:none; color:var(--st-teal); font-size:.8rem; } .student-panel-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px; } .student-subheading { margin:16px 0 8px; color:var(--st-ink); font-size:.95rem; } .student-timeline { display:block; } #student-workspace .barber-timeline-item { grid-template-columns:44px 12px 34px minmax(0,1fr) auto 8px; gap:7px; min-height:68px; padding:9px 0; border:0; border-bottom:1px solid #eef1ee; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } #student-workspace .barber-timeline-item:last-child { border-bottom:0; } #student-workspace .barber-timeline-time strong { color:var(--st-ink); font-size:.84rem; } #student-workspace .barber-timeline-time small { font-size:.76rem; } #student-workspace .barber-timeline-time .student-allday { color:var(--st-muted); font-size:.68rem; font-weight:700; line-height:1.15; } #student-workspace .barber-timeline-marker { width:12px; } #student-workspace .barber-timeline-marker::before { left:5px; top:-38px; bottom:-38px; border-left-color:#d6e1de; } #student-workspace .barber-timeline-item:only-child .barber-timeline-marker::before { display:none; } #student-workspace .barber-timeline-marker::after { left:0; top:calc(50% - 5.5px); width:11px; height:11px; background:var(--subject-accent,#2f6f73); box-shadow:0 0 0 3px #fffefb; } #student-workspace .barber-timeline-avatar { width:34px; height:34px; background:color-mix(in srgb,var(--subject-accent,#2f6f73) 16%,#fff); } #student-workspace .barber-timeline-avatar>span { width:34px; height:34px; color:var(--subject-accent,#2f6f73); font-size:.92rem; font-weight:800; } #student-workspace .barber-timeline-copy strong { color:var(--st-ink); font-size:.9rem; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #student-workspace .barber-timeline-copy small { margin-top:2px; color:var(--st-muted); font-size:.76rem; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #student-workspace .barber-timeline-status { max-width:96px; } #student-workspace .student-timeline-item.status-completed .barber-timeline-copy strong { color:#64736f; } .student-status { display:inline-block; max-width:100%; padding:4px 8px; border-radius:999px; background:#eef2f1; color:#465754; font-size:.66rem; font-weight:800; line-height:1.15; text-align:center; white-space:normal; } .student-status.status-scheduled { background:#e9eff6; color:#2f4f6f; } .student-status.status-pending { background:#fff3d6; color:#7a5a12; } .student-status.status-inProgress { background:#dff3ee; color:#0f6655; } .student-status.status-completed { background:#e3f4e9; color:#1f6b40; } .student-status.status-late { background:#fde6e2; color:#9c3426; } .student-free-slot { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:8px; padding:12px; border-radius:16px; background:#f1f6f4; } .student-free-slot.is-empty { grid-template-columns:1fr; color:var(--st-muted); } .student-free-slot p { margin:0; color:var(--st-ink); font-size:.82rem; line-height:1.35; } .student-free-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; } .student-free-icon svg { width:18px; height:18px; fill:none; stroke:var(--st-teal); stroke-width:1.9; stroke-linecap:round; } .student-free-slot .text-button { color:var(--st-teal); font-size:.8rem; } /* Próximas provas e entregas */ #student-workspace .student-panel { margin:16px 0; padding:16px; border:1px solid var(--st-line); border-radius:22px; background:#fffefb; } #student-workspace .student-panel h2 { margin:0 0 6px; color:var(--st-ink); font-size:1.05rem; } .student-upcoming-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:10px; border:1px solid var(--st-line); border-left:4px solid var(--subject-accent,#2f6f73); border-radius:14px; background:#fff; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-upcoming-date { display:flex; flex-direction:column; align-items:center; padding:5px 0; border-radius:10px; background:#f3f6f5; } .student-upcoming-date strong { color:var(--st-ink); font-size:1.05rem; line-height:1; } .student-upcoming-date small { color:var(--st-muted); font-size:.62rem; font-weight:800; text-transform:uppercase; } .student-upcoming-copy { min-width:0; } .student-upcoming-copy strong,.student-upcoming-copy small { display:block; } .student-upcoming-copy strong { color:var(--st-ink); font-size:.86rem; overflow-wrap:anywhere; } .student-upcoming-copy small { margin-top:2px; color:var(--st-muted); font-size:.72rem; } .student-days-pill { padding:4px 8px; border-radius:999px; background:#eef3f1; color:var(--st-teal); font-size:.68rem; font-weight:800; white-space:nowrap; } .student-upcoming-card.is-soon .student-days-pill { background:#fff3d6; color:#7a5a12; } .student-upcoming-card.is-late .student-days-pill { background:#fde6e2; color:#9c3426; } /* Agenda */ .student-day-group { margin-bottom:12px; padding:12px 14px 4px; border:1px solid var(--st-line); border-radius:20px; background:#fffefb; } .student-day-group h3 { margin:0 0 2px; color:var(--st-ink); font-size:.86rem; text-transform:capitalize; } .student-day-group.is-past { opacity:.78; } #student-workspace .student-filter-row button.active { border-color:var(--st-teal); background:var(--st-teal); color:#fff; } /* Matérias */ .student-subject-card { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-subject-card .subject-card-bar,.student-subject-head .subject-card-bar { display:block; width:35px; height:6px; margin-bottom:14px; border-radius:5px; background:var(--subject-color); } .student-subject-card strong { margin-bottom:4px; color:var(--st-ink); font-size:1rem; overflow-wrap:anywhere; } .student-subject-card small { margin-top:2px !important; color:var(--st-muted) !important; font-size:.72rem !important; line-height:1.3; } .subject-card-average { position:absolute; top:12px; right:12px; padding:3px 8px; border-radius:999px; background:#f3f6f5; color:var(--st-ink); font-size:.75rem; } .student-back { margin:0 0 8px; padding:6px 0; color:var(--st-teal); font-size:.85rem; } .student-subject-head h1 { margin:2px 0 14px; color:var(--st-ink); font-size:1.8rem; overflow-wrap:anywhere; } .student-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 14px; } .student-stat { min-width:0; padding:13px; border:1px solid var(--st-line); border-radius:16px; background:#fffefb; } .student-stat span,.student-stat small { display:block; color:var(--st-muted); font-size:.72rem; line-height:1.25; } .student-stat strong { display:block; margin:4px 0 2px; color:var(--st-ink); font-size:1.25rem; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .student-subject-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .student-subject-actions .secondary-button { min-height:44px; margin:0; padding:8px; font-size:.8rem; } .student-grade-list { display:grid; gap:6px; } .student-grade-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #eef1ee; } .student-grade-row strong,.student-grade-row small { display:block; } .student-grade-row strong { color:var(--st-ink); font-size:.86rem; } .student-grade-row small { color:var(--st-muted); font-size:.72rem; } .student-grade-row b { color:var(--st-ink); font-size:1.05rem; } .student-grade-summary { display:grid; grid-template-columns:auto auto; justify-content:space-between; gap:4px 12px; margin-top:6px; padding:10px 12px; border-radius:12px; background:#f1f6f4; color:var(--st-muted); font-size:.8rem; } .student-grade-summary b { color:var(--st-ink); text-align:right; } .student-grade-summary b.is-reached { color:#1f6b40; } .student-row-delete { width:30px; height:30px; border:0; border-radius:50%; background:#eef1ef; color:var(--st-muted); } .student-delete-subject { width:100%; margin-top:8px; } /* Progresso */ .student-progress-hero { display:grid; gap:12px; margin-bottom:14px; padding:16px; border-radius:22px; background:linear-gradient(135deg,var(--st-deep),var(--st-teal)); color:#fff; } .student-progress-hero span,.student-progress-hero small { display:block; color:#d8e5e1; font-size:.78rem; } .student-progress-hero strong { display:block; margin:2px 0; color:#fff; font-size:2.2rem; line-height:1.05; } .student-progress-bar { height:10px; border-radius:999px; background:#ffffff2e; overflow:hidden; } .student-progress-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--st-gold-2),var(--st-gold)); } .student-progress-bar.is-small { margin-top:10px; height:8px; background:#e8eeec; } .student-goal-list { display:grid; gap:4px; } .student-goal-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eef1ee; } .student-goal-row label { display:flex; align-items:center; gap:10px; margin:0; color:var(--st-ink); font-size:.86rem; font-weight:650; } .student-goal-row input { width:22px; height:22px; margin:0; accent-color:var(--st-teal); flex:none; } .student-goal-row.is-done span { color:var(--st-muted); text-decoration:line-through; } .student-inline-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; } .student-inline-form input { margin:0; } .student-inline-form .secondary-button { margin:0; min-height:44px; } .student-help { display:block; margin-top:6px; color:var(--st-muted); font-size:.72rem; line-height:1.35; } /* Tarefas */ .student-task-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--st-line); border-left:4px solid var(--subject-accent,#2f6f73); border-radius:14px; background:#fffefb; } .student-task-check { position:relative; display:grid; place-items:center; width:26px; height:26px; margin:0; } .student-task-check input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .student-task-check span { display:grid; place-items:center; width:24px; height:24px; border:2px solid #b9c8c4; border-radius:8px; background:#fff; } .student-task-check svg { width:15px; height:15px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; } .student-task-check input:checked + span { border-color:var(--st-teal); background:var(--st-teal); } .student-task-check input:checked + span svg { opacity:1; } .student-task-check input:focus-visible + span { outline:2px solid var(--st-gold); outline-offset:2px; } .student-task-body { min-width:0; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-task-body strong,.student-task-body small { display:block; } .student-task-body strong { color:var(--st-ink); font-size:.88rem; overflow-wrap:anywhere; } .student-task-body small { margin-top:2px; color:var(--st-muted); font-size:.72rem; line-height:1.3; } .student-task-row.status-completed .student-task-body strong { color:var(--st-muted); text-decoration:line-through; } /* Mais */ .student-link-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid var(--st-line); border-radius:18px; background:#fffefb; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-link-card strong,.student-link-card small { display:block; } .student-link-card strong { color:var(--st-ink); font-size:.95rem; } .student-link-card small { margin-top:2px; color:var(--st-muted); font-size:.75rem; } .student-link-icon,.student-organize-icon { width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:12px; background:#eef4f2; fill:none; stroke:var(--st-teal); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .student-link-chev { width:18px; height:18px; fill:none; stroke:#8a9a96; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Diálogos */ .student-dialog { --st-deep:#0b3036; --st-teal:#134a50; --st-ink:#10292c; --st-gold:#d8b15e; --st-muted:#5d6f6c; --st-line:#e2e7e4; } .student-organize-list { display:grid; gap:8px; margin-top:6px; } .student-organize-option { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 12px; border:1px solid var(--st-line); border-radius:16px; background:#fff; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-organize-option:hover,.student-organize-option:focus-visible { border-color:var(--st-teal); background:#f4f8f7; } .student-organize-option strong,.student-organize-option small { display:block; } .student-organize-option strong { color:var(--st-ink); font-size:.95rem; } .student-organize-option small { margin-top:2px; color:var(--st-muted); font-size:.75rem; line-height:1.3; } .student-item-meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:4px 0 14px; color:var(--st-muted); font-size:.82rem; } .student-item-meta>span:first-child { text-transform:capitalize; } .student-item-notes { flex-basis:100%; padding:10px 12px; border-radius:12px; background:#f3f6f5; color:var(--st-ink); } .student-item-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .student-item-actions button { min-height:46px; margin:0; } .student-item-actions .primary-button { grid-column:1 / -1; } .student-item-actions .text-button { grid-column:1 / -1; } .student-field label { display:block; margin:0 0 12px; color:var(--st-ink); font-size:.8rem; font-weight:700; } .student-field input,.student-field select,.student-field textarea { display:block; width:100%; margin:6px 0 0 !important; box-sizing:border-box; } #student-entry-fields .form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .student-repeat { margin:4px 0 12px; padding:12px; border:1px solid var(--st-line); border-radius:14px; background:#f8faf9; } .student-switch { display:flex; align-items:center; gap:10px; margin:0; color:var(--st-ink); font-size:.86rem; font-weight:700; } .student-switch input { width:22px; height:22px; margin:0 !important; accent-color:var(--st-teal); } .student-repeat-fields { margin-top:10px; } .student-repeat-fields .weekday-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .student-repeat-fields .weekday-chip.selected { border-color:var(--st-teal); background:var(--st-teal); } .is-confirming { box-shadow:0 0 0 2px #c4473a inset; } /* Navegação inferior do Estudante */ #student-workspace .student-bottom-nav { background:var(--st-deep); border-top:0; border-radius:22px 22px 0 0; box-shadow:0 -10px 24px #0b30361f; } #student-workspace .student-nav-button { color:#c3d3cf; gap:4px; } #student-workspace .student-nav-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #student-workspace .student-nav-button small { font-size:.66rem; } #student-workspace .student-nav-button.active { color:var(--st-gold-2); font-weight:850; } /* FOURMI CONNECT — local previews, scoped to Teacher and Student. */ .connect-student-toolbar,.connect-public-entry { display:none; } #workspace[data-profession="teacher"] .connect-student-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin:0 0 18px; } #workspace[data-profession="teacher"] .connect-student-toolbar input { min-width:0; margin:0; } #workspace[data-profession="teacher"] .connect-student-toolbar .primary-button { width:auto; min-height:46px; white-space:nowrap; font-size:.78rem; padding:10px 13px; } #workspace[data-profession="teacher"] .connect-public-entry { display:flex; width:100%; } .connect-student-card { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:5px 0 0; } .connect-handle { display:block; color:#637a73; font-size:.72rem; font-weight:700; overflow-wrap:anywhere; } .connect-status { display:inline-flex; align-items:center; max-width:100%; border-radius:999px; padding:5px 9px; background:#e9f2ed; color:#105440; font-size:.68rem; font-weight:800; line-height:1.2; } .connect-status.is-small { padding:4px 7px; font-size:.61rem; } .connect-status-invited { background:#fff1cf; color:#815900; }.connect-status-connected { background:#e0f5ee; color:#087552; } .connect-student-detail { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px; margin:0 0 14px; border-radius:13px; background:#eef6f2; } .connect-student-detail>div { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-width:0; } .connect-student-detail .secondary-button { width:auto; margin:0; } .connect-dialog { width:min(calc(100% - 22px),560px); max-height:min(88dvh,850px); overflow-y:auto; } .connect-dialog-shell { padding:22px; min-width:0; } .connect-dialog .dialog-heading { position:sticky; top:-22px; z-index:2; background:#fff; padding:0 0 11px; } .connect-dialog form { padding:0; } .connect-dialog input,.connect-dialog select,.connect-dialog textarea { min-width:0; } .connect-choice-card { display:block; width:100%; text-align:left; padding:15px; margin:9px 0; border:1px solid #dbe8e1; border-radius:16px; color:var(--ink); background:#fbfdfb; } .connect-choice-card strong,.connect-choice-card small { display:block; }.connect-choice-card strong { color:var(--forest-800); }.connect-choice-card small { margin-top:3px; color:var(--muted); font-size:.72rem; } .connect-empty { margin:16px 0; padding:22px 18px; border:1px dashed #bed4c9; border-radius:18px; background:#f7faf8; text-align:center; color:var(--muted); } .connect-empty>span { display:block; color:#2b8e70; font-size:1.8rem; }.connect-empty h2 { color:var(--ink); font-size:1rem; }.connect-empty p { margin:7px 0 0; font-size:.82rem; line-height:1.45; } .connect-empty .secondary-button { margin:15px 0 0; } .connect-notice { margin:14px 0; padding:11px 12px; border-radius:12px; background:#f6f4eb; color:#5c655e; font-size:.76rem; line-height:1.45; } .connect-invite-summary { display:grid; gap:4px; padding:14px; border-radius:14px; background:#edf7f1; }.connect-invite-summary small { color:var(--muted); }.connect-invite-summary .connect-status { justify-self:start; } .connect-dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.connect-dialog-actions>.primary-button,.connect-dialog-actions>.secondary-button { width:auto; flex:1 1 160px; margin:0; }.connect-dialog-actions>.text-button { flex:1 1 100%; } .connect-form-row,.connect-filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .connect-form-row label,.connect-filter-grid label { min-width:0; } .connect-dialog fieldset { margin:2px 0 15px; border:0; padding:0; min-width:0; }.connect-dialog legend { margin:0 0 8px; font-size:.8rem; font-weight:800; } .connect-chip-grid { display:flex; flex-wrap:wrap; gap:7px; min-width:0; } .connect-chip { margin:0; }.connect-chip input { position:absolute; opacity:0; width:1px; height:1px; }.connect-chip span,.connect-chip-static { display:inline-flex; padding:8px 10px; border:1px solid #d4e2d9; border-radius:999px; background:#f9fcfa; font-size:.72rem; font-weight:750; } .connect-chip input:checked+span { background:var(--forest-800); border-color:var(--forest-800); color:white; }.connect-chip input:focus-visible+span { outline:3px solid var(--gold); } .connect-service-list { display:grid; gap:8px; }.connect-service-option { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #dce8e1; border-radius:12px; }.connect-service-option input { flex:none; width:18px; margin:0; }.connect-service-option span { min-width:0; }.connect-service-option strong,.connect-service-option small { display:block; }.connect-service-option small { color:var(--muted); } .connect-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }.connect-toggle input { width:20px; flex:none; margin:0; }.connect-toggle.is-locked { color:var(--muted); } .connect-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:4px; margin:12px 0 18px; border-radius:15px; background:#e8f0ed; } .connect-tabs button { min-width:0; padding:10px 5px; border:0; border-radius:12px; background:transparent; color:#58726d; font-size:.68rem; font-weight:800; line-height:1.2; } .connect-tabs button.is-active { background:#fff; color:#07544d; box-shadow:0 2px 8px #002a211a; } .connect-teacher-list { display:grid; gap:12px; }.connect-teacher-card,.connect-public-view,.connect-student-settings-card { padding:17px; border:1px solid #dbe7e3; border-radius:19px; background:#fffefa; } .connect-teacher-card p { margin:8px 0; color:var(--muted); font-size:.82rem; }.connect-teacher-card>.secondary-button { margin:12px 0 0; } .connect-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }.connect-card-actions .secondary-button { width:auto; flex:1 1 130px; margin:0; }.connect-card-actions .text-button { flex:1 1 100px; } .connect-teacher-heading,.connect-public-hero { display:flex; align-items:center; gap:11px; }.connect-teacher-heading img,.connect-teacher-heading>span,.connect-public-hero img,.connect-public-hero>span { width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%; background:#eaf3ee; object-fit:cover; color:#0c7154; }.connect-public-hero img,.connect-public-hero>span { width:58px; height:58px; } .connect-teacher-heading>div,.connect-public-hero>div { min-width:0; }.connect-public-hero h3 { margin:0; font-size:1.2rem; }.connect-public-hero p { margin:3px 0 0; color:var(--muted); font-size:.79rem; } .connect-review-empty { color:#667a74; font-size:.75rem; }.connect-public-view h4 { margin:16px 0 8px; }.connect-service-card { padding:12px; margin:7px 0; border:1px solid #e2e9e4; border-radius:12px; }.connect-service-card strong,.connect-service-card small { display:block; }.connect-service-card small { margin-top:4px; color:var(--muted); } .connect-find-form label { display:block; }.connect-find-form input { margin-top:6px; }.connect-filter-grid select { margin:5px 0 10px; } .connect-student-settings-card { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0; margin:0 0 16px; color:inherit; font:inherit; text-align:left; cursor:pointer; }.connect-student-settings-card:hover,.connect-student-settings-card:focus-visible { border-color:#c9a454; outline:2px solid #c9a45465; outline-offset:2px; }.connect-student-settings-content { display:block; min-width:0; }.connect-student-settings-card strong,.connect-student-settings-card small,.connect-student-settings-card .eyebrow { display:block; }.connect-student-settings-card .eyebrow { margin:0 0 8px; }.connect-student-settings-card strong { overflow-wrap:anywhere; }.connect-student-settings-meta { display:block; margin-top:10px; color:#586e67; font-size:.76rem; }.connect-student-settings-action { display:block; margin-top:8px; color:#008b62; font-size:.78rem; font-weight:800; }.connect-student-settings-chevron { flex:none; color:#879d96; font-size:1.4rem; }.connect-local-exit { display:block; margin:18px auto 0; } #student-workspace .student-nav-button { min-width:0; }.student-nav-button small { max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:center; line-height:1.12; } @media(max-width:390px){#workspace[data-profession="teacher"] .connect-student-toolbar { grid-template-columns:1fr; }.connect-form-row,.connect-filter-grid { grid-template-columns:1fr; }.connect-dialog-shell { padding:17px; }.connect-tabs button { font-size:.61rem; padding:9px 3px; }#student-workspace .student-nav-button small { font-size:.55rem; }} #student-workspace .student-nav-button:focus-visible { outline:2px solid var(--st-gold-2); outline-offset:-4px; border-radius:12px; } @media (max-width:359px){ #student-workspace .barber-timeline-item { grid-template-columns:38px 10px 28px minmax(0,1fr) auto 6px; gap:5px; } #student-workspace .barber-timeline-avatar,#student-workspace .barber-timeline-avatar>span { width:28px; height:28px; } #student-workspace .barber-timeline-status { max-width:76px; } .student-subject-actions { grid-template-columns:1fr; } } .student-organize-shell,.student-item-shell { padding:20px 18px 18px; } #student-workspace .eyebrow,.student-dialog .eyebrow { text-transform:uppercase; } .student-day-group h3 { text-transform:none; } .student-day-group h3::first-letter { text-transform:uppercase; } .student-item-meta>span:first-child { text-transform:none; } .student-item-meta>span:first-child::first-letter { text-transform:uppercase; } .student-hero { background-image:linear-gradient(180deg,#0a2d33c4 0%,#0c3a4085 34%,#0b3036c2 70%,#0b3036f2 100%),linear-gradient(90deg,#082a2fd6 0%,#0a303566 58%,#0a303500 100%),url("assets/student-hero-desk.jpg"); } #student-workspace .barber-timeline-item:first-child .barber-timeline-marker::before { top:50%; } #student-workspace .barber-timeline-item:last-child .barber-timeline-marker::before { bottom:50%; } .student-task-check input { z-index:2; } #student-workspace .barber-timeline-copy strong,#student-workspace .barber-timeline-copy small { overflow-wrap:anywhere; text-overflow:clip; } /* ===== Estudante v2 — agenda Hoje/Semana/Mês, caixa de entrada, foco, metas, busca ===== */ .sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } #student-workspace .student-heading-actions { display:flex; align-items:center; gap:8px; flex:none; } #student-workspace .circle-button.is-ghost { display:grid; place-items:center; background:#fff; border:1px solid var(--st-line); box-shadow:none; color:var(--st-teal); } #student-workspace .circle-button.is-ghost svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } #student-workspace .student-empty { display:grid; justify-items:center; gap:10px; padding:20px 12px; border-color:#d5dfdc; background:#fbfcfb; color:var(--st-muted); font-size:.8rem; line-height:1.4; } #student-workspace .student-empty p { margin:0; } #student-workspace .student-empty .primary-button,#student-workspace .student-empty .secondary-button { width:auto; margin:0; padding:10px 16px; } /* Segmentado / tabs */ .student-segmented { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; margin:0 0 12px; padding:4px; border-radius:14px; background:#e8eeec; } .student-segmented button { min-height:38px; padding:6px 4px; border:0; border-radius:10px; background:transparent; color:var(--st-muted); font:inherit; font-size:.8rem; font-weight:750; cursor:pointer; overflow-wrap:anywhere; } .student-segmented button.active { background:#fff; color:var(--st-ink); box-shadow:0 2px 8px #0b30361a; } .student-segmented button:focus-visible { outline:2px solid var(--st-teal); outline-offset:1px; } .student-segmented.is-tabs { margin-top:2px; } .student-agenda-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 10px; } .student-select-filter { flex:1; min-width:0; margin:0; } .student-select-filter select,.student-select-row select { width:100%; min-height:40px; margin:0; padding:6px 10px; border:1px solid var(--st-line); border-radius:12px; background:#fff; color:var(--st-ink); font-size:.8rem; } .student-select-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:-4px 0 12px; } .student-select-row select:last-child { grid-column:1 / -1; } /* Caixa de entrada */ .student-inbox-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; margin:0 0 12px; padding:11px 12px; border:1px dashed #b9cbc6; border-radius:16px; background:#f6faf8; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-inbox-card strong,.student-inbox-card small { display:block; } .student-inbox-card strong { color:var(--st-ink); font-size:.9rem; } .student-inbox-card small { color:var(--st-muted); font-size:.74rem; } .student-inbox-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#fff; } .student-inbox-icon svg { width:19px; height:19px; fill:none; stroke:var(--st-teal); stroke-width:1.9; stroke-linejoin:round; } .student-inbox-form { margin:10px 0 4px; } .student-inbox-form .primary-button { width:auto; min-height:44px; margin:0; padding:0 16px; } .student-inbox-row,.student-plan-row { display:grid; gap:10px; padding:12px; border:1px solid var(--st-line); border-left:4px solid var(--subject-accent,#2f6f73); border-radius:14px; background:#fffefb; } .student-plan-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; } .student-inbox-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .student-inbox-actions .secondary-button,.student-plan-row .secondary-button,.student-overdue-actions .secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:40px; margin:0; padding:6px 8px; font-size:.74rem; line-height:1.15; overflow-wrap:anywhere; } .student-inbox-actions svg,.student-plan-row svg,.student-myday-tag svg { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } #student-workspace .secondary-button.is-on { border-color:var(--st-gold); background:#fff6dd; color:#6e5212; } .student-myday-tag { display:inline-flex !important; align-items:center; gap:4px; color:#8a6716 !important; font-weight:700; } /* Data / semana / mês */ .student-date-nav { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:6px; margin:0 0 10px; } .student-date-nav strong { color:var(--st-ink); font-size:.95rem; text-align:center; overflow-wrap:anywhere; } .student-date-nav strong::first-letter { text-transform:uppercase; } #student-workspace .icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--st-line); border-radius:12px; background:#fff; color:var(--st-teal); cursor:pointer; } #student-workspace .icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .student-week-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:0 0 12px; } .student-week-strip button { display:grid; justify-items:center; gap:2px; min-width:0; min-height:62px; padding:7px 2px 6px; border:1px solid var(--st-line); border-radius:12px; background:#fff; color:var(--st-ink); font:inherit; cursor:pointer; } .student-week-strip small { color:var(--st-muted); font-size:.62rem; font-weight:750; text-transform:capitalize; max-width:100%; overflow:hidden; } .student-week-strip b { font-size:1rem; } .student-week-strip button.is-today b { color:var(--st-teal); text-decoration:underline; text-underline-offset:3px; } .student-week-strip button.active { border-color:var(--st-teal); background:var(--st-teal); color:#fff; } .student-week-strip button.active small { color:#d8e7e3; } .student-load { display:block; width:70%; height:4px; border-radius:4px; background:#e5ecea; overflow:hidden; } .student-load i { display:block; height:100%; background:var(--st-gold); } .student-month-grid { margin:0 0 12px; padding:10px; border:1px solid var(--st-line); border-radius:18px; background:#fffefb; } .student-month-head,.student-month-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; } .student-month-head span { padding:2px 0 6px; color:var(--st-muted); font-size:.66rem; font-weight:800; text-align:center; text-transform:uppercase; } .student-month-days button,.student-month-days span { min-width:0; min-height:42px; } .student-month-days button { display:grid; justify-items:center; align-content:center; gap:3px; padding:4px 0; border:0; border-radius:10px; background:transparent; color:var(--st-ink); font:inherit; font-size:.82rem; cursor:pointer; } .student-month-days button.is-today b { color:var(--st-teal); text-decoration:underline; text-underline-offset:3px; } .student-month-days button.active { background:var(--st-teal); color:#fff; } .student-month-days button.active.is-today b { color:#fff; } .student-dots { display:flex; gap:2px; height:5px; } .student-dots i { display:block; width:5px; height:5px; border-radius:50%; } .student-month-days button.active .student-dots i { box-shadow:0 0 0 1px #fff; } .student-day-group h3 { margin-bottom:4px; } /* Home: configuração inicial, pendências, foco, planejar dia */ .student-setup { margin:14px 0 0; } .student-setup-card { padding:16px; border:1px solid #ead9b0; border-radius:22px; background:linear-gradient(180deg,#fffaf0,#fffefb); } .student-setup-card .student-help { margin:0 0 10px; } .student-setup-step { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:50px; margin:6px 0 0; padding:8px 10px; border:1px solid var(--st-line); border-radius:14px; background:#fff; color:var(--st-ink); font:inherit; font-size:.86rem; font-weight:700; text-align:left; cursor:pointer; } .student-setup-step.is-done { color:var(--st-muted); text-decoration:line-through; cursor:default; } .student-setup-num { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#eef4f2; color:var(--st-teal); font-size:.8rem; font-weight:850; } .student-setup-num svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; } .student-setup-step.is-done .student-setup-num { background:#e3f4e9; color:#1f6b40; } .student-focus-banner-host { margin:14px 0 0; } .student-focus-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:18px; background:linear-gradient(135deg,var(--st-deep),var(--st-teal)); color:#fff; font:inherit; text-align:left; cursor:pointer; } .student-focus-banner svg { width:26px; height:26px; fill:none; stroke:var(--st-gold-2); stroke-width:1.8; } .student-focus-banner strong,.student-focus-banner small { display:block; } .student-focus-banner small { color:#cfe0dc; font-size:.74rem; } .student-focus-banner b { font-size:1.25rem; font-variant-numeric:tabular-nums; } .student-plan-day-button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:46px; margin:10px 0 0; padding:8px 12px; border:1px solid #ead9b0; border-radius:14px; background:#fffaf0; color:#6e5212; font:inherit; font-size:.86rem; font-weight:750; text-align:left; cursor:pointer; } .student-plan-day-button>svg:first-child { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; } .student-overdue-panel { border-color:#f1d2cc !important; background:#fffaf8 !important; } .student-overdue-row { display:grid; gap:8px; padding:10px 0; border-bottom:1px solid #f3e3df; } .student-overdue-row:last-child { border-bottom:0; } .student-overdue-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; align-items:center; padding:0 0 0 10px; border:0; border-left:3px solid var(--subject-accent,#2f6f73); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-overdue-copy strong { color:var(--st-ink); font-size:.88rem; overflow-wrap:anywhere; } .student-overdue-copy small { grid-column:1; color:var(--st-muted); font-size:.72rem; } .student-overdue-copy .student-status { grid-column:2; grid-row:1 / span 2; } .student-overdue-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; } /* Prioridade (cor + texto, nunca só cor) */ .student-task-tags { display:grid; justify-items:end; gap:4px; } .student-priority { display:inline-flex; align-items:center; gap:4px; color:var(--st-muted); font-size:.64rem; font-weight:800; white-space:nowrap; } .student-priority::before { content:""; width:7px; height:7px; border-radius:50%; background:#8aa29c; } .student-priority.priority-high { color:#9c3426; } .student-priority.priority-high::before { background:#d1543f; } .student-priority.priority-medium { color:#7a5a12; } .student-priority.priority-medium::before { background:#d8b15e; } .student-status.status-cancelled { background:#eceeed; color:#6b7471; text-decoration:line-through; } #student-workspace .student-timeline-item.status-cancelled { opacity:.6; } #student-workspace .barber-timeline-status { display:grid; justify-items:end; gap:4px; } .student-task-row.status-cancelled .student-task-body strong { color:var(--st-muted); text-decoration:line-through; } /* Matéria */ .student-subject-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; } .student-subject-head .subject-card-bar { grid-column:1 / -1; margin-bottom:4px !important; } .student-subject-head h1 { margin-bottom:4px; } .student-subject-head small { display:block; margin-bottom:12px; color:var(--st-muted); font-size:.78rem; } .student-subject-head .secondary-button { width:auto; min-height:40px; margin:20px 0 0; padding:6px 14px; font-size:.8rem; } .student-grade-row.is-pending b { color:var(--st-muted); font-size:.78rem; font-weight:700; } .student-grade-row .text-button { font-size:.76rem; color:var(--st-teal); } .student-focus-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0 0 4px; } .student-focus-cta svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; } .student-notes { margin:0; color:var(--st-ink); font-size:.86rem; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; } /* Histórico / ranking / evolução / busca */ .student-history-list,.student-rank-list { display:grid; gap:2px; } .student-history-row { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:2px 10px; width:100%; padding:9px 0 9px 10px; border:0; border-bottom:1px solid #eef1ee; border-left:3px solid var(--subject-accent,#2f6f73); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-history-row span { color:var(--st-muted); font-size:.74rem; font-weight:700; } .student-history-row span::first-letter { text-transform:uppercase; } .student-history-row strong { color:var(--st-ink); font-size:.86rem; overflow-wrap:anywhere; } .student-history-row b { color:var(--st-ink); font-size:.86rem; font-variant-numeric:tabular-nums; } .student-history-row small { grid-column:2 / -1; color:var(--st-muted); font-size:.72rem; overflow-wrap:anywhere; } .student-history-row small:empty { display:none; } .student-rank-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:9px 0; border-bottom:1px solid #eef1ee; } .student-rank-row:last-child { border-bottom:0; } .student-rank-row span { display:flex; align-items:center; gap:8px; color:var(--st-ink); font-size:.86rem; font-weight:700; min-width:0; overflow-wrap:anywhere; } .student-rank-row span::before { content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--subject-accent,#2f6f73); } .student-rank-row b { color:var(--st-ink); font-size:.86rem; font-variant-numeric:tabular-nums; } .student-rank-row b.is-reached { color:#1f6b40; } .student-rank-row .student-progress-bar { grid-column:1 / -1; margin-top:4px; } .student-rank-row small { grid-column:1 / -1; color:var(--st-muted); font-size:.7rem; } .student-stat-grid.is-three { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:6px 0 0; } .student-stat-grid.is-three .student-stat { padding:10px; } .student-stat-grid.is-three .student-stat strong { font-size:1.05rem; } .student-goal-row.is-typed { align-items:start; } .student-goal-copy { min-width:0; } .student-goal-copy>span { display:flex; align-items:center; gap:6px; color:var(--st-ink); font-size:.86rem; font-weight:700; overflow-wrap:anywhere; } .student-goal-copy>small { display:block; color:var(--st-muted); font-size:.74rem; } .student-goal-copy .student-progress-bar { margin-top:6px; } .student-goal-done { width:16px; height:16px; flex:none; fill:none; stroke:#1f6b40; stroke-width:3; stroke-linecap:round; } .student-goal-row.is-typed.is-done .student-goal-copy>span { text-decoration:none; } .student-search-field { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; margin:0 0 12px; padding:0 12px; border:1px solid var(--st-line); border-radius:14px; background:#fff; } .student-search-field svg { width:18px; height:18px; fill:none; stroke:var(--st-muted); stroke-width:2; stroke-linecap:round; } .student-search-field input { min-height:46px; margin:0; padding:0; border:0; background:transparent; font-size:1rem; outline:none; } .student-search-field:focus-within { border-color:var(--st-teal); box-shadow:0 0 0 3px #134a5022; } .student-search-row { display:grid; gap:2px; width:100%; padding:11px 12px; border:1px solid var(--st-line); border-left:4px solid var(--subject-accent,#2f6f73); border-radius:14px; background:#fffefb; color:inherit; font:inherit; text-align:left; cursor:pointer; } .student-search-row strong { color:var(--st-ink); font-size:.88rem; overflow-wrap:anywhere; } .student-search-row small { color:var(--st-muted); font-size:.72rem; } #student-workspace .student-panel h2 small { color:var(--st-muted); font-size:.78rem; font-weight:700; } /* Formulário: mais opções, cores, subtarefas, conflito */ .student-dialog { --st-cream:#f7f5ef; } #student-entry-dialog,#student-complete-dialog,#student-reschedule-dialog,#student-subject-delete-dialog,#student-item-dialog,#student-organize-dialog { max-height:min(92vh,92dvh); overflow-y:auto; overscroll-behavior:contain; } .student-more-options { margin:2px 0 12px; border:1px solid var(--st-line); border-radius:14px; background:#f8faf9; } .student-more-options summary { min-height:44px; display:flex; align-items:center; padding:0 12px; color:var(--st-teal); font-size:.86rem; font-weight:800; cursor:pointer; list-style:none; } .student-more-options summary::-webkit-details-marker { display:none; } .student-more-options summary::after { content:"＋"; margin-left:auto; } .student-more-options[open] summary::after { content:"–"; } .student-more-body { padding:2px 12px 4px; } .student-swatches { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; padding:0; border:0; } .student-swatches legend { width:100%; margin-bottom:6px; color:var(--st-ink); font-size:.8rem; font-weight:700; } .student-swatch { position:relative; display:block; width:34px; height:34px; margin:0; border-radius:50%; background:var(--swatch); cursor:pointer; } .student-swatch input[type=radio] { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .student-swatch:has(input[type=radio]:checked) { box-shadow:0 0 0 3px #fff,0 0 0 5px var(--st-ink); } .student-swatch:has(input:focus-visible) { outline:2px solid var(--st-gold); outline-offset:4px; } .student-swatch.is-custom { background:conic-gradient(#d64545,#c99a2e,#159b6b,#2f6fdb,#7b5cd6,#d64545); } .student-swatch.is-custom input[type=color] { position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; margin:0; padding:0; border:2px solid #fff; border-radius:50%; background:var(--swatch); } .student-field-label { display:block; margin:0 0 6px; color:var(--st-ink); font-size:.8rem; font-weight:700; } .student-subtasks { margin:0 0 12px; } .student-subtasks ul,.student-item-subtasks ul { display:grid; gap:4px; margin:0 0 8px; padding:0; list-style:none; } .student-subtasks li,.student-item-subtasks li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:#fff; } .student-subtasks label,.student-item-subtasks label { display:flex; align-items:center; gap:10px; margin:0; color:var(--st-ink); font-size:.84rem; font-weight:600; overflow-wrap:anywhere; } .student-subtasks input[type=checkbox],.student-item-subtasks input[type=checkbox] { width:22px; height:22px; margin:0 !important; flex:none; accent-color:var(--st-teal); } .student-item-subtasks { margin:-4px 0 14px; padding:10px; border-radius:14px; background:#f3f6f5; } .student-item-subtasks li { grid-template-columns:1fr; } .student-item-subtasks input:checked + span { color:var(--st-muted); text-decoration:line-through; } .student-conflict { margin:0 0 12px; padding:12px; border:1px solid #f0c7bd; border-radius:14px; background:#fff4f1; color:#7a2f22; font-size:.82rem; } .student-conflict p { margin:0 0 10px; line-height:1.4; } .student-conflict-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .student-conflict-actions button { min-height:44px; margin:0; padding:6px 8px; font-size:.78rem; } #student-entry-fields .student-switch { margin:-4px 0 12px; font-size:.8rem; } .student-repeat-fields .weekday-chips.hidden { display:none; } .student-item-actions.is-stacked { grid-template-columns:1fr; } .student-subject-delete-counts { margin:0 0 14px; color:var(--st-ink); font-size:.88rem; } .student-subject-delete-counts p { margin:0 0 6px; } .student-subject-delete-counts ul { margin:0; padding-left:18px; color:var(--st-muted); } .danger-text { color:#b23b2c !important; } /* Modo foco */ .student-focus { position:absolute; inset:0; z-index:40; display:grid; place-items:center; padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background:#06222699; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); overflow-y:auto; } .student-focus.hidden { display:none; } .student-focus-card { width:min(100%,400px); padding:20px 18px; border-radius:26px; background:#fffefb; box-shadow:0 24px 60px #00000040; } .student-focus-card.is-running { background:linear-gradient(180deg,var(--st-deep),#0f3d43); color:#fff; } .student-focus-card.is-running .eyebrow { color:var(--st-gold-2); } .student-focus-card.is-running h2 { color:#fff; overflow-wrap:anywhere; } .student-focus-card.is-running .close-button { color:#fff; background:#ffffff1f; } .student-duration-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px; padding:0; border:0; } .student-duration-options legend { margin-bottom:6px; color:var(--st-ink); font-size:.8rem; font-weight:700; } .student-duration-options label { position:relative; margin:0; } .student-duration-options input { position:absolute; opacity:0; inset:0; margin:0; } .student-duration-options span { display:grid; place-items:center; min-height:48px; border:1px solid var(--st-line); border-radius:14px; background:#fff; color:var(--st-ink); font-weight:800; } .student-duration-options input:checked + span { border-color:var(--st-teal); background:var(--st-teal); color:#fff; } .student-duration-options input:focus-visible + span { outline:2px solid var(--st-gold); outline-offset:2px; } .student-focus-ring { --focus-progress:0%; display:grid; place-items:center; width:min(64vw,230px); aspect-ratio:1; margin:8px auto 18px; border-radius:50%; background:conic-gradient(var(--st-gold-2) var(--focus-progress),#ffffff26 0); } .student-focus-ring>div { display:grid; place-items:center; width:84%; aspect-ratio:1; border-radius:50%; background:var(--st-deep); text-align:center; } .student-focus-ring strong { display:block; font-size:clamp(2.2rem,12vw,3rem); font-weight:850; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .student-focus-ring small { display:block; color:#cfe0dc; font-size:.78rem; } .student-focus-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .student-focus-actions button { min-height:52px; margin:0; } .student-focus-card.is-running .secondary-button { border-color:#ffffff55; background:transparent; color:#fff; } .student-focus-card.is-running .text-button { display:block; margin:12px auto 0; color:#f4b5a9 !important; } .student-focus-card.is-result { text-align:center; } .student-focus-card.is-result p { margin:4px 0; color:var(--st-muted); } .student-focus-check { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 8px; border-radius:50%; background:#e3f4e9; } .student-focus-check svg { width:30px; height:30px; fill:none; stroke:#1f6b40; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .student-focus-total { display:block; margin:2px 0 6px; color:var(--st-ink); font-size:2.2rem; font-weight:850; } .student-feedback { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:6px 0 14px; } .student-feedback button { min-height:44px; margin:0; padding:4px; font-size:.8rem; } .student-focus-card .form-error:empty { display:none; } @media (max-width:374px){ .student-free-slot:not(.is-empty) { grid-template-columns:auto minmax(0,1fr); } .student-free-slot .text-button { grid-column:2; justify-self:start; padding:4px 0; } } /* ===== Estudante 2.1 — Agenda premium em grade ===== */ #student-workspace .student-nav-button small { white-space:nowrap; font-size:clamp(.56rem,2.9vw,.66rem); letter-spacing:-.01em; } .student-page-subtitle { margin:2px 0 0; color:var(--st-muted); font-size:.84rem; line-height:1.3; } .sg-views button.active { background:var(--st-deep); color:#fff; box-shadow:0 4px 12px #0b303633; } .sg-range-row { margin:-2px 0 10px; } .sg-custom-range { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:end; gap:8px; margin:0 0 10px; color:var(--st-muted); font-size:.74rem; font-weight:700; } .sg-custom-range label { display:grid; gap:4px; margin:0; } .sg-custom-range input { width:100%; min-height:40px; margin:0; padding:4px 8px; border:1px solid var(--st-line); border-radius:12px; background:#fff; font-size:.82rem; } .sg-custom-range span { padding-bottom:10px; } .sg-settings { display:grid; gap:8px; margin:0 0 12px; padding:10px 12px; border:1px solid var(--st-line); border-radius:18px; background:#fffefb; } .sg-hours { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:var(--st-ink); font-size:.82rem; } .sg-hours label { margin:0; } .sg-settings-icon { width:18px; height:18px; flex:none; fill:none; stroke:var(--st-teal); stroke-width:1.9; stroke-linecap:round; } .sg-hours select { min-height:38px; margin:0; padding:4px 26px 4px 10px; border:1px solid var(--st-line); border-radius:11px; background-color:#fff; color:var(--st-ink); font-size:.86rem; font-weight:700; font-variant-numeric:tabular-nums; } .sg-toggles { display:flex; flex-wrap:wrap; gap:6px 16px; } .sg-toggle { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:36px; margin:0; color:var(--st-ink); font-size:.82rem; font-weight:600; cursor:pointer; } .sg-toggle input { position:absolute; opacity:0; width:1px; height:1px; } .sg-toggle i { position:relative; width:40px; height:24px; border-radius:999px; background:#dfe6e3; transition:background .15s; } .sg-toggle i::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .15s; } .sg-toggle input:checked + i { background:var(--st-teal); } .sg-toggle input:checked + i::after { transform:translateX(16px); } .sg-toggle input:focus-visible + i { outline:2px solid var(--st-gold); outline-offset:2px; } .sg-inbox { display:inline-flex; flex:none; align-items:center; gap:6px; min-height:40px; padding:0 12px; border:1px dashed #b9cbc6; border-radius:12px; background:#f6faf8; color:var(--st-ink); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; } .sg-inbox svg { width:16px; height:16px; fill:none; stroke:var(--st-teal); stroke-width:1.9; stroke-linejoin:round; } .sg-inbox b { min-width:20px; padding:1px 6px; border-radius:999px; background:var(--st-gold-2); color:var(--st-ink); font-size:.7rem; text-align:center; } .sg-date-nav { grid-template-columns:44px minmax(0,1fr) 44px auto; } .sg-today { min-height:44px; padding:0 14px; border:1px solid var(--st-line); border-radius:12px; background:#fff; color:var(--st-teal); font:inherit; font-size:.8rem; font-weight:800; cursor:pointer; } .sg-today.is-current { border-color:transparent; background:#e8f1ee; } /* Grade */ .sg-scroll { position:relative; max-height:max(380px,calc(100dvh - 250px)); overflow:auto; overscroll-behavior:contain; border:1px solid var(--st-line); border-radius:18px; background:#fffefb; box-shadow:0 10px 26px #0b30360f; -webkit-overflow-scrolling:touch; } .sg { --sg-time:46px; --sg-col:80px; display:grid; min-width:100%; width:max-content; } .sg.is-day { width:100%; } @media (min-width:600px){ .sg { --sg-col:110px; } } .sg-corner,.sg-head { position:sticky; top:0; z-index:4; display:grid; place-content:center; justify-items:center; min-height:48px; padding:4px 2px; border-bottom:1px solid var(--st-line); background:#fffefb; } .sg-corner { left:0; z-index:6; color:var(--st-ink); font-size:.72rem; font-weight:800; } .sg-head b { color:var(--st-ink); font-size:.82rem; } .sg-head small { color:var(--st-muted); font-size:.68rem; white-space:nowrap; } .sg-head.is-today { background:#eef6f1; box-shadow:inset 0 -3px 0 var(--st-teal); } .sg-head.is-today b,.sg-head.is-today small { color:var(--st-teal); font-weight:800; } .sg-band-label { position:sticky; left:0; z-index:3; display:grid; place-items:center; padding:4px 2px; border-bottom:1px solid var(--st-line); background:#f7f5ef; color:var(--st-muted); font-size:.58rem; font-weight:800; text-align:center; text-transform:uppercase; line-height:1.1; } .sg-band { display:flex; flex-direction:column; gap:3px; min-width:0; padding:4px 3px; border-bottom:1px solid var(--st-line); border-left:1px solid #eef1ee; background:#f7f5ef; } .sg-chip { display:flex; align-items:center; gap:4px; min-width:0; min-height:26px; padding:2px 6px; border:0; border-left:3px solid var(--block); border-radius:8px; background:color-mix(in srgb,var(--block) 13%,#fff); color:var(--st-ink); font:inherit; font-size:.66rem; font-weight:700; text-align:left; cursor:pointer; } .sg-chip span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .sg-times { position:sticky; left:0; z-index:3; border-right:1px solid var(--st-line); background:#fffefb; } .sg-time { position:absolute; left:0; right:4px; margin-top:3px; color:var(--st-muted); font-size:.66rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; } .sg-col { position:relative; min-width:0; border-left:1px solid #eef1ee; } .sg-col.is-today { background:#f2f8f4; } .sg-col.is-weekend { background:#fbfaf6; } .sg-slot { display:block; width:100%; margin:0; padding:0; border:0; border-top:1px dashed #edf0ed; background:transparent; cursor:pointer; } .sg-slot.is-hour { border-top:1px solid #e3e9e6; } .sg-slot:hover { background:#134a500d; } .sg-slot:focus-visible { outline:2px solid var(--st-gold); outline-offset:-2px; background:#d8b15e1f; } .sg-slot.is-drop { background:#d8b15e33; box-shadow:inset 0 0 0 2px var(--st-gold); } .sg-block { position:absolute; z-index:2; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; gap:1px; min-width:0; margin:0 0 0 2px; padding:4px 5px 4px 7px; border:0; border-left:3px solid var(--block); border-radius:10px; background:color-mix(in srgb,var(--block) 14%,#fff); box-shadow:0 2px 6px #0b30361a; color:var(--st-ink); font:inherit; text-align:left; overflow:hidden; cursor:pointer; } .sg-block-title { display:flex; align-items:flex-start; gap:4px; min-width:0; font-size:.72rem; font-weight:800; line-height:1.2; } .sg-block-title>span { min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; } .sg-block-time { color:#4b5e5a; font-size:.62rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; } .sg-icon { width:12px; height:12px; flex:none; margin-top:1px; fill:none; stroke:var(--block); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; } .sg-block.is-short { flex-direction:row; align-items:center; gap:4px; padding-top:2px; padding-bottom:2px; } .sg-block.is-short .sg-block-title>span { -webkit-line-clamp:1; white-space:nowrap; text-overflow:ellipsis; display:block; } .sg-block.is-short .sg-block-time { display:none; } .sg-block.status-completed { opacity:.72; } .sg-block.status-completed .sg-block-title>span { text-decoration:line-through; text-decoration-thickness:1px; } .sg-block.status-cancelled { opacity:.45; border-left-style:dashed; } .sg-block.status-late { box-shadow:0 0 0 1px #e8b4aa,0 2px 6px #0b30361a; } .sg-block.type-reminder { border-radius:999px 10px 10px 999px; background:color-mix(in srgb,var(--block) 18%,#fffaf0); } .sg-block:focus-visible,.sg-chip:focus-visible { outline:2px solid var(--st-ink); outline-offset:1px; z-index:5; } .sg.is-drag .sg-block { pointer-events:none; } .sg-free { position:absolute; left:6px; right:6px; z-index:1; color:#7f9590; font-size:.6rem; font-weight:700; letter-spacing:.01em; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sg-free::before { content:"◦ "; color:var(--st-gold); } .sg-now { position:absolute; left:0; right:0; z-index:3; height:0; border-top:2px solid #d9813a; pointer-events:none; } .sg-now::before { content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:#d9813a; } .sg-now span { position:absolute; right:3px; top:-9px; padding:0 5px; border-radius:999px; background:#d9813a; color:#fff; font-size:.54rem; font-weight:800; line-height:1.5; text-transform:uppercase; } /* Mês */ .sg-mark { width:9px; height:9px; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .sg-mark.is-exam { stroke:#d64545; } .sg-mark.is-assignment { stroke:#7b5cd6; } .sg-task-dot { display:inline-block; width:5px; height:5px; border-radius:2px; background:#e07b39; } .student-month-days .student-dots { align-items:center; gap:2px; height:9px; } .student-month-days button { position:relative; } .student-month-days button.active .sg-mark { stroke:#fff; } .sg-count { position:absolute; top:2px; right:3px; color:var(--st-muted); font-size:.52rem; font-weight:800; } .student-month-days button.active .sg-count { color:#d8e7e3; } .sg-month-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin:-4px 0 12px; color:var(--st-muted); font-size:.68rem; } .sg-month-legend span { display:inline-flex; align-items:center; gap:4px; } .sg-legend-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#2f6fdb; } .student-day-group .student-panel-heading h3 { margin:0; } .student-day-group .student-panel-heading h3::first-letter { text-transform:uppercase; } /* Quick Add contextual */ .student-organize-option .student-organize-icon { stroke:var(--opt,var(--st-teal)); background:color-mix(in srgb,var(--opt,#134a50) 12%,#fff); } .student-organize-context { margin:4px 0 0; color:var(--st-muted); font-size:.84rem; font-weight:600; } .student-organize-context::first-letter { text-transform:uppercase; } @media (max-width:599px){ #student-organize-dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:26px 26px 0 0; max-height:88dvh; padding-bottom:env(safe-area-inset-bottom); } #student-organize-dialog .student-organize-list { gap:6px; } #student-organize-dialog .student-organize-option { min-height:56px; padding:8px 12px; } } .student-duration-chips { display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 12px; } .student-duration-chips button { min-height:34px; padding:4px 12px; border:1px solid var(--st-line); border-radius:999px; background:#fff; color:var(--st-ink); font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; } .student-duration-chips button.active,.student-duration-chips button:focus-visible { border-color:var(--st-teal); background:#e8f1ee; color:var(--st-teal); } #student-workspace .sg-hours select { display:inline-block; width:auto; min-width:0; flex:none; margin:0; } #student-workspace .sg-hours label { display:inline; font-size:.8rem; font-weight:600; white-space:nowrap; } .sg { width:100%; } .sg-band,.sg-col,.sg-head { min-width:0; overflow:hidden; } .sg-head { overflow:visible; } .sg { --sg-col:92px; } @media (min-width:600px){ .sg { --sg-col:118px; } } .sg-block-title>span { overflow-wrap:break-word; word-break:normal; hyphens:auto; } .sg:not(.is-day) .sg-block-title .sg-icon { display:none; } .sg-block-time .sg-icon { display:inline-block; width:10px; height:10px; margin:0 3px 0 0; vertical-align:-1px; } .sg.is-day .sg-block-time .sg-icon { display:none; } #student-workspace .sg-hours select { padding:4px 22px 4px 8px; font-size:.82rem; background-position:right 6px center; } .sg-hours { gap:6px; } .sg:not(.is-day) .sg-block-time .sg-icon { display:none; } .sg:not(.is-day) .sg-block-time { font-size:.6rem; letter-spacing:-.01em; } @media (max-width:374px){ .sg-inbox span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .sg-inbox { padding:0 10px; } } /* ===== Estudante 2.2 — Aula/Disciplina com vários horários ===== */ .student-segmented.is-mini { margin:0 0 12px; } .student-segmented.is-mini button { min-height:36px; font-size:.74rem; } .class-modes button.active { background:var(--st-deep,#0b3036); color:#fff; } .student-class-builder { display:grid; gap:10px; margin:0 0 12px; } .class-weekdays { display:flex; flex-wrap:wrap; gap:6px; } .class-weekdays .weekday-chip.selected { border-color:var(--st-teal); background:var(--st-teal); color:#fff; } .class-day-card { padding:10px 12px; border:1px solid var(--st-line); border-left:3px solid var(--st-teal); border-radius:14px; background:#fff; } .class-day-card header { margin:0 0 6px; color:var(--st-ink); font-size:.86rem; } .class-day-card header strong::first-letter { text-transform:uppercase; } .class-slot { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:8px; min-height:40px; padding:4px 0; border-bottom:1px dashed #e6ebe8; } .class-slot strong { color:var(--st-ink); font-size:.9rem; font-variant-numeric:tabular-nums; } .class-slot small { color:var(--st-muted); font-size:.72rem; } .class-slot.is-editing { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto; align-items:end; padding:6px 0 8px; } .class-slot.is-editing label { display:grid; gap:2px; margin:0; color:var(--st-muted); font-size:.68rem; font-weight:700; } .class-slot.is-editing input { width:100%; min-width:0; min-height:40px; margin:0; padding:4px 6px; font-size:.9rem; } .class-slot.is-editing .primary-button { width:auto; min-height:40px; margin:0; padding:0 12px; } .class-icon-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--st-line); border-radius:10px; background:#fff; color:var(--st-muted); font-size:.9rem; cursor:pointer; } .class-add-slot { display:block; width:100%; min-height:40px; margin:6px 0 0; padding:6px 10px; border:1px dashed #b9cbc6; border-radius:12px; background:#f6faf8; color:var(--st-teal); font:inherit; font-size:.8rem; font-weight:800; text-align:left; cursor:pointer; } .class-confirm { margin:0 0 8px; padding:10px; border:1px solid #f0c7bd; border-radius:12px; background:#fff4f1; color:#7a2f22; font-size:.8rem; } .class-confirm p { margin:0 0 8px; } .class-confirm div { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .class-confirm .secondary-button { min-height:40px; margin:0; } .class-radio { display:flex; align-items:center; gap:8px; min-height:36px; margin:0; color:var(--st-ink); font-size:.84rem; font-weight:600; cursor:pointer; } .class-radio input { width:20px; height:20px; margin:0 !important; accent-color:var(--st-teal); } .class-monthly { display:grid; gap:2px; } .class-interval { display:flex; align-items:center; gap:8px; margin:0; color:var(--st-ink); font-size:.84rem; font-weight:700; } .class-interval select { width:auto; min-height:38px; margin:0; } .class-end { display:grid; gap:6px; padding:10px 12px; border:1px solid var(--st-line); border-radius:14px; background:#f8faf9; } .class-end-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .class-end-row input[type=date],.class-end-row input[type=number] { width:auto; min-height:38px; margin:0; } .class-end-row input[type=number] { width:76px; } .class-end-row small { color:var(--st-muted); font-size:.76rem; } .student-class-summary { margin:0 0 12px; padding:12px; border-radius:14px; background:#eef6f1; color:var(--st-ink); font-size:.82rem; } .student-class-summary h3 { margin:0 0 6px; font-size:.86rem; } .student-class-summary dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:0; } .student-class-summary dt { color:var(--st-muted); font-weight:700; } .student-class-summary dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .class-total { margin:8px 0 0; color:var(--st-teal); font-weight:700; } .student-inline-subject { margin:-6px 0 12px; padding:10px 12px; border:1px solid #ead9b0; border-radius:14px; background:#fffaf0; } .student-inline-subject input { width:100%; margin:0 0 8px; } .student-swatches.is-inline { margin:0 0 6px; } .student-swatches.is-inline .student-swatch { width:30px; height:30px; } .student-inline-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .student-inline-actions button { min-height:42px; margin:0; } .student-scope { margin:0 0 12px; padding:8px 12px; border:1px solid var(--st-line); border-radius:14px; background:#f8faf9; } .student-scope legend { padding:0 4px; color:var(--st-ink); font-size:.8rem; font-weight:800; } .student-segmented.class-modes { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:480px){ .student-segmented.class-modes { grid-template-columns:repeat(4,minmax(0,1fr)); } } .student-segmented.class-modes button { overflow-wrap:normal; word-break:normal; } /* ===== Professor — agenda em grade (mesmo sistema visual do Estudante; lógica profissional intacta) ===== */ .sg-root { --st-deep:#0b3036; --st-teal:#134a50; --st-ink:#10292c; --st-gold:#d8b15e; --st-gold-2:#efd38f; --st-cream:#f7f5ef; --st-muted:#5d6f6c; --st-line:#e2e7e4; display:block; margin:0 0 18px; } #workspace:not([data-profession="teacher"]):not(:is([data-profession="barber"],[data-profession="other"])) #teacher-agenda-grid { display:none; } #workspace[data-profession="teacher"] #agenda-screen .calendar-panel, #workspace[data-profession="teacher"] #agenda-screen .daily-agenda-panel, #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen .calendar-panel, #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen .daily-agenda-panel { display:none; } .sg-root .student-filter-row button.active { border-color:var(--st-teal); background:var(--st-teal); color:#fff; } .sg-root .icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--st-line); border-radius:12px; background:#fff; color:var(--st-teal); cursor:pointer; } .sg-root .icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .sg-root .sg-hours select { display:inline-block; width:auto; min-width:0; flex:none; margin:0; padding:4px 22px 4px 8px; font-size:.82rem; } .sg-root .sg-hours label { display:inline; font-size:.8rem; font-weight:600; white-space:nowrap; } .sg-root .student-empty { display:grid; justify-items:center; gap:10px; padding:18px 12px; border:1px dashed #d5dfdc; border-radius:13px; background:#fbfcfb; color:var(--st-muted); font-size:.8rem; text-align:center; } .sg-root .student-empty p { margin:0; } .sg-root .student-segmented { background:#e8eeec; } .tg-block { padding-top:3px; } .tg-block .sg-block-time { display:flex; align-items:center; gap:4px; color:#3f524e; font-weight:700; } .tg-block .sg-block-title { font-size:.74rem; } .tg-service { display:block; color:var(--st-muted); font-size:.62rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tg-block.is-short .tg-service { display:none; } .tg-block.is-short { flex-direction:row; align-items:center; gap:4px; } .tg-block.is-short .sg-block-time { display:flex; } .tg-status-dot { flex:none; width:7px; height:7px; border-radius:50%; background:#8aa29c; } .tg-status-dot.status-confirmed { background:#159b6b; } .tg-status-dot.status-completed { background:#1f6b40; box-shadow:0 0 0 2px #e3f4e9; } .tg-status-dot.status-cancelled,.tg-status-dot.status-noShow { background:#c4473a; } .tg-status-dot.status-rescheduled { background:#c99a2e; } .tg-pay { display:inline-grid; place-items:center; width:13px; height:13px; border-radius:50%; font-size:.55rem; font-style:normal; font-weight:900; line-height:1; } .tg-pay.is-paid { background:#e3f4e9; color:#1f6b40; } .tg-pay.is-pending { background:#fff3d6; color:#9a6b00; } .tg-pay.is-partial { background:#fff3d6; color:#9a6b00; box-shadow:inset 0 0 0 1px #d8b15e; } .tg-block.status-cancelled,.tg-block.status-noShow { opacity:.55; border-left-style:dashed; } .tg-block.status-completed .sg-block-title>span { text-decoration:none; } .tg-block.is-blocked { cursor:default; background:repeating-linear-gradient(135deg,#f1ecf7 0 6px,#e9e1f3 6px 12px); box-shadow:none; } .sg-chip.is-block { cursor:default; } .tg-block-dot { display:inline-block; width:6px; height:6px; border-radius:1px; background:#8d6ab5; } .tg-day-list { margin-top:4px; padding-bottom:10px; } .tg-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; min-height:48px; padding:6px 0 6px 10px; border:0; border-left:3px solid var(--block,#4c85c5); border-bottom:1px solid #eef1ee; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; } .tg-row b { color:var(--st-ink); font-size:.84rem; font-variant-numeric:tabular-nums; } .tg-row strong,.tg-row small { display:block; } .tg-row strong { color:var(--st-ink); font-size:.86rem; } .tg-row small { color:var(--st-muted); font-size:.72rem; } .tg-row.is-blocked { grid-template-columns:48px 1fr; border-left-color:#8d6ab5; color:var(--st-muted); font-size:.8rem; cursor:default; } @media (max-width:599px){ #teacher-quick-dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:26px 26px 0 0; padding-bottom:env(safe-area-inset-bottom); } } @media (max-width:374px){ #workspace[data-profession="teacher"] #agenda-screen .page-heading { gap:8px; } #workspace[data-profession="teacher"] #agenda-screen .agenda-actions { flex-shrink:1; min-width:0; gap:6px; } #workspace[data-profession="teacher"] #agenda-screen .agenda-actions .compact-button { min-width:0; padding-inline:8px; font-size:.68rem; white-space:normal; line-height:1.15; } } .sg-block.is-narrow { padding:3px 2px 3px 5px; } .sg-block.is-narrow .sg-block-title>span { display:block; -webkit-line-clamp:unset; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sg-block.is-narrow .tg-service,.sg-block.is-narrow .tg-pay { display:none; } .sg-block.is-narrow .sg-block-time { font-size:.58rem; } #workspace[data-profession="teacher"] #agenda-screen > p.intro:first-of-type { display:none; } /* ===== Professor — blocos da grade: horário · aluno · matéria, status discreto ===== */ .sg-variant-teacher .tg-block { gap:2px; padding:5px 6px 4px 8px; border-radius:11px; background:color-mix(in srgb,var(--block) 11%,#fbfdfc); box-shadow:0 1px 4px #0b303614; } .sg-variant-teacher .tg-block > * { min-width:0; } .sg-variant-teacher .tg-block .sg-block-time { display:block; padding-right:9px; color:#5d6f6b; font-size:.6rem; font-weight:600; line-height:1.2; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:clip; } .sg-variant-teacher .tg-block .sg-block-title { display:block; font-size:.76rem; font-weight:700; line-height:1.2; color:var(--st-ink); } .sg-variant-teacher .tg-block .sg-block-title>span { display:block; -webkit-line-clamp:unset; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; hyphens:none; } .sg-variant-teacher .tg-block .tg-service { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:normal; text-overflow:clip; overflow-wrap:break-word; word-break:normal; color:#5f716d; font-size:.64rem; font-weight:600; line-height:1.2; } .sg-variant-teacher .tg-block.tg-lines-1 .tg-service { -webkit-line-clamp:1; display:block; white-space:nowrap; text-overflow:ellipsis; } .sg-variant-teacher .tg-ind { position:absolute; top:6px; right:4px; display:flex; flex-direction:column; gap:2px; align-items:center; pointer-events:none; } .sg-variant-teacher .tg-ind i { display:block; width:6px; height:6px; border-radius:50%; } .sg-variant-teacher .tg-ind .tg-status-dot { background:#4c85c5; box-shadow:none; } .sg-variant-teacher .tg-ind .tg-status-dot.status-confirmed { background:#159b8a; } .sg-variant-teacher .tg-ind .tg-status-dot.status-completed { background:#2f8a52; } .sg-variant-teacher .tg-ind .tg-status-dot.status-cancelled,.sg-variant-teacher .tg-ind .tg-status-dot.status-noShow { background:#c4473a; } .sg-variant-teacher .tg-ind .tg-status-dot.status-rescheduled { background:#9a7ab8; } .sg-variant-teacher .tg-ind .tg-pay { background:#d9a520; box-shadow:0 0 0 1.5px #fff6dc; font-size:0; } .sg-variant-teacher .tg-ind .tg-pay.is-partial { background:linear-gradient(90deg,#d9a520 50%,#f3dfa6 50%); } .sg-variant-teacher .tg-block.tg-name-2 .sg-block-title>span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:break-word; } /* 30–45 min: duas linhas curtas — 16:00 / María (matéria fica no detalhe) */ .sg-variant-teacher .tg-block.is-short { flex-direction:column; align-items:stretch; justify-content:center; gap:0; padding:2px 9px 2px 7px; } .sg-variant-teacher .tg-block.is-short .sg-block-time { padding-right:0; font-size:.58rem; line-height:1.15; } .sg-variant-teacher .tg-block.is-short .sg-block-title { font-size:.72rem; line-height:1.15; } .sg-variant-teacher .tg-block.is-short .tg-ind { top:4px; } /* Muito curto (≤ 20 min): uma linha — 16:00 María */ .sg-variant-teacher .tg-block.is-tiny { flex-direction:row; align-items:center; gap:4px; padding-top:0; padding-bottom:0; } .sg-variant-teacher .tg-block.is-tiny .sg-block-time { flex:none; } .sg-variant-teacher .tg-block.is-tiny .sg-block-title { flex:1; } .sg-variant-teacher .tg-block.is-tiny .tg-ind { top:50%; transform:translateY(-50%); flex-direction:row; } /* Coluna estreita (aulas lado a lado): início + nome; matéria só se o bloco for alto */ .sg-variant-teacher .tg-block.is-narrow { padding:4px 1px 3px 3px; } .sg-variant-teacher .tg-block.is-narrow .sg-block-time { padding-right:7px; font-size:.58rem; } .sg-variant-teacher .tg-block.is-narrow .sg-block-title { font-size:.68rem; letter-spacing:-.025em; } .sg-variant-teacher .tg-block.is-narrow .tg-service { display:-webkit-box; font-size:.6rem; overflow-wrap:anywhere; } .sg-variant-teacher .tg-block.is-narrow .tg-ind { top:5px; right:1px; } .sg-variant-teacher .tg-block.is-narrow .tg-ind i { width:5px; height:5px; } .sg-variant-teacher .tg-block.is-narrow.is-short { padding:2px 1px 2px 3px; } .sg-variant-teacher .tg-block.status-completed .sg-block-title>span { text-decoration:none; } /* Bloqueios seguem o mesmo ritmo visual */ .sg-variant-teacher .tg-block.is-blocked .sg-block-time { padding-right:0; } .sg-variant-teacher .tg-block.is-blocked .sg-block-title { font-weight:700; color:#5b4a73; } /* Áreas livres mais discretas */ .sg-variant-teacher .sg-free { color:#9fb0ab; font-size:.56rem; font-weight:600; opacity:.9; } .sg-variant-teacher .sg-free::before { content:"◦ "; color:#b9c9c4; } /* ===== Professor — aulas por semana com vários horários por dia ===== */ .lp-count-label { margin:12px 0 6px; font-size:.82rem; font-weight:800; } .lp-count-chips { display:flex; flex-wrap:wrap; gap:6px; } .lp-count-chips button { min-width:44px; min-height:40px; padding:0 12px; border:1px solid var(--line,#dfe5e2); border-radius:12px; background:#fff; color:inherit; font:inherit; font-weight:800; cursor:pointer; } .lp-count-chips button.selected { border-color:#134a50; background:#134a50; color:#fff; } .lp-custom-count { display:flex; align-items:center; gap:8px; margin:8px 0 0; font-size:.8rem; font-weight:700; } .lp-custom-count input { width:80px; margin:0; } .lp-counter { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px; margin:12px 0 4px; padding:10px 12px; border-radius:12px; background:#fff3d6; color:#6e5212; font-size:.84rem; font-weight:700; } .lp-counter.is-complete { background:#e3f4e9; color:#1f6b40; } .lp-counter.is-over { background:#fde6e2; color:#9c3426; } .lp-day-chips .weekday-chip { position:relative; } .lp-badge { position:absolute; top:-6px; right:-6px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:#d8b15e; color:#10292c; font-size:.64rem; font-weight:900; } .lp-day-card { margin:8px 0 0; padding:10px 12px; border:1px solid #e2e7e4; border-left:3px solid #134a50; border-radius:14px; background:#fff; } .lp-day-card header { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 4px; } .lp-day-card header strong::first-letter { text-transform:uppercase; } .lp-day-card header small { color:#5d6f6c; font-weight:700; } .lp-day-slot { display:flex; justify-content:space-between; align-items:center; min-height:32px; font-weight:800; font-variant-numeric:tabular-nums; } .lp-remove { width:32px; height:32px; border:1px solid #e2e7e4; border-radius:10px; background:#fff; color:#9c3426; cursor:pointer; } .lp-day-card .compact-button { margin:6px 0 0; } .lp-day-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .lp-day-actions .compact-button { flex:1 1 145px; min-height:44px; margin:0; } .lp-remove-action { color:var(--color-text, #18372f); } .lesson-remove-dialog { width:min(calc(100vw - 24px),420px); max-height:min(85dvh,600px); padding:0; border:0; border-radius:22px; overflow-y:auto; overscroll-behavior:contain; background:#faf8f2; color:#19332b; box-shadow:0 24px 70px #001d17a6; } .lesson-remove-dialog::backdrop { background:#001d17a6; backdrop-filter:blur(5px); } .lesson-remove-panel { padding:24px; } .lesson-remove-panel h2 { margin:0 0 14px; font-size:1.45rem; line-height:1.2; } .lesson-remove-panel p { margin:0 0 16px; color:#5b6b65; line-height:1.5; } .lp-remove-options { display:grid; gap:8px; } .lp-remove-options button { min-height:48px; } .lp-remove-selected { display:block; margin:0 0 18px; } .lesson-remove-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .lesson-remove-actions button { flex:1 1 140px; min-height:48px; } .lesson-remove-dialog button:focus-visible { outline:3px solid #d4a853; outline-offset:3px; } @media (max-width:599px) { .lesson-remove-dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:24px 24px 0 0; } .lesson-remove-panel { padding-bottom:calc(18px + env(safe-area-inset-bottom)); } } @media (max-width:360px) { .lesson-remove-panel { padding:18px 18px calc(18px + env(safe-area-inset-bottom)); } } .lp-notice,.lp-warning { margin:10px 0; padding:12px; border:1px solid #f0c7bd; border-radius:14px; background:#fff4f1; color:#7a2f22; font-size:.84rem; } .lp-notice p,.lp-warning p { margin:0 0 10px; } .lp-notice div,.lp-warning div { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .lp-notice div:has(> :only-child) { grid-template-columns:1fr; } .lp-notice button,.lp-warning button { min-height:44px; margin:0; } .lp-summary { margin:12px 0 0; padding:12px; border-radius:14px; background:#eef6f1; font-size:.82rem; } .lp-summary h4 { margin:0 0 6px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:#134a50; } .lp-summary dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:0; } .lp-summary dt { color:#5d6f6c; font-weight:700; } .lp-summary dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; } .lp-summary dd b::first-letter { text-transform:uppercase; } /* Seletor do dia: quase tela cheia no celular, uma coluna (Hora | Agenda) */ .lesson-day-picker { width:min(560px,100%); max-width:100%; height:min(92dvh,860px); max-height:92dvh; padding:0; border:0; border-radius:24px; background:#fffefb; } @media (max-width:599px){ .lesson-day-picker { margin:auto 0 0; width:100%; height:94dvh; max-height:94dvh; border-radius:24px 24px 0 0; } } .lp-shell { display:flex; flex-direction:column; height:100%; } .lp-header { display:flex; justify-content:space-between; gap:12px; padding:18px 18px 10px; border-bottom:1px solid #e2e7e4; } .lp-header h2 { margin:0; font-size:1.2rem; } .lp-header h2::first-letter { text-transform:uppercase; } .lp-header p { margin:2px 0 0; color:#5d6f6c; font-size:.82rem; } .lp-picker-count { color:#134a50 !important; font-weight:800; } .lp-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:8px 12px 0; } .lp-grid { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; border:1px solid #e2e7e4; border-radius:16px; } .lp-row { display:grid; grid-template-columns:56px minmax(0,1fr); width:100%; min-height:44px; margin:0; padding:0; border:0; border-bottom:1px dashed #e8ece9; background:#fff; color:#10292c; font:inherit; text-align:left; cursor:pointer; } .lp-time { display:flex; align-items:center; justify-content:flex-end; padding:0 8px; border-right:1px solid #e2e7e4; color:#5d6f6c; font-size:.74rem; font-variant-numeric:tabular-nums; } .lp-time b { color:#10292c; } .lp-cell { display:flex; align-items:center; gap:8px; min-width:0; padding:4px 10px; } .lp-state { color:#7f9590; font-size:.78rem; font-weight:600; } .lp-row.is-free:hover .lp-cell,.lp-row:focus-visible .lp-cell { background:#134a500d; } .lp-row:focus-visible { outline:2px solid #d8b15e; outline-offset:-2px; } .lp-busy { display:grid; min-width:0; padding:4px 8px; border-left:3px solid var(--agenda-accent,#4c85c5); border-radius:8px; background:color-mix(in srgb,var(--agenda-accent,#4c85c5) 13%,#fff); } .lp-busy strong { font-size:.82rem; } .lp-busy small { color:#5d6f6c; font-size:.7rem; font-weight:700; text-transform:uppercase; } .lp-busy.is-block { --agenda-accent:#8d6ab5; background:repeating-linear-gradient(135deg,#f1ecf7 0 6px,#e9e1f3 6px 12px); } .lp-row.is-outside { background:#f7f5ef; } .lp-row.is-selected .lp-cell { margin:2px 6px; border:2px solid #d8b15e; border-radius:10px; background:#fff6dd; } .lp-pick { color:#6e5212; font-weight:900; font-variant-numeric:tabular-nums; } .lp-overlap { color:#9c3426; font-size:.7rem; font-weight:700; } .lp-row.is-covered .lp-cell { margin:0 6px; border-left:2px solid #d8b15e; border-right:2px solid #d8b15e; background:#fffaf0; } .lp-footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #e2e7e4; } .lp-footer button { min-height:50px; margin:0; } /* ===== Onboarding — FOURMI Education / FOURMI Pro como dois “portais” (apenas visual) ===== */ .onb-sheet:has(> #audience-onboarding-step:not(.hidden)) { background: radial-gradient(90% 46% at 0% 12%, #10505f66 0%, transparent 70%), radial-gradient(90% 46% at 100% 62%, #b08a3c2e 0%, transparent 70%), linear-gradient(180deg,#06291f 0%,#04211a 100%); color:#f6efdc; box-shadow:0 -12px 30px #00140f40, inset 0 1px 0 #ffffff10; } .onb .audience-card[data-suite] { position:relative; overflow:hidden; display:grid; grid-template-columns:104px minmax(0,1fr) 28px; align-items:center; gap:12px; min-height:132px; padding:14px 14px 14px 10px; border:1px solid var(--suite-edge); border-radius:22px; background:var(--suite-bg); color:#fbf3df; box-shadow:0 12px 26px #0009060f, inset 0 1px 0 #ffffff14; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .onb .audience-card[data-suite="education"] { --suite-edge:#2f7880; --suite-gold:#e7c57e; --suite-muted:#cfe1dd; --suite-bg:radial-gradient(34% 70% at 16% 50%, #0a3a45 0%, #06303a 60%, transparent 100%), linear-gradient(150deg,#0d4452 0%,#08333d 48%,#05292d 100%); } .onb .audience-card[data-suite="pro"] { --suite-edge:#4a7a4b; --suite-gold:#ebb867; --suite-muted:#d9e1cf; --suite-bg:radial-gradient(34% 70% at 16% 50%, #16301a 0%, #0f2412 60%, transparent 100%), radial-gradient(60% 70% at 100% 100%, #3a2f1059 0%, transparent 70%), linear-gradient(150deg,#193a20 0%,#122a17 48%,#0c1e0e 100%); } .onb .audience-card[data-suite]::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg,#ffffff0d,transparent 40%); } .onb .audience-card[data-suite]:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--suite-gold) 55%,var(--suite-edge)); box-shadow:0 14px 30px #00090626, inset 0 1px 0 #ffffff14; } .onb .audience-card[data-suite]:focus-visible { outline:3px solid var(--suite-gold); outline-offset:3px; } .suite-logo { position:relative; display:block; width:104px; aspect-ratio:440 / 300; } .suite-logo img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px #00000040); } .suite-logo-fallback { display:none; } .suite-logo.is-fallback img { display:none; } .suite-logo.is-fallback .suite-logo-fallback { position:absolute; inset:0; display:grid; place-content:center; gap:2px; border:1px solid #ffffff22; border-radius:16px; color:#f6efdc; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-align:center; } .suite-logo.is-fallback .suite-logo-fallback b { color:var(--suite-gold); font-size:.82rem; letter-spacing:.04em; } .onb .audience-card[data-suite] .audience-copy { position:relative; min-width:0; } .onb .audience-card[data-suite] .audience-copy strong { display:block; color:#fbf3df; font-size:1.08rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; } .onb .audience-card[data-suite] .audience-copy small { display:block; margin-top:5px; color:var(--suite-muted); font-size:.8rem; line-height:1.38; overflow-wrap:break-word; } .onb .audience-card[data-suite] .audience-copy em { display:block; margin-top:8px; color:var(--suite-gold); font-size:.74rem; font-style:normal; font-weight:700; line-height:1.35; letter-spacing:.01em; overflow-wrap:break-word; white-space:normal; } .onb .audience-card[data-suite] .audience-arrow { position:relative; display:grid; place-items:center; width:28px; height:28px; border:1px solid #ffffff2b; border-radius:50%; background:#ffffff0d; color:#f6efdc; } .onb .audience-card[data-suite] .audience-arrow svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* Selecionado: borda dourada, brilho leve e ✓ (não depende só da cor) */ .onb .audience-card[data-suite].selected { transform:scale(1.012); border-color:var(--suite-gold); background:var(--suite-bg); box-shadow:0 0 0 3px color-mix(in srgb,var(--suite-gold) 30%,transparent), 0 16px 34px #00090633, inset 0 1px 0 #ffffff1c; } .onb .audience-card[data-suite].selected .audience-arrow { border-color:transparent; background:linear-gradient(145deg,#f1d08a,#c9973f); color:#0b2a1f; } .onb .audience-card[data-suite].selected .audience-arrow svg { display:none; } .onb .audience-card[data-suite].selected .audience-arrow::after { content:"✓"; font-size:.9rem; font-weight:900; line-height:1; } /* Continuar no fundo escuro */ .onb-sheet:has(> #audience-onboarding-step:not(.hidden)) .onb-cta:disabled { border:1px solid #ffffff14; background:#ffffff10; color:#f6efdc6b; box-shadow:none; opacity:1; } /* Telas muito estreitas: logo acima do texto */ @media (max-width:359px) { .onb .audience-card[data-suite] { grid-template-columns:minmax(0,1fr) 28px; align-items:start; gap:8px 10px; padding:14px; } .onb .audience-card[data-suite] .suite-logo { grid-column:1; grid-row:1; width:112px; margin:-4px 0 0 -6px; } .onb .audience-card[data-suite] .audience-copy { grid-column:1 / -1; grid-row:2; } .onb .audience-card[data-suite] .audience-arrow { grid-column:2; grid-row:1; } } @media (prefers-reduced-motion:reduce) { .onb .audience-card[data-suite] { transition:none; } .onb .audience-card[data-suite].selected { transform:none; } } /* ===== FOURMI Education — aula realizada, material, histórico e avaliação ===== */ .edu-dialog { width:min(calc(100% - 20px),480px); max-height:92dvh; overflow:auto; background:#fffefb; color:#13261f; overscroll-behavior:contain; } .edu-shell { display:flex; flex-direction:column; gap:10px; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); } .edu-shell > label,.edu-homework-form label { margin-top:4px; color:#22332e; font-size:.82rem; font-weight:800; } .edu-shell textarea,.edu-shell input:not([type=file]):not([type=radio]):not([type=checkbox]) { width:100%; box-sizing:border-box; min-width:0; padding:11px 12px; border:1px solid #d9e1dc; border-radius:13px; background:#fff; color:inherit; font:inherit; font-size:.92rem; line-height:1.4; resize:vertical; } .edu-shell textarea:focus,.edu-shell input:focus { outline:2px solid #d4a853; outline-offset:1px; } .edu-shell .dialog-heading { align-items:flex-start; margin:0 0 2px; } .edu-shell .dialog-heading > div { min-width:0; } .edu-shell h2 { margin:2px 0 0; font-size:1.25rem; line-height:1.2; overflow-wrap:anywhere; } .edu-done-eyebrow { color:#1f7a4f !important; } .edu-meta { margin:4px 0 0; color:#5f716d; font-size:.8rem; overflow-wrap:anywhere; } .edu-block { display:flex; flex-direction:column; gap:8px; margin-top:6px; padding:13px; border:1px solid #e3e9e5; border-radius:16px; background:#f8faf8; } .edu-block h3 { margin:0; font-size:.86rem; } .edu-import { justify-content:center; width:100%; } .edu-local-note { margin:0; color:#6b7c78; font-size:.72rem; line-height:1.35; } .edu-material { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:4px 10px; padding:9px 10px; border:1px solid #e1e7e3; border-radius:13px; background:#fff; } .edu-material-name { min-width:0; } .edu-material-name strong { display:block; font-size:.84rem; overflow-wrap:anywhere; } .edu-material-name small { color:#6b7c78; font-size:.72rem; } .edu-material-actions { grid-column:2; display:flex; flex-wrap:wrap; gap:2px 12px; } .edu-material-actions .text-button { min-height:30px; padding:0; font-size:.78rem; } .edu-pdf-icon { grid-row:1 / 3; display:grid; place-items:center; width:36px; height:44px; border-radius:7px; background:linear-gradient(160deg,#e15a4a,#b8382c); color:#fff; font-size:.6rem; font-weight:900; letter-spacing:.04em; box-shadow:inset 0 -10px 0 #0000001a; } .edu-empty-line { margin:0; color:#6b7c78; font-size:.8rem; } .edu-homework-toggle { align-self:flex-start; min-height:32px; padding:0; font-weight:800; } .edu-homework-toggle small { color:#6b7c78; font-weight:600; } .edu-homework { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; font-size:.84rem; } .edu-homework > span { min-width:0; overflow-wrap:anywhere; } .edu-homework small { color:#6b7c78; } .edu-homework-form { display:flex; flex-direction:column; gap:6px; } .edu-finish { margin-top:4px; } .danger-text { color:#b3382b !important; } /* Detalhe da aula (Professor) */ .manage-lesson-record { display:flex; flex-direction:column; gap:9px; } .edu-record-row { display:grid; gap:2px; min-width:0; } .edu-record-row > span { color:#6b7c78; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .edu-record-row p { margin:0; font-size:.86rem; line-height:1.4; white-space:pre-line; overflow-wrap:anywhere; } .edu-record-row q { display:block; margin-top:3px; color:#33463f; font-style:italic; } .edu-record-files { display:flex; flex-wrap:wrap; gap:4px 10px; } .edu-muted { color:#6b7c78; } .edu-record-buttons { display:flex; flex-wrap:wrap; gap:8px; } .edu-record-buttons .secondary-button { flex:1 1 140px; min-height:40px; } .edu-clip { margin-left:5px; font-size:.78rem; } .edu-stars { display:inline-flex; gap:1px; color:#d6dcd9; font-size:1rem; letter-spacing:0; vertical-align:-1px; } .edu-stars i { font-style:normal; } .edu-stars i.is-on { color:#d9a520; } /* Agenda do Professor: clipe discreto */ .sg-variant-teacher .tg-ind .tg-clip { display:grid; place-items:center; width:8px; height:8px; border-radius:0; background:none; } .sg-variant-teacher .tg-ind .tg-clip svg { width:8px; height:8px; fill:none; stroke:#53655f; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } /* Estudante — aba Aulas */ .edu-stats { margin-bottom:12px; } .edu-tools { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; } .edu-tools .student-filter-row { margin:0; } .edu-search input { width:100%; box-sizing:border-box; min-height:42px; padding:9px 13px; border:1px solid #dfe5e2; border-radius:13px; background:#fff; font:inherit; font-size:.9rem; } .edu-lesson-list { display:flex; flex-direction:column; gap:8px; } .edu-lesson-card { display:grid; grid-template-columns:44px minmax(0,1fr) 14px; align-items:center; gap:11px; width:100%; padding:11px 12px; border:1px solid #e2e8e4; border-radius:16px; background:#fff; color:inherit; font:inherit; text-align:left; cursor:pointer; } .edu-lesson-card:focus-visible { outline:3px solid #d4a853; outline-offset:2px; } .edu-lesson-date { display:grid; place-items:center; align-content:center; height:46px; border-radius:12px; background:#eef5f2; color:#134a50; line-height:1.05; } .edu-lesson-date b { font-size:1.05rem; } .edu-lesson-date small { font-size:.62rem; font-weight:800; text-transform:uppercase; } .edu-lesson-main { min-width:0; display:flex; flex-direction:column; gap:2px; } .edu-lesson-main strong { font-size:.9rem; line-height:1.25; overflow-wrap:anywhere; } .edu-lesson-main small { color:#62746f; font-size:.74rem; overflow-wrap:anywhere; } .edu-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; } .edu-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; background:#f0f3f1; color:#4b5e58; font-size:.68rem; font-weight:800; } .edu-badge.is-material { background:#eaf3ff; color:#2c5d93; } .edu-badge.is-review { background:#fff3d6; color:#8a6100; } .edu-chevron { color:#9aaba6; font-size:1.2rem; } .edu-empty { padding:22px 16px; border:1px dashed #d5ded9; border-radius:16px; text-align:center; } .edu-empty strong { display:block; font-size:.92rem; } .edu-empty p { margin:6px 0 0; color:#62746f; font-size:.8rem; line-height:1.4; } .edu-other-card { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:10px; padding:13px 14px; border:1px dashed #cdd8d3; border-radius:16px; background:#fbfcfb; color:inherit; font:inherit; text-align:left; cursor:pointer; } .edu-other-card strong { display:block; font-size:.9rem; } .edu-other-card small { color:#62746f; font-size:.74rem; } .edu-other-card b { display:grid; place-items:center; min-width:30px; height:30px; border-radius:999px; background:#134a50; color:#fff; font-size:.8rem; } /* Estudante — detalhe e avaliação */ .edu-detail { display:flex; flex-direction:column; gap:10px; } .edu-detail-row { display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; align-items:start; padding-bottom:9px; border-bottom:1px solid #edf1ee; font-size:.86rem; } .edu-detail-row > span { color:#6b7c78; font-size:.74rem; font-weight:800; } .edu-detail-row > div { min-width:0; overflow-wrap:anywhere; } .edu-detail-row.is-materials { grid-template-columns:1fr; } .edu-detail-row.is-materials > div { display:flex; flex-direction:column; gap:7px; } .edu-pre { margin:0; white-space:pre-line; line-height:1.4; } .edu-ok { color:#1f7a4f; font-weight:700; } .edu-review-box { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:12px; border-radius:14px; background:#fff8e6; } .edu-review-box:empty { display:none; } .edu-review-box > span { font-size:.82rem; font-weight:800; } .edu-review-box p { flex-basis:100%; margin:0; } .edu-review-box q { display:block; margin-top:4px; color:#4b5e58; font-style:italic; font-size:.84rem; } .edu-star-input { display:flex; justify-content:center; gap:6px; margin:6px 0 4px; } .edu-star-input button { width:48px; height:48px; border:0; border-radius:14px; background:#f2f4f3; color:#cfd6d3; font-size:1.7rem; line-height:1; cursor:pointer; transition:transform .15s ease, color .15s ease, background-color .15s ease; } .edu-star-input button.is-on { background:#fff3d6; color:#d9a520; } .edu-star-input button:focus-visible { outline:3px solid #d4a853; outline-offset:2px; } .edu-star-input button:active { transform:scale(.94); } .edu-review-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:8px; } .edu-review-actions .primary-button[disabled] { opacity:.5; } @media (max-width:359px) { .edu-shell { padding-inline:14px; } .edu-star-input button { width:42px; height:42px; font-size:1.5rem; } .edu-detail-row { grid-template-columns:1fr; gap:2px; } .edu-lesson-card { grid-template-columns:40px minmax(0,1fr) 10px; gap:9px; padding:10px; } } @media (max-width:599px) { .edu-dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:24px 24px 0 0; } } .edu-shell .field-help { margin-top:-4px; color:#6b7c78; font-size:.74rem; } /* Abas da matéria (5 abas com "Aulas"): uma linha rolável, sem quebrar palavras */ .student-segmented.is-tabs { grid-auto-columns:minmax(max-content,1fr); overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; } .student-segmented.is-tabs::-webkit-scrollbar { display:none; } .student-segmented.is-tabs button { padding:6px 12px; white-space:nowrap; overflow-wrap:normal; } .edu-detail .edu-homework { flex-direction:column; align-items:flex-start; gap:2px; } .edu-detail .edu-homework .text-button { min-height:30px; padding:0; text-align:left; } /* ===== FOURMI Education — Biblioteca do Estudante ===== */ .lib-head { position:relative; margin:4px 0 12px; } .lib-head h1 { margin:2px 0 4px; font-size:1.7rem; line-height:1.1; letter-spacing:-.02em; overflow-wrap:anywhere; } .lib-head p:not(.eyebrow) { margin:0; color:#5f716d; font-size:.86rem; } .lib-new-count { display:inline-block; margin-top:8px; padding:3px 10px; border-radius:999px; background:#fff3d6; color:#8a6100; font-size:.72rem; font-weight:800; } .lib-search { position:relative; display:block; margin-bottom:10px; } .lib-search input { width:100%; box-sizing:border-box; min-height:46px; padding:11px 14px 11px 38px; border:1px solid #d9e2de; border-radius:15px; background:#fff; color:inherit; font:inherit; font-size:.95rem; } .lib-search input:focus { outline:2px solid #d4a853; outline-offset:1px; } .lib-search-icon { position:absolute; left:13px; top:50%; transform:translateY(-52%); color:#6b7c78; font-size:1.15rem; } .lib-quick { display:flex; gap:7px; overflow-x:auto; padding-bottom:3px; margin-bottom:8px; scrollbar-width:none; } .lib-quick::-webkit-scrollbar { display:none; } .lib-quick button { flex:0 0 auto; min-height:36px; padding:7px 13px; border:1px solid #dbe3df; border-radius:999px; background:#fff; color:#33463f; font:inherit; font-size:.8rem; font-weight:800; white-space:nowrap; cursor:pointer; } .lib-quick button.active { border-color:#134a50; background:#134a50; color:#fff; } .lib-quick .lib-filters-button { margin-left:auto; border-color:#c9d6d1; background:#f4f8f6; } .lib-quick .lib-filters-button.is-active { border-color:#d4a853; background:#fff8e6; color:#6b4d00; } .lib-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; } .lib-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; min-height:30px; padding:4px 10px; border:0; border-radius:999px; background:#e7f1ee; color:#134a50; font:inherit; font-size:.74rem; font-weight:800; cursor:pointer; overflow-wrap:anywhere; text-align:left; } .lib-clear { min-height:30px; padding:0 4px; font-size:.76rem; } .lib-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 10px; color:#5f716d; font-size:.8rem; font-weight:700; } .lib-bar label { display:flex; align-items:center; gap:6px; min-width:0; } .lib-bar select { max-width:150px; min-height:34px; padding:4px 8px; border:1px solid #d9e2de; border-radius:10px; background:#fff; color:#22332e; font:inherit; font-size:.8rem; } .lib-group { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:16px 0 8px; color:#134a50; font-size:.78rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } .lib-group small { color:#6b7c78; font-size:.72rem; font-weight:700; letter-spacing:0; text-transform:none; } .lib-list { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; } @media (min-width:720px){ .lib-list { grid-template-columns:repeat(2,minmax(0,1fr)); } } .lib-card { display:grid; grid-template-columns:40px minmax(0,1fr) 32px; gap:4px 11px; padding:12px; border:1px solid #e2e8e4; border-radius:17px; background:#fffefb; box-shadow:0 2px 8px #0b30360a; } .lib-card.is-new { border-color:#ead8a6; } .lib-type { display:grid; place-items:center; width:38px; height:46px; border-radius:8px; background:linear-gradient(160deg,#4d7f86,#134a50); color:#fff; font-size:.56rem; font-weight:900; letter-spacing:.04em; box-shadow:inset 0 -10px 0 #0000001a; } .lib-type.is-pdf { background:linear-gradient(160deg,#cf5a4c,#a63a2f); } .lib-type.is-image { background:linear-gradient(160deg,#6f8fb3,#3f6286); } .lib-type.is-link { background:linear-gradient(160deg,#c9a04b,#9c7424); } .lib-main { min-width:0; display:flex; flex-direction:column; gap:2px; } .lib-title { align-self:flex-start; max-width:100%; padding:0; border:0; background:none; color:#13261f; font:inherit; font-size:.92rem; font-weight:800; line-height:1.25; text-align:left; overflow-wrap:anywhere; cursor:pointer; } .lib-main small { color:#5f716d; font-size:.74rem; line-height:1.35; overflow-wrap:anywhere; } .lib-main .lib-content { color:#33463f; font-style:italic; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .lib-flags { display:flex; gap:6px; margin-top:2px; } .lib-flags:empty { display:none; } .lib-new { padding:1px 7px; border-radius:999px; background:#fff3d6; color:#8a6100; font-size:.62rem; letter-spacing:.06em; } .lib-fav { color:#d9a520; font-size:.85rem; line-height:1; } .lib-more { align-self:start; width:32px; height:32px; border:0; border-radius:10px; background:#f1f4f2; color:#4b5e58; font:inherit; font-size:.8rem; font-weight:900; letter-spacing:.05em; cursor:pointer; } .lib-actions { grid-column:2 / -1; display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; } .lib-actions .secondary-button { flex:1 1 110px; min-height:36px; padding:6px 10px; font-size:.8rem; } .lib-view-slot { display:contents; } .lib-sync { flex:1 1 110px; display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:4px 8px; border:1px dashed #cfd9d5; border-radius:12px; color:#6b7c78; font-size:.72rem; font-weight:700; text-align:center; } .lib-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px; border:1px dashed #d5ded9; border-radius:18px; text-align:center; } .lib-empty span { font-size:1.8rem; } .lib-empty strong { font-size:.95rem; } .lib-empty p { margin:0; color:#62746f; font-size:.82rem; line-height:1.4; } .lib-card:focus-within,.lib-title:focus-visible,.lib-more:focus-visible,.lib-chip:focus-visible,.lib-quick button:focus-visible { outline:3px solid #d4a853; outline-offset:2px; } /* Entrada em Matérias, links e Início */ .lib-entry { grid-column:1 / -1; display:grid; grid-template-columns:44px minmax(0,1fr) 14px; align-items:center; gap:12px; width:100%; padding:14px; border:0; border-radius:18px; background:linear-gradient(135deg,#134a50,#0b3036); color:#fff; font:inherit; text-align:left; cursor:pointer; box-shadow:0 10px 22px #0b30362e; } .lib-entry-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#ffffff1c; font-size:1.3rem; } .lib-entry strong { display:block; font-size:.98rem; } .lib-entry small { color:#d7e6e2; font-size:.76rem; } .lib-entry .edu-chevron { color:#e8c97a; } .lib-subject-link,.lib-teacher-link { width:100%; margin:0 0 12px; justify-content:center; } .lib-teacher-link { margin-top:-4px; } .lib-home-item { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; width:100%; padding:8px 0; border:0; border-top:1px solid #edf1ee; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; } .lib-home-item .lib-type { width:34px; height:40px; } .lib-home-item strong { display:block; font-size:.86rem; } .lib-home-item small { color:#62746f; font-size:.74rem; overflow-wrap:anywhere; } /* Filtros e detalhe */ .lib-filters-body { display:flex; flex-direction:column; gap:7px; } .lib-filters-body > label,.lib-field-label { margin:6px 0 0; color:#22332e; font-size:.82rem; font-weight:800; } .lib-filters-body select { width:100%; min-height:42px; padding:8px 10px; border:1px solid #d9e1dc; border-radius:12px; background:#fff; color:inherit; font:inherit; } .lib-option-row { display:flex; flex-wrap:wrap; gap:6px; } .lib-option-row button { min-height:34px; padding:6px 11px; border:1px solid #dbe3df; border-radius:999px; background:#fff; color:#33463f; font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; } .lib-option-row button.active { border-color:#134a50; background:#134a50; color:#fff; } .lib-custom-dates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .lib-custom-dates label { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:.74rem; font-weight:800; color:#4b5e58; } .lib-custom-dates input { min-width:0; } .lib-detail-head { display:flex; align-items:center; gap:10px; color:#4b5e58; font-size:.84rem; font-weight:800; } .lib-availability { margin:0; color:#6b7c78; font-size:.78rem; line-height:1.4; } .lib-availability:empty { display:none; } .lib-detail-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .lib-detail-actions .primary-button { grid-column:1 / -1; } .lib-detail-actions .primary-button.hidden + .secondary-button { grid-column:auto; } .lib-detail-actions .text-button { grid-column:1 / -1; min-height:38px; justify-self:center; } @media (max-width:359px){ .lib-detail-actions { grid-template-columns:1fr; } .lib-head h1 { font-size:1.5rem; } .lib-bar { flex-wrap:wrap; } } .lib-search-row { display:flex; gap:8px; margin-bottom:10px; } .lib-search-row .lib-search { flex:1; min-width:0; margin:0; } .lib-search-icon { position:absolute; left:12px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:#6b7c78; stroke-width:2.2; stroke-linecap:round; } .lib-search-row .lib-filters-button { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:46px; padding:0 13px; border:1px solid #c9d6d1; border-radius:15px; background:#f4f8f6; color:#22332e; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; white-space:nowrap; } .lib-search-row .lib-filters-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; } .lib-search-row .lib-filters-button.is-active { border-color:#d4a853; background:#fff8e6; color:#6b4d00; } .lib-search-row .lib-filters-button:focus-visible { outline:3px solid #d4a853; outline-offset:2px; } .lib-sort-icon { color:#6b7c78; font-size:.95rem; } @media (max-width:359px){ .lib-search-row .lib-filters-button { padding:0 10px; gap:4px; } } .lib-search-row { align-items:center; } .lib-search-row .lib-filters-button { height:46px; min-height:0; } /* ===== Professor — Disponibilidade do mês (recolhível) e exportação ===== */ #workspace[data-profession="teacher"] .availability-heading,#workspace[data-profession="teacher"] #weekly-availability { display:none; } .teacher-availability { margin:18px 0 8px; } .av-card { padding:16px; border:1px solid #dfe7e2; border-radius:20px; background:linear-gradient(180deg,#fffefb,#f8f6ef); box-shadow:0 6px 18px #0b30360d; } .av-head h2 { margin:0; color:#0b3036; font-size:1.12rem; letter-spacing:-.01em; } .av-head p { margin:4px 0 0; color:#5f716d; font-size:.82rem; line-height:1.4; } .av-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0 2px; } .av-summary > div { display:flex; flex-direction:column; gap:2px; min-width:0; padding:10px 12px; border:1px solid #e6ece8; border-radius:14px; background:#fff; } .av-summary span { color:#6b7c78; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .av-summary strong { color:#0b3036; font-size:.95rem; line-height:1.25; overflow-wrap:anywhere; } .av-summary small { color:#6b7c78; font-size:.7rem; } .av-actions { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px; margin-top:12px; } .av-actions .primary-button,.av-actions .secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 10px; white-space:nowrap; } .av-export svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .av-toggle span { font-size:1rem; line-height:1; } .av-actions button:focus-visible,.av-status button:focus-visible,.av-chips button:focus-visible,.av-cell button:focus-visible { outline:3px solid #d4a853; outline-offset:2px; } .av-body { margin-top:14px; } .av-body[hidden] { display:none !important; } .av-filters { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid #e6ece8; border-radius:16px; background:#fff; } .av-field { display:flex; flex-direction:column; gap:4px; min-width:0; color:#22332e; font-size:.78rem; font-weight:800; } .av-field select,.av-field input,.av-hours select { min-height:40px; min-width:0; padding:7px 10px; border:1px solid #d9e1dc; border-radius:11px; background:#fff; color:inherit; font:inherit; font-size:.88rem; } .av-custom { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .av-hours { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:#22332e; font-size:.8rem; font-weight:800; } .av-hours.is-disabled { opacity:.5; } .av-switches { display:flex; flex-wrap:wrap; gap:8px; } .av-switch { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:6px 11px; border:1px solid #dbe3df; border-radius:999px; background:#f8faf9; color:#22332e; font-size:.78rem; font-weight:800; cursor:pointer; } .av-switch input { width:18px; height:18px; margin:0; accent-color:#134a50; } .av-status { display:flex; gap:6px; } .av-status button,.av-chips button { min-height:34px; padding:6px 12px; border:1px solid #dbe3df; border-radius:999px; background:#fff; color:#33463f; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; } .av-status button.active,.av-chips button.active { border-color:#134a50; background:#134a50; color:#fff; } .av-grid-wrap { max-height:min(60vh,520px); margin-top:12px; overflow:auto; overscroll-behavior:contain; border:1px solid #e2e8e4; border-radius:16px; background:#fff; } .av-grid { border-collapse:separate; border-spacing:0; font-size:.72rem; } .av-grid th,.av-grid td { padding:0; } .av-grid thead th { position:sticky; top:0; z-index:2; min-width:76px; padding:7px 4px; border-bottom:1px solid #e2e8e4; background:#f6f8f7; color:#33463f; font-weight:800; text-align:center; } .av-grid thead th span { display:block; color:#6b7c78; font-size:.66rem; text-transform:capitalize; } .av-grid thead th b { font-size:.92rem; } .av-grid thead th.is-today { background:#eaf4ef; color:#0b3036; box-shadow:inset 0 -2px 0 #134a50; } .av-grid .av-corner { left:0; z-index:3; min-width:52px; } .av-grid tbody th { position:sticky; left:0; z-index:1; min-width:52px; padding:0 6px; border-right:1px solid #e2e8e4; background:#fbfcfb; color:#33463f; font-weight:800; text-align:left; font-variant-numeric:tabular-nums; } .av-grid tbody tr.is-half th { color:#8a9b96; font-weight:600; } .av-cell { height:30px; border-bottom:1px solid #f0f3f1; } .av-cell button { width:calc(100% - 4px); height:26px; margin:2px; padding:0 4px; border:0; border-radius:8px; font:inherit; font-size:.7rem; font-weight:800; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .av-cell.is-free button { background:#e2f4ea; color:#166540; } .av-cell.is-busy button { background:#e9edf1; color:#4b5d70; } .av-cell.is-busy.is-block button { background:repeating-linear-gradient(135deg,#f1ecf7 0 5px,#e9e1f3 5px 10px); color:#5b4a73; cursor:default; } .av-cell.is-none { color:#c4cecb; text-align:center; } .av-empty { margin:12px 0 0; color:#6b7c78; font-size:.84rem; } /* Exportação */ .av-dialog { width:min(calc(100% - 20px),520px); } .av-export-body { display:flex; flex-direction:column; gap:10px; } .av-label { margin:2px 0 -4px; color:#22332e; font-size:.78rem; font-weight:800; } .av-chips { display:flex; flex-wrap:wrap; gap:6px; } .av-inline { flex-direction:row; align-items:center; gap:8px; } .av-inline input { width:110px; } .av-options { display:flex; flex-direction:column; gap:6px; margin:0; padding:10px 12px; border:1px solid #e3e9e5; border-radius:14px; } .av-options legend { padding:0 4px; color:#22332e; font-size:.78rem; font-weight:800; } .av-radio,.av-check { display:flex; align-items:flex-start; gap:8px; color:#22332e; font-size:.86rem; cursor:pointer; } .av-radio input,.av-check input { width:18px; height:18px; margin:1px 0 0; flex:none; accent-color:#134a50; } .av-radio em { display:inline-block; margin-left:4px; padding:1px 7px; border-radius:999px; background:#fff3d6; color:#8a6100; font-size:.66rem; font-style:normal; font-weight:800; } .av-check.is-disabled { opacity:.5; cursor:not-allowed; } .av-warning { margin:0; padding:8px 10px; border-radius:10px; background:#fff4e5; color:#8a4b00; font-size:.8rem; font-weight:700; } .av-review { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; padding:12px; border-radius:14px; background:#f3f7f5; } .av-review div { display:flex; flex-direction:column; min-width:0; } .av-review span { color:#6b7c78; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .av-review b { color:#0b3036; font-size:.84rem; overflow-wrap:anywhere; } .av-review .av-found { grid-column:1 / -1; padding-top:6px; border-top:1px solid #e1e9e5; } .av-review .av-found b { font-size:1rem; } .av-none,.av-confirm,.av-result { display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; } .av-none { background:#fff4e5; color:#6b4a00; } .av-confirm { border:1px solid #f0c48a; background:#fff8ef; } .av-confirm p,.av-result p { margin:0; font-size:.88rem; font-weight:700; overflow-wrap:anywhere; } .av-result { background:#e8f5ee; color:#14532d; } .av-none div,.av-confirm div,.av-result div { display:flex; flex-wrap:wrap; gap:8px; } .av-none .secondary-button,.av-confirm button,.av-result button { flex:1 1 130px; min-height:42px; } #availability-export-generate[disabled] { opacity:.5; } @media (max-width:359px){ .av-actions { grid-template-columns:1fr; } .av-summary { grid-template-columns:1fr; } .av-review { grid-template-columns:1fr; } .av-custom { grid-template-columns:1fr; } } .av-hours select { width:auto; flex:0 0 auto; min-width:92px; } .av-hours > span { flex:0 0 auto; } .av-dialog .eyebrow { text-transform:uppercase; } /* Onboarding FOURMI Education — Professor/Estudante: cards verticais e legíveis (antes herdavam a grade genérica de 2–3 colunas). */ .onb .onb-education-grid { display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 18px; } .onb .onb-education-grid .profession-card { display:grid; grid-template-columns:52px minmax(0,1fr) 22px; grid-template-rows:auto auto; align-items:center; column-gap:14px; row-gap:3px; min-height:96px; padding:16px 16px 16px 14px; border:1.5px solid #e2ddcf; border-radius:18px; background:#fffdf8; color:#13261f; text-align:left; box-shadow:0 6px 18px #0b2a2010; transition:border-color .15s, background .15s, box-shadow .15s; } .onb .onb-education-grid .profession-card .profession-icon { grid-row:1 / 3; grid-column:1; width:52px; height:52px; border-radius:15px; background:#e5f1eb; color:#0c6248; } .onb .onb-education-grid .profession-card .profession-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; } .onb .onb-education-grid .profession-card .profession-name { grid-column:2; align-self:end; padding:0; font-size:1.06rem; font-weight:800; letter-spacing:.01em; overflow-wrap:normal; word-break:normal; hyphens:none; } .onb .onb-education-grid .profession-card .profession-description { grid-column:2; align-self:start; font-weight:500; font-size:.84rem; line-height:1.4; color:#5d6b64; overflow-wrap:normal; word-break:normal; hyphens:none; } .onb .onb-education-grid .edu-choice-arrow { grid-row:1 / 3; grid-column:3; display:grid; place-items:center; width:22px; height:22px; color:#9aa59f; } .onb .onb-education-grid .edu-choice-arrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .onb .onb-education-grid .profession-card.selected { border:2px solid #d4a853; background:#fdf6e6; box-shadow:0 0 0 4px #d4a85326, 0 8px 20px #0b2a2014; padding:15.5px 15.5px 15.5px 13.5px; } .onb .onb-education-grid .profession-card.selected .profession-icon { background:#0c4a3a; color:#f2d48c; } .onb .onb-education-grid .profession-card.selected::after { content:""; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:#b98a2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; } .onb .onb-education-grid .profession-card.selected .edu-choice-arrow { visibility:hidden; } .onb #student-onboarding-step #create-student-workspace { margin-top:4px; } /* Horário manual (Professor) — manual-time.js */ .mt-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:10px 0 12px; padding:4px; border-radius:14px; background:#eef1ec; } .mt-tabs button { min-height:40px; padding:6px 8px; border:0; border-radius:11px; background:transparent; color:#4e5c55; font-size:.84rem; font-weight:700; line-height:1.2; } .mt-tabs button.active { background:#fff; color:#0c4a3a; box-shadow:0 1px 4px #0b2a2018; } .mt-panel { display:grid; gap:12px; padding:14px; border:1px solid #e3e6df; border-radius:16px; background:#fffdf8; } .mt-times { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .mt-field { display:grid; gap:5px; margin:0; font-size:.8rem; font-weight:700; color:#4e5c55; } .mt-field input { width:100%; min-width:0; min-height:46px; margin:0; padding:8px 10px; border:1.5px solid #dfe3dc; border-radius:12px; background:#fff; color:#13261f; font-size:1.05rem; font-weight:700; } .mt-field input:focus { border-color:#0a8a5c; outline:none; box-shadow:0 0 0 3px #0a8a5c22; } .mt-duration-label { margin:0; color:#4e5c55; font-size:.84rem; font-weight:600; } .mt-chips { display:flex; flex-wrap:wrap; gap:7px; } .mt-chip { min-height:38px; padding:6px 13px; border:1.5px solid #dfe3dc; border-radius:11px; background:#fff; color:#2b3a33; font-size:.84rem; font-weight:700; } .mt-chip.selected { border-color:#c99a3c; background:#fdf3dc; color:#5c4210; } .mt-status { display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:13px; background:#f1f4f0; color:#4e5c55; font-size:.84rem; line-height:1.35; } .mt-status strong { display:block; color:#13261f; font-size:.9rem; } .mt-status small { display:block; margin-top:3px; color:#5d6b64; font-size:.78rem; } .mt-icon { flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#dfe5df; color:#4e5c55; font-weight:900; font-size:.85rem; } .mt-status.is-available { background:#e9f6ef; } .mt-status.is-available .mt-icon { background:#0c6248; color:#fff; } .mt-status.is-occupied,.mt-status.is-blocked,.mt-status.is-invalid { background:#fcecea; } .mt-status.is-occupied .mt-icon,.mt-status.is-blocked .mt-icon,.mt-status.is-invalid .mt-icon { background:#c2453a; color:#fff; } .mt-status.is-outside { background:#fdf3dc; } .mt-status.is-outside .mt-icon { background:#b98a2e; color:#fff; } .mt-use { width:100%; margin:0; } .mt-use:disabled { opacity:.5; } .mt-host.hidden { display:none; } .booking-availability-slot.is-edge { border-style:dashed; } .slot-edge-note,.lp-row.is-edge em { display:block; color:#0c6248; font-style:normal; font-size:.72rem; font-weight:700; } .lp-row.is-edge em { display:inline; } .lp-row.is-offgrid .lp-time { color:#0c6248; font-weight:800; } #lesson-day-picker .lp-mode-tabs { position:sticky; top:0; z-index:2; margin-top:0; } #lesson-day-picker .lp-grid.hidden { display:none; } #lesson-day-picker .mt-host { padding-bottom:6px; } /* Novo aluno (Professor): mesmo seletor de aulas por semana da Nova aula */ .client-lessons-week { display:grid; gap:6px; } .client-lessons-week.hidden { display:none; } #new-client-weekly-schedule.uses-lesson-picker > .legacy-client-days, #new-client-weekly-schedule.uses-lesson-picker > #new-client-weekday-chips, #new-client-weekly-schedule.uses-lesson-picker > #new-client-day-fields { display:none; } /* ===== Biblioteca de materiais do Professor (teacher-library.js) ===== */ .teacher-library-entry,.quick-actions-grid .quick-library { display:none; } body[data-profession="teacher"] .teacher-library-entry { display:grid; grid-template-columns:44px minmax(0,1fr) 16px; align-items:center; gap:12px; width:100%; margin:4px 0 12px; padding:12px 14px; border:1px solid #e3e1d6; border-radius:18px; background:#fffdf8; color:#13261f; text-align:left; box-shadow:0 4px 14px #0b2a200a; } body[data-profession="teacher"] .quick-actions-grid .quick-library { display:flex; } .teacher-library-entry strong { display:block; font-size:.98rem; } .teacher-library-entry small { display:block; margin-top:2px; color:#5d6b64; font-size:.8rem; line-height:1.3; } .tl-entry-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:#0c4a3a; color:#f2d48c; } .tl-entry-icon svg,.tl-header svg,.tl-file-icon svg,.tl-folder-icon svg,.tl-search svg,.tl-filter-button svg,.tl-more svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .tl-dialog { width:min(calc(100% - 20px),560px); max-width:560px; max-height:94dvh; padding:0; overflow:hidden; border:0; border-radius:24px; background:#fbf8f1; color:#13261f; } .tl-dialog::backdrop { background:#06201999; } .tl-shell { display:flex; flex-direction:column; max-height:94dvh; } .tl-header { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:14px 14px 10px; border-bottom:1px solid #ece8dc; background:#fbf8f1; } .tl-header h2 { margin:0; font-size:1.15rem; line-height:1.25; overflow-wrap:anywhere; } .tl-back { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:12px; background:#eef1ec; color:#0c4a3a; } .tl-back.hidden + h2 { grid-column:1 / 3; } .tl-body { padding:12px 14px 22px; overflow:auto; overscroll-behavior:contain; } .tl-tabs { display:grid; grid-template-columns:1fr 1fr; margin:0 0 12px; border-bottom:1px solid #e4e1d6; } .tl-tabs button { min-height:44px; padding:8px 4px; border:0; border-bottom:2.5px solid transparent; background:none; color:#5d6b64; font-weight:700; font-size:.9rem; } .tl-tabs button.active { color:#0c4a3a; border-bottom-color:#0c4a3a; } .tl-search-row { display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:8px; margin-bottom:12px; } .tl-search { display:flex; align-items:center; gap:8px; min-height:46px; margin:0; padding:0 12px; border:1.5px solid #e1ded3; border-radius:14px; background:#fff; color:#6b766f; } .tl-search input { flex:1; min-width:0; margin:0; padding:10px 0; border:0; background:transparent; font-size:.92rem; outline:none; box-shadow:none; } .tl-filter-button { position:relative; display:grid; place-items:center; border:1.5px solid #e1ded3; border-radius:14px; background:#fff; color:#0c4a3a; } .tl-filter-button.active { border-color:#0c4a3a; background:#e9f3ee; } .tl-filter-button b { position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#c99a3c; color:#fff; font-size:.7rem; line-height:20px; } .tl-filters { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin:0 0 12px; padding:12px; border:1px solid #e4e1d6; border-radius:16px; background:#fff; } .tl-filter { display:grid; gap:4px; margin:0; font-size:.74rem; font-weight:700; color:#5d6b64; min-width:0; } .tl-filter select { width:100%; min-width:0; min-height:40px; margin:0; padding:6px 8px; border-radius:10px; font-size:.84rem; } .tl-filter-check { display:flex; align-items:center; gap:8px; grid-column:1 / -1; font-size:.84rem; } .tl-filter-check input { width:auto; margin:0; } .tl-filters .text-button { grid-column:1 / -1; justify-self:start; } .tl-actions { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; } .tl-actions .primary-button,.tl-actions .secondary-button { flex:1 1 160px; margin:0; } .tl-section { margin:6px 0 16px; } .tl-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; } .tl-section-head h3 { margin:0; font-size:1rem; } .tl-list { display:grid; gap:0; margin:0; padding:0; list-style:none; border:1px solid #e7e3d8; border-radius:16px; background:#fff; overflow:hidden; } .tl-row + .tl-row { border-top:1px solid #efece3; } .tl-row-main { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 12px; border:0; background:transparent; color:#13261f; text-align:left; } .tl-row-text { min-width:0; } .tl-row-text strong { display:block; font-size:.92rem; line-height:1.25; overflow-wrap:anywhere; } .tl-row-text small { display:block; margin-top:2px; color:#68746d; font-size:.76rem; line-height:1.3; overflow-wrap:anywhere; } .tl-row-text .tl-used { color:#0c6248; font-weight:700; } .tl-folder-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#fbeed1; color:#b07c1e; } .tl-folder-icon svg { fill:#f0c766; stroke:#b07c1e; } .tl-file-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#e8f1ec; color:#0c6248; } .tl-file-icon.is-pdf { background:#fdebe8; color:#c2453a; } .tl-file-icon.is-image { background:#eaf0fb; color:#3c6cb4; } .tl-file-icon.is-link { background:#e7f2f5; color:#1f7a8c; } .tl-chevron,.tl-more { color:#9aa59f; font-size:1.3rem; } .tl-pick-label,.tl-badge { padding:4px 10px; border-radius:999px; background:#0c4a3a; color:#fff; font-size:.74rem; font-weight:800; white-space:nowrap; } .tl-badge.is-public { background:#fdf3dc; color:#7a5615; } .tl-fav { color:#c99a3c; } .tl-muted,.tl-folder-meta { margin:0 0 8px; color:#68746d; font-size:.84rem; } .tl-note { margin:0 0 12px; padding:10px 12px; border-radius:12px; background:#f1efe6; color:#55615a; font-size:.8rem; line-height:1.4; } .tl-empty { padding:18px 14px; border:1.5px dashed #ddd8c9; border-radius:16px; text-align:center; color:#5d6b64; } .tl-empty strong { display:block; color:#13261f; } .tl-empty p { margin:6px 0 0; font-size:.84rem; line-height:1.4; } .tl-date { display:grid; place-items:center; width:46px; min-height:42px; border-radius:12px; background:#eef1ec; color:#0c4a3a; font-size:.8rem; font-weight:800; } .tl-form { display:grid; gap:6px; } .tl-form label { margin-top:6px; } .tl-form input:not([type=radio]):not([type=checkbox]),.tl-form select,.tl-form textarea { width:100%; min-width:0; margin:0; } .tl-form .primary-button { margin-top:10px; } .tl-kind { margin-top:0; } .tl-kind label { display:grid; place-items:center; margin:0; min-height:40px; border-radius:11px; font-size:.84rem; font-weight:700; color:#4e5c55; cursor:pointer; } .tl-kind input { position:absolute; opacity:0; pointer-events:none; } .tl-kind label:has(input:checked) { background:#fff; color:#0c4a3a; box-shadow:0 1px 4px #0b2a2018; } .tl-file-pick { display:inline-flex; justify-content:center; width:100%; margin:4px 0 2px; } .tl-visibility { display:grid; gap:6px; margin:8px 0 0; padding:0; border:0; } .tl-visibility legend { margin-bottom:6px; font-weight:700; font-size:.86rem; } .tl-vis-option { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:10px; margin:0; padding:10px 12px; border:1.5px solid #e3e0d5; border-radius:13px; background:#fff; cursor:pointer; } .tl-vis-option input { width:18px; height:18px; margin:2px 0 0; accent-color:#0c4a3a; } .tl-vis-option strong { display:block; font-size:.88rem; } .tl-vis-option small { display:block; color:#68746d; font-size:.76rem; line-height:1.3; } .tl-vis-option:has(input:checked) { border-color:#c99a3c; background:#fdf6e6; } .tl-detail-meta { display:flex; align-items:center; gap:10px; margin:0 0 12px; color:#55615a; font-size:.84rem; overflow-wrap:anywhere; } .tl-detail-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; } .tl-detail-buttons button { margin:0; } .tl-remove { margin-top:6px; } @media (max-width:599px) { .tl-dialog { width:100%; max-width:100%; margin:auto 0 0; border-radius:24px 24px 0 0; } .tl-sheet { max-height:90dvh; } } @media (max-width:360px) { .tl-filters { grid-template-columns:1fr; } .tl-detail-buttons { grid-template-columns:1fr; } } /* Registro da aula: Biblioteca */ .edu-library-options { display:grid; gap:8px; margin:8px 0 4px; } .edu-library-options.hidden { display:none; } .edu-save-library { display:flex; align-items:center; gap:10px; margin:0; font-size:.86rem; font-weight:700; } .edu-save-library input { width:20px; height:20px; margin:0; accent-color:#0c4a3a; flex:none; } .edu-library-folder { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; margin:0; font-size:.82rem; color:#5d6b64; } .edu-library-folder select { width:100%; min-width:0; margin:0; } .edu-from-library { width:100%; margin:0; } .edu-pdf-icon.is-link { background:#1f7a8c; } /* Ficha do aluno: abas e materiais */ .cd-tabs { display:grid; grid-template-columns:1fr 1fr; margin:14px 0 12px; border-bottom:1px solid #e4e1d6; } .cd-tabs button { min-height:44px; padding:8px 4px; border:0; border-bottom:2.5px solid transparent; background:none; color:#5d6b64; font-weight:700; } .cd-tabs button.active { color:#0c4a3a; border-bottom-color:#0c4a3a; } .cd-tabs b { display:inline-block; min-width:20px; margin-left:4px; padding:0 6px; border-radius:10px; background:#e5f1eb; color:#0c4a3a; font-size:.72rem; line-height:20px; } .cd-panel[hidden] { display:none !important; } .cd-material { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; } .cd-material-open { display:flex; align-items:center; gap:6px; margin-top:4px; padding:0; color:#0c6248; font-size:.82rem; font-weight:700; text-align:left; overflow-wrap:anywhere; } .cd-material-open .tl-file-icon { width:24px; height:24px; border-radius:7px; flex:none; } .cd-material-open .tl-file-icon svg { width:15px; height:15px; } .cd-lesson-link { font-size:.8rem; white-space:nowrap; } .cd-material-status { margin:8px 0 0; color:#b3382b; font-size:.8rem; } /* Excluir aluno */ .student-delete-row { display:flex; justify-content:flex-end; margin:-4px 0 6px; } .student-delete-button { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:6px 4px; font-size:.86rem; font-weight:700; } .student-delete-button svg,.sd-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .sd-dialog { width:min(calc(100% - 32px),420px); padding:0; border:0; border-radius:22px; background:#fffdf8; color:#13261f; } .sd-dialog::backdrop { background:#06201999; } .sd-shell { display:grid; gap:10px; padding:22px 20px 18px; text-align:left; } .sd-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#fcecea; color:#c2453a; } .sd-icon svg { width:24px; height:24px; } .sd-shell h2 { margin:2px 0 0; font-size:1.2rem; } .sd-question { margin:0; font-weight:700; font-size:.95rem; overflow-wrap:anywhere; } .sd-help { margin:0; color:#5d6b64; font-size:.86rem; line-height:1.4; } .sd-impact { margin:0; padding:10px 12px 10px 28px; border-radius:12px; background:#f1f4f0; color:#3f4c45; font-size:.82rem; line-height:1.45; } .sd-future { display:flex; align-items:flex-start; gap:10px; margin:0; padding:10px 12px; border:1.5px solid #e3e0d5; border-radius:12px; font-size:.84rem; font-weight:700; } .sd-future input { width:20px; height:20px; margin:0; flex:none; accent-color:#b3382b; } .sd-future.hidden,.sd-connected.hidden { display:none; } .sd-connected { margin:0; padding:10px 12px; border-radius:12px; background:#fdf3dc; color:#5c4210; font-size:.82rem; line-height:1.4; } .sd-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; } .sd-actions button { margin:0; min-height:48px; } .danger-button { border:0; border-radius:14px; background:#b3382b; color:#fff; font-weight:800; } .danger-button:focus-visible { outline:3px solid #f2b8b0; outline-offset:2px; } /* ===== Home do Professor: Resumo mensal (teacher-summary.js) ===== */ body[data-profession="teacher"] #home-screen .home-month-heading, body[data-profession="teacher"] #home-screen .home-month-summary { display:none !important; } .tms { display:grid; gap:12px; margin:22px 0 8px; } .tms.hidden { display:none; } .tms-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } .tms-head h2 { margin:2px 0 0; font-size:1.5rem; } .tms-month-name { margin:2px 0 0; color:#55615a; font-size:.86rem; font-weight:700; } .tms-month-picker select { width:auto; max-width:46vw; min-height:40px; margin:0; padding:6px 30px 6px 12px; border:1px solid #e3e0d5; border-radius:12px; background-color:#fff; font-size:.82rem; font-weight:700; } .tms-icon { width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:50%; background:#e8f4ee; color:#0c6248; } .tms-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .tms-label { display:block; color:#55615a; font-size:.82rem; font-weight:700; } .tms-net { display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:14px; padding:18px 16px; border:1px solid #dcebe2; border-radius:20px; background:linear-gradient(135deg,#fff 0%,#f0f8f3 100%); box-shadow:0 6px 18px #0b2a200d; } .tms-net .tms-icon { width:56px; height:56px; border-radius:16px; background:#0c4a3a; color:#f2d48c; } .tms-net-value { display:block; margin-top:2px; font-size:1.85rem; line-height:1.1; letter-spacing:-.02em; color:#0c3b2f; overflow-wrap:anywhere; } .tms-net.is-negative .tms-net-value { color:#b3382b; } .tms-trend { display:grid; justify-items:end; gap:1px; font-weight:800; font-size:.9rem; white-space:nowrap; } .tms-trend small { color:#7a857f; font-weight:600; font-size:.7rem; } .is-up { color:#0a8a5c; } .is-down { color:#b3382b; } .tms-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .tms-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; min-width:0; padding:14px 12px; border:1px solid #ebe7dc; border-radius:18px; background:#fff; } .tms-card .tms-icon { width:42px; height:42px; } .tms-card .tms-icon svg { width:21px; height:21px; } .tms-card strong { display:block; margin-top:1px; font-size:1.18rem; line-height:1.15; color:#13261f; overflow-wrap:anywhere; } .tms-card small { display:block; margin-top:2px; color:#6b766f; font-size:.72rem; line-height:1.3; } .tms-card .tms-mini-trend { font-weight:800; } .tms-card.is-received .tms-icon { background:#e3f4ea; color:#0a8a5c; } .tms-card.is-pending .tms-icon { background:#fbf0d6; color:#b8862a; } .tms-card.is-expenses .tms-icon { background:#fbe8e5; color:#c2574a; } .tms-card.is-lessons .tms-icon { background:#e3eff4; color:#1d6b7f; } .tms-evolution { padding:14px 14px 12px; border:1px solid #ebe7dc; border-radius:18px; background:#fff; } .tms-evolution-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .tms-evolution-head h3 { margin:0; font-size:1rem; } .tms-toggle { display:inline-grid; grid-auto-flow:column; gap:2px; padding:3px; border-radius:999px; background:#eef1ec; } .tms-toggle button { min-height:34px; padding:4px 14px; border:0; border-radius:999px; background:transparent; color:#4e5c55; font-size:.8rem; font-weight:800; } .tms-toggle button.active { background:#0c4a3a; color:#fff; } .tms-bars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:end; height:150px; padding:0 4px; border-bottom:1px solid #e6e3d9; } .tms-bar-col { display:grid; grid-template-rows:auto 1fr auto; align-items:end; justify-items:center; height:100%; min-width:0; } .tms-bar-value { min-height:16px; color:#55615a; font-size:.7rem; font-weight:800; white-space:nowrap; } .tms-bar-track { display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; } .tms-bar { width:min(42px,80%); border-radius:8px 8px 3px 3px; background:#d9e8df; } .tms-bar-col.is-selected .tms-bar { background:#0c6248; } .tms-bar-col.is-selected .tms-bar-value { color:#0c4a3a; } .tms-bar-col.is-future .tms-bar { background:repeating-linear-gradient(135deg,#f3f1ea 0 6px,#ebe8de 6px 12px); border:1px dashed #d6d2c4; } .tms-bar-label { padding:6px 0 2px; color:#6b766f; font-size:.74rem; font-weight:700; text-transform:capitalize; } .tms-bar-col.is-selected .tms-bar-label { color:#0c4a3a; } .tms-chart-note { margin:8px 0 0; color:#7a857f; font-size:.72rem; } .tms-details { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; min-height:50px; margin:0; border:1px solid #d9e8df; border-radius:16px; background:#eef6f1; color:#0c4a3a; font-weight:800; font-size:.95rem; } @media (max-width:360px) { .tms-net { grid-template-columns:48px minmax(0,1fr); } .tms-net .tms-icon { width:48px; height:48px; } .tms-trend { grid-column:1 / -1; justify-items:start; } .tms-card { grid-template-columns:1fr; gap:6px; } .tms-net-value { font-size:1.6rem; } } /* Ajustes de largura em telas estreitas (320px): a coluna central não pode crescer além da tela. */ .booking-availability-nav { grid-template-columns:38px minmax(0,1fr) 38px; } .booking-availability-nav input { min-width:0; width:100%; } .client-lessons-week { grid-template-columns:minmax(0,1fr); min-width:0; } .client-lessons-week > * { min-width:0; } .client-lessons-week input[type=date] { width:100%; min-width:0; } .tms-head h2 { font-size:1.4rem; white-space:nowrap; } .tms-head > div { min-width:0; } .tms-month-picker select { max-width:44vw; font-size:.8rem; } @media (max-width:360px) { .tms-head { flex-wrap:wrap; align-items:flex-start; } .tms-month-picker select { max-width:100%; } } /* Suite-first profile switching. Uses the approved Education/Pro image assets. */ .space-switch-dialog { width:min(560px,calc(100% - 20px)); max-height:92dvh; padding:0; border:0; border-radius:24px; overflow:auto; background:#faf8f0; color:#183329; box-shadow:0 22px 70px #001c17a1; } .space-switch-dialog::backdrop { background:#001a14a8; } .space-switch-dialog[data-suite="pro"] { --space-dark:#052d21; --space-accent:#c99b47; --space-soft:#f6eddb; } .space-switch-dialog[data-suite="education"] { --space-dark:#0a3440; --space-accent:#c9a454; --space-soft:#e9f3ef; } .space-switch-shell { min-width:0; } .space-switch-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; background:var(--space-dark); color:#fff; } .space-switch-brand { display:flex; align-items:center; gap:10px; min-width:0; } .space-switch-brand img { width:54px; height:46px; object-fit:contain; } .space-switch-brand span,.space-switch-brand strong,.space-switch-brand small { display:block; } .space-switch-brand strong { font-size:.86rem; letter-spacing:.09em; } .space-switch-brand small { color:#f0cf81; font-size:.76rem; } .space-switch-header .close-button { flex:none; } .space-switch-body { display:grid; gap:10px; padding:20px; } .space-switch-body .eyebrow { margin:7px 0 0; color:#078761; } .space-switch-body h2 { margin:0 0 5px; font-size:clamp(1.35rem,6vw,1.75rem); line-height:1.17; overflow-wrap:normal; word-break:normal; } .space-switch-current { display:grid; gap:3px; padding:12px 15px; border:1px solid #dce6dd; border-radius:16px; background:#fff; } .space-switch-current small { color:#64736b; } .space-switch-current strong { font-size:1.05rem; } .space-switch-current span { color:#0b6048; font-size:.84rem; font-weight:700; } .space-switch-profiles { display:grid; gap:9px; } .space-switch-card,.space-switch-other { display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:13px; border:1px solid #dce6dd; border-radius:17px; background:#fff; color:inherit; text-align:left; cursor:pointer; } .space-switch-card:hover,.space-switch-other:hover,.space-switch-card:focus-visible,.space-switch-other:focus-visible { border-color:var(--space-accent); outline:2px solid #c9a45465; outline-offset:1px; } .space-switch-card.is-current { border-color:var(--space-accent); background:var(--space-soft); cursor:default; opacity:1; } .space-switch-card-icon { flex:none; display:grid; place-items:center; width:41px; height:41px; border-radius:12px; background:var(--space-soft); color:var(--space-dark); font-size:1.25rem; } .space-switch-card>span:nth-child(2),.space-switch-other>span:nth-child(2) { flex:1; min-width:0; } .space-switch-card strong,.space-switch-card small,.space-switch-other strong,.space-switch-other small { display:block; overflow-wrap:normal; word-break:normal; } .space-switch-card small,.space-switch-other small { margin-top:3px; color:#68776f; font-size:.79rem; line-height:1.35; } .space-switch-card-arrow { flex:none; color:#aa8034; font-size:1.2rem; font-weight:800; } .space-switch-other { background:var(--space-soft); } .space-switch-other img { flex:none; width:55px; height:46px; object-fit:contain; } @media(max-width:360px){.space-switch-body{padding:15px}.space-switch-card,.space-switch-other{gap:9px;padding:11px}.space-switch-card-icon{width:36px;height:36px}} /* Troca de perfil/espaço — identidade oficial: livro aberto (Professor), capelo (Estudante), logos reais das suítes. */ .space-switch-brand img { width:58px; height:48px; object-fit:contain; flex:none; } .space-switch-brand-fallback,.space-switch-logo-fallback { display:none; place-items:center; flex:none; color:#f0cf81; } .space-switch-brand.is-fallback img,.space-switch-logo.is-fallback img { display:none; } .space-switch-brand.is-fallback .space-switch-brand-fallback { display:grid; width:48px; height:48px; border-radius:14px; background:#ffffff14; } .space-switch-brand-fallback svg,.space-switch-logo-fallback svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .space-switch-current { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:14px; padding:14px 16px; } .space-switch-current-text { display:grid; gap:2px; min-width:0; padding-left:14px; border-left:1px solid #e3e7e0; } .space-switch-current-text strong { overflow-wrap:anywhere; } .space-switch-avatar-wrap { display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:#f4f1e8; } .space-switch-avatar { display:grid; place-items:center; width:46px; height:46px; overflow:hidden; border-radius:50%; background:linear-gradient(145deg,#f6d571,#e1ab2e); color:#15261f; font-size:1.25rem; font-weight:900; box-shadow:0 2px 6px #9a6d1640; } .space-switch-avatar img { width:100%; height:100%; object-fit:cover; } .space-switch-card { gap:14px; padding:14px; } .space-switch-card-icon { width:48px; height:48px; border-radius:14px; background:#e3f0ea; color:#0c6248; } .space-switch-dialog[data-suite="pro"] .space-switch-card-icon { background:#f3ead6; color:#0b4a34; } .space-switch-card-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .space-switch-card-arrow { display:grid; place-items:center; width:26px; height:26px; color:#b98a2e; } .space-switch-card-arrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .space-switch-card-arrow.is-check svg { width:24px; height:24px; stroke-width:2.8; } .space-switch-other .space-switch-card-arrow { color:#183329; } .space-switch-card.is-current { border:2px solid #d4a853; background:linear-gradient(135deg,#fdf6e6 0%,#f7f3e8 100%); padding:13px; } .space-switch-dialog[data-suite] .space-switch-card.is-current .space-switch-card-icon { background:#e3f0ea; color:#0c6248; } .space-switch-other { gap:14px; padding:12px 14px; background:#fff; } .space-switch-logo { display:grid; place-items:center; flex:none; width:62px; height:52px; border-radius:14px; background:#eef4ef; overflow:hidden; } .space-switch-logo img { width:56px; height:46px; object-fit:contain; } .space-switch-logo.is-fallback .space-switch-logo-fallback { display:grid; color:#0b4a34; } @media(max-width:360px){.space-switch-card-icon{width:44px;height:44px}.space-switch-logo{width:54px;height:46px}.space-switch-logo img{width:48px;height:40px}.space-switch-avatar-wrap{width:52px;height:52px}.space-switch-avatar{width:40px;height:40px}.space-switch-current-text{padding-left:10px}} .space-switch-dialog .space-switch-brand .space-switch-brand-fallback { display:none; } .space-switch-dialog .space-switch-brand.is-fallback .space-switch-brand-fallback { display:grid; } .space-switch-dialog .space-switch-current .space-switch-current-text { color:#183329; font-size:1rem; font-weight:400; } .space-switch-dialog .space-switch-current .space-switch-current-text strong { color:#13261f; } .space-switch-dialog .space-switch-current #space-switch-current-type { color:#0b7a55; font-size:.92rem; font-weight:700; } .space-switch-dialog .space-switch-current .space-switch-avatar-wrap { display:grid; } .space-switch-dialog .space-switch-current .space-switch-avatar { display:grid; color:#15261f; font-size:1.3rem; font-weight:900; } /* ===== Agenda do Barbeiro: mesma grade do Professor (teacher-agenda.js, modo barber), identidade FOURMI Pro ===== */ #workspace:is([data-profession="barber"],[data-profession="other"]) .availability-heading,#workspace:is([data-profession="barber"],[data-profession="other"]) #weekly-availability { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen > p.intro:first-of-type { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-root { --st-deep:#052d21; --st-teal:#0b4a34; --st-ink:#13261f; --st-gold:#c99b47; --st-gold-2:#efd38f; --st-cream:#f8f5ec; --st-muted:#5f6c66; --st-line:#e5e1d4; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-root .student-segmented { background:#ece7d9; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-root .student-segmented button.active { background:#052d21; color:#f2d48c; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-root .student-filter-row button.active { border-color:#0b4a34; background:#0b4a34; color:#fff; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-root .sg-today.is-current { background:#c99b47; border-color:#c99b47; color:#13261f; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-head.is-today b,#workspace:is([data-profession="barber"],[data-profession="other"]) .sg-head.is-today small { color:#a87a26; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-col.is-today { background:#fbf6e9; } #workspace:is([data-profession="barber"],[data-profession="other"]) .sg-now { --now:#c99b47; } .sg-variant-barber .tg-block { background:color-mix(in srgb,var(--block) 10%,#fffdf7); box-shadow:0 1px 4px #052d2114; } .sg-variant-barber .tg-ind .tg-status-dot.status-confirmed { background:#0b7a55; } .sg-variant-barber .tg-ind .tg-status-dot.status-completed { background:#1f6b40; } .sg-variant-barber .tg-ind .tg-pay { background:#c99b47; } /* Filtros extras do Barbeiro: serviço, pagamento e cliente (busca, sem carregar listas enormes). */ .bg-extra-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 10px; width:100%; margin:2px 0 4px; } .bg-filter { display:grid; gap:3px; min-width:0; margin:0; color:#5f6c66; font-size:.72rem; font-weight:700; } .bg-filter select,.bg-filter input { width:100%; min-width:0; min-height:40px; margin:0; padding:6px 10px; border:1px solid #e1ddd0; border-radius:11px; background-color:#fff; font-size:.84rem; } .bg-client { grid-column:1 / -1; } .bg-clear { grid-column:1 / -1; justify-self:start; padding:2px 0; font-size:.8rem; } .sg-root .student-agenda-tools:has(.bg-extra-filters) { display:block; } /* Estado vazio do período */ .bg-empty { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:8px 0 10px; padding:12px 14px; border:1px dashed #d8d2c1; border-radius:14px; background:#fffdf7; color:#5f6c66; font-size:.86rem; } .bg-empty p { margin:0; } .bg-empty .compact-button { margin:0; } /* Lembretes: na faixa do dia, sem ocupar horário */ .sg-chip.is-reminder { border:1px dashed #c99b47; background:#fdf6e6; color:#5c4210; } .sg-chip.is-reminder::before { content:""; display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:#c99b47; vertical-align:middle; } .sg-chip.is-reminder.is-done { opacity:.6; text-decoration:line-through; } .bg-reminder-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#c99b47; } .tg-row.is-reminder { border-left:3px dashed #c99b47; } .tg-row.is-reminder.is-done strong { text-decoration:line-through; opacity:.7; } /* + da Agenda do Barbeiro e lembrete no + central */ .quick-actions-grid .quick-reminder { display:none; } body:is([data-profession="barber"],[data-profession="other"]) .quick-actions-grid .quick-reminder { display:flex; } .pa-list { display:grid; gap:10px; } .pa-item { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid #e5e1d4; border-radius:16px; background:#fff; color:#13261f; text-align:left; } .pa-item strong { display:block; font-size:.96rem; } .pa-item small { display:block; margin-top:2px; color:#5f6c66; font-size:.78rem; line-height:1.3; } .pa-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#f3ead6; color:#0b4a34; } .pa-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .pa-item:focus-visible { outline:3px solid #c99b47; outline-offset:2px; } .rm-shell .form-row { margin:0; } .rm-shell input:not([type=checkbox]),.rm-shell textarea { width:100%; min-width:0; } .rm-done { display:flex; align-items:center; gap:10px; margin:4px 0 0; font-weight:700; } .rm-done input { width:20px; height:20px; margin:0; accent-color:#0b4a34; } .rm-done.hidden { display:none; } .rm-shell .sd-actions .hidden { display:none; } .rm-shell .sd-actions:has(#reminder-delete.hidden) { grid-template-columns:1fr; } /* Bloquear compromisso: dia inteiro, repetição e notas */ .block-allday { display:flex; align-items:center; gap:10px; margin:10px 0 2px; font-weight:700; } .block-allday input { width:20px; height:20px; margin:0; accent-color:#0b4a34; } .block-times.is-disabled { opacity:.45; } .block-repeat-until.hidden { display:none; } #block-dialog .form-row > div { min-width:0; } #block-dialog input,#block-dialog select,#block-dialog textarea { min-width:0; max-width:100%; } @media (max-width:374px){ #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen .page-heading { gap:8px; } #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen .agenda-actions { flex-shrink:1; min-width:0; gap:6px; } #workspace:is([data-profession="barber"],[data-profession="other"]) #agenda-screen .agenda-actions .compact-button { min-width:0; padding-inline:8px; font-size:.68rem; white-space:normal; line-height:1.15; } } /* ===== Central do Barbeiro (barber-center.js) · 15/10/2026 ===== */ /* Lembretes: dourados, com sino; concluídos suavizados (continuam visíveis). */ .sg-chip.is-reminder { display:inline-flex; align-items:center; gap:4px; border:1px solid #e3c47f; background:linear-gradient(180deg,#fdf6e3,#f8ecd0); color:#5c4210; font-weight:700; } .sg-chip.is-reminder::before { display:none; } .sg-chip.is-reminder .rm-bell,.tg-row.is-reminder .rm-bell { flex:none; width:12px; height:12px; fill:none; stroke:#a87a26; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .tg-row.is-reminder .rm-bell { margin-right:5px; vertical-align:-1px; } .sg-chip.is-reminder.is-important { border-color:#c99b47; box-shadow:inset 3px 0 0 #c99b47; } .sg-chip.is-reminder .rm-flag { display:inline-grid; place-items:center; width:14px; height:14px; margin-right:3px; border-radius:50%; background:#c99b47; color:#fff; font-size:.62rem; font-weight:900; vertical-align:1px; } .sg-chip.is-reminder.is-done { opacity:.55; border-style:dashed; background:#faf6ec; text-decoration:line-through; } .tg-row.is-reminder { border-left:3px solid #c99b47; background:#fdf8ec; } .tg-row.is-reminder.is-done { opacity:.6; border-left-style:dashed; } .tg-row.is-reminder.is-important strong { color:#7a5212; } /* Dialogo de lembrete avançado */ .rm-shell select { width:100%; min-width:0; } .rm-custom.hidden,#reminder-action-help.hidden { display:none; } .rm-quick { display:flex; flex-wrap:wrap; gap:8px; padding:10px; border-radius:14px; background:#f8f1df; } .rm-quick.hidden { display:none; } .rm-quick-btn { display:inline-flex; align-items:center; gap:6px; min-height:40px; margin:0; padding:6px 12px; border:1px solid #e3d3ad; border-radius:999px; background:#fff; color:#0b4a34; font-size:.82rem; font-weight:800; text-decoration:none; } .rm-quick-btn.is-on { background:#0b4a34; border-color:#0b4a34; color:#f2d48c; } .rm-quick-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .rm-quick-note { align-self:center; color:#5f6c66; font-size:.78rem; } .rm-important input { accent-color:#c99b47; } /* Cartões do Barbeiro: cor do serviço + estado em texto/ícone. */ .sg-variant-barber .bg-card { border-left-width:4px; } .sg-variant-barber .bg-card .tg-service { color:#45534d; font-size:.68rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bg-state { display:block; overflow:hidden; color:#5f6c66; font-size:.64rem; font-weight:700; white-space:nowrap; text-overflow:ellipsis; } .bg-stage { color:#0b4a34; } .bg-stage.is-scheduled { color:#5f6c66; } .bg-stage.is-arrived,.bg-stage.is-inService { color:#8a5d10; } .bg-stage.is-noShow { color:#b3382b; } .sg-variant-barber .bg-ind { position:absolute; top:5px; right:4px; display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none; } .sg-variant-barber .bg-ind i { display:grid; place-items:center; width:12px; height:12px; border-radius:50%; font-style:normal; font-size:.55rem; font-weight:900; line-height:1; } .sg-variant-barber .bg-ind .bg-ok { background:#0b4a34; color:#f2d48c; } .sg-variant-barber .bg-ind .bg-note { background:#c99b47; color:#fff; } .sg-variant-barber .bg-ind .tg-pay { width:7px; height:7px; background:#c99b47; box-shadow:0 0 0 1.5px #fff6dc; font-size:0; } .sg-variant-barber .bg-card.is-tiny .bg-ind { top:50%; transform:translateY(-50%); flex-direction:row; } .sg-variant-barber .bg-card.stage-inService { box-shadow:0 0 0 2px #c99b47,0 2px 6px #052d211f; } .sg-variant-barber .bg-card.stage-arrived { box-shadow:0 0 0 1.5px #e3c47f,0 1px 4px #052d2114; } .sg-variant-barber .bg-card.status-cancelled { --block:#9aa29e !important; opacity:.5; border-left-style:dashed; text-decoration:line-through; } .sg-variant-barber .bg-card.status-noShow { opacity:.75; background:#fff7f5; outline:1.5px solid #c4473a; outline-offset:-1.5px; border-left-color:#c4473a; } .sg-variant-barber .bg-card.stage-paid .sg-block-time::after { content:" ✓"; color:#0b7a55; font-weight:900; } /* Preparação/limpeza: extensão discreta do cartão. */ .bg-pad { position:absolute; z-index:1; box-sizing:border-box; margin:0 0 0 2px; border-left:3px solid color-mix(in srgb,var(--block) 45%,transparent); background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--block) 14%,transparent) 0 4px,transparent 4px 8px); pointer-events:none; } .bg-pad.is-prep { border-radius:8px 8px 0 0; } .bg-pad.is-clean { border-radius:0 0 8px 8px; } /* Atalhos da central (lista de espera, avisos, mensagens). */ .bg-center-links { display:flex; gap:8px; width:100%; margin:2px 0 8px; overflow-x:auto; scrollbar-width:none; } .bg-center-links::-webkit-scrollbar { display:none; } .bg-center-link { display:inline-flex; flex:none; align-items:center; gap:6px; min-height:36px; margin:0; padding:5px 12px; border:1px solid #e5dcc4; border-radius:999px; background:#fffdf7; color:#0b4a34; font-size:.78rem; font-weight:800; } .bg-center-link svg { width:16px; height:16px; fill:none; stroke:#a87a26; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .bg-count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#0b4a34; color:#f2d48c; font-size:.68rem; } .bg-center-link:focus-visible,.bc-chip:focus-visible,.bc-slot:focus-visible { outline:3px solid #c99b47; outline-offset:2px; } /* Menu do toque no horário */ .pa-context { margin:4px 0 0; color:#8a5d10; font-size:.86rem; font-weight:800; } .pa-context.hidden { display:none; } /* Diálogos da central */ .bc-dialog { width:min(calc(100% - 24px),460px); max-height:calc(100dvh - 24px); overflow:auto; } .bc-shell { gap:12px; } .bc-shell label { display:grid; gap:4px; min-width:0; margin:0; color:#3f4c45; font-size:.8rem; font-weight:700; } .bc-shell input:not([type=checkbox]),.bc-shell select,.bc-shell textarea { width:100%; min-width:0; box-sizing:border-box; } .bc-shell .form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:0; } .bc-sub { margin:4px 0 0; color:#5f6c66; font-size:.84rem; line-height:1.35; } .bc-card { padding:12px; border:1px solid #e5dcc4; border-radius:16px; background:linear-gradient(180deg,#fffaf0,#fff); } .bc-perm { margin:8px 0 0; color:#5c4210; font-size:.8rem; line-height:1.4; } .bc-group { display:grid; gap:2px; min-width:0; margin:0; padding:10px 12px; border:1px solid #ebe6d8; border-radius:16px; } .bc-group[disabled] { opacity:.5; } .bc-group legend { padding:0 6px; color:#0b4a34; font-size:.74rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; } .bc-toggle { display:flex !important; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #f1ede2; } .bc-group .bc-toggle:last-of-type { border-bottom:0; } .bc-toggle > span { display:grid; gap:1px; min-width:0; } .bc-toggle strong { color:#13261f; font-size:.88rem; } .bc-toggle small { color:#6b7771; font-size:.74rem; font-weight:500; line-height:1.3; } .bc-toggle input { flex:none; width:44px; height:26px; margin:0; appearance:none; -webkit-appearance:none; border-radius:999px; background:#d9d6cc; position:relative; transition:background .15s; cursor:pointer; } .bc-toggle input::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .15s; } .bc-toggle input:checked { background:#0b4a34; } .bc-toggle input:checked::after { transform:translateX(18px); } .bc-toggle input:focus-visible { outline:3px solid #c99b47; outline-offset:2px; } .bc-quiet-row.hidden { display:none; } .bc-link { justify-self:start; padding:4px 0; font-weight:800; } .bc-actions-col { display:grid; gap:8px; } .bc-actions-col > * { margin:0; min-height:46px; } .bc-actions-row { display:flex; justify-content:space-between; gap:10px; } .bc-wa { display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; } .bc-wa svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .bc-match-first { display:grid; gap:2px; padding:12px; border-radius:14px; background:#f3ead6; } .bc-match-first small { color:#5f6c66; } .bc-empty { margin:0; padding:12px; border:1px dashed #d8d2c1; border-radius:12px; color:#5f6c66; font-size:.84rem; } /* Lista de espera */ .bc-seg { display:inline-flex; justify-self:start; gap:4px; padding:3px; border-radius:999px; background:#ece7d9; } .bc-seg button { min-height:34px; margin:0; padding:4px 14px; border:0; border-radius:999px; background:transparent; color:#3f4c45; font-weight:800; font-size:.8rem; } .bc-seg button.active { background:#052d21; color:#f2d48c; } .bc-wait-list { display:grid; gap:8px; } .bc-wait-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; padding:10px 12px; border:1px solid #ebe6d8; border-radius:14px; background:#fff; } .bc-wait-row.is-match { border-color:#c99b47; box-shadow:inset 3px 0 0 #c99b47; } .bc-wait-row > div:first-child { display:grid; gap:2px; min-width:0; } .bc-wait-row strong { overflow-wrap:anywhere; } .bc-wait-row small { color:#5f6c66; font-size:.76rem; overflow-wrap:anywhere; } .bc-wait-notes { font-style:italic; } .bc-flag { display:inline-grid; place-items:center; width:16px; height:16px; margin-right:5px; border-radius:50%; background:#c99b47; color:#fff; font-style:normal; font-size:.66rem; vertical-align:1px; } .bc-badge { justify-self:start; margin-top:3px; padding:2px 8px; border-radius:999px; background:#eef2ef; color:#3f4c45; font-size:.68rem; font-weight:800; } .bc-badge.is-waiting { background:#fdf3dc; color:#7a5212; } .bc-badge.is-notified { background:#e8f1ff; color:#285a91; } .bc-badge.is-scheduled { background:#e7f6ee; color:#08764f; } .bc-badge.is-closed { background:#eceeed; color:#6b7471; } .bc-wait-actions { display:flex; gap:4px; } .bc-icon-btn { display:grid; place-items:center; width:38px; height:38px; margin:0; padding:0; border:1px solid #e5dcc4; border-radius:12px; background:#fffdf7; color:#0b4a34; font-size:.95rem; } .bc-icon-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .bc-wait-form { display:grid; gap:10px; padding:12px; border-radius:16px; background:#f8f5ec; } .bc-wait-form h3 { margin:0; font-size:.95rem; } .bc-wait-name { display:grid; gap:10px; } .bc-wait-name.hidden { display:none; } .bc-wait-form .sd-actions { grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); } /* Próximo corte */ .bc-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; } .bc-slot { min-height:42px; margin:0; border:1px solid #cfe1d8; border-radius:12px; background:#f2f8f5; color:#0b4a34; font-weight:800; } .bc-slot.is-edge { border-color:#e3c47f; background:#fdf6e6; } /* Modelos */ .bc-tpl { display:grid; gap:4px; margin-bottom:10px; } .bc-tpl .text-button { justify-self:start; padding:0; font-size:.78rem; } /* Fluxo no painel do atendimento */ .bc-flow.hidden { display:none; } .bc-steps { display:flex; gap:4px; margin:0 0 10px; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; } .bc-steps::-webkit-scrollbar { display:none; } .bc-steps li { display:flex; flex:1 0 auto; flex-direction:column; align-items:center; gap:3px; min-width:52px; color:#8a948f; font-size:.64rem; font-weight:700; text-align:center; } .bc-steps li i { display:grid; place-items:center; width:20px; height:20px; border:2px solid #d9d6cc; border-radius:50%; background:#fff; color:#fff; font-style:normal; font-size:.66rem; font-weight:900; } .bc-steps li.is-done { color:#0b4a34; } .bc-steps li.is-done i { border-color:#0b4a34; background:#0b4a34; color:#f2d48c; } .bc-steps li.is-current { color:#13261f; } .bc-steps li.is-current i { border-color:#c99b47; background:#c99b47; box-shadow:0 0 0 3px #f6e7c1; } .bc-ended { margin:0 0 8px; color:#b3382b; font-weight:800; } .bc-next { width:100%; margin:0 0 8px; min-height:48px; } .bc-chips { display:flex; flex-wrap:wrap; gap:6px; } .bc-chip { display:inline-flex; align-items:center; gap:6px; min-height:38px; margin:0; padding:6px 12px; border:1px solid #e5dcc4; border-radius:999px; background:#fffdf7; color:#0b4a34; font-size:.8rem; font-weight:800; text-decoration:none; } .bc-chip svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Serviço: cor e configurações extras no catálogo */ .bc-swatch-dot { display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:50%; background:var(--sw); vertical-align:0; box-shadow:0 0 0 2px #fff,0 0 0 3px #0001; } .bc-service-extra { display:grid; gap:10px; margin:6px 0; padding:12px; border-radius:14px; background:#f8f5ec; } .bc-service-extra label { display:grid; gap:4px; min-width:0; font-size:.78rem; } .bc-service-extra input,.bc-service-extra select { width:100%; min-width:0; box-sizing:border-box; } .bc-service-extra .form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:0; } .bc-color-field { margin:0; padding:0; border:0; min-width:0; } .bc-color-field legend { margin-bottom:6px; font-size:.78rem; font-weight:700; } .bc-swatches { display:flex; flex-wrap:wrap; gap:8px; } .bc-swatch { width:32px; height:32px; margin:0; padding:0; border:2px solid #fff; border-radius:50%; background:var(--sw); box-shadow:0 0 0 1px #0002; } .bc-swatch.is-selected { box-shadow:0 0 0 2px #13261f; } .bc-swatch.is-auto { width:auto; padding:0 10px; border-radius:999px; background:#fff; color:#3f4c45; font-size:.72rem; font-weight:800; } .bc-swatch:focus-visible { outline:3px solid #c99b47; outline-offset:2px; } .bc-pad-note { color:#8a5d10; } /* Aviso dentro do app (fallback das notificações) */ .bc-alert { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 86px); z-index:9999; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; width:min(calc(100% - 24px),440px); padding:10px 10px 10px 12px; border:1px solid #e3c47f; border-radius:16px; background:#052d21; color:#f8f5ec; box-shadow:0 10px 30px #0006; transform:translateX(-50%); } .bc-alert.hidden { display:none; } .bc-alert-icon svg { width:22px; height:22px; fill:none; stroke:#f2d48c; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .bc-alert-text { display:grid; gap:1px; min-width:0; } .bc-alert-text strong { font-size:.88rem; } .bc-alert-text small { overflow:hidden; color:#d9e4de; font-size:.78rem; text-overflow:ellipsis; overflow-wrap:anywhere; } .bc-alert-go { min-height:36px; margin:0; padding:4px 12px; border:0; border-radius:999px; background:#c99b47; color:#13261f; font-weight:900; font-size:.8rem; } .bc-alert-close { width:32px; height:32px; margin:0; padding:0; border:0; background:transparent; color:#f8f5ec; font-size:1.2rem; } @media (max-width:374px){ .bc-shell .form-row,.bc-service-extra .form-row { grid-template-columns:minmax(0,1fr); } .bc-alert { grid-template-columns:auto minmax(0,1fr) auto; } .bc-alert-go { grid-column:2 / -1; justify-self:start; } } @media (prefers-reduced-motion:reduce){ .bc-toggle input,.bc-toggle input::after { transition:none; } } /* Diálogo de lembrete: duas colunas que encolhem; em telas ≤374px, uma coluna. */ .rm-shell .form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; } .rm-shell .form-row > div { min-width:0; } .rm-shell input,.rm-shell select { max-width:100%; box-sizing:border-box; } @media (max-width:374px){ .rm-shell .form-row { grid-template-columns:minmax(0,1fr); } } /* Painel do atendimento: nunca mais largo que o próprio diálogo (evitava 6px de arraste lateral no celular). */ .appointment-action-shell { max-width:100%; box-sizing:border-box; } .appointment-manage-shell { grid-template-columns:minmax(0,1fr); } /* Etapas cabem sempre na largura (rótulos quebram em 2 linhas), sem rolagem lateral. */ .bc-steps { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); overflow:visible; } .bc-steps li { min-width:0; flex:none; line-height:1.15; overflow-wrap:anywhere; hyphens:auto; } @media (max-width:374px){ .bc-steps li { font-size:.58rem; } } .manage-section { grid-template-columns:minmax(0,1fr); min-width:0; } .manage-primary-actions,.manage-secondary-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .manage-primary,.manage-secondary-actions button { min-width:0; overflow-wrap:anywhere; } /* Etapas: sem hifenizar; em telas estreitas só a etapa atual mostra o rótulo (as demais ficam em pontos acessíveis). */ .bc-steps li { overflow-wrap:normal; word-break:normal; hyphens:manual; overflow:visible; font-size:.64rem; } .sg-variant-barber .bg-card .sg-block-time { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:16px; } @media (max-width:419px){ .bc-steps li:not(.is-current) span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .bc-steps li { position:relative; } .bc-steps li.is-current span { white-space:nowrap; font-size:.7rem; } .bc-steps li:first-child.is-current { align-items:flex-start; } .bc-steps li:last-child.is-current { align-items:flex-end; } } /* Catálogo de serviços em telas estreitas: os itens encolhem com a lista (antes passavam ~70px da borda a 320px). */ .service-manager-list { grid-template-columns:minmax(0,1fr); } .service-manager-item { min-width:0; } .service-manager-heading { flex-wrap:wrap; } .service-manager-summary { min-width:0; flex:1 1 140px; } .service-manager-item input,.service-manager-item textarea,.service-manager-item select { width:100%; min-width:0; box-sizing:border-box; } .service-manager-item .form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; } .service-manager-item .form-row > div { min-width:0; } .service-manager-actions { flex-wrap:wrap; } /* Lista de espera: "Prioridade alta" com caixa e texto na mesma linha. */ .bc-shell label.rm-done { display:flex; align-items:center; gap:10px; } /* ===== Minha FOURMI — área pessoal do cliente (myfourmi.js) · 15/10/2026 ===== Identidade própria da família FOURMI: creme, verde profundo, dourado e verde-água suave. Não reutiliza literalmente o visual de Pro nem de Education. */ :root { --mf-cream:#f7f2e6; --mf-paper:#fffdf8; --mf-deep:#0d3b2e; --mf-ink:#13261f; --mf-gold:#c99b47; --mf-gold-2:#efd38f; --mf-teal:#5f9e94; --mf-teal-soft:#e4f1ee; --mf-line:#e7e0cf; --mf-muted:#5f6c66; } .mf-emblem { width:100%; height:100%; display:block; } .mf-emb-bg { fill:var(--mf-teal-soft); } .mf-emb-a { fill:none; stroke:var(--mf-deep); stroke-width:2.4; stroke-linecap:round; } .mf-emb-b { fill:none; stroke:var(--mf-teal); stroke-width:2.4; stroke-linecap:round; } .mf-emb-g { fill:none; stroke:var(--mf-gold); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } /* Entrada: terceiro cartão, claro — visivelmente não é uma suite */ .onb .audience-card[data-area] { position:relative; overflow:hidden; display:grid; grid-template-columns:104px minmax(0,1fr) 28px; align-items:center; gap:12px; min-height:124px; padding:14px 14px 14px 10px; border:1px solid #e3c47f; border-radius:22px; background:radial-gradient(70% 90% at 0% 0%,#e4f1ee 0%,transparent 70%),linear-gradient(160deg,#fffaf0 0%,#f7f2e6 100%); color:var(--mf-ink); box-shadow:0 12px 26px #0009061a; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .onb .audience-card[data-area]:hover { transform:translateY(-1px); border-color:var(--mf-gold); } .onb .audience-card[data-area]:focus-visible { outline:3px solid var(--mf-gold); outline-offset:3px; } .mf-suite-logo { display:grid; justify-items:center; gap:4px; width:104px; aspect-ratio:auto; } .mf-suite-logo .mf-emblem { width:58px; height:58px; } .mf-logo-word { display:grid; color:var(--mf-deep); font-size:.6rem; font-weight:800; letter-spacing:.14em; text-align:center; text-transform:uppercase; line-height:1.1; } .mf-logo-word b { color:#a87a26; font-size:.78rem; letter-spacing:.06em; } .onb .audience-card[data-area] .audience-copy { min-width:0; } .onb .audience-card[data-area] .audience-copy strong { display:block; color:var(--mf-deep); font-size:1.08rem; font-weight:800; line-height:1.2; } .onb .audience-card[data-area] .audience-copy small { display:block; margin-top:5px; color:var(--mf-muted); font-size:.8rem; line-height:1.38; } .onb .audience-card[data-area] .audience-copy em { display:block; margin-top:8px; color:#8a5d10; font-size:.74rem; font-style:normal; font-weight:700; line-height:1.35; } .onb .audience-card[data-area] .audience-arrow { display:grid; place-items:center; width:28px; height:28px; border:1px solid #e3c47f; border-radius:50%; color:var(--mf-deep); } .onb .audience-card[data-area] .audience-arrow svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .onb .audience-card[data-area].selected { border-color:var(--mf-gold); box-shadow:0 0 0 3px #c99b474d,0 16px 34px #0009062e; } .onb .audience-card[data-area].selected .audience-arrow { border-color:transparent; background:linear-gradient(145deg,#f1d08a,#c9973f); } .onb .audience-card[data-area].selected .audience-arrow svg { display:none; } .onb .audience-card[data-area].selected .audience-arrow::after { content:"✓"; font-size:.9rem; font-weight:900; line-height:1; } @media (max-width:359px) { .onb .audience-card[data-area] { grid-template-columns:minmax(0,1fr) 28px; align-items:start; gap:8px 10px; padding:14px; } .onb .audience-card[data-area] .mf-suite-logo { grid-column:1; grid-row:1; justify-items:start; width:auto; grid-auto-flow:column; align-items:center; gap:8px; } .onb .audience-card[data-area] .mf-suite-logo .mf-emblem { width:40px; height:40px; } .onb .audience-card[data-area] .audience-copy { grid-column:1 / -1; grid-row:2; } .onb .audience-card[data-area] .audience-arrow { grid-column:2; grid-row:1; } } /* Seletor de espaços */ .space-switch-area.hidden,.space-switch-body>.eyebrow.hidden,#space-switch-profiles.hidden { display:none; } .space-switch-logo.is-my-fourmi { display:grid; place-items:center; width:55px; height:46px; } .space-switch-logo.is-my-fourmi .mf-emblem { width:42px; height:42px; } .space-switch-dialog[data-suite="my_fourmi"] { --space-dark:#0d3b2e; --space-accent:#c99b47; --space-soft:#e4f1ee; } .space-switch-brand.is-my-fourmi .space-switch-brand-fallback svg { display:none; } .space-switch-brand.is-my-fourmi .space-switch-brand-fallback::before { content:""; display:block; width:40px; height:40px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#e4f1ee 0 55%,#c99b47 56% 60%,#e4f1ee 61%); } /* Container */ .mf { position:relative; display:flex; flex-direction:column; height:100vh; height:100dvh; min-height:0; background:var(--mf-cream); color:var(--mf-ink); } .mf.hidden { display:none; } @media(min-width:461px){ .mf { height:calc(100vh - 44px); height:calc(100dvh - 44px); } .app-shell:has(> .mf:not(.hidden)) { height:calc(100vh - 44px); height:calc(100dvh - 44px); min-height:0; } .mf-nav { border-radius:0 0 28px 28px; } } .mf-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 14px; background:linear-gradient(160deg,#0d3b2e 0%,#0a3027 100%); color:#f8f5ec; } .mf-brand { display:flex; align-items:center; gap:10px; min-width:0; } .mf-brand .mf-emblem { width:40px; height:40px; flex:none; } .mf-brand strong { display:block; font-size:1.05rem; letter-spacing:.01em; } .mf-brand small { display:block; color:var(--mf-gold-2); font-size:.62rem; font-weight:800; letter-spacing:.18em; } .mf-avatar { display:grid; place-items:center; width:42px; height:42px; margin:0; padding:0; border:2px solid #efd38f66; border-radius:50%; background:var(--mf-gold); color:var(--mf-deep); font-weight:900; font-size:1rem; } .mf-avatar:focus-visible { outline:3px solid var(--mf-gold-2); outline-offset:2px; } .mf-main { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px 16px 24px; -webkit-overflow-scrolling:touch; } .mf-main:focus { outline:none; } .mf-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:6px 6px calc(env(safe-area-inset-bottom,0px) + 6px); border-top:1px solid var(--mf-line); background:#fffdf8; } .mf-nav-item { position:relative; display:grid; justify-items:center; gap:2px; min-width:0; min-height:52px; margin:0; padding:6px 2px; border:0; border-radius:14px; background:transparent; color:#6f7c76; font-size:.66rem; font-weight:700; } .mf-nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .mf-nav-item span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mf-nav-item.is-active { background:var(--mf-teal-soft); color:var(--mf-deep); } .mf-nav-item.is-active svg { stroke:var(--mf-deep); } .mf-nav-item:focus-visible { outline:3px solid var(--mf-gold); outline-offset:-2px; } .mf-badge { position:absolute; top:4px; right:calc(50% - 20px); display:grid; place-items:center; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--mf-gold); color:var(--mf-deep); font-size:.62rem; font-weight:900; } /* Blocos */ .mf-hello { margin:0 0 12px; } .mf-hello .eyebrow { margin:0; color:#8a5d10; } .mf-hello h1,.mf-page-head h1 { margin:2px 0 0; color:var(--mf-deep); font-size:1.5rem; line-height:1.2; overflow-wrap:anywhere; } .mf-page-head { margin:0 0 12px; } .mf-section { margin:18px 0 0; } .mf-section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; } .mf-section-head h2 { margin:0; color:var(--mf-deep); font-size:.98rem; } .mf-more { display:inline-flex; align-items:center; gap:2px; margin:0; padding:4px 0; border:0; background:none; color:#0b6b52; font-size:.8rem; font-weight:800; } .mf-more svg,.mf-pending>svg,.mf-pro>svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .mf-list { display:grid; gap:8px; } .mf-intro { margin:0 0 10px; color:var(--mf-muted); font-size:.86rem; line-height:1.45; } .mf-compact-empty { margin:0; padding:12px 14px; border:1px dashed #d8d2c1; border-radius:14px; background:#fffdf7; color:var(--mf-muted); font-size:.86rem; } .mf-empty { display:grid; justify-items:start; gap:8px; padding:18px; border:1px solid var(--mf-line); border-radius:20px; background:linear-gradient(160deg,#fffdf8,#f3eedf); } .mf-empty h2 { margin:0; color:var(--mf-deep); font-size:1.1rem; } .mf-empty p { margin:0; color:var(--mf-muted); font-size:.88rem; line-height:1.45; } .mf-empty-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--mf-teal-soft); color:var(--mf-deep); } .mf-empty-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; } .mf-empty-actions,.mf-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } .mf-empty-actions>*,.mf-tools>* { flex:1 1 140px; margin:0; min-height:46px; } .mf-tools { margin-top:14px; } /* Cartão de agendamento (vertical, sem dashboard espremido) */ .mf-appt { display:grid; grid-template-columns:62px minmax(0,1fr); grid-template-areas:"when main" "when status"; gap:2px 12px; width:100%; margin:0; padding:12px; border:1px solid var(--mf-line); border-radius:16px; background:var(--mf-paper); color:var(--mf-ink); text-align:left; } .mf-appt-when { grid-area:when; display:grid; align-content:center; justify-items:center; gap:1px; padding:6px 2px; border-radius:12px; background:var(--mf-teal-soft); color:var(--mf-deep); } .mf-appt-when b { font-size:.68rem; font-weight:800; text-transform:capitalize; text-align:center; line-height:1.15; } .mf-appt-when span { font-size:.95rem; font-weight:900; } .mf-appt-main { grid-area:main; display:grid; gap:1px; min-width:0; } .mf-appt-main strong { overflow-wrap:anywhere; } .mf-appt-main small { color:var(--mf-muted); font-size:.78rem; overflow-wrap:anywhere; } .mf-appt .mf-status { grid-area:status; justify-self:start; } .mf-appt.is-big { border-color:#e3c47f; box-shadow:0 10px 24px #0d3b2e14; } .mf-appt:focus-visible,.mf-pending:focus-visible,.mf-pro:focus-visible,.mf-msg:focus-visible,.mf-link:focus-visible,.mf-slot:focus-visible { outline:3px solid var(--mf-gold); outline-offset:2px; } .mf-status { display:inline-block; padding:2px 9px; border-radius:999px; background:#eef2ef; color:#3f4c45; font-size:.7rem; font-weight:800; white-space:nowrap; } .mf-status.is-confirmed { background:#e3f2ea; color:#0b6b46; } .mf-status.is-completed { background:#e8eef9; color:#2f5a8f; } .mf-status.is-cancelled { background:#f5ecea; color:#a8443a; } .mf-status.is-request { background:#fbf0d8; color:#7a5212; } .mf-next { padding:12px; border-radius:20px; background:linear-gradient(160deg,#0d3b2e,#0f4537); } .mf-next .eyebrow { margin:0 0 8px; color:var(--mf-gold-2); } .mf-next-actions { display:flex; flex-wrap:wrap; gap:6px 16px; padding:10px 4px 0; } .mf-next .mf-link { color:#f8f5ec; } .mf-next .mf-link.is-danger { color:#f2b8b0; } .mf-link { margin:0; padding:6px 0; border:0; background:none; color:#0b6b52; font-size:.86rem; font-weight:800; text-decoration:underline; text-underline-offset:3px; } .mf-link.is-danger { color:#b3382b; } /* Linhas */ .mf-pending,.mf-pro { display:flex; align-items:center; gap:12px; width:100%; margin:0; padding:11px 12px; border:1px solid var(--mf-line); border-radius:16px; background:var(--mf-paper); color:var(--mf-ink); text-align:left; } .mf-pending>span:nth-child(2),.mf-pro>span:nth-child(2) { flex:1; min-width:0; display:grid; gap:1px; } .mf-pending strong,.mf-pro strong { overflow-wrap:anywhere; } .mf-pending small,.mf-pro small { color:var(--mf-muted); font-size:.78rem; overflow-wrap:anywhere; } .mf-pending-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:var(--mf-teal-soft); color:var(--mf-deep); } .mf-pending-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .mf-pending.is-confirm .mf-pending-icon,.mf-pending.is-change .mf-pending-icon { background:#fbf0d8; color:#8a5d10; } .mf-pending.is-payment .mf-pending-icon { background:#f6ecdc; color:#8a5d10; } .mf-pro-avatar { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--mf-deep); color:var(--mf-gold-2); font-weight:900; } .mf-pro-avatar.is-big { width:54px; height:54px; font-size:1.3rem; } .mf-msg { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; width:100%; margin:0; padding:11px 12px; border:1px solid var(--mf-line); border-radius:16px; background:var(--mf-paper); color:var(--mf-ink); text-align:left; } .mf-msg>span { display:grid; gap:1px; min-width:0; } .mf-msg small { color:#8a5d10; font-size:.74rem; font-weight:700; } .mf-msg-text { overflow:hidden; color:var(--mf-muted); font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; } .mf-msg time { color:var(--mf-muted); font-size:.72rem; } .mf-msg.is-unread { border-color:#e3c47f; box-shadow:inset 3px 0 0 var(--mf-gold); } .mf-pay { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid var(--mf-line); border-radius:16px; background:var(--mf-paper); } .mf-pay>span:first-child { display:grid; gap:1px; min-width:0; } .mf-pay small { color:var(--mf-muted); font-size:.76rem; overflow-wrap:anywhere; } .mf-pay-right { display:grid; justify-items:end; gap:3px; flex:none; } /* Segmentos */ .mf-seg { display:flex; gap:4px; margin:0 0 12px; padding:3px; overflow-x:auto; border-radius:999px; background:#ece6d6; scrollbar-width:none; } .mf-seg::-webkit-scrollbar { display:none; } .mf-seg button { flex:1 0 auto; min-height:36px; margin:0; padding:4px 12px; border:0; border-radius:999px; background:transparent; color:#3f4c45; font-size:.8rem; font-weight:800; } .mf-seg button.is-active { background:var(--mf-deep); color:var(--mf-gold-2); } /* Folha de detalhes */ .mf-sheet { width:min(calc(100% - 16px),480px); max-height:calc(100dvh - 16px); margin:auto auto 8px; padding:0; border:0; border-radius:24px; background:var(--mf-paper); color:var(--mf-ink); } .mf-sheet::backdrop { background:#06201999; } @media(min-width:461px){ .mf-sheet { margin:auto; } } .mf-sheet-shell { display:flex; flex-direction:column; max-height:calc(100dvh - 16px); } .mf-sheet-head { display:flex; align-items:flex-start; gap:10px; padding:18px 18px 10px; border-bottom:1px solid #f0ead9; } .mf-sheet-head>div { flex:1; min-width:0; } .mf-sheet-head .eyebrow { margin:0; color:#0b6b52; } .mf-sheet-head h2 { margin:2px 0 0; color:var(--mf-deep); font-size:1.2rem; overflow-wrap:anywhere; } .mf-sheet-back { display:grid; place-items:center; width:38px; height:38px; flex:none; margin:0; padding:0; border:1px solid var(--mf-line); border-radius:12px; background:#fff; } .mf-sheet-back.hidden { display:none; } .mf-sheet-back svg { width:18px; height:18px; fill:none; stroke:var(--mf-deep); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .mf-sheet-body { display:grid; gap:12px; padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 18px); overflow-y:auto; overflow-x:hidden; } .mf-sheet-body>p { margin:0; line-height:1.45; } .mf-detail { display:grid; gap:0; border:1px solid var(--mf-line); border-radius:16px; background:#fff; } .mf-detail-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid #f2ede0; } .mf-detail-row:last-child { border-bottom:0; } .mf-detail-row span:first-child { color:var(--mf-muted); font-size:.82rem; } .mf-detail-row strong { text-align:right; overflow-wrap:anywhere; text-transform:none; } .mf-actions { display:grid; gap:8px; } .mf-actions>button { margin:0; min-height:46px; } .mf-actions .mf-link { min-height:auto; justify-self:start; } .secondary-button.is-danger { color:#b3382b; } .mf-note { display:grid; gap:4px; margin:0; padding:11px 12px; border-radius:14px; background:#f3eedf; color:#4b4a3f; font-size:.84rem; line-height:1.4; } .mf-note.is-request { background:#fbf0d8; color:#5c4210; } .mf-note .mf-link { justify-self:start; } .mf-sub { margin:4px 0 0; color:var(--mf-deep); font-size:.92rem; } .mf-field { display:grid; gap:4px; margin:0; color:#3f4c45; font-size:.82rem; font-weight:700; } .mf-field input,.mf-field textarea,.mf-field select { width:100%; min-width:0; box-sizing:border-box; } .mf-field small { color:var(--mf-muted); font-weight:500; } .mf-daynav { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; align-items:center; } .mf-daynav input { width:100%; min-width:0; box-sizing:border-box; } .mf-icon-btn { display:grid; place-items:center; width:44px; height:44px; margin:0; padding:0; border:1px solid var(--mf-line); border-radius:12px; background:#fff; } .mf-icon-btn:disabled { opacity:.4; } .mf-icon-btn svg { width:18px; height:18px; fill:none; stroke:var(--mf-deep); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .mf-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; } .mf-slot { min-height:42px; margin:0; border:1px solid #cfe1d8; border-radius:12px; background:#f2f8f5; color:var(--mf-deep); font-weight:800; } .mf-slot[aria-pressed="true"] { border-color:var(--mf-deep); background:var(--mf-deep); color:var(--mf-gold-2); } .mf-stars { display:flex; gap:6px; } .mf-stars button { display:grid; place-items:center; width:46px; height:46px; margin:0; padding:0; border:1px solid var(--mf-line); border-radius:12px; background:#fff; } .mf-stars svg { width:26px; height:26px; fill:none; stroke:#c9a454; stroke-width:1.7; stroke-linejoin:round; } .mf-stars button.is-on svg { fill:var(--mf-gold); stroke:#a87a26; } .mf-stars button:focus-visible { outline:3px solid var(--mf-gold); outline-offset:2px; } .mf-pro-head { display:flex; align-items:center; gap:12px; } .mf-pro-head>div { display:grid; gap:2px; min-width:0; } .mf-pro-head small { color:var(--mf-muted); } .mf-rating { display:inline-flex !important; align-items:center; gap:4px; color:#8a5d10 !important; font-weight:800; } .mf-rating svg { width:14px; height:14px; fill:var(--mf-gold); stroke:none; } .mf-card { display:grid; gap:4px; padding:11px 12px; border:1px solid var(--mf-line); border-radius:16px; background:#fff; } .mf-card strong { display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; } .mf-card strong svg { width:18px; height:18px; flex:none; fill:none; stroke:var(--mf-teal); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .mf-card p { margin:0; color:#3f4c45; font-size:.84rem; line-height:1.4; overflow-wrap:anywhere; } .mf-card small,.mf-muted { color:var(--mf-muted); font-size:.76rem; } .mf-notice { padding:6px 8px; border-left:3px solid var(--mf-gold); border-radius:6px; background:#fdf8ec; } .mf-chips { display:flex; flex-wrap:wrap; gap:6px; } .mf-chip { padding:5px 10px; border:1px solid var(--mf-line); border-radius:999px; background:#fff; font-size:.78rem; font-weight:700; } .mf-history { display:grid; gap:6px; } .mf-history button { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; margin:0; padding:9px 12px; border:1px solid var(--mf-line); border-radius:12px; background:#fff; color:var(--mf-ink); text-align:left; } .mf-history time { color:#8a5d10; font-weight:800; font-size:.82rem; } .mf-history span { overflow-wrap:anywhere; } .mf-history em { color:#0b6b52; font-style:normal; font-weight:800; font-size:.76rem; } .mf-message { display:grid; gap:6px; padding:12px; border-radius:16px; background:#fff; border:1px solid var(--mf-line); } .mf-message time { color:var(--mf-muted); font-size:.76rem; } .mf-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; } .mf-draft { padding:10px 12px; border:1px dashed #d8c9a4; border-radius:14px; background:#fdf8ec; } .mf-draft small { color:#8a5d10; font-weight:800; } .mf-draft p { margin:4px 0 0; overflow-wrap:anywhere; } .mf-archived summary { margin:16px 0 8px; color:var(--mf-muted); font-weight:800; cursor:pointer; } .mf-disconnect { justify-self:start; } .mf-form { display:grid; gap:10px; padding:14px; border:1px solid var(--mf-line); border-radius:18px; background:var(--mf-paper); } .mf-form .primary-button { margin:4px 0 0; } .mf-menu { margin-top:14px; } .mf-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--mf-line); border-radius:14px; background:#fff; font-size:.86rem; font-weight:700; } .mf-toggle input { width:22px; height:22px; flex:none; margin:0; accent-color:var(--mf-deep); } .mf-exit { width:100%; margin:20px 0 0; min-height:46px; } .mf-foot { text-align:center; } /* Lado Pro: código de convite e pedidos do cliente */ .mf-invite-code { display:grid; gap:2px; margin:8px 0 0; padding:10px 12px; border:1px dashed #c99b47; border-radius:14px; background:#fdf8ec; } .mf-invite-code span { color:#8a5d10; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .mf-invite-code strong { color:#0d3b2e; font-size:1.25rem; letter-spacing:.12em; font-variant-numeric:tabular-nums; } .mf-invite-code small { color:#5f6c66; font-size:.76rem; line-height:1.35; } .mf-requests.hidden { display:none; } .mf-request { display:grid; gap:4px; padding:10px 12px; border:1px solid #e3c47f; border-radius:14px; background:#fdf8ec; } .mf-request p { margin:0; color:#4b4a3f; font-size:.84rem; overflow-wrap:anywhere; } .mf-request-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:4px; } .mf-request-actions button { margin:0; min-height:42px; } /* Bottom nav da Minha FOURMI: rótulos inteiros mesmo em 320px (sem reticências). */ .mf-nav { gap:0; padding-left:4px; padding-right:4px; } .mf-nav-item { padding:6px 0; font-size:clamp(.54rem,2.65vw,.68rem); letter-spacing:-.01em; } .mf-nav-item span { overflow:visible; text-overflow:clip; } /* ===== Home do Barbeiro — nova foto de fundo (barber pole), 15/10/2026 ===== Só visual. A foto é decorativa (background CSS). WebP com fallback JPEG. Overlay mais forte à esquerda (texto/KPIs) e suave à direita (barber pole visível). */ .barber-hero-badge { display:none; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-hero { color:#f8f6ef; padding:0 20px 34px; border-radius:0 0 30px 30px; background-color:#0a1c1a; background-image: linear-gradient(90deg,rgba(4,24,22,.90) 0%,rgba(4,24,22,.74) 36%,rgba(4,24,22,.34) 62%,rgba(4,24,22,.08) 100%), linear-gradient(180deg,rgba(4,20,18,.55) 0%,rgba(4,20,18,0) 22%,rgba(4,20,18,0) 52%,rgba(4,20,18,.78) 100%), url('assets/barber-home-pole.jpg'); background-image: linear-gradient(90deg,rgba(4,24,22,.90) 0%,rgba(4,24,22,.74) 36%,rgba(4,24,22,.34) 62%,rgba(4,24,22,.08) 100%), linear-gradient(180deg,rgba(4,20,18,.55) 0%,rgba(4,20,18,0) 22%,rgba(4,20,18,0) 52%,rgba(4,20,18,.78) 100%), image-set(url('assets/barber-home-pole.webp') type('image/webp'),url('assets/barber-home-pole.jpg') type('image/jpeg')); background-position:center,center,right 22%; background-size:cover,cover,cover; background-repeat:no-repeat; } /* Cabeçalho sobre fundo escuro: marca em creme/dourado */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-name strong,#workspace:is([data-profession="barber"],[data-profession="other"]) .brand-word-fourmi { color:#f8f5ec; } #workspace:is([data-profession="barber"],[data-profession="other"]) .brand-word-think { color:#e8be6a; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-brand-name small { color:#e8be6a; border-top-color:#e8be6a66; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-avatar-button { box-shadow:0 4px 14px #00000059; } /* Badge de contexto */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-badge { display:inline-flex; align-items:center; gap:7px; max-width:100%; margin:16px 0 0; padding:6px 12px 6px 8px; border:1px solid #e8be6a8c; border-radius:999px; background:#04181680; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#f8f5ec; font-size:.76rem; font-weight:700; letter-spacing:.01em; line-height:1; white-space:nowrap; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-badge svg { width:18px; height:18px; flex:none; padding:3px; box-sizing:border-box; border:1px solid #e8be6a99; border-radius:50%; fill:none; stroke:#e8be6a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-badge-dot { color:#e8be6a; } /* Saudação legível */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy { padding:14px 0 20px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy>p:first-child { color:#e9eee9; text-shadow:0 1px 8px #0006; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy h1 { color:#fff; text-shadow:0 2px 14px #0007; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy>p:last-child { max-width:min(230px,58%); color:#e4ebe6; text-shadow:0 1px 8px #0008; } /* KPIs 2x2: escuro translúcido premium, sem competir com a foto */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metrics.premium-kpis .kpi-card { border:1px solid #ffffff24; border-radius:16px; background:rgba(6,28,30,.74); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 8px 20px #00000033,inset 0 1px #ffffff14; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metrics.premium-kpis .kpi-card .kpi-icon { color:#e8be6a; background:#e8be6a1f; } /* CTA principal: dourado quente, claramente a ação principal */ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta { min-height:58px; border:0; border-radius:16px; background:linear-gradient(145deg,#f3d38c 0%,#e2b45a 55%,#c9963d 100%); color:#0b202b; box-shadow:0 10px 24px #0000004d,inset 0 1px #ffffff66; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:first-child,#workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta span:last-child::after { color:#0b202b; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-cta:focus-visible { outline:3px solid #f8f5ec; outline-offset:3px; } /* Respiro antes do FOURMI Picks e espaço acima da bottom nav */ #workspace:is([data-profession="barber"],[data-profession="other"]) #home-screen #picks-pro-context { margin-top:26px; } #workspace:is([data-profession="barber"],[data-profession="other"]) #home-screen { padding-bottom:calc(env(safe-area-inset-bottom,0px) + 112px); } /* Ajuste da foto por largura: o barber pole nunca some */ @media (max-width:389px){ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-hero { background-position:center,center,74% 22%; } } @media (max-width:359px){ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-home-hero { padding:0 16px 30px; background-position:center,center,78% 22%; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-badge { font-size:.7rem; padding:5px 10px 5px 7px; } #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-copy>p:last-child { max-width:60%; } } /* KPIs do Barbeiro sempre 2x2 (no desktop o app fica numa moldura estreita; 4 colunas cortavam os rótulos). */ @media (min-width:900px){ #workspace:is([data-profession="barber"],[data-profession="other"]) .barber-hero-metrics.premium-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } } .manage-payment-row{flex-wrap:wrap}.manage-payment-row>div{flex:1 1 140px;min-width:0} .quick-actions-grid span svg,.agenda-workflow-icon svg,.date-time-summary-icon svg,.manage-primary svg,.client-groups-entry svg{display:block} /* Pedido de conexão por @ feito no cadastro (link-requests.js). Neutro: herda a cor do perfil, claro ou escuro. */ .link-req{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:0 0 12px;padding:12px 14px;border-radius:14px;border:1px dashed color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 5%,transparent);text-align:left} .link-req-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,currentColor 10%,transparent)} .link-req-text{flex:1 1 calc(100% - 48px);min-width:0;display:grid;gap:3px} .link-req-text strong{font-size:15px;overflow-wrap:anywhere} .link-req-text small{font-size:12.5px;line-height:1.35;opacity:.75} .link-req-cancel{flex:none;margin-left:48px;min-height:36px;padding:6px 10px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;color:inherit;font:inherit;font-size:12.5px;cursor:pointer} /* Adicionar professor/profissional pelo @ (link-requests.js addFormHtml). A cor do botão vem do perfil (--link-accent). */ .link-add{display:grid;gap:10px;margin:0 0 12px;padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 3%,transparent);text-align:left} .link-add-head{display:flex;align-items:flex-start;gap:12px} .link-add-row{display:flex;gap:8px;min-width:0} .link-add-row input{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;color:inherit;font:inherit;font-size:16px} .link-add-row input:focus-visible{outline:2px solid var(--link-accent,#D4A853);outline-offset:1px} .link-add-btn{flex:none;min-height:44px;padding:8px 14px;border:0;border-radius:12px;background:var(--link-accent,#D4A853);color:var(--link-on-accent,#1d1a14);font:inherit;font-weight:700;font-size:14px;cursor:pointer} .link-add-btn.is-wide{width:100%;margin-top:10px} .link-add-msg{margin:0;font-size:13px;min-height:0} .link-add-msg:empty{display:none} .link-add-msg.is-error{color:#b4381f} @media (max-width:360px){.link-add-row{flex-wrap:wrap}.link-add-btn{width:100%}}