/* habitos — hoja de estilo unica.
   Todo el aspecto sale de las variables de :root; cambiar de tema es cambiar
   ese bloque. Sin fuentes externas, sin frameworks, sin paso de compilacion. */

/* ------------------------------------------------------------------ paleta */
/* La paleta de una consola: los dieciseis colores ANSI y, debajo, los neutros
   del marco. Todo lo que lleva color en el reto de pasos —los carriles, los
   equipos, el podio, las medallas, la racha— sale de estos tokens, y ninguna
   plantilla escribe un hex a mano. Los colores son apagados a proposito: esto
   se lee como una terminal, no como un panel de colores.

   - --ansi-black / --ansi-bright-black: fondos y trazos apagados.
   - --ansi-red: lo que falla o queda atras.
   - --ansi-green: lo cumplido; es tambien el acento de la app.
   - --ansi-amber: la racha, la meta pasada y los avisos.
   - --ansi-blue / --ansi-magenta / --ansi-cyan: carriles y equipos.
   - --ansi-white / --ansi-bright-white: texto sobre color y la plata del podio.
   - --ansi-bright-*: la version clara de cada uno, para el oro y los realces. */
:root {
  color-scheme: dark;

  --ansi-black: #0b0e12;
  --ansi-red: #f87171;
  --ansi-green: #4ade80;
  --ansi-amber: #fbbf24;
  --ansi-blue: #7aa2f7;
  --ansi-magenta: #c98fe0;
  --ansi-cyan: #5ec8d8;
  --ansi-white: #cbd5e1;
  --ansi-bright-black: #4a5568;
  --ansi-bright-red: #ff9a9a;
  --ansi-bright-green: #8bf0a8;
  --ansi-bright-amber: #ffd166;
  --ansi-bright-blue: #a9c2ff;
  --ansi-bright-magenta: #e0b0f0;
  --ansi-bright-cyan: #8fe3ef;
  --ansi-bright-white: #eef2f7;

  --bg: #0b0e12;
  --panel: #10141a;
  --panel-2: #171d26;
  --text: #d7dfe9;
  --muted: #77849a;
  --border: #212a36;
  --border-2: #2e3947;
  --accent: var(--ansi-green);
  --accent-ink: #04150b;
  --danger: var(--ansi-red);
  --warn: var(--ansi-amber);
  --shadow: 0 1px 0 rgba(255, 255, 255, .02);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs: clamp(.84rem, .8rem + .2vw, .96rem);
  --page-max: 1160px;
  --gutter: clamp(.6rem, .32rem + 1.5vw, 2rem);
  --gap: clamp(.55rem, .4rem + .55vw, 1rem);
  --radius: 6px;
  /* Ancho máximo de lectura de una fila de hábito. En una pantalla ancha, dejar
     el nombre en un extremo y el valor en el otro obliga a barrer la vista de
     lado a lado en cada fila. */
  --reading: 46rem;
}

/* El tema claro se puede pedir por sistema o a mano con el boton [tema]; el
   atributo data-theme siempre manda sobre la preferencia del sistema. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ansi-black: #10151c;
    --ansi-red: #b91c1c;
    --ansi-green: #15803d;
    --ansi-amber: #a16207;
    --ansi-blue: #1d4ed8;
    --ansi-magenta: #8e3fa8;
    --ansi-cyan: #0e7490;
    --ansi-white: #3d4653;
    --ansi-bright-black: #6b7280;
    --ansi-bright-red: #dc2626;
    --ansi-bright-green: #1c9c4f;
    --ansi-bright-amber: #b45309;
    --ansi-bright-blue: #2563eb;
    --ansi-bright-magenta: #a64fb8;
    --ansi-bright-cyan: #0e8ea8;
    --ansi-bright-white: #8b93a1;
    --bg: #f4f5f7;
    --panel: #ffffff;
    --panel-2: #e9ecf1;
    --text: #10151c;
    --muted: #5a6675;
    --border: #d5dae2;
    --border-2: #c2c9d4;
    --accent: var(--ansi-green);
    --accent-ink: #ffffff;
    --danger: var(--ansi-red);
    --warn: var(--ansi-amber);
    --shadow: none;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --ansi-black: #10151c;
  --ansi-red: #b91c1c;
  --ansi-green: #15803d;
  --ansi-amber: #a16207;
  --ansi-blue: #1d4ed8;
  --ansi-magenta: #8e3fa8;
  --ansi-cyan: #0e7490;
  --ansi-white: #3d4653;
  --ansi-bright-black: #6b7280;
  --ansi-bright-red: #dc2626;
  --ansi-bright-green: #1c9c4f;
  --ansi-bright-amber: #b45309;
  --ansi-bright-blue: #2563eb;
  --ansi-bright-magenta: #a64fb8;
  --ansi-bright-cyan: #0e8ea8;
  --ansi-bright-white: #8b93a1;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #e9ecf1;
  --text: #10151c;
  --muted: #5a6675;
  --border: #d5dae2;
  --border-2: #c2c9d4;
  --accent: var(--ansi-green);
  --accent-ink: #ffffff;
  --danger: var(--ansi-red);
  --warn: var(--ansi-amber);
  --shadow: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs)/1.5 var(--mono);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.small { font-size: .86em; }
.tiny { font-size: .76em; }
.center { text-align: center; }
.ok { color: var(--accent); }
.err { color: var(--danger); }
.prompt { color: var(--accent); }
.logdim { color: var(--muted); }
.slash { color: var(--muted); }

/* ---------------------------------------------------------------- cabecera */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  padding:
    calc(var(--gap) * .8 + env(safe-area-inset-top, 0px))
    calc(var(--gutter) + env(safe-area-inset-right, 0px))
    calc(var(--gap) * .8)
    calc(var(--gutter) + env(safe-area-inset-left, 0px));
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  max-width: var(--page-max);
  margin: 0 auto;
  min-width: 0;
}

