/* FAKESIGA - Design system responsivo */
:root {
    --blue: #0071e3;
    --blue-hover: #0062c4;
    --green: #248a3d;
    --red: #d70015;
    --orange: #c93400;
    --purple: #7d3db8;
    --background: #f5f5f7;
    --surface: #ffffff;
    --surface-soft: #f9f9fb;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --border: #d9d9de;
    --shadow: 0 10px 32px rgba(0, 0, 0, 0.06);
    --shadow-small: 0 3px 12px rgba(0, 0, 0, 0.06);
    --glass: rgba(255, 255, 255, 0.88);
    --danger-bg: rgba(215, 0, 21, 0.08);
    --success-bg: rgba(36, 138, 61, 0.1);
    --warning-bg: rgba(201, 52, 0, 0.08);
    --overdue-bg: #fff3b0;
    --overdue-text: #b42318;
    --overdue-border: #d6a300;
    --holiday-bg: rgba(125, 61, 184, 0.10);
    --radius: 16px;
    --radius-small: 10px;
}

[data-theme="dark"] {
    --background: #111113;
    --surface: #1c1c1e;
    --surface-soft: #252527;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --border: #3a3a3c;
    --shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
    --shadow-small: 0 3px 12px rgba(0, 0, 0, 0.22);
    --glass: rgba(28, 28, 30, 0.88);
    --danger-bg: rgba(255, 69, 58, 0.13);
    --success-bg: rgba(48, 209, 88, 0.12);
    --warning-bg: rgba(255, 159, 10, 0.12);
    --overdue-bg: #4a3b08;
    --overdue-text: #ff9f92;
    --overdue-border: #d6a300;
    --holiday-bg: rgba(191, 90, 242, 0.16);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
body.sem-rolagem { overflow: hidden; }

header#app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 58px;
    padding: 0 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--glass);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.7px;
    cursor: pointer;
    white-space: nowrap;
}
.nav-menu { display: flex; align-items: center; gap: 6px; height: 100%; }
.nav-link, .dropbtn {
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.nav-link:hover, .dropbtn:hover, .nav-link.active, .dropdown.active > .dropbtn {
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 9%, transparent);
}
.nav-link svg, .dropbtn svg { width: 16px; height: 16px; }
.dropbtn .chevron { width: 12px; height: 12px; }
.dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    min-width: 205px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display: block; }
.dropdown-content a {
    display: block;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
}
.dropdown-content a:hover { background: var(--surface-soft); color: var(--blue); }
.header-user { display: flex; align-items: center; gap: 10px; }
.user-link { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13px; font-weight: 600; }
.avatar {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), #5ac8fa);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.icon-button, .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    border-radius: 9px;
    cursor: pointer;
}
.icon-button { width: 34px; height: 34px; }
.btn-icon { width: 34px; height: 34px; }
.icon-button:hover, .btn-icon:hover { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
.icon-button svg, .btn-icon svg { width: 17px; height: 17px; }
.mobile-menu-button { display: none; }

.main-container { width: min(1180px, calc(100% - 40px)); margin: 30px auto 70px; }
.main-container.wide { width: min(1420px, calc(100% - 40px)); }
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.page-title { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -1px; }
.page-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.page-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card {
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-small);
}
.card + .card { margin-top: 18px; }
.card-title { margin: 0 0 4px; font-size: 16px; letter-spacing: -0.3px; }
.card-subtitle { margin: 0; color: var(--muted); font-size: 12px; }
.section-title {
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.section-title svg { width: 16px; height: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat-card { padding: 19px; }
.stat-value { margin-top: 12px; font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.stat-label { color: var(--muted); font-size: 12px; }

.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
    min-height: 40px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.btn-primary { border: 1px solid var(--blue); background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-secondary { border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--surface-soft); }
.btn-danger { border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border)); background: var(--danger-bg); color: var(--red); }
.btn-ghost { border: 1px solid transparent; background: transparent; color: var(--muted); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: scale(.98); }
.btn-primary svg, .btn-secondary svg, .btn-danger svg, .btn-ghost svg { width: 16px; height: 16px; }
.btn-block { width: 100%; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-group { min-width: 0; }
.form-group.span-2 { grid-column: span 2; }
.form-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}
.form-control, .form-group input, .form-group select, .form-group textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text);
    outline: none;
}
.form-group textarea { min-height: 110px; resize: vertical; }
.form-control:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}
.form-hint { margin-top: 5px; color: var(--muted); font-size: 11px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.checkbox-list {
    max-height: 190px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}
.checkbox-item { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; font-size: 13px; }
.checkbox-item:hover { background: var(--surface); }
.checkbox-item input { width: 16px; height: 16px; min-height: auto; }

.search-field { position: relative; width: min(340px, 100%); }
.search-field svg { position: absolute; left: 12px; top: 50%; width: 16px; transform: translateY(-50%); color: var(--muted); }
.search-field input { width: 100%; height: 40px; padding: 9px 12px 9px 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); outline: none; }
.search-field input:focus { border-color: var(--blue); }
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 7px; margin-bottom: 18px; }
.filter-button { white-space: nowrap; padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.filter-button.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.table-card { padding: 0; overflow: hidden; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 17px; background: var(--surface-soft); color: var(--muted); text-align: left; font-size: 10px; letter-spacing: .65px; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 17px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.table-actions { display: flex; justify-content: flex-end; gap: 4px; }
.empty-state { padding: 50px 20px; text-align: center; color: var(--muted); }
.empty-state svg { width: 38px; height: 38px; margin-bottom: 12px; opacity: .55; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge-success { color: var(--green); background: var(--success-bg); }
.badge-danger { color: var(--red); background: var(--danger-bg); }
.badge-warning { color: var(--orange); background: var(--warning-bg); }
.badge-neutral { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); }
.color-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

.pipeline { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.pipeline-card { min-width: 155px; flex: 1; padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }
.pipeline-number { font-size: 27px; font-weight: 800; }
.pipeline-label { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.activity-list { display: flex; flex-direction: column; }
.activity-item { padding: 11px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: 0; }
.activity-text { font-size: 13px; }
.activity-meta { margin-top: 3px; color: var(--muted); font-size: 10px; }

.workflow-tabs { display: flex; gap: 5px; padding: 5px; margin-bottom: 18px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.workflow-tab { padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); white-space: nowrap; font-size: 12px; font-weight: 700; cursor: pointer; }
.workflow-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-small); }
.job-date-group { margin-top: 22px; }
.job-date-title { margin: 0 4px 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.job-card {
    display: grid;
    grid-template-columns: 78px 90px minmax(220px, 1fr) 210px 170px 80px;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--blue);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 5px rgba(0,0,0,.025);
}
.job-card.atrasado {
    background: var(--overdue-bg);
    color: var(--overdue-text);
    border-color: var(--overdue-border);
    border-left-color: var(--red) !important;
}
.job-card.atrasado .job-time,
.job-card.atrasado .job-code,
.job-card.atrasado .job-title,
.job-card.atrasado .job-client {
    color: var(--overdue-text);
}
.job-card.atrasado .mini-avatar,
.job-card.atrasado .tag-select {
    color: var(--overdue-text);
    border-color: color-mix(in srgb, var(--overdue-text) 30%, var(--border));
}
.job-time { font-size: 13px; font-weight: 800; }
.job-code { color: var(--blue); font-size: 11px; font-weight: 800; }
.job-title { margin: 0; font-size: 13px; font-weight: 750; }
.job-client { margin-top: 2px; color: var(--muted); font-size: 10px; }
.job-responsaveis { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mini-avatar { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-soft); border: 1px solid var(--border); font-size: 9px; font-weight: 800; }
.tag-select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); color: var(--text); font-size: 11px; font-weight: 700; }
.job-actions { display: flex; justify-content: flex-end; }

