/* ============================================
   CST Design System - Layout Styles
   Estilos compartilhados entre os layouts de visualizacao
   Consolidado de estilos inline de 17+ layouts
   ============================================ */

/* ========================================
   EXECUTIVE DASHBOARD - Estilos Compartilhados
   Usado em: LayoutDashboardMesAnoCC, LayoutDashboardEquip
   ======================================== */

.executive-dashboard {
    background: linear-gradient(135deg, var(--cst-neutral-50) 0%, var(--cst-neutral-100) 100%);
    border-radius: var(--cst-radius-xl);
    padding: var(--cst-spacing-xl);
    font-family: var(--cst-font-family);
}

/* === HERO SECTION - Dashboard Especifico === */
.cst-hero-dashboard {
    margin-bottom: var(--cst-spacing-lg);
}

.cst-hero-metrics-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--cst-spacing-lg);
    flex-wrap: wrap;
}

.cst-hero-total {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cst-hero-currency {
    font-size: 28px;
    font-weight: 300;
    opacity: 0.8;
    color: white;
}

.cst-hero-value {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
    color: white;
}

.cst-hero-variation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    flex-wrap: wrap;
}

.cst-hero-variation.variation-up {
    background: var(--cst-danger-bg);
    color: var(--cst-danger-light);
}

.cst-hero-variation.variation-down {
    background: var(--cst-success-bg);
    color: var(--cst-success-light);
}

.cst-hero-variation-label {
    font-size: 12px;
    opacity: 0.8;
    color: white;
    width: 100%;
    text-align: right;
}

.cst-hero-sparkline {
    position: relative;
    height: 80px;
    margin-top: var(--cst-spacing-md);
    opacity: 0.4;
}

.cst-hero-sparkline-chart {
    width: 100%;
    height: 100%;
}

/* === HERO TOGGLE === */
.cst-hero-toggle {
    background: var(--cst-white-alpha-10);
    border-radius: 8px;
    padding: 2px;
}

.cst-hero-toggle :deep(.mud-toggle-group) {
    border: none !important;
}

.cst-hero-toggle :deep(.mud-toggle-item) {
    background: transparent !important;
    color: var(--cst-white-alpha-70) !important;
    border: none !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
}

.cst-hero-toggle :deep(.mud-toggle-item.mud-toggle-item-selected) {
    background: var(--cst-white-alpha-20) !important;
    color: white !important;
    border-radius: 6px !important;
}

/* === PULSE INDICATORS === */
.pulse-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.pulse-card {
    background: white;
    border-radius: var(--cst-radius-lg);
    padding: var(--cst-spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--cst-spacing-md);
    box-shadow: var(--cst-shadow-sm);
    border: 1px solid var(--cst-neutral-200);
    position: relative;
    transition: all var(--cst-transition-fast);
}

.pulse-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.pulse-card.pulse-accent {
    border-left: 4px solid var(--cst-primary);
}

.pulse-card.pulse-danger {
    border-left: 4px solid var(--cst-danger);
}

.pulse-card.pulse-success {
    border-left: 4px solid var(--cst-success);
}

.pulse-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--cst-radius-lg);
    background: var(--cst-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cst-neutral-600);
}

.pulse-data {
    flex: 1;
}

.pulse-value {
    font-size: 22px;
    font-weight: var(--cst-font-weight-bold);
    color: var(--cst-neutral-800);
    line-height: 1.2;
}

.pulse-label {
    font-size: var(--cst-font-size-sm);
    color: var(--cst-neutral-500);
    margin-top: 2px;
}

.pulse-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.pulse-badge.danger {
    background: var(--cst-danger-bg);
    color: var(--cst-danger-dark);
}

.pulse-badge.success {
    background: var(--cst-success-bg);
    color: var(--cst-success-dark);
}

.pulse-indicator {
    position: absolute;
    top: 12px;
    right: 12px;
}

.pulse-ring {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cst-primary);
    animation: cstPulse 2s infinite;
}

.pulse-volatility {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}

.pulse-volatility.high {
    background: var(--cst-warning-bg);
    color: var(--cst-warning-dark);
}

.pulse-volatility.medium {
    background: var(--cst-warning-bg);
    color: var(--cst-warning);
}

.pulse-volatility.low {
    background: var(--cst-success-bg);
    color: var(--cst-success-dark);
}

