.opportunity-summary {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-bottom: 18px;
}


.compact-metric {
    min-height: 112px;

    padding: 18px 20px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-medium);

    background:
        rgba(18, 23, 29, 0.78);

    display: flex;
    flex-direction: column;
}


.compact-metric span {
    color:
        var(--text-muted);

    font-size: 11px;
}


.compact-metric strong {
    display: block;

    margin-top: auto;

    color: var(--text);

    font-size: 29px;

    letter-spacing:
        -0.045em;
}


.compact-metric small {
    margin-top: 3px;

    color:
        var(--text-muted);

    font-size: 8px;
}


.compact-metric--high {
    border-color:
        rgba(
            214,
            255,
            72,
            0.13
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                214,
                255,
                72,
                0.065
            ),
            rgba(
                18,
                23,
                29,
                0.78
            )
        );
}


.compact-metric--high strong {
    color: var(--accent);
}


.refresh-button {
    min-height: 39px;

    padding: 0 14px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    background: transparent;

    color:
        var(--text-soft);

    cursor: pointer;
}


.toolbar {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        170px
        190px
        170px;

    gap: 9px;

    margin-bottom: 13px;
}


.toolbar input,
.toolbar select {
    width: 100%;

    height: 44px;

    padding:
        0 13px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    outline: none;

    background:
        var(--surface);

    color:
        var(--text);

    font-family: inherit;
}


.toolbar input:focus,
.toolbar select:focus {
    border-color:
        rgba(
            214,
            255,
            72,
            0.32
        );

    box-shadow:
        0 0 0 4px
        rgba(
            214,
            255,
            72,
            0.025
        );
}


.result-bar {
    margin-bottom: 13px;

    display: flex;

    justify-content:
        space-between;

    gap: 15px;

    color:
        var(--text-muted);

    font-size: 9px;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


.opportunity-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, 430px);

    gap: 16px;

    align-items: start;
}


.opportunity-cards {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.opportunity-loading,
.opportunity-empty {
    min-height: 250px;

    grid-column:
        1 / -1;

    padding: 30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    display: grid;

    place-items: center;

    text-align: center;

    color:
        var(--text-muted);

    background:
        rgba(
            18,
            23,
            29,
            0.55
        );
}


.opportunity-empty strong {
    color:
        var(--text-soft);
}


.opportunity-empty span {
    display: block;

    margin-top: 5px;

    font-size: 10px;
}


.opportunity-card {
    min-width: 0;

    padding: 18px;

    border:
        1px solid var(--border);

    border-radius: 17px;

    background:
        rgba(
            18,
            23,
            29,
            0.68
        );

    cursor: pointer;

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}


.opportunity-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            214,
            255,
            72,
            0.14
        );
}


.opportunity-card--selected {
    border-color:
        rgba(
            214,
            255,
            72,
            0.35
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                214,
                255,
                72,
                0.05
            ),
            rgba(
                18,
                23,
                29,
                0.75
            )
        );
}


.card-head {
    display: flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap: 14px;
}


.card-company {
    min-width: 0;
}


.card-id {
    display: block;

    color:
        var(--accent);

    font-size: 8px;

    font-weight: 700;

    letter-spacing:
        0.11em;
}