.brand {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.cursor {
  display: inline-block;
  margin-left: .1em;
  color: var(--accent);
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.nav { display: flex; flex-wrap: wrap; gap: .15rem .55rem; min-width: 0; }
.nav a { color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.on { color: var(--accent); }

.topbar-tools { display: flex; gap: .5rem; margin-left: auto; }

.tool {
  font: inherit;
  font-size: .82em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: .1rem 0;
  cursor: pointer;
}
.tool:hover { color: var(--text); }

.inline-form { margin: 0; display: inline; }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--gap) var(--gutter) calc(var(--gap) * 2);
  min-width: 0;
}

.foot {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--gap) * 2 + env(safe-area-inset-bottom, 0px));
  font-size: .76em;
}

/* ------------------------------------------------------------ linea de cmd */

.head { margin: 0 0 var(--gap); }
.cmd { margin: 0; font-weight: 700; }
.cmd .prompt { margin-right: .35em; }
.logline { margin: .2rem 0 0; font-size: .88em; }
.logline .muted { margin: 0 .2em; }

/* --------------------------------------------------------- marco terminal */

.card, .term {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.term {
  position: relative;
  padding: calc(var(--gap) + .3rem) var(--gap) var(--gap);
  /* El titulo sobresale por encima del borde; el hueco tiene que ser mayor que
     ese saliente o el rotulo de una tarjeta se comeria el borde de la anterior. */
  margin: 0 0 calc(var(--gap) + .4rem);
}

.term-title {
  position: absolute;
  top: -.72em;
  left: .7rem;
  margin: 0;
  padding: 0 .4rem;
  background: var(--bg);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  white-space: nowrap;
  /* El titulo es absolute: si el nombre del habito es largo, sin esto se sale de
     la tarjeta y ensancha la pagina entera. */
  max-width: calc(100% - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El titulo se apoya en el borde de la caja, como el rotulo de un marco de
   terminal dibujado con caracteres de caja. */
.term-title::before { content: "─ "; }
.term-title::after { content: " ─"; }

.empty { text-align: center; }
.empty .term-title { left: 50%; transform: translateX(-50%); }

/* --------------------------------------------------------- botones y campo */

.btn {
  display: inline-block;
  font: inherit;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: .42rem .8rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.small { padding: .3rem .55rem; font-size: .88em; }

.icon {
  font: inherit;
  font-size: .88em;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: .3rem .4rem;
  cursor: pointer;
  white-space: nowrap;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 639px) {
  /* En el movil estos botones se pulsan con el pulgar: 44 px minimos. */
  .icon { min-height: 44px; }
}
.icon:hover { color: var(--accent); border-color: var(--border-2); text-decoration: none; }
.icon:disabled { opacity: .3; cursor: default; }
a.icon { display: inline-block; }

.actions-row { margin: 0 0 var(--gap); }

/* --------------------------------------------------------- lista del dia */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  /* La fila decide su forma por el ancho que tiene, no por el de la ventana: en
     la columna lateral (estrecha) una fila con el nombre y el valor en la misma
     linea se queda sin sitio. */
  container-type: inline-size;
}

.row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--h, var(--accent));
  border-radius: var(--radius);
  min-width: 0;
}
.row.is-done { background: color-mix(in srgb, var(--h, var(--accent)) 10%, var(--panel)); }
.row.is-paused { opacity: .6; }
.row.is-off { opacity: .62; }
.row.is-off .box, .row.is-off .prog { color: var(--muted); }

.row-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "mark name actions"
    "mark meta meta";
  align-items: center;
  gap: .15rem .5rem;
  padding: .35rem .5rem;
  min-width: 0;
}

.row-mark { grid-area: mark; margin: 0; align-self: stretch; display: flex; }

.mark {
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  min-width: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .2rem;
}
.mark:hover { background: var(--panel-2); }
.box { letter-spacing: -.02em; white-space: nowrap; }
.row.is-done .box { color: var(--h, var(--accent)); }
.row.is-paused .box { color: var(--muted); }

.name {
  grid-area: name;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .7rem;
  font-size: .84em;
  color: var(--muted);
  min-width: 0;
}
.meta .prog { color: var(--text); }
.row.is-done .meta .prog { color: var(--h, var(--accent)); }
.wk-meta { color: var(--muted); }
.streak { white-space: nowrap; }
.shields { white-space: nowrap; color: var(--warn); }

.actions { grid-area: actions; display: flex; gap: .1rem; align-items: center; }

@container (min-width: 34rem) {
  .row-line {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "mark name meta actions";
    padding: .45rem .6rem;
  }
}

/* ------------------------------------------------------- campo en linea */

.inline-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .45rem .6rem .6rem;
  border-top: 1px dashed var(--border-2);
  min-width: 0;
}
.inline-field .num {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: .3rem .45rem;
  width: 7rem;
  max-width: 45%;
  min-width: 0;
}
.inline-field .num:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.unit { color: var(--muted); }

/* ------------------------------------------------------- rejilla semanal */

.wk { min-width: 0; }

.wk-header, .wk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.wk-head-spacer { display: none; }

.wk-header { padding-bottom: .3rem; }

.wk-row { padding: .35rem 0; border-top: 1px solid var(--border); }

.wk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}
.wk-name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.wk-streak { color: var(--muted); font-size: .82em; white-space: nowrap; }

.wk-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .25rem;
  min-width: 0;
}
.wk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .74em;
  line-height: 1.15;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
}

.cellwrap { display: flex; min-width: 0; }
/* Hoy va con anillo solido y de acento. Con el discontinuo se confundia con los
   dias que no tocan y con los futuros, que ya usan ese trazo. */
