/* RESET & BASE */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    /* Paleta Grupo Dunamis */
    --dunamis-blue: #002D72; /* Azul Institucional Profundo */
    --dunamis-yellow: #FFD100; /* Amarelo Logo */
    --dunamis-dark: #1a1a1a;
    --dunamis-gray: #f4f4f4;
    --text-color: #333;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-subtle: #4b5563;
    /* Escala tipográfica */
    --font-micro: 0.65rem;
    --font-compact: 0.7rem;
    --font-xs: 0.75rem;
    --font-sm: 0.8rem;
    --font-md: 0.85rem;
    --font-base: 0.9rem;
    --font-lg: 1rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    /* Escala de espacamento */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    /* Raios e transicoes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition-fast: 150ms;
    --transition-base: 180ms;
    /* Cores semanticas */
    --status-success-bg: #dcfce7;
    --status-success-fg: #166534;
    --status-warning-bg: #fef3c7;
    --status-warning-fg: #92400e;
    --status-error-bg: #fee2e2;
    --status-error-fg: #b91c1c;
    --status-info-bg: #dbeafe;
    --status-info-fg: #1d4ed8;
    --surface-1: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef2f7;
    --border-soft: #d6e0ea;
    --white: #ffffff;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
    --modal-bg: rgba(0,0,0,0.5);
}

/* MODO NOTURNO */

body {
    background-color: var(--dunamis-gray);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.on-gateway #scroll-top-btn,
body.on-gateway #utility-toggle-btn,
body.on-gateway .utility-btn,
body.on-gateway #avisos-bell,
body.on-gateway .avisos-mini,
body.on-gateway .reminder-alerts,
body.on-gateway .header-icon-btn:not(#quick-logout-btn),
body.on-gateway .context-bar {
    display: none !important;
}

/* HEADER */
header {
    background: linear-gradient(135deg, #001b45 0%, var(--dunamis-blue) 40%, #0a3a7a 100%);
    color: var(--white);
    padding: 0 1rem;
    height: 56px;
    box-shadow: 0 2px 12px rgba(0, 20, 60, 0.35);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.header-icon-btn:active {
    background: rgba(255, 255, 255, 0.24);
}

header h1 {
    font-size: clamp(0.82rem, 1.1vw + 0.55rem, 1.15rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    line-height: 1.3;
}

.breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--font-sm);
    color: #475569;
    margin: 8px 0 4px 0;
    padding: 4px 6px;
    border-left: 3px solid #e2e8f0;
}

.breadcrumb-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.group-pill {
    background: #e2e8f0;
    color: #334155;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--font-micro);
}

.breadcrumb-updated {
    white-space: nowrap;
}

.breadcrumb-sep {
    color: #94a3b8;
}

.app-version {
    font-size: var(--font-xs);
    font-weight: 600;
    opacity: 0.6;
}

.auth-indicator {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.15);
    border: 1px solid rgba(22, 163, 74, 0.3);
    color: #86efac;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-indicator .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.avisos-bell {
    position: relative;
    background: #ffffff1a;
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: var(--font-base);
    margin-left: auto;
}

.avisos-bell.has-pending {
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.3);
}

.bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    font-size: var(--font-micro);
    padding: 2px 6px;
}



/* GATEWAY (TELA DE ENTRADA) */
#gateway {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    min-height: 90vh;
    padding: 20px;
    flex: 1 0 auto;
    width: 100%;
}

.gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin-top: 2rem;
}

.gateway-links {
    margin-top: 20px;
    text-align: center;
}

.gateway-logout {
    margin-top: 16px;
    text-align: center;
}

.gateway-logout .btn {
    opacity: 0.7;
    font-size: var(--font-sm);
}

.gateway-logout .btn:hover {
    opacity: 1;
}

.gateway-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin-top: 8px;
}

.gateway-card-access .gateway-icon svg {
    width: 48px;
    height: 48px;
}

.gateway-gerencia-card {
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.gateway-card {
    background: var(--white);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow);
    border-bottom: 4px solid var(--dunamis-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gateway-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.gateway-card img {
    max-width: 120px;
    height: auto;
    margin-bottom: 1rem;
    object-fit: contain;
}

.gateway-card h3 {
    color: var(--dunamis-blue);
    font-size: 1.1rem;
}

/* APP CONTAINER (ESCONDIDO INICIALMENTE) */
#app-container {
    display: none; /* Controlado via JS */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    flex: 1 0 auto;
    width: 100%;
}

/* BOTOES E CONTROLES */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--dunamis-blue);
    color: var(--white);
    border: 1.5px solid var(--dunamis-blue);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    font-size: var(--font-sm);
    line-height: 1.2;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover {
    background-color: #001f52;
    border-color: #001f52;
}

.btn:focus-visible {
    outline: 3px solid rgba(11, 79, 179, 0.28);
    outline-offset: 2px;
}

.btn-secondary {
    background-color: var(--surface-2);
    color: var(--dunamis-blue);
    border-color: var(--border-soft);
}

.btn-secondary:hover {
    background-color: var(--surface-3);
    border-color: var(--dunamis-blue);
}

.btn-small {
    padding: 6px 14px;
    font-size: var(--font-xs);
    min-height: 32px;
    border-radius: 6px;
}

.btn-compact {
    padding: 8px 14px;
    font-size: var(--font-sm);
    width: auto;
}

.btn-ghost {
    background: transparent;
    color: var(--dunamis-blue);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--surface-3);
}


/* ABAS DE NAVEGAÇÃO */
.tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 70px;
    z-index: 90;
    background: var(--dunamis-gray);
    padding-top: 6px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 15px 30px;
    font-size: var(--font-lg);
    font-weight: bold;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 4px solid transparent;
    transition: all 0.3s;
}

.tab-btn svg {
    vertical-align: text-bottom;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.tab-btn.active {
    color: var(--dunamis-blue);
    border-bottom-color: var(--dunamis-blue);
}

/* BUSCA + IA */
.search-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ai-toggle {
    border: 1px solid #ddd;
    background: #f4f6f9;
    color: #333;
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: var(--font-sm);
    cursor: pointer;
    white-space: nowrap;
}

.ai-toggle.active {
    background: var(--dunamis-blue);
    border-color: var(--dunamis-blue);
    color: #fff;
}

.ai-toggle.active::after {
    content: " ●";
    color: #2ecc71;
    font-size: var(--font-base);
}

@media (max-width: 600px) {
    .search-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .ai-toggle {
        width: 100%;
    }
}

/* ========================================================================== */
/* PLATAFORMA OPERACIONAL DUNAMIS                                             */
/* ========================================================================== */

.bb-legacy-tabs-hidden {
    display: none !important;
}

.bb-platform-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 0;
    gap: 18px;
    margin-top: 18px;
    align-items: start;
}

.bb-platform-sidebar {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(14, 90, 200, 0.18), transparent 40%),
        linear-gradient(180deg, rgba(8, 27, 53, 0.98), rgba(7, 21, 43, 0.95));
    box-shadow: 0 24px 48px rgba(8, 27, 53, 0.18);
    color: #f5f8ff;
}

.bb-brand-block {
    display: grid;
    gap: 6px;
}

.bb-eyebrow,
.bb-shell-kicker,
.bb-shell-header .bb-shell-kicker {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(245, 248, 255, 0.68);
}

.bb-brand-block strong {
    font-size: clamp(1.1rem, 1vw + 0.9rem, 1.35rem);
    font-weight: 800;
}

.bb-brand-block small {
    font-size: 0.88rem;
    line-height: 1.4;
    color: rgba(245, 248, 255, 0.72);
}

.bb-domain-nav {
    display: grid;
    gap: 10px;
}

.bb-domain-btn {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bb-domain-btn:hover,
.bb-domain-btn:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(108, 180, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.bb-domain-btn.active {
    background: linear-gradient(135deg, rgba(14, 90, 200, 0.28), rgba(15, 138, 106, 0.18));
    border-color: rgba(108, 180, 255, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bb-domain-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bb-domain-top strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.bb-domain-btn kbd {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(245, 248, 255, 0.92);
}

.bb-domain-desc,
.bb-sidebar-hint {
    font-size: 0.83rem;
    line-height: 1.4;
    color: rgba(245, 248, 255, 0.72);
}

.bb-platform-main {
    display: grid;
    gap: 16px;
}

.bb-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.9)),
        radial-gradient(circle at top right, rgba(14, 90, 200, 0.14), transparent 35%);
    box-shadow: 0 18px 36px rgba(13, 31, 56, 0.08);
}

.bb-shell-header h2 {
    margin: 4px 0 0;
    font-size: clamp(1.35rem, 1.2vw + 1rem, 1.9rem);
    color: #0c2241;
}

.bb-shell-actions,
.bb-domain-actions,
.bb-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bb-shell-body,
.bb-domain-view {
    display: grid;
    gap: 16px;
}

.bb-domain-view.hidden {
    display: none;
}

.bb-domain-topbar,
.bb-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.bb-domain-copy h3,
.bb-panel-header h3,
.bb-panel-header h4 {
    margin: 0;
    font-size: 1.02rem;
    color: #0b2344;
}

.bb-domain-copy p,
.bb-panel-header p {
    margin: 6px 0 0;
    color: #5d6e86;
    line-height: 1.45;
}

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

.bb-kpi-card {
    display: grid;
    gap: 8px;
    min-height: 124px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f6f9fd);
    border: 1px solid rgba(12, 34, 65, 0.08);
    box-shadow: 0 16px 30px rgba(8, 27, 53, 0.06);
}

.bb-kpi-card.tone-blue { background: linear-gradient(180deg, rgba(14, 90, 200, 0.12), rgba(255, 255, 255, 0.98)); }
.bb-kpi-card.tone-red { background: linear-gradient(180deg, rgba(220, 38, 38, 0.12), rgba(255, 255, 255, 0.98)); }
.bb-kpi-card.tone-mint { background: linear-gradient(180deg, rgba(15, 138, 106, 0.12), rgba(255, 255, 255, 0.98)); }
.bb-kpi-card.tone-amber { background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.98)); }

.bb-kpi-label,
.bb-kpi-meta { color: #61728b; }
.bb-kpi-label { font-weight: 600; }

.bb-kpi-value {
    font-size: clamp(1.55rem, 1.4vw + 1rem, 2.15rem);
    line-height: 1;
    color: #081b35;
}

.bb-home-layout,
.bb-force-layout,
.bb-two-col-layout,
.bb-three-col-layout,
.bb-operacao-grid,
.bb-detail-grid {
    display: grid;
    gap: 16px;
}

.bb-home-layout { grid-template-columns: 1.15fr 1fr 1.1fr; }
.bb-two-col-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-three-col-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-force-layout,
.bb-detail-grid { grid-template-columns: 1.15fr 1fr; }
.bb-operacao-grid { grid-template-columns: minmax(0, 1fr) 320px; }

.bb-home-panel,
.bb-panel-card,
.bb-context-panel,
.bb-side-panel,
.bb-inline-card,
.bb-action-card,
.bb-force-card,
.bb-unit-alert,
.bb-kanban-col { border-radius: 18px; }

.bb-home-panel,
.bb-context-panel {
    padding: 18px;
    background: #ffffff;
    border: 1px solid rgba(12, 34, 65, 0.08);
    box-shadow: 0 18px 34px rgba(8, 27, 53, 0.06);
}

.bb-feed-list,
.bb-card-stack,
.bb-force-mosaic,
.bb-critical-units,
.bb-action-grid,
.bb-field-grid,
.bb-form-layout {
    display: grid;
    gap: 12px;
}

.bb-feed-row,
.bb-inline-card,
.bb-list-row,
.bb-field-grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(12, 34, 65, 0.08);
    border-radius: 14px;
    background: #f8fbff;
}

.bb-feed-row strong { font-size: 1.15rem; color: #081b35; }

.bb-feed-row span,
.bb-inline-card span,
.bb-field-grid-row span,
.bb-empty-inline,
.bb-timeline-row span { color: #61728b; }

.bb-inline-card,
.bb-list-row {
    width: 100%;
    text-align: left;
    background: #fbfdff;
}

.bb-inline-card strong,
.bb-list-row span:first-child,
.bb-force-card strong,
.bb-unit-alert strong { color: #0b2344; }

.bb-list-row,
.bb-action-card,
.bb-force-card,
.bb-unit-alert,
.bb-domain-btn,
.bb-ghost-btn,
.bb-primary-btn,
.bb-secondary-btn,
.bb-link-btn { cursor: pointer; }

.bb-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bb-action-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    text-align: left;
    border: 1px solid rgba(12, 34, 65, 0.08);
    background: linear-gradient(180deg, #ffffff, #f5f9fe);
    box-shadow: 0 10px 20px rgba(8, 27, 53, 0.05);
}

.bb-action-card strong { font-size: 0.96rem; color: #081b35; }
.bb-action-card span { font-size: 0.85rem; color: #61728b; }

.bb-force-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bb-force-card,
.bb-unit-alert {
    display: grid;
    gap: 6px;
    padding: 16px;
    text-align: left;
    border: 1px solid rgba(12, 34, 65, 0.08);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.bb-force-card.ok,
.bb-status-pill.ok {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), #ffffff);
}

.bb-force-card.attention,
.bb-status-pill.attention,
.bb-unit-alert.attention {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), #ffffff);
}

.bb-force-card.critical,
.bb-status-pill.critical,
.bb-unit-alert.critical {
    border-color: rgba(220, 38, 38, 0.3);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.1), #ffffff);
}

.bb-force-card small { color: #5d6e86; }

.bb-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #0b2344;
}

.bb-status-pill.neutral { background: #e8edf5; }

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

.bb-kanban-col {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(180deg, #fbfdff, #f2f7fc);
    border: 1px solid rgba(12, 34, 65, 0.08);
    text-align: center;
}

.bb-kanban-col strong { font-size: 0.84rem; color: #4e627c; }
.bb-kanban-col span { font-size: 1.35rem; font-weight: 800; color: #081b35; }

.bb-operacao-stage,
.bb-legacy-stage { display: grid; gap: 16px; }

.bb-context-panel {
    position: sticky;
    top: 88px;
}

.bb-panel-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(12, 34, 65, 0.08);
}

.bb-panel-stat:last-child { border-bottom: 0; }
.bb-panel-stat strong,
.bb-timeline-row strong { color: #081b35; }

.bb-timeline-row {
    display: grid;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(12, 34, 65, 0.12);
}

.bb-timeline-row:last-child { border-bottom: 0; }
.bb-data-table-wrap { overflow: auto; }

.bb-data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.bb-data-table th,
.bb-data-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(12, 34, 65, 0.08);
    text-align: left;
}

.bb-data-table th {
    color: #50657e;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bb-bar-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 62px;
    gap: 10px;
    align-items: center;
}

.bb-bar-label,
.bb-bar-value {
    font-size: 0.82rem;
    color: #4e627c;
}

.bb-bar-track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: #e7eef6;
    overflow: hidden;
}

.bb-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0e5ac8, #0f8a6a);
}

.bb-side-panel {
    position: sticky;
    top: 88px;
    align-self: start;
    display: none;
    width: 420px;
    max-width: 100%;
    padding: 0;
    background: #ffffff;
    border: 1px solid rgba(12, 34, 65, 0.08);
    box-shadow: 0 28px 54px rgba(8, 27, 53, 0.16);
    overflow: hidden;
}

.bb-side-panel.visible {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: 420px;
}

.bb-side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #081b35, #0d2d56);
    color: #f7fbff;
}

.bb-side-panel-body {
    display: grid;
    gap: 16px;
    max-height: calc(100vh - 160px);
    padding: 18px;
    overflow: auto;
}

.bb-json-view {
    margin: 0;
    padding: 14px;
    border-radius: 14px;
    background: #0b1730;
    color: #dbe9ff;
    font-size: 0.78rem;
    line-height: 1.5;
    overflow: auto;
}

.bb-field-grid-row {
    align-items: flex-start;
    flex-direction: column;
}

.bb-field-grid-row.readonly {
    flex-direction: row;
    align-items: center;
}

.bb-field-grid-row textarea,
.bb-form-row input,
.bb-form-row select,
.bb-form-row textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(12, 34, 65, 0.16);
    border-radius: 12px;
    background: #ffffff;
}

.bb-form-row { display: grid; gap: 6px; }

.bb-primary-btn,
.bb-secondary-btn,
.bb-ghost-btn,
.bb-link-btn,
.bb-close-btn {
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
}

.bb-primary-btn {
    color: #ffffff;
    background: linear-gradient(135deg, #0e5ac8, #0b75d1);
}

.bb-secondary-btn,
.bb-ghost-btn,
.bb-close-btn {
    color: #0b2344;
    background: #edf3fb;
    border-color: rgba(12, 34, 65, 0.08);
}

.bb-link-btn {
    color: #0e5ac8;
    background: transparent;
    padding: 0;
    min-height: auto;
}

.bb-loading-inline,
.bb-empty-inline {
    padding: 14px;
    border-radius: 14px;
    background: #f5f8fd;
}

@media (max-width: 1300px) {
    .bb-platform-shell { grid-template-columns: 250px minmax(0, 1fr); }
    .bb-side-panel {
        position: fixed;
        top: 76px;
        right: 16px;
        z-index: 60;
        width: min(440px, calc(100vw - 24px));
        max-height: calc(100vh - 92px);
    }
}

@media (max-width: 1100px) {
    .bb-platform-shell,
    .bb-home-layout,
    .bb-force-layout,
    .bb-three-col-layout,
    .bb-operacao-grid,
    .bb-detail-grid { grid-template-columns: 1fr; }

    .bb-platform-sidebar,
    .bb-context-panel { position: static; }

    .bb-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-force-mosaic,
    .bb-action-grid,
    .bb-kanban-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .bb-platform-shell {
        gap: 14px;
        margin-bottom: 92px;
    }

    .bb-platform-sidebar { padding: 14px; }
    .bb-domain-nav { grid-template-columns: 1fr 1fr; }
    .bb-shell-header,
    .bb-home-panel,
    .bb-context-panel { padding: 16px; }
}

@media (max-width: 640px) {
    .bb-dashboard-grid,
    .bb-two-col-layout,
    .bb-force-mosaic,
    .bb-action-grid,
    .bb-domain-nav,
    .bb-kanban-mini { grid-template-columns: 1fr; }

    .bb-bar-row { grid-template-columns: 1fr; }

    .bb-shell-header,
    .bb-domain-topbar,
    .bb-panel-header,
    .bb-detail-actions,
    .bb-shell-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .breadcrumb-bar {
        font-size: var(--font-xs);
        flex-wrap: wrap;
    }
    .search-filters {
        justify-content: flex-start;
        gap: 8px;
    }
    .filter-chip {
        font-size: var(--font-compact);
        padding: 6px 8px;
    }

    .compact-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.compact-mode .result-card,
    body.compact-mode .unit-section,
    body.compact-mode .supervisao-card,
    body.compact-mode .lancamento-card,
    body.compact-mode .aviso-card {
        padding: 10px;
    }

    body.compact-mode .card-details-grid {
        gap: 6px;
        font-size: var(--font-md);
    }

    body.compact-mode .lancamento-details,
    body.compact-mode .aviso-message {
        font-size: var(--font-sm);
    }

    body.compact-mode .tabs .tab-btn {
        padding: 10px 16px;
        font-size: var(--font-base);
    }

    .context-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        margin: 0;
    }

    .context-bar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .context-actions {
        width: 100%;
        justify-content: space-between;
    }

    .context-action,
    .context-close {
        flex: 1;
        text-align: center;
    }

    .reciclagem-filters {
        grid-template-columns: 1fr;
    }

    .reciclagem-line {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .reciclagem-line-status {
        justify-self: start;
    }

    .reciclagem-top {
        grid-template-columns: 1fr;
    }

    .reciclagem-id {
        border-right: none;
        padding-right: 0;
    }

    .reciclagem-chips {
        padding-left: 0;
    }

    .reciclagem-chip {
        min-width: 90px;
    }

    .reciclagem-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.tab-btn:hover {
    color: var(--dunamis-blue);
    background-color: #f0f4f8;
}

/* BUSCA RÁPIDA */
.search-container {
    margin-bottom: 20px;
    position: relative;
}

.search-suggestions {
    margin-top: 8px;
    display: grid;
    gap: 6px;
}

.search-suggestions.hidden {
    display: none;
}

.suggest-item {
    text-align: left;
    background: #f4f6f9;
    border: 1px solid #e0e5ee;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-md);
    color: #333;
}

.suggest-item:hover {
    background: #eaf0f8;
}

.suggest-item span {
    color: var(--text-muted);
    margin-left: 6px;
    font-size: var(--font-sm);
}
.unit-search-container {
    flex: 1;
}

.unit-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.unit-filters {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: var(--font-base);
}

.search-filters, .search-filters-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.filter-chips-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-selects-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
}

.filter-select-sm {
    padding: 6px 10px;
    font-size: var(--font-xs);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--white);
    min-width: 0;
    max-width: 200px;
    flex: 1 1 0;
    cursor: pointer;
}

.search-date-filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 10px;
}

.search-date-field {
    display: grid;
    gap: 4px;
    min-width: 150px;
}

.search-date-field label {
    margin: 0;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.search-date-field input[type="date"] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    background: #fff;
    color: #1f2937;
    font-size: var(--font-md);
}

.unit-date-filters {
    margin-top: 6px;
}

.menu-actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.menu-actions-row .btn {
    margin: 0;
}

.search-date-actions,
.unit-toolbar-actions {
    margin-left: auto;
}

.substitute-panel {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #d6dde7;
    border-radius: 10px;
    background: #f8fafc;
    display: grid;
    gap: 8px;
}

.substitute-target-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.substitute-target-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-base);
    color: #1f2937;
}

