/* =====================================================
   RUTA.CSS · FINAL REAL
===================================================== */

#view-route{
  padding-top:4px;
  padding-bottom:110px !important;
}

#view-route .section-title{
  display:grid !important;
  grid-template-columns:62px 1fr !important;
  align-items:center !important;
  gap:16px !important;
  margin-bottom:22px !important;
}

#view-route .section-title > span{
  width:58px !important;
  height:58px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 12px 28px rgba(22,55,69,.12) !important;
}

#view-route .section-title h2{
  font-family:"Caveat",cursive !important;
  font-size:clamp(2.8rem,4.5vw,4rem) !important;
  line-height:.88 !important;
  letter-spacing:.01em !important;
  font-weight:700 !important;
  color:#123949 !important;
}

#view-route .section-title p{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
  font-size:1rem !important;
}

/* LISTA */
#routeList.route-list{
  display:grid !important;
  gap:18px !important;
}

/* CARD REAL */
#view-route .route-timeline-card{
  position:relative !important;
  overflow:hidden !important;

  display:grid !important;
  grid-template-columns:58px 1fr !important;
  gap:18px !important;
  align-items:flex-start !important;

  min-height:132px !important;
  padding:22px 24px !important;
  border-radius:30px !important;

  background:rgba(255,255,255,.93) !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 16px 36px rgba(22,55,69,.12) !important;
  backdrop-filter:blur(10px) !important;
}

/* línea lateral */
#view-route .route-timeline-card::before{
  content:"";
  position:absolute;
  left:0;
  top:20px;
  bottom:20px;
  width:7px;
  border-radius:0 20px 20px 0;
  background:linear-gradient(180deg,#0f5b73,#d9c47a);
}

/* textura */
#view-route .route-timeline-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,214,140,.06),transparent 42%),
    radial-gradient(circle at 82% 72%,rgba(119,176,198,.07),transparent 44%);
  opacity:.75;
}

/* COLUMNA IZQUIERDA */
#view-route .timeline-left{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

#view-route .timeline-dot{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;

  display:grid !important;
  place-items:center !important;

  background:rgba(255,255,255,.82) !important;
  color:#123949 !important;
  border:1px solid rgba(22,55,69,.16) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.10) !important;

  font-size:1.45rem !important;
}

#view-route .timeline-line{
  width:2px !important;
  flex:1 !important;
  min-height:52px !important;
  margin-top:10px !important;
  background:linear-gradient(180deg,rgba(15,91,115,.28),rgba(15,91,115,0)) !important;
  border-radius:999px !important;
}

/* CONTENIDO */
#view-route .timeline-content{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

#view-route .timeline-top{
  width:100% !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
}

#view-route .timeline-day{
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.72rem !important;
  letter-spacing:.16em !important;
  color:#7a5d2e !important;
  font-weight:900 !important;
  margin:0 0 4px !important;
}

#view-route .timeline-top h3{
  font-family:"Caveat",cursive !important;
  font-size:clamp(2rem,3vw,2.75rem) !important;
  font-weight:700 !important;
  line-height:.95 !important;
  letter-spacing:.01em !important;
  color:#123949 !important;
  margin:0 0 8px !important;
}

#view-route .timeline-km{
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  color:#0f5b73 !important;
  white-space:nowrap !important;
}

#view-route .route-steps{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:4px 0 8px !important;
}

#view-route .route-steps span,
#view-route .timeline-content .pill{
  display:inline-flex !important;
  align-items:center !important;
  min-height:28px !important;
  padding:0 11px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(22,55,69,.14) !important;
  box-shadow:0 8px 18px rgba(22,55,69,.08) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  color:#0f5b73 !important;
}

#view-route .timeline-mood{
  font-family:"Inter",system-ui,sans-serif !important;
  color:#4f6670 !important;
  font-size:.98rem !important;
  line-height:1.42 !important;
  margin:6px 0 0 !important;
}

/* BOTONES */
#view-route .timeline-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:12px !important;
}