.my-job-card { display: grid; grid-template-columns: 90px minmax(200px, 1fr) 170px 180px; align-items: center; gap: 15px; padding: 17px; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 12px; background: var(--surface); margin-bottom: 10px; }
.my-job-card.atrasado {
    border-left-color: var(--red);
    background: var(--overdue-bg);
    color: var(--overdue-text);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    background: rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.modal.aberto { display: block; }
.modal-panel {
    width: min(520px, 100%);
    height: 100%;
    margin-left: auto;
    padding: 28px;
    overflow-y: auto;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 40px rgba(0,0,0,.12);
}
.modal-panel.large { width: min(680px, 100%); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 24px; }
.modal-title { margin: 0; font-size: 22px; letter-spacing: -.7px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

.profile-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; }
.side-menu { padding: 10px; }
.side-menu a, .side-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text); text-decoration: none; font-size: 13px; text-align: left; cursor: pointer; }
.side-menu a:hover, .side-menu button:hover, .side-menu a.active { background: var(--surface-soft); color: var(--blue); }
.side-menu svg { width: 17px; height: 17px; }
.side-menu .danger { color: var(--red); }
.clock-card { padding: 30px; background: linear-gradient(135deg, #0071e3, #5ac8fa); color: #fff; text-align: center; }
.live-clock { margin: 5px 0; font-size: 48px; font-weight: 850; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.clock-label { opacity: .8; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.clock-actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.clock-actions .btn-primary { background: #fff; color: var(--blue); border-color: #fff; }
.clock-actions .btn-secondary { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.profile-person { display: flex; align-items: center; gap: 16px; }
.profile-avatar { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #5ac8fa); color: #fff; font-size: 27px; font-weight: 850; }
.punch-list { display: flex; flex-direction: column; }
.punch-item { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.punch-item:last-child { border-bottom: 0; }

.admin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 18px; }
.config-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); margin-bottom: 8px; }
.config-main { min-width: 0; flex: 1; }
.config-name { font-size: 13px; font-weight: 750; }
.config-meta { margin-top: 2px; color: var(--muted); font-size: 10px; }
.config-actions { display: flex; gap: 3px; }

.calendar-shell { width: min(1050px, calc(100% - 40px)); margin: 30px auto 70px; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.calendar-nav { display: flex; align-items: center; gap: 8px; }
.calendar-title { min-width: 170px; text-align: center; font-size: 16px; font-weight: 800; text-transform: capitalize; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar-weekday { padding: 8px; color: var(--muted); text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.calendar-day { min-height: 110px; padding: 9px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.calendar-day.empty { background: transparent; border-color: transparent; }
.calendar-day.today { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 12%, transparent); }
.day-number { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; }
.punch-tag { display: block; margin-top: 4px; padding: 3px 5px; border-radius: 5px; background: var(--surface-soft); color: var(--muted); font-size: 9px; }
.day-total { margin-top: 6px; color: var(--blue); font-size: 9px; font-weight: 800; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.summary-item { padding: 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: center; }
.summary-value { display: block; font-size: 25px; font-weight: 850; }
.summary-label { color: var(--muted); font-size: 11px; }

.login-body { display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at top, color-mix(in srgb, var(--blue) 12%, var(--background)), var(--background) 45%); }
.login-card { width: min(430px, 100%); padding: 38px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.login-brand { margin-bottom: 28px; text-align: center; }
.login-brand .logo { font-size: 29px; }
.login-brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.login-title { margin: 0 0 24px; text-align: center; font-size: 22px; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 12px; top: 50%; width: 16px; transform: translateY(-50%); color: var(--muted); }
.input-icon input { padding-left: 40px; }
.login-help { margin: 20px 0 0; padding: 11px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 11px; text-align: center; }
.alert { display: none; margin-bottom: 16px; padding: 10px 12px; border-radius: 9px; font-size: 12px; }
.alert.visible { display: block; }
.alert-danger { background: var(--danger-bg); color: var(--red); }

.toast-area { position: fixed; right: 20px; bottom: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.toast { max-width: 350px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(8px); transition: all .2s ease; }
.toast.visivel { opacity: 1; transform: translateY(0); }
.toast-sucesso { border-left: 4px solid var(--green); }
.toast-erro { border-left: 4px solid var(--red); }
.toast-aviso { border-left: 4px solid var(--orange); }

@media (max-width: 1050px) {
    .job-card { grid-template-columns: 65px 80px minmax(190px, 1fr) 175px 150px 70px; gap: 9px; }
    .my-job-card { grid-template-columns: 80px minmax(180px, 1fr) 150px; }
    .my-job-card > :nth-child(4) { grid-column: 2 / -1; }
}

@media (max-width: 850px) {
    header#app-header { padding: 0 18px; }
    .mobile-menu-button { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 35px; height: 35px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); }
    .mobile-menu-button svg { width: 18px; }
    .nav-menu { display: none; position: absolute; top: 58px; left: 12px; right: 12px; height: auto; padding: 8px; flex-direction: column; align-items: stretch; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
    .nav-menu.aberto { display: flex; }
    .nav-link, .dropbtn { width: 100%; justify-content: flex-start; }
    .dropdown { height: auto; display: block; }
    .dropdown-content { position: static; display: block; margin: 2px 0 5px 24px; border: 0; box-shadow: none; background: transparent; }
    .dropdown-content a { padding: 7px 10px; color: var(--muted); }
    .user-name { display: none; }
    .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-grid, .profile-layout { grid-template-columns: 1fr; }
    .job-card { grid-template-columns: 65px 75px minmax(170px, 1fr) 160px; }
    .job-responsaveis { display: none; }
    .job-actions { grid-column: 4; }
}

@media (max-width: 650px) {
    .main-container, .main-container.wide, .calendar-shell { width: min(100% - 24px, 100%); margin-top: 18px; }
    .page-header { flex-direction: column; align-items: stretch; }
    .page-actions { width: 100%; }
    .page-actions > * { flex: 1; }
    .grid-2, .grid-3, .grid-4, .form-grid, .form-grid-3, .summary-grid { grid-template-columns: 1fr; }
    .form-group.span-2 { grid-column: span 1; }
    .job-card { grid-template-columns: 62px 1fr 48px; gap: 8px; padding: 12px; }
    .job-code { grid-column: 1; grid-row: 2; }
    .job-card > div:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
    .job-card > div:nth-child(4) { display: none; }
    .job-card > div:nth-child(5) { grid-column: 1 / span 2; }
    .job-actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; }
    .my-job-card { grid-template-columns: 70px 1fr; }
    .my-job-card > :nth-child(3), .my-job-card > :nth-child(4) { grid-column: 2; }
    .calendar-grid { gap: 3px; }
    .calendar-day { min-height: 80px; padding: 5px; }
    .punch-tag { font-size: 8px; padding: 2px; }
    .day-total { display: none; }
    .modal-panel { padding: 22px 17px; }
    .login-card { padding: 28px 22px; }
    .live-clock { font-size: 39px; }
}


/* --- MVP 3.0: visibilidade, tarefas e ponto em lista --- */
.visibility-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    box-shadow: var(--shadow-small);
}
.visibility-notice.enabled {
    border-color: color-mix(in srgb, var(--green) 35%, var(--border));
    background: var(--success-bg);
    color: var(--green);
}
.visibility-notice svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.visibility-notice div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.visibility-notice strong { color: var(--text); font-size: 13px; }
.visibility-notice span { font-size: 11px; }

.deadline-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.deadline-row.is-overdue {
    margin: 6px -8px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--overdue-bg);
    color: var(--overdue-text);
}
.deadline-row.is-overdue .activity-meta { color: var(--overdue-text); }

.overdue-badge {
    color: var(--overdue-text);
    background: color-mix(in srgb, var(--overdue-bg) 75%, white);
    border: 1px solid var(--overdue-border);
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.setting-row h3 { margin: 0; font-size: 14px; }
.setting-row p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.switch {
    position: relative;
    width: 50px;
    height: 29px;
    flex: 0 0 auto;
}
.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--border);
    cursor: pointer;
    transition: background .2s ease;
}
.switch-slider::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: transform .2s ease;
}
.switch input:checked + .switch-slider { background: var(--green); }
.switch input:checked + .switch-slider::after { transform: translateX(21px); }

/* Tarefas rápidas */
.task-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}
.task-card.atrasada {
    background: var(--overdue-bg);
    color: var(--overdue-text);
    border-color: var(--overdue-border);
}
.task-card.concluida { opacity: .72; }
.task-card.concluida .task-main h2 { text-decoration: line-through; }
.task-check {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
}
.task-check.checked {
    border-color: var(--green);
    background: var(--success-bg);
    color: var(--green);
}
.task-check svg { width: 17px; height: 17px; }
.task-main h2 { margin: 0; font-size: 15px; }
.task-main p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
    white-space: pre-line;
}
.task-card.atrasada .task-main p,
.task-card.atrasada .task-meta { color: var(--overdue-text); }
.task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 10px;
}
.task-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.task-meta svg { width: 13px; height: 13px; }
.task-actions { display: flex; gap: 3px; }

/* Histórico de ponto em lista */
.point-day-card {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 10px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}
.point-day-card.weekend { background: var(--surface-soft); }
.point-date-box {
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}
.point-date-box strong {
    font-size: 27px;
    line-height: 1;
}
.point-date-box span {
    margin-top: 7px;
    color: var(--muted);
    font-size: 10px;
    text-transform: capitalize;
}
.point-day-content { min-width: 0; }
.point-day-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.point-day-header h2 {
    margin: 0;
    font-size: 14px;
}
.holiday-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}
.holiday-badge {
    color: var(--purple);
    background: var(--holiday-bg);
    border: 1px solid color-mix(in srgb, var(--purple) 25%, var(--border));
}
.holiday-badge svg { width: 12px; height: 12px; }
.point-records {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.point-record {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}
.point-time {
    color: var(--blue);
    font-size: 15px;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}
.point-type {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}
.point-edit-button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 11px;
}
.point-edit-button:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.point-empty {
    padding: 14px 0;
    color: var(--muted);
    font-size: 12px;
}
.point-original {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
}
.point-original span,
.point-original small { color: var(--muted); font-size: 10px; }
.point-original strong { font-size: 14px; }

.approval-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
}
.approval-card:last-child { border-bottom: 0; }
.approval-main { min-width: 0; }
.approval-main > strong { font-size: 13px; }
.approval-main p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 11px;
}
.approval-change {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 11px;
}
.approval-change span {
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}
.approval-change svg { width: 14px; height: 14px; color: var(--muted); }
.approval-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .deadline-row,
    .setting-row,
    .approval-card {
        align-items: stretch;
        flex-direction: column;
    }

    .task-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .task-actions {
        grid-column: 2;
        justify-content: flex-end;
    }

    .point-day-card {
        grid-template-columns: 1fr;
    }
    .point-date-box {
        min-height: auto;
        padding: 12px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 9px;
    }
    .point-date-box strong { font-size: 20px; }
    .point-date-box span { margin: 0; }
    .point-record {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .point-edit-button {
        grid-column: 1 / -1;
    }
    .approval-actions {
        width: 100%;
    }
    .approval-actions > * { flex: 1; }
}

@media (max-width: 480px) {
    .point-day-header {
        flex-direction: column;
    }
}

/* --- MVP FINAL: times, níveis de acesso e campos brasileiros --- */
.badge-info {
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--border));
}

.team-mini-badge {
    max-width: 118px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
    color: var(--blue);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-mini-badge svg { width: 11px; height: 11px; flex: 0 0 auto; }

.creator-label {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--green);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.empty-inline {
    padding: 14px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.team-profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.team-profile-item:last-child { border-bottom: 0; }

#job-prazo,
#job-horario {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1050px) {
    .team-mini-badge { max-width: 95px; }
}

.access-level-card h2 {
    margin: 12px 0 6px;
    font-size: 16px;
}
.access-level-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

/* =========================================================
   FAKESIGA v5 - Movimento, transições e relatórios
   ========================================================= */

:root {
    --ease-smooth: cubic-bezier(.22, 1, .36, 1);
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }
body {
    transition: opacity .17s ease, transform .17s ease, background-color .28s ease, color .28s ease;
}
body.pagina-saindo {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}
body.pagina-carregada .main-container,
body.pagina-carregada .calendar-shell {
    animation: pageEnter .48s var(--ease-smooth) both;
}
body.pagina-carregada header#app-header {
    animation: headerEnter .38s var(--ease-smooth) both;
}

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(13px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes headerEnter {
    from { opacity: 0; transform: translateY(-9px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes contentReveal {
    from { opacity: 0; transform: translateY(8px) scale(.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cardCascade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateX(35px); }
    to { opacity: 1; transform: translateX(0); }
}

.conteudo-atualizado {
    animation: contentReveal .34s var(--ease-smooth) both;
}

.nav-link,
.dropbtn,
.dropdown-content a,
.side-menu a,
.side-menu button,
.workflow-tab,
.filter-button,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-icon,
.icon-button,
.card,
.job-card,
.my-job-card,
.config-item,
.team-profile-item {
    transition:
        color .22s var(--ease-standard),
        background-color .22s var(--ease-standard),
        border-color .22s var(--ease-standard),
        box-shadow .26s var(--ease-standard),
        transform .26s var(--ease-smooth),
        opacity .22s ease;
}

.nav-link:hover,
.dropbtn:hover {
    transform: translateY(-1px);
}
.nav-link.active,
.dropdown.active > .dropbtn {
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--blue) 72%, transparent);
}
.nav-link svg,
.dropbtn svg,
.side-menu svg {
    transition: transform .26s var(--ease-smooth);
}
.nav-link:hover svg,
.dropbtn:hover > svg:first-child,
.side-menu a:hover svg,
.side-menu button:hover svg {
    transform: scale(1.09);
}
.dropbtn .chevron {
    transition: transform .25s var(--ease-smooth);
}
.dropdown:hover .chevron,
.dropdown:focus-within .chevron {
    transform: rotate(180deg);
}

/* O dropdown permanece renderizado para permitir animação real. */
.dropdown-content {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    transform-origin: top left;
    transition:
        opacity .2s ease,
        transform .25s var(--ease-smooth),
        visibility .2s;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.dropdown-content a:hover {
    transform: translateX(3px);
}

.workflow-tab,
.filter-button {
    position: relative;
    overflow: hidden;
}
.workflow-tab::after,
.filter-button::after {
    content: '';
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 2px;
    height: 2px;
    border-radius: 999px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform .26s var(--ease-smooth);
}
.workflow-tab:hover,
.filter-button:hover {
    transform: translateY(-1px);
    color: var(--text);
}
.workflow-tab.active,
.filter-button.active {
    transform: translateY(-1px);
}
.workflow-tab.active::after,
.filter-button.active::after {
    transform: scaleX(1);
}

.card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .075);
}
.job-card:hover,
.my-job-card:hover,
.config-item:hover,
.team-profile-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .075);
}
.job-date-group,
.my-task-card,
.activity-item,
.report-chart-card,
.report-stat {
    animation: cardCascade .38s var(--ease-smooth) both;
}
.job-date-group:nth-child(2),
.report-stat:nth-child(2) { animation-delay: .035s; }
.job-date-group:nth-child(3),
.report-stat:nth-child(3) { animation-delay: .07s; }
.job-date-group:nth-child(4),
.report-stat:nth-child(4) { animation-delay: .105s; }
.report-stat:nth-child(5) { animation-delay: .14s; }