.card-company h3 {
    margin:
        7px 0 4px;

    overflow: hidden;

    color:
        var(--text);

    font-size: 16px;

    letter-spacing:
        -0.025em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.card-company p {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 10px;
}


.score-ring {
    width: 57px;
    height: 57px;

    flex: 0 0 auto;

    border:
        1px solid var(--border);

    border-radius: 50%;

    display: grid;

    place-items: center;

    align-content: center;

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.score-ring strong {
    font-size: 18px;

    line-height: 1;
}


.score-ring span {
    margin-top: 3px;

    color:
        var(--text-muted);

    font-size: 7px;

    text-transform:
        uppercase;
}


.score-ring--alta {
    border-color:
        rgba(
            214,
            255,
            72,
            0.25
        );

    color: var(--accent);

    box-shadow:
        inset 0 0 20px
        rgba(
            214,
            255,
            72,
            0.035
        );
}


.score-ring--media {
    color: #ffd36b;
}


.score-ring--baixa {
    color:
        var(--text-soft);
}


.card-meta {
    margin-top: 15px;

    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}


.service-badge,
.priority-badge,
.status-badge {
    padding:
        5px 8px;

    border-radius:
        999px;

    font-size: 8px;

    font-weight: 700;
}


.service-badge {
    border:
        1px solid
        rgba(
            214,
            255,
            72,
            0.10
        );

    background:
        rgba(
            214,
            255,
            72,
            0.035
        );

    color:
        var(--accent);
}


.priority-badge {
    background:
        var(--surface-soft);

    color:
        var(--text-soft);
}


.priority-badge--alta {
    color:
        var(--accent);
}


.priority-badge--media {
    color: #ffd36b;
}


.status-badge {
    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--text-muted);
}


.card-diagnostic {
    min-height: 93px;

    margin-top: 15px;

    padding:
        12px 13px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.card-diagnostic > span {
    color:
        var(--text-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.card-diagnostic p {
    margin:
        7px 0 0;

    color:
        var(--text-soft);

    font-size: 10px;

    line-height: 1.55;
}


.card-footer {
    margin-top: 14px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;
}


.contact-chips {
    display: flex;

    flex-wrap: wrap;

    gap: 4px;
}


.contact-chip {
    padding:
        4px 7px;

    border:
        1px solid var(--border);

    border-radius: 999px;

    color:
        var(--text-muted);

    font-size: 7px;
}


.contact-chip--available {
    border-color:
        rgba(
            121,
            226,
            160,
            0.12
        );

    color:
        var(--success);
}


.contact-chip--empty {
    opacity: 0.6;
}


.card-arrow {
    color:
        var(--accent);

    font-size: 17px;
}


/* ==================================
   DETALHES
================================== */

.opportunity-detail {
    min-height: 600px;

    position: sticky;

    top: 20px;

    border:
        1px solid var(--border);

    border-radius:
        19px;

    overflow: hidden;

    background:
        rgba(
            18,
            23,
            29,
            0.72
        );
}


.detail-empty {
    min-height: 600px;

    padding: 32px;

    display: grid;

    place-items: center;

    align-content: center;

    text-align: center;
}


.detail-empty-icon {
    width: 62px;
    height: 62px;

    margin-bottom: 20px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            214,
            255,
            72,
            0.12
        );

    border-radius: 50%;

    color:
        var(--accent);

    font-size: 24px;
}


.detail-empty h2 {
    margin:
        8px 0;

    font-size: 22px;

    letter-spacing:
        -0.035em;
}


.detail-empty p {
    max-width: 290px;

    margin: 0;

    color:
        var(--text-soft);

    font-size: 11px;

    line-height: 1.6;
}


.detail-content {
    padding: 23px;
}


.detail-header {
    display: flex;

    justify-content:
        space-between;

    gap: 15px;
}


.detail-header h2 {
    margin:
        7px 0 4px;

    font-size: 24px;

    letter-spacing:
        -0.04em;
}


.detail-header p {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 10px;
}


.detail-priority {
    height: 31px;

    padding:
        0 10px;

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    border-radius: 999px;

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

    font-size: 9px;

    font-weight: 800;
}


.detail-priority--alta {
    color:
        var(--accent);

    background:
        rgba(
            214,
            255,
            72,
            0.055
        );
}


.detail-priority--media {
    color: #ffd36b;
}


.detail-service {
    margin-top: 20px;

    padding:
        13px;

    border:
        1px solid
        rgba(
            214,
            255,
            72,
            0.09
        );

    border-radius: 12px;

    background:
        rgba(
            214,
            255,
            72,
            0.025
        );
}


.detail-service span {
    display: block;

    color:
        var(--text-muted);

    font-size: 8px;

    text-transform:
        uppercase;
}


.detail-service strong {
    display: block;

    margin-top: 5px;

    color:
        var(--accent);

    font-size: 12px;
}


.detail-score {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 7px;
}


.detail-score > div {
    min-width: 0;

    padding: 11px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.detail-score span {
    display: block;

    color:
        var(--text-muted);

    font-size: 7px;

    text-transform:
        uppercase;
}


.detail-score strong {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color:
        var(--text);

    font-size: 14px;

    text-overflow:
        ellipsis;
}


.detail-section {
    margin-top: 19px;

    padding-top: 19px;

    border-top:
        1px solid var(--border);
}


.detail-section-heading {
    display: flex;

    align-items:
        flex-start;

    gap: 10px;
}


.detail-section-heading > div {
    display: grid;

    gap: 2px;
}


.detail-section-heading strong {
    font-size: 11px;
}


.detail-section-heading small {
    color:
        var(--text-muted);

    font-size: 8px;
}


.section-icon {
    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid var(--border);

    border-radius: 8px;

    color:
        var(--text-muted);

    font-size: 9px;

    font-weight: 900;
}


.section-icon--warning {
    color: #ffd36b;

    border-color:
        rgba(
            255,
            211,
            107,
            0.13
        );
}


.section-icon--accent {
    color:
        var(--accent);

    border-color:
        rgba(
            214,
            255,
            72,
            0.13
        );
}


.diagnostic-copy {
    margin-top: 13px;

    color:
        var(--text-soft);

    font-size: 10px;

    line-height: 1.6;
}


.diagnostic-copy p {
    margin: 0;
}


.diagnostic-title {
    display: block;

    margin-bottom: 8px;

    color:
        var(--text-soft);

    font-size: 10px;
}


.diagnostic-list {
    margin: 0;

    padding: 0;

    display: grid;

    gap: 7px;

    list-style: none;
}


.diagnostic-list li {
    position: relative;

    padding-left: 13px;
}


.diagnostic-list li::before {
    content: "";

    width: 4px;
    height: 4px;

    position: absolute;

    left: 0;
    top: 7px;

    border-radius: 50%;

    background:
        var(--accent);
}


.contact-list {
    margin-top: 13px;

    display: grid;

    gap: 7px;
}


.contact-action,
.contact-text {
    min-height: 38px;

    padding:
        0 11px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 10px;

    color:
        var(--text-soft);

    text-decoration: none;

    font-size: 9px;

    transition:
        border-color 150ms ease,
        color 150ms ease;
}


.contact-action:hover {
    border-color:
        rgba(
            214,
            255,
            72,
            0.18
        );

    color:
        var(--accent);
}


.contact-text span {
    color:
        var(--text-muted);

    font-size: 8px;
}


.contact-text strong {
    font-size: 9px;
}


.no-contact {
    color:
        var(--text-muted);

    font-size: 9px;
}


.field-label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--text-muted);

    font-size: 8px;

    text-transform:
        uppercase;
}


.detail-status-select {
    width: 100%;

    height: 41px;

    padding:
        0 11px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    outline: none;

    background:
        var(--surface);

    color:
        var(--text);
}


.detail-actions {
    margin-top: 19px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;
}


.action-button {
    min-height: 43px;

    padding:
        0 12px;

    border: 0;

    border-radius: 10px;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.action-primary {
    background:
        var(--accent);

    color: #10130d;
}


.action-secondary {
    border:
        1px solid var(--border);

    background:
        var(--surface-soft);

    color:
        var(--text-soft);
}


/* ==================================
   MODAL ANÁLISE
================================== */

body.modal-open {
    overflow: hidden;
}


.analysis-overlay {
    position: fixed;

    inset: 0;

    z-index: 300;

    padding: 25px;

    overflow-y: auto;

    background:
        rgba(
            5,
            8,
            11,
            0.88
        );

    backdrop-filter:
        blur(16px);
}


.analysis-overlay[hidden] {
    display: none;
}


.analysis-modal {
    width:
        min(
            100%,
            880px
        );

    margin:
        25px auto;

    border:
        1px solid
        var(--border-strong);

    border-radius: 24px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #13191f,
            #0b0f13
        );

    box-shadow:
        0 50px 120px
        rgba(
            0,
            0,
            0,
            0.55
        );
}


.analysis-header {
    padding:
        27px 30px;

    border-bottom:
        1px solid var(--border);

    display: flex;

    justify-content:
        space-between;

    gap: 20px;
}


.analysis-header h2 {
    margin:
        7px 0 4px;

    font-size: 29px;

    letter-spacing:
        -0.045em;
}


.analysis-header p {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 10px;
}


.modal-close {
    width: 37px;
    height: 37px;

    flex: 0 0 auto;

    border: 0;

    border-radius: 50%;

    background:
        var(--surface-soft);

    color:
        var(--text-soft);

    font-size: 20px;

    cursor: pointer;
}


.analysis-content {
    padding:
        28px 30px 34px;
}


.analysis-loading {
    min-height: 300px;

    display: grid;

    place-items: center;

    color:
        var(--text-muted);
}


.analysis-hero {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}


.analysis-hero > div {
    min-height: 120px;

    padding: 18px;

    border:
        1px solid var(--border);

    border-radius: 14px;

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

    display: flex;

    flex-direction: column;
}


.analysis-hero span {
    color:
        var(--text-muted);

    font-size: 9px;

    text-transform:
        uppercase;
}


.analysis-hero strong {
    margin-top: auto;

    color:
        var(--accent);

    font-size: 30px;

    letter-spacing:
        -0.04em;
}


.analysis-hero small {
    color:
        var(--text-muted);

    font-size: 8px;
}


.analysis-section {
    margin-top: 27px;

    padding-top: 25px;

    border-top:
        1px solid var(--border);
}


.analysis-section-title h3 {
    margin:
        6px 0 0;

    font-size: 18px;

    letter-spacing:
        -0.03em;
}


.analysis-grid {
    margin-top: 16px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.analysis-metric {
    min-height: 76px;

    padding: 12px;

    border-radius: 11px;

    background:
        rgba(
            255,
            255,
            255,
            0.018
        );
}


.analysis-metric > span {
    display: block;

    color:
        var(--text-muted);

    font-size: 8px;

    text-transform:
        uppercase;
}


.analysis-metric > strong {
    display: block;

    margin-top: 8px;

    font-size: 11px;
}


.analysis-signal {
    font-weight: 800;
}


.analysis-signal--ok {
    color:
        var(--success);
}


.analysis-signal--warning {
    color: #ffd36b;
}


.response-time {
    margin-top: 9px;

    padding:
        13px;

    border:
        1px solid var(--border);

    border-radius: 11px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;
}


.response-time span {
    color:
        var(--text-muted);

    font-size: 9px;
}


.response-time strong {
    color:
        var(--accent);

    font-size: 15px;
}


.analysis-text {
    margin-top: 15px;

    color:
        var(--text-soft);

    font-size: 11px;

    line-height: 1.65;
}


.analysis-empty {
    padding: 18px;

    border-radius: 12px;

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

    text-align: center;
}


.analysis-empty strong {
    display: block;

    color:
        var(--text-soft);

    font-size: 11px;
}


.analysis-empty span {
    display: block;

    margin-top: 4px;

    color:
        var(--text-muted);

    font-size: 9px;
}


.contact-list--modal {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
}


/* ==================================
   RESPONSIVO
================================== */

@media (
    max-width: 1250px
) {
    .opportunity-cards {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 1100px
) {
    .opportunity-layout {
        grid-template-columns:
            1fr;
    }

    .opportunity-detail {
        position: static;
    }
}


@media (
    max-width: 900px
) {
    .toolbar {
        grid-template-columns:
            1fr 1fr;
    }

    .search-box {
        grid-column:
            1 / -1;
    }

    .analysis-grid {
        grid-template-columns:
            1fr 1fr;
    }
}


@media (
    max-width: 720px
) {
    .opportunity-summary {
        grid-template-columns:
            1fr 1fr;
    }

    .toolbar {
        grid-template-columns:
            1fr;
    }

    .search-box {
        grid-column:
            auto;
    }

    .analysis-overlay {
        padding: 0;
    }

    .analysis-modal {
        min-height: 100vh;

        margin: 0;

        border-radius: 0;
    }

    .analysis-header,
    .analysis-content {
        padding:
            22px 19px;
    }

    .analysis-grid,
    .analysis-hero {
        grid-template-columns:
            1fr;
    }

    .contact-list--modal {
        grid-template-columns:
            1fr;
    }
}


@media (
    max-width: 480px
) {
    .opportunity-summary {
        grid-template-columns:
            1fr;
    }

    .detail-score {
        grid-template-columns:
            1fr;
    }

    .detail-actions {
        grid-template-columns:
            1fr;
    }
}