* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-start: #6d7ee7;
    --bg-end: #7b54b7;

    --card-bg: rgba(238, 236, 246, 0.88);
    --card-solid: #ebe9f4;
    --white-soft: rgba(255, 255, 255, 0.65);

    --text-main: #202636;
    --text-soft: #61687b;
    --text-muted: #7a8293;

    --primary: #6c6fd8;
    --primary-start: #4e82f0;
    --primary-end: #9d34ef;

    --blue: #4f82f0;
    --purple: #8d43f1;
    --green: #31b768;
    --orange: #eb7023;
    --danger: #df4f4f;

    --border-soft: #e5e2ef;
    --input-bg: #f1f0f6;
    --neutral-bg: #eceaf2;
    --neutral-bg-hover: #e3e0eb;

    --shadow: 0 20px 45px rgba(35, 24, 90, 0.18);
    --shadow-soft: 0 10px 24px rgba(35, 24, 90, 0.08);

    --radius: 18px;
    --radius-sm: 14px;
    --radius-xs: 12px;

    --transition: 0.2s ease;
    --gradient-primary: linear-gradient(90deg, var(--primary-start), var(--primary-end));
    --gradient-primary-alt: linear-gradient(135deg, #4e73df, #8a4de8);
    --gradient-green: linear-gradient(90deg, #38b966, #26a05a);
}

html,
body {
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
    background: linear-gradient(90deg, var(--bg-start) 0%, var(--bg-end) 100%);
    color: var(--text-main);
}

/* =========================
   BASE
========================= */
a,
button,
input,
select,
textarea {
    font: inherit;
}

button,
input,
select,
textarea {
    outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(78, 130, 240, 0.55);
    outline-offset: 2px;
}

.sidebar,
.navbar,
.topbar,
.headerPage {
    box-sizing: border-box;
}

/* =========================
   ESTRUTURA BASE
========================= */
.containerPage {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.contentPage {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page {
    padding: 30px;
    width: 100%;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
}

.page-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.1;
}

.page-subtitle {
    font-size: 16px;
    color: #c6c6c6;
}

/* =========================
   BOTÕES
========================= */
.btn-gradient,
.btn-green,
.btn-light,
.btn-user-details,
.btn-login-submit,
.btn-user-primary,
.btn-user-outline,
.btn-user-confirm,
.btn-user-cancel {
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
    text-decoration: none;
}

.btn-gradient,
.btn-green,
.btn-light,
.btn-user-details,
.btn-login-submit {
    border: 0;
    padding: 14px 24px;
}

.btn-gradient:hover,
.btn-green:hover,
.btn-light:hover,
.btn-user-details:hover,
.btn-login-submit:hover,
.btn-user-primary:hover,
.btn-user-outline:hover,
.btn-user-confirm:hover,
.btn-user-cancel:hover {
    transform: translateY(-1px);
}

.btn-gradient {
    color: #fff;
    background: linear-gradient(90deg, #4e82f0, #a231ee);
}

.btn-green {
    color: #fff;
    background: var(--gradient-green);
}

.btn-light {
    color: #444b5d;
    background: #efeff4;
}

.btn-user-details {
    width: 100%;
    background: var(--neutral-bg);
    color: #444c5d;
    font-size: 16px;
}

.btn-login-submit {
    width: 100%;
    height: 54px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(90deg, #4e82f0, #a331ee);
    margin-top: 6px;
}

.user-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.btn-user-primary,
.btn-user-outline,
.btn-user-confirm,
.btn-user-cancel {
    width: 100%;
    height: 46px;
    border: 0;
    font-size: 15px;
}

.btn-user-primary {
    background: var(--gradient-primary);
    color: #fff;
}

.btn-user-primary:hover {
    opacity: 0.94;
}

.btn-user-outline {
    background: #f4f2fb;
    color: #5a5f6b;
    border: 2px solid #dcd8ea;
}

.btn-user-outline:hover {
    background: #fde8ea;
    border-color: #efb7bf;
    color: #b23a48;
}

.btn-user-confirm {
    background: var(--danger);
    color: #fff;
}

.btn-user-confirm:hover {
    background: #c83f3f;
}

.btn-user-cancel {
    background: var(--neutral-bg);
    color: #444c5d;
}

.btn-user-cancel:hover {
    background: var(--neutral-bg-hover);
}

.btn-loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading .btn-label {
    opacity: 0.9;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: btn-spin 0.7s linear infinite;
}

.btn-user-outline.btn-loading .btn-spinner,
.btn-user-cancel.btn-loading .btn-spinner {
    border: 2px solid rgba(90, 95, 107, 0.25);
    border-top-color: #5a5f6b;
}

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

/* =========================
   CARDS GERAIS
========================= */
.dashboard-card,
.filter-card,
.table-card,
.user-card,
.popup,
.signature-modal {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(4px);
}

.dashboard-card {
    padding: 24px;
}

.dashboard-card.small {
    min-height: 218px;
}

.dashboard-card.large {
    min-height: 420px;
}

/* =========================
   DASHBOARD / INICIO
========================= */
.dashboard-top-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.card-title {
    font-size: 15px;
    color: #5f6578;
    margin-bottom: 6px;
}

.card-number {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: #6670d6;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.card-icon.blue {
    background: linear-gradient(135deg, #5b84ff, #3d62e8);
}

.card-icon.green {
    background: linear-gradient(135deg, #44c66b, #1f9a58);
}

.card-icon.pink {
    background: linear-gradient(135deg, #b850dd, #d43694);
}

.card-icon.orange {
    background: linear-gradient(135deg, #f57b29, #e44724);
}

.card-growth {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
}

.card-growth.positive {
    color: #33b95b;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1d2230;
    margin-bottom: 28px;
}

/* pie */
.campaign-chart-area {
    position: relative;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-chart {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: conic-gradient(
        #4e7fe2 0deg 158.4deg,
        #f0a22e 158.4deg 187.2deg,
        #3eb581 187.2deg 248.4deg,
        #7e53e7 248.4deg 360deg
    );
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.7);
}

.chart-label {
    position: absolute;
    font-size: 15px;
    font-weight: 500;
}

.label-top-right {
    top: 8px;
    right: 120px;
    color: #4e7fe2;
}

.label-left {
    left: 55px;
    bottom: 70px;
    color: #7e53e7;
}

.label-bottom-right {
    right: 90px;
    bottom: 38px;
}

.label-right {
    right: 42px;
    top: 128px;
}

.green-text {
    color: #3eb581;
}

.orange-text {
    color: #f0a22e;
}

.chart-legend {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 30px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5d6275;
    font-size: 15px;
}

.dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: inline-block;
}

.dot.blue {
    background: #4e7fe2;
}

.dot.purple {
    background: #7e53e7;
}

.dot.green {
    background: #3eb581;
}

.dot.orange {
    background: #f0a22e;
}

/* recentes */
.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.view-all {
    color: #4a74f0;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 10px;
}

.recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 14px;
}

.recent-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.recent-icon,
.table-doc-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5d84ff, #7e3df0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.recent-title {
    font-size: 16px;
    font-weight: 700;
    color: #232838;
    margin-bottom: 5px;
}

.recent-subtitle {
    font-size: 14px;
    color: #777d8f;
}

.status-badge {
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-badge.success {
    background: #d8f3dc;
    color: #2f9d57;
}

.status-badge.warning {
    background: #fde7cc;
    color: #d96b1c;
}

/* confirmação inline */
.user-inline-confirm {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
}

.user-inline-confirm-text {
    font-size: 14px;
    font-weight: 700;
    color: #394052;
    text-align: center;
}

.user-inline-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* =========================
   FILTROS / INPUTS
========================= */
.filter-card {
    padding: 16px;
    margin-bottom: 24px;
}

.filter-grid {
    display: grid;
    gap: 16px;
}

.documents-filter-grid {
    grid-template-columns: 1fr 180px;
}

.history-filter-grid {
    grid-template-columns: 1fr 250px;
}

.input-search input,
.input-select select,
.inputPopup input,
.login-field input {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    padding: 0 16px;
    font-size: 16px;
    color: #323848;
}

.input-search input::placeholder,
.login-field input::placeholder {
    color: #9ca2b2;
}

.inputPopup input,
.inputPopup textarea {
    background: #fff;
    border: 1px solid var(--border-soft);
}

.input-select select {
    appearance: none;
    cursor: pointer;
}

.inputPopup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inputPopup textarea {
    width: 100%;
    border-radius: var(--radius-xs);
    padding: 12px;
    font-size: 15px;
    resize: none;
    min-height: 120px;
    font-family: Arial, Helvetica, sans-serif;
}

.titleInputPopup {
    color: #4b5160;
}

.btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: var(--radius-xs);
    border: 2px solid #3c4455;
    cursor: pointer;
    font-weight: 700;
    color: #2c3445;
    transition: var(--transition);
    background: #fff;
}

.btn-upload:hover {
    background: #f1eff7;
}

.btn-upload input {
    display: none;
}

/* =========================
   TABELAS
========================= */
.table-card {
    overflow: hidden;
}

.table-responsive,
.history-table-responsive {
    width: 100%;
    overflow-x: auto;
}

.history-table-responsive {
    overflow-y: hidden;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.custom-table thead th {
    text-align: left;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.25);
    color: #454c5d;
    font-size: 15px;
}

.custom-table tbody td {
    padding: 16px 22px;
    color: #2d3344;
    vertical-align: middle;
}

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

.table-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
}

.actions-cell {
    font-size: 18px;
    letter-spacing: 8px;
    color: #505767;
    white-space: nowrap;
}

.history-table td a {
    color: #3f66e6;
    text-decoration: none;
    font-weight: 700;
}

/* =========================
   ACTIONS / DROPDOWN
========================= */
.actions-menu-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 0;
    background: #eceaf2;
    color: #434b5d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
}

.action-btn:hover {
    background: #e3e0eb;
}

.action-btn.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.dropdown-wrap {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 130px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 35px rgba(35, 24, 90, 0.18);
    padding: 8px;
    display: none;
    z-index: 30;
}

.dropdown-wrap.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: #384053;
    font-weight: 600;
}

.dropdown-item:hover {
    background: #f1eff7;
}

/* =========================
   VIEW INFO
========================= */
.viewCampaignContent {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.view-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.view-info-box {
    background: #f2f1f6;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.view-info-box strong {
    color: #4b5160;
    font-size: 14px;
}

.view-info-box span,
.view-info-box a {
    color: #2f3647;
    font-size: 15px;
    word-break: break-word;
    text-decoration: none;
}

.view-info-box a {
    color: #3f66e6;
    font-weight: 700;
}

/* =========================
   USUÁRIOS
========================= */
.users-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.user-card {
    padding: 24px;
}

.user-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.user-avatar {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4b82f1, #8f33ef);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
}

.user-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.user-email {
    color: #72798b;
    font-size: 14px;
    word-break: break-word;
}

.user-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.user-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5a6173;
    font-size: 15px;
    gap: 16px;
}

.user-info-row strong {
    color: #242b3b;
    font-size: 16px;
}

.user-badge {
    padding: 6px 14px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.user-badge.admin {
    background: #f1e4fb;
    color: #8b3bee;
}

.user-badge.user {
    background: #f0f0f2;
    color: #575e6f;
}

.user-badge.manager {
    background: #dde8ff;
    color: #4168e7;
}

.user-card-footer {
    margin-top: 22px;
}

/* preview foto */
.imgInputPhoto img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imgInputPhoto.has-image img {
    display: block;
}

/* =========================
   POPUPS / MODAIS
========================= */
.popups .telaP {
    position: fixed;
    inset: 0;
    background: rgba(30, 25, 60, 0.45);
    backdrop-filter: blur(4px);
    z-index: 90;
}

.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    width: 520px;
    max-width: calc(100vw - 30px);
    padding: 24px;
}

.popup.small {
    width: 360px;
}

.topPopup,
.signature-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topPopup {
    margin-bottom: 22px;
}

.titlePopup,
.signature-modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.closePopup,
.modal-close {
    background: transparent;
    border: 0;
    font-size: 26px;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

.contentPopup {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inputPhoto {
    display: flex;
    justify-content: center;
}

.imgInputPhoto {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #eceaf4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.imgInputPhoto span {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 10px;
}

.inputPhoto input {
    display: none;
}

.btnPopup button,
.btnDel button {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
}

.btnPopup button {
    background: var(--gradient-primary);
    color: #fff;
}

.btnsPopup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.btnDel:first-child button {
    background: var(--danger);
    color: #fff;
}

.btnDel:last-child button {
    background: var(--neutral-bg);
    color: #444c5d;
}

.textPopup {
    text-align: center;
    font-size: 18px;
    color: #2b3242;
}

/* =========================
   MODAL HISTÓRICO
========================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.signature-modal {
    position: relative;
    width: min(920px, 100%);
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 0;
}

.signature-modal-animated {
    transform: translateY(14px) scale(0.98);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.signature-modal-animated.show {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.signature-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 0;
}

.signature-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    box-sizing: border-box;
}

.signature-box {
    min-width: 0;
    background: #f2f1f6;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.signature-box.full {
    grid-column: 1 / -1;
}

.signature-box strong {
    font-size: 14px;
    color: #4b5160;
}

.signature-box span {
    display: block;
    color: #2f3647;
    font-size: 15px;
    word-break: break-word;
}

.signature-image-box {
    min-height: 120px;
}

.signature-placeholder,
.signature-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-placeholder {
    color: #555b6a;
    font-weight: 700;
    min-height: 120px;
    text-align: center;
}

.signature-preview-wrap {
    min-height: 140px;
    width: 100%;
    overflow: hidden;
}

.signature-image-box img,
#modalAssinatura {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

#modalMapWrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

#modalMapa {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 260px;
    border: 0;
    border-radius: 12px;
}

.signature-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 16px 20px;
    border-top: 1px solid #e9e9e9;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* =========================
   HISTORY PAGE
========================= */
.history-page .filter-card,
.history-page .table-card,
.history-table-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.history-filter-form {
    margin-bottom: 24px;
}

.history-filter-grid-fix {
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 14px;
}

.history-filter-grid-fix .input-search,
.history-filter-grid-fix .input-select {
    min-width: 0;
}

.history-table {
    min-width: 1180px;
}

.history-table.history-table-compact {
    min-width: 1160px;
}

.history-table.history-table-compact thead th {
    font-size: 14px;
    padding: 16px 18px;
}

.history-table.history-table-compact tbody td {
    font-size: 13px;
    padding: 14px 18px;
}

.history-table tbody tr {
    cursor: pointer;
    transition: var(--transition);
}

.history-table tbody tr:hover,
.history-table tbody tr.history-row-clickable:hover {
    background: rgba(255, 255, 255, 0.12);
}

.history-table tbody tr.history-row-clickable {
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.history-table tbody tr.history-row-active {
    background: rgba(124, 84, 197, 0.16);
    box-shadow: inset 3px 0 0 #7b54b7;
}

.history-signature-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.nowrap-cell {
    white-space: nowrap;
}

.email-cell {
    max-width: 120px;
    font-size: 11px;
    opacity: 0.9;
    white-space: nowrap;
}

.campaign-name-cell {
    max-width: 180px;
    font-size: 12px;
    white-space: nowrap;
}

.history-pagination {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

.history-pagination-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.history-page-btn,
.history-page-number {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--card-bg);
    color: #434b5d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}

.history-page-btn:hover,
.history-page-number:hover {
    background: #f7f6fb;
    transform: translateY(-1px);
}

.history-page-number.active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(85, 76, 190, 0.18);
}

.history-page-btn.disabled,
.history-page-number.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.history-page-dots {
    min-width: 24px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

/* tabela com skeleton loading */
#historyTable {
    opacity: 0;
    transition: opacity 0.18s ease;
}

#historyTable.show {
    opacity: 1;
}

.history-table-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    transition: opacity 0.2s ease;
}

.history-table-loading.hide {
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.history-skeleton-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.3fr 0.5fr 1fr;
    gap: 12px;
}

.history-skeleton-row span {
    height: 16px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.18) 25%,
        rgba(255, 255, 255, 0.33) 50%,
        rgba(255, 255, 255, 0.18) 75%
    );
    background-size: 200% 100%;
    animation: historyShimmer 1.2s infinite linear;
}

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

/* =========================
   MINI CHARTS
========================= */
.mini-chart {
    width: 100%;
    height: 78px;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.line-chart span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}

.chart-documents span::after,
.chart-signatures span::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8a7cf7;
    border: 2px solid #ece9f6;
    box-shadow: 0 0 0 2px rgba(138, 124, 247, 0.15);
    opacity: 0;
    transition: opacity var(--transition);
}