.cellwrap.is-today { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cell-form { display: flex; width: 100%; margin: 0; min-width: 0; }

.cell {
  font: inherit;
  font-size: .82em;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 .1rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell:hover { border-color: var(--h, var(--accent)); color: var(--text); }
.cell.on {
  background: color-mix(in srgb, var(--h, var(--accent)) 26%, var(--panel-2));
  border-color: var(--h, var(--accent));
  color: var(--text);
}
.cell.part { background: color-mix(in srgb, var(--h, var(--accent)) 10%, var(--panel-2)); color: var(--text); }
.cell.paused, .cell.na { cursor: default; border-style: dashed; color: var(--muted); background: transparent; }
.cell.future, .cell.before { cursor: default; opacity: .3; background: transparent; border-style: dashed; }

.wk-edit { border-top: 1px dashed var(--border-2); }

@media (min-width: 640px) {
  .wk-header, .wk-row { grid-template-columns: 11rem minmax(0, 1fr); gap: .6rem; }
  .wk-head-spacer { display: block; }
  .wk-row .wk-head { flex-direction: column; align-items: flex-start; justify-content: center; }
}

/* ---------------------------------------------------------- mapa de calor */

.heat { min-width: 0; }

.heat-months {
  position: relative;
  height: 1.05em;
  overflow: hidden;
  font-size: .68em;
  color: var(--muted);
}
.heat-months span { position: absolute; top: 0; white-space: nowrap; }

.heat-grid {
  display: grid;
  grid-template-columns: repeat(53, minmax(0, 1fr));
  gap: clamp(1px, .32vw, 3px);
  min-width: 0;
}

.hc {
  width: 100%;
  min-width: 0;
  min-height: 4px;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--panel-2);
}
.hc.l1 { background: color-mix(in srgb, var(--h, var(--accent)) 26%, var(--panel-2)); }
.hc.l2 { background: color-mix(in srgb, var(--h, var(--accent)) 45%, var(--panel-2)); }
.hc.l3 { background: color-mix(in srgb, var(--h, var(--accent)) 70%, var(--panel-2)); }
.hc.l4 { background: var(--h, var(--accent)); }
.hc.is-paused { box-shadow: inset 0 0 0 1px var(--border-2); }
.hc.is-future { background: transparent; }

.heat-scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem;
  margin-top: .45rem;
  font-size: .74em;
}
.scale-swatches { display: flex; align-items: center; gap: .25rem; }
.scale-swatches .hc { width: .75rem; min-height: 0; aspect-ratio: 1; }

/* -------------------------------------------------------------- tarjetas */

.grid-stats {
  display: grid;
  /* Tres lecturas en una fila, como un panel de instrumentos. En el movil
     caben las tres aunque el texto se parta en dos lineas. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: 0;
}
.stat { text-align: center; padding: var(--gap) .5rem; }
.stat .small { font-size: .8em; }
.stat p { margin: 0; }
.stat-label {
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.prompt-line { margin: 0; }
.big {
  margin: .2rem 0 .1rem;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
}
.stat .big .slash { margin: 0 .1em; }

/* ---------------------------------------------------------------- tabla */

.table-scroll { overflow-x: auto; min-width: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: .88em; }
.tbl th, .tbl td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th { color: var(--muted); font-weight: 600; }
.tbl td:first-child, .tbl th:first-child { white-space: normal; }
.tbl-name { min-width: 8rem; }
.tbl a { color: var(--text); }
.tbl a:hover { color: var(--accent); }

.dot {
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-right: .45em;
  border-radius: 50%;
  background: var(--h, var(--accent));
  vertical-align: baseline;
}

/* -------------------------------------------------------- lista de habitos */

.hlist { list-style: none; margin: 0; padding: 0; }
.hitem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.hitem:last-child { border-bottom: 0; }
.hitem-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-width: 0; flex: 1 1 12rem; }
.hitem-name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.hitem-streak { color: var(--muted); font-size: .84em; white-space: nowrap; }
.hitem-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.hitem.is-archived { opacity: .6; }

/* ------------------------------------------------------------- formulario */

.form { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--gap); }

.field { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.field.tight { gap: .35rem; }

.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="password"],
.field select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: .38rem .5rem;
  min-width: 0;
  flex: 1 1 7rem;
  max-width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { padding: 0; }

.choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.choice input { accent-color: var(--accent); }

.swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.swatch { display: inline-flex; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch span {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--h);
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.swatch input:checked + span { border-color: var(--text); }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------------------ login */

.login-card { max-width: 32rem; margin: 8vh auto 0; }
.login-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: var(--gap) 0 .6rem; }
.login-form .field { flex: 1 1 12rem; }
/* El boton ocupa su propia linea: los dos campos se quedan igual de anchos y no
   se aprietan uno contra otro en un movil estrecho. */
.login-form .btn { flex: 1 1 100%; }
.login-form input {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: .45rem .5rem;
  min-width: 0;
  flex: 1 1 6rem;
}
.login-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ------------------------------------------------------ panel de config */

/* El enlace personal es una URL larga metida en una columna estrecha: se parte
   por donde haga falta para que no ensanche la pagina entera. */
.link-line { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; margin: .35rem 0 0; min-width: 0; }
.link-url { min-width: 0; overflow-wrap: anywhere; }

/* El editor de cada fila se abre y se cierra sin JavaScript. */
.pedit { margin-top: .35rem; }
.pedit > summary { color: var(--muted); cursor: pointer; padding: .3rem 0; list-style: none; }
.pedit > summary::-webkit-details-marker { display: none; }
.pedit > summary::before { content: "[+] "; color: var(--accent); }
.pedit[open] > summary::before { content: "[-] "; }
.pedit > summary:hover { color: var(--accent); }

/* La base de datos y la carpeta de Gadgetbridge son rutas largas: en una celda
   de tabla no pueden ir en una sola linea. Los rotulos, en cambio, son cortos y
   partirlos («zona / horaria») se lee mal: se quedan en una linea y el valor es
   el que se parte. */
.tbl td.wrap { white-space: normal; overflow-wrap: anywhere; }
.tbl.settings th { white-space: nowrap; }