/* === ANALYTICS GRID === */
.analytics-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.analytics-main,
.analytics-side {
    background: white;
    border-radius: var(--cst-radius-lg);
    padding: var(--cst-spacing-lg);
    box-shadow: var(--cst-shadow-sm);
    border: 1px solid var(--cst-neutral-200);
}

.card-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-icon {
    color: var(--cst-primary);
}

.card-title {
    font-size: var(--cst-font-size-md);
    font-weight: var(--cst-font-weight-semibold);
    color: var(--cst-neutral-800);
}

.chart-toggle {
    transform: scale(0.85);
}

.chart-container-main {
    margin: 0 -10px;
}

.chart-context {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding-top: 12px;
    border-top: 1px solid var(--cst-neutral-200);
    margin-top: 12px;
}

.context-item {
    display: flex;
    align-items: center;
    gap: var(--cst-spacing-sm);
    font-size: var(--cst-font-size-sm);
    color: var(--cst-neutral-500);
}

.context-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.context-dot.primary {
    background: var(--cst-primary);
}

.context-line {
    width: 20px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cst-danger), var(--cst-danger) 4px, transparent 4px, transparent 8px);
}

.donut-container {
    display: flex;
    justify-content: center;
}

.concentration-insight {
    background: var(--cst-neutral-50);
    border-radius: var(--cst-radius-md);
    padding: var(--cst-spacing-md);
    margin-top: var(--cst-spacing-md);
}

.insight-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cst-font-size-xs);
    font-weight: var(--cst-font-weight-bold);
    color: var(--cst-neutral-500);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.insight-text {
    font-size: var(--cst-font-size-sm);
    color: var(--cst-neutral-600);
    line-height: 1.4;
}

.insight-alert {
    color: var(--cst-danger-dark);
}

.insight-warning {
    color: var(--cst-warning-dark);
}

.insight-ok {
    color: var(--cst-success-dark);
}

/* === HEALTH SECTION === */
.health-section {
    background: white;
    border-radius: var(--cst-radius-lg);
    padding: var(--cst-spacing-lg);
    margin-bottom: var(--cst-spacing-lg);
    box-shadow: var(--cst-shadow-sm);
    border: 1px solid var(--cst-neutral-200);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.section-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-icon {
    color: var(--cst-primary);
}

.section-title {
    font-size: var(--cst-font-size-md);
    font-weight: var(--cst-font-weight-semibold);
    color: var(--cst-neutral-800);
}

.section-subtitle {
    font-size: var(--cst-font-size-sm);
    color: var(--cst-neutral-400);
}

.health-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.health-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.health-pill.danger {
    background: var(--cst-danger-bg);
    color: var(--cst-danger-dark);
}

.health-pill.success {
    background: var(--cst-success-bg);
    color: var(--cst-success-dark);
}

.health-pill.neutral {
    background: var(--cst-neutral-200);
    color: var(--cst-neutral-600);
}

.health-bar-container {
    margin-top: 12px;
}

.health-bar {
    height: 12px;
    background: var(--cst-neutral-200);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
}

.health-segment {
    height: 100%;
    transition: width 0.5s ease;
}

.health-segment.danger {
    background: var(--cst-danger-gradient);
}

.health-segment.neutral {
    background: linear-gradient(90deg, var(--cst-neutral-500), var(--cst-neutral-300));
}

.health-segment.success {
    background: var(--cst-success-gradient);
}

.health-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--cst-font-size-xs);
    color: var(--cst-neutral-400);
    margin-top: 6px;
}

/* === PERFORMERS SECTION === */
.performers-section {
    background: white;
    border-radius: var(--cst-radius-lg);
    padding: var(--cst-spacing-lg);
    margin-bottom: var(--cst-spacing-lg);
    box-shadow: var(--cst-shadow-sm);
    border: 1px solid var(--cst-neutral-200);
}

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

.performer-card {
    display: grid;
    grid-template-columns: 50px 1fr 140px 100px 100px;
    align-items: center;
    gap: var(--cst-spacing-md);
    padding: var(--cst-spacing-md);
    background: var(--cst-neutral-50);
    border-radius: var(--cst-radius-md);
    position: relative;
    transition: all var(--cst-transition-fast);
}

.performer-card:hover {
    background: var(--cst-neutral-100);
}

/* Medalhas - usam variaveis do cst-medals.css */
.performer-card.performer-gold {
    background: var(--cst-medal-gold-bg);
    border: 1px solid var(--cst-medal-gold);
}

.performer-card.performer-silver {
    background: var(--cst-medal-silver-bg);
    border: 1px solid var(--cst-medal-silver);
}

