/**
 * Hotspot PIX
 * Arquivo: assets/style.css
 */

/* ================================================================
   RESET / BASE
================================================================ */

* {
    box-sizing: border-box;
}

html {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #1f2937;
    background: #f3f4f6;
}

body {
    margin: 0;
    min-height: 100vh;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}


/* ================================================================
   FORMULÁRIOS
================================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.form-group input,
.form-group select,
.form-group textarea,
.admin-search input,
.pix-copy-section textarea {
    width: 100%;
    min-height: 44px;

    padding: 10px 12px;

    border: 1px solid #d1d5db;
    border-radius: 8px;

    background: #ffffff;
    color: #111827;

    outline: none;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.admin-search input:focus,
.pix-copy-section textarea:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.12);
}

.form-group-small {
    max-width: 170px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.field-help {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}

.optional {
    color: #9ca3af;
    font-weight: 400;
}

.checkbox-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #4b5563;
    font-size: 14px;

    cursor: pointer;
}

.checkbox-line input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 8px 0;
}


/* ================================================================
   BOTÕES
================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;

    padding: 9px 16px;

    border: 0;
    border-radius: 8px;

    font-weight: 700;
    font-size: 13px;

    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        background 0.15s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
    background: #1d4ed8;
}

.btn-secondary {
    background: #e5e7eb;
    color: #1f2937;
}

.btn-secondary:hover:not(:disabled) {
    background: #d1d5db;
}

.btn-success {
    background: #059669;
    color: #ffffff;
}

.btn-success:hover:not(:disabled) {
    background: #047857;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.btn-full {
    width: 100%;
}

.btn-small {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
}


/* ================================================================
   MENSAGENS
================================================================ */

.form-message {
    margin-bottom: 18px;
    padding: 12px 14px;

    border-radius: 8px;

    font-size: 14px;
    line-height: 1.45;
}

.form-message-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-message-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert {
    padding: 15px;

    border-radius: 9px;

    font-size: 14px;
}

.alert p {
    margin: 5px 0 0;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}


/* ================================================================
   PORTAL
================================================================ */

.portal-body {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding: 28px 16px;

    background:
        linear-gradient(
            180deg,
            #eff6ff 0%,
            #f8fafc 60%,
            #f3f4f6 100%
        );
}

.portal-container {
    width: 100%;
    max-width: 520px;
}

.portal-card {
    width: 100%;

    padding: 28px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 16px;

    box-shadow:
        0 12px 40px
        rgba(15, 23, 42, 0.08);
}

.portal-header {
    text-align: center;
    margin-bottom: 28px;
}

.portal-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 62px;
    height: 42px;

    margin-bottom: 14px;

    padding: 0 13px;

    background: #2563eb;
    color: #ffffff;

    border-radius: 12px;

    font-weight: 800;
    letter-spacing: 0.04em;
}

.portal-header h1 {
    margin-bottom: 7px;

    color: #111827;
    font-size: 25px;
}

.portal-header p {
    margin-bottom: 0;

    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
}

.portal-section {
    margin-bottom: 26px;
}

.portal-section h2 {
    margin-bottom: 14px;

    color: #111827;
    font-size: 16px;
}

.consent-section {
    padding-top: 4px;
}


/* ================================================================
   PLANOS DO PORTAL
================================================================ */

.plans {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.plan-card {
    position: relative;

    display: block;

    padding: 15px;

    border: 2px solid #e5e7eb;
    border-radius: 11px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.plan-card:hover {
    border-color: #93c5fd;
}

.plan-card.selected {
    border-color: #2563eb;
    background: #eff6ff;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.08);
}

.plan-card input[type="radio"] {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.plan-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    align-items: center;
}

.plan-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plan-name {
    color: #111827;
    font-size: 16px;
}

.plan-duration {
    color: #6b7280;
    font-size: 13px;
}

.plan-speed {
    color: #6b7280;
    font-size: 12px;
}

.plan-price {
    grid-column: 2;
    grid-row: 1 / span 2;

    display: flex;
    align-items: baseline;
    gap: 3px;

    color: #111827;
}

.plan-price span {
    font-size: 12px;
}

.plan-price strong {
    font-size: 22px;
}

.payment-note {
    margin: 12px 0 0;

    text-align: center;

    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}


/* ================================================================
   PIX
================================================================ */

.pix-card {
    max-width: 520px;
}

.payment-summary {
    margin-bottom: 24px;

    padding: 14px 16px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 6px 0;

    font-size: 14px;
}

.summary-row span {
    color: #6b7280;
}

.summary-row strong {
    color: #111827;
}

.payment-value {
    margin-top: 6px;
    padding-top: 12px;

    border-top: 1px solid #e5e7eb;
}

.payment-value strong {
    font-size: 19px;
}

.pix-instructions {
    margin-bottom: 18px;

    text-align: center;

    color: #4b5563;
    font-size: 14px;
}

.qr-container {
    display: flex;
    justify-content: center;

    margin-bottom: 20px;
}

.pix-qrcode {
    width: 260px;
    max-width: 100%;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.pix-copy-section {
    margin-bottom: 20px;
}

.pix-copy-label {
    display: block;
    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 600;
}

.pix-copy-section textarea {
    min-height: 92px;

    margin-bottom: 10px;

    resize: none;

    font-size: 12px;
    line-height: 1.4;
}

.payment-status {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 20px;

    padding: 14px;

    background: #eff6ff;
    border-radius: 9px;

    color: #1e40af;
}

.payment-status strong {
    display: block;
    font-size: 14px;
}

.payment-status p {
    margin: 2px 0 0;
    font-size: 12px;
}

.status-spinner {
    width: 22px;
    height: 22px;

    flex: 0 0 22px;

    border: 3px solid #bfdbfe;
    border-top-color: #2563eb;

    border-radius: 50%;

    animation: spin 0.8s linear infinite;
}

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

.payment-timer {
    margin-top: 12px;

    text-align: center;

    color: #6b7280;
    font-size: 13px;
}

.payment-success,
.payment-expired {
    padding: 18px 0;

    text-align: center;
}

.success-icon,
.expired-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    margin: 0 auto 15px;

    border-radius: 50%;

    font-size: 32px;
    font-weight: 800;
}

.success-icon {
    background: #d1fae5;
    color: #047857;
}

.expired-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.payment-success h2,
.payment-expired h2 {
    margin-bottom: 8px;
}

.payment-success p,
.payment-expired p {
    color: #6b7280;
}

.connecting-message {
    margin-top: 16px;

    padding: 11px;

    background: #f0fdf4;
    color: #166534;

    border-radius: 8px;

    font-size: 13px;
}


/* ================================================================
   DEBUG LOCAL
================================================================ */

.debug-box {
    margin-top: 22px;

    padding: 12px;

    background: #f9fafb;

    border: 1px dashed #d1d5db;
    border-radius: 8px;

    color: #6b7280;

    font-family: monospace;
    font-size: 11px;

    overflow-wrap: anywhere;
}

.debug-box summary {
    cursor: pointer;
    font-family:
        Inter,
        system-ui,
        sans-serif;
    font-weight: 700;
}

.debug-box div {
    margin-top: 6px;
}


/* ================================================================
   LOGIN ADMIN
================================================================ */

.admin-login-body {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #1e3a8a
        );
}

.admin-login-container {
    width: 100%;
    max-width: 420px;
}

.admin-login-card {
    padding: 30px;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.25);
}

.admin-login-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 42px;

    margin: 0 auto 18px;

    background: #2563eb;
    color: #ffffff;

    border-radius: 11px;

    font-weight: 800;
}

.admin-login-card h1 {
    margin-bottom: 7px;

    text-align: center;

    font-size: 22px;
}

.admin-login-description {
    margin-bottom: 24px;

    text-align: center;

    color: #6b7280;
    font-size: 14px;
}


/* ================================================================
   ADMIN LAYOUT
================================================================ */

.admin-body {
    background: #f3f4f6;
}

.admin-layout {
    display: flex;

    min-height: 100vh;
}

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    z-index: 30;

    display: flex;
    flex-direction: column;

    width: 245px;

    background: #111827;
    color: #ffffff;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 20px 18px;

    border-bottom: 1px solid #1f2937;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 38px;

    flex: 0 0 46px;

    background: #2563eb;

    border-radius: 9px;

    font-weight: 800;
}

.sidebar-header strong {
    display: block;
    font-size: 14px;
}

.sidebar-header small {
    display: block;
    margin-top: 2px;

    color: #9ca3af;
    font-size: 11px;
}

.admin-menu {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;

    padding: 14px 10px;

    overflow-y: auto;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 11px 12px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #d1d5db;

    text-align: left;
    font-size: 14px;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.admin-menu-item:hover {
    background: #1f2937;
    color: #ffffff;
}

.admin-menu-item.active {
    background: #2563eb;
    color: #ffffff;
}

.menu-icon {
    width: 22px;

    text-align: center;
    font-size: 16px;
}

.sidebar-footer {
    padding: 14px;

    border-top: 1px solid #1f2937;
}

.admin-user-info {
    margin-bottom: 12px;
}

.admin-user-info strong {
    display: block;

    font-size: 13px;
}

.admin-user-info small {
    display: block;

    margin-top: 3px;

    color: #9ca3af;

    font-size: 11px;

    overflow-wrap: anywhere;
}

.admin-content {
    width: calc(100% - 245px);
    margin-left: 245px;
}

.admin-topbar {
    position: sticky;
    top: 0;

    z-index: 20;

    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 72px;

    padding: 12px 24px;

    background: rgba(255, 255, 255, 0.95);

    border-bottom: 1px solid #e5e7eb;

    backdrop-filter: blur(8px);
}

.admin-topbar h1 {
    margin-bottom: 2px;

    font-size: 20px;
}

.admin-topbar small {
    color: #6b7280;
}

.sidebar-toggle {
    display: none;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 8px;

    background: #f3f4f6;

    font-size: 20px;
}

.system-status {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-left: auto;

    color: #6b7280;
    font-size: 12px;
}

.status-dot {
    width: 8px;
    height: 8px;

    background: #9ca3af;

    border-radius: 50%;
}

.system-status.online .status-dot {
    background: #10b981;
}

.system-status.online {
    color: #047857;
}

.admin-main {
    padding: 24px;
}

.admin-page {
    display: none;
}

.admin-page.active {
    display: block;
}


/* ================================================================
   DASHBOARD
================================================================ */

.dashboard-cards {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    margin-bottom: 20px;
}

.dashboard-card {
    padding: 18px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    box-shadow:
        0 3px 12px
        rgba(15, 23, 42, 0.03);
}

.dashboard-label {
    display: block;

    margin-bottom: 8px;

    color: #6b7280;
    font-size: 12px;
}

.dashboard-value {
    display: block;

    color: #111827;

    font-size: 25px;
}


/* ================================================================
   PAINÉIS
================================================================ */

.admin-panel {
    margin-bottom: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 11px;

    overflow: hidden;
}

.admin-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 70px;

    padding: 16px 18px;

    border-bottom: 1px solid #e5e7eb;
}

