/* ═══════════════════════════════════════════════════════════════
   DASHBOARD original (charts)
═══════════════════════════════════════════════════════════════ */
.dashboard-wrapper { padding: 1rem; }

.kpi-card { border-radius: 16px; padding: 1.25rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; box-shadow:0 2px 12px rgba(0,0,0,.08); transition:transform .18s ease,box-shadow .18s ease; }
.kpi-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.13); }
.kpi-icon  { font-size:1.6rem; opacity:.85; }
.kpi-value { font-size:2rem; font-weight:700; line-height:1; }
.kpi-label { font-size:.75rem; opacity:.75; text-transform:uppercase; letter-spacing:.05em; }
.kpi-total   { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.kpi-entrada { background:linear-gradient(135deg,#00C9A7,#00866e); color:#fff; }
.kpi-salida  { background:linear-gradient(135deg,#FF6B6B,#c0392b); color:#fff; }
.kpi-merma   { background:linear-gradient(135deg,#FFD93D,#e6a817); color:#333; }

.chart-card { background:#fff; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.07); overflow:hidden; display:flex; flex-direction:column; }
.chart-card-header { padding:.75rem 1rem; font-size:.85rem; font-weight:600; border-bottom:1px solid #f0f0f0; background:#fafafa; }
.chart-card-body   { padding:.75rem 1rem; position:relative; flex:1; }
.chart-card-body canvas { width:100% !important; height:100% !important; }

/* ═══════════════════════════════════════════════════════════════
   KPI SMART DASHBOARD — nuevo
═══════════════════════════════════════════════════════════════ */
.kpi-page { padding: .75rem; font-size: .875rem; }

/* Sección con título separador */
.kpi-section-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    margin-top: .25rem;
}
.kpi-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e9ecef;
}

/* Tarjeta KPI operativo */
.kpi-op-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem .9rem .8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    border-top: 3px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-op-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.kpi-op-card.entrada { border-top-color: #00C9A7; }
.kpi-op-card.salida  { border-top-color: #FF6B6B; }
.kpi-op-card.merma   { border-top-color: #FFD93D; }
.kpi-op-card.prod    { border-top-color: #764ba2; }

.kpi-op-icon    { font-size: 1.1rem; opacity: .7; }
.kpi-op-value   { font-size: 2.2rem; font-weight: 800; line-height: 1; color: #1a1a2e; }
.kpi-op-label   { font-size: .72rem; color: #6c757d; font-weight: 500; }
.kpi-op-delta   { font-size: .72rem; font-weight: 600; margin-top: .1rem; display: flex; align-items: center; gap: .25rem; }
.delta-up       { color: #00C9A7; }
.delta-down     { color: #FF6B6B; }
.delta-eq       { color: #adb5bd; }

/* Tarjeta KPI de control/alerta */
.kpi-alert-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem .9rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: .85rem;
}
.kpi-alert-bullet {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.kpi-alert-card.danger  .kpi-alert-bullet { background: #fff0f0; color: #e74c3c; }
.kpi-alert-card.warning .kpi-alert-bullet { background: #fffbeb; color: #e67e22; }
.kpi-alert-card.info    .kpi-alert-bullet { background: #f0f8ff; color: #3498db; }
.kpi-alert-card.ok      .kpi-alert-bullet { background: #f0fdf4; color: #27ae60; }
.kpi-alert-num   { font-size: 1.8rem; font-weight: 800; color: #1a1a2e; line-height: 1; }
.kpi-alert-label { font-size: .72rem; color: #6c757d; font-weight: 500; }
.kpi-alert-sub   { font-size: .68rem; color: #adb5bd; }

/* Tarjeta KPI de rendimiento */
.kpi-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1rem .9rem;
    box-shadow: 0 4px 15px rgba(102,126,234,.35);
}
.kpi-stat-card.green { background: linear-gradient(135deg, #00C9A7 0%, #009b7d 100%); box-shadow: 0 4px 15px rgba(0,201,167,.3); }
.kpi-stat-num   { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.kpi-stat-label { font-size: .72rem; opacity: .85; font-weight: 500; }
.kpi-stat-sub   { font-size: .68rem; opacity: .7; }

/* Chart cards del KPI dashboard */
.kpi-chart-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    overflow: hidden;
}
.kpi-chart-header {
    padding: .65rem .9rem;
    font-size: .8rem;
    font-weight: 700;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kpi-chart-header .badge-window {
    font-size: .65rem;
    background: #f0f0f0;
    color: #6c757d;
    padding: .2rem .5rem;
    border-radius: 20px;
    font-weight: 500;
}
.kpi-chart-body {
    padding: .75rem;
    position: relative;
}
.kpi-chart-body canvas { width: 100% !important; height: 100% !important; }

.kpi-empty-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: .5rem;
    color: #6c757d;
    font-size: .8rem;
    padding: 1.5rem;
}
.kpi-empty-chart i { font-size: 2rem; }

/* Refresh button area */
.kpi-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.kpi-updated { font-size: .72rem; color: #adb5bd; }