/**
 * COMPONENTS / BADGE
 * -----------------------------------------------------------------------------
 * Etiquetas pequeñas: destacados de producto, píldora del hero y avisos.
 *
 *   <span class="badge badge--orange">Más vendido</span>
 *   <span class="pill">Energía solar · Instalación certificada</span>
 */

.badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.4px;
    padding: 5px 11px;
    border-radius: var(--radius-xs);
    z-index: var(--z-base);
}

/* Cuando la etiqueta va dentro del flujo y no sobre una imagen */
.badge--static {
    position: static;
    display: inline-block;
}

.badge--blue  { background: var(--blue); }
.badge--navy  { background: var(--navy); }
.badge--green { background: var(--green); }

/* =============================================================
   PÍLDORA (hero y cabeceras)
============================================================= */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-sm);
    letter-spacing: 0.3px;
    font-weight: var(--fw-medium);
    color: #8fb4e6;
    background: var(--blue-tint-12);
    border: 1px solid var(--blue-tint-28);
    padding: 8px 15px;
    border-radius: var(--radius-pill);
}

.pill--light {
    color: var(--blue);
    background: var(--blue-soft);
    border-color: var(--border-blue);
}

/* =============================================================
   AVISO PARA ADMINISTRADORES
   Solo se muestra a usuarios con permisos; explica qué falta configurar.
============================================================= */

.admin-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--orange-soft);
    border: 1px dashed var(--orange);
    border-radius: var(--radius-sm);
    color: #8a4a06;
    font-size: var(--fs-base);
}

.admin-notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--orange);
}

.admin-notice a {
    color: #8a4a06;
    text-decoration: underline;
}