html, body { margin: 0; background: #141311; }
  #app-root, #app-root *, #app-root *::before, #app-root *::after { box-sizing: border-box; }
  #app-root {
    --bg: #141311; --panel: #1c1b18; --panel-2: #232220; --panel-3: #2b2926;
    --line: #33302b; --line-soft: #262421;
    --cream: #f2efe8; --text: #e8e4da; --muted: #9a958a; --dim: #6f6a61;
    --orange: #f29200; --orange-hi: #ffb43d;
    --good: #7cc47f; --bad: #e0705f;
    --t-E: #6e6a62; --t-D: #8b8377; --t-C: #b08a4a; --t-Bm: #d2913a; --t-Bp: #eda22b; --t-A: #f29200;
    --shadow: rgba(0,0,0,.62); --backdrop: rgba(8,8,7,.72);
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --r: 10px;
    background: var(--bg); color: var(--text); font-family: var(--sans);
    font-size: 14px; line-height: 1.45; min-height: 100vh; padding: 18px;
    overflow-x: clip; -webkit-font-smoothing: antialiased;
  }
  #app-root.light {
    --bg: #ece8df; --panel: #f7f4ed; --panel-2: #fffdf8; --panel-3: #efeade;
    --line: #d9d2c3; --line-soft: #e6e0d4;
    --cream: #1b1a16; --text: #35322b; --muted: #6d685d; --dim: #948d7d;
    --orange: #e08800; --orange-hi: #b97000;
    --good: #3f8d52; --bad: #c2503f;
    --t-E: #8b857a; --t-D: #9d8f74; --t-C: #b1873f; --t-Bm: #cd8a2c; --t-Bp: #e09400; --t-A: #e08800;
    --shadow: rgba(62,54,38,.18); --backdrop: rgba(32,29,24,.5);
  }
  #app-root.light .avatar { background: color-mix(in srgb, var(--c) 20%, #fff); color: color-mix(in srgb, var(--c) 80%, #000); }
  #app-root.light .card, #app-root.light .panel, #app-root.light .col, #app-root.light .leg { box-shadow: 0 1px 2px var(--shadow); }
  #app-root.light .col.tier-A .col-letter { text-shadow: none; }
  #app-root.light .btn.primary, #app-root.light .rung.here,
  #app-root.light .tabs button[aria-selected="true"] { color: #1b1a16; }
  #app-root.light .badge-n { background: #1b1a16; color: #ffb43d; }
  #app-root ::selection { background: var(--orange); color: #16150f; }
  #app-root.light ::selection { color: #1b1a16; }
  #app-root [hidden] { display: none !important; }
  :where(#app-root) button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  :where(#app-root) table, :where(#app-root) th, :where(#app-root) td { color: var(--text); font-family: inherit; font-size: inherit; }
  #app-root input, #app-root select, #app-root textarea { font: inherit; }
  #app-root h1, #app-root h2, #app-root h3, #app-root h4, #app-root p { margin: 0; }
  #app-root :focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 2px; border-radius: 4px; }

  .shell { max-width: 1720px; margin: 0 auto; }
  .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }

  /* cabecera */
  .topbar { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .topline { display: flex; align-items: center; gap: 16px; }
  .topline-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .topline2 { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; min-height: 39px; }
  .brand { display: flex; flex-direction: column; gap: 8px; }
  .logo { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--cream); }
  .logo-mark { width: 15px; height: 15px; border-radius: 50%; background: var(--orange); display: inline-grid; place-items: center; margin: 0 1px; }
  .logo-mark i { width: 5px; height: 5px; border-radius: 50%; background: #16150f; display: block; }
  .brand h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  .brand h1 span { color: var(--dim); font-weight: 400; }

  .tabs { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--panel-2); flex: none; }
  .tabs button { padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 6px; transition: background .15s, color .15s; }
  .tabs button[aria-selected="true"] { background: var(--orange); color: #16150f; font-weight: 700; box-shadow: 0 3px 14px -4px color-mix(in srgb, var(--orange) 80%, transparent); }
  .tabs button:not([aria-selected="true"]):hover { color: var(--text); }

  .kpis, .strip { display: flex; gap: 26px; flex-wrap: wrap; }
  .strip { padding: 14px 0 16px; }
  .kpi { display: flex; flex-direction: column; gap: 2px; }
  .kpi b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--cream); font-variant-numeric: tabular-nums; }
  .kpi b.accent { color: var(--orange); }

  .btn { border: 1px solid var(--line); border-radius: 7px; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
    color: var(--text); background: var(--panel-2); transition: background .15s, border-color .15s, transform .1s; }
  .btn:hover { background: var(--panel-3); border-color: #45413a; }
  .btn:active { transform: translateY(1px); }
  .btn.primary { background: var(--orange); border-color: var(--orange); color: #16150f; }
  .btn.primary:hover { background: var(--orange-hi); border-color: var(--orange-hi); }
  .btn.ghost { background: transparent; }
  .btn.danger:hover { border-color: var(--bad); color: var(--bad); }
  .btn.sm { padding: 5px 10px; font-size: 11.5px; }
  .btn.theme { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; flex: none; }
  .btn.theme svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .badge-n { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: #16150f; color: var(--orange); font-family: var(--mono); font-size: 10px; font-weight: 700; margin-left: 6px; }

  .toolbar { display: flex; align-items: center; gap: 10px; }
  .topline2 .toolbar { padding: 0; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
  .search { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 11px; color: var(--text); }
  .search::placeholder { color: var(--dim); }
  .topline2 .search { flex: 0 1 210px; min-width: 110px; }
  .topline2 .who { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
  .who select { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: 12.5px; }
  .topline2 .who select { max-width: 190px; }
  .lock { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
  .lock svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .topbar-actions { display: flex; gap: 8px; align-items: center; flex: none; }
  .avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono);
    font-size: 9px; font-weight: 700; background: var(--c); color: #16150f; flex: none; }
  .avatar.lg { width: 26px; height: 26px; font-size: 10px; }

  /* tableros */
  .layout { display: flex; gap: 16px; align-items: flex-start; }
  .main { flex: 1; min-width: 0; }
  .scroller { overflow: auto; padding-bottom: 6px; max-height: calc(100dvh - 195px); min-height: 380px;
    overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--dim) var(--line-soft); }
  .scroller::-webkit-scrollbar { height: 11px; width: 11px; }
  .scroller::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 7px; }
  .scroller::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 7px; border: 2px solid var(--bg); }
  .scroller::-webkit-scrollbar-thumb:hover { background: var(--orange); }
  .grid6 { display: grid; grid-template-columns: repeat(6, minmax(196px, 1fr)); gap: 10px; min-width: 1226px; }

  .track { margin-bottom: 12px; }
  .leg { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 12px 10px; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 13%, var(--panel)) 0%, var(--panel) 100%); }
  .leg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: .55;
    background: linear-gradient(90deg, transparent, var(--c) 22%, var(--c) 78%, transparent); }
  .leg-top { display: flex; align-items: center; gap: 8px; }
  .leg-name { font-size: 13px; font-weight: 700; color: var(--cream); letter-spacing: -.01em; overflow-wrap: anywhere; }
  .leg-zone { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--dim); margin-left: auto; }
  .leg-stats { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
  .leg-stat { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
  .leg-stat b { color: var(--text); font-weight: 700; }

  .col { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); display: flex; flex-direction: column;
    min-height: 260px; transition: border-color .15s, background .15s; }
  .col.over { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, var(--panel)); }
  .col-head, .pcol-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--line-soft);
    position: sticky; top: 0; z-index: 3; background-color: var(--panel); }
  .col.over .col-head, .col.over .pcol-head { background-color: color-mix(in srgb, var(--c) 7%, var(--panel)); }
  .col-head-row { display: flex; align-items: baseline; gap: 8px; }
  .col-letter { font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1; color: var(--c); letter-spacing: -.02em; }
  .col.tier-A .col-letter { text-shadow: 0 0 26px color-mix(in srgb, var(--orange) 55%, transparent); }
  .col-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .col-range { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dim); margin-top: 6px; }
  .col-sum { font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 3px; font-variant-numeric: tabular-nums; }
  .col-owner { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11px; color: var(--muted); }
  .col-body { padding: 9px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .col-empty { border: 1px dashed var(--line); border-radius: 8px; padding: 16px 10px; text-align: center; font-size: 11.5px; color: var(--dim); line-height: 1.5; }
  .pcol-name { font-size: 12.5px; font-weight: 700; color: var(--c); letter-spacing: -.01em; }
  .pcol-help { font-size: 10.5px; color: var(--dim); margin-top: 4px; line-height: 1.4; min-height: 28px; }
  .pcol-bar { height: 2px; border-radius: 2px; background: var(--c); opacity: .5; margin-top: 8px; }

  .card, .pcard { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px 11px 8px 15px;
    cursor: grab; position: relative; transition: border-color .14s, transform .14s; }
  .card:hover, .pcard:hover { border-color: #45413a; transform: translateY(-1px); }
  #app-root.light .card:hover, #app-root.light .pcard:hover { border-color: var(--line); }
  .card.dragging, .pcard.dragging { opacity: .4; cursor: grabbing; }
  .card::before, .pcard::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--rc); }
  .card.just-moved { animation: pop .55s ease; }
  @keyframes pop { 0% { box-shadow: inset 0 0 0 1px var(--c); transform: scale(1.02); } 100% { box-shadow: none; transform: scale(1); } }
  .card-top, .pcard-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
  .card-name, .pcard-name { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--cream); overflow-wrap: anywhere; }
  .card-meta, .pcard-meta { font-size: 11px; color: var(--dim); margin-top: 2px; }
  .card-val, .pcard-val { display: flex; align-items: baseline; gap: 5px; margin-top: 7px; }
  .card-val b, .pcard-val b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
  .card-val span, .pcard-val span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--dim); }
  .card-next { margin-top: 6px; font-size: 11px; color: var(--muted); }
  .card-foot, .pcard-foot { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
  .step { width: 24px; height: 22px; border-radius: 5px; display: grid; place-items: center; color: var(--dim); border: 1px solid transparent; }
  .step:hover:not(:disabled) { background: var(--panel-3); color: var(--cream); border-color: var(--line); }
  .step:disabled { opacity: .25; cursor: not-allowed; }
  .step.up:hover:not(:disabled) { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, transparent); }
  .card-hint, .mini { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--dim); }
  .card-hint { margin-left: auto; }
  .card-hint b { color: var(--orange); font-weight: 700; }
  .btn.win { padding: 3px 8px; font-size: 10.5px; border-radius: 5px; margin-left: auto;
    border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); }
  .btn.win:hover { background: color-mix(in srgb, var(--good) 14%, transparent); }
  .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px;
    border-radius: 4px; border: 1px solid var(--line); color: var(--dim); }
  .tag.alerta { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
  .tag.hoy { color: var(--orange-hi); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }

  .alta { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-radius: 9px;
    border: 1px dashed var(--line); background: transparent; transition: border-color .15s, background .15s; }
  .alta:hover { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }
  .alta-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--panel-3); }
  .alta-ico svg { width: 15px; height: 15px; stroke: var(--orange); fill: none; stroke-width: 1.8; stroke-linecap: round; }
  .alta b { display: block; font-size: 12.5px; font-weight: 700; color: var(--cream); }
  .alta span span { display: block; font-size: 10.5px; color: var(--dim); margin-top: 1px; line-height: 1.4; }

  /* panel lateral */
  .rail { width: 312px; flex: none; display: flex; flex-direction: column; gap: 14px; }
  .panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 14px; }
  .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .panel-head h3 { font-size: 12.5px; font-weight: 700; color: var(--cream); letter-spacing: -.01em; }
  .rank { display: flex; flex-direction: column; gap: 3px; }
  .rank-row { display: grid; grid-template-columns: 16px 26px 1fr auto; align-items: center; gap: 9px; padding: 9px 6px; border-radius: 8px; }
  .rank-row:hover { background: var(--panel-2); }
  .rank-pos { font-family: var(--mono); font-size: 10px; color: var(--dim); }
  .rank-row.lead .rank-pos { color: var(--orange); }
  .rank-name { font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
  .rank-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--dim); margin-top: 1px; display: block; }
  .rank-pts { text-align: right; }
  .rank-pts b { font-size: 16px; font-weight: 800; color: var(--cream); font-variant-numeric: tabular-nums; }
  .rank-row.lead .rank-pts b { color: var(--orange); }
  .rank-pts span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: var(--dim); }
  .feed { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; }
  .feed-item { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  .feed-item:last-child { border-bottom: none; }
  .feed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); margin-top: 6px; flex: none; }
  .feed-txt { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
  .feed-txt b { color: var(--text); font-weight: 600; }
  .feed-txt .pts { color: var(--orange); font-weight: 700; font-family: var(--mono); font-size: 10.5px; }
  .feed-time { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: var(--dim); margin-top: 2px; }
  .legend { display: flex; flex-direction: column; gap: 7px; }
  .legend-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
  .legend-row b { color: var(--text); font-weight: 600; }
  .legend-pts { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--orange); }

  /* HOY */
  .hoy-head { padding: 22px 0 6px; }
  .hoy-hola { font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: var(--cream); }
  .hoy-sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
  .hoy-sub b { color: var(--orange); font-weight: 700; }
  .hoy-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
  .hoy-group { margin-top: 22px; }
  .hoy-group > .eyebrow { display: block; margin-bottom: 10px; }
  .task { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: var(--panel);
    border: 1px solid var(--line-soft); border-radius: 11px; transition: border-color .15s, transform .15s; }
  .task:hover { border-color: #45413a; transform: translateY(-1px); }
  #app-root.light .task:hover { border-color: var(--line); }
  .task.urgente { border-left: 3px solid var(--c); }
  .task-ico { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 15%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); }
  .task-ico svg { width: 19px; height: 19px; stroke: var(--c); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .task-b { flex: 1; min-width: 0; }
  .task-b h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--cream); overflow-wrap: anywhere; }
  .task-b p { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
  .task-acts { display: flex; gap: 7px; flex: none; }
  .task-acts .btn { padding: 9px 15px; font-size: 13px; }
  .task-who { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
  .task-who .avatar { width: 17px; height: 17px; font-size: 8px; }
  .task-who span { font-size: 11px; color: var(--dim); }
  .vacio { text-align: center; padding: 48px 20px; max-width: 560px; margin: 0 auto; }
  .vacio h3 { font-size: 19px; font-weight: 700; color: var(--cream); letter-spacing: -.02em; }
  .vacio p { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
  .vacio .btn { margin-top: 18px; }
  .hoy-mini { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); max-width: 900px; }

  /* equipo / admin */
  .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .tbl th { text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dim); font-weight: 400; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
  .tbl td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
  .tbl b { color: var(--cream); font-weight: 700; }
  .tbl .sub { color: var(--dim); font-size: 11px; }
  .pill { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px;
    border-radius: 4px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
  .pill.dir { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
  .pill.off { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
  .niveles { display: flex; gap: 3px; }
  .niv { font-family: var(--mono); font-size: 10px; padding: 2px 5px; border-radius: 4px; background: var(--panel-3); color: var(--dim); }
  .niv.on { background: color-mix(in srgb, var(--orange) 22%, var(--panel-3)); color: var(--orange); font-weight: 700; }
  .chk-list { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
  .chk-list.fila { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; }
  .chk {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.4;
    letter-spacing: normal; text-transform: none; color: var(--text);
    padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2);
    transition: border-color .15s, background .15s;
  }
  .chk:hover { border-color: #45413a; }
  #app-root.light .chk:hover { border-color: var(--line); }
  .chk:has(input:checked) { border-color: color-mix(in srgb, var(--orange) 50%, transparent);
    background: color-mix(in srgb, var(--orange) 9%, var(--panel-2)); }
  .chk > input[type="checkbox"] {
    margin: 1px 0 0; padding: 0; accent-color: var(--orange);
    width: 16px; height: 16px; min-width: 16px; max-width: 16px; flex: 0 0 16px;
    background: none; border: none; border-radius: 0; appearance: auto; -webkit-appearance: checkbox;
  }
  .chk > span { flex: 1; min-width: 0; }
  .chk > span > span {
    display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 400;
    letter-spacing: normal; text-transform: none; color: var(--dim); margin-top: 2px; line-height: 1.45;
  }
  .chk-list.fila .chk { flex: 0 0 auto; padding: 8px 14px 8px 11px; }
  .nivpick { display: flex; gap: 5px; flex-wrap: wrap; }
  .nivpick button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; font-family: var(--mono);
    font-size: 12px; color: var(--muted); background: var(--panel-2); }
  .nivpick button[aria-pressed="true"] { background: color-mix(in srgb, var(--orange) 20%, var(--panel-2));
    border-color: var(--orange); color: var(--orange); font-weight: 700; }

  /* acceso */
  .gate { position: fixed; inset: 0; z-index: 90; background: var(--bg); display: grid; place-items: center; padding: 20px; overflow-y: auto; }
  .gate-box { width: min(400px, 100%); }
  .gate .logo { font-size: 26px; }
  .gate h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--cream); margin-top: 22px; }
  .gate p.sub { font-size: 13px; color: var(--muted); margin-top: 7px; line-height: 1.55; }
  .gate form { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
  .gate .btn { width: 100%; justify-content: center; text-align: center; padding: 11px; font-size: 13.5px; }
  .gate-err { font-size: 12.5px; color: var(--bad); min-height: 18px; }
  .gate-foot { margin-top: 22px; font-size: 11.5px; color: var(--dim); line-height: 1.6; border-top: 1px solid var(--line-soft); padding-top: 16px; }
  .user-chip { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); }
  .user-chip b { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .user-chip .eyebrow { font-size: 9px; }

  /* modal */
  .backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 70; display: grid; place-items: center; padding: 20px; animation: fadeIn .16s ease; }
  @keyframes fadeIn { from { opacity: 0; } }
  .sheet { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
    width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 20px; }
  .sheet.wide { width: min(860px, 100%); }
  .sheet h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--cream); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 16px; }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field.wide { grid-column: 1 / -1; }
  .field > label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  .field > input, .field > select, .field > textarea {
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px;
    padding: 8px 10px; color: var(--text); width: 100%; }
  .field > input[type="checkbox"], .field > input[type="radio"] { width: auto; padding: 0; }
  .field textarea { resize: vertical; min-height: 62px; }
  .field small { font-size: 11px; color: var(--dim); line-height: 1.45; }
  .sheet-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
  .sheet-foot .left { margin-right: auto; }
  .detail-head { display: flex; align-items: flex-start; gap: 12px; }
  .detail-badge { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--c); border: 1px solid var(--line);
    border-radius: 8px; width: 46px; height: 46px; display: grid; place-items: center; flex: none; }
  .detail-rows { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .drow { border-top: 1px solid var(--line-soft); padding-top: 8px; }
  .drow span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); display: block; }
  .drow b { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
  .drow a { color: var(--orange); text-decoration: none; }
  .hist { margin-top: 18px; }
  .hist-item { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }
  .hist-item b { color: var(--text); font-weight: 400; }
  .hist-t { font-family: var(--mono); font-size: 10px; color: var(--dim); min-width: 86px; flex: none; }
  .ladder { display: flex; align-items: center; gap: 3px; margin-top: 14px; }
  .rung { flex: 1; height: 26px; border-radius: 5px; display: grid; place-items: center; font-family: var(--mono);
    font-size: 11px; font-weight: 700; background: var(--panel-2); color: var(--dim); border: 1px solid var(--line-soft); }
  .rung.done { background: color-mix(in srgb, var(--orange) 16%, var(--panel-2)); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
  .rung.here { background: var(--orange); color: #16150f; border-color: var(--orange); }
  .warn { border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: 8px;
    background: color-mix(in srgb, var(--bad) 9%, transparent); padding: 10px 12px; font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; }
  .warn b { color: var(--text); }
  .nota { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); padding: 10px 12px;
    font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-top: 12px; }
  .nota b { color: var(--text); }

  /* avisos */
  .toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
  .toast { background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 8px;
    padding: 10px 14px; min-width: 250px; max-width: 340px; box-shadow: 0 14px 34px -12px var(--shadow); animation: slideIn .25s ease; }
  @keyframes slideIn { from { opacity: 0; transform: translateX(14px); } }
  .toast.out { animation: fadeOut .3s ease forwards; }
  @keyframes fadeOut { to { opacity: 0; transform: translateX(14px); } }
  .toast-title { font-size: 12.5px; font-weight: 700; color: var(--cream); }
  .toast-body { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .toast-body .pts { color: var(--orange); font-weight: 700; }
  .confetti { position: fixed; inset: 0; pointer-events: none; z-index: 85; overflow: hidden; }
  .conf-bit { position: absolute; width: 7px; height: 11px; border-radius: 1px; animation: fall 1.5s ease-in forwards; }
  @keyframes fall { to { transform: translateY(95vh) rotate(540deg); opacity: 0; } }

  .foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

  /* modo simple */
  #app-root.simple .strip, #app-root.simple .col-range, #app-root.simple .card-hint,
  #app-root.simple .leg-stats .leg-stat:nth-child(n+3) { display: none; }
  #app-root.simple .pcard { padding: 13px 14px 11px 16px; }
  #app-root.simple .pcard-name, #app-root.simple .card-name { font-size: 13.5px; }
  #app-root.simple .col-letter { font-size: 26px; }


  /* ---- marcador mensual y MVP ---- */
  .mvp {
    margin-top: 12px; padding: 12px; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--orange) 16%, var(--panel-2)), var(--panel-2));
    display: flex; align-items: center; gap: 11px;
  }
  .mvp-corona { font-size: 20px; line-height: 1; flex: none; }
  .mvp b { display: block; font-size: 13.5px; color: var(--cream); font-weight: 700; letter-spacing: -.01em; }
  .mvp span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
  .mvp .pts { font-size: 17px; font-weight: 800; color: var(--orange); margin-left: auto; font-variant-numeric: tabular-nums; }
  .rank-delta { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
  .tag-origen { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
    padding: 2px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--dim); }

  @media (max-width: 1599px) {
    .layout { flex-direction: column; align-items: stretch; }
    .layout .main { width: 100%; min-width: 0; }
    .layout .rail { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .layout .rail .panel { flex: 1; min-width: 280px; }
  }
  @media (max-width: 900px) {
    .topline2 { flex-wrap: wrap; align-items: stretch; min-height: 0; }
    .topline2 .toolbar { flex-wrap: wrap; }
    .topline2 .search { flex: 1 1 100%; }
    .form-grid, .detail-rows { grid-template-columns: 1fr; }
    .task { flex-wrap: wrap; }
    .task-acts { width: 100%; }
    .task-acts .btn { flex: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    #app-root *, #app-root *::before, #app-root *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }