/* GestoraHub · secciones del panel: cinta en vivo, obras, luz y agua, cobros y actividad. */
:root { --salvia: #e3e9dc; --champan: #f3e9d2; --bruma: #e1eaee; --agua: #4f7f99; --dorado-claro: #e2c48a; }
html, body { overflow-x: clip; } /* la banda verde usa 100vw */

/* manchas de color muy suaves que se mueven lento detrás del saludo */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -12% -18% -4%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 48% at 14% 32%, rgba(143, 165, 140, .30), transparent 70%),
    radial-gradient(34% 44% at 86% 40%, rgba(201, 161, 90, .24), transparent 70%),
    radial-gradient(30% 40% at 58% 92%, rgba(79, 127, 153, .16), transparent 70%);
  animation: deriva 20s ease-in-out infinite alternate; }
@keyframes deriva { to { transform: translate3d(2%, -3%, 0) scale(1.06); } }

/* cinta en vivo */
.cinta { display: flex; align-items: center; gap: 1.25rem; padding: .9rem 0; box-shadow: inset 0 1px 0 var(--hilo), inset 0 -1px 0 var(--hilo); }
.en-vivo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .85rem; color: var(--atrasada); white-space: nowrap; }
.latido { width: 8px; height: 8px; border-radius: 50%; background: var(--atrasada); animation: latido 1.8s var(--curva) infinite; }
@keyframes latido { from { box-shadow: 0 0 0 0 rgba(138, 53, 64, .45); } to { box-shadow: 0 0 0 10px rgba(138, 53, 64, 0); } }
.cinta-ventana { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.cinta-pista { display: flex; gap: 2.75rem; padding-right: 2.75rem; width: max-content; animation: desliza 70s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
@keyframes desliza { to { transform: translateX(-50%); } }
.cinta-item { display: inline-flex; align-items: baseline; gap: .6rem; font-size: .9rem; white-space: nowrap; }
.cinta-item b { font: 600 1.05rem var(--f-display); color: var(--verde); }
.cinta-item i { font-style: normal; font-size: .74rem; font-weight: 600; padding: .12rem .6rem; border-radius: 999px; background: var(--salvia); color: var(--verde); }
.cinta-item.luz i { background: var(--champan); color: #6f5627; }
.cinta-item.obra i { background: var(--bruma); color: #2f5568; }
.cinta-item.incidencia i { background: rgba(138, 53, 64, .1); color: var(--atrasada); }

/* banda verde de obras */
.banda { margin: clamp(3rem, 7vw, 6rem) calc(50% - 50vw) 0; padding: clamp(3.5rem, 8vw, 6.5rem) 0; background: var(--verde); color: var(--marfil); }
.banda-int { width: min(1240px, 100%); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: grid; gap: 2rem; }
.banda h2, .banda h3 { color: var(--marfil); }
.banda p { color: rgba(247, 243, 234, .72); }
.banda .bisel { background: rgba(247, 243, 234, .05); box-shadow: inset 0 0 0 1px rgba(247, 243, 234, .1); }
.banda .nucleo { background: #24433a; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .5); }
.banda .dibujo .trazo { stroke: var(--laton); }
.banda .visible .dibujo .v.pagada, .banda .visible .dibujo .v.pendiente { fill: rgba(201, 161, 90, .6); }
.banda .pill { background: rgba(201, 161, 90, .16); color: var(--dorado-claro); }
.obras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.obra .nucleo { height: 100%; padding: 1.6rem; display: grid; gap: 1.25rem; align-content: start; }
.obra-tope { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.obra-tope h3 { font-size: 1.85rem; margin-top: .7rem; }
.obra .sector { color: rgba(247, 243, 234, .6); font-size: .88rem; }
.obra-avance { text-align: right; flex: none; }
.obra-avance span { display: block; font: 600 3.1rem/1 var(--f-display); color: var(--dorado-claro); }
.obra-avance small { color: rgba(247, 243, 234, .6); font-size: .8rem; }
.obra .lamina { min-height: 0; padding: 0; }
.obra .lamina svg { width: 100%; max-height: 170px; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.etapas li { display: grid; gap: .45rem; min-width: 0; }
.etapas .tramo { display: block; height: 5px; border-radius: 3px; background: rgba(247, 243, 234, .12); overflow: hidden; }
.etapas .tramo i { display: block; height: 100%; background: var(--laton); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--curva); }
.visible .etapas .tramo i { transform: scaleX(var(--p)); }
.etapas li:nth-child(2) i { transition-delay: .12s; }
.etapas li:nth-child(3) i { transition-delay: .24s; }
.etapas li:nth-child(4) i { transition-delay: .36s; }
.etapas li:nth-child(5) i { transition-delay: .48s; }
.etapas li:nth-child(6) i { transition-delay: .6s; }
.etapas li:nth-child(7) i { transition-delay: .72s; }
.etapas small { font-size: .7rem; color: rgba(247, 243, 234, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapas li.actual small { color: var(--dorado-claro); font-weight: 600; }
.obra-datos { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin: 0; padding-top: 1.1rem; font-size: .9rem; box-shadow: inset 0 1px 0 rgba(247, 243, 234, .1); }
.obra-datos dt { color: rgba(247, 243, 234, .55); }
.obra-datos dd { margin: 0; color: var(--marfil); }

/* luz y agua */
.energia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.25rem; }
.energia > :first-child { grid-row: span 2; }
.energia .nucleo { height: 100%; padding: 1.6rem; display: grid; gap: 1.25rem; align-content: start; }
.energia h3 { font-size: 1.55rem; }
.tono-salvia .nucleo { background: linear-gradient(180deg, #eef3ea, var(--nucleo) 60%); }
.tono-champan .nucleo { background: linear-gradient(180deg, #faf2e1, var(--nucleo) 70%); }
.tono-agua .nucleo { background: linear-gradient(180deg, #eaf1f4, var(--nucleo) 70%); }
.luz-lista { list-style: none; margin: 0; padding: 0; }
.luz-lista li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .6rem 0; box-shadow: inset 0 -1px 0 var(--hilo); font-size: .93rem; }
.luz-lista li:last-child { box-shadow: none; }
.luz-lista small { color: var(--apagado); }
.foco { width: 10px; height: 10px; border-radius: 50%; background: var(--pagada); }
.foco.planta { background: var(--pendiente); animation: latido-ambar 1.6s var(--curva) infinite; }
@keyframes latido-ambar { from { box-shadow: 0 0 0 0 rgba(201, 161, 90, .65); } to { box-shadow: 0 0 0 9px rgba(201, 161, 90, 0); } }
.tanques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 1.1rem .5rem; }
.tanque { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.deposito { position: relative; display: block; width: 34px; height: 66px; border-radius: 11px 11px 6px 6px; background: rgba(31, 58, 46, .06); box-shadow: inset 0 0 0 1px var(--hilo); overflow: hidden; }
.deposito i { position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(0); transition: transform 1.6s var(--curva); background: linear-gradient(180deg, #d8b46e, #b8862f); }
.agua .deposito i { background: linear-gradient(180deg, #9cbdcd, var(--agua)); }
.bajo .deposito i { background: linear-gradient(180deg, #b45a64, var(--atrasada)); }
.visible .deposito i { transform: scaleY(var(--p)); }
.tanque b { font: 600 1.05rem/1 var(--f-display); color: var(--verde); }
.tanque.bajo b { color: var(--atrasada); }
.tanque small { font-size: .68rem; line-height: 1.2; color: var(--apagado); max-width: 10ch; }

/* cobros + actividad */
.doble { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; }
.panel-cobros, .panel-actividad { height: 100%; padding: 1.6rem; display: grid; gap: 1rem; align-content: start; }
.grafico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; height: 230px; padding-top: .5rem; }
.col { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: .4rem; height: 100%; border-radius: 10px; }
.col:focus-visible { outline: 2px solid var(--laton); outline-offset: 2px; }
.col .valor { font: 600 1rem var(--f-display); color: var(--verde); opacity: 0; transition: opacity .4s var(--curva); }
.col.actual .valor, .col:hover .valor, .col:focus-visible .valor { opacity: 1; }
.col .palo { width: 100%; display: flex; align-items: flex-end; justify-content: center; box-shadow: inset 0 -1px 0 rgba(31, 58, 46, .25); }
.col .palo i { width: min(38px, 72%); height: 100%; border-radius: 4px 4px 0 0; background: rgba(168, 135, 74, .42); transform-origin: bottom; transform: scaleY(0); transition: transform 1.4s var(--curva), background .4s var(--curva); }
.col.actual .palo i, .col:hover .palo i, .col:focus-visible .palo i { background: var(--laton); }
.visible .col .palo i { transform: scaleY(var(--p)); }
.col small { font-size: .8rem; color: var(--apagado); }
.tip { min-height: 1.5em; font-size: .88rem; color: var(--verde); opacity: 0; transition: opacity .3s var(--curva); }
.tip.on { opacity: 1; }
.tabla-datos summary { cursor: pointer; font-size: .86rem; color: var(--apagado); }
.tabla-datos table { margin-top: .5rem; border-collapse: collapse; font-size: .88rem; }
.tabla-datos th, .tabla-datos td { text-align: left; padding: .25rem 1.25rem .25rem 0; }
.actividad { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.actividad::before { content: ""; position: absolute; left: calc(3rem + .9rem + 4px); top: .8rem; bottom: .8rem; width: 1px; background: var(--hilo); }
.actividad li { display: grid; grid-template-columns: 3rem auto 1fr; gap: .9rem; align-items: start; padding: .55rem 0; }
.actividad time { font: 600 1.02rem var(--f-display); color: var(--verde); }
.actividad .punto { position: relative; width: 9px; height: 9px; margin-top: .45rem; border-radius: 50%; background: var(--pagada); box-shadow: 0 0 0 4px var(--nucleo); }
.actividad .luz .punto { background: var(--pendiente); }
.actividad .obra .punto { background: var(--agua); }
.actividad .incidencia .punto { background: var(--atrasada); }
.actividad small { font-size: .74rem; font-weight: 600; color: var(--apagado); }
.actividad p { font-size: .92rem; }

@media (max-width: 860px) {
  .obras, .energia, .doble { grid-template-columns: 1fr; }
  .energia > :first-child { grid-row: auto; }
  .obra-avance span { font-size: 2.4rem; }
  .cinta { flex-direction: column; align-items: start; gap: .6rem; }
  .cinta-ventana { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .cinta-pista, .latido, .foco.planta { animation: none; }
  .cinta-ventana { overflow-x: auto; }
  .etapas .tramo i, .deposito i, .col .palo i, .col .valor, .tip { transition: none; }
}
.obra-nota { font-size: .8rem; color: rgba(247, 243, 234, .55); }
.banda .grabado-foto { max-height: 240px; filter: brightness(0) invert(1) sepia(1) saturate(1.8) brightness(.86); } /* el grabado verde se vuelve latón sobre el fondo oscuro */

/* horizonte del cliente: sus torres, a escala por niveles */
.skyline { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1.5rem, 5vw, 4.5rem); padding: 1rem 0 0; margin-bottom: 2.5rem; box-shadow: inset 0 -1px 0 rgba(31, 58, 46, .35); }
.skyline[hidden] { display: none; }
.torre-sky { display: grid; justify-items: center; gap: .3rem; padding-bottom: 1rem; text-decoration: none; color: var(--verde); text-align: center; }
.torre-sky .grabado-foto { height: calc(var(--h) * 340px); max-height: none; width: auto; transition: clip-path 2.2s var(--curva), transform .6s var(--curva); }
.torre-sky:hover .grabado-foto { transform: translateY(-6px); }
.torre-sky strong { font: 600 1.35rem/1.1 var(--f-display); margin-top: .5rem; }
.torre-sky small { font-size: .8rem; color: var(--apagado); }
.torre-sky:focus-visible { outline: 2px solid var(--laton); outline-offset: 6px; border-radius: 12px; }

/* pocos edificios: luz y agua en una sola fila */
.energia.pocos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.energia.pocos > :first-child { grid-row: auto; }
.nucleo > .vacio { padding: 1.25rem 1.5rem; }

@media (max-width: 860px) {
  .energia.pocos { grid-template-columns: 1fr; }
  .skyline { gap: .75rem; overflow-x: auto; justify-content: flex-start; }
  .torre-sky .grabado-foto { height: calc(var(--h) * 220px); }
  .torre-sky strong { font-size: 1.05rem; }
  .torre-sky small { max-width: 14ch; min-height: 5em; }
  .torre-sky strong { min-height: 2.3em; display: grid; align-items: end; } /* mismas alturas: las torres quedan sobre la misma línea */
}
@media (prefers-reduced-motion: reduce) { .torre-sky .grabado-foto { transition: none; } }