.substitute-target-meta {
    color: var(--text-muted);
    font-weight: 600;
}

.substitute-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.substitute-label {
    font-size: var(--font-compact);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: #0b4fb3;
}

.substitute-panel .filter-chip {
    font-size: var(--font-compact);
    padding: 6px 10px;
}

.substitute-panel.no-target .filter-chip {
    opacity: 0.55;
}

.substitute-panel.no-target .filter-chip:disabled {
    cursor: not-allowed;
}

.search-coverage {
    margin-top: 12px;
}

.search-coverage-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.search-coverage-row .search-input {
    width: auto;
    flex: 1 1 260px;
}

.search-input-compact {
    padding: 10px;
    font-size: 0.95rem;
}

.filter-chip {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.filter-chip.active {
    background: #0b4fb3;
    border-color: #0b4fb3;
    color: #fff;
}

.last-updated {
    margin-top: 8px;
    text-align: center;
    font-size: var(--font-md);
    color: var(--text-secondary);
}

.help-content {
    display: grid;
    gap: 16px;
}

.help-section h4 {
    margin: 0 0 8px 0;
    color: var(--dunamis-blue);
}

.help-section ul {
    margin: 0;
    padding-left: 18px;
    color: #444;
}

.help-section ol {
    margin: 0;
    padding-left: 18px;
    color: #444;
}

.help-section li {
    margin-bottom: 6px;
}

.guide-item {
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    background: #fff;
}

.guide-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    font-size: var(--font-base);
    font-weight: 700;
    color: #333;
    background: #f4f6f9;
}

.guide-item summary::-webkit-details-marker { display: none; }

.guide-body {
    padding: 12px;
    display: grid;
    gap: 16px;
}

.guide-subitem {
    border: 1px dashed #d7dce5;
    border-radius: 10px;
    background: #f8fafc;
}

.guide-subitem summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    font-size: var(--font-md);
    font-weight: 700;
    color: #334155;
    background: #eef2f7;
}

.guide-subitem summary::-webkit-details-marker { display: none; }

.guide-subbody {
    padding: 12px;
    display: grid;
    gap: 12px;
}

.address-list {
    display: grid;
    gap: 12px;
}

.address-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    background: #fff;
}

.address-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.address-title {
    font-weight: 700;
    color: var(--dunamis-blue);
}

.address-text {
    color: #475569;
    font-size: var(--font-base);
    margin-bottom: 8px;
}

.address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.address-subtitle {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.address-badge {
    background: #dcfce7;
    color: #166534;
    font-size: var(--font-compact);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}

.address-badge.missing {
    background: #fee2e2;
    color: #b91c1c;
}

.sticky-modal-header {
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 2;
}

.prompt-list {
    display: grid;
    gap: 12px;
}

.prompt-card {
    border: 1px solid #e6e9ef;
    background: #f8f9fc;
    border-radius: 8px;
    padding: 12px;
}

.prompt-title {
    font-weight: bold;
    color: var(--dunamis-blue);
    margin-bottom: 6px;
}

.prompt-text {
    font-size: var(--font-base);
    color: #444;
    margin-bottom: 8px;
}

.filter-option {
    cursor: pointer;
    font-weight: 500;
}

.search-input {
    width: 100%;
    flex: 1;
    padding: 15px;
    font-size: 1.1rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.3s;
}

.search-input:focus {
    border-color: #3b6fb3;
    box-shadow: 0 0 8px rgba(0, 45, 114, 0.12);
}

input:focus,
select:focus,
textarea:focus,
.filter-select:focus {
    border-color: #3b6fb3;
    box-shadow: 0 0 6px rgba(0, 45, 114, 0.12);
    outline: none;
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

.result-card {
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-left: 5px solid #ccc;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.result-card.card-homenageado {
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid #fcd34d;
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.2);
}

.colaborador-nome.homenageado-nome {
    color: #b45309;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.homenageado-row {
    background: #fff7ed;
}




.result-card.bg-plantao { background-color: #fff5f5; }
.result-card.bg-folga { background-color: #f0fff4; }
.result-card.bg-afastado { background-color: #eef9f6; }

.result-card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
 }

/* Ajuste para modo noturno nos cards */



.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}

.header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding-right: 5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.colaborador-nome {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--dunamis-blue);
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--font-sm);
    font-weight: bold;
    color: white;
}

.distance-badge {
    background: #0b4fb3;
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 700;
}

.distance-badge.route {
    background: #0284c7;
}

.card-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 10px;
    font-size: var(--font-base);
    color: var(--text-secondary);
}