.admin-panel-header h2 {
    margin-bottom: 3px;

    font-size: 16px;
}

.admin-panel-header p {
    margin-bottom: 0;

    color: #6b7280;
    font-size: 12px;
}

.admin-panel form,
.settings-info {
    padding: 18px;
}

.admin-grid-2 {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 20px;
}


/* ================================================================
   TABELAS
================================================================ */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;

    border-collapse: collapse;

    white-space: nowrap;
}

.admin-table th,
.admin-table td {
    padding: 12px 14px;

    border-bottom: 1px solid #f0f1f3;

    text-align: left;
    vertical-align: middle;

    font-size: 12px;
}

.admin-table th {
    background: #f9fafb;

    color: #6b7280;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.admin-table tbody tr:hover {
    background: #fafafa;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.table-empty {
    padding: 24px !important;

    text-align: center !important;

    color: #9ca3af;
}

.table-subtext {
    display: block;

    margin-top: 3px;

    color: #9ca3af;
}

.table-txid {
    max-width: 150px;
}

.mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 11px !important;
}


/* ================================================================
   BADGES
================================================================ */

.badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.badge-muted {
    background: #e5e7eb;
    color: #4b5563;
}


/* ================================================================
   BUSCA
================================================================ */

.leads-header {
    flex-wrap: wrap;
}

.admin-search {
    display: flex;
    gap: 8px;
}

.admin-search input {
    width: 280px;
}


/* ================================================================
   LISTAS ADMIN
================================================================ */

.plans-admin-list,
.routers-admin-list {
    display: flex;
    flex-direction: column;

    padding: 12px;
}

.admin-list-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 13px;

    border-bottom: 1px solid #f0f1f3;
}

.admin-list-card:last-child {
    border-bottom: 0;
}

.admin-list-card-main {
    display: flex;
    flex-direction: column;
    gap: 3px;

    min-width: 0;
}

.admin-list-card-main strong {
    font-size: 14px;
}

.admin-list-card-main span {
    color: #4b5563;
    font-size: 12px;
}

.admin-list-card-main small {
    color: #9ca3af;
    font-size: 11px;
}

.admin-list-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;
}


/* ================================================================
   EFÍ / CONFIGURAÇÕES
================================================================ */

.settings-info label {
    display: block;

    margin: 18px 0 6px;

    color: #374151;

    font-size: 13px;
    font-weight: 600;
}

.settings-info label:first-child {
    margin-top: 0;
}

.code-box {
    padding: 11px;

    background: #111827;
    color: #e5e7eb;

    border-radius: 7px;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    font-size: 11px;

    overflow-wrap: anywhere;
}

.webhook-note {
    margin: 18px 0;

    padding: 14px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;
    border-radius: 8px;

    font-size: 13px;
}

.webhook-note strong {
    display: block;
    margin-bottom: 5px;
}

.webhook-note p {
    margin: 0;

    color: #6b7280;
    line-height: 1.5;
}


/* ================================================================
   EFÍ - PERFIS HOMOLOGAÇÃO / PRODUÇÃO
================================================================ */

.efi-profiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.efi-profile-card {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.efi-profile-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.efi-profile-title h3 {
    margin: 0 0 4px;
}

.efi-profile-title small {
    color: #6b7280;
}

.efi-webhook-button {
    margin: 10px 0 18px;
}

.history-payment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 150px;
}

.history-payment small {
    max-width: 220px;
    overflow-wrap: anywhere;
}


/* ================================================================
   RESPONSIVO - TABLET
================================================================ */

