/* /esquemas · La ciudad viva (viva.html): capas encima de la ciudad de ciudad.css. Las capas SVG usan píxeles de la imagen. */

.ev-capa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ev-nubes, .ev-noche { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* Bandera y humo: los pinta vida-ciudad.js en lienzos (la tela ondea por columnas; el humo son bocanadas que suben) */
.ev-lienzo { position: absolute; pointer-events: none; }

/* Nubes: sombras suaves que cruzan la maqueta (solo donde hay dibujo) */
.ev-nubes { overflow: hidden; mix-blend-mode: multiply; }
.ev-nubes i { position: absolute; top: 12%; left: -40%; width: 36%; aspect-ratio: 2.1; border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 52, 96, .16), rgba(36, 52, 96, 0)); animation: ev-nube 70s linear infinite; }
.ev-nubes i:nth-child(2) { top: 48%; width: 46%; animation-duration: 95s; animation-delay: -40s; }
.ev-nubes i:nth-child(3) { top: 74%; width: 30%; animation-duration: 80s; animation-delay: -62s; }
@keyframes ev-nube { to { transform: translateX(380%); } }

/* Sirenas: destellos azules alternos en las barras de luces de los coches */
.ev-sirenas ellipse { opacity: 0; mix-blend-mode: screen; animation: ev-sirena 1.1s steps(1) infinite; }
.ev-sirenas .ev-s2 { animation-delay: -.55s; }
.ev-sirenas g:nth-child(2) ellipse { animation-duration: 1.3s; }
@keyframes ev-sirena { 0% { opacity: .95; } 18% { opacity: .15; } 30% { opacity: .9; } 46%, 100% { opacity: 0; } }

/* Día / atardecer / noche */
/* La noche es un mapa pintado (noche.py: luna azul con relieve y charcos de luz bajo farolas y ventanas) que multiplica la
   escena y lo que va debajo; el atardecer, un velo naranja. Los dos dentro de .ev-noche, que es la que multiplica. */
