/* Demo 4 · Altas y contratos · escenario 1000 × 620.
   Izquierda arriba: WhatsApp del negocio · izquierda abajo: email del cliente · derecha: la app · centro: la ventana de firma. Prefijo dc-. */

/* ---------- Colocación ---------- */
.d-con .dc-wa{ position:absolute; z-index:3; left:30px; top:14px; width:396px; height:318px; }
.d-con .dc-logo-wa{ left:8px; top:0; width:42px; height:42px; border-radius:12px; }
.d-con .dc-logo-wa .ico{ width:24px; height:24px; }
.d-con .dc-mail{ position:absolute; z-index:3; left:30px; top:344px; width:396px; height:240px; }   /* abajo deja sitio a la etiqueta «Ejemplo» */
.d-con .dc-logo-mail{ position:absolute; z-index:6; left:8px; top:330px; 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-con .dc-logo-mail .ico{ width:22px; height:22px; }
.d-con .app{ left:446px; top:14px; width:532px; height:592px; }
.d-con .toast{ left:566px; bottom:28px; top:auto; }   /* centrado sobre la app */

/* ---------- WhatsApp compacto (las burbujas son las de agentes.css) ---------- */
.dc-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); }
.dc-wa .wa-cab{ height:52px; padding-left:44px; }
.dc-wa .wa-cab .wa-atras{ display:none; }
.dc-wa .wa-pie{ padding:5px 8px 7px; }
.dc-wa .wa-campo{ height:34px; }
.dc-wa .wa-campo span{ font-size:13.5px; }
.dc-wa .wa-mic{ width:34px; height:34px; }
.dc-wa .wa-msg{ font-size:13px; max-width:86%; }