@media (max-width: 1100px) {

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

    .admin-grid-2,
    .efi-profiles-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   RESPONSIVO - ADMIN MOBILE
================================================================ */

@media (max-width: 820px) {

    .admin-sidebar {
        transform: translateX(-100%);

        transition:
            transform 0.2s ease;

        box-shadow:
            12px 0 30px
            rgba(0, 0, 0, 0.18);
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-content {
        width: 100%;
        margin-left: 0;
    }

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

    .admin-topbar {
        padding: 10px 14px;
    }

    .admin-main {
        padding: 15px;
    }

    .system-status {
        font-size: 0;
    }

    .system-status .status-dot {
        width: 10px;
        height: 10px;
    }

    .admin-search {
        width: 100%;
    }

    .admin-search input {
        width: 100%;
    }
}


/* ================================================================
   RESPONSIVO - CELULAR
================================================================ */

@media (max-width: 600px) {

    .portal-body {
        padding: 0;
        background: #ffffff;
    }

    .portal-container {
        max-width: none;
    }

    .portal-card {
        min-height: 100vh;

        padding: 22px 17px;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .portal-header {
        margin-bottom: 24px;
    }

    .portal-header h1 {
        font-size: 22px;
    }

    .plan-content {
        grid-template-columns: 1fr auto;
    }

    .plan-price strong {
        font-size: 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-group-small {
        max-width: none;
    }

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

    .dashboard-card {
        padding: 14px;
    }

    .dashboard-value {
        font-size: 20px;
    }

    .admin-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-list-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-list-card-actions {
        width: 100%;
        justify-content: space-between;
    }

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

    .form-actions .btn {
        width: 100%;
    }

    .admin-login-body {
        padding: 0;

        background: #ffffff;
    }

    .admin-login-container {
        max-width: none;
    }

    .admin-login-card {
        min-height: 100vh;

        padding: 28px 20px;

        border-radius: 0;

        box-shadow: none;
    }
}


/* ================================================================
   TELAS MUITO PEQUENAS
================================================================ */

@media (max-width: 380px) {

    .dashboard-cards {
        grid-template-columns: 1fr;
    }

    .plan-content {
        grid-template-columns: 1fr;
    }

    .plan-price {
        grid-column: 1;
        grid-row: auto;

        margin-top: 7px;
    }
}
/* ================================================================
   GATEWAYS PIX / ROTEAMENTO
================================================================ */

.gateway-editor-panel {
    margin-top: 18px;
}

.gateway-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.gateway-active-group {
    display: flex;
    align-items: end;
}

.gateway-form-actions {
    flex-wrap: wrap;
}

.routing-mode-field {
    max-width: 520px;
}

.routing-warning {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #f8f9fb;
}

.routing-warning p {
    margin: 6px 0 0;
}

.table-number-input {
    width: 82px;
    min-width: 72px;
    padding: 7px 8px;
}

@media (max-width: 760px) {
    .gateway-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   MIKROTIK - PROVISIONAMENTO
================================================================ */

.router-mode-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.router-auto-box {
    margin-bottom: 18px;
}

.router-provision-grid,
.router-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.router-provision-grid > div,
.router-detail-grid > div {
    padding: 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: rgba(127, 127, 127, .05);
}

.router-provision-grid span,
.router-detail-grid span,
.field-caption {
    display: block;
    margin-bottom: 5px;
    font-size: .78rem;
    opacity: .68;
}

.router-provision-grid strong,
.router-detail-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.router-command {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    line-height: 1.5;
}

.router-hotspot-id,
.router-list-id {
    letter-spacing: .04em;
}

.router-auto-details {
    margin-bottom: 18px;
}

@media (max-width: 760px) {
    .router-provision-grid,
    .router-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   PORTAL PÚBLICO — VISUAL HOTSPOT PIX
   Mantém o index.php no mesmo padrão de status.html / alogin.html.
   Escopo restrito a .portal-body.portal-modern para não alterar o painel Admin.
================================================================ */

.portal-body.portal-modern {
    --portal-bg: #07111f;
    --portal-bg-2: #0d1d33;
    --portal-card: rgba(13, 29, 51, .88);
    --portal-card-border: rgba(255, 255, 255, .10);
    --portal-text: #f7fbff;
    --portal-muted: #a9b9ca;
    --portal-accent: #5ee7c1;
    --portal-accent-2: #6da8ff;
    --portal-danger: #ff7285;
    --portal-shadow: 0 24px 70px rgba(0, 0, 0, .36);

    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    padding:
        max(24px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));

    align-items: center;
    background: var(--portal-bg);
    color: var(--portal-text);
}

.portal-body.portal-modern::before,
.portal-body.portal-modern::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(10px);
    opacity: .78;
}

.portal-body.portal-modern::before {
    width: 420px;
    height: 420px;
    right: -180px;
    top: -160px;
    background: radial-gradient(
        circle,
        rgba(109, 168, 255, .34),
        rgba(109, 168, 255, 0) 68%
    );
}

.portal-body.portal-modern::after {
    width: 420px;
    height: 420px;
    left: -210px;
    bottom: -210px;
    background: radial-gradient(
        circle,
        rgba(94, 231, 193, .24),
        rgba(94, 231, 193, 0) 70%
    );
}

.portal-body.portal-modern .portal-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
}

.portal-body.portal-modern .portal-card {
    width: 100%;
    padding: 30px 26px;
    border: 1px solid var(--portal-card-border);
    border-radius: 28px;
    background: linear-gradient(
        180deg,
        rgba(16, 35, 60, .94),
        rgba(10, 24, 43, .92)
    );
    box-shadow: var(--portal-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.portal-body.portal-modern .portal-header {
    margin-bottom: 28px;
    text-align: center;
}

.portal-body.portal-modern .portal-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #dbe9f7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.portal-body.portal-modern .portal-brand-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--portal-accent);
    box-shadow:
        0 0 0 6px rgba(94, 231, 193, .10),
        0 0 22px rgba(94, 231, 193, .65);
}

.portal-body.portal-modern .portal-icon-wrap {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: var(--portal-accent);
    background: linear-gradient(
        145deg,
        rgba(94, 231, 193, .18),
        rgba(109, 168, 255, .16)
    );
    box-shadow: 0 16px 38px rgba(49, 211, 167, .12);
}

.portal-body.portal-modern .portal-icon {
    width: 40px;
    height: 40px;
    display: block;
}

.portal-body.portal-modern .portal-header h1 {
    margin: 0;
    color: var(--portal-text);
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.portal-body.portal-modern .portal-header p {
    max-width: 360px;
    margin: 11px auto 0;
    color: var(--portal-muted);
    font-size: 15px;
    line-height: 1.55;
}

.portal-body.portal-modern .portal-status-pill {
    width: max-content;
    max-width: 100%;
    margin: 20px auto 0;
    padding: 8px 12px;
    border: 1px solid rgba(94, 231, 193, .18);
    border-radius: 999px;
    background: rgba(94, 231, 193, .08);
    color: #b9f8e5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.portal-body.portal-modern .portal-status-pill span {
    color: var(--portal-accent);
}

.portal-body.portal-modern .portal-section {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
}

.portal-body.portal-modern .portal-section h2 {
    margin: 0 0 16px;
    color: var(--portal-text);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .015em;
}

.portal-body.portal-modern .form-group {
    gap: 7px;
    margin-bottom: 14px;
}

.portal-body.portal-modern .form-group:last-child {
    margin-bottom: 0;
}

.portal-body.portal-modern .form-group label,
.portal-body.portal-modern .pix-copy-label {
    color: #d9e7f5;
    font-size: 13px;
    font-weight: 700;
}

.portal-body.portal-modern .optional {
    color: #8196ac;
    font-weight: 500;
}

.portal-body.portal-modern .form-group input,
.portal-body.portal-modern .form-group select,
.portal-body.portal-modern .form-group textarea,
.portal-body.portal-modern .pix-copy-section textarea {
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 15px;
    background: rgba(255, 255, 255, .055);
    color: var(--portal-text);
    caret-color: var(--portal-accent);
    outline: none;
    box-shadow: none;
    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

.portal-body.portal-modern .form-group input::placeholder,
.portal-body.portal-modern .form-group textarea::placeholder,
.portal-body.portal-modern .pix-copy-section textarea::placeholder {
    color: #71869b;
}

.portal-body.portal-modern .form-group input:focus,
.portal-body.portal-modern .form-group select:focus,
.portal-body.portal-modern .form-group textarea:focus,
.portal-body.portal-modern .pix-copy-section textarea:focus {
    border-color: rgba(94, 231, 193, .56);
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 0 0 3px rgba(94, 231, 193, .10);
}

.portal-body.portal-modern .form-help,
.portal-body.portal-modern .field-help {
    color: #8196ac;
    font-size: 11px;
    line-height: 1.45;
}

.portal-body.portal-modern .plans {
    gap: 10px;
}

.portal-body.portal-modern .plan-card {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.portal-body.portal-modern .plan-card:hover {
    border-color: rgba(109, 168, 255, .34);
    background: rgba(255, 255, 255, .055);
}

.portal-body.portal-modern .plan-card.selected {
    border-color: rgba(94, 231, 193, .52);
    background: linear-gradient(
        135deg,
        rgba(94, 231, 193, .105),
        rgba(109, 168, 255, .08)
    );
    box-shadow: 0 0 0 3px rgba(94, 231, 193, .07);
}

.portal-body.portal-modern .plan-name,
.portal-body.portal-modern .plan-price,
.portal-body.portal-modern .plan-price strong {
    color: var(--portal-text);
}

.portal-body.portal-modern .plan-duration,
.portal-body.portal-modern .plan-speed {
    color: #8fa3b8;
}

.portal-body.portal-modern .plan-price strong {
    font-size: 22px;
}

.portal-body.portal-modern .checkbox-line {
    color: #bdcada;
    line-height: 1.45;
}

.portal-body.portal-modern .checkbox-line input {
    accent-color: var(--portal-accent);
}

.portal-body.portal-modern .consent-section {
    padding: 15px 18px;
}

.portal-body.portal-modern .btn {
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 800;
}

.portal-body.portal-modern .btn-primary {
    background: linear-gradient(
        135deg,
        var(--portal-accent),
        #73d6ff
    );
    color: #052018;
    box-shadow: 0 12px 28px rgba(94, 231, 193, .16);
}

.portal-body.portal-modern .btn-primary:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        #73efca,
        #82dcff
    );
}

.portal-body.portal-modern .btn-secondary {
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .065);
    color: var(--portal-text);
}

.portal-body.portal-modern .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, .09);
}

.portal-body.portal-modern .payment-note {
    margin: 14px auto 0;
    max-width: 360px;
    color: #8196ac;
    font-size: 12px;
    line-height: 1.5;
}

.portal-body.portal-modern .alert {
    padding: 16px;
    border-radius: 18px;
}

.portal-body.portal-modern .alert-warning {
    border: 1px solid rgba(251, 191, 36, .24);
    background: rgba(251, 191, 36, .08);
    color: #fde68a;
}

.portal-body.portal-modern .alert-warning p {
    color: #c8b77f;
}

.portal-body.portal-modern .payment-success,
.portal-body.portal-modern .payment-expired {
    padding: 4px 0 0;
    text-align: center;
}

.portal-body.portal-modern .success-icon,
.portal-body.portal-modern .expired-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    font-size: 32px;
}

.portal-body.portal-modern .success-icon {
    background: linear-gradient(
        145deg,
        rgba(94, 231, 193, .18),
        rgba(109, 168, 255, .16)
    );
    color: var(--portal-accent);
}

.portal-body.portal-modern .expired-icon {
    background: rgba(255, 114, 133, .10);
    color: #ffd5dc;
}

.portal-body.portal-modern .payment-success h2,
.portal-body.portal-modern .payment-expired h2 {
    color: var(--portal-text);
    font-size: 24px;
    letter-spacing: -.025em;
}

.portal-body.portal-modern .payment-success p,
.portal-body.portal-modern .payment-expired p {
    color: var(--portal-muted);
    line-height: 1.55;
}

.portal-body.portal-modern .connecting-message {
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid rgba(94, 231, 193, .18);
    border-radius: 16px;
    background: rgba(94, 231, 193, .08);
    color: #b9f8e5;
    font-size: 13px;
    line-height: 1.45;
}

.portal-body.portal-modern .debug-box {
    margin-top: 20px;
    padding: 14px;
    border: 1px dashed rgba(255, 255, 255, .15);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    color: #8196ac;
}

.portal-body.portal-modern .debug-box summary {
    color: #c9d7e6;
    cursor: pointer;
}

@media (max-width: 540px) {
    .portal-body.portal-modern {
        align-items: flex-start;
        padding-top: max(18px, env(safe-area-inset-top));
    }

    .portal-body.portal-modern .portal-card {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .portal-body.portal-modern .portal-header h1 {
        font-size: 25px;
    }

    .portal-body.portal-modern .portal-section {
        padding: 16px;
        border-radius: 18px;
    }
}

@media (max-width: 380px) {
    .portal-body.portal-modern .plan-content {
        grid-template-columns: 1fr;
    }

    .portal-body.portal-modern .plan-price {
        grid-column: 1;
        grid-row: auto;
        margin-top: 5px;
    }
}

/* ================================================================
   ADMIN - WIREGUARD
================================================================ */

.wireguard-panel .settings-details {
    margin: 0 18px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.wireguard-panel .settings-details summary {
    padding: 12px 14px;
    cursor: pointer;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    user-select: none;
}

.wireguard-panel .settings-details .form-row {
    padding: 0 14px 14px;
}

.router-wireguard-card {
    margin-top: 18px;
    border: 1px solid #dbe6f0;
    border-radius: 11px;
    background: #f8fafc;
    overflow: hidden;
}

.router-wireguard-card .admin-panel-header.compact {
    min-height: 0;
    padding: 13px 15px;
    background: #f1f5f9;
}

.router-wireguard-card .admin-panel-header.compact h3 {
    margin: 0 0 3px;
    font-size: 14px;
}

.router-wireguard-card .admin-panel-header.compact p {
    margin: 0;
}

.router-wireguard-card .router-auto-details {
    margin: 14px 15px 0;
}

.router-wireguard-card > .form-actions,
.router-wireguard-card > .form-group {
    margin-left: 15px;
    margin-right: 15px;
}

.router-wireguard-card > .form-group {
    margin-bottom: 15px;
}

@media (max-width: 720px) {
    .wireguard-panel .settings-details {
        margin-left: 14px;
        margin-right: 14px;
    }

    .router-wireguard-card > .form-actions {
        align-items: stretch;
    }

    .router-wireguard-card > .form-actions .btn {
        width: 100%;
    }
}

/* ================================================================
   ADMIN v8.8 - CONFIGURAÇÕES SEPARADAS + LISTA MIKROTIK COMPACTA
================================================================ */

.settings-page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 0 2px;
}

.settings-page-intro h2 {
    margin: 0 0 5px;
    font-size: 18px;
}

.settings-page-intro p {
    margin: 0;
    max-width: 820px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.55;
}

.settings-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.settings-service-card {
    min-width: 0;
}

.settings-service-card .form-row {
    grid-template-columns: 1fr;
}

.settings-service-card .router-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.router-list-panel {
    width: 100%;
    margin-top: 18px;
}

.router-editor-panel {
    margin-top: 18px;
}

.router-editor-panel[hidden] {
    display: none !important;
}

.routers-admin-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
}

.router-row-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.router-row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    background: #f8fafc;
    border-bottom: 1px solid #edf0f3;
}

