/* Diálogo do dia: cabeçalho, linha do tempo com deslocamentos e transporte da cidade.
   Alinhado ao tema da Central (theme.css) — mesmas superfícies, tipografia e forma. */

/* cartão do dia na lista ---------------------------------------- */
.day-card.has-guide{cursor:pointer;position:relative}
.day-card.has-guide:focus-visible{outline:3px solid rgba(167,58,0,.35);outline-offset:3px}
.day-card.has-guide::after{
  content:'Abrir dia →';position:absolute;right:44px;bottom:6px;
  color:var(--secondary);font:700 10px/12px var(--font-ui);letter-spacing:.04em;white-space:nowrap;
}

/* cabeçalho do diálogo ------------------------------------------ */
.day-detail-head{
  padding:32px 32px 26px;
  background:var(--surface-low);
  border-bottom:1px solid var(--outline-variant);
}
.day-detail-head h2{
  margin:6px 0 8px;font:400 clamp(28px,4vw,40px)/1.08 var(--font-display);
  letter-spacing:-.02em;color:var(--on-surface);
}
.day-detail-head > p:last-of-type{
  margin:0;color:var(--on-surface-variant);font-size:15px;line-height:24px;max-width:46rem;
}
.day-detail-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.day-detail-badges span{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:var(--surface-lowest);color:var(--on-surface);
  font:400 12px/16px var(--font-mono);box-shadow:var(--shadow-sm);
}
.day-detail-badges span svg{width:15px;height:15px;color:var(--secondary)}
.day-detail-badges .pending-badge{
  background:var(--error-container);color:var(--on-error-container);
  font-family:var(--font-ui);font-weight:700;
}
.day-pending-note{
  margin-bottom:20px;padding:14px 16px;border-radius:var(--radius-lg);
  background:var(--error-container);color:var(--on-error-container);
  font-size:14px;line-height:21px;
}

/* mapa do dia ---------------------------------------------------- */
.day-map-wrap{margin-bottom:26px}
#dayDetailMap{
  height:290px;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-container);
}
.day-map-empty{
  height:150px;border-radius:var(--radius);background:var(--surface-low);
  display:grid;place-items:center;text-align:center;padding:20px;
  color:var(--on-surface-variant);font-size:14px;
}
.day-map-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;
}
.day-map-actions a{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  padding:8px 13px;border-radius:var(--radius-lg);
  background:var(--surface-container);color:var(--on-surface);
  font:600 12px/16px var(--font-ui);
}
.day-map-actions a:hover{background:var(--surface-high)}
.day-map-actions small{color:var(--on-surface-variant);font-size:12px;flex:1;min-width:200px}

/* linha do tempo: paradas e deslocamentos ------------------------ */
.day-route-list{list-style:none;margin:18px 0 0;padding:0;position:relative}
.day-route-list:before{
  content:"";position:absolute;left:17px;top:14px;bottom:14px;
  width:2px;background:var(--surface-container);
}

.day-stop{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:12px 14px 12px 0;
}
.stop-number{
  position:relative;z-index:1;flex-shrink:0;
  width:36px;height:36px;border-radius:999px;
  background:var(--primary);color:var(--on-primary);
  display:grid;place-items:center;
  font:400 13px/1 var(--font-mono);font-weight:700;
  box-shadow:0 0 0 4px var(--surface-lowest);
}
.day-stop.pending .stop-number{background:var(--error);color:#fff}
.stop-body{flex:1;min-width:0;padding-top:2px}
.stop-body strong{display:block;font:600 15px/22px var(--font-ui)}
.stop-body small{display:block;color:var(--on-surface-variant);font:400 12px/17px var(--font-mono);margin-top:2px}
.stop-open{
  flex-shrink:0;border:0;background:var(--surface-low);color:var(--secondary);
  padding:6px 11px;border-radius:var(--radius-lg);
  font:600 12px/16px var(--font-ui);align-self:center;
}
.stop-open:hover{background:var(--surface-container)}

.day-leg{
  position:relative;display:flex;align-items:center;gap:14px;
  margin:2px 0 2px 0;padding:10px 14px 10px 0;
}
.leg-icon{
  position:relative;z-index:1;flex-shrink:0;
  width:36px;height:36px;border-radius:999px;
  background:var(--surface-lowest);color:var(--on-surface-variant);
  display:grid;place-items:center;
  box-shadow:0 0 0 4px var(--surface-lowest),inset 0 0 0 1px var(--outline-variant);
}
.leg-icon svg{width:17px;height:17px}
.day-leg.transit .leg-icon{color:var(--secondary);box-shadow:0 0 0 4px var(--surface-lowest),inset 0 0 0 1px var(--secondary-fixed)}
.leg-body{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px;
  background:var(--surface-low);border-radius:var(--radius-lg);padding:10px 14px;
}
.day-leg.transit .leg-body{background:var(--secondary-fixed)}
.leg-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;min-width:0}
.leg-main b{font:700 13px/18px var(--font-ui)}
.leg-main span{color:var(--on-surface-variant);font:400 12px/17px var(--font-mono)}
.day-leg.transit .leg-main span{color:var(--on-secondary-fixed)}
.leg-links{display:flex;gap:12px;flex-shrink:0}
.leg-links a{
  color:var(--secondary);text-decoration:none;
  font:600 12px/16px var(--font-ui);white-space:nowrap;
}
.day-leg.transit .leg-links a{color:var(--on-secondary-fixed)}
.leg-links a:hover{text-decoration:underline}
.leg-note{
  margin:14px 0 0;color:var(--on-surface-variant);
  font:400 12px/18px var(--font-ui);
}

/* como circular na cidade ---------------------------------------- */
.city-transit{
  background:var(--surface-low);border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.city-transit-head{display:flex;align-items:center;gap:12px}
.city-transit-head .ic{
  width:40px;height:40px;border-radius:var(--radius-lg);flex-shrink:0;
  background:var(--surface-lowest);color:var(--secondary);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);
}
.city-transit-head .ic svg{width:21px;height:21px}
.city-transit-head strong{display:block;font:600 17px/24px var(--font-ui)}
.transit-modes{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.transit-modes span{
  padding:3px 9px;border-radius:999px;background:var(--surface-container);
  font:400 11px/16px var(--font-mono);color:var(--on-surface);
}
.city-transit > p{margin:0;color:var(--on-surface-variant);font-size:14px;line-height:22px}

/* pontos interessantes ------------------------------------------- */
.day-interest-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:14px;
}
.day-interest-card{
  background:var(--surface-lowest);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow-sm);
}
.day-interest-card .interest-type{
  display:inline-block;padding:3px 9px;border-radius:999px;
  background:var(--secondary-fixed);color:var(--on-secondary-fixed);
  font:700 10px/14px var(--font-ui);letter-spacing:.04em;text-transform:uppercase;
}
.day-interest-card h4{margin:10px 0 6px;font:500 19px/25px var(--font-display)}
.day-interest-card p{margin:0 0 8px;color:var(--on-surface-variant);font-size:13px;line-height:20px}
.day-interest-card .interest-why{color:var(--on-surface)}
.day-interest-card a{
  color:var(--secondary);text-decoration:none;font:600 12px/16px var(--font-ui);
}

@media(max-width:760px){
  .day-detail-head{padding:24px 20px 20px}
  .day-route-list:before{left:15px}
  .stop-number,.leg-icon{width:32px;height:32px}
  .leg-body{flex-direction:column;align-items:flex-start;gap:6px}
  .day-interest-grid{grid-template-columns:1fr}
  #dayDetailMap{height:220px}
}