/* Demo 17 · Documentación y facturas de tus clientes (gestorías). Prefijo dge-. Escenario 1000 × 620, colocación .dm-std. */
.d-dge .dge-ficha{ flex:1; min-width:0; display:flex; flex-direction:column; padding:12px 16px 12px; gap:10px; overflow:hidden; }
.dge-cab{ display:flex; align-items:center; gap:11px; }
.dge-cab .fi-avatar{ width:38px; height:38px; font-size:13px; }
.dge-quien{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dge-quien b{ font-size:15px; font-weight:600; letter-spacing:-.015em; }
.dge-quien em{ font-style:normal; font-size:11.5px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* pestañas: la última encendida es la activa */
.dge-tabs{ flex:none; display:flex; gap:3px; padding:3px; margin:0; list-style:none; background:var(--nieve); border-radius:8px; }
.dge-tabs li{ padding:5px 10px; border-radius:6px; font-size:11.5px; font-weight:500; color:var(--tinta-45); transition:background .3s, color .3s, box-shadow .3s; }
.dge-tabs li.act{ background:#fff; color:var(--tinta); box-shadow:var(--sombra-1); }
.dge-tabs li.act:has(~ li.act){ background:transparent; color:var(--tinta-45); box-shadow:none; }

/* las 3 vistas se tapan una a otra (cada una entra encima de la anterior) */
.dge-vistas{ position:relative; flex:1; min-height:0; }
.dge-vista{ position:absolute; inset:0; background:#fff; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.dge-v2{ z-index:2; } .dge-v3{ z-index:3; }

/* vista 1 · progreso y avisos */
.dge-prog{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 10px; padding:8px 11px; border-radius:8px; background:var(--nieve); }
.dge-prog-t{ display:inline-flex; align-items:center; gap:6px; font-size:11.8px; font-weight:500; color:var(--tinta-80); }
.dge-prog-t .ico{ width:13px; height:13px; color:var(--tinta-45); }
.dge-cuenta{ display:inline-flex; align-items:baseline; gap:5px; }
.dge-cuenta b{ font-size:14px; font-weight:600; }
.dge-cuenta b:has(~ b:not(.oculto)){ display:none; }
.dge-cuenta em{ font-style:normal; font-size:11px; color:var(--tinta-60); }
.dge-barra{ grid-column:1 / -1; position:relative; height:5px; border-radius:3px; background:var(--linea); overflow:hidden; }
.dge-barra i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) * 100%); border-radius:3px; background:var(--verde); transition:opacity .5s; }
.dge-barra i[data-cls]:not(.ver){ opacity:0; }
.dge-revisa, .dge-recu{ display:flex; align-items:center; gap:7px; padding:6px 10px; border-radius:7px; font-size:11.8px; }
.dge-revisa{ background:#fdf3e1; color:#7a5212; }
.dge-revisa b{ font-weight:600; }
.dge-recu{ background:var(--verde-agua); color:var(--verde-osc); font-weight:500; }
.dge-revisa .ico, .dge-recu .ico{ width:13px; height:13px; flex:none; }
.dge-avisos{ position:relative; flex:none; height:28px; }
.dge-avisos > div{ position:absolute; inset:0; }
.dge-avisos .dge-recu{ z-index:2; } .dge-avisos .dge-todo{ z-index:3; }

/* tablas de facturas */
.dge-tabla .rotulo{ display:block; margin:2px 0 3px; font-size:10.5px; }
.dge-tabla table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.dge-tabla th{ font-size:10px; font-weight:500; color:var(--tinta-45); text-align:left; padding:0 6px 3px; border-bottom:1px solid var(--linea); }
.dge-tabla th:nth-child(2), .dge-tabla th:nth-child(3){ width:62px; }
.dge-tabla th:nth-child(4){ width:118px; }
.dge-tabla td{ padding:4px 6px; border-bottom:1px solid var(--linea); font-size:11.2px; vertical-align:middle; white-space:nowrap; }
.dge-tabla td:first-child{ overflow:hidden; text-overflow:ellipsis; }
.dge-tabla td b{ font-weight:500; color:var(--tinta); }
.dge-tabla td em{ font-style:normal; font-size:10px; color:var(--tinta-45); margin-left:6px; }
.dge-tabla .num{ text-align:right; font-variant-numeric:tabular-nums; }
.dge-est{ text-align:right; }
.dge-ok, .dge-falta{ display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:999px; font-size:10.2px; font-weight:600; white-space:nowrap; }
.dge-ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dge-falta{ background:#d93c3c; color:#fff; }
.dge-ok .ico, .dge-falta .ico{ width:10px; height:10px; stroke-width:2.8; }
/* fila que falta: borde rojo discontinuo, sin cifras; al llegar (.ok) se rellena */
.dge-fila .dge-v, .dge-fila .dge-ok{ display:none; }
.dge-fila.ok .dge-v, .dge-fila.ok .dge-ok{ display:inline-flex; }
.dge-fila.ok .dge-g, .dge-fila.ok .dge-falta{ display:none; }
.dge-fila:not(.ok) td{ background:#fff6f6; }
.dge-fila:not(.ok) td:first-child{ box-shadow:inset 3px 0 0 #d93c3c; }
.dge-fila .dge-g{ color:var(--tinta-30); }
.dge-fila.ok:not(.dge-ini) td{ animation:destello 1.4s ease-out; }

/* vista 2 · cálculo */
.dge-calc-cab{ display:flex; align-items:center; justify-content:space-between; }
.dge-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:4px 9px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); }
.dge-chip .ico{ width:11px; height:11px; stroke-width:2.6; }
.dge-bloque{ border:1px solid var(--linea); border-radius:9px; padding:8px 12px 6px; }
.dge-b-t{ display:block; font-size:11.5px; font-weight:600; color:var(--tinta); margin-bottom:3px; }
.dge-l{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12px; color:var(--tinta-60); border-top:1px dashed var(--linea); }
.dge-l b{ font-weight:500; color:var(--tinta); white-space:nowrap; }
.dge-total{ color:var(--tinta); font-weight:600; }
.dge-total b{ font-size:15px; font-weight:600; }
.dge-nota130{ display:flex; align-items:center; gap:6px; margin:4px 0 2px; padding:6px 9px; border-radius:6px; background:var(--verde-agua); color:var(--verde-osc); font-size:11.5px; font-weight:500; }
.dge-nota130 .ico{ width:12px; height:12px; stroke-width:2.6; flex:none; }
.dge-hucha{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px; background:var(--tinta); color:#fff; font-size:12.5px; }
.dge-hucha .ico{ width:16px; height:16px; color:var(--verde); }
.dge-hucha b{ color:var(--verde); font-weight:600; }

/* vista 3 · informe */
.dge-inf-cab{ display:flex; align-items:flex-start; justify-content:space-between; }
.dge-inf-cab > div{ display:flex; flex-direction:column; gap:2px; }
.dge-inf-cab .rotulo{ font-size:10.5px; }
.dge-inf-cab b{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
.dge-pdf{ width:30px; height:36px; border-radius:4px; background:#e5484d; color:#fff; font-size:9.5px; font-weight:700; display:grid; place-items:center; }
.dge-kpis{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.dge-kpis > div{ display:flex; flex-direction:column; gap:1px; padding:8px 9px; border-radius:8px; background:var(--nieve); }
.dge-kpis em{ font-style:normal; font-size:10.2px; color:var(--tinta-60); }
.dge-kpis b{ font-size:15px; font-weight:600; letter-spacing:-.02em; }
.dge-kpis span{ font-size:9.8px; color:var(--tinta-45); }
.dge-kpis .sube{ color:var(--verde-osc); font-weight:600; }
.dge-kpis .dge-k-pagar{ background:var(--tinta); color:#fff; }
.dge-kpis .dge-k-pagar em, .dge-kpis .dge-k-pagar span{ color:rgba(255,255,255,.65); }
.dge-kpis .dge-k-pagar b{ color:var(--verde); }
.dge-graf{ border:1px solid var(--linea); border-radius:9px; padding:8px 12px 6px; }
.dge-g-t{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--tinta-80); }
.dge-g-t i{ width:9px; height:9px; border-radius:2px; background:var(--verde); margin-left:6px; }
.dge-g-t i.ant{ background:var(--nieve-2, #e9e9ee); }
.dge-meses{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:6px; }
.dge-mes{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.dge-col{ height:62px; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.dge-col i{ width:22px; height:calc(var(--h) * 100%); border-radius:4px 4px 0 0; background:var(--verde); transform-origin:bottom; }
.dge-col i.ant{ background:var(--nieve-2, #e9e9ee); }
.dge-v3:not(.off) .dge-col i{ animation:dge-crece .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes dge-crece{ from{ transform:scaleY(0); } }
.dge-mes b{ font-size:11px; font-weight:600; }
.dge-mes em{ font-style:normal; font-size:10px; color:var(--tinta-45); }
.dge-ideas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.dge-ideas li{ display:flex; align-items:flex-start; gap:8px; font-size:11.5px; line-height:1.4; color:var(--tinta-80); padding:6px 9px; border-radius:7px; background:var(--nieve); }
.dge-ideas li .ico{ width:13px; height:13px; flex:none; margin-top:2px; color:var(--verde-osc); }
.dge-ideas li:nth-child(2) .ico{ color:#b7791f; }
.dge-ideas b{ font-weight:600; color:var(--tinta); }
.dge-enviado{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; font-size:11.5px; font-weight:500; color:var(--verde-osc); }
.dge-enviado .ico{ width:12px; height:12px; stroke-width:2.6; }

/* salto de tiempo: encima del chat (no tapa la cabecera de la app) y se va solo */
.dge-saltos{ position:absolute; z-index:8; left:44px; top:96px; width:318px; height:40px; }
.d-dge .dge-saltos .dmb-salto{ position:absolute; left:0; right:0; top:0; margin:0 auto; }
.d-dge .dge-saltos .dmb-salto.entra{ animation:dge-salto 3.6s ease both; }
@keyframes dge-salto{ 0%{ opacity:0; transform:translateY(-6px); } 12%, 82%{ opacity:1; transform:none; } 100%{ opacity:0; } }

/* la foto del ticket del monitor (WhatsApp) */
.dge-foto{ padding:4px 4px 6px; }
.dge-ticket{ display:flex; flex-direction:column; gap:5px; width:150px; padding:10px 12px; margin-bottom:5px; border-radius:6px; transform:rotate(-1.5deg);
  background:linear-gradient(180deg, #fbfaf6, #efece4); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.dge-ticket b{ font-size:9.5px; font-weight:700; letter-spacing:.04em; color:#3b3b3b; text-align:center; }
.dge-ticket b.t{ text-align:right; font-size:9px; }
.dge-ticket i{ height:4px; border-radius:2px; background:rgba(0,0,0,.14); }
.dge-ticket i.c{ width:70%; }
.dge-foto p{ display:block; padding:0 4px; }
/* filas compactas: las 11 facturas caben enteras */
.d-dge .dge-tabla td{ padding:2px 6px; height:23px; }
.d-dge .dge-tabla th{ padding-bottom:2px; }
.d-dge .dge-ok, .d-dge .dge-falta{ padding:1px 6px; font-size:9.8px; }
.d-dge .dge-tabla .rotulo{ margin:0 0 2px; }
.d-dge .dge-prog{ padding:6px 10px; gap:4px 10px; }
.d-dge .dge-vista{ gap:6px; }
.d-dge .dge-avisos{ height:26px; }
.dge-v1{ z-index:1; }   /* sus avisos no asoman por encima de las vistas siguientes */
.dge-inf-der{ display:flex; align-items:center; gap:10px; }
.dge-inf-der .dge-enviado{ padding:4px 9px; border-radius:999px; background:var(--verde-agua); }