.router-row-identity {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.router-row-identity strong {
    font-size: 14px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.router-row-identity .router-list-id {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.router-row-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.router-mode-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.router-row-facts {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr .8fr;
    min-width: 0;
}

.router-fact {
    min-width: 0;
    padding: 11px 13px;
    border-right: 1px solid #edf0f3;
}

.router-fact:last-child {
    border-right: 0;
}

.router-fact > span {
    display: block;
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.router-fact > strong {
    display: block;
    min-width: 0;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.router-fact > small {
    display: block;
    min-width: 0;
    margin-top: 3px;
    color: #64748b;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.router-fact .state-ok,
.router-fact > strong.state-ok {
    color: #15803d;
}

.router-fact .state-warn,
.router-fact > strong.state-warn {
    color: #b45309;
}

.router-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    padding: 9px 12px;
    border-top: 1px solid #edf0f3;
    background: #fbfcfd;
}

.router-row-actions .btn-small {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 10.5px;
}

@media (max-width: 1180px) {
    .settings-page-grid {
        grid-template-columns: 1fr;
    }

    .settings-service-card .form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .router-row-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .router-fact:nth-child(2) {
        border-right: 0;
    }

    .router-fact:nth-child(-n+2) {
        border-bottom: 1px solid #edf0f3;
    }
}

@media (max-width: 760px) {
    .settings-service-card .form-row,
    .settings-service-card .router-detail-grid,
    .router-row-facts {
        grid-template-columns: 1fr;
    }

    .router-row-heading {
        align-items: flex-start;
    }

    .router-row-identity {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .router-row-badges {
        max-width: 45%;
    }

    .router-fact,
    .router-fact:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid #edf0f3;
    }

    .router-fact:last-child {
        border-bottom: 0;
    }

    .router-row-actions {
        justify-content: stretch;
    }

    .router-row-actions .btn {
        flex: 1 1 calc(50% - 7px);
    }
}

/* ================================================================
   EXCEÇÕES PRÉ-LOGIN
================================================================ */
.settings-span-full {
    grid-column: 1 / -1;
}

.prelogin-exception-head,
.prelogin-exception-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(90px, 110px) auto;
    gap: 12px;
    align-items: center;
}

.prelogin-exception-head {
    padding: 0 2px 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: .7;
}

.prelogin-exceptions-list {
    display: grid;
    gap: 10px;
}

.prelogin-exception-row {
    padding: 10px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.prelogin-exception-row input[type="text"],
.prelogin-exception-row input[type="number"] {
    width: 100%;
}

.prelogin-exception-active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.prelogin-exception-active input {
    margin: 0;
}

.compact-empty {
    padding: 18px;
    margin-top: 8px;
}

@media (max-width: 780px) {
    .prelogin-exception-head {
        display: none;
    }

    .prelogin-exception-row {
        grid-template-columns: 1fr 120px;
    }

    .prelogin-exception-destination {
        grid-column: 1 / -1;
    }

    .prelogin-exception-active,
    .prelogin-exception-remove {
        align-self: center;
    }
}

/* ================================================================
   ADMIN v8.8.7 — PAINEL PROFISSIONAL / SAÚDE / VISUAL HOTSPOT PIX
   Mantém a identidade visual do portal público sem alterar o portal.
================================================================ */

.admin-body {
    --admin-bg: #07111f;
    --admin-bg-2: #0a182b;
    --admin-surface: rgba(13, 29, 51, .88);
    --admin-surface-strong: rgba(15, 33, 57, .96);
    --admin-surface-soft: rgba(255, 255, 255, .035);
    --admin-border: rgba(255, 255, 255, .085);
    --admin-border-strong: rgba(255, 255, 255, .13);
    --admin-text: #f7fbff;
    --admin-muted: #93a8bc;
    --admin-muted-2: #6f879e;
    --admin-accent: #5ee7c1;
    --admin-accent-2: #6da8ff;
    --admin-warning: #f7c766;
    --admin-danger: #ff7285;
    --admin-ok: #5ee7c1;
    --admin-shadow: 0 20px 60px rgba(0, 0, 0, .22);

    color: var(--admin-text);
    background:
        radial-gradient(circle at 85% -10%, rgba(109, 168, 255, .16), transparent 34%),
        radial-gradient(circle at 5% 100%, rgba(94, 231, 193, .10), transparent 30%),
        var(--admin-bg);
}

.admin-body,
.admin-body * {
    scrollbar-width: thin;
    scrollbar-color: rgba(109, 168, 255, .34) transparent;
}

.admin-body *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.admin-body *::-webkit-scrollbar-track {
    background: transparent;
}

.admin-body *::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(94, 231, 193, .36), rgba(109, 168, 255, .38));
}

.admin-body .admin-layout {
    background: transparent;
}

.admin-body .admin-sidebar {
    width: 228px;
    border-right: 1px solid var(--admin-border);
    background: linear-gradient(180deg, rgba(6, 16, 29, .985), rgba(8, 20, 36, .97));
    box-shadow: 18px 0 55px rgba(0, 0, 0, .16);
}

.admin-body .sidebar-header {
    padding: 18px 16px;
    border-bottom-color: var(--admin-border);
}

.admin-body .sidebar-logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border: 1px solid rgba(94, 231, 193, .22);
    border-radius: 14px;
    color: #052018;
    background: linear-gradient(135deg, var(--admin-accent), #73d6ff);
    box-shadow: 0 10px 28px rgba(94, 231, 193, .14);
}

.admin-body .sidebar-header strong,
.admin-body .admin-user-info strong {
    color: var(--admin-text);
}

.admin-body .sidebar-header small,
.admin-body .admin-user-info small {
    color: var(--admin-muted-2);
}

.admin-body .admin-menu {
    gap: 3px;
    padding: 12px 9px;
    scrollbar-width: none;
}

.admin-body .admin-menu::-webkit-scrollbar {
    display: none;
}

.admin-body .admin-menu-item {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #a9b9ca;
    font-size: 13px;
    font-weight: 650;
}

.admin-body .admin-menu-item:hover {
    border-color: var(--admin-border);
    background: rgba(255, 255, 255, .045);
    color: var(--admin-text);
}

.admin-body .admin-menu-item.active {
    border-color: rgba(94, 231, 193, .19);
    background: linear-gradient(135deg, rgba(94, 231, 193, .14), rgba(109, 168, 255, .11));
    color: #dffff5;
    box-shadow: inset 3px 0 0 var(--admin-accent);
}

.admin-body .menu-icon {
    color: var(--admin-accent);
}

.admin-body .sidebar-footer {
    padding: 12px;
    border-top-color: var(--admin-border);
}

.admin-body .admin-content {
    width: calc(100% - 228px);
    margin-left: 228px;
}

.admin-body .admin-topbar {
    min-height: 64px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--admin-border);
    background: rgba(7, 17, 31, .83);
    color: var(--admin-text);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.admin-body .admin-topbar h1 {
    margin: 0 0 1px;
    color: var(--admin-text);
    font-size: 19px;
    letter-spacing: -.025em;
}

.admin-body .admin-topbar small,
.admin-body .system-status {
    color: var(--admin-muted);
}

.admin-body .system-status.online {
    color: #b9f8e5;
}

.admin-body .system-status.online .status-dot {
    background: var(--admin-accent);
    box-shadow: 0 0 0 5px rgba(94, 231, 193, .08), 0 0 16px rgba(94, 231, 193, .5);
}

.admin-body .sidebar-toggle {
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, .045);
    color: var(--admin-text);
}

.admin-body .admin-main {
    width: 100%;
    max-width: 1720px;
    margin: 0 auto;
    padding: 18px 20px 30px;
}

.admin-body .admin-panel,
.admin-body .dashboard-card,
.admin-body .router-row-card,
.admin-body .routing-warning {
    border-color: var(--admin-border);
    background: linear-gradient(180deg, rgba(15, 33, 57, .90), rgba(10, 24, 43, .88));
    color: var(--admin-text);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .13);
}

.admin-body .admin-panel {
    margin-bottom: 14px;
    border-radius: 18px;
}

.admin-body .admin-panel-header {
    min-height: 62px;
    padding: 13px 16px;
    border-bottom-color: var(--admin-border);
}

.admin-body .admin-panel-header h2,
.admin-body .settings-page-intro h2,
.admin-body .router-row-identity strong,
.admin-body .router-fact > strong {
    color: var(--admin-text);
}

.admin-body .admin-panel-header p,
.admin-body .settings-page-intro p,
.admin-body .field-help,
.admin-body .form-help,
.admin-body .table-subtext,
.admin-body .router-fact > small,
.admin-body .router-row-identity .router-list-id {
    color: var(--admin-muted);
}

.admin-body .form-group {
    gap: 6px;
    margin-bottom: 13px;
}

.admin-body .form-group label,
.admin-body .checkbox-line,
.admin-body .prelogin-exception-head {
    color: #c9d8e7;
}

.admin-body .form-group input,
.admin-body .form-group select,
.admin-body .form-group textarea,
.admin-body .admin-search input,
.admin-body .pix-copy-section textarea,
.admin-body .table-number-input,
.admin-body .router-command {
    min-height: 42px;
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    color: var(--admin-text);
    box-shadow: none;
}

.admin-body .form-group input::placeholder,
.admin-body .form-group textarea::placeholder,
.admin-body .admin-search input::placeholder {
    color: #637a90;
}

.admin-body .form-group input:focus,
.admin-body .form-group select:focus,
.admin-body .form-group textarea:focus,
.admin-body .admin-search input:focus,
.admin-body .pix-copy-section textarea:focus {
    border-color: rgba(94, 231, 193, .5);
    background: rgba(255, 255, 255, .065);
    box-shadow: 0 0 0 3px rgba(94, 231, 193, .08);
}

.admin-body select option {
    background: #0d1d33;
    color: var(--admin-text);
}

.admin-body .btn {
    min-height: 38px;
    border-radius: 11px;
}

.admin-body .btn-primary {
    color: #052018;
    background: linear-gradient(135deg, var(--admin-accent), #73d6ff);
    box-shadow: 0 9px 22px rgba(94, 231, 193, .10);
}

.admin-body .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #73efca, #82dcff);
}

.admin-body .btn-secondary {
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, .055);
    color: #d9e7f5;
}

