:root{--ink:#183d36;--muted:#74817c;--paper:#fafbf7;--line:#e2e7df;--lime:#d5ef89;--green:#215447;--font:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:var(--font);background:var(--paper)}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #6ca888;outline-offset:3px}input:focus,select:focus{outline:2px solid #83b493;outline-offset:2px}button{color:inherit}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:#fff;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);display:flex;gap:11px;align-items:center;font-family:Manrope,system-ui,sans-serif;font-size:25px;font-weight:800;letter-spacing:-1.1px}.brand-icon{display:grid;place-items:center;background:var(--ink);border-radius:13px;color:var(--lime);width:43px;height:47px;font-size:37px;font-weight:500}.brand-light{font-weight:400}.brand small{display:block;font:600 16px var(--font);letter-spacing:2.1px;margin-top:5px}.header-right{display:flex;gap:32px;align-items:center;font-size:16px}.local-badge{border:1px solid var(--line);padding:8px 12px;border-radius:20px;color:#63766b}.local-badge i,.map-tag i{display:inline-block;width:6px;height:6px;background:#86ad60;border-radius:50%;margin-right:7px}.town{font-size:16px}.town span{margin-left:12px}main{display:grid;grid-template-columns:430px 1fr;max-width:1900px;margin:auto;height:calc(100dvh - 96px);min-height:650px}.planner{padding:34px 34px 20px;overflow:auto;border-right:1px solid var(--line);scrollbar-width:thin}.eyebrow{font-size:16px;letter-spacing:2.1px;font-weight:700;color:#6c8371}h1{font:800 34px/1.22 Manrope,system-ui,sans-serif;letter-spacing:-1.5px;margin:15px 0 13px}h1 em{font-style:normal;color:#789474}.intro p{color:var(--muted);font-size:16px;line-height:1.75;margin:0 0 27px}.journey-fields{position:relative}.field{border:1px solid #dce3d8;border-radius:12px;background:#fff;padding:12px 13px 11px}.field+button+.field{margin-top:10px}.field label{display:flex;gap:8px;align-items:center;font-size:16px;font-weight:700;color:#849187;text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}.point{display:inline-block;width:8px;height:8px;flex-shrink:0}.origin-point{border:2px solid #5c836e;border-radius:50%}.destination-point{background:#294d42;border-radius:2px}.input-row{display:flex;align-items:center;gap:3px}.input-row input{width:100%;min-width:0;border:0;padding:4px 0;color:var(--ink);font-size:16px;background:transparent}.input-row input::placeholder{color:#9aa299}.icon-button{background:transparent;border:0;font-size:20px;line-height:25px;width:26px;flex-shrink:0;color:#6b8172;border-radius:6px}.icon-button:hover{background:#edf3e7}.swap{position:absolute;right:17px;top:67px;z-index:1;border:1px solid #dce3d8;border-radius:50%;background:var(--paper);height:28px;width:28px;font-size:18px}.settings-row{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin:17px 0;color:#79877c}.settings-row select{border:0;background:transparent;color:#42614b;font-size:16px;cursor:pointer}.primary{width:100%;background:var(--green);color:#fff;border:0;border-radius:10px;padding:15px 18px;text-align:left;font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#183d36}.primary span{color:var(--lime);font-size:20px}.status{font-size:16px;line-height:1.5;color:#7d4a25;margin:10px 0 0}.status:empty{display:none}.more-options{font-size:16px;color:#768477;margin-top:12px}.more-options summary{cursor:pointer}.more-options label{display:flex;align-items:start;gap:5px;margin:12px 0}.more-options p{line-height:1.5}.section-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:25px;padding-top:21px}.section-heading h2{font-size:16px;font-weight:600;margin:0}.section-heading>span{font-size:16px;color:#839180}.empty-state{text-align:center;padding:22px 20px 18px}.empty-symbol{display:inline-grid;place-items:center;width:49px;height:49px;border-radius:14px;background:#eaf0e1;color:#719668;font-size:28px;transform:rotate(-5deg)}.empty-state h3{font:700 18px/1.45 Manrope,system-ui,sans-serif;letter-spacing:-.4px;margin:15px 0 8px}.empty-state p{font-size:16px;line-height:1.6;color:#81907f}.empty-state button{background:transparent;border:0;border-bottom:1px solid #adbc9f;padding:6px 0;font-size:16px;margin-top:4px}.empty-state button span{margin-left:10px}.data-note{display:flex;gap:9px;border-top:1px solid var(--line);padding-top:16px;margin-top:14px;color:#7a8b77}.data-note>span{font-size:16px}.data-note p{margin:0;font-size:16px;line-height:1.7}.data-note p span{font-size:16px;color:#97a08f}.map-panel{position:relative;background:#e5eadf;overflow:hidden;min-width:0}#map{height:100%;width:100%;z-index:0}.map-heading{position:absolute;top:25px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:500}.map-tag{font-size:16px;letter-spacing:1.6px;background:#fffffff0;padding:12px 15px;border-radius:7px;box-shadow:0 3px 16px #173b3010}.map-actions{display:flex;gap:8px;pointer-events:auto}.map-actions button{border:1px solid #fff;border-radius:8px;box-shadow:0 3px 16px #173b3010;background:#fffffff0;padding:9px 13px;font-size:16px}.map-actions #fit{font-size:21px;padding:5px 12px}.map-actions button span{color:#6c8d62;margin-left:8px;font-size:16px}.map-actions button[aria-pressed=false] span{color:#bbc2b4}.map-footer{position:absolute;bottom:25px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;z-index:500}.legend{display:flex;gap:18px;background:#fffffff0;border-radius:7px;padding:12px 15px;font-size:16px;box-shadow:0 3px 15px #173b3010}.legend span{display:flex;align-items:center;gap:7px}.legend-stop{display:block;width:7px;height:7px;border:2px solid #537d68;border-radius:50%;background:#fff}.legend-walk{width:14px;border-top:2px dashed #789072}.map-caption{font-size:16px;color:#617d64;background:#ffffffe0;padding:8px;border-radius:5px}.leaflet-control-zoom{border:0!important;box-shadow:0 3px 16px #173b3020!important}.leaflet-control-zoom a{color:#345f47!important;border-color:#e0e5db!important}.leaflet-bottom.leaflet-right{bottom:80px;right:17px}.leaflet-control-attribution{font-size:16px!important}.leaflet-tile-pane{filter:saturate(.38) contrast(.94)}.stop-tooltip{font:16px var(--font)}.map-instruction{position:absolute;z-index:600;top:85px;left:50%;transform:translateX(-50%);padding:11px 17px;border-radius:9px;background:#183d36;color:#fff;font-size:16px;box-shadow:0 4px 20px #183d3630;max-width:90%;text-align:center;white-space:nowrap}.map-instruction button{background:transparent;color:var(--lime);border:0;margin-left:14px}#map-error{position:absolute;bottom:90px;left:20px;right:20px;background:#fff8e9;padding:12px;border-radius:9px;font-size:16px;z-index:500}.route-card{margin:12px 0;border:1px solid #dfe6d8;background:#fff;border-radius:12px;overflow:hidden}.route-card.selected{border:1.5px solid #5a8863;box-shadow:0 3px 14px #183d3608}.route-select{background:none;border:0;padding:15px;width:100%;text-align:left;display:block}.route-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.line-badge{background:var(--route-color);color:#fff;border-radius:6px;padding:5px 8px;font-size:16px;font-weight:700;text-shadow:0 1px 3px #0007}.route-title{display:flex;gap:8px;align-items:center;font-weight:600;font-size:16px}.best-tag{font-size:16px;padding:5px 7px;border-radius:15px;color:#537146;background:#eef4e3;white-space:nowrap}.route-meta{font-size:16px;color:#8a9587;margin:9px 0 0}.route-meta b{color:#4e6e50}.route-detail{border-top:1px solid #eef1e9;padding:14px 15px}.trip-step{display:grid;grid-template-columns:21px 1fr;gap:6px;margin:0 0 14px;font-size:16px}.trip-step:last-child{margin:0}.step-icon{font-size:16px;color:#7e9b69}.trip-step strong{font-size:16px;display:block;margin:2px 0 5px}.trip-step p{font-size:16px;color:#8d9787;margin:0;line-height:1.5}.intermediate{font-size:16px;color:#778972;margin:5px 0 13px 27px}.intermediate summary{cursor:pointer}.intermediate ol{padding-left:17px;line-height:1.9}.variant{font-size:16px;color:#7f8d77;margin-top:10px}.route-link{font-size:16px;color:#51704f}.endpoint-marker{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#214c3e;border:3px solid #fff;color:#fff;font:700 16px var(--font);box-shadow:0 2px 12px #183d3640}.endpoint-marker.destination{background:#d7ed8c;color:#234c3d}.place-popup{font:16px var(--font);line-height:1.5}.popup-buttons{display:flex;gap:8px;margin-top:9px}.popup-buttons button{background:#eef3e7;border:0;border-radius:5px;font-size:16px;padding:7px}.no-results{padding:24px 0}.no-results h3{font-size:16px}.no-results p{font-size:16px;line-height:1.7;color:#7b8977}dialog{border:1px solid var(--line);border-radius:16px;max-width:500px;width:90%;padding:24px;color:var(--ink);box-shadow:0 15px 80px #183d3633}dialog::backdrop{background:#183d3655}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{font-size:18px}.dialog-top button{border:0;background:none;font-size:26px}dialog>p{font-size:16px;color:var(--muted)}#place-results button{display:block;width:100%;text-align:left;background:#f7f9f1;border:1px solid var(--line);border-radius:8px;padding:14px;margin-top:10px;font-size:16px;line-height:1.6}.leaflet-popup-content-wrapper{border-radius:12px!important}@media(min-width:1450px){main{grid-template-columns:460px 1fr}.planner{padding:38px 42px}h1{font-size:38px}}@media(max-width:900px){main{grid-template-columns:370px 1fr}.planner{padding:28px 24px}.topbar{padding:0 25px}.map-caption{display:none}.map-heading{left:15px;right:15px}.map-tag{letter-spacing:.6px;padding:11px 9px}.map-actions button{padding:9px}.header-right{gap:15px}}@media(max-width:680px){.topbar{height:76px;padding:0 20px}.brand{font-size:22px}.brand-icon{width:36px;height:40px;font-size:30px}.brand small{font-size:16px}.town{display:none}.local-badge{font-size:16px;padding:7px 9px}main{height:auto;min-height:0;display:flex;flex-direction:column}.planner{padding:26px 23px 20px;overflow:visible;border:0}.intro{margin-bottom:20px}.intro p{margin-bottom:0;font-size:16px}.intro h1{font-size:32px;margin:10px 0}.intro br{display:none}h1 em:before{content:' '}.journey-fields{margin-top:22px}.map-panel{height:470px;order:2}.map-heading{top:18px}.map-footer{bottom:22px;left:15px;right:15px}.data-note{margin-bottom:0}.empty-state{padding:22px 32px}.section-heading{margin-top:20px}.map-tag{padding:10px}.map-instruction{white-space:normal;min-width:250px}.leaflet-bottom.leaflet-right{bottom:80px}.route-detail{padding:15px}.header-right{gap:0}}@media(prefers-reduced-motion:no-preference){.primary,.route-card,.icon-button{transition:background .2s,border-color .2s,box-shadow .2s}}

/* Mejoras para horarios en vivo, selector de salida y filtros de líneas */
.time-settings-row {
  margin: 12px 0 16px;
  padding: 10px 12px;
  background: #f3f7ee;
  border: 1px solid #dce3d8;
  border-radius: 10px;
  font-size: 16px;
  color: var(--ink);
}
.time-control-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time-control-group label {
  font-weight: 600;
  color: #5b6d5e;
}
.time-control-group select,
.time-custom-inputs select,
.time-custom-inputs input {
  border: 1px solid #cdd8c7;
  background: #fff;
  color: var(--ink);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
}
.time-custom-inputs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.time-custom-inputs input {
  flex: 1;
}
.time-custom-inputs select {
  flex: 1.4;
}
.line-badge.dark-text,
.line-chip.dark-text.active {
  color: #183d36 !important;
  text-shadow: none !important;
}
.wait-badge {
  font-size: 16px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 14px;
  white-space: nowrap;
}
.wait-badge.live {
  background: #e1f5e6;
  color: #155d36;
}
.wait-badge.urgent {
  background: #d5ef89;
  color: #183d36;
}
.wait-badge.scheduled {
  background: #eef3e7;
  color: #4a6350;
}
.wait-badge.tomorrow {
  background: #fff3da;
  color: #8a5311;
}
.wait-badge.neutral {
  background: #f1f3ef;
  color: #79857b;
}
.step-time-highlight {
  display: inline-block;
  background: #eaf2e3;
  color: #1d4d3e;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 700;
  margin-left: 4px;
}
.stop-pass-time {
  color: #215447;
  font-weight: 600;
  font-size: 16px;
  margin-left: 4px;
}
.upcoming-departures {
  margin: 10px 0;
  padding: 8px 10px;
  background: #f7faf3;
  border-radius: 8px;
  font-size: 16px;
  color: #5b6d5e;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.time-pill {
  background: #fff;
  border: 1px solid #d7e1d1;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 600;
  color: var(--ink);
}
.circular-badge {
  background: #eef6ff;
  color: #1c5282;
  border: 1px solid #cfe3fa;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}
.line-filter-bar {
  display: flex;
  gap: 4px;
  background: #fffffff0;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 3px 16px #173b3010;
  flex-wrap: wrap;
}
.line-chip {
  padding: 5px 8px !important;
  font-size: 16px !important;
  font-weight: 700;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.line-chip.active {
  background: var(--chip-color, var(--ink)) !important;
  color: #fff;
}
.popup-next-buses {
  margin-top: 6px;
  padding: 6px 8px;
  background: #f5f8f1;
  border-radius: 6px;
  font-size: 16px;
}

/* Estilos del módulo El Tren en Utrera (Renfe Directo + Enlace Bus) */
.train-widget {
  margin-top: 22px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d8e2d4;
  border-radius: 12px;
  box-shadow: 0 2px 10px #183d3608;
}
.train-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.train-eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #5b7562;
  display: block;
}
.train-header h3 {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.train-live-dot {
  font-size: 16px;
  font-weight: 600;
  color: #157347;
  background: #e3f7eb;
  padding: 2px 7px;
  border-radius: 12px;
}
.train-refresh-btn {
  border: 1px solid #dce3d8;
  background: #f7f9f4;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  font-size: 16px;
}
.train-alerts {
  background: #fff4e5;
  border: 1px solid #f5d4a9;
  color: #7c4300;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.train-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background: #f1f5ed;
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.train-tab {
  border: 0;
  background: transparent;
  padding: 6px 4px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #5c6e60;
}
.train-tab.active {
  background: #183d36;
  color: #fff;
}
.train-station-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
}
.train-station-picker select {
  flex: 1;
  border: 1px solid #cdd8c7;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 16px;
  background: #f9fbf7;
}
.train-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.train-card {
  border: 1px solid #e4ebe0;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fafcf8;
}
.train-card.featured {
  border-color: #8ab596;
  background: #f4f9f1;
}
.train-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.train-main-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 16px;
}
.train-line-tag {
  font-size: 16px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  color: #fff;
}
.train-line-tag.c1 {
  background: #75b62a;
}
.train-line-tag.md {
  background: #e65f00;
}
.train-old-time {
  color: #9e6b55;
  font-size: 16px;
}
.train-dest-label {
  font-size: 16px;
  color: #3a5244;
}
.train-via-tag {
  background: #e6efe8;
  color: #183d36;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}
.train-badge {
  font-size: 16px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.train-badge.ontime {
  background: #dff5e6;
  color: #135c35;
}
.train-badge.delayed {
  background: #fde6e2;
  color: #9c2418;
}
.train-badge.scheduled {
  background: #eef2ec;
  color: #637366;
}
.train-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed #e1e8dd;
  font-size: 16px;
  color: #66786a;
}
.train-bus-btn {
  background: #215447;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.train-bus-btn:hover {
  background: #183d36;
}

/* Marcadores en vivo de Trenes Renfe y Estación en el mapa de Leaflet */
.train-header-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}
.train-station-map-btn {
  border: 1px solid #dce3d8;
  background: #f7f9f4;
  border-radius: 7px;
  height: 28px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.train-card-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}
.train-map-pin-btn {
  border: 1px solid #d5e0d0;
  background: #fff;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 16px;
}
.train-map-pin-btn:hover,
.train-station-map-btn:hover {
  background: #eaf2e3;
}
.station-marker-wrapper,
.train-marker-wrapper {
  background: transparent;
  border: 0;
}
.toilet-marker,
.station-map-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #183d36;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 14px;
  padding: 3px 8px;
  font: 700 16px var(--font);
  box-shadow: 0 3px 10px #183d3645;
  white-space: nowrap;
}
.train-marker-wrapper {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.train-map-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 16px;
  border: 2px solid #fff;
  color: #fff;
  font: 800 16px var(--font);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
}
.train-map-marker.c1 {
  background: #5a9e16;
}
.train-map-marker.md {
  background: #d95600;
}
.train-map-marker.is-delayed {
  border-color: #ffe066;
}
.tm-delay {
  font-style: normal;
  background: #9c2418;
  color: #fff;
  padding: 1px 4px;
  border-radius: 6px;
  font-size: 16px;
}
.tm-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d5ef89;
  box-shadow: 0 0 0 0 rgba(213, 239, 137, 0.8);
  animation: trainPulse 1.8s infinite;
}
@keyframes trainPulse {
  0% { box-shadow: 0 0 0 0 rgba(213, 239, 137, 0.85); }
  70% { box-shadow: 0 0 0 8px rgba(213, 239, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(213, 239, 137, 0); }
}
.legend-train-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5a9e16;
  border: 2px solid #183d36;
}

