/* ══════════════════════════════════════════
   DASHBOARD.CSS — Puerto de Chancay
══════════════════════════════════════════ */

/* ── KPI variantes de color ── */
.kpi-card--blue   { border-left: 4px solid #185FA5; }
.kpi-card--green  { border-left: 4px solid #10B981; }
.kpi-card--orange { border-left: 4px solid #F59E0B; }
.kpi-card--purple { border-left: 4px solid #8B5CF6; }

.kpi-icon.kpi-purple {
  background: rgba(139,92,246,0.12);
  color: #8B5CF6;
}

/* ── Trend badge bajo el número ── */
.kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}
.kpi-trend--up      { color: #10B981; }
.kpi-trend--down    { color: #EF4444; }
.kpi-trend--neutral { color: #94A3B8; }

/* ── Badge "En vivo" ── */
.dash-badge-live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(16,185,129,0.10);
  color: #065F46;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(16,185,129,0.25);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:.3; }
}

/* ── Grids ── */
.dash-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.dash-col-2 { grid-column: span 2; }

/* ── Área de barras de avance ── */
.dash-chart-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 8px;
}

.avance-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.avance-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.avance-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-main);
}
.avance-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avance-bar-track {
  flex: 1;
  height: 8px;
  background: var(--gris-fondo);
  border-radius: 99px;
  overflow: hidden;
}
.avance-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0%;
}
.avance-pct {
  min-width: 36px;
  font-size: 12px;
  text-align: right;
}

/* ── Mini bar en tabla naves ── */
.mini-bar-track {
  flex: 1;
  height: 6px;
  background: var(--gris-fondo);
  border-radius: 99px;
  overflow: hidden;
  min-width: 60px;
}
.mini-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s ease;
}

/* ── Donut ── */
.donut-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 8px;
}
.donut-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.donut-pct {
  font-size: 26px;
  font-weight: 700;
  color: var(--texto-main);
  line-height: 1;
}
.donut-lbl {
  font-size: 11px;
  color: var(--gris-texto);
  margin-top: 2px;
}
.donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding: 8px 16px 4px;
}
.donut-leg-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.donut-leg-dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.donut-leg-lbl { flex: 1; color: var(--gris-texto); }
.donut-leg-val { color: var(--texto-main); }

/* ── Lista de operaciones ── */
.ops-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0;
}
.ops-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--gris-borde);
  transition: background .15s;
}
.ops-item:last-child { border-bottom: none; }
.ops-item:hover { background: var(--gris-fondo); }

.ops-hora {
  font-size: 11px;
  font-weight: 700;
  color: var(--gris-texto);
  min-width: 72px;
  font-variant-numeric: tabular-nums;
}
.ops-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ops-dot--en-curso   { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.ops-dot--pendiente  { background: #F59E0B; }
.ops-dot--programado { background: #3B82F6; }

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

/* ── Badge pequeño ── */
.badge-sm {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .dash-grid-3 { grid-template-columns: 1fr 1fr; }
  .dash-col-2  { grid-column: span 2; }
}
@media (max-width: 768px) {
  .dash-grid-2,
  .dash-grid-3 { grid-template-columns: 1fr; }
  .dash-col-2  { grid-column: span 1; }
}