/* CRM · BONDADES — Samuel 19-oct: «acá nos falta mostrar todas las bondades del CRM más claro», después
   «más bonito esto» y el 20-oct «puede elevarse la estética y proporciones». Bento de 8 tarjetas iguales
   (4×2 en escritorio, 2×4 en tableta, una columna en teléfono). Cada tarjeta: tarjeta blanca → escenario gris
   → ventanita de la app que sangra por abajo (llena su cuadro). Un solo acento (azul) para todas; los colores
   de dentro son los semánticos del CRM (estatus, WhatsApp). Sólo lo que existe en src/pages/portal/crm2/*.
   Entran escalonadas al verse (crm-bondades.js); las animaciones corren sólo ya a la vista; Inventario se
   enciende cuando el mockup publica un cambio. */
.bd{ width:min(100% - 2 * var(--pad), 1120px); margin:clamp(40px,5vw,64px) auto 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px);
  --a:#0071E3; --as:rgba(0,113,227,.10); --ok:#248A3D; --okt:rgba(52,199,89,.16); --am:#B25000; --amt:rgba(255,149,0,.18);
  --no:#8E8E93; --not:rgba(142,142,147,.16); --sg:#F5F5F7; --vh:clamp(196px,17vw,214px); }

.bd > li{ min-width:0; min-height:0; display:flex; flex-direction:column; background:#fff; border-radius:24px; padding:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -24px rgba(0,0,0,.22);
  outline:1.5px solid transparent; outline-offset:-1.5px;
  transition:outline-color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease); }
.bd-tx{ padding:16px 12px 12px; }
.bd-cab{ display:flex; align-items:center; gap:10px; min-width:0; }
.bd-ic{ flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--as); color:var(--a);
  transition:background-color .4s var(--ease), color .4s var(--ease); }
.bd-ic svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bd-cab b{ display:block; min-width:0; font-size:1.06rem; line-height:1.25; font-weight:600; letter-spacing:-.018em; color:var(--ink); }
.bd-d{ display:block; margin-top:6px; font-size:.875rem; line-height:1.45; color:var(--muted); text-wrap:pretty; }

