/* =========================================================================
   Área do Cliente — /PainelCliente (licenciamento e financeiro)
   Layout aprovado no Figma "SystemPort Site - Área do Cliente (Licenciamento)".
   ========================================================================= */

.ac-page {
    --ac-navy: #0B1A33;
    --ac-navy-2: #10265A;
    --ac-blue: #2563EB;
    --ac-blue-soft: #E8EFFE;
    --ac-orange: #F97316;
    --ac-orange-soft: #FFF1E7;
    --ac-red: #DC2626;
    --ac-red-soft: #FEECEC;
    --ac-green: #16A34A;
    --ac-green-soft: #E7F7EE;
    --ac-ink: #0F172A;
    --ac-text: #334155;
    --ac-muted: #64748B;
    --ac-faint: #94A3B8;
    --ac-line: #E6ECF5;
    --ac-bg: #F4F7FB;
    font-family: Inter, "Segoe UI", sans-serif;
    background: var(--ac-bg);
    color: var(--ac-text);
    min-height: 100vh;
}

.ac-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Hero ---- */
.ac-hero {
    padding: calc(var(--sp-hero-nav-h, 78px) + 40px) 0 112px;
    background:
        radial-gradient(circle at 85% 10%, rgba(37, 99, 235, .45), transparent 45%),
        linear-gradient(100deg, var(--ac-navy) 0%, var(--ac-navy-2) 60%, #1D4ED8 100%);
    color: #fff;
}

.ac-hero__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.ac-breadcrumb {
    display: flex;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #93A8D6;
    margin-bottom: 10px;
}

.ac-breadcrumb a { color: #93A8D6; text-decoration: none; }
.ac-breadcrumb a:hover { color: #fff; }

.ac-hero__title {
    margin: 0 0 14px;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

.ac-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 15px;
    color: #C7D2EA;
}

.ac-hero__doc { display: inline-flex; align-items: center; gap: 6px; }
.ac-hero__sep { opacity: .6; }

.ac-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.ac-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ac-badge.is-on { background: rgba(34, 197, 94, .16); color: #4ADE80; }
.ac-badge.is-off { background: rgba(248, 113, 113, .16); color: #FCA5A5; }

.ac-copy {
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #C7D2EA;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.ac-copy:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.ac-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.ac-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.ac-btn-ghost:hover { background: rgba(255, 255, 255, .18); }

/* ---- Corpo ---- */
.ac-body {
    margin-top: -64px;
    padding-bottom: 96px;
    position: relative;
}

.ac-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.ac-stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(10, 23, 51, .08);
    text-align: left;
    font: inherit;
    color: inherit;
}

.ac-stat--link { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.ac-stat--link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 23, 51, .12); }

.ac-stat__top {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-muted);
}

.ac-stat__ico {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 17px;
}

.ac-stat__ico.is-blue { background: var(--ac-blue-soft); color: var(--ac-blue); }
.ac-stat__ico.is-orange { background: var(--ac-orange-soft); color: var(--ac-orange); }
.ac-stat__ico.is-red { background: var(--ac-red-soft); color: var(--ac-red); }
.ac-stat__ico.is-green { background: var(--ac-green-soft); color: var(--ac-green); }

.ac-stat__value { font-size: 30px; font-weight: 700; color: var(--ac-ink); line-height: 1.1; }
.ac-stat__value.is-red { color: var(--ac-red); }
.ac-stat small { font-size: 13px; font-weight: 500; color: var(--ac-muted); }

.ac-progress { height: 8px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.ac-progress span { display: block; height: 100%; min-width: 6px; border-radius: 99px; }
.ac-progress .is-blue { background: var(--ac-blue); }
.ac-progress .is-orange { background: var(--ac-orange); }

/* ---- Painel ---- */
.ac-panel {
    background: #fff;
    border: 1px solid var(--ac-line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(10, 23, 51, .08);
    overflow: hidden;
}

.ac-tabs {
    display: flex;
    gap: 32px;
    padding: 0 28px;
    border-bottom: 1px solid var(--ac-line);
    overflow-x: auto;
}

.ac-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 20px 0 17px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--ac-muted);
    white-space: nowrap;
    cursor: pointer;
}

.ac-tab:hover { color: var(--ac-ink); }
.ac-tab.is-active { color: var(--ac-ink); font-weight: 700; border-bottom-color: var(--ac-blue); }
.ac-tab__hint { font-weight: 500; color: var(--ac-faint); }

.ac-tag {
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--ac-blue-soft);
    color: var(--ac-blue);
    font-size: 11px;
    font-weight: 700;
}

.ac-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 28px;
}

.ac-toolbar__end { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }

.ac-seg {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #F1F5F9;
}

.ac-seg button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-muted);
    cursor: pointer;
}

