/* LAS VENTANITAS de Proyectos, BIM y ERP (22-oct, Samuel: «yo me refería más a este tipo de videítos»,
   con la captura del bento del CRM). Mismo molde que /showrooms/crm-bondades.css (que se carga antes y trae
   .bd, .bd-viz, .win, .wh, la entrada escalonada y la pausa fuera de pantalla); aquí sólo cada escena.
   Las tarjetas se pueden tocar: llevan a su video en la laptop (soluciones.js). */
.bd[data-n="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:880px; }
.bd > li[data-paso]{ cursor:pointer; }
.bd > li[data-paso]:focus-visible{ outline:2px solid var(--a); outline-offset:2px; }
.bd-d .ver{ display:flex; width:max-content; align-items:center; gap:4px; margin-top:8px; font-size:.82rem; font-weight:600; color:var(--a); }
.bd-d .ver svg{ width:12px; height:12px; fill:currentColor; stroke:none; }
@media (max-width:1023px){ .bd[data-n="3"]{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Avance: barras que crecen; la atrasada en rojo */
.v-av{ gap:8px; }
.v-av .fa{ display:grid; grid-template-columns:72px 1fr 30px; align-items:center; gap:8px; font-weight:600; }
.v-av .fa span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-av .fa i{ height:8px; border-radius:99px; background:var(--sg); overflow:hidden; }
.v-av .fa b{ display:block; height:100%; width:var(--p); border-radius:99px; background:var(--a); transform-origin:left; animation:av-b 7s var(--ease) calc(var(--k) * .25s) infinite both; }
.v-av .fa.tarde b{ background:#FF3B30; }
.v-av .fa em{ text-align:right; font-size:9.5px; font-weight:700; color:var(--muted); }
.v-av .fa.tarde em{ color:#D70015; }
.v-av .aviso{ margin-top:2px; padding:6px 8px; border-radius:8px; background:rgba(255,59,48,.09); color:#D70015; font-size:9.5px; font-weight:600; animation:av-a 7s var(--ease) infinite both; }
@keyframes av-b{ 0%{ transform:scaleX(0); } 30%,90%{ transform:scaleX(1); } 100%{ transform:scaleX(1); opacity:0; } }
@keyframes av-a{ 0%,32%{ opacity:0; translate:0 4px; } 40%,90%{ opacity:1; translate:0 0; } 100%{ opacity:0; } }

/* Bitácora: cada nota del día con sus fotos */
.v-bit{ gap:8px; }
.v-bit .en{ display:flex; gap:8px; min-width:0; animation:bit 8s var(--ease) calc(var(--k) * .5s) infinite both; }
.v-bit .en > small{ flex:none; width:28px; padding-top:1px; font-weight:600; }
.v-bit .en > div{ flex:1; min-width:0; padding-left:8px; border-left:2px solid var(--as); }
.v-bit .en span{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-bit .en p{ display:flex; gap:4px; margin-top:4px; }
.v-bit .en p i{ width:30px; height:22px; border-radius:4px; background:linear-gradient(150deg,#C9D3DC,#A7B4C0 55%,#C9B9A2); }
.v-bit .en p i:nth-child(2){ background:linear-gradient(150deg,#D8CBB6,#B9A68A 60%,#8E9AA6); }
.v-bit .en p i:nth-child(3){ background:linear-gradient(150deg,#B9C7D3,#8EA0B0); }
@keyframes bit{ 0%{ opacity:0; translate:0 -6px; } 8%,90%{ opacity:1; translate:0 0; } 100%{ opacity:0; } }

/* Incidencias: con número y responsable; una se resuelve */
.v-inc{ gap:0; }
.v-inc .wh{ margin-bottom:3px; }
.v-inc .r{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.05); min-width:0; }
.v-inc .r > b{ flex:none; width:22px; font-size:9.5px; color:var(--muted); }
.v-inc .r > span{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-inc .r > span small{ display:block; font-weight:500; }
.v-inc em{ flex:none; font-size:9px; font-weight:700; padding:2px 7px; border-radius:99px; }
.v-inc em.ab{ background:rgba(255,59,48,.1); color:#D70015; } .v-inc em.ab::before{ content:'Abierta'; }
.v-inc em.ok{ background:var(--okt); color:var(--ok); } .v-inc em.ok::before{ content:'Resuelta'; }
.v-inc em.cambia{ animation:inc-c 7s var(--ease) infinite; }
.v-inc em.cambia::before{ animation:inc-t 7s steps(1) infinite; }
@keyframes inc-c{ 0%,38%{ background:rgba(255,59,48,.1); color:#D70015; transform:none; } 44%{ transform:scale(1.15); } 50%,92%{ background:var(--okt); color:var(--ok); transform:none; } 100%{ background:rgba(255,59,48,.1); color:#D70015; } }
@keyframes inc-t{ 0%{ content:'Abierta'; } 44%{ content:'Resuelta'; } 96%{ content:'Abierta'; } }

/* RFI: la pregunta y su respuesta quedan juntas */
.v-rfi{ gap:8px; }
.v-rfi .q, .v-rfi .a{ max-width:88%; padding:7px 9px; border-radius:11px; font-size:10.5px; font-weight:500; line-height:1.35; }
.v-rfi small{ display:block; font-size:8.5px; font-weight:700; margin-bottom:2px; }
.v-rfi .q{ align-self:flex-start; background:var(--sg); border-bottom-left-radius:4px; }
.v-rfi .a{ align-self:flex-end; background:var(--a); color:#fff; border-bottom-right-radius:4px; animation:rfi-a 7s var(--spring) infinite both; transform-origin:right bottom; }
.v-rfi .a small{ color:rgba(255,255,255,.8); }
.v-rfi .est{ align-self:flex-end; font-size:9px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--okt); color:var(--ok); animation:rfi-e 7s var(--ease) infinite both; }
@keyframes rfi-a{ 0%,22%{ opacity:0; transform:scale(.7); } 32%,90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes rfi-e{ 0%,38%{ opacity:0; } 46%,90%{ opacity:1; } 100%{ opacity:0; } }

/* Inspecciones: punto por punto y la firma */
.v-insp{ gap:0; }
.v-insp .wh{ margin-bottom:3px; }
.v-insp .pt{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.05); font-weight:500; }
.v-insp .pt i{ flex:none; width:15px; height:15px; border-radius:4px; border:1.5px solid rgba(0,0,0,.2); position:relative; animation:tar-c 8s var(--ease) calc(var(--k) * .6s) infinite both; }
.v-insp .pt i::after{ content:''; position:absolute; left:4px; top:1.5px; width:3.5px; height:6.5px; border:solid #fff; border-width:0 1.8px 1.8px 0; rotate:45deg; }
.v-insp .firma{ margin-top:7px; font-size:9.5px; font-weight:700; color:var(--ok); animation:av-a 8s var(--ease) 1.2s infinite both; }

/* Planos: la hoja se dibuja; la vigente arriba, las viejas guardadas */
.v-pla{ gap:8px; }
.v-pla .hoja{ position:relative; flex:1; min-height:84px; border-radius:6px; background:#F4F7FB; box-shadow:inset 0 0 0 1px rgba(0,113,227,.12); overflow:hidden; }
.v-pla .hoja i{ position:absolute; background:rgba(0,90,180,.55); transform-origin:left top; }
.v-pla .h1, .v-pla .h2, .v-pla .h3{ left:10%; right:10%; height:1.5px; animation:pla-h 6s var(--ease) infinite both; }
.v-pla .h1{ top:22%; } .v-pla .h2{ top:50%; animation-delay:.2s; } .v-pla .h3{ top:78%; animation-delay:.4s; }
.v-pla .v1, .v-pla .v2, .v-pla .v3{ top:14%; bottom:14%; width:1.5px; transform-origin:top; animation:pla-v 6s var(--ease) infinite both; }
.v-pla .v1{ left:20%; animation-delay:.3s; } .v-pla .v2{ left:50%; animation-delay:.5s; } .v-pla .v3{ left:80%; animation-delay:.7s; }
.v-pla .sello{ position:absolute; right:6px; bottom:5px; font-size:8px; font-weight:700; color:rgba(0,90,180,.7); }
.v-pla .vers{ display:flex; gap:5px; }
.v-pla .vers em{ font-size:9px; font-weight:700; padding:2px 8px; border-radius:99px; }
.v-pla .vig{ background:var(--okt); color:var(--ok); animation:ok 6s var(--spring) infinite; }
.v-pla .vie{ background:var(--not); color:#8E8E93; text-decoration:line-through; }
@keyframes pla-h{ 0%{ transform:scaleX(0); } 25%,90%{ transform:scaleX(1); } 100%{ transform:scaleX(1); opacity:0; } }
@keyframes pla-v{ 0%{ transform:scaleY(0); } 25%,90%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }

/* Reporte: la hoja con tu logo y las fotos; sale el PDF */
.v-rep{ align-items:center; padding-top:14px; }
.v-rep .pdf{ width:74%; flex:1; background:#fff; border-radius:6px 6px 0 0; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 10px 22px -12px rgba(0,0,0,.3); padding:10px; display:flex; flex-direction:column; gap:6px; }
.v-rep .pc{ padding-bottom:6px; border-bottom:2px solid var(--a); }
.v-rep .pc b{ display:block; font-size:9px; font-weight:900; letter-spacing:-.02em; }
.v-rep .pc small{ font-size:8px; }
.v-rep .fotos{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.v-rep .fotos i{ height:30px; border-radius:3px; background:linear-gradient(150deg,#C9D3DC,#A7B4C0 55%,#C9B9A2); animation:bit 7s var(--ease) infinite both; }
.v-rep .fotos i:nth-child(2){ background:linear-gradient(150deg,#D8CBB6,#B9A68A 60%,#8E9AA6); animation-delay:.25s; }
.v-rep .fotos i:nth-child(3){ background:linear-gradient(150deg,#B9C7D3,#8EA0B0); animation-delay:.5s; }
.v-rep .ln{ height:4px; border-radius:2px; background:var(--sg); } .v-rep .ln.c{ width:70%; }
.v-rep .sale{ position:absolute; right:12px; top:12px; font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:99px; background:#FF3B30; color:#fff; box-shadow:0 6px 14px -6px rgba(255,59,48,.8); animation:ok 7s var(--spring) .6s infinite both; }

/* BIM: el edificio en capas; aparece el choque */
.v-bim{ gap:7px; }
.v-bim .iso{ position:relative; flex:1; min-height:80px; display:flex; flex-direction:column-reverse; align-items:center; justify-content:flex-start; padding-bottom:4px; }
.v-bim .iso i{ width:50%; height:13px; margin-top:-1px; border-radius:2px; background:linear-gradient(90deg,#D5DAF0 0 72%,#9AA6DA 72%); box-shadow:0 0 0 1px rgba(51,70,200,.22), inset 0 -3px 0 rgba(51,70,200,.18);
  transform:skewX(-20deg); animation:bim-p 7s var(--ease) calc(var(--k) * .12s) infinite both; }
.v-bim .tubo{ position:absolute; left:22%; right:26%; top:42%; height:3px; border-radius:2px; background:#0A84FF; animation:av-a 7s var(--ease) .6s infinite both; }
.v-bim .choque{ position:absolute; left:58%; top:calc(42% - 5px); width:13px; height:13px; border-radius:50%; background:#FF3B30; box-shadow:0 0 0 0 rgba(255,59,48,.5); animation:bim-c 7s var(--ease) infinite both; }
.v-bim .nota-bim{ padding:5px 8px; border-radius:8px; background:rgba(255,59,48,.08); animation:av-a 7s var(--ease) .4s infinite both; }
.v-bim .nota-bim b{ display:block; font-size:10px; color:#D70015; }
.v-bim .disc{ display:flex; gap:4px; }
.v-bim .disc em{ font-size:8.5px; font-weight:600; padding:2px 7px; border-radius:99px; background:var(--sg); color:var(--muted); }
.v-bim .disc em.on{ background:var(--as); color:var(--a); }
@keyframes bim-p{ 0%{ opacity:0; translate:0 -8px; } 10%,92%{ opacity:1; translate:0 0; } 100%{ opacity:0; } }
@keyframes bim-c{ 0%,34%{ opacity:0; transform:scale(.4); } 42%{ opacity:1; transform:scale(1.2); box-shadow:0 0 0 0 rgba(255,59,48,.5); } 60%{ box-shadow:0 0 0 9px rgba(255,59,48,0); transform:none; } 90%{ opacity:1; } 100%{ opacity:0; } }

/* Showroom: la fachada con lo disponible en verde; uno se escoge */
.v-sr{ padding:12px; gap:8px; background:linear-gradient(180deg,#E9F0F7,#fff 70%); }
.v-sr .fach{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; width:56%; margin:0 auto; padding:5px; border-radius:4px 4px 0 0; background:#C9D3DD; }
.v-sr .fach i{ height:13px; border-radius:2px; }
.v-sr .fach i.d{ background:#4FC27A; } .v-sr .fach i.a{ background:#FFB340; } .v-sr .fach i.v{ background:#A1A1A6; }
.v-sr .fach i.f{ animation:inv-f 6s var(--ease) infinite; }
.v-sr .sr-ficha{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; padding:7px 9px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 8px 18px -12px rgba(0,0,0,.3); animation:av-a 6s var(--ease) .3s infinite both; }
.v-sr .sr-ficha b{ font-size:11px; }
.v-sr .sr-ficha small{ grid-column:1; }
.v-sr .sr-ficha span{ grid-row:1 / span 2; grid-column:2; font-size:9px; font-weight:700; padding:5px 9px; border-radius:99px; background:#25D366; color:#fff; }

/* Compras: la orden nueva entra; lo que falta por pagar */
.v-oc{ gap:0; }
.v-oc .wh{ margin-bottom:3px; }
.v-oc .r{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.05); min-width:0; }
.v-oc .r > b{ flex:none; font-size:9.5px; width:38px; }
.v-oc .r > span{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-oc .r > span small{ display:block; font-weight:500; }
.v-oc em{ flex:none; font-size:9px; font-weight:700; padding:2px 7px; border-radius:99px; }
.v-oc em.rec{ background:var(--okt); color:var(--ok); } .v-oc em.env{ background:var(--as); color:var(--a); } .v-oc em.bor{ background:var(--not); color:#6E6E73; }
.v-oc .r.nueva{ animation:bit 7s var(--ease) .4s infinite both; background:linear-gradient(90deg,var(--as),transparent); }
.v-oc .pp{ display:flex; justify-content:space-between; align-items:baseline; margin-top:7px; }
.v-oc .pp b{ font-size:12px; color:#D70015; }

/* Contratos: por partida, contratado y pagado contra el presupuesto */
.v-ppto{ gap:9px; }
.v-ppto .pa{ display:grid; grid-template-columns:68px 1fr; align-items:center; gap:8px; font-weight:600; }
.v-ppto .pa i{ position:relative; height:10px; border-radius:99px; background:var(--sg); overflow:hidden; }
.v-ppto .pa b{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; transform-origin:left; animation:av-b 7s var(--ease) calc(var(--k) * .25s) infinite both; }
.v-ppto .pa b.co{ width:var(--co); background:rgba(0,113,227,.35); }
.v-ppto .pa b.pg{ width:var(--pa); background:var(--a); animation-delay:calc(var(--k) * .25s + .5s); }
.v-ppto .ley{ display:flex; gap:10px; margin-top:2px; }
.v-ppto .ley span{ display:flex; align-items:center; gap:4px; font-size:9px; color:var(--muted); font-weight:500; }
.v-ppto .ley span::before{ content:''; width:8px; height:8px; border-radius:2px; background:var(--sg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.v-ppto .ley .co::before{ background:rgba(0,113,227,.35); box-shadow:none; } .v-ppto .ley .pg::before{ background:var(--a); box-shadow:none; }

/* Cobranza: el plan de pagos; lo vencido en rojo */
.v-cob{ gap:0; }
.v-cob .wh{ margin-bottom:3px; }
.v-cob .r{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.05); min-width:0; }
.v-cob .r > span{ flex:1; min-width:0; font-weight:600; white-space:nowrap; }
.v-cob .r > span small{ display:block; font-weight:500; }
.v-cob .r > b{ flex:none; font-size:10px; }
.v-cob em{ flex:none; width:58px; text-align:center; font-size:9px; font-weight:700; padding:2px 0; border-radius:99px; }
.v-cob em.pag{ background:var(--okt); color:var(--ok); } .v-cob em.pen{ background:var(--not); color:#6E6E73; }
.v-cob em.ven{ background:#FF3B30; color:#fff; animation:cob 2.4s var(--ease) infinite; }
@keyframes cob{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.45); } 60%{ box-shadow:0 0 0 6px rgba(255,59,48,0); } }

@media (prefers-reduced-motion: reduce){
  .v-av .fa b, .v-ppto .pa b{ transform:none; }
  .v-pla .hoja i{ transform:none; }
  .v-inc em.cambia::before{ content:'Resuelta'; }
}
.v-ppto .pp{ display:flex; justify-content:space-between; align-items:baseline; margin-top:4px; padding-top:7px; border-top:1px solid rgba(0,0,0,.06); }
.v-ppto .pp b{ font-size:12px; color:var(--a); }