.pc-webcams{
  --pc-gap:16px;
  --pc-bg:#ffffff;
  --pc-card:#f7f7f8;
  --pc-border:#e5e7eb;
  --pc-text:#111827;
  --pc-muted:#6b7280;
  --pc-thumb-bg:#f2f2f2;

  --pc-badge-bg:#f3f4f6;
  --pc-badge-border:#e5e7eb;
  --pc-badge-text:#374151;

  --pc-pill-bg:#ededed;
  --pc-pill-text:#3f3f46;

  --pc-page-bg:#f9fafb;
  --pc-page-text:#111827;
  --pc-page-active:#e5e7eb;
}

/* grid */
.pc-webcams .pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--pc-gap)}

/* card */
.pc-webcams .pc-card{
  background:var(--pc-card);
  border:1px solid var(--pc-border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* thumb */
.pc-webcams .pc-thumb-wrap{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--pc-thumb-bg)
}
.pc-webcams .pc-thumb{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block
}

/* live flag (neutral) */
.pc-webcams .pc-status{
  position:absolute;top:8px;left:8px;
  font:600 11px/1.8 system-ui;
  padding:2px 8px;border-radius:999px;
  background:var(--pc-pill-bg);color:var(--pc-pill-text);
  border:1px solid var(--pc-border);
}

/* body */
.pc-webcams .pc-body{padding:10px 12px}
.pc-webcams .pc-h3{margin:0 0 6px;font:600 14px/1.3 system-ui;color:var(--pc-text)}
.pc-webcams .pc-h3 a{color:inherit;text-decoration:none}

/* meta row */
.pc-webcams .pc-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pc-webcams .pc-badge{
  font:600 11px/1.8 system-ui;
  color:var(--pc-badge-text);
  background:var(--pc-badge-bg);
  border:1px solid var(--pc-badge-border);
  border-radius:6px;padding:0 6px
}
.pc-webcams .pc-pill{
  font:600 11px/1.8 system-ui;
  color:var(--pc-pill-text);
  background:var(--pc-pill-bg);
  border:1px solid var(--pc-border);
  border-radius:999px;padding:0 8px
}

/* list variant */
.pc-webcams .pc-list{list-style:none;margin:0;padding:0}
.pc-webcams .pc-item-list{
  display:flex;gap:10px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--pc-border)
}
.pc-webcams .pc-dot{width:8px;height:8px;border-radius:50%;background:#d1d5db}
.pc-webcams .pc-dot.pc-online{background:#bdbdbd}
.pc-webcams .pc-dot.pc-offline{background:#d6d6d6}

/* pagination */
.pc-webcams .pc-pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:16px 0}
.pc-webcams .pc-page{
  font:600 12px/2 system-ui;padding:0 10px;border-radius:8px;
  border:1px solid var(--pc-border);text-decoration:none;
  color:var(--pc-page-text);background:var(--pc-page-bg)
}
.pc-webcams .pc-page:hover{background:var(--pc-page-active)}
.pc-webcams .pc-page.current{background:var(--pc-page-active)}

/* empty state */
.pc-webcams .pc-empty{opacity:.8;color:var(--pc-muted)}

.pc-webcams .pc-h3 { display:flex; align-items:center; gap:6px }
.pc-webcams .pc-h3 a { flex:0 1 auto }
/* Verified icon en color (sin desaturar) */
.pc-webcams .pc-verified{
  width:14px;height:14px;display:inline-block;vertical-align:middle;
  margin-left:4px; image-rendering:auto;
  filter:none !important;
  opacity:1 !important;
}

/* (si es SVG) asegúrate de que respete su color */
.pc-webcams .pc-verified svg{
  filter:none !important;
  opacity:1 !important;
  fill:currentColor; /* opcional: solo si usas currentColor */
}

/* mantén el margen en lista */
.pc-webcams .pc-item-list .pc-title + .pc-verified{ margin-left:6px }


/* tarjetas un poco más pequeñas */
.pc-webcams .pc-grid{
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* antes 220px */
}

/* que los badges no salten de línea */
.pc-webcams .pc-badge{
  white-space: nowrap;
  display: inline-block;
}

/* opcional: si un nombre es larguísimo, recorta con puntos */
.pc-webcams .pc-badge{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Verified fijo junto al nombre */
.pc-webcams .pc-h3{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:flex-start;   /* evita space-between heredado */
}

.pc-webcams .pc-h3 a{
  flex:0 0 auto;                /* no crece ni empuja el icono */
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pc-webcams .pc-verified{
  flex:0 0 auto;                /* no se estira */
  margin-left:6px !important;   /* siempre pegado al título */
}