/* La escena en directo de Arahal (calle.js). El color del paisaje depende de la hora del día; el resto usa los tokens de la marca. */
.calle { display: grid; gap: 12px; margin-bottom: 14px; }
.calle-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.calle-titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--marca-verde); animation: vivo 1.8s ease-in-out infinite; }
@keyframes vivo { 0%, 100% { box-shadow: 0 0 0 0 rgba(68,177,118,.55); } 50% { box-shadow: 0 0 0 6px rgba(68,177,118,0); } }
.chip-fact { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 13px; font-weight: 600; font-size: 12.5px; }
.chip-fact:hover { border-color: var(--accent); }
.chip-fact.n-bien { color: var(--ok); } .chip-fact.n-trab { color: var(--work); } .chip-fact.n-mal { color: var(--bad); }

.calle-lienzo { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); line-height: 0; }
.calle-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.calle-svg text { font-family: var(--font); font-weight: 700; }

/* Paleta por hora del día */
.hora-dia   { --cielo-a: #78B4F4; --cielo-b: #EAF3FF; --colina: #B4DCBE; --suelo: #C9E9CF; --suelo2: #B9E0C1; --bordillo: #EDEAF6; --asfalto: #6C6890; --linea: #FFE08A; --pared: #FFFFFF; --pared-borde: #D6D1EA; --ventana: #BFE0FF; --puerta: #2A2450; --garaje: #3A3560; --isla: #ECE8FB; --isla-borde: #8F86E0; --nube: #FFFFFF; --halo: #FFFFFF; }
.hora-tarde { --cielo-a: #F59A6B; --cielo-b: #FFE7C2; --colina: #A9C79B; --suelo: #C2DDB8; --suelo2: #B3D3AC; --bordillo: #EADFE9; --asfalto: #5E5A80; --linea: #FFD07A; --pared: #FFF6EC; --pared-borde: #DCCDDB; --ventana: #FFE3A0; --puerta: #2A2450; --garaje: #3A3560; --isla: #F1E8F5; --isla-borde: #9B7FD0; --nube: #FFE4D2; --halo: #FFF6EC; }
.hora-noche { --cielo-a: #0F0D31; --cielo-b: #2C2468; --colina: #1E3B38; --suelo: #1F3C35; --suelo2: #1A332D; --bordillo: #3C3763; --asfalto: #25233D; --linea: #8A82C8; --pared: #D9D5EE; --pared-borde: #9F99C8; --ventana: #FFD76A; --puerta: #1B1840; --garaje: #151331; --isla: #2A2552; --isla-borde: #8F86E0; --nube: #4B4590; --halo: #14112E; }

.cielo-a { stop-color: var(--cielo-a); } .cielo-b { stop-color: var(--cielo-b); }
.colina { fill: var(--colina); } .suelo { fill: var(--suelo); } .suelo2 { fill: var(--suelo2); }
.bordillo { fill: none; stroke: var(--bordillo); stroke-width: 42; stroke-linejoin: round; }
.asfalto { fill: none; stroke: var(--asfalto); stroke-width: 32; stroke-linejoin: round; }
.linea-via { fill: none; stroke: var(--linea); stroke-width: 2; stroke-dasharray: 10 10; opacity: .85; animation: avanza-linea 1.4s linear infinite; }
@keyframes avanza-linea { to { stroke-dashoffset: -20; } }

/* Cielo vivo */
.nube { fill: var(--nube); opacity: .92; }
.estrella { fill: #fff; opacity: 0; }
.hora-noche .estrella { opacity: .9; animation: titila 3s ease-in-out infinite; }
@keyframes titila { 50% { opacity: .2; } }
.sol { opacity: 0; transition: opacity 1s; }
.hora-dia .sol, .hora-tarde .sol { opacity: 1; }
.sol circle, .sol rect { fill: #FFC93C; }
.hora-tarde .sol circle, .hora-tarde .sol rect { fill: #FF944A; }
.rayos { animation: gira-sol 40s linear infinite; }
@keyframes gira-sol { to { transform: rotate(360deg); } }
.luna { opacity: 0; fill: #F4F1FF; transition: opacity 1s; }
.hora-noche .luna { opacity: 1; }
.mella { fill: var(--cielo-a); }
.pajaro path { fill: none; stroke: #3A3560; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: aletea .45s ease-in-out infinite alternate; }
.hora-noche .pajaro { display: none; }
@keyframes aletea { to { transform: scaleY(.35); } }

/* Locales */
.cuerpo-local, .cuerpo-casa { transform-box: fill-box; transform-origin: 50% 100%; }
.local .pared, .base .pared { fill: var(--pared); stroke: var(--pared-borde); stroke-width: 1.5; }
.ventana { fill: var(--ventana); }
.puerta { fill: var(--puerta); }
.rotulo { font-weight: 800; letter-spacing: -.01em; }
.lampara { fill: #8F8BAA; stroke: #fff; stroke-width: 1.5; }
.est-necesita .lampara { fill: #E5392D; animation: parpadeo .8s steps(2, jump-none) infinite; }
.est-trabajando .lampara { fill: #34D399; }
.est-espera .lampara { fill: #E9AB4A; }
.est-cerrado .cuerpo-local { filter: grayscale(.85) brightness(.96); }
.insignia circle { fill: #D6453D; stroke: #fff; stroke-width: 1.5; }
.insignia text, .moto-carga text { fill: #fff; font-weight: 800; }
.insignia.oculta, .moto-carga.oculta { display: none; }
.vapor circle { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.est-trabajando .vapor circle, .est-necesita .vapor circle { animation: vapor 2.4s ease-out infinite; }
.vapor circle:last-child { animation-delay: 1.2s !important; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .85; } 100% { opacity: 0; transform: translateY(-18px) scale(1.7); } }
.hora-noche .local .ventana, .hora-noche .casa .ventana { filter: drop-shadow(0 0 3px rgba(255,215,106,.9)); }
.local.rebote .cuerpo-local, .casa.rebote .cuerpo-casa { animation: rebote .6s ease; }
@keyframes rebote { 30% { transform: scale(1.08, .93); } 60% { transform: scale(.97, 1.05); } }
.local.est-necesita .cuerpo-local { animation: pulso-local 1.4s ease-in-out infinite; }
@keyframes pulso-local { 50% { transform: scale(1.025); } }

/* Cajitas de pedidos en el mostrador */
.cj-n > rect:first-child { fill: var(--f-n); } .cj-p > rect:first-child { fill: var(--f-p); } .cj-l > rect:first-child { fill: var(--f-l); } .cj-m > rect:first-child { fill: var(--f-m); }
.cj > rect:first-child { stroke: rgba(0,0,0,.25); stroke-width: .8; }
/* El negro del pedido nuevo lleva un borde claro: sobre el suelo oscuro de la escena no se vería */
.cj-n > rect:first-child { stroke: rgba(255,255,255,.7); }
.cj.nueva { animation: cae-svg .55s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes cae-svg { from { translate: 0 -26px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* Elementos que se pueden tocar */
.tocable { cursor: pointer; outline: none; }
.toque { fill: transparent; }
.anillo { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; opacity: 0; transition: opacity .2s; pointer-events: none; }
.tocable:hover .anillo { opacity: .5; }
.sel .anillo, .tocable:focus-visible .anillo { opacity: 1; animation: marcha .8s linear infinite; }
@keyframes marcha { to { stroke-dashoffset: -10; } }
.moto .toque { fill: transparent; }

/* Base y vigilancia */
.garaje-int { fill: var(--garaje); }
.isla { fill: var(--isla); stroke: var(--isla-borde); stroke-width: 2; stroke-dasharray: 7 5; }
.cartel-zona { fill: var(--isla-borde); letter-spacing: .14em; font-weight: 800; }
.pildora rect { fill: #2B8A5A; }
.n-trab .pildora rect { fill: #B46A0A; } .n-mal .pildora rect { fill: #C4372F; }
.pildora text { fill: #fff; font-weight: 700; }
.fuste { fill: #8C85BF; } .tirante { stroke: #5F58A0; stroke-width: 2; fill: none; }
.cabina { fill: #2A2450; } .torre .ventana { fill: #9BE3B5; }
.foco { fill: #44B176; }
.torre.n-mal .foco { fill: #E5392D; animation: parpadeo .8s steps(2, jump-none) infinite; }
.haz-torre path { fill: rgba(255,232,130,.26); }
.torre.n-mal .haz-torre path { fill: rgba(229,57,45,.34); }
.haz-giro { animation: barre-torre 9s linear infinite; }
.torre.alerta .haz-giro { animation-duration: 2s; }
.torre.alarma .haz-giro { animation-duration: .9s; }
@keyframes barre-torre { to { transform: rotate(360deg); } }
.torre.alarma .pildora rect { animation: parpadeo .5s steps(2, jump-none) 8; }

/* Motos */
.moto-nombre rect { fill: rgba(30,23,71,.86); }
.moto-nombre text { fill: #fff; }
.moto-carga circle { fill: #6245BC; stroke: #fff; stroke-width: 1.5; }
.m-rueda .rueda, .m-sale .rueda, .m-entra .rueda { animation: giro .4s linear infinite; }
.m-rueda .chasis, .m-sale .chasis, .m-entra .chasis { animation: vibra .26s ease-in-out infinite alternate; }
.m-espera .chasis { animation: espera 1.1s ease-in-out infinite alternate; }
.rep-inactivo { opacity: .55; filter: grayscale(1); }
/* Aparcadas en la base el rótulo se esconde para que no se pisen; aparece al tocar o pasar el ratón */
.m-park .moto-nombre { opacity: 0; transition: opacity .2s; }
.m-park.sel .moto-nombre, .m-park:hover .moto-nombre { opacity: 1; }

/* Bocadillos y marcas de los eventos */
.marca { font-size: 12.5px; font-weight: 800; stroke: var(--halo); stroke-width: 4px; paint-order: stroke; stroke-linejoin: round; pointer-events: none; }
.marca.nuevo { fill: #5B3FD6; } .marca.ok { fill: #2B8A5A; } .marca.mal { fill: #C4372F; } .marca.moto { fill: #6245BC; } .marca.info { fill: #5E5B85; }
.bocadillo-svg { pointer-events: none; }
.bocadillo-svg rect, .bocadillo-svg path { fill: #fff; stroke: #CFCBE6; stroke-width: 1; }
.bocadillo-svg text { fill: #1E1747; font-size: 11px; font-weight: 600; }
.bocadillo-svg.mal rect, .bocadillo-svg.mal path { stroke: #D6453D; stroke-width: 1.8; }
.bocadillo-svg.ok rect, .bocadillo-svg.ok path { stroke: #2B8A5A; stroke-width: 1.8; }

/* Panel de detalle y lista plegada */
.calle-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; min-height: 84px; align-content: start; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-cab h3 { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ley { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.calle-panel .caja { display: inline-block; }
.lista-todo { margin-top: 4px; }
.lista-todo > summary { cursor: pointer; font-weight: 600; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); list-style: none; }
.lista-todo > summary::-webkit-details-marker { display: none; }
.lista-todo > summary::before { content: "▸ "; }
.lista-todo[open] > summary::before { content: "▾ "; }
.lista-todo[open] > summary { margin-bottom: 12px; }
.z-oficina .agentes { grid-template-columns: minmax(0, 1fr); }
.z-oficina .agente { max-width: 560px; }
@media (max-width: 760px) { .calle-panel { padding: 12px; } .calle-lienzo { border-radius: 16px; } }

/* Sugerencias de reparto (modo sombra): guía hasta la parada, bocadillo y bloques del panel */
.guia-reco { fill: none; stroke: #6245BC; stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linecap: round; pointer-events: none; animation: hormigas .9s linear infinite; }
.hora-noche .guia-reco, .hora-noche .diana-reco { stroke: #C4B5FD; }
.diana-reco { fill: rgba(98,69,188,.12); stroke: #6245BC; stroke-width: 2.4; pointer-events: none; animation: late 1.4s ease-in-out infinite; }
.guia-reco.oculta, .diana-reco.oculta { display: none; }
@keyframes hormigas { to { stroke-dashoffset: -13; } }
@keyframes late { 50% { opacity: .45; } }
.bocadillo-svg.reco rect, .bocadillo-svg.reco path { stroke: #6245BC; stroke-width: 1.8; }
.reco { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.reco .reco { padding: 6px 0 0; background: none; border-top: 1px solid var(--line); border-radius: 0; }
.reco .reco .reco-prueba { display: none; }
.reco-cab { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reco-prueba { font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.reco-texto { margin: 0; font-weight: 600; }
.reco-plan { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; counter-reset: paso; }
.reco-plan li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; gap: 8px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 3px; }
.reco-plan li:first-child { border-top: 0; padding-top: 0; font-weight: 600; }
.reco-plan .h { color: var(--muted); }
.reco-plan em { color: var(--accent); font-style: normal; }
.reco-plan .t { color: var(--muted); white-space: nowrap; }
.reco-plan .t.mal { color: var(--bad); font-weight: 600; }
.reco-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reco-lista li { display: grid; grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 13px; }
.reco-rep { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 700; text-align: left; text-decoration: underline; text-decoration-color: transparent; }
.reco-rep:hover { text-decoration-color: currentColor; }
.reco-que.reco-libre { color: var(--muted); }
.reco-linea { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .reco-lista li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (prefers-reduced-motion: reduce) { .punto-vivo, .guia-reco, .diana-reco { animation: none; } }