.ev-noche { mix-blend-mode: multiply; }
.ev-noche::before, .ev-noche::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s; }
.ev-noche::before { background: #f19a5a; }
.ev-noche::after { background: var(--noche, #27336e) 0 0 / 100% 100% no-repeat; }
[data-luz="tarde"] .ev-noche::before { opacity: .28; }
[data-luz="noche"] .ev-noche::after { opacity: 1; }
.ev-farolas { opacity: 0; transition: opacity 1.2s; mix-blend-mode: screen; }
[data-luz="tarde"] .ev-farolas { opacity: .55; }
[data-luz="noche"] .ev-farolas { opacity: 1; }
/* El poste publicitario: lo que sobresale del dibujo no lo cubre la noche, así que se oscurece solo; de noche sus focos
   encienden el panel (la copia de encima) */
.ev-poste { transition: filter 1.2s; }
[data-luz="tarde"] .ev-poste { filter: brightness(.8) saturate(.9); }
[data-luz="noche"] .ev-poste { filter: brightness(.42) saturate(.75) hue-rotate(-8deg); }
/* Lo mismo con lo que asoma por encima de los tejados: la balanza de los Juzgados y la bandera del Congreso */
.ev-balanza, .ev-bandera { transition: filter 1.2s; }
[data-luz="tarde"] .ev-balanza, [data-luz="tarde"] .ev-bandera { filter: brightness(.85) saturate(.95); }
[data-luz="noche"] .ev-balanza, [data-luz="noche"] .ev-bandera { filter: brightness(.5) saturate(.7) hue-rotate(-8deg); }
.ev-poste-luz { opacity: 0; transition: opacity 1.2s; }
[data-luz="tarde"] .ev-poste-luz { opacity: .5; }
[data-luz="noche"] .ev-poste-luz { opacity: .95; }
.ev-farolas circle { animation: ev-farola 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ev-farola { 50% { transform: scale(.92); opacity: .85; } }
.ev-sirenas { transition: opacity 1.2s; opacity: .7; }
[data-luz="noche"] .ev-sirenas { opacity: 1; }
.ev-luz { transition: opacity .9s; }
/* De día las ventanas encendidas se ven cálidas; de noche brillan */
.ev-luces { filter: none; }
[data-luz="noche"] .ev-luces, [data-luz="tarde"] .ev-luces { filter: url(#ev-brillo); }

/* Ventana que se enciende y ley completa */
.ev-chispa circle:first-child { transform-box: fill-box; transform-origin: center; animation: ev-destello 1.2s ease-out both; }
.ev-chispa .ev-aro { transform-box: fill-box; transform-origin: center; animation: ev-aro 1.2s ease-out both; }
@keyframes ev-destello { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ev-aro { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.ev-fuegos rect { transform-box: fill-box; transform-origin: center; animation: ev-fuego 1.6s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes ev-fuego { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--r)); } }

/* Chinchetas: barra de progreso dentro de la chincheta y estrella dorada al completar la ley */
.ec-pin .ev-prog { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: rgba(15, 59, 115, .1); overflow: hidden; display: none; text-decoration: none; }
.ec-pin .ev-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c); transition: width .5s; }
.ec-pin.ev-tiene .ev-prog { display: block; }
.ec-pin.ev-hecha { box-shadow: 0 10px 22px -8px rgba(15, 59, 115, .5), 0 0 0 2px #f2b63c; }
.ec-pin.ev-hecha .ev-prog i { background: #f2b63c; }
.ec-pin.ev-hecha b { display: inline-flex; align-items: center; gap: 3px; }
.ec-pin.ev-hecha b::after { content: '★'; color: #ffd36b; font-size: .95em; line-height: 1; }
.ec-pin.ev-salta { animation: ev-salta .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ev-salta { 40% { translate: -50% calc(-100% - 26px); scale: 1.12; } }

/* «Tu ciudad»: cuánto has encendido + ver de noche */
.ev-tuya { display: flex; align-items: center; gap: 12px; max-width: 460px; margin-top: 18px; padding: 10px 10px 10px 12px; border: 1px solid var(--line-2); border-radius: 18px; background: #fff;
  box-shadow: 0 14px 34px -24px rgba(15, 59, 115, .55); }
.ev-tuya__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff4d6; color: #c98a06; }
.ev-tuya.is-cero .ev-tuya__ic { background: var(--cream-2, #f1ede4); color: var(--muted-2, #8a93a3); }
.ev-tuya__t { flex: 1; min-width: 0; }
.ev-tuya__t p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.25; }
.ev-tuya__t p b { color: var(--accent); }
.ev-tuya__t p span { color: #c98a06; font-weight: 800; }
.ev-tuya__bar { display: block; height: 6px; margin: 6px 0 5px; border-radius: 6px; background: var(--cream-2, #f1ede4); overflow: hidden; }
.ev-tuya__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffcf5c, #f29a2e); transition: width .6s; }
.ev-tuya small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.ev-tuya small b { color: var(--accent); }
.ev-tuya__t p em { display: none; }
.ev-hora { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--accent);
  font-size: 13px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.ev-hora[aria-pressed="true"] { background: #1b2559; border-color: #1b2559; color: #ffe8a8; }
@media (max-width: 760px) {
  .ev-tuya { order: 3; margin-top: 12px; gap: 10px; padding: 8px 8px 8px 10px; }
  .ev-tuya__ic { width: 36px; height: 36px; border-radius: 11px; }
  .ev-tuya__t p { font-size: 13.5px; }
  .ev-tuya small { display: none; }
  .ev-tuya:not(.is-cero) .ev-tuya__t p em { display: inline; float: right; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 700; }
  .ev-tuya.is-cero small { display: block; font-size: 11.5px; }
  .ev-tuya__bar { margin-bottom: 0; }
  .ev-hora { height: 36px; padding: 0 10px; }
  .ev-hora span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 1100px) { .ev-tuya { grid-column: 1; } }

/* Sin movimiento: todo quieto (la noche y las ventanas siguen) */
@media (prefers-reduced-motion: reduce) {
  .ev-nubes i, .ev-sirenas ellipse, .ev-farolas circle { animation: none !important; }
  .ev-sirenas ellipse { opacity: .5; }
}

/* La chincheta de la DGP se aparta mientras el helicóptero está en la pista (salvo si la estás mirando) */
.ec-pin[data-ley="dgp"] { transition: translate .2s, scale .2s, opacity .6s, box-shadow .2s; }
.ec-pin.ev-aparta:not(:hover):not(.is-sel):not(.is-hov) { opacity: .3; }

/* El cielo detrás de la maqueta: de noche, estrellas y luna (y alguna estrella fugaz); al atardecer, un resplandor */
.ev-cielo .ev-cielo-noche, .ev-cielo .ev-cielo-tarde { opacity: 0; transition: opacity 1.2s; }
[data-luz="noche"] .ev-cielo .ev-cielo-noche { opacity: 1; }
[data-luz="tarde"] .ev-cielo .ev-cielo-tarde { opacity: 1; }
.ev-titila { animation: ev-titila 3.2s ease-in-out var(--d) infinite; }
@keyframes ev-titila { 50% { opacity: .25; } }

/* Lluvia: gotas (lienzo) y la ciudad algo más gris; de noche, las piezas que van por encima de la noche se oscurecen solas */
.ev-gris { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: multiply; background: #66758f; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ev-lluvia { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ev-aire, .ev-avioneta { transition: filter 1.2s; }
[data-luz="tarde"] .ev-aire, [data-luz="tarde"] .ev-avioneta { filter: brightness(.85); }
[data-luz="noche"] .ev-aire, [data-luz="noche"] .ev-avioneta { filter: brightness(.5) saturate(.8); }

/* El coche de la Policía Nacional sale con prisa: las luces destellan más rápido (y al repasar su ley en la vertical) */
.ev-sirenas .ev-prisa ellipse, .ev-sirenas.ev-alerta ellipse { animation-duration: .5s; }

/* Consejos: se toca a los agentes, al león y a los paseantes */
.ev-toques { z-index: 1; }
.ev-toques rect { fill: transparent; pointer-events: all; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ev-globo { position: absolute; z-index: 4; width: max-content; max-width: min(270px, 78%); translate: calc(-50% + var(--mueve, 0px)) calc(-100% - 12px); padding: 12px 34px 12px 14px;
  border: 1px solid var(--line-2, #e4ded2); border-radius: 16px; background: #fff; color: var(--ink-2, #33405a); font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 18px 36px -18px rgba(13, 31, 60, .55); animation: ev-globo .28s cubic-bezier(.3, 1.4, .5, 1) both; }
.ev-globo[hidden] { display: none; }
.ev-globo::after { content: ''; position: absolute; left: calc(50% - var(--mueve, 0px)); bottom: -7px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: #fff;
  border-right: 1px solid var(--line-2, #e4ded2); border-bottom: 1px solid var(--line-2, #e4ded2); }
.ev-globo__t { display: block; margin-bottom: 3px; color: #0d1f3c; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ev-globo p { margin: 0; }
.ev-globo p b { color: #0d1f3c; }
.ev-globo__a { display: inline-flex; gap: 5px; margin-top: 8px; color: #e0463f; font-weight: 800; text-decoration: none; }
.ev-globo__a:hover { text-decoration: underline; }
.ev-globo__x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted, #6b7487); font-size: 18px; line-height: 1; cursor: pointer; }
.ev-globo__x:hover { background: var(--cream-2, #f1ede4); }
@keyframes ev-globo { from { opacity: 0; scale: .9; } }
@media (prefers-reduced-motion: reduce) { .ev-globo { animation: none; } .ev-titila { animation: none; } }
/* Humo de la chimenea: algo gris para que se vea sobre el suelo claro */
.ev-chimenea { filter: brightness(.8) saturate(.6); }

/* Navidad: bombillas que parpadean (de noche brillan), lucecitas del abeto solo al oscurecer, campanadas y «¡Feliz año!» */
.ev-bombilla { animation: ev-parpadea 1.8s steps(1) infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes ev-parpadea { 0% { opacity: 1; } 33% { opacity: .45; } 66% { opacity: .8; } }
.ev-navidad-luz .ev-tira { opacity: .9; }
[data-luz="tarde"] .ev-navidad-luz, [data-luz="noche"] .ev-navidad-luz { filter: url(#ev-brillo); }
[data-luz="noche"] .ev-navidad-luz .ev-tira { opacity: 1; }
.ev-abeto-luz { opacity: 0; transition: opacity 1.2s; }
[data-luz="tarde"] .ev-abeto-luz { opacity: .6; }
[data-luz="noche"] .ev-abeto-luz { opacity: 1; }
.ev-campanada circle:first-child { transform-box: fill-box; transform-origin: center; animation: ev-destello 1.2s ease-out both; }
.ev-campanada .ev-aro { transform-box: fill-box; transform-origin: center; animation: ev-aro 1.2s ease-out both; }
.ev-campanada text { animation: ev-cifra 1.4s ease-out both; }
@keyframes ev-cifra { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.ev-feliz { transform-box: fill-box; transform-origin: center; animation: ev-feliz 9s ease-out both; }
@keyframes ev-feliz { 0% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1.08); } 14% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ev-bombilla, .ev-campanada *, .ev-feliz { animation: none; } }