.chart-documents:hover span::after,
.chart-signatures:hover span::after {
    opacity: 1;
}

.chart-documents span {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'>\
<path d='M5 55 C 35 60, 55 65, 85 52 C 110 42, 135 48, 165 40 C 195 31, 220 15, 250 20 C 270 23, 285 30, 295 35' fill='none' stroke='%234d73f2' stroke-width='3' stroke-linecap='round'/>\
</svg>");
}

.chart-documents span::after {
    right: 4px;
    bottom: 14px;
}

.chart-signatures span {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 80' preserveAspectRatio='none'>\
<defs>\
<linearGradient id='grad1' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0%' stop-color='%238a63ff'/>\
<stop offset='100%' stop-color='%238a63ff' stop-opacity='0'/>\
</linearGradient>\
</defs>\
<path d='M5 62 C 70 61, 120 60, 180 59 C 220 58, 245 57, 265 52 C 278 48, 288 35, 298 18' fill='none' stroke='%238a63ff' stroke-width='3' stroke-linecap='round'/>\
<path d='M5 80 L 5 62 C 70 61, 120 60, 180 59 C 220 58, 245 57, 265 52 C 278 48, 288 35, 298 18 L 298 80 Z' fill='url(%23grad1)' opacity='0.18'/>\
</svg>");
}