.admin-body .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, .085);
}

.admin-body .btn-success {
    background: rgba(94, 231, 193, .13);
    color: #b9f8e5;
    border: 1px solid rgba(94, 231, 193, .24);
}

.admin-body .btn-success:hover:not(:disabled) {
    background: rgba(94, 231, 193, .20);
}

.admin-body .btn-danger {
    border: 1px solid rgba(255, 114, 133, .23);
    background: rgba(255, 114, 133, .11);
    color: #ffd4dc;
}

.admin-body .btn-danger:hover:not(:disabled) {
    background: rgba(255, 114, 133, .18);
}

.admin-body .form-message-success {
    border-color: rgba(94, 231, 193, .22);
    background: rgba(94, 231, 193, .09);
    color: #c7faeb;
}

.admin-body .form-message-error {
    border-color: rgba(255, 114, 133, .22);
    background: rgba(255, 114, 133, .09);
    color: #ffd3db;
}

.admin-body .alert-warning {
    border-color: rgba(247, 199, 102, .25);
    background: rgba(247, 199, 102, .08);
    color: #ffe6ad;
}

.admin-body .badge {
    border: 1px solid transparent;
}

.admin-body .badge-success {
    border-color: rgba(94, 231, 193, .20);
    background: rgba(94, 231, 193, .10);
    color: #b9f8e5;
}

.admin-body .badge-warning {
    border-color: rgba(247, 199, 102, .22);
    background: rgba(247, 199, 102, .10);
    color: #ffe0a0;
}

.admin-body .badge-danger {
    border-color: rgba(255, 114, 133, .22);
    background: rgba(255, 114, 133, .10);
    color: #ffd4dc;
}

.admin-body .badge-muted,
.admin-body .router-mode-pill {
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, .045);
    color: #9eb1c4;
}

/* Tabelas: sem barra horizontal quando o conteúdo cabe; nas telas densas a
   rolagem é mantida, fina e temática, para não esconder informação. */
.admin-body .table-wrapper {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.admin-body .admin-table {
    color: #d9e7f5;
}

.admin-body .admin-table th {
    border-bottom-color: var(--admin-border);
    background: rgba(255, 255, 255, .035);
    color: #7f96ab;
}

.admin-body .admin-table td {
    border-bottom-color: rgba(255, 255, 255, .055);
}

.admin-body .admin-table tbody tr:hover {
    background: rgba(109, 168, 255, .035);
}

.admin-body .table-empty {
    color: var(--admin-muted-2);
}

.admin-body #page-dashboard .table-wrapper,
.admin-body #page-accesses .table-wrapper,
.admin-body #page-payments .table-wrapper,
.admin-body #page-plans .table-wrapper {
    overflow-x: visible;
}

.admin-body #page-dashboard .admin-table,
.admin-body #page-accesses .admin-table,
.admin-body #page-payments .admin-table,
.admin-body #page-plans .admin-table {
    white-space: normal;
}

/* ---------------- DASHBOARD ---------------- */

.admin-body .dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding: 2px 2px 0;
}

.admin-body .dashboard-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--admin-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.admin-body .dashboard-hero h2 {
    margin: 0 0 5px;
    color: var(--admin-text);
    font-size: clamp(21px, 2vw, 29px);
    letter-spacing: -.04em;
}

.admin-body .dashboard-hero p {
    margin: 0;
    color: var(--admin-muted);
    font-size: 12.5px;
}

.admin-body .dashboard-live-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: var(--admin-muted);
    font-size: 10.5px;
    font-weight: 700;
}

.admin-body .dashboard-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8196ac;
}

.admin-body .dashboard-live-status.online {
    border-color: rgba(94, 231, 193, .18);
    color: #b9f8e5;
}

.admin-body .dashboard-live-status.online .dashboard-live-dot {
    background: var(--admin-accent);
    box-shadow: 0 0 12px rgba(94, 231, 193, .65);
}

.admin-body .dashboard-live-status.loading .dashboard-live-dot {
    animation: dashboardPulse 1s ease-in-out infinite;
}

@keyframes dashboardPulse {
    50% { opacity: .3; transform: scale(.75); }
}

.admin-body .dashboard-cards-professional {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.admin-body .dashboard-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 14px;
    border-radius: 16px;
}

.admin-body .dashboard-card-featured {
    border-color: rgba(94, 231, 193, .16);
    background: linear-gradient(135deg, rgba(94, 231, 193, .09), rgba(109, 168, 255, .075));
}

