/* ---------- Cascarón ---------- */
#app { min-height: 100vh; display: flex; flex-direction: column; }
.screen { display: none; flex: 1; }
.screen.active { display: block; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(23,45,90,.06);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.brand .mark {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--cargo); color: #fff; font-size: 15px; font-weight: 900;
  box-shadow: 0 4px 10px rgba(255,138,30,.4);
}
.week-chip {
  font-family: var(--font-data); font-size: var(--fs-sm); letter-spacing: .1em; font-weight: 700;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: #fff0df; border: 1px solid #ffd9ad; color: var(--cargo-dim);
}
.topstats {
  display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 0; -webkit-overflow-scrolling: touch;
}
.topstats::-webkit-scrollbar { display: none; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topbar .stat { font-family: var(--font-data); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.topbar .stat b { color: var(--ink); font-weight: 800; }
.topbar .stat span { color: var(--faint); }

/* ---------- Tablero ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-4); padding: var(--sp-4); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
@media (max-width: 1080px) { .board { grid-template-columns: 1fr; } }

/* ---------- Tablero ilustrado de la cadena ---------- */
.map-wrap {
  position: relative;
  background:
    linear-gradient(180deg, #d8ecff 0%, #eaf6ff 46%, #eef7e9 46%, #e4f1d8 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(23,45,90,.05);
}
.map-wrap svg { width: 100%; height: auto; display: block; }
.node-label { fill: var(--ink); font-family: var(--font-ui); font-size: 13px; font-weight: 800; }
.node-stock { fill: var(--ink); font-family: var(--font-data); font-size: 20px; font-weight: 800; }
.node-sub { fill: var(--muted); font-family: var(--font-ui); font-size: 10px; font-weight: 600; }
.node-plat { fill: #ffffff; stroke: var(--line); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.node-plat.warn { stroke: var(--alert); stroke-width: 2.5; }
.node-plat.pulse { animation: nodePulse .48s var(--ease); }
@keyframes nodePulse { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }
.flow-label { fill: var(--muted); font-family: var(--font-data); font-size: 12px; font-weight: 700; }
.road { stroke: #c9d6ea; stroke-width: 8; fill: none; stroke-linecap: round; }
.road-dash { stroke: #ffffff; stroke-width: 2.5; fill: none; stroke-dasharray: 8 12; stroke-linecap: round; }

/* ---------- Decisiones ---------- */
.dec-section + .dec-section { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 2px dashed var(--line); }
.order-item { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-soft); }
.order-item + .order-item { margin-top: var(--sp-2); }
.order-item.accepted { border-color: #a9ecd2; background: #f2fdf8; }
.order-item.rejected { opacity: .55; }
.order-name { font-weight: 800; font-size: var(--fs-sm); }
.order-meta { font-family: var(--font-data); font-size: var(--fs-xs); color: var(--muted); }
.projection { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); }
.projection .p { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: var(--sp-2); }
.projection .p .pl { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.projection .p .pv { font-family: var(--font-data); font-weight: 800; }

.sticky-actions { position: sticky; bottom: 0; padding-top: var(--sp-3); background: linear-gradient(180deg, rgba(255,255,255,0), var(--surface) 45%); }

/* ---------- Menú / configuración ---------- */
.menu { max-width: 1040px; margin: 0 auto; padding: var(--sp-7) var(--sp-4); }
.hero-title { font-size: clamp(38px, 8vw, 76px); line-height: .95; letter-spacing: -.045em; font-weight: 900; color: var(--ink); }
.hero-title .l2 { display: block; color: var(--cargo); }
.hero-sub { max-width: 60ch; color: var(--ink-2); font-size: var(--fs-lg); }
.ticker {
  font-family: var(--font-data); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-2) 0; overflow: hidden; white-space: nowrap;
}
.ticker span { display: inline-block; animation: slide 34s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Reporte de ronda ---------- */
.manifest { font-family: var(--font-data); font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); }
.manifest .ln { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; opacity: 0; animation: print .34s var(--ease) forwards; }
.manifest .ln.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 800; color: var(--ink); }
@keyframes print { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.xp-row { display: flex; align-items: center; gap: var(--sp-3); }
.xp-row .bar { flex: 1; }

/* ---------- Modo profesor ---------- */
.teacher { max-width: 1200px; margin: 0 auto; padding: var(--sp-5) var(--sp-4); }
.rank-1 { color: var(--cargo-dim); font-weight: 800; }

/* ---------- Estado vacío ---------- */
.empty { padding: var(--sp-5); text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); }

/* ---------- Ergonomía móvil ---------- */
.hide-sm { display: inline; }
@media (max-width: 720px) {
  .topbar { gap: 10px; padding: var(--sp-2) var(--sp-3); }
  .hide-sm { display: none !important; }
  .week-chip { padding: 5px 10px; }
  .topbar .stat { font-size: var(--fs-xs); }
  /* El tablero mantiene tamaño legible y se desplaza de lado */
  .map-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map-wrap svg { min-width: 680px; }
  .map-hint { display: block; }
}
.map-hint { display: none; font-size: var(--fs-xs); color: var(--faint); margin-top: 6px; text-align: center; }