.modal.aberto .modal-panel {
    animation: modalSlideIn .34s var(--ease-smooth) both;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.search-field input,
.tag-select {
    caret-color: var(--blue);
    transition:
        border-color .2s var(--ease-standard),
        box-shadow .24s var(--ease-standard),
        background-color .22s ease,
        color .18s ease,
        transform .2s var(--ease-smooth);
    text-rendering: optimizeLegibility;
}
.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.search-field input::placeholder {
    transition: opacity .2s ease, transform .2s var(--ease-smooth);
}
.form-control:focus::placeholder,
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder,
.search-field input:focus::placeholder {
    opacity: .55;
    transform: translateX(2px);
}
.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-field input:focus,
.tag-select:focus {
    transform: translateY(-1px);
}

/* Relatórios */
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.report-filter-card {
    margin-bottom: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, var(--surface)), var(--surface));
}
.report-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(165px, 1fr)) repeat(2, minmax(140px, .8fr)) auto;
    gap: 14px;
    align-items: end;
}
.report-filter-action {
    display: flex;
    align-items: flex-end;
}
.report-filter-action .btn-primary { width: 100%; }
.report-context {
    min-height: 26px;
    margin-top: 14px;
    padding-top: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}
.report-context svg { width: 15px; height: 15px; }
.report-summary { margin-top: 18px; }
.report-stat {
    position: relative;
    min-height: 135px;
    overflow: hidden;
}
.report-stat::before {
    content: '';
    position: absolute;
    width: 95px;
    height: 95px;
    right: -32px;
    top: -35px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.report-stat.success::before { background: color-mix(in srgb, var(--green) 10%, transparent); }
.report-stat.danger::before { background: color-mix(in srgb, var(--red) 9%, transparent); }
.report-stat.warning::before { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.report-stat.info::before { background: color-mix(in srgb, var(--purple) 9%, transparent); }
.report-stat-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue) 10%, var(--surface));
    color: var(--blue);
}
.report-stat.success .report-stat-icon { color: var(--green); background: var(--success-bg); }
.report-stat.danger .report-stat-icon { color: var(--red); background: var(--danger-bg); }
.report-stat.warning .report-stat-icon { color: var(--orange); background: var(--warning-bg); }
.report-stat.info .report-stat-icon { color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, var(--surface)); }
.report-stat-icon svg { width: 18px; height: 18px; }
.report-stat-value {
    margin-top: 12px;
    font-size: 29px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -1px;
}
.report-stat-label {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.report-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}
.report-chart-wide { grid-column: span 2; }
.report-chart-card { min-width: 0; }
.report-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.report-chart-header > svg {
    width: 20px;
    height: 20px;
    color: var(--blue);
}
.chart-wrap {
    position: relative;
    height: 290px;
    min-height: 250px;
}
.chart-wrap-wide { height: 330px; }
.chart-wrap-ranking { min-height: 320px; height: min(520px, 48vw); }
.chart-offline {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}
.chart-offline svg { width: 30px; height: 30px; }
.report-table-card { margin-top: 18px; }
.report-table-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 17px;
}
.metric-positive { color: var(--green); font-weight: 800; }
.metric-negative { color: var(--red); font-weight: 800; }
.progress-cell {
    min-width: 125px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.progress-track {
    width: 82px;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}
.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transition: width .7s var(--ease-smooth);
}
.report-footnote {
    margin: 15px 4px 0;
    color: var(--muted);
    font-size: 10px;
    text-align: right;
}

@media (max-width: 1180px) {
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .report-filter-action { align-self: end; }
}

@media (max-width: 850px) {
    .dropdown-content {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-chart-grid { grid-template-columns: 1fr; }
    .report-chart-wide { grid-column: span 1; }
    .chart-wrap-ranking { height: 430px; }
}

@media (max-width: 650px) {
    .grid-5,
    .report-filter-grid { grid-template-columns: 1fr; }
    .report-stat { min-height: 115px; }
    .chart-wrap,
    .chart-wrap-wide { height: 280px; }
    .chart-wrap-ranking { height: 420px; }
    .report-table-header { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* Supabase: carregamento inicial dos dados compartilhados */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--background) 86%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.app-loading-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 19px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text);
    font-size: 13px;
}
.app-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--blue) 20%, var(--border));
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: app-spin .75s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }


/* Campo de cor com código hexadecimal editável */
.color-picker-field {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
}

.color-picker-field input[type="color"] {
    width: 58px;
    height: 42px;
    min-height: 42px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    cursor: pointer;
}

.color-picker-field input[type="text"] {
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .4px;
}

.form-group input.input-invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent);
}


/* V12: seleção recolhível de times e responsáveis */
.selection-accordion {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}
.selection-accordion summary {
    min-height: 48px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    transition: background .18s ease, color .18s ease;
}
.selection-accordion summary::-webkit-details-marker { display: none; }
.selection-accordion summary:hover { background: var(--surface); color: var(--blue); }
.selection-accordion summary > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.selection-accordion summary svg { width: 17px; height: 17px; }
.selection-accordion[open] summary { border-bottom: 1px solid var(--border); background: var(--surface); }
.selection-accordion-body { padding: 10px; animation: accordion-enter .18s ease both; }
.selection-accordion-body .checkbox-list { border: 0; padding: 0; background: transparent; max-height: 230px; }
.selection-count { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .35px; }
@keyframes accordion-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* V12: paginação da pauta */
.pagination-bar {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pagination-pages { display: flex; align-items: center; gap: 6px; }
.pagination-button {
    min-width: 38px;
    min-height: 38px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}
.pagination-button:hover:not(:disabled), .pagination-button.active { border-color: var(--blue); color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.pagination-button.active { color: #fff; background: var(--blue); }
.pagination-button:disabled { opacity: .45; cursor: not-allowed; }
.pagination-button svg { width: 15px; height: 15px; }
.pagination-ellipsis { padding: 0 3px; color: var(--muted); }

/* V12: links administrativos do cliente */
.admin-client-links { border-left: 4px solid var(--blue); }
.admin-link-grid { display: grid; gap: 16px; }
.link-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.link-input-row .btn-secondary { white-space: nowrap; }

@media (max-width: 650px) {
    .pagination-bar { justify-content: space-between; }
    .pagination-pages { order: 3; width: 100%; justify-content: center; }
    .link-input-row { grid-template-columns: 1fr; }
    .link-input-row .btn-secondary { width: 100%; }
}


/* ============================================================
   FAKESIGA v16 — filtros, tipos de trabalho e relatórios
   ============================================================ */

.job-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.job-filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.compact-select-field {
    position: relative;
    min-width: 240px;
}

.compact-select-field svg {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.compact-select-field select {
    width: 100%;
    min-height: 40px;
    padding: 8px 36px 8px 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    outline: none;
}

.compact-select-field select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}

.work-type-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.work-type-option {
    position: relative;
    display: grid;
    grid-template-columns: 18px 12px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    cursor: pointer;
    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease;
}

.work-type-option:hover {
    border-color: color-mix(in srgb, var(--blue) 38%, var(--border));
    background: var(--surface);
    transform: translateY(-1px);
}

.work-type-option:has(input:checked) {
    border-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 8%, var(--surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 9%, transparent);
}

.work-type-option input {
    width: 17px;
    height: 17px;
    margin: 0;
}

.work-type-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.work-type-option-text {
    min-width: 0;
}

.work-type-option-text strong,
.work-type-option-text small {
    display: block;
}

.work-type-option-text strong {
    font-size: 13px;
}

.work-type-option-text small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.work-type-badge {
    --work-type-color: var(--blue);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--work-type-color);
    background: color-mix(in srgb, var(--work-type-color) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--work-type-color) 25%, transparent);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.config-subnav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    margin: 0 0 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.config-subnav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 37px;
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.config-subnav a:hover {
    color: var(--text);
    transform: translateY(-1px);
}

.config-subnav a.active {
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.config-subnav svg {
    width: 16px;
    height: 16px;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.report-filter-grid-expanded {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

@media (max-width: 1180px) {
    .grid-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-filter-grid-expanded {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 760px) {
    .job-filter-controls,
    .job-filter-controls > *,
    .compact-select-field {
        width: 100%;
        min-width: 0;
    }

    .config-subnav {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .config-subnav a {
        white-space: nowrap;
    }

    .grid-6,
    .report-filter-grid-expanded {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   FAKESIGA v16 — criação de jobs e planejamento em lote
   ============================================================ */

.static-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.batch-card + .batch-card {
    margin-top: 18px;
}

.batch-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.batch-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.batch-job-row {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--blue) 6%, transparent),
            transparent 42%
        ),
        var(--surface-soft);
    animation: fadeSlideUp .22s ease both;
}

.batch-row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.batch-row-number {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.batch-row-grid {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
    gap: 14px;
    align-items: start;
}

.batch-row-grid .span-2 {
    grid-column: span 2;
}

.batch-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .batch-row-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .batch-row-grid,
    .batch-row-grid .span-2 {
        grid-template-columns: 1fr;
        grid-column: span 1;
    }

    .batch-footer-actions {
        justify-content: stretch;
    }

    .batch-footer-actions .btn-primary,
    .batch-footer-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   FAKESIGA v16.2 — data brasileira digitável com calendário
   ============================================================ */

.date-editable {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.date-editable > input[type="text"] {
    min-width: 0;
}

.date-native-helper {
    position: absolute !important;
    right: 8px;
    bottom: 0;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.date-picker-button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.date-picker-button:hover {
    border-color: var(--blue);
    background: var(--surface);
    color: var(--blue);
}

.date-picker-button:active {
    transform: scale(.97);
}

.date-picker-button svg {
    width: 17px;
    height: 17px;
}

.input-invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 12%, transparent) !important;
}

/* FAKESIGA build 16.3 - pacote plano Cloudflare */


/* ============================================================
   FAKESIGA v16.4 — seleção visual de times e responsáveis
   ============================================================ */

body[data-pagina="planejamento"] .planning-assignment-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    margin-top: 2px;
}

body[data-pagina="planejamento"] .planning-selection-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--blue) 3.5%, transparent),
            transparent 42%
        ),
        var(--surface-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .025);
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

body[data-pagina="planejamento"] .planning-selection-panel:hover {
    border-color: color-mix(in srgb, var(--blue) 24%, var(--border));
    box-shadow: 0 8px 24px rgba(0, 0, 0, .045);
}

body[data-pagina="planejamento"] .planning-selection-panel[open] {
    background: var(--surface-soft);
}

body[data-pagina="planejamento"] .planning-selection-panel > summary {
    min-height: 72px;
    padding: 14px 15px;
    gap: 14px;
    border: 0;
    background: transparent;
    color: var(--text);
}

body[data-pagina="planejamento"] .planning-selection-panel > summary:hover {
    background: color-mix(in srgb, var(--blue) 4%, var(--surface-soft));
    color: var(--text);
}

body[data-pagina="planejamento"] .planning-selection-panel[open] > summary {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}

body[data-pagina="planejamento"] .selection-summary-main,
body[data-pagina="planejamento"] .selection-summary-actions {
    display: flex;
    align-items: center;
}

body[data-pagina="planejamento"] .selection-summary-main {
    min-width: 0;
    gap: 11px;
}

body[data-pagina="planejamento"] .selection-summary-actions {
    flex: 0 0 auto;
    gap: 9px;
}

body[data-pagina="planejamento"] .selection-summary-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
}

body[data-pagina="planejamento"] .selection-summary-icon.user-icon {
    border-color: color-mix(in srgb, var(--purple) 20%, transparent);
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
}

body[data-pagina="planejamento"] .selection-summary-icon svg {
    width: 18px;
    height: 18px;
}

body[data-pagina="planejamento"] .selection-summary-copy {
    min-width: 0;
}

body[data-pagina="planejamento"] .selection-summary-copy strong,
body[data-pagina="planejamento"] .selection-summary-copy small {
    display: block;
}

body[data-pagina="planejamento"] .selection-summary-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-pagina="planejamento"] .selection-summary-copy small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
}