/* ── el escenario y la ventanita (misma altura en toda la fila → los títulos alinean) ── */
.bd-viz{ position:relative; flex:none; height:var(--vh); border-radius:17px; overflow:hidden;
  background:linear-gradient(180deg,#F7F8FA 0%,#EEF0F4 100%); font-family:var(--app-font); color:var(--ink); }
.bd-viz *, .bd-viz *::before, .bd-viz *::after{ box-sizing:border-box; }
.bd-viz small{ font-size:9.5px; font-weight:500; color:var(--muted); letter-spacing:0; }
.bd-viz em{ font-style:normal; }
.win{ position:absolute; left:14px; right:14px; top:14px; bottom:-1px; background:#fff; border-radius:12px 12px 0 0;
  box-shadow:0 0 0 .5px rgba(0,0,0,.06), 0 8px 22px -12px rgba(16,24,40,.22); padding:10px 11px 0; overflow:hidden;
  display:flex; flex-direction:column; gap:7px; font-size:10.5px; line-height:1.25; }
.wh{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding-bottom:7px; border-bottom:1px solid rgba(0,0,0,.06); }
.wh > span{ font-size:11.5px; font-weight:700; letter-spacing:-.01em; }
.wh small{ white-space:nowrap; }
.wh .pill{ padding:2px 7px; border-radius:999px; background:var(--as); color:var(--a); font-weight:600; }
.n small, .tr small, .ev small, .dt small, .v-perm .p span small{ display:block; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* todo corre sólo cuando la rejilla ya está a la vista */
.bd-viz *{ animation-play-state:paused !important; }
.bd.in .bd-viz *{ animation-play-state:running !important; }

/* Inventario: torre por piso con su semáforo; una unidad cambia */
.v-inv .ley{ display:flex; gap:10px; flex-wrap:wrap; }
.v-inv .ley span{ display:flex; align-items:center; gap:4px; font-size:9.5px; color:var(--muted); font-weight:500; }
.v-inv .ley span::before{ content:''; width:7px; height:7px; border-radius:2px; background:var(--okt); box-shadow:inset 0 0 0 1px rgba(36,138,61,.35); }
.v-inv .ley .a::before{ background:var(--amt); box-shadow:inset 0 0 0 1px rgba(178,80,0,.35); }
.v-inv .ley .v::before{ background:var(--not); box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.v-inv .g{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.v-inv .g i{ font-style:normal; height:22px; border-radius:5px; display:grid; place-items:center; font-size:8px; font-weight:600; letter-spacing:-.02em;
  background:var(--okt); color:var(--ok); }
.v-inv .g i.a{ background:var(--amt); color:var(--am); }
.v-inv .g i.v{ background:var(--not); color:#6E6E73; }
.v-inv .g i.f{ animation:inv-f 6s var(--ease) infinite; }
@keyframes inv-f{ 0%,22%{ background:var(--okt); color:var(--ok); transform:scale(1); box-shadow:none; }
  28%{ transform:scale(1.25); box-shadow:0 0 0 3px rgba(0,113,227,.25); }
  34%,62%{ background:#FF9F0A; color:#fff; transform:scale(1); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px rgba(255,149,0,.5); }
  70%,100%{ background:var(--okt); color:var(--ok); box-shadow:none; } }

/* Leads: filas con su origen */
.v-leads{ gap:2px; }
.v-leads .wh{ margin-bottom:3px; }
.v-leads .r{ display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(0,0,0,.05); min-width:0;
  animation:lead-r 7s var(--ease) calc(var(--k) * .3s) infinite both; }
.v-leads .av, .v-perm .av{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:-.02em; }
.v-leads .av{ background:var(--as); color:var(--a); }
.v-leads .n{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-leads .c{ flex:none; font-size:9px; font-weight:600; padding:3px 7px; border-radius:999px; }
.v-leads .c.sr{ background:var(--as); color:#0060C0; } .v-leads .c.si{ background:var(--okt); color:var(--ok); } .v-leads .c.fo{ background:var(--amt); color:var(--am); }
@keyframes lead-r{ 0%{ opacity:0; translate:0 -6px; } 7%,90%{ opacity:1; translate:0 0; } 100%{ opacity:0; translate:0 0; } }

/* Pipeline: tres etapas; Ana avanza */
.v-pipe .cols{ position:relative; flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; --g:6px; min-height:0; }
.v-pipe .col{ background:var(--sg); border-radius:8px 8px 0 0; padding:6px 5px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.v-pipe .col > small{ display:flex; justify-content:space-between; font-weight:600; color:#3A3A3C; white-space:nowrap; padding:0 2px; }
.v-pipe .col > small b{ font-weight:600; color:var(--muted); }
.v-pipe .hueco{ height:34px; border-radius:6px; border:1px dashed rgba(0,0,0,.12); }
.v-pipe .tr{ display:block; height:34px; padding:5px 6px; border-radius:6px; background:#fff; font-style:normal; font-size:9.5px; font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.08); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-pipe .tr small{ font-size:8.5px; }
.v-pipe .mueve{ position:absolute; left:5px; top:26px; width:calc((100% - 2 * var(--g)) / 3 - 10px); color:#fff; background:var(--a);
  box-shadow:0 6px 14px -6px rgba(0,113,227,.7); animation:pipe-m 7s var(--ease) infinite; }
.v-pipe .mueve small{ color:rgba(255,255,255,.82); }
@keyframes pipe-m{ 0%,16%{ transform:translateX(0); opacity:1; }
  33%,50%{ transform:translateX(calc(100% + 10px + var(--g))); }
  67%,90%{ transform:translateX(calc(200% + 20px + 2 * var(--g))); opacity:1; } 100%{ transform:translateX(calc(200% + 20px + 2 * var(--g))); opacity:0; } }

/* Agenda: la semana y el día; aparece la visita */
.v-cal .sem{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; padding-bottom:7px; border-bottom:1px solid rgba(0,0,0,.06); }
.v-cal .sem span{ display:grid; justify-items:center; gap:2px; font-size:10.5px; font-weight:600; }
.v-cal .sem small{ font-size:8.5px; font-weight:600; }
.v-cal .sem .hoy{ color:#fff; }
.v-cal .sem .hoy{ background:var(--a); border-radius:8px; padding:2px 0 3px; } .v-cal .sem .hoy small{ color:rgba(255,255,255,.8); }
.v-cal .sem span:not(.hoy){ padding:2px 0 3px; }
.v-cal .ev{ display:flex; gap:8px; align-items:stretch; min-width:0; }
.v-cal .ev > small{ flex:none; width:30px; padding-top:3px; font-weight:600; }
.v-cal .ev > span{ flex:1; min-width:0; padding:4px 8px; border-radius:6px; background:var(--as); border-left:3px solid rgba(0,113,227,.45);
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#0A3F7A; }
.v-cal .ev.nueva > span{ background:var(--a); border-left-color:#0058B0; color:#fff; transform-origin:left center; animation:cita 6s var(--spring) infinite; }
.v-cal .ev.nueva > span small{ color:rgba(255,255,255,.82); }
@keyframes cita{ 0%,14%{ opacity:0; transform:scale(.8); } 24%,88%{ opacity:1; transform:none; } 100%{ opacity:0; transform:none; } }

/* Tareas: se van palomeando */
.v-tar{ gap:0; }
.v-tar .wh{ margin-bottom:3px; }
.v-tar .t{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.05); font-weight:500; min-width:0; }
.v-tar .t span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-tar .t em{ flex:none; font-size:9px; font-weight:600; padding:2px 6px; border-radius:999px; background:var(--not); color:#6E6E73; }
.v-tar .t em.hoy{ background:var(--amt); color:var(--am); }
.v-tar .t i{ flex:none; width:15px; height:15px; border-radius:50%; border:1.5px solid rgba(0,0,0,.2); position:relative;
  animation:tar-c 7s var(--ease) calc(var(--k) * .7s) infinite both; }
.v-tar .t 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-tar .t span{ animation:tar-t 7s var(--ease) calc(var(--k) * .7s) infinite both; }
.v-tar .t:nth-child(n+5) i, .v-tar .t:nth-child(n+5) span{ animation:none; }
@keyframes tar-c{ 0%,15%{ background:transparent; border-color:rgba(0,0,0,.2); } 22%,88%{ background:var(--a); border-color:var(--a); } 100%{ background:transparent; } }
@keyframes tar-t{ 0%,15%{ color:var(--ink); } 22%,88%{ color:var(--muted); } 100%{ color:var(--ink); } }

/* Plantillas de WhatsApp: eliges una, el mensaje se escribe y lo abres en WhatsApp (no se envía solo) */
.v-wa .chips{ display:flex; gap:5px; flex-wrap:nowrap; overflow:hidden; }
.v-wa .chips em{ flex:none; font-size:9.5px; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--sg); color:#3A3A3C; }
.v-wa .chips em.on{ background:var(--ink); color:#fff; }
.v-wa .wb{ align-self:stretch; background:#E7FBE3; border:1px solid rgba(37,211,102,.25); border-radius:10px; padding:8px 10px; font-size:11px; min-height:32px; }
.v-wa .esc{ display:block; max-width:0; white-space:nowrap; overflow:hidden; border-right:1.5px solid #1F8A4C; animation:esc 7s steps(32,end) infinite; }
@keyframes esc{ 0%,8%{ max-width:0; } 55%,92%{ max-width:32ch; } 100%{ max-width:0; } }
.v-wa .btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:#25D366; color:#fff;
  font-size:10px; font-weight:700; box-shadow:0 4px 12px -6px rgba(37,211,102,.9); animation:wa-b 7s var(--ease) infinite; }
.v-wa .btn svg{ width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linejoin:round; }
.v-wa .wa-pie{ margin-top:auto; padding:7px 0 10px; border-top:1px solid rgba(0,0,0,.06); line-height:1.35; }
@keyframes wa-b{ 0%,56%{ transform:none; } 60%{ transform:scale(1.06); } 64%,100%{ transform:none; } }

/* Fichas: la ficha que mandaste y su «Abierta ✓» */
.v-ficha{ padding:0; gap:0; }
.v-ficha .foto{ position:relative; flex:1 1 auto; min-height:70px; display:block;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.18)), linear-gradient(160deg,#C9DCEC 0%,#DCE6EE 40%,#E9DCCB 100%); }
.v-ficha .foto::before{ content:''; position:absolute; left:18%; right:44%; bottom:0; height:78%; border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.75) 0 3px,rgba(255,255,255,0) 3px 9px), linear-gradient(180deg,#9FB4C6,#7F96AB); }
.v-ficha .foto::after{ content:''; position:absolute; left:52%; right:20%; bottom:0; height:52%; border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.7) 0 3px,rgba(255,255,255,0) 3px 9px), linear-gradient(180deg,#C2B29C,#A8977F); }
.v-ficha .foto em{ position:absolute; left:9px; top:8px; font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
  padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.28); backdrop-filter:blur(4px); }
.v-ficha .dt{ padding:9px 11px 7px; font-size:12px; font-weight:700; letter-spacing:-.01em; }
.v-ficha .dt small{ font-size:9.5px; }
.v-ficha .env{ margin:0 11px 11px; padding-top:7px; border-top:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; }
.v-ficha .env small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-ficha .ok{ flex:none; font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--okt); color:var(--ok);
  animation:ok 6s var(--spring) infinite; }
@keyframes ok{ 0%,25%{ opacity:0; transform:scale(.6); } 35%,88%{ opacity:1; transform:none; } 100%{ opacity:0; transform:none; } }

/* Permisos: cada persona con su acceso */
.v-perm{ gap:0; }
.v-perm .wh{ margin-bottom:3px; }
.v-perm .p{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(0,0,0,.05); min-width:0; }
.v-perm .av{ background:var(--c); color:#fff; }
.v-perm .p > span{ flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-perm .sw{ flex:none; position:relative; width:28px; height:16px; border-radius:999px; background:#E3E3E8; }
.v-perm .sw::after{ content:''; position:absolute; left:2px; top:2px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.v-perm .sw.on{ background:#34C759; } .v-perm .sw.on::after{ transform:translateX(12px); }
.v-perm .sw.anim{ animation:sw-b 5s var(--ease) infinite; } .v-perm .sw.anim::after{ animation:sw-k 5s var(--ease) infinite; }
@keyframes sw-b{ 0%,30%{ background:#E3E3E8; } 40%,85%{ background:#34C759; } 95%,100%{ background:#E3E3E8; } }
@keyframes sw-k{ 0%,30%{ transform:none; } 40%,85%{ transform:translateX(12px); } 95%,100%{ transform:none; } }

/* entrada escalonada (sólo si hay JS: sin él, todo visible). Usa `translate` para dejar `transform` al hover. */
.bd.anima > li{ opacity:0; translate:0 16px; }
.bd.anima.in > li{ animation:bd-in .65s var(--ease) calc(var(--i) * 60ms) both; }
@keyframes bd-in{ from{ opacity:0; translate:0 16px; } to{ opacity:1; translate:0 0; } }

/* hover: se levanta, sólo con mouse */
@media (hover:hover) and (pointer:fine){
  .bd > li:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 22px 44px -26px rgba(0,0,0,.32); }
}

/* en sincronía con el mockup: la tarjeta de lo que está pasando se enciende */
.bd > li.ahora{ outline-color:var(--a); box-shadow:0 14px 32px -18px rgba(0,113,227,.5); }
.bd > li.ahora .bd-ic{ background:var(--a); color:#fff; }

@media (max-width:1023px){
  .bd{ grid-template-columns:repeat(2,minmax(0,1fr)); --vh:204px; }
}
/* teléfono: galería que se desliza de lado (la siguiente asoma), en vez de 8 tarjetas apiladas */
@media (max-width:600px){
  .bd{ width:100%; display:flex; gap:12px; --vh:200px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    padding:4px var(--pad) 18px; scroll-padding-inline:var(--pad); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .bd::-webkit-scrollbar{ display:none; }
  .bd > li{ flex:0 0 min(82%, 320px); scroll-snap-align:start; border-radius:22px; }
  .bd-tx{ padding:14px 10px 10px; }
  .win{ left:16px; right:16px; top:16px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
  .bd.anima > li{ opacity:1; translate:none; animation:none; }
  .bd-viz *, .bd-viz *::after{ animation:none !important; }
  .v-wa .esc{ max-width:32ch; }
  .v-pipe .mueve{ transform:translateX(calc(100% + 10px + var(--g))); }
  .bd > li:hover{ transform:none; }
}
.bd + .nota{ margin-top:clamp(28px,3.5vw,40px); }

/* fuera de pantalla las animaciones en bucle se congelan (crm-bondades.js pone .fuera) */
.bd.fuera *, .bd.fuera *::before, .bd.fuera *::after{ animation-play-state:paused !important; }