/* ============================================
   TrackMultas - Estilos Customizados
   ============================================ */

/* --- Variáveis CSS --- */
:root {
    --color-bg-body: #0f1117;
    --color-bg-card: #1a1d27;
    --color-bg-card-hover: #222633;
    --color-bg-navbar: #13151d;
    --color-bg-footer: #0c0e14;
    --color-bg-notice: rgba(255, 193, 7, 0.08);
    --color-bg-input: #1e2130;

    --color-accent: #4f8cff;
    --color-accent-glow: rgba(79, 140, 255, 0.25);
    --color-text-primary: #e8eaf0;
    --color-text-muted: #8b8fa3;
    --color-text-warning: #ffc107;

    --color-icon-blue: rgba(79, 140, 255, 0.15);
    --color-icon-red: rgba(255, 82, 82, 0.15);
    --color-icon-green: rgba(0, 200, 150, 0.15);
    --color-icon-blue-text: #4f8cff;
    --color-icon-red-text: #ff5252;
    --color-icon-green-text: #00c896;

    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-notice: rgba(255, 193, 7, 0.25);
    --color-border-input: rgba(255, 255, 255, 0.1);

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-xs: 8px;
    --transition-speed: 0.3s;
    --rgb-contraste: 255, 255, 255;
    --color-hero-meio: #1a1d35;
    --color-sombra: rgba(0, 0, 0, 0.45);
}

/* --- Reset e Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-body);
    color: var(--color-text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* --- Navbar --- */
.bg-navbar {
    background-color: var(--color-bg-navbar) !important;
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.navbar-brand {
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.text-accent {
    color: var(--color-accent) !important;
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}

.nav-link:hover:not(.disabled) {
    background-color: rgba(79, 140, 255, 0.1);
    color: var(--color-accent) !important;
}

.nav-link.active {
    color: var(--color-accent) !important;
    background-color: rgba(79, 140, 255, 0.08);
}

.nav-link.disabled {
    opacity: 0.35;
}

.tm-dropdown {
    background-color: var(--color-bg-input) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-xs) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.tm-dropdown .dropdown-item {
    color: var(--color-text-muted);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    margin: 2px 4px;
    transition: all var(--transition-speed) ease;
}

.tm-dropdown .dropdown-item:hover,
.tm-dropdown .dropdown-item.active {
    background-color: rgba(79, 140, 255, 0.12);
    color: var(--color-accent);
}

/* --- Hero Section --- */
.hero-section {
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, var(--color-bg-body) 0%, var(--color-hero-meio) 50%, var(--color-bg-body) 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 120%, var(--color-accent-glow) 0%, transparent 50%);
    animation: heroGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes heroGlow {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(1.1); }
}

.hero-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), #6c5ce7);
    box-shadow: 0 8px 32px var(--color-accent-glow);
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-icon {
    font-size: 2.2rem;
    color: #fff;
}

.text-light-muted {
    color: var(--color-text-muted);
}

.badge-tech {
    background: rgba(var(--rgb-contraste), 0.08);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    transition: all var(--transition-speed) ease;
}

.badge-tech:hover {
    background: rgba(79, 140, 255, 0.12);
    color: var(--color-accent);
    border-color: rgba(79, 140, 255, 0.3);
    transform: translateY(-2px);
}

/* --- Modules Section --- */
.modules-section {
    background-color: var(--color-bg-body);
}

.section-title {
    color: var(--color-text-primary);
    font-size: 1.8rem;
    letter-spacing: -0.5px;
}

.text-muted-custom {
    color: var(--color-text-muted) !important;
}

.module-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 2rem;
    transition: all var(--transition-speed) ease;
    position: relative;
    overflow: hidden;
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #6c5ce7);
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.module-card:hover {
    background: var(--color-bg-card-hover);
    border-color: rgba(79, 140, 255, 0.15);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.module-card:hover::before {
    opacity: 1;
}

.card-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.5rem;
    transition: transform var(--transition-speed) ease;
}

.module-card:hover .card-icon-wrapper {
    transform: scale(1.1);
}

.bg-icon-blue {
    background-color: var(--color-icon-blue);
    color: var(--color-icon-blue-text);
}

.bg-icon-red {
    background-color: var(--color-icon-red);
    color: var(--color-icon-red-text);
}

.bg-icon-green {
    background-color: var(--color-icon-green);
    color: var(--color-icon-green-text);
}

.card-title-custom {
    color: var(--color-text-primary);
    font-size: 1.15rem;
}

.card-text-custom {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

.module-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tag {
    background: rgba(var(--rgb-contraste), 0.04);
    color: var(--color-text-muted);
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed) ease;
}

.module-card:hover .feature-tag {
    border-color: rgba(79, 140, 255, 0.15);
    color: var(--color-text-primary);
}

/* --- Dev Notice --- */
.dev-notice-section {
    background-color: var(--color-bg-body);
}

.dev-notice {
    background: var(--color-bg-notice);
    border: 1px solid var(--color-border-notice);
    border-radius: var(--border-radius-sm);
    padding: 1.2rem 1.5rem;
}