.performer-card.performer-bronze {
    background: var(--cst-medal-bronze-bg);
    border: 1px solid var(--cst-medal-bronze);
}

.performer-rank {
    display: flex;
    justify-content: center;
}

.rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: white;
}

.rank-badge.rank-1 {
    background: var(--cst-medal-gold-gradient);
    box-shadow: 0 2px 8px rgba(255, 179, 0, 0.4);
}

.rank-badge.rank-2 {
    background: var(--cst-medal-silver-gradient);
}

.rank-badge.rank-3 {
    background: var(--cst-medal-bronze-gradient);
}

.rank-number {
    font-size: var(--cst-font-size-md);
    font-weight: var(--cst-font-weight-semibold);
    color: var(--cst-neutral-400);
}

.performer-info {
    min-width: 0;
}

.performer-name {
    font-size: var(--cst-font-size-md);
    font-weight: var(--cst-font-weight-semibold);
    color: var(--cst-neutral-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.performer-code {
    font-size: var(--cst-font-size-xs);
    color: var(--cst-neutral-400);
    margin-top: 2px;
}

.performer-value {
    text-align: right;
}

.value-main {
    font-size: var(--cst-font-size-md);
    font-weight: var(--cst-font-weight-bold);
    color: var(--cst-neutral-800);
}

.value-percent {
    font-size: var(--cst-font-size-xs);
    color: var(--cst-neutral-500);
}

.performer-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
}

.performer-trend.trend-up {
    background: var(--cst-danger-bg);
    color: var(--cst-danger-dark);
}

.performer-trend.trend-down {
    background: var(--cst-success-bg);
    color: var(--cst-success-dark);
}

.performer-trend.trend-stable {
    background: var(--cst-neutral-200);
    color: var(--cst-neutral-600);
}

.performer-spark {
    display: flex;
    justify-content: center;
}

.spark-chart {
    width: 80px;
    height: 32px;
}

.performer-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cst-neutral-200);
    border-radius: 0 0 var(--cst-radius-md) var(--cst-radius-md);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--cst-success-gradient);
    transition: width var(--cst-transition-slow);
}

/* === FOOTER METRICS === */
.footer-metrics {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--cst-spacing-2xl);
    padding: var(--cst-spacing-lg);
    background: white;
    border-radius: var(--cst-radius-lg);
    box-shadow: var(--cst-shadow-sm);
    border: 1px solid var(--cst-neutral-200);
    flex-wrap: wrap;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--cst-radius-md);
    background: var(--cst-neutral-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cst-primary);
}

.metric-value {
    font-size: var(--cst-font-size-lg);
    font-weight: var(--cst-font-weight-bold);
    color: var(--cst-neutral-800);
}

.metric-label {
    font-size: var(--cst-font-size-xs);
    color: var(--cst-neutral-400);
}

.metric-divider {
    width: 1px;
    height: 40px;
    background: var(--cst-neutral-200);
}

/* ========================================
   COMPARATIVO TABLE - Estilos Compartilhados
   Usado em: LayoutComparativoCC, LayoutComparativo
   ======================================== */

.comparativo-container {
    overflow-x: auto;
    border-radius: var(--cst-radius-md);
    border: 1px solid var(--cst-neutral-200);
}

.comparativo-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparativo-table th,
.comparativo-table td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--cst-neutral-200);
}

.comparativo-table thead th {
    background: var(--cst-hero-gradient);
    color: white;
    font-weight: 600;
    font-size: 12px;
}

.comparativo-table .metrica-col {
    text-align: left !important;
    background-color: var(--cst-neutral-50);
    font-weight: 500;
    min-width: 150px;
    border-right: 2px solid var(--cst-neutral-200);
}

.comparativo-table .cc-col,
.comparativo-table .fazenda-col {
    min-width: 140px;
}

.comparativo-table .valor-col {
    transition: background-color 0.2s ease;
}

.comparativo-table .valor-alto {
    background-color: var(--cst-danger-bg) !important;
}

.comparativo-table .valor-baixo {
    background-color: var(--cst-success-bg) !important;
}

.comparativo-table .destaque-row {
    background-color: var(--cst-neutral-100);
}

.comparativo-table .destaque-row .metrica-col {
    background-color: var(--cst-neutral-200);
}

.comparativo-table .separador-row td {
    background-color: var(--cst-neutral-200);
    padding: 6px 16px;
    text-align: left !important;
}

