/* =====================================================
   VGO STG — Sistema de iconos "Cristal" (look 2a)
   Badge de vidrio esmerilado + iconos Phosphor duotone.
   Paleta de marca: azul · verde · teal · ámbar.
   Requiere Iconify (lo carga vgo-icons.js) para los glifos.
   ===================================================== */

.vgo-ico {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  font-size: 21px;
  vertical-align: middle;
  flex: none;
  background: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.95),
              0 6px 16px -8px var(--vgo-ico-sh, rgba(21, 101, 192, 0.5));
  color: var(--vgo-ico-glyph, #1050b0);
}

/* Resplandor de color detrás del vidrio */
.vgo-ico::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 15px;
  background: var(--vgo-ico-glow, linear-gradient(140deg, #1976d2, #42a5f5));
  filter: blur(9px);
  opacity: 0.5;
  z-index: -1;
}

.vgo-ico > iconify-icon,
.vgo-ico > i,
.vgo-ico > svg { position: relative; z-index: 1; line-height: 1; }

/* ---- Tonos (azul y verde de marca + teal y ámbar de estado) ---- */
.vgo-ico--blue  { --vgo-ico-glyph:#1050b0; --vgo-ico-sh:rgba(21,101,192,.5);  --vgo-ico-glow:linear-gradient(140deg,#1976d2,#42a5f5); }
.vgo-ico--green { --vgo-ico-glyph:#1b5e20; --vgo-ico-sh:rgba(46,125,50,.5);   --vgo-ico-glow:linear-gradient(140deg,#2e7d32,#66bb6a); }
.vgo-ico--teal  { --vgo-ico-glyph:#0e6a61; --vgo-ico-sh:rgba(15,138,126,.5);  --vgo-ico-glow:linear-gradient(140deg,#0f8a7e,#22c2a0); }
.vgo-ico--amber { --vgo-ico-glyph:#b45309; --vgo-ico-sh:rgba(180,83,9,.5);    --vgo-ico-glow:linear-gradient(140deg,#d97706,#fbbf24); }
.vgo-ico--red   { --vgo-ico-glyph:#b71c1c; --vgo-ico-sh:rgba(211,47,47,.5);   --vgo-ico-glow:linear-gradient(140deg,#c62828,#ef5350); }

/* ---- Tamaños ---- */
.vgo-ico--xs { width:28px; height:28px; border-radius:8px;  font-size:14px; }
.vgo-ico--sm { width:34px; height:34px; border-radius:10px; font-size:15px; }
.vgo-ico--lg { width:60px; height:60px; border-radius:18px; font-size:26px; }
.vgo-ico--xl { width:72px; height:72px; border-radius:20px; font-size:32px; }
.vgo-ico--xs::before,
.vgo-ico--sm::before { inset:3px; border-radius:10px; filter:blur(6px); }

/* ---- Chip sobre superficie oscura (navbar/headers de color) ---- */
.vgo-ico--on-dark {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.40);
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.vgo-ico--on-dark::before { opacity: 0.35; }

/* ---- Modo oscuro (respeta el data-theme="dark" del tema VGO) ---- */
[data-theme="dark"] .vgo-ico {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22),
              0 6px 16px -8px var(--vgo-ico-sh, rgba(21, 101, 192, 0.6));
}
[data-theme="dark"] .vgo-ico--blue  { --vgo-ico-glyph:#7bb6f5; }
[data-theme="dark"] .vgo-ico--green { --vgo-ico-glyph:#8fd694; }
[data-theme="dark"] .vgo-ico--teal  { --vgo-ico-glyph:#5fd6c6; }
[data-theme="dark"] .vgo-ico--amber { --vgo-ico-glyph:#f5c26b; }
[data-theme="dark"] .vgo-ico--red   { --vgo-ico-glyph:#ef9a9a; }
[data-theme="dark"] .vgo-ico::before { opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  .vgo-ico { transition: none; }
}