/* =============================================================================
   componentes/panel-dev.css — Panel de datos internos (solo IPs de pruebas)
   -----------------------------------------------------------------------------
   Se pinta en la ficha de producto, la comparativa y los pasos de envío y pago.
   ============================================================================= */

/* Datos internos del producto (ID, cód. fabricante, referencia, EAN). Discreto pero
   reconocible: no debe confundirse con contenido de la tienda.

   Color "info" de Bootstrap 5.3 a través de sus variables (--bs-info-*) en vez de códigos
   fijos: así sigue el tema si algún día se activa el modo oscuro, y si se retoca la paleta
   este panel se actualiza solo. El borde va discontinuo para que se lea como algo interno
   y no como un aviso al cliente. */
.panel-dev {
    display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .9rem;
    margin:.5rem 0 1rem; padding:.4rem .75rem;
    border:1px dashed var(--bs-info-border-subtle); border-radius:.5rem;
    background:var(--bs-info-bg-subtle); color:var(--bs-info-text-emphasis);
}
.panel-dev strong { color:var(--bs-info-text-emphasis); }
.panel-dev code   { color:var(--bs-info-text-emphasis); }
/* El enlace del ID hereda el color del panel (la regla global de enlaces lo deja en
   `inherit`), pero al pasar por encima se teñiría de corporativo y cantaría dentro del
   bloque: se mantiene en el color info y solo se subraya. */
.panel-dev a:hover { color:var(--bs-info-text-emphasis); text-decoration:underline; }