#view-route .map-link,
#view-route .timeline-open{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:40px !important;
  min-height:40px !important;
  padding:0 16px !important;

  border-radius:15px !important;
  line-height:1 !important;

  background:linear-gradient(135deg,#123949,#0f5b73) !important;
  color:#fff8e8 !important;
  border:none !important;

  box-shadow:0 12px 24px rgba(22,55,69,.22) !important;
  font-family:"Inter",system-ui,sans-serif !important;
  font-size:.82rem !important;
  font-weight:900 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}

/* MOBILE */
@media(max-width:760px){
  #view-route .section-title{
    grid-template-columns:52px 1fr !important;
  }

  #view-route .section-title h2{
    font-size:2.1rem !important;
  }

  #view-route .route-timeline-card{
    grid-template-columns:46px 1fr !important;
    gap:14px !important;
    padding:18px !important;
    border-radius:26px !important;
  }

  #view-route .timeline-dot{
    width:42px !important;
    height:42px !important;
    font-size:1.25rem !important;
  }

  #view-route .timeline-top h3{
    font-size:2rem !important;
  }

  #view-route .timeline-actions{
    gap:8px !important;
  }

  #view-route .map-link,
  #view-route .timeline-open{
    height:38px !important;
    min-height:38px !important;
    padding:0 13px !important;
    font-size:.78rem !important;
  }
}
/* =====================================================
   RUTA · CIERRE LIMPIO FINAL
===================================================== */

#view-route{
  padding-bottom:130px !important;
}

#view-route .route-timeline-card{
  min-height:150px !important;
}

#view-route .timeline-content{
  justify-content:center !important;
}

#view-route .timeline-top h3{
  font-family:"Caveat",cursive !important;
}

#view-route .route-footer{
  margin-top:34px !important;
}
/* =====================================================
   RUTA · CIERRE VISUAL FINAL PRO
===================================================== */

body #view-route{
  padding-bottom:140px !important;
}

/* Lista en dos columnas tablet/escritorio */
body #view-route #routeList.route-list,
body #view-route .route-list{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:start !important;
}

/* Card más compacta */
body #view-route .route-timeline-card{
  min-height:auto !important;
  padding:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:64px 1fr !important;
  background:#fff !important;
}

/* columna icono */
body #view-route .timeline-left{
  padding:22px 0 !important;
  background:linear-gradient(180deg,#eef9fc,#fff8e8) !important;
}

body #view-route .timeline-dot{
  width:46px !important;
  height:46px !important;
  border-radius:16px !important;
  font-size:1.35rem !important;
}

body #view-route .timeline-line{
  min-height:70px !important;
}

/* contenido */
body #view-route .timeline-content{
  padding:20px 22px !important;
}

body #view-route .timeline-day{
  font-size:.76rem !important;
  letter-spacing:.16em !important;
  color:#7a5d2e !important;
}

body #view-route .timeline-top{
  display:block !important;
}

body #view-route .timeline-top h3{
  font-size:clamp(1.9rem,3vw,2.55rem) !important;
  line-height:.92 !important;
  margin:4px 0 8px !important;
}

body #view-route .timeline-km{
  display:inline-flex !important;
  margin-top:4px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  background:#fff8e8 !important;
  border:1px solid rgba(22,55,69,.12) !important;
  font-size:.78rem !important;
}

/* pasos/chips */
body #view-route .route-steps{
  gap:7px !important;
  margin:10px 0 !important;
}

body #view-route .route-steps span,
body #view-route .timeline-content .pill{
  min-height:26px !important;
  padding:0 10px !important;
  font-size:.72rem !important;
  background:#f7fbff !important;
}

/* texto */
body #view-route .timeline-mood{
  font-size:.94rem !important;
  margin-top:8px !important;
}

/* acciones */
body #view-route .timeline-actions{
  margin-top:14px !important;
  gap:9px !important;
}

body #view-route .map-link,
body #view-route .timeline-open{
  height:36px !important;
  min-height:36px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  font-size:.78rem !important;
}