/* ------------------------------------------------------------------ pausas */
.plist { list-style: none; margin: 0 0 var(--gap); padding: 0; }
.pitem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
}
.ptag {
  font-size: .78em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 3px;
  padding: 0 .35em;
}
.pitem form { margin-left: auto; }

/* --------------------------------------------------------------- bloques */

.block { min-width: 0; margin: 0 0 calc(var(--gap) + .2rem); }
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  margin: 0 0 .25rem;
  min-width: 0;
}
.block-name { color: var(--b, var(--accent)); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.block-name::before { content: "▚ "; color: var(--muted); }
.block-count { color: var(--muted); font-size: .84em; white-space: nowrap; }
.block-window { color: var(--muted); font-size: .82em; white-space: nowrap; margin-left: auto; }

/* --------------------------------------------------------- cronómetro */

.timer { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.timer-clock {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timer-clock[hidden] { display: none; }
.timer-toggle {
  font: inherit;
  font-size: .84em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: .1rem .4rem;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
}
.timer-toggle:hover { color: var(--text); }
.timer-toggle.is-running { color: var(--danger); border-color: var(--danger); }
@media (max-width: 639px) { .timer-toggle { min-height: 44px; } }

.delta { white-space: nowrap; color: var(--muted); }

/* ------------------------------------------------------ lista de bloques */

.blist { list-style: none; margin: 0; padding: 0; }
.bitem {
  border-left: 3px solid var(--b, var(--accent));
  border-bottom: 1px solid var(--border);
  padding: .45rem .5rem;
  min-width: 0;
}
.bitem:last-child { border-bottom: 0; }
.bitem-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; min-width: 0; }
.bdot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--b, var(--accent)); }
.bname { color: var(--text); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.bwindow { color: var(--muted); font-size: .84em; white-space: nowrap; }
.bitem-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin-left: auto; }
.bform { margin-top: .4rem; }
.weekdays .wd span { font-weight: 700; }
.weekdays .wd input:checked + span { color: var(--accent); }

/* ------------------------------------------------- hoja de ruta del día */

.day-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  min-width: 0;
}
.day-main, .day-side { min-width: 0; }
.day-side .block { margin-bottom: 0; }

/* Ancho aprovechado a propósito: la línea de tiempo manda y queda una columna
   al lado para lo que no tiene hora. En el móvil todo se apila en una columna. */
@media (min-width: 960px) {
  .day-grid.has-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    align-items: start;
  }
}

.roadmap { list-style: none; margin: 0; padding: 0; min-width: 0; }

.rm-item, .rm-now {
  display: grid;
  grid-template-columns: var(--rm-gutter, 3.3rem) minmax(0, 1fr);
  gap: .5rem;
  min-width: 0;
}

.rm-gutter {
  display: flex;
  justify-content: flex-end;
  padding-top: .45rem;
  min-width: 0;
}
.rm-time {
  font-size: .78em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rm-panel {
  position: relative;
  min-width: 0;
  padding: .3rem 0 .3rem .7rem;
  border-left: 2px solid var(--border-2);
  margin-bottom: var(--gap);
  /* El alto insinúa la duración, comprimida y con tope. El eje no es
     proporcional a las 24 h: en un móvil sería un despliegue interminable y las
     filas de dentro dejarían de leerse; el orden sí es fiel a la hora. */
  min-height: calc(2.4rem + min(calc(var(--dur, 0) * 0.012rem), 2.4rem));
}
.rm-item.is-untimed .rm-panel { border-left-style: dashed; min-height: 0; }
.rm-item .rm-panel .rows, .day-side .rows { max-width: min(100%, var(--reading)); }
.rm-item.is-past .rm-panel { opacity: .55; }
.rm-item.is-now .rm-panel {
  border-left-color: var(--accent);
  border-left-width: 5px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.rm-item.is-now .rm-time { color: var(--accent); font-weight: 700; }

.rm-now { margin: .1rem 0 .35rem; }
.rm-now .rm-gutter { padding-top: .15rem; }
.now-time { color: var(--accent); font-weight: 700; }
.rm-nowline {
  display: block;
  border-top: 2px dashed var(--accent);
  padding-top: .05rem;
  color: var(--accent);
  font-size: .72em;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------- personas y equipos */

.row-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .4rem; min-width: 0; }
.row-tools select {
  font: inherit;
  font-size: .88em;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: .25rem .4rem;
  max-width: 100%;
}
.token-line { margin: .35rem 0 0; min-width: 0; }
.token-link { overflow-wrap: anywhere; word-break: break-all; }

/* ------------------------------------------------------------ el reto paso a paso
   El tablero del reto, en clave de terminal: los conmutadores, los carriles con
   su pista, el podio y las listas. Todo el color sale de la paleta ANSI de
   arriba; ningun carril nombra un hex. */

.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem var(--gap);
  margin: 0 0 .6rem;
  min-width: 0;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.seg {
  color: var(--muted);
  background: var(--panel);
  padding: .34rem .6rem;
  font-size: .9em;
  white-space: nowrap;
}
.seg:hover { color: var(--text); text-decoration: none; }
.seg.active { background: var(--accent); color: var(--accent-ink); }

/* --- carreras ------------------------------------------------------------- */

.race {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
  min-width: 0;
}

.lane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lane, var(--accent));
  border-radius: var(--radius);
  padding: .45rem .55rem .25rem;
  min-width: 0;
}
/* El podio: los tres primeros carriles llevan el borde tintado de medalla, que
   se lee sin contar puestos. */
.lane[data-rank] { border-left-color: var(--medal); }
.lane[data-me="1"] {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  border-left-color: var(--accent);
}

