/**
 * bad_actors.css
 * Estilos para el Drawer de Fugas Crónicas / Bad Actors y Modal Extendido de Detalle Top 5
 * Carguío Palas Centinela
 */

/* ==========================================================================
   1. DRAWER LATERAL DERECHO: BAD ACTORS & FUGAS CRÓNICAS
   ========================================================================== */
.cp-bad-actors-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 720px;
    max-width: 95vw;
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid var(--cp-border, #e2e8f0);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

.cp-bad-actors-backdrop.open .cp-bad-actors-drawer {
    transform: translateX(0);
}

.cp-ba-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #ffffff;
}

.cp-ba-title-wrap {
    display: flex;
    flex-direction: column;
}

.cp-ba-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--cp-red-bg, #fef2f2);
    color: var(--cp-red-text, #b91c1c);
    border: 1px solid var(--cp-red-border, #fecaca);
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 4px;
    align-self: flex-start;
}

.cp-ba-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--cp-text-main, #0f172a);
    margin: 0;
}

.cp-ba-subtitle {
    font-size: 0.74rem;
    color: var(--cp-text-muted, #64748b);
    margin: 2px 0 0 0;
}

.cp-ba-close-btn {
    background: var(--cp-surface-subtle, #f1f5f9);
    border: 1px solid var(--cp-border, #e2e8f0);
    color: var(--cp-text-body, #334155);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.cp-ba-close-btn:hover {
    background: var(--cp-red-bg, #fef2f2);
    color: var(--cp-red-text, #b91c1c);
    border-color: var(--cp-red-border, #fecaca);
}

/* ==========================================================================
   2. MÉTRICAS CONSOLIDADAS DE FUGA (KPIS DE IMPACTO)
   ========================================================================== */
.cp-ba-metrics-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 18px;
    background: var(--cp-surface-subtle, #f1f5f9);
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
}

.cp-ba-kpi-card {
    background: #ffffff;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--cp-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.cp-ba-kpi-card.critical { border-top: 3px solid var(--cp-red, #ef4444); }
.cp-ba-kpi-card.danger { border-top: 3px solid var(--cp-yellow, #f59e0b); }
.cp-ba-kpi-card.warning { border-top: 3px solid var(--cp-primary, #0284c7); }

.cp-ba-kpi-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--cp-text-muted, #64748b);
    text-align: center;
    text-transform: uppercase;
}

.cp-ba-kpi-val {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--cp-text-main, #0f172a);
    margin: 2px 0;
}

.cp-ba-kpi-val small {
    font-size: 0.65rem;
    color: var(--cp-text-muted, #64748b);
}

.cp-ba-kpi-sub {
    font-size: 0.62rem;
    color: var(--cp-text-muted, #64748b);
    text-align: center;
}

/* ==========================================================================
   3. FILTROS RÁPIDOS POR ÁREA
   ========================================================================== */
.cp-ba-filters {
    display: flex;
    gap: 6px;
    padding: 10px 18px;
    background: #ffffff;
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
}

.cp-ba-filter-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--cp-border, #e2e8f0);
    background: #ffffff;
    color: var(--cp-text-body, #334155);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cp-ba-filter-btn.active {
    background: var(--cp-primary, #0284c7);
    color: #ffffff;
    border-color: var(--cp-primary, #0284c7);
}

/* ==========================================================================
   4. LISTA DE TARJETAS DE BAD ACTORS (PARETO)
   ========================================================================== */
.cp-ba-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-ba-card {
    background: #ffffff;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    box-shadow: var(--cp-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.cp-ba-card:hover {
    box-shadow: var(--cp-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
    border-color: var(--cp-border-strong, #94a3b8);
}

.cp-ba-card.severity-critical { border-left: 4px solid var(--cp-red, #ef4444); }
.cp-ba-card.severity-warning { border-left: 4px solid var(--cp-yellow, #f59e0b); }

.cp-ba-card.focused {
    border-color: var(--cp-primary, #0284c7) !important;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
}

.cp-ba-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.cp-ba-rank-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
}

.cp-ba-rank-badge.critical {
    background: var(--cp-red-bg, #fef2f2);
    color: var(--cp-red-text, #b91c1c);
    border: 1px solid var(--cp-red-border, #fecaca);
}

.cp-ba-rank-badge.warning {
    background: var(--cp-yellow-bg, #fffbeb);
    color: var(--cp-yellow-text, #b45309);
    border: 1px solid var(--cp-yellow-border, #fde68a);
}

.cp-ba-card-info {
    flex: 1;
}

.cp-ba-equip-title,
.cp-ba-node-title {
    font-size: 0.90rem;
    font-weight: 700;
    color: var(--cp-text-main, #0f172a);
    line-height: 1.25;
}

.cp-ba-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-ba-area-tag {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--cp-surface-subtle, #f1f5f9);
    color: var(--cp-text-body, #334155);
    border: 1px solid var(--cp-border, #e2e8f0);
    font-weight: 500;
    white-space: nowrap;
}

.cp-ba-btn-tree-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--cp-border, #e2e8f0);
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.15s ease;
    padding: 0;
}

.cp-ba-btn-tree-icon:hover {
    background: var(--cp-primary-bg, #f0f9ff);
    border-color: var(--cp-primary, #0284c7);
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2);
}

/* Métricas de Recurrencia e Impacto */
.cp-ba-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: var(--cp-surface-subtle, #f1f5f9);
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.cp-ba-metric-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m-lbl {
    font-size: 0.62rem;
    color: var(--cp-text-muted, #64748b);
    font-weight: 600;
    text-transform: uppercase;
}

.m-val {
    font-size: 0.82rem;
    font-weight: 700;
}

.m-val.text-red {
    color: var(--cp-red-text, #b91c1c);
}

/* Micro-Heatmap / Spark-strip */
.cp-ba-sparkline-wrap {
    margin-bottom: 8px;
}

.cp-ba-spark-title {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--cp-text-muted, #64748b);
    margin-bottom: 3px;
}

.cp-ba-spark-strip {
    display: flex;
    gap: 2px;
}

.cp-spark-dot {
    flex: 1;
    height: 6px;
    border-radius: 1px;
}

.cp-spark-dot.green { background: #86efac; }
.cp-spark-dot.yellow { background: #fde047; }
.cp-spark-dot.red { background: #fca5a5; }

/* Botones de Acción Minimalistas en Tarjeta */
.cp-ba-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cp-ba-btn-action {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid var(--cp-border, #e2e8f0);
    color: var(--cp-text-main, #0f172a);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.cp-ba-btn-action:hover {
    background: var(--cp-surface-subtle, #f1f5f9);
    border-color: var(--cp-border-strong, #94a3b8);
}

.cp-ba-btn-action.btn-detail:hover {
    background: var(--cp-primary-bg, #f0f9ff);
    color: var(--cp-primary, #0284c7);
    border-color: var(--cp-primary-border, #bae6fd);
}

.cp-ba-btn-action.btn-focus-tree:hover {
    background: var(--cp-surface-subtle, #f1f5f9);
    color: var(--cp-text-main, #0f172a);
    border-color: var(--cp-primary, #0284c7);
}

/* Pie de Panel Bad Actors */
.cp-ba-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--cp-border, #e2e8f0);
    background: var(--cp-surface-subtle, #f1f5f9);
}

.cp-ba-footer-note {
    font-size: 0.72rem;
    color: var(--cp-text-body, #334155);
    line-height: 1.35;
}

/* ==========================================================================
   5. MODAL DE DETALLE EXTENDIDO DE FUGAS CRÓNICAS (TOP 5 BREAKDOWN)
   ========================================================================== */
.cp-ba-detail-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    display: none; /* OCULTO POR DEFECTO */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.cp-ba-detail-backdrop.open {
    display: flex; /* VISIBLE SOLO AL ABRIR */
}

.cp-ba-detail-modal {
    position: relative;
    width: 1260px;
    max-width: 96vw;
    max-height: 88vh;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--cp-border, #e2e8f0);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    animation: baModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes baModalPop {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cp-ba-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #ffffff;
}

.cp-ba-detail-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-ba-detail-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-ba-detail-rank-pill {
    background: var(--cp-red-bg, #fef2f2);
    color: var(--cp-red-text, #b91c1c);
    border: 1px solid var(--cp-red-border, #fecaca);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
}

.cp-ba-detail-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cp-text-main, #0f172a);
    margin: 0;
}

.cp-ba-detail-area-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--cp-surface-subtle, #f1f5f9);
    border: 1px solid var(--cp-border, #e2e8f0);
    color: var(--cp-text-body, #334155);
    font-weight: 600;
}

.cp-ba-detail-sub {
    font-size: 0.8rem;
    color: var(--cp-text-muted, #64748b);
    margin: 0;
}

/* Barra de Pestañas / Navegación del Top 5 Nodos */
.cp-ba-detail-nav {
    display: flex;
    gap: 6px;
    padding: 8px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
    overflow-x: auto;
}

.cp-ba-tab-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: var(--cp-text-body, #334155);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.cp-ba-tab-btn span {
    background: rgba(0, 0, 0, 0.07);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.7rem;
}

.cp-ba-tab-btn:hover {
    border-color: var(--cp-primary, #0284c7);
    color: var(--cp-primary, #0284c7);
}

.cp-ba-tab-btn.active {
    background: var(--cp-primary, #0284c7);
    color: #ffffff;
    border-color: var(--cp-primary, #0284c7);
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}

.cp-ba-tab-btn.active span {
    background: rgba(255, 255, 255, 0.25);
}

/* Stat Cards Superiores del Modal (3 Columnas Limpias) */
.cp-ba-detail-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
    background: #ffffff;
}

.cp-ba-detail-kpi-card {
    background: #f8fafc;
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-ba-detail-kpi-card .kpi-label {
    font-size: 0.65rem;
    color: var(--cp-text-muted, #64748b);
    font-weight: 700;
    text-transform: uppercase;
}

.cp-ba-detail-kpi-card .kpi-value {
    font-size: 1.05rem;
    font-weight: 800;
}

.cp-ba-detail-kpi-card .kpi-value.text-red { color: var(--cp-red-text, #b91c1c); }
.cp-ba-detail-kpi-card .kpi-value.text-amber { color: #d97706; }
.cp-ba-detail-kpi-card .kpi-value.ot-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cp-text-main, #0f172a);
}

.cp-ba-detail-kpi-card .kpi-sub {
    font-size: 0.68rem;
    color: var(--cp-text-muted, #64748b);
}

/* Contenido Principal & Tabla */
.cp-ba-detail-content {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.cp-ba-detail-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cp-ba-detail-section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cp-text-main, #0f172a);
    margin: 0;
}

.cp-ba-detail-window-indicator {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--cp-primary-bg, #f0f9ff);
    color: var(--cp-primary, #0284c7);
    border: 1px solid var(--cp-primary-border, #bae6fd);
}

.cp-ba-detail-table-wrap {
    border: 1px solid var(--cp-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.cp-ba-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    text-align: left;
}

.cp-ba-detail-table th {
    background: #f1f5f9;
    padding: 9px 12px;
    font-weight: 700;
    color: #475569;
    border-bottom: 1px solid var(--cp-border, #e2e8f0);
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.cp-ba-detail-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.cp-ba-detail-table tbody tr:hover {
    background: #f8fafc;
}

.cp-ba-detail-item-rank {
    font-weight: 800;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e2e8f0;
    color: #334155;
}

.cp-ba-detail-item-rank.rank-1 {
    background: var(--cp-red-bg, #fef2f2);
    color: var(--cp-red-text, #b91c1c);
    border: 1px solid var(--cp-red-border, #fecaca);
}

.cp-ba-item-name {
    font-weight: 700;
    color: var(--cp-text-main, #0f172a);
}

.cp-ba-item-type {
    font-size: 0.70rem;
    color: var(--cp-text-muted, #64748b);
}

.cp-ba-event-badge {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.72rem;
    white-space: nowrap;
}

.cp-ba-hours-val {
    font-weight: 700;
    color: var(--cp-red-text, #b91c1c);
}

.cp-ba-tons-val {
    font-weight: 700;
    color: var(--cp-red-text, #b91c1c);
}

.cp-ba-item-desc {
    color: #334155;
    line-height: 1.35;
    font-size: 0.75rem;
}

.cp-ba-item-ot {
    font-weight: 600;
    color: var(--cp-primary, #0284c7);
    font-size: 0.72rem;
}

.cp-ba-item-resp {
    font-size: 0.68rem;
    color: var(--cp-text-muted, #64748b);
}

/* Listado de Top 3 Fallas Más Repetitivas (Bad Actors Modal) */
.cp-ba-failure-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-ba-failure-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--cp-text-main, #0f172a);
}

.cp-ba-failure-bullet {
    color: var(--cp-primary, #0284c7);
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.cp-ba-failure-badge {
    font-family: var(--cp-font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 800;
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.cp-ba-failure-content {
    flex: 1;
}

.cp-ba-failure-title {
    font-weight: 700;
    color: var(--cp-text-main, #0f172a);
}

.cp-ba-failure-metric {
    color: var(--cp-text-muted, #64748b);
}

.cp-ba-failure-num {
    font-weight: 700;
    color: #b91c1c;
}

/* Pie del Modal de Detalle */
.cp-ba-detail-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--cp-border, #e2e8f0);
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cp-ba-detail-footer-note {
    font-size: 0.72rem;
    color: var(--cp-text-muted, #64748b);
}

.cp-ba-detail-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-btn-detail-focus {
    background: var(--cp-primary, #0284c7);
    color: #ffffff;
    border: 1px solid var(--cp-primary, #0284c7);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    transition: all 0.15s ease;
}

.cp-btn-detail-focus:hover {
    background: #0369a1;
    border-color: #0369a1;
}