.comparativo-table .ranking-row {
    background: var(--cst-warning-bg);
}

.comparativo-table .ranking-row .metrica-col {
    background-color: var(--cst-warning-bg);
}

.comparativo-table tbody tr:hover {
    background-color: var(--cst-primary-alpha-08);
}

.comparativo-table tbody tr:hover .metrica-col {
    background-color: var(--cst-primary-alpha-15);
}

/* ========================================
   GRAFICO CONTAINER - Estilos Compartilhados
   Usado em: LayoutEvolucaoTemporal*, LayoutHeatmap*, etc
   ======================================== */

.grafico-container {
    background: var(--cst-neutral-100);
    border-radius: var(--cst-radius-md);
    padding: var(--cst-spacing-lg);
    min-height: 400px;
}

/* ========================================
   BREADCRUMB E DETALHES - Composicao Recursos
   Usado em: LayoutComposicaoRecursos
   ======================================== */

.cst-hero-breadcrumb {
    background: var(--cst-primary-dark);
    padding: var(--cst-spacing-sm) var(--cst-spacing-lg);
}

.detalhe-header {
    padding: 12px;
    background: white;
    border-radius: var(--cst-radius-md);
    border: 1px solid var(--cst-neutral-200);
}

.detalhe-metricas {
    display: flex;
    flex-direction: column;
    gap: var(--cst-spacing-md);
}

.metrica-item {
    padding: var(--cst-spacing-sm) var(--cst-spacing-md);
    background: white;
    border-radius: 6px;
    border: 1px solid var(--cst-neutral-200);
}

.metrica-item.principal {
    background: linear-gradient(135deg, var(--cst-primary-alpha-08), var(--cst-primary-alpha-04));
    border-color: var(--cst-primary);
}

.composicao-item {
    padding: var(--cst-spacing-sm) 0;
    border-bottom: 1px solid var(--cst-neutral-100);
}

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

.composicao-cor {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.instrucao-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    padding: var(--cst-spacing-xl);
}

.legenda-box {
    width: 16px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* ========================================
   UTILITARIOS GERAIS
   ======================================== */

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   RESPONSIVE - Dashboard
   ======================================== */

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

    .performer-card {
        grid-template-columns: 40px 1fr 100px 80px;
    }

    .performer-spark {
        display: none;
    }
}

@media (max-width: 768px) {
    .pulse-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .cst-hero-value {
        font-size: 40px;
    }

    .footer-metrics {
        flex-wrap: wrap;
        gap: 20px;
    }

    .metric-divider {
        display: none;
    }

    .health-summary {
        flex-wrap: wrap;
    }

    .performer-card {
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }

    .performer-value,
    .performer-trend {
        display: none;
    }
}

/* ========================================
   RECURSOS - Estilos Específicos
   Usado em: LayoutWaterfallRecursos, LayoutEstruturaRecursos, LayoutHeatmapRecursos
   ======================================== */

/* === WATERFALL / PARETO === */
.ranking-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--cst-neutral-200);
    border-radius: 8px;
}

.ranking-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cst-neutral-100);
    transition: all 0.2s ease;
    gap: 12px;
}

.ranking-item:hover {
    background: var(--cst-neutral-100);
}

.ranking-item.dentro-80 {
    background: var(--cst-success-alpha-05);
}

.ranking-item.marco-80 {
    background: var(--cst-success-alpha-15);
    border-left: 4px solid var(--cst-success);
}

.ranking-position {
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.medal {
    font-size: 24px;
}

.position-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--cst-neutral-200);
    border-radius: 50%;
    font-weight: 600;
    font-size: 12px;
    color: var(--cst-neutral-600);
}

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

.ranking-name {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.ranking-bar-container {
    height: 6px;
    background: var(--cst-neutral-200);
    border-radius: 3px;
    overflow: hidden;
}

.ranking-bar {
    height: 100%;
    background: var(--cst-progress-gradient);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ranking-values {
    text-align: right;
    flex-shrink: 0;
    min-width: 100px;
}

.ranking-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--cst-primary);
}

.ranking-percent {
    font-size: 12px;
    color: var(--cst-neutral-500);
}

.ranking-acumulado {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cst-neutral-500);
    min-width: 70px;
    justify-content: flex-end;
}

.ranking-acumulado.acima-80 {
    color: var(--cst-success);
}

.marco-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--cst-success-gradient);
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.insight-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--cst-neutral-100);
    border-radius: 8px;
    border: 1px solid var(--cst-neutral-200);
}