body[data-pagina="planejamento"] .selection-count {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

body[data-pagina="planejamento"] .selection-chevron {
    width: 17px;
    height: 17px;
    color: var(--muted);
    transition: transform .18s ease, color .18s ease;
}

body[data-pagina="planejamento"] .planning-selection-panel[open] .selection-chevron {
    transform: rotate(180deg);
    color: var(--blue);
}

body[data-pagina="planejamento"] .planning-selection-body {
    padding: 12px;
}

body[data-pagina="planejamento"] .planning-selection-panel .checkbox-list {
    width: 100%;
    max-height: 310px;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--muted) 38%, transparent) transparent;
}

body[data-pagina="planejamento"] .planning-selection-panel .checkbox-list::-webkit-scrollbar {
    width: 7px;
}

body[data-pagina="planejamento"] .planning-selection-panel .checkbox-list::-webkit-scrollbar-track {
    background: transparent;
}

body[data-pagina="planejamento"] .planning-selection-panel .checkbox-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 34%, transparent);
}

body[data-pagina="planejamento"] .planning-option {
    position: relative;
    min-width: 0;
    min-height: 62px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

body[data-pagina="planejamento"] .planning-option:hover {
    border-color: color-mix(in srgb, var(--blue) 36%, var(--border));
    background: color-mix(in srgb, var(--blue) 3.5%, var(--surface));
    transform: translateY(-1px);
}

body[data-pagina="planejamento"] .planning-option:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--blue) 18%, transparent);
    outline-offset: 1px;
}

body[data-pagina="planejamento"] .planning-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--blue) 68%, var(--border));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--blue) 10%, transparent),
            color-mix(in srgb, var(--blue) 3%, transparent)
        ),
        var(--surface);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 9%, transparent);
}

body[data-pagina="planejamento"] .planning-option input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0 !important;
    opacity: 0;
    white-space: nowrap;
}

body[data-pagina="planejamento"] .planning-option-leading {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .2px;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

body[data-pagina="planejamento"] .planning-team-avatar svg {
    width: 17px;
    height: 17px;
}

body[data-pagina="planejamento"] .planning-option:has(input:checked) .planning-option-leading {
    border-color: color-mix(in srgb, var(--blue) 30%, transparent);
    background: color-mix(in srgb, var(--blue) 13%, transparent);
    color: var(--blue);
}

body[data-pagina="planejamento"] .planning-user-option:has(input:checked) .planning-option-leading {
    border-color: color-mix(in srgb, var(--purple) 30%, transparent);
    background: color-mix(in srgb, var(--purple) 12%, transparent);
    color: var(--purple);
}

body[data-pagina="planejamento"] .planning-option-copy {
    min-width: 0;
}

body[data-pagina="planejamento"] .planning-option-copy strong,
body[data-pagina="planejamento"] .planning-option-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-pagina="planejamento"] .planning-option-copy strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
}

body[data-pagina="planejamento"] .planning-option-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 650;
}

body[data-pagina="planejamento"] .planning-option-check {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--muted) 38%, transparent);
    border-radius: 7px;
    background: var(--surface-soft);
    color: transparent;
    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

body[data-pagina="planejamento"] .planning-option-check svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

body[data-pagina="planejamento"] .planning-option:has(input:checked) .planning-option-check {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
    transform: scale(1.03);
}

body[data-pagina="planejamento"] .planning-selection-note {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue) 6%, transparent);
    color: var(--muted);
    font-size: 9.5px;
    line-height: 1.4;
}

body[data-pagina="planejamento"] .planning-selection-note svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin-top: 1px;
    color: var(--blue);
}

body[data-pagina="planejamento"] .planning-selection-empty {
    grid-column: 1 / -1;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    font-size: 11px;
}

body[data-pagina="planejamento"] .planning-selection-empty svg {
    width: 20px;
    height: 20px;
    opacity: .72;
}

@media (max-width: 1050px) {
    body[data-pagina="planejamento"] .planning-assignment-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    body[data-pagina="planejamento"] .planning-selection-panel .checkbox-list {
        grid-template-columns: 1fr;
    }

    body[data-pagina="planejamento"] .planning-selection-panel > summary {
        align-items: flex-start;
    }

    body[data-pagina="planejamento"] .selection-summary-copy small {
        display: none;
    }

    body[data-pagina="planejamento"] .selection-count {
        display: none;
    }
}


/* ============================================================
   FAKESIGA v16.5 — status por data e horário
   ============================================================ */

/* O atraso continua com fundo amarelo e tipografia vermelha. */
.job-card.atrasado {
    background: var(--overdue-bg);
    color: var(--overdue-text);
    border-color: var(--overdue-border);
    border-left-color: var(--red) !important;
}

/* Job com prazo para hoje, mas cujo horário ainda não passou. */
.job-card.vence-hoje {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--blue) 9%, transparent),
            transparent 55%
        ),
        var(--surface);
    border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--blue) 8%, transparent),
        0 1px 5px rgba(0, 0, 0, .025);
}

.job-card.vence-hoje .job-time {
    color: var(--blue);
}

.due-today-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
}

.due-today-badge svg {
    width: 12px;
    height: 12px;
}

.deadline-row.is-due-today {
    margin: 6px -8px;
    padding: 12px 8px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
    box-shadow: inset 3px 0 0 var(--blue);
}

.deadline-row.is-due-today .activity-meta {
    color: var(--muted);
}


/* ============================================================
   FAKESIGA v16.6 — ponto e central de aprovações
   ============================================================ */

.nav-count-badge {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
}

.button-spinner {
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin .7s linear infinite;
}

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

.point-approval-summary {
    margin-bottom: 18px;
}

.point-approval-filter-card {
    margin-bottom: 18px;
}

.point-approval-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, .75fr));
    gap: 12px;
    align-items: end;
}

.point-approval-filters .search-field {
    width: 100%;
    align-self: end;
}

.compact-filter label {
    margin-bottom: 5px;
}

.point-approval-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.point-approval-card {
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.point-approval-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--orange);
}

.point-approval-card.aprovada::before { background: var(--green); }
.point-approval-card.rejeitada::before { background: var(--red); }

.point-approval-person {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.point-approval-person h2 {
    margin: 0;
    font-size: 15px;
}

.point-approval-person-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.point-approval-change-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
}

.point-change-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
}

.point-change-box.requested {
    border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
    background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.point-change-box span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.point-change-box strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.point-change-box small {
    color: var(--muted);
    font-size: 11px;
}

.point-change-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
}

.point-change-arrow svg {
    width: 18px;
    height: 18px;
}

.point-approval-reason {
    margin-top: 14px;
    padding: 13px 14px;
    border-radius: 11px;
    background: var(--surface-soft);
}

.point-approval-reason span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.point-approval-reason p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.point-admin-note {
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
}

.point-approval-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.point-review-summary {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-soft);
}

.point-review-summary span {
    color: var(--muted);
    font-size: 11px;
}

.point-approval-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.point-approval-empty strong {
    color: var(--text);
}

.point-approval-empty span {
    font-size: 11px;
}

