/* "Armá tu ruta" (/rutas/armar/). Builds on /rutas/rutas.css: the same map beside a panel as the
   list of routes (.r-split), with the panel holding the search, the pieces and the file. */

.a-panel { padding-bottom: 24px; }
.a-panel h2 { font-family: var(--cond); font-weight: 800; font-size: 28px; line-height: 1.05; }
.a-cargando { margin-top: 20px; color: var(--gris); }
.a-nota { margin-top: 6px; font-size: 15px; color: var(--gris); }
.a-error { color: var(--alerta); }
.a-panel label { font-family: var(--cond); font-weight: 700; font-size: 19px; }
.a-panel input[type="search"], .a-panel input[type="text"] { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--gris); border-radius: var(--radius-sm); background: var(--surface); color: var(--noche); font: inherit; font-size: 18px; }
.a-panel input:focus-visible, .a-panel button:focus-visible { outline: 3px solid var(--barro); outline-offset: 2px; }
.a-buscar { margin-top: 20px; }

/* Small buttons on each piece and in the search results */
.a-b { min-height: 40px; padding: 4px 12px; border: 1.5px solid var(--noche); border-radius: var(--radius-sm); background: var(--surface); color: var(--noche); font-family: var(--cond); font-weight: 700; font-size: 16px; cursor: pointer; }
.a-b:hover:not(:disabled) { background: var(--noche); color: #fff; }
.a-b:disabled { opacity: 0.35; cursor: default; }
.a-b-i { min-width: 40px; padding: 4px 0; font-size: 18px; }
.a-b[aria-expanded="true"] { background: var(--noche); color: #fff; }

.a-res, .a-mias, .a-avisos { padding: 0; list-style: none; }
.a-res { margin-top: 8px; }
.a-res li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.a-res-t b { display: block; line-height: 1.3; }
.a-res .meta, .a-mias .meta { display: block; font-size: 14px; color: var(--gris); }

.a-vacia { margin-top: 28px; padding: 18px; background: var(--surface); border: 1px solid var(--linea); border-radius: var(--radius-md); }
.a-pasos { margin-top: 10px; padding-left: 1.3em; list-style: decimal; }
.a-pasos li + li { margin-top: 6px; }

.a-sec { margin-top: 32px; padding-top: 16px; border-top: 3px solid var(--noche); }
.a-sec > label, .a-sec > fieldset { display: block; margin-top: 14px; }
.a-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.a-herr { display: flex; gap: 6px; }
.a-herr button { min-height: 40px; padding: 4px 12px; border: 0; background: none; color: var(--noche); font: inherit; font-size: 15px; text-decoration: underline; cursor: pointer; }
.a-herr button:disabled { color: var(--niebla); text-decoration: none; cursor: default; }
.a-resumen { margin-top: 8px; font-size: 16px; }
.a-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.a-acciones .btn { font-size: 19px; padding: 12px 18px; }
.a-acciones .btn-line { padding: 10px 16px; }

/* The pieces, each with its colour on the map */
.a-tramos { margin: 12px 0 0; padding: 0; list-style: none; }
.a-tramo { padding: 12px 0 12px 14px; border-left: 5px solid var(--c, var(--noche)); background: var(--surface); }
.a-tramo + .a-tramo, .a-hueco + .a-tramo { margin-top: 8px; }
.a-t-cab { display: flex; gap: 10px; align-items: flex-start; padding-right: 12px; }
.a-num { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--noche)); color: #fff; font-family: var(--cond); font-weight: 800; font-size: 16px; }
.a-t-txt b { display: block; line-height: 1.3; }
.a-t-meta { display: block; margin-top: 2px; font-size: 15px; color: var(--gris); }
.a-t-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-right: 12px; }
.a-corte { margin-top: 12px; padding: 12px 12px 4px 0; border-top: 1px solid var(--linea); }
.a-corte label { display: block; font-size: 17px; }
.a-corte label + input { margin-top: 2px; }
.a-corte input[type="range"] { display: block; width: 100%; min-height: 44px; accent-color: var(--c, var(--barro)); }
.a-corte output { display: block; margin-bottom: 10px; font-size: 15px; color: var(--gris); }
.a-hueco { margin: 8px 0 0; padding: 8px 12px; border: 2px dashed var(--niebla); border-radius: var(--radius-sm); font-size: 15px; color: var(--gris); }

