/* Cielo tokens (docs/design): crema background, papel cards, selva ink,
   musgo for passing, the weather ramp's last step for failures, sol accent. */
:root {
  --crema: #FBF7EF;
  --papel: #FFFFFF;
  --selva: #173B33;
  --musgo: #5F8D6E;
  --sol: #F4B860;
  --falla: #C9544A;
  --linea: #E9E1D2;
  --tenue: #5C6F68;
  --musgo-bg: #E7F0E9;
  --falla-bg: #F8E4E1;
  --sol-bg: #FCEFD9;
  --gris-bg: #EFEBE3;
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--selva);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--crema); font-size: 15px; line-height: 1.45; }
a { color: var(--selva); text-decoration-color: var(--musgo); text-underline-offset: 3px; }
h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 10px; }
p { margin: 4px 0; }
code { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 12.5px; color: var(--tenue); }
.num, .small.num, td.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--tenue); }
.small { font-size: 13px; }
.strong { font-weight: 600; }

.top { display: flex; align-items: center; gap: 24px; padding: 14px 28px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 36px; height: 36px; border-radius: 12px; background: var(--selva); color: var(--sol); display: grid; place-items: center; font-weight: 700; }
.brand-title { display: block; font-weight: 700; }
.brand-sub { display: block; font-size: 12px; color: var(--tenue); }
.top nav { flex: 1; }
.top nav a { font-weight: 600; text-decoration: none; }
.logout { margin: 0; }

main { max-width: 1240px; margin: 0 auto; padding: 24px 28px 64px; }
.page-head { margin: 4px 0 18px; }
.back { display: inline-block; margin-bottom: 10px; font-size: 14px; text-decoration: none; color: var(--tenue); }

.card { background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; padding: 18px; margin-bottom: 16px; }
.card.scroll { overflow-x: auto; padding: 0; }
.card:has(> table.runs) { padding: 0; overflow: hidden; }
.empty { text-align: center; padding: 36px 18px; }
.empty .btn { margin-top: 12px; }

.btn { display: inline-block; border: 1px solid var(--linea); background: var(--papel); color: var(--selva); border-radius: 16px; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--selva); border-color: var(--selva); color: var(--crema); }
.btn.ghost { border-color: transparent; color: var(--tenue); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-filter { padding: 6px 14px; border-radius: 16px; background: var(--papel); border: 1px solid var(--linea); text-decoration: none; font-weight: 600; font-size: 14px; }
.chip-filter.active { background: var(--selva); color: var(--crema); border-color: var(--selva); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--tenue); padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: bottom; }
td { padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
td.chips { display: table-cell; }
td.chips > * { margin: 0 6px 6px 0; }
.device { display: inline-block; padding: 3px 10px; border-radius: 16px; background: var(--gris-bg); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.device.ios { background: #E6EEF0; }
.branch { font-weight: 600; }

.status { display: inline-block; padding: 3px 10px; border-radius: 16px; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.status.passed { background: var(--musgo-bg); color: #3D6B4C; }
.status.failed { background: var(--falla); color: #FFF; }
.status.review { background: var(--sol-bg); color: #8A5A12; }
.status.skipped, .status.interrupted { background: var(--gris-bg); color: var(--tenue); }
.counts .pass { color: #3D6B4C; }
.counts .fail { color: var(--falla); font-weight: 600; }
.counts .review { color: #8A5A12; }

.grid td.scenario { min-width: 280px; max-width: 440px; }
.grid td.cell { text-align: center; vertical-align: middle; }
.grid th { text-align: center; }
.grid th:first-child { text-align: left; }
.dot-empty { color: var(--linea); font-size: 22px; }

.usage-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.bar { height: 10px; border-radius: 16px; background: var(--gris-bg); overflow: hidden; margin-bottom: 8px; }
.bar span { display: block; height: 100%; background: var(--sol); }

.timeline, .steps { list-style: none; margin: 0; padding: 0; }
.day { margin-bottom: 22px; }
.sim-date { font-size: 22px; margin: 0 0 10px; padding-left: 14px; border-left: 4px solid var(--sol); }
.step { padding: 14px 18px; margin-bottom: 10px; border-radius: 16px; }
.step.failed { border-color: var(--falla); box-shadow: 0 6px 20px rgba(201, 84, 74, 0.12); }
.step-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.kind { font-size: 12.5px; color: var(--musgo); font-weight: 600; }
.wall { margin-left: auto; }
pre.error { white-space: pre-wrap; background: var(--falla-bg); color: #7A2A22; border-radius: 16px; padding: 10px 14px; margin: 10px 0 0; font-size: 13px; }
.checks { margin-top: 10px; font-size: 14px; }
.checks th, .checks td { padding: 7px 10px; }
.checks tr.failed td { background: var(--falla-bg); }
.files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.shot { max-height: 420px; max-width: 220px; border-radius: 16px; border: 1px solid var(--linea); }
.file { padding: 6px 12px; border-radius: 16px; background: var(--gris-bg); font-size: 13px; text-decoration: none; }

.notice { background: var(--sol-bg); border-radius: 16px; padding: 10px 14px; margin: 0 0 14px; }
.notice.bad { background: var(--falla-bg); color: #7A2A22; }

.login { max-width: 420px; margin: 60px auto; padding: 28px; border-radius: 20px; }
.login form { display: grid; gap: 10px; margin-top: 16px; }
.login label { font-weight: 600; font-size: 14px; }
.login input[type=password] { font: inherit; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--crema); color: var(--selva); }
.login input[type=password]:focus { outline: 2px solid var(--musgo); outline-offset: 1px; }

@media (max-width: 720px) {
  .top { padding: 12px 16px; gap: 14px; }
  main { padding: 18px 14px 48px; }
  .wall { margin-left: 0; width: 100%; }
}