/* Demo 22 · Guardia del viaje: WhatsApp con la clienta (izquierda) · expediente del viaje en la app (centro) · WhatsApp con el responsable (derecha) */
.d-gua .movil{ left:26px; top:34px; width:292px; height:568px; }
.d-gua .logo-canal{ left:6px; top:18px; }
.d-gua .dgu-app{ left:334px; top:34px; width:344px; height:568px; }
.d-gua .toast{ left:auto; right:30px; top:auto; bottom:22px; margin:0; }
.d-gua .wa-msg{ font-size:12.8px; }

/* Rótulos de quién es quién */
.dgu-quien{ position:absolute; z-index:7; top:6px; display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:999px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.dgu-quien .ico{ width:11px; height:11px; }
.dgu-quien.q1{ left:96px; background:#fff; color:var(--tinta-80); border:1px solid var(--linea); }
.dgu-quien.q2{ left:740px; background:var(--tinta); color:#fff; }
.dgu-quien.q2 .ico{ color:var(--verde); }

/* WhatsApp con el responsable (ventana de escritorio, más estrecha) */
.dgu-chat2{ position:absolute; z-index:3; left:694px; top:34px; width:282px; height:568px; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#efeae2;
  box-shadow:0 2px 4px rgba(10,10,10,.05), 0 30px 70px -28px rgba(10,10,10,.42), 0 0 0 1px rgba(10,10,10,.08); }
.dgu-cab2{ flex:none; display:flex; align-items:center; gap:9px; height:56px; padding:0 14px; background:#fff; border-bottom:1px solid rgba(11,20,26,.07); color:#3b4a54; }
.dgu-cab2 > .ico{ width:17px; height:17px; margin-left:auto; }
.dgu-av2{ width:34px; height:34px; border-radius:50%; background:var(--tinta); color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; flex:none; }
.dgu-quien2{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.dgu-quien2 b{ font-size:13.5px; font-weight:600; color:#111b21; }
.dgu-quien2 em{ font-style:normal; font-size:10.5px; color:#667781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dgu-cuerpo2{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:10px 10px 8px; overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px, rgba(84,101,111,.09) 1px, transparent 1.5px); background-size:14px 14px; }
.dgu-fecha2{ align-self:center; background:#fff; color:#54656f; font-size:11px; padding:4px 10px; border-radius:7px; box-shadow:0 1px .5px rgba(11,20,26,.13); margin-bottom:auto; }
.dgu-b{ position:relative; max-width:88%; padding:6px 8px 7px 9px; border-radius:8px; font-size:12.3px; line-height:1.38; color:#111b21; box-shadow:0 1px .5px rgba(11,20,26,.13); }
.dgu-b p{ margin:0; display:inline; }
.dgu-b.yo{ align-self:flex-end; background:#d9fdd3; border-top-right-radius:0; }
.dgu-b.el{ align-self:flex-start; background:#fff; border-top-left-radius:0; }
.dgu-h{ float:right; margin:6px 0 -4px 8px; font-size:10px; color:#667781; display:inline-flex; align-items:center; gap:3px; }
.dgu-tick{ width:15px; height:10px; stroke:#53bdeb; stroke-width:1.5; }
.dgu-contacto{ display:flex; align-items:center; gap:9px; padding:8px 10px; margin:-1px -2px 6px -3px; border-radius:6px; background:rgba(0,0,0,.05); }
.dgu-contacto b{ display:block; font-size:12.5px; font-weight:600; }
.dgu-contacto em{ display:block; font-style:normal; font-size:11px; color:#667781; }
.dgu-cav{ width:30px; height:30px; border-radius:50%; background:#dfe5e7; color:#54656f; font-size:10.5px; font-weight:600; display:grid; place-items:center; flex:none; }
.dgu-pie2{ flex:none; display:flex; align-items:center; gap:6px; padding:6px 8px 9px; }
.dgu-pie2 span{ flex:1; height:36px; border-radius:18px; background:#fff; display:flex; align-items:center; gap:8px; padding:0 12px; font-size:13px; color:#8696a0; }
.dgu-pie2 .ico{ width:17px; height:17px; }
.dgu-pie2 i{ width:36px; height:36px; border-radius:50%; background:#00a884; color:#fff; display:grid; place-items:center; }

/* El expediente del viaje */
.dgu-exp{ flex:1; min-width:0; padding:12px 14px 22px; display:flex; flex-direction:column; gap:10px; overflow:hidden; position:relative; }
.dgu-exp > *{ flex:none; }
.dgu-app .app-lado{ display:none; }
.dgu-viaje{ display:flex; align-items:center; gap:10px; }
.dgu-dest{ width:36px; height:36px; border-radius:10px; background:var(--verde-agua); color:var(--verde-osc); display:grid; place-items:center; }
.dgu-dest .ico{ width:17px; height:17px; }
.dgu-viaje b{ display:block; font-size:14.5px; font-weight:600; letter-spacing:-.015em; }
.dgu-viaje em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); }
.dgu-bonos{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.dgu-bonos span{ display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:7px; background:var(--nieve); font-size:10.5px; line-height:1.25; color:var(--tinta-80); }
.dgu-bonos span .ico{ width:12px; height:12px; flex:none; color:var(--tinta-45); }
.dgu-bonos b{ font-weight:500; }
.dgu-bonos span.clave{ background:#fff4e8; box-shadow:inset 0 0 0 1px #f5c7a9; }
.dgu-bonos span.clave .ico{ color:#c2410c; }
.dgu-inc{ padding:10px 12px; border-radius:10px; border:1px solid #f5c7a9; background:#fffaf6; }
.dgu-inc-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.dgu-inc p{ margin:0; font-size:11.8px; line-height:1.45; color:var(--tinta-80); }
.dgu-est{ font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.dgu-est:has(~ .dgu-est:not(.oculto)){ display:none; }
.dgu-est.ab{ background:#fdecdf; color:#c2410c; }
.dgu-est.pas{ background:#e3edf8; color:#2b5a8a; }
.dgu-est.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dgu-busca{ display:flex; flex-direction:column; gap:6px; }
.dgu-q{ display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; border:1px solid var(--linea); font-size:11px; color:var(--tinta-80); }
.dgu-q .ico{ width:12px; height:12px; color:var(--tinta-45); flex:none; }
.dgu-res{ display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; background:var(--nieve); }
.dgu-res-ic{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--nieve-2); color:var(--tinta-60); }
.dgu-res-ic .ico{ width:11px; height:11px; stroke-width:2.6; }
.dgu-res.si .dgu-res-ic{ background:var(--verde-agua); color:var(--verde-osc); }
.dgu-res.no .dgu-res-ic{ background:#fdecdf; color:#c2410c; }
.dgu-res b{ display:block; font-size:11.3px; font-weight:600; }
.dgu-res em{ display:block; font-style:normal; font-size:10.5px; color:var(--tinta-60); line-height:1.3; }
.dgu-no{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; background:var(--tinta); color:#fff; font-size:11.3px; font-weight:500; }
.dgu-no .ico{ width:14px; height:14px; color:#f5a372; flex:none; }
.dgu-tl ul{ margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.dgu-tl li{ display:grid; grid-template-columns:18px 38px 1fr; gap:6px; align-items:center; font-size:11px; color:var(--tinta-80); }
.dgu-tl time{ color:var(--tinta-45); font-weight:500; }
.dgu-tl-ic{ width:16px; height:16px; border-radius:50%; background:var(--verde); color:var(--tinta); display:grid; place-items:center; }
.dgu-tl-ic .ico{ width:9px; height:9px; stroke-width:3; }
.dgu-sat{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:var(--verde-agua); }
.dgu-sat > .ico{ width:20px; height:20px; color:var(--verde-osc); flex:none; }
.dgu-sat b{ display:block; font-size:12.5px; font-weight:600; }
.dgu-sat em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); }