[hidden] { display: none !important; }

.planner-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.planner-nav button, .edit-journey {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  padding: 8px 12px;
  font-size: 16px;
}
.planner-nav button[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.train-live-dot.scheduled { background: #edf1f5; color: #405566; }
.edit-journey, #show-route-map { display: none; }

.time-custom-inputs { flex-wrap: wrap; }
.time-custom-inputs > input { min-width: 105px; }
.holiday-option {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
}
.holiday-option input { flex: none; }

.section-heading { gap: 8px; flex-wrap: wrap; }
#route-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #4a6559;
}
#route-sort {
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
}
.wait-badge { white-space: normal; line-height: 1.3; }
.wait-badge.urgent { background: #ffedc6; color: #754407; }
.wait-badge.scheduled { background: #e8eff5; color: #3d5368; }
.wait-badge.neutral { color: #4e6058; }
.future-route { background: #f6f8fa; }
.route-group-heading { margin: 18px 0 0; font-size: 16px; color: #455a6a; }
.route-select { display: grid; gap: 8px; }
.route-title { font-size: 18px; }
.route-title .line-badge { font-size: 20px; }
.boarding-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.boarding-time strong { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.boarding-stop { font-size: 20px; font-weight: 750; line-height: 1.25; }
.route-context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.journey-arrival, .route-meta { color: #405f53; }
.route-meta { margin: 0; }
.route-arrow { display: grid; place-items: center; pointer-events: none; }
.route-arrow span {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 1px 1px #183d3677);
}
.key-stop-label {
  max-width: 132px;
  white-space: normal;
  font: 700 16px/1.25 var(--font);
  color: var(--ink);
  border: 1px solid #aabdb1;
  padding: 4px 6px;
}

main { min-height: 0; }
.planner { padding: 34px clamp(24px, 3vw, 44px); }
.planner-nav { margin-bottom: 24px; }
.intro h1 { font-size: clamp(25px, 3vw, 34px); margin: 0 0 24px; }
.journey-fields { margin: 0 0 18px; }
.more-options { font-size: 16px; color: #405d51; margin: 16px 0 0; }
.more-options summary { padding: 8px 0; }
.more-options .settings-row { gap: 12px; font-size: 16px; margin: 8px 0 12px; }
.more-options .settings-row label { margin: 0; }
.departure-settings button,
#departure-at {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}
#departure-trigger { display: flex; justify-content: space-between; gap: 18px; width: 100%; }
#departure-at { width: 100%; min-width: 0; }
.empty-state { padding: 4px 0 14px; text-align: left; }
.empty-state button { margin: 0; }
.section-heading { margin-top: 24px; }
.route-card { margin-bottom: 14px; }
.map-heading { justify-content: flex-end; }
.map-actions { align-items: flex-start; }
.line-picker, .map-layers > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 2px 12px #183d3615;
  color: var(--ink);
  font-size: 16px;
  font-weight: 650;
}
.line-picker select {
  max-width: clamp(92px, 15vw, 178px);
  border: 0;
  background: #fff;
  color: inherit;
  font: inherit;
}
.map-layers { position: relative; }
.map-layers > summary { cursor: pointer; list-style: none; }
.map-layers > summary::-webkit-details-marker { display: none; }
.layer-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 146px;
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 20px #183d3620;
}
.layer-options button, .layer-options #fit {
  min-height: 48px;
  padding: 6px 8px;
  text-align: left;
  font-size: 16px;
  box-shadow: none;
  background: #f4f6f5;
}
.map-caption:empty { display: none; }

.train-widget { padding: 16px; border-color: #e1e5e3; }
.train-header { gap: 8px; margin-bottom: 14px; }
.train-header h3 { flex-wrap: wrap; }
.train-station-map-btn { white-space: nowrap; }
.train-list { gap: 10px; }
.train-tabs { background: #eff1f0; margin-bottom: 14px; }
.train-tab[aria-selected="true"] { background: #fff; color: #263932; box-shadow: 0 1px 3px #1e33221a; text-decoration: underline; text-underline-offset: .2em; }
.train-card, .train-card.featured { background: #fff; border-color: #e1e5e3; padding: 12px; }
.train-card.featured .train-main-info > strong {
  color: #185343;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.train-main-info > strong { font-size: 16px; }
.train-card-top, .train-card-bottom { flex-wrap: wrap; }
.train-line-tag.c1, .train-line-tag.md, .train-live-dot, .train-live-dot.scheduled,
.train-via-tag, .train-badge.ontime, .train-badge.delayed, .train-badge.scheduled {
  background: #eef1ef;
  color: #3c5147;
}
.train-old-time { color: #65736b; }
.train-bus-btn, .train-bus-btn:hover { background: #eef1ef; color: #263932; }

.sheet-grip, #sheet-status { display: none; }
#search-dialog {
  box-sizing: border-box;
  inset: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: max(18px, env(safe-area-inset-top)) 22px 24px;
  border: 0;
  border-radius: 0;
  background: #fafbf8;
  overscroll-behavior: contain;
}
.close-search, .search-example {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  min-height: 48px;
  padding: 8px 0;
}
.close-search { margin-bottom: 18px; }

.brand-logo {
  display: block;
  flex: none;
  width: 42px;
  height: 50px;
  object-fit: contain;
}
.brand-product { padding-left: 13px; border-left: 1px solid var(--line); white-space: nowrap; }
.ui-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: none;
  vertical-align: -.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-button .ui-icon, .swap .ui-icon { width: 17px; height: 17px; }
.route-arrow .ui-icon { width: 18px; height: 18px; }
.layer-options .layer-indicator {
  display: inline-block;
  width: 5px;
  height: 5px;
  vertical-align: middle;
  border-radius: 50%;
  background: #50755c;
}
.layer-options button[aria-pressed="false"] .layer-indicator { background: #a9b6af; }

@media (max-width: 680px) {
  body { overflow: hidden; }
  .topbar {
    position: fixed;
    z-index: 800;
    inset: 0 0 auto;
    height: 48px;
    padding: 0 14px;
  }
  .topbar .brand-logo { width: 24px; height: 29px; }
  .topbar .brand-product { padding-left: 8px; }
  .topbar .brand { font-size: 19px; }
  .topbar .local-badge { font-size: 16px; padding: 4px 8px; }
  main {
    --sheet-height: 42dvh;
    position: relative;
    display: block;
    margin-top: 48px;
    height: calc(100dvh - 48px);
    min-height: 0;
  }
  main[data-sheet="full"] { --sheet-height: 76dvh; }
  main[data-sheet="map"] { --sheet-height: 0px; }
  .map-panel { position: absolute; inset: 0; height: auto; }
  .map-heading { top: 12px; left: 12px; right: 12px; }
  .map-footer { display: none; }
  .map-panel .leaflet-bottom.leaflet-right { bottom: calc(var(--sheet-height) + 4px); }
  .planner {
    position: fixed;
    z-index: 650;
    inset: auto 0 0;
    height: var(--drag-height, var(--sheet-height));
    padding: 0 18px max(18px, env(safe-area-inset-bottom));
    background: #fafbf8;
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 28px #183d3628;
    overflow: auto;
    overscroll-behavior: contain;
    transition: height .2s ease;
  }
  .planner[style*="--drag-height"] { transition: none; }
  main[data-sheet="map"] .planner { visibility: hidden; }
  #desktop-editor { display: none; }
  .sheet-grip {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    margin: 0;
    width: 100%;
    min-height: 48px;
    background: #fafbf8;
    border: 0;
    touch-action: none;
    cursor: ns-resize;
  }
  .planner-nav { margin-bottom: 12px; }
  .edit-journey { display: block; }
  #sheet-status:not(:empty) { display: block; margin-top: 10px; }
  .section-heading { margin-top: 14px; padding-top: 12px; }
  .train-widget { margin-top: 6px; }
  #search-dialog input:not([type="checkbox"]), #search-dialog select { font-size: 16px; }
  #show-route-map {
    position: fixed;
    z-index: 700;
    right: 14px;
    bottom: calc(42dvh + 20px);
    display: block;
    min-height: 48px;
    padding: 8px 16px;
    border-radius: 22px;
    border: 1px solid #fff;
    background: var(--ink);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 4px 20px #183d3650;
  }
  main[data-sheet="full"] ~ #show-route-map { bottom: calc(76dvh + 16px); }
  main[data-sheet="map"] ~ #show-route-map { bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .planner { transition: none; }
}

/* Legibilidad y zonas de pulsación en el planificador y el mapa. */
button, input:not([type="checkbox"]), select, summary { min-height: 48px; }
button, select { min-width: 48px; }
button, input, select, summary, label { font-size: 16px; }
summary { align-content: center; }
label:has(input[type="checkbox"]) { align-items: center; min-height: 48px; cursor: pointer; }
input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
small { font-size: 16px; }
.settings-row { flex-wrap: wrap; }
.field + .field { margin-top: 12px; }
.field label { color: #405d51; text-transform: none; letter-spacing: 0; }
.field > input {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #aabdb1;
  border-radius: 7px;
  color: var(--ink);
  background: #fff;
}
.field > input::placeholder { color: #52655b; }
.field-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.field-actions button, #close-dialog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #becdc3;
  border-radius: 8px;
  background: #f4f8f5;
}
.field-actions button:hover, #close-dialog:hover { background: #e6efe8; }
.field-actions button { text-align: left; line-height: 1.25; }
#search { background: #ad3b06; }
#search:hover { background: #8c2f03; }
#search span { color: #fff; }
.dialog-top, .popup-buttons, .train-header, .train-header-actions,
.train-card-actions, .train-station-picker { flex-wrap: wrap; gap: 8px; }
.layer-options { width: max-content; }
.train-refresh-btn { width: auto; padding: 6px 8px; }
.train-bus-btn { white-space: normal; }
.train-station-picker select { max-width: 100%; }
.leaflet-container { font-size: 16px; }
.leaflet-container .leaflet-control-attribution { font-size: 16px !important; }
.map-panel .leaflet-control-zoom {
  display: flex;
  gap: 6px;
  box-shadow: none !important;
}
.map-panel .leaflet-control-zoom a,
.map-panel .leaflet-popup-close-button {
  display: grid;
  place-items: center;
  width: auto;
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border: 1px solid #becdc3;
  border-radius: 8px;
  font: 650 16px var(--font);
  background: #fff;
}
.map-panel .leaflet-popup-close-button { top: 6px; right: 6px; }
.map-panel .leaflet-control-zoom .leaflet-disabled { opacity: .65; }
.map-panel .leaflet-popup-content { margin-top: 62px; }
.station-marker-wrapper, .train-marker-wrapper { display: grid; place-items: center; }
.route-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }

:root { --muted: #53645a; --font: system-ui, sans-serif; }
:is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid #164a3e;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}
:is(a, button, input, select, summary, [tabindex]) { scroll-margin-block: 12px; }
.planner :is(a, button, input, select, summary, [tabindex]) { scroll-margin-block: 16px; }
.sr-only, .status:empty {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#sheet-status { display: none; }
[aria-disabled="true"] { cursor: wait; }
.line-badge, .line-badge.dark-text {
  background: #f1f5f2;
  color: #183d36;
  border-inline-start: 4px solid var(--route-color, #183d36);
  text-shadow: none;
}
.section-heading > span, .data-note p, .data-note p span, .stop-pass-time, .time-pill, .variant { color: #44594e; }
.field > input, #route-sort, .field-actions button, .planner-nav button, .map-background, .train-tab,
.more-options select, #departure-at, #departure-trigger { border-color: #788d81; }
.planner-nav, .train-tabs { flex-wrap: wrap; }
.train-tab { flex: 1 1 auto; white-space: normal; }
.train-badge { white-space: normal; }
.train-live-dot { white-space: normal; }
.planner-footer { margin-top: 20px; padding: 12px 0; border-top: 1px solid var(--line); color: #44594e; }
.planner-footer nav { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 6px; }
.planner-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); text-underline-offset: .18em; }
.planner-footer a, .route-card, .train-card { overflow-wrap: anywhere; }
#route-sort-label { flex-wrap: wrap; max-width: 100%; }
#route-sort, .more-options select { max-width: 100%; }

.legal-link, .privacy-note a, .data-note a, #walking-consent a {
  color: var(--green);
  text-underline-offset: .18em;
}
.legal-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.privacy-note { margin: 6px 0 0; color: #425f55; font-size: .875rem; line-height: 1.45; }
.search-legal-link { width: fit-content; }
.map-heading:has(.map-background) { justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.map-background {
  pointer-events: auto;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 650 .875rem var(--font);
  cursor: pointer;
}
#walking-consent { width: min(460px, calc(100% - 28px)); }
#walking-consent h2 { margin: 0; }
#walking-consent p { line-height: 1.5; }
.consent-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.consent-actions button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--green); border-radius: 8px; background: #fff; color: var(--green); font: 650 1rem var(--font); cursor: pointer; }
.consent-actions button[value="allow"] { color: #fff; background: var(--green); }

@media (max-width: 680px) {
  .header-right .local-badge { display: none; }
  .header-right .legal-link { font-size: .875rem; }
  main[data-results="true"] { --peek-height: 56dvh; }
  main { --sheet-height: var(--peek-height, 42dvh); }
  main[data-sheet="full"] { --sheet-height: 76dvh; }
  main[data-sheet="map"] { --sheet-height: 0px; }
  .planner { scroll-padding-top: 52px; }
  #show-route-map { bottom: calc(42dvh + 52px); }
  main[data-results="true"][data-sheet="peek"] ~ #show-route-map { bottom: calc(56dvh + 52px); }
  main[data-sheet="full"] ~ #show-route-map { bottom: calc(76dvh + 52px); }
  main[data-sheet="map"] ~ #show-route-map { bottom: max(52px, env(safe-area-inset-bottom)); }
  .map-panel .leaflet-bottom.leaflet-right { bottom: calc(var(--sheet-height) + 52px); right: 102px; }
  .map-panel .leaflet-control-attribution { position: fixed; right: 0; bottom: var(--sheet-height); max-width: 100vw; }
  .map-panel .leaflet-control-zoom { margin: 0; }
  main[data-sheet="full"] .map-heading,
  main[data-sheet="full"] .leaflet-control-zoom { visibility: hidden; }
  .map-instruction { width: min(90%, 420px); white-space: normal; }
  #sheet-status:empty { display: block; }
  .planner :is(a, button, input, select, summary, [tabindex]) { scroll-margin-block-start: 54px; }
  .planner-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  main[data-map="unavailable"] { height: auto; overflow: auto; }
  main[data-map="unavailable"] .planner { position: static; height: auto; padding-top: 16px; border-radius: 0; box-shadow: none; }
  main[data-map="unavailable"] .sheet-grip { display: none; }
  main[data-map="unavailable"] .map-panel { position: static; }
  main[data-map="unavailable"] #map { display: none; }
  main[data-map="unavailable"] #map-error { position: static; margin: 16px; }
}

@media (max-width: 360px) {
  body { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }
  .topbar { position: relative; height: auto; min-height: 48px; gap: 10px; padding-block: 6px; }
  .topbar .brand { min-width: 0; }
  .topbar .brand-product { white-space: normal; overflow-wrap: anywhere; }
  .header-right { min-width: 0; }
  .header-right .legal-link { line-height: 1.15; }
  main { height: auto; margin-top: 0; }
  .field-actions { grid-template-columns: 1fr; }
  .planner { padding-inline: 16px; }
  #search-dialog { padding-inline: 16px; }
  .train-tabs { display: flex; }
  .map-heading:has(.map-background) { justify-content: flex-start; }
  .map-actions { flex-wrap: wrap; max-width: 100%; }
  .map-panel .leaflet-control-attribution { font-size: 12px !important; }
}