/* Demo 9 · Consejero principal · prefijo dk- · colocación propia: app grande a la izquierda; internet y WhatsApp a la derecha */
.d-cons .app{ left:24px; top:22px; width:636px; height:576px; }
.d-cons .toast{ left:0; right:0; margin:0 auto; width:fit-content; bottom:28px; top:auto; }

.dk-area{ position:relative; flex:1; min-width:0; }
.dk-vista{ position:absolute; inset:0; padding:16px 20px 14px; display:flex; flex-direction:column; gap:12px; background:#fff; overflow:hidden; }
.dk-vista:has(~ .dk-vista:not(.off)){ display:none; }
.dk-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.dk-cab b{ display:block; margin-top:3px; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.dk-hora, .dk-listo{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px; font-size:11.5px; font-weight:500; white-space:nowrap; }
.dk-hora{ background:var(--nieve); color:var(--tinta-60); }
.dk-listo{ background:var(--verde-agua); color:var(--verde-osc); }
.dk-hora .ico, .dk-listo .ico{ width:12px; height:12px; }
.dk-listo .ico{ stroke-width:2.6; }

/* Análisis: barra de 6 tramos y una fila por parte de la app */
.dk-prog{ display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; }
.dk-prog i{ height:4px; border-radius:2px; background:var(--nieve-2); transition:background .5s; }
.dk-prog i.ok{ background:var(--verde); }
.dk-mods{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.dk-mod{ display:grid; grid-template-columns:34px 1fr 26px; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--linea); border-radius:10px; background:#fff; }
.dk-ico{ width:34px; height:34px; border-radius:9px; background:var(--nieve); color:var(--tinta-80); display:grid; place-items:center; }
.dk-ico .ico{ width:16px; height:16px; }
.dk-mod b{ display:block; font-size:12.8px; font-weight:600; }
.dk-hall{ margin:2px 0 0; font-size:12px; line-height:1.4; color:var(--tinta-80); border-radius:4px; }
.dk-hall .vacio{ color:var(--verde-osc); font-weight:500; }
.dk-est{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
.dk-est .ico{ display:none; width:12px; height:12px; stroke-width:2.8; }
.dk-gira{ width:16px; height:16px; border-radius:50%; border:2px solid var(--verde-agua); border-top-color:var(--verde); animation:dk-gira .8s linear infinite; }
@keyframes dk-gira{ to{ transform:rotate(360deg); } }
.dk-est.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dk-est.ok .ico{ display:block; }
.dk-est.ok .dk-gira{ display:none; }
.dk-mod:has(.dk-est:not(.ok)){ border-color:rgba(60,193,160,.45); box-shadow:0 0 0 3px rgba(60,193,160,.1); }

/* Internet: lo que va leyendo */
.dk-web{ position:absolute; z-index:3; left:676px; top:22px; width:300px; height:576px; display:flex; flex-direction:column; background:#fff; border:1px solid var(--linea); border-radius:14px; box-shadow:var(--sombra-3); overflow:hidden; }
.dk-web-cab{ flex:none; display:flex; align-items:center; gap:9px; height:46px; padding:0 14px; border-bottom:1px solid var(--linea); }
.dk-lupa{ width:26px; height:26px; border-radius:7px; background:var(--tinta); color:#fff; display:grid; place-items:center; }
.dk-lupa .ico{ width:14px; height:14px; }
.dk-web-cab b{ font-size:13px; font-weight:600; }
.dk-cont{ margin-left:auto; font-size:11px; color:var(--tinta-45); }
.dk-fuentes{ position:relative; flex:1; margin:0; padding:4px 10px; list-style:none; display:flex; flex-direction:column; gap:0; }
.dk-fuentes:not(:has(.dk-fuente:not(.off)))::before{ content:'Primero revisa tu app…'; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:var(--tinta-30); }
.dk-fuente{ display:grid; grid-template-columns:24px 1fr; align-items:center; gap:9px; padding:5px 2px; border-bottom:1px dashed var(--linea); }
.dk-fav{ width:24px; height:24px; border-radius:6px; background:var(--c); color:#fff; font-size:11.5px; font-weight:700; display:grid; place-items:center; }
.dk-fuente b{ display:block; font-size:11.2px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dk-fuente em{ display:block; font-style:normal; font-size:10.4px; line-height:1.32; color:var(--tinta-60); }
.dk-tipo{ display:inline-block; margin-right:5px; font-size:9px; font-weight:600; letter-spacing:.02em; padding:0 6px; border-radius:999px; background:var(--nieve-2); color:var(--tinta-60); white-space:nowrap; line-height:15px; }
.dk-tipo.comp{ background:var(--ambar-fondo); color:var(--ambar); }
.dk-ideas{ flex:none; display:flex; align-items:center; gap:6px; margin:0; padding:9px 14px; border-top:1px solid var(--linea); background:var(--verde-agua); color:var(--verde-osc); font-size:11.5px; font-weight:600; }
.dk-ideas .ico{ width:12px; height:12px; stroke-width:2.8; }

/* El informe del lunes */
.dk-scroll{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding-bottom:8px; }
.dk-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; flex:none; }
.dk-kpis > div{ display:flex; flex-direction:column; gap:1px; padding:8px 11px; border-radius:10px; background:var(--nieve); }
.dk-kpis span{ font-size:11px; color:var(--tinta-60); }
.dk-kpis b{ font-size:19px; font-weight:500; letter-spacing:-.025em; line-height:1.15; }
.dk-kpis em{ font-style:normal; font-size:10.6px; color:var(--tinta-45); }
.dk-bloque{ flex:none; display:flex; flex-direction:column; gap:5px; }
.dk-dos{ flex:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.dk-items{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.dk-items li{ display:flex; gap:9px; align-items:flex-start; padding:4px 9px; border-radius:8px; font-size:11.7px; line-height:1.32; color:var(--tinta-80); background:#fff; border:1px solid var(--linea); }
.dk-li-ico{ flex:none; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; margin-top:-1px; }
.dk-li-ico .ico{ width:12px; height:12px; }
.dk-av li{ background:var(--ambar-fondo); border-color:transparent; }
.dk-av .dk-li-ico{ color:var(--ambar); background:rgba(183,121,31,.12); }
.dk-mej .dk-li-ico{ color:var(--verde-osc); background:var(--verde-agua); }
.dk-op .dk-li-ico{ color:#2f6fed; background:rgba(47,111,237,.1); }
.dk-pr .dk-li-ico{ color:var(--tinta); background:var(--nieve-2); }

/* El aviso por WhatsApp al dueño */
.dk-wa{ position:absolute; z-index:4; left:668px; top:362px; width:316px; height:236px; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 -10px 40px -12px rgba(10,10,10,.35), var(--sombra-3); border:1px solid var(--linea); }
.dk-wa-cab{ flex:none; display:flex; align-items:center; gap:9px; height:44px; padding:0 12px; border-bottom:1px solid rgba(11,20,26,.07); }
.dk-wa-logo{ width:26px; height:26px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; }
.dk-wa-logo .ico{ width:15px; height:15px; }
.dk-wa-cab b{ display:block; font-size:12.6px; font-weight:600; color:#111b21; }
.dk-wa-cab em{ display:block; font-style:normal; font-size:10.5px; color:#667781; }
.dk-wa-cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:8px 10px; overflow:hidden;
  background-color:#efeae2; background-image:radial-gradient(circle at 1px 1px, rgba(84,101,111,.09) 1px, transparent 1.5px); background-size:14px 14px; }
.dk-wa-cuerpo .wa-msg{ font-size:11.6px; max-width:92%; padding:5px 8px 6px 9px; }