.chart-signatures span::after {
    right: 1px;
    bottom: 31px;
}

/* =========================
   LOGIN
========================= */
.login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 85%, rgba(255, 176, 220, 0.35), transparent 20%),
        linear-gradient(90deg, #eef1f7 0%, #f1eaf9 100%);
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    width: 440px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(88, 79, 140, 0.15);
    padding: 38px 36px;
    backdrop-filter: blur(6px);
}

.login-logo-box {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4f82f0, #9935ee);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    box-shadow: 0 10px 25px rgba(94, 74, 180, 0.25);
}

.login-title-main {
    text-align: center;
    font-size: 28px;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 6px;
}

.login-subtitle-main {
    text-align: center;
    color: #656f81;
    font-size: 16px;
    margin-bottom: 30px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-field label {
    font-size: 15px;
    color: #4e5668;
    font-weight: 700;
}

.login-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    margin-top: 2px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5f6778;
    cursor: pointer;
}

.forgot-link {
    color: #3c64e7;
    text-decoration: none;
    font-weight: 700;
}

.login-footer {
    margin-top: 28px;
    text-align: center;
    color: #6c7383;
    font-size: 14px;
    line-height: 1.5;
}

/* =========================
   SIDEBAR / NAVBAR
========================= */
.sidebar {
    width: 245px;
    min-width: 245px;
    min-height: 100vh;
    background: rgba(237, 238, 247, 0.88);
    border-right: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 16px;
    backdrop-filter: blur(8px);
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.brand-box {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 4px 8px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f82f0, #9f35ef);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 20px rgba(90, 74, 180, 0.18);
}

.brand-title {
    font-size: 18px;
    font-weight: 800;
    color: #6a72da;
    line-height: 1.1;
}

.brand-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-link {
    height: 46px;
    border-radius: 14px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #485062;
    font-weight: 600;
    transition: var(--transition);
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.35);
}