.admin-body .dashboard-card-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    background: rgba(255, 255, 255, .045);
    color: var(--admin-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.admin-body .dashboard-label {
    margin: 0 0 3px;
    color: var(--admin-muted);
    font-size: 10px;
    font-weight: 700;
}

.admin-body .dashboard-value {
    color: var(--admin-text);
    font-size: clamp(18px, 1.65vw, 24px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.admin-body .dashboard-card-note {
    display: block;
    margin-top: 2px;
    color: var(--admin-muted-2);
    font-size: 9px;
}

.admin-body .dashboard-health-grid {
    display: grid;
    grid-template-columns: minmax(340px, .92fr) minmax(460px, 1.45fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 12px;
}

.admin-body .dashboard-panel-header {
    min-height: 58px;
}

.admin-body .dashboard-panel-header h2 {
    font-size: 14px;
}

.admin-body .dashboard-panel-header p {
    font-size: 10.5px;
}

.admin-body .health-summary-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
    color: var(--admin-muted);
    background: rgba(255, 255, 255, .035);
    font-size: 9.5px;
    font-weight: 800;
}

.admin-body .health-summary-pill.ok {
    border-color: rgba(94, 231, 193, .2);
    color: #b9f8e5;
    background: rgba(94, 231, 193, .08);
}

.admin-body .health-summary-pill.warning {
    border-color: rgba(247, 199, 102, .22);
    color: #ffe2a5;
    background: rgba(247, 199, 102, .08);
}

.admin-body .health-summary-pill.error {
    border-color: rgba(255, 114, 133, .22);
    color: #ffd4dc;
    background: rgba(255, 114, 133, .08);
}

.admin-body .dashboard-health-list {
    padding: 5px 14px 9px;
}

.admin-body .health-row {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 47px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.admin-body .health-row:last-child {
    border-bottom: 0;
}

.admin-body .health-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8296aa;
}

.admin-body .health-indicator.ok {
    background: var(--admin-ok);
    box-shadow: 0 0 13px rgba(94, 231, 193, .48);
}

.admin-body .health-indicator.warning {
    background: var(--admin-warning);
}

.admin-body .health-indicator.error {
    background: var(--admin-danger);
    box-shadow: 0 0 13px rgba(255, 114, 133, .35);
}

.admin-body .health-row-copy {
    min-width: 0;
}

.admin-body .health-row-copy strong {
    display: block;
    color: #eaf4fd;
    font-size: 11.5px;
}

.admin-body .health-row-copy small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--admin-muted);
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-body .health-row-status {
    font-size: 9px;
    font-weight: 800;
}

.admin-body .health-row-status.ok { color: var(--admin-ok); }
.admin-body .health-row-status.warning { color: var(--admin-warning); }
.admin-body .health-row-status.error { color: var(--admin-danger); }

.admin-body .dashboard-network-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-bottom: 1px solid var(--admin-border);
    background: var(--admin-border);
}

.admin-body .dashboard-network-summary > div {
    padding: 10px 13px;
    background: rgba(7, 17, 31, .48);
}

.admin-body .dashboard-network-summary span {
    display: block;
    color: var(--admin-muted-2);
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.admin-body .dashboard-network-summary strong {
    display: block;
    margin-top: 2px;
    color: var(--admin-text);
    font-size: 19px;
    letter-spacing: -.03em;
}

.admin-body .dashboard-router-list {
    padding: 4px 10px 8px;
}

.admin-body .dashboard-router-row {
    display: grid;
    grid-template-columns: 9px minmax(180px, 1fr) minmax(100px, .5fr) 72px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 47px;
    padding: 5px 4px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background: transparent;
    color: inherit;
    text-align: left;
}

.admin-body .dashboard-router-row:last-child {
    border-bottom: 0;
}

.admin-body .dashboard-router-row:hover {
    background: rgba(109, 168, 255, .035);
}

.admin-body .dashboard-router-state {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #607388;
}

.admin-body .dashboard-router-state.online {
    background: var(--admin-accent);
    box-shadow: 0 0 12px rgba(94, 231, 193, .45);
}

.admin-body .dashboard-router-state.offline {
    background: #607388;
}

.admin-body .dashboard-router-main,
.admin-body .dashboard-router-handshake,
.admin-body .dashboard-router-clients {
    min-width: 0;
}

.admin-body .dashboard-router-main strong,
.admin-body .dashboard-router-handshake strong,
.admin-body .dashboard-router-clients strong {
    display: block;
    color: #eaf4fd;
    font-size: 11px;
}

.admin-body .dashboard-router-main small,
.admin-body .dashboard-router-handshake small,
.admin-body .dashboard-router-clients small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: var(--admin-muted-2);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-body .dashboard-router-clients {
    text-align: right;
}

.admin-body .dashboard-router-clients strong {
    color: var(--admin-accent);
    font-size: 17px;
}

.admin-body .dashboard-bottom-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.admin-body .dashboard-payments-panel {
    margin-bottom: 0;
}

.admin-body .dashboard-table-wrapper {
    overflow-x: visible;
}

.admin-body .dashboard-table {
    table-layout: fixed;
    white-space: normal;
}

.admin-body .dashboard-table th,
.admin-body .dashboard-table td {
    padding: 9px 12px;
    font-size: 10.5px;
}

.admin-body .dashboard-table th {
    font-size: 9px;
}

.admin-body .dashboard-empty-state {
    padding: 24px;
    color: var(--admin-muted-2);
    text-align: center;
    font-size: 11px;
}

/* ---------------- MIKROTIK / CONFIGURAÇÕES ---------------- */

.admin-body .settings-page-grid {
    gap: 12px;
}

.admin-body .router-list-panel,
.admin-body .router-editor-panel {
    margin-top: 12px;
}

.admin-body .routers-admin-list {
    gap: 8px;
    padding: 9px;
}

.admin-body .router-row-card {
    border-radius: 15px;
    overflow: hidden;
}

.admin-body .router-row-heading,
.admin-body .router-row-actions {
    border-color: var(--admin-border);
    background: rgba(255, 255, 255, .025);
}

.admin-body .router-row-heading {
    padding: 9px 11px;
}

.admin-body .router-row-facts {
    background: rgba(7, 17, 31, .18);
}

.admin-body .router-fact {
    padding: 9px 11px;
    border-color: var(--admin-border);
}

.admin-body .router-fact > span {
    color: var(--admin-muted-2);
}

.admin-body .router-fact .state-ok,
.admin-body .router-fact > strong.state-ok {
    color: var(--admin-accent);
}

.admin-body .router-fact .state-warn,
.admin-body .router-fact > strong.state-warn {
    color: var(--admin-warning);
}

.admin-body .router-row-actions {
    padding: 7px 10px;
}

.admin-body .router-row-actions .btn-small {
    min-height: 28px;
    padding: 5px 9px;
}

.admin-body .router-provision-grid > div,
.admin-body .router-detail-grid > div {
    border-color: var(--admin-border);
    background: rgba(255, 255, 255, .035);
}

.admin-body .prelogin-exception-row,
.admin-body .prelogin-exception-head {
    border-color: var(--admin-border);
}

/* Densidade das telas administrativas para reduzir rolagem vertical. */
.admin-body .form-row,
.admin-body .gateway-form-grid,
.admin-body .admin-grid-2 {
    gap: 12px;
}

.admin-body .form-actions {
    gap: 7px;
    margin-top: 13px;
}

/* ---------------- RESPONSIVO ---------------- */

@media (max-width: 1320px) {
    .admin-body .dashboard-cards-professional {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-body .dashboard-health-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .admin-body .admin-sidebar {
        width: 245px;
    }

    .admin-body .admin-content {
        width: 100%;
        margin-left: 0;
    }

    .admin-body .admin-main {
        padding: 14px;
    }

    .admin-body .dashboard-cards-professional {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .admin-body .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .admin-body .dashboard-cards-professional {
        grid-template-columns: 1fr 1fr;
    }

    .admin-body .dashboard-card {
        padding: 11px;
    }

    .admin-body .dashboard-card-icon {
        display: none;
    }

    .admin-body .dashboard-router-row {
        grid-template-columns: 9px minmax(0, 1fr) 58px;
    }

    .admin-body .dashboard-router-handshake {
        display: none;
    }

    .admin-body .dashboard-table {
        min-width: 620px;
    }

    .admin-body .dashboard-table-wrapper {
        overflow-x: auto;
    }
}

@media (max-width: 430px) {
    .admin-body .dashboard-cards-professional {
        grid-template-columns: 1fr;
    }

    .admin-body .dashboard-card {
        min-height: 64px;
    }

    .admin-body .dashboard-network-summary > div {
        padding: 9px;
    }

    .admin-body .health-row-status {
        display: none;
    }

    .admin-body .health-row {
        grid-template-columns: 9px minmax(0, 1fr);
    }
}


/* ================================================================
   ADMIN v8.8.7.2 — ACABAMENTO ESCURO + HISTÓRICO SEM SCROLL ANINHADO
================================================================ */

/* Componentes legados que ainda carregavam superfícies claras. */
.admin-body .webhook-note,
.admin-body .efi-profile-card,
.admin-body .wireguard-panel .settings-details,
.admin-body .router-wireguard-card,
.admin-body .compact-empty {
    border-color: var(--admin-border);
    background: rgba(255, 255, 255, .035);
    color: var(--admin-text);
}

.admin-body .router-wireguard-card .admin-panel-header.compact {
    border-bottom: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, .028);
}

.admin-body .wireguard-panel .settings-details summary,
.admin-body .settings-info label,
.admin-body .efi-profile-title h3,
.admin-body .webhook-note strong,
.admin-body .router-wireguard-card .admin-panel-header.compact h3 {
    color: #dceaf7;
}

.admin-body .webhook-note p,
.admin-body .efi-profile-title small,
.admin-body .router-wireguard-card .admin-panel-header.compact p,
.admin-body .admin-list-card-main span,
.admin-body .admin-list-card-main small {
    color: var(--admin-muted);
}

.admin-body .admin-list-card {
    border-bottom-color: var(--admin-border);
}

.admin-body .code-box {
    border: 1px solid var(--admin-border);
    background: rgba(4, 12, 23, .72);
    color: #dceaf7;
}

/* Checkboxes/radios nativos não devem criar blocos brancos no tema escuro. */
.admin-body input[type="checkbox"],
.admin-body input[type="radio"] {
    accent-color: var(--admin-accent);
}

/* Histórico: nenhuma rolagem vertical própria. A página é quem rola. */
.admin-body #page-lead-history .admin-panel {
    overflow: visible;
}

.admin-body .lead-history-table-wrapper {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 0 0 18px 18px;
}

/* Barra horizontal auxiliar permanece acessível abaixo da topbar enquanto
   o usuário percorre um histórico longo. Ela é sincronizada com a tabela. */
.admin-body .history-horizontal-scrollbar {
    position: sticky;
    top: 64px;
    z-index: 12;
    width: 100%;
    height: 13px;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid rgba(255, 255, 255, .035);
    border-bottom: 1px solid var(--admin-border);
    background: rgba(7, 17, 31, .96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.admin-body .history-horizontal-scrollbar[hidden] {
    display: none !important;
}

.admin-body .history-horizontal-scrollbar > div {
    height: 1px;
}

.admin-body .lead-history-table {
    min-width: 1540px;
}

/* Torna o histórico mais denso para exibir mais registros por viewport. */
.admin-body #page-lead-history .admin-table th,
.admin-body #page-lead-history .admin-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

@media (max-width: 900px) {
    .admin-body .history-horizontal-scrollbar {
        top: 64px;
    }
}

/* A barra real da tabela continua funcional via JS/touch/trackpad, mas não
   ocupa o rodapé do histórico; o controle visível é a barra auxiliar sticky. */
.admin-body .lead-history-table-wrapper {
    scrollbar-width: none;
}

.admin-body .lead-history-table-wrapper::-webkit-scrollbar {
    height: 0;
}

.admin-body input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 10px;
    border: 1px solid var(--admin-border);
    border-radius: 9px;
    background: rgba(255, 255, 255, .07);
    color: #dceaf7;
    cursor: pointer;
}

.admin-body input:-webkit-autofill,
.admin-body input:-webkit-autofill:hover,
.admin-body input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--admin-text);
    -webkit-box-shadow: 0 0 0 1000px #0d1d33 inset;
    caret-color: var(--admin-text);
}

/* ============================================================
   HOTSPOT PIX v8.8.9 — exclusão MikroTik com limpeza opcional
   ============================================================ */
.router-delete-overlay{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(3,10,24,.78);
    backdrop-filter:blur(10px);
}

.router-delete-dialog{
    width:min(620px,100%);
    border:1px solid rgba(148,163,184,.18);
    border-radius:22px;
    padding:24px;
    background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(8,15,30,.98));
    box-shadow:0 28px 80px rgba(0,0,0,.45);
    color:#e5edf8;
}

.router-delete-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
    border-radius:14px;
    background:rgba(239,68,68,.12);
    border:1px solid rgba(248,113,113,.24);
    color:#fca5a5;
    font-size:24px;
    font-weight:800;
}

.router-delete-copy h3{
    margin:0 0 6px;
    color:#fff;
    font-size:22px;
}

.router-delete-copy p{
    margin:0;
    color:#aebbd0;
    line-height:1.55;
}

.router-delete-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 14px;
    margin:20px 0;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(15,118,110,.08);
    border:1px solid rgba(45,212,191,.14);
    color:#c6f6eb;
    font-size:13px;
}

.router-delete-full-option{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:16px;
    border-radius:16px;
    background:rgba(239,68,68,.06);
    border:1px solid rgba(248,113,113,.18);
    cursor:pointer;
}

.router-delete-full-option input{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:#ef4444;
    flex:0 0 auto;
}

.router-delete-full-option strong{
    display:block;
    margin-bottom:5px;
    color:#fff;
}

.router-delete-full-option small{
    display:block;
    color:#aebbd0;
    line-height:1.5;
}

