/* Route pages. Builds on /base.css and /motos/motos.css. */

/* Filters: three short rows of chips */
.r-filtros { margin-top: 8px; }
.r-fl { margin-top: 18px; font-family: var(--cond); font-weight: 800; font-size: 20px; }
.r-filtros .chips { margin-top: 8px; }

/* Route cards: name first, then where, what and how it was last time */
.r-cards { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 14px; }
.r-cards a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--linea); border-top: 4px solid var(--barro); border-radius: var(--radius-md); text-decoration: none; }
.r-cards a:hover { border-color: var(--noche); border-top-color: var(--barro); }
.r-nivel { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--noche); color: #fff; font-family: var(--cond); font-weight: 600; font-size: 15px; }
.r-n { margin-top: 6px; font-family: var(--cond); font-weight: 800; font-size: 30px; line-height: 1; }
.r-z { color: var(--gris); font-size: 15px; }
.r-d { font-size: 15px; }
.r-acc { align-self: flex-start; margin-top: 2px; padding: 1px 9px; border-radius: 999px; background: #fff4d6; color: #6b5200; font-size: 13px; }
.r-pill { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #ecedeb; color: #3d4447; font-size: 14px; font-weight: 700; }
.r-pill.fresco { background: #e3eee6; color: var(--monte); }
.r-cta .btn { margin-top: 4px; }

/* One route */
.r-alias { margin-top: 10px; color: var(--niebla); }
.r-body { max-width: 860px; padding-bottom: 64px; }
.r-tiles { margin-top: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r-tiles .r-dur { font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.35; }
.r-llanta { margin-top: 14px; padding: 14px 16px; background: var(--noche); color: #fff; border-radius: var(--radius-md); }
.r-ll-k { font-size: 14px; color: var(--niebla); }
.r-ll-v { font-family: var(--cond); font-weight: 800; font-size: 24px; line-height: 1.1; }
.r-ll-n { margin-top: 6px; font-size: 15px; color: var(--niebla); }
.r-ll-n a { color: var(--barro-claro); }
.r-warn { margin-top: 14px; padding: 12px 16px; background: #fff4d6; border-radius: var(--radius-sm); max-width: 68ch; }
.r-avisos { margin-top: 12px; display: grid; gap: 10px; }
.r-avisos li { padding: 12px 16px; background: #f6e3e1; border-radius: var(--radius-sm); }
.r-avisos .pt { font-weight: 700; }
.r-avisos .meta { font-size: 15px; color: var(--gris); }
.r-det { margin-top: 6px; font-style: italic; }
.r-motos { margin-top: 12px; display: grid; gap: 8px; }
.r-motos li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--linea); border-left: 4px solid var(--monte); border-radius: var(--radius-sm); }
.r-motos li.ok-con_cuidado { border-left-color: #c9a227; }
.r-motos li.ok-no { border-left-color: var(--alerta); }
.r-motos .meta { margin-top: 2px; font-size: 15px; color: var(--gris); }
.r-eps { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.r-ep { padding: 14px 16px; background: var(--surface); border: 1px solid var(--linea); border-radius: var(--radius-md); }
.r-ep h3 { font-size: 24px; }
.r-meses { font-size: 14px; color: var(--gris); }
.r-ep p + p { margin-top: 8px; }
.r-rep { font-size: 15px; color: var(--gris); }
.r-list { margin-top: 10px; }
.rutas .m-sec > p .btn { margin-top: 10px; }

@media (max-width: 760px) {
  .r-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-eps { grid-template-columns: minmax(0, 1fr); }
}
.r-pill.aviso { background: #f6e3e1; color: #8a2a1f; }
.r-warn.r-area { background: #f6e3e1; border-left: 4px solid #8a2a1f; }
.r-acc.r-area { background: #f6e3e1; color: #8a2a1f; }
.r-acc.r-wk { background: #e6ecf2; color: #2c4a63; }
.r-wk-l { margin-top: 10px; display: grid; gap: 8px; }
.r-wk-l li { padding: 10px 14px; background: var(--surface); border: 1px solid var(--linea); border-radius: var(--radius-sm); }
.r-wk-l a { font-weight: 700; }

/* List or map, and the map itself */
.m-count .r-vista { display: flex; gap: 4px; }
.r-vista a { padding: 4px 14px; border: 1px solid var(--noche); border-radius: 999px; font-family: var(--cond); font-weight: 600; font-size: 16px; text-decoration: none; }
.r-vista a[aria-current="page"] { background: var(--noche); color: #fff; }
.r-mapa { margin-top: 12px; height: min(70vh, 640px); background: #e8eae6; border: 1px solid var(--linea); border-radius: var(--radius-md); overflow: hidden; }
.r-mapa noscript p { padding: 16px; }
.r-mapa-1 { height: 300px; }
.r-mapa + .checked { margin-top: 8px; }
.r-mini { margin-top: 16px; columns: 2 18rem; column-gap: 32px; }
.r-mini li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.r-mini a { font-weight: 700; }
.r-mini span { display: block; font-size: 14px; color: var(--gris); }
.r-pop p { margin: 0; padding: 4px 0; }
.r-pop p + p { border-top: 1px solid var(--linea); }
.r-pop a { font-weight: 700; }
.r-pop span { display: block; font-size: 13px; color: var(--gris); }

/* Riding at your own risk */
.r-riesgo { margin-top: 40px; padding: 16px 18px; border: 2px solid var(--noche); border-radius: var(--radius-md); max-width: 72ch; }
.r-riesgo h2 { font-family: var(--cond); font-weight: 800; font-size: 26px; line-height: 1.05; }
.r-riesgo p { margin-top: 6px; }