/* Altitude profile */
.a-perfil { margin-top: 10px; }
.a-perfil svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.a-p-g { stroke: var(--linea); stroke-width: 1; }
.a-p-y { font-size: 12px; fill: var(--gris); text-anchor: end; }
.a-p-area { fill: rgba(181, 85, 42, 0.16); }
.a-p-linea { fill: none; stroke: var(--barro-oscuro); stroke-width: 2; stroke-linejoin: round; }
.a-p-corte { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 3 3; }
.a-p-n { font-size: 12px; font-weight: 700; }
.a-p-km { font-size: 12px; fill: var(--gris); text-anchor: end; }
.a-p-cursor { stroke: var(--noche); stroke-width: 1.5; }
.a-p-dato { font-size: 13px; font-weight: 700; fill: var(--noche); paint-order: stroke; stroke: #fff; stroke-width: 4px; }

/* Before you go */
.a-avisos { margin-top: 10px; display: grid; gap: 8px; }
.a-av { padding: 10px 14px; background: var(--surface); border-left: 4px solid var(--linea); font-size: 16px; }
.a-av-area, .a-av-rojo { background: #f6e3e1; border-left-color: var(--alerta); }
.a-av a { font-weight: 700; }

.a-formato { margin: 14px 0 0; padding: 0; border: 0; }
.a-formato legend { font-family: var(--cond); font-weight: 700; font-size: 19px; }
.a-panel .a-formato label { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; font-family: var(--body); font-weight: 400; font-size: 16px; }
.a-formato input { margin-top: 5px; accent-color: var(--barro); }

.a-mias { margin-top: 10px; }
.a-mias li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.a-mias a { font-weight: 700; }

/* Legend under the map */
.r-leyenda i.a-l-tuya { background: #d62828; height: 5px; }
.r-leyenda i.a-l-otro { background: #6b7377; opacity: 0.6; }
.r-leyenda i.a-l-hueco { height: 0; background: none; border-top: 3px dashed var(--noche); border-radius: 0; }

/* On a computer the panel scrolls beside the map; the map card stays over the map. */
@media (min-width: 1000px) {
  .armar .r-lado-mapa .r-sel { bottom: 44px; }
}

/* The own-risk note at the top of the builder (owner, 25 Oct 2026). */
.a-riesgo { margin-top: 18px; padding: 14px 16px; background: #f6e3e1; border-left: 5px solid var(--alerta); border-radius: var(--radius-sm); max-width: 78ch; }
.a-riesgo p { font-size: 16px; }
.a-riesgo b { color: var(--alerta); }

/* Three ways to start: piece by piece, from a place to another, a loop from home. */
.a-modos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.a-modos [role="tab"] { min-height: 42px; padding: 6px 14px; border: 1.5px solid var(--noche); border-radius: 999px; background: var(--surface); color: var(--noche); font-family: var(--cond); font-weight: 700; font-size: 17px; cursor: pointer; }
.a-modos [role="tab"][aria-selected="true"] { background: var(--noche); color: #fff; }
.a-modo { margin-top: 14px; }
.a-modo > .a-nota:first-child { margin-top: 0; }

/* Search results and the list of every route */
.a-res-h { margin-top: 14px; font-family: var(--cond); font-weight: 700; font-size: 17px; color: var(--gris); }
.a-res-l { margin: 4px 0 0; padding: 0; list-style: none; }
.a-res-l li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.a-ruta-d { border-bottom: 1px solid var(--linea); }
.a-ruta-d summary { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; cursor: pointer; list-style-position: inside; }
.a-ruta-d summary .meta { font-size: 14px; color: var(--gris); }
.a-ruta-d .a-res-l { margin: 0 0 8px 16px; }
.a-todas { margin-top: 12px; }
.a-todas > summary { cursor: pointer; font-family: var(--cond); font-weight: 700; font-size: 18px; color: var(--barro-oscuro); }
.a-todas-l, #a-todas-l { margin-top: 6px; max-height: 60vh; overflow-y: auto; }

/* The rider's own tracks */
.a-tuyo { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); }
.a-panel .a-tuyo-btn { display: inline-flex; font-family: var(--cond); font-weight: 700; font-size: 18px; padding: 10px 16px; cursor: pointer; }
.a-tuyo input:focus-visible + .a-nota, .a-tuyo-btn:focus-within { outline: 3px solid var(--barro); }
.a-tuyos { margin: 8px 0 0; padding: 0; list-style: none; }
.a-tuyos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linea); }

/* Choosing a place */
.a-lugar { margin-top: 14px; }
.a-lugar-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.a-lugar-ok { margin-top: 4px; font-weight: 700; }
.a-lugar-ok:empty { display: none; }
.a-sug { margin: 4px 0 0; padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: var(--radius-sm); background: var(--surface); }
.a-sug:empty { display: none; }
.a-sug li + li { border-top: 1px solid var(--linea); }
.a-sug-b { display: block; width: 100%; min-height: 40px; padding: 6px 12px; border: 0; background: none; color: var(--noche); font: inherit; text-align: left; cursor: pointer; }
.a-sug-b:hover, .a-sug-b:focus-visible { background: var(--hueso); }
.a-eligiendo { margin-top: 6px; padding: 8px 12px; background: var(--noche); color: #fff; border-radius: var(--radius-sm); font-weight: 700; }
.r-lado-mapa .a-eligiendo { margin-left: 20px; margin-right: 20px; }
@media (min-width: 1000px) { .r-lado-mapa .a-eligiendo { position: absolute; top: 12px; left: 12px; right: 60px; margin: 0; z-index: 3; } }

/* The loop's length */
.a-largo { margin: 16px 0 0; padding: 0; border: 0; }
.a-largo legend { font-family: var(--cond); font-weight: 700; font-size: 19px; }
.a-largo-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.a-largo-t { min-width: 7.5em; font-size: 15px; color: var(--gris); }
.a-chip { display: inline-flex; align-items: center; min-height: 38px; padding: 4px 12px; border: 1.5px solid var(--noche); border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; }
.a-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.a-chip:has(input:checked) { background: var(--noche); color: #fff; }
.a-chip:has(input:focus-visible) { outline: 3px solid var(--barro); outline-offset: 2px; }

/* Proposals */
.a-planes { margin-top: 12px; display: grid; gap: 10px; }
.a-plan { padding: 14px 16px; background: var(--surface); border: 1px solid var(--linea); border-left: 5px solid #1d4ed8; border-radius: var(--radius-sm); }
.a-plan h3 { font-family: var(--cond); font-weight: 800; font-size: 22px; line-height: 1.1; }
.a-plan-m { margin-top: 4px; font-size: 15px; }
.a-plan-t { margin: 6px 0 0; padding-left: 1.1em; font-size: 15px; color: var(--gris); }
.a-plan .a-acciones { margin-top: 10px; }

/* The ride's start and end, and its road connections */
.a-extremos { margin-top: 6px; font-size: 15px; }
.a-extremos .a-b { min-height: 32px; margin-left: 2px; font-size: 14px; }
.a-hueco.a-calle { border-style: solid; border-color: #94a3b8; color: #334155; background: #f1f5f9; }
.r-leyenda i.a-l-calle { background: #475569; height: 4px; }

/* Drawing a piece (Stage C): the button in the panel, the bar under the map, the points. */
.a-dibujar { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); }
.a-dib { margin: 8px 20px 0; padding: 12px 14px; background: var(--surface); border: 2px solid var(--noche); border-radius: var(--radius-sm); }
.a-dib-t { font-weight: 700; }
.a-dib-modo { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; border: 0; }
.a-dib-modo .a-chip:has(input:disabled) { opacity: 0.4; cursor: default; }
.a-dib-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.a-dib-acc .btn { padding: 8px 20px; font-size: 18px; }
@media (min-width: 1000px) { .r-lado-mapa .a-dib { margin: 8px 0 0; } }
.a-v { z-index: 2; }
.a-vm { z-index: 1; }
.a-v, .a-vm { display: grid; place-items: center; width: 36px; height: 36px; cursor: grab; touch-action: none; }
.a-v::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--c, #15191b); box-shadow: 0 1px 3px rgba(21, 25, 27, 0.45); }
.a-v.a-v-ini::before { background: var(--c, #15191b); }
.a-vm::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c, #15191b); border: 2px solid #fff; opacity: 0.6; }
.a-vm:hover::before { opacity: 1; }
.a-v:focus-visible, .a-vm:focus-visible { outline: 3px solid var(--barro); outline-offset: -4px; border-radius: 50%; }
.r-leyenda i.a-l-dib { height: 5px; background: repeating-linear-gradient(90deg, #d62828 0 8px, transparent 8px 12px); }

/* Where the rider is, first among the ways to set a start or an end. */
.a-b-gps, .a-sug-gps { display: inline-flex; align-items: center; gap: 6px; }
.a-sug-gps { font-weight: 700; color: var(--barro-oscuro); }