.router-delete-full-option code{
    color:#bfdbfe;
    background:rgba(59,130,246,.08);
    padding:1px 5px;
    border-radius:6px;
}

.router-delete-warning{
    margin-top:12px;
    color:#94a3b8;
    font-size:12px;
    line-height:1.5;
}

.router-delete-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:22px;
}

@media (max-width:640px){
    .router-delete-overlay{padding:14px;align-items:flex-end;}
    .router-delete-dialog{padding:20px;border-radius:20px;}
    .router-delete-summary{grid-template-columns:1fr;}
    .router-delete-actions{display:grid;grid-template-columns:1fr 1fr;}
}

/* ================================================================
   Assistente Plug & Play Hotspot - v8.9.1
================================================================ */
.admin-body .router-hotspot-wizard {
    border: 1px solid rgba(79, 156, 255, .22);
    background: linear-gradient(145deg, rgba(12, 31, 58, .96), rgba(7, 21, 42, .96));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
}
.admin-body .router-wizard-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}
.admin-body .router-wizard-status-grid > div {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 177, 214, .14);
    background: rgba(255,255,255,.035);
}
.admin-body .router-wizard-status-grid span,
.admin-body .router-wizard-plan-row span {
    display: block;
    color: var(--muted, #9bb0ca);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.admin-body .router-wizard-section {
    padding: 16px;
    border-radius: 16px;
    background: rgba(5, 18, 36, .48);
    border: 1px solid rgba(148, 177, 214, .12);
}
.admin-body .router-wizard-section-title h3,
.admin-body .router-wizard-review-head h3 { margin: 0 0 4px; }
.admin-body .router-wizard-section-title p,
.admin-body .router-wizard-review-head p { margin: 0; color: #9bb0ca; font-size: .86rem; }
.admin-body .router-wizard-interface-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}
.admin-body .router-wizard-interface-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 177, 214, .12);
    background: rgba(255,255,255,.025);
}
.admin-body .router-wizard-interface-row.is-locked { opacity: .58; }
.admin-body .router-wizard-interface-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.admin-body .router-interface-name { min-width: 82px; font-weight: 800; color: #f4f8ff; }
.admin-body .router-link-state { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.admin-body .router-link-state.online { color: #46e6a6; }
.admin-body .router-link-state.offline { color: #8ca1ba; }
.admin-body .router-interface-free { color: #68d6ff; font-size: .78rem; margin-left: auto; }
.admin-body .router-interface-lock { color: #ffbd66; font-size: .78rem; margin-left: auto; text-align: right; }
.admin-body .router-wizard-vlan-options {
    display: grid;
    grid-template-columns: auto minmax(130px,1fr);
    align-items: center;
    gap: 10px;
}
.admin-body .router-wizard-vlan-options input[type="text"] { margin: 0; }
.admin-body .router-wizard-advanced { margin: 12px 0; }
.admin-body .router-wizard-advanced summary { cursor: pointer; color: #9fc7ff; font-weight: 700; padding: 8px 2px; }
.admin-body .router-wizard-advanced .form-group { margin-top: 10px; max-width: 560px; }
.admin-body .router-wizard-plan {
    margin-top: 16px;
    border-radius: 16px;
    border: 1px solid rgba(64, 210, 155, .18);
    background: rgba(5, 18, 36, .54);
    overflow: hidden;
}
.admin-body .router-wizard-review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(148,177,214,.1);
}
.admin-body .router-wizard-plan-list { display: grid; }
.admin-body .router-wizard-plan-row {
    display: grid;
    grid-template-columns: 1.1fr .9fr .75fr .75fr 1.4fr;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid rgba(148,177,214,.08);
}
.admin-body .router-wizard-plan-row:last-child { border-bottom: 0; }
.admin-body .router-wizard-plan-row small { display: block; color: #8fa5c0; margin-top: 3px; }
.admin-body .router-wizard-blocker {
    margin: 12px 16px 16px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(255, 171, 64, .12);
    border: 1px solid rgba(255, 171, 64, .22);
    color: #ffd39c;
}
@media (max-width: 980px) {
    .admin-body .router-wizard-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .admin-body .router-wizard-interface-row { grid-template-columns: 1fr; }
    .admin-body .router-wizard-plan-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
    .admin-body .router-wizard-status-grid { grid-template-columns: 1fr; }
    .admin-body .router-wizard-vlan-options { grid-template-columns: 1fr; }
    .admin-body .router-wizard-plan-row { grid-template-columns: 1fr; }
    .admin-body .router-interface-free,
    .admin-body .router-interface-lock { margin-left: 0; }
    .admin-body .router-wizard-interface-main { flex-wrap: wrap; }
}


/* ================================================================
   ADMIN UX v8.9.4 — TOASTS, NOTIFICAÇÕES E MODAIS
================================================================ */

.admin-body .admin-topbar-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
}
.admin-body .admin-notification-center{position:relative;}
.admin-body .admin-notification-button{
    position:relative;
    width:42px;height:42px;
    display:grid;place-items:center;
    border:1px solid rgba(132,177,238,.18);
    border-radius:14px;
    background:rgba(8,25,49,.78);
    color:#eef6ff;
    font-size:1.08rem;
    cursor:pointer;
    transition:.2s ease;
}
.admin-body .admin-notification-button:hover{
    transform:translateY(-1px);
    border-color:rgba(90,198,255,.48);
    background:rgba(13,42,78,.92);
}
.admin-body .admin-notification-count{
    position:absolute;
    top:-5px;right:-5px;
    min-width:19px;height:19px;padding:0 5px;
    display:grid;place-items:center;
    border:2px solid #071426;
    border-radius:999px;
    background:#ff5e70;
    color:white;
    font-size:.66rem;font-weight:900;
}
.admin-body .admin-notification-panel{
    position:absolute;
    right:0;top:calc(100% + 12px);
    width:min(390px,calc(100vw - 28px));
    max-height:min(560px,70vh);
    overflow:hidden;
    z-index:1200;
    border:1px solid rgba(118,171,234,.22);
    border-radius:20px;
    background:rgba(6,20,39,.985);
    box-shadow:0 28px 70px rgba(0,0,0,.46);
    backdrop-filter:blur(18px);
}
.admin-body .admin-notification-panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:15px 16px;
    border-bottom:1px solid rgba(118,171,234,.13);
}
.admin-body .admin-notification-panel-head strong{display:block;color:#f3f8ff;}
.admin-body .admin-notification-panel-head small{display:block;margin-top:2px;color:#8298b4;}
.admin-body .admin-notification-list{max-height:470px;overflow:auto;scrollbar-width:thin;}
.admin-body .admin-notification-empty{padding:28px 18px;text-align:center;color:#8298b4;}
.admin-body .admin-notification-item{
    display:grid;grid-template-columns:34px 1fr;gap:10px;
    padding:13px 15px;
    border-bottom:1px solid rgba(118,171,234,.09);
    background:transparent;
}
.admin-body .admin-notification-item.unread{background:rgba(41,128,235,.07);}
.admin-body .admin-notification-item-icon{
    width:30px;height:30px;display:grid;place-items:center;border-radius:10px;
    background:rgba(87,168,255,.12);color:#78c9ff;font-weight:900;
}
.admin-body .admin-notification-item.success .admin-notification-item-icon{background:rgba(53,221,151,.12);color:#55e0a5;}
.admin-body .admin-notification-item.error .admin-notification-item-icon{background:rgba(255,94,112,.12);color:#ff7585;}
.admin-body .admin-notification-item.warning .admin-notification-item-icon{background:rgba(255,185,85,.12);color:#ffc36e;}
.admin-body .admin-notification-item strong{display:block;color:#eaf3ff;font-size:.86rem;line-height:1.38;}
.admin-body .admin-notification-item small{display:block;margin-top:4px;color:#6f87a5;font-size:.72rem;}

.admin-body .admin-toast-container{
    position:fixed;
    top:76px;right:18px;
    width:min(420px,calc(100vw - 28px));
    z-index:2000;
    display:grid;gap:10px;
    pointer-events:none;
}
.admin-body .admin-toast{
    pointer-events:auto;
    display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:10px;
    padding:13px 12px;
    border:1px solid rgba(114,169,235,.22);
    border-radius:16px;
    background:rgba(7,25,48,.97);
    box-shadow:0 18px 44px rgba(0,0,0,.38);
    color:#eaf4ff;
    transform:translateX(28px);opacity:0;
    transition:.22s ease;
    backdrop-filter:blur(16px);
}
.admin-body .admin-toast.visible{transform:translateX(0);opacity:1;}
.admin-body .admin-toast.leaving{transform:translateX(34px);opacity:0;}
.admin-body .admin-toast-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:rgba(77,166,255,.13);color:#70c7ff;font-weight:900;}
.admin-body .admin-toast-success{border-color:rgba(64,226,158,.25);}
.admin-body .admin-toast-success .admin-toast-icon{background:rgba(64,226,158,.12);color:#56e2a8;}
.admin-body .admin-toast-error{border-color:rgba(255,92,111,.3);}
.admin-body .admin-toast-error .admin-toast-icon{background:rgba(255,92,111,.13);color:#ff7584;}
.admin-body .admin-toast-warning{border-color:rgba(255,187,91,.28);}
.admin-body .admin-toast-warning .admin-toast-icon{background:rgba(255,187,91,.13);color:#ffc36e;}
.admin-body .admin-toast-copy{font-size:.88rem;line-height:1.38;font-weight:650;}
.admin-body .admin-toast-close{border:0;background:transparent;color:#91a6c0;font-size:1.35rem;cursor:pointer;padding:0;}

.admin-modal-open{overflow:hidden!important;}
.admin-modal-overlay{
    position:fixed;inset:0;z-index:1800;
    display:flex;align-items:center;justify-content:center;
    padding:28px;
    background:rgba(1,8,18,.76);
    backdrop-filter:blur(10px);
    opacity:0;transition:.18s ease;
}
.admin-modal-overlay.visible{opacity:1;}
.admin-modal-frame{
    position:relative;
    width:min(880px,100%);
    max-height:calc(100vh - 56px);
    overflow:auto;
    border:1px solid rgba(116,177,240,.24);
    border-radius:26px;
    background:linear-gradient(145deg,rgba(8,28,53,.99),rgba(5,18,37,.99));
    box-shadow:0 34px 100px rgba(0,0,0,.58);
    scrollbar-width:thin;
}
.admin-modal-wide .admin-modal-frame{width:min(1120px,100%);}
.admin-modal-slot{padding:10px;}
.admin-modal-x{
    position:sticky;top:10px;float:right;z-index:8;
    margin:10px 10px -52px 0;
    width:38px;height:38px;border-radius:12px;
    border:1px solid rgba(126,176,232,.2);
    background:rgba(5,20,39,.88);color:#dceaff;
    font-size:1.45rem;line-height:1;cursor:pointer;
}
.admin-modal-x:disabled{opacity:.35;cursor:not-allowed;}
.admin-body .admin-panel-modalized{
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
}
.admin-body .admin-panel-modalized > .admin-panel-header{padding-right:52px;}
.admin-modal-overlay.is-locked .admin-modal-frame{box-shadow:0 34px 100px rgba(0,0,0,.58),0 0 0 1px rgba(67,205,255,.09);}

.admin-body .router-provision-steps{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;
    margin:0 0 15px;
}
.admin-body .router-provision-step{
    min-width:0;padding:10px 8px;border-radius:14px;
    border:1px solid rgba(118,170,230,.12);
    background:rgba(9,30,56,.64);text-align:center;
}
.admin-body .router-provision-step span{
    width:27px;height:27px;margin:0 auto 6px;display:grid;place-items:center;
    border-radius:999px;background:rgba(112,147,188,.14);color:#829ab7;font-size:.74rem;font-weight:900;
}
.admin-body .router-provision-step small{display:block;color:#7389a5;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-body .router-provision-step.done{border-color:rgba(70,224,162,.2);}
.admin-body .router-provision-step.done span{background:rgba(70,224,162,.14);color:#58e2aa;}
.admin-body .router-provision-step.done small{color:#a9cbbb;}
.admin-body .router-provision-step.active{border-color:rgba(82,188,255,.32);background:rgba(35,116,183,.12);}
.admin-body .router-provision-step.active span{background:rgba(82,188,255,.16);color:#6bcbff;box-shadow:0 0 0 5px rgba(82,188,255,.05);}
.admin-body .router-provision-step.active small{color:#c7e8ff;}
.admin-body .router-provision-step.error span{background:rgba(255,92,111,.14);color:#ff7484;}
.admin-body .router-wizard-plan.is-installing{position:relative;opacity:.7;pointer-events:none;}
.admin-body .router-wizard-plan.is-installing::after{content:'Aplicando configuração no MikroTik…';position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,18,36,.78);border-radius:16px;color:#bfeaff;font-weight:800;}

.admin-body .admin-completion-panel{text-align:center;padding:36px 28px 30px!important;max-width:620px;margin:auto!important;}
.admin-body .admin-completion-icon{width:78px;height:78px;margin:0 auto 16px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,rgba(47,221,150,.22),rgba(42,166,255,.16));border:1px solid rgba(69,228,161,.3);color:#5be5ad;font-size:2.3rem;font-weight:900;box-shadow:0 18px 50px rgba(34,205,141,.12);}
.admin-body .admin-completion-eyebrow{display:block;color:#62cfff;font-size:.72rem;font-weight:900;letter-spacing:.16em;margin-bottom:7px;}
.admin-body .admin-completion-panel h2{margin:0;color:#f3f9ff;font-size:1.65rem;}
.admin-body .admin-completion-panel p{max-width:500px;margin:10px auto 20px;color:#9bb0ca;line-height:1.55;}
.admin-body .admin-completion-countdown{max-width:380px;margin:0 auto 22px;}
.admin-body .admin-completion-progress{height:7px;border-radius:99px;background:rgba(108,151,199,.13);overflow:hidden;margin-bottom:9px;}
.admin-body .admin-completion-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#45dda1,#4bbdff);transition:width 1s linear;}
.admin-body .admin-completion-countdown strong{font-size:.78rem;color:#8fa5c0;font-weight:650;}
.admin-body .admin-completion-countdown b{color:#e8f7ff;}

@media (max-width:760px){
    .admin-body .admin-toast-container{top:68px;right:10px;width:calc(100vw - 20px);}
    .admin-modal-overlay{padding:0;align-items:flex-end;}
    .admin-modal-frame,.admin-modal-wide .admin-modal-frame{width:100%;max-height:92vh;border-radius:24px 24px 0 0;}
    .admin-modal-slot{padding:5px;}
    .admin-body .router-provision-steps{grid-template-columns:repeat(5,82px);overflow-x:auto;padding-bottom:5px;}
    .admin-body .admin-topbar-actions{gap:6px;}
    .admin-body .admin-notification-button{width:38px;height:38px;border-radius:12px;}
}

/* ================================================================
   V8.9.5 - GERENCIAMENTO DE ADMINISTRADORES
================================================================ */
.admin-body .admin-self-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 2px 7px;
    border: 1px solid rgba(115, 214, 255, .22);
    border-radius: 999px;
    background: rgba(115, 214, 255, .08);
    color: #bfeaff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-body .admin-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-body .admin-account-actions .btn:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.admin-body .admin-editor-panel {
    max-width: 820px;
}

.admin-body .admin-active-group {
    margin-top: 4px;
}

@media (max-width: 760px) {
    .admin-body .admin-account-actions {
        min-width: 250px;
    }
}



/* ================================================================
   V8.9.6 - LGPD / DOCUMENTOS LEGAIS
================================================================ */
.admin-body .legal-term-editor-panel {
    max-width: 1040px;
}
.admin-body .legal-term-editor-panel textarea {
    min-height: 360px;
    resize: vertical;
    line-height: 1.55;
    font-family: inherit;
}
.admin-body .legal-term-order-group {
    max-width: 220px;
}
.admin-body .legal-term-preview {
    display: block;
    max-width: 600px;
    margin-top: 5px;
    color: #8096b2;
    line-height: 1.35;
}
.admin-body .legal-term-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.portal-legal-links {
    margin: 14px 0 16px;
    padding: 13px 14px;
    border: 1px solid rgba(120, 160, 210, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
    text-align: center;
}
.portal-legal-links > span {
    display: block;
    margin-bottom: 6px;
    color: #8fa2ba;
    font-size: .78rem;
}
.portal-legal-links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
}
.portal-legal-link {
    appearance: none;
    padding: 2px 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: #69c9ff;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}
.portal-legal-link:hover,
.portal-legal-link:focus-visible {
    color: #a7e4ff;
}
.portal-legal-modal-open {
    overflow: hidden !important;
}
.portal-legal-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(1, 8, 18, .82);
    backdrop-filter: blur(8px);
}
.portal-legal-modal[hidden] {
    display: none !important;
}
.portal-legal-dialog {
    width: min(760px, 100%);
    max-height: min(86vh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(116, 177, 240, .24);
    border-radius: 22px;
    background: #071629;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.portal-legal-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 15px;
    border-bottom: 1px solid rgba(116, 177, 240, .13);
}
.portal-legal-modal-header h2 {
    margin: 0;
    color: #f2f8ff;
    font-size: 1.08rem;
}
.portal-legal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(126, 176, 232, .2);
    border-radius: 12px;
    background: rgba(5, 20, 39, .88);
    color: #dceaff;
    font-size: 1.45rem;
    cursor: pointer;
}
.portal-legal-modal-content {
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    color: #c6d5e7;
    font-size: .9rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
}
.portal-legal-modal-footer {
    flex: 0 0 auto;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(116, 177, 240, .13);
    text-align: right;
}
@media (max-width: 640px) {
    .portal-legal-modal {
        padding: 0;
        align-items: flex-end;
    }
    .portal-legal-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
    }
    .portal-legal-modal-content {
        padding: 17px;
    }
    .admin-body .legal-term-order-group {
        max-width: none;
    }
}


/* HOTSPOT PIX v8.9.7 - aceite/versionamento LGPD */
.legal-acceptance-section {
    border: 1px solid rgba(105, 201, 255, .16);
    border-radius: 14px;
    padding: 13px 14px;
    background: rgba(105, 201, 255, .035);
}
.legal-acceptance-checkbox {
    align-items: flex-start;
}
.legal-acceptance-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin: 9px 0 0 28px;
}
.legal-version-label {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(105, 201, 255, .10);
    color: #9bdcff;
    font-size: .66rem;
    font-weight: 800;
    vertical-align: middle;
}
@media (max-width: 640px) {
    .legal-acceptance-links {
        margin-left: 0;
    }
}

/* HOTSPOT PIX v8.9.7 - histórico operacional e versões LGPD */
.payment-events-content h3,
.legal-term-versions-content h3 {
    margin: 18px 0 10px;
    color: #e7f2ff;
    font-size: 1rem;
}
.payment-event-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(120, 160, 210, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .025);
}
.legal-version-card {
    margin-bottom: 10px;
    border: 1px solid rgba(120, 160, 210, .14);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
}
.legal-version-card > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 14px;
    cursor: pointer;
    color: #eaf4ff;
}
.legal-version-meta {
    padding: 0 14px 10px;
    color: #8ea5bd;
    font-size: .75rem;
    overflow-wrap: anywhere;
}
.legal-version-content {
    max-height: 360px;
    overflow-y: auto;
    padding: 14px;
    border-top: 1px solid rgba(120, 160, 210, .10);
    color: #c6d5e7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
}