/* Demo 18 · Informes a clientes (gestorías). Prefijo dinf-. Escenario 1000 × 620.
   Izquierda arriba: WhatsApp · izquierda abajo: email de la clienta · derecha: la app (calendario y envíos → informe trimestral → informe anual). */

/* ---------- Colocación ---------- */
.d-inf .dinf-wa{ position:absolute; z-index:3; left:30px; top:14px; width:396px; height:330px; }
.d-inf .dinf-logo-wa{ left:8px; top:0; width:42px; height:42px; border-radius:12px; }
.d-inf .dinf-logo-wa .ico{ width:24px; height:24px; }
.d-inf .dinf-mail{ position:absolute; z-index:3; left:30px; top:356px; width:396px; height:228px; }
.d-inf .dinf-logo-mail{ position:absolute; z-index:6; left:8px; top:342px; width:42px; height:42px; border-radius:12px; background:#2f6fde; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 24px -8px rgba(10,10,10,.35), 0 0 0 4px rgba(255,255,255,.9); }
.d-inf .dinf-logo-mail .ico{ width:22px; height:22px; }
.d-inf .app{ left:446px; top:14px; width:532px; height:592px; }
.d-inf .toast{ left:auto; right:30px; margin:0; bottom:26px; top:auto; }

/* ---------- WhatsApp compacto (burbujas de agentes.css) ---------- */
.dinf-wa{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 4px rgba(10,10,10,.05), 0 24px 56px -26px rgba(10,10,10,.42), 0 0 0 1px rgba(10,10,10,.06); }
.dinf-wa .wa-cab{ height:52px; padding-left:44px; }
.dinf-wa .wa-cab .wa-atras{ display:none; }
.dinf-wa .wa-pie{ padding:5px 8px 7px; }
.dinf-wa .wa-campo{ height:34px; }
.dinf-wa .wa-campo span{ font-size:13.5px; }
.dinf-wa .wa-mic{ width:34px; height:34px; }
.dinf-wa .wa-msg{ font-size:13px; max-width:86%; }

/* ---------- Email ---------- */
.dinf-mail{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 4px rgba(10,10,10,.05), 0 24px 56px -26px rgba(10,10,10,.42), 0 0 0 1px rgba(10,10,10,.06); }
.dinf-mail-cab{ flex:none; height:40px; display:flex; align-items:center; gap:9px; padding:0 14px 0 50px; border-bottom:1px solid var(--linea); font-size:13px; }
.dinf-mail-cab b{ font-weight:600; }
.dinf-mail-cab em{ margin-left:auto; font-style:normal; font-size:11.5px; color:var(--tinta-45); }
.dinf-bandeja{ flex:1; min-height:0; overflow:hidden; }
.dinf-fila-m{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 14px; border-bottom:1px solid var(--linea); }
.dinf-av{ width:28px; height:28px; border-radius:50%; background:var(--nieve-2); color:var(--tinta-60); font-size:10.5px; font-weight:600; display:grid; place-items:center; }
.dinf-m-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.dinf-m-txt b{ font-size:12.5px; font-weight:500; color:var(--tinta-80); }
.dinf-m-txt > span{ font-size:11.8px; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dinf-m-txt strong{ font-weight:500; color:var(--tinta-80); }
.dinf-m-der{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:11px; color:var(--tinta-45); }
.dinf-m-der .ico{ width:12px; height:12px; }
.dinf-fila-m.nueva{ background:rgba(60,193,160,.09); box-shadow:inset 3px 0 0 var(--verde); }
.dinf-fila-m.nueva .dinf-av{ background:var(--tinta); color:#fff; }
.dinf-fila-m.nueva .dinf-m-txt b, .dinf-fila-m.nueva strong{ font-weight:700; color:var(--tinta); }
.dinf-fila-m.nueva time{ font-weight:600; color:var(--tinta); }
/* el correo nuevo de enero deja de ser «nuevo» al anterior */
.dinf-fila-m.nueva:not(.oculto) ~ .dinf-fila-m.nueva{ background:none; box-shadow:none; }
.dinf-fila-m.nueva:not(.oculto) ~ .dinf-fila-m.nueva .dinf-av{ background:var(--nieve-2); color:var(--tinta-60); }
.dinf-fila-m.nueva:not(.oculto) ~ .dinf-fila-m.nueva .dinf-m-txt b, .dinf-fila-m.nueva:not(.oculto) ~ .dinf-fila-m.nueva strong{ font-weight:500; color:var(--tinta-80); }

/* ---------- App: 3 vistas que se tapan ---------- */
.dinf-vistas{ position:relative; flex:1; min-width:0; }
.dinf-vista{ position:absolute; inset:0; background:#fff; padding:12px 16px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
.dinf-a{ z-index:1; } .dinf-b{ z-index:2; padding:0; } .dinf-c{ z-index:3; }
.dinf-b-in{ position:absolute; inset:0; background:#fff; padding:12px 16px; display:flex; flex-direction:column; gap:9px; }
.dinf-b-in.fuera{ display:none; }
.dinf-cab, .dinf-inf-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dinf-cab > div, .dinf-inf-cab > div{ display:flex; flex-direction:column; gap:2px; }
.dinf-cab .rotulo, .dinf-inf-cab .rotulo{ font-size:10.5px; }
.dinf-cab b, .dinf-inf-cab b{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
.dinf-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:4px 9px; border-radius:999px; background:var(--nieve); color:var(--tinta-80); }
.dinf-chip .ico{ width:12px; height:12px; }

/* calendario del año */
.dinf-cal{ position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; padding:10px 8px 8px; border:1px solid var(--linea); border-radius:10px; }
.dinf-cal::before{ content:''; position:absolute; left:10%; right:10%; top:38px; height:2px; background:var(--linea); }
.dinf-nodo{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.dinf-nodo em{ font-style:normal; font-size:10.5px; font-weight:600; color:var(--tinta-60); }
.dinf-nodo i{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--linea); color:var(--tinta); z-index:1; }
.dinf-nodo i .ico{ width:11px; height:11px; stroke-width:3; }
.dinf-nodo.ok i{ background:var(--verde); border-color:var(--verde); }
.dinf-nodo.ahora i{ border-color:var(--verde); box-shadow:0 0 0 4px rgba(60,193,160,.2); animation:dinf-late 1.4s ease-in-out infinite; }
@keyframes dinf-late{ 50%{ box-shadow:0 0 0 7px rgba(60,193,160,.08); } }
.dinf-nodo b{ font-size:10.5px; font-weight:500; line-height:1.25; color:var(--tinta); }
.dinf-nodo span{ font-size:9.5px; color:var(--tinta-45); }
.dinf-nodo.ok span{ color:var(--verde-osc); font-weight:600; }
.dinf-nodo.ahora span{ color:var(--verde-osc); font-weight:600; }

/* envíos */
.dinf-envios{ display:flex; flex-direction:column; gap:6px; }
.dinf-env-cab{ display:flex; align-items:baseline; justify-content:space-between; }
.dinf-cuenta{ display:inline-flex; align-items:baseline; gap:5px; }
.dinf-cuenta b{ font-size:15px; font-weight:600; }
.dinf-cuenta b:has(~ b:not(.oculto)){ display:none; }
.dinf-cuenta em{ font-style:normal; font-size:11px; color:var(--tinta-60); }
.dinf-envios table{ width:100%; border-collapse:collapse; }
.dinf-envios th{ font-size:10px; font-weight:500; color:var(--tinta-45); text-align:left; padding:0 6px 4px; border-bottom:1px solid var(--linea); }
.dinf-envios td{ padding:6px; border-bottom:1px solid var(--linea); font-size:11.8px; color:var(--tinta-60); white-space:nowrap; }
.dinf-envios td b{ font-weight:500; color:var(--tinta); }
.dinf-can{ display:flex; gap:6px; }
.dinf-can .ico{ width:14px; height:14px; color:var(--tinta-45); }
.dinf-can .relleno{ color:#25d366; }
.dinf-est > span{ display:none; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:600; }
.dinf-est .ico{ width:10px; height:10px; stroke-width:2.8; }
.dinf-est .e-cola{ display:inline-flex; background:var(--nieve); color:var(--tinta-45); }
.dinf-est .e-prep{ background:#fdf3e1; color:#7a5212; }
.dinf-est .e-env{ background:var(--verde-agua); color:var(--verde-osc); }
.dinf-fila.prep .dinf-est .e-cola{ display:none; }
.dinf-fila.prep .dinf-est .e-prep{ display:inline-flex; }
.dinf-est.env .e-cola, .dinf-fila.prep .dinf-est.env .e-prep{ display:none; }
.dinf-est.env .e-env{ display:inline-flex; }
.dinf-todos{ display:flex; align-items:center; gap:6px; margin:2px 0 0; padding:7px 10px; border-radius:8px; background:var(--verde-agua); color:var(--verde-osc); font-size:12px; font-weight:600; }
.dinf-todos .ico{ width:13px; height:13px; stroke-width:2.6; }

/* informes */
.dinf-inf-der{ display:flex; align-items:center; gap:8px; }
.dinf-enviado{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); font-size:10.8px; font-weight:600; white-space:nowrap; }
.dinf-enviado .ico{ width:11px; height:11px; stroke-width:2.8; }
.dinf-pdf{ width:28px; height:34px; border-radius:4px; background:#e5484d; color:#fff; font-size:9px; font-weight:700; display:grid; place-items:center; flex:none; }
.dinf-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.dinf-kpis.k4{ grid-template-columns:repeat(4, 1fr); }
.dinf-kpis > div{ display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:8px; background:var(--nieve); }
.dinf-kpis em{ font-style:normal; font-size:10.3px; color:var(--tinta-60); }
.dinf-kpis b{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
.dinf-kpis.k4 b{ font-size:14.5px; }
.dinf-kpis span{ font-size:9.8px; color:var(--tinta-45); }
.dinf-kpis .sube{ color:var(--verde-osc); font-weight:600; }
.dinf-graf{ border:1px solid var(--linea); border-radius:9px; padding:7px 12px 6px; }
.dinf-g-t{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--tinta-80); }
.dinf-g-t i{ width:9px; height:9px; border-radius:2px; background:var(--verde); margin-left:6px; }
.dinf-g-t i.ant{ background:var(--nieve-2, #e9e9ee); }
.dinf-meses{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:4px; }
.dinf-mes{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.dinf-col{ height:56px; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.dinf-col i{ width:22px; height:calc(var(--h) * 100%); border-radius:4px 4px 0 0; background:var(--verde); transform-origin:bottom; }
.dinf-col i.ant{ background:var(--nieve-2, #e9e9ee); }
.dinf-graf:not(.off) .dinf-col i, .dinf-c:not(.off) .dinf-12 i{ animation:dinf-crece .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes dinf-crece{ from{ transform:scaleY(0); } }
.dinf-mes b{ font-size:11px; font-weight:600; }
.dinf-mes em{ font-style:normal; font-size:10px; color:var(--tinta-45); }
.dinf-imp{ border:1px solid var(--linea); border-radius:9px; padding:7px 12px 4px; }
.dinf-i-t{ display:block; font-size:11.5px; font-weight:600; color:var(--tinta); margin-bottom:2px; }
.dinf-imp > div{ display:flex; justify-content:space-between; padding:4px 0; font-size:11.8px; color:var(--tinta-60); border-top:1px dashed var(--linea); }
.dinf-imp b{ font-weight:500; color:var(--tinta); }
.dinf-imp .tot{ color:var(--tinta); font-weight:600; }
.dinf-imp .tot b{ font-size:14px; font-weight:600; }
.dinf-notas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.dinf-notas li{ display:flex; align-items:flex-start; gap:8px; font-size:11.3px; line-height:1.4; color:var(--tinta-80); padding:5px 9px; border-radius:7px; background:var(--nieve); }
.dinf-notas li .ico{ width:13px; height:13px; flex:none; margin-top:1px; color:var(--verde-osc); }
.dinf-notas li:nth-child(2) .ico{ color:#b7791f; }
.dinf-notas b{ font-weight:600; color:var(--tinta); }
/* anual */
.dinf-12{ display:grid; grid-template-columns:repeat(12, 1fr); align-items:end; gap:5px; height:84px; margin-top:6px; padding-bottom:14px; }
.dinf-12 i{ position:relative; height:calc(var(--h) * 100%); border-radius:3px 3px 0 0; background:var(--verde); transform-origin:bottom; }
.dinf-12 i em{ position:absolute; left:0; right:0; bottom:-14px; text-align:center; font-style:normal; font-size:9px; color:var(--tinta-45); }
.dinf-ideas{ display:flex; flex-direction:column; gap:5px; }
.dinf-ideas > div{ display:flex; align-items:flex-start; gap:9px; padding:7px 10px; border-radius:8px; background:var(--nieve); font-size:11.6px; line-height:1.4; color:var(--tinta-80); }
.dinf-ideas > div b{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--tinta); color:#fff; font-size:10.5px; display:grid; place-items:center; }
.dinf-ideas strong{ font-weight:600; color:var(--tinta); }

/* salto de tiempo, encima del WhatsApp; se va solo */
.dinf-saltos{ position:absolute; z-index:8; left:30px; top:70px; width:396px; height:40px; }
.d-inf .dinf-saltos .dmb-salto{ position:absolute; left:0; right:0; top:0; margin:0 auto; }
.d-inf .dinf-saltos .dmb-salto.entra{ animation:dinf-salto 3.8s ease both; }
@keyframes dinf-salto{ 0%{ opacity:0; transform:translateY(-6px); } 12%, 82%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.dinf-b{ background:transparent; pointer-events:none; }   /* al cerrarse el informe, vuelve a verse la lista de envíos */
.dinf-fila-m.nueva:not(.oculto) ~ .dinf-fila-m.nueva time{ font-weight:400; color:var(--tinta-45); }