/* ============================================================
   dashboard-c.css — Rediseño "versión C" del Panel de Control
   ------------------------------------------------------------
   Estilos del layout moderno (2026-08-12): cabecera con acciones,
   chips de filtro, grid gráfico+KPIs+donut y actividad reciente
   en lista de 1 línea por documento.
   Fichero PROPIO cargado el último en index.html: no pisa
   dashboard.css / dashboard-modern.css (usados por otras páginas)
   y el rollback es quitar el <link>.
   Prefijo de clases: dc- (dashboard C).
   ============================================================ */

/* ───── Cabecera: bienvenida + acciones ───── */
/* El fichero solo lo carga index.html → este override de padding
   superior no afecta al resto de páginas. */
.main-content {
    padding-top: 3px;
}

.dc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px 24px;
    margin-bottom: 14px;
}

.dc-welcome {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3e50;
    letter-spacing: -0.2px;
}

.dc-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dc-btn i { font-size: 0.8rem; }

/* Acciones equivalentes entre sí: mismo peso visual para las tres,
   con el sólido morado original de la casa (btn-create-invoice).
   (Se probó una variante pastel y el fundador la descartó, 2026-08-12.) */
.dc-btn-soft {
    color: #fff;
    border: none;
    background: linear-gradient(135deg, #5e17eb, #4f13c9);
}

.dc-btn-soft:hover {
    background: linear-gradient(135deg, #4f13c9, #4010a3);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(94, 23, 235, 0.3);
}

/* ───── Sección contenedora "Resumen de Actividad" ─────
   Marco único para cabecera+filtros, gráfico y los 4 KPIs, con el mismo
   formato de cabecera que Actividad Reciente. El padding lateral de 24px
   alinea los chips a la derecha con el borde de los botones de acción. */
.dc-summary {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 16px;
}

.dc-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 24px;
}

.dc-summary-body {
    padding: 16px 24px 20px;
    background: #fafbfd;
    border-radius: 0 0 12px 12px;
}

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

.dc-chip {
    font-size: 0.8rem;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid #d6dbe0;
    background: #fff;
    color: #5f6b76;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dc-chip:hover:not(.active) {
    border-color: #3498db;
    color: #3498db;
    background: rgba(52, 152, 219, 0.06);
}

.dc-chip.active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

/* ───── Grid principal: gráfico + KPIs + donut ───── */
.dc-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr 1fr;
    grid-auto-rows: minmax(0, auto);
    gap: 14px;
    margin-bottom: 0;
}

.dc-grid .card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.dc-chart-card {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}

.dc-chart-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px;
}

.dc-chart-container {
    position: relative;
    flex: 1;
    min-height: 250px;
}

/* KPI compacto */
.dc-kpi {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    background: #fff;
}

.dc-kpi[role="button"] { cursor: pointer; }

.dc-kpi[role="button"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #3498db;
}

.dc-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dc-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7f8c8d;
}

.dc-kpi-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Paleta unificada del dashboard: Enviados #3498db · Recibidos #27ae60 (luminancia ~equivalente al azul; #2ecc71 brillaba de más)
   · Errores #e74c3c — mismos tonos en barras, donut, leyenda y KPIs */
.dc-ico-blue   { background: rgba(52, 152, 219, 0.12); color: #3498db; }
.dc-ico-red    { background: rgba(231, 76, 60, 0.12);  color: #e74c3c; }
.dc-ico-green  { background: rgba(39, 174, 96, 0.12); color: #27ae60; }

.dc-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin: 6px 0 2px;
}

.dc-kpi-sub {
    font-size: 0.75rem;
    color: #95a5a6;
}

/* Donut de distribución */
.dc-donut-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.dc-donut-canvas {
    position: relative;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
}

.dc-donut-legend {
    font-size: 0.75rem;
    color: #5f6b76;
    line-height: 1.8;
}

.dc-donut-legend .dc-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: baseline;
}

/* ───── Actividad reciente: 1 documento = 1 línea ───── */
.dc-activity {
    border: 1px solid #e9ecef;
    border-radius: 12px;
}

.dc-act-row {
    display: grid;
    /* nº de documento con margen generoso (320px, puede ser largo) y el
       cliente ocupa el espacio restante, alineado a la izquierda */
    grid-template-columns: 90px minmax(180px, 320px) minmax(0, 1fr) 92px 110px 112px;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.85rem;
}

.dc-act-row:last-child { border-bottom: none; }

.dc-act-row:hover { background: #f8fafc; }

.dc-act-type {
    font-size: 0.72rem;
    font-weight: 600;
    color: #5f6b76;
    background: #f1f3f5;
    border-radius: 4px;
    padding: 3px 8px;
    text-align: center;
    white-space: nowrap;
}

.dc-act-number {
    font-weight: 600;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-act-client {
    color: #5f6b76;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-act-date {
    color: #7f8c8d;
    font-size: 0.8rem;
    white-space: nowrap;
}

.dc-act-amount {
    text-align: right;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.dc-act-badge { text-align: right; }

/* ───── Responsive ───── */
@media (max-width: 992px) {
    .dc-grid { grid-template-columns: 1fr 1fr; }
    .dc-chart-card { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 768px) {
    .dc-header { flex-direction: column; align-items: flex-start; }
    .dc-grid { grid-template-columns: 1fr; }
    .dc-chart-card { grid-column: auto; }
    .dc-act-row {
        grid-template-columns: 80px minmax(0, 1fr) 100px;
    }
    .dc-act-date, .dc-act-amount, .dc-act-client { display: none; }
}

/* ============================================================
   Migrado de dashboard.css (limpieza legacy 2026-08-17)
   ------------------------------------------------------------
   Únicos selectores del legacy que el index nuevo seguía usando
   y que ningún otro CSS cargado cubría (audit de 3 vías en
   TO DO/MEJORA_Frontend_CSS_Dashboard_Legacy.md).
   ============================================================ */

/* Pestañas de Actividad Reciente */
.activity-tabs .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    padding: 0 1rem;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.activity-tabs .nav-link {
    color: #6c757d;
    border: none;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: 0;
}

.activity-tabs .nav-link.active {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    background: transparent;
    font-weight: 600;
}

.activity-tabs .nav-link:hover:not(.active) {
    color: #2c3e50;
    background-color: rgba(0,0,0,0.05);
}

/* Estado vacío de actividad */
.empty-activity {
    opacity: 0.7;
    text-align: center;
    padding: 2rem 1rem;
}

.empty-activity i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6c757d;
}

/* Contenedores de las pestañas y tope del gráfico */
#recent-all, #recent-sent, #recent-received {
    padding: 0;
    margin: 0;
}

#cumulativeChart {
    max-height: 300px;
}