/* ---------- Email del cliente: bandeja y correo abierto ---------- */
.dc-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); }
.dc-mail-cab{ flex:none; height:42px; display:flex; align-items:center; gap:9px; padding:0 14px 0 50px; border-bottom:1px solid var(--linea); font-size:13px; }
.dc-mail-cab .dc-mail-ico{ display:none; }
.dc-mail-cab b{ font-weight:600; }
.dc-mail-cab em{ margin-left:auto; font-style:normal; font-size:11.5px; color:var(--tinta-45); }
.dc-mail-cuerpo{ position:relative; flex:1; min-height:0; overflow:hidden; }
.dc-fila{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--linea); }
.dc-f-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; }
.dc-f-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.dc-f-txt b{ font-size:12.5px; font-weight:500; color:var(--tinta-80); }
.dc-f-txt > span{ font-size:11.8px; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-f-txt strong{ font-weight:500; color:var(--tinta-80); }
.dc-f-der{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; font-size:11px; color:var(--tinta-45); }
.dc-f-der .ico{ width:12px; height:12px; }
.dc-fila.nueva{ background:rgba(60,193,160,.09); box-shadow:inset 3px 0 0 var(--verde); }
.dc-fila.nueva .dc-f-av{ background:var(--tinta); color:#fff; }
.dc-fila.nueva .dc-f-txt b, .dc-fila.nueva strong{ font-weight:700; color:var(--tinta); }
.dc-fila.nueva time{ font-weight:600; color:var(--tinta); }
.dc-correo{ position:absolute; inset:0; background:#fff; padding:9px 14px 10px; display:flex; flex-direction:column; gap:7px; }
.dc-c-asunto{ display:flex; align-items:center; gap:8px; }
.dc-c-asunto .ico{ width:16px; height:16px; color:var(--tinta-45); flex:none; }
.dc-c-asunto b{ font-size:13.5px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-c-de{ display:flex; align-items:center; gap:9px; font-size:12px; }
.dc-c-de b{ font-weight:600; }
.dc-c-de em{ font-style:normal; color:var(--tinta-45); font-size:11px; }
.dc-c-de small{ display:block; font-size:11px; color:var(--tinta-45); }
.dc-av-neg{ background:var(--tinta)!important; color:#fff!important; }
.dc-c-texto{ margin:0; font-size:11.8px; line-height:1.45; color:var(--tinta-80); }
.dc-pdf{ display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--linea); border-radius:10px; margin-top:auto; }
.dc-pdf-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dc-pdf-t b{ font-size:12.2px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-pdf-t em{ font-style:normal; font-size:11px; color:var(--tinta-45); }
.dc-pdf-btn{ flex:none; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; background:var(--verde); color:var(--tinta); font-size:12px; font-weight:600; }
.dc-pdf-btn .ico{ width:14px; height:14px; }

/* ---------- La app: ficha → documento → firma → línea de tiempo ---------- */
.dc-cuerpo{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dc-cab{ flex:none; display:flex; align-items:center; gap:11px; padding:12px 16px; border-bottom:1px solid var(--linea); }
.dc-cab-ico{ width:34px; height:34px; border-radius:8px; background:var(--nieve); color:var(--tinta-60); display:grid; place-items:center; flex:none; }
.dc-cab-ico .ico{ width:17px; height:17px; }
.dc-cab-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dc-cab-t b{ font-size:14px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-cab-t em{ font-style:normal; font-size:11.5px; color:var(--tinta-60); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-est{ flex:none; display:flex; }
.dc-est > span{ 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;
  background:var(--nieve-2); color:var(--tinta-60); }
.dc-est > span:has(~ span:not(.oculto)){ display:none; }
.dc-est > span:nth-child(3), .dc-est > span:nth-child(4){ background:#fdf3e1; color:#8a5a12; }
.dc-est > span:nth-child(2){ background:var(--nieve); color:var(--tinta-80); }
.dc-est-ok{ background:var(--verde)!important; color:var(--tinta)!important; }
.dc-est-ok .ico{ width:13px; height:13px; stroke-width:2.8; }
.dc-scroll{ flex:1; min-height:0; overflow:hidden; position:relative; padding:12px 16px 100px;   /* sitio para el aviso final */ display:flex; flex-direction:column; gap:14px; }
.dc-bloque{ display:flex; flex-direction:column; gap:8px; }
/* Datos de su ficha */
.dc-datos{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0; }
.dc-dato{ position:relative; display:flex; flex-direction:column; gap:1px; padding:6px 10px 6px 30px; border-radius:7px; background:var(--nieve); transition:background .35s; }
.dc-dato dt{ font-size:10.5px; color:var(--tinta-45); }
.dc-dato dd{ margin:0; font-size:12px; font-weight:500; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-dato-ok{ position:absolute; left:8px; top:50%; margin-top:-8px; width:16px; height:16px; border-radius:50%; background:var(--linea); color:#fff; display:grid; place-items:center; transition:background .35s; }
.dc-dato-ok .ico{ width:10px; height:10px; stroke-width:3; opacity:0; transition:opacity .3s; }
.dc-dato.leido{ background:var(--verde-agua); }
.dc-dato.leido .dc-dato-ok{ background:var(--verde-osc); }
.dc-dato.leido .dc-dato-ok .ico{ opacity:1; }
/* La hoja del documento con sus huecos */
.dc-hoja{ position:relative; padding:16px 18px 14px; background:#fff; border:1px solid var(--linea); border-radius:6px; box-shadow:0 1px 2px rgba(10,10,10,.05), 0 10px 24px -18px rgba(10,10,10,.3);
  font-size:11.4px; line-height:1.62; color:var(--tinta-80); }
.dc-hoja h5{ margin:0 0 2px; text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta); }
.dc-lugar{ margin:0 0 8px; text-align:center; font-size:10.5px; color:var(--tinta-45); }
.dc-hoja p{ margin:0 0 7px; }
.dc-hueco{ font-weight:600; color:var(--tinta); background:rgba(60,193,160,.16); border-radius:3px; padding:0 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.dc-hueco:has(.vacio){ background:none; padding:0; }
.dc-hueco.corto{ white-space:nowrap; }   /* DNI, importes, fechas: no se parten */
.dc-hueco .vacio{ color:var(--tinta-30); letter-spacing:.5px; font-weight:400; }
.dc-firmas{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--linea); }
.dc-firmas > span{ display:flex; flex-direction:column; gap:2px; }
.dc-firmas i{ font-style:normal; font-size:10px; color:var(--tinta-45); }
.dc-firmas svg{ width:118px; height:38px; }
.dc-firmas path, .dc-caja-firma path{ fill:none; stroke:#0a0a0a; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.dc-firma-neg path{ stroke:#2f4a7a; stroke-width:2.2; }
.dc-firma-cli path, .dc-firma path{ stroke-dasharray:1100; stroke-dashoffset:1100; }
.dc-firma-cli.dibuja path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.2s cubic-bezier(.5,0,.3,1); }
.dc-firma.dibuja path{ stroke-dashoffset:0; transition:stroke-dashoffset 1.9s cubic-bezier(.45,0,.35,1); }
.dc-sello-zona{ position:absolute; right:14px; top:12px; z-index:2; }
.dc-sello{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:2px solid var(--verde-osc); border-radius:6px; color:var(--verde-osc); background:rgba(255,255,255,.92);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transform:rotate(-7deg); }
.dc-sello .ico{ width:12px; height:12px; stroke-width:3; }
/* Línea de tiempo fechada */
.dc-tiempo{ position:relative; display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.dc-tiempo li{ position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:start; padding:6px 0 8px; }
.dc-tiempo li + li::before{ content:''; position:absolute; left:10px; top:-8px; height:16px; width:2px; background:var(--linea); }
.dc-tiempo li > i{ width:22px; height:22px; border-radius:50%; border:2px solid var(--linea); background:#fff; display:grid; place-items:center; transition:all .35s; }
.dc-tiempo li > i .ico{ width:11px; height:11px; stroke-width:3; color:#fff; opacity:0; }
.dc-tiempo li.hecho > i{ background:var(--verde-osc); border-color:var(--verde-osc); }
.dc-tiempo li.hecho > i .ico{ opacity:1; }
.dc-tiempo li.hecho + li::before{ background:var(--verde); }
.dc-tiempo b{ display:block; font-size:12.5px; font-weight:500; color:var(--tinta-45); }
.dc-tiempo li.hecho b{ color:var(--tinta); font-weight:600; }
.dc-tiempo em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-tiempo time{ font-size:11.5px; font-weight:600; color:var(--tinta-80); font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:2px; }
.dc-tiempo time .vacio{ font-weight:400; color:var(--tinta-30); }
.dc-guardado{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:var(--verde-agua); color:var(--verde-osc); }
.dc-guardado > .ico{ width:18px; height:18px; flex:none; }
.dc-guardado b{ display:block; font-size:12.5px; color:var(--tinta); }
.dc-guardado em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); }

/* ---------- El clic del cliente sobre el documento ---------- */
.d-con .dc-cursor{ position:absolute; z-index:12; left:350px; top:552px; width:24px; height:24px; pointer-events:none; }
.d-con .dc-cursor .ico{ width:24px; height:24px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.d-con .dc-cursor i, .d-con .dc-cursor2 i{ position:absolute; left:-10px; top:-10px; width:24px; height:24px; border-radius:50%; border:2px solid var(--verde-osc); opacity:0; }
.d-con .dc-cursor.entra{ animation:dc-llega .8s cubic-bezier(.3,0,.2,1) both; }
.d-con .dc-cursor.entra i, .d-con .dc-cursor2.entra i{ animation:dc-clic .6s .75s ease-out both; }
@keyframes dc-llega{ from{ opacity:0; transform:translate(70px, 40px); } to{ opacity:1; transform:none; } }
@keyframes dc-clic{ 0%{ opacity:.9; transform:scale(.4); } 100%{ opacity:0; transform:scale(1.6); } }
.d-con .dc-cursor:has(~ .dc-modal:not(.off)){ display:none; }

/* ---------- La ventana de firma (en el centro) ---------- */
.d-con .dc-velo{ position:absolute; inset:0; z-index:10; background:rgba(10,10,10,.46); border-radius:4px; }
.d-con .dc-modal{ position:absolute; z-index:11; left:250px; top:34px; width:500px; height:552px; display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(10,10,10,.08); }
.d-con .dc-velo:has(~ .dc-cierra:not(.oculto)), .d-con .dc-modal:has(~ .dc-cierra:not(.oculto)){ display:none; }
.dc-m-cab{ flex:none; display:flex; flex-direction:column; gap:3px; padding:14px 20px 12px; border-bottom:1px solid var(--linea); background:var(--nieve); }
.dc-m-seg{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-osc); }
.dc-m-seg .ico{ width:13px; height:13px; stroke-width:2.4; }
.dc-m-cab b{ font-size:16px; font-weight:600; letter-spacing:-.015em; }
.dc-m-cab em{ font-style:normal; font-size:11.5px; color:var(--tinta-45); }
.dc-m-cuerpo{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; padding:14px 20px 18px; }
.dc-m-res{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }
.dc-m-res > div{ padding:8px 11px; border-radius:8px; border:1px solid var(--linea); }
.dc-m-res dt{ font-size:10.5px; color:var(--tinta-45); }
.dc-m-res dd{ margin:2px 0 0; font-size:12.8px; font-weight:600; color:var(--tinta); }
.dc-m-legal{ margin:0; font-size:11.2px; line-height:1.5; color:var(--tinta-60); }
.dc-acepto{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:500; color:var(--tinta-80); }
.dc-acepto i{ width:18px; height:18px; border-radius:4px; border:1.5px solid var(--linea-fuerte, rgba(10,10,10,.25)); display:grid; place-items:center; transition:all .25s; }
.dc-acepto i .ico{ width:12px; height:12px; stroke-width:3; color:#fff; opacity:0; }
.dc-acepto.ok i{ background:var(--verde-osc); border-color:var(--verde-osc); }
.dc-acepto.ok i .ico{ opacity:1; }
.dc-caja-firma{ position:relative; flex:1; min-height:120px; border:1.5px dashed rgba(10,10,10,.22); border-radius:10px; background:#fcfcfd; display:flex; align-items:center; justify-content:center; }
.dc-cf-t{ position:absolute; left:12px; top:9px; font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-30); }
.dc-cf-nombre{ position:absolute; left:0; right:0; bottom:10px; margin:0 auto; width:fit-content; padding-top:4px; border-top:1px solid var(--linea); font-size:11px; color:var(--tinta-45); }
.dc-caja-firma svg{ width:300px; height:100px; margin-top:-6px; }
.dc-b-firmar{ flex:none; position:relative; display:flex; align-items:center; justify-content:center; height:44px; border-radius:999px; background:var(--tinta); color:#fff; font-size:14px; font-weight:600; transition:background .3s; }
.dc-b-firmar .dc-bf-b{ display:none; align-items:center; gap:7px; }
.dc-b-firmar .dc-bf-b .ico{ width:16px; height:16px; stroke-width:2.8; }
.dc-b-firmar.pulsado{ background:var(--verde); color:var(--tinta); }
.dc-b-firmar.pulsado .dc-bf-a{ display:none; }
.dc-b-firmar.pulsado .dc-bf-b{ display:inline-flex; }
.d-con .dc-cursor2{ position:absolute; z-index:3; left:290px; bottom:26px; width:22px; height:22px; pointer-events:none; }
.d-con .dc-cursor2 .ico{ width:22px; height:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.d-con .dc-cursor2.entra{ animation:dc-llega .5s cubic-bezier(.3,0,.2,1) both; }
.d-con .dc-cierra{ display:block; width:0; height:0; }