@media screen {
  #dashboard .dashboard-filters {
    position: sticky;
    top: calc(var(--shell-header-height, 88px) + 8px);
    z-index: 12;
  }

  #dashboard .production-board-filters {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  }

  #dashboard .production-board-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
  }

  #dashboard .board-kpi,
  #dashboard .board-card {
    border: 1px solid #dfe9e3;
    background: #fff;
    box-shadow: 0 8px 22px rgba(24, 55, 38, .055);
  }

  #dashboard .board-kpi {
    min-height: 112px;
    padding: 16px;
    border-radius: 14px;
    border-top: 4px solid #14895b;
  }

  #dashboard .board-kpi.warning { border-top-color: #d79617; }
  #dashboard .board-kpi.danger { border-top-color: #cf4545; }
  #dashboard .board-kpi span,
  #dashboard .board-kpi em { display: block; color: #6a7d72; font-size: 11px; font-style: normal; }
  #dashboard .board-kpi span { font-weight: 750; text-transform: uppercase; letter-spacing: .035em; }
  #dashboard .board-kpi strong { display: block; margin: 7px 0 5px; color: #153f2d; font-size: clamp(22px, 2vw, 31px); line-height: 1; }

  #dashboard .production-board-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
  }

  #dashboard .production-board-grid.two { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); }
  #dashboard .production-board-grid.two + .production-board-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard .board-card { min-width: 0; margin-bottom: 14px; padding: 18px; border-radius: 16px; }
  #dashboard .production-board-grid .board-card { margin-bottom: 0; }

  #dashboard .board-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
  }

  #dashboard .board-card-head h3 { margin: 0 0 3px; color: #193f2e; font-size: 17px; }
  #dashboard .board-card-head p { margin: 0; color: #718177; font-size: 12px; }
  #dashboard .board-card-head > span { flex: 0 0 auto; color: #587164; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
  #dashboard .board-data-chip,
  #dashboard .board-live-dot { padding: 5px 8px; border-radius: 999px; background: #edf7f1; color: #16744d !important; }
  #dashboard .board-live-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #19a468; box-shadow: 0 0 0 3px rgba(25, 164, 104, .12); }

  #dashboard .operator-heatmap { display: grid; gap: 8px; }
  #dashboard .operator-heatmap-head,
  #dashboard .operator-heatmap-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.35fr) repeat(4, minmax(82px, .72fr));
    gap: 7px;
    align-items: stretch;
  }
  #dashboard .operator-heatmap-head span { padding: 0 8px 4px; color: #738378; font-size: 10px; font-weight: 750; text-transform: uppercase; }
  #dashboard .operator-heatmap-row button,
  #dashboard .operator-heatmap-cell { min-width: 0; min-height: 49px; padding: 9px; border: 0; border-radius: 9px; text-align: left; }
  #dashboard .operator-heatmap-row button { color: #173e2d; background: #f3f7f5; font-weight: 760; cursor: pointer; }
  #dashboard .operator-heatmap-row button:hover,
  #dashboard .operator-heatmap-row button.active { outline: 2px solid #14895b; outline-offset: 1px; }
  #dashboard .operator-heatmap-cell { display: flex; flex-direction: column; justify-content: center; color: #254637; background: #eaf7ef; }
  #dashboard .operator-heatmap-cell.mid { background: #fff1c9; }
  #dashboard .operator-heatmap-cell.high { background: #ffe2df; color: #7b2929; }
  #dashboard .operator-heatmap-cell strong { font-size: 14px; }
  #dashboard .operator-heatmap-cell small { margin-top: 2px; color: inherit; opacity: .72; }

  #dashboard .board-narrative { margin: 0; padding: 15px; border-left: 4px solid #168b5c; border-radius: 10px; background: #f1f8f4; color: #27483a; font-size: 14px; line-height: 1.55; }
  #dashboard .board-data-quality { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
  #dashboard .board-data-quality div { padding: 10px; border-radius: 9px; background: #f7f9f8; }
  #dashboard .board-data-quality span,
  #dashboard .board-data-quality strong { display: block; }
  #dashboard .board-data-quality span { color: #738378; font-size: 10px; text-transform: uppercase; }
  #dashboard .board-data-quality strong { margin-top: 3px; color: #294a3b; font-size: 13px; }

  #dashboard .transit-scatter {
    position: relative;
    min-height: 265px;
    margin: 8px 6px 24px 36px;
    border-bottom: 1px solid #b9cac0;
    border-left: 1px solid #b9cac0;
    background: repeating-linear-gradient(to top, transparent 0, transparent 52px, #eaf0ec 53px), repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), #eef3f0 25%);
  }
  #dashboard .transit-scatter::before { content: "Minutos"; position: absolute; top: -15px; left: -38px; color: #718177; font-size: 10px; }
  #dashboard .transit-scatter::after { content: "Hora del día →"; position: absolute; right: 0; bottom: -22px; color: #718177; font-size: 10px; }
  #dashboard .scatter-point { position: absolute; width: 12px; height: 12px; margin: -6px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #168b5c; box-shadow: 0 2px 8px rgba(22, 95, 63, .35); cursor: pointer; }
  #dashboard .scatter-point.warning { background: #d49116; }
  #dashboard .scatter-point.danger { background: #ce4242; }
  #dashboard .scatter-empty { display: grid; min-height: 265px; place-items: center; color: #718177; text-align: center; }

  #dashboard .board-waterfall { display: grid; gap: 10px; }
  #dashboard .waterfall-stage { display: grid; grid-template-columns: 135px minmax(0, 1fr) 76px; gap: 9px; align-items: center; }
  #dashboard .waterfall-stage > span { color: #526b5e; font-size: 12px; }
  #dashboard .waterfall-track { height: 27px; overflow: hidden; border-radius: 7px; background: #eff4f1; }
  #dashboard .waterfall-track i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #158858, #58b887); }
  #dashboard .waterfall-stage:nth-child(3n) .waterfall-track i { background: linear-gradient(90deg, #d99c25, #efc468); }
  #dashboard .waterfall-stage strong { color: #254536; font-size: 12px; text-align: right; }
  #dashboard .waterfall-stage.unavailable { opacity: .58; }

  #dashboard .line-multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 11px; }
  #dashboard .line-multiple { padding: 14px; border: 1px solid #e1e9e4; border-radius: 12px; background: #f9fbfa; }
  #dashboard .line-multiple h4 { margin: 0 0 11px; color: #214735; font-size: 14px; }
  #dashboard .line-multiple dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; margin: 0; }
  #dashboard .line-multiple dt { color: #6d8075; font-size: 11px; }
  #dashboard .line-multiple dd { margin: 0; color: #244635; font-size: 12px; font-weight: 750; }
  #dashboard .line-performance-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #e7eeea; }
  #dashboard .line-performance-track i { display: block; height: 100%; border-radius: inherit; background: #168b5c; }

  #dashboard .board-exceptions-table td { vertical-align: middle; }
  #dashboard .board-priority { display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #7a4c05; background: #fff0c8; font-size: 10px; font-weight: 800; text-transform: uppercase; }
  #dashboard .board-priority.critical { color: #982e2e; background: #ffe1df; }
  #dashboard .board-open-transfer { border: 1px solid #cfe0d6; border-radius: 8px; padding: 7px 10px; color: #14764d; background: #fff; font-weight: 750; cursor: pointer; }

  @media (max-width: 1250px) {
    #dashboard .production-board-kpis { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    #dashboard .production-board-grid.two,
    #dashboard .production-board-grid.two + .production-board-grid.two { grid-template-columns: 1fr; }
  }

  @media (max-width: 760px) {
    #dashboard .dashboard-filters { position: static; }
    #dashboard .production-board-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #dashboard .operator-heatmap { overflow-x: auto; }
    #dashboard .operator-heatmap-head,
    #dashboard .operator-heatmap-row { min-width: 650px; }
    #dashboard .board-card { padding: 14px; }
  }

  @media (max-width: 460px) {
    #dashboard .production-board-kpis { grid-template-columns: 1fr; }
  }
}