.sidebar-link.active {
    background: linear-gradient(90deg, #4f82f0, #9e33ef);
    color: #fff;
    box-shadow: 0 12px 24px rgba(85, 76, 190, 0.22);
}

.sidebar-link-icon {
    width: 20px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}

.sidebar-bottom {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sidebar-user-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5d84ff, #8c37ef);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 14px;
    font-weight: 700;
    color: #2f3545;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout {
    text-decoration: none;
    color: #7e8597;
    font-size: 18px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.sidebar-logout:hover {
    background: rgba(255, 255, 255, 0.45);
    color: #4b5364;
}

/* =========================
   HEADER
========================= */
.headerPage {
    width: 100%;
    min-height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px 0;
}

.headerPage-left,
.headerPage-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.headerPage-badge {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

/* =========================
   RESPONSIVO
========================= */
@media (max-width: 1400px) {
    .users-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .dashboard-top-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-grid,
    .documents-filter-grid,
    .history-filter-grid,
    .history-filter-grid-fix {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .page {
        padding: 24px;
    }

    .page-title {
        font-size: 38px;
    }

    .users-grid,
    .signature-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        width: 88px;
        min-width: 88px;
        padding: 18px 10px;
    }

    .brand-box {
        justify-content: center;
        padding: 0;
    }

    .brand-text,
    .sidebar-user-info,
    .headerPage-badge {
        display: none;
    }

    .sidebar-link {
        justify-content: center;
        padding: 0;
    }

    .sidebar-link span:last-child {
        display: none;
    }

    .sidebar-user {
        justify-content: center;
    }

    .sidebar-logout {
        display: none;
    }

    .headerPage {
        padding: 14px 24px 0;
    }
}

@media (max-width: 768px) {
    .page {
        padding: 20px;
    }

    .page-heading,
    .page-heading-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title {
        font-size: 32px;
    }

    .dashboard-top-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dashboard-card {
        padding: 20px;
    }

    .card-number {
        font-size: 42px;
    }

    .section-title {
        font-size: 20px;
    }

    .campaign-chart-area {
        height: 220px;
    }

    .pie-chart {
        width: 140px;
        height: 140px;
    }

    .label-top-right {
        right: 20px;
        top: 0;
    }

    .label-left {
        left: 10px;
        bottom: 55px;
    }

    .label-right {
        right: 0;
        top: 118px;
    }

    .label-bottom-right {
        right: 10px;
        bottom: 18px;
    }

    .chart-legend,
    .view-info-grid {
        grid-template-columns: 1fr;
    }

    .recent-item,
    .login-row,
    .containerPage {
        flex-direction: column;
    }

    .recent-item,
    .login-row,
    .page-heading,
    .page-heading-actions {
        align-items: flex-start;
    }

    .popup {
        width: calc(100vw - 24px);
        padding: 20px;
    }

    .modal-overlay {
        padding: 10px;
        align-items: flex-start;
    }

    .signature-modal {
        width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 14px;
        margin: 0;
    }

    .signature-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .signature-modal-header,
    .signature-modal-footer {
        padding: 14px 16px;
    }

    #modalMapa {
        height: 220px;
    }

    .login-card {
        padding: 30px 22px;
    }

    .login-title-main {
        font-size: 24px;
    }

    .sidebar {
        width: 100%;
        min-width: 100%;
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        padding: 14px;
    }

    .sidebar-top {
        gap: 18px;
    }

    .brand-box {
        justify-content: flex-start;
    }

    .brand-text,
    .sidebar-user-info {
        display: block;
    }

    .sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-link {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
        justify-content: center;
    }

    .sidebar-link span:last-child {
        display: inline;
    }

    .sidebar-bottom {
        margin-top: 16px;
    }

    .sidebar-logout {
        display: flex;
    }

    .headerPage {
        padding: 16px 20px 0;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 28px;
    }

    .card-number {
        font-size: 36px;
    }

    .user-card-top,
    .recent-left {
        align-items: flex-start;
    }

    .user-avatar {
        width: 56px;
        height: 56px;
        min-width: 56px;
        font-size: 24px;
    }

    .custom-table {
        min-width: 760px;
    }

    .sidebar-link {
        flex: 1 1 100%;
    }
}

.users-list-wrapper {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    margin-top: 20px;
}

.users-list-header,
.user-list-item {
    display: grid;
    grid-template-columns: 90px 1.5fr 2fr 180px;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
}

.users-list-header {
    background: #f5f5f5;
    font-weight: bold;
    color: #2A4346;
    border-bottom: 1px solid #e5e5e5;
}

.user-list-item {
    border-bottom: 1px solid #ececec;
    background: #fff;
}

.user-list-item:last-child {
    border-bottom: none;
}

.user-photo img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.user-name,
.user-email {
    color: #333;
    word-break: break-word;
}

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

.btn-action {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
}

.btn-edit {
    background: #6c6fd8;
    color: #fff;
}

.btn-delete {
    background: #d9534f;
    color: #fff;
}

.user-list-empty {
    padding: 20px;
    text-align: center;
    background: #fff;
    color: #777;
}

@media (max-width: 768px) {
    .users-list-header {
        display: none;
    }

    .user-list-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px;
    }

    .user-actions {
        justify-content: flex-start;
    }
}

.user-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2A4346;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}