/* Identidad heredada de javimendoza.com / links.javimendoza.com. */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
    --bg: #0f0f0f;
    --surface: #1a1a1a;
    --surface-2: #232323;
    --border: #2a2a2a;
    --text: #f5f5f5;
    --text-muted: #888;
    --accent: #f56565;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
    --mono-stack: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-stack);
    line-height: 1.6;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

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

a:hover { text-decoration: underline; }

.container {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 4rem 1.5rem 3rem;
}

.hero { margin-bottom: 2.5rem; text-align: center; }

.hero h1 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.hero p { font-size: 1.05rem; color: var(--text-muted); }

.run-list { display: flex; flex-direction: column; gap: 0.5rem; }

.run-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.run-card:hover { border-color: var(--accent); text-decoration: none; }
.run-card, .run-card:hover { color: inherit; }

.run-date {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.run-identidad { min-width: 0; }
.run-evento { font-size: 0.95rem; font-weight: 400; overflow-wrap: anywhere; }
.evento-punto {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); vertical-align: middle; margin-right: 0.3rem;
}
.evento-indicador {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; vertical-align: middle;
}
.evento-indicador .evento-punto { margin: 0; }
.enlace-eventos { color: var(--text-muted); font-size: 0.85rem; }
.editar-evento { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.85rem; }
.editar-evento summary { cursor: pointer; width: fit-content; min-height: 24px; }
.editar-evento .form-evento { margin-top: 0.75rem; }
.editar-evento #ayuda-evento { margin-top: 0.5rem; font-size: 0.8rem; }
.editar-evento .evento-controles button {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.form-evento label { display: block; margin-bottom: 0.4rem; }
.evento-controles { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.evento-controles input {
    flex: 1; min-width: 0; min-height: 44px; padding: 0.6rem 0.75rem;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--text-muted); border-radius: 6px; font: inherit;
}
.evento-controles button {
    min-height: 44px; padding: 0.6rem 0.9rem; border: 0; border-radius: 6px;
    background: var(--accent); color: var(--bg); font: inherit;
    font-weight: 500; cursor: pointer;
}
.evento-controles input:focus-visible,
.evento-controles button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-evento [role="alert"] { color: var(--accent); }
.form-evento [role="status"] { margin-top: 0.5rem; }
.resultados-eventos { margin-top: 1.75rem; overflow-wrap: anywhere; }
.resultados-eventos .minimo { margin: 1rem 0 0; }

.run-metrics {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-family: var(--mono-stack);
    font-size: 0.9rem;
}

.metric { color: var(--text-muted); }
.metric.primary { color: var(--text); font-weight: 400; }

.note {
    margin-top: 2.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .container { padding: 2.5rem 1rem 2rem; }
    .run-card { flex-wrap: wrap; gap: 0.35rem 0.75rem; }
    .run-identidad { flex: 1 0 100%; }
}

.acciones { margin-top: 1rem; font-size: 0.9rem; }

.boton-inicio {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.boton-inicio:hover { border-color: var(--accent); text-decoration: none; }

.upload {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.upload input[type="file"] {
    flex: 1;
    min-width: 12rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.upload input[type="file"]::file-selector-button {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    margin-right: 0.75rem;
    font: inherit;
    cursor: pointer;
}

.upload input[type="file"]::file-selector-button:hover { border-color: var(--accent); }

.upload button {
    background: var(--accent);
    color: #0f0f0f;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 1.1rem;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.upload button:hover { opacity: 0.9; }

.resultados { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.25rem; }

.resultado {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-muted);
    border-radius: 8px;
    font-size: 0.9rem;
}

.resultado.error { border-left-color: var(--accent); }
.resultado .fichero { font-family: var(--mono-stack); color: var(--text); }
.resultado .detalle { color: var(--text-muted); }

code {
    font-family: var(--mono-stack);
    font-size: 0.85em;
    background: var(--surface-2);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

/* ---------- Panel ---------- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}

.chip {
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
}
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip.on { background: var(--surface-2); color: var(--text); border-color: var(--accent); }

.tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
/* El minimo de distancia afecta a todo lo que se cuenta, asi que se dice una
   vez, justo debajo de las cifras. */
.minimo {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -1.5rem 0 2rem;
}

.tile-lab { font-size: 0.75rem; color: var(--text-muted); }
.tile-val { font-size: 1.35rem; font-family: var(--mono-stack); }
.tile-val small { font-size: 0.7rem; color: var(--text-muted); margin-left: 0.25rem; }

.bloque { margin-bottom: 2.25rem; }
.bloque h2 { font-size: 1rem; font-weight: 500; margin-bottom: 0.35rem; }
.bloque .sub { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; }

.records { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

.record {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.record-banda { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.record-cab {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.15rem;
}
.record-linea { display: flex; align-items: baseline; gap: 0.5rem; }
.record-tiempo { font-size: 1.35rem; font-family: var(--mono-stack); }
.record-tiempo small { font-size: 0.55em; color: var(--text-muted); margin-left: 0.2rem; }
.record-ritmo {
    font-family: var(--mono-stack);
    font-size: 0.9rem;
    color: var(--text-muted);
}
.record-ritmo small { font-size: 0.75em; }
.record-ctx { font-size: 0.75rem; color: var(--text-muted); }

/* ---------- Gráficas ---------- */

.gr {
    width: 100%;
    height: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0;
    overflow: visible;
}

/* Rejilla y ejes: recesivos, un paso por encima de la superficie. */
.rejilla { stroke: var(--border); stroke-width: 1; }
.ejeY, .ejeX {
    fill: var(--text-muted);
    font-family: var(--mono-stack);
    font-size: 9px;
}
.ejeY { text-anchor: end; }
.ejeX { text-anchor: middle; }

.barra { fill: var(--accent); }

/* Zona sensible del tooltip: invisible pero clicable (con `fill: none` no
   recibiria el puntero). Da un blanco de dedo a marcas de 3 px. */
.zona { fill: transparent; }
/* La banda entera lleva al periodo que representa. */
.banda[href] { cursor: pointer; }
.banda:hover .barra { fill: var(--text); }

/* Los puntos son contexto; la mediana es la historia. */
.punto { fill: var(--text-muted); opacity: 0.35; }
.marca:hover .punto { opacity: 1; fill: var(--text); }
.linea {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* Anillo en color de superficie para que el nodo se lea sobre la línea. */
.nodo { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }

/* Zonas de FC: barra apilada. El color va en los tramos y las etiquetas
   usan tokens de texto, como en el resto de gráficas. */
.zonas { width: 100%; height: 26px; display: block; margin: 0.25rem 0 0.7rem; }
.zona-lab {
    fill: var(--surface);
    font-family: var(--mono-stack);
    font-size: 11px;
    font-weight: 500;
    text-anchor: middle;
}
.zonas-leyenda {
    list-style: none;
    display: grid;
    gap: 0.2rem 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}
.zonas-leyenda li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.zona-punto { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.zona-n, .zona-t { font-family: var(--mono-stack); color: var(--text); }
.zona-d { flex: 1; }
.zona-p { font-family: var(--mono-stack); width: 2.5rem; text-align: right; }

@media (max-width: 480px) {
    /* Las tres en una fila. Con dos columnas caian 2+1 y la tarjeta suelta
       de abajo desequilibraba la portada. Cabe apretando el aire lateral y
       bajando el cuerpo: el numero sigue siendo lo mas grande de la fila. */
    .tiles { gap: 0.4rem; }
    .tile { padding: 0.7rem 0.35rem; justify-content: center; }
    .tile-lab { font-size: 0.68rem; line-height: 1.3; }
    .tile-val { font-size: 1.15rem; }
    .records { grid-template-columns: 1fr; }
}

.sub-filtros { margin: 0 0 0.75rem; }

/* ---------- Detalle de carrera ---------- */

.tile-val.dispositivo { font-size: 0.85rem; font-family: var(--font-stack); }

.ruta {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    height: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.traza {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* Anillo en color de superficie: inicio y fin suelen solaparse con la traza. */
.hito { stroke: var(--surface); stroke-width: 2; }
.hito.inicio { fill: var(--text); }
.hito.fin { fill: var(--accent); }

/* Parciales en filas, no en tarjetas. */
.splits {
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.split {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--border);
}
.split:first-child { border-top: 0; }
.split-km { flex: 0 0 4.5rem; font-size: 0.8rem; color: var(--text-muted); }
.split-nota { font-size: 0.75rem; color: var(--text-muted); }
/* La FC va centrada en el hueco que quedaba entre el km y el tiempo. */
.split-fc {
    margin-left: auto;
    font-family: var(--mono-stack);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.split-fc small { font-size: 0.65rem; margin-left: 0.15rem; }
.split-t { margin-left: auto; font-family: var(--mono-stack); font-size: 0.95rem; }
.split-fc + .split-t { margin-left: 0; flex: 0 0 3.5rem; text-align: right; }
.split.mejor .split-t { color: var(--accent); }

.run-card a.run-link { display: contents; color: inherit; }
.run-card { cursor: pointer; }
.run-card:hover .run-date { color: var(--text); }

@media (max-width: 480px) {
    .splits { grid-template-columns: repeat(3, 1fr); }
    .zonas-leyenda { grid-template-columns: 1fr; }
}

.record { color: inherit; }
.record:hover { border-color: var(--accent); text-decoration: none; }


/* ---------- Cabecera del detalle ---------- */

.cab-detalle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.cab-volver { font-size: 0.9rem; }
.cab-detalle .cab-fecha {
    color: var(--text-muted);
    font-size: 0.95rem;
}
/* Cifras y recorrido van juntos y el par se centra: el mismo aire a los dos
   lados. El hueco tiene que dar de si para las unidades ("/km"), que van
   absolutas y fuera del flujo, o se meterian debajo del recorrido. */
.cab-cifras {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    text-align: center;
    margin-bottom: 2.5rem;
}
.cab-cifras .cifras { line-height: 1.25; }
.cifra-grande {
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.cifra-media { font-size: 1.5rem; font-weight: 400; }
/* La unidad se saca del flujo para que el centrado lo marque solo el numero:
   con "km" dentro, "10.06 km" se centraba como bloque y la cifra quedaba
   desplazada a la izquierda. */
.cab-cifras .num { position: relative; display: inline-block; }
.cab-cifras .uni {
    position: absolute;
    left: 100%;
    bottom: 0.15em;
    margin-left: 0.3em;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 300;
}

/* La media y la maxima acompañan al titulo, sin robarle peso. */
.h2-extra {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--text-muted);
    opacity: 0.75;
    margin-left: 0.4rem;
}

/* La ruta pasa a ser una miniatura de referencia, no la pieza principal. */
/* El alto es el de las tres lineas de cifras (1,25 de interlinea sobre
   1,5 + 2,6 + 1,5 rem), y el ancho sale solo de la proporcion del viewBox,
   que es la real del recorrido. Con un ancho fijo, una ruta alargada —59 de
   las 158 lo son— dejaba 46 px de vacio a cada lado dentro de su caja, y el
   par cifras+mapa se veia 23 px a la izquierda del centro aunque las cajas
   estuvieran centradas. Asi la caja abraza la traza y centrar las cajas es
   centrar lo que se ve. El tope solo entra con las muy apaisadas. */
.ruta-mini {
    width: auto;
    max-width: 14rem;
    height: 7rem;
}
.ruta-mini .traza { stroke-width: 3; }
.ruta-mini .hito { r: 8; stroke-width: 3; }

@media (max-width: 480px) {
    .cifra-grande { font-size: 2.1rem; }
    .cifra-media { font-size: 1.25rem; }
    .cab-cifras { gap: 2.25rem; }
    .cab-cifras .ruta-mini { max-width: 11rem; height: 5.75rem; }
}

/* ---------- Entrar ---------- */

.entrar {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.entrar h1 {
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 2rem;
}
.entrar form { width: 100%; max-width: 17rem; }
.entrar label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    text-align: left;
}
.entrar input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
    font-family: var(--mono-stack);
    letter-spacing: 0.15em;
    outline: none;
    transition: border-color 0.15s ease;
}
.entrar input:focus { border-color: var(--accent); }
.entrar button {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--accent);
    color: #0f0f0f;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.entrar button:hover { opacity: 0.9; }
.entrar .error {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: var(--accent);
    text-align: left;
}

/* Globo del tooltip de las gráficas. Fijo respecto a la ventana: el JS lo
   coloca con las coordenadas del puntero, sin cuentas de scroll. */
.tip {
    position: fixed;
    z-index: 20;
    padding: 0.35rem 0.55rem;
    max-width: 15rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--mono-stack);
    font-size: 0.75rem;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}