/* Demo 11 · Investigador de oportunidades: navegador (izquierda) que va leyendo webs · la app (derecha) con las oportunidades */
.d-inv .di-nav{ position:absolute; z-index:3; left:40px; top:22px; width:452px; height:576px; display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden;
  border:1px solid var(--linea); box-shadow:0 2px 4px rgba(10,10,10,.05), 0 30px 70px -28px rgba(10,10,10,.42); }
.d-inv .di-logo{ left:14px; top:4px; background:var(--tinta); color:#fff; }
.d-inv .app{ left:512px; top:22px; width:462px; height:576px; }
.d-inv .toast{ top:36px; right:40px; left:auto; bottom:auto; }

/* Pestañas y barra de dirección */
.di-tabs{ flex:none; display:flex; align-items:flex-end; gap:2px; height:40px; padding:0 8px 0 70px; background:#e9eaee; overflow:hidden; }
.di-tab{ display:flex; align-items:center; gap:6px; min-width:0; max-width:118px; height:31px; padding:0 10px; border-radius:9px 9px 0 0; font-size:11px; color:var(--tinta-60); background:transparent; }
.di-tab b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.di-tab .ico{ width:12px; height:12px; flex:none; }
.di-tab:not(:has(~ .di-tab:not(.oculto))){ background:#fff; color:var(--tinta); box-shadow:0 -1px 0 rgba(10,10,10,.04); }
.di-tab-mas{ display:grid; place-items:center; width:26px; height:26px; margin:0 0 3px 4px; color:var(--tinta-45); }
.di-tab-mas .ico{ width:13px; height:13px; }
.di-barra{ flex:none; display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-bottom:1px solid var(--linea); }
.di-flechas{ display:flex; gap:8px; color:var(--tinta-45); }
.di-flechas .ico{ width:14px; height:14px; }
.di-url{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:999px; background:var(--nieve); font-size:11.5px; color:var(--tinta-80); }
.di-url .ico{ width:11px; height:11px; color:var(--tinta-45); flex:none; }
.di-url-t{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.di-url-t span:has(~ span:not(.oculto)){ display:none; }

/* Páginas: solo se ve la última abierta */
.di-pags{ flex:1; min-height:0; position:relative; }
.di-pag{ position:absolute; inset:0; padding:16px 16px 20px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.di-pag:has(~ .di-pag:not(.oculto)){ display:none; }
.di-vacia{ display:grid; place-items:center; color:var(--tinta-30); font-size:13px; }
.di-vacia span{ display:inline-flex; align-items:center; gap:8px; }
.di-vacia .ico{ width:16px; height:16px; }
.di-pag-cab{ display:flex; flex-direction:column; gap:2px; padding-bottom:10px; border-bottom:1px solid var(--linea); }
.di-pag-cab b{ font-size:16px; font-weight:600; letter-spacing:-.015em; }
.di-pag-cab span{ font-size:11.5px; color:var(--tinta-45); }
.di-filas{ display:flex; flex-direction:column; gap:8px; }
.di-fila{ position:relative; display:grid; grid-template-columns:52px 1fr auto; gap:11px; align-items:center; padding:8px; border-radius:10px; border:1px solid var(--linea); background:#fff; transition:opacity .4s, background .4s, border-color .4s, box-shadow .4s; }
.di-foto{ width:52px; height:42px; border-radius:7px; background:linear-gradient(135deg, #e9eef0, #d9e1e4); color:rgba(10,10,10,.28); display:grid; place-items:center; }
.di-foto .ico{ width:18px; height:18px; }
.di-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.di-txt b{ font-size:12.6px; font-weight:600; line-height:1.25; }
.di-txt em{ font-style:normal; font-size:11.2px; line-height:1.3; color:var(--tinta-60); }
.di-marca{ display:none; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:999px; font-size:10.5px; font-weight:600; white-space:nowrap; }
.di-marca .ico{ width:11px; height:11px; stroke-width:2.6; }
.di-fila.encaja{ border-color:var(--verde); background:var(--verde-agua); box-shadow:0 8px 20px -12px rgba(47,163,135,.6); }
.di-fila.encaja .di-marca.si{ display:inline-flex; background:var(--verde); color:var(--tinta); }
.di-fila.descarta{ opacity:.45; }
.di-fila.descarta .di-marca.no{ display:inline-flex; background:var(--nieve-2); color:var(--tinta-60); }
/* la línea de lectura que recorre la página */
.di-lee{ position:absolute; left:10px; right:10px; top:70px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--verde), transparent);
  box-shadow:0 0 12px rgba(60,193,160,.6); animation:di-lee 2.6s ease-in-out infinite; pointer-events:none; }
@keyframes di-lee{ 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(380px); opacity:0; } }
.d-inv:has(.di-wa:not(.off)) .di-agente{ opacity:0; }
.di-agente{ position:absolute; left:12px; bottom:12px; transition:opacity .3s; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--tinta); color:#fff; font-size:11px; font-weight:500; }
.di-agente .ico{ width:12px; height:12px; color:var(--verde); }

/* La app: lo que buscas y las oportunidades */
.di-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.di-col > .di-app-cab{ padding:14px 16px 4px; }
.di-app{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:6px 16px 24px; overflow:hidden; }
.di-app > *{ flex:none; }
.di-app-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.di-app-cab > b{ font-size:16px; font-weight:600; letter-spacing:-.015em; }
.di-cuenta{ font-size:11.5px; color:var(--tinta-60); border-radius:4px; padding:1px 4px; text-align:right; }
.di-busca{ display:flex; flex-direction:column; gap:5px; padding:10px 12px; border-radius:10px; background:var(--nieve); }
.di-busca-l{ display:flex; gap:8px; font-size:11.6px; line-height:1.35; color:var(--tinta-80); }
.di-busca-l .ico{ width:13px; height:13px; flex:none; margin-top:1px; color:var(--verde-osc); }
.di-cards{ display:flex; flex-direction:column; gap:7px; }
.di-card{ display:flex; flex-direction:column; gap:3px; padding:9px 12px; border-radius:10px; border:1px solid var(--linea); background:#fff; box-shadow:var(--sombra-1); }
.di-card.rec{ background:var(--tinta); border-color:var(--tinta); }
.di-card.rec b, .di-card.rec p{ color:#fff; }
.di-card.rec p{ color:rgba(255,255,255,.72); }
.di-card-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.di-tipo{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-osc); }
.di-card.rec .di-tipo{ color:var(--verde); }
.di-tipo .ico{ width:11px; height:11px; }
.di-pct{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--verde-agua); color:var(--verde-osc); }
.di-card.rec .di-pct{ background:rgba(255,255,255,.12); color:#fff; }
.di-card b{ font-size:12.6px; font-weight:600; line-height:1.3; }
.di-card p{ margin:0; font-size:11.3px; line-height:1.38; color:var(--tinta-60); }
.di-fuente{ display:inline-flex; align-items:center; gap:4px; font-size:10px; color:var(--tinta-45); }
.di-card.rec .di-fuente{ color:rgba(255,255,255,.5); }
.di-fuente .ico{ width:10px; height:10px; }

/* El resumen por WhatsApp al dueño */
.di-wa{ position:absolute; z-index:8; left:62px; bottom:40px; width:410px; padding:12px 14px 14px; border-radius:16px; background:#fff; border:1px solid var(--linea); box-shadow:0 24px 60px -20px rgba(10,10,10,.5); }
.di-wa-cab{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; }
.di-wa-cab b{ font-weight:600; }
.di-wa-cab em{ margin-left:auto; font-style:normal; color:var(--tinta-45); font-size:11px; }
.di-wa-logo{ width:22px; height:22px; border-radius:6px; background:#25d366; color:#fff; display:grid; place-items:center; }
.di-wa-logo .ico{ width:13px; height:13px; }
.di-wa-msg{ padding:8px 10px; border-radius:8px; background:#d9fdd3; }
.di-wa-de{ display:block; font-size:11px; font-weight:600; color:#00a884; margin-bottom:2px; }
.di-wa-msg p{ margin:0; font-size:12.6px; line-height:1.42; color:#111b21; }