/* Demo 20 · Control de proveedores: la app (izquierda) con lista → ficha → factura comparada y los avisos · el navegador (derecha) */
.d-prv .dpv-app{ left:30px; top:22px; width:560px; height:576px; }
.d-prv .toast{ left:auto; right:40px; top:auto; bottom:28px; margin:0; }
.dpv-main{ position:relative; flex:1; min-width:0; overflow:hidden; }
.dpv-vista{ position:absolute; inset:0; padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.dpv-capa{ position:absolute; inset:0; background:#fff; }
.dpv-vista.fuera, .dpv-avisos:has(> .fuera){ display:none; }
.dpv-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.dpv-cab b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.015em; margin-top:3px; }
.dpv-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:4px 9px; border-radius:999px; background:var(--nieve); color:var(--tinta-60); white-space:nowrap; }
.dpv-chip .ico{ width:11px; height:11px; }
.dpv-chip.leida{ margin-left:auto; background:var(--verde-agua); color:var(--verde-osc); }

/* Tablas */
.dpv-tabla{ width:100%; border-collapse:collapse; font-size:12px; }
.dpv-tabla th{ text-align:left; font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-45); padding:6px 8px; border-bottom:1px solid var(--linea); }
.dpv-tabla td{ padding:8px; border-bottom:1px solid var(--linea); vertical-align:middle; color:var(--tinta-80); }
.dpv-tabla td b{ display:block; font-weight:600; color:var(--tinta); font-size:12.4px; }
.dpv-tabla td em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); margin-top:1px; }
.dpv-num{ text-align:right; white-space:nowrap; }
.dpv-tabla th:nth-child(n+2){ text-align:right; }
.dpv-lista .dpv-tabla td:first-child{ display:flex; align-items:center; gap:9px; }
.dpv-av{ width:30px; height:30px; flex:none; border-radius:8px; background:var(--nieve-2); color:var(--tinta-80); font-size:10.5px; font-weight:600; display:grid; place-items:center; }
.dpv-av.gr{ background:#f3e8dc; color:#8a5a2b; } .dpv-av.az{ background:#e3edf8; color:#2b5a8a; }
.dpv-nom{ display:flex; flex-direction:column; min-width:0; }
.dpv-rev{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:500; padding:3px 8px; border-radius:999px; background:var(--nieve); color:var(--tinta-30); white-space:nowrap; }
.dpv-rev .ico{ width:10px; height:10px; stroke-width:2.6; opacity:0; }
.dpv-rev.ok{ background:var(--verde-agua); color:var(--verde-osc); }
.dpv-rev.ok .ico{ opacity:1; }
.dpv-pral.d-sel, .dpv-lista:has(.dpv-cursor.pulsa) .dpv-pral{ background:var(--verde-agua); }
.dpv-cursor{ position:absolute; left:210px; top:118px; width:22px; height:22px; opacity:0; transition:opacity .3s, transform .5s; }
.dpv-cursor .ico{ width:22px; height:22px; }
.dpv-cursor.pulsa{ opacity:1; transform:translate(-8px, -4px) scale(.92); }

/* Ficha del proveedor */
.dpv-prov{ display:flex; align-items:center; gap:10px; }
.dpv-prov .dpv-av{ width:40px; height:40px; font-size:12px; border-radius:10px; }
.dpv-prov b{ display:block; font-size:16px; font-weight:600; letter-spacing:-.015em; }
.dpv-prov em{ display:block; font-style:normal; font-size:11.5px; color:var(--tinta-60); }
.dpv-conds{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.dpv-conds span{ display:flex; flex-direction:column; gap:1px; padding:7px 9px; border-radius:8px; background:var(--nieve); }
.dpv-conds em{ font-style:normal; font-size:10px; color:var(--tinta-45); }
.dpv-conds b{ font-size:11.8px; font-weight:600; }
.dpv-prods th:nth-child(2), .dpv-prods th:nth-child(3){ width:84px; }
.dpv-estrella td{ background:transparent; transition:background .4s; }
.dpv-vista:has(.dpv-marca:not(.oculto)) .dpv-estrella td{ background:var(--verde-agua); }
.dpv-marca{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; background:var(--tinta); color:#fff; font-size:11.5px; font-weight:500; }
.dpv-marca .ico{ width:12px; height:12px; color:var(--verde); }

/* Factura comparada */
.dpv-comp td:nth-child(3){ font-weight:600; color:var(--tinta-30); transition:color .4s; }
.dpv-comp tr.sube td:nth-child(3){ color:#c2410c; }
.dpv-pct{ display:inline-block; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:999px; background:#fdecdf; color:#c2410c; opacity:0; transition:opacity .4s; }
.dpv-comp tr.sube .dpv-pct{ opacity:1; }
.dpv-total{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:10px 12px; border-radius:10px; background:var(--nieve); font-size:12px; color:var(--tinta-60); }
.dpv-total b{ text-align:right; font-weight:600; color:var(--tinta); }
.dpv-rojo{ color:#c2410c !important; }

/* Avisos de tu agente (panel sobre la app) */
.dpv-avisos{ position:absolute; z-index:4; right:10px; bottom:10px; width:300px; }
.dpv-avisos:not(.fin) > div, .dpv-avisos.fin{ display:flex; flex-direction:column; gap:7px; padding:10px; border-radius:14px; background:rgba(255,255,255,.96); border:1px solid var(--linea); box-shadow:0 24px 50px -18px rgba(10,10,10,.45); }
.dpv-avisos.fin{ padding:10px; }
.dpv-av-cab{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--tinta-60); padding:0 2px; }
.dpv-av-cab .ico{ width:13px; height:13px; }
.dpv-av-cab b{ font-weight:600; color:var(--tinta); }
.dpv-aviso{ display:grid; grid-template-columns:26px 1fr; gap:9px; padding:9px 10px; border-radius:10px; border:1px solid var(--linea); background:#fff; }
.dpv-aviso.ok{ border-color:rgba(60,193,160,.5); }
.dpv-aviso.mal{ border-color:#f5c7a9; background:#fffaf6; }
.dpv-av-ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--verde-agua); color:var(--verde-osc); }
.dpv-aviso.mal .dpv-av-ic{ background:#fdecdf; color:#c2410c; }
.dpv-av-ic .ico{ width:14px; height:14px; }
.dpv-aviso b{ display:block; font-size:12px; font-weight:600; line-height:1.3; }
.dpv-aviso p{ margin:3px 0 0; font-size:11px; line-height:1.4; color:var(--tinta-60); }
.dpv-av-cifras{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.dpv-av-cifras i{ font-style:normal; font-size:10px; font-weight:600; padding:2px 7px; border-radius:999px; background:var(--nieve); color:var(--tinta-80); }
.dpv-aviso.ok .dpv-av-cifras i:nth-child(2){ background:var(--verde-agua); color:var(--verde-osc); }
.dpv-aviso.mal .dpv-av-cifras i:nth-child(2), .dpv-aviso.mal .dpv-av-cifras i:nth-child(3){ background:#fdecdf; color:#c2410c; }
.dpv-av-btn{ display:inline-flex; align-items:center; gap:4px; margin-top:7px; font-size:11px; font-weight:600; color:var(--tinta); }
.dpv-av-btn .ico{ width:11px; height:11px; }
.dpv-avisos.fin .dpv-aviso.ok{ opacity:.8; }
.dpv-avisos.fin .dpv-aviso.ok p, .dpv-avisos.fin .dpv-aviso.ok .dpv-av-cifras i:first-child, .dpv-avisos.fin .dpv-aviso.ok .dpv-av-cifras i:last-child{ display:none; }
/* La campana con el número de avisos */
.dpv-campana{ position:relative; display:inline-grid; }
.dpv-n{ position:absolute; right:-6px; top:-6px; min-width:15px; height:15px; padding:0 4px; border-radius:999px; background:#e5484d; color:#fff; font-style:normal; font-size:9.5px; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px #fff; }
.dpv-n:has(~ .dpv-n:not(.oculto)){ display:none; }

/* El navegador */
.d-prv .dpv-nav{ position:absolute; z-index:3; left:612px; top:22px; width:360px; 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-prv .dpv-logo{ left:590px; top:4px; background:var(--tinta); color:#fff; }
.dpv-tabs{ flex:none; display:flex; align-items:flex-end; gap:2px; height:38px; padding:0 8px 0 52px; background:#e9eaee; overflow:hidden; }
.dpv-tab{ display:flex; align-items:center; gap:6px; min-width:0; max-width:110px; height:30px; padding:0 10px; border-radius:9px 9px 0 0; font-size:11px; color:var(--tinta-60); }
.dpv-tab b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dpv-tab .ico{ width:12px; height:12px; flex:none; }
.dpv-tab:not(:has(~ .dpv-tab:not(.oculto))){ background:#fff; color:var(--tinta); }
.dpv-barra{ flex:none; display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border-bottom:1px solid var(--linea); }
.dpv-flechas{ display:flex; gap:8px; color:var(--tinta-45); }
.dpv-flechas .ico{ width:14px; height:14px; }
.dpv-url{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px; background:var(--nieve); font-size:11px; color:var(--tinta-80); }
.dpv-url .ico{ width:11px; height:11px; color:var(--tinta-45); flex:none; }
.dpv-url-t{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dpv-url-t span:has(~ span:not(.oculto)){ display:none; }
.dpv-pags{ flex:1; min-height:0; position:relative; }
.dpv-pag{ position:absolute; inset:0; padding:14px 14px 18px; display:flex; flex-direction:column; gap:9px; overflow:hidden; background:#fff; }
.dpv-pag:has(~ .dpv-pag:not(.oculto)){ display:none; }
.dpv-vacia{ display:grid; place-items:center; color:var(--tinta-30); font-size:12.5px; }
.dpv-vacia span{ display:inline-flex; align-items:center; gap:8px; }
.dpv-vacia .ico{ width:15px; height:15px; }
.dpv-q{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; border:1px solid var(--linea); font-size:12px; color:var(--tinta); box-shadow:var(--sombra-1); }
.dpv-q .ico{ width:13px; height:13px; color:var(--tinta-45); flex:none; }
.dpv-pag-sub{ font-size:11px; color:var(--tinta-45); }
.dpv-res{ display:grid; grid-template-columns:44px 1fr; gap:10px; align-items:center; padding:8px; border-radius:10px; border:1px solid var(--linea); transition:opacity .4s, background .4s, border-color .4s; position:relative; }
.dpv-foto{ width:44px; height:40px; border-radius:7px; background:linear-gradient(135deg, #efe7dc, #e2d5c4); color:rgba(10,10,10,.28); display:grid; place-items:center; }
.dpv-foto .ico{ width:16px; height:16px; }
.dpv-foto.gr{ width:64px; height:56px; background:linear-gradient(135deg, #e9dcc9, #d6c3a6); }
.dpv-res-t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dpv-res-t b{ font-size:11.8px; font-weight:600; line-height:1.3; }
.dpv-res-t em{ font-style:normal; font-size:10.8px; color:var(--tinta-60); line-height:1.3; }
.dpv-res-t i{ font-style:normal; font-size:12px; font-weight:600; margin-top:2px; }
.dpv-m{ display:none; position:absolute; right:8px; top:8px; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:999px; font-size:10px; font-weight:600; white-space:nowrap; }
.dpv-m .ico{ width:10px; height:10px; stroke-width:2.6; }
.dpv-res.encaja{ border-color:var(--verde); background:var(--verde-agua); }
.dpv-res.encaja .dpv-m.si, .dpv-m.si.dpv-conf{ display:inline-flex; background:var(--verde); color:var(--tinta); }
.dpv-res.descarta{ opacity:.5; }
.dpv-res.descarta .dpv-m.no{ display:inline-flex; background:var(--nieve-2); color:var(--tinta-60); }
.dpv-res .dpv-m{ top:auto; bottom:8px; }
.dpv-lee{ position:absolute; left:10px; right:10px; top:90px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--verde), transparent); box-shadow:0 0 12px rgba(60,193,160,.6); animation:dpv-lee 2.6s ease-in-out infinite; pointer-events:none; }
@keyframes dpv-lee{ 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ transform:translateY(300px); opacity:0; } }
.dpv-prod-cab{ display:flex; gap:11px; align-items:center; }
.dpv-prod-cab b{ display:block; font-size:13.5px; font-weight:600; line-height:1.3; }
.dpv-prod-cab em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); }
.dpv-oferta{ display:inline-block; margin-top:4px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; background:#fdecdf; color:#c2410c; }
.dpv-specs{ display:flex; flex-direction:column; border:1px solid var(--linea); border-radius:10px; overflow:hidden; }
.dpv-spec{ display:grid; grid-template-columns:86px 1fr 1fr 18px; gap:8px; align-items:center; padding:6px 10px; font-size:11px; border-top:1px solid var(--linea); }
.dpv-spec:first-child{ border-top:0; }
.dpv-spec.cab{ background:var(--nieve); font-size:10px; font-weight:600; color:var(--tinta-60); }
.dpv-spec.cab em, .dpv-spec.cab b{ font-weight:600; }
.dpv-spec > span:first-child{ color:var(--tinta-45); }
.dpv-spec em{ font-style:normal; color:var(--tinta-80); }
.dpv-spec b{ font-weight:600; }
.dpv-tick{ width:16px; height:16px; border-radius:50%; background:var(--verde); color:var(--tinta); display:grid; place-items:center; opacity:0; transition:opacity .3s; }
.dpv-tick .ico{ width:9px; height:9px; stroke-width:3; }
.dpv-spec.ok .dpv-tick{ opacity:1; }
.dpv-precios{ display:flex; align-items:flex-end; gap:16px; padding:10px 12px; border-radius:10px; background:var(--tinta); color:#fff; }
.dpv-precios span{ display:flex; flex-direction:column; gap:1px; }
.dpv-precios em{ font-style:normal; font-size:10px; color:rgba(255,255,255,.6); }
.dpv-precios b{ font-size:17px; font-weight:500; letter-spacing:-.02em; }
.dpv-precios .tachado{ text-decoration:line-through; color:rgba(255,255,255,.55); font-size:14px; }
.dpv-ahorro{ margin-left:auto; padding:4px 10px; border-radius:999px; background:var(--verde); color:var(--tinta); font-size:13px !important; font-weight:700; }
.dpv-web-cab{ display:flex; align-items:center; gap:9px; padding-bottom:10px; border-bottom:1px solid var(--linea); }
.dpv-web-cab b{ font-size:13px; font-weight:600; }
.dpv-pdf{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; border:1px solid var(--linea); }
.dpv-pdf b{ display:block; font-size:12.5px; font-weight:600; }
.dpv-pdf em{ display:block; font-style:normal; font-size:11px; color:var(--tinta-60); }
.dpv-cita{ margin:0; padding:10px 12px; border-left:3px solid #f5a372; background:#fffaf6; font-size:12px; line-height:1.5; color:var(--tinta-80); border-radius:0 8px 8px 0; }
.dpv-conf{ position:static; align-self:flex-start; }
.dpv-agente{ position:absolute; left:12px; bottom:12px; 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; }
.dpv-agente .ico{ width:12px; height:12px; color:var(--verde); }