/* Demo 5 · Documentación: el expediente con sus documentos (subidos con check · los que faltan con «No está» encima) */
.d-doc .dd-exp{ flex:1; min-width:0; display:flex; flex-direction:column; padding:14px 18px 12px; gap:10px; overflow:hidden; }
.dd-cab{ display:flex; align-items:center; gap:12px; }
.dd-cab .fi-avatar{ width:40px; height:40px; font-size:13px; }
.dd-quien{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.dd-quien b{ font-size:15px; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-quien em{ font-style:normal; font-size:12px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-estado{ flex:none; display:flex; }
.dd-falta, .dd-completo{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.dd-falta{ background:#fdecec; color:#c23a3a; }
.dd-completo{ background:var(--verde-agua); color:var(--verde-osc); }
.dd-falta .ico, .dd-completo .ico{ width:12px; height:12px; stroke-width:2.6; }
.dd-completo.off{ display:none; }
.dd-falta b{ font-weight:600; }
.dd-falta b:has(~ b:not(.oculto)){ display:none; }
.dd-falta:has(~ .dd-completo:not(.off)){ display:none; }

.dd-progreso{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; padding:10px 12px; border-radius:8px; background:var(--nieve); }
.dd-limite{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--tinta-80); }
.dd-limite .ico{ width:13px; height:13px; color:var(--tinta-45); }
.dd-cuenta{ display:inline-flex; align-items:baseline; gap:5px; justify-self:end; }
.dd-cuenta b{ font-size:15px; font-weight:600; color:var(--tinta); }
.dd-cuenta b:has(~ b:not(.oculto)){ display:none; }
.dd-cuenta em{ font-style:normal; font-size:11.5px; color:var(--tinta-60); }
.dd-barra{ grid-column:1 / -1; position:relative; height:6px; border-radius:3px; background:var(--linea); overflow:hidden; }
.dd-barra i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) * 100%); border-radius:3px; background:var(--verde); transition:opacity .5s, width .6s; }
.dd-barra i[data-cls]:not(.ver){ opacity:0; }

.dd-rot{ margin-top:2px; }
.dd-rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.dd-doc{ position:relative; display:grid; grid-template-columns:30px 1fr 20px; align-items:center; gap:9px; min-height:56px; padding:11px 10px 7px 8px; border-radius:8px;
  border:1.5px dashed rgba(194,58,58,.45); background:#fff8f8; transition:background .45s, border-color .45s; }
.dd-ico{ width:30px; height:34px; border-radius:5px; background:#fdecec; color:#c23a3a; display:grid; place-items:center; transition:background .45s, color .45s; }
.dd-ico .ico{ width:15px; height:15px; }
.dd-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dd-txt b{ font-size:12.4px; font-weight:600; line-height:1.25; color:var(--tinta); }
.dd-txt em{ font-style:normal; font-size:10.8px; line-height:1.3; color:var(--tinta-60); }
.dd-est{ width:20px; height:20px; border-radius:50%; background:var(--verde); color:var(--tinta); display:grid; place-items:center; opacity:0; transform:scale(.5); transition:opacity .35s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.dd-est .ico{ width:11px; height:11px; stroke-width:3; }
.dd-noesta{ position:absolute; top:-8px; right:8px; display:inline-flex; align-items:center; gap:4px; padding:2px 8px 2px 6px; border-radius:999px; background:#d93c3c; color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 4px 10px -4px rgba(217,60,60,.6); transition:opacity .3s, transform .3s; }
.dd-noesta .ico{ width:10px; height:10px; stroke-width:2.8; }
/* sin subir: se ve «Pedido…»; subido: se ve lo que ha leído */
.dd-doc:not(.ok) .dd-det{ display:none; }
.dd-doc.ok .dd-pide{ display:none; }
.dd-doc.ok{ border:1px solid var(--linea); background:#fff; }
.dd-doc.ok .dd-ico{ background:var(--verde-agua); color:var(--verde-osc); }
.dd-doc.ok .dd-est{ opacity:1; transform:none; }
.dd-doc.ok .dd-noesta{ opacity:0; transform:scale(.6); pointer-events:none; }
.dd-doc.ok:not(.dd-ini){ animation:dd-llega 1.4s ease-out; }
@keyframes dd-llega{ 0%{ box-shadow:0 0 0 0 rgba(60,193,160,.55); background:var(--verde-agua); } 100%{ box-shadow:0 0 0 10px rgba(60,193,160,0); background:#fff; } }

.dd-pie{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--linea); padding-top:9px; }
.dd-recu{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11.5px; font-weight:500; color:#8a5a00; background:#fdf3e1; padding:4px 10px; border-radius:999px; }
.dd-recu .ico{ width:12px; height:12px; }
.dd-hist{ flex:1; min-height:0; overflow:hidden; position:relative; }
.dd-hist .fi-hist li{ grid-template-columns:40px 1fr; font-size:11.6px; }

/* El salto de tiempo, encima del chat (no encima de la app) */
.d-doc .dmb-salto{ left:103px; right:auto; width:200px; justify-content:center; top:238px; font-size:13.5px; padding:9px 14px; }

/* El salto de tiempo se ve un momento y se va (no tapa la conversación) */
.d-doc .dmb-salto:not(.off){ animation:dmx-salto 3.6s ease both; }
@keyframes dmx-salto{ 0%{ opacity:0; transform:translateY(8px) scale(.96); } 12%{ opacity:1; transform:none; } 78%{ opacity:1; transform:none; } 100%{ opacity:0; visibility:hidden; transform:translateY(-6px); } }