/* El primer capítulo: el pasillo de noche. Todo cuelga de #night.
   La imagen se ubica sólo con CSS, para que el primer cuadro salga armado antes de que corra
   ningún script: --oy baja el horizonte en ventanas cortas y deja libre el texto bajo la luz. */
#night{
  --vh:1vh;
  --t1:clamp(2.5rem,min(5.9vw,calc(var(--vh)*9.3)),5.5rem);
  --h:max(calc(var(--vh)*100),560px);
  --rw:max(100vw,calc(var(--h)*1.6));
  --rh:calc(var(--rw)*.625);
  --say:calc(var(--head) + 10px + var(--t1)*2.08 + 88px);
  --up:calc(var(--rw)*.1376);
  --vpy:max(calc(var(--h)*.595),calc(var(--say) + var(--up) + 26px));
  --oy:clamp(calc(var(--h) - var(--rh)),calc(var(--vpy) - var(--rh)*.595),0px);
  position:relative;height:var(--h);overflow:hidden;isolation:isolate;
  /* Mientras llega la foto: la misma toma en unos pocos píxeles. Es lo primero que se pinta. */
  background:var(--night) url(data:image/webp;base64,UklGRuIAAABXRUJQVlA4INYAAABQBgCdASowAB4APtFao0yoJSMiMBqoAQAaCWkA0BgWbptIQtU3AbN6khTq2lxfNHn4Way/6/s4TfC2AAD+9Zhz/ZrzZKJLIDm4FxiW73+TyAWJ4lwHxSlWWihyE+yLHWlkbnKUZJJb5ft3BWamV8A0+A4luxAPhqssbv+V4qaTqMcvpe2Y56fu0PbRA8pUwOsbDcZNgBvnNQUBy5dK9+9rnsP00n0eZh9Yc20xFMVsVGJ27+9l+V5jJxWtsNP038HtgV90BxLCoCLSyyIPD6jvi7kBAAAA) 50% var(--oy)/cover no-repeat;
}
@supports (height:1svh){#night{--vh:1svh}}

/* ===== La imagen ===== */
#night .n-plate img,#night .n-warm{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--oy)}
#night .n-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .35s ease-out;pointer-events:none}
#night .n-gl.on{opacity:1}
#night .n-warm{mix-blend-mode:screen;opacity:.16}
#night .n-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Arriba, el encabezado sale de la noche; abajo, el capítulo termina exactamente en ella. */
#night::before,#night::after{content:"";position:absolute;z-index:1;left:0;right:0;pointer-events:none}
#night::before{top:0;height:calc(var(--head) + 44px);background:linear-gradient(to bottom,var(--night),transparent)}
#night::after{bottom:0;height:38%;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--night) 46%,transparent) 42%,color-mix(in srgb,var(--night) 84%,transparent) 74%,var(--night) 100%)}

/* ===== El titular ===== */
#night .n-say{position:absolute;z-index:3;left:0;right:0;top:calc(var(--head) + clamp(2px,1.2vh,14px));padding:0 var(--gutter);text-align:center}
#night h1{margin:0 auto;font-size:var(--t1);font-weight:250;line-height:1.04;letter-spacing:-.032em;color:var(--on-night)}
#night h1 .n-l{display:block}
#night h1 .n-lit{color:var(--lamp)}
#night .n-what,#night .n-for{margin:clamp(8px,1.5vh,16px) auto 0;max-width:47em;font-size:clamp(15px,1.16vw,17px);line-height:1.44;color:var(--on-night-2);text-wrap:balance;text-shadow:0 1px 12px color-mix(in srgb,var(--night) 70%,transparent)}
#night .n-for{margin-top:clamp(3px,.6vh,6px)}
/* Las luminarias del techo caen justo detrás del texto: una penumbra las apaga sin que se note. */
#night .n-say::before{content:"";position:absolute;z-index:-1;left:50%;top:calc(var(--t1)*2.08 - 8px);width:min(900px,100vw);height:clamp(130px,17vh,170px);transform:translateX(-50%);background:radial-gradient(closest-side,rgba(9,10,13,.94) 0%,rgba(9,10,13,.86) 55%,rgba(9,10,13,0) 100%);pointer-events:none}
/* Los rubros se encienden uno por uno, una vez: el mismo lector que recorre el pasillo. */
#night .n-for span{color:var(--on-night);animation:n-read 1.5s ease-in-out both}
#night .n-for span:nth-child(1){animation-delay:1.1s}
#night .n-for span:nth-child(2){animation-delay:1.75s}
#night .n-for span:nth-child(3){animation-delay:2.4s}
#night .n-for span:nth-child(4){animation-delay:3.05s}
#night .n-for span:nth-child(5){animation-delay:3.7s}
#night .n-for span:nth-child(6){animation-delay:4.35s}
@keyframes n-read{40%{color:var(--lamp)}}

/* ===== Las anotaciones del agente: la pieza vive en base.css ===== */
#night .n-tags{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
#night .n-tags.one .ann-label{padding:6px 11px 7px;border-radius:var(--r-s)}
#night .n-tags.one .ann-label b{font-size:.84rem}
#night .n-tags.one .ann-do,#night .n-tags.one .ann-label small{display:none}
#night .n-tags.one .ann-val{font-size:.8rem}

/* ===== La fila de abajo: lo encontrado, el control, lo leído ===== */
#night .n-deck{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1.7fr) auto minmax(0,1fr);gap:clamp(14px,2.2vw,32px);align-items:end;padding:0 var(--gutter) max(clamp(14px,2.6vh,26px),env(safe-area-inset-bottom))}
#night .n-fig{margin:0;min-width:0;text-shadow:0 1px 10px color-mix(in srgb,var(--night) 80%,transparent)}
#night .n-found b{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .32em;font:300 clamp(1.95rem,min(2.85vw,calc(var(--vh)*5.4)),2.75rem)/1.06 var(--sans);letter-spacing:-.024em;color:var(--lamp)}
#night .n-found b span{white-space:nowrap}
html.i18n-wait #night .n-found{visibility:hidden}
#night .n-found small{font:400 .46em/1 var(--sans);letter-spacing:-.006em;white-space:nowrap}
#night .n-note{display:block;margin-top:5px;max-width:31em;font-size:.84rem;line-height:1.34;color:var(--on-night-2)}
#night .n-read{text-align:right;opacity:0;transition:opacity .6s ease-out}
#night.on-air .n-read{opacity:1}
#night .n-read b{display:block;font:400 clamp(1.05rem,1.34vw,1.25rem)/1.15 var(--sans);letter-spacing:-.012em;color:var(--on-night);font-variant-numeric:tabular-nums;white-space:nowrap}
#night .n-read .n-note{margin-left:auto;margin-top:3px;max-width:24em}

#night .n-askwrap{position:relative}
#night .n-ask{display:flex;align-items:stretch;background:var(--night-2);border:1px solid var(--line-night);border-radius:var(--r-l);padding:6px;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--night) 80%,transparent)}
#night .n-f{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;margin:0;padding:5px 16px 6px;border-radius:var(--r-m);cursor:text;transition:background-color .18s}
#night .n-f>span:first-child{font-size:.78rem;line-height:1.2;color:var(--on-night-2)}
#night .n-f select,#night .n-f input{appearance:none;-webkit-appearance:none;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:500 1.03rem/1.3 var(--sans);color:var(--on-night);outline:0;caret-color:var(--lamp)}
#night .n-f:focus-within{background:var(--night-3);box-shadow:inset 0 0 0 2px var(--lamp)}
@media (hover:hover){#night .n-f:hover{background:var(--night-3)}}
#night .n-sel{appearance:none;width:13.4em;border:0;background:none;color:inherit;font:inherit;text-align:left;padding-right:38px;cursor:pointer}
#night .n-sel>span:first-child{font-weight:400}
#night .n-sel b{display:block;overflow:hidden;font:500 1.03rem/1.3 var(--sans);color:var(--on-night);white-space:nowrap;text-overflow:ellipsis}
#night .n-sel svg{position:absolute;right:13px;top:50%;width:13px;height:13px;margin-top:-6px;fill:none;stroke:var(--on-night-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
#night .n-sel[aria-expanded="true"]{background:var(--night-3)}
#night .n-sel[aria-expanded="true"] svg{transform:rotate(180deg)}
#night .n-sel:focus-visible{outline:0;background:var(--night-3);box-shadow:inset 0 0 0 2px var(--lamp)}

/* La lista del rubro: sube desde el control, porque abajo se termina la pantalla. */
#night .n-pop{position:absolute;z-index:5;left:0;bottom:calc(100% + 10px);width:min(340px,100%);overflow:auto;padding:6px;border:1px solid var(--line-night);border-radius:var(--r-l);background:rgba(18,21,27,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 26px 60px -18px rgba(0,0,0,.85);transform-origin:24px 100%;animation:n-pop .22s var(--ease) both;scrollbar-width:thin}
#night .n-pop.down{bottom:auto;top:calc(100% + 10px);transform-origin:24px 0}
@keyframes n-pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
#night .n-opts{margin:0;padding:0;list-style:none;outline:0}
#night .n-opt{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 12px;border-radius:var(--r-m);font-size:.98rem;font-weight:400;color:var(--on-night-2);cursor:pointer;transition:background-color .12s,color .12s}
#night .n-opt .ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#night .n-opt.on{background:var(--night-3);color:var(--on-night)}
#night .n-opts:focus-visible .n-opt.on{box-shadow:inset 0 0 0 2px var(--lamp)}
#night .n-opt[aria-selected="true"]{color:var(--on-night);font-weight:500}
#night .n-tick{margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--lamp);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
#night .n-opt[aria-selected="true"] .n-tick{visibility:visible}
#night .n-other{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin-top:6px;padding:9px 12px;border-top:1px solid var(--line-night);font-size:.875rem;line-height:1.3;color:var(--lamp);text-decoration:none}
#night .n-other svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
@media (hover:hover){#night .n-other:hover svg{transform:translateX(3px)}}
#night .n-money{display:flex;align-items:baseline;gap:.2em;font:500 1.03rem/1.3 var(--sans)}
#night .n-money input{width:3.4em;font-variant-numeric:tabular-nums}
#night .n-sep{width:1px;margin:9px 2px;background:var(--line-night)}
#night .n-ask .btn{margin-left:6px}
#night .n-err{position:absolute;left:0;right:0;bottom:calc(100% + 8px);margin:0;text-align:center;font-size:.84rem;color:var(--lamp)}
#night .n-err:empty{display:none}

@media (max-width:1340px){
  #night .n-deck{grid-template-columns:minmax(0,1.25fr) auto minmax(0,1fr)}
}
@media (max-width:1180px){
  #night .n-deck{grid-template-columns:minmax(0,1fr) auto}
  #night .n-read{display:none}
}
@media (max-width:860px){
  #night .n-deck{grid-template-columns:minmax(0,1fr);gap:10px}
  #night .n-found b{font-size:clamp(1.5rem,6.6vw,2.2rem)}
  #night .n-note{margin-top:3px;max-width:none;font-size:.79rem}
  #night .n-ask{flex-wrap:wrap;border-radius:var(--r-l)}
  #night .n-sel{flex:1 1 100%;width:auto}
  #night .n-sep{display:none}
  #night .n-sales{flex:0 0 auto;padding:4px 8px 5px 14px}
  #night .n-money input{width:3.1em}
  #night .n-ask .btn{flex:1 1 0;min-width:0;min-height:46px;padding:0 10px;font-size:.9rem}
  #night .n-err{position:static;margin-bottom:6px;text-align:left}
}

/* ===== De pie: otra toma, no la apaisada apretada ===== */
@media (max-aspect-ratio:4/5){
  #night{
    --t1:clamp(2rem,9.7vw,3.4rem);
    --rw:max(100vw,calc(var(--h)*.4621));
    --rh:calc(var(--rw)*2.1641);
    --say:calc(var(--head) + 4px + var(--t1)*2.1 + 118px);
    --up:calc(var(--rw)*.299);
    --vpy:min(max(calc(var(--h)*.575),calc(var(--say) + var(--up) + 16px)),calc(var(--h) - 190px));
    --oy:clamp(calc(var(--h) - var(--rh)),calc(var(--vpy) - var(--rh)*.575),0px);
    background-image:url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAACwBACdASoaADgAPtFQn0woJCKiMBv6AQAaCWkAznRBuVQ25TvYk1Xim5F4FaoAAP724yi74XE2f65Aa/dZ7s7Pe5aXEfFIUoOmirQ7qppfMCrdevZ3wsrhoYRuI5WtXb8a+HjF/utkBZ40d6WoUF1hHU1dYUt6PSI56Z5G/Lev7BgvaRTbB/hkorhzy9c+Zx8wAAAA);
  }
  #night .n-say{top:calc(var(--head) + 2px)}
  #night h1{line-height:1.05}
  #night .n-what{margin-top:9px;font-size:.92rem;line-height:1.4}
  #night .n-for{font-size:.86rem;line-height:1.38}
}
@media (max-aspect-ratio:4/5) and (min-width:600px){
  #night{--say:calc(var(--head) + 8px + var(--t1)*2.2 + 84px)}
}
/* Teléfono muy bajo, con las barras del navegador a la vista: queda la primera oración. */
@media (max-aspect-ratio:4/5) and (max-width:599px) and (max-height:680px){
  #night{--say:calc(var(--head) + 4px + var(--t1)*2.1 + 88px)}
  #night .n-more{display:none}
}
@media (prefers-reduced-motion:reduce){
  #night .n-gl,#night .n-read{transition:none}
  #night .n-for span,#night .n-pop{animation:none}
}
/* De pie el texto ocupa casi todo el ancho: la penumbra también. */
@media (max-aspect-ratio:4/5){
  #night .n-say::before{top:calc(var(--t1)*2.08 - 4px);width:170vw;height:calc(100% - var(--t1)*2.08 + 40px)}
}