/* colores alternos por día */
body #view-route .route-timeline-card:nth-child(1) .timeline-left{background:linear-gradient(180deg,#eef9fc,#fff) !important;}
body #view-route .route-timeline-card:nth-child(2) .timeline-left{background:linear-gradient(180deg,#fff3ef,#fff) !important;}
body #view-route .route-timeline-card:nth-child(3) .timeline-left{background:linear-gradient(180deg,#f2fbf4,#fff) !important;}
body #view-route .route-timeline-card:nth-child(4) .timeline-left{background:linear-gradient(180deg,#f2f7ff,#fff) !important;}
body #view-route .route-timeline-card:nth-child(5) .timeline-left{background:linear-gradient(180deg,#f6f2ff,#fff) !important;}
body #view-route .route-timeline-card:nth-child(6) .timeline-left{background:linear-gradient(180deg,#fff8e8,#fff) !important;}
body #view-route .route-timeline-card:nth-child(7) .timeline-left{background:linear-gradient(180deg,#f0fbff,#fff) !important;}
body #view-route .route-timeline-card:nth-child(8) .timeline-left{background:linear-gradient(180deg,#f7f7f7,#fff) !important;}

/* móvil */
@media(max-width:900px){
  body #view-route #routeList.route-list,
  body #view-route .route-list{
    grid-template-columns:1fr !important;
  }

  body #view-route .route-timeline-card{
    grid-template-columns:56px 1fr !important;
  }

  body #view-route .timeline-content{
    padding:18px !important;
  }

  body #view-route .timeline-top h3{
    font-size:2rem !important;
  }
}
/*====================================================
  IDENTIDAD VISUAL POR DÍA
====================================================*/

/* Día 1 */
#view-route .route-timeline-card:nth-child(1){
    border-top:5px solid #2f8db8;
    background:
      linear-gradient(90deg,rgba(47,141,184,.07),transparent 28%),
      #fff;
}

/* Día 2 */
#view-route .route-timeline-card:nth-child(2){
    border-top:5px solid #cf8f42;
    background:
      linear-gradient(90deg,rgba(207,143,66,.07),transparent 28%),
      #fff;
}

/* Día 3 */
#view-route .route-timeline-card:nth-child(3){
    border-top:5px solid #53a46d;
    background:
      linear-gradient(90deg,rgba(83,164,109,.07),transparent 28%),
      #fff;
}

/* Día 4 */
#view-route .route-timeline-card:nth-child(4){
    border-top:5px solid #5b83d7;
    background:
      linear-gradient(90deg,rgba(91,131,215,.07),transparent 28%),
      #fff;
}

/* Día 5 */
#view-route .route-timeline-card:nth-child(5){
    border-top:5px solid #57b8b4;
    background:
      linear-gradient(90deg,rgba(87,184,180,.07),transparent 28%),
      #fff;
}

/* Día 6 */
#view-route .route-timeline-card:nth-child(6){
    border-top:5px solid #8474cf;
    background:
      linear-gradient(90deg,rgba(132,116,207,.07),transparent 28%),
      #fff;
}

/* Día 7 */
#view-route .route-timeline-card:nth-child(7){
    border-top:5px solid #d76363;
    background:
      linear-gradient(90deg,rgba(215,99,99,.07),transparent 28%),
      #fff;
}

/* Día 8 */
#view-route .route-timeline-card:nth-child(8){
    border-top:5px solid #7b7b7b;
    background:
      linear-gradient(90deg,rgba(123,123,123,.06),transparent 28%),
      #fff;
}
#view-route .route-timeline-card:nth-child(1) .timeline-dot{background:#e9f7fd;}
#view-route .route-timeline-card:nth-child(2) .timeline-dot{background:#fff4e7;}
#view-route .route-timeline-card:nth-child(3) .timeline-dot{background:#edf8ef;}
#view-route .route-timeline-card:nth-child(4) .timeline-dot{background:#eef4ff;}
#view-route .route-timeline-card:nth-child(5) .timeline-dot{background:#eefcfc;}
#view-route .route-timeline-card:nth-child(6) .timeline-dot{background:#f2efff;}
#view-route .route-timeline-card:nth-child(7) .timeline-dot{background:#fff0f0;}
#view-route .route-timeline-card:nth-child(8) .timeline-dot{background:#f3f3f3;}