/* Vista previa en Google */
.vp-count { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 12px; color: var(--paper-faint); }
.vp-count .vp-num b { color: var(--paper); font-weight: 500; }
.vp-count.bad .vp-num b { color: var(--tl-bad); }
.vp-count.warn .vp-num b { color: var(--tl-warn); }
.vp-extras { display: grid; gap: 18px; }
.vp-extra { display: grid; gap: 8px; }
.vp-extra .pg-input[type="date"] { max-width: 220px; color-scheme: dark; }
html[data-theme="light"] .vp-extra .pg-input[type="date"] { color-scheme: light; }
.vp-fav-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-fav-prev { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-strong); }
.vp-fav-prev[hidden] { display: none; }
.vp-fav-prev img { width: 20px; height: 20px; object-fit: contain; }
.vp-file { position: relative; overflow: hidden; }
.vp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.vp-file:focus-within { outline: 2px solid #f036e1; outline-offset: 3px; }
.vp-rate { margin-top: 4px; }
.vp-acts { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.vp-out .tl-seg button { display: inline-flex; align-items: center; gap: 6px; }
.vp-kpis { margin-top: 18px; }
.vp-kpis dd { font-size: 17px; }
.vp-kpis dd.bad { color: var(--tl-bad); } .vp-kpis dd.warn { color: var(--tl-warn); }
.vp-disc { margin-top: 12px; }

/* Escenario: siempre con aspecto de Google en tema claro, se desplaza dentro si no cabe */
.vp-stage { border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.vp-serp { font-family: Arial, 'Liberation Sans', Helvetica, sans-serif; color: #202124; background: #fff; text-align: left; }
.vp-desk { padding: 24px 20px 26px; min-width: 640px; }
.vp-desk .vp-res { max-width: 600px; }
.vp-res { -webkit-font-smoothing: antialiased; }
.vp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.vp-favi { width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; }
.vp-favi img { width: 18px; height: 18px; object-fit: contain; }
.vp-letter { font-size: 13px; font-weight: 700; color: #5f6368; }
.vp-src { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.vp-site { font-size: 14px; color: #202124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-cite { font-size: 12px; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-crumb { color: #4d5156; }
.vp-more { color: #4d5156; margin-left: 2px; display: grid; place-items: center; width: 20px; }
.vp-t { margin: 0 0 3px; padding: 0; font-family: inherit; font-size: 20px; line-height: 1.3; font-weight: 400; color: #1a0dab; white-space: nowrap; letter-spacing: 0; }
.vp-t.ph, .vp-d.ph { opacity: .45; }
.vp-d { font-size: 14px; line-height: 1.58; color: #4d5156; overflow-wrap: break-word; }
.vp-d b { color: #202124; font-weight: 700; }
.vp-date { color: #70757a; }
.vp-stars { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; color: #70757a; flex-wrap: wrap; }
.vp-st { display: inline-flex; gap: 1px; }
.vp-st i { width: 13px; height: 13px; background: #dadce0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.vp-st i.on { background: #fbbc04; }
.vp-st i.half { background: linear-gradient(90deg, #fbbc04 50%, #dadce0 50%); }

/* Celular */
.vp-phone { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 22px 12px; background: linear-gradient(180deg, #eef0f3, #e4e7eb); }
.vp-phone[hidden] { display: none; }
.vp-m { width: 100%; max-width: 360px; min-width: 0; border-radius: 22px; padding: 14px 16px 18px; box-shadow: 0 0 0 7px #1d1a21, 0 18px 40px -16px rgba(0,0,0,.45); }
.vp-mbar { display: flex; align-items: center; gap: 10px; margin: 0 -4px 16px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 1px 6px rgba(32,33,36,.18); font-size: 14px; color: #202124; }
.vp-g { font-weight: 700; color: #4285f4; letter-spacing: -.02em; }
.vp-mq { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3c4043; }
.vp-m .vp-t { white-space: normal; font-size: 20px; line-height: 1.3; margin-top: 2px; }
.vp-m .vp-d { margin-top: 4px; }
@media (max-width: 420px) { .vp-desk { padding: 20px 18px; } }
.tl-app.vp { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.vp-out { padding: 24px; }
@media (max-width: 1040px) { .tl-app.vp { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .vp-out { padding: 20px 16px; } }
.vp-in .tl-stack + .tl-group { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.vp-extra .help { font-size: 12px; color: var(--paper-faint); }
.vp-extras { gap: 10px; }
@media (min-width: 1041px) { .vp-sk { grid-template-columns: 1fr; } }