/* ============================================================
ESCALA CHARLIE — design system
Custom properties, sem Tailwind. Tema via [data-theme] no .
============================================================ */
/* ---- Fontes auto-hospedadas --------------------------------
IBM Plex Sans você já hospeda — confirme que a family bate com
'IBM Plex Sans'. Plex Mono é a adição; coloque os .woff2 em
/static/fonts/ e ajuste os caminhos abaixo se necessário.
Se algum arquivo faltar, o fallback de sistema mantém a página viva. */
@font-face{
font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
src:url('/static/fonts/IBMPlexSans-400.woff2') format('woff2');
}
@font-face{
font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
src:url('/static/fonts/IBMPlexSans-500.woff2') format('woff2');
}
@font-face{
font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
src:url('/static/fonts/IBMPlexSans-600.woff2') format('woff2');
}
@font-face{
font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face{
font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
src:url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');
}
/* ---- Tokens ------------------------------------------------ */
[data-theme="dark"]{
--canvas:#0B0C0F; --surface:#14161A; --surface-2:#1A1D22; --inset:#0E1014;
--border:#22252B; --border-strong:#2C3037;
--ink:#EDEEF0; --ink-2:#969BA4; --ink-3:#5F646D;
--sidebar:#0F1116; --sidebar-line:#23262D; --sb-ink:#D6DADF; --sb-faint:#8C929C;
--sb-strong:#FFFFFF; --sb-hover:rgba(255,255,255,.06); --sb-active:rgba(255,255,255,.10);
--sb-avatar:#282C34; --sb-badge-fg:#F0B450; --sb-badge-bg:rgba(240,180,80,.14);
--accent:#6E8BFF; --accent-soft:rgba(110,139,255,.15);
--ok:#37D399; --ok-soft:rgba(55,211,153,.16); --ok-track:#23303a;
--warn:#F0A33D; --crit:#F2585B;
--row-hover:#171A1F;
--shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -18px rgba(0,0,0,.6);
}
[data-theme="light"]{
--canvas:#F3F4F7; --surface:#FFFFFF; --surface-2:#FAFBFC; --inset:#F7F8FA;
--border:#E8E9ED; --border-strong:#DCDEE4;
--ink:#161820; --ink-2:#565E6A; --ink-3:#8C929C;
--sidebar:#F7F8FA; --sidebar-line:#E6E8EC; --sb-ink:#474E5A; --sb-faint:#989EA8;
--sb-strong:#161820; --sb-hover:rgba(0,0,0,.045); --sb-active:var(--accent-soft);
--sb-avatar:#E7E9EE; --sb-badge-fg:#9A6212; --sb-badge-bg:rgba(240,180,80,.20);
--accent:#2F54EB; --accent-soft:#EAEEFE;
--ok:#0E9F6E; --ok-soft:#E6F6EF; --ok-track:#DDEAE3;
--warn:#B45309; --crit:#DC2626;
--row-hover:#FAFAFB;
--shadow:0 1px 2px rgba(16,18,22,.05),0 10px 26px -16px rgba(16,18,22,.16);
}
:root{
--r:13px;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
--font-sans:'IBM Plex Sans',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
/* ---- Base -------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--canvas);color:var(--ink);
font-size:14px;line-height:1.45;min-height:100vh;transition:background .25s,color .25s}
body:not(.page-login){display:flex}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-3);font-weight:500}
/* ---- Sidebar ---------------------------------------------- */
.sidebar{width:248px;flex:0 0 248px;background:var(--sidebar);color:var(--sb-ink);display:flex;
flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--sidebar-line);transition:background .25s}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px}
.brand-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(155deg,#7b94ff,#3a4fd0);
display:grid;place-items:center;font-weight:700;color:#fff;font-size:14px;box-shadow:0 2px 12px rgba(110,139,255,.5)}
.brand-mark--img{background:none;box-shadow:none;border-radius:50%;object-fit:cover}
.brand-name{font-weight:600;font-size:14px;color:var(--sb-strong);letter-spacing:-.01em;line-height:1.1}
.brand-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--sb-faint);letter-spacing:.06em}
.user{margin:0 12px 10px;padding:10px 11px;border:1px solid var(--sidebar-line);border-radius:10px;
display:flex;align-items:center;gap:10px}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--sb-avatar);display:grid;place-items:center;
font-size:11px;font-weight:600;color:var(--sb-ink)}
.user-meta{flex:1;min-width:0}
.user-name{font-size:12.5px;color:var(--sb-strong);font-weight:500;line-height:1.2}
.user-role{font-size:9.5px;color:var(--sb-faint);letter-spacing:.08em;text-transform:uppercase;font-family:'IBM Plex Mono',monospace}
.user-badge{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-badge-fg);font-family:'IBM Plex Mono',monospace;
background:var(--sb-badge-bg);padding:3px 6px;border-radius:5px;font-weight:500}
.nav{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 8px}
.nav-group{padding:14px 11px 6px}
.nav-group span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--sb-faint)}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:8px;color:var(--sb-ink);
font-size:13px;position:relative;transition:background .12s,color .12s}
.nav-item .ico{width:16px;height:16px;flex:0 0 16px;opacity:.7}
.nav-item:hover{background:var(--sb-hover);color:var(--sb-strong)}
.nav-item.active{background:var(--sb-active);color:var(--sb-strong);font-weight:500}
.nav-item.active .ico{opacity:1}
.nav-item.active::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.nav-item.soon{color:var(--sb-faint)}
.nav-item.soon .ico{opacity:.5}
.soon-dot{margin-left:auto;width:5px;height:5px;border-radius:50%;border:1px solid var(--sb-faint);opacity:.6}
.nav-signout-wrap{margin-top:8px;padding-top:8px;border-top:1px solid var(--sidebar-line)}
.signout{width:100%;padding:9px;border:1px solid var(--sidebar-line);border-radius:9px;color:var(--sb-ink);
background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:12.5px;transition:background .12s}
.signout:hover{background:var(--sb-hover);color:var(--sb-strong)}
/* ---- Main / topbar ---------------------------------------- */
.main{flex:1;min-width:0;max-width:1320px;padding:28px 36px 60px}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
/* ── Tabs do modal de edição da escala ── */
.mt-tab{display:inline-flex;align-items:center;gap:5px;
padding:5px 12px;border-radius:7px;border:1px solid var(--border);
background:var(--surface);font-size:12px;font-weight:500;
color:var(--ink-2);cursor:pointer;transition:all .15s}
.mt-tab:hover{background:var(--surface-2);color:var(--ink)}
.mt-tab--active{background:var(--accent);border-color:var(--accent);
color:#fff}
.mt-tab--danger{color:var(--crit);border-color:transparent}
.mt-tab--danger:hover{background:rgba(220,50,50,.08);color:var(--crit)}
.mt-tab--danger.mt-tab--active{background:var(--crit);border-color:var(--crit);color:#fff}
/* ── Modal de edição da escala ── */
.escala-modal{
margin:auto;padding:0;border:1px solid var(--border-strong);border-radius:16px;
background:var(--surface-1);color:var(--ink);
width:min(480px,calc(100vw - 32px));max-width:480px;
max-height:calc(100vh - 32px);overflow:auto;
box-shadow:0 24px 64px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.04)}
.escala-modal::backdrop{
background:rgba(8,10,14,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
[data-theme="light"] .escala-modal::backdrop{background:rgba(16,18,22,.38)}
.escala-modal__head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:20px 22px 0}
.escala-modal__eyebrow{margin-bottom:4px;color:var(--ink-2)}
.escala-modal__title{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.escala-modal__close{
flex-shrink:0;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
background:var(--surface);color:var(--ink-2);cursor:pointer;
display:grid;place-items:center;transition:background .12s,color .12s}
.escala-modal__close:hover{background:var(--surface-2);color:var(--ink)}
.escala-modal__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mt-tabs{display:flex;gap:6px;padding:16px 22px 0;flex-wrap:wrap}
.escala-modal__body{padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.escala-modal__foot{
padding:0 22px 22px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.escala-modal__readonly{
padding:10px 12px;border:1px solid var(--border);border-radius:8px;
background:var(--surface-2);font-size:14px;font-weight:500;color:var(--ink)}
.escala-modal__warn-text{font-size:14px;line-height:1.55;margin:0;color:var(--ink)}
.escala-modal__warn-note{font-size:12px;color:var(--crit);margin:0}
.btn--danger{background:var(--crit);border:1px solid var(--crit);color:#fff}
.btn--danger:hover{filter:brightness(1.06)}
/* ── Card “Próximo plantão” (topo da escala) ── */
.card--proximo{
margin-bottom:20px;padding:0;overflow:hidden;
border:1px solid var(--border-strong);
background:var(--surface-1);
box-shadow:var(--shadow)}
.card--proximo::before{
content:"";display:block;height:4px;
background:linear-gradient(90deg,var(--accent),rgba(110,139,255,.45))}
.card--proximo-trabalha::before{
background:linear-gradient(90deg,var(--accent),#5B8DEF 45%,rgba(110,139,255,.5))}
.card--proximo-trabalha{
box-shadow:0 0 0 1px rgba(110,139,255,.22),var(--shadow)}
.proximo-you{
display:flex;align-items:center;gap:14px;margin:0 24px 18px;padding:14px 18px;
border-radius:12px;
background:linear-gradient(135deg,rgba(110,139,255,.09) 0%,rgba(110,139,255,.03) 100%);
border:1px solid rgba(110,139,255,.18)}
.proximo-you-indicator{
flex-shrink:0;width:10px;height:10px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 0 4px rgba(110,139,255,.18),0 0 12px rgba(110,139,255,.35);
animation:proximo-pulse 2.4s ease-in-out infinite}
@keyframes proximo-pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.85;transform:scale(.92)}}
.proximo-you-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.proximo-you-label{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.proximo-you-detail{
font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;
color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.proximo-posto--mine{
position:relative;
box-shadow:0 0 0 2px rgba(110,139,255,.35),0 4px 16px rgba(110,139,255,.12)}
.proximo-posto--mine::after{
content:"seu posto";position:absolute;top:8px;right:10px;
font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--accent);opacity:.75}
.proximo-head{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 24px 16px}
.proximo-eyebrow{margin-bottom:6px;color:var(--ink-2)}
.proximo-date-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.proximo-dow{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.proximo-day{
font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;
color:var(--ink-2);padding:4px 10px;border-radius:8px;
background:var(--surface-2);border:1px solid var(--border)}
.proximo-badge{
flex-shrink:0;padding:8px 14px;border-radius:999px;
background:var(--accent);color:#fff;font-size:11px;font-weight:700;
font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
box-shadow:0 4px 14px rgba(110,139,255,.35)}
.proximo-meta{
display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 4px}
.proximo-pill{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.3}
.proximo-pill--folga{
color:var(--warn);background:rgba(240,180,80,.14);border:1px solid rgba(240,180,80,.4)}
.proximo-pill--posto{
color:var(--ink);background:var(--surface-2);border:1px solid var(--border)}
.proximo-postos{
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;padding:12px 24px 20px}
.proximo-posto{
min-height:88px;padding:12px 14px 14px;border-radius:10px}
.card--proximo .escala-posto-code{font-size:11px;margin-bottom:2px}
.card--proximo .escala-posto-chips{gap:6px;margin-top:4px}
.card--proximo .escala-chip{font-size:13px;padding:5px 11px;font-weight:500}
.proximo-empty{
padding:8px 24px 16px;margin:0;font-size:13px;color:var(--ink-2)}
.proximo-foot{
padding:12px 24px 16px;border-top:1px solid var(--border);
background:var(--surface-2);display:flex;justify-content:center}
.proximo-link{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;
padding:8px 16px;border-radius:9px;border:1px solid transparent;
transition:background .12s,border-color .12s}
.proximo-link:hover{
background:rgba(110,139,255,.08);border-color:rgba(110,139,255,.25)}
.proximo-link svg{opacity:.85}
/* Relógio no topbar */
.topbar-clock{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:6px 16px 5px;border-radius:12px;
background:var(--surface);border:1px solid var(--border);
flex-shrink:0}
.topbar-clock-time{font-size:22px;font-weight:600;letter-spacing:.02em;
font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.topbar-clock-bottom{display:flex;align-items:center;gap:5px;white-space:nowrap}
.topbar-clock-dow{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.topbar-clock-sep{font-size:11px;color:var(--ink-3)}
.topbar-clock-date{font-size:11px;color:var(--ink-2)}
.crumb{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.crumb svg{stroke:var(--ink-3)}
.page-title{font-size:29px;font-weight:600;letter-spacing:-.025em;line-height:1}
.page-title .muted{color:var(--ink-3);font-weight:400}
.topctrl{display:flex;gap:10px;align-items:flex-end}
.field label,.field label.eyebrow{display:block;margin-bottom:5px;color:var(--ink-2)}
.sel{appearance:none;background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;
padding:8px 30px 8px 12px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;min-width:102px;
box-shadow:var(--shadow);background-repeat:no-repeat;background-position:right 10px center}
[data-theme="dark"] .sel{background-image:url("data:image/svg+xml;utf8,")}
[data-theme="light"] .sel{background-image:url("data:image/svg+xml;utf8,")}
.sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.theme-toggle{width:38px;height:36px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);
color:var(--ink-2);cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);transition:color .15s}
.theme-toggle:hover{color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}
/* ---- Hero: faixa de cobertura (assinatura) ---------------- */
.cover{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);
overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:stretch}
.cover-lead{padding:20px 26px;border-right:1px solid var(--border);background:var(--inset);min-width:230px}
.cover-lead .eyebrow{margin-bottom:11px}
.cover-big{display:flex;align-items:baseline;gap:9px}
.cover-big .n{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:.9;color:var(--ok)}
.cover-big .u{font-size:14px;color:var(--ink-2);font-weight:500}
.cover-sub{margin-top:9px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.ribbon{display:flex;overflow-x:auto}
.rday{flex:1;min-width:128px;padding:18px;border-right:1px solid var(--border);
transition:background .12s;display:flex;flex-direction:column;gap:8px}
.rday:last-child{border-right:none}
.rday:hover{background:var(--row-hover)}
.rday-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rday .d{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;letter-spacing:.01em}
.rday .w{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.1em}
.rday-num{display:flex;align-items:baseline;gap:6px}
.rday-num .n{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;
letter-spacing:-.025em;line-height:1;color:var(--ok)}
.rday-num .u{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-3)}
.rbar{height:6px;border-radius:3px;background:var(--ok-track);overflow:hidden}
.rbar > span{display:block;height:100%;border-radius:3px;background:var(--ok);
transition:width .18s ease}
.rday-sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-2);
letter-spacing:.02em}
/* Semáforo (regra D centralizada em ausencias._nivel) */
.rday--ok .rday-num .n { color: var(--ok) }
.rday--ok .rbar > span { background: var(--ok) }
.rday--tight .rday-num .n { color: var(--warn) }
.rday--tight .rbar > span { background: var(--warn) }
.rday--low .rday-num .n { color: var(--crit) }
.rday--low .rbar > span { background: var(--crit) }
/* cover-lead: número em âmbar quando algum dia teve queda (min < efetivo) */
.cover-big .n.is-warn { color: var(--warn) }
/* ---- Stats strip ------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 18px;
box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.stat-ico{width:34px;height:34px;border-radius:9px;flex:0 0 34px;display:grid;place-items:center;
background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.stat-ico.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.stat-body{flex:1;min-width:0}
.stat-top{display:flex;align-items:baseline;gap:8px}
.stat-val{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1}
.stat-lab{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.stat-foot{margin-top:3px;font-size:11.5px;color:var(--ink-2)}
/* ---- Card + table ----------------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-top:14px}
.card-head{padding:17px 22px 13px;border-bottom:1px solid var(--border)}
.card-title{font-size:15.5px;font-weight:600;letter-spacing:-.01em;margin-top:3px}
.card table{width:100%;border-collapse:collapse}
.card thead th{text-align:left;padding:10px 22px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--border)}
.card thead th.r, .card tbody td.r{text-align:right}
.card tbody td{padding:12px 22px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--ink)}
.card tbody tr:last-child td{border-bottom:none}
.card tbody tr{transition:background .1s}
.card tbody tr:hover{background:var(--row-hover)}
.cell-day{font-family:'IBM Plex Mono',monospace;font-weight:500}
.cell-dow{font-family:'IBM Plex Mono',monospace;color:var(--ink-3);font-size:12px}
.cell-zero{color:var(--ink-3)}
.vagas{display:inline-flex;align-items:center;gap:9px;justify-content:flex-end}
.vagas .v{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ok)}
.meter{display:inline-flex;gap:3px}
.meter span{width:7px;height:7px;border-radius:2px;background:var(--ok)}
.meter span.empty{background:var(--ok-track)}
/* ---- Empty state ------------------------------------------ */
.empty{padding:26px 22px 30px}
.empty-box{border:1px dashed var(--border-strong);border-radius:11px;background:var(--inset);padding:26px;
display:flex;align-items:center;gap:18px}
.empty-ico{width:44px;height:44px;border-radius:11px;flex:0 0 44px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.empty-txt{flex:1}
.empty-txt h3{font-size:14.5px;font-weight:600;margin-bottom:2px}
.empty-txt p{color:var(--ink-2);font-size:12.5px;max-width:54ch}
/* ---- Botão ------------------------------------------------- */
.btn{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:10px 17px;font-family:inherit;
font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
box-shadow:0 2px 12px -3px var(--accent);transition:filter .12s,transform .05s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:1100px){
.cover{grid-template-columns:1fr}
.cover-lead{border-right:none;border-bottom:1px solid var(--border)}
.stats{grid-template-columns:1fr}
}
/* ---- Login / troca de senha: layout centrado; herda o tema dark/light
via [data-theme] no (igual às outras telas). Sem light-lock nem
aliases legados — o login.css foi removido no cutover dívida #1. ---- */
body.page-login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-remember{margin-bottom:14px;padding:14px 16px;border-radius:10px;
background:var(--surface-2);border:1px solid var(--border)}
.login-remember-label{display:block;margin-bottom:6px;color:var(--ink-3)}
.login-remember-name{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.login-remember-switch{display:inline-block;margin-top:8px;font-size:12.5px;
color:var(--accent);text-decoration:none;font-weight:500}
.login-remember-switch:hover{text-decoration:underline}
.login-persist{display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;
font-size:13px;color:var(--ink-2);cursor:pointer;line-height:1.4;user-select:none}
.login-persist input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex:0 0 16px;
accent-color:var(--accent);cursor:pointer}
.login-persist-hint{color:var(--ink-3);font-size:12px}
.undo-form{margin:0;margin-right:4px;padding-right:10px;border-right:1px solid var(--border)}
.btn--undo{display:inline-flex;align-items:center;gap:8px;max-width:min(40vw,220px);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn--undo-label{font-weight:500;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
/* ---- Guia de uso (/guia) ---- */
body.page-guia{background:var(--bg);min-height:100vh;padding:20px 16px 32px}
.guia-shell{max-width:720px;margin:0 auto}
.guia-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.guia-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
color:var(--ink);font-weight:600;font-size:15px}
.guia-top-actions{display:flex;align-items:center;gap:8px}
.guia-doc{padding:28px 26px 32px;margin-top:0;line-height:1.65;color:var(--ink-2)}
.guia-doc > :first-child{margin-top:0}
.guia-doc h1{font-size:1.65rem;font-weight:700;color:var(--ink);margin:0 0 .5em;line-height:1.25}
.guia-doc h2{font-size:1.15rem;font-weight:600;color:var(--ink);margin:1.75em 0 .55em;
padding-bottom:.35em;border-bottom:1px solid var(--border)}
.guia-doc h3{font-size:.95rem;font-weight:600;color:var(--ink);margin:1.35em 0 .4em}
.guia-doc p{margin:0 0 .85em}
.guia-doc blockquote{margin:0 0 1em;padding:12px 16px;border-left:3px solid var(--accent);
background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--ink-2);font-size:.95rem}
.guia-doc ul,.guia-doc ol{margin:0 0 1em;padding-left:1.35em}
.guia-doc li{margin-bottom:.35em}
.guia-doc li::marker{color:var(--accent)}
.guia-doc hr{border:none;border-top:1px solid var(--border);margin:1.75em 0}
.guia-doc a{color:var(--accent);text-decoration:none;font-weight:500}
.guia-doc a:hover{text-decoration:underline}
.guia-doc strong{color:var(--ink);font-weight:600}
.guia-doc code{font-family:'IBM Plex Mono',monospace;font-size:.82em;padding:2px 6px;
border-radius:5px;background:var(--surface-2);border:1px solid var(--border);color:var(--ink)}
.guia-doc pre{margin:0 0 1.1em;padding:14px 16px;border-radius:10px;overflow-x:auto;
background:var(--surface-2);border:1px solid var(--border)}
.guia-doc pre code{padding:0;border:none;background:transparent;font-size:.8rem;line-height:1.5;
color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.guia-doc table{width:100%;border-collapse:collapse;margin:0 0 1.25em;font-size:.88rem}
.guia-doc th,.guia-doc td{padding:9px 12px;text-align:left;border:1px solid var(--border);
vertical-align:top}
.guia-doc th{background:var(--surface-2);color:var(--ink);font-weight:600;font-size:.78rem;
text-transform:uppercase;letter-spacing:.04em}
.guia-doc tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.guia-foot{text-align:center;margin-top:18px}
.guia-foot a{color:var(--ink-3);text-decoration:none}
.guia-foot a:hover{color:var(--accent)}
@media (max-width:768px){
.guia-doc{padding:20px 16px 24px}
.guia-doc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.guia-top-actions .btn--ghost{display:none}
}
/* ============================================================
Componentes do sistema (genericos, reusados em multiplas telas)
============================================================ */
/* ---- Badge — chip de estado pra tabelas/listagens.
Variantes semanticas alinhadas com --ok / --ink-3 / --warn.
Reuso esperado em: Equipe (ativo/inativo), Imprevistos (tipo),
Ferias (vigente/passada), Planejamento (status preferencia). */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:10px;
font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
border:1px solid transparent}
.badge--ok { color:var(--ok); background:var(--ok-soft) }
.badge--muted { color:var(--ink-3); background:var(--surface-2); border-color:var(--border) }
.badge--warn { color:var(--warn); background:rgba(240,180,80,.16) }
.badge--crit { color:var(--crit); background:rgba(242,88,91,.12) }
/* ---- Button — variante ghost (sem preenchimento accent).
Pra acoes inline em tabelas onde o .btn solido seria pesado demais.
Maior especificidade vem da ordem (depois de .btn na fonte). */
.btn--ghost{background:transparent;color:var(--ink);
border:1px solid var(--border-strong);box-shadow:none;
padding:7px 13px;font-size:12.5px}
.btn--ghost:hover{background:var(--row-hover);border-color:var(--ink-3);filter:none}
/* ---- Form row — layout flex pra "add inline" (label+input+botao em uma linha).
Reuso: Equipe novo, possivelmente Ferias novo, etc. */
.form-row{display:flex;align-items:flex-end;gap:12px;
padding:16px 22px;flex-wrap:wrap}
.form-row .field{flex:1 1 240px}
/* ---- Alert — banner inline pra erros/avisos de formulario
(separado do .login-alert que ja existe — esse e generico). */
.alert{margin:0 0 14px;padding:12px 16px;border-radius:9px;font-size:13px;font-weight:500;
border:1px solid transparent}
.alert--warn{color:var(--warn);background:rgba(240,180,80,.10);border-color:var(--warn)}
.alert--crit{color:var(--crit);background:rgba(242,88,91,.10);border-color:var(--crit)}
.alert--ok {color:var(--ok); background:var(--ok-soft); border-color:var(--ok)}
.alert-detail{margin:6px 0 8px;font-size:13px;color:var(--ink-2);line-height:1.45}
.alert-detail a{color:var(--accent);text-decoration:underline}
.alert-list{margin:0;padding-left:18px;font-size:13px;line-height:1.6}
.alert-list li{margin:2px 0}
/* ================================================================
MOBILE — breakpoints responsivos
Estratégia: sidebar deslizante, padding reduzido, tabelas com scroll
horizontal, touch targets mínimos de 44 px.
================================================================ */
/* ---- Hamburger (só visível em telas ≤ 768 px) ---- */
.nav-toggle {
display: none;
width: 42px; height: 42px;
flex: 0 0 42px;
align-items: center; justify-content: center;
border: 1px solid var(--border-strong);
border-radius: 9px;
background: var(--surface);
color: var(--ink-2);
cursor: pointer;
box-shadow: var(--shadow);
transition: background .12s, color .12s;
}
.nav-toggle:hover { color: var(--ink); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- Overlay escurece o fundo quando sidebar está aberta ---- */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .52);
z-index: 99;
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
}
.sidebar-overlay.is-visible { display: block; }
/* ================================================================
max-width: 768 px → celulares (portrait e landscape)
================================================================ */
@media (max-width: 768px) {
/* ---- Sidebar deslizante ---- */
.sidebar {
position: fixed;
inset: 0 auto 0 0; /* full-height, cola na esquerda */
z-index: 100;
transform: translateX(-100%);
transition: transform .22s cubic-bezier(.4, 0, .2, 1),
box-shadow .22s;
width: 272px; /* um pouco mais largo pra toque fácil */
height: 100vh; /* fallback */
height: 100dvh; /* dvh desconta a barra do browser no mobile */
}
.sidebar--open {
transform: translateX(0);
box-shadow: 6px 0 40px rgba(0, 0, 0, .32);
}
/* ---- Body / main ---- */
body:not(.page-login) {
flex-direction: column;
}
.main {
padding: 14px 14px 64px;
max-width: 100%;
width: 100%;
min-width: 0;
}
/* ---- Hamburger visível ---- */
.nav-toggle { display: inline-flex; }
/* ---- Topbar ---- */
.topbar {
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
align-items: center;
}
.topbar > div:first-child { flex: 1; min-width: 0; }
.page-title { font-size: 21px; }
.topbar-clock { display: none; }
/* ---- Cards: scroll horizontal para tabelas densas ---- */
.card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 10px;
}
.card-head { padding: 13px 14px 10px; }
.card-title { font-size: 14px; }
.card thead th { padding: 9px 12px; }
.card tbody td { padding: 10px 12px; font-size: 13px; }
/* ---- Form rows empilham ---- */
.form-row { padding: 12px 14px; gap: 10px; }
.form-row .field { flex: 1 1 100%; }
/* ---- Cover / Stats ---- */
.cover { grid-template-columns: 1fr; }
.cover-lead { border-right: none; border-bottom: 1px solid var(--border); }
.stats { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
/* ---- Empty state ---- */
.empty-box { flex-direction: column; gap: 12px; }
.empty-ico { width: 38px; height: 38px; border-radius: 9px; }
/* ---- Touch targets mínimos 44 px ---- */
.btn { min-height: 44px; padding: 10px 16px; }
.btn--ghost { min-height: 42px; }
.sel { min-height: 42px; }
.nav-item { min-height: 44px; padding: 10px 11px; }
.signout { min-height: 44px; }
.nav-signout-wrap { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
/* ---- Modal escala: largura total no mobile ---- */
.escala-modal {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 24px) !important;
border-radius: 14px !important;
}
/* ---- Topbar ctrl: itens menores para não quebrar linha ---- */
.topctrl { gap: 6px; }
.theme-toggle { width: 42px; height: 42px; }
}
/* ================================================================
max-width: 480 px → celulares mais estreitos
================================================================ */
@media (max-width: 480px) {
.card thead th,
.card tbody td { padding: 8px 10px; font-size: 12.5px; }
.eyebrow { font-size: 9.5px; letter-spacing: .12em; }
.stats { grid-template-columns: 1fr; }
.page-title { font-size: 19px; }
.main { padding: 12px 12px 60px; }
}
/* ================================================================
Tabs (sistema) — toggle JS via [data-tabs] em templates
================================================================ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);
margin-bottom:18px;padding:0 4px}
.tab{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--ink-2);
border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
background:transparent;font-family:inherit;font-weight:500;
letter-spacing:.01em;transition:color .12s,border-color .12s}
.tab:hover{color:var(--ink)}
.tab--active{color:var(--ink);border-bottom-color:var(--accent)}
.tab-pane{display:none}
.tab-pane.is-visible{display:block}
/* Section headers dentro de .tab-pane (= Regras) — sobem para --ink-2,
sem afetar eyebrows em .card-head fora de tabs (Dashboard etc). */
.tab-pane .card-head .eyebrow{color:var(--ink-2)}
/* ================================================================
Escala — grid de boxes por posto
================================================================ */
/* Linha de cada dia de plantão */
.escala-grid{display:flex;flex-direction:column}
.escala-row{display:flex;align-items:flex-start;gap:14px;
padding:10px 22px;border-bottom:1px solid var(--border);
transition:background .1s}
.escala-row:last-child{border-bottom:none}
.escala-row:hover{background:var(--row-hover)}
.escala-row--weekend{background:var(--surface-2)}
.escala-row--weekend:hover{background:var(--surface-2);filter:brightness(.97)}
.escala-row--today{border-left:3px solid var(--accent);padding-left:19px}
.escala-row--proximo{
background:rgba(110,139,255,.06);
box-shadow:inset 0 0 0 1px rgba(110,139,255,.18)}
.escala-row--proximo.escala-row--today{
border-left-color:var(--accent);
box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(110,139,255,.18);
padding-left:19px}
/* Coluna de data */
.escala-date-col{display:flex;flex-direction:column;gap:2px;
min-width:88px;padding-top:7px;flex-shrink:0}
.escala-date-label{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px}
.escala-dow{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1.2}
/* Wrapper dos boxes de posto */
.escala-postos-wrap{display:flex;flex-wrap:wrap;gap:8px;flex:1;padding:4px 0}
/* Box individual por posto */
.escala-posto-box{display:flex;flex-direction:column;gap:5px;
padding:6px 10px 7px;border-radius:8px;border:1px solid transparent;min-width:70px}
/* Código do posto (label colorido no topo do box) */
.escala-posto-code{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
font-weight:700;letter-spacing:.12em;text-transform:uppercase}
/* Chips dos integrantes */
.escala-posto-chips{display:flex;flex-wrap:wrap;gap:4px}
.escala-chip{display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border-radius:6px;border:1px solid transparent;
font-size:12px;font-weight:500;font-family:inherit;
background:transparent;cursor:default;transition:filter .1s}
button.escala-chip{cursor:pointer}
button.escala-chip:hover{filter:brightness(1.15)}
button.escala-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.escala-chip--prov{border-style:dashed}
.escala-chip--eu{
font-weight:600;
box-shadow:0 0 0 1px rgba(110,139,255,.45),0 0 0 3px rgba(110,139,255,.12)}
.card--proximo .escala-chip--eu{
box-shadow:none;font-weight:600}
.escala-chip-you{
font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
opacity:.75;margin-left:3px;padding:1px 5px;border-radius:4px;
background:rgba(110,139,255,.15);color:var(--accent)}
.escala-chip-ext{font-size:9px;opacity:.6;letter-spacing:.04em;margin-left:1px}
/* Cores dos postos (background + borda + label) — light mode */
.escala-posto-box--F641 { background:rgba(110,139,255,.10); border-color:rgba(110,139,255,.35) }
.escala-posto-box--C6416 { background:rgba(47,142, 86,.10); border-color:rgba(47,142, 86,.35) }
.escala-posto-box--C6417 { background:rgba(200,140, 20,.10); border-color:rgba(200,140, 20,.35) }
.escala-posto-box--C6418 { background:rgba(120,100,220,.10); border-color:rgba(120,100,220,.35) }
.escala-posto-box--F641 .escala-posto-code { color:#4060CC }
.escala-posto-box--C6416 .escala-posto-code { color:#1E7A44 }
.escala-posto-box--C6417 .escala-posto-code { color:#96620A }
.escala-posto-box--C6418 .escala-posto-code { color:#5A38C8 }
/* Dark mode */
[data-theme="dark"] .escala-posto-box--F641 { background:rgba(110,139,255,.12); border-color:rgba(110,139,255,.32) }
[data-theme="dark"] .escala-posto-box--C6416 { background:rgba(63,162,102,.12); border-color:rgba(63,162,102,.32) }
[data-theme="dark"] .escala-posto-box--C6417 { background:rgba(241,180,103,.12); border-color:rgba(241,180,103,.32) }
[data-theme="dark"] .escala-posto-box--C6418 { background:rgba(147,134,242,.12); border-color:rgba(147,134,242,.32) }
[data-theme="dark"] .escala-posto-box--F641 .escala-posto-code { color:#7BAFE9 }
[data-theme="dark"] .escala-posto-box--C6416 .escala-posto-code { color:#3FA266 }
[data-theme="dark"] .escala-posto-box--C6417 .escala-posto-code { color:#F1B467 }
[data-theme="dark"] .escala-posto-box--C6418 .escala-posto-code { color:#9386F2 }
/* Mobile */
@media (max-width: 768px) {
.escala-row { padding: 10px 14px; gap: 10px; }
.escala-row--today { padding-left: 11px; }
.escala-date-col { min-width: 76px; }
.escala-date-label { font-size: 12px; }
.escala-dow { font-size: 11px; }
.escala-posto-box { padding: 5px 8px 6px; }
.escala-chip { font-size: 11px; padding: 2px 7px; }
.proximo-head { padding: 16px 18px 12px; align-items: flex-start; }
.proximo-dow { font-size: 22px; }
.proximo-day { font-size: 13px; }
.proximo-postos { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 18px 16px; }
.proximo-posto { min-height: 0; padding: 10px 12px; }
.proximo-meta { padding: 0 18px 4px; }
.proximo-foot { padding: 10px 18px 14px; }
.proximo-you { margin: 0 18px 14px; padding: 12px 14px; gap: 12px; }
.proximo-you-label { font-size: 13px; }
}