.lane-head { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.lane-avatar { flex: none; display: inline-flex; }
.lane-body { display: flex; flex-direction: column; gap: .05rem; flex: 1 1 auto; min-width: 0; }
.lane-name { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.lane-meta { font-size: .78em; color: var(--muted); overflow-wrap: anywhere; }
.lane-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lane-value strong { font-size: 1.02em; }

/* El puesto; los tres primeros llevan la medalla redonda en vez del numero seco. */
.rank {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rank--medal {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-basis: 1.5rem;
  border-radius: 50%;
  color: var(--medal);
  background: color-mix(in srgb, var(--medal) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--medal) 45%, transparent);
}
.lane[data-rank="1"], .board-row[data-rank="1"] { --medal: var(--ansi-bright-amber); }
.lane[data-rank="2"], .board-row[data-rank="2"] { --medal: var(--ansi-bright-white); }
.lane[data-rank="3"], .board-row[data-rank="3"] { --medal: var(--ansi-amber); }

.badge-me {
  flex: none;
  font-size: .62em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 3px;
  padding: 0 .35em;
}
.gap {
  display: inline-block;
  font-size: .74em;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-2);
  border-radius: 3px;
  padding: 0 .35em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gap--leader { color: var(--ansi-amber); background: color-mix(in srgb, var(--ansi-amber) 16%, transparent); }
.lane .streak, .board-row .streak { color: var(--ansi-amber); white-space: nowrap; }

/* La pista de cada carril: la superficie es el recorrido entero y el relleno es
   lo que lleva andado ese carril. Los dos van en porcentaje del ancho, asi que
   la meta cae al final de la pista mientras nadie pase de su objetivo. Las
   bandas laterales reservan sitio al corredor: en el 0 % y el 100 % sigue dentro
   de la pista y la pagina no se ensancha. */
.lane-track { position: relative; height: 60px; margin-top: .35rem; }
.lane-track-inner { position: absolute; inset: 0 20px; }

.rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 10px;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--lane, var(--accent)) 14%, var(--panel-2));
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--text) 20%, transparent) 0 1px,
    transparent 1px 9px
  );
}
.rail-fill {
  position: absolute;
  left: 0;
  bottom: 22px;
  height: 10px;
  border-radius: 2px;
  background: var(--lane, var(--accent));
  opacity: .55;
}
.rail-extra {
  position: absolute;
  right: 0;
  bottom: 22px;
  height: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    115deg,
    color-mix(in srgb, var(--ansi-amber) 55%, transparent) 0 4px,
    transparent 4px 8px
  );
}
.tick {
  position: absolute;
  bottom: 32px;
  width: 1px;
  height: 5px;
  background: color-mix(in srgb, var(--text) 30%, transparent);
}
.tick-label {
  position: absolute;
  bottom: 5px;
  transform: translateX(-50%);
  font-size: .58rem;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.start {
  position: absolute;
  bottom: 22px;
  width: 2px;
  height: 10px;
  background: color-mix(in srgb, var(--text) 45%, transparent);
}
.start-label, .finish-label {
  position: absolute;
  bottom: 5px;
  font-size: .58rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  white-space: nowrap;
}
.finish {
  position: absolute;
  bottom: 22px;
  width: 2px;
  height: 17px;
  background: var(--text);
}
.finish-label { transform: translateX(-50%); color: var(--text); }

.lane-runner {
  position: absolute;
  bottom: 29px;
  display: flex;
  align-items: flex-end;
  transform: translateX(-50%);
}

/* --- listas (individual y equipos) ---------------------------------------- */

.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.board-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.board-row:last-child { border-bottom: 0; }
.board-row[data-me="1"] { border-left: 3px solid var(--accent); padding-left: .4rem; }
.board-row.is-mine { border-left: 3px solid var(--lane, var(--accent)); padding-left: .4rem; }
.board-avatar { flex: none; display: inline-flex; }
.board-main { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.board-main .muted { overflow-wrap: anywhere; }
.board-name { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.board-name .dot { background: var(--lane, var(--accent)); }
.board-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.board-pack { display: flex; align-items: flex-end; flex: none; }
.pack-item { display: block; margin-left: -8px; }
.pack-item:first-child { margin-left: 0; }
.pack-more { align-self: center; margin-left: -.05rem; font-size: .72em; font-weight: 700; color: var(--text); }

.bar { display: block; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--lane, var(--accent)); }
.bar.over > span { background: var(--ansi-amber); }

/* El corredor: brazos y piernas oscilan sobre sus articulaciones. */
.runner { color: color-mix(in srgb, var(--text) 45%, transparent); display: block; }
.runner-shadow { opacity: .4; }
.runner-leg-front, .runner-leg-back, .runner-shank-front, .runner-shank-back,
.runner-arm-front, .runner-arm-back { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .runner-leg-front { animation: stride-forward .72s ease-in-out infinite alternate; }
  .runner-leg-back { animation: stride-back .72s ease-in-out infinite alternate; }
  .runner-shank-front { animation: knee-forward .72s ease-in-out infinite alternate; }
  .runner-shank-back { animation: knee-back .72s ease-in-out infinite alternate; }
  .runner-arm-front { animation: swing .72s ease-in-out infinite alternate; }
  .runner-arm-back { animation: swing .72s ease-in-out infinite alternate-reverse; }
}
@keyframes stride-forward { from { transform: rotate(-24deg); } to { transform: rotate(20deg); } }
@keyframes stride-back { from { transform: rotate(22deg); } to { transform: rotate(-20deg); } }
@keyframes knee-forward { from { transform: rotate(4deg); } to { transform: rotate(40deg); } }
@keyframes knee-back { from { transform: rotate(-30deg); } to { transform: rotate(6deg); } }
@keyframes swing { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }

@media (min-width: 1024px) {
  .lane-track { height: 68px; }
}

/* ------------------------------------------------------------ la ruta
   El mapa se lee como una pantalla tactica: una reticula de fondo, el paisaje
   dibujado a linea y el camino como lo mas brillante del lienzo. El terreno no
   lleva rellenos de color: mezclas de los tokens de la paleta, para que se
   apague o se aclare con el tema sin deslumbrar. */

.rt-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.rt-main, .rt-stages-card, .rt-group { min-width: 0; }
@media (min-width: 1024px) {
  .rt-layout { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
  .rt-layout > .rt-main { grid-column: 1; }
  .rt-layout > .rt-stages-card { grid-column: 2; }
}

.rt-card, .rt-group, .rt-stages-card { padding: var(--gap); }
.rt-card { padding-bottom: calc(var(--gap) + .2rem); }
.rt-group { margin-bottom: var(--gap); }
.rt-head { display: flex; align-items: flex-start; gap: var(--gap); margin: 0 0 .5rem; min-width: 0; }
.rt-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.rt-sub { display: block; }
.rt-km-tag {
  flex: none;
  font-size: .78em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 4px;
  padding: 0 .4em;
  white-space: nowrap;
}
.rt-h3 { margin: .1rem 0 .5rem; font-size: .95em; }
.rt-badge {
  font-size: .7em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 3px;
  padding: 0 .35em;
}

/* El lienzo: el SVG lleva el terreno y el camino; los rotulos y los marcadores
   van en HTML encima, para que el texto no encoja con el viewBox. De ahi que el
   contenedor mantenga la proporcion 1000x700 y las capas se ajusten a el. El
   mapa sangra hasta el borde de la tarjeta: en un movil cada pixel de ancho es
   un kilometro mas de camino que se ve. */
.rt-wrap {
  position: relative;
  width: calc(100% + 2 * var(--gap));
  margin: 0 calc(-1 * var(--gap));
  aspect-ratio: 1000 / 700;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  overflow: hidden;
}
.rt-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rt-sky { fill: url(#rt-sky); }
.rt-grid line { stroke: color-mix(in srgb, var(--ansi-cyan) 13%, transparent); stroke-width: 1; }

/* El paisaje generico: lomas a linea con su cota. */
.rt-hill { fill: none; stroke: color-mix(in srgb, var(--text) 26%, transparent); stroke-width: 2; stroke-linejoin: round; }
.rt-hill--far { stroke: color-mix(in srgb, var(--text) 16%, transparent); }
.rt-hill-line { fill: none; stroke: color-mix(in srgb, var(--ansi-cyan) 20%, transparent); stroke-width: 1; stroke-dasharray: 6 5; }
.rt-hill-line--near { stroke: color-mix(in srgb, var(--ansi-cyan) 30%, transparent); }

/* La Tierra Media, a linea. */
.rt-sea { fill: color-mix(in srgb, var(--ansi-cyan) 9%, transparent); }
.rt-coast { fill: none; stroke: color-mix(in srgb, var(--ansi-cyan) 55%, transparent); stroke-width: 2.4; stroke-linecap: round; }
.rt-coast-hatch { fill: none; stroke: color-mix(in srgb, var(--ansi-cyan) 34%, transparent); stroke-width: 1.2; stroke-dasharray: 4 7; }
.rt-inland-sea { fill: none; stroke: color-mix(in srgb, var(--ansi-cyan) 36%, transparent); stroke-width: 1.6; }
.rt-river { fill: color-mix(in srgb, var(--ansi-cyan) 15%, transparent); stroke: color-mix(in srgb, var(--ansi-cyan) 46%, transparent); stroke-width: 1.3; }
.rt-mordor { fill: color-mix(in srgb, var(--ansi-red) 7%, transparent); stroke: color-mix(in srgb, var(--text) 40%, transparent); stroke-width: 2; }
.rt-mordor-wall { fill: none; stroke: color-mix(in srgb, var(--text) 58%, transparent); stroke-width: 3; stroke-dasharray: 10 4; }
.rt-gorgoroth { fill: none; stroke: color-mix(in srgb, var(--ansi-red) 36%, transparent); stroke-width: 1.2; stroke-dasharray: 5 5; }
.rt-forest ellipse { fill: none; stroke: color-mix(in srgb, var(--ansi-green) 40%, transparent); stroke-width: 1.2; }
.rt-peak { fill: none; stroke-linejoin: round; stroke-width: 1.4; }
.rt-peak--misty { stroke: color-mix(in srgb, var(--text) 48%, transparent); }
.rt-peak--wall { stroke: color-mix(in srgb, var(--text) 32%, transparent); }
.rt-hummocks use { fill: none; stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 1; }
.rt-marsh ellipse { fill: none; stroke: color-mix(in srgb, var(--ansi-cyan) 42%, transparent); stroke-width: 1.6; }
.rt-marsh path { fill: none; stroke: color-mix(in srgb, var(--ansi-cyan) 34%, transparent); stroke-width: 2; stroke-linecap: round; }
.rt-volcano-cone { fill: none; stroke: color-mix(in srgb, var(--ansi-red) 58%, transparent); stroke-width: 1.8; stroke-linejoin: round; }
.rt-volcano-plume { fill: none; stroke: color-mix(in srgb, var(--ansi-amber) 48%, transparent); stroke-width: 2; stroke-linecap: round; }

/* El camino que queda por recorrer, tenue, y el ya andado, que es lo que brilla
   del mapa: es lo que se mira para saber por donde va la Compania. */
.rt-path { fill: none; stroke: color-mix(in srgb, var(--text) 30%, transparent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 12; }
.rt-path-done {
  fill: none;
  stroke: var(--accent);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 65%, transparent));
}
.rt-node { fill: var(--panel); stroke: color-mix(in srgb, var(--text) 58%, transparent); stroke-width: 5; }
.rt-node--start { fill: var(--panel-2); stroke: color-mix(in srgb, var(--text) 76%, transparent); }
.rt-node--finish { fill: var(--ansi-bright-amber); stroke: var(--panel); stroke-width: 6; }

.rt-layer { position: absolute; inset: 0; }

/* Toponimos del paisaje. Van sin caja y apagados: nombran el fondo sin competir
   con los nombres de etapa, que son lo que se lee primero. */
.rt-place {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: .6rem;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--muted);
  opacity: .85;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 4px var(--panel), 0 0 3px var(--panel);
}

/* Rotulos de etapa. Dos juegos: en el movil solo caben cuatro nombres, asi que
   el juego corto sale siempre y el largo entra a partir de 620 px. */
.rt-wp {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  max-width: 60%;
  transform: translate(-50%, 9px);
  pointer-events: none;
  text-align: center;
  line-height: 1.15;
  z-index: 3;
}
.rt-wp--phone { display: flex; }
.rt-wp--left { align-items: flex-start; transform: translate(-3px, 9px); text-align: left; }
.rt-wp--right { align-items: flex-end; transform: translate(calc(-100% + 3px), 9px); text-align: right; }
.rt-wp--up { transform: translate(-50%, calc(-100% - 9px)); }
.rt-wp--up.rt-wp--left { transform: translate(-3px, calc(-100% - 9px)); }
.rt-wp--up.rt-wp--right { transform: translate(calc(-100% + 3px), calc(-100% - 9px)); }
.rt-wp-name {
  font-size: .58rem;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-radius: 5px;
  padding: 0 .22rem;
}
.rt-wp-km { font-size: .55rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (min-width: 620px) {
  .rt-wp--phone { display: none; }
  .rt-wp--wide { display: flex; }
  .rt-wp-name { font-size: .72rem; }
  .rt-wp-km { font-size: .62rem; }
  .rt-place { font-size: .72rem; }
}

/* Marcadores. El tamano es un porcentaje del lienzo: asi guardan la proporcion
   con el mapa en movil y en escritorio, y el reparto de app/routes.py (fan_out)
   vale para los dos. */
.rt-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 4.4%;
  min-width: 15px;
}
.rt-marker--team { width: 5.2%; }
/* El estandarte de la Compania: mas grande que nadie y por encima de los
   rotulos de etapa, porque en una ruta larga los marcadores de las personas se
   quedan todos en la salida y quien viaja es el grupo. */
.rt-marker--group { width: 7.4%; z-index: 4; }
.rt-banner {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ansi-bright-amber) 26%, var(--panel));
  box-shadow: 0 0 0 3px var(--ansi-bright-amber), 0 0 0 6px color-mix(in srgb, var(--ansi-bright-amber) 24%, transparent);
}
.rt-banner svg { width: 82%; height: auto; display: block; }
.rt-banner-pole { stroke: color-mix(in srgb, var(--text) 76%, transparent); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.rt-banner-pennant { fill: var(--ansi-bright-amber); }
.rt-banner--mini { width: 16px; box-shadow: 0 0 0 2px var(--ansi-bright-amber); }
.rt-banner--mini svg { width: 76%; }
.rt-dot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--team, var(--accent)) 22%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--team, var(--accent)) 85%, transparent);
}
.rt-dot--runner .runner { width: 88%; height: auto; }
.rt-dot--team { background: color-mix(in srgb, var(--team, var(--accent)) 85%, var(--panel)); }
.rt-dot-dots {
  display: block;
  width: 66%;
  height: 66%;
  background-image: radial-gradient(circle, var(--panel) 46%, transparent 48%),
    radial-gradient(circle, var(--panel) 46%, transparent 48%);
  background-size: 40% 40%, 40% 40%;
  background-position: 18% 50%, 82% 50%;
  background-repeat: no-repeat;
}
.rt-marker--me .rt-dot { box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent); }
/* La etiqueta de cada marcador sale en uno de cuatro sitios (arriba o abajo, a
   la izquierda o a la derecha, rotando): dos corredores pegados no escriben el
   nombre uno encima del otro aunque el hueco sea pequeno. */
