/* ==========================================================================
   Iconography & Utility Classes for Regalo.Web
   
   POLÍTICA DE ICONOS — leer antes de modificar:
   ───────────────────────────────────────────────
   1. LIBRERÍA:     Bootstrap Icons v1.11.3 (CDN font-face).
                    Los iconos de formulario usan <i class="bi bi-xxx">.
   
   2. VARIANTE:     Solo se usa la variante OUTLINE (sin sufijo -fill).
                    Los section-badges, inline de texto y botones de acción
                    deben usar exclusivamente iconos outline.
                    Excepciones permitidas: redes sociales (brand icons).
   
   3. TAMAÑOS:      No usar clases Bootstrap fs-1…fs-6 ni display-N para
                    iconos dentro de formularios. Usar las utilidades .icon-*
                    definidas aquí. Tamaño canónico para inline: icon-md (1rem).
   
   4. SVG DE ASSETS: Los archivos en /assets/icons/ siguen el estándar Lucide:
                    viewBox="0 0 24 24", fill="none", stroke="currentColor",
                    stroke-width="1.75", stroke-linecap="round",
                    stroke-linejoin="round". Sin colores hardcodeados.
                    Usar con la clase .icon-asset para normalizar el tamaño.
   ========================================================================== */

/* ── Bootstrap Icons: base de alineación ─────────────────────────────────── */
.bi,
[class^="bi-"],
[class*=" bi-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

/* ── Escala canónica de iconos ────────────────────────────────────────────── */
/* Formularios: usa icon-md (1rem). Evitar cualquier otro tamaño ad-hoc.      */
.icon-xs  { font-size: 0.75rem;  }   /* 12px — metadata, chips pequeños      */
.icon-sm  { font-size: 0.875rem; }   /* 14px — inline en badges, pills       */
.icon-md  { font-size: 1rem;     }   /* 16px — CANÓNICO para inline de texto  */
.icon-lg  { font-size: 1.125rem; }   /* 18px — section-badges, sub-headers   */
.icon-xl  { font-size: 1.5rem;   }   /* 24px — page headers                  */
.icon-2xl { font-size: 2rem;     }   /* 32px — hero / empty-state            */

/* ── SVG de /assets/icons/ ───────────────────────────────────────────────── */
/* Todos los SVGs de assets siguen el estándar Lucide (stroke="currentColor") */
/* Aplicar .icon-asset para dimensiones y alineación consistentes.            */
.icon-asset {
    display: inline-block;
    vertical-align: -0.125em;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Variantes de tamaño para .icon-asset */
.icon-asset.icon-xs  { width: 0.75rem;  height: 0.75rem;  }
.icon-asset.icon-sm  { width: 0.875rem; height: 0.875rem; }
.icon-asset.icon-md  { width: 1rem;     height: 1rem;     }
.icon-asset.icon-lg  { width: 1.125rem; height: 1.125rem; }
.icon-asset.icon-xl  { width: 1.5rem;   height: 1.5rem;   }
.icon-asset.icon-2xl { width: 2rem;     height: 2rem;     }

/* ── Botones de acción con icono (tablas y listas) ───────────────────────── */
.icon-action {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: all 0.15s ease-in-out;
}

.icon-action:hover {
    transform: translateY(-1px);
}

.icon-action .bi {
    font-size: 1rem;
    line-height: 1;
}

/* ── Input groups con icono de búsqueda ──────────────────────────────────── */
.input-group-text .bi {
    font-size: 0.95rem;
}

/* ── Section-badge de formulario (header de sección con icono) ───────────── */
/* Tamaño fijo icon-lg (1.125rem) — no usar fs-* de Bootstrap.               */
.section-badge .bi,
.section-badge .icon-asset {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

/* ── OTP / Shield icon wrappers ─────────────────────────────────────────── */
.otp-icon-wrapper .bi,
.success-icon-wrapper .bi {
    font-size: 2rem;
}

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty-state-icon,
.empty-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(190, 24, 93, 0.08);
    color: var(--brand-700, #be185d);
    margin-bottom: 0.85rem;
}

.empty-state-icon .bi,
.empty-icon-wrapper .bi {
    font-size: 1.5rem;
}

/* ── Badges con iconos ───────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge .bi,
.badge .icon-asset {
    font-size: 0.85em;
    vertical-align: -0.05em;
    flex-shrink: 0;
}

/* ── Status pills ────────────────────────────────────────────────────────── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.status-pill .bi,
.status-pill .icon-asset {
    font-size: 0.85em;
    margin-right: 0.35rem;
    flex-shrink: 0;
}

/* ── Hero badges, Chips & Action tags ───────────────────────────────────── */
.hero-badge,
.otp-email-chip,
.category-pill-tag,
.trust-pill,
.affiliate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-badge .bi,
.otp-email-chip .bi,
.category-pill-tag .bi,
.trust-pill .bi,
.affiliate-badge .bi {
    flex-shrink: 0;
}

/* ── Config icon badges (panel admin) ───────────────────────────────────── */
/* Tamaño fijo icon-xl (1.5rem) para consistencia entre cards de config.     */
.config-icon-badge .bi {
    font-size: 1.5rem;
}