.ac-seg button.is-active { background: #fff; color: var(--ac-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

.ac-count {
    padding: 1px 7px;
    border-radius: 99px;
    background: #E2E8F0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.ac-seg button.is-active .ac-count { background: var(--ac-blue); color: #fff; }

.ac-chips { display: inline-flex; gap: 6px; }

.ac-chips button {
    padding: 6px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 99px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}

.ac-chips button.is-active { background: var(--ac-ink); border-color: var(--ac-ink); color: #fff; }

.ac-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 280px;
    height: 42px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #D9E1EC;
    border-radius: 10px;
    background: #fff;
    color: var(--ac-faint);
}

.ac-search:focus-within { border-color: var(--ac-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }

.ac-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: 14px;
    color: var(--ac-ink);
}

.ac-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #FECACA;
    border-radius: 10px;
    background: #fff;
    color: var(--ac-red);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ac-btn-danger:hover { background: #FEF2F2; }

/* ---- Tabela ---- */
.ac-table-wrap { max-height: 620px; overflow-y: auto; }

.ac-table { width: 100%; border-collapse: collapse; }

.ac-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #EEF2F7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-align: left;
    color: var(--ac-muted);
}

.ac-table th:first-child,
.ac-table td:first-child { padding-left: 28px; }

.ac-table th:last-child,
.ac-table td:last-child { padding-right: 28px; }

.ac-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #EEF2F7;
    font-size: 14px;
    font-weight: 500;
    color: var(--ac-text);
    vertical-align: middle;
}

.ac-table tbody tr:hover { background: #FAFCFF; }

.ac-col-reg { width: 150px; }
.ac-col-ver { width: 140px; }
.ac-col-st { width: 190px; }
.ac-col-acao { width: 90px; text-align: right !important; }

.ac-maq { display: flex; align-items: center; gap: 12px; }

.ac-maq__ico {
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ac-blue-soft);
    color: var(--ac-blue);
    font-size: 16px;
}

.ac-maq__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-maq__txt strong { font-size: 15px; font-weight: 600; color: var(--ac-ink); overflow-wrap: anywhere; }
.ac-maq__txt small { font-size: 13px; font-weight: 400; color: var(--ac-faint); }

.ac-ver {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: #F1F5F9;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.ac-muted { color: var(--ac-faint); }

.ac-table tr.is-off .ac-maq__ico { background: #F1F5F9; color: var(--ac-faint); }
.ac-table tr.is-off .ac-maq__txt strong,
.ac-table tr.is-off .ac-col-reg { color: var(--ac-faint); }

.ac-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ac-switch__track {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    padding: 0 3px;
    border-radius: 99px;
    background: #CBD5E1;
    transition: background .2s;
}

.ac-switch__knob {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .2s;
}

.ac-switch.is-on .ac-switch__track { background: #22C55E; }
.ac-switch.is-on .ac-switch__knob { transform: translateX(18px); }
.ac-switch__lbl { font-size: 14px; font-weight: 600; color: var(--ac-muted); }
.ac-switch.is-on .ac-switch__lbl { color: #15803D; }
.ac-switch:focus-visible .ac-switch__track { outline: 2px solid var(--ac-blue); outline-offset: 2px; }

.ac-del {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: var(--ac-faint);
    cursor: pointer;
}

.ac-del:hover,
.ac-table tr.is-off .ac-del { border-color: #FECACA; background: #FEF2F2; color: var(--ac-red); }

.ac-empty td { padding: 48px 28px !important; text-align: center; color: var(--ac-muted); }

.ac-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 28px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ac-muted);
}

/* ---- Financeiro (ListaBoletos) ---- */
.ac-pago {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
}

.ac-pago.is-on { background: var(--ac-green-soft); color: #15803D; }
.ac-pago.is-off { background: var(--ac-red-soft); color: var(--ac-red); }

.ac-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #D9E1EC;
    border-radius: 8px;
    background: #fff;
    color: var(--ac-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ac-pdf:hover { background: var(--ac-blue-soft); }
.ac-pdf:disabled { color: var(--ac-faint); background: #F8FAFC; cursor: not-allowed; }

/* ---- Responsivo ---- */
@media (max-width: 1100px) {
    .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .ac-wrap { padding: 0 16px; }
    .ac-hero { padding: calc(var(--sp-hero-nav-h, 78px) + 20px) 0 64px; }
    .ac-hero__meta { font-size: 13px; }
    .ac-btn-ghost { padding: 8px 12px; font-size: 13px; }
    .ac-body { margin-top: -40px; padding-bottom: 48px; }
    .ac-stats { gap: 12px; margin-bottom: 16px; }
    .ac-stat { padding: 16px; gap: 8px; }
    .ac-stat__ico { width: 32px; height: 32px; font-size: 14px; }
    .ac-stat__value { font-size: 22px; }

    .ac-hero__sep,
    .ac-tab__hint,
    .ac-tag { display: none; }
    .ac-tabs { gap: 20px; padding: 0 16px; }
    .ac-toolbar { padding: 16px; }
    .ac-seg { width: 100%; }
    .ac-seg button { flex: 1; justify-content: center; }
    .ac-toolbar__end { width: 100%; margin-left: 0; }
    .ac-search { width: 100%; }
    .ac-btn-danger { width: 100%; justify-content: center; }

    /* Tabela vira lista de cartões */
    .ac-table-wrap { max-height: none; padding: 0 16px 8px; }
    .ac-table thead { display: none; }
    .ac-table, .ac-table tbody { display: block; }

    .ac-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 4px 12px;
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid var(--ac-line);
        border-radius: 14px;
    }

    .ac-table td { display: block; padding: 0 !important; border: 0; width: auto; }
    .ac-table td:first-child { grid-column: 1; grid-row: 1; }
    .ac-table .ac-col-st { grid-column: 2; grid-row: 1; }
    .ac-table .ac-col-acao { grid-column: 3; grid-row: 1; }
    .ac-table .ac-col-reg,
    .ac-table .ac-col-ver { grid-column: 1 / -1; font-size: 12px; color: var(--ac-faint); padding-left: 52px !important; }
    .ac-table .ac-col-reg::before,
    .ac-table .ac-col-ver::before { content: attr(data-label) ": "; }
    .ac-switch__lbl { display: none; }

    .ac-empty { display: block !important; }
    .ac-foot { padding: 12px 16px 16px; }
}

.ac-boleto__desc { font-weight: 600; color: var(--ac-ink); }

/* ---- Carregando (API) ---- */
.ac-panel { position: relative; min-height: 320px; }

.ac-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 140px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(1px);
    font-size: 14px;
    font-weight: 600;
    color: var(--ac-muted);
}

.ac-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #DBE4F0;
    border-top-color: var(--ac-blue);
    border-radius: 50%;
    vertical-align: middle;
    animation: ac-gira .7s linear infinite;
}

.ac-spinner--lg { width: 40px; height: 40px; border-width: 4px; }

.ac-btn-ghost:disabled { opacity: .7; cursor: wait; }

@keyframes ac-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ac-spinner { animation-duration: 1.6s; }
}