/* === ESTRUTURA - Cards CC expandíveis === */
.estrutura-hero {
    background: linear-gradient(135deg, var(--cst-primary) 0%, var(--cst-primary-dark) 100%);
    padding: 20px 24px;
}

.hero-stat {
    text-align: center;
}

.hero-divider-v {
    width: 1px;
    height: 40px;
    background: var(--cst-white-alpha-30);
}

.estrutura-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-card {
    border: 1px solid var(--cst-neutral-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.cc-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cc-card.expanded {
    border-color: var(--cst-primary);
    box-shadow: var(--cst-shadow-primary);
}

.cc-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
    cursor: pointer;
    background: var(--cst-neutral-50);
    transition: background 0.2s ease;
}

.cc-header:hover {
    background: var(--cst-neutral-100);
}

.cc-expand-icon {
    color: var(--cst-neutral-500);
    transition: transform 0.3s ease;
}

.cc-card.expanded .cc-expand-icon {
    color: var(--cst-primary);
}

.cc-icon-container {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.cc-nome {
    font-weight: 600;
    font-size: 15px;
    color: var(--cst-neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-codigo {
    font-size: 12px;
    color: var(--cst-neutral-500);
}

.cc-metricas {
    display: flex;
    gap: 24px;
}

.metrica {
    text-align: right;
}

.metrica-label {
    display: block;
    font-size: 11px;
    color: var(--cst-neutral-400);
    text-transform: uppercase;
}

.metrica-valor {
    font-weight: 600;
    font-size: 14px;
}

.cc-barra-container {
    width: 100px;
    height: 8px;
    background: var(--cst-neutral-200);
    border-radius: 4px;
    overflow: hidden;
}

.cc-barra {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.equipamentos-container {
    background: white;
    border-top: 1px solid var(--cst-neutral-200);
    padding: 16px;
}

.composicao-resumo {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--cst-neutral-100);
    border-radius: 8px;
    flex-wrap: wrap;
}

.comp-barra {
    width: 60px;
    height: 6px;
    border-radius: 3px;
    max-width: 60px;
}

.equipamentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.equip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--cst-neutral-50);
    border-radius: 8px;
    border: 1px solid var(--cst-neutral-200);
    transition: all 0.2s ease;
}

.equip-card:hover {
    background: var(--cst-neutral-100);
    border-color: var(--cst-primary);
}

.equip-rank {
    flex-shrink: 0;
}

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

.equip-nome {
    font-weight: 500;
    font-size: 13px;
    color: var(--cst-neutral-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equip-codigo {
    font-size: 11px;
    color: var(--cst-neutral-400);
}

.equip-valores {
    text-align: right;
    flex-shrink: 0;
}

.equip-custo {
    font-weight: 600;
    font-size: 14px;
}

.equip-percent {
    font-size: 11px;
    color: var(--cst-neutral-500);
}

.equip-barra-mini {
    width: 50px;
    height: 4px;
    background: var(--cst-neutral-200);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.barra-fill {
    height: 100%;
    border-radius: 2px;
}

/* === HEATMAP - Estilos de tabela === */
.legenda-cor {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--cst-neutral-200);
}

.heatmap-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--cst-neutral-200);
}

.heatmap-table th.col-custo {
    min-width: 100px;
}

.heatmap-table th.col-comb {
    color: var(--cst-warning);
}

.heatmap-table th.col-lubr {
    color: var(--cst-purple);
}

.heatmap-table th.col-total {
    min-width: 120px;
    background: var(--cst-total-bg-light);
    color: var(--cst-total-text);
}

.heatmap-table td.col-total {
    font-weight: 600;
}

.heatmap-table tbody tr:hover td {
    filter: brightness(0.95);
}

.heatmap-table tbody tr:hover td.col-nome {
    background: var(--cst-neutral-100);
}

.heatmap-table .linha-total td.col-nome {
    background: var(--cst-neutral-50);
}

.heatmap-table .linha-total td.col-total {
    background: var(--cst-primary);
    color: var(--cst-white);
}

/* ========================================
   DIALOGS - Estilos de Dialogs CST
   Usado em: SelecaoCCsComparacaoCCDialog
   ======================================== */

/* === Seleção de CCs para Comparação === */
.selected-item {
    background-color: var(--cst-primary-alpha-08);
}

.selected-item:hover {
    background-color: var(--cst-primary-alpha-15) !important;
}