.rt-marker--p0 .rt-tag { order: 1; align-self: flex-start; }
.rt-marker--p1 .rt-tag { order: 1; align-self: flex-end; }
.rt-marker--p2 .rt-tag { order: -1; align-self: flex-start; }
.rt-marker--p3 .rt-tag { order: -1; align-self: flex-end; }
.rt-tag {
  font-size: .5rem;
  line-height: 1.1;
  max-width: 190%;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  border-radius: 5px;
  padding: 0 .18rem;
  white-space: nowrap;
}
.rt-tag-short { display: inline; font-weight: 600; }
.rt-tag-full { display: none; }
.rt-tag--me { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.rt-tag-me { font-weight: 700; }
.rt-marker--team .rt-tag { border: 1px solid color-mix(in srgb, var(--team) 60%, transparent); }
/* Sin sitio para el nombre, se calla y sale al pasar por encima. El tuyo no:
   encontrarte de un vistazo es lo primero que se hace en este mapa. */
.rt-marker--crowded .rt-tag { opacity: 0; transition: opacity .15s ease; }
.rt-marker--crowded:hover .rt-tag,
.rt-marker--crowded:focus-within .rt-tag { opacity: 1; }
.rt-marker--crowded.rt-marker--me .rt-tag { opacity: 1; }
.rt-marker--group .rt-tag {
  font-weight: 700;
  background: color-mix(in srgb, var(--ansi-bright-amber) 20%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--ansi-bright-amber) 60%, transparent);
}
@media (min-width: 620px) {
  .rt-tag { font-size: .72rem; max-width: 200%; }
  .rt-tag-short { display: none; }
  .rt-tag-full { display: inline; }
}