@media (max-width: 1050px) {
    .point-approval-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .point-approval-filters,
    .point-approval-change-grid {
        grid-template-columns: 1fr;
    }

    .point-change-arrow {
        transform: rotate(90deg);
        min-height: 24px;
    }

    .point-approval-person {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .point-approval-person > .badge {
        grid-column: 1 / -1;
        width: max-content;
    }

    .point-approval-actions {
        flex-direction: column-reverse;
    }

    .point-approval-actions > * {
        width: 100%;
        justify-content: center;
    }
}


/* FAKESIGA 16.6.1 — escopo de aprovação por liderança */
.point-approval-scope {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 15px 17px;
    border-left: 4px solid var(--blue);
    background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
.point-approval-scope > svg {
    width: 20px;
    height: 20px;
    color: var(--blue);
    flex: 0 0 auto;
}
.point-approval-scope strong,
.point-approval-scope span { display: block; }
.point-approval-scope strong { font-size: 13px; }
.point-approval-scope span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

/* ============================================================
   FAKESIGA v17 - Roteiros de execução e trajetória dos jobs
   ============================================================ */

.job-route-code {
    color: var(--blue);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.job-route-summary {
    display: grid;
    gap: 26px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
    margin-bottom: 24px;
}

.job-route-meta {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.job-route-meta-item {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
}

.job-route-meta-item > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.job-route-meta-item strong {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.job-route-progress-area {
    align-self: center;
}

.job-route-progress-header {
    align-items: flex-end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.job-route-progress-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-route-progress-header span:not(.job-route-progress-value) {
    color: var(--muted);
    font-size: .85rem;
}

.job-route-progress-value {
    color: var(--blue);
    font-size: 1.45rem;
    font-weight: 800;
}

.progress-track {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, var(--blue), #34c759);
    border-radius: inherit;
    height: 100%;
    transition: width .28s ease;
}

.job-route-stats {
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .82rem;
    gap: 14px;
    margin-top: 12px;
}

.job-route-stats strong {
    color: var(--text);
}

.stat-danger,
.stat-danger strong,
.text-danger {
    color: var(--red) !important;
}

.checklist-board {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(245px, 1fr));
    overflow-x: auto;
    padding-bottom: 12px;
}

.checklist-column {
    background: color-mix(in srgb, var(--surface-soft) 74%, transparent);
    border: 1px solid var(--border);
    border-radius: 18px;
    min-height: 420px;
    min-width: 245px;
    overflow: hidden;
}

.checklist-column-a_fazer { border-top: 4px solid #8e8e93; }
.checklist-column-em_execucao { border-top: 4px solid #0071e3; }
.checklist-column-aguardando { border-top: 4px solid #ff9500; }
.checklist-column-concluido { border-top: 4px solid #34c759; }

.checklist-column-header {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
}

.checklist-column-header > div {
    align-items: center;
    display: flex;
    gap: 8px;
}

.checklist-column-header svg {
    height: 18px;
    width: 18px;
}

.checklist-column-header > span {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    height: 26px;
    justify-content: center;
    min-width: 26px;
    padding: 0 8px;
}

.checklist-column-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 350px;
    padding: 12px;
}

.checklist-column-empty {
    align-items: center;
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--muted);
    display: flex;
    font-size: .84rem;
    justify-content: center;
    min-height: 92px;
    padding: 18px;
    text-align: center;
}

.checklist-item-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-small);
    cursor: default;
    padding: 14px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.checklist-item-card[draggable="true"] {
    cursor: grab;
}

.checklist-item-card[draggable="true"]:active {
    cursor: grabbing;
}

.checklist-item-card:hover {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--border));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.checklist-item-overdue {
    border-color: color-mix(in srgb, var(--red) 48%, var(--border));
}

.checklist-item-topline {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 9px;
}

.checklist-item-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.checklist-required-badge {
    background: color-mix(in srgb, var(--blue) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
    border-radius: 999px;
    color: var(--blue);
    font-size: .66rem;
    font-weight: 800;
    padding: 4px 7px;
    text-transform: uppercase;
}

.checklist-item-actions {
    display: flex;
    gap: 3px;
}

.btn-icon.compact {
    height: 29px;
    min-height: 29px;
    width: 29px;
}

.checklist-item-card h3 {
    font-size: .96rem;
    line-height: 1.35;
    margin: 0 0 7px;
}

.checklist-item-card p {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.45;
    margin: 0 0 11px;
    white-space: pre-line;
}

.checklist-item-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 12px;
}

.checklist-item-meta span {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: .76rem;
    gap: 6px;
}

.checklist-item-meta svg {
    height: 14px;
    width: 14px;
}

.checklist-item-status-control {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    padding-top: 11px;
}

.checklist-item-status-control select {
    font-size: .78rem;
    min-height: 34px;
    padding: 6px 30px 6px 9px;
}

.drag-hint {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: .68rem;
    gap: 2px;
}

.drag-hint svg {
    height: 14px;
    width: 14px;
}

.checklist-required-field {
    align-self: end;
}

/* Modelos de checklist */
.model-checklist-editor {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(260px, .7fr) minmax(0, 1.7fr);
}

.model-checklist-sidebar {
    position: sticky;
    top: 92px;
}

.model-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.model-item-row {
    align-items: start;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 15px;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(180px, 1fr) minmax(180px, 1.2fr) 120px 125px 78px;
    padding: 12px;
}

.model-item-order {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    font-size: .78rem;
    font-weight: 800;
    height: 34px;
    justify-content: center;
}

.model-item-row input,
.model-item-row textarea,
.model-item-row select {
    font-size: .82rem;
    min-height: 36px;
}

.model-item-row textarea {
    min-height: 66px;
}

.model-item-actions {
    display: flex;
    gap: 4px;
}

/* Trajetória do job */
.job-trajectory-card {
    margin-top: 24px;
}

.job-trajectory-controls {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1fr) auto;
    margin: 18px 0;
}

.trajectory-chart-wrap {
    height: 390px;
    position: relative;
}

.trajectory-events {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-top: 18px;
}

.trajectory-event {
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-left: 4px solid var(--event-color, var(--blue));
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 14px;
}

.trajectory-event-index {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.trajectory-event strong {
    font-size: .9rem;
}

.trajectory-event span,
.trajectory-event small {
    color: var(--muted);
    font-size: .76rem;
}

.trajectory-empty {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    min-height: 250px;
    text-align: center;
}

.trajectory-empty svg {
    height: 34px;
    width: 34px;
}

@media (max-width: 1180px) {
    .checklist-board {
        grid-template-columns: repeat(4, minmax(280px, 1fr));
    }

    .model-item-row {
        grid-template-columns: 34px minmax(180px, 1fr) minmax(180px, 1fr);
    }

    .model-item-row > :nth-child(n+4) {
        grid-column: auto;
    }
}

@media (max-width: 820px) {
    .job-route-summary,
    .model-checklist-editor {
        grid-template-columns: 1fr;
    }

    .model-checklist-sidebar {
        position: static;
    }

    .job-route-meta {
        grid-template-columns: 1fr 1fr;
    }

    .checklist-board {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .checklist-column {
        min-height: 0;
        min-width: 0;
        width: 100%;
    }

    .checklist-column-body {
        min-height: 100px;
    }

    .job-trajectory-controls {
        grid-template-columns: 1fr;
    }

    .trajectory-chart-wrap {
        height: 330px;
    }
}

@media (max-width: 560px) {
    .job-route-meta {
        grid-template-columns: 1fr;
    }

    .model-item-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .model-item-row > :not(.model-item-order) {
        grid-column: 2;
    }

    .trajectory-events {
        grid-template-columns: 1fr;
    }
}

.job-checklist-inline {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .72rem;
    gap: 5px;
    margin-top: 5px;
}

.job-checklist-inline svg {
    height: 14px;
    width: 14px;
}

.job-checklist-inline small {
    color: var(--muted);
    font-size: .66rem;
}

/* ============================================================
   FAKESIGA 17.2 — Banco de horas
   ============================================================ */
.point-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
    gap: 18px;
    margin-bottom: 18px;
}
.point-profile-grid > .card { margin: 0; }
.hour-balance-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 26px;
}
.hour-balance-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.hour-balance-heading h2 { margin: 5px 0 0; font-size: 20px; }
.hour-balance-heading > svg { width: 30px; height: 30px; color: var(--blue); }
.hour-balance-value {
    margin-top: 20px;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -1.5px;
    font-variant-numeric: tabular-nums;
}
.hour-balance-period { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.hour-balance-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 22px;
}
.hour-balance-metrics > div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}
.hour-balance-metrics span { display: block; color: var(--muted); font-size: 10px; }
.hour-balance-metrics strong { display: block; margin-top: 4px; font-size: 14px; }
.hour-balance-note { margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.balance-positive { color: var(--green) !important; }
.balance-negative { color: var(--red) !important; }
.balance-neutral { color: var(--muted) !important; }
.hours-summary-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.balance-summary-item { border-width: 2px; }
.point-history-controls .calendar-header { margin-bottom: 0; }
.point-history-control-actions { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.point-user-selector { min-width: 270px; margin: 0; }
.point-user-selector label { font-size: 10px; }
.point-selected-person {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 15px 18px;
}
.point-selected-person > div:nth-child(2) { min-width: 0; flex: 1; }
.point-selected-person strong { display: block; font-size: 15px; }
.point-selected-person span:not(.badge) { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.point-person-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--blue);
    font-weight: 850;
    border: 1px solid var(--border);
}
.point-team-overview { margin-top: 18px; }
.point-team-overview .section-title { margin-bottom: 4px; }
.point-team-overview tr.selected-row td { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.section-header-inline { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 15px; }

@media (max-width: 1050px) {
    .hours-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .point-profile-grid { grid-template-columns: 1fr; }
    .hours-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .point-history-controls .calendar-header { align-items: stretch; flex-direction: column; }
    .point-history-control-actions { width: 100%; }
    .point-user-selector { min-width: 0; flex: 1; }
}

@media (max-width: 520px) {
    .hours-summary-grid,
    .hour-balance-metrics { grid-template-columns: 1fr; }
    .point-history-control-actions { align-items: stretch; flex-direction: column; }
    .point-selected-person { align-items: flex-start; }
}
.point-balance-explanation {
    margin: 9px 2px 0;
    color: var(--muted);
    font-size: 10px;
    text-align: right;
}

/* ============================================================
   FAKESIGA 17.4.2 — Aprovação de ponto em massa
   ============================================================ */
.clock-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 30px 26px;
}
.clock-card > * { max-width: 100%; }
.clock-card .clock-label,
.clock-card #proximo-registro,
.live-clock { width: 100%; text-align: center; }
.live-clock {
    margin: 3px auto 1px;
    line-height: 1.05;
}
.clock-card #proximo-registro { min-height: 18px; }
.clock-actions { width: 100%; margin-top: 13px; }

.point-calendar-card { margin-top: 18px; padding: 18px; }
.point-calendar-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 10px;
}
.point-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.point-calendar-legend svg { width: 13px; height: 13px; }
.point-calendar-scroll { overflow-x: auto; padding-bottom: 4px; }
.point-calendar-grid {
    min-width: 930px;
    display: grid;
    grid-template-columns: repeat(7, minmax(128px, 1fr));
    gap: 7px;
}
.point-calendar-weekday {
    padding: 8px;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .35px;
}
.point-calendar-day {
    min-height: 166px;
    display: flex;
    flex-direction: column;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.point-calendar-day.weekend { background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface)); }
.point-calendar-day.today {
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 2px color-mix(in srgb, var(--blue) 10%, transparent);
}
.point-calendar-day.empty {
    min-height: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.point-calendar-day-header,
.point-calendar-day-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}
.point-calendar-number {
    width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}
.point-calendar-day.today .point-calendar-number { background: var(--blue); color: #fff; }
.point-calendar-holiday { display: inline-flex; color: var(--purple); }
.point-calendar-holiday svg { width: 14px; height: 14px; }
.point-calendar-records {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0;
}
.point-calendar-record {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px 40px auto auto minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 4px 5px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-soft);
    font-size: 9px;
}
.point-calendar-record.has-pending { border-color: color-mix(in srgb, var(--orange) 45%, var(--border)); }
.point-calendar-type {
    width: 22px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border-radius: 5px;
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue);
    font-size: 8px;
    font-weight: 900;
}
.point-calendar-record strong {
    color: var(--text);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.point-change-indicator { display: inline-flex; align-items: center; color: var(--muted); }
.point-change-indicator svg { width: 11px; height: 11px; }
.point-change-indicator.pendente { color: var(--orange); }
.point-change-indicator.aprovada { color: var(--green); }
.point-change-indicator.rejeitada { color: var(--red); }
.point-calendar-actions {
    min-width: 0;
    display: inline-flex;
    justify-content: flex-end;
    gap: 2px;
}
.point-calendar-actions button,
.point-calendar-add {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.point-calendar-actions button:hover:not(:disabled),
.point-calendar-add:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }
.point-calendar-actions button:last-child:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }
.point-calendar-actions button:disabled { opacity: .35; cursor: not-allowed; }
.point-calendar-actions svg,
.point-calendar-add svg { width: 13px; height: 13px; }
.point-calendar-day-footer {
    min-height: 25px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 850;
}
.point-calendar-add {
    border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--border));
    color: var(--blue);
}
.point-calendar-pending {
    display: grid;
    grid-template-columns: 14px 1fr 14px;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border: 1px dashed color-mix(in srgb, var(--orange) 55%, var(--border));
    border-radius: 7px;
    background: color-mix(in srgb, var(--orange) 6%, var(--surface));
    color: var(--orange);
    font-size: 9px;
    font-weight: 800;
}
.point-calendar-pending svg { width: 12px; height: 12px; }

.point-approval-change-grid.single { grid-template-columns: minmax(0, 1fr); }
.point-change-box.danger {
    border-color: color-mix(in srgb, var(--red) 30%, var(--border));
    background: color-mix(in srgb, var(--red) 5%, var(--surface-soft));
}
.point-operation-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 9px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 850;
}
.point-operation-title svg { width: 15px; height: 15px; }

@media (max-width: 820px) {
    .clock-card { min-height: 280px; }
    .point-calendar-grid { min-width: 790px; grid-template-columns: repeat(7, minmax(106px, 1fr)); }
    .point-calendar-day { min-height: 154px; }
    .point-calendar-card { padding: 13px; }
}


/* ============================================================
   FAKESIGA v17.6 — visualização elegante de jobs e calendário
   ============================================================ */
.job-card-clickable {
    position: relative;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.job-card-clickable:hover,
.job-card-clickable:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--shadow-medium);
    outline: none;
}
.job-card-clickable .job-actions,
.job-card-clickable .tag-select,
.job-card-clickable button,
.job-card-clickable a {
    position: relative;
    z-index: 2;
}

.job-detail-modal {
    background: rgba(15, 23, 42, .38);
}
.job-detail-modal.aberto {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}
.job-detail-modal .job-detail-panel {
    width: min(760px, 100%);
    height: 100%;
    margin-left: auto;
    padding: 0;
    overflow: hidden;
    border-left: 1px solid var(--border);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 10%, transparent), transparent 34%),
        var(--surface);
    box-shadow: -20px 0 60px rgba(0,0,0,.18);
}
.job-detail-modal .job-detail-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.job-detail-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .9px;
}
.job-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.job-detail-modal #conteudo-modal-job-detalhes {
    height: calc(100% - 79px);
    overflow-y: auto;
    padding: 24px;
}
.job-detail-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--job-detail-color, var(--blue));
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}
.job-detail-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
    font-size: 11px;
    font-weight: 850;
}
.job-detail-hero-card h3 {
    margin: 0;
    font-size: clamp(22px, 3.5vw, 34px);
    line-height: 1.08;
    letter-spacing: -1.2px;
}
.job-detail-hero-card p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 13px;
}
.job-detail-status-stack {
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.job-detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
}
.job-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.job-detail-item {
    min-height: 84px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
}
.job-detail-item span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.job-detail-item strong {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.35;
}
.job-detail-section {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
}
.job-detail-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 850;
}
.job-detail-section-title svg { width: 16px; height: 16px; color: var(--blue); }
.job-detail-vinculos {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.job-detail-notes {
    margin: 0;
    padding: 14px;
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.job-detail-empty {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.jobs-calendar-page { width: min(1560px, calc(100% - 32px)); }
.jobs-calendar-toolbar { margin-bottom: 18px; }
.jobs-calendar-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.jobs-calendar-title {
    min-width: 240px;
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 850;
    text-transform: capitalize;
}
.jobs-calendar-today { margin-left: 6px; }
.jobs-calendar-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.jobs-calendar-filters .search-field { flex: 1 1 300px; max-width: 460px; }
.jobs-calendar-filters .compact-select-field { flex: 0 1 250px; }
.jobs-calendar-toolbar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.jobs-calendar-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 10px; font-weight: 750; }
.jobs-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-ring.overdue { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--red); }
.legend-date.today { width: 16px; height: 12px; border-radius: 4px; border: 2px solid var(--blue); }
.jobs-calendar-card { padding: 0; overflow: hidden; }
.jobs-calendar-scroll { overflow-x: auto; }
.jobs-calendar-weekdays,
.jobs-calendar-grid {
    min-width: 960px;
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
}
.jobs-calendar-weekdays {
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}
.jobs-calendar-weekdays > div {
    padding: 12px 10px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    text-align: center;
}
.jobs-calendar-day {
    min-height: 160px;
    padding: 9px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    transition: background .16s ease;
}
.jobs-calendar-day:nth-child(7n) { border-right: 0; }
.jobs-calendar-day:nth-last-child(-n + 7) { border-bottom: 0; }
.jobs-calendar-day:hover,
.jobs-calendar-day:focus-within { background: color-mix(in srgb, var(--blue) 4%, var(--surface)); }
.jobs-calendar-day.outside-month { background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface)); }
.jobs-calendar-day.outside-month .jobs-calendar-day-number,
.jobs-calendar-day.outside-month .jobs-calendar-job { opacity: .58; }
.jobs-calendar-day.today { box-shadow: inset 0 0 0 2px var(--blue); }
.jobs-calendar-day-header { min-height: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.jobs-calendar-day-number { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
.jobs-calendar-day.today .jobs-calendar-day-number > span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
}
.jobs-calendar-day-number small { color: var(--blue); font-size: 9px; text-transform: uppercase; }
.jobs-calendar-day-jobs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.jobs-calendar-job {
    width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    padding: 7px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--calendar-job-color, var(--blue));
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.jobs-calendar-job:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--calendar-job-color) 45%, var(--border)); background: var(--surface); }
.jobs-calendar-job-time { color: var(--muted); font-size: 9px; font-weight: 850; font-variant-numeric: tabular-nums; }
.jobs-calendar-job-content { min-width: 0; display: block; }
.jobs-calendar-job-content strong,
.jobs-calendar-job-content small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs-calendar-job-content strong { font-size: 10px; line-height: 1.25; }
.jobs-calendar-job-content small { margin-top: 1px; color: var(--muted); font-size: 8px; }
.jobs-calendar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--calendar-job-color, var(--blue)); }
.jobs-calendar-job.is-overdue { background: var(--overdue-bg); border-color: var(--overdue-border); color: var(--overdue-text); }
.jobs-calendar-job.is-overdue .jobs-calendar-job-time,
.jobs-calendar-job.is-overdue .jobs-calendar-job-content small { color: var(--overdue-text); }
.jobs-calendar-job.is-due-today:not(.is-overdue) { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.jobs-calendar-job.is-completed { opacity: .7; }
.jobs-calendar-job.is-completed strong { text-decoration: line-through; }
.jobs-calendar-day-count { margin-top: 5px; color: var(--muted); font-size: 8px; text-align: right; }

@media (max-width: 900px) {
    .job-detail-hero-card { grid-template-columns: 1fr; }
    .job-detail-status-stack { align-items: flex-start; min-width: 0; }
    .job-detail-grid { grid-template-columns: 1fr 1fr; }
    .jobs-calendar-page { width: min(100% - 18px, 1560px); }
    .jobs-calendar-toolbar { padding: 16px; }
    .jobs-calendar-navigation { flex-wrap: wrap; }
    .jobs-calendar-title { order: -1; width: 100%; min-width: 0; text-align: left; }
    .jobs-calendar-filters > * { flex: 1 1 100% !important; max-width: none !important; }
    .jobs-calendar-toolbar-footer { align-items: flex-start; flex-direction: column; }
    .jobs-calendar-day { min-height: 150px; }
}
@media (max-width: 640px) {
    .job-detail-modal .job-detail-panel { width: 100%; }
    .job-detail-modal .job-detail-header { padding: 16px; }
    .job-detail-modal #conteudo-modal-job-detalhes { padding: 16px; height: calc(100% - 72px); }
    .job-detail-grid { grid-template-columns: 1fr; }
    .job-detail-hero-card { padding: 18px; }
    .job-detail-hero-card h3 { font-size: 22px; }
}

/* ============================================================
   FAKESIGA v17.6 — detalhe central, referência de mídia e aviso de atualização
   ============================================================ */
.job-detail-modal.aberto,
.job-detail-modal.fechando {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(15, 23, 42, .48);
}
.job-detail-modal .job-detail-panel {
    width: min(980px, calc(100vw - 56px));
    height: auto;
    max-height: min(88vh, 860px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 12%, transparent), transparent 34%),
        radial-gradient(circle at bottom left, color-mix(in srgb, #7c3aed 8%, transparent), transparent 28%),
        var(--surface);
    box-shadow: 0 26px 90px rgba(0,0,0,.28);
    transform-origin: center;
}
.job-detail-modal.aberto .job-detail-panel {
    animation: jobDetailCenterIn .34s var(--ease-smooth) both;
}
.job-detail-modal.fechando .job-detail-panel {
    animation: jobDetailCenterOut .23s ease both;
}
.job-detail-modal.fechando {
    animation: jobDetailBackdropOut .23s ease both;
}
.job-detail-modal .job-detail-header {
    border-bottom: 1px solid var(--border);
}
.job-detail-modal #conteudo-modal-job-detalhes {
    height: auto;
    max-height: calc(min(88vh, 860px) - 79px);
    overflow-y: auto;
    padding: 24px;
}
@keyframes jobDetailCenterIn {
    from { opacity: 0; transform: translateY(24px) scale(.965); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes jobDetailCenterOut {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateY(18px) scale(.975); filter: blur(5px); }
}
@keyframes jobDetailBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.job-reference-section { overflow: hidden; }
.job-reference-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.job-reference-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.job-reference-actions .btn-primary,
.job-reference-actions .btn-secondary { min-height: 36px; }
.job-reference-preview {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, var(--surface-soft)), var(--surface-soft));
}
.job-reference-preview img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
}
.job-reference-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 170px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.job-reference-preview.is-broken .job-reference-fallback { display: flex; }
.job-reference-placeholder {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--blue) 35%, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--blue) 5%, var(--surface-soft));
}
.job-reference-placeholder > svg {
    width: 28px;
    height: 28px;
    color: var(--blue);
    flex: 0 0 auto;
}
.job-reference-placeholder strong,
.job-reference-placeholder span { display: block; }
.job-reference-placeholder strong { font-size: 13px; }
.job-reference-placeholder span { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.job-reference-url {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 11px;
    word-break: break-all;
}

.update-notice-modal.aberto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, .45);
}
.update-notice-panel {
    position: relative;
    width: min(620px, calc(100vw - 44px));
    height: auto;
    max-height: calc(100vh - 44px);
    margin: 0;
    padding: 32px;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--border));
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--blue) 13%, transparent), transparent 38%),
        var(--surface);
    box-shadow: 0 26px 80px rgba(0,0,0,.24);
    animation: updateNoticeIn .36s var(--ease-smooth) both !important;
}
.update-notice-close {
    position: absolute;
    top: 16px;
    right: 16px;
}
.update-notice-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--blue);
    background: color-mix(in srgb, var(--blue) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
    font-size: 11px;
    font-weight: 850;
}
.update-notice-subtitle {
    margin: 8px 0 18px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}
.update-notice-list {
    display: grid;
    gap: 10px;
}
.update-notice-list > div {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-soft);
    font-size: 13px;
    line-height: 1.42;
}
.update-notice-list svg { width: 18px; height: 18px; color: var(--green); }
.update-notice-footer { margin-top: 20px; }
@keyframes updateNoticeIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .job-detail-modal.aberto,
    .job-detail-modal.fechando { padding: 10px; align-items: stretch; }
    .job-detail-modal .job-detail-panel {
        width: 100%;
        max-height: none;
        height: 100%;
        border-radius: 22px;
    }
    .job-detail-modal #conteudo-modal-job-detalhes {
        max-height: calc(100vh - 82px);
        padding: 16px;
    }
    .job-reference-header { flex-direction: column; }
    .job-reference-actions { width: 100%; justify-content: stretch; }
    .job-reference-actions .btn-primary,
    .job-reference-actions .btn-secondary { flex: 1 1 auto; justify-content: center; }
    .job-reference-preview { min-height: 190px; }
    .update-notice-panel { padding: 26px 20px 20px; border-radius: 22px; }
}

/* FAKESIGA 17.7 - Identidade visual e backup Drive */
.app-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.brand-logo-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}
.brand-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--accent-color, #2563eb), var(--secondary-color, #14b8a6));
    box-shadow: 0 10px 24px rgba(37, 99, 235, .24);
}
.brand-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}
.identity-preview {
    border-radius: 28px;
    padding: 28px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--secondary-color, #14b8a6) 28%, transparent), transparent 38%),
        linear-gradient(135deg, color-mix(in srgb, var(--accent-color, #2563eb) 90%, #111827), color-mix(in srgb, var(--secondary-color, #14b8a6) 72%, #111827));
    color: #fff;
    box-shadow: 0 22px 50px rgba(15, 23, 42, .18);
}
.identity-preview-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.identity-preview-brand img,
.identity-preview-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    object-fit: contain;
    background: rgba(255,255,255,.95);
    padding: 6px;
}
.identity-preview-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}
.identity-preview-subtitle {
    color: rgba(255,255,255,.78);
    margin-top: 6px;
}
.identity-preview-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.identity-preview-strip span {
    display: block;
    border-radius: 16px;
    min-height: 62px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.2);
}
.drive-status-grid,
.backup-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.drive-status-card,
.backup-stat-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    padding: 16px;
    background: color-mix(in srgb, var(--card-bg, #fff) 94%, var(--accent-color, #2563eb));
}
.drive-status-card strong,
.backup-stat-card strong {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.drive-status-card span,
.backup-stat-card span {
    display: block;
    color: var(--muted-color, #64748b);
    font-size: .88rem;
}
.backup-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.backup-action-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 24px;
    padding: 18px;
    background: var(--card-bg, #fff);
}
.backup-action-card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}
.backup-action-card p {
    color: var(--muted-color, #64748b);
    margin: 0 0 14px;
    line-height: 1.45;
}
.backup-log-list {
    display: grid;
    gap: 10px;
}
.backup-log-item {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    padding: 12px 14px;
    background: var(--card-bg, #fff);
}
.backup-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 700;
    background: #e0f2fe;
    color: #0369a1;
}
.backup-status-pill.erro { background: #fee2e2; color: #b91c1c; }
.backup-status-pill.concluido { background: #dcfce7; color: #166534; }
.archive-search-results {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.archive-result-item {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    padding: 14px;
    background: var(--card-bg, #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.archive-result-item small {
    color: var(--muted-color, #64748b);
}
@media (max-width: 900px) {
    .settings-hero,
    .backup-actions-grid,
    .drive-status-grid,
    .backup-stat-grid {
        grid-template-columns: 1fr;
    }
    .backup-log-item,
    .archive-result-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* FAKESIGA 17.8.1 - Drive Workspace e Observações Evolutivas */
.job-detail-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 16px;
    padding: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--surface-soft, rgba(15, 23, 42, 0.03));
}

.job-detail-tab {
    border: 0;
    background: transparent;
    color: var(--muted-color, #64748b);
    border-radius: 12px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.job-detail-tab svg { width: 16px; height: 16px; }

.job-detail-tab:hover {
    background: rgba(37, 99, 235, .08);
    color: var(--primary-color, #2563eb);
}

.job-detail-tab.active {
    background: var(--primary-color, #2563eb);
    color: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .18);
}

.job-detail-tab-panel { display: none; }
.job-detail-tab-panel.active {
    display: block;
    animation: jobDetailPanelIn .18s ease both;
}

@keyframes jobDetailPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.job-drive-header,
.job-file-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.job-file-upload-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.compact-input {
    min-height: 40px;
    border: 1px solid var(--border-color, #dbe3ef);
    border-radius: 12px;
    padding: 0 12px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
}

.job-files-list,
.job-observation-list,
.job-history-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.job-file-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--card-bg, #fff);
}

.job-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, .08);
}

.job-file-row strong,
.job-observation-item strong { display: block; }
.job-file-row span,
.job-observation-item span {
    display: block;
    color: var(--muted-color, #64748b);
    font-size: .88rem;
    margin-top: 3px;
}

.job-file-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.job-file-empty {
    border: 1px dashed var(--border-color, #cbd5e1);
    border-radius: 18px;
    padding: 26px;
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
    color: var(--muted-color, #64748b);
    background: rgba(148, 163, 184, .06);
}

.job-file-empty svg { width: 34px; height: 34px; color: var(--primary-color, #2563eb); }

.job-observation-item {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--card-bg, #fff);
}

.job-observation-item.done {
    opacity: .68;
    background: rgba(34, 197, 94, .06);
}

.job-observation-item.done p {
    text-decoration: line-through;
}

.job-observation-check {
    border: 0;
    background: transparent;
    color: var(--primary-color, #2563eb);
    cursor: pointer;
    padding: 4px;
}

.job-observation-check svg { width: 22px; height: 22px; }
.job-observation-item p { margin: 4px 0 0; white-space: pre-wrap; }
.job-observation-form textarea { min-height: 92px; }

.job-history-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e5e7eb);
}

@media (max-width: 760px) {
    .job-file-row,
    .job-observation-item {
        grid-template-columns: 1fr;
    }
    .job-file-actions {
        justify-content: flex-start;
    }
}

/* ============================================================
   FAKESIGA v17.9 — visualização completa do job, Drive evidente e indicadores vivos
   ============================================================ */
.job-detail-primary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 0;
}
.job-detail-primary-actions .btn-primary,
.job-detail-primary-actions .btn-secondary { min-height: 38px; }

.job-detail-live-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.job-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: color-mix(in srgb, var(--surface-soft, #f8fafc) 76%, #fff);
    color: var(--muted-color, #64748b);
    font-size: 11px;
    font-weight: 800;
}
.job-live-chip svg { width: 14px; height: 14px; }
.job-live-chip.ok { color: #166534; border-color: rgba(22, 101, 52, .18); background: rgba(34, 197, 94, .10); }
.job-live-chip.warn { color: #92400e; border-color: rgba(146, 64, 14, .20); background: rgba(245, 158, 11, .11); }
.job-live-chip.danger { color: #991b1b; border-color: rgba(153, 27, 27, .18); background: rgba(239, 68, 68, .10); }
.job-live-chip.live { color: var(--primary-color, #2563eb); border-color: rgba(37, 99, 235, .18); background: rgba(37, 99, 235, .08); }
.job-live-chip.live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: livePulse 1.7s ease-out infinite;
}
.job-live-chip.live[data-estado="manual"]::before,
.job-live-chip.live[data-estado="sincronizando"]::before { animation: none; opacity: .45; }
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 34%, transparent); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.job-detail-jump-nav {
    position: sticky;
    top: 0;
    z-index: 4;
    margin-top: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.job-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    font-size: 11px;
    font-weight: 900;
}
.job-detail-tab.active .job-tab-badge { background: rgba(255,255,255,.20); color: #fff; }
.job-detail-tab.has-alert:not(.active) {
    color: #92400e;
    background: rgba(245, 158, 11, .10);
}
.job-detail-scroll-mode .job-detail-tab-panel {
    display: block;
    scroll-margin-top: 82px;
    margin-top: 18px;
    animation: none;
}
.job-detail-scroll-mode .job-detail-tab-panel:first-child { margin-top: 0; }
.job-detail-scroll-mode > .job-detail-tab-panel::before {
    content: attr(data-panel);
    display: inline-flex;
    margin: 0 0 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--muted-color, #64748b);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.job-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--muted-color, #64748b);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .65px;
}
.job-section-kicker svg { width: 14px; height: 14px; color: var(--primary-color, #2563eb); }

.job-drive-workspace-card {
    border-color: color-mix(in srgb, var(--primary-color, #2563eb) 24%, var(--border-color, #e5e7eb));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--primary-color, #2563eb) 8%, transparent), transparent 32%),
        var(--card-bg, #fff);
}
.job-drive-main-actions .btn-large-action {
    min-height: 44px;
    padding-inline: 18px;
}
.job-drive-status-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.job-drive-status-line span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--muted-color, #64748b);
    font-size: 11px;
    font-weight: 800;
}
.job-drive-status-line svg { width: 14px; height: 14px; }
.job-drive-embed {
    display: none;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    background: var(--card-bg, #fff);
}
.job-drive-embed.is-open { display: block; }
.job-drive-embed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-soft, #f8fafc);
}
.job-drive-embed-header strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
}
.job-drive-embed-header span {
    color: var(--muted-color, #64748b);
    font-size: 12px;
    line-height: 1.35;
}
.job-drive-embed iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    background: #fff;
}

.job-observation-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    border-color: color-mix(in srgb, #f59e0b 22%, var(--border-color, #e5e7eb));
}
.job-observation-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(86px, 1fr));
    gap: 8px;
    min-width: 280px;
}
.job-observation-metrics span {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-soft, #f8fafc);
    color: var(--muted-color, #64748b);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}
.job-observation-metrics strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-color, #0f172a);
    font-size: 21px;
    line-height: 1;
}
.job-observation-metrics .is-warning {
    border-color: rgba(245, 158, 11, .24);
    background: rgba(245, 158, 11, .10);
}
.job-observation-metrics .is-ok {
    border-color: rgba(34, 197, 94, .22);
    background: rgba(34, 197, 94, .09);
}
.job-latest-observation {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 14px;
    background: rgba(37, 99, 235, .07);
    color: var(--muted-color, #64748b);
    font-size: 12px;
}
.job-latest-observation svg { width: 16px; height: 16px; color: var(--primary-color, #2563eb); }
.job-observation-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.job-observation-status {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.job-observation-status.pending { color: #92400e; background: rgba(245, 158, 11, .13); }
.job-observation-status.done { color: #166534; background: rgba(34, 197, 94, .12); }
.job-observation-timeline .job-observation-item {
    position: relative;
}
.job-observation-timeline .job-observation-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 31px;
    top: 52px;
    bottom: -11px;
    width: 2px;
    background: var(--border-color, #e5e7eb);
}

@media (max-width: 760px) {
    .job-detail-primary-actions,
    .job-drive-main-actions,
    .job-file-upload-actions { align-items: stretch; width: 100%; }
    .job-detail-primary-actions .btn-primary,
    .job-detail-primary-actions .btn-secondary,
    .job-drive-main-actions .btn-primary,
    .job-drive-main-actions .btn-secondary,
    .job-file-upload-actions .btn-primary,
    .job-file-upload-actions .btn-secondary,
    .job-file-upload-actions select { width: 100%; justify-content: center; }
    .job-detail-jump-nav { top: 0; overflow-x: auto; flex-wrap: nowrap; }
    .job-detail-jump-nav .job-detail-tab { flex: 0 0 auto; }
    .job-observation-dashboard { grid-template-columns: 1fr; }
    .job-observation-metrics { grid-template-columns: 1fr 1fr 1fr; min-width: 0; }
    .job-drive-embed iframe { height: 320px; }
}

/* ============================================================
   FAKESIGA v17.9.1 — indicadores de observações na pauta/calendário
   ============================================================ */
.job-observations-inline {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
}
.job-observations-inline svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}
.job-observations-inline span,
.job-observations-inline strong,
.job-observations-inline small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-observations-inline strong {
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 9%, transparent);
    color: var(--blue);
    font-size: 9px;
    font-weight: 850;
}
.job-observations-inline small {
    color: color-mix(in srgb, var(--text) 68%, var(--muted));
    font-size: 9px;
    font-weight: 650;
}
.job-observations-inline.has-pending {
    color: #92400e;
}
.job-observations-inline.has-pending strong {
    background: rgba(245, 158, 11, .14);
    color: #92400e;
}
.job-observations-inline.has-items:not(.has-pending) {
    color: var(--blue);
}
.job-observations-inline.is-empty {
    opacity: .62;
}
.jobs-calendar-job-observations {
    margin-top: 3px;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--blue) !important;
    font-size: 8px !important;
    font-weight: 850;
}
.jobs-calendar-job-observations svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}
.jobs-calendar-job-observations.has-pending {
    color: #92400e !important;
}
.jobs-calendar-job.is-overdue .jobs-calendar-job-observations.has-pending,
.jobs-calendar-job.is-overdue .jobs-calendar-job-observations.has-items {
    color: var(--overdue-text) !important;
}

@media (max-width: 720px) {
    .job-observations-inline small { display: none; }
}

/* ============================================================
   FAKESIGA 18.0 — Identity & Multi Workspace
   ============================================================ */
.header-brand-area{display:flex;align-items:center;gap:14px;min-width:0}.workspace-switcher{position:relative}.workspace-switcher-button{display:flex;align-items:center;gap:9px;min-width:170px;max-width:250px;padding:7px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;text-align:left}.workspace-switcher-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent-soft,rgba(0,113,227,.1));color:var(--accent,#0071e3);flex:0 0 auto}.workspace-switcher-icon svg{width:16px;height:16px}.workspace-switcher-copy{display:flex;flex-direction:column;min-width:0;line-height:1.1;flex:1}.workspace-switcher-copy small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.workspace-switcher-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-switcher-chevron{width:15px;height:15px;color:var(--muted);flex:0 0 auto}.workspace-switcher-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:80;width:290px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 18px 44px rgba(0,0,0,.14);opacity:0;visibility:hidden;transform:translateY(-5px);transition:.16s ease}.workspace-switcher:hover .workspace-switcher-menu,.workspace-switcher:focus-within .workspace-switcher-menu{opacity:1;visibility:visible;transform:translateY(0)}.workspace-option{width:100%;display:grid;grid-template-columns:22px 1fr 18px;align-items:center;gap:9px;padding:10px;border:0;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;text-align:left}.workspace-option:hover,.workspace-option.active{background:var(--surface-secondary)}.workspace-option>svg{width:17px;height:17px}.workspace-option span{display:flex;flex-direction:column;min-width:0}.workspace-option strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-option small{font-size:11px;color:var(--muted)}.workspace-manage-link{display:flex!important;align-items:center;gap:8px;margin-top:6px;padding:10px!important;border-top:1px solid var(--border);color:var(--muted)!important}.workspace-manage-link svg{width:16px;height:16px}
.login-card-v18{max-width:480px}.auth-register-card{max-width:560px}.auth-subtitle{margin:-8px 0 22px;color:var(--muted);font-size:14px;line-height:1.5}.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1}.auth-secondary-link{justify-content:center;text-decoration:none}.auth-back-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--muted);font-size:13px;text-decoration:none}.auth-context-banner{display:flex;align-items:center;gap:10px;margin:4px 0 18px;padding:11px 12px;border:1px solid rgba(0,113,227,.2);border-radius:12px;background:rgba(0,113,227,.07);font-size:13px}.auth-context-banner svg{width:17px;height:17px;color:var(--accent,#0071e3)}
.workspace-onboarding{max-width:1080px}.workspace-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:22px}.workspace-eyebrow{display:inline-block;margin-bottom:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent,#0071e3)}.workspace-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}.workspace-card{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;gap:12px 14px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);transition:transform .16s ease,border-color .16s ease}.workspace-card:hover{transform:translateY(-2px)}.workspace-card.current{border-color:rgba(0,113,227,.38)}.workspace-card-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--surface-secondary);color:var(--accent,#0071e3)}.workspace-card-icon svg{width:22px;height:22px}.workspace-card-copy{min-width:0}.workspace-card-copy>span,.workspace-management-copy small{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.workspace-card-copy h2{margin:4px 0 3px;font-size:18px}.workspace-card-copy p{margin:0;color:var(--muted);font-size:13px}.workspace-card>button{grid-column:1/-1;justify-content:center}.workspace-invite-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:16px 18px;margin-bottom:20px;border:1px solid rgba(0,113,227,.24);border-radius:16px;background:rgba(0,113,227,.06)}.workspace-invite-card h2{margin:2px 0;font-size:16px}.workspace-invite-card p,.workspace-invite-card span{margin:0;color:var(--muted);font-size:12px}.workspace-invite-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--surface);color:var(--accent,#0071e3)}.workspace-create-panel{max-width:520px}
.workspace-management-list{display:flex;flex-direction:column;gap:12px}.workspace-management-row{display:grid;grid-template-columns:48px minmax(180px,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.workspace-management-copy{display:flex;flex-direction:column;min-width:0}.workspace-management-copy strong{font-size:15px}.workspace-management-copy span{font-size:12px;color:var(--muted)}.workspace-management-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.workspace-access-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.workspace-access-summary>div{display:flex;flex-direction:column;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.workspace-access-summary span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.workspace-access-summary strong{margin-top:5px;font-size:17px}.section-header-inline{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.member-person{display:flex;align-items:center;gap:10px}.member-person>div{display:flex;flex-direction:column}.member-person small{color:var(--muted);font-size:11px}.invite-link-result{margin-top:16px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-secondary)}.invite-link-result label{display:block;margin-bottom:7px;font-size:12px;font-weight:600}.invite-link-box{display:flex;gap:8px}.invite-link-box input{min-width:0;flex:1}.invite-link-result small{display:block;margin-top:7px;color:var(--muted)}.member-point-fields{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.form-switch-line{display:flex;align-items:center;gap:9px;cursor:pointer}.form-switch-line input{width:18px;height:18px}.modal-footer-spacer{flex:1}.btn-danger-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid rgba(255,59,48,.35);border-radius:10px;background:transparent;color:#d63028;cursor:pointer}.btn-danger-outline:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:980px){.header-brand-area{gap:8px}.workspace-switcher-button{min-width:0;max-width:170px}.workspace-switcher-copy small{display:none}.workspace-access-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.header-brand-area{max-width:calc(100% - 110px)}.brand-logo-text{display:none}.workspace-switcher-button{max-width:190px}.workspace-hero{align-items:flex-start;flex-direction:column}.workspace-invite-card{grid-template-columns:44px 1fr}.workspace-invite-card button{grid-column:1/-1}.workspace-management-row{grid-template-columns:42px 1fr}.workspace-management-actions{grid-column:1/-1}.workspace-access-summary{grid-template-columns:1fr 1fr}.invite-link-box{flex-direction:column}}
@media(max-width:440px){.workspace-switcher-button{max-width:150px}.workspace-switcher-menu{width:min(290px,calc(100vw - 24px))}.workspace-access-summary{grid-template-columns:1fr}}


/* FAKESIGA 18.0.2 - feedback explícito de autenticação */
.alert-info{background:rgba(0,113,227,.08);color:var(--accent,#0071e3);border:1px solid rgba(0,113,227,.14)}
.alert-success{background:rgba(52,199,89,.10);color:#16783a;border:1px solid rgba(52,199,89,.18)}
.alert-warning{background:rgba(255,149,0,.10);color:#9a5800;border:1px solid rgba(255,149,0,.18)}
.auth-status{display:none;margin-bottom:16px;padding:11px 12px;border-radius:10px;font-size:12px;line-height:1.45}
.auth-status.visible{display:flex;align-items:flex-start;gap:9px}
.auth-status .auth-status-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:none;background:currentColor;opacity:.8}
.auth-tech-details{display:none;margin:-6px 0 16px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-secondary,#f7f7f8);font-size:11px;color:var(--muted)}
.auth-tech-details.visible{display:block}.auth-tech-details summary{cursor:pointer;font-weight:700;color:var(--text)}
.auth-tech-details code{display:block;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.auth-inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.auth-inline-actions a{font-weight:700}
@media (prefers-color-scheme: dark){.alert-success{color:#65d884}.alert-warning{color:#ffb340}}


/* === FAKESIGA 18.0.6: confirmação, recuperação e segurança da conta === */
.auth-inline-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}
.auth-text-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-size:12px;font-weight:750;text-decoration:none}
.auth-text-link:hover{text-decoration:underline}
.auth-confirmation-box{margin-top:18px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft,#f8fafc)}
.auth-confirmation-box[hidden]{display:none!important}
.auth-confirmation-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#e8f3ff;color:var(--blue);margin-bottom:12px}
.auth-confirmation-box h2{font-size:17px;margin:0 0 6px}
.auth-confirmation-box p{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.auth-confirmation-email{display:block;color:var(--text);font-weight:800;word-break:break-all;margin-top:4px}
.auth-action-stack{display:grid;gap:9px}
.security-form{display:grid;gap:14px;margin-top:18px;max-width:680px}
.security-form .form-grid-2{align-items:end}
.security-feedback{display:none;margin-top:12px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:650}
.security-feedback.visible{display:block}
.security-feedback.success{background:#eaf8ef;color:#176b38;border:1px solid #bfe7cc}
.security-feedback.error{background:#fff0f1;color:#b4232e;border:1px solid #f4c4c8}
@media(max-width:640px){.auth-inline-actions{align-items:flex-start}.security-form .form-grid-2{grid-template-columns:1fr}}

/* ============================================================
   FAKESIGA 18.0.6 — Mobile dashboard hardening
   Garante layout móvel também em navegadores Android que usam
   viewport ampliado/"desktop-ish" em dispositivos touch.
   ============================================================ */
@media (pointer: coarse) and (max-width: 1200px) {
    html, body { max-width: 100%; overflow-x: hidden; }

    header#app-header {
        height: 58px;
        padding: 0 10px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px 32px;
        align-items: center;
        justify-content: stretch;
        gap: 7px;
    }
    .header-brand-area {
        min-width: 0;
        max-width: none;
        gap: 7px;
        overflow: hidden;
    }
    .brand-logo-text { display: none; }
    .workspace-switcher { min-width: 0; max-width: 100%; }
    .workspace-switcher-button {
        min-width: 0;
        width: auto;
        max-width: 100%;
        padding: 6px 8px;
        gap: 7px;
    }
    .workspace-switcher-copy small { display: none; }
    .workspace-switcher-copy strong { font-size: 12px; }
    .workspace-switcher-icon { width: 28px; height: 28px; border-radius: 8px; }
    .workspace-switcher-menu {
        width: min(290px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }

    .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
    }
    .mobile-menu-button svg { width: 18px; height: 18px; }

    .header-user { gap: 0; justify-content: flex-end; }
    .header-user > .icon-button { display: none; }
    .user-link { gap: 0; }
    .user-name { display: none; }
    .avatar { width: 30px; height: 30px; }

    .nav-menu {
        display: none;
        position: absolute;
        top: 58px;
        left: 10px;
        right: 10px;
        width: auto;
        height: auto;
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        padding: 8px;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        box-shadow: var(--shadow);
    }
    .nav-menu.aberto { display: flex; }
    .nav-link, .dropbtn { width: 100%; justify-content: flex-start; }
    .dropdown { height: auto; display: block; }
    .dropdown-content {
        position: static;
        display: block;
        min-width: 0;
        margin: 2px 0 5px 22px;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .main-container,
    .main-container.wide,
    .calendar-shell {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin: 16px 10px 48px !important;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 16px;
    }
    .page-title { font-size: 24px; letter-spacing: -.7px; }
    .page-subtitle { font-size: 12px; }
    .page-actions { width: 100%; }
    .page-actions > * { flex: 1 1 100%; width: 100%; }

    .card { padding: 16px; border-radius: 14px; }
    .card + .card { margin-top: 12px; }

    #cards-resumo.grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
    #cards-resumo .stat-card { min-width: 0; padding: 14px; }
    #cards-resumo .stat-value { margin-top: 8px; font-size: 25px; }
    #cards-resumo .stat-label { font-size: 10px; line-height: 1.35; }
    #cards-resumo .section-title { font-size: 9px; letter-spacing: .55px; }

    .grid-2 { grid-template-columns: 1fr !important; gap: 12px; }

    .visibility-notice {
        width: 100%;
        padding: 12px 13px;
        gap: 10px;
        margin-bottom: 12px;
    }
    .visibility-notice strong { font-size: 12px; }
    .visibility-notice span { font-size: 10px; line-height: 1.4; }

    .pipeline {
        width: 100%;
        gap: 8px;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .pipeline-card {
        flex: 0 0 min(132px, 40vw);
        min-width: 118px;
        padding: 12px;
        scroll-snap-align: start;
    }
    .pipeline-number { font-size: 23px; }
    .pipeline-label { font-size: 8.5px; }

    .activity-item { padding: 10px 0; }
    .activity-text { font-size: 12px; overflow-wrap: anywhere; }
    .activity-meta { font-size: 9px; }

    .deadline-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .deadline-row .badge {
        align-self: flex-start;
        max-width: 100%;
        white-space: normal;
        line-height: 1.3;
    }

    .toast-area { left: 10px; right: 10px; bottom: 12px; }
    .toast { width: 100%; max-width: none; }
}

@media (pointer: coarse) and (max-width: 420px) {
    #cards-resumo.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #cards-resumo .stat-card { padding: 12px; }
    #cards-resumo .stat-value { font-size: 23px; }
    .workspace-switcher-button { padding-inline: 6px; }
    .workspace-switcher-chevron { display: none; }
}