/* ==========================================================================
 * dashstart.css — Dashboard zone 2, «El start» (dashstart.js).
 * The tile, strip, header and rail are the catalog defaults (bbui.css `pm-*`,
 * `tb-sec-head`, bbbar.css `bbb-goal`); this file only places them and adds the
 * one thing the rail lacked: a mark that is NOT the goal (the cycle's elapsed
 * time on the Inversión tile). Tokens only (`--bb-*`), mono via `--bb-mono`.
 * ========================================================================== */

.ds-zone {
  margin: 0 0 16px;
  background: var(--bb-surface, #fff);
  border-radius: var(--bb-r-card, 10px);
  box-shadow: var(--bb-sh-card, 0 0 0 1px #E6E1D8);
  overflow: hidden;
}
.ds-zone[hidden] { display: none; }

.ds-zone .ds-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 0; border-radius: 0;
}
@media (max-width: 900px) { .ds-zone .ds-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The tiles are doors to Budgets & Goals, so they are buttons. index.html styles the
   BARE `button` element (padding, navy fill, radius) — every property that rule sets is
   declared back here, or the tile comes out as a navy pill. */
.ds-strip .ds-tile {
  appearance: none; -webkit-appearance: none;
  margin: 0; width: auto; height: auto; min-height: 0;
  box-shadow: none; transform: none;
  font: inherit; text-align: left; color: inherit;
  cursor: pointer;
  gap: 0; align-items: stretch; justify-content: flex-start;
  padding: 13px 15px 12px;
  transition: background-color .18s var(--bb-ease, ease);
}
.ds-strip .ds-tile:hover { background: var(--bb-field, #F5F3EE); transform: none; box-shadow: none; }
.ds-strip .ds-tile:focus-visible { outline: 2px solid var(--bb-accent, #0D2A5E); outline-offset: -2px; }

.ds-tile .pm-tv { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-tile.pm-tile-big .pm-tv { font-size: 24px; }
.ds-of { font-size: .62em; font-weight: 500; color: var(--bb-ink-3, #8A8578); letter-spacing: 0; }
.ds-dim { opacity: .5; }

/* The rail sits between the number and the sub-line (order 2 → 3 in the pm-tile flex). */
.ds-rail { order: 2; display: block; margin: 10px 0 2px; }
.ds-rail .bbb-goal { display: block; height: 8px; }
.ds-rail-none { height: 8px; margin: 10px 0 2px; }
/* A mark that is time, not the goal: same 2px cut, placed at --t percent. */
.ds-rail .bbb-goal.ds-time::after { left: calc(1% * var(--t)); }

.ds-tile .pm-ts { order: 3; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-n { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
.ds-tile .pm-ts b { font-weight: 600; color: var(--bb-ink-2, #4A4740); }
.ds-tile .pm-ts b.ds-t-good { color: var(--bb-green, #2E7D52); }
.ds-tile .pm-ts b.ds-t-warn { color: var(--bb-orange, #C77D1B); }
.ds-tile .pm-ts b.ds-t-bad  { color: var(--bb-red, #B23B3B); }
.ds-x { margin-left: 4px; color: var(--bb-ink-3, #8A8578); }