.rt-note { margin: .5rem 0 0; }
.rt-empty { margin: .75rem 0 0; }
.rt-me-line { margin: .75rem 0 0; padding-top: .5rem; border-top: 1px solid var(--border); }

.rt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: .6rem 0 0;
  text-align: center;
}
.rt-stats > div { min-width: 0; }
.rt-stats strong { display: block; font-size: 1.02em; overflow-wrap: anywhere; }
.rt-stats span { display: block; font-size: .76em; color: var(--muted); }

/* La etapa de la Compania, por encima de las cifras: en una ruta larga es el
   unico dato que se mueve, asi que va destacado y no como una estadistica mas. */
.rt-compass {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .75rem;
  padding: .5rem .75rem;
  border: 1px solid color-mix(in srgb, var(--ansi-bright-amber) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ansi-bright-amber) 10%, var(--panel-2));
}
.rt-compass-flag {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ansi-bright-amber) 26%, var(--panel));
  box-shadow: 0 0 0 2px var(--ansi-bright-amber);
}
.rt-compass-flag svg { width: 74%; height: auto; display: block; }
.rt-compass-title { display: block; font-weight: 700; }
.rt-compass-line { margin: .25rem 0 0; }

.rt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
  font-size: .72rem;
  color: var(--muted);
}
.rt-legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.rt-dot--mini { width: 14px; box-shadow: none; font-size: 0; }
.rt-legend-line {
  display: inline-block;
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Etapas */
.rt-stages { list-style: none; padding: 0; margin: 0; }
.rt-stage {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.rt-stage:last-child { border-bottom: 0; }
.rt-stage-km {
  flex: 0 0 4.2rem;
  font-size: .72rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}
.rt-stage-name { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.rt-stage-people { display: block; overflow-wrap: anywhere; }
.rt-stage--passed .rt-stage-km { color: var(--accent); }
.rt-stage-tick { color: var(--accent); font-weight: 700; }
.rt-stage-group { display: block; color: var(--ansi-bright-amber); }
@media (max-width: 430px) { .rt-stage-km { flex-basis: 3.4rem; } }

.rt-between { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem var(--gap); }

/* El muro de la ruta: cada llegada, en orden, con su tipo por delante. */
.rt-muro { margin-top: var(--gap); }
.muro-list { list-style: none; margin: 0; padding: 0; }
.muro-post {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.muro-post:last-child { border-bottom: 0; }
.muro-kind { flex: none; }
.muro-body { min-width: 0; overflow-wrap: anywhere; }
.muro-when { flex: none; font-variant-numeric: tabular-nums; }
.muro-post--group .muro-body { color: var(--ansi-bright-amber); font-weight: 600; }

/* ------------------------------------------------------------- el informe
   Podio, premios y equipos en una fila; la tabla de participantes, que es la
   mas ancha, debajo y de lado a lado. */

.report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.report-grid > * { margin-bottom: 0; }
@media (min-width: 1200px) {
  .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rp-podium { grid-area: 1 / 1; }
  .rp-awards { grid-area: 1 / 2; }
  .rp-teams { grid-area: 1 / 3; }
  .rp-people { grid-area: 2 / 1 / 3 / -1; }
}

.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; text-align: center; }
.podium-place {
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .5rem .25rem;
  background: var(--panel-2);
  border-radius: var(--radius);
  min-width: 0;
}
.podium-place strong { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.podium-medal { font-size: 1.15rem; color: var(--ansi-bright-amber); }
.podium-avatar { display: inline-flex; }

.award { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.award:last-of-type { border-bottom: 0; }
.award-winners { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; align-items: flex-start; }
.award-person { display: grid; justify-items: center; gap: .1rem; max-width: 5.2rem; min-width: 0; }
.award-person .tiny { overflow-wrap: anywhere; text-align: center; }

/* La ruta pegada a mano: el area de texto es la unica del formulario, asi que
   hereda el aire de los campos de al lado. */
.form textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: .38rem .5rem;
  width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  resize: vertical;
}
.form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------------------------------------------------------------- el muro
   Los mensajes de la gente y las llegadas de la ruta, en un hilo. Cada
   publicacion lleva la firma (avatar o iniciales), la hora, el texto y su fila
   de reacciones, que se cambian en el sitio por HTMX. */

.muro-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.muro-section { margin: var(--gap) 0 .4rem; font-size: 1em; color: var(--muted); }
.muro-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap); }
.muro-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gap);
  min-width: 0;
}
.muro-item--group { border-color: var(--border-2); }
.muro-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.muro-avatar { flex: none; display: inline-flex; color: var(--team, var(--muted)); }
.muro-avatar--plain {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border-2);
  color: var(--muted); font-size: .78em; font-weight: 700;
}
.muro-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem; min-width: 0; }
.muro-author { font-weight: 600; overflow-wrap: anywhere; }
.muro-tag {
  font-size: .72em; color: var(--ansi-bright-amber);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 0 .45em;
}
.muro-text { margin: .55rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.muro-item--group .muro-text { color: var(--ansi-bright-amber); font-weight: 600; }
.muro-reactions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.react {
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 999px;
  padding: .15rem .5rem; line-height: 1.45;
}
.react:hover { border-color: var(--accent); }
.react.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); }
.react-count { font-variant-numeric: tabular-nums; font-size: .84em; color: var(--muted); }
.react.mine .react-count { color: var(--accent); }