.text-warning-custom {
    color: var(--color-text-warning) !important;
}

.dev-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-text-warning);
    box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5); }
    70% { box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* --- Page Header --- */
.page-header {
    padding: 2rem 0 1.5rem;
    background: linear-gradient(135deg, var(--color-bg-navbar) 0%, var(--color-hero-meio) 100%);
    border-bottom: 1px solid var(--color-border);
}

.page-title {
    color: var(--color-text-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--rgb-contraste), 0.06);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    transition: all var(--transition-speed) ease;
    text-decoration: none;
}

.btn-back:hover {
    background: rgba(79, 140, 255, 0.12);
    color: var(--color-accent);
    border-color: rgba(79, 140, 255, 0.3);
}

/* --- Buttons --- */
.btn-primary-custom {
    background: linear-gradient(135deg, var(--color-accent), #6c5ce7);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 1.3rem;
    border-radius: var(--border-radius-xs);
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px var(--color-accent-glow);
    color: #fff;
}

.btn-secondary-custom {
    background: rgba(var(--rgb-contraste), 0.06);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.55rem 1.3rem;
    border-radius: var(--border-radius-xs);
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-secondary-custom:hover {
    background: rgba(var(--rgb-contraste), 0.1);
    color: var(--color-text-primary);
    border-color: rgba(var(--rgb-contraste), 0.15);
}

.btn-danger-custom {
    background: rgba(255, 82, 82, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.3);
    color: var(--color-icon-red-text);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.55rem 1.3rem;
    border-radius: var(--border-radius-xs);
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-danger-custom:hover {
    background: rgba(255, 82, 82, 0.25);
    color: #fff;
}

/* --- Forms --- */
.form-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 2rem;
}

.form-section-title {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.form-label-custom {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    letter-spacing: 0.3px;
}

.form-control-custom,
.form-select-custom {
    background-color: var(--color-bg-input) !important;
    border: 1px solid var(--color-border-input) !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-xs);
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    transition: all var(--transition-speed) ease;
}

.form-control-custom:focus,
.form-select-custom:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
    outline: none;
}

.form-control-custom::placeholder {
    color: rgba(139, 143, 163, 0.5);
}

.form-select-custom option {
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
}

.bg-input {
    background-color: var(--color-bg-input) !important;
}

.border-input {
    border-color: var(--color-border-input) !important;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input {
    background-color: var(--color-bg-input);
    border-color: var(--color-border-input);
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.5%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-switch-danger .form-check-input:checked {
    background-color: var(--color-icon-red-text) !important;
    border-color: var(--color-icon-red-text) !important;
}

/* --- Filter Card --- */
.filter-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 1.2rem 1.5rem;
}

/* --- Tables --- */
.table-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.table-custom {
    color: var(--color-text-primary);
    margin-bottom: 0;
}

.table-custom thead th {
    background: rgba(var(--rgb-contraste), 0.03);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.table-custom tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
    vertical-align: middle;
}

.table-custom tbody tr {
    transition: background var(--transition-speed) ease;
}

.table-custom tbody tr:hover {
    background: rgba(79, 140, 255, 0.04);
}

.table-custom tbody tr:last-child td {
    border-bottom: none;
}

.table-custom.table-sm td,
.table-custom.table-sm th {
    padding: 0.55rem 0.8rem;
}

/* --- Badges --- */
.badge-count {
    background: rgba(var(--rgb-contraste), 0.06);
    color: var(--color-text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
}

.badge-valor {
    background: rgba(0, 200, 150, 0.1);
    color: var(--color-icon-green-text);
}

.badge-status {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

.badge-success {
    background: rgba(0, 200, 150, 0.15);
    color: #00c896;
}

.badge-danger {
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
}

.badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.badge-info {
    background: rgba(79, 140, 255, 0.15);
    color: #4f8cff;
}

.badge-secondary {
    background: rgba(var(--rgb-contraste), 0.08);
    color: #888;
}

.badge-purple {
    background: rgba(108, 92, 231, 0.15);
    color: #6c5ce7;
}

.badge-default {
    background: rgba(var(--rgb-contraste), 0.06);
    color: var(--color-text-muted);
}

.badge-outline {
    background: transparent;
    border: 1px solid rgba(var(--rgb-contraste), 0.15);
    color: var(--color-text-muted);
}

/* --- Action Buttons --- */
.btn-group-actions {
    display: inline-flex;
    gap: 6px;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-speed) ease;
    font-size: 0.85rem;
}

.btn-action-view:hover {
    background: rgba(79, 140, 255, 0.12);
    color: var(--color-accent);
    border-color: rgba(79, 140, 255, 0.3);
}

.btn-action-edit:hover {
    background: rgba(255, 193, 7, 0.12);
    color: var(--color-text-warning);
    border-color: rgba(255, 193, 7, 0.3);
}

.btn-action-delete:hover {
    background: rgba(255, 82, 82, 0.12);
    color: var(--color-icon-red-text);
    border-color: rgba(255, 82, 82, 0.3);
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state i {
    font-size: 3rem;
    color: var(--color-text-muted);
    opacity: 0.4;
    display: block;
    margin-bottom: 1rem;
}

.empty-state p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* --- Alerts --- */
.alert-custom {
    border-radius: var(--border-radius-xs);
    font-size: 0.9rem;
    border: none;
}

.alert-success-custom {
    background: rgba(0, 200, 150, 0.1);
    color: #00c896;
    border-left: 4px solid #00c896;
}

.alert-danger-custom {
    background: rgba(255, 82, 82, 0.1);
    color: #ff5252;
    border-left: 4px solid #ff5252;
}

.alert-custom .btn-close {
    filter: brightness(0.5) invert(0.5);
}

/* --- Detail View --- */
.detail-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.detail-card-title {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
}

.detail-text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.link-accent {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.link-accent:hover {
    color: #6c5ce7;
    text-decoration: underline;
}

/* --- Status Stack --- */
.status-stack,
.value-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-item,
.value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.status-item:last-child,
.value-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.status-label,
.value-label {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.value-main .value-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-icon-green-text);
}

.value-amount-sm {
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 500;
}

/* --- KPI Cards --- */
.kpi-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all var(--transition-speed) ease;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-color: rgba(79, 140, 255, 0.15);
}

.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.kpi-info {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* --- Chart Cards --- */
.chart-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
}

.chart-title {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* --- Footer --- */
.footer-section {
    background-color: var(--color-bg-footer);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .hero-section {
        padding: 3rem 0 2.5rem;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-icon-wrapper {
        width: 64px;
        height: 64px;
    }

    .hero-icon {
        font-size: 1.8rem;
    }

    .module-card {
        padding: 1.5rem;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .page-header {
        padding: 1.5rem 0 1rem;
    }

    .page-title {
        font-size: 1.3rem;
    }

    .form-card {
        padding: 1.5rem;
    }

    .kpi-card {
        padding: 1.2rem;
    }

    .kpi-value {
        font-size: 1.2rem;
    }

    .table-custom thead th,
    .table-custom tbody td {
        padding: 0.6rem 0.7rem;
        font-size: 0.82rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .badge-tech {
        font-size: 0.72rem;
        padding: 0.35rem 0.7rem;
    }

    .btn-primary-custom,
    .btn-secondary-custom {
        font-size: 0.82rem;
        padding: 0.5rem 1rem;
    }

    .form-actions {
        flex-direction: column;
    }
}

/* --- Scrollbar customizada --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-body);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--rgb-contraste), 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--rgb-contraste), 0.2);
}

/* --- Seleção de texto --- */
::selection {
    background-color: rgba(79, 140, 255, 0.3);
    color: #fff;
}

/* ============================================
   Dashboard
   Cores validadas para o fundo dos cartões (#1a1d27):
   barras #3987e5 (4,6:1); status com ícone + texto, nunca só pela cor.
   ============================================ */
.dash {
    --viz-1: #3987e5;
    --viz-trilho: rgba(var(--rgb-contraste), 0.08);
    --viz-grade: rgba(var(--rgb-contraste), 0.07);
    --status-bom: #0ca30c;
    --status-atencao: #fab219;
    --status-serio: #ec835a;
    --status-critico: #d03b3b;
    --delta-bom: #0ca30c;
    --delta-ruim: #e66767;
}

.dash h2 { color: var(--color-text-primary); }

.dash-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: 1.25rem;
    height: 100%;
    color: var(--color-text-primary);
}

.dash-card-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
}

.dash-card-cabecalho h6 { margin: 0; font-weight: 600; }

.dash-muted { color: var(--color-text-muted) !important; }
.dash-numero { font-variant-numeric: tabular-nums; }

.dash-kpi-rotulo { color: var(--color-text-muted); font-size: 0.85rem; }
.dash-kpi-valor { font-size: 1.6rem; font-weight: 600; line-height: 1.25; margin: 0.3rem 0 0.2rem; white-space: nowrap; }
.dash-delta { font-size: 0.8rem; color: var(--color-text-muted); }
.dash-delta i { font-size: 1.1rem; vertical-align: -0.2em; }
.dash-delta.ruim { color: var(--delta-ruim); }
.dash-delta.bom { color: var(--delta-bom); }

.dash-cor-bom { color: var(--status-bom); }
.dash-cor-atencao { color: var(--status-atencao); }
.dash-status-atencao { color: var(--status-atencao); }
.dash-status-serio { color: var(--status-serio); }
.dash-status-critico { color: var(--status-critico); }
.dash-fundo-atencao { background: var(--status-atencao); }
.dash-fundo-serio { background: var(--status-serio); }
.dash-fundo-critico { background: var(--status-critico); }

/* Barras horizontais: quadradas na base, arredondadas na ponta */
.dash-trilho { height: 6px; background: var(--viz-trilho); border-radius: 0 4px 4px 0; }
.dash-barra { height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.dash-linha-barra + .dash-linha-barra { margin-top: 0.85rem; }

.dash-medidor { height: 8px; background: var(--viz-trilho); border-radius: 0 4px 4px 0; overflow: hidden; }
.dash-medidor-preenchido { height: 100%; border-radius: 0 4px 4px 0; }

.dash-separador + .dash-separador { border-top: 1px solid var(--color-border); }

/* Tabelas sobre o cartão escuro */
.dash-tabela {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text-primary);
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: rgba(var(--rgb-contraste), 0.03);
    --bs-table-hover-color: var(--color-text-primary);
    margin-bottom: 0;
    font-size: 0.875rem;
}
.dash-tabela th { color: var(--color-text-muted); font-weight: 500; font-size: 0.78rem; }
.dash-tabela td { font-variant-numeric: tabular-nums; }

/* Gráfico de colunas por mês */
.dash-plot { position: relative; height: 200px; margin-left: 2.5rem; margin-top: 1.25rem; }
.dash-grade { position: absolute; left: 0; right: 0; border-top: 1px solid var(--viz-grade); }
.dash-grade span {
    position: absolute; left: -2.5rem; width: 2.1rem; top: -0.55rem;
    text-align: right; font-size: 0.72rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.dash-colunas { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.dash-coluna {
    flex: 1 1 0; height: 100%; display: flex; flex-direction: column;
    justify-content: flex-end; align-items: center; outline: none; border-radius: 4px;
}
.dash-coluna-barra {
    width: 100%; max-width: 24px; background: var(--viz-1);
    border-radius: 4px 4px 0 0; transition: filter 0.15s;
}
.dash-coluna:hover .dash-coluna-barra,
.dash-coluna:focus-visible .dash-coluna-barra { filter: brightness(1.3); }
.dash-coluna:hover, .dash-coluna:focus-visible { background: rgba(var(--rgb-contraste), 0.03); }
.dash-coluna:focus-visible { box-shadow: 0 0 0 2px var(--color-accent); }
.dash-coluna-valor { font-size: 0.72rem; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.dash-rotulos { display: flex; gap: 4px; margin-left: 2.5rem; margin-top: 0.4rem; }
.dash-rotulos span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.7rem; color: var(--color-text-muted); white-space: nowrap; }
.dash-coluna { min-width: 0; }
.dash details summary { cursor: pointer; }

#dash-tip {
    position: fixed; z-index: 1080; pointer-events: none;
    background: var(--color-bg-body); border: 1px solid rgba(var(--rgb-contraste), 0.12); border-radius: 8px;
    padding: 0.4rem 0.65rem; font-size: 0.8rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#dash-tip strong { display: block; color: var(--color-text-primary); font-weight: 600; }
#dash-tip span { color: var(--color-text-muted); }

/* Filtros */
.dash-filtros .btn-outline-secondary { color: var(--color-text-muted); border-color: var(--color-border-input); }
.dash-filtros .btn-outline-secondary:hover { color: var(--color-text-primary); background: rgba(var(--rgb-contraste), 0.06); }

@media (max-width: 575.98px) {
    .dash-kpi-valor { font-size: 1.3rem; }
    /* No celular, só um rótulo de mês a cada três (as colunas continuam com a dica) */
    .dash-rotulos span { font-size: 0.62rem; overflow: visible; }
    .dash-rotulos span:not(:nth-child(3n+1)) { visibility: hidden; }
}

/* ------------------------------------------------------------------
   Tabelas compactas: todas as colunas cabem na largura da tela
   (texto longo é cortado com "…"; o texto completo aparece ao passar o mouse)
   ------------------------------------------------------------------ */
.tabela-compacta { font-size: 0.8rem; table-layout: fixed; width: 100%; min-width: 1000px; }
.tabela-compacta > :not(caption) > * > * { padding: 0.4rem 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-compacta thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; }
.tabela-compacta .celula-curta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-compacta .badge-curto { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tabela-compacta .acoes { overflow: visible; }
.tabela-compacta .acoes .btn { padding: 0.12rem 0.38rem; }
.filtros-multas .form-select.filtro-ativo { border-color: var(--bs-primary, #0d6efd); box-shadow: 0 0 0 1px var(--bs-primary, #0d6efd); }

/* Andamento editável nos próximos prazos: mesmo visual escuro do sistema */
.prazo-andamento.form-select {
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-input);
    font-size: 0.8rem;
    padding-top: 0.2rem; padding-bottom: 0.2rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b8fa3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.prazo-andamento.form-select:hover { border-color: rgba(var(--rgb-contraste), 0.25); }
.prazo-andamento.form-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-glow); }
.prazo-andamento option { background: var(--color-bg-card); color: var(--color-text-primary); }
.prazos-compacto .dash-card { padding: 0.75rem 1rem; }
.prazos-compacto .dash-tabela { font-size: 0.85rem; }


/* ==================================================================
   Tema claro / escuro (escolhido por usuário; atributo data-tema no <html>)
   ================================================================== */
html[data-tema="claro"] {
    --color-bg-body: #f3f5f9;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #f6f8fc;
    --color-bg-navbar: #ffffff;
    --color-bg-footer: #e9edf3;
    --color-bg-notice: rgba(255, 193, 7, 0.14);
    --color-bg-input: #ffffff;
    --color-accent: #2563d9;
    --color-accent-glow: rgba(37, 99, 217, 0.2);
    --color-text-primary: #1b2030;
    --color-text-muted: #5b6275;
    --color-text-warning: #9a6b00;
    --color-icon-blue: rgba(37, 99, 217, 0.12);
    --color-icon-red: rgba(214, 48, 49, 0.12);
    --color-icon-green: rgba(0, 150, 110, 0.12);
    --color-icon-blue-text: #2563d9;
    --color-icon-red-text: #c62828;
    --color-icon-green-text: #00875f;
    --color-border: rgba(0, 0, 0, 0.09);
    --color-border-notice: rgba(180, 130, 0, 0.35);
    --color-border-input: rgba(0, 0, 0, 0.18);
    --rgb-contraste: 0, 0, 0;
    --color-hero-meio: #e3e9f7;
    --color-sombra: rgba(20, 30, 60, 0.12);
}
html[data-tema="claro"] .dash {
    --viz-1: #2a6fd6;
    --status-atencao: #c98a00;
}

/* Componentes do Bootstrap seguem as cores do tema */
html[data-bs-theme] body,
html[data-bs-theme] {
    --bs-body-bg: var(--color-bg-body);
    --bs-body-color: var(--color-text-primary);
    --bs-emphasis-color: var(--color-text-primary);
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-bg: var(--color-bg-card-hover);
    --bs-tertiary-bg: var(--color-bg-card-hover);
    --bs-border-color: var(--color-border-input);
    --bs-heading-color: var(--color-text-primary);
}
.card, .modal-content, .dropdown-menu, .list-group-item {
    --bs-card-bg: var(--color-bg-card);
    --bs-card-cap-bg: var(--color-bg-card);
    --bs-card-border-color: var(--color-border);
    --bs-modal-bg: var(--color-bg-card);
    --bs-dropdown-bg: var(--color-bg-card);
    --bs-list-group-bg: var(--color-bg-card);
    color: var(--color-text-primary);
}
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text-primary);
    --bs-table-border-color: var(--color-border);
    --bs-table-hover-bg: rgba(var(--rgb-contraste), 0.04);
    --bs-table-hover-color: var(--color-text-primary);
    --bs-table-striped-bg: rgba(var(--rgb-contraste), 0.025);
    --bs-table-striped-color: var(--color-text-primary);
}
.table > thead th {
    background: rgba(var(--rgb-contraste), 0.04);
    color: var(--color-text-muted);
    font-weight: 600;
}
.form-control, .form-select, .input-group-text {
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    border-color: var(--color-border-input);
}
.form-control:focus, .form-select:focus {
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
}
.form-control[readonly], .form-control:disabled, .form-select:disabled, .input-group-text { background-color: var(--color-bg-card-hover); }
.form-control::placeholder { color: var(--color-text-muted); opacity: 0.8; }
html[data-tema="claro"] .text-muted { color: var(--color-text-muted) !important; }
.hero-section h1 { color: var(--color-text-primary); }
html[data-tema="claro"] .navbar { box-shadow: 0 1px 0 var(--color-border); }
html[data-tema="claro"] .navbar .nav-link,
html[data-tema="claro"] .navbar .navbar-brand { color: var(--color-text-primary); }

/* Tom Select */
.ts-wrapper .ts-control, .ts-wrapper.single .ts-control, .ts-dropdown {
    background: var(--color-bg-input) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-input) !important;
}
.ts-wrapper .ts-control input { color: var(--color-text-primary) !important; }
.ts-dropdown .option { color: var(--color-text-primary); }
.ts-dropdown .active { background: var(--color-accent-glow) !important; color: var(--color-text-primary) !important; }

/* Botão de troca de tema */
.btn-tema { color: var(--color-text-muted); border: 1px solid var(--color-border-input); border-radius: 50%; width: 2.1rem; height: 2.1rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; }
.btn-tema:hover { color: var(--color-accent); border-color: var(--color-accent); }
html[data-tema="claro"] .btn-tema .bi-sun, html:not([data-tema="claro"]) .btn-tema .bi-moon-stars { display: none; }
html[data-tema="claro"] .btn-outline-warning { --bs-btn-color: #8a5d00; --bs-btn-border-color: #d9a400; --bs-btn-hover-bg: #ffc107; --bs-btn-hover-color: #1b2030; }
html[data-tema="claro"] .dash-cor-atencao { color: #c98a00; }

/* Menu da tela inicial (substitui os menus da barra superior) */
.menu-inicio .menu-modulo {
    display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; height: 100%; min-height: 15rem;
    padding: 2rem; border-radius: var(--border-radius);
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    color: var(--color-text-primary); text-decoration: none;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.menu-inicio .menu-modulo:hover, .menu-inicio .menu-modulo:focus-visible {
    border-color: var(--color-accent); background: var(--color-bg-card-hover); transform: translateY(-3px);
    box-shadow: 0 12px 30px var(--color-sombra);
}
.menu-inicio .card-icon-wrapper { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; font-size: 2rem; border-radius: 18px; margin-bottom: .75rem; }
.menu-inicio .menu-modulo-titulo { font-size: 1.6rem; font-weight: 700; }
.menu-inicio .menu-modulo-texto { color: var(--color-text-muted); font-size: 1rem; }
.menu-inicio .menu-modulo-ir { margin-top: auto; padding-top: .75rem; color: var(--color-accent); font-weight: 600; }
.menu-inicio .menu-modulo:hover .menu-modulo-ir i { transform: translateX(4px); }
.menu-inicio .menu-modulo-ir i { display: inline-block; transition: transform .2s; }
.menu-inicio .menu-opcao {
    display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; height: 100%; min-height: 11.5rem;
    padding: 1.75rem 2rem; border-radius: var(--border-radius); position: relative;
    border: 1px solid var(--color-border); color: var(--color-text-primary); text-decoration: none;
    background: var(--color-bg-card); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.menu-inicio .menu-opcao-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;
    border-radius: 16px; background: var(--color-icon-blue); color: var(--color-accent); font-size: 1.9rem;
}
.menu-inicio .menu-opcao-nome { font-size: 1.45rem; font-weight: 600; margin-top: auto; }
.menu-inicio .menu-opcao-seta { position: absolute; top: 1.75rem; right: 1.75rem; font-size: 1.3rem; color: var(--color-text-muted); transition: transform .2s, color .2s; }
.menu-inicio .menu-opcao:hover { border-color: var(--color-accent); background: var(--color-bg-card-hover); transform: translateY(-3px); box-shadow: 0 12px 30px var(--color-sombra); }
.menu-inicio .menu-opcao:hover .menu-opcao-seta { color: var(--color-accent); transform: translateX(4px); }
.menu-inicio .w-100 { height: 0; margin: 0; }

/* Barra "Voltar" + caminho */
.barra-voltar .breadcrumb { --bs-breadcrumb-divider-color: var(--color-text-muted); --bs-breadcrumb-item-active-color: var(--color-text-primary); }
.barra-voltar .breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.barra-voltar .breadcrumb a:hover { color: var(--color-accent); }
.barra-voltar + .container-fluid.py-4, .barra-voltar ~ .container-fluid.px-4.py-4 { padding-top: 1rem !important; }

/* Status e pagamento editáveis na lista de multas */
.tabela-compacta .sel-lista {
    font-size: 0.75rem; padding: 0.15rem 1.35rem 0.15rem 0.4rem; background-position: right 0.35rem center; background-size: 10px 8px;
    background-color: var(--color-bg-input); color: var(--color-text-primary); border-color: var(--color-border-input); min-width: 0; width: 100%;
    text-overflow: ellipsis;
}
.tabela-compacta .sel-lista.is-valid { border-color: #198754; box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.35); background-image: var(--bs-form-select-bg-img); padding-right: 1.35rem; }
.tabela-compacta .sel-lista.is-invalid { border-color: #dc3545; background-image: var(--bs-form-select-bg-img); padding-right: 1.35rem; }
.tabela-compacta td:has(.sel-lista) { overflow: visible; }

/* Filtros com várias opções e sugestões da busca */
.filtro-multi-botao { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-multi-botao.filtro-ativo { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.filtro-multi-menu { min-width: 16rem; max-width: 24rem; background: var(--color-bg-card); border-color: var(--color-border-input); }
.filtro-multi-lista { max-height: 18rem; overflow-y: auto; }
.filtro-multi-lista .form-check { padding: .15rem .25rem .15rem 1.75rem; border-radius: 6px; }
.filtro-multi-lista .form-check:hover { background: rgba(var(--rgb-contraste), 0.05); }
.filtro-multi-lista .form-check-label { width: 100%; cursor: pointer; font-size: .85rem; }
.busca-sugestoes {
    position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 2px); max-height: 22rem; overflow-y: auto;
    background: var(--color-bg-card); border: 1px solid var(--color-border-input); border-radius: var(--border-radius-xs);
    box-shadow: 0 10px 30px var(--color-sombra); padding: .25rem;
}
.busca-sugestao { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; font-size: .85rem; }
.busca-sugestao:hover, .busca-sugestao.ativa { background: var(--color-accent-glow); }
.busca-sugestao mark { padding: 0; background: transparent; color: var(--color-accent); font-weight: 700; }
.busca-sugestao-cat { flex: 0 0 5.2rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }

.filtro-datas input[type=date] { max-width: 9.2rem; }

/* Comparação de períodos */
.dash { --cmp-a: #8b8fa3; --cmp-b: var(--viz-1); }
.cmp-legenda { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.cmp-legenda.cmp-a, .cmp-barra.cmp-a { background: var(--cmp-a); }
.cmp-legenda.cmp-b, .cmp-barra.cmp-b { background: var(--cmp-b); }
th.cmp-a, th.cmp-b { white-space: nowrap; }
.cmp-delta { white-space: nowrap; }
.cmp-delta.bom { color: var(--delta-bom); }
.cmp-delta.ruim { color: var(--delta-ruim); }
.cmp-delta.igual { color: var(--color-text-muted); }
.cmp-grafico { display: flex; gap: .5rem; align-items: stretch; height: 220px; padding-top: 1.2rem; }
.cmp-grupo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.cmp-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--color-border-input); }
.cmp-barra { width: 42%; max-width: 2.4rem; min-height: 1px; border-radius: 3px 3px 0 0; position: relative; }
.cmp-barra span { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .68rem; color: var(--color-text-muted); white-space: nowrap; }
.cmp-rotulo { text-align: center; font-size: .72rem; color: var(--color-text-muted); padding-top: .3rem; }

/* Lista de multas: texto completo (quebra a linha em vez de cortar com "...") */
.tabela-texto-completo > tbody > tr > td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.3; }
.tabela-texto-completo .celula-curta.curta-g { font-size: .76rem; }
.tabela-texto-completo .celula-curta { display: inline; white-space: normal; overflow: visible; }
.tabela-texto-completo td.acoes, .tabela-texto-completo td.text-nowrap { white-space: nowrap; overflow-wrap: normal; }
.tabela-texto-completo .celula-sub { display: block; font-size: .7rem; color: var(--color-text-muted); margin-top: 1px; }

/* Controle de Multas: nada pela metade */
#tabela-multas thead th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; vertical-align: bottom; }
#tabela-multas > tbody > tr > td { overflow-wrap: normal; word-break: normal; }
#tabela-multas .sel-lista { font-size: .72rem; padding-left: .35rem; }
#tabela-multas .acoes-grade { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
#tabela-multas .acoes-grade .btn { margin: 0 !important; }

.menu-grupo { margin-bottom: -.75rem; }
.menu-grupo:not(:first-child) { margin-top: 1.25rem; }
.menu-grupo-titulo { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); padding-bottom: .4rem; margin: 0; }
.link-multa { color: inherit; text-decoration: underline dotted; }
.link-multa:hover { color: var(--color-accent); }

/* ===== Controle de Multas: cabeçalho com filtro, colunas do usuário, status em evidência ===== */
.busca-multas-caixa { width: 19rem; max-width: 100%; }
#tabela-multas thead th { position: relative; user-select: none; }
#tabela-multas thead th[draggable="true"] { cursor: grab; }
#tabela-multas thead th { cursor: default; }
#tabela-multas thead th.arrastando { opacity: .45; }
#tabela-multas thead th.soltar-antes { box-shadow: inset 3px 0 0 var(--color-accent, #0d6efd); }
#tabela-multas thead th.soltar-depois { box-shadow: inset -3px 0 0 var(--color-accent, #0d6efd); }
.th-col { display: flex; align-items: flex-end; gap: .2rem; justify-content: space-between; }
.th-rotulo { display: inline-flex; align-items: flex-end; gap: .1rem; }
.th-grip { display: none; font-size: .7rem; }
#tabela-multas.modo-edicao thead th[draggable] .th-grip { display: inline; opacity: .6; }
#tabela-multas.modo-edicao thead th[draggable] { background: rgba(13,110,253,.06); outline: 1px dashed rgba(13,110,253,.35); outline-offset: -3px; }
.btn-filtro-col { position: relative; z-index: 1; flex-shrink: 0; }
.btn-filtro-col { border: 0; background: transparent; color: var(--color-text-muted); padding: 0 .2rem; line-height: 1; border-radius: 4px; font-size: .78rem; }
.btn-filtro-col:hover, .btn-filtro-col:focus-visible { color: var(--color-accent, #0d6efd); background: rgba(13,110,253,.08); }
.btn-filtro-col.ativo { color: #fff; background: var(--color-accent, #0d6efd); }
.filtro-col-menu { width: 17rem; max-height: 24rem; overflow: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .82rem; }
.filtro-bloco + .filtro-bloco { border-top: 1px solid var(--color-border); margin-top: .5rem; padding-top: .5rem; }
.filtro-bloco-titulo { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .3rem; color: var(--color-text-muted); }
.filtro-col-menu .filtro-multi-lista { max-height: 14rem; overflow: auto; }
.filtros-ativos .chip-filtro { display: inline-flex; align-items: center; gap: .3rem; background: rgba(13,110,253,.1); border: 1px solid rgba(13,110,253,.25); border-radius: 999px; padding: .05rem .35rem .05rem .6rem; margin: .1rem .15rem; }
.btn-close-sm { width: .5em; height: .5em; padding: .25em; }
.menu-colunas { width: 17rem; }
.menu-colunas .item-coluna { padding: .15rem .25rem; border-radius: 6px; }
.menu-colunas .item-coluna:hover { background: rgba(127,127,127,.08); }
/* Prazos próximos em evidência */
.btn-prazo-destaque { background: #fff3cd; border: 1px solid #ffcd39; color: #664d03; font-weight: 600; }
.btn-prazo-destaque:hover { background: #ffe69c; color: #523e02; }
.btn-prazo-destaque.ativo { background: #ffc107; border-color: #e0a800; color: #1f1a00; }
html[data-tema="escuro"] .btn-prazo-destaque { background: rgba(255,193,7,.15); color: #ffda6a; border-color: rgba(255,193,7,.45); }
html[data-tema="escuro"] .btn-prazo-destaque.ativo { background: #ffc107; color: #1f1a00; }
#tabela-multas tbody tr.linha-prazo-proximo > td { background-color: rgba(255,193,7,.09); }
#tabela-multas tbody tr.linha-prazo-proximo > td:first-child { box-shadow: inset 3px 0 0 #ffc107; }
.prazo-proximo { display: inline-flex; flex-direction: column; font-weight: 700; color: #a36b00; line-height: 1.15; }
.prazo-proximo small { font-weight: 600; font-size: .68rem; }
html[data-tema="escuro"] .prazo-proximo { color: #ffda6a; }
/* Status em evidência + pagamento na setinha */
#tabela-multas .sel-andamento { font-weight: 600; font-size: .76rem; border-left-width: 4px; }
#tabela-multas .sel-andamento[data-tom="ok"] { border-left-color: #198754; background-color: rgba(25,135,84,.08); }
#tabela-multas .sel-andamento[data-tom="ruim"] { border-left-color: #dc3545; background-color: rgba(220,53,69,.08); }
#tabela-multas .sel-andamento[data-tom="atencao"] { border-left-color: #fd7e14; background-color: rgba(253,126,20,.08); }
.btn-pagamento-toggle { border: 0; background: transparent; color: var(--color-text-muted); font-size: .7rem; padding: .15rem .1rem 0; display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
.btn-pagamento-toggle:hover { color: var(--color-accent, #0d6efd); }
.btn-pagamento-toggle .bi { transition: transform .15s; font-size: .65rem; }
.btn-pagamento-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.pagamento-box { margin-top: .2rem; }
/* Ações: PDF em evidência, o resto no menu */
.acoes-linha { display: flex; align-items: center; justify-content: center; gap: 4px; }
.btn-pdf-destaque { font-weight: 600; font-size: .72rem; padding: .2rem .45rem !important; white-space: nowrap; }
.btn-mais { padding: .2rem .3rem !important; }
.busca-multas-caixa { width: 15rem; }
#tabela-multas .sel-andamento { font-size: .72rem; }

.tabela-repetidos tr.campo-difere > * { background-color: rgba(220,53,69,.08) !important; }
.tabela-repetidos tr.campo-difere > td { font-weight: 600; }
.aviso-auto-repetido { border-left: 4px solid #dc3545; }

.painel-colunas { border: 1px solid rgba(13,110,253,.3); background: rgba(13,110,253,.04); border-radius: 10px; padding: .6rem .8rem; }
.painel-colunas .lista-colunas { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.painel-colunas .item-coluna { border: 1px solid var(--color-border); border-radius: 8px; padding: .15rem .35rem; background: var(--color-bg-card, transparent); }

/* Opções do status/pagamento: sempre com as cores do tema (o fundo colorido é só do campo) */
#tabela-multas .sel-lista option { background-color: var(--color-bg-input, #fff); color: var(--color-text-primary, #212529); font-weight: 400; }
html[data-tema="escuro"] #tabela-multas .sel-lista option { background-color: #1e2533; color: #e9ecef; }
html[data-tema="escuro"] #tabela-multas .sel-andamento[data-tom="ok"] { background-color: rgba(25,135,84,.18); }
html[data-tema="escuro"] #tabela-multas .sel-andamento[data-tom="ruim"] { background-color: rgba(220,53,69,.18); }
html[data-tema="escuro"] #tabela-multas .sel-andamento[data-tom="atencao"] { background-color: rgba(253,126,20,.18); }

.tm-importacao-status { background: var(--color-bg-card, #fff); color: var(--color-text-primary, #212529); border: 1px solid var(--color-border, rgba(0,0,0,.15));
    border-radius: 999px; padding: .2rem .7rem .15rem; font-size: .78rem; line-height: 1.3; max-width: 26rem; }
.tm-importacao-status .tm-imp-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 19rem; }
body.janela-importacao .navbar, body.janela-importacao .barra-voltar, body.janela-importacao footer { display: none !important; }

/* Financeiro: tudo na mesma tela */
#tabela-fin thead th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; vertical-align: bottom; }
#tabela-fin > tbody > td, #tabela-fin > tbody > tr > td { white-space: normal; overflow-wrap: anywhere; }
#tabela-fin td.acoes { white-space: nowrap; }
#tabela-fin td.acoes .btn { padding: .15rem .4rem; }