.card-info-line {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.ft-week-preview {
    grid-column: 1 / -1;
    margin-top: 2px;
}

.ft-week-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.ft-week-chip {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 4px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    padding: 2px 5px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #475569;
    min-width: 0;
}

button.ft-week-chip {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.ft-week-chip .ft-week-day {
    opacity: 0.92;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ft-week-chip .ft-week-duty {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    opacity: 1;
    justify-self: end;
    border-radius: 999px;
    padding: 0 6px;
    line-height: 1.2;
}

.ft-week-chip .ft-week-duty.plantao {
    color: #991b1b;
    background: #fee2e2;
}

.ft-week-chip .ft-week-duty.folga {
    color: #166534;
    background: #dcfce7;
}

.ft-week-chip .ft-week-duty.unknown {
    color: var(--text-muted);
    background: #e2e8f0;
}

.ft-week-chip .ft-week-ft {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 0.5rem;
    border-radius: 6px;
    padding: 0 4px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #334155;
    background: #e2e8f0;
}

.ft-week-chip .ft-week-ft.v {
    background: #dcfce7;
    color: #166534;
}

.ft-week-chip .ft-week-ft.e {
    background: #fef3c7;
    color: #92400e;
}

.ft-week-chip .ft-week-ft.d {
    background: #fee2e2;
    color: #991b1b;
}

.ft-week-preview.unit {
    margin-bottom: 8px;
}

.ft-week-preview.unit .ft-week-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.ft-week-preview.unit .ft-week-chip {
    flex: 0 0 126px;
    min-width: 126px;
}

.ft-week-preview.unit .ft-week-day {
    text-transform: capitalize;
    white-space: normal;
    line-height: 1.2;
}

.ft-week-preview.unit .ft-week-chip.has-ft {
    border-color: #93c5fd;
    background: #eff6ff;
}

@media (max-width: 700px) {
    .ft-week-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ft-link {
    grid-column: 1 / -1;
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.ft-link.covered {
    background: #eef2ff;
    color: #3730a3;
    border-color: #c7d2fe;
}

.ft-detail {
    grid-column: 1 / -1;
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #dbeafe;
    display: block;
    margin-top: 6px;
}

.ft-detail.covered {
    background: #f5f3ff;
    color: #5b21b6;
    border-color: #ddd6fe;
}

.ft-detail-note {
    display: block;
    margin-top: 4px;
    font-size: var(--font-compact);
    font-weight: 600;
    color: #475569;
}

.label-badge {
    background-color: var(--dunamis-yellow);
    color: var(--dunamis-blue);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 8px;
}

.colab-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: var(--font-compact);
    font-weight: 700;
}

.colab-flag.reminder {
    background: #e0f2fe;
    color: #075985;
}

.reciclagem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #94a3b8;
    margin-left: 6px;
    cursor: default;
}

.reciclagem-icon svg {
    width: 14px;
    height: 14px;
}

.reciclagem-icon.ok {
    background: #dcfce7;
    border-color: #86efac;
    color: #16a34a;
}

.reciclagem-icon.due {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #b45309;
}

.reciclagem-icon.expired {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.reciclagem-icon.unknown {
    opacity: 0.6;
}

.scale-badge {
    background-color: #e3f2fd;
    color: #0d47a1;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: var(--font-sm);
}

.return-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-left: 5px;
}

.edit-btn-icon {
    background-color: #f0f2f5;
    border: 1px solid #e4e6eb;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 2px;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

@media (min-width: 769px) {
    .header-right {
        gap: 14px;
    }
    .edit-btn-icon {
        margin-left: 4px;
    }
}

/* Exibe botões apenas no Modo Edição */
body.mode-edit .edit-btn-icon {
    display: flex;
}

/* WhatsApp deve aparecer sempre (visualização e edição) */
.whatsapp-icon,
.disabled-icon {
    display: flex !important;
}

.edit-btn-icon:hover {
    background-color: #d8dadf;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.edit-btn-icon svg {
    width: 18px;
    height: 18px;
}

.whatsapp-icon {
    color: #25D366;
    background-color: #e8f5e9;
    border-color: #c8e6c9;
}

.map-icon {
    color: #0b4fb3;
    background-color: #eaf2ff;
    border-color: #c7dbff;
    display: flex !important;
}

.performance-icon {
    color: #0369a1;
    background-color: #e0f2fe;
    border-color: #bae6fd;
    display: flex !important;
}

.whatsapp-icon:hover {
    background-color: #c8e6c9;
}

.map-icon:hover {
    background-color: #d7e8ff;
}

.performance-icon:hover {
    background-color: #cffafe;
}

.map-icon.map-icon-missing {
    color: #dc2626;
    background-color: #fee2e2;
    border-color: #fecaca;
}

.map-icon.map-icon-missing:hover {
    background-color: #fecaca;
}

.disabled-icon {
    color: #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}

.whatsapp-btn {
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.whatsapp-btn:hover {
    background-color: #128C7E;
}

.unit-link {
    color: var(--dunamis-blue);
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

/* LISTA DE UNIDADES */
.unit-section {
    background: var(--white);
    margin-bottom: 20px;
    border-radius: 8px;
    padding: 15px;
    box-shadow: var(--shadow);
    position: relative;
}

.unit-section:not(:last-child) {
    border-bottom: 1px solid #e9edf3;
}

.unit-section.unit-labeled::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, #ffd166, #06d6a0);
}

.unit-title {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: var(--dunamis-blue);
    display: flex;
    justify-content: space-between;
}

.unit-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    border-radius: 6px;
}

.action-btn svg {
    width: 18px;
    height: 18px;
}

.action-btn:hover {
    color: var(--dunamis-blue);
    background: rgba(0, 45, 114, 0.08);
}
.action-btn.hidden-unit { color: #dc3545; }


.count-badge {
    background: #eee;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-sm);
    color: #333;
}

/* MENU SUPERVISÃO */
.supervisao-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.supervisao-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.supervisao-header h3 {
    margin: 0;
    color: var(--dunamis-blue);
}

.supervisao-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-base);
}

.supervisao-meta {
    font-size: var(--font-sm);
    color: #6b7280;
}

.supervisao-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supervisao-switch {
    display: grid;
    gap: 6px;
}

.supervisao-switch-label {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 800;
}

.supervisao-switch-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid #cbd5f5;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    width: fit-content;
}

.switch-btn {
    border: none;
    background: transparent;
    color: #1f2937;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-md);
    letter-spacing: 0.01em;
}

.switch-btn:hover {
    background: rgba(15, 23, 42, 0.08);
}

.switch-btn.active {
    background: linear-gradient(135deg, #0b4fb3 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

.switch-btn:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.supervisao-switch-hint {
    font-size: var(--font-sm);
    color: #475569;
}

@media (max-width: 640px) {
    .supervisao-switch-group {
        width: 100%;
    }
    .switch-btn {
        flex: 1 1 0;
        text-align: center;
    }
}

.supervisao-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.supervisao-admin-panel {
    border: 1px solid #dbe3ee;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.supervisao-admin-panel summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 800;
    color: #0f172a;
    list-style: none;
    background: #e9eff7;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.supervisao-admin-panel summary::-webkit-details-marker { display: none; }

.supervisao-admin-panel summary:hover {
    background: #e2e9f4;
}

.supervisao-admin-panel[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.supervisao-admin-panel summary::after {
    content: "▾";
    margin-left: auto;
    font-size: var(--font-md);
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.supervisao-admin-panel[open] summary::after {
    transform: rotate(-180deg);
}

.supervisao-admin-body {
    padding: 14px;
    display: grid;
    gap: 14px;
    background: #f8fafc;
}

.supervisao-admin-login .field-row,
.supervisao-admin-card .field-row {
    margin-bottom: 10px;
}

.supervisao-admin-login {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.supervisao-admin-panel input[type="text"],
.supervisao-admin-panel input[type="password"],
.supervisao-admin-panel select,
.supervisao-admin-panel textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d6deea;
    background: #ffffff;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.supervisao-admin-panel .field-row label {
    font-size: var(--font-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.supervisao-admin-panel textarea {
    min-height: 90px;
    resize: vertical;
}

.supervisao-admin-panel input:focus,
.supervisao-admin-panel select:focus,
.supervisao-admin-panel textarea:focus {
    outline: none;
    border-color: #0b4fb3;
    box-shadow: 0 0 0 3px rgba(11, 79, 179, 0.15);
}

.supervisao-admin-status {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    font-size: var(--font-md);
}

.supervisao-admin-status > div {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.supervisao-admin-status span {
    display: block;
    font-size: var(--font-compact);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.supervisao-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.supervisao-admin-panel .hint {
    background: #eff6ff;
    border-left: 3px solid #0b4fb3;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1e3a8a;
    font-size: var(--font-sm);
}

.supervisao-admin-panel .btn,
.supervisao-admin-panel .btn-secondary,
.supervisao-admin-panel .btn-small {
    width: auto;
    margin-bottom: 0;
}

.supervisao-admin-grid {
    display: grid;
    gap: 16px;
}

.supervisao-admin-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    position: relative;
    overflow: hidden;
}

.supervisao-admin-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #0b4fb3;
    opacity: 0.7;
}

.supervisao-admin-card.tone-primary::before { background: #0b4fb3; }
.supervisao-admin-card.tone-blue::before { background: #2563eb; }
.supervisao-admin-card.tone-sky::before { background: #0ea5e9; }
.supervisao-admin-card.tone-green::before { background: #22c55e; }

.supervisao-admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.supervisao-admin-card-header strong {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: #0f172a;
}

.supervisao-admin-card .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.supervisao-admin-section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    font-weight: 800;
    margin-top: 2px;
}

.supervisao-admin-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #cbd5f5, transparent);
}

.keep-logged {
    display: block;
    font-size: var(--font-md);
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.supervisao-top-used {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
}

.supervisao-top-header {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 6px;
}

.supervisao-top-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.supervisao-top-chip {
    border: 1px solid #d0d7e2;
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: var(--font-sm);
    cursor: pointer;
}

.supervisao-items {
    display: grid;
    gap: 12px;
}

@media (min-width: 900px) {
    .supervisao-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .supervisao-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.supervisao-card {
    background: var(--white);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supervisao-card.is-expired {
    border-color: #fca5a5;
    background: #fff7f7;
}

.supervisao-card-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.supervisao-card-title {
    font-weight: 700;
    color: #0f172a;
}

.supervisao-card-desc {
    font-size: var(--font-md);
    color: #6b7280;
    margin-top: 2px;
}

.supervisao-fav {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.supervisao-fav svg {
    width: 18px;
    height: 18px;
}

.supervisao-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.supervisao-badge {
    font-size: var(--font-compact);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
}

.supervisao-badge.internal { background: #fef3c7; color: #92400e; }
.supervisao-badge.colab { background: #dcfce7; color: #166534; }
.supervisao-badge.guide { background: #e0f2fe; color: #075985; }
.supervisao-badge.type { background: #f3f4f6; color: #374151; }
.supervisao-badge.warning { background: #fee2e2; color: #991b1b; }
.supervisao-badge.expired { background: #fecaca; color: #7f1d1d; }
.supervisao-badge.due { background: #fde68a; color: #92400e; }
.supervisao-badge.ok { background: #d1fae5; color: #065f46; }
.supervisao-badge.invalid { background: #fef2f2; color: #b91c1c; }

.supervisao-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.supervisao-link-list .btn {
    width: auto;
    margin-bottom: 0;
}

.supervisao-message {
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    background: #f8fafc;
}

.supervisao-message summary {
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.supervisao-message-body {
    white-space: pre-wrap;
    font-size: var(--font-md);
    color: #1f2937;
}

.supervisao-channel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.supervisao-channel .filter-chip {
    font-size: var(--font-xs);
}

.supervisao-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.supervisao-images img {
    width: 100%;
    max-width: 180px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.supervisao-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.supervisao-actions .btn {
    width: 100%;
    margin-bottom: 0;
}

.supervisao-usage {
    font-size: var(--font-xs);
    color: #6b7280;
}

.supervisao-admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supervisao-admin-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
}

.supervisao-admin-title {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 8px;
}

.supervisao-admin-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.supervisao-admin-row:last-child {
    border-bottom: none;
}

.supervisao-admin-meta {
    font-size: var(--font-xs);
    color: #6b7280;
}

.supervisao-admin-actions {
    display: flex;
    gap: 6px;
}

.supervisao-admin-lock {
    font-size: var(--font-compact);
    color: #94a3b8;
}

.supervisao-history-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.supervisao-history-item:last-child {
    border-bottom: none;
}

.supervisao-history-meta {
    font-size: var(--font-xs);
    color: #6b7280;
}

@media (max-width: 600px) {
    .supervisao-actions {
        grid-template-columns: 1fr;
    }
    .supervisao-link-list .btn {
        width: 100%;
    }
}

/* Ajuste badge modo noturno */

/* TIMES RIVAIS (PLANTÃO vs FOLGA) */
.unit-teams-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.team-block {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

.team-header {
    padding: 10px;
    text-align: center;
    color: white;
    font-size: var(--font-base);
    font-weight: bold;
    text-transform: uppercase;
}

.header-plantao { background-color: #dc3545; }
.header-folga { background-color: #28a745; }

.empty-team {
    padding: 20px;
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: var(--font-base);
}

.highlight-unit {
    animation: highlightPulse 2s ease;
    border: 2px solid var(--dunamis-yellow);
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 209, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 209, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 209, 0, 0); }
}

/* TABELA DE UNIDADES */
.unit-table-wrapper {
    overflow-x: auto;
}

.unit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-base);
}

.unit-table th {
    background-color: #f8f9fa;
    color: var(--dunamis-blue);
    font-weight: bold;
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #eee;
}

.unit-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.unit-colab-meta {
    font-size: var(--font-xs);
    color: #475569;
    margin-top: 3px;
}

.status-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.shift-badge {
    font-size: var(--font-micro);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shift-badge.day { background-color: #fff9c4; color: #5f4300; border: 1px solid #fbc02d; }
.shift-badge.night { background-color: #e1f5fe; color: #01579b; border: 1px solid #0288d1; }

.mini-label {
    font-size: var(--font-compact);
    background: var(--dunamis-yellow);
    color: var(--dunamis-blue);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: bold;
}

.mini-date {
    font-size: var(--font-compact);
    color: var(--text-secondary);
    margin-left: 4px;
}

.unit-label-badge {
    background-color: var(--dunamis-yellow);
    color: var(--dunamis-blue);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}

.unit-aviso-badge {
    background: #ffe9b0;
    color: #6a4b00;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: var(--font-compact);
    font-weight: 700;
    margin-left: 8px;
}

.unit-reminder-badge {
    background: #e0f2fe;
    color: #075985;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: var(--font-compact);
    font-weight: 700;
    margin-left: 6px;
}

.unit-ft-badge {
    background: #dbeafe;
    color: #1e3a8a;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: var(--font-compact);
    font-weight: 700;
    margin-left: 6px;
}

/* ESTADOS VAZIOS E LOADING */
.empty-state {
    text-align: center;
    color: var(--text-muted);
    margin-top: 20px;
    font-style: italic;
}

/* UTILS */
.hidden {
    display: none !important;
}

.loading {
    text-align: center;
    padding: 2rem;
    font-weight: bold;
    color: var(--dunamis-blue);
}

/* ── Loading Overlay (fullscreen centered) ── */
.loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 60vh;
    color: var(--dunamis-blue);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    user-select: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e7ef;
    border-top-color: var(--dunamis-blue);
    border-radius: 50%;
    animation: spinLoader 0.7s linear infinite;
}

.loading-error-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
}

.loading-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* MODAL */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    background-color: var(--white);
    padding: 25px;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    max-height: 90vh; /* Limita altura para caber na tela */
    overflow-y: auto; /* Adiciona rolagem se necessário */
    animation: slideDown 0.3s ease;
}

.route-meta {
    font-size: var(--font-md);
    color: #475569;
    margin-bottom: 12px;
}

.route-map {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-bottom: 12px;
}

@media (max-width: 700px) {
    .route-map {
        height: 320px;
    }
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-compact {
    padding: 8px 14px;
    font-size: var(--font-sm);
    width: auto;
    margin-bottom: 0;
}

.modal-header.sticky-modal-header {
    box-shadow: 0 6px 10px rgba(0,0,0,0.04);
    z-index: 3;
}

.close-modal {
    background: none;
    border: none;
    font-size: var(--font-2xl);
    cursor: pointer;
    color: #999;
}

.checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
}


.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

.form-group { margin-bottom: 15px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--text-secondary); font-size: var(--font-base); }

input[type="text"], input[type="number"], select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: var(--font-lg);
}


.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.bulk-actions-section {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.bulk-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.unit-members-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
}

.admin-list {
    display: grid;
    gap: 10px;
    font-size: var(--font-md);
}

.admin-section {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
}

.admin-section-title {
    font-weight: bold;
    margin-bottom: 6px;
    color: var(--dunamis-blue);
}

.admin-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
    color: #333;
}
.admin-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-row-meta {
    display: flex;
    gap: 12px;
    font-size: var(--font-xs);
    color: #64748b;
}
.admin-groups {
    font-style: italic;
}

.admin-role {
    font-size: var(--font-compact);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-row.supervisor .admin-name,
.admin-row .admin-name.gold {
    color: #c9a227;
    font-weight: 700;
}

.admin-row .admin-name svg {
    vertical-align: text-bottom;
    margin-right: 6px;
}

.admin-empty {
    color: var(--text-subtle);
    font-style: italic;
    font-size: var(--font-sm);
}

.btn-mini {
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-compact);
    background: var(--dunamis-blue);
    color: var(--white);
}

.btn-mini.btn-danger {
    background: var(--dunamis-blue);
    color: var(--white);
    padding: 2px 6px;
}

.btn-mini:hover {
    background-color: #001f52;
}

.btn[disabled],
.btn-mini[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

.btn-danger {
    background: var(--dunamis-blue);
    color: var(--white);
}

.btn-ok {
    background: var(--dunamis-blue);
    color: var(--white);
}

.tab-badge {
    background: #dc3545;
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: var(--font-compact);
    margin-left: 6px;
}

.avisos-shell {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr;
    gap: 16px;
}

.lancamentos-shell {
    display: grid;
    gap: 16px;
}

.lancamentos-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.lancamentos-title {
    display: grid;
    gap: 8px;
}

.lancamentos-title h3 {
    margin: 0;
}

.lancamentos-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.lancamentos-mode-switch {
    margin-top: 8px;
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid #d1dbe9;
    background: #eef2f7;
    width: fit-content;
}

.lancamentos-mode-btn {
    border: 1px solid #d7e0ee;
    background: #ffffff;
    color: #334155;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: var(--font-xs);
    font-weight: 800;
    cursor: pointer;
    line-height: 1.15;
}

.lancamentos-mode-btn.active {
    background: #0b4fb3;
    border-color: #0b4fb3;
    color: #fff;
}

.lanc-action-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.lanc-action-group .btn {
    min-height: 32px;
}

.lancamentos-sync-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-weight: 700;
    font-size: var(--font-xs);
}

.lancamentos-sync-pill.syncing {
    background: #fde68a;
    color: #7c2d12;
}

.lancamentos-last-sync {
    font-weight: 600;
}

.lancamentos-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff, #f2f7ff);
}

.lancamentos-tab {
    background: #ffffff;
    border: 1px solid #d9e2ef;
    color: #334155;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 700;
    transition: all 0.2s ease;
}

.lancamentos-tab:hover {
    border-color: #9fb7db;
    transform: translateY(-1px);
}

.lancamentos-tab.daily-focus {
    border-color: #bcd2f4;
    background: #eff6ff;
    color: #0b4fb3;
}

.lancamentos-tab.active {
    background: #0b4fb3;
    color: #fff;
    border-color: #0b4fb3;
    box-shadow: 0 8px 18px rgba(11, 79, 179, 0.2);
}

.lancamentos-filters-wrap {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow);
}

.lancamentos-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.lancamentos-quick .filter-chip {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: var(--font-xs);
}

.lanc-plan-shell {
    display: grid;
    gap: 12px;
}

.lanc-plan-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lanc-plan-toolbar h4 {
    margin: 4px 0 0 0;
    color: #0f172a;
    font-size: var(--font-lg);
}

.lanc-plan-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lanc-plan-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.lanc-plan-grid {
    display: grid;
    gap: 8px;
}

.lanc-plan-grid.week {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
}

.lanc-plan-grid.month {
    grid-template-columns: repeat(7, minmax(90px, 1fr));
}

.lanc-plan-day {
    min-height: 94px;
}

.lanc-plan-day.placeholder {
    border: 1px dashed #dbe4f0;
    border-radius: 10px;
    background: #f8fafc;
}

.lanc-plan-day.tone-normal {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.lanc-plan-day.tone-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.lanc-plan-day.tone-critical {
    border-color: #fecaca;
    background: #fff1f2;
}

.lanc-plan-meta {
    font-size: var(--font-xs);
    color: #475569;
    font-weight: 700;
}

.lanc-plan-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lanc-plan-pill {
    font-size: var(--font-xs);
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 10px;
    border: 1px solid transparent;
}

.lanc-plan-pill.tone-normal {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.lanc-plan-pill.tone-warning {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.lanc-plan-pill.tone-critical {
    border-color: #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 1024px) {
    .lanc-plan-grid.week,
    .lanc-plan-grid.month {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .lanc-plan-grid.week,
    .lanc-plan-grid.month {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lanc-plan-day {
        min-height: 86px;
    }
}

.reciclagem-shell {
    display: grid;
    gap: 14px;
}

.reciclagem-summary {
    display: grid;
    gap: 10px;
}

.reciclagem-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.reciclagem-kpi-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow);
}

.reciclagem-kpi-card .label {
    font-size: var(--font-compact);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 700;
}

.reciclagem-kpi-card .value {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0f172a;
}

.reciclagem-kpi-card .meta {
    font-size: var(--font-xs);
    color: #6b7280;
    margin-top: 4px;
}

.reciclagem-kpi-card.status-expired { border-left: 4px solid #dc2626; }
.reciclagem-kpi-card.status-due { border-left: 4px solid #f59e0b; }
.reciclagem-kpi-card.status-ok { border-left: 4px solid #16a34a; }
.reciclagem-kpi-card.status-unknown { border-left: 4px solid #94a3b8; }

.reciclagem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reciclagem-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reciclagem-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reciclagem-tab {
    background: #f4f6f9;
    border: 1px solid #e5e7eb;
    color: #333;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--font-md);
    font-weight: 700;
}

.reciclagem-tab.active {
    background: #0b4fb3;
    color: #fff;
    border-color: #0b4fb3;
}

.reciclagem-filters {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr 0.6fr 0.4fr;
    gap: 10px;
}

#reciclagem-only-expired.active {
    background: #0b4fb3;
    border-color: #0b4fb3;
    color: #fff;
}

.reciclagem-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.reciclagem-quick .filter-chip {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: var(--font-xs);
}

.reciclagem-list {
    display: grid;
    gap: 12px;
}

.reciclagem-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow);
}

.reciclagem-card.status-expired { border-left: 4px solid #dc2626; }
.reciclagem-card.status-due { border-left: 4px solid #f59e0b; }
.reciclagem-card.status-ok { border-left: 4px solid #16a34a; }
.reciclagem-card.status-unknown { border-left: 4px solid #94a3b8; }
.reciclagem-card.status-mixed { border-left: 4px solid #6366f1; }

.reciclagem-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 6px;
}

.reciclagem-type {
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reciclagem-title {
    font-size: 0.95rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reciclagem-badge {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #dc2626;
    box-shadow: 0 0 0 2px #fff;
    display: inline-block;
}

.reciclagem-re {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.reciclagem-details {
    font-size: var(--font-sm);
    color: #475569;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reciclagem-unit-pill {
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--dunamis-blue);
    color: var(--white);
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 45, 114, 0.25);
}

.reciclagem-unit-pill:hover {
    background: #001f52;
}

.reciclagem-lines {
    margin-top: 8px;
    display: grid;
    gap: 6px;
}

.reciclagem-line {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.6fr;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: var(--font-sm);
}

.reciclagem-line.status-expired { border-left: 3px solid #dc2626; }
.reciclagem-line.status-due { border-left: 3px solid #f59e0b; }
.reciclagem-line.status-ok { border-left: 3px solid #16a34a; }
.reciclagem-line.status-unknown { border-left: 3px solid #94a3b8; }

.reciclagem-line-label {
    font-weight: 700;
    color: #1f2937;
}

.reciclagem-line-date {
    color: #475569;
}

.reciclagem-line-status {
    justify-self: end;
    font-weight: 700;
    color: #1f2937;
    background: #e2e8f0;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: var(--font-compact);
}

.reciclagem-note {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: var(--font-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reciclagem-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
}

.reciclagem-template {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: var(--font-xs);
    font-weight: 700;
    background: #fff;
    color: #334155;
}

.reciclagem-footer {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
    gap: 10px;
    flex-wrap: wrap;
}

.reciclagem-templates-header .btn-mini,
.reciclagem-history .btn-mini {
    width: auto;
    margin-bottom: 0;
    padding: 4px 8px;
}

.reciclagem-template-row .btn-mini {
    width: auto;
}

.reciclagem-card.compact {
    padding: 10px;
}

.reciclagem-card.compact .reciclagem-title {
    font-size: var(--font-base);
    margin-bottom: 2px;
}

.reciclagem-card.compact .reciclagem-details {
    font-size: var(--font-xs);
    gap: 4px;
}

.reciclagem-lines.compact {
    gap: 4px;
}

.reciclagem-lines.compact .reciclagem-line {
    padding: 4px 6px;
    font-size: var(--font-xs);
}

.reciclagem-card.compact .reciclagem-note {
    font-size: var(--font-compact);
    padding: 4px 6px;
}

.reciclagem-card.thin {
    padding: 10px 12px;
    border-left: 4px solid #3b5cff;
}

.reciclagem-top {
    display: grid;
    grid-template-columns: 0.7fr 1.9fr;
    gap: 12px;
    align-items: stretch;
    position: relative;
}

.reciclagem-left {
    display: grid;
    gap: 8px;
    padding-right: 12px;
    border-right: 3px solid #c7c7c7;
}

.reciclagem-right {
    display: grid;
    gap: 8px;
    align-content: start;
    align-items: flex-start;
}

.reciclagem-id {
    display: grid;
    gap: 6px;
}

.reciclagem-id .reciclagem-title {
    margin: 0;
    font-size: var(--font-base);
}

.reciclagem-id .reciclagem-re {
    font-size: var(--font-xs);
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reciclagem-chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(100px, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 8px;
    align-items: center;
    padding-left: 0;
    max-width: 100%;
}

.reciclagem-chips .reciclagem-chip {
    width: 100%;
}

.reciclagem-chip {
    border-radius: 10px;
    padding: 5px 8px;
    color: #fff;
    font-size: var(--font-compact);
    font-weight: 700;
    display: grid;
    gap: 2px;
    min-width: 100px;
    text-align: center;
}

.reciclagem-chip .chip-date {
    background: rgba(229, 231, 235, 0.85);
    color: #1f2937;
    border-radius: 999px;
    padding: 2px 4px;
    font-size: var(--font-compact);
    font-weight: 800;
}

.reciclagem-chip .chip-label {
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    border-radius: 999px;
    padding: 2px 4px;
    font-size: var(--font-micro);
    font-weight: 800;
}

.reciclagem-chip.status-ok { background: #16a34a; }
.reciclagem-chip.status-due { background: #f59e0b; }
.reciclagem-chip.status-expired { background: #dc2626; }
.reciclagem-chip.status-unknown { background: #6b7280; }

.reciclagem-actions-row {
    margin-top: 6px;
}

.reciclagem-actions.compact {
    gap: 6px;
    display: grid;
    grid-template-columns: 1fr;
}

.reciclagem-actions.compact .reciclagem-template {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    font-size: var(--font-xs);
}

.reciclagem-actions.compact .btn-mini {
    padding: 4px 10px;
    font-size: var(--font-compact);
    border-radius: 6px;
}

.reciclagem-action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.reciclagem-obs-text {
    font-size: var(--font-xs);
    font-style: italic;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reciclagem-footer {
    margin-top: 2px;
    margin-bottom: 2px;
    justify-content: flex-start;
    align-self: flex-start;
    width: 100%;
}

.reciclagem-footer .reciclagem-unit-pill {
    margin: 0 auto;
}

.obs-inline {
    background: var(--dunamis-yellow);
    color: #1a1a1a;
}

.obs-inline:hover {
    background: #e6bd00;
}

.reciclagem-unit-pill {
    padding: 6px 14px;
    font-size: var(--font-xs);
    margin-top: 6px;
}

.reciclagem-actions-row,
.reciclagem-note,
.reciclagem-footer {
    margin-left: 0;
    justify-content: center;
    width: 100%;
}

.reciclagem-right .reciclagem-footer {
    justify-content: center;
}

.reciclagem-card.thin::after {
    content: '';
    display: block;
    height: 2px;
    background: #c7c7c7;
    margin: 8px 0 6px 0;
}

.reciclagem-footer {
    padding-top: 2px;
}

.obs-inline {
    background: var(--dunamis-yellow);
    color: #1a1a1a;
}

.obs-inline:hover {
    background: #e6bd00;
}

.reciclagem-actions-row,
.reciclagem-note,
.reciclagem-footer {
    padding-left: 0;
    padding-right: 0;
}

.reciclagem-templates {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
}

.reciclagem-templates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.reciclagem-templates-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.reciclagem-template-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 6px;
}

.reciclagem-template-row .btn-mini {
    min-width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.reciclagem-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.reciclagem-summary.hidden {
    display: none;
}

.reciclagem-summary-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: var(--font-sm);
    font-weight: 700;
    color: #334155;
}

.reciclagem-summary-card.expired { border-left: 4px solid #dc2626; }
.reciclagem-summary-card.due { border-left: 4px solid #f59e0b; }
.reciclagem-summary-card.ok { border-left: 4px solid #16a34a; }

.reciclagem-summary-text {
    cursor: help;
}

.reciclagem-type-counts {
    margin-top: 8px;
}

.reciclagem-type-counts-inner {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reciclagem-type-chip {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: var(--font-xs);
    display: flex;
    gap: 8px;
    align-items: center;
}

.reciclagem-type-chip .expired { color: #dc2626; font-weight: 700; }
.reciclagem-type-chip .due { color: #f59e0b; font-weight: 700; }
.reciclagem-type-chip .ok { color: #16a34a; font-weight: 700; }

.skeleton-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
}

.skeleton-line {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    margin-bottom: 8px;
}

.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-line.w-60 { width: 60%; }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.reciclagem-history {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
}

.btn-mini.btn-danger {
    padding: 2px 6px;
    font-size: var(--font-compact);
}

.reciclagem-templates-form {
    display: grid;
    gap: 8px;
}

.reciclagem-templates-form input,
.reciclagem-templates-form textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: var(--font-md);
}

.lancamentos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.lancamentos-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lancamentos-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.lancamentos-filters .form-group {
    margin-bottom: 0;
}

.ft-sync-info {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    font-size: var(--font-sm);
    color: #475569;
}

.lancamentos-panel {
    background: var(--white);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.lancamentos-dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.lancamentos-toolbar-actions {
    margin-left: auto;
    justify-content: flex-end;
}

.lancamentos-gid-alert {
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 8px;
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
    font-size: var(--font-sm);
    font-weight: 600;
}

.lanc-diaria-shell {
    display: grid;
    gap: 12px;
}

.lanc-diaria-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.lanc-diaria-hero {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    padding: 12px;
}

.lanc-diaria-hero h4 {
    margin: 4px 0 0 0;
    color: #0b4fb3;
}

.lanc-diaria-hero p {
    margin: 4px 0 0 0;
    font-size: var(--font-sm);
    color: #475569;
}

.lanc-diaria-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.lanc-diaria-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.lanc-diaria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.diaria-card {
    display: grid;
    gap: 8px;
}

.diaria-list {
    display: grid;
    gap: 8px;
}

.diaria-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

.diaria-item.ft {
    border-left: 4px solid #bfdbfe;
}

.diaria-item.troca {
    border-left: 4px solid #d1fae5;
}

.diaria-item.troca.has-error {
    border-left-color: #fca5a5;
    background: #fffaf9;
}

.diaria-item.ft.critical {
    border-left-color: #fca5a5;
    background: #fff7f7;
}

.diaria-item-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.diaria-status {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: var(--font-xs);
    font-weight: 700;
}

.diaria-status.status-pending { background: #e2e8f0; color: #475569; }
.diaria-status.status-submitted { background: #dbeafe; color: #1d4ed8; }
.diaria-status.status-launched { background: #dcfce7; color: #166534; }

.diaria-item-meta {
    display: grid;
    gap: 4px;
    margin-top: 7px;
    font-size: var(--font-sm);
    color: #334155;
}

.diaria-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.diaria-tag {
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: var(--font-compact);
    font-weight: 700;
    padding: 2px 8px;
}

.diaria-tag.danger {
    border-color: #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

.troca-errors {
    color: #b91c1c;
    font-weight: 600;
}

.roadmap-list {
    display: grid;
    gap: 8px;
}

.roadmap-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

.roadmap-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.roadmap-status {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: var(--font-compact);
    font-weight: 700;
}

.roadmap-status.concluido { background: #dcfce7; color: #166534; }
.roadmap-status.andamento { background: #fef3c7; color: #92400e; }
.roadmap-status.planejado { background: #e2e8f0; color: #475569; }

.roadmap-meta {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 3px;
}

.roadmap-detail {
    font-size: var(--font-sm);
    color: #334155;
    margin-top: 5px;
}

.command-palette {
    position: fixed;
    inset: 0;
    z-index: 1900;
}

.command-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.command-dialog {
    position: relative;
    width: min(640px, calc(100vw - 32px));
    margin: 9vh auto 0;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.35);
    padding: 12px;
    display: grid;
    gap: 8px;
}

.command-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.command-list {
    display: grid;
    gap: 6px;
    max-height: 48vh;
    overflow-y: auto;
}

.command-item {
    text-align: left;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    padding: 8px 10px;
    cursor: pointer;
    font-size: var(--font-md);
}

.command-item.active {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #0b4fb3;
}

.command-item.empty {
    cursor: default;
    color: var(--text-muted);
}

.dashboard-title {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    color: var(--text-muted);
}

.btn-ghost {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #334155;
    box-shadow: none;
}

.btn-ghost:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.lancamentos-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow);
}

.kpi-label {
    font-size: var(--font-compact);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    font-weight: 700;
}

.kpi-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: #0f172a;
}

.kpi-sub {
    font-size: var(--font-xs);
    color: #6b7280;
    margin-top: 4px;
}

.lancamentos-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.gerencia-shell {
    display: grid;
    gap: 14px;
}

.gerencia-header {
    background: linear-gradient(135deg, #0b4fb3, #0284c7);
    border-radius: 12px;
    padding: 16px;
    color: #fff;
}

.gerencia-header h3 {
    margin: 0;
    font-size: 1.15rem;
}

.gerencia-header p {
    margin: 6px 0 0 0;
    font-size: var(--font-md);
    opacity: 0.95;
}

.gerencia-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.gerencia-filters input[type="date"] {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
}

.gerencia-filters select {
    min-width: 170px;
}

.gerencia-grid .report-card {
    min-height: 190px;
}

.gerencia-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 8px;
}

.gerencia-day-chip {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 8px;
    display: grid;
    gap: 3px;
    text-align: center;
}

.gerencia-day-chip .day {
    font-size: var(--font-micro);
    color: var(--text-muted);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.gerencia-day-chip .code {
    font-size: var(--font-lg);
    font-weight: 800;
}

.gerencia-day-chip .count {
    font-size: var(--font-xs);
    color: #334155;
    font-weight: 700;
}

.gerencia-day-chip.v {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}

.gerencia-day-chip.e {
    border-color: #fde68a;
    background: #fef3c7;
    color: #92400e;
}

.gerencia-day-chip.d {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #991b1b;
}

.report-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-card.report-chart {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.report-title {
    font-weight: 700;
    font-size: var(--font-base);
    color: #0f172a;
}

.report-list {
    display: grid;
    gap: 6px;
}

.report-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: var(--font-sm);
}

.report-row.compact {
    grid-template-columns: 1fr auto;
}

.report-label {
    color: #334155;
}

.report-value {
    font-weight: 700;
    color: #0f172a;
    font-size: var(--font-sm);
}

.report-bar {
    background: #eef2f7;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.report-bar span {
    display: block;
    height: 100%;
    background: #0b4fb3;
}

.report-empty {
    color: #94a3b8;
    font-size: var(--font-sm);
}


.lancamentos-summary-line {
    font-size: var(--font-md);
    color: #475569;
    margin-bottom: 10px;
}

.lancamentos-history-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.lancamentos-history-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.lancamentos-history-group {
    margin-bottom: 12px;
}

.lancamentos-history-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #e6e9ef;
    background: #f4f6f9;
    font-size: var(--font-sm);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.history-count {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: 600;
}

.lancamento-source {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-compact);
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
}

.lancamento-source.source-legacy {
    background: #dbeafe;
    color: #1e3a8a;
}

.lancamento-source.source-supabase {
    background: #dcfce7;
    color: #166534;
}

.lancamento-source.source-manual {
    background: #fef3c7;
    color: #92400e;
}

.lancamentos-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.lanc-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
}

.lanc-card .label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 6px;
}

.lanc-card .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
}

.lancamentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.lanc-panel {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
}

.lanc-panel h4 {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.lanc-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-md);
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
}

.lanc-row:last-child {
    border-bottom: none;
}

.lancamento-card {
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 12px;
    align-items: start;
}

.lancamento-card.is-today {
    border-left: 4px solid #0b4fb3;
    background: #f8fbff;
}

.lancamento-card.is-pending {
    border-left: 4px solid #f59e0b;
    background: #fffaf0;
}

.lancamento-main { min-width: 0; }

.lancamento-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 6px;
}

.lancamento-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #075985;
    font-weight: 800;
}

.lancamento-date strong {
    font-size: var(--font-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.lancamento-status {
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-size: var(--font-micro);
    text-transform: uppercase;
}

.lancamento-status.status-pending { background: #e2e8f0; color: #475569; }
.lancamento-status.status-submitted { background: #dbeafe; color: #1d4ed8; }
.lancamento-status.status-launched { background: #dcfce7; color: #166534; }

.lancamento-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.lancamento-steps .step {
    font-size: var(--font-compact);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #475569;
}

.lancamento-steps .step.done {
    background: #dcfce7;
    color: #166534;
}

.lancamento-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.lancamento-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--font-sm);
    color: #475569;
    margin-bottom: 6px;
}

.lancamento-summary strong { color: #0f172a; }

.detail-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-micro);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fef3c7;
    color: #92400e;
}

.lancamento-toggle {
    background: none;
    border: none;
    color: var(--dunamis-blue);
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin: 0 0 6px 0;
    text-align: left;
}

.lancamento-details {
    font-size: var(--font-md);
    color: #444;
    margin-bottom: 8px;
}

.lancamento-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.lancamento-actions .btn-mini {
    width: 100%;
    text-align: center;
}

.lancamento-actions .btn-danger {
    text-transform: none;
    font-weight: 700;
}

.ft-textarea {
    min-height: 90px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 10px;
    resize: vertical;
    font-size: var(--font-base);
    background: #fff;
}


.ft-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #d1d5db;
    background: #f8fafc;
}


.ft-actions-title {
    font-size: var(--font-xs);
    font-weight: 700;
    color: #475569;
}

.avisos-panel {
    background: var(--white);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.avisos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.avisos-header-actions {
    display: flex;
    gap: 8px;
}

.avisos-summary {
    font-size: var(--font-xs);
    font-weight: 700;
    color: #b45309;
    align-self: center;
}

.avisos-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.avisos-list {
    display: grid;
    gap: 12px;
}

.aviso-card {
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.aviso-card.pending {
    border-left: 4px solid #f59e0b;
}

.aviso-card.done {
    border-left: 4px solid #10b981;
    opacity: 0.6;
}

.aviso-card.done .aviso-title {
    text-decoration: line-through;
}

.aviso-card.overdue {
    border-left-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
}

.aviso-meta {
    display: flex;
    gap: 10px;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.aviso-priority {
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: var(--font-micro);
}

.aviso-priority.leve { background: #e0f2fe; color: #0369a1; }
.aviso-priority.normal { background: #fef3c7; color: #92400e; }
.aviso-priority.urgente { background: #fee2e2; color: #b91c1c; }

.aviso-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.aviso-scope {
    font-size: var(--font-md);
    color: #444;
    margin-bottom: 6px;
}

.aviso-message {
    font-size: var(--font-base);
    color: #222;
    margin-bottom: 8px;
}

.aviso-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.avisos-section {
    margin-bottom: 14px;
}

.avisos-section-title {
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
    margin: 10px 0 8px 0;
}

.avisos-section-body {
    display: grid;
    gap: 12px;
}

.pulse {
    animation: cardPulse 1.4s ease;
}

@keyframes cardPulse {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.aviso-flag {
    font-size: var(--font-compact);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
}

.aviso-flag.reminder {
    background: #e0f2fe;
    color: #075985;
}

.aviso-flag.assigned {
    background: #fef3c7;
    color: #92400e;
}

.aviso-status-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: var(--font-xs);
    font-weight: 700;
    background: #fff;
    color: #334155;
}

.aviso-done-meta {
    font-size: var(--font-xs);
    color: #475569;
    margin-top: 6px;
}

.aviso-timeline {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 6px;
}

.aviso-flag.simple {
    background: #fde68a;
    color: #92400e;
}

.aviso-reminder-meta {
    font-size: var(--font-xs);
    color: #0f172a;
    margin-bottom: 6px;
}

.aviso-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.avisos-form {
    background: var(--white);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--shadow);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.gateway-icon {
    color: var(--dunamis-blue);
    margin-bottom: 8px;
}

.gateway-card-general svg {
    stroke: var(--dunamis-blue);
}

.avisos-mini {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 320px;
    background: var(--white);
    box-shadow: var(--shadow);
    border-radius: 12px;
    padding: 12px;
    z-index: 2001;
}


.avisos-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.avisos-mini-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.avisos-mini-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
}

.avisos-mini-item.overdue {
    border-color: #dc2626;
    background: #fff5f5;
}

.avisos-mini-empty {
    font-size: var(--font-md);
    color: var(--text-muted);
}

.reminder-alerts {
    position: fixed;
    right: 20px;
    top: 80px;
    width: 340px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    box-shadow: 0 10px 24px rgba(124, 45, 18, 0.18);
    border-radius: 12px;
    padding: 12px;
    z-index: 2002;
}

.reminder-alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #9a3412;
}

.reminder-alerts-list {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.reminder-alert-item {
    background: #fff;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    padding: 8px;
}

.reminder-alert-item strong {
    display: block;
    font-size: var(--font-base);
    color: #9a3412;
    margin-bottom: 2px;
}

.reminder-alert-meta {
    font-size: var(--font-xs);
    color: #7c2d12;
}

.mini-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.mini-meta {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.history-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.history-entry {
    border-left: 3px solid var(--dunamis-blue);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fafbfe;
    border-radius: 6px;
}


.history-meta {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: 4px;
}


.history-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.history-detail {
    color: #444;
    font-size: var(--font-base);
    margin-bottom: 6px;
}


.history-changes {
    padding-left: 16px;
    margin: 0;
    color: #333;
    font-size: var(--font-md);
}


.member-item {
    padding: 6px 8px;
    border-bottom: 1px solid #f9f9f9;
}

.member-item:nth-child(even) {
    background-color: #f7f8fb;
}

.member-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: normal;
    cursor: pointer;
}

.member-re {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.btn-small {
    padding: 8px 16px;
    font-size: var(--font-sm);
}

/* NOTIFICAÇÕES TOAST */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--white);
    color: var(--text-color);
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-left: 5px solid var(--dunamis-blue);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
    animation: slideInRight 0.3s ease forwards;
}

.toast.success { border-left-color: #28a745; }
.toast.error { border-left-color: #dc3545; }
.toast.info { border-left-color: var(--dunamis-blue); }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateY(10px); }
}

/* IMPRESSÃO */
@media print {
    #scroll-top-btn,
    #print-view-btn,
    #help-btn {
        display: none !important;
    }

    .action-btn,
    .edit-btn-icon,
    .whatsapp-btn {
        display: none !important;
    }

    .result-card,
    .unit-section,
    .team-block,
    .unit-table-wrapper,
    .unit-members-list,
    .stat-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* BARRA DE ESTATÍSTICAS */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--white);
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
    border-bottom: 3px solid transparent;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card h4 { font-size: var(--font-sm); color: var(--text-secondary); text-transform: uppercase; margin-bottom: 5px; }
.stat-card .stat-value { font-size: var(--font-2xl); font-weight: bold; color: var(--dunamis-blue); }

.stat-card.total { border-bottom-color: var(--dunamis-blue); }
.stat-card.plantao { border-bottom-color: #dc3545; }
.stat-card.folga { border-bottom-color: #28a745; }

.stat-card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* BOTÃO SCROLL TOP */
#scroll-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--dunamis-blue);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

#scroll-top-btn.show {
    opacity: 1;
    pointer-events: auto;
}

#scroll-top-btn:hover {
    background-color: #001f52;
    transform: translateY(-3px);
}

/* BOTÃO TOGGLE AÇÕES */
#utility-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--dunamis-blue);
    color: white;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, background-color 0.3s;
}

#utility-toggle-btn:hover {
    background-color: #001f52;
    transform: translateY(-3px);
}

.utility-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

body.utility-open .utility-arrow {
    transform: rotate(90deg);
}

/* BOTÃO IMPRIMIR */
#print-view-btn {
    position: fixed;
    bottom: 76px;
    left: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--dunamis-blue);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, background-color 0.3s;
}

#print-view-btn:hover {
    background-color: #001f52;
    transform: translateY(-3px);
}

/* BOTÃO AJUDA */
#help-btn {
    position: fixed;
    bottom: 136px;
    left: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--dunamis-blue);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, background-color 0.3s;
}

#help-btn:hover {
    background-color: #001f52;
    transform: translateY(-3px);
}

/* BOTÃO PROMPTS */
#prompts-btn {
    position: fixed;
    bottom: 196px;
    left: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--dunamis-blue);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, background-color 0.3s;
}

#prompts-btn:hover {
    background-color: #001f52;
    transform: translateY(-3px);
}

/* BOTÃO GUIA */
#guide-btn {
    position: fixed;
    bottom: 256px;
    left: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--dunamis-blue);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, background-color 0.3s;
}

#guide-btn:hover {
    background-color: #001f52;
    transform: translateY(-3px);
}

.utility-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.utility-open .utility-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* RODAPÉ */
#site-footer {
    text-align: center;
    color: var(--text-subtle);
    font-size: var(--font-xs);
    padding: 10px 8px 14px;
}

#footer-updated {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .tabs {
        top: 60px;
    }

    #print-view-btn,
    #help-btn,
    #prompts-btn {
        padding: 12px;
        left: 12px;
    }

    #print-view-btn {
        bottom: 66px;
    }

    #help-btn {
        bottom: 120px;
    }

    #prompts-btn {
        bottom: 174px;
    }

    #utility-toggle-btn {
        left: 12px;
        bottom: 12px;
        padding: 8px 12px;
    }

    #site-footer {
        font-size: var(--font-compact);
        padding-bottom: 10px;
    }

    .gateway-grid {
        gap: 12px;
        margin-top: 1rem;
    }

    .gateway-card {
        padding: 1.2rem;
    }

    .gateway-card img {
        max-width: 90px;
        margin-bottom: 0.6rem;
    }

    .gateway-card h3 {
        font-size: var(--font-lg);
    }

    .gateway-card p {
        font-size: var(--font-md);
    }

    .gateway-access-grid {
        gap: 12px;
    }
}

/* MENU DE GERENCIAMENTO */
.management-menu {
    position: fixed;
    top: 60px;
    right: 20px;
    background: #111; /* Fundo escuro obrigatório */
    color: #e0e0e0;
    padding: 15px;
    width: 300px;
    z-index: 9999;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-size: var(--font-base);
    border: 1px solid #333;
}

.management-menu h3, .management-menu h4 {
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 8px;
    margin-bottom: 10px;
    font-size: var(--font-lg);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.management-menu input[type="text"], 
.management-menu input[type="password"] {
    background: #222;
    border: 1px solid #444;
    color: white;
    margin-bottom: 10px;
}

.management-menu button {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    background: var(--dunamis-blue);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.management-menu button:hover {
    background: #004494;
}

.status-badge-menu {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--font-xs);
    font-weight: bold;
    margin-left: 5px;
}

.status-badge-menu.edit { background-color: #dc3545; color: white; }
.status-badge-menu.view { background-color: #007bff; color: white; }

.management-menu.hidden {
    display: none;
}

#gearBtn {
    position: fixed;
    top: 15px;
    right: 20px;
    font-size: 22px;
    cursor: pointer;
    z-index: 10000;
    background: #111;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: none;
}

#gearBtn:hover {
    transform: rotate(90deg);
    transition: transform 0.3s;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
    .gateway-grid {
        grid-template-columns: 1fr;
    }
    
    header h1 {
        font-size: var(--font-sm);
    }

    .header-content {
        gap: 6px;
    }

    .header-left h1 {
        max-width: 180px;
    }

    .avisos-bell {
        margin-left: 0;
    }

    .tabs {
        justify-content: flex-start;
        overflow-x: auto;
        gap: 4px;
        padding: 6px 8px;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .reminder-alerts {
        left: 12px;
        right: 12px;
        width: auto;
        top: 70px;
    }

    .tab-btn {
        white-space: nowrap;
        padding: 12px 16px;
        font-size: var(--font-md);
        flex: 0 0 auto;
    }

    .unit-teams-container {
        grid-template-columns: 1fr; /* Empilha no mobile */
    }

    .modal-content {
        width: 95%;
        padding: 15px;
        max-height: 95vh;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .unit-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .avisos-shell {
        grid-template-columns: 1fr;
    }

    .lancamentos-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .lancamentos-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .lancamentos-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .lanc-action-group {
        width: 100%;
    }

    .lancamentos-mode-switch {
        width: auto;
        max-width: 100%;
    }

    .lancamentos-tabs {
        width: 100%;
    }

    .search-date-actions,
    .unit-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .ft-actions {
        width: 100%;
    }

    .lancamento-card {
        grid-template-columns: 1fr;
    }

    .lancamento-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .lancamento-actions .btn-mini {
        width: auto;
    }
}

.card-header .header-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-reason {
    grid-column: 1 / -1;
    font-size: var(--font-md);
    color: var(--text-secondary);
    margin-top: 6px;
}

.ai-reason-note {
    margin-top: 4px;
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: 600;
}

.address-status-badge {
    background: #e2e8f0;
    color: #334155;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: var(--font-compact);
    font-weight: 700;
}

.address-status-badge.ok {
    background: #10b981;
    color: #fff;
}

.address-status-badge.missing {
    background: #fee2e2;
    color: #991b1b;
}

.substitute-summary-card {
    border-left: 5px solid #0b4fb3;
}

.substitute-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.substitute-tier-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: var(--font-compact);
    font-weight: 700;
}

.substitute-tier-badge.ideal {
    background: #dcfce7;
    color: #166534;
}

.substitute-tier-badge.caution {
    background: #fef3c7;
    color: #92400e;
}

.substitute-tier-badge.blocked {
    background: #fee2e2;
    color: #991b1b;
}

.substitute-score-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: var(--font-compact);
    font-weight: 700;
}

.substitute-score-badge.ideal {
    background: #166534;
    color: #fff;
}

.substitute-score-badge.caution {
    background: #92400e;
    color: #fff;
}

.substitute-score-badge.blocked {
    background: #991b1b;
    color: #fff;
}

@media (max-width: 768px) {
    .card-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .card-header .header-right {
        width: auto;
        justify-content: flex-end;
    }
    .card-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) {
    .results-grid {
        gap: 12px;
    }
    .result-card {
        padding: 12px 14px;
    }
    .card-details-grid {
        gap: 8px;
    }
}

@media (max-width: 600px) {
    .result-card {
        padding: 12px;
        border-radius: 10px;
    }
    .card-header {
        margin-bottom: 10px;
    }
    .colaborador-nome {
        font-size: var(--font-lg);
    }
    .status-badge {
        font-size: var(--font-xs);
        padding: 3px 6px;
    }
    .card-details-grid {
        gap: 6px;
        font-size: var(--font-md);
    }
    .edit-btn-icon {
        width: 34px;
        height: 34px;
    }
    .edit-btn-icon svg {
        width: 16px;
        height: 16px;
    }
    .report-row {
        grid-template-columns: 1fr;
    }
    .report-bar {
        order: 2;
    }
    .report-value {
        justify-self: start;
    }
    .unit-section,
    .stat-card {
        padding: 12px;
    }
    .field-row input,
    .field-row select,
    .access-card input[type="text"],
    .access-card input[type="password"] {
        font-size: 16px;
    }
}

/* ==========================================================================
   NOVO FLUXO DE ACESSO (DO ZERO)
   ========================================================================== */
.access-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(0,120,255,0.25), transparent 60%),
        radial-gradient(800px 600px at 90% 20%, rgba(0,255,200,0.12), transparent 60%),
        rgba(6, 9, 13, 0.88);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.access-overlay.hidden { display: none; }

.access-shell {
    width: min(980px, 96vw);
    max-height: min(92vh, 900px);
    overflow: auto;
    background: linear-gradient(160deg, #0e151f 0%, #0b0f14 60%, #0a0d12 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    color: #e6edf7;
}

.access-hero {
    display: grid;
    gap: 6px;
    padding: 10px 6px 16px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}

.hero-mark {
    width: 44px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #00d4ff, #1a73e8, #0b4fb3);
    box-shadow: 0 0 16px rgba(0,180,255,0.6);
}

.hero-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.hero-subtitle {
    color: #9fb0c6;
    font-size: var(--font-base);
}

.access-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
}

.access-card {
    background: #111826;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 14px;
}

.card-title {
    font-size: var(--font-base);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c7d2e3;
    margin-bottom: 6px;
}

.card-subtitle {
    color: #97a6bf;
    font-size: var(--font-sm);
    margin-bottom: 12px;
}

.access-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.input-block label {
    display: block;
    font-size: var(--font-xs);
    color: #9fb0c6;
    margin-bottom: 6px;
}

.access-card input[type="text"],
.access-card input[type="password"] {
    width: 100%;
    background: #0e141e;
    border: 1px solid rgba(255,255,255,0.08);
    color: #e6edf7;
    border-radius: 12px;
    padding: 12px;
    outline: none;
    text-align: center;
    letter-spacing: 0.2em;
    font-weight: 700;
}

.pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.pad button {
    padding: 12px 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0f141d;
    color: #e6edf7;
    font-weight: 700;
    cursor: pointer;
}

.pad button:hover {
    background: #162133;
}

.pad-action {
    color: #aab7cb;
    text-transform: lowercase;
    font-size: var(--font-sm);
}

.btn-cta {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(180deg, #0b4fb3 0%, #083a84 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

.btn-cta:hover { filter: brightness(1.05); }

.btn-danger {
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(180deg, #c62828 0%, #8e1f1f 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

.card-footnote {
    margin-top: 10px;
    font-size: var(--font-xs);
    color: #7f8aa0;
}

.status-pill {
    background: #0f141d;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}

.pill-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--font-sm);
    color: #c4d0e3;
}

.source-pill {
    background: #0f141d;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 8px 10px;
    color: #c7d2e3;
    font-size: var(--font-sm);
    margin-bottom: 10px;
}

.source-pill div {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.section {
    margin-top: 12px;
}

.section-title {
    font-size: var(--font-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b9c3d6;
    margin-bottom: 8px;
}

.check-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 6px 0 !important;
    color: #c7d2e3;
}

.access-card input[type="checkbox"] {
    accent-color: #2f7cff;
    transform: translateY(1px);
}

.scroll-box {
    max-height: 130px;
    overflow-y: auto;
    background: #0f141d;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 6px;
}

.access-footer {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #8fa1ba;
    font-size: var(--font-xs);
}

.status-badge-menu {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: var(--font-compact);
    letter-spacing: 0.06em;
}

.status-badge-menu.edit { background-color: #b3261e; color: white; }
.status-badge-menu.view { background-color: #0b4fb3; color: white; }

.access-fab {
    position: fixed;
    top: 16px;
    right: 20px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(120% 120% at 30% 20%, #1b2431 0%, #0b0f14 70%);
    color: #e9edf3;
    font-size: var(--font-compact);
    letter-spacing: 0.2em;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 10000;
}

.access-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.55);
}

@media (max-width: 900px) {
    .access-grid { grid-template-columns: 1fr; }
    .actions { grid-template-columns: 1fr; }
    .access-shell { width: min(680px, 96vw); }
}

/* ==========================================================================
   CONFIGURAÇÃO (ABA) — PADRÃO DOS MODAIS
   ========================================================================== */
.config-shell {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.config-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    background: #eef2f7;
    padding: 6px;
    border-radius: 999px;
}

.config-tab {
    background: #f4f6f9;
    border: 1px solid #e5e7eb;
    color: #333;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--font-md);
}

.config-tab.active {
    background: #0b4fb3;
    color: #fff;
    border-color: #0b4fb3;
}

.config-pane.hidden { display: none; }

.config-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.config-section {
    margin-bottom: 16px;
}

.config-section-title {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 800;
    margin: 4px 0 8px;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.config-grid .config-card {
    margin-bottom: 0;
}

.config-summary {
    display: grid;
    gap: 10px;
}

.config-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.config-summary-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
}

.config-summary-card .label {
    font-size: var(--font-compact);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 700;
}

.config-summary-card .value {
    font-size: var(--font-lg);
    font-weight: 700;
    color: #0f172a;
}

.config-summary-card .meta {
    font-size: var(--font-compact);
    color: #6b7280;
    margin-top: 4px;
}

.config-summary .status-pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-compact);
    font-weight: 700;
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.config-summary .status-pill.ok {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.config-summary .status-pill.off {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.config-summary-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.summary-chip {
    background: #eef2f7;
    color: #475569;
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
}

.audit-list {
    display: grid;
    gap: 8px;
    font-size: var(--font-sm);
    color: #475569;
}

.audit-list .audit-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    background: #f8fafc;
}

.config-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.config-card-body {
    margin-top: 10px;
}

.card-toggle {
    border: none;
    background: #eef2f7;
    color: #334155;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.config-card.collapsed .config-card-body {
    display: none;
}

.config-card.collapsed .card-toggle {
    transform: rotate(180deg);
}

/* ── Role Permissions Table ── */
.role-perm-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-xs);
    overflow-x: auto;
    display: block;
}
.role-perm-grid thead,
.role-perm-grid tbody,
.role-perm-grid tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.role-perm-grid thead {
    display: table-header-group;
}
.role-perm-grid tbody {
    display: table-row-group;
}
.role-th-label,
.role-td-label {
    text-align: left;
    padding: 8px 6px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}
.role-th {
    padding: 8px 4px;
    text-align: center;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 2px solid #e2e8f0;
    font-size: var(--font-xs);
    letter-spacing: 0.02em;
}
.role-td {
    padding: 8px 4px;
    text-align: center;
    font-weight: 700;
    font-size: var(--font-sm);
}
.perm-yes {
    color: #15803d;
}
.perm-no {
    color: #cbd5e1;
}
.role-perm-grid tbody tr {
    border-bottom: 1px solid #f1f5f9;
}
.role-perm-grid tbody tr:last-child {
    border-bottom: none;
}

/* ── Role Detail Card (Minha Conta) ── */
.role-detail-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}
.role-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.role-badge.role-visitante { background: #94a3b8; }
.role-badge.role-operacional { background: #64748b; }
.role-badge.role-supervisor { background: #0e5ac8; }
.role-badge.role-coordenador { background: #7c3aed; }
.role-badge.role-gerencia { background: #b91c1c; }
.role-badge.role-administrador { background: #15803d; }
.admin-row-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.admin-row-clickable:hover {
    background: #f1f5f9;
}
.cfg-groups-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0;
}
.cfg-groups-checks label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-sm);
    cursor: pointer;
    text-transform: capitalize;
}
.pre-reg-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.pre-reg-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: var(--font-sm);
}
.pre-reg-item button {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
}
.pre-reg-item button:hover {
    background: #fee2e2;
}
.role-groups-text {
    font-size: var(--font-xs);
    color: #64748b;
}
.role-summary {
    font-size: var(--font-sm);
    color: #334155;
    margin: 6px 0 12px;
    line-height: 1.5;
}
.role-abilities,
.role-restrictions {
    margin-bottom: 8px;
}
.role-abilities strong,
.role-restrictions strong {
    font-size: var(--font-xs);
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.role-abilities ul,
.role-restrictions ul {
    margin: 4px 0 0 16px;
    padding: 0;
    font-size: var(--font-sm);
    color: #475569;
    line-height: 1.6;
}
.role-abilities li::marker { color: #15803d; }
.role-restrictions li::marker { color: #dc2626; }

.compact-toggle {
    display: none;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.filters-active {
    border-left: 3px solid #0b4fb3;
    padding-left: 8px;
}

.context-bar {
    position: sticky;
    bottom: 10px;
    z-index: 80;
    margin-top: 12px;
}

.context-bar.hidden {
    display: none;
}

.context-bar-inner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.context-title {
    font-size: var(--font-md);
    color: #0f172a;
    flex: 1;
}

.context-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.context-action,
.context-close {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
}

.context-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}




.config-card .btn,
.config-card .btn-secondary,
.config-card .btn-danger {
    padding: 10px 14px;
    font-size: var(--font-sm);
    border-radius: 8px;
    text-transform: none;
}

.config-card .card-title {
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 6px;
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.field-row label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.field-row input,
.field-row select {
    background: #fff;
    border: 1px solid #ddd;
    color: #222;
    border-radius: 8px;
    padding: 8px 10px;
}

.field-row-check {
    flex-direction: row;
    align-items: center;
}

.check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-base);
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--dunamis-blue);
    cursor: pointer;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.config-card .btn-primary,
.config-card .btn-danger {
    width: 100%;
    margin-top: 4px;
}

.config-card .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

.config-note {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 6px 0;
}

.validator-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    align-items: end;
}

.validator-status {
    margin-top: 10px;
    padding: 10px;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    display: grid;
    gap: 6px;
}

.validator-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.validator-pill.ok { background: #dcfce7; color: #166534; }
.validator-pill.warn { background: #fef3c7; color: #92400e; }
.validator-pill.error { background: #fee2e2; color: #991b1b; }

.validator-list {
    display: grid;
    gap: 4px;
    font-size: var(--font-sm);
    color: #475569;
}

.validator-list .error { color: #b91c1c; font-weight: 700; }
.validator-list .warn { color: #b45309; font-weight: 700; }
.validator-list .info { color: #475569; }

.validator-preview {
    margin-top: 10px;
    overflow-x: auto;
}

.validator-preview table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.validator-preview th,
.validator-preview td {
    border: 1px solid #e5e7eb;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.validator-preview th {
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 800;
}

.validator-empty {
    font-size: var(--font-sm);
    color: #94a3b8;
}


.status-block {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 10px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    color: #444;
    font-size: var(--font-sm);
}

.source-status {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    color: #444;
    font-size: var(--font-sm);
    margin-bottom: 10px;
}

.source-status div {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.source-list {
    display: grid;
    gap: 6px;
}

.source-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    color: #333;
    font-size: var(--font-sm);
}

.source-count {
    background: #eef2f7;
    color: #475569;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: var(--font-compact);
    font-weight: 700;
    margin-left: 6px;
}

.source-item {
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}

.source-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    cursor: pointer;
    list-style: none;
    font-size: var(--font-sm);
    color: #333;
    background: #f4f6f9;
}

.source-item summary::-webkit-details-marker { display: none; }

.source-link {
    padding: 6px 8px 10px 8px;
    border-top: 1px solid #eee;
    background: #fff;
}

.source-link a {
    color: var(--dunamis-blue);
    font-size: var(--font-sm);
    text-decoration: none;
}

.source-link a:hover { text-decoration: underline; }

.source-pill {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-compact);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.source-pill.ok { background: #1e7e34; color: white; }
.source-pill.off { background: #6c757d; color: white; }

.sub-title {
    margin: 8px 0 6px 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.divider {
    height: 1px;
    background: #eee;
    margin: 10px 0;
}

.hint {
    margin-top: 6px;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* EXPORTAÇÃO */
.export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.export-col h4 {
    margin-top: 0;
}

.export-note {
    font-size: var(--font-md);
    color: var(--text-secondary);
    margin: 6px 0;
}

@media (max-width: 768px) {
    .export-grid {
        grid-template-columns: 1fr;
    }

    .lanc-diaria-grid {
        grid-template-columns: 1fr;
    }
}











.config-gate {
    padding: 4px;
}

.config-gate .config-card {
    max-width: 520px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .form-grid-2 { grid-template-columns: 1fr; }
    .config-card .actions { grid-template-columns: 1fr; }
}


/* ==========================================================================
   REFINOS VISUAIS v3.9.1 (somente UI, sem alterar funcionalidades)
   ========================================================================== */

/* 3, 11 e 18) Header/breadcrumb mais legivel e layout mais coeso */
.header-content {
    gap: 10px;
}

.breadcrumb-bar {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

.breadcrumb-main,
.breadcrumb-meta {
    flex-wrap: wrap;
}

/* 4 e 10) Paleta semantica padronizada */
.auth-indicator {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.auth-indicator .dot {
    background: #16a34a;
}

.diaria-status.status-pending,
.lancamento-status.status-pending,
.roadmap-status.planejado {
    background: var(--surface-3);
    color: #475569;
}

.diaria-status.status-submitted,
.lancamento-status.status-submitted {
    background: var(--status-info-bg);
    color: var(--status-info-fg);
}

.diaria-status.status-launched,
.lancamento-status.status-launched,
.roadmap-status.concluido {
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

.roadmap-status.andamento {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

/* 5 e 8) Hierarquia visual de botoes e feedback de estado */
.btn {
    border: 1px solid transparent;
    border-radius: 10px;
    min-height: 44px;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-transform: none;
}

.btn:focus-visible,
.btn-mini:focus-visible,
.btn-secondary:focus-visible,
.tab-btn:focus-visible,
.filter-chip:focus-visible,
.action-btn:focus-visible,
.context-action:focus-visible,
.context-close:focus-visible,
.edit-btn-icon:focus-visible {
    outline: 3px solid rgba(11, 79, 179, 0.28);
    outline-offset: 2px;
}

.btn-secondary {
    background: transparent;
    color: var(--dunamis-blue);
    border-color: #9ab7e2;
}

.btn-secondary:hover {
    background: #e8f0ff;
    border-color: #6f98d8;
    color: #083f93;
}

.btn-danger,
.btn-mini.btn-danger {
    background: #b3261e;
    color: #fff;
    border-color: #b3261e;
}

.btn-danger:hover,
.btn-mini.btn-danger:hover {
    background: #8d1e18;
    border-color: #8d1e18;
}

.btn[disabled],
.btn-mini[disabled],
.context-action[disabled] {
    opacity: 0.55;
    filter: saturate(0.8);
    cursor: not-allowed;
}

/* 13) Filtros com estado ativo mais evidente e contador */
.filter-chip {
    border-radius: 999px;
    border-color: #d2dce9;
    color: #1f2937;
}

.filter-chip.active {
    background: #0b4fb3;
    border-color: #0b4fb3;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(11, 79, 179, 0.18);
}

.filter-chip .chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 999px;
    padding: 0 6px;
    font-size: var(--font-compact);
    font-weight: 800;
    background: rgba(15, 23, 42, 0.12);
    color: inherit;
}

.filter-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.24);
}

/* 6) Modal com mais contexto visual */
.modal {
    background-color: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(3px);
}

.modal-content {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    box-shadow: 0 22px 44px rgba(2, 6, 23, 0.25);
    animation: modalEnter var(--transition-base) ease;
}

@keyframes modalEnter {
    from { transform: translateY(10px) scale(0.985); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* 7 e 16) Hierarquia de cards e leitura de listas/tabelas */
.gateway-card {
    border: 1px solid #b8cdee;
    border-bottom-width: 4px;
    border-radius: var(--radius-md);
}

.result-card,
.unit-section,
.supervisao-card,
.lancamento-card,
.aviso-card,
.config-card,
.team-block,
.lanc-panel,
.lanc-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.06);
}

.config-summary-card,
.prompt-card,
.source-item,
.source-row,
.validator-status {
    border-color: #e4ebf3;
    background: #fbfdff;
}

.unit-table th {
    background-color: #eef4fb;
}

.unit-table tbody tr:nth-child(even) td {
    background: #fafcff;
}

.unit-table tbody tr:hover td {
    background: #edf4ff;
}

.unit-members-list .member-item + .member-item,
.admin-row + .admin-row,
.audit-list .audit-item + .audit-item,
.reminder-alerts-list > * + *,
.avisos-mini-list > * + * {
    border-top: 1px solid #e5e7eb;
}

.unit-members-list .member-item + .member-item,
.admin-row + .admin-row {
    margin-top: 6px;
    padding-top: 6px;
}

/* 8 e 20) Loading e empty states com feedback claro */
.loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #c9d7eb;
    border-top-color: #0b4fb3;
    border-radius: 50%;
    animation: spinLoader 0.7s linear infinite;
}

@keyframes spinLoader {
    to { transform: rotate(360deg); }
}

.empty-state {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    padding: 16px;
    font-style: normal;
}

.empty-state::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    margin-right: 8px;
    border: 1px solid #93b0da;
    color: #0b4fb3;
    font-weight: 800;
}

/* 8) Toasts com icone */
.toast {
    border-radius: 10px;
}

.toast-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    flex-shrink: 0;
}

.toast.success { border-left-color: #16a34a; }
.toast.error { border-left-color: #dc2626; }
.toast.info { border-left-color: #0b4fb3; }

.toast.success .toast-icon { background: #dcfce7; color: #166534; }
.toast.error .toast-icon { background: #fee2e2; color: #b91c1c; }
.toast.info .toast-icon { background: #dbeafe; color: #1d4ed8; }

/* 9, 12 e 15) Responsividade mobile, areas de toque e compacto */
.header-icon-btn,
.avisos-bell,
.action-btn,
.edit-btn-icon,
.context-action,
.context-close,
.close-modal,
#scroll-top-btn,
#utility-toggle-btn,
#print-view-btn,
#help-btn,
#prompts-btn,
#guide-btn {
    min-width: 44px;
    min-height: 44px;
}

.tab-btn svg,
.action-btn svg {
    width: 20px;
    height: 20px;
}

body.compact-mode #app-container {
    padding: var(--space-1);
}

body.compact-mode .search-container,
body.compact-mode .unit-section,
body.compact-mode .supervisao-card,
body.compact-mode .lancamento-card,
body.compact-mode .aviso-card,
body.compact-mode .config-card {
    margin-bottom: var(--space-1);
}

body.compact-mode .result-card,
body.compact-mode .unit-section,
body.compact-mode .supervisao-card,
body.compact-mode .lancamento-card,
body.compact-mode .aviso-card {
    padding: 10px 12px;
}

body.compact-mode .filter-chip {
    padding: 4px 8px;
}

/* 3, 9 e 18) Ajustes de densidade para mobile e desktop */
@media (max-width: 768px) {
    .header-content {
        gap: 6px;
    }

    .header-left h1 {
        max-width: 160px;
        font-size: var(--font-xs);
    }

    .auth-indicator {
        max-width: 140px;
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .breadcrumb-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .breadcrumb-meta {
        justify-content: flex-start;
        gap: 8px;
    }

    .tabs {
        padding: 8px;
        scroll-snap-type: x proximity;
    }

    .tab-btn {
        min-height: 44px;
        padding: 10px 14px;
        scroll-snap-align: start;
    }

    .search-date-filters,
    .unit-date-filters {
        gap: var(--space-1);
    }

    .search-date-field {
        min-width: 100%;
    }

    .menu-actions-row.search-date-actions,
    .menu-actions-row.unit-toolbar-actions {
        margin-left: 0;
    }
}

@media (min-width: 1180px) {
    #search-cards-grid.results-grid,
    #search-results.results-grid {
        grid-template-columns: 1fr;
    }

    .avisos-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lancamentos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 14) Tooltip visual */
.app-tooltip {
    position: fixed;
    z-index: 12000;
    max-width: min(320px, 70vw);
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
    font-size: var(--font-xs);
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.3);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.app-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* 17) Footer util */
#site-footer {
    border-top: 1px solid #d9e2ef;
    background: linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%);
    padding: 12px 10px 16px;
    margin-top: auto;
    width: 100%;
    flex-shrink: 0;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-item {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-xs);
    font-weight: 600;
}

.footer-dot {
    color: rgba(255, 255, 255, 0.45);
    font-size: var(--font-xs);
}

.footer-link {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0 2px;
}

.footer-link:hover {
    color: #fff;
}

/* Ajustes pedidos: lancamentos mais compactos no desktop */
@media (min-width: 769px) {
    .lancamentos-shell .btn,
    .lancamentos-actions .btn,
    .lanc-action-group .btn,
    .lanc-diaria-actions .btn {
        width: auto !important;
        min-height: 32px;
        padding: 6px 10px;
        font-size: var(--font-xs);
        border-radius: 8px;
    }

    .lancamentos-top {
        gap: 8px;
    }

    .lancamentos-meta {
        gap: 8px;
        font-size: var(--font-xs);
    }

    .lanc-action-group {
        padding: 6px 8px;
        gap: 6px;
    }

    .lancamentos-mode-btn {
        padding: 4px 8px;
        font-size: var(--font-xs);
    }

    .lancamentos-tabs {
        padding: 6px;
        gap: 6px;
    }

    .lancamentos-tab {
        padding: 6px 10px;
        font-size: var(--font-sm);
    }

    .lanc-diaria-hero {
        padding: 10px;
        gap: 10px;
    }

    .lanc-diaria-actions {
        gap: 6px;
    }
}

/* 19) Interacoes mais rapidas */
.btn,
.btn-secondary,
.btn-mini,
.tab-btn,
.filter-chip,
.action-btn,
.context-action,
.context-close,
.edit-btn-icon,
.gateway-card,
.result-card,
.unit-section,
.stat-card,
.lancamento-card,
.aviso-card,
#scroll-top-btn,
#utility-toggle-btn,
#print-view-btn,
#help-btn,
#prompts-btn,
#guide-btn {
    transition-duration: var(--transition-fast) !important;
}

/* Ajustes finais de compactacao e clareza visual */
.unit-colab-week {
    margin-top: 6px;
}

.week-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 26px;
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.2;
}

.ft-week-modal-body {
    padding: 12px 14px 16px;
}

.performance-modal-body {
    padding: 12px 14px 16px;
    display: grid;
    gap: 10px;
}

.performance-head {
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #f8fbff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.performance-title {
    font-size: var(--font-lg);
    font-weight: 800;
    color: #0f172a;
}

.performance-re {
    font-size: var(--font-sm);
    color: #475569;
}

.performance-meta {
    margin-top: 2px;
    font-size: var(--font-sm);
    color: #334155;
}

.performance-status {
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: var(--font-xs);
    font-weight: 700;
}

.performance-flags {
    display: grid;
    gap: 6px;
}

.perf-flag {
    border: 1px solid #dbe4f0;
    background: #fff;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: var(--font-xs);
    font-weight: 700;
    color: #334155;
    width: fit-content;
}

.perf-flag.reciclagem.ok {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.perf-flag.reciclagem.due {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.perf-flag.reciclagem.expired {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.perf-flag.reciclagem.unknown {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}

.performance-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.performance-kpi {
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

.performance-kpi .label {
    color: #64748b;
    font-size: var(--font-xs);
    font-weight: 700;
}

.performance-kpi .value {
    color: #0f172a;
    font-size: var(--font-sm);
    font-weight: 800;
    margin-top: 2px;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.performance-block {
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    padding: 9px;
}

.performance-block h4 {
    margin: 0 0 8px;
    font-size: var(--font-sm);
    color: #0f172a;
}

.performance-days {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 6px;
}

.performance-day {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 6px;
    display: grid;
    gap: 2px;
}

.performance-day-label {
    font-size: var(--font-xs);
    color: #334155;
    font-weight: 700;
}

.performance-day-duty {
    width: fit-content;
    border-radius: 999px;
    padding: 0 8px;
    font-size: var(--font-xs);
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
}

.performance-day.plantao .performance-day-duty {
    background: #fee2e2;
    color: #991b1b;
}

.performance-day.folga .performance-day-duty {
    background: #dcfce7;
    color: #166534;
}

.performance-day-ft {
    font-size: var(--font-compact);
    color: #475569;
    font-weight: 700;
}

.performance-lines {
    display: grid;
    gap: 6px;
}

.performance-line {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 7px;
    display: grid;
    gap: 1px;
    font-size: var(--font-xs);
    color: #334155;
}

.performance-line strong {
    color: #0f172a;
}

.performance-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
    color: #334155;
    font-size: var(--font-xs);
}

.ft-week-modal-body .ft-week-preview {
    margin-top: 0;
}

.ft-week-modal-body .ft-week-track {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ft-month-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ft-month-title {
    font-size: var(--font-lg);
    font-weight: 800;
    color: #0f172a;
    text-transform: capitalize;
}

.ft-month-subtitle {
    font-size: var(--font-xs);
    color: #64748b;
    font-weight: 600;
}

.ft-month-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 8px;
}

.ft-month-day {
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
    display: grid;
    gap: 4px;
    text-align: left;
    cursor: pointer;
    min-height: 94px;
}

.ft-month-day:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.ft-month-day.today {
    border-color: #60a5fa;
}

.ft-month-day.active {
    border-color: #0b4fb3;
    box-shadow: 0 0 0 2px rgba(11, 79, 179, 0.15);
}

.ft-month-day.has-ft {
    background: #f8fbff;
}

.ft-month-weekday {
    font-size: var(--font-xs);
    color: #1f2937;
    text-transform: capitalize;
    font-weight: 700;
}

.ft-month-date {
    font-size: var(--font-sm);
    color: #334155;
    font-weight: 800;
}

.ft-month-duty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0 8px;
    font-size: var(--font-xs);
    font-weight: 900;
}

.ft-month-duty.plantao {
    color: #991b1b;
    background: #fee2e2;
}

.ft-month-duty.folga {
    color: #166534;
    background: #dcfce7;
}

.ft-month-duty.unknown {
    color: #334155;
    background: #e2e8f0;
}

.ft-month-ft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: var(--font-compact);
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
}

.ft-month-ft.v {
    background: #dcfce7;
    color: #166534;
}

.ft-month-ft.e {
    background: #fef3c7;
    color: #92400e;
}

.ft-month-ft.d {
    background: #fee2e2;
    color: #991b1b;
}

.ft-month-ft.none {
    background: #f1f5f9;
    color: #64748b;
}

.ft-month-day-details {
    margin-top: 12px;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.ft-day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.ft-day-header-sub {
    color: #64748b;
    font-size: var(--font-xs);
    margin-top: 2px;
}

.ft-day-list {
    display: grid;
    gap: 8px;
}

.ft-day-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px;
}

.ft-day-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ft-day-item-meta {
    font-size: var(--font-xs);
    color: #334155;
}

.lanc-diaria-note {
    align-self: flex-start;
    border: 1px solid #dbeafe;
    background: #f8fafc;
    border-radius: 8px;
    padding: 6px 10px;
    color: #334155;
    font-size: var(--font-xs);
    font-weight: 600;
}

@media (min-width: 769px) {
    .menu-actions-row {
        gap: 6px;
    }

    .menu-actions-row .btn {
        width: auto !important;
        min-height: 32px;
        margin-bottom: 0;
        padding: 6px 10px;
        font-size: var(--font-xs);
        border-radius: 8px;
    }

    .result-card .ft-week-preview {
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .result-card .ft-week-track {
        grid-template-columns: repeat(7, minmax(54px, max-content));
        width: max-content;
    }

    .result-card .ft-week-chip {
        gap: 1px 3px;
        padding: 2px 4px;
    }
}

/* ==========================================================================
   UX/UI Sprint v4
   ========================================================================== */

body {
    transition: background-color var(--transition-base) ease, color var(--transition-base) ease;
}

.skip-link {
    position: absolute;
    left: 10px;
    top: -50px;
    z-index: 20000;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff;
    color: #0b4fb3;
    border: 1px solid #0b4fb3;
    font-size: var(--font-sm);
    text-decoration: none;
}

.skip-link:focus {
    top: 10px;
}

.header-content {
    gap: 10px;
}

#utility-menu-btn {
    margin-left: 0;
}

.utility-drawer {
    position: fixed;
    inset: 0;
    z-index: 12000;
}

.utility-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    backdrop-filter: blur(3px);
}

.utility-drawer-panel {
    position: absolute;
    right: 0;
    top: 0;
    width: min(360px, 92vw);
    height: 100%;
    background: var(--surface-1);
    border-left: 1px solid var(--border-soft);
    box-shadow: -14px 0 28px rgba(2, 6, 23, 0.18);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: drawerIn 0.2s ease;
}

.utility-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 8px;
}

.utility-drawer-actions {
    display: grid;
    gap: 8px;
}

@keyframes drawerIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Consolidado no drawer */
#utility-toggle-btn,
#print-view-btn,
#help-btn,
#prompts-btn,
#guide-btn,
#scroll-top-btn {
    display: none !important;
}

.search-bar {
    align-items: stretch;
}

.search-input-wrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 220px;
}

.search-input-wrap .search-input {
    width: 100%;
    padding-right: 38px;
}

.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 1px solid #d2dce9;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.search-clear-btn:hover {
    background: #f1f5f9;
}

.search-clear-btn:focus-visible,
.search-recent-item:focus-visible,
.search-favorite-item .btn-mini:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(11, 79, 179, 0.34);
    outline-offset: 2px;
}

.search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

.search-summary strong {
    color: var(--dunamis-blue);
}

.search-summary-meta {
    color: var(--text-muted);
    font-size: var(--font-xs);
}

.search-advanced {
    margin-top: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px;
    background: var(--surface-2);
}

.search-advanced-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.search-recent,
.search-favorites {
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

.search-recent-title,
.search-favorites-title {
    font-size: var(--font-xs);
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.search-recent-item {
    border: 1px solid #d2dce9;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: var(--font-xs);
    cursor: pointer;
}

.search-favorites-list {
    display: grid;
    gap: 6px;
}

.search-favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: var(--font-sm);
}

.search-favorite-item button {
    min-height: 32px;
}

/* Compactacao pontual: filtros avancados (Busca) */
#search-advanced-toggle {
    width: auto;
    margin: 0;
    min-height: 34px;
    padding: 6px 10px;
    font-size: var(--font-sm);
    text-transform: none;
    line-height: 1.2;
    align-self: center;
}

#search-advanced-panel.search-advanced {
    padding: 8px 10px;
}

#search-advanced-panel .search-date-filters {
    margin-top: 0;
    gap: 8px;
}

#search-advanced-panel .search-date-field {
    min-width: 130px;
    gap: 2px;
}

#search-advanced-panel .search-date-field label {
    font-size: var(--font-compact);
    letter-spacing: 0.06em;
}

#search-advanced-panel .search-date-field input[type="date"] {
    padding: 6px 8px;
    font-size: var(--font-sm);
    border-radius: 7px;
}

#search-advanced-panel .search-advanced-actions {
    margin-top: 6px;
    gap: 6px;
}

#search-advanced-panel .search-advanced-actions .btn {
    width: auto;
    margin: 0;
    min-height: 32px;
    padding: 5px 10px;
    font-size: var(--font-xs);
    text-transform: none;
}

/* Compactacao pontual: filtros da aba Unidades */
#tab-content-unidades .unit-filters {
    justify-content: flex-start;
    gap: 8px;
}

#tab-content-unidades .unit-filters .filter-select {
    width: auto;
    min-width: 210px;
    max-width: 250px;
    padding: 8px 10px;
    font-size: var(--font-sm);
    line-height: 1.2;
}

#tab-content-unidades .unit-date-filters {
    margin-top: 4px;
    gap: 8px;
    align-items: flex-end;
}

#tab-content-unidades .unit-date-filters .search-date-field {
    min-width: 170px;
    gap: 2px;
}

#tab-content-unidades .unit-date-filters .search-date-field label {
    margin-bottom: 2px;
}

#tab-content-unidades .unit-date-filters .search-date-field input[type="date"] {
    padding: 7px 9px;
    font-size: var(--font-sm);
}

#tab-content-unidades .unit-toolbar-actions .btn {
    width: auto;
    margin: 0;
    min-height: 34px;
    padding: 6px 10px;
    font-size: var(--font-sm);
    text-transform: none;
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.status-icon.plantao { background: #16a34a; }
.status-icon.folga { background: #f59e0b; }
.status-icon.afastado { background: #dc2626; }
.status-icon.outro { background: #64748b; }

.result-card {
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.tab-btn {
    position: relative;
    border-bottom: none;
}

.tab-btn::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 4px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease;
}

.tab-btn.active::after,
.tab-btn:hover::after {
    transform: scaleX(1);
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.14);
}

.favorite-btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.favorite-btn.active {
    color: #d97706;
    border-color: #fbbf24;
    background: #fff8e6;
}

.search-skeleton-grid {
    display: grid;
    gap: 10px;
}

.search-skeleton-grid .skeleton-card {
    border-left: 4px solid #c7d6ef;
}

.toast {
    min-width: 320px;
}

.toast.warning { border-left-color: #f59e0b; }
.toast.loading { border-left-color: #0ea5e9; }

.toast.warning .toast-icon { background: #fef3c7; color: #92400e; }
.toast.loading .toast-icon { background: #dbeafe; color: #0369a1; }

.toast-body {
    display: grid;
    gap: 4px;
}

.toast-title {
    font-weight: 700;
    font-size: var(--font-sm);
}

.toast-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.toast-actions .btn-mini {
    min-height: 28px;
    font-size: var(--font-xs);
    padding: 4px 8px;
}

.modal-open {
    overflow: hidden;
}

input:invalid,
select:invalid,
textarea:invalid {
    border-color: #dc2626;
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.required-mark {
    color: #dc2626;
    margin-left: 4px;
    font-weight: 800;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 10px 2px;
}

.detail-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
}

.detail-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #64748b;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 0.95rem;
    color: #111827;
    word-break: break-word;
}

@media (max-width: 768px) {
    .search-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-favorite-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .utility-drawer-panel {
        width: min(92vw, 340px);
    }

    #tab-content-unidades .unit-filters .filter-select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    #tab-content-unidades .unit-date-filters .search-date-field {
        min-width: 100%;
    }

    #tab-content-unidades .unit-toolbar-actions {
        width: 100%;
    }

    #tab-content-unidades .unit-toolbar-actions .btn {
        width: 100%;
    }
}

@media print {
    #tab-content-unidades .unit-filters .filter-select,
    #tab-content-unidades .unit-date-filters .search-date-field input[type="date"] {
        padding: 4px 6px;
        font-size: 10pt;
    }

    #tab-content-unidades .unit-toolbar-actions .btn {
        min-height: auto;
        padding: 4px 8px;
        font-size: 9pt;
    }
}

/* ==========================================================================
   CARDS PROFISSIONAIS + PÁGINA CRM DO COLABORADOR
   ========================================================================== */

/* --- Avatar --- */
.collab-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.collab-avatar-lg {
    width: 56px;
    height: 56px;
    min-width: 56px;
    font-size: 20px;
}

/* --- Card layout novo --- */
.card-name-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.card-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.card-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
}

.meta-sep {
    color: #cbd5e1;
    font-weight: 700;
}

.card-ft-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.card-actions-bar {
    gap: 6px !important;
}

.card-actions-bar .edit-btn-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nome clicável */
.colaborador-link {
    color: var(--dunamis-blue, #002d72);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
    font-weight: bold;
    font-size: 1.05rem;
}

.colaborador-link:hover {
    color: #0e5ac8;
    text-decoration: underline;
}

/* --- Página CRM do Colaborador --- */
.collab-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 16px;
}

.collab-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 16px;
}

.collab-breadcrumb a {
    color: var(--dunamis-blue, #002d72);
    text-decoration: none;
    font-weight: 600;
}

.collab-breadcrumb a:hover {
    text-decoration: underline;
}

.bc-sep { color: #cbd5e1; }
.bc-current { color: #1e293b; font-weight: 600; }

/* Header */
.collab-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cph-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.cph-info {
    min-width: 0;
}

.cph-name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.cph-subtitle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #64748b;
}

.cph-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.status-badge-lg {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Inner tabs */
.collab-inner-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
}

.collab-itab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -2px;
}

.collab-itab:hover {
    color: #1e293b;
    background: #f8fafc;
}

.collab-itab.active {
    color: var(--dunamis-blue, #002d72);
    border-bottom-color: var(--dunamis-blue, #002d72);
}

/* Section cards */
.collab-section-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.csc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.csc-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.csc-icon {
    font-size: 1.1rem;
}

.section-edit-btn {
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
}

.csc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0;
}

/* Individual fields */
.cpf-field {
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
}

.cpf-field-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpf-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 100px;
    flex-shrink: 0;
}

.cpf-value {
    font-size: 0.9rem;
    color: #1e293b;
    flex: 1;
    word-break: break-word;
}

.field-edit-btn {
    opacity: 0;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    color: #94a3b8;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
    flex-shrink: 0;
}

.cpf-field:hover .field-edit-btn {
    opacity: 1;
}

.field-edit-btn:hover {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* Field editing mode */
.cpf-field-editing {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cpf-field-editing.hidden {
    display: none;
}

.cpf-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.88rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}

.cpf-input:focus {
    border-color: var(--dunamis-blue, #002d72);
    box-shadow: 0 0 0 3px rgba(14, 90, 200, 0.1);
}

.cpf-textarea {
    min-height: 80px;
    resize: vertical;
}

.cpf-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cpf-cb-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
}

.cpf-field-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.cpf-save-btn {
    background: var(--dunamis-blue, #002d72) !important;
    color: #fff !important;
}

/* --- Histórico timeline --- */
.history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.history-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.history-empty p {
    margin: 4px 0;
}

.text-muted {
    font-size: 0.82rem;
    color: #94a3b8;
}

.history-timeline {
    padding: 20px 24px;
    position: relative;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 36px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #e2e8f0;
}

.timeline-entry {
    display: flex;
    gap: 16px;
    padding-bottom: 24px;
    position: relative;
}

.timeline-entry:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0e5ac8;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #0e5ac8;
    flex-shrink: 0;
    margin-top: 4px;
    z-index: 1;
}

.timeline-edit .timeline-marker { background: #0e5ac8; box-shadow: 0 0 0 2px #0e5ac8; }
.timeline-create .timeline-marker { background: #16a34a; box-shadow: 0 0 0 2px #16a34a; }
.timeline-delete .timeline-marker { background: #dc2626; box-shadow: 0 0 0 2px #dc2626; }

.timeline-content {
    flex: 1;
    min-width: 0;
}

.timeline-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.timeline-date {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 500;
}

.timeline-user {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

.timeline-action {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
    margin-bottom: 2px;
}

.timeline-detail {
    font-size: 0.82rem;
    color: #64748b;
    margin-bottom: 6px;
}

.timeline-changes {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 6px;
}

.timeline-diff {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    padding: 4px 0;
}

.timeline-diff + .timeline-diff {
    border-top: 1px solid #f1f5f9;
}

.diff-field {
    font-weight: 600;
    color: #475569;
    min-width: 80px;
}

.diff-from {
    color: #dc2626;
    background: #fef2f2;
    padding: 1px 6px;
    border-radius: 3px;
    text-decoration: line-through;
}

.diff-arrow {
    color: #94a3b8;
    font-weight: 700;
}

.diff-to {
    color: #16a34a;
    background: #f0fdf4;
    padding: 1px 6px;
    border-radius: 3px;
}

/* --- Conformidade cards --- */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 20px;
}

.compliance-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    position: relative;
    transition: box-shadow 0.15s;
}

.compliance-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.compliance-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.compliance-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}

.compliance-value {
    font-size: 0.85rem;
    color: #1e293b;
    font-weight: 500;
    word-break: break-word;
}

.compliance-status-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
}

.compliance-ok .compliance-status-dot { background: #16a34a; }
.compliance-warning .compliance-status-dot { background: #f59e0b; }
.compliance-expired .compliance-status-dot { background: #dc2626; }
.compliance-unknown .compliance-status-dot { background: #94a3b8; }

.compliance-ok { border-color: #bbf7d0; }
.compliance-warning { border-color: #fde68a; background: #fffbeb; }
.compliance-expired { border-color: #fecaca; background: #fef2f2; }

/* --- Responsivo --- */
@media (max-width: 768px) {
    .collab-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cph-right {
        width: 100%;
        justify-content: flex-start;
        margin-top: 8px;
    }
    .csc-fields {
        grid-template-columns: 1fr;
    }
    .compliance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-name-block {
        max-width: calc(100vw - 200px);
    }
    .header-left {
        gap: 10px;
    }
    .card-actions-bar {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .compliance-grid {
        grid-template-columns: 1fr;
    }
    .collab-inner-tabs {
        overflow-x: auto;
    }
    .collab-itab {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
}

/* ==========================================================================
   BIG BANG UX/UI OPERACIONAL (MOBILE + CAMPO)
   ========================================================================== */

:root {
    --ops-navy: #081b35;
    --ops-sky: #0e5ac8;
    --ops-mint: #0f8a6a;
    --ops-surface: #f6f9fc;
    --ops-shadow: 0 10px 24px rgba(7, 21, 43, 0.16);
}

body {
    background:
        radial-gradient(1200px 520px at 15% -8%, rgba(14, 90, 200, 0.13), transparent 62%),
        radial-gradient(900px 480px at 90% -12%, rgba(15, 138, 106, 0.09), transparent 58%),
        var(--ops-surface);
}

header {
    background: linear-gradient(135deg, #001b45 0%, var(--dunamis-blue) 40%, #0a3a7a 100%);
}

#app-title {
    font-size: clamp(0.82rem, 1.1vw + 0.55rem, 1.15rem);
    letter-spacing: 0.04em;
}

.btn,
.tab-btn,
.filter-chip,
.header-icon-btn,
.lancamentos-tab,
.reciclagem-tab,
.config-tab,
.context-action,
.context-close {
    border-radius: 12px;
}

.btn {
    min-height: 44px;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(8, 27, 53, 0.18);
}

.btn:hover {
    transform: translateY(-1px);
}

.network-pill {
    margin-left: auto;
    font-size: var(--font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 5px 10px;
    border: 1px solid transparent;
    background: rgba(220, 252, 231, 0.18);
    color: #dcfce7;
}

.network-pill.online {
    border-color: rgba(187, 247, 208, 0.32);
    background: rgba(34, 197, 94, 0.18);
    color: #dcfce7;
}

.network-pill.offline {
    border-color: rgba(254, 202, 202, 0.42);
    background: rgba(220, 38, 38, 0.2);
    color: #fee2e2;
}

.gateway-ops-hint {
    width: min(1000px, 100%);
    background: linear-gradient(135deg, #0f2e57, #0b4fb3 60%, #198f71);
    color: #ffffff;
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--ops-shadow);
}

.gateway-ops-hint h3 {
    margin: 0 0 8px 0;
    font-size: var(--font-lg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gateway-ops-hint p {
    margin: 6px 0 0 0;
    font-size: var(--font-sm);
    opacity: 0.95;
}

.hint-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hint-steps span {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: var(--font-xs);
    font-weight: 700;
}

.mobile-ops-dock {
    display: none;
}

@media (max-width: 900px) {
    body {
        padding-bottom: 74px;
    }

    #utility-menu-btn,
    #utility-drawer {
        display: none !important;
    }

    .tabs {
        top: 66px;
        margin-bottom: 12px;
        border-bottom: none;
        border: 1px solid #d9e5f2;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
    }

    .tab-btn {
        border-radius: 10px;
        min-height: 42px;
        font-size: var(--font-sm);
        padding: 10px 12px;
    }

    #site-footer {
        margin-bottom: 56px;
    }

    .mobile-ops-dock {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 2100;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
        border-radius: 16px;
        border: 1px solid #bfd1e8;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px);
        box-shadow: 0 14px 36px rgba(8, 27, 53, 0.24);
    }

    .ops-dock-btn {
        min-height: 46px;
        border: 1px solid #d6e3f3;
        border-radius: 12px;
        background: #f8fbff;
        color: #12345b;
        display: grid;
        place-items: center;
        gap: 2px;
        font-size: 0.65rem;
        font-weight: 700;
        cursor: pointer;
        line-height: 1.1;
        transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
    }

    .ops-dock-btn .icon {
        font-size: 0.92rem;
        font-weight: 900;
    }

    .ops-dock-btn:hover {
        transform: translateY(-1px);
        border-color: #9fbce0;
    }

    .ops-dock-btn.active {
        background: linear-gradient(180deg, #0b4fb3, #083f8f);
        border-color: #083f8f;
        color: #ffffff;
        box-shadow: 0 8px 16px rgba(11, 79, 179, 0.35);
    }

    .header-content {
        gap: 6px;
    }

    .header-left h1 {
        max-width: 160px;
    }

    .network-pill {
        margin-left: 0;
    }
}

@media (max-width: 540px) {
    .gateway-ops-hint {
        padding: 10px;
    }

    .gateway-ops-hint h3 {
        font-size: var(--font-base);
    }

    .hint-steps span {
        font-size: var(--font-compact);
    }

    .ops-dock-btn {
        min-height: 44px;
    }
}

/* ==================================================================
   BUSCA AVANÇADA — Autocomplete, Toolbar, Table, Bulk, Groups
   ================================================================== */

/* ── Autocomplete Dropdown ── */
.search-autocomplete {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--white);
    border: 1px solid #e0e5ee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 340px;
    overflow-y: auto;
    padding: 6px 0;
}

.search-autocomplete.hidden { display: none; }

.ac-section-title {
    padding: 6px 14px 4px;
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--font-base);
    text-align: left;
    color: var(--text-primary);
    transition: background 0.1s;
}

.ac-item:hover, .ac-item:focus {
    background: #f0f4f8;
}

.ac-item.ac-recent {
    color: #555;
}

.ac-item.ac-recent::before {
    content: '↻';
    font-size: 1rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.ac-name {
    font-weight: 600;
    flex-shrink: 0;
}

.ac-meta {
    font-size: var(--font-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Search Extra Filters Row ── */
.search-extra-filters {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* ── Search Toolbar ── */
.search-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #e6e9ef;
    flex-wrap: wrap;
}

.search-toolbar-left,
.search-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-toolbar-select {
    padding: 5px 8px;
    font-size: var(--font-sm);
    border: 1px solid #ddd;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
}

.search-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    transition: background 0.15s, border-color 0.15s;
}

.search-toolbar-btn:hover {
    background: #f0f4f8;
    border-color: #b0bec5;
}

.search-toolbar-btn.active {
    background: var(--dunamis-blue);
    color: #fff;
    border-color: var(--dunamis-blue);
}

/* ── Search Highlight ── */
mark.search-hl {
    background: #fef08a;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ── Active Dot ── */
.avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.active-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--white);
}

.active-dot-on {
    background: #22c55e;
}

.active-dot-off {
    background: #94a3b8;
}

/* ── Card Name Block ── */
.card-name-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.card-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.card-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.meta-sep {
    color: #cbd5e1;
}

/* ── Escala Badge ── */
.escala-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.escala-badge-default {
    background: #f1f5f9;
    color: #475569;
}

.escala-badge-12x36 {
    background: #dbeafe;
    color: #1d4ed8;
}

.escala-badge-44h {
    background: #fef3c7;
    color: #92400e;
}

.escala-badge-24h {
    background: #fce7f3;
    color: #9d174d;
}

.escala-badge-sd {
    background: #d1fae5;
    color: #065f46;
}

/* ── Card Selected State ── */
.card-select-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--dunamis-blue);
}

.result-card.card-selected {
    outline: 2px solid var(--dunamis-blue);
    outline-offset: -2px;
    background-color: rgba(59, 111, 179, 0.04);
}

/* ── Card Hover Preview ── */
.card-hover-preview {
    display: none;
    font-size: var(--font-sm);
    color: var(--text-muted);
    padding: 6px 0 0;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}

.result-card:hover .card-hover-preview {
    display: block;
}

/* ── Card FT Row ── */
.card-ft-row {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
}

/* ── Search Bulk Bar ── */
.search-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.search-bulk-bar.hidden {
    display: none;
}

.search-bulk-bar span {
    font-size: var(--font-base);
    color: #3730a3;
}

.search-bulk-bar .btn-sm {
    padding: 4px 12px;
    font-size: var(--font-sm);
}

.search-bulk-bar .btn-outline {
    background: transparent;
    border: 1px solid #a5b4fc;
    color: #4338ca;
}

/* ── Search Load More ── */
.search-load-more {
    text-align: center;
    padding: 16px 0;
}

.search-load-more .btn-std {
    padding: 10px 24px;
}

/* ── Search Group ── */
.search-group {
    margin-bottom: 20px;
}

.search-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dunamis-blue);
    border-bottom: 2px solid #e6e9ef;
    margin-bottom: 12px;
}

.search-group-count {
    background: #e0e7ef;
    color: #475569;
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ── Table View ── */
.search-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-base);
}

/* ── Search Table Scroll Wrapper ── */
.search-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
}

.search-table {
    min-width: 1200px;
}

.search-table-header {
    display: grid;
    grid-template-columns: 36px 1.6fr 0.7fr 1fr 0.8fr 0.8fr 0.7fr 0.6fr 0.8fr 0.9fr 0.6fr 0.7fr 0.7fr 0.7fr 80px;
    gap: 4px;
    padding: 8px 10px;
    background: #f1f5f9;
    border-bottom: 2px solid #e0e5ee;
    font-weight: 700;
    font-size: var(--font-sm);
    color: #475569;
}

.search-table-row {
    display: grid;
    grid-template-columns: 36px 1.6fr 0.7fr 1fr 0.8fr 0.8fr 0.7fr 0.6fr 0.8fr 0.9fr 0.6fr 0.7fr 0.7fr 0.7fr 80px;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
    transition: background 0.1s;
}

.search-table-row:hover {
    background: #f8f9fc;
}

.search-table-row.card-selected {
    background: rgba(59, 111, 179, 0.06);
}

.st-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-cell.st-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

.st-cell.st-name a {
    color: var(--dunamis-blue);
    font-weight: 600;
    text-decoration: none;
}

.st-cell.st-name a:hover {
    text-decoration: underline;
}

.st-cell.st-actions {
    display: flex;
    gap: 4px;
}

/* ── Unit Link in Cards ── */
.unit-link {
    cursor: pointer;
    color: var(--dunamis-blue);
    text-decoration: none;
}

.unit-link:hover {
    text-decoration: underline;
}

/* ── Card Actions Bar ── */
.card-actions-bar {
    flex-shrink: 0;
}

/* ── Responsive: Table View ── */
@media (max-width: 768px) {
    .search-table-header,
    .search-table-row {
        grid-template-columns: 30px 1fr 0.6fr 0.7fr 0.7fr 0.7fr;
    }
    .st-cell.st-grupo,
    .st-cell.st-turno,
    .st-cell.st-empresa,
    .st-cell.st-telefone,
    .st-cell.st-turma,
    .st-cell.st-admissao,
    .st-cell.st-afastamento,
    .st-cell.st-cargo,
    .st-cell.st-actions {
        display: none;
    }
    .search-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .search-extra-filters {
        flex-direction: column;
    }
}

/* ==================================================================
   BIG BANG FASE 2 — REDESIGN FLUXOS A–H + COMPONENTES + ESTADOS
   Corporativa Premium × Operacional Moderna — v4.2
   ================================================================== */

/* ── TIPOGRAFIA GLOBAL ── */
h2 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 700; }
h4 { font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 700; }
label { font-weight: 600; font-size: var(--font-sm); }

/* ── INPUTS GLOBAL ── */
input[type=text]:not(.search-input):not(#search-input):not(#unit-search-input),
input[type=email],
input[type=password],
input[type=date],
input[type=number],
textarea {
    min-height: 44px;
    border-radius: 10px;
    border: 1.5px solid #d1d9e8;
    padding: 10px 14px;
    font-size: var(--font-base);
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=number]:focus,
textarea:focus {
    border-color: var(--ops-sky);
    box-shadow: 0 0 0 3px rgba(14, 90, 200, 0.18);
}
input::placeholder, textarea::placeholder { color: #94a3b8; }

/* ── FLUXO A — TELA DE LOGIN ── */
.config-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 16px;
}
#config-login .config-card {
    border: none;
    box-shadow: 0 24px 60px rgba(8, 27, 53, 0.18);
    border-radius: 20px;
    overflow: hidden;
    max-width: 460px;
    width: 100%;
}
#config-login .config-card-header {
    background: linear-gradient(135deg, var(--ops-navy), #0b4fb3);
    color: #fff;
    padding: 22px 26px 18px;
}
#config-login .card-title {
    font-size: var(--font-xl);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
#config-login .config-card-body {
    padding: 26px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#config-login .field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#loginEmail, #loginPassword {
    min-height: 52px;
    font-size: var(--font-base);
}
#config-login .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
#config-login .actions .btn:first-child {
    min-height: 52px;
    font-size: var(--font-base);
    background: linear-gradient(135deg, var(--ops-sky) 0%, #0a3fa8 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(14, 90, 200, 0.35);
}
#config-login .actions .btn:first-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(14, 90, 200, 0.45);
}
#config-login .hint {
    text-align: center;
    font-size: var(--font-sm);
    color: #64748b;
    margin-top: 4px;
}

/* ── FLUXO B — GATEWAY / SELEÇÃO DE GRUPO ── */
#gateway {
    padding: 16px 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
#gateway h2 {
    color: var(--ops-navy);
    margin: 8px 0 0;
    text-align: center;
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
}
.gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 900px;
}
.gateway-card {
    border-radius: 18px;
    border: 1.5px solid rgba(0, 45, 114, 0.12);
    background: #fff;
    box-shadow: 0 8px 24px rgba(8, 27, 53, 0.09);
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    text-align: center;
    min-height: 140px;
    justify-content: center;
}
.gateway-card:hover,
.gateway-card:focus-within {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 18px 40px rgba(8, 27, 53, 0.18);
    border-color: rgba(14, 90, 200, 0.35);
}
.gateway-card:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}
.gateway-card img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border-radius: 14px;
}
.gateway-card h3 {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--ops-navy);
    margin: 0;
    line-height: 1.3;
}
.gateway-card p {
    font-size: var(--font-sm);
    color: #64748b;
    margin: 0;
}
.gateway-card-general {
    background: linear-gradient(135deg, #f0f6ff, #e6f0fb);
    border-color: rgba(14, 90, 200, 0.25);
}
.gateway-card-general .gateway-icon svg { color: var(--ops-sky); }
.gateway-card-access {
    background: linear-gradient(135deg, #f8f9fc, #f0f4f9);
}
.gateway-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 900px;
}
.gateway-icon { color: var(--ops-sky); line-height: 0; }
.gateway-links { margin-top: 4px; text-align: center; }
.gateway-links .btn {
    background: transparent;
    border: 1.5px solid rgba(14, 90, 200, 0.3);
    color: var(--ops-sky);
    font-size: var(--font-sm);
    padding: 8px 20px;
    min-height: 40px;
}
.gateway-links .btn:hover { background: rgba(14, 90, 200, 0.07); }

/* ── ABAS DE NAVEGAÇÃO ── */
.tabs {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(246, 249, 252, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 12px;
    gap: 6px;
    border-bottom: 1.5px solid rgba(0, 45, 114, 0.1);
    box-shadow: 0 2px 12px rgba(8, 27, 53, 0.07);
}
.tab-btn {
    font-weight: 700;
    font-size: var(--font-sm);
    letter-spacing: 0.01em;
    color: #475569;
    background: transparent;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    transition: all 0.15s;
    position: relative;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.tab-btn:hover { background: rgba(14, 90, 200, 0.08); color: var(--ops-sky); }
.tab-btn.active {
    background: linear-gradient(135deg, var(--ops-sky), #0a3fa8) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(14, 90, 200, 0.32);
}
.tab-btn.active:hover { transform: none; }
.tab-badge {
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.6;
}

/* ── BREADCRUMB ── */
.breadcrumb-bar {
    background: #fff;
    border: 1px solid rgba(0, 45, 114, 0.09);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--font-sm);
    box-shadow: 0 2px 8px rgba(8, 27, 53, 0.05);
}
.breadcrumb-sep { color: #94a3b8; }
#breadcrumb-group, #breadcrumb-tab, #breadcrumb-context { font-weight: 600; color: var(--ops-navy); }
.breadcrumb-updated { color: #94a3b8; font-size: var(--font-xs); }
.group-pill {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 700;
    background: linear-gradient(135deg, var(--ops-sky), #0a3fa8);
    color: #fff;
}

/* ── FLUXO C — BUSCA RÁPIDA ── */
.search-container {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 45, 114, 0.09);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(8, 27, 53, 0.07);
}
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.search-input-wrap {
    flex: 1;
    position: relative;
    min-width: 200px;
}
#search-input,
#unit-search-input {
    min-height: 48px;
    font-size: var(--font-base);
    padding: 0 44px 0 16px;
    border-radius: 12px;
    border: 2px solid rgba(14, 90, 200, 0.2);
    background: #f8faff;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.15s;
}
#search-input:focus,
#unit-search-input:focus {
    background: #fff;
    border-color: var(--ops-sky);
    box-shadow: 0 0 0 4px rgba(14, 90, 200, 0.14);
    outline: none;
}
.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #e2e8f0;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #64748b;
    cursor: pointer;
    transition: background 0.1s;
}
.search-clear-btn:hover { background: #cbd5e1; }
.search-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0 4px;
}
.filter-chip {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--font-sm);
    font-weight: 700;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
    min-height: 34px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}
.filter-chip:hover { background: #e2e8f0; border-color: #94a3b8; }
.filter-chip.active {
    background: linear-gradient(135deg, var(--ops-sky), #0a3fa8);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 90, 200, 0.28);
}
.search-advanced {
    padding: 12px 0 6px;
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}
.search-date-filters {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.search-date-field { display: flex; flex-direction: column; gap: 4px; }
.search-summary {
    background: linear-gradient(135deg, #f0f6ff, #e6f0fb);
    border: 1px solid rgba(14, 90, 200, 0.15);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--ops-navy);
    margin-top: 8px;
}
.search-suggestions {
    background: #fff;
    border: 1.5px solid rgba(14, 90, 200, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(8, 27, 53, 0.12);
    overflow: hidden;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
}
.search-recent, .search-favorites {
    background: #f8faff;
    border: 1px solid #e8f0fe;
    border-radius: 12px;
    padding: 12px;
    margin-top: 8px;
}
.search-recent-title, .search-favorites-title {
    font-size: var(--font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 8px;
}
.search-recent-item {
    display: inline-block;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: var(--font-sm);
    cursor: pointer;
    margin: 3px;
    transition: all 0.1s;
    min-height: 32px;
}
.search-recent-item:hover { background: #e8f0fe; border-color: var(--ops-sky); color: var(--ops-sky); }
.search-favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.1s;
    min-height: 44px;
}
.search-favorite-item:hover { background: rgba(14, 90, 200, 0.05); }
.search-skeleton-grid { display: grid; gap: 10px; }
.skeleton-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 16px;
}
.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.6s linear infinite;
    margin-bottom: 8px;
}
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-90 { width: 90%; }
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.results-grid > * {
    animation: fadeInUp 0.18s ease both;
}
.results-grid > *:nth-child(2) { animation-delay: 0.04s; }
.results-grid > *:nth-child(3) { animation-delay: 0.08s; }
.results-grid > *:nth-child(4) { animation-delay: 0.12s; }
.results-grid > *:nth-child(n+5) { animation-delay: 0.16s; }
.substitute-panel {
    background: #f0f7ff;
    border: 1.5px solid rgba(14, 90, 200, 0.2);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
}
.substitute-target-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.substitute-target-info { display: flex; flex-direction: column; gap: 2px; }
.substitute-target-meta { font-size: var(--font-xs); color: #64748b; }
.substitute-label { font-size: var(--font-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.substitute-options { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ── FLUXO D — UNIDADES / EFETIVOS ── */
.stats-bar {
    background: #fff;
    border: 1px solid rgba(0, 45, 114, 0.1);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(8, 27, 53, 0.06);
}
.unit-section {
    background: #fff;
    border: 1px solid rgba(0, 45, 114, 0.1);
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(8, 27, 53, 0.05);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.unit-section:hover { box-shadow: 0 6px 20px rgba(8, 27, 53, 0.1); }
.unit-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8faff, #f0f5fd);
    border-bottom: 1px solid rgba(0, 45, 114, 0.08);
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--ops-navy);
    flex-wrap: wrap;
    gap: 8px;
}
.unit-labeled > .unit-title { border-left: 4px solid var(--ops-sky); }
.unit-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.action-btn {
    min-height: 36px;
    min-width: 36px;
    padding: 6px;
    border-radius: 8px;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-btn:hover { background: rgba(14, 90, 200, 0.1); color: var(--ops-sky); }
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ops-sky);
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 22px;
    line-height: 1.5;
}
.unit-aviso-badge, .unit-reminder-badge, .unit-ft-badge, .unit-label-badge {
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.5;
}
.unit-aviso-badge { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.unit-reminder-badge { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.unit-ft-badge { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.unit-label-badge { background: #f0f6ff; color: var(--ops-sky); border: 1px solid rgba(14, 90, 200, 0.2); }

/* ── FLUXO E — AVISOS ── */
.avisos-shell { display: flex; flex-direction: column; gap: 16px; }
.avisos-panel {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 45, 114, 0.1);
    box-shadow: 0 2px 10px rgba(8, 27, 53, 0.06);
    overflow: hidden;
}
.avisos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8faff, #f0f5fd);
    border-bottom: 1px solid rgba(0, 45, 114, 0.1);
}
.avisos-header h3 { margin: 0; font-size: var(--font-lg); font-weight: 800; color: var(--ops-navy); }
.avisos-header-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.avisos-filters {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid #f1f5f9;
}
.avisos-mini {
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(8, 27, 53, 0.18);
    border: 1px solid rgba(0, 45, 114, 0.12);
}
.avisos-mini-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--ops-navy), #0b4fb3);
    color: #fff;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aviso-card { border-left: 4px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.aviso-card[data-priority=urgente] { border-left-color: #dc2626; }
.aviso-card[data-priority=alta] { border-left-color: #f97316; }
.aviso-card[data-priority=normal] { border-left-color: var(--ops-sky); }
.aviso-card[data-priority=leve] { border-left-color: #22c55e; }
.aviso-card.status-done { opacity: 0.62; }
.avisos-summary { font-size: var(--font-xs); color: #64748b; font-weight: 600; }

/* ── FLUXO F — RECICLAGEM ── */
.reciclagem-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(8, 27, 53, 0.05);
    padding: 14px 16px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s;
}
.reciclagem-card:hover { box-shadow: 0 6px 20px rgba(8, 27, 53, 0.1); }
.reciclagem-card.status-expired { border-left-color: #dc2626; background: #fff8f8; }
.reciclagem-card.status-due { border-left-color: #f97316; background: #fffaf5; }
.reciclagem-card.status-ok { border-left-color: #22c55e; }
.reciclagem-card.status-unknown { border-left-color: #94a3b8; }
.reciclagem-card.status-mixed { border-left-color: var(--ops-sky); }
.reciclagem-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.reciclagem-title { font-weight: 700; color: var(--ops-navy); font-size: var(--font-base); }
.reciclagem-re { font-size: var(--font-sm); color: #64748b; margin-top: 2px; }
.reciclagem-chip {
    border-radius: 8px;
    padding: 6px 10px;
    font-size: var(--font-xs);
    border: 1px solid #e2e8f0;
    background: #f8faff;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 78px;
}
.reciclagem-chip.status-expired { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.reciclagem-chip.status-due { background: #fffbeb; border-color: #fde68a; color: #d97706; }
.reciclagem-chip.status-ok { background: #f0fdf4; border-color: #bbf7d0; color: #16a34a; }
.reciclagem-chip.status-unknown { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.chip-label { font-weight: 700; font-size: var(--font-xs); }
.chip-date { font-size: var(--font-xs); opacity: 0.8; }
.reciclagem-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reciclagem-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: var(--font-sm);
    border-bottom: 1px solid #f8fafc;
}
.reciclagem-line-label { flex: 1; font-weight: 600; color: var(--ops-navy); }
.reciclagem-line-date { color: #64748b; font-size: var(--font-xs); }
.reciclagem-line-status { font-weight: 700; font-size: var(--font-xs); }
.reciclagem-line.status-expired .reciclagem-line-status { color: #dc2626; }
.reciclagem-line.status-due .reciclagem-line-status { color: #d97706; }
.reciclagem-line.status-ok .reciclagem-line-status { color: #16a34a; }
.reciclagem-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8faff;
    border: 1px solid rgba(14, 90, 200, 0.15);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--ops-navy);
}
.reciclagem-type-chip .expired { color: #dc2626; }
.reciclagem-type-chip .due { color: #d97706; }
.reciclagem-type-chip .ok { color: #16a34a; }
.reciclagem-type-counts-inner { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.reciclagem-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    margin-left: 4px;
    vertical-align: middle;
}
.reciclagem-footer { margin-top: 8px; }
.reciclagem-unit-pill {
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f0f6ff;
    border: 1px solid rgba(14, 90, 200, 0.2);
    color: var(--ops-sky);
    cursor: pointer;
    transition: background 0.1s;
}
.reciclagem-unit-pill:hover { background: #e0eeff; }
.reciclagem-actions.compact { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.reciclagem-obs-text {
    font-size: var(--font-xs);
    color: #64748b;
    font-style: italic;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ── FLUXO G — LANÇAMENTOS FT/TROCA ── */
.lancamentos-tab .form-group,
#lancamentos-form .form-group,
.ft-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.lancamentos-tab .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lancamentos-tag .btn:not(.btn-secondary):not(.btn-danger) {
    background: linear-gradient(135deg, var(--ops-sky), #0a3fa8);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 14px rgba(14, 90, 200, 0.3);
}
.required-mark { color: #dc2626; font-size: 0.9em; margin-left: 2px; }

/* ── FLUXO H — CONFIGURAÇÃO E GESTÃO ── */
.config-shell {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 4px;
}
.config-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0, 45, 114, 0.1);
    box-shadow: 0 4px 16px rgba(8, 27, 53, 0.07);
    margin-bottom: 14px;
    overflow: hidden;
}
.config-card-header {
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8faff, #f0f5fd);
    border-bottom: 1px solid rgba(0, 45, 114, 0.08);
}
.card-title {
    font-size: var(--font-lg);
    font-weight: 800;
    color: var(--ops-navy);
    letter-spacing: -0.01em;
}
.config-card-body { padding: 18px 20px; }
.config-card.danger-zone { border-color: rgba(220, 38, 38, 0.25); }
.config-card.danger-zone .config-card-header {
    background: linear-gradient(135deg, #fff5f5, #fef2f2);
    border-color: rgba(220, 38, 38, 0.15);
}
.config-card.danger-zone .card-title { color: #dc2626; }

#tab-content-config #config-content {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

#tab-content-config .config-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(5, 28, 64, 0.96), rgba(7, 45, 97, 0.92)),
        radial-gradient(circle at 20% 0%, rgba(125, 211, 252, 0.26), transparent 58%);
    border: 1px solid rgba(85, 166, 255, 0.34);
    box-shadow: 0 16px 30px rgba(4, 20, 44, 0.32);
    position: sticky;
    top: 84px;
}

#tab-content-config .config-tab {
    min-height: 56px;
    border-radius: 12px;
    border: 1px solid rgba(122, 178, 245, 0.3);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
    color: #e7f2ff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

#tab-content-config .config-tab:hover {
    transform: translateX(2px);
    border-color: rgba(159, 209, 255, 0.8);
    box-shadow: 0 8px 18px rgba(9, 33, 66, 0.3);
}

#tab-content-config .config-tab.active {
    background: linear-gradient(130deg, #f59e0b, #fb923c);
    color: #2d1600;
    border-color: rgba(255, 200, 105, 0.96);
    box-shadow: 0 10px 22px rgba(176, 86, 6, 0.34);
}

#tab-content-config .config-tab .config-tab-index {
    min-width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    background: rgba(5, 21, 45, 0.38);
    color: #dff0ff;
}

#tab-content-config .config-tab.active .config-tab-index {
    background: rgba(255, 244, 217, 0.86);
    color: #8b3b00;
}

#tab-content-config .config-tab .config-tab-label { line-height: 1.2; }
#tab-content-config .config-pane { margin: 0; }

.cfg-verify {
    border: 1px dashed rgba(59, 130, 246, 0.35);
    background: rgba(239, 246, 255, 0.88);
    color: #0f366f;
}

.cfg-verify.cfg-verify-ok {
    border-style: solid;
    border-color: rgba(22, 163, 74, 0.45);
    background: rgba(220, 252, 231, 0.92);
    color: #166534;
}

.cfg-verify.cfg-verify-warn {
    border-style: solid;
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(254, 243, 199, 0.95);
    color: #92400e;
}

#adminAssignPanel .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#adminAssignPanel .actions .btn {
    width: 100%;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    white-space: normal;
    text-align: center;
}

/* ── ESTADOS SISTÊMICOS ── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
    font-size: var(--font-base);
    font-weight: 500;
    gap: 12px;
    min-height: 200px;
}
.empty-state::before {
    content: '○';
    font-size: 2.6rem;
    opacity: 0.3;
}
.admin-empty {
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    font-size: var(--font-sm);
}

/* Barra de progresso no topo */
.bb-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--ops-sky), var(--ops-mint));
    z-index: 9999;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}
.bb-loading-bar.indeterminate {
    animation: bbLoadingSlide 1.5s linear infinite;
}
.bb-loading-bar.done {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.4s 0.15s;
}
@keyframes bbLoadingSlide {
    0% { left: -70%; width: 70%; }
    100% { left: 100%; width: 70%; }
}

/* Validação inline */
.field-error-hint {
    font-size: var(--font-xs);
    color: #dc2626;
    font-weight: 600;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: fadeInDown 0.15s ease;
}
.field-error-hint::before { content: '⚠ '; }
input.field-invalid, select.field-invalid, textarea.field-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Barra de Undo */
.bb-undo-bar {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--ops-navy);
    color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--font-sm);
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(8, 27, 53, 0.28);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.bb-undo-bar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.bb-undo-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: var(--font-xs);
    font-weight: 800;
    cursor: pointer;
    transition: background 0.1s;
}
.bb-undo-btn:hover { background: rgba(255, 255, 255, 0.28); }

.bb-toolbar-search {
    min-width: 260px;
}

.bb-toolbar-search input,
.bb-toolbar-select {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(12, 34, 65, 0.12);
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
    color: #0b2344;
}

.bb-sync-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: var(--font-xs);
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
}

.bb-sync-status.ok {
    background: #dcfce7;
    color: #166534;
}

.bb-sync-status.warning {
    background: #fef3c7;
    color: #92400e;
}

.bb-public-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: linear-gradient(135deg, #eef6ff 0%, #f8fbff 48%, #e8fff6 100%);
}

.bb-public-card {
    width: min(760px, 100%);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(12, 34, 65, 0.08);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(8, 27, 53, 0.14);
    display: grid;
    gap: 16px;
}

.bb-public-card h2 {
    margin: 0;
    color: #081b35;
}

.bb-public-card p {
    margin: 0;
    color: #475569;
}

/* Atalho de teclado hint */
.bb-kbd-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-xs);
    color: #94a3b8;
    padding: 4px 8px 0;
}
kbd {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.8em;
    font-family: monospace;
    color: #475569;
    font-weight: 700;
}

/* ── TOAST IMPROVEMENTS ── */
.toast-container {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
}
.toast {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(8, 27, 53, 0.18) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: var(--font-sm) !important;
    max-width: min(400px, 90vw);
    animation: toastIn 0.18s ease !important;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── MELHORIAS DE MODAL ── */
.close-modal {
    min-height: 36px;
    min-width: 36px;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.07);
    border: none;
    transition: background 0.1s;
}
.close-modal:hover { background: rgba(0, 0, 0, 0.14); }

/* ── CONTEXT BAR ── */
.context-bar {
    background: linear-gradient(135deg, rgba(8, 27, 53, 0.96), rgba(10, 47, 83, 0.96));
    border-radius: 14px 14px 0 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 12px 16px;
    box-shadow: 0 -8px 28px rgba(8, 27, 53, 0.22);
}
.context-action {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 700;
    padding: 8px 16px;
    min-height: 40px;
    transition: all 0.12s;
}
.context-action:hover { background: rgba(255, 255, 255, 0.22); }
.context-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 14px;
    min-height: 40px;
}

/* ── FOOTER ── */
#site-footer {
    background: linear-gradient(135deg, var(--ops-navy), #0a2a53);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-sm);
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 14px 14px 0 0;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 45, 114, 0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 45, 114, 0.38); }

/* ── ANIMAÇÕES ── */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── RESPONSIVE — MOBILE OPERACIONAL ── */
@media (max-width: 900px) {
    #gateway { padding: 12px 14px 24px; gap: 14px; }
    .gateway-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gateway-card { min-height: 110px; padding: 16px 10px; }
    .gateway-card img { width: 54px; height: 54px; }
    .gateway-access-grid { grid-template-columns: repeat(2, 1fr); }
    .search-bar { gap: 6px; }
    .search-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .search-filters::-webkit-scrollbar { display: none; }
    .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; justify-content: flex-start; }
    .tabs::-webkit-scrollbar { display: none; }
    .breadcrumb-bar .breadcrumb-meta { width: 100%; }
    .avisos-header { padding: 10px 12px; flex-direction: column; align-items: flex-start; }
    .unit-title { padding: 10px 12px; }
    .unit-actions { gap: 2px; }
    .action-btn { min-height: 32px; min-width: 32px; padding: 5px; }
    .reciclagem-top { flex-direction: column; gap: 10px; }
    .results-grid { grid-template-columns: 1fr; }
    .config-card-body { padding: 14px 16px; }
    .config-card-header { padding: 12px 16px; }
    .bb-undo-bar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
    .bb-toolbar-search { min-width: 0; }
    .bb-public-card { padding: 18px; border-radius: 18px; }
    .search-container { border-radius: 12px; padding: 12px; }
    .toast-container { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 540px) {
    .gateway-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .gateway-card img { width: 44px; height: 44px; }
    .gateway-card { min-height: 90px; padding: 12px 8px; gap: 6px; }
    .gateway-card h3 { font-size: var(--font-sm); }
    .gateway-access-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .unit-section { border-radius: 10px; }
    .unit-title { font-size: var(--font-sm); flex-wrap: wrap; }
    #search-input, #unit-search-input { min-height: 46px; }
    .reciclagem-card { padding: 12px; border-radius: 10px; }
    .config-card { border-radius: 12px; }
    .empty-state { padding: 36px 16px; min-height: 160px; }
    .avisos-mini { max-width: calc(100vw - 20px); }
    #config-login .config-card { border-radius: 16px; }
    #config-login .config-card-body { padding: 20px 18px; }
    .breadcrumb-bar { padding: 8px 12px; gap: 5px; }
    .reciclagem-obs-text { max-width: 160px; }
}

/* ============================================================
   V4.3 — PADRONIZACAO DE BOTOES, FILTROS, CONTRASTE E LAYOUT
   ============================================================ */

/* --- Botao padrao (btn-std) --- */
.btn-std {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--dunamis-blue);
    border: 1.5px solid var(--dunamis-blue);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.btn-std:hover {
    background: #001f52;
    border-color: #001f52;
}
.btn-std:active {
    transform: scale(0.97);
}
.btn-std:focus-visible {
    outline: 3px solid rgba(11, 79, 179, 0.28);
    outline-offset: 2px;
}
.btn-std[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Tamanho pequeno --- */
.btn-sm {
    padding: 6px 14px;
    font-size: var(--font-xs);
    min-height: 32px;
    border-radius: 6px;
}

/* --- Variante outline --- */
.btn-outline {
    background: transparent;
    color: var(--dunamis-blue);
    border-color: var(--border-soft);
}
.btn-outline:hover {
    background: var(--surface-3);
    border-color: var(--dunamis-blue);
    color: var(--dunamis-blue);
}

/* --- Botao de alternar filtros avancados --- */
.btn-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.btn-filter-toggle:hover {
    background: #fef3c7;
    border-color: #d97706;
    color: #92400e;
}

.btn-invert-plantao::after { display: none; }

/* ── Inverter Plantão button ── */
.btn-invert-plantao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--font-sm);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0e5ac8, #0a3fa8);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    letter-spacing: 0.03em;
    flex-shrink: 0;
    text-transform: uppercase;
}

.btn-invert-plantao:hover {
    background: linear-gradient(135deg, #1569e8, #0e50c8);
    box-shadow: 0 2px 8px rgba(14, 90, 200, 0.4);
    transform: translateY(-1px);
}

.btn-invert-plantao:active {
    transform: translateY(0);
}

.bip-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.bip-label {
    font-weight: 700;
}

/* ── Invert panel ── */
.invert-plantao-panel {
    background: #eff6ff;
    border: 1.5px solid #93c5fd;
    border-radius: var(--radius-md);
    margin-top: 6px;
    overflow: hidden;
    animation: bipSlideIn 150ms ease;
}

@keyframes bipSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bip-panel-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    flex-wrap: nowrap;
}

.bip-panel-icon {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
    color: #1e3a8a;
}

.bip-text {
    flex: 1;
    font-size: var(--font-sm);
    color: #1e3a8a;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bip-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
    font-weight: 700;
}

.btn-danger:hover {
    background: #b91c1c;
}

/* ── Escala status pill (header mini + detail badge) ── */
.escala-status-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.escala-status-pill.inverted {
    background: #fee2e2;
    color: #b91c1c;
}

.status-badge-btn {
    cursor: pointer;
    border: 2px solid transparent !important;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.status-badge-btn:hover {
    transform: scale(1.06);
    border-color: rgba(255,255,255,0.5) !important;
}

/* --- Filter chips modernizados --- */
.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1.5px solid var(--border-soft);
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
    white-space: nowrap;
}
.filter-chip:hover {
    background: var(--surface-3);
    border-color: var(--dunamis-blue);
    color: var(--dunamis-blue);
}
.filter-chip.active {
    background: var(--dunamis-blue);
    border-color: var(--dunamis-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 45, 114, 0.22);
}

/* --- Filtros avancados (datas) --- */
.search-advanced {
    padding: 14px 0 6px;
    border-top: 1px solid var(--border-soft);
    margin-top: 8px;
}
.search-date-filters {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.search-date-field {
    display: grid;
    gap: 4px;
    min-width: 140px;
    flex: 1;
}
.search-date-field label {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.search-date-field input[type="date"] {
    padding: 8px 10px;
    border: 1.5px solid var(--border-soft);
    border-radius: 6px;
    font-size: var(--font-sm);
    color: var(--text-color);
    background: #fff;
    transition: border-color var(--transition-fast);
}
.search-date-field input[type="date"]:focus {
    border-color: var(--dunamis-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 45, 114, 0.1);
}
.search-advanced-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* --- Contraste do detalhe (cpf-label e cpf-value) --- */
.cpf-label {
    color: #475569 !important;
    font-weight: 700 !important;
}
.cpf-value {
    color: #0f172a !important;
    font-weight: 500 !important;
}

/* --- Esconder icone csc vazio --- */
.csc-icon:empty {
    display: none;
}

/* --- Compliance: substituir emoji por CSS --- */
.compliance-icon:empty {
    display: none;
}
.compliance-card {
    border-left: 3px solid var(--dunamis-blue);
    text-align: left;
}
.compliance-label {
    color: #334155 !important;
    font-weight: 700 !important;
}
.compliance-value {
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* --- History empty state sem emoji --- */
.history-empty-icon:empty {
    display: none;
}
.history-empty {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
}
.history-empty p {
    margin-top: 6px;
}

/* --- Secao header sem icone fica mais limpa --- */
.csc-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--dunamis-blue);
}

/* --- Melhoramentos gerais de layout --- */
.collab-section-card {
    overflow: hidden;
}

/* Campo de busca */
.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.search-input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: var(--font-base);
    color: var(--text-color);
    background: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-input:focus {
    border-color: var(--dunamis-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 45, 114, 0.1);
}
.search-input::placeholder {
    color: #94a3b8;
}
.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.search-clear-btn:hover {
    color: var(--text-color);
}

/* --- Esconder estilos de funcionalidades removidas --- */
.ai-toggle,
.substitute-panel,
.substitute-panel *,
.search-recent,
.search-recent * {
    display: none !important;
}

/* --- Responsivo para novos botoes --- */
@media (max-width: 640px) {
    .btn-std {
        padding: 8px 16px;
        font-size: var(--font-xs);
    }
    .btn-filter-toggle {
        padding: 7px 12px;
        font-size: var(--font-xs);
    }
    .search-date-filters {
        flex-direction: column;
        gap: 8px;
    }
    .search-date-field {
        min-width: 100%;
    }
    .search-advanced-actions {
        justify-content: stretch;
    }
    .search-advanced-actions .btn-std {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .search-filters {
        gap: 4px;
    }
    .filter-chip {
        padding: 5px 10px;
        font-size: var(--font-compact);
    }
}

/* ── Role Permissions Responsive ── */
@media (max-width: 600px) {
    .role-perm-grid {
        font-size: 10px;
    }
    .role-th {
        font-size: 9px;
        padding: 6px 2px;
    }
    .role-td-label {
        font-size: 11px;
        padding: 6px 3px;
    }
    .role-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .config-tabs {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   MOBILE OPTIMIZATION — V4.4
   Comprehensive responsive fixes for phones and small tablets.
   ========================================================================== */

/* ── GLOBAL OVERFLOW GUARD ── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── 768px: Tablets & landscape phones ── */
@media (max-width: 768px) {
    /* App container */
    #app-container {
        padding: 12px 10px;
    }

    /* Tabs: scrollable, compact */
    .tabs {
        gap: 2px;
        padding: 4px 6px;
        top: 56px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .tabs::-webkit-scrollbar { display: none; }

    .tab-btn {
        padding: 10px 12px;
        font-size: var(--font-sm);
        flex: 0 0 auto;
        white-space: nowrap;
        gap: 4px;
    }

    /* Header */
    header {
        height: 50px;
        padding: 0 8px;
    }
    header h1 {
        font-size: var(--font-sm);
        max-width: 200px;
    }
    .header-icon-btn {
        width: 34px;
        height: 34px;
    }
    .auth-indicator {
        max-width: 160px;
        font-size: var(--font-compact);
        padding: 3px 8px;
    }

    /* Search bar */
    .search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .search-input {
        padding: 12px;
        font-size: 16px; /* prevents iOS zoom */
    }
    .btn-invert-plantao {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
    }

    /* Filter selects: allow wrapping */
    .filter-selects-row {
        flex-wrap: wrap;
    }
    .filter-select-sm {
        flex: 1 1 calc(50% - 4px);
        max-width: none;
        min-width: 0;
    }

    /* Invert panel */
    .bip-panel-inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Unit filters */
    .unit-filters {
        flex-direction: column;
        gap: 8px;
    }
    .filter-select {
        width: 100%;
    }

    /* Stats bar */
    .stats-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Avisos header */
    .avisos-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
        padding: 10px 12px;
    }
    .avisos-header-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }
    .avisos-header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }

    /* Avisos filters */
    .avisos-filters {
        flex-direction: column;
        gap: 6px;
    }
    .avisos-filters .filter-select {
        width: 100%;
    }

    /* Config tabs */
    #tab-content-config #config-content {
        display: block;
    }
    #tab-content-config .config-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        gap: 4px;
        display: flex;
        padding: 8px;
        margin-bottom: 10px;
        position: static;
    }
    #tab-content-config .config-tabs::-webkit-scrollbar { display: none; }
    #tab-content-config .config-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: var(--font-sm);
        min-height: 54px;
        border-radius: 10px;
    }
    #tab-content-config .config-tab .config-tab-index {
        min-width: 28px;
        height: 28px;
        font-size: 10px;
    }

    #adminAssignPanel .actions {
        grid-template-columns: 1fr;
    }

    /* Reciclagem */
    .reciclagem-filters {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .reciclagem-action-buttons {
        flex-wrap: wrap;
    }
    .reciclagem-template {
        width: 100%;
    }

    /* Modals */
    .modal {
        padding: 10px;
        align-items: flex-start;
        padding-top: 56px;
    }
    .modal-content {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 12px;
        max-height: calc(100vh - 70px);
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    .checkbox-group {
        grid-template-columns: 1fr;
    }

    /* Cards detail grid: single column */
    .card-details-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* FT week track: 4 columns */
    .ft-week-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Unit teams: single column */
    .unit-teams-container {
        grid-template-columns: 1fr;
    }

    /* Lancamentos */
    .lancamentos-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .lancamentos-top {
        flex-direction: column;
        align-items: stretch;
    }
    .lancamentos-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .lancamentos-mode-switch {
        width: 100%;
    }
    .lancamento-card {
        grid-template-columns: 1fr;
    }

    /* Breadcrumb bar */
    .breadcrumb-bar {
        flex-direction: column;
        gap: 4px;
        font-size: var(--font-xs);
        padding: 6px 10px;
    }
    .breadcrumb-meta {
        width: 100%;
        justify-content: space-between;
    }

    /* Date filters */
    .search-date-filters {
        flex-direction: column;
        gap: 8px;
    }
    .search-date-field {
        min-width: 100%;
    }
    .unit-toolbar-actions,
    .search-date-actions {
        margin-left: 0;
        width: 100%;
    }

    /* Utility buttons: all hidden on mobile (use drawer instead) */
    #print-view-btn,
    #help-btn,
    #prompts-btn,
    #guide-btn {
        display: none !important;
    }
    #utility-toggle-btn {
        display: none !important;
    }

    /* Scroll top: smaller, safe area aware */
    #scroll-top-btn {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Footer */
    #site-footer {
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        font-size: var(--font-compact);
    }

    /* Supervisão */
    .supervisao-switch-group {
        width: 100%;
    }
    .switch-btn {
        flex: 1 1 0;
        text-align: center;
        padding: 8px 10px;
        font-size: var(--font-sm);
    }
    .supervisao-filters {
        flex-direction: column;
        gap: 6px;
    }
    .supervisao-actions {
        grid-template-columns: 1fr;
    }

    /* Search toolbar */
    .search-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    /* Substitute panel */
    .substitute-target-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .substitute-options {
        width: 100%;
    }
}

/* ── 600px: Small phones ── */
@media (max-width: 600px) {
    /* Even more compact tabs */
    .tabs {
        top: 50px;
        padding: 3px 4px;
        margin-bottom: 10px;
    }
    .tab-btn {
        padding: 8px 10px;
        font-size: var(--font-xs);
    }

    /* Gateway */
    .gateway-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 1rem;
    }
    .gateway-card {
        padding: 14px 10px;
    }
    .gateway-card img {
        max-width: 70px;
    }
    .gateway-card h3 {
        font-size: var(--font-sm);
    }
    .gateway-card p {
        font-size: var(--font-xs);
        display: none;
    }
    .gateway-access-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .gateway-card-access {
        padding: 12px 8px;
    }
    .gateway-card-access .gateway-icon svg {
        width: 32px;
        height: 32px;
    }

    #gateway h2 {
        font-size: 1.1rem;
    }

    /* App container */
    #app-container {
        padding: 8px 6px;
    }

    /* Search input */
    .search-input {
        padding: 10px;
        font-size: 16px;
        border-radius: 8px;
    }

    /* Cards */
    .result-card {
        padding: 10px;
        border-radius: 8px;
    }
    .card-header {
        margin-bottom: 8px;
        gap: 8px;
    }
    .colaborador-nome {
        font-size: var(--font-base);
    }
    .status-badge {
        font-size: var(--font-compact);
        padding: 2px 6px;
    }

    /* Buttons */
    .btn {
        padding: 8px 14px;
        font-size: var(--font-xs);
    }
    .btn-small {
        padding: 5px 10px;
        font-size: var(--font-compact);
    }

    /* Unit sections */
    .unit-section {
        padding: 10px;
        border-radius: 8px;
    }
    .unit-title {
        font-size: var(--font-sm);
        flex-wrap: wrap;
        gap: 4px;
    }

    /* FT week track */
    .ft-week-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
    }
    .ft-week-chip {
        font-size: 0.56rem;
        padding: 2px 4px;
    }

    /* Edit icons */
    .edit-btn-icon {
        width: 32px;
        height: 32px;
    }
    .edit-btn-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Inputs: ensure 16px to prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Aviso cards */
    .aviso-card {
        padding: 10px;
    }

    /* Config shell */
    .config-shell {
        padding: 10px;
    }
    .config-card {
        padding: 10px;
        border-radius: 8px;
    }

    /* Loading overlay */
    .loading-overlay {
        min-height: 40vh;
        padding: 20px;
        font-size: 1rem;
    }

    /* Toast */
    .toast-container {
        left: 8px !important;
        right: 8px !important;
        max-width: 100% !important;
    }

    /* Route map */
    .route-map {
        height: 260px;
    }
}

/* ── 480px: Very small phones ── */
@media (max-width: 480px) {
    /* Icon-only tabs */
    .tab-btn {
        padding: 8px;
        font-size: 0;
        gap: 0;
    }
    .tab-btn svg {
        width: 18px;
        height: 18px;
        margin-right: 0;
    }
    /* Show text for active tab only */
    .tab-btn.active {
        font-size: var(--font-xs);
        gap: 4px;
        padding: 8px 10px;
    }
    .tab-btn.active svg {
        margin-right: 3px;
    }
    .tab-badge {
        font-size: 0.55rem;
        padding: 1px 4px;
    }

    /* Header */
    header h1 {
        font-size: var(--font-xs);
        max-width: 140px;
    }

    /* Gateway grid */
    .gateway-grid {
        gap: 8px;
    }
    .gateway-card {
        padding: 10px 6px;
        min-height: 80px;
    }
    .gateway-card img {
        max-width: 50px;
        margin-bottom: 4px;
    }

    /* Invert button: compact */
    .btn-invert-plantao .bip-label {
        font-size: var(--font-xs);
    }

    /* Filter chips */
    .filter-chips-row {
        gap: 4px;
    }
    .filter-chip {
        padding: 4px 8px;
        font-size: var(--font-compact);
    }

    /* Filter selects: full width */
    .filter-selects-row {
        flex-direction: column;
        gap: 6px;
    }
    .filter-select-sm {
        flex: none;
        width: 100%;
        max-width: none;
    }

    /* Card info */
    .card-details-grid {
        font-size: var(--font-sm);
    }

    /* Breadcrumb */
    .breadcrumb-main {
        font-size: var(--font-compact);
    }
    .group-pill {
        font-size: 0.55rem;
    }

    /* Search results summary */
    .search-summary {
        font-size: var(--font-xs);
    }

    /* Aviso form controls */
    .aviso-form .btn {
        width: 100%;
    }

    /* Reciclagem line */
    .reciclagem-line {
        font-size: var(--font-sm);
    }
    .reciclagem-chip {
        min-width: 80px;
        font-size: var(--font-compact);
    }
}

/* ── TOUCH TARGETS: ensure min 44px on mobile ── */
@media (hover: none) and (pointer: coarse) {
    .filter-chip,
    .config-tab,
    .switch-btn,
    .action-btn,
    .btn-mini,
    .btn-small {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .tab-btn {
        min-height: 44px;
    }

    .header-icon-btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* Prevent double-tap zoom */
    * {
        touch-action: manipulation;
    }
}