/* --------------------------------------------------------------- los retos
   Un bonus por tarjeta, con las caras de quien lo ha marcado y el boton que lo
   marca o lo deshace para la persona de la sesion. */

.reto { min-width: 0; }
.reto--done { border-color: var(--accent); }
.reto-points { color: var(--ansi-bright-amber); font-weight: 600; margin-left: .4rem; }
.reto-people { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; align-items: flex-start; }
.reto-person { display: grid; justify-items: center; gap: .1rem; max-width: 5rem; min-width: 0; }
.reto-person .tiny { overflow-wrap: anywhere; text-align: center; }
.reto-form { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------- el editor del avatar
   El unico sitio con mas color que la paleta ANSI: el corredor es un dibujo, no
   una superficie de interfaz. Los controles de color son cuadraditos de la
   paleta de `app/avatars.py`, y la vista previa ocupa el ancho que haya. */

.avatar-form { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.preview-stage {
  display: flex; justify-content: center; align-items: flex-end;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--gap); min-height: 12rem; min-width: 0;
}
.preview-runner { display: inline-flex; line-height: 0; }
.editor-section {
  border-top: 1px solid var(--border);
  padding-top: var(--gap);
  display: flex; flex-direction: column; gap: .6rem; min-width: 0;
}
.editor-title {
  margin: 0; font-size: .92em; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.avatar